/*
  racingline/assets/site.css: the website in the app's own look (2026-10-26).

  ONE set of colours, fonts and pieces for every page on the site, taken from the app
  (ui/styles.py and the Overview's cards): a near-black page, dark cards with a thin line
  and 12 px corners, Segoe UI for words and JetBrains Mono for labels and numbers, green
  for actions and your lap, pink for the best lap, amber for time still to find, cyan for
  the (i) and notes. Approved board: https://claude.ai/artifact/TARFiVQv5i3QnuPB1PCsD1

  Pages link this file first and keep only their own layout in their own <style>.
  Nothing here loads anything from outside the site except the two fonts the page asks
  Google Fonts for (JetBrains Mono; Segoe UI is the visitor's own system font).
*/

:root {
  --page: #07070d;
  --bar: #0b0c12;
  --card: #0e1018;
  --row: #13161f;
  --row-2: #11141c;
  --line: #1c2030;
  --line-2: #2a3040;
  --chip-line: #3a4150;
  --track: #1d2230;

  --text: #f2f4f7;
  --body: #c2cad4;
  --label: #8a93a3;
  --muted: #5d6573;

  --green: #99cc00;
  --green-hi: #c8ff2e;
  --green-soft: rgba(153, 204, 0, 0.12);
  --pink: #ff00ff;
  --amber: #ffb000;
  --cyan: #00b8d4;
  --cyan-2: #7fe3f2;
  --cyan-hi: #00e5ff;
  --red: #ff5555;
  --red-2: #ff8a8a;

  --sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --radius: 12px;
  --radius-row: 9px;
  --radius-btn: 8px;
  --gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hi); }
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(153, 204, 0, 0.35); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--page); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--chip-line); }

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.section { max-width: 1240px; margin: 0 auto; padding: 56px var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.grid-auto { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.spacer { flex-grow: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── type ───────────────────────────────────────────────────────────── */
.h1 { margin: 0; font-size: 56px; line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }
.lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); max-width: 760px; }
.body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.small { font-size: 13px; color: var(--label); }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--label); text-transform: uppercase; }
.label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--label); text-transform: uppercase; }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.green { color: var(--green); }
.pink { color: var(--pink); }
.amber { color: var(--amber); }
.cyan { color: var(--cyan-2); }
.red { color: var(--red); }
.muted { color: var(--label); }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-2); background: transparent; color: var(--body);
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { border-color: var(--chip-line); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn-primary { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.btn-primary:hover { border-color: var(--green-hi); background: rgba(153, 204, 0, 0.2); color: var(--green-hi); }
.btn-danger { border-color: rgba(255, 85, 85, 0.6); background: rgba(255, 85, 85, 0.08); color: var(--red-2); }
.btn-danger:hover { border-color: var(--red); background: rgba(255, 85, 85, 0.14); color: #ffb0b0; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

/* the (i): a 22 px cyan ring inside a 44 px hit area, as in the app */
.info {
  width: 44px; height: 44px; margin: -11px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; border-radius: 50%;
}
.info > span {
  width: 22px; height: 22px; border-radius: 11px; border: 1px solid var(--cyan);
  color: var(--cyan-2); font-family: Georgia, 'Times New Roman', serif; font-size: 12px;
  font-style: italic; line-height: 20px; text-align: center; transition: all .15s ease;
}
.info:hover > span, .info[aria-expanded="true"] > span { border-color: var(--cyan-hi); color: var(--cyan-hi); background: rgba(0, 229, 255, 0.14); }

/* ── cards and rows ─────────────────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); min-width: 0; }
.card-lg { padding: 24px; gap: 18px; }
.card-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.card-head .idx { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-row); background: var(--row); min-width: 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.num-square {
  width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--text); color: var(--page);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.num-square.lg { width: 28px; height: 28px; font-size: 14px; }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--chip-line); font-size: 13px; color: var(--body); line-height: 1.5; }
.pill.sm { padding: 3px 10px; font-size: 12px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.pill.ok { border-color: rgba(153, 204, 0, 0.55); background: rgba(153, 204, 0, 0.1); color: var(--green); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.mark { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.mark.amber { background: rgba(255, 176, 0, 0.14); border: 1px solid rgba(255, 176, 0, 0.55); color: var(--amber); }
.mark.green { background: var(--green-soft); border: 1px solid var(--green); color: var(--green); }
.mark.cyan { border: 1px solid rgba(0, 184, 212, 0.55); color: var(--cyan-2); }
.mark.red { background: rgba(255, 85, 85, 0.1); border: 1px solid rgba(255, 85, 85, 0.6); color: var(--red); }

.check { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-soft); }

/* ── forms ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--body); min-width: 0; }
.field .opt { color: var(--label); }
.field .err { color: var(--red); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 12px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-2); background: var(--bar); color: var(--text);
  font-family: var(--sans); font-size: 15px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--label) 50%), linear-gradient(135deg, var(--label) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(153, 204, 0, 0.18); }
.input.bad, .textarea.bad { border-color: var(--red); }
.checkline { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--body); cursor: pointer; }
.checkline input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); flex-shrink: 0; cursor: pointer; }
.note-box { padding: 12px 14px; border-radius: var(--radius-row); font-size: 14px; line-height: 1.5; }
.note-box.bad { background: rgba(255, 85, 85, 0.08); border: 1px solid rgba(255, 85, 85, 0.45); color: var(--red-2); }
.note-box.ok { background: rgba(153, 204, 0, 0.07); border: 1px solid rgba(153, 204, 0, 0.45); color: var(--body); }
.note-box.info { background: rgba(0, 184, 212, 0.07); border: 1px solid rgba(0, 184, 212, 0.45); color: var(--body); }

/* ── site header ────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bar); border-bottom: 1px solid var(--line); }
.site-header-in { max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter); min-height: 68px; display: flex; align-items: center; gap: 10px 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex-shrink: 0; }
.brand img { width: 44px; height: 39px; object-fit: contain; }
.brand-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.brand-name b { font-size: 17px; font-weight: 800; letter-spacing: -0.5px; color: var(--green); }
.brand-name span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--label); }
.brand:hover b { color: var(--green-hi); }
/* the links never wrap onto a second line: when room runs short, other things give way (below) */
.main-nav { flex: 1 1 auto; display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; }
.nav-link {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--radius-btn);
  color: var(--body); font-size: 14px; text-decoration: none; background: transparent; border: 0; cursor: pointer; font-family: var(--sans);
  white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--text); background: var(--row); }
.nav-link svg { transition: transform .15s ease; }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop { position: relative; }
/* the menu hangs from a padded holder, so the pointer can cross the gap without closing it */
.nav-pop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 6px; z-index: 60; }
.nav-menu {
  min-width: 280px; padding: 8px; border-radius: var(--radius); background: var(--bar); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 2px;
}
.nav-menu a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--radius-btn); color: var(--text); text-decoration: none; }
.nav-menu a:hover { background: var(--row); color: var(--text); }
.nav-menu a svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.nav-menu b { display: block; font-size: 14px; font-weight: 600; }
.nav-menu small { display: block; font-size: 12px; color: var(--label); margin-top: 2px; }
.socials { display: flex; align-items: center; }
.socials a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--label); border-radius: var(--radius-btn); }
.socials a:hover { color: var(--green); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* a long first name is cut with "…" rather than pushing the header apart */
.hello { font-size: 14px; color: var(--body); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.hello b { color: var(--green); font-weight: 600; }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-btn); border: 1px solid var(--line-2); background: transparent; color: var(--body); cursor: pointer; }
.mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--bar); padding: 10px var(--gutter) 18px; }
.mobile-menu a, .mobile-menu .sub { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: var(--radius-btn); color: var(--body); font-size: 15px; text-decoration: none; }
.mobile-menu a:hover { background: var(--row); color: var(--text); }
.mobile-menu .sub { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--label); min-height: 36px; margin-top: 6px; }
.mobile-menu .indent { padding-left: 20px; }
.mobile-menu .btns { display: flex; gap: 8px; margin-top: 12px; }
.mobile-menu .btns .btn { flex: 1; }

