/* The site wears the app's own palette and type: the same four readable text tones, the
   same amber and blue, and IBM Plex, which the app bundles. A screenshot and the page it
   sits on should look like one product. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg-base: #14171b;
  --bg-raised: #171a1f;
  --bg-surface: #1a1d22;
  --bg-card: #20242a;
  --bg-input: #272c33;
  --bg-hover: #30363e;
  --border: #2b3038;
  --border-input: #3b424c;
  --fg-primary: #eef1f4;
  --fg-secondary: #cdd3da;
  --fg-muted: #a3adb8;
  --fg-dim: #8e98a4;
  --accent-amber: #f0b429;
  --accent-blue: #5aa9ff;
  --state-go: #1c7a3c;
  --state-stop: #3b424c;
  --state-panic: #8e2b28;

  --font-ui: 'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'SF Mono', monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--fg-primary);
  background: radial-gradient(1200px 600px at 85% -20%, rgba(90, 169, 255, 0.14), transparent),
    radial-gradient(900px 500px at -20% 10%, rgba(240, 180, 41, 0.10), transparent),
    var(--bg-base);
  line-height: 1.45;
  overflow-x: hidden;
}

.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(circle at center, black 45%, transparent 90%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(20, 23, 27, 0.92);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-amber);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.brand-mark {
  width: 24px;
  height: 24px;
}

.top-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.top-nav a {
  color: var(--fg-secondary);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: 0.1s ease;
}

.top-nav a:hover {
  color: var(--fg-primary);
  border-color: var(--border-input);
  background: rgba(255, 255, 255, 0.04);
}

.header-cta {
  text-decoration: none;
  color: #111;
  background: var(--accent-amber);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 70%, #fff 30%);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-radius: 4px;
  transition: transform 0.08s ease, filter 0.08s ease;
  white-space: nowrap;
}

.header-cta:hover {
  filter: brightness(1.08);
}

.header-cta:active {
  transform: translateY(1px);
}

.layout {
  max-width: 1180px;
  margin: 26px auto 36px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)), var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  min-width: 0;
}

/* Content links inside panels — the site has no global `a` style, so without this
   they render in the browser default blue. */
