/* THE HOUSE SCROLLBAR — one page scroll, a pinstripe, nothing else.
   Ruled 2026-09-08 ("scrollbars always need to be beautifully styled... apps and websites and everywhere
   relevant"), 2026-09-24 ("a darker shade of the background, pinstripe and that's it"), and 2026-09-25 on the
   Sector Matrix ("no horizontal or vertical scroll in page, just the overall well styled side pinstripe scroll
   bar... on the checklist for every deliverable").

   Rules:
   1. A page scrolls ONCE, vertically, as a whole. No inner overflow:auto region — a table, a panel, a list, a
      drawer — ever scrolls on its own. Whatever is too wide is MADE TO FIT (fewer columns, a stacked layout at
      phone width, smaller type), never given a scroll region. A page that prints has no scrollbar at all.
   2. The one bar is a 3 px lane down the right edge, the thumb a darker shade of the page's own ground
      (--bar), no track, no arrows, no corner, no hover chrome. Set --bar per theme.
   3. The webkit parts only where they exist — Chrome drops them the moment scrollbar-width/-color are set —
      and the standard pair for the browsers without them.
   4. The page's self-test carries a line `page.one-scroll` (the pattern in the Sector Matrix): no element but
      the document scrolls, the document does not scroll sideways, and the bar rule is present. Broken on
      purpose with an inner scroll region, that line goes red.

   Inline this file at build time (standards/inline.mjs), as nav3d.js is inlined. */
:root{--bar:#e0dbcd}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bar:#2a2722}}
:root[data-theme="dark"]{--bar:#2a2722}
html{overflow-x:hidden;scrollbar-gutter:stable}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bar);border-radius:0}
::-webkit-scrollbar-button{display:none;width:0;height:0}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--bar) transparent}}

/* 45reasons tokens - the one source; tools/build.py inlines this into every page (DESIGN.md is the rationale).
   Layout concept: a magazine page - white paper, the photograph uncropped by type, a 12-column grid, hairlines,
   captions set small. One light theme on purpose: this is paper, in print and on screen. */
