/* LouieOS design system, shared by LouieOS (/) and the Louie Outreach Portal
   (/portal): tokens, type, the shell (rail, history, header), cards,
   buttons, tags, notices, tables, rich answers, motion and both themes.
   One source of truth (BUILD 012): neither page carries its own copy. */
/* Design note: the UI's job is to make PERMISSIONS visible. Clearance sits in
   the header, withheld counts appear on every answer, and refusals are styled
   as a considered outcome rather than an error — because in this product they
   are the feature, not a failure. */
:root{
  --bg:#0c0d10; --panel:#141519; --panel-2:#1a1c21; --line:rgba(255,255,255,.09);
  --text:#e6e7ea; --muted:#9a9ca4; --dim:#63656d;
  --accent:#e0b341; --accent-dim:rgba(224,179,65,.16);
  --accent-2:#f2d27a;
  /* The one place brand colour is allowed to be loud. Louie's flame reads
     gold-into-ember, so the hero gradient is drawn from the asset rather
     than invented next to it. */
  --hero-grad:linear-gradient(96deg,#f2d27a 0%,#e0b341 38%,#e08a41 72%,#d9694f 100%);
  --rail:64px; --history:252px; --preview-w:min(560px,92vw);
  /* --on-stop: text on a solid --stop fill (the Send button); dark text on
     the light coral here, white on the deep red in the light theme. */
  --ok:#3ddc97; --warn:#e0b341; --stop:#f0776c; --on-stop:#17140a;
  /* Link text. Dark: the accent already clears 8.6:1. Light overrides it,
     because the light accent is 3.85:1 as text on white. */
  --link:#e0b341;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  --r:10px;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px -12px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#f7f7f8; --panel:#fff; --panel-2:#f2f2f4; --line:rgba(0,0,0,.1);
  --text:#16171a; --muted:#5c5e66; --dim:#8b8d95; --accent-dim:rgba(196,142,20,.14);
  --accent:#9a7414; --accent-2:#b98c1c;
  /* The dark-theme status colours are neon on white (--ok 1.7:1, --stop
     2.9:1). These clear 4.5:1 as text on --panel, --panel-2 and --bg and on
     their own 8-16% tints (measured, scratchpad contrast_fix.py). */
  --ok:#0a6640; --stop:#b42318; --warn:#715309; --on-stop:#fff;
  /* Worst case 5.16:1 (stop tint over --panel-2); higher on --panel,
     --panel-2, --bg and the gold tints. Measured with contrast_fix.py. */
  --link:#735709;
  --hero-grad:linear-gradient(96deg,#b98c1c 0%,#9a7414 38%,#a85f1e 72%,#96432f 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:15px/1.55 var(--sans);
  padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ============================ app shell ============================
   Three columns: an icon rail, a thread history, and the work. Threads
   were a wrapping row of chips above the conversation, which pushed the
   conversation itself off-screen once you had more than six. History
   belongs down the side, where it costs nothing to keep and one click to
   reach. */
.shell{display:flex;height:100dvh;overflow:hidden}

/* --- rail --- */
.rail{flex:0 0 var(--rail);display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:12px 0 10px;background:var(--panel);border-right:1px solid var(--line);
  padding-top:calc(env(safe-area-inset-top,0px) + 12px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:20}
.rail .mark{width:38px;height:38px;border-radius:11px;background:var(--panel-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;overflow:hidden;flex:0 0 auto}
.rail .sep{width:22px;border-top:1px dashed var(--line);margin:6px 0}
.rail .grow{flex:1}
.rbtn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;
  background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;
  justify-content:center;position:relative;flex:0 0 auto}
.rbtn:hover{background:var(--panel-2);color:var(--text)}
.rbtn[aria-selected="true"]{background:var(--accent-dim);color:var(--accent);
  border-color:var(--accent-dim)}
.rbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rbtn.primary{background:var(--accent);color:#17140a;border-color:var(--accent)}
.rbtn.primary:hover{background:var(--accent-2);color:#17140a}
/* Tooltips: the rail is icon-only, and an icon-only control whose meaning
   is not recoverable is a guessing game. One fixed node on <body>, placed by
   louieBindRailTips: a tooltip inside the rail is clipped by the portal's
   scrolling rail (overflow-y:auto forces overflow-x to clip). */
.rail-tip{position:fixed;left:0;top:0;z-index:90;pointer-events:none;white-space:nowrap;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-size:12px;padding:5px 9px;border-radius:7px;box-shadow:var(--shadow);
  opacity:0;transform:translate(-4px,-50%);transition:opacity .15s,transform .15s}
.rail-tip.on{opacity:1;transform:translate(0,-50%)}
@media (prefers-reduced-motion:reduce){.rail-tip{transition:none;transform:translate(0,-50%)}}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;text-transform:uppercase;border:1px solid var(--line);
  cursor:pointer;flex:0 0 auto}

/* --- history --- */
.history{flex:0 0 var(--history);display:flex;flex-direction:column;
  background:var(--panel);border-right:1px solid var(--line);overflow:hidden;
  padding-top:env(safe-area-inset-top,0)}
.history.collapsed{display:none}
.history .htop{padding:14px 14px 10px;display:flex;align-items:center;gap:8px}
.history .htop h2{font-size:13px;font-weight:600;letter-spacing:-.01em;flex:1}
.history .hsearch{padding:0 14px 10px}
.history .hsearch input{padding:7px 11px;font-size:12.5px;border-radius:8px}
.hlist{flex:1;overflow-y:auto;padding:0 8px 14px}
.hlist::-webkit-scrollbar{width:8px}
.hlist::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.hgroup{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);padding:14px 8px 6px}
.hitem{width:100%;text-align:left;background:none;border:0;border-radius:8px;
  padding:8px 10px;font-size:13px;color:var(--muted);cursor:pointer;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45}
.hitem:hover{background:var(--panel-2);color:var(--text)}
.hitem.on{background:var(--accent-dim);color:var(--accent)}
.hempty{padding:18px 10px;font-size:12.5px;color:var(--dim);line-height:1.6}

/* --- main --- */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.wrap{flex:1;overflow-y:auto;padding:0 24px 40px}
.wrap>section{max-width:860px;margin:0 auto}
/* The Ask tab owns its own scrolling, so the outer column must not add a
   second one — two nested scrollers is how the composer ends up
   unreachable below the fold. */
.wrap.nested{overflow:hidden;padding-bottom:0;display:flex;flex-direction:column}
.wrap.nested>section{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
/* The tab panel between the section and the chat is a plain block, so
   `.chat{flex:1}` had nothing to flex against and the composer floated
   wherever the content happened to end. Every link in the chain from the
   shell down to the scroller has to be a flex column or the pinning
   silently stops working at the first one that is not. */
.wrap.nested #tab-ask{flex:1;min-height:0;display:flex;flex-direction:column}
header{flex:0 0 auto;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{padding:12px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
.brand{display:flex;align-items:center;gap:9px}
/* Two-tone wordmark, matching AdminStudio: the noun in the text colour,
   the product suffix in brand gold, set solid with no space between them so
   it reads as one word rather than two. */
.wordmark{font-weight:700;letter-spacing:-.025em;font-size:16px;line-height:1;
  color:var(--text);white-space:nowrap}
.wordmark b{font-weight:700;color:var(--accent)}
.menu-btn{display:none}
/* Whose data you are looking at is a safety property on a multi-tenant
   deployment, not decoration. It sits next to the product name, always. */
.tenantmark{display:flex;align-items:center;gap:7px;padding-left:14px;
  margin-left:2px;border-left:1px solid var(--line);font-size:13px;color:var(--text)}
.tenantmark .asklouie{font-weight:600;color:var(--text)}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:3px 8px;
  border:1px solid var(--line);border-radius:6px;color:var(--muted);text-transform:uppercase}
.pill.clear{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-dim)}
.icon-btn{background:none;border:1px solid var(--line);border-radius:7px;padding:5px 9px;
  cursor:pointer;color:var(--muted);font-size:12px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Header, tabs and thread chips stay put. Scrolling a long answer should
   not cost you the way back to another thread. */
.chrome{position:sticky;top:calc(env(safe-area-inset-top,0px) + 54px);z-index:4;
  background:var(--bg);padding-top:2px}
nav{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
nav button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;
  cursor:pointer;color:var(--muted);font-size:14px;white-space:nowrap}
nav button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px}
textarea,input[type=text],input[type=password]{width:100%;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--accent-dim);border-color:var(--accent)}
textarea{min-height:88px}
.row{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn{background:var(--accent);color:#17140a;border:0;border-radius:8px;padding:10px 18px;
  font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:none;color:var(--muted);border:1px solid var(--line)}

.answer{line-height:1.7;font-size:15px}
.answer h1,.answer h2,.answer h3,.answer h4{line-height:1.3;margin:22px 0 10px;font-weight:650;letter-spacing:-.01em}
.answer h1{font-size:21px} .answer h2{font-size:18px} .answer h3{font-size:16px} .answer h4{font-size:14.5px;color:var(--muted)}
.answer h2,.answer h3{padding-bottom:6px;border-bottom:1px solid var(--line)}
.answer p{margin:11px 0}
.answer ul,.answer ol{margin:11px 0 11px 22px}
.answer li>ul,.answer li>ol,.answer ul ul,.answer ul ol,.answer ol ul,.answer ol ol{margin:4px 0 4px 20px}
.answer li{margin:5px 0}
.answer li::marker{color:var(--accent)}
.answer strong{color:var(--text);font-weight:650}
.answer em{color:var(--muted)}
.answer code{font-family:var(--mono);font-size:12.5px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.answer pre{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;overflow-x:auto;margin:13px 0}
.answer pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.55}
.answer blockquote{border-left:2px solid var(--accent);padding-left:14px;margin:13px 0;color:var(--muted)}
.answer hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.answer table{border-collapse:collapse;width:100%;margin:13px 0;font-size:13.5px}
.answer th,.answer td{border:1px solid var(--line);padding:7px 11px;text-align:left}
.answer th{background:var(--panel-2);font-weight:600}
.answer .ref{font-family:var(--mono);font-size:11px;color:var(--accent);
  background:var(--accent-dim);border-radius:4px;padding:1px 5px;vertical-align:1px}
.answer .ref{border:1px solid transparent;cursor:pointer;line-height:1.3}
.answer .ref:hover,.answer .ref:focus-visible{border-color:var(--accent);outline:none}
.sources li.flash{background:var(--accent-dim);border-radius:6px;transition:background .6s}
.answer .tablewrap{overflow-x:auto;margin:13px 0}
.answer .tablewrap table{margin:0}
.answer tbody tr:hover td{background:var(--panel-2)}
.answer .chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:1px 8px;margin-right:4px;vertical-align:1px;
  border:1px solid var(--line);color:var(--muted)}
.answer .chip-done{color:var(--ok);border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.09)}
.answer .chip-decided{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-dim)}
.answer .chip-open,.answer .chip-progress{color:var(--text);background:var(--panel-2)}
.answer .chip-blocked{color:var(--stop);border-color:rgba(240,119,108,.35);background:rgba(240,119,108,.09)}
.answer .sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0}
.answer .sumcard{border:1px solid var(--line);border-left:3px solid var(--dim);border-radius:10px;
  background:var(--panel);padding:10px 14px;margin:12px 0}
.answer .sumgrid .sumcard{margin:0}
.answer .sumcard>h1,.answer .sumcard>h2,.answer .sumcard>h3,.answer .sumcard>h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:0;margin:2px 0 6px;padding:0;color:var(--muted)}
.answer .sumcard ul,.answer .sumcard ol{margin:4px 0 4px 18px;font-size:14px}
.answer .sum-done{border-left-color:var(--ok)}
.answer .sum-decided{border-left-color:var(--accent)}
.answer .sum-open,.answer .sum-progress{border-left-color:var(--muted)}
.answer .sum-blocked{border-left-color:var(--stop)}
.answer .mchart{margin:4px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.answer .mchart figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.answer .mbar{display:grid;grid-template-columns:minmax(80px,30%) 1fr auto;gap:10px;
  align-items:center;font-size:12.5px;margin:4px 0}
.answer .mlab{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.answer .mtrack{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.answer .mtrack i{display:block;height:100%;background:var(--accent);border-radius:4px}
.answer .mval{font-family:var(--mono);color:var(--text)}
.dochead{border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;
  padding:12px 16px;background:var(--panel-2)}
.doctitle{font-size:16px;font-weight:650;letter-spacing:-.01em}
.docmeta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;font-family:var(--mono);
  font-size:11px;color:var(--dim)}
.docmeta a{color:var(--accent);text-decoration:none}
.docmeta a:hover{text-decoration:underline}
.answer.docview{border:1px solid var(--line);border-radius:0 0 10px 10px;padding:4px 18px 10px;
  max-height:70vh;overflow-y:auto}
.hrow{position:relative;display:flex;align-items:center;border-radius:8px}
.hrow .hitem{flex:1;min-width:0;padding-right:30px}
.hdel{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;
  border-radius:6px;color:var(--dim);cursor:pointer;opacity:0}
.hdel svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hrow:hover .hdel,.hrow:focus-within .hdel{opacity:1}
.hdel:hover,.hdel:focus-visible{color:var(--accent);border-color:var(--accent);outline:none}
@media (hover:none){.hdel{opacity:1}}
.hconfirm{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border-radius:8px;
  background:var(--panel-2);font-size:12px;color:var(--text)}
.hconfirm span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hconfirm button{font-size:11.5px;border-radius:6px;padding:3px 8px;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--muted)}
.hconfirm button:hover,.hconfirm button:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.hconfirm .hyes{color:var(--stop);border-color:rgba(240,119,108,.4)}

/* stage rail — each row is a real pipeline milestone, not a timer */
.stages{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:12px}
.stage{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--dim);
  opacity:0;transform:translateY(3px);animation:rise .28s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}