.layout a:not(.action) {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.layout a:not(.action):hover {
  filter: brightness(1.2);
}

.hero {
  grid-column: 1 / -1;
  padding: 24px;
}

.hero-logo {
  width: min(420px, 100%);
  height: auto;
  opacity: 0.96;
  margin-bottom: 12px;
}

h1,
h2,
h3 {
  margin: 0 0 8px;
}

h1,
h2,
h3 {
  font-family: var(--font-cond);
  color: var(--fg-primary);
}

h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

/* Headings are read, not shouted: the uppercase tracking that made a section title look
   like a label also made a sentence of it hard to scan. */
h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 10px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Text fills the block it sits in. The measure used to be capped at 68ch here, which left
   every paragraph short of its panel — the panel is the visible container, so the line is
   its width, not a narrower column behind it. */
p {
  margin: 0 0 12px;
  color: var(--fg-secondary);
}

.hero-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.action {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid var(--border-input);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.action-primary {
  color: #111;
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.action-ghost {
  color: var(--fg-primary);
  background: var(--bg-input);
}

.action:hover {
  filter: brightness(1.07);
}

.hero-note {
  margin-top: 10px;
  color: var(--fg-dim);
}

.toc {
  grid-column: 2;
  grid-row: 2 / span 4;
  height: fit-content;
  position: sticky;
  top: 76px;
}

.toc ol {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.toc a {
  color: var(--fg-secondary);
  text-decoration: none;
}

.toc a:hover {
  color: var(--accent-blue);
}

.steps {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.cards {
  display: grid;
  gap: 10px;
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: 4px;
  padding: 12px;
}

.state-go {
  border-color: color-mix(in srgb, var(--state-go) 75%, #fff 25%);
}

.state-stop {
  border-color: color-mix(in srgb, var(--state-stop) 75%, #fff 25%);
}

.state-panic {
  border-color: color-mix(in srgb, var(--state-panic) 75%, #fff 25%);
}

/* A table wider than its wrapper scrolls, and nothing says so: at a phone's width the buy cell
   sits past the right edge and a reader has to find it by swiping. The wrapper carries the mark
   that the table continues — a cover that scrolls with the content (`local`) over a shadow pinned
   to the wrapper (`scroll`), so a shadow shows exactly while there is content beyond that edge and
   none once the table fits. Both are plain bands rather than radial blobs, so the mark reads the
   same down a long table; the header row's own cells paint over it, so what a reader sees is the
   band down the table's body, where the rows are what continues. CSS only: no listener, no markup
   change, and every wrapped table on the site gets it. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  background:
    linear-gradient(to right, var(--bg-surface) 55%, transparent) left center,
    linear-gradient(to left, var(--bg-surface) 55%, transparent) right center,
    linear-gradient(to right, color-mix(in srgb, var(--bg-base) 55%, #000), transparent) left center,
    linear-gradient(to left, color-mix(in srgb, var(--bg-base) 55%, #000), transparent) right center;
  background-repeat: no-repeat;
  background-size: 48px 100%, 48px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

thead th {
  background: var(--bg-raised);
  font-family: var(--font-cond);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th,
td {
  padding: 10px 12px;
}

tbody tr {
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: rgba(74, 158, 255, 0.08);
}

.kbd-grid {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.kbd-grid > div {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--fg-secondary);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--fg-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}

.tight-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.cheat-sheet {
  background: linear-gradient(180deg, rgba(224, 160, 32, 0.08), rgba(224, 160, 32, 0.02));
  border: 1px solid color-mix(in srgb, var(--accent-amber) 50%, var(--border) 50%);
  border-radius: 4px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.cheat-sheet h3 {
  margin: 0;
  color: var(--accent-amber);
}

.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 12px;
  text-align: center;
}

.download-card h3 {
  margin: 0;
}

.download-card .action {
  width: 100%;
}

.platform-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-icon svg {
  width: 100%;
  height: 100%;
}

.changelog-list {
  display: grid;
  gap: 10px;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 14px 18px 24px;
  text-align: center;
}

/* ─── Guide page ─────────────────────────────────────────────────────────── */

.guide-layout {
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: start;
}

.guide-content {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.guide-layout .toc {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 76px;
  height: fit-content;
  padding: 14px;
}

.guide-layout .toc ol {
  margin: 8px 0 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
}

.guide-layout .toc a {
  color: var(--fg-secondary);
  text-decoration: none;
}

.guide-layout .toc a:hover {
  color: var(--accent-blue);
}

.guide-layout .toc ol ol {
  margin-top: 6px;
  padding-left: 14px;
  gap: 4px;
  font-size: 12px;
}

figure.figure {
  margin: 14px 0;
  display: grid;
  gap: 6px;
}

.figure img,
/* The clip is held to the column the figures are: a video carries its own width attribute,
   and without this one it overflows the page it is meant to illustrate. */
.figure video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  background: var(--bg-base);
}

/* The window shot on the home page sits on the layout grid itself, so the figure's own
   margin would be added to the grid's gap. */
.window-shot {
  margin: 0;
}

/* Promotion shots live in a card grid: same reason, and they are pictures rather than
   reading matter, so the caption is the only text. */
.figure.promo {
  margin: 0;
  align-content: start;
}

/* A figure that opens the full-size screenshot: the picture is the link, so it carries no
   underline of its own. */
.figure a {
  text-decoration: none;
  display: block;
}

.figure figcaption {
  color: var(--fg-muted);
  font-size: 13px;
}

.figure.shot-narrow {
  max-width: 380px;
}

/* A picture narrower than the column, shown at the size the app draws it: these are
   screenshots of a panel or a dialog, and stretching one to the column's width makes the
   text in it soft for nothing. */
.figure.shot-native img,
.figure.shot-native video {
  width: auto;
  max-width: 100%;
}

.note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-input);
  border-left: 3px solid var(--accent-blue);
  border-radius: 4px;
  background: rgba(74, 158, 255, 0.06);
  color: var(--fg-secondary);
}

.note.warn {
  border-left-color: var(--accent-amber);
  background: rgba(224, 160, 32, 0.07);
}

/* Pro marker: the same amber chip the app puts on a surface a licence unlocks. */
.pro {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(224, 160, 32, 0.1);
  color: var(--accent-amber);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* The site's other scroll container. A sample is written in lines, and lines are what a reader
   reads it in, so the box keeps them (`pre`); a line wider than the box then runs past the right
   edge, which is the same edge `.table-wrap` marks — the box carries the same band, in the colour
   its own text sits on (`--bg-raised`) where the table's wrapper sits on the panel's surface. */
.code {
  margin: 10px 0 0;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  /* The surface on its own, first: the shadows below are mixed with `color-mix()`, and a browser
     that cannot parse one of those layers drops the whole shorthand — the box would then paint
     nothing at all rather than a plain surface, which is what this declaration is here for. */
  background-color: var(--bg-raised);
  background:
    linear-gradient(to right, var(--bg-raised) 55%, transparent) left center,
    linear-gradient(to left, var(--bg-raised) 55%, transparent) right center,
    linear-gradient(to right, color-mix(in srgb, var(--bg-base) 55%, #000), transparent) left center,
    linear-gradient(to left, color-mix(in srgb, var(--bg-base) 55%, #000), transparent) right center,
    var(--bg-raised);
  background-repeat: no-repeat;
  background-size: 48px 100%, 48px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
  border: 1px solid var(--border-input);
  border-radius: 4px;
}

code,
.code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

code {
  color: var(--accent-amber);
}

.code code {
  color: var(--fg-primary);
}

/* ─── Reliability page ───────────────────────────────────────────────────── */

.run-state {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.run-state.pass {
  color: color-mix(in srgb, var(--state-go) 60%, #fff 40%);
}

.run-state.fail {
  color: color-mix(in srgb, var(--state-panic) 60%, #fff 40%);
}

.metric-value {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.metric-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--fg-muted);
}

.metric-note:empty {
  display: none;
}

.run-panel .cards {
  margin-top: 12px;
}

.run-subhead {
  margin: 16px 0 0;
}

.run-panel .table-wrap {
  margin-top: 8px;
}

.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal 0.45s ease forwards;
}

.delay-1 { animation-delay: 0.07s; }
.delay-2 { animation-delay: 0.14s; }
.delay-3 { animation-delay: 0.21s; }
.delay-4 { animation-delay: 0.28s; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .header-inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .toc {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }

  .two-col,
  .three-col {
    grid-template-columns: 1fr;
  }

  .guide-content,
  .guide-layout .toc {
    grid-column: 1;
    grid-row: auto;
  }

  .guide-layout .toc {
    position: static;
  }

  .figure.shot-narrow {
    max-width: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .toc,
  .hero,
  #download,
  #changelog {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .layout {
    display: block;
    margin: 0;
    padding: 0;
  }

  .panel,
  .card {
    background: #ffffff;
    border-color: #000000;
  }

  /* The scroll mark is about a wrapper that can be swiped, which a printed page cannot: the
     covers and shadows would print as grey bands down a white page. */
  .table-wrap {
    background: none;
  }

  /* Nor can the table be wider than the column it is printed in: the width the screen's tables
     ask for (`min-width: 560px`) is what a printed one would be clipped by, so it goes. */
  table {
    min-width: 0;
  }

  h1,
  h2,
  h3,
  p,
  li,
  td,
  th,
  figcaption {
    color: #000000;
  }

  .run-state.pass,
  .run-state.fail {
    color: #000000;
  }

  .figure {
    break-inside: avoid;
  }

  .figure img,
  .note,
  .code {
    border-color: #000000;
  }

  /* A printed page cannot be swiped either, so a sample prints whole: its lines wrap rather
     than run past the edge (`pre-wrap`), and a word too long for the column breaks rather than
     being clipped (`anywhere`), on white with no band painted over it. */
  .code {
    background: #ffffff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .code code,
  code {
    color: #000000;
  }

  .cheat-sheet {
    background: #ffffff;
    border: 1px solid #000000;
  }

  .cheat-sheet h3,
  .cheat-sheet p,
  .cheat-sheet li {
    color: #000000;
  }
}

/* The widest table the site prints is `website/reliability.html`'s eight-column one, which needs
   566 px of column for its own words — its min-content, measured in Chromium, 2026-09-22 — and
   dropping the fixed width is not enough below that. A print query matches the page box: not the
   viewport the page was read at, and not the column either — the column is the page box less the
   40 px the panel's padding and the two borders spend — so the query answers for the page box that
   column needs, 606 px. (At 566 px, the column figure, a page box of 570–600 px still laid the
   table out at 566 px and clipped a cell.) A cell that breaks `anywhere` lowers the width its
   table is laid out at, which `break-word` does not, so a narrow page prints whole; paper is
   wider than this and prints a table as it always did. */
@media print and (max-width: 606px) {
  th,
  td {
    overflow-wrap: anywhere;
  }
}


/* ─── Documentation pages ──────────────────────────────────────────────────────
   Guides are read once, top to bottom; reference pages are scanned. Both are one
   column of readable width rather than the marketing grid the home page uses. */
.doc-layout {
  max-width: 880px;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
}

.crumbs a {
  color: var(--fg-muted);
  text-decoration: none;
}

.crumbs a:hover { color: var(--fg-primary); }

.doc-lede {
  font-size: 17px;
  color: var(--fg-secondary);
}

/* A card that is a link to another page, rather than a box of text. */
.doc-cards { gap: 14px; }

.doc-card {
  display: block;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.doc-card:hover {
  border-color: var(--accent-blue);
  background: var(--bg-input);
}

.doc-card h3 {
  color: var(--fg-primary);
  margin-bottom: 4px;
}

.doc-card p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14px;
}

.doc-card-meta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Keys, as keys. */
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-bottom-width: 2px;
  border-radius: 4px;
  white-space: nowrap;
}

.top-nav a[aria-current="page"] {
  color: var(--fg-primary);
  border-color: var(--border-input);
}

/* The Pro tag, wherever a heading or a row carries one. */
.pro {
  margin-left: 8px;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-amber);
  vertical-align: middle;
}

.doc-layout code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-primary);
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 4px;
}

.doc-layout .code code {
  background: none;
  padding: 0;
}

/* A card that is a link is a card, not a line of underlined text. */
.layout a.doc-card,
.layout a.doc-card:hover {
  text-decoration: none;
}

.site-footer a {
  color: var(--fg-muted);
  text-decoration: none;
}

.site-footer a:hover { color: var(--fg-primary); }