/* Shared styles for the document pages (how it works, spec). Same tokens and
   committed dark identity as the landing page. */
:root{
  --bg:#0a0e0f;
  --surface:#111819;
  --surface-2:#0e1415;
  --line:#1e2a2c;
  --fg:#e9eff0;
  --muted:#95a7a9;
  --faint:#6d7d7f;
  --accent:#3ad492;
  --accent-dim:#1f3f33;
  --accent-ink:#04140d;
  --warn:#e6b35c;
  --crit:#e2695f;
  --maxw:1320px;
  --docw:760px;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:#5fe6ab}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
header.site{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;color:var(--fg);text-decoration:none}
.brand:hover{color:var(--fg)}
.seal{width:22px;height:22px;flex:0 0 auto}
.nav{display:flex;align-items:center;gap:18px;font-size:.92rem}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav .hide-sm{display:none}
@media(min-width:640px){.nav .hide-sm{display:inline}}

/* page intro */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0}
.intro{padding-block:clamp(40px,7vw,72px) 8px;max-width:var(--docw)}
.intro h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.1;letter-spacing:-.025em;margin:14px 0 0;text-wrap:balance}
.intro p.lede{color:var(--muted);font-size:clamp(1rem,2vw,1.15rem);margin:16px 0 0}
.meta{font-family:var(--mono);font-size:.76rem;color:var(--faint);margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 16px}

/* sections */
section.block{padding-block:clamp(34px,6vw,56px);border-top:1px solid var(--line)}
section.block:first-of-type{border-top:0}
.sec-head{max-width:var(--docw)}
.sec-head h2{font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.2;letter-spacing:-.02em;margin:10px 0 0}
.sec-head p{color:var(--muted);margin:10px 0 0}

/* flow steps */
.flow{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px;counter-reset:flow}
.flow li{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 20px 20px 64px;counter-increment:flow}
.flow li::before{content:counter(flow);position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--accent-ink);background:var(--accent)}
.flow h3{font-size:1.04rem;margin:0 0 6px}
.flow p{margin:0;color:var(--muted)}
.flow .links{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem}

