/* Talk: house style, its own layout.
   Plain CSS, one self-hosted font, no framework, no external requests. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;  --fg: #09090b;
  --panel: #ffffff;  --panel-border: rgba(24, 24, 40, 0.10);
  --border: #e4e4e7;  --muted: #f4f4f5;  --muted-fg: #71717a;
  --shadow-panel: 0 1px 2px rgba(24,24,40,.05), 0 8px 24px -16px rgba(24,24,40,.18);

  --accent: #fbc711;  --accent-hover: #ddaf0f;  --on-accent: #645007;
  --accent-container: #fff8e2;  --on-accent-container: #5f4c06;

  --brand-navy: #111827;
  --link: #1b74bc;
  --success: #38813a;
  --warning: #8f6c03;

  --radius: 0.875rem;
  --panel-radius: 1.375rem;
  --wrap: 68rem;

  /* The session-check panel keeps the brand navy in BOTH themes, the same
     way the tray icon does: it is identity, not a surface, so it does not
     follow light/dark. These are its own tokens so components below carry
     no raw colour. */
  --check-bg: var(--brand-navy);
  --check-fg: #fafafa;
  --check-dim: #d4d4d8;
  --check-label: #a1a1aa;
  --check-line: rgba(255,255,255,.06);
  --check-edge: rgba(255,255,255,.09);
  --yes-bg: #4bae4f;  --on-yes: #0d1f0e;
  --no-bg: #9e9d9e;   --on-no: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b;  --fg: #fafafa;
    --panel: #1b1d29;  --panel-border: rgba(255,255,255,.09);
    --border: #27272a;  --muted: #1c1c1f;  --muted-fg: #a1a1aa;
    --shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6);
    --accent-container: #4b3c05;  --on-accent-container: #fde694;
    --link: #2295f1;
    --success: #4bae4f;
    --warning: #ffc006;
  }
}

:root[data-theme="dark"] {
  --bg: #09090b;  --fg: #fafafa;
  --panel: #1b1d29;  --panel-border: rgba(255,255,255,.09);
  --border: #27272a;  --muted: #1c1c1f;  --muted-fg: #a1a1aa;
  --shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6);
  --accent-container: #4b3c05;  --on-accent-container: #fde694;
  --link: #2295f1;
  --success: #4bae4f;
  --warning: #ffc006;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

a { color: var(--link); }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--fg);
  padding: .75rem 1rem; border-radius: var(--radius); z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---- nav ---------------------------------------------------------- */

.topnav {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
}
.topnav-inner { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; }
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--fg); text-decoration: none;
  letter-spacing: -.01em;
}
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.nav-links a { color: var(--muted-fg); text-decoration: none; font-size: .9375rem; font-weight: 600; }
.nav-links a:hover { color: var(--fg); }
@media (max-width: 40rem) { .nav-links .hide-sm { display: none; } }

/* ---- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: var(--radius);
  padding: .7rem 1.15rem;
  font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: var(--muted); color: var(--fg); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--muted-fg); }

/* ---- hero --------------------------------------------------------- */
/* Uneven on purpose: the promise carries the weight, and the session
   check sits beside it as the one thing to verify before downloading. */

