/* ============================================================================
   comprenda.ai — the public site design system, 2026-09-09.
   ONE stylesheet for the five public pages (/, /platform, /discoveries,
   /research, /company) plus /login and /decision.

   Warm paper, dark ink, flat surfaces, hairlines, no shadows. Carried forward
   from the /screens and /discoveries product grammar so the marketing site and
   the product read as one object rather than three.

   EVIDENCE COLOUR IS SEMANTIC AND NEVER COMMERCIAL. Green means the question is
   resolved -- including when the answer is bad news. Blue means live question.
   Amber means we do not know. Rust means contradicted. Grey means retired.
   Do not reuse these for "good result" / "bad result"; that is the one rule in
   this file that a reader can actually be misled by.
   ========================================================================== */

:root{
  /* paper + ink -------------------------------------------------------- */
  --paper:#FBFAF7;      /* warm ivory, never pure white */
  --raised:#FFFFFF;
  --sunk:#F4F2ED;
  --line:#E4E1D8;
  --hair:#EEECE4;
  --ink:#15191D;        /* very dark charcoal-navy */
  --ink-2:#4B5158;
  --ink-3:#7A8188;      /* warm grey, biased toward the mineral accent */

  /* the one accent ----------------------------------------------------- */
  --mineral:#17384F;
  --mineral-soft:#E8EEF3;
  --mineral-line:#BCCEDC;

  /* evidence state — SEMANTIC, NOT COMMERCIAL --------------------------- */
  --ok:#1F6B4A;    --ok-soft:#E6F1EB;    --ok-line:#B6D6C4;   /* supported / resolved */
  --live:#0A6C9E;  --live-soft:#E4F0F7;  --live-line:#A9CDE2; /* active question / worth testing */
  --unk:#8A6014;   --unk-soft:#F6EFE0;   --unk-line:#E0CDA3;  /* unknown / insufficient */
  --rev:#8C4A38;   --rev-soft:#F4EAE6;   --rev-line:#DFC0B4;  /* contradicted / reversed */
  --off:#7A8085;   --off-soft:#F0EEE9;   --off-line:#D8D5CD;  /* retired / inactive */

  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Spectral,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px; --r-s:7px;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1114; --raised:#161A1E; --sunk:#12161A; --line:#282D33; --hair:#1E2328;
  --ink:#F1F0EB; --ink-2:#B3B9C0; --ink-3:#858B92;
  --mineral:#9EC1DA; --mineral-soft:#15242E; --mineral-line:#2A4457;
  --ok:#63C398;  --ok-soft:#12241C;  --ok-line:#23503A;
  --live:#54B0E0; --live-soft:#0E2430; --live-line:#20516C;
  --unk:#D2A85C; --unk-soft:#221C0E; --unk-line:#544219;
  --rev:#D08C78; --rev-soft:#231512; --rev-line:#5A342A;
  --off:#8B9198; --off-soft:#1A1E22; --off-line:#333940;
}}
:root[data-theme="dark"]{
  --paper:#0E1114; --raised:#161A1E; --sunk:#12161A; --line:#282D33; --hair:#1E2328;
  --ink:#F1F0EB; --ink-2:#B3B9C0; --ink-3:#858B92;
  --mineral:#9EC1DA; --mineral-soft:#15242E; --mineral-line:#2A4457;
  --ok:#63C398;  --ok-soft:#12241C;  --ok-line:#23503A;
  --live:#54B0E0; --live-soft:#0E2430; --live-line:#20516C;
  --unk:#D2A85C; --unk-soft:#221C0E; --unk-line:#544219;
  --rev:#D08C78; --rev-soft:#231512; --rev-line:#5A342A;
  --off:#8B9198; --off-soft:#1A1E22; --off-line:#333940;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px}
@media(max-width:760px){.wrap{padding:0 20px}}

/* ---- nav: four destinations, sign in, and the one commercial action ---- */
nav.site{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:var(--paper)}
nav.site .wrap{display:flex;align-items:center;gap:30px;height:66px}
nav.site .mark{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em;margin-right:auto;color:var(--ink)}
nav.site a.n{font-size:14.5px;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
nav.site a.n:hover{color:var(--ink)}
nav.site a.n[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mineral)}
nav.site .sep{width:1px;height:20px;background:var(--line);flex:none}
nav.site a.in{font-size:14px;color:var(--ink-2)}
nav.site a.go{font-size:14px;font-weight:500;color:var(--paper);background:var(--mineral);
               padding:8px 16px;border-radius:var(--r-s)}
@media(max-width:900px){
  nav.site .wrap{gap:18px;overflow-x:auto;height:58px}
  nav.site a.n,nav.site a.in,nav.site a.go{white-space:nowrap;font-size:13.5px}
  nav.site .sep{display:none}
}

/* ---- section rhythm ---- */
section{padding:88px 0;border-bottom:1px solid var(--hair)}
section.tight{padding:60px 0}
section:last-of-type{border-bottom:0}
@media(max-width:760px){section{padding:56px 0}}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
         color:var(--ink-3);font-weight:500}