/* two-column claims */
.claims{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
@media(min-width:760px){.claims{grid-template-columns:1fr 1fr}}
.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.card h3{font-size:1rem;margin:0 0 10px}
.card ul{margin:0;padding-left:18px;color:var(--muted)}
.card li{margin:6px 0}
.card.yes h3{color:var(--accent)}
.card.no h3{color:var(--warn)}

/* link directory */
.dir{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
@media(min-width:760px){.dir{grid-template-columns:1fr 1fr}}
.dir .card h3{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.dir ul{list-style:none;padding:0;margin:0}
.dir li{padding:9px 0;border-top:1px dashed var(--line);color:var(--fg)}
.dir li:first-child{border-top:0;padding-top:0}
.dir li a{font-weight:500}
.dir li span{display:block;color:var(--faint);font-size:.86rem}

/* prose (spec) */
.prose{max-width:var(--docw);padding-bottom:56px}
.prose h2{font-size:1.4rem;letter-spacing:-.015em;margin:44px 0 10px;padding-top:20px;border-top:1px solid var(--line);scroll-margin-top:80px}
.prose h3{font-size:1.1rem;margin:28px 0 8px}
.prose p,.prose li{color:#cdd8d9}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:5px 0}
.prose strong{color:var(--fg)}

code{font-family:var(--mono);font-size:.86em;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:.86rem;line-height:1.55}
pre code{background:none;border:0;padding:0;font-size:inherit;overflow-wrap:normal}
.table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;background:var(--surface);font-weight:600;color:var(--fg)}
td{color:#cdd8d9}

.note{background:var(--surface);border:1px solid var(--accent-dim);border-left:3px solid var(--accent);border-radius:8px;padding:14px 16px;color:var(--muted);margin:22px 0}
.note.warn{border-color:#4a3a1c;border-left-color:var(--warn)}
.note strong{color:var(--fg)}

footer.site{border-top:1px solid var(--line);padding-block:30px;color:var(--faint);font-size:.84rem}
.foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
td code,th code{overflow-wrap:normal;white-space:nowrap}
[id]{scroll-margin-top:84px}

/* shared header nav (all pages) */
.brand .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-weight:400}
.nav{gap:14px}
@media(min-width:640px){.nav{gap:20px}}
.brand .tag{display:none}
@media(min-width:480px){.brand .tag{display:inline}}
.ext::after{content:" ↗";font-size:.8em;color:var(--faint)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:11px 16px;border:1px solid transparent;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{background:#49e3a1;color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.hide-xs{display:none}
@media(min-width:430px){.hide-xs{display:inline}}
.wrap-code td code{white-space:normal;overflow-wrap:break-word}

/* Tables never scroll: cells wrap; on phones each row stacks into a card,
   labelled from the header (data-label, set by /assets/tables.js). */
.table-wrap{overflow:visible}
table{table-layout:auto}
td code,th code,.wrap-code td code{white-space:normal;overflow-wrap:break-word;word-break:normal}
td,th{overflow-wrap:break-word}
@media(max-width:640px){
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:auto}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap tr{border-top:1px solid var(--line);padding:10px 0}
  .table-wrap tbody tr:first-child{border-top:0}
  .table-wrap td{border:0;padding:4px 14px}
  .table-wrap td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
  .table-wrap th[style]{width:auto!important}
}
.nav a{white-space:nowrap}
@media(max-width:430px){.nav{gap:11px;font-size:.84rem}.brand{gap:8px}}

/* Ask Ava (workrr agent) */
.nav-ask{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:var(--muted);font:inherit;white-space:nowrap;cursor:pointer}
.nav-ask:hover{color:var(--fg)}
.nav-ask:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* Ask Ava (workrr agent): centered in the header, plus a footer link */
.ask-slot { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ask-center { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 9px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: .92rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; }
.ask-center:hover { border-color: var(--accent); }
.ask-center:focus-visible, .footer-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer-ask { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.footer-ask:hover { color: var(--fg); }
.nav-ask { display: none !important; }
@media (max-width: 640px) { .ask-slot { display: none; } .nav-ask { display: inline-flex !important; } }

/* Header: brand left, Ask Ava centred on the page, nav right (one width, --maxw, on every page) */
@media(min-width:1000px){
  header.site .bar{display:grid;grid-template-columns:1fr auto 1fr}
  header.site .bar .brand{justify-self:start}
  header.site .bar .ask-slot{flex:none}
  header.site .bar .nav{justify-self:end}
}
/* Footer: copyright left, Ask Ava centred, links right; stacked and centred on small screens */
footer .foot{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px}
@media(min-width:1000px){
  footer .foot{grid-template-columns:1fr auto 1fr}
  footer .foot>span:first-child{justify-self:start;text-align:left}
  footer .foot>span:last-child{justify-self:end;text-align:right}
}
.foot-ask .ask-center{font-size:.86rem}

/* Header status link: the dot shows up / degraded / down (status-dot.js sets the class) */
.status-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.sdot.up{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.sdot.degraded{background:var(--warn);box-shadow:0 0 0 3px rgba(230,179,92,.18)}
.sdot.down{background:var(--crit);box-shadow:0 0 0 3px rgba(226,105,95,.2);animation:sdot-pulse 1.6s ease-in-out infinite}
@keyframes sdot-pulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.sdot.down{animation:none}}
/* Phones: the dot alone stands for Status, and "How it works" (also in the footer) leaves the header */
@media(max-width:430px){.status-link .lbl{display:none}.nav a[href="/how-it-works/"]{display:none}}
/* Same header and footer metrics on every page, whatever a page's own styles set */
header.site,footer.site{line-height:1.65}
@media(max-width:430px){header.site .brand{gap:8px}}