/* askclark.org teaser — Clark design system, cgj-ask DNA */
:root{
  --paper:#f3efe6; --card:#fffdf8; --ink:#2b2f38; --soft:#666a73; --faint:#9aa0a8;
  --line:#e4e0d6; --line2:#d6d1c4;
  --navy:#1a4480; --blue:#005ea2; --accent:#1a4480;
  --code:#2e7d32; --gis:#005ea2; --archive:#0f7b8a; --vault:#8a6d1e; --action:#1a4480;
  --law:#2e7d32; --juris:#005ea2; --cgja:#0f7b8a; --ung:#1a4480; --ref:#7a7263;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;

  /* Text measure, in ch so it follows the font rather than a guessed pixel
     count. NOTE ch is the width of "0", which in this serif is wider than the
     average letter: about 0.74 real characters per ch here, so 125ch renders
     roughly 90 characters, not 125.

     A lede sits directly above the full-width desk panel, so it runs longer
     than body measure on purpose. At the old 720px it read as a short line in
     a wide box (a 416px dead band beside it) even though 68 characters is a
     good measure in isolation. */
  --measure-lede:125ch;

  /* Clark's answer bubble (review round 1): the single largest prose
     surface on the page. _events.html:58,64 renders langhtml(ev.html) /
     render_memo() output straight into .clark; observed paragraphs run
     100-363+ characters. Math, the same rigor as --measure-lede above:
     720px max-width minus .clark's own padding:18px 22px (44px horizontal)
     leaves 676px of actual text width. At 16.5px serif with the standard
     ~0.5em average character width for a Georgia/Palatino-family stack,
     that is roughly 676 / (16.5 * 0.5) =~ 82 characters per line -- right at
     the WCAG 1.4.8 80-char line-length guideline, and inside the classic
     45-75-character measure's upper margin. Decided with live renders in
     hand, 2026-07-28. */
  --measure-answer:720px;

  /* Card measures: the same two widths recur across several
     bordered cards between chat turns (tool/artifact/funnel status cards,
     the comparison/capability section sub-captions at 640px; the
     escalation, generating, and generated-document cards at 880px).
     Naming them once keeps the repetition legible as a deliberate pair of
     measures rather than four/three coincidentally-matching magic numbers.
     --measure-card covers both the interstitial cards AND the .compare/
     .caps section sub-captions -- it styles static captions as well as
     thread cards, hence the name (renamed from --measure-thread, review
     round 1: the old name overclaimed a "thread" role the caption uses
     don't have). */
  --measure-card:640px;
  --measure-doc:880px;

  /* CTA caption (review round 1): .wait .sub (460px) shares its
     literal HTML shape with .compare .sub / .caps .sub (<h2> + <p class=
     "sub">, home.html:78,95,119) but not their role. The compare/caps
     sub-captions sit at the top of a wide, left-aligned, full-bleed
     section and introduce a multi-column grid below -- --measure-card's
     640px is the section-intro-caption width. .wait .sub sits inside a
     self-contained, CENTERED, compact CTA card (.wait has no max-width of
     its own; the card's shape comes from its padding, not a measure) and
     reads as one short centered pitch line, not a section intro -- a
     narrower, role-driven measure, not a numeric coincidence with the
     interstitial cards above. Named separately so the distinction is a
     visible decision, not an unexplained divergence from --measure-card. */
  --measure-cta:460px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.55}

/* concept ribbon */
.ribbon{background:var(--navy);color:#fff;text-align:center;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;padding:8px 12px;text-transform:uppercase}
.ribbon b{font-weight:700} .ribbon span{opacity:.75;font-weight:400}

.page{max-width:1180px;margin:0 auto;padding:0 22px 64px} /* measure-exempt: page shell width, not prose */

/* header */
.ac-head{display:flex;align-items:center;gap:14px;padding:22px 2px 10px}
.ac-head .ava{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;
  box-shadow:0 2px 10px rgba(43,47,56,.25)}
.ac-head .name{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:24px;line-height:1.05}
.ac-head .role{font-family:var(--mono);font-size:11px;color:var(--soft);letter-spacing:.08em;
  text-transform:uppercase;margin-top:3px}
.ac-head .spacer{flex:1}
.locwrap{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.locbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #cfc8b8;
  color:var(--navy);font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:9px;cursor:pointer}
.locbtn svg{width:13px;height:13px;fill:var(--blue)}
.lochint{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:4px;letter-spacing:.02em}
.locpop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:300px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(43,47,56,.18);padding:14px 16px}
.locpop[hidden]{display:none}
.locpop .lp-note{font-size:12.5px;color:var(--soft);margin:0 0 10px;line-height:1.5}
.locpop button{display:block;width:100%;text-align:left;background:#f3efe4;border:1px solid #e0d9c8;
  color:var(--navy);font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:8px;cursor:pointer;margin:0 0 7px}