.stage .dot{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:0 0 6px}
.stage.active{color:var(--text)}
.stage.active .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}
.stage.done{color:var(--muted)}
.stage.done .dot{background:var(--ok)}
.stage.warn .dot{background:var(--warn)}
.stage .detail{color:var(--dim);font-size:11px}
.stage .elapsed{margin-left:auto;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.stage .shim{background:linear-gradient(90deg,var(--muted) 20%,var(--accent) 50%,var(--muted) 80%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shim 1.6s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
/* What an answer rests on, in the order a reader needs it:
   is it grounded in your record · how strong is the evidence · what was
   withheld. The old version led with a raw 0.55, which people read as
   "55% likely correct" — it is the similarity of the best-matching
   passage and cannot carry that meaning. */
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
  border:1px solid var(--line);background:var(--panel-2);font-size:11.5px;white-space:nowrap}
/* Tints derive from the token so the light theme's darker --ok tints too. */
.tag.good{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.tag.warn{color:var(--warn);border-color:var(--accent-dim);background:var(--accent-dim)}
.tag .bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.tag .bars i{width:3px;border-radius:1px;background:currentColor;opacity:.3}
.tag .bars i.on{opacity:1}
.tag .bars i:nth-child(1){height:4px} .tag .bars i:nth-child(2){height:7px}
.tag .bars i:nth-child(3){height:10px}
.diag{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);
  opacity:.7;cursor:default}
.diag:hover{opacity:1}
.sources{margin-top:14px}
.sources{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}
.sources summary{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:7px;padding:2px 0}
.sources summary::-webkit-details-marker{display:none}
.sources summary::before{content:"▸";color:var(--accent);transition:transform .15s}
.sources[open] summary::before{transform:rotate(90deg)}
.sources summary:hover{color:var(--muted)}
.sources ol{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.sources li{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  padding:7px 11px;display:flex;gap:9px;align-items:baseline}
.sources li b{color:var(--accent);font-weight:400;flex:0 0 auto}
.sources li span,.sources li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Which system a citation came from, so "Slack" and "Notion" are
   distinguishable at a glance without reading the whole label. */
.sources li em{font-style:normal;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);background:var(--bg);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;flex:0 0 auto}
.sources li a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.sources li a:hover{color:var(--accent);border-bottom-color:var(--accent-dim)}
.sources li a::after{content:"↗";margin-left:6px;font-size:10px;opacity:.6}

.notice{border-left:3px solid var(--warn);background:var(--accent-dim);padding:13px 16px;border-radius:0 8px 8px 0}
/* Tinted from the token, not a fixed rgba, so the light theme's darker
   --stop gives a matching tint and text on it keeps its measured contrast. */
.notice.stop{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 10%,transparent)}
.notice h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
  margin-bottom:6px;font-family:var(--mono);font-weight:500}
