/* The Measured Sheet, for the demos. Tokens are copied from the homepage (kevindemo.github.io/styles.css and DESIGN.md).
   The only additions are --warn and --error, muted, for states where the meaning needs them. Green still means delivered or succeeded. */

:root {
  color-scheme: light;

  --ground: #f6f6f4;
  --surface: #ffffff;
  --surface-raised: #fbfbf9;
  --line: #e2e2de;
  --line-strong: #c9c9c4;
  --ink: #101113;
  --ink-2: #4f5257;
  --ink-3: #66696e;
  --accent: #0a6b4a;
  --meter: #85888d;
  --segment: #e2e2de;
  --on-ink: #ffffff;
  --warn: #7a5a14;
  --error: #9a3b32;
  --display-weight: 560;

  --t-label: .8rem;
  --t-small: .875rem;
  --t-body: 1rem;
  --t-lead: 1.25rem;
  --t-title: 1.563rem;
  --t-heading: clamp(1.953rem, 1.6rem + 1.2vw, 2.441rem);
  --t-figure: clamp(2.441rem, 2rem + 1.4vw, 3.052rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  --r-sm: 2px;
  --r: 4px;

  --page: 80rem;
  --gutter: clamp(var(--s-5), 4vw, var(--s-10));
  --measure: 34rem;

  --sans: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Declared twice on purpose: the media block is what makes System work without JS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0a0b0c;
    --surface: #111315;
    --surface-raised: #16181b;
    --line: #232529;
    --line-strong: #383b40;
    --ink: #edeef0;
    --ink-2: #a6a9af;
    --ink-3: #8e9299;
    --accent: #3fcf8e;
    --meter: #6e7177;
    --segment: #2a2d31;
    --on-ink: #0a0b0c;
    --warn: #c8a765;
    --error: #dc8f86;
    --display-weight: 500;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0a0b0c;
  --surface: #111315;
  --surface-raised: #16181b;
  --line: #232529;
  --line-strong: #383b40;
  --ink: #edeef0;
  --ink-2: #a6a9af;
  --ink-3: #8e9299;
  --accent: #3fcf8e;
  --meter: #6e7177;
  --segment: #2a2d31;
  --on-ink: #0a0b0c;
  --warn: #c8a765;
  --error: #dc8f86;
  --display-weight: 500;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-color: var(--line-strong) var(--ground); -webkit-text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset, pre { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
strong { font-weight: 600; }
a { color: inherit; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: .3em; }
a:hover { text-decoration-color: currentColor; }
p { max-width: var(--measure); text-wrap: pretty; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }

h1 { font-size: var(--t-heading); font-weight: var(--display-weight); line-height: 1.1; letter-spacing: -.03em; margin-left: -.03em; text-wrap: balance; }
h2 { font-size: var(--t-lead); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
h3 { font-size: var(--t-body); font-weight: 500; line-height: 1.4; letter-spacing: -.005em; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hint { color: var(--ink-2); font-size: var(--t-small); }
.mono { font-family: var(--mono); font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }

/* The sheet: same width as the homepage, with its edges drawn once the window is wider. */

.wrap { width: min(100%, var(--page)); margin-inline: auto; padding-inline: var(--gutter); }
.sheet { flex: 1; padding-inline: 0; }

/* Header */

.topbar { background: var(--ground); border-bottom: 1px solid var(--line); }

.topbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-6);
  padding-block: var(--s-2);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
}

.mark-box {
  display: grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--on-ink);
  font: 500 .64rem/1 var(--mono);
}

.product { color: var(--ink-2); font-size: var(--t-label); }

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-6);
  margin-left: auto;
  font-size: var(--t-label);
}

.topbar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s;
}
.topbar nav a:hover { color: var(--ink); }

/* Theme switcher. Without JS the page follows the system by itself, so the control is hidden. */