:root{
  --paper:#FFFFFF;      /* the page */
  --ink:#141414;        /* text */
  --grey:#6E6E6E;       /* captions, credits, secondary text */
  --hair:#E2E2E2;       /* rules */
  --stone:#F3F1EC;      /* the one tinted panel (the access pass, the menu footer) */
  --sea:#0E5A5F;        /* the one accent: kickers, entry numbers, the selected answer */
  --ok:#2E6B4F; --warn:#9A6212; --bad:#A1261C;   /* status only */
  --bar:#D9D9D9;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bar:#D9D9D9}}
:root[data-theme="dark"]{--bar:#D9D9D9}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 45reasons.com, private beta. Builds on brand/tokens.css (inlined before this) and the house pinstripe scrollbar.
   The front door is a screen that does not scroll; the request form and the privacy note are documents (one scroll);
   the founder dashboard is a screen whose panels page. */
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.mono{display:block;height:100%;width:auto;fill:currentColor}
[data-mono]{display:block;line-height:0}
.k{font:600 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.wm{font:400 20px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;font-variant-numeric:lining-nums;white-space:nowrap;padding-left:.3em;text-decoration:none}
.cap{font:400 13px/1.5 var(--sans);color:var(--grey)}
.btn{display:inline-block;font:500 14px/1 var(--sans);letter-spacing:.06em;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:16px 26px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink)}
.link{font:500 14px/1 var(--sans);letter-spacing:.04em;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;cursor:pointer;color:var(--ink);text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,.chip:focus-within{outline:2px solid var(--sea);outline-offset:3px}
.wrap{padding-inline:clamp(16px,4vw,56px);max-width:1180px;margin-inline:auto}

/* ---- the front door: one screen ---- */
body.door{height:100vh;height:100dvh;overflow:hidden}
.door main{height:100%;display:grid;grid-template-rows:1fr auto;padding-inline:clamp(16px,4vw,56px)}
.door .c{display:grid;justify-items:center;align-content:center;text-align:center;gap:22px;min-height:0}
.door .c [data-mono]{height:clamp(120px,32vh,300px)}
.door .c .wm{font-size:clamp(17px,2vw,22px);margin-top:6px}
.door .line{font:italic 300 clamp(20px,2.4vw,28px)/1.25 var(--serif);margin:0;max-width:22em}
.door .acts{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:center;margin-top:10px}
.door footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;border-top:1px solid var(--hair);padding-block:14px 18px}

/* ---- documents: masthead, then the page ---- */
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid var(--ink)}
.mast .brand{display:flex;align-items:flex-end;gap:12px;text-decoration:none;color:var(--ink)}
.mast .brand [data-mono]{height:34px}
.mast .wm{font-size:16px;padding-left:0}
.doc{max-width:760px;padding-block:44px 72px}
.doc h1{font:300 clamp(36px,5vw,58px)/1.02 var(--serif);letter-spacing:-.02em;margin:10px 0 14px;text-wrap:balance}
.doc .lede{font:italic 400 20px/1.45 var(--serif);margin:0 0 8px;color:var(--ink)}
.doc h2{font:400 26px/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 4px;text-wrap:balance}
.doc p{margin:0 0 12px}
fieldset{border:0;border-top:1px solid var(--hair);margin:34px 0 0;padding:26px 0 0;min-width:0}
fieldset>.cap{margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{font:500 14px/1 var(--sans);letter-spacing:.02em;border:1px solid var(--bar);padding:13px 16px;background:var(--paper)}
.chip input:checked+span{border-color:var(--sea);color:var(--sea);box-shadow:inset 0 0 0 1px var(--sea)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.fields .wide{grid-column:1/-1}
.fields.one{grid-template-columns:minmax(0,1fr);max-width:520px;margin-top:26px}
.or{display:flex;align-items:center;gap:14px;max-width:520px;margin:30px 0 0!important;text-transform:uppercase;letter-spacing:.14em}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--hair)}
.or+.send{margin-top:20px}
label.f{display:grid;gap:7px;font:600 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
label.f input{font:400 18px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);border:0;border-bottom:1px solid var(--ink);padding:8px 0;background:transparent;border-radius:0;width:100%}
label.f input:focus{outline:none;border-bottom-color:var(--sea);box-shadow:0 1px 0 var(--sea)}
.hint{font:400 13px/1.45 var(--sans);color:var(--grey);text-transform:none;letter-spacing:0;font-weight:400}
.err{color:var(--bad)}
.errors{border:1px solid var(--bad);padding:14px 18px;margin:26px 0 0;font:400 15px/1.5 var(--sans);color:var(--bad)}
.errors ul{margin:6px 0 0;padding-left:18px}
.pass{background:var(--stone);padding:22px 24px;margin-top:34px}
.pass b{display:block;font:400 22px/1.2 var(--serif);margin-bottom:6px}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin-top:26px;font:400 15px/1.5 var(--sans)}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--sea)}
.send{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:30px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.from{border-left:2px solid var(--sea);padding:4px 0 4px 14px;margin:22px 0 0;font:400 15px/1.5 var(--sans)}
.acks{list-style:none;padding:0;margin:26px 0;border-top:1px solid var(--hair)}
.acks li{padding:14px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px}
.acks li .cap{padding-top:3px}
.foot{border-top:1px solid var(--hair);padding-block:18px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.status{font:400 15px/1.5 var(--sans);min-height:1.5em;margin-top:16px}

/* ---- the founder dashboard: a screen ---- */
body.dash{height:100vh;height:100dvh;overflow:hidden}
.dash .shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr);padding-inline:clamp(16px,2.4vw,36px)}
.mast .who{display:flex;gap:18px;align-items:center;font:400 13px/1.3 var(--sans);color:var(--grey)}
.dash .mast form{margin:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.kpi{padding:16px 0 14px;display:grid;gap:4px}
.kpi+.kpi{border-left:1px solid var(--hair);padding-left:20px}
.kpi b{font:300 40px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.panels{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:0 32px;min-height:0;padding-block:14px 12px}
.panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;overflow:hidden}
.panel h2{font:400 22px/1.1 var(--serif);margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.panel h2 .cap{font-size:12px}
table.rq{align-self:start;width:100%;border-collapse:collapse;font:400 13px/1.35 var(--sans);table-layout:fixed}
table.rq th{text-align:left;font:600 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding:0 10px 8px 0;border-bottom:1px solid var(--ink)}
table.rq td{padding:9px 10px 9px 0;border-bottom:1px solid var(--hair);vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.rq td a{text-decoration:none;border-bottom:1px solid var(--hair)}
table.rq .n{font-variant-numeric:tabular-nums;color:var(--grey)}
.pager{display:flex;justify-content:space-between;align-items:center;padding-top:10px;font:400 13px/1 var(--sans);color:var(--grey)}
.pager a{color:var(--ink)}
.side{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}
.bars{list-style:none;margin:0 0 12px;padding:0;font:400 13px/1.3 var(--sans)}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:10px;padding:4px 0}
.bars .bar{grid-column:1/-1;display:block;width:100%;height:3px;background:var(--hair);margin-top:3px}
.bars .bar rect{fill:var(--sea)}
.bars .c{text-align:right;font-variant-numeric:tabular-nums;color:var(--grey)}
.said{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:4px 22px;min-height:0;overflow:hidden}
.side h2{font:400 22px/1.1 var(--serif);margin:0 0 10px}
.side .cap{margin:0 0 6px}
.after{margin-top:28px}
col.w-when{width:13%}col.w-name{width:19%}col.w-mail{width:21%}col.w-tel{width:13%}col.w-where{width:16%}col.w-yes{width:10%}col.w-spend{width:8%}
.said h3{font:600 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:8px 0 2px}
.empty{font:italic 400 17px/1.5 var(--serif);color:var(--grey);padding:18px 0}
dl.rec{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 22px;margin:22px 0;font:400 16px/1.45 var(--serif)}
dl.rec dt{font:600 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
dl.rec dd{margin:0;overflow-wrap:anywhere}

@media (max-width:760px){
  .fields{grid-template-columns:minmax(0,1fr)}
  .acks li,dl.rec{grid-template-columns:minmax(0,1fr)}
  body.dash{height:auto;overflow:visible}
  .dash .shell{height:auto}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:nth-child(3){border-left:0;padding-left:0}
  .panels{grid-template-columns:minmax(0,1fr);gap:26px}
  table.rq col.opt,table.rq .opt{display:none}
  col.w-when{width:32%}col.w-name{width:36%}col.w-where{width:32%}
  .mast:has(.who){flex-wrap:wrap}.mast .who{flex-wrap:wrap;gap:8px 16px}.mast .who>span:not(.k){display:none}
}