.notice.stop h4{color:var(--stop)}

.finding{border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:10px}
.finding.conflict{border-left:3px solid var(--stop)}
.finding.tension{border-left:3px solid var(--warn)}
.finding.gap{border-left:3px solid var(--dim)}
.finding .sev{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.finding h5{margin:5px 0 7px;font-size:14.5px}
.finding p{font-size:13px;color:var(--muted)}
.cite{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:8px}

.section-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-family:var(--mono);margin:22px 0 10px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:14px}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.stat .v{font-family:var(--mono);font-size:24px;margin-top:6px}
.stat .v.accent{color:var(--accent)}
.hint{font-size:12.5px;color:var(--dim);margin-top:10px}
/* update */
.tldr{font-size:15px;line-height:1.6;color:var(--text);margin:2px 0 4px}
.bullets{margin:0;padding-left:18px}
.bullets li{font-size:13.5px;line-height:1.6;color:var(--text);margin-bottom:7px}
.finding textarea.answer{min-height:56px;margin-top:10px;font-size:13px}
select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:7px 10px;font:inherit;font-size:13px}
select:focus{outline:2px solid var(--accent-dim);border-color:var(--accent)}

/* chat: transcript scrolls, composer is pinned. Putting the input at the top
   means the thing you type into moves further from the thing you just read
   with every exchange. */