.h1{font-family:var(--serif);font-size:clamp(38px,5.4vw,62px);font-weight:400;letter-spacing:-.028em;
    line-height:1.04;margin:20px 0 0}
.h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:400;letter-spacing:-.022em;
    line-height:1.14;margin:16px 0 0}
.h3{font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:-.018em;line-height:1.26}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin-top:22px}
.body{font-size:16px;color:var(--ink-2);max-width:66ch;margin-top:16px}
.rule{height:1px;background:var(--line);border:0;margin:0}

.btn{display:inline-block;padding:11px 22px;border-radius:var(--r-s);background:var(--mineral);
     color:var(--paper);font-size:15px;font-weight:500}
.btn:hover{filter:brightness(1.12)}
.btn.g{background:none;color:var(--ink-2);border:1px solid var(--line)}
.btn.g:hover{background:var(--sunk);filter:none;color:var(--ink)}
.cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;align-items:center}
.link{font-size:15px;color:var(--mineral);font-weight:500;border-bottom:1px solid var(--mineral-line);
      padding-bottom:1px}
.link:hover{border-bottom-color:var(--mineral)}

/* ---- evidence-state chip: the load-bearing component ---- */
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
    letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:4px 9px;border-radius:3px;
    white-space:nowrap}
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.s-ok{background:var(--ok-soft);color:var(--ok)}
.s-live{background:var(--live-soft);color:var(--live)}
.s-unk{background:var(--unk-soft);color:var(--unk)}
.s-rev{background:var(--rev-soft);color:var(--rev)}
.s-off{background:var(--off-soft);color:var(--off)}

/* ---- surfaces ---- */
.panel{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel .head{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--hair);
             background:var(--sunk)}
.panel .head .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
                color:var(--ink-3)}
.panel .body-pad{padding:26px 28px}
.mono{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.tnum{font-variant-numeric:tabular-nums}

/* ---- the big typographic tally (5 / 4 / 8) ---- */
.tally{display:flex;gap:clamp(28px,6vw,72px);flex-wrap:wrap;margin-top:30px}
.tally div span{font-family:var(--serif);font-size:clamp(56px,9vw,92px);line-height:.94;display:block;
                letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tally div em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
              text-transform:uppercase;color:var(--ink-3);display:block;margin-top:12px}
.tally .held span{color:var(--ok)} .tally .rev span{color:var(--rev)} .tally .gone span{color:var(--off)}

/* ---- the evidence trace: say -> show -> do -> worth ---- */
.trace{margin-top:34px;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
       background:var(--raised);overflow:hidden}
.trace .lyr{padding:22px 26px;border-bottom:1px solid var(--hair);display:grid;
            grid-template-columns:186px minmax(0,1fr);gap:24px;align-items:baseline}
.trace .lyr:last-child{border-bottom:0}
.trace .lyr .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.trace .lyr .v{font-size:15.5px;color:var(--ink-2);line-height:1.5}
.trace .l1 .k{color:var(--ink-3)}
.trace .l2{background:var(--sunk)} .trace .l2 .k{color:var(--live)}
.trace .l3 .k{color:var(--ink)}
.trace .l4{background:var(--sunk)} .trace .l4 .k{color:var(--ok)}
@media(max-width:700px){.trace .lyr{grid-template-columns:1fr;gap:8px}}

/* ---- editorial finding feed ---- */
.feed{border-top:1px solid var(--line);margin-top:34px}
.fi{display:block;padding:28px 6px;border-bottom:1px solid var(--hair);transition:padding-left .18s ease}
.fi:hover{padding-left:14px;background:linear-gradient(90deg,var(--sunk),transparent 62%)}
.fi .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fi h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);font-weight:400;line-height:1.22;
       letter-spacing:-.02em;max-width:30ch}
