/* ---------------------------------------------------------------- tokens --
   Ground and panel are the details window's own colours. Terracotta and green
   are reserved for data: never a button, never a link. Colour means something
   here, exactly as it does in the app. */
:root {
  color-scheme: dark light;

  --ink:    #14161A;
  --panel:  #1F2126;
  --raised: #24272E;
  --line:   #2E323A;
  --text:   #ECEEF2;
  --muted:  #8B929E;
  --faint:  #656B77;

  --claude: #D97757;
  --codex:  #10A37F;
  --warn:   #E8B23C;
  --crit:   #E05A56;

  --sans: "Segoe UI Variable Display", "Segoe UI", -apple-system, system-ui, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --rule: 1px solid var(--line);
}

@media (prefers-color-scheme: light) {
  :root {
    --ink:    #FBFBFC;
    --panel:  #FFFFFF;
    --raised: #F3F4F6;
    --line:   #DFE2E8;
    --text:   #16181D;
    --muted:  #5A616D;
    --faint:  #878E9A;

    --claude: #B3542F;
    --codex:  #0A7C60;
    --warn:   #9A6B00;
    --crit:   #B3352F;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }

/* Datasheet annotation register: small, wide, uppercase, monospace. */
.label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.wrap { max-width: 62rem; margin: 0 auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------- bar -- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: var(--rule);
}
.wordmark {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.topbar nav { display: flex; align-items: center; gap: 1.4rem; }
.topbar nav .nav-sections { display: contents; }
.topbar nav a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-decoration: none; color: var(--muted);
}
.topbar nav a:hover { color: var(--text); }
.topbar nav svg { display: block; flex: none; }

/* On a phone the four links do not fit beside the wordmark: English breaks
   "How it works" over three lines, German pushes the language switch off the
   right edge entirely. Give the bar two rows instead — identity and the two
   outbound links on top, the section anchors underneath, flush with the
   wordmark. The rows must not share grid columns, or the long German labels
   below would squeeze the links above back off-screen; hence the wrapper
   spanning the full width. */
@media (max-width: 34rem) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 1.1rem;
    row-gap: 0.55rem;
    align-items: center;
  }
  .topbar nav { display: contents; }
  .wordmark { grid-row: 1; grid-column: 1; }
  .topbar nav .nav-sections {
    grid-row: 2; grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem;
  }
  .topbar nav > a[href^="https://github"] { grid-row: 1; grid-column: 2; }
  .topbar nav a.lang { grid-row: 1; grid-column: 3; padding-left: 1.1rem; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { padding-block: clamp(3rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4rem); }

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 3.3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero .sub {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ------------------------------------------------------- tray specimen --
   Always dark: this is a specimen of the product on its native surface, so it
   does not follow the page theme. Icons are 24 px, the size Windows draws them
   at 150% scaling. */
.specimen {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel);
}
/* The right-hand end of a Windows 11 taskbar: overflow chevron, the app's icons, then the
   system glyphs, keyboard layout and two-line clock that always sit beside them. Right
   aligned and fading out to the left, because that corner is the whole context. */
.taskbar {
  background: #1F2023;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px;
  overflow: hidden;
  position: relative;
}
.taskbar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 30%;
  background: linear-gradient(90deg, rgba(31,32,35,1), rgba(31,32,35,0));
  pointer-events: none;
}
.tray-icon {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--claude);
}
.taskbar .chevron,
.taskbar .glyph,
.taskbar .kbd {
  flex: none;
  color: #A6ACB6;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  display: grid; place-items: center;
  width: 24px; height: 24px;
}
.taskbar .kbd { width: auto; font-size: 11.5px; letter-spacing: 0.02em; }
.taskbar .glyph svg { display: block; }
.taskbar .clock {
  flex: none; margin-left: 6px;
  font-family: var(--sans); font-size: 12px; line-height: 1.3;
  color: #D3D7DE; text-align: right;
}
/* The four icons this page is about, held slightly apart from their neighbours. */
.taskbar .ours { display: flex; gap: 12px; flex: none; padding-inline: 6px; }
.tray-icon { cursor: default; border-radius: 3px; }
.tray-icon:focus-visible { outline: 2px solid #ECEEF2; outline-offset: 2px; }

/* ---------------------------------------------------------- hover card --
   The app's own tooltip replacement: Windows tray tooltips are text only, so
   the service mark can only appear in a window we draw ourselves. Shown here
   above the strip, the way it appears above the tray. */
.stage { position: relative; background: #1F2023; padding-top: 84px; }
.hovercard {
  position: absolute; bottom: 58px; left: 0;
  min-width: 210px;
  background: #26282E;
  border: 1px solid #42464F;
  border-radius: 4px;
  padding: 9px 11px;
  transition: left 0.18s ease, opacity 0.18s ease;
  pointer-events: none;
}
.hovercard .row { display: flex; align-items: baseline; gap: 0.6rem; }
.hovercard .mark { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; align-self: center; }
.hovercard .name { color: #ECEEF2; font-size: 13px; white-space: nowrap; }
.hovercard .value { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hovercard .reset { margin-top: 3px; padding-left: 22px; color: #9AA0AA; font-size: 11px; white-space: nowrap; }
@media (max-width: 34rem) { .hovercard { min-width: 0; } .hovercard .reset { display: none; } }

.specimen figcaption {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  padding: 0.85rem 1.1rem;
  border-top: var(--rule);
  background: var(--raised);
}

/* --------------------------------------------------- details window --
   A reproduction of the window a left-click opens, and like the tray specimen it stays on
   the app's own dark surface whatever the page theme is. Both specimens declare the app's
   dark palette here, so the scripted colours are the ones Windows actually draws rather
   than the page's light-theme variants. */
.specimen, .window {
  --claude: #D97757;
  --codex:  #10A37F;
  --warn:   #E8B23C;
  --crit:   #E05A56;
}
.window { margin: 0; }
.window .pane {
  background: #1F2126;
  border: 1px solid #34383F;
  border-radius: 4px;
  padding: 16px 18px 0;
  font-family: var(--sans);
  overflow: hidden;
}
.window .svc {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: #ECEEF2;
  margin: 0;
}
.window .limit + .svc { margin-top: 18px; }   /* services are separated, limits are grouped */
.window .svc + .auth { margin: 4px 0 14px; }
.window .svc .mark { flex: none; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 5px; }
.window .auth, .window .reset, .window .foot { color: #8B929E; font-size: 11px; line-height: 1.45; margin: 0; }

.window .limit {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(52px, 1fr) 3.2rem;
  column-gap: 12px; row-gap: 1px;
  margin-bottom: 15px;
}
.window .limit .name { grid-column: 1; color: #ECEEF2; font-size: 13.5px; }
.window .limit .name .active { color: #8B929E; }      /* the limit currently in force */
.window .limit .reset { grid-column: 1; }
.window .limit .track {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  height: 8px; border-radius: 4px; overflow: hidden;
}
.window .limit .track > span { display: block; width: 0; height: 100%; border-radius: 4px; }
.window .limit .pct {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.window .foot { padding: 6px 0 9px; }
.window .strip { height: 3px; background: rgba(139, 146, 158, 0.15); }
.window .strip > span { display: block; width: 0; height: 100%; background: rgba(139, 146, 158, 0.51); }

.window figcaption { margin-top: 0.7rem; }

/* Verifiable facts, not adjectives: every one of these can be checked in a minute. */
.facts {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.facts li { display: flex; align-items: baseline; gap: 0.45rem; }
/* Neutral, not green: the service colours mean "this is a reading". Spending one on a
   decorative tick in the first screen would undo the rule the page is built on. */
.facts li::before { content: "\2713"; color: var(--faint); font-size: 0.8em; }

/* ------------------------------------------------------------- actions -- */
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; align-items: center; }
.requirement { margin-top: 0.85rem; font-size: 0.86rem; color: var(--muted); }
.btn {
  display: inline-block;
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--text);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { background: var(--text); color: var(--ink); }
.btn.secondary { border-color: var(--line); color: var(--muted); }
.btn.secondary:hover { background: transparent; border-color: var(--text); color: var(--text); }

/* --------------------------------------------------------------- blocks -- */
section { border-top: var(--rule); padding-block: clamp(2.75rem, 7vw, 4.5rem); }
section > .wrap > .label { display: block; margin-bottom: 1.4rem; }
h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
p { margin: 0 0 1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }

/* Threshold rules, stated as data rather than as feature cards. */
.rules { display: grid; gap: 1px; background: var(--line); border: var(--rule); border-radius: 3px; overflow: hidden; }
@media (min-width: 40rem) { .rules { grid-template-columns: repeat(3, 1fr); } }
.rule { background: var(--panel); padding: 1.3rem 1.2rem; }
.rule .swatch {
  display: flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--sans); font-weight: 700; font-size: 1.9rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  line-height: 1;
}
.rule .swatch .unit { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--faint); }
.rule .label { display: block; margin: 0.9rem 0 0.45rem; }

/* The bar the details window draws, at the weight it draws it. The track is always visible,
   so a reading of zero still reads as a bar rather than as nothing — the same mistake the
   app's countdown strip once made. */
.rule .meters { display: flex; gap: 1.1rem; }
.rule .meter { flex: 1 1 0; min-width: 0; }
.rule .track {
  display: block; height: 5px; margin-top: 0.75rem;
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.rule .track > span { display: block; width: 0; height: 100%; border-radius: 3px; }
.rule p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* Source table: two rows, no chrome. */
.sources { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.sources th, .sources td { text-align: left; padding: 0.85rem 0; border-bottom: var(--rule); vertical-align: baseline; }
.sources th { width: 7.5rem; font-weight: 600; font-size: 0.95rem; }
.sources td { color: var(--muted); font-size: 0.95rem; }
.sources code { font-family: var(--mono); font-size: 0.83em; color: var(--text); }
.sources tr:last-child th, .sources tr:last-child td { border-bottom: 0; }

figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border: var(--rule); border-radius: 3px; }
figure figcaption { margin-top: 0.75rem; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .split { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* Spec block, monospace, the way a datasheet lists requirements. */
.spec { font-family: var(--mono); font-size: 0.86rem; line-height: 1.9; }
.spec dt { color: var(--faint); }
.spec dd { margin: 0 0 0.9rem; }
.spec dd:last-child { margin-bottom: 0; }

.note {
  border-left: 2px solid var(--line);
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

footer { border-top: var(--rule); padding-block: 2.5rem 3.5rem; color: var(--muted); font-size: 0.9rem; }
footer .links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.2rem; }
footer .links a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
footer p { font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Language switch: a peer of the nav links, set apart by a rule rather than colour —
   colour on this page means "this is a reading". */
.topbar nav a.lang {
  padding-left: 1.4rem;
  border-left: var(--rule);
  letter-spacing: 0.12em;
}

/* Two settings screenshots side by side where there is room. */
.shots { display: grid; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 46rem) { .shots { grid-template-columns: 1fr 1fr; } }
.shots img { display: block; width: 100%; height: auto; border: var(--rule); border-radius: 3px; }