.chat{display:flex;flex-direction:column;flex:1;min-height:0}
.thread{flex:1;overflow-y:auto;padding:4px 2px 18px;scroll-behavior:smooth;min-height:0}
.thread::-webkit-scrollbar{width:9px}
.thread::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.msg{margin-bottom:20px;animation:rise .25s ease}
.msg.you{display:flex;justify-content:flex-end}
.msg.you .bubble{background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px 14px 4px 14px;padding:11px 15px;max-width:min(78%,620px);
  font-size:14.5px;white-space:pre-wrap}
.msg.louie .bubble{background:var(--panel);border:1px solid var(--line);
  border-radius:14px 14px 14px 4px;padding:17px 19px}
.msg .byline{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.msg.you .byline{text-align:right}

.composer{border-top:1px solid var(--line);padding-top:14px;background:var(--bg)}
.composer .box{display:flex;gap:10px;align-items:flex-end;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:10px 10px 10px 15px}
.composer .box:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim)}
.composer textarea{flex:1;background:none;border:0;padding:4px 0;min-height:24px;
  max-height:180px;resize:none;outline:none}
.composer textarea:focus{outline:none;box-shadow:none}
.send{background:var(--accent);color:#17140a;border:0;border-radius:10px;
  width:36px;height:36px;font-size:16px;cursor:pointer;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.send:disabled{cursor:not-allowed}
.send:disabled:not(.thinking){opacity:.4}
/* While Louie is thinking the send control BECOMES Louie. The arrow means
   "your turn"; showing it during a four-second answer invites a second
   press that the disabled attribute then swallows silently. The mark
   itself is the animation — a spinner beside it would be a second,
   unrelated clock. */
.send.thinking{background:var(--accent-dim);border:1px solid var(--accent-dim);
  animation:pulse 1.5s ease-in-out infinite}
.send .arrow{display:flex}
.send.thinking .arrow{display:none}
.send .louie{display:none;width:26px;height:26px}
.send.thinking .louie{display:block}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-dim)}
  50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.send.thinking{animation:none}}