.theme {
  display: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--t-label);
  line-height: 1;
}
.js .theme { display: inline-flex; }
.theme label { position: relative; display: block; }
.theme input { position: absolute; inset: 0; width: auto; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme span {
  display: flex;
  align-items: center;
  min-height: var(--s-8);
  padding-inline: var(--s-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  transition: color .15s;
}
.theme label:hover span { color: var(--ink); }
.theme input:checked + span { background: var(--segment); color: var(--ink); }
.theme input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }

.banner {
  max-width: none;
  padding-block: var(--s-2);
  color: var(--ink-2);
  font: 400 var(--t-label)/1.5 var(--mono);
}
.banner-band { border-bottom: 1px solid var(--line); background: var(--surface-raised); }

/* Sections */

.intro { padding: var(--s-12) var(--gutter) var(--s-10); border-bottom: 1px solid var(--line); }
.intro p { margin-top: var(--s-4); color: var(--ink-2); }

.foot { padding: var(--s-6) var(--gutter) var(--s-10); color: var(--ink-3); font-size: var(--t-label); }

/* Controls */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--s-10);
  padding: 0 var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--on-ink);
  font: 500 var(--t-small)/1 var(--sans);
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
button:hover:not(:disabled), .button:hover { background: var(--ink-2); border-color: var(--ink-2); }
button:disabled { opacity: .5; cursor: default; }

button.ghost, .button.ghost { border-color: var(--line-strong); background: transparent; color: var(--ink); }
button.ghost:hover:not(:disabled), .button.ghost:hover { border-color: var(--line-strong); background: var(--surface); }

button.small { min-height: var(--s-8); padding: 0 var(--s-3); font-size: var(--t-label); }

button.link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
button.link:hover:not(:disabled) { background: none; text-decoration-color: currentColor; }

input, select, textarea {
  width: 100%;
  min-height: var(--s-10);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--t-label)/1.4 var(--mono);
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

/* Tables */

table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
th {
  padding: var(--s-2) var(--s-4) var(--s-2) 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-3);
  font: 400 var(--t-label)/1.4 var(--mono);
  text-align: left;
}
td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th.num, td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

pre, code { font-family: var(--mono); }
pre {
  padding: var(--s-4);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--t-label);
  line-height: 1.6;
}

/* Status: a 6px dot and a word in mono, as on the homepage. Green only for delivered or succeeded. */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-2);
  font: 400 var(--t-label)/1.4 var(--mono);
  white-space: nowrap;
}
.status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--meter); }
.status.good::before { background: var(--accent); }
.status.warn { color: var(--warn); }
.status.warn::before { background: var(--warn); }
.status.bad { color: var(--error); }
.status.bad::before { background: var(--error); }

.error { color: var(--error); font-size: var(--t-small); }

/* Stat row: ruled cells, as the homepage's scale row. */

.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.tally > * { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-6) var(--gutter); background: var(--ground); }
.tally strong, .tally .value { font-size: var(--t-heading); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tally span { margin-top: var(--s-2); color: var(--ink-3); font: 400 var(--t-label)/1.4 var(--mono); }

/* Measurement: square-ended bars on the true length. */

.meter + .meter { margin-top: var(--s-8); }
.meter figcaption { margin-bottom: var(--s-3); font-weight: 500; letter-spacing: -.005em; }
.meter-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 6rem; align-items: center; gap: var(--s-3); min-height: var(--s-6); }
.meter-key { color: var(--ink-3); font: 400 var(--t-label)/1.4 var(--mono); }
.meter-val { text-align: right; font: 400 var(--t-label)/1 var(--mono); font-variant-numeric: tabular-nums; }
.meter-track { display: block; height: var(--s-2); }
.meter-track i { display: block; height: 100%; min-width: 2px; }
.meter-before { background: var(--meter); }
.meter-after { background: var(--accent); }

@media (min-width: 81rem) {
  .wrap { border-inline: 1px solid var(--line); }
  .topbar .wrap, .banner-band .wrap { border-inline-color: var(--line); }
}

@media (pointer: coarse) {
  .theme span { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .meter-track i, .status::before { background: CanvasText; }
  .theme input:checked + span { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}