/* Toolkit candidate. Visual language matches the live site's pages (dark surface, blue accent).
   Self-contained: no web fonts, no third-party requests. */
:root{
  --bg:#0B0D10; --surface:#15191E; --text:#F2F4F5; --text-2:#8C969F;
  --accent:#3D7EFF; --green:#36C98F; --red:#F05D68;
  --border:rgba(242,244,245,0.12); --border-strong:rgba(242,244,245,0.20);
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 20px; }

nav.topnav{ position:sticky; top:0; z-index:10; background:rgba(11,13,16,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); }
.topnav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1180px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand svg{ width:34px; height:34px; flex:none; }
.brand-word{ font-weight:600; font-size:1.05rem; letter-spacing:-0.01em; }
.nav-links{ display:flex; align-items:center; gap:20px; font-size:0.88rem; color:var(--text-2); }
.nav-links a{ text-decoration:none; color:var(--text-2); padding:12px 4px; }
.nav-links a:hover, .nav-links a.current{ color:var(--text); }

header.page-head{ padding:48px 0 8px; }
.eyebrow{ font-family:var(--mono); font-size:0.78rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2); margin:0 0 6px; }
h1{ font-weight:700; font-size:clamp(1.9rem,4.6vw,2.5rem); line-height:1.12; letter-spacing:-0.02em; margin:0 0 14px; overflow-wrap:break-word; }
.lede{ color:var(--text-2); font-size:1rem; max-width:66ch; margin:0 0 8px; line-height:1.6; }
.who{ color:var(--text); font-size:0.95rem; margin:0 0 18px; max-width:66ch; }
.datum{ height:3px; width:60px; background:var(--accent); border:0; margin:18px 0 22px; }
ul.defs{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:0.92rem; color:var(--text-2); max-width:66ch; }
ul.defs b{ color:var(--text); }
ul.defs-index{ font-size:0.94rem; }
p.jump{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 28px; font-size:0.9rem; }
p.jump a{ color:var(--accent); text-decoration:none; padding:8px 0; }
p.jump a:hover{ text-decoration:underline; }

.disclosure{ background:var(--surface); border:1px solid var(--accent); border-radius:10px; padding:16px 20px; margin:0 0 36px; font-size:0.93rem; line-height:1.6; }
.disclosure b{ display:block; margin-bottom:2px; }
.disclosure span{ color:var(--text-2); }

section{ padding:0 0 48px; }
/* Jump-link targets clear the sticky nav (about 75px tall). */
[id]{ scroll-margin-top:96px; }
h2{ font-weight:600; font-size:clamp(1.3rem,3vw,1.6rem); letter-spacing:-0.01em; margin:0 0 12px; }
h3{ font-weight:600; font-size:1.02rem; margin:22px 0 8px; }
.section-sub{ color:var(--text-2); font-size:0.94rem; max-width:70ch; margin:0 0 18px; line-height:1.6; }
.note{ color:var(--text-2); font-size:0.92rem; margin:18px 0 0; max-width:66ch; }

dl.why{ margin:0; display:flex; flex-direction:column; gap:14px; }
dl.why dt{ font-weight:600; font-size:0.96rem; }
dl.why dd{ margin:2px 0 0; color:var(--text-2); font-size:0.92rem; line-height:1.55; max-width:70ch; }
ol.how{ margin:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:10px; font-size:0.96rem; }
ol.how li::marker{ color:var(--accent); font-family:var(--mono); font-weight:600; }

table.fields{ border-collapse:collapse; width:100%; font-size:0.9rem; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
table.fields th, table.fields td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; }
table.fields thead th{ background:var(--surface); font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-2); font-weight:600; }
table.fields tbody th{ font-weight:600; width:32%; background:var(--bg); }
table.fields td{ color:var(--text-2); }
table.fields.example td{ color:var(--text); }
table.fields tbody tr:last-child th, table.fields tbody tr:last-child td{ border-bottom:0; }
table.fields.example thead th:last-child{ color:var(--green); }

pre.tpl{ margin:14px 0 14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; font-family:var(--mono); font-size:0.82rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); }
pre.tpl.csv{ overflow-wrap:normal; word-break:normal; font-size:0.8rem; }
.btn-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; font-family:var(--sans); font-weight:600; font-size:0.95rem; padding:12px 20px; border-radius:8px; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--accent); color:#04060a; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--accent); background:rgba(61,126,255,0.08); }
.copy-status{ font-family:var(--mono); font-size:0.8rem; color:var(--green); }

ol.cards{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.card a{ display:flex; gap:16px; align-items:flex-start; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; }
.card a:hover{ border-color:var(--accent); }
.card .num{ color:var(--accent); font-weight:600; font-size:0.95rem; padding-top:2px; }
.card-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.card-body b{ font-size:1.05rem; }
.card-body span{ color:var(--text-2); font-size:0.9rem; line-height:1.5; }
ul.plain{ margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:8px; font-size:0.94rem; color:var(--text-2); }

nav.pn{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--border); font-size:0.92rem; }
nav.pn a{ text-decoration:none; color:var(--text-2); display:inline-block; padding:10px 0; }
nav.pn a:hover{ color:var(--text); }
.back{ margin:0 0 40px; font-size:0.9rem; }
.back a{ color:var(--text-2); display:inline-block; padding:8px 0; }

footer{ border-top:1px solid var(--border); padding:40px 0 60px; }
.footer-grid{ display:flex; flex-direction:column; gap:18px; }
@media (min-width:640px){ .footer-grid{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; font-size:0.88rem; color:var(--text-2); }
.footer-links a{ text-decoration:none; display:inline-block; padding:11px 0; min-height:44px; }
.footer-links a:hover{ color:var(--text); }
.footer-sig{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--text-2); text-transform:uppercase; }

@media (max-width:480px){
  table.fields th, table.fields td{ padding:10px 10px; font-size:0.86rem; }
  table.fields tbody th{ width:36%; }
}

/* Print: the template only. White page, ink-friendly, everything else hidden, extra line spacing to write in. */
@media print{
  :root{ --bg:#fff; --surface:#fff; --text:#000; --text-2:#333; --border:#bbb; --border-strong:#888; --accent:#000; --green:#000; }
  body{ background:#fff; color:#000; }
  nav.topnav, footer, header.page-head, nav.pn, .back, .btn-row, .no-print, .copy-status,
  .tpl-section > h2, .tpl-section > .section-sub,
  .wrap-narrow > section:not(.tpl-section){ display:none !important; }
  section.tpl-section{ padding:0; }
  pre.tpl{ border:0; padding:0; font-size:11pt; line-height:2.3; break-inside:auto; }
}