.composer .foot{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:8px;font-size:11px;color:var(--dim)}
.composer .count{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.composer .count.over{color:var(--stop)}

/* ---- the Louie mark ----
   One animated asset, three sizes. The source WebP has a hardcoded black
   background, so it is keyed out with the same luminance-to-alpha SVG
   filter SharePlay uses (BUILD 1139) rather than a `screen` blend: an
   un-isolated blend lightens whatever backdrop the compositor hands it,
   and Gecko/WebKit resolve that against a wider root than Blink does. */
.louie{display:block;object-fit:contain;filter:url(#louie-chroma-key)}
.louie.sm{width:22px;height:22px}
.louie.md{width:30px;height:30px}
.louie.lg{width:60px;height:60px}
/* If the CDN is unreachable the mark must not leave a hole: the fallback
   is a gold ember drawn in CSS, no network needed. */
.mark-fallback{width:20px;height:20px;border-radius:6px;background:var(--hero-grad)}

/* ---- landing ---- */
.empty{padding:6vh 4px 20px;color:var(--dim);max-width:840px;margin:0 auto}
.hello{font-size:clamp(30px,4.6vw,46px);line-height:1.1;font-weight:700;
  letter-spacing:-.03em;color:var(--text);margin-bottom:6px}
.hello .grad{background:var(--hero-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hello .l2{display:block}
.empty .lede{font-size:14.5px;color:var(--muted);max-width:430px;margin:12px 0 0;line-height:1.55}
.sugg{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));
  gap:12px;margin-top:30px}
.sugg button{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:15px 15px 13px;font-size:13px;line-height:1.45;color:var(--text);cursor:pointer;
  text-align:left;min-height:118px;display:flex;flex-direction:column;
  justify-content:space-between;gap:14px;transition:border-color .14s,transform .14s}
.sugg button:hover{border-color:var(--accent);transform:translateY(-2px)}
.sugg button svg{width:17px;height:17px;stroke:var(--dim);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sugg button:hover svg{stroke:var(--accent)}
.reprompt{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  color:var(--muted);font-size:12.5px;cursor:pointer;margin-top:16px;padding:4px 0}
.reprompt:hover{color:var(--accent)}
.reprompt svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* ---- design preview: a slide-out panel, not a new tab ----
   Clicking a frame should let you LOOK at it without losing the answer you
   were reading. A new tab does the opposite: it hides the conversation and
   makes comparing the design to what Louie said about it a tab-switching
   exercise. The panel keeps both on screen. */
.previewer{position:fixed;top:0;right:0;bottom:0;width:var(--preview-w);
  background:var(--panel);border-left:1px solid var(--line);z-index:60;
  display:flex;flex-direction:column;box-shadow:-24px 0 48px -24px rgba(0,0,0,.7);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.previewer.open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.previewer{transition:none}}
.previewer .ptop{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.previewer .ptop h3{font-size:14.5px;font-weight:600;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.previewer .pname{flex:1;min-width:0}
.previewer .pcrumb{display:block;font-size:11.5px;color:var(--muted);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.previewer .pbody{flex:1;overflow:auto;padding:18px;display:flex;
  align-items:flex-start;justify-content:center;background:var(--bg);
  min-height:180px}

/* Page tabs — the designer's own organising scheme, so it is the one the
   panel navigates by. */
.ptabs{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;
  border-bottom:1px solid var(--line);scrollbar-width:thin}
.ptabs button{flex:none;background:none;border:0;color:var(--muted);
  font:inherit;font-size:12px;padding:5px 10px;border-radius:6px;
  cursor:pointer;white-space:nowrap}
.ptabs button:hover{color:var(--text);background:var(--panel-2)}
.ptabs button[aria-selected="true"]{color:var(--bg);background:var(--accent);
  font-weight:600}

/* Thumbnail strip of the frames on the selected page. */
.pstrip{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;
  border-top:1px solid var(--line);scrollbar-width:thin}
.pstrip button{flex:none;width:72px;background:var(--panel-2);padding:0;
  border:1px solid var(--line);border-radius:7px;overflow:hidden;
  cursor:pointer;color:var(--muted);font:inherit}
.pstrip button:hover{border-color:var(--accent)}
.pstrip button[aria-current="true"]{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent)}
/* `contain`, not `cover`, and a portrait box. A designed screen is nearly
   always taller than it is wide, so a landscape crop centred on the image
   shows a band of mid-page whitespace — every thumbnail then looks like
   every other thumbnail, which is worse than no strip at all. Letterboxing
   against the panel colour keeps a mixed file (mobile frames beside a
   dashboard) legible in one row. */
.pstrip img{width:100%;height:104px;object-fit:contain;display:block;
  background:var(--panel)}
.pstrip span{display:block;padding:4px 6px;font-size:10px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.previewer .pbody img{max-width:100%;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2)}
.previewer .pfoot{padding:14px 18px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* The scrim is a NARROW-SCREEN device only.
   The first version covered the viewport and took pointer events, which
   dimmed and froze the conversation the moment a preview opened — the
   exact thing this panel exists to avoid. On a wide screen the panel does
   not overlap the chat at all, so there is nothing to dim: the shell gives
   up the width instead, and both stay live. Below 900px the panel really
   does cover the app, and there the scrim is correct. */
.pscrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:59;opacity:0;pointer-events:none;transition:opacity .22s}
@media (max-width:900px){
  .pscrim{display:block}
  .pscrim.open{opacity:1;pointer-events:auto}
}

/* Reflow rather than cover: the shell shrinks by exactly the panel's
   width, so the answer you were reading stays readable and scrollable. */
.shell{transition:padding-right .22s cubic-bezier(.4,0,.2,1)}
body.previewing .shell{padding-right:var(--preview-w)}
@media (max-width:900px){
  body.previewing .shell{padding-right:0}
}
@media (prefers-reduced-motion:reduce){.shell{transition:none}}

/* ===================== web research =====================
   Visually DISTINCT from a grounded answer, on purpose. The whole point of
   keeping research separate is that a reader never has to work out which
   they are looking at, and identical styling would undo that in the UI
   after the backend went to the trouble of keeping the types apart. */
.web-banner{display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#7fb5e8;background:rgba(90,150,220,.1);border:1px solid rgba(90,150,220,.28);
  border-radius:7px;padding:7px 11px;margin-bottom:16px}
.web-banner svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.card.web{border-color:rgba(90,150,220,.24)}
.caveat{border-left:3px solid rgba(90,150,220,.5);padding:11px 14px;
  background:rgba(90,150,220,.06);border-radius:0 8px 8px 0;margin-top:16px}
.caveat h5{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#7fb5e8;margin-bottom:6px}
.caveat li{font-size:13px;color:var(--muted);line-height:1.6;margin-left:16px}
.weblinks{display:grid;gap:8px;margin-top:14px}
.weblinks a{display:flex;gap:10px;align-items:baseline;text-decoration:none;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--text);font-size:13px}
.weblinks a:hover{border-color:rgba(90,150,220,.45)}
.weblinks .n{font-family:var(--mono);font-size:11px;color:#7fb5e8;flex:0 0 auto}
.weblinks .d{font-family:var(--mono);font-size:10.5px;color:var(--dim);flex:0 0 auto}
.weblinks .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- teams & agents ---- */
.team{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:14px 16px;margin-bottom:10px;cursor:pointer}
.team:hover{border-color:var(--accent)}
.team h4{font-size:14.5px;font-weight:600}
.team .sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.who{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.who span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;
  padding:4px 9px;color:var(--muted)}
.who span.agent{border-color:var(--accent);color:var(--accent)}
.who span.unowned{border-color:#c46a5a;color:#e08a78}
.blind{margin-top:12px;border-left:3px solid var(--line);padding-left:11px}
.blind li{font-size:12.5px;color:var(--dim);line-height:1.6;margin-left:14px}

/* ---- ownership line ----
   One place, every page. Pinned to the bottom of the shell rather than
   appended to each panel, so a page that scrolls does not push it into
   the middle of the content and a short page does not float it. */
.madeby{position:fixed;left:0;right:0;bottom:0;z-index:4;
  padding:9px 24px calc(env(safe-area-inset-bottom,0px) + 9px);
  text-align:center;font-size:11px;letter-spacing:.02em;color:var(--dim);
  background:linear-gradient(to top,var(--bg) 62%,transparent);
  pointer-events:none}
.madeby span{color:var(--muted)}
/* Reserved on the SHELL, not on .wrap. `.wrap.nested` sets
   padding-bottom:0 and outranks a bare `.wrap` rule whatever the order,
   so the chat composer would have sat underneath this line. Shrinking the
   shell instead means every panel clears it, including the full-height
   ones. */
.shell{padding-bottom:30px}
body.previewing .madeby{right:var(--preview-w)}
@media (max-width:900px){body.previewing .madeby{right:0}}

/* ---- catch up ---- */
.cu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:18px}
.cu-stat{border:1px solid var(--line);border-radius:11px;background:var(--panel);
  padding:14px 16px}
.cu-stat .n{font-size:26px;font-weight:650;letter-spacing:-.02em;
  font-family:var(--mono)}
.cu-stat .n.warn{color:var(--accent)}
.cu-stat .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:5px}
.cu-sec{margin-top:20px}
.cu-sec h5{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}

/* ---- access control ---- */
.person{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:8px;
  flex-wrap:wrap}
.person .pi{flex:1;min-width:190px}
.person .pn{font-size:14px;font-weight:600}
.person .pe{font-size:12px;color:var(--dim);font-family:var(--mono);margin-top:2px}
.person select{background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;color:var(--text);font:inherit;font-size:12.5px;padding:6px 9px}
.person .cl{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-dim);
  border-radius:5px;padding:4px 8px}
.rolegrid{display:flex;gap:6px;flex-wrap:wrap}
.rolegrid label{display:flex;align-items:center;gap:5px;font-size:12px;
  color:var(--muted);background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;cursor:pointer}
.rolegrid input{accent-color:var(--accent)}

/* ---- empty states ----
   Every one of these pages read as "nothing is here" when it was in fact
   working correctly and waiting on an input. An empty page tells somebody
   the feature is broken; an empty state tells them what it will contain,
   why it is not there yet, and what to do about it — which is the
   difference between a product that looks unfinished and one that looks
   patient. */
/* LEFT aligned, and flush with the page heading above it.
   The first version centred the card and its text inside a page whose
   heading and description are left aligned, so the block floated in the
   middle of a left-aligned document with its own centre axis. Every other
   surface here reads top-left; an empty state is not the place to
   introduce a second reading order. */
.zero{border:1px dashed var(--line);border-radius:14px;padding:28px 26px;
  text-align:left;max-width:560px;margin:14px 0}
.zero .glyph{width:42px;height:42px;border-radius:11px;margin:0 0 14px;
  background:var(--accent-dim);color:var(--accent);display:flex;
  align-items:center;justify-content:center}
.zero .glyph svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zero h4{font-size:16px;font-weight:600;margin-bottom:8px}
.zero p{font-size:13.5px;color:var(--muted);line-height:1.65}
.zero .why{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--dim);line-height:1.6;text-align:left}
.zero .why b{color:var(--muted);font-weight:600}
.zero .act{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}

/* ---- page heads ---- */
.phead{max-width:820px;margin:0 auto;padding:26px 0 2px}
.phead h2{font-size:24px;letter-spacing:-.025em;font-weight:650}
.phead p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:7px;
  max-width:640px}
.pbodywrap{max-width:820px;margin:0 auto;padding-bottom:40px}

/* ---- richer finding cards ---- */
.signal{position:relative;padding-left:44px}
.signal .kindmark{position:absolute;left:14px;top:15px;width:20px;height:20px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.02em}
.signal .kindmark.drift{background:rgba(214,120,90,.16);color:#e08a78}
.signal .kindmark.stalled{background:rgba(190,160,80,.16);color:#d8bb6a}
.signal .kindmark.concentration{background:rgba(120,150,220,.16);color:#8fb0e8}
.signal .kindmark.ungoverned_agent{background:rgba(200,90,90,.18);color:#e58f8f}
.signal .kindmark.open_thread,.signal .kindmark.gap,
.signal .kindmark.contradiction{background:var(--panel-2);color:var(--dim)}
.signal .src{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.signal .src span{font-family:var(--mono);font-size:10px;color:var(--dim);
  background:var(--panel-2);border:1px solid var(--line);border-radius:5px;
  padding:3px 7px}

/* ---- unprompted findings ---- */
.rbtn{position:relative}
.rbtn .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:50%;background:var(--accent);display:block}
.signal{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:14px 16px;margin-bottom:10px}
.signal h4{font-size:14.5px;font-weight:600;margin-bottom:6px}
.signal .body{font-size:13.5px;color:var(--muted);line-height:1.65}
.signal .foot{display:flex;gap:8px;align-items:center;margin-top:11px;
  flex-wrap:wrap}
.signal .foot button{background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;padding:6px 11px;font:inherit;font-size:12.5px;
  color:var(--muted);cursor:pointer}
.signal .foot button:hover{border-color:var(--accent);color:var(--text)}
.signal .foot .did{border-color:var(--accent);color:var(--accent)}
.signal .age{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);margin-left:auto}

/* ---- what to do next ----
   The panel that turns an answer into movement. Visually distinct from
   the answer itself: the prose is what the record says, this is what
   Louie would do about it, and conflating the two would make the second
   look like it was also quoted from a document. */
.acts{margin-top:18px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);overflow:hidden}
.acts h5{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);padding:11px 14px 0}
.acts ul{margin:8px 0 0;padding:0 14px 12px 30px}
.acts li{font-size:13.5px;line-height:1.65;color:var(--text);margin-bottom:4px}
.acts .dec{padding:12px 14px;border-top:1px solid var(--line)}
.acts .dec b{display:block;font-size:13.5px;margin-bottom:5px}
.acts .dec .rec{font-size:13px;color:var(--text);
  border-left:3px solid var(--accent);padding-left:10px;margin:6px 0}
.acts .dec .why{font-size:12.5px;color:var(--muted);line-height:1.6}
.acts .dec .opts{font-family:var(--mono);font-size:10.5px;color:var(--dim);
  margin-top:6px}
.nexts{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;
  border-top:1px solid var(--line)}
.nexts button{background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;
  color:var(--muted);cursor:pointer;text-align:left}
.nexts button:hover{border-color:var(--accent);color:var(--text)}

/* ---- design frames ----
   An image referenced from the source system, never re-hosted. */
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-top:14px}
.frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--panel-2);text-decoration:none;display:block;transition:border-color .15s}
.frame:hover{border-color:var(--accent)}
.frame img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  background:var(--bg)}
.frame .cap{padding:9px 11px;font-size:12.5px;color:var(--text);
  display:flex;align-items:center;gap:7px}