.fi .why{color:var(--ink-2);font-size:15.5px;margin-top:12px;max-width:68ch}
.fi .why b{color:var(--ink);font-weight:500}
.fi .foot{display:flex;flex-wrap:wrap;gap:26px;margin-top:18px;align-items:baseline}
.fi .foot div{font-size:13.5px;color:var(--ink-2)}
.fi .foot b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
            text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:3px}

/* ---- generic grids ---- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden;background:var(--raised)}
.g3>div{padding:24px 26px;border-right:1px solid var(--hair)}
.g3>div:last-child{border-right:0}
@media(max-width:860px){.g2{grid-template-columns:1fr;gap:24px}.g3{grid-template-columns:1fr}
  .g3>div{border-right:0;border-bottom:1px solid var(--hair)}.g3>div:last-child{border-bottom:0}}

/* ---- footer ---- */
footer.site{padding:56px 0 72px;background:var(--sunk);border-top:1px solid var(--line)}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site .mark{font-family:var(--serif);font-size:19px;letter-spacing:-.02em}
footer.site p{font-size:13.5px;color:var(--ink-3);margin-top:10px;max-width:34ch;line-height:1.6}
footer.site b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
              text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:12px}
footer.site a{display:block;font-size:14px;color:var(--ink-2);padding:4px 0}
footer.site a:hover{color:var(--ink)}
footer.site .fine{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
                  font-size:12.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---- tables ---- */
table.hair{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:26px}
table.hair th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
              text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:0 18px 10px 0}
table.hair td{padding:15px 18px 15px 0;border-top:1px solid var(--hair);vertical-align:top;
              font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.hair td.b{color:var(--ink);font-weight:500}
.scroll-x{overflow-x:auto}

/* ---- the plain note ---- */
.note{background:var(--sunk);border:1px solid var(--hair);border-radius:var(--r-s);padding:16px 20px;
      font-size:14.5px;color:var(--ink-2);max-width:78ch;margin-top:24px}
.note b{color:var(--ink);font-weight:500}
.note.live-n{background:var(--live-soft);border-color:var(--live-line)}
.note.unk-n{background:var(--unk-soft);border-color:var(--unk-line)}

/* ---- the pull line ---- */
.pull{font-family:var(--serif);font-size:clamp(26px,3.2vw,36px);font-weight:400;letter-spacing:-.022em;
      line-height:1.22;margin-top:34px;max-width:22ch}
.pull.wide{max-width:32ch}

/* ---- the survival funnel: raw -> ... -> earned a test ---- */
.funnel{display:flex;align-items:flex-start;gap:0;margin-top:34px;flex-wrap:wrap}
.funnel .n{flex:1 1 0;min-width:104px;text-align:center}
.funnel .n span{font-family:var(--serif);font-size:clamp(38px,5.2vw,60px);line-height:1;display:block;
                letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.funnel .n.last span{color:var(--ok)}
.funnel .n em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
              text-transform:uppercase;color:var(--ink-3);display:block;margin-top:14px}
.funnel .a{flex:0 0 auto;color:var(--ink-3);font-size:15px;padding:0 6px;
           align-self:flex-start;margin-top:clamp(14px,2.2vw,22px)}
@media(max-width:700px){.funnel .a{display:none}.funnel .n{flex:1 1 40%;margin-bottom:20px}}

/* ---- state -> move -> outcome ---- */
.smo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px;
     font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.smo b{font-weight:600;color:var(--ink);background:var(--sunk);border:1px solid var(--line);
       border-radius:var(--r-s);padding:8px 14px}
.smo i{font-style:normal;color:var(--ink-3)}

/* ---- the experiment strip: freeze / assign / verify / grade / decide ----
   Moved here from w_platform.html's own <style> block 2026-09-09. The home page
   reused this markup and rendered it as an unstyled list of words, because the
   rules lived on one page and the markup on two. Shared markup needs shared CSS. */
.xp{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;background:var(--raised);margin-top:30px}
.xp>div{padding:22px 20px;border-right:1px solid var(--hair)}
.xp>div:last-child{border-right:0}
.xp .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--ink);font-weight:600;margin-bottom:9px}
.xp .d{font-size:14px;color:var(--ink-2);line-height:1.5}
@media(max-width:860px){.xp{grid-template-columns:1fr}
  .xp>div{border-right:0;border-bottom:1px solid var(--hair)}.xp>div:last-child{border-bottom:0}}