.hero { padding: 3.5rem 0 2rem; }
.hero-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
}
@media (max-width: 60rem) { .hero-grid { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent-container); color: var(--on-accent-container);
  border-radius: 999px; padding: .3rem .75rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.lede { font-size: 1.125rem; color: var(--muted-fg); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-note { margin-top: 1rem; font-size: .8125rem; color: var(--muted-fg); }

/* The session check: a terminal, because that is literally how you check. */
.check {
  background: var(--check-bg);
  border: 1px solid var(--check-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
  padding: 1.25rem;
  color: var(--check-fg);
}
.check-title {
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--check-label); margin-bottom: .75rem;
}
.check pre {
  margin: 0 0 .75rem; padding: .85rem 1rem;
  background: var(--check-line);
  border-radius: var(--radius);
  font-size: .9375rem; overflow-x: auto;
}
.check code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.check .prompt { color: var(--accent); }
.check-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .9375rem; padding: .3rem 0; }
.check-row .tag {
  flex: none; font-weight: 700; border-radius: 999px;
  padding: .05rem .5rem; font-size: .75rem;
}
.tag.yes { background: var(--yes-bg); color: var(--on-yes); }
.tag.no  { background: var(--no-bg); color: var(--on-no); }
.check-row span { color: var(--check-dim); }
.check-row a { color: var(--accent); }

/* ---- flow --------------------------------------------------------- */

.flow-track { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 48rem) { .flow-track { grid-template-columns: 1fr; } }
.flow-step { border-left: 3px solid var(--panel-border); padding: .1rem 0 .1rem 1rem; }
.flow-step h3 { margin-bottom: .25rem; }
.flow-step p { color: var(--muted-fg); font-size: .9375rem; }

/* ---- panels / bento ------------------------------------------------ */

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
}
section { padding: 2.5rem 0; }
section[id] { scroll-margin-top: 4.5rem; }
.section-intro { color: var(--muted-fg); max-width: 60ch; margin-bottom: 1.5rem; }

/* Columns rather than a grid, so a short card does not leave a hole
   under it waiting for the row to end. Each card is as tall as its
   own text and the next one starts immediately below. A grid cannot do
   this: its rows are as tall as their tallest cell, which is what left
   a gap under "Six languages". */
.bento { columns: 2; column-gap: 1rem; }
.bento > .panel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1rem;
}
@media (max-width: 56rem) { .bento { columns: 1; } }
.bento h3 { display: flex; align-items: center; gap: .5rem; }
.bento p { color: var(--muted-fg); font-size: .9375rem; }
.icon { flex: none; color: var(--accent); }

/* ---- differences --------------------------------------------------- */

.diff { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) { .diff { grid-template-columns: 1fr; } }
/* Grey, not amber. A coloured edge is allowed where it stands for
   something (green for do, red for don't), but these two panels are
   not warnings, so the colour was decoration, and the accent is never
   decoration. */
.diff .panel { border-left: 3px solid var(--panel-border); }
.diff h3 { margin-bottom: .35rem; }
.diff p { color: var(--muted-fg); font-size: .9375rem; }

/* ---- requirements -------------------------------------------------- */

.req ul { margin: .75rem 0 0; padding-left: 1.1rem; color: var(--muted-fg); }
.req li { margin-bottom: .35rem; }
.req pre {
  background: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem 1rem; overflow-x: auto;
  font-size: .9375rem; margin: .75rem 0;
}
.req code { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---- download ------------------------------------------------------ */

.download .panel { display: grid; gap: 1rem; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.dl-meta { color: var(--muted-fg); font-size: .875rem; }
.dl-help { color: var(--muted-fg); font-size: .9375rem; }

/* ---- footer -------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--panel-border);
  padding: 2rem 0 3rem;
  color: var(--muted-fg); font-size: .875rem;
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.foot-links { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.badge img { display: block; height: 34px; width: auto; }
.badge .dark-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge .light-only { display: none; }
  :root:not([data-theme="light"]) .badge .dark-only { display: block; }
}
:root[data-theme="dark"] .badge .light-only { display: none; }
:root[data-theme="dark"] .badge .dark-only { display: block; }

/* ---- questions ------------------------------------------------------ */

.faq-item { border-top: 1px solid var(--panel-border); }
.faq-item:first-child { border-top: none; }
.faq-item h3 { margin: 0; font-size: 1rem; }
.faq-item summary {
  cursor: pointer; padding: .85rem 0; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--muted-fg); font-weight: 400; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  color: var(--muted-fg); font-size: .9375rem;
  margin: 0 0 .95rem; max-width: 68ch;
}

.foot-meta { max-width: 46ch; }
.foot-meta p { color: var(--muted-fg); font-size: .875rem; margin: 0 0 .4rem; }
.foot-updated { font-size: .8125rem; }