.frame .cap em{font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-left:auto}

/* ===================== settings ===================== */
.settings-head{padding:26px 0 4px}
.settings-head h2{font-size:24px;letter-spacing:-.025em;font-weight:650}
/* Blueprint. A diagram is the one thing in this UI allowed to be wider
   than the column, so it gets its own scroll container rather than making
   the whole page scroll sideways. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.diagram-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);box-shadow:var(--shadow);padding:14px;margin:14px 0}
.diagram-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Mermaid writes max-width inline on the <svg>, which beats a plain rule.
   Without !important the map is squashed into the column and the scroll
   container never fires. */
.diagram svg{max-width:none!important;width:auto!important;height:auto;
  display:block;margin:0 auto}
.bp-meta{gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.bp-table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}
.bp-table caption{text-align:left;font-size:12px;color:var(--muted);padding-bottom:8px}
.bp-table th,.bp-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);
  vertical-align:top}
.bp-table thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.bp-table tbody th{font-weight:600;color:var(--text)}
.howdrawn{margin-top:12px}
.howdrawn summary{cursor:pointer;font-size:13px;color:var(--muted)}
.howdrawn summary:hover{color:var(--text)}
.howdrawn summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bp-src{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);
  font-size:12.5px;line-height:1.55;max-height:340px;overflow:auto;color:var(--text);
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:12px;margin-top:10px}
@media (max-width:640px){
  .diagram-wrap{margin:12px -16px;padding:10px;border-radius:0;border-left:0;border-right:0}
  .bp-table{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .spin{animation:none}
}
.subnav{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 20px;
  overflow-x:auto}
.subnav button{background:none;border:0;border-bottom:2px solid transparent;
  padding:9px 13px;cursor:pointer;color:var(--muted);font-size:13.5px;white-space:nowrap}
.subnav button:hover{color:var(--text)}
.subnav button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.field{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.field .k{font-size:13px;color:var(--muted);flex:0 0 190px}
.field .v{font-size:13.5px;color:var(--text);text-align:right;word-break:break-word}
.field .v.mono{font-family:var(--mono);font-size:12px}
.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--muted)}
.badge.gold{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--accent)}
.card h3{font-size:15px;margin-bottom:4px;font-weight:600}
.card>.hint:first-child{margin-top:0}
.danger{border-color:rgba(240,119,108,.3)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Destructive or stopping actions (Discard, Opt-out received, Erase): an
   outline in the stop colour, distinct from gold routine actions and from
   the solid stop Send button. */
.btn.stop{background:none;border:1px solid color-mix(in srgb,var(--stop) 45%,transparent);color:var(--stop)}
.btn.stop:hover{background:color-mix(in srgb,var(--stop) 10%,transparent)}
/* Usage bars: drawn from real counts, so a quiet day is an empty column
   rather than a smoothed curve that implies activity there wasn't.
   NOT called `.bar` — the header's `.bar` rule carries `padding:12px 24px`,
   which silently added 48px to every column and overflowed the card by a
   full screen width. Shared, un-namespaced class names in one stylesheet
   are a collision waiting for the second person to pick the obvious word. */
.spark{display:flex;align-items:flex-end;gap:3px;height:76px;margin:16px 0 8px}
.spark-col{flex:1 1 0;min-width:3px;background:var(--accent-dim);
  border-radius:2px 2px 0 0;position:relative}
.spark-col.on{background:var(--accent)}
.spark-col::after{content:attr(data-label);position:absolute;bottom:100%;left:50%;
  transform:translateX(-50%);margin-bottom:6px;white-space:nowrap;font-size:11px;
  background:var(--panel-2);border:1px solid var(--line);padding:3px 7px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .12s;color:var(--text);z-index:5}
.spark-col:hover::after{opacity:1}
.sparkfoot{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);
  font-family:var(--mono)}