/* ---- the question list. Same fix as .xp: used on two pages, was defined on one. ---- */
.qlist{margin-top:28px;border-left:2px solid var(--line);padding-left:24px;
       display:flex;flex-direction:column;gap:14px}
.qlist p{font-family:var(--serif);font-size:19px;color:var(--ink-2);line-height:1.4;font-style:italic}

/* ---- interactive widgets. Shared across /, /discoveries and /platform, so the rules
   live here and not in one page's <style> block. Same lesson as .xp. ---- */
.ix{margin-top:34px;border-top:1px solid var(--line);padding-top:34px}
.ix .q{font-size:15px;color:var(--ink);margin-top:18px}
.opt{display:grid;gap:10px;margin-top:16px}
.opt button{text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-s);
     padding:16px 18px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s}
.opt button:hover{border-color:var(--ink-3)}
.opt button[aria-pressed="true"]{border-color:var(--mineral);box-shadow:inset 3px 0 0 var(--mineral)}
.opt button[disabled]{opacity:.5;cursor:default}
.opt .sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px}
.res{margin-top:22px;border-left:3px solid var(--ok);padding-left:20px}
.res.miss{border-color:var(--rev)}
.res .hd{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.res .bd{font-size:14.5px;color:var(--ink-2);margin-top:10px;line-height:1.55}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:18px;border:1px solid var(--line);
     border-radius:var(--r);overflow:hidden}
.duo>div{padding:18px 20px;border-right:1px solid var(--hair)}
.duo>div:last-child{border-right:0}
.duo .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.duo .v{font-family:var(--serif);font-size:34px;margin-top:6px;font-variant-numeric:tabular-nums}
.tl{position:relative;height:82px;margin-top:20px}
.tl .ln{position:absolute;top:26px;left:0;right:0;height:2px;background:var(--line)}
.tl .mk{position:absolute;top:19px;width:16px;height:16px;border-radius:50%;background:var(--line);
        cursor:pointer;transform:translateX(-8px);border:0}
.tl .mk[aria-pressed="true"]{background:var(--mineral)}
.tl .lb{position:absolute;top:48px;font-family:var(--mono);font-size:10px;color:var(--ink-3);
        transform:translateX(-50%);white-space:nowrap}
@media(max-width:640px){.duo{grid-template-columns:1fr}.duo>div{border-right:0;border-bottom:1px solid var(--hair)}}

.ix .lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--ok);margin:0}

/* Links inside prose. Previously every inline link needed its own class, and
   one of them (.ln) silently matched the timeline rule instead and rendered as
   plain text. Style the element, not a class nobody can remember. */
.body a,.lede a,.note a,.who a,dl.limits dd a{color:var(--mineral);text-decoration:none;
   border-bottom:1px solid var(--mineral-line);transition:border-color .15s}