.locpop button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* intro strip */
.intro{font-family:var(--serif);font-size:21px;color:var(--ink);margin:10px 2px 16px;max-width:var(--measure-lede)}
.intro b{color:var(--navy)}

/* desk scene wrapper: ambient art peeks out behind the app frame */
.desk{position:relative;padding:12px 0 8px}
.desk .edge{position:absolute;z-index:0;opacity:.85;pointer-events:none;max-width:220px}
.desk .edge.left{left:-150px;top:60px}
.desk .edge.right{right:-150px;bottom:40px}
@media(max-width:1460px){.desk .edge{display:none}}

/* app frame */
.app{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 18px 50px rgba(43,47,56,.12)}
.disc{display:flex;gap:11px;align-items:center;background:#fbf6e9;border-bottom:1px solid #ecdfbf;
  padding:9px 22px;font-size:12.5px;color:#6a5b2e}
.disc .flag{flex:0 0 auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:#8a6d1e;border-radius:4px;padding:3px 7px}

/* chat */
.chat{padding:24px 22px;background:var(--paper);min-height:340px}
.row{display:flex;gap:13px;margin:0 0 20px;align-items:flex-start}
.row>.ava{width:38px;height:38px;border-radius:50%;flex:0 0 38px;object-fit:cover;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(43,47,56,.2);margin-top:4px}
.clark{background:var(--card);border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:18px 22px;flex:1;max-width:var(--measure-answer);
  box-shadow:0 3px 14px rgba(43,47,56,.05);
  font-family:var(--serif);font-size:16.5px;line-height:1.6}
.clark b{color:var(--navy)}
.me{justify-content:flex-end}
.me .me-bub{background:var(--navy);color:#fff;border-radius:14px 14px 4px 14px;padding:12px 17px;
  max-width:560px;font-size:15px} /* measure-exempt: reply bubble card, own width */
.welcome{display:flex;gap:20px;align-items:center}
.welcome img{width:176px;border-radius:12px;border:5px solid #fff;
  box-shadow:0 10px 26px rgba(43,47,56,.18);flex:0 0 auto}
@media(max-width:640px){.welcome{flex-direction:column;align-items:flex-start}.welcome img{width:140px}}

/* tool interstitials */
.tool{display:flex;align-items:center;gap:10px;margin:0 0 14px 51px;max-width:var(--measure-card);
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 13px;
  animation:acReveal .4s ease both}
.tool .ti{flex:0 0 auto;width:28px;height:28px;border-radius:7px;background:#eef2f8;
  display:flex;align-items:center;justify-content:center}
.tool .ti svg{width:15px;height:15px;fill:var(--blue)}
.tool .tl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blue)}
.tool .td{font-family:var(--mono);font-size:11.5px;color:var(--soft);letter-spacing:.01em}