/* Sign in with SharePlay */
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  max-width:340px;margin:0 auto;background:var(--accent);color:#17140a;border:0;
  border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer}
.oauth-btn:hover{background:var(--accent-2)}
.oauth-note{font-size:12.5px;color:var(--dim);margin-top:12px;text-align:center}
.authbar{max-width:660px;margin:22px auto 0}
@media (max-width:640px){.field{flex-direction:column;gap:4px}
  .field .k{flex:none}.field .v{text-align:left}.badges{justify-content:flex-start}}

/* ===================== signed-out landing =====================
   Deliberately its own visual language: centred, dark, one input. The
   signed-in app is a workspace; this is a front door, and a front door
   that looks like a workspace makes people think they have already been
   let in. */
.landing{position:relative;max-width:760px;margin:0 auto;padding:14vh 4px 60px;
  text-align:center;isolation:isolate}
/* z-index:-1 put this behind the body's own background and it never showed.
   It sits at 0 with the content lifted above it instead. */
.glow{position:absolute;left:50%;top:4vh;transform:translateX(-50%);
  width:min(1000px,130vw);height:660px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(224,179,65,.11),transparent 70%)}
.landing>*:not(.glow){position:relative;z-index:1}
.landing-mark{margin:0 auto 18px}
.landing-word{font-size:21px;margin-bottom:18px}
.landing-h{font-size:clamp(28px,4.2vw,40px);font-weight:600;letter-spacing:-.025em;
  color:var(--text);line-height:1.15}