.body a:hover,.lede a:hover,.note a:hover,.who a:hover,dl.limits dd a:hover{border-bottom-color:var(--mineral)}
.body a:focus-visible,.lede a:focus-visible,.note a:focus-visible{outline:2px solid var(--mineral);
   outline-offset:2px;border-radius:2px}

.sk{padding:80px 0;border-bottom:1px solid var(--hair)}
.sk .lede{margin-top:18px}

/* ---- hero: base only. Pages may still override padding locally; this exists so a
   new page is not required to redeclare it, which is how w_knows shipped without one. */
.hero{padding:74px 0 0}
.hero .lede{margin-top:18px}

.ask .q .caret{display:inline-block;width:2px;height:20px;background:var(--live);vertical-align:-3px;margin-left:2px;animation:blink 1.3s steps(1) infinite}

/* ---- shared after the home cut: used by discoveries and platform ------ */
.decay{margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--raised);padding:28px 30px}
.decay svg{width:100%;height:auto;display:block}
.decay .legend{display:flex;gap:30px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.decay .legend div{font-size:13.5px;color:var(--ink-2)}
.decay .legend b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:3px}


.pretest{margin-top:44px;border-top:1px solid var(--line);padding-top:34px}

/* ---- callout panel (decision, research) ------------------------------ */
.ceil{margin-top:22px;border:1px solid var(--mineral-line);background:var(--mineral-soft);
   border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.ceil .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mineral)}
.ceil p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:78ch}
.ceil p b{color:var(--ink);font-weight:500}
.ceil .fine{font-size:12.5px;color:var(--ink-3)}

/* ---- rule-led statement list (company, research) --------------------- */
.four{margin-top:30px;border-left:2px solid var(--line);padding-left:26px;display:flex;flex-direction:column;gap:14px}

/* ---- labelled row stack (company, platform) ---------------------------- */
.stack{margin-top:36px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--raised)}
.stack .row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;padding:22px 28px;
            border-bottom:1px solid var(--hair);align-items:baseline}
.stack .row:last-child{border-bottom:0}
.stack .row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.stack .row .v{font-size:16px;color:var(--ink-2)}
.stack .r1 .k{color:var(--ink-3)} .stack .r2 .k{color:var(--live)} .stack .r3 .k{color:var(--ink)}
.stack .r4 .k{color:var(--mineral)} .stack .r5 .k{color:var(--ok)} .stack .r6 .k{color:var(--ink-2)}
.stack .r2,.stack .r4,.stack .r6{background:var(--sunk)}
@media(max-width:700px){.stack .row{grid-template-columns:1fr;gap:5px}}

/* ---- the exchange table (home) -------------------------------------------
   Twelve states -> pick three -> ranked reveal. This lived in a page-local
   <style> block and was lost when the markup moved; it belongs here, with the
   rest of the shared widget CSS, for the same reason .xp and .qlist do. */
.xg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
.xg .state{display:flex;align-items:center;gap:11px;text-align:left;background:var(--raised);
     border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;cursor:pointer;
     font:inherit;font-size:14.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.xg .state:hover{border-color:var(--ink-3)}
.xg .state[aria-pressed="true"]{border-color:var(--mineral);box-shadow:inset 3px 0 0 var(--mineral)}
.xg .state[disabled]{opacity:.42;cursor:default}
.xg .state:focus-visible{outline:2px solid var(--mineral);outline-offset:2px}
.xg .pick{flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);
     display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--paper);
     background:transparent}
.xg .state[aria-pressed="true"] .pick{background:var(--mineral);border-color:var(--mineral)}
@media(max-width:860px){.xg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.xg{grid-template-columns:1fr}}