/* source-gutter memo */
.memo{display:flex;flex-direction:column}
.block{display:grid;grid-template-columns:150px 1fr;align-items:stretch}
.block .src{grid-column:1;text-align:right;padding:11px 16px 11px 0;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);line-height:1.45}
.block .bd{grid-column:2;border-left:2px solid var(--line2);padding:9px 0 9px 20px}
.block .bd p{font-family:var(--serif);font-size:16.5px;line-height:1.62;color:var(--ink);margin:0}
.block .bd b{color:#1c2330}
.block.code .bd{border-left-color:var(--code)}    .block.code .src{color:var(--code)}
.block.gis .bd{border-left-color:var(--gis)}      .block.gis .src{color:var(--gis)}
.block.archive .bd{border-left-color:var(--archive)} .block.archive .src{color:var(--archive)}
.block.vault .bd{border-left-color:var(--vault)}  .block.vault .src{color:var(--vault)}
.block.action .bd{border-left:2px dashed var(--action)} .block.action .src{color:var(--action)}
.block.lead .bd{border-left-color:var(--line2)}
.block.lead .bd p{font-size:17.5px;color:#1c2330}

/* Grand-jury desk source tiers. Solid rule = established, dashed = judgment. */
.block.law .bd{border-left-color:var(--law)}      .block.law .src{color:var(--law)}
.block.juris .bd{border-left-color:var(--juris)}  .block.juris .src{color:var(--juris)}
.block.ref .bd{border-left-color:var(--ref)}      .block.ref .src{color:var(--ref)}
.block.cgja .bd{border-left:2px dashed var(--cgja)} .block.cgja .src{color:var(--cgja)}
.block.ung .bd{border-left:2px dashed var(--ung)}   .block.ung .src{color:var(--ung)}
@media(max-width:720px){
  .block{grid-template-columns:1fr}
  .block .src{grid-column:1;text-align:left;padding:10px 0 0 16px;border-left:2px solid var(--line2)}
  .block .bd{grid-column:1;padding-top:4px}
}
.badge{margin-top:13px;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.01em}

/* artifact (drafted email) */
.artifact{margin:0 0 20px 51px;max-width:var(--measure-card);background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(43,47,56,.1);animation:acReveal .5s ease both}
.artifact .ah{background:linear-gradient(180deg,var(--navy),#15315f);color:#fff;padding:12px 18px}
.artifact .ah .at{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.78}
.artifact .ah .as{font-family:var(--serif);font-size:16.5px;margin-top:3px}
.artifact .am{padding:10px 18px 4px;font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.artifact .ab{padding:6px 18px 14px;font-family:var(--serif);font-size:14.5px;line-height:1.6}
.artifact .af{background:#f3efe6;border-top:1px solid var(--line);padding:11px 18px;display:flex;gap:10px}
.artifact .af button{font-family:var(--sans);font-size:13px;font-weight:600;border-radius:8px;
  padding:8px 14px;cursor:pointer;border:1px solid #cfc8b8;background:#fff;color:var(--navy)}
.artifact .af button.primary{background:var(--code);color:#fff;border-color:var(--code)}

/* funnel card */
.funnel{margin:0 0 20px 51px;max-width:var(--measure-card);background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--navy);border-radius:11px;padding:16px 18px;animation:acReveal .5s ease both}
.funnel p{font-family:var(--serif);font-size:16px;margin:0 0 12px}
.funnel a{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:14px;
  text-decoration:none;padding:10px 17px;border-radius:9px}
/* Two ways on, not one way on and one way out. The second action asks a
   different question instead of joining the list, and it is deliberately the
   same size, weight and shape as the CTA beside it: a lesser link would make
   leaving the thread read as giving up. Same dashed treatment as the desk's
   escape option, which is the same affordance one page over. */
.funnel .fa{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* The CTA carries a border of its own colour, and the way out inherits the
   page's line-height rather than the button default, so the two boxes measure
   the same to the pixel. Without both, the way out renders ~4px shorter than
   the CTA and reads as the smaller choice. */
.funnel .fa a{border:1px solid var(--navy);line-height:inherit}
.funnel .funnel-alt{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--navy);
  background:transparent;border:1px dashed var(--line2);border-radius:9px;
  padding:10px 17px;line-height:inherit;cursor:pointer}
.funnel .funnel-alt:hover{background:#fff;border-color:var(--navy)}

/* chips + replay */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 8px 51px}
.chip{font-family:var(--sans);background:#f3efe4;border:1px solid #e0d9c8;color:var(--navy);
  font-size:13px;padding:8px 13px;border-radius:999px;cursor:pointer}
.chip[disabled]{opacity:.45;cursor:default}
.chip .usnote{font-family:var(--mono);font-size:10px;color:var(--soft);margin-left:5px}
.replay{background:none;border:none;color:var(--soft);font-family:var(--mono);font-size:11px;
  cursor:pointer;margin-left:51px;padding:4px 0;text-decoration:underline;text-underline-offset:2px}

/* composer */
.composer{display:flex;gap:11px;align-items:center;padding:15px 22px;border-top:1px solid var(--line);
  background:var(--card)}
.composer input{flex:1;border:1px solid #cfc8b8;border-radius:11px;padding:13px 16px;font-size:15px;
  font-family:var(--sans);background:#fff;color:var(--ink)}
.composer input::placeholder{color:var(--faint)}
.composer .send{width:46px;height:46px;border-radius:11px;background:var(--blue);border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.composer .send svg{width:19px;height:19px;fill:#fff}

/* comparison panel */
.compare{margin:44px 0 0}
.compare h2,.caps h2,.wait h2{font-family:var(--serif);font-size:26px;color:var(--navy);margin:0 0 6px}
.compare .sub,.caps .sub{font-size:14px;color:var(--soft);margin:0 0 18px;max-width:var(--measure-card)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.cmp-grid{grid-template-columns:1fr}}
.cmp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.cmp .who{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:10px;color:var(--faint)}
.cmp.clarkside .who{color:var(--navy)}
.cmp.clarkside{border-left:3px solid var(--navy)}
.cmp .q{font-size:13px;color:var(--soft);font-style:italic;margin:0 0 12px}
.cmp p{font-family:var(--serif);font-size:15px;line-height:1.6;margin:0 0 8px}

/* capability strip */
.caps{margin:44px 0 0}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.cap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cap-grid{grid-template-columns:1fr}}
.cap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cap img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.cap .cb{padding:13px 15px 15px}
.cap h3{font-family:var(--serif);font-size:16.5px;color:var(--navy);margin:0 0 5px}
.cap p{font-size:13px;color:var(--soft);line-height:1.5;margin:0 0 8px}
.cap .seen{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.02em}
.caps .powered{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--soft);letter-spacing:.02em}
.caps .powered a{color:var(--navy)}

/* waitlist */
.wait{margin:44px 0 0;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px 26px;text-align:center}
.wait .sub{font-size:14px;color:var(--soft);margin:0 auto 18px;max-width:var(--measure-cta)}
.newsletter-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.newsletter-form input[type=email]{width:min(340px,80vw);border:1px solid #cfc8b8;border-radius:10px;
  padding:12px 15px;font-size:15px;font-family:var(--sans)}
.newsletter-form button{background:var(--navy);color:#fff;border:none;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:10px;cursor:pointer}
.newsletter-form .honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.newsletter-form .status,.newsletter-success{font-size:13.5px;color:var(--soft);margin-top:10px;flex-basis:100%}
.newsletter-success{color:var(--code);font-weight:600}
.wait .fine{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:12px}

/* footer */
.foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:11.5px;color:var(--faint);text-align:center;letter-spacing:.03em;line-height:1.9}
.foot a{color:var(--soft)}

/* shared reveal animation */
@keyframes acReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.row,.memo-wrap{animation:acReveal .45s ease both}

@media (prefers-reduced-motion:reduce){
  .row,.tool,.artifact,.funnel,.memo-wrap{animation:none}
}
@media(max-width:760px){
  .tool,.artifact,.funnel,.chips,.replay{margin-left:0}
  .ac-head .name{font-size:19px}
}

/* Language toggle, bilingual sites only. The radios are visually hidden but
   must stay in the DOM ahead of .page so the sibling selectors below reach
   every translated span. No JS, and nothing to load. */
.langradio{position:absolute;opacity:0;pointer-events:none}
.langbar{display:flex;gap:6px;justify-content:flex-end;margin:14px 0 0}
.langbar label{cursor:pointer;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.03em;padding:3px 11px;border:1px solid var(--line2);
  border-radius:999px;background:var(--card);color:var(--soft)}
/* `~ *` not `~ .page`: the ribbon is a sibling of .page, not inside it, so a
   .page-scoped selector left the ribbon showing both languages at once. */
#lang-en:checked ~ * .ga{display:none}
#lang-ga:checked ~ * .en{display:none}
#lang-en:checked ~ * label[for=lang-en],
#lang-ga:checked ~ * label[for=lang-ga]{background:var(--accent);
  color:#fff;border-color:var(--accent)}

/* askclara.ie carries an Irish green accent on the shared layout. */
body.askclara{--accent:#169b62}

/* source legend */
.legend{margin-top:24px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px}
.legend h2{margin:0 0 4px;font-family:var(--serif);font-size:19px;color:var(--navy);font-weight:600}
.legend .lsub{font-size:13px;color:var(--soft);margin:0 0 16px}
.lr{display:grid;grid-template-columns:186px 1fr;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--line)}
.lr .ll{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding-left:14px;border-left:2px solid var(--line2)}
.lr .lt{font-size:13.5px;color:var(--soft)}
.lr.law .ll{color:var(--law);border-left-color:var(--law)}
.lr.juris .ll{color:var(--juris);border-left-color:var(--juris)}
.lr.ref .ll{color:var(--ref);border-left-color:var(--ref)}
.lr.cgja .ll{color:var(--cgja);border-left:2px dashed var(--cgja)}
.lr.ung .ll{color:var(--ung);border-left:2px dashed var(--ung)}
/* Teaser source tiers legend. Solid rule = established, dashed =
   judgment, same rule style as the /cgj desk above; "lead" gets neither, since
   it is the connecting narrative rather than a source, and keeps the default
   neutral row. */
.lr.code .ll{color:var(--code);border-left-color:var(--code)}
.lr.gis .ll{color:var(--gis);border-left-color:var(--gis)}
.lr.archive .ll{color:var(--archive);border-left-color:var(--archive)}
.lr.vault .ll{color:var(--vault);border-left-color:var(--vault)}
.lr.action .ll{color:var(--action);border-left:2px dashed var(--action)}
.legend .cnote{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:14px}
/* persistent legal disclaimer strip */
.disc.legal{background:#fbf6e9;border-bottom:1px solid #ecdfbf;color:#6a5b2e}
.disc.legal .flag{color:#fff;background:#8a6d1e}
/* per-answer caution under a memo */
.mini{margin-top:13px;font-family:var(--mono);font-size:11px;color:var(--faint)}
/* the ending: what would you ask Clark */
.ask{margin-top:24px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:22px}
.ask h2{margin:0 0 5px;font-family:var(--serif);font-size:21px;color:var(--navy);font-weight:600}
.ask .sub{font-size:14.5px;color:var(--soft);margin:0 0 6px}
.ask .horizon{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:0 0 16px}

/* escalation: staged go-deeper options */
.esc{margin:0 0 20px 51px;max-width:var(--measure-doc);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;box-shadow:0 4px 14px rgba(43,47,56,.06)}
.esc .eh{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);margin-bottom:7px}
.esc h4{margin:0 0 3px;font-family:var(--serif);font-size:18px;color:var(--navy);font-weight:600}
.esc .csub{font-size:13px;color:var(--soft);margin:0 0 15px}
.esc .opts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.esc .opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;background:#fffdf8}
.esc .opt .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid #c4bca8;
  color:var(--soft);font-family:var(--mono);font-size:12px;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.esc .opt .tx{font-size:13px;color:var(--soft);line-height:1.45}
.esc .opt .tx b{color:var(--navy);display:block;font-family:var(--serif);font-size:15px;
  margin-bottom:2px;font-weight:600}
.esc .cta{display:flex;align-items:center;gap:13px;margin-top:16px;flex-wrap:wrap}
.esc .cta button{background:var(--law);color:#fff;border:none;font-weight:700;font-size:14px;
  font-family:var(--sans);padding:11px 18px;border-radius:9px;cursor:pointer}
.esc .cta .gpu{font-family:var(--mono);font-size:11px;color:var(--faint)}
@media(max-width:760px){.esc .opts{grid-template-columns:1fr}}

/* generating state */
.gen{display:flex;gap:13px;align-items:flex-start;margin:0 0 18px 51px;max-width:var(--measure-doc);
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:15px 18px}
.gen .gi{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:#eef2f8;
  display:flex;align-items:center;justify-content:center}
.gen .gi svg{width:18px;height:18px;fill:var(--blue)}
.gen .gt{flex:1}
.gen .gl{font-family:var(--serif);font-size:15px;color:var(--ink)}
.gen .gm{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:3px}
.gen .bar{height:5px;background:#e9e4d8;border-radius:3px;overflow:hidden;margin-top:11px}
.gen .bar > i{display:block;height:100%;width:0;background:var(--blue);border-radius:3px;
  animation:acFill 2.4s linear forwards}
@keyframes acFill{from{width:0}to{width:100%}}

/* generated document */
.doc{margin:0 0 20px 51px;max-width:var(--measure-doc);background:#fffdf8;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 30px rgba(43,47,56,.12);overflow:hidden}
.doc .dhead{background:linear-gradient(180deg,var(--navy),#15315f);color:#fff;padding:20px 26px}
.doc .dtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.doc .dtitle{font-family:var(--serif);font-size:23px;font-weight:600;margin:5px 0 0;line-height:1.2}
.doc .dmeta{font-family:var(--mono);font-size:11px;opacity:.8;line-height:1.7;margin-top:9px}
.doc .dbody{padding:8px 26px 18px}
.doc section{padding:15px 0;border-top:1px solid var(--line)}
.doc .sn{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);margin-bottom:7px}
.doc h5{font-family:var(--serif);font-size:16.5px;color:var(--navy);margin:0 0 7px;font-weight:600}
.doc p{font-family:var(--serif);font-size:14.5px;line-height:1.62;color:var(--ink);margin:0 0 7px}
.doc ul{margin:7px 0 0;padding-left:21px}
.doc li{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--ink);margin:0 0 5px}
.doc .att{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:8px}
.doc .scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.doc .scol{border:1px solid var(--line);border-radius:9px;padding:11px 14px;background:#fbf9f3}
.doc .scol.in{border-left:3px solid var(--law)}
.doc .scol.out{border-left:3px solid #b04632}
.doc .scol .sh{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);margin-bottom:5px}
.doc .tlctl{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:#fbf9f3;
  border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:2px 0 8px}
.doc .tlctl .tll{font-size:13.5px;color:var(--ink);font-weight:600}
.doc .tlpick{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #c4bca8;
  border-radius:8px;padding:7px 12px;font-family:var(--mono);font-size:13px;color:var(--navy)}
.doc .tlnote{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:0 0 4px;line-height:1.5}
.doc .dfoot{background:#f3efe6;border-top:1px solid var(--line);padding:15px 26px;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.doc .dact{font-family:var(--sans);font-size:13px;font-weight:600;border:1px solid #cfc8b8;
  background:#fff;color:var(--navy);border-radius:8px;padding:9px 14px;cursor:pointer}
.doc .dact.primary{background:var(--law);color:#fff;border-color:var(--law)}
.doc .ddis{flex-basis:100%;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:2px}
@media(max-width:680px){.doc .scope-grid{grid-template-columns:1fr}}
@media(max-width:760px){.esc,.gen,.doc{margin-left:0}}
@media (prefers-reduced-motion:reduce){.gen .bar > i{animation:none;width:100%}}

/* Accountability letter. Same document chrome as the investigation plan, plus
   an addressee block, and set narrower so it reads as correspondence rather
   than as a report. */
.doc.letter .dbody{max-width:46rem}
.doc.letter .lhead{padding:14px 20px;border-bottom:1px solid var(--line)}
.doc.letter .lto{font-weight:600;color:var(--navy)}
.doc.letter .lsubj{margin-top:5px;font-style:italic;color:var(--soft);font-size:14px}
/* Label in the narrow first column, EVERYTHING else in the wide second one.
   Without the explicit placement, grid auto-flow drops each child into the
   next cell in turn, so the body paragraph landed in the 6rem column and
   rendered as a ribbon hundreds of lines tall. 6rem because the widest
   label ("1a, 1b, 2d") measures 80px. */
.doc.letter .dbody section{display:grid;grid-template-columns:6rem 1fr;gap:0 14px}
.doc.letter .dbody section>*{grid-column:2}
.doc.letter .dbody section>.sn{grid-column:1;grid-row:1}
.doc.letter .dbody .sn{font-variant-numeric:tabular-nums}
@media(max-width:680px){.doc.letter .dbody section{grid-template-columns:1fr}}

/* The way out of a "go deeper" menu. Deliberately not styled as a lesser
   option: choosing to ask something else is a first-class answer. */
.esc .esc-out{display:block;width:100%;margin-top:11px;padding:11px 14px;text-align:left;
  font:inherit;font-size:14px;color:var(--navy);background:transparent;
  border:1px dashed var(--line2);border-radius:9px;cursor:pointer}
.esc .esc-out:hover{background:var(--card);border-color:var(--navy)}

/* Sentinel marking where the next exchange will appear. Zero visual weight:
   its only job is to tell the observer the reader has read this far. */
.chat .pending{height:1px;margin:0}

/* Source marks. The tier label already names the source in words, so these are
   decorative: they make provenance scannable, they do not carry it. */
.block .src-mark{display:block;width:26px;height:26px;margin:0 0 6px auto;opacity:.95}
.block.ung .src-mark,.block.action .src-mark{border-radius:50%}
.legend .ll .src-mark{width:24px;height:24px;margin-right:9px;vertical-align:-7px}
.legend .lr.ung .src-mark,.legend .lr.action .src-mark{border-radius:50%}
@media(max-width:720px){.block .src-mark{margin:0 8px 0 0;display:inline-block;vertical-align:-6px}}
/* A solid-rule block quotes its source; the cite names what is being quoted. */
.block .cite{margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  letter-spacing:.02em;line-height:1.5}
.block .cite a{color:inherit}

/* "More below": shown only while newly revealed content sits under the fold.
   The page never scrolls itself, so this is how a reader learns the clerk is
   still writing somewhere they cannot see. */
.more-below{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:40;
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:none;border-radius:999px;
  background:var(--navy);color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:600;
  cursor:pointer;box-shadow:0 6px 22px rgba(43,47,56,.28)}
.more-below[hidden]{display:none}
.more-below svg{width:14px;height:14px;fill:currentColor}
.more-below:hover{background:#12325f}
.more-below:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.more-below{display:none}}