.landing-sub{font-size:14.5px;color:var(--muted);max-width:520px;margin:14px auto 34px;
  line-height:1.6}

.askbar{display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 16px;
  max-width:660px;margin:0 auto;box-shadow:var(--shadow);text-align:left}
.askbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.askbar input{flex:1;background:none;border:0;padding:6px 0;font-size:14.5px;outline:none}
.askbar input:focus{outline:none;box-shadow:none}
.ask-plus{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;
  cursor:pointer;padding:0 2px}
.ask-plus:hover{color:var(--accent)}
.ask-go{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:0;
  background:var(--accent);color:#17140a;font-size:15px;cursor:pointer}
.ask-go:hover{background:var(--accent-2)}

.modelpick{position:relative}
.model-btn{display:flex;align-items:center;gap:7px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12.5px;
  color:var(--muted);cursor:pointer;white-space:nowrap}
.model-btn:hover{color:var(--text);border-color:var(--accent-dim)}
.model-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px}
.model-btn .chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.model-menu{position:absolute;right:0;top:calc(100% + 10px);width:290px;z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:6px;box-shadow:var(--shadow);text-align:left}
.model-menu button{display:flex;width:100%;gap:10px;align-items:flex-start;
  background:none;border:0;border-radius:9px;padding:10px 11px;cursor:pointer;text-align:left}
.model-menu button:hover{background:var(--panel-2)}
.model-menu .tick{width:14px;flex:0 0 14px;color:var(--accent);font-size:12px;padding-top:2px}
.model-menu .mname{font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px}
.model-menu .mwhy{font-size:12px;color:var(--dim);margin-top:2px;line-height:1.45}
.model-menu .tag{font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;padding:2px 6px;border-radius:5px;
  background:var(--accent-dim);color:var(--accent)}
.model-menu .tag.lock{background:var(--panel-2);color:var(--dim)}
.model-menu .divider{border-top:1px solid var(--line);margin:6px 4px}

/* What you get instead of an answer. Named a gate rather than an error
   because nothing went wrong — this is the product working. */
/* Above the model menu (z-index 30). The gate is RAISED BY choosing a
   model, so the menu is still open behind it — and at 660px wide the two
   overlap, which rendered as the gate's text sitting on top of the menu's
   text. Closing the menu instead would hide which model was chosen at the
   exact moment the reader is being asked to justify choosing it. */
.gate{max-width:660px;margin:22px auto 0;text-align:left;background:var(--panel);
  border:1px solid var(--accent-dim);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 20px;animation:rise .25s ease;
  position:relative;z-index:40;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.gate h4{font-size:14.5px;color:var(--text);margin-bottom:7px}
.gate p{font-size:13.5px;color:var(--muted);line-height:1.6}
.gate .echo{display:block;font-size:13px;color:var(--text);background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:12px 0}
.gate .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.signin-fold{max-width:660px;margin:34px auto 0;text-align:left}
.signin-fold summary{font-size:13px;color:var(--muted);cursor:pointer;
  list-style:none;text-align:center}
.signin-fold summary::-webkit-details-marker{display:none}
.signin-fold summary:hover{color:var(--accent)}
@media (max-width:640px){
  .landing{padding-top:9vh}
  .askbar{flex-wrap:wrap;border-radius:18px;padding:12px}
  .askbar input{order:-1;width:100%;flex:1 0 100%;padding:4px 4px 10px}
  .modelpick{flex:1}
  .model-menu{width:min(290px,78vw)}
}

.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px}
@keyframes s{to{transform:rotate(360deg)}}
/* Below 900px the history panel becomes an overlay: at that width three
   columns leave the conversation about 300px wide, which is narrower than
   the answers it has to hold. */
@media (max-width:900px){
  .menu-btn{display:inline-block}
  .history{position:fixed;top:0;bottom:0;left:var(--rail);z-index:30;
    box-shadow:var(--shadow)}
  .history.collapsed{display:none}
  .wrap{padding:0 16px 32px}
  .bar{padding:12px 16px;padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
}
@media (max-width:520px){
  :root{--rail:56px}
  .bar{gap:9px}.who{display:none}
  .rail-tip{display:none}
  .empty{padding-top:3vh}
  .sugg{grid-template-columns:1fr 1fr}
  .sugg button{min-height:96px;font-size:12.5px}
  .composer .foot span:nth-child(3){display:none}
}
/* ===================== product chooser (BUILD 010) =====================
   Two large, equal choices: the founder is non-technical and must not be
   able to miss which door is which. */
.chooser{max-width:720px;margin:8vh auto 0;text-align:center}
.chooser h2{font-size:24px;letter-spacing:-.02em;font-weight:650}
/* Secondary line under the question: --muted keeps it readable (4.5:1+). */
.chooser-note{font-size:13.5px;color:var(--muted);margin-top:8px}
/* Side by side on a laptop, stacked on a phone. */
.chooser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:24px}
/* A choice is a big card-shaped button with its name and one plain line. */
.chooser-opt{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow);color:var(--text)}
.chooser-opt:hover{border-color:var(--accent)}
.chooser-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chooser-name{font-size:18px;font-weight:650}
.chooser-desc{font-size:13.5px;color:var(--muted);line-height:1.55}