.xact{display:flex;align-items:center;gap:13px;margin-top:18px;flex-wrap:wrap}
.xact .c{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

p.verdict{font-family:var(--serif);font-size:27px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
p.verdict .hit{color:var(--ok)} p.verdict .miss{color:var(--rev)}

#chart .rowline{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(90px,26%) 62px;
     gap:14px;align-items:center;padding:11px 10px;border-bottom:1px solid var(--hair)}
#chart .rowline:last-child{border-bottom:0}
#chart .rowline.yours{background:var(--mineral-soft)}
#chart .rowline.top3{background:var(--ok-soft)}
#chart .rk{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right;
     font-variant-numeric:tabular-nums}
#chart .nm{font-size:14.5px;color:var(--ink);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
#chart .nm b{font-weight:450}
#chart .tag{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
     padding:2px 7px;border-radius:20px;border:1px solid;white-space:nowrap}
#chart .tag.you{color:var(--mineral);border-color:var(--mineral-line);background:var(--raised)}
#chart .tag.top{color:var(--ok);border-color:var(--ok-line);background:var(--raised)}
#chart .bar{display:block;height:7px;background:var(--sunk);border-radius:4px;overflow:hidden}
#chart .bar i{display:block;height:100%;width:0;background:var(--mineral);border-radius:4px;
     transition:width .62s cubic-bezier(.2,.7,.3,1)}
#chart .rowline.top3 .bar i{background:var(--ok)}
#chart .val{font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right;
     font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){#chart .bar i{transition:none}}
@media(max-width:640px){
  #chart .rowline{grid-template-columns:22px minmax(0,1fr) 56px;gap:10px}
  #chart .bar{grid-column:1/-1;margin-top:2px}
}

dl.limits{margin-top:18px;border-top:1px solid var(--line)}
dl.limits dt{font-size:14.5px;font-weight:500;color:var(--ink);margin-top:18px}
dl.limits dd{margin:7px 0 0;font-size:14px;color:var(--ink-2);line-height:1.6;
     border-left:2px solid var(--line);padding-left:15px}
dl.limits dd b{color:var(--ink);font-weight:450}


/* ---- the playbook test (discoveries) --------------------------------------
   Self-paced version of the room game. Vendors are deliberately UNNAMED here:
   naming them in a room with the caveats spoken aloud is one thing, publishing
   a competitive claim on association data is another. */
.pb{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--raised)}
.pb .top{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--hair);
   background:var(--sunk)}
.pb .top .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pb .top .sp{flex:1}
.pb .dots{display:flex;gap:4px}
.pb .dots i{width:16px;height:3px;border-radius:2px;background:var(--line);display:block}
.pb .dots i.on{background:var(--ink-3)} .pb .dots i.hit{background:var(--ok)} .pb .dots i.miss{background:var(--rev)}
.pb .sc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)}
.pb .bd{padding:24px 24px 26px}
.pb .src{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
   color:var(--ink-3);margin-bottom:12px}
.pb .cl{font-family:var(--serif);font-size:25px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);
   max-width:30ch;text-wrap:balance}
.pb .sub{font-size:14px;color:var(--ink-2);margin-top:10px;max-width:70ch;line-height:1.55}
.pb .ch{display:grid;gap:8px;margin-top:18px;max-width:640px}
.pb .ch button{display:flex;align-items:center;gap:12px;text-align:left;background:var(--raised);
   border:1px solid var(--line);border-radius:var(--r-s);padding:12px 15px;cursor:pointer;font:inherit;
   font-size:14.5px;color:var(--ink);transition:border-color .15s,background .15s,opacity .15s}