/* What gives way as the header narrows, in this order: the social icons (they are in the footer too),
   then the greeting, then the links fold behind the menu button. Signed in, the account buttons need
   the icons' room at every width. The widths, measured 2026-10-26: logo 188, links 483 on one line,
   icons 220, signed-out buttons 184, signed-in buttons up to 388 with the greeting capped at 160; the
   header's content is at most 1192 wide (1240 less its padding) and the gaps add 16 each. Every
   threshold keeps 40-60px spare, because other computers' fonts draw a little wider. */
.site-header.signed-in .socials { display: none; }
@media (max-width: 1259px) { .site-header .socials { display: none; } }
@media (max-width: 1199px) { .site-header .hello { display: none; } }
@media (max-width: 1023px) {
  .main-nav, .header-actions .hide-sm { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header-in { gap: 8px; padding: 8px 12px 8px 16px; min-height: 64px; }
  .header-actions { margin-left: auto; }
  .mobile-menu.open { display: block; }
}
@media (max-width: 420px) {
  .brand-name span { display: none; }
  .brand img { width: 36px; height: 32px; }
  .brand-name b { font-size: 15px; }
}

/* ── a plain page's header: the mark, where you are, the way back ──── */
/* (the account, legal, testing and knowledge-base pages; the landing page and the guide have their own) */
.page-head { background: var(--bar); border-bottom: 1px solid var(--line); }
.page-head-in { max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter); min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.page-head .sep { width: 1px; height: 32px; background: var(--line); }
.page-head .where { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.page-head .link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-btn); color: var(--body); font-size: 14px; text-decoration: none; }
.page-head .link:hover { color: var(--text); background: var(--row); }
@media (max-width: 640px) { .page-head .sep, .page-head .where { display: none; } .page-head-in { padding: 8px 12px 8px 16px; gap: 6px; } }
@media (max-width: 480px) { .page-head .link.hide-xs { display: none; } }