.pb .ch button:hover:not([disabled]){border-color:var(--ink-3)}
.pb .ch button:focus-visible{outline:2px solid var(--mineral);outline-offset:2px}
.pb .ch .kk{flex:0 0 auto;width:20px;height:20px;border-radius:4px;border:1px solid var(--line);
   display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.pb .ch button[data-s="right"]{border-color:var(--ok-line);background:var(--ok-soft)}
.pb .ch button[data-s="right"] .kk{border-color:var(--ok);color:var(--ok)}
.pb .ch button[data-s="wrong"]{border-color:var(--rev-line);background:var(--rev-soft)}
.pb .ch button[data-s="wrong"] .kk{border-color:var(--rev);color:var(--rev)}
.pb .ch button[data-s="dim"]{opacity:.42}
.pb .ch .tag{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
   text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding-left:10px}
.pb .out{margin-top:20px;border-top:1px solid var(--hair);padding-top:18px;display:none}
.pb .out.show{display:block}
.pb .vd{display:inline-flex;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
   text-transform:uppercase;padding:7px 14px;border-radius:4px;border:1px solid}
.pb .vd.hold{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.pb .vd.rev{color:var(--rev);background:var(--rev-soft);border-color:var(--rev-line)}
.pb .vd.split{color:var(--live);background:var(--live-soft);border-color:var(--live-line)}
.pb .nums{display:flex;gap:38px;margin-top:16px;flex-wrap:wrap}
.pb .nums .v{font-family:var(--serif);font-size:30px;line-height:1;letter-spacing:-.02em;
   font-variant-numeric:tabular-nums;white-space:nowrap}
.pb .nums .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--ink-3);margin-top:8px}
.pb .nums .hold .v{color:var(--ok)} .pb .nums .rev .v{color:var(--rev)} .pb .nums .split .v{color:var(--live)}
.pb .why{margin-top:16px;font-size:14px;color:var(--ink-2);line-height:1.6;max-width:76ch}
.pb .why b{color:var(--ink);font-weight:500}
.pb .cav{margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:76ch;
   border-left:2px solid var(--line);padding-left:12px}
.pb .act{margin-top:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pb .fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--line);
   border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;margin-top:18px}
.pb .fin div{background:var(--raised);padding:15px 16px}
.pb .fin .v{font-family:var(--serif);font-size:27px;line-height:1;font-variant-numeric:tabular-nums}
.pb .fin .k{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--ink-3);margin-top:8px}
@media(max-width:560px){.pb .cl{font-size:21px}.pb .nums{gap:24px}}

/* ---- the queryable memory (/knows) ------------------------------------- */
.kq{margin-top:28px;max-width:760px}
.kq input{width:100%;font:inherit;font-size:17px;padding:15px 18px;border:1px solid var(--line);
   border-radius:var(--r-s);background:var(--raised);color:var(--ink)}
.kq input:focus{outline:2px solid var(--mineral);outline-offset:1px;border-color:var(--mineral)}
.kq .c{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chips .chip{font:inherit;font-size:12.5px;padding:6px 12px;border:1px solid var(--line);
   border-radius:20px;background:var(--raised);color:var(--ink-2);cursor:pointer}
.chips .chip:hover{border-color:var(--ink-3)}
.chips .chip[aria-pressed="true"]{border-color:var(--mineral);background:var(--mineral-soft);color:var(--ink)}
.chips .chip .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-left:3px}

.kr{border-left:3px solid var(--line);padding:14px 0 14px 18px;margin-top:16px}
.kr .kh{display:flex;gap:12px;align-items:baseline}
.kr .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.kr .dt{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.kr .kt{font-size:15px;line-height:1.6;color:var(--ink);margin-top:8px;max-width:88ch}
.kr .kn{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2);margin-top:8px;
   max-width:88ch;word-break:break-word}
.kr .kc{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.kr.s-settled{border-left-color:var(--ok)}      .kr.s-settled .st{color:var(--ok)}
.kr.s-observed{border-left-color:var(--mineral-line)} .kr.s-observed .st{color:var(--ink-2)}
.kr.s-measured{border-left-color:var(--live)}   .kr.s-measured .st{color:var(--live)}
.kr.s-null{border-left-color:var(--unk)}        .kr.s-null .st{color:var(--unk)}
.kr.s-partial{border-left-color:var(--unk-line)}.kr.s-partial .st{color:var(--unk)}
.kr.s-retired{border-left-color:var(--rev)}     .kr.s-retired .st{color:var(--rev)}
.kr.s-method{border-left-color:var(--off-line)} .kr.s-method .st{color:var(--off)}
.kr.s-external{border-left-color:var(--off-line)} .kr.s-external .st{color:var(--ink-3)}