/* ── side panel: what the (i) opens, as in the app ─────────────────── */
.panel-scrim { position: fixed; inset: 0; z-index: 96; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .2s ease; }
.panel-scrim.open { opacity: 1; }
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97; width: min(440px, 100%);
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 28px; overflow-y: auto;
  background: var(--bar); border-left: 1px solid var(--line); box-shadow: -24px 0 48px rgba(0, 0, 0, 0.5);
  transform: translateX(100%); transition: transform .22s ease;
}
.side-panel.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .side-panel, .panel-scrim { transition: none; } }
.side-panel .panel-head { display: flex; align-items: center; gap: 10px; }
.side-panel .panel-title { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--cyan-2); text-transform: uppercase; }
.side-panel .close { width: 44px; height: 44px; margin: -8px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--body); cursor: pointer; border-radius: var(--radius-btn); }
.side-panel .close:hover { color: var(--text); background: var(--row); }
.side-panel p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.side-panel p.first { color: var(--text); }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--bar); border-top: 1px solid var(--line); }
.site-footer-in { max-width: 1240px; margin: 0 auto; padding: 40px var(--gutter) 28px; display: flex; flex-direction: column; gap: 28px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px 48px; }
.footer-brand { flex: 2 1 300px; display: flex; flex-direction: column; gap: 14px; }
.footer-col { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; }
.footer-col .label { padding-bottom: 6px; }
.footer-col a { min-height: 34px; display: flex; align-items: center; font-size: 14px; color: var(--body); text-decoration: none; }
.footer-col a:hover { color: var(--green); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--label); }
.site-footer .socials { margin-left: -12px; }

/* ── cookie choice (equal weight, so neither answer is the "easy" one) ─ */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; max-width: 880px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px;
  border-radius: var(--radius-row); background: var(--bar); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); font-family: var(--sans);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }
.cookie-bar .btn { color: var(--text); min-width: 100px; }

/* ── pieces several pages share ─────────────────────────────────────── */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: var(--radius-btn); background: var(--green); color: var(--page); font-weight: 700; }
.skip:focus { top: 12px; color: var(--page); }
.two-col { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.col-main { flex: 1 1 560px; min-width: 0; }
.col-side { flex: 1 1 380px; min-width: 0; }
.dot-g { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; display: inline-block; }
.faq { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-radius: var(--radius-row); background: var(--row); }
.faq > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--text); font-family: var(--sans); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.faq-sign { font-size: 18px; color: var(--green); flex-shrink: 0; }
.step-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.step-pills li { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--chip-line); font-size: 13px; color: var(--label); }
.step-pills li .num { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--track); color: var(--body); font-size: 12px; font-weight: 700; }
.step-pills li.now { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.step-pills li.now .num { background: var(--green); color: var(--page); }
.step-pills li.done { color: var(--body); }
.step-pills li.done .num { background: var(--green-soft); color: var(--green); }
.next-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.next-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--body); }
.next-steps b { color: var(--text); font-weight: 600; }
.fb-cat { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: var(--radius-row); border: 1px solid var(--line); background: var(--row); color: var(--text); cursor: pointer; font-family: var(--sans); }
.fb-cat:hover { border-color: var(--line-2); background: #171b26; }
.fb-ico { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); background: var(--bar); }
.fb-file { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-btn); border: 1px dashed var(--chip-line); background: var(--bar); color: var(--label); cursor: pointer; font-size: 14px; }
.fb-file:hover { border-color: var(--green); }
.fb-file:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── toast, spinner, modal ──────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 120; transform: translate(-50%, 120px); opacity: 0;
  padding: 12px 18px; border-radius: var(--radius-btn); background: var(--bar); border: 1px solid var(--green);
  color: var(--green); font-size: 14px; font-weight: 600; transition: transform .3s ease, opacity .3s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--green); border-top-color: transparent; animation: spin .8s linear infinite; flex-shrink: 0; }
.spinner.lg { width: 44px; height: 44px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { position: relative; width: 100%; max-width: 500px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.modal .close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--body); cursor: pointer; border-radius: var(--radius-btn); }
.modal .close:hover { background: var(--row); color: var(--text); }
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; height: 44px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--green); background: var(--bar); color: var(--green); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.fab:hover { background: #10140a; color: var(--green-hi); border-color: var(--green-hi); }

/* ── phone ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding: 40px var(--gutter); }
  .h1 { font-size: 38px; line-height: 1.06; }
  .h2 { font-size: 28px; }
  .lead { font-size: 16px; }
  .card { padding: 16px; }
  .card-lg { padding: 18px; }
  .fab { right: 12px; bottom: 12px; padding: 0 14px; }
  .cookie-bar { left: 8px; right: 8px; bottom: 8px; }
  .cookie-bar .btn { flex: 1; }
}