/* Sediment 1 — product UI. One face, one color mode, one hairline, one radius: Selawik (the site's typeface,
   SIL OFL, self-hosted — the CSP allows no external assets) over the site's bone / warm near-black / burnt clay.
   No italics anywhere; emphasis is weight. */
@font-face{font-family:"Selawik";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/selawk.woff2) format("woff2")}
@font-face{font-family:"Selawik";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/selawksb.woff2) format("woff2")}
@font-face{font-family:"Selawik";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/selawkb.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/IBMPlexMono-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/IBMPlexMono-Medium.woff2) format("woff2")}
:root{
  /* palette from sedimentlabs.ai: bone paper, warm near-black ink, burnt clay accent */
  --paper:#f5f3ee;--sheet:#fcfaf5;--ink:#1f1b16;--ink-2:#38322a;--muted:#5c554c;--faint:#948b7b;
  --hair:#c9c3b6;--hair-2:#e4e0d6;--accent:#8a5136;--accent-ink:#6e4429;--accent-soft:#f0e6dc;
  --warn:#8f2a1f;--warn-bg:#f7e9e6;--mark:#e6d9c8;--shadow:0 12px 36px rgba(31,27,22,.12);
  /* chart series: eight inks of the same paper palette, each at least 3:1 on --sheet and apart in hue or
     luminance, so no series is a hairline nobody can see (lowest here is the ochre at 4.7:1) */
  --s0:#1f1b16;--s1:#8a5136;--s2:#3f5f85;--s3:#5f6f33;--s4:#8a6d1d;--s5:#6d4667;--s6:#2f6a63;--s7:#5c554c;
  --r:6px;--r2:10px;
  --serif:"Selawik","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --sans:"Selawik","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
em,i,cite,dfn,address{font-style:normal;font-weight:600}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:14.5px/1.55 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;cursor:pointer;color:inherit}input,textarea,select{font:inherit;color:inherit}a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:#e6d9c8}
.muted{color:var(--muted)}.small{font-size:12.5px}.warn{color:var(--warn)}.nowrap{white-space:nowrap}.num{text-align:right;font-variant-numeric:tabular-nums}
.lbl,.label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.brand .mark{width:17px;height:17px;align-self:center;flex:none}
/* ---------- primitives: one hairline, one radius ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);background:var(--sheet);border-radius:var(--r);padding:7px 13px;font-size:13px;font-weight:500;line-height:1.2;color:var(--ink);transition:border-color .15s ease,background .15s ease}
.btn:active{transform:translateY(.5px)}
.btn:hover{border-color:var(--ink)}.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn.primary:hover{background:#000}
.btn.danger{color:var(--warn);border-color:#e0c4bf}.btn.danger:hover{border-color:var(--warn);background:var(--warn-bg)}.btn.wide{width:100%;justify-content:center;padding:10px}
.btn:disabled{opacity:.45;cursor:default}
.lnk{border:0;background:none;padding:0;color:var(--muted);font-size:12.5px;text-decoration:none}.lnk:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.lnk:disabled{opacity:.4;text-decoration:none;cursor:default}.lnk.danger{color:var(--warn)}
.field{display:block;margin:0 0 12px}.field>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.err{color:var(--warn);min-height:20px;font-size:13px;margin:4px 0 8px}
.modal .err:empty{min-height:0;margin:0}
.empty{color:var(--muted);padding:36px 0;font-size:14px;text-align:center;font-family:var(--serif)}
.kv{font:12.5px/1.55 var(--mono);white-space:pre-wrap;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:12px;margin:0;font-variant-numeric:tabular-nums}.kv.warn{color:var(--warn)}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--ink);color:var(--paper);border-radius:10px;padding:10px 16px;box-shadow:var(--shadow);font-size:13px;max-width:380px;animation:fade .22s cubic-bezier(.2,.7,.3,1)}.toast.err{background:var(--warn)}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.modal-bg{position:fixed;inset:0;background:rgba(22,24,28,.38);display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .15s ease-out}
.modal{position:relative;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r2);box-shadow:var(--shadow);width:min(520px,94vw);max-height:90vh;overflow:auto;padding:24px 26px;animation:pop .18s cubic-bezier(.2,.8,.3,1.1)}.modal.wide{width:min(820px,96vw)}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(4px)}}
.modal h3{margin:0 0 14px;font:600 18px/1.3 var(--serif)}.modal h4{margin:16px 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal p{margin:0 0 10px;font-family:var(--serif);font-size:15px;line-height:1.6}.modal .two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.modal .quote{background:var(--paper);border-left:2px solid var(--hair);padding:8px 12px;white-space:pre-wrap;font-family:var(--serif)}.modal .answer-body{padding:2px 0}.modal ol.srcs{margin:4px 0 0 18px;padding:0}.modal ol.srcs li{margin:2px 0}
.modal-x{position:absolute;right:12px;top:10px;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;width:32px;height:32px;border-radius:var(--r)}.modal-x:hover{background:var(--hair-2);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{border:1px solid var(--hair);background:var(--paper);border-radius:var(--r);padding:2px 9px;font-size:12.5px}.chip:hover{border-color:var(--ink)}
.menu{position:fixed;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r2);box-shadow:var(--shadow);padding:4px;z-index:40;min-width:170px;animation:pop .14s cubic-bezier(.2,.8,.3,1.1)}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:var(--r);font-size:13px;transition:background .12s ease}.menu button:hover{background:var(--hair-2)}.menu button.danger{color:var(--warn)}
.note-pop{position:fixed;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:7px 11px;font-size:12.5px;line-height:1.4;max-width:260px;box-shadow:var(--shadow);z-index:55;pointer-events:none}
/* composer autocomplete: resolver names above the box */
.composer .box{position:relative}
/* quoting an earlier answer */
.quote-btn{position:fixed;z-index:45;border:1px solid var(--hair);background:var(--ink);color:var(--paper);border-radius:var(--r);padding:5px 11px;font-size:12.5px;box-shadow:var(--shadow)}
.quote-chip{display:flex;align-items:flex-start;gap:8px;margin:2px 2px 8px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;padding:7px 8px 7px 10px}
.quote-chip .qt{flex:1;font:400 13px/1.5 var(--serif);color:var(--ink-2);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.quote-chip .qx{border:0;background:none;color:var(--muted);font-size:16px;line-height:1;padding:0 2px}.quote-chip .qx:hover{color:var(--ink)}
.msg.user .bubble .quoted{border-left:3px solid var(--hair);color:var(--muted);font:400 14px/1.5 var(--serif);padding:2px 0 2px 10px;margin:0 0 8px;white-space:pre-wrap}
/* ---------- the product tour: spotlight, character, card ---------- */
.icon-btn{border:0;background:none;width:32px;height:32px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);padding:0;transition:background .13s ease,color .13s ease}
.icon-btn:hover{background:var(--hair-2);color:var(--ink)}
.help-btn{font:600 15px/1 var(--serif);border:1px solid var(--hair);width:28px;height:28px;border-radius:50%}
.help-btn:hover{border-color:var(--accent);color:var(--accent)}
/* round 12: in the top bar the "?" is the split and account buttons' twin: same box, same height */
.topbar .help-btn.icon-btn{height:30px;min-width:40px;width:auto;padding:0 11px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);color:var(--ink);align-self:center;font:600 15px/1 var(--serif)}
.topbar .help-btn.icon-btn:hover{background:var(--sheet);border-color:var(--ink);color:var(--ink)}
.app.tut-cine{transform:scale(1.10);filter:blur(14px);opacity:.92}
.app.tut-cine-run{transform:scale(1);filter:blur(0);opacity:1;transition:transform 3s cubic-bezier(.16,.6,.2,1),filter 3s cubic-bezier(.3,.5,.3,1),opacity 3s ease-out}
#tutorial-layer{position:fixed;inset:0;z-index:70}
#tutorial-layer.out{opacity:0;transition:opacity .6s ease-out}
#tutorial-layer .d-block{position:absolute;inset:0}
/* the spotlight: a heavier veil and an accent ring, so the lit element is unmistakably the subject */
#tutorial-layer .d-hole{position:absolute;border-radius:10px;border:2px solid var(--accent);
  box-shadow:0 0 0 200vmax rgba(233,229,220,.88),0 10px 40px rgba(31,27,22,.22);pointer-events:none;
  transition:left .8s cubic-bezier(.22,1,.36,1),top .8s cubic-bezier(.22,1,.36,1),width .8s cubic-bezier(.22,1,.36,1),height .8s cubic-bezier(.22,1,.36,1),opacity .8s ease}
/* the title page: the mark drifts together, the word settles, the button follows — slow and steady */
#tutorial-layer .t-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:rgba(238,234,226,.93);backdrop-filter:blur(2px)}
#tutorial-layer .t-title.gone{opacity:0;transition:opacity .7s ease-out}
#tutorial-layer .t-mark{display:flex;align-items:center;justify-content:center}
#tutorial-layer .t-mark img{height:74px;width:auto;filter:drop-shadow(0 4px 14px rgba(31,27,22,.14));transition:transform 2.8s cubic-bezier(.22,1,.36,1),opacity 2.8s ease}
#tutorial-layer .t-mark img.l{transform:translateX(-9vw);opacity:0}
#tutorial-layer .t-mark img.r{transform:translateX(9vw);opacity:0}
#tutorial-layer .t-title.in .t-mark img.l{transform:translateX(-3px);opacity:1}
#tutorial-layer .t-title.in .t-mark img.r{transform:translateX(3px);opacity:1}
#tutorial-layer .t-word{font:600 21px/1 var(--serif);letter-spacing:.42em;text-indent:.42em;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity 1.6s ease 1.5s,transform 1.6s cubic-bezier(.22,1,.36,1) 1.5s}
#tutorial-layer .t-title.in .t-word{opacity:1;transform:none}
#tutorial-layer .t-go{padding:9px 26px}
/* the buttons follow the word; with a firm logo (round 12) the logo comes first, then the buttons */
#tutorial-layer .t-acts{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(8px);transition:opacity 1.2s ease 2.5s,transform 1.2s cubic-bezier(.22,1,.36,1) 2.5s}
#tutorial-layer .t-title.with-firm .t-acts{transition-delay:3.3s,3.3s}
#tutorial-layer .t-title.with-firm{background:rgba(238,234,226,.96)}
#tutorial-layer .t-title.in .t-acts{opacity:1;transform:none}
#tutorial-layer .t-skip{font-size:12.5px;color:var(--muted)}
#tutorial-layer .t-skip:hover{color:var(--ink)}
#tutorial-layer .t-firm{height:46px;width:auto;max-width:min(240px,70vw);object-fit:contain;opacity:0;transform:translateY(8px);transition:opacity 1.4s ease 2.3s,transform 1.4s cubic-bezier(.22,1,.36,1) 2.3s}
#tutorial-layer .t-title.in .t-firm{opacity:1;transform:none}
#tutorial-layer .d-btns{display:flex;align-items:center;gap:8px}
#tutorial-layer .d-skip{font-size:12.5px;color:var(--muted);margin-right:4px}
#tutorial-layer .d-skip:hover{color:var(--ink)}
#tutorial-layer .d-card.busy{opacity:.55}
#tutorial-layer .d-card{position:absolute;visibility:hidden;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r2);box-shadow:var(--shadow);
  padding:16px 18px;transition:left .8s cubic-bezier(.22,1,.36,1),top .8s cubic-bezier(.22,1,.36,1);z-index:2}
#tutorial-layer .d-kicker{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:5px}
#tutorial-layer .d-card h4{margin:0 0 6px;font:600 17px/1.3 var(--serif);color:var(--ink)}
#tutorial-layer .d-card p{margin:0 0 12px;font:400 13.5px/1.6 var(--sans);color:var(--ink-2)}
#tutorial-layer .d-foot{display:flex;align-items:center;justify-content:space-between}
#tutorial-layer .d-dots{display:flex;gap:5px}
#tutorial-layer .d-dots i{width:6px;height:6px;border-radius:50%;background:var(--hair)}
#tutorial-layer .d-dots i.on{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.app.tut-cine{transform:none;filter:none}#tutorial-layer .t-mark img,#tutorial-layer .t-word,#tutorial-layer .t-firm,#tutorial-layer .t-acts{transition-duration:.01s;transition-delay:0s}}
/* the verify step in "How I got this" expands to the sentence-by-sentence check */
.steps .verify-detail{margin:2px 0}
.steps .v-src{border:0;background:none;padding:0;margin-left:6px;color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;word-break:break-all;text-align:left}
.steps .v-src:hover{color:var(--accent-ink)}
.steps .v-row{padding:4px 0 4px 14px;border-left:2px solid var(--hair-2);margin:4px 0 4px 2px;line-height:1.5}
.steps .v-label{display:inline-block;font-size:10px;letter-spacing:.06em;font-weight:600;border-radius:3px;padding:1px 6px;margin-right:7px;background:var(--hair-2);color:var(--ink-2);vertical-align:1px}
.steps .v-label.supported,.steps .v-label.checked{background:#e4ead9;color:#3c4a2a}
.steps .v-label.rewritten{background:var(--accent-soft);color:var(--accent-ink)}
.steps .v-label.dropped{background:var(--warn-bg);color:var(--warn)}
.steps .v-label.general,.steps .v-label.judgment{background:var(--hair-2);color:var(--muted)}
.steps .v-label.record{background:var(--mark);color:var(--ink-2)}
.steps .v-sent{color:var(--ink-2)}
.steps .v-note{color:var(--faint);font-size:12px}
/* the deliberation transcript: earlier steps tuck behind a small disclosure — click to expand, one
   current line at a time otherwise */
.deliberation{margin:0 0 10px;font-family:var(--sans)}
.deliberation summary{cursor:pointer;list-style:none;font-size:12px;color:var(--faint);user-select:none;display:inline-flex;align-items:center;gap:6px;padding:2px 0;transition:color .15s ease}
.deliberation summary::-webkit-details-marker{display:none}
.deliberation summary::before{content:"›";display:inline-block;font-size:13px;line-height:1;transition:transform .18s ease}
.deliberation[open] summary::before{transform:rotate(90deg)}
.deliberation summary:hover{color:var(--muted)}
.deliberation .think{font-size:12.5px;color:var(--faint);line-height:1.5;padding-left:14px;position:relative;animation:fade .25s ease-out;margin-top:4px}
.deliberation .think::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--hair)}
/* figure sentences stream in muted gray and settle into full ink once the verifier has read each one
   against the sources — unverified-yet is fine to read, it is just not yet in ink */
.msg.live .body p, .msg.live .body li{transition:color .5s ease}
.msg.live .body p.pending, .msg.live .body li.pending{color:var(--faint)}
.msg.live .body p.pending sup.cite a, .msg.live .body li.pending sup.cite a{opacity:.55}
/* shimmer lines: the standard loading placeholder (suggestions, status) */
.skeleton{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;padding:8px 0}
.skeleton i{display:block;height:12px;border-radius:3px;background:linear-gradient(90deg,var(--hair-2) 0%,#faf8f2 45%,var(--hair-2) 90%);background-size:240% 100%;animation:shimmer 1.3s ease-in-out infinite}
.skeleton i:nth-child(1){width:72%}.skeleton i:nth-child(2){width:88%}.skeleton i:nth-child(3){width:56%}
/* travel = exactly one gradient tile (background-size 240%: Δposition 171.4% == 240% of the width), so the loop is seamless */
@keyframes shimmer{0%{background-position:171.4% 0}100%{background-position:0% 0}}
/* ---------- login ---------- */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login{width:360px;max-width:100%}
.login .login-mark{display:block;width:44px;height:44px;margin:0 auto 14px}
.login h1{margin:0;font:600 26px/1.2 var(--serif);letter-spacing:-.01em}.login .sub{color:var(--muted);margin:4px 0 26px;font-size:13px}
.login .fine{font-size:12.5px;color:var(--muted);margin-top:18px;line-height:1.5;font-family:var(--serif)}
/* "Who are you?": the firm's people by name (public-data sign-in). A button that opens a list. */
.login .who-box{position:relative}
.login .who-pick{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.login .who-pick:focus,.login .who-pick[aria-expanded=true]{border-color:var(--ink);outline:none}
.login .who-now{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login .who-now b,.login .who-opt b{font-weight:600}
.login .who-now.muted{color:var(--muted)}
.login .who-title{color:var(--muted)}
.login .who-caret{color:var(--muted);font-size:12px}
.login .who-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:4px;list-style:none;max-height:min(340px,60vh);overflow:auto;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 10px 28px rgba(31,27,22,.14)}
.login .who-list:focus{outline:none}
.login .who-opt{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:calc(var(--r) - 1px);cursor:pointer}
.login .who-opt.active{background:var(--accent-soft)}
.login .who-opt[aria-selected=true] b{color:var(--accent-ink)}
.login .who-opt.else{border-top:1px solid var(--hair-2);margin-top:4px;padding-top:10px;border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
.login .who-name{flex:1;min-width:0}
.login .who-seen{flex:none;font-size:11.5px;color:var(--faint);white-space:nowrap}
.login .field[hidden],.login .hint[hidden]{display:none}
/* ---------- shell: top bar + one or two conversation columns (+ document pane) ---------- */
:root{--top-h:50px}                                   /* the top bar's height — two rows of it at phone width */
.app.single{display:grid;grid-template-rows:var(--top-h) minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:100vh;min-height:0}
/* The chat rail (round-3 finding 30, reworked in round 4): the recent conversations as FLAT TABS under the
   nav — square, lightly filled, the open ones underlined. Deliberately not the nav's shape: "the nav needs to
   look like nav and the chats need to look like chats". A tile shows its whole title on two lines; the strip
   has a thin visible scrollbar, an arrow at each end when it overflows there, and takes a plain wheel. */
.app.single.with-rail{grid-template-rows:var(--top-h) minmax(66px,auto) minmax(0,1fr)}
.rail-wrap{grid-column:1 / -1;position:relative;display:flex;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--hair-2);min-width:0}
.rail{flex:1;min-width:0;display:flex;align-items:stretch;gap:0;padding:0 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--hair) transparent;background:var(--paper);scroll-behavior:smooth}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail-tab{display:inline-flex;align-items:center;gap:6px;border:0;border-bottom:2px solid transparent;background:none;border-radius:0;padding:7px 12px 6px;font-size:12.5px;font-weight:400;line-height:1.3;color:var(--muted);text-align:left;max-width:260px;flex:none}
.rail-tab .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rail-tab:hover{background:var(--hair-2);color:var(--ink)}
.rail-tab.on{color:var(--ink);background:var(--sheet);border-bottom-color:var(--accent)}
.rail-tab.plus{width:auto;justify-content:center;font-size:16px;padding:4px 12px;color:var(--ink)}
.rail-tab .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.rail-arr{flex:none;width:26px;border:0;border-bottom:1px solid transparent;background:var(--paper);color:var(--muted);font-size:17px;line-height:1;padding:0 0 6px}
.rail-arr:hover{background:var(--hair-2);color:var(--ink)}
.rail-arr.l{box-shadow:6px 0 8px -6px rgba(31,27,22,.22)}
.rail-arr.r{box-shadow:-6px 0 8px -6px rgba(31,27,22,.22)}
@media (max-width:860px){.app.single.with-rail{grid-template-rows:var(--top-h) minmax(0,1fr)}.rail-wrap{display:none}}
.app.single.with-pane{grid-template-columns:minmax(0,1fr) minmax(400px,44%)}
.app.single.with-history.split{grid-template-columns:var(--hist-w,264px) minmax(0,1fr)}
.app.single.with-history.split.with-pane{grid-template-columns:var(--hist-w,264px) minmax(0,1fr) minmax(400px,44%)}
.app.single.with-history:not(.split) .history{position:fixed;top:var(--top-h);left:0;bottom:0;width:var(--hist-w,264px);z-index:36;box-shadow:var(--shadow)}
.history{position:relative;border-right:1px solid var(--hair);background:var(--paper);overflow:hidden;min-height:0;display:flex;flex-direction:column}
.hist-drag{position:absolute;top:0;right:0;bottom:0;width:11px;cursor:col-resize;z-index:2;touch-action:none;display:flex;align-items:center;justify-content:flex-end}
.hist-drag .grip{width:3px;height:44px;border-radius:2px;background:var(--hair);margin-right:1px;transition:background .13s ease,height .13s ease}
.hist-drag:hover .grip,body.resizing .hist-drag .grip{background:var(--accent);height:64px}
body.resizing{cursor:col-resize;user-select:none}
.hist-secs{display:flex;flex-direction:column;margin:-2px 0 3px 22px;padding-left:8px;border-left:1px solid var(--hair-2)}
.hist-sec{border:0;background:none;text-align:left;border-radius:var(--r);padding:3px 8px;font:12.5px/1.4 var(--sans);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-sec:hover{background:var(--hair-2);color:var(--ink)}
.hist-head{padding:14px 16px 8px}
.hist-list{display:flex;flex-direction:column;padding:0 8px 16px;flex:1;min-height:0;overflow:auto}
.hist-row{display:flex;align-items:stretch;margin:1px 0}
.hist-row .hist-item{flex:1;min-width:0;margin:0}
.hist-del{border:0;background:none;color:var(--faint);padding:0 9px;font-size:16px;line-height:1;border-radius:var(--r);flex:none;align-self:stretch}
.hist-del:hover{color:var(--warn);background:var(--warn-bg)}
.hist-del.arm{color:var(--warn);font:600 11.5px/1 var(--sans);white-space:nowrap}
/* the × shows on hover where hover exists; on touch it is always there (mobile has no hover) */
@media (hover:hover){.hist-del{opacity:0}.hist-row:hover .hist-del,.hist-del:focus-visible,.hist-del.arm{opacity:1}}
.hist-item{display:flex;flex-direction:column;gap:2px;text-align:left;border:0;background:none;border-radius:var(--r);padding:8px 10px;margin:1px 0;transition:background .13s ease}
.hist-item:hover{background:var(--hair-2)}
.hist-item.current{background:var(--accent-soft)}
.hist-item .t{font:500 13.5px/1.35 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hist-item .d{font-size:11.5px;color:var(--faint)}
.hist-item .t .dot,.hist-btn .dot,.nav-btn .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hist-item .t .dot{margin-right:6px;vertical-align:1px}
.hist-btn{position:relative}.hist-btn .dot{position:absolute;top:-3px;right:-3px;box-shadow:0 0 0 2px var(--paper)}
/* History: "open in a new pane", beside the delete × */
.hist-pane{border:0;background:none;color:var(--faint);padding:0 7px;line-height:0;border-radius:var(--r);flex:none;align-self:stretch;display:flex;align-items:center}
.hist-pane:hover{color:var(--ink);background:var(--hair-2)}
@media (hover:hover){.hist-pane{opacity:0}.hist-row:hover .hist-pane,.hist-pane:focus-visible{opacity:1}}
.hist-item.unread .t{font-weight:600}
/* the nav buttons: ONE style for all four (History, New chat, Views, Sourcing) — filled, a little heavier,
   the same height. Nothing here is a dropdown. */
.nav-btn,.hist-btn{position:relative;display:inline-flex;align-items:center;height:30px;border:1px solid var(--hair);background:var(--hair-2);border-radius:var(--r);padding:0 13px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.nav-btn:hover,.hist-btn:hover{border-color:var(--ink);background:var(--sheet)}
.nav-btn.on,.hist-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.nav-btn .dot{position:absolute;top:-3px;right:-3px;box-shadow:0 0 0 2px var(--paper)}
/* On the single-pane desktop the history panel is an overlay: a TRANSPARENT scrim behind it makes any
   center-screen click dismiss it (round-3 finding 28). Split view docks the panel, so no scrim there. */
.app.single:not(.split) .hist-scrim{display:block;position:fixed;top:var(--top-h);left:0;right:0;bottom:0;z-index:34;background:transparent}
.hist-scrim{display:none}
.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--paper);min-width:0}
/* the brand block: the product name with the FIRM stacked under it, both vertically centred in the bar */
.topbar .brand{white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:9px;align-self:center}
.topbar .brand .names{display:flex;flex-direction:column;justify-content:center;line-height:1.05}
.topbar .brand .prod{font:600 17px/1.1 var(--serif);letter-spacing:-.005em;color:var(--ink)}
/* round 12: the firm's own logo between the mark and the names, in grayscale and a little faded */
.topbar .brand .firm-logo{height:17px;width:auto;max-width:90px;object-fit:contain;flex:none;align-self:center;filter:grayscale(1) brightness(.7) contrast(1.35);opacity:.72}
.topbar .brand small{font:400 11.5px/1.15 var(--sans);color:var(--muted);letter-spacing:.01em}
.topbar .grow{flex:1}
.topbar .who{border:0;background:none;padding:6px 8px;border-radius:var(--r);font-size:13px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.topbar .who:hover{background:var(--hair-2)}.topbar .who small{display:block;color:var(--muted);font-size:11.5px}
.topbar .split-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);background:var(--sheet);border-radius:var(--r);padding:6px 11px;font-size:12.5px;font-weight:500;color:var(--ink)}.topbar .split-btn:hover:not(:disabled){border-color:var(--ink)}.topbar .split-btn:disabled{opacity:.4;cursor:default}.topbar .split-btn .ico{display:inline-flex;color:var(--ink)}
/* round 11: the account button is the split button's twin: same box, same height, icon centred */
.topbar .split-btn,.topbar .who.icon-btn{height:30px;min-width:40px;padding:0 11px;justify-content:center;align-self:center}
.topbar .who.icon-btn{width:auto;border:1px solid var(--hair);background:var(--sheet);color:var(--ink);max-width:none}
.topbar .who.icon-btn:hover{background:var(--sheet);border-color:var(--ink)}
.topbar .who.icon-btn>span{display:inline-flex;line-height:0}.topbar .who.icon-btn svg{display:block}
.topbar .pane-tabs{display:none;gap:2px}.app.stacked .topbar .pane-tabs.multi{display:flex}.topbar .pane-tabs button{border:1px solid var(--hair);background:var(--sheet);padding:4px 10px;font-size:12px;border-radius:var(--r);color:var(--muted)}.topbar .pane-tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Up to four equal conversation columns — --npanes is how many the window FITS at 340px a column (set by
   render(), recomputed on resize). The panes beyond that stay open and are one pane-tab click away. */
.app.stacked .cols .col{display:none}
.app.stacked .cols .col.vis{display:flex}
.cols{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;min-width:0;position:relative}
.app.split .cols{grid-template-columns:repeat(var(--npanes,2),minmax(0,1fr))}
/* the brand mark's two halves, floor to ceiling on either side of the conversation — muted background, the
   text always paints above them */
.cols .col{z-index:1}
.app.single:not(.split) .cols::before,.app.single:not(.split) .cols::after{content:"";position:absolute;top:0;bottom:0;width:34vh;z-index:0;opacity:.04;pointer-events:none;background-repeat:no-repeat;background-size:auto 100%}
.app.single:not(.split) .cols::before{left:0;background-image:url(/static/brand-left.svg);background-position:left center}
.app.single:not(.split) .cols::after{right:0;background-image:url(/static/brand-right.svg);background-position:right center}
.app.with-history .cols::before{display:none}                 /* the history panel takes the left mark's place */
.app.with-pane .cols::after{display:none}
@media (max-width:1180px){.app.single .cols::before,.app.single .cols::after{display:none !important}}
/* round 11: public-data mode has no brand watermark. On a pilot's home screen the two bracket halves read
   as stray grey rectangles either side of the portfolio strip. */
body.pd .cols::before,body.pd .cols::after{display:none !important}
.col{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}.cols .col + .col{border-left:1px solid var(--hair)}
/* the strip: the conversation's topic, centered (serif); click it for Memories; "New chat" (or × on a split pane)
   files the conversation; a second row lists the files already in the conversation */
.strip{display:flex;flex-direction:column;background:var(--paper)}
.strip .strip-row{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 96px;min-height:40px}
.strip .topic{display:inline-block;color:var(--ink);font:600 15px/1.35 var(--serif);text-align:center;padding:3px 10px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.strip .close-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:21px;line-height:1;width:30px;height:30px;border-radius:var(--r)}.strip .close-x:hover{background:var(--hair-2);color:var(--ink)}
.strip .files{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 24px 8px;justify-content:center}
.strip .files .lbl{margin-right:2px}
@media (max-width:860px){.strip .strip-row{padding:10px 88px 10px 12px}}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
@keyframes pulse{50%{opacity:.25}}@keyframes blink{50%{opacity:0}}
/* ---------- the conversation: a transcript on paper, not bubbles ---------- */
.thread{flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.thread::-webkit-scrollbar{width:10px}.thread::-webkit-scrollbar-track{background:transparent}
.thread::-webkit-scrollbar-thumb{background:var(--hair);border-radius:5px;border:2px solid var(--paper)}.thread::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.thread-inner{max-width:680px;margin:0 auto;padding:30px 24px 18px}
/* the chapter rail: the chat's parts in the column's right gutter. A flex row with the thread; the rail is pinned
   to the row's edge so the reading column never shifts when it appears. Ticks only when the gutter is narrow
   (document pane, split, narrower windows); nothing on mobile. */
.thread-row{position:relative;display:flex;flex:1;min-height:0;min-width:0}
.thread-row>.thread{flex:1;min-width:0}
.chapter-rail{position:absolute;top:0;right:16px;bottom:0;width:168px;overflow-y:auto;padding:30px 0 18px;font-family:var(--sans);scrollbar-width:thin;scrollbar-color:transparent transparent;pointer-events:none;z-index:2}
.chapter-rail:hover{scrollbar-color:var(--hair) transparent}
.chapter-rail.scrolls{pointer-events:auto}        /* only a rail with more entries than fit takes the wheel from the thread */
.chapter-rail::-webkit-scrollbar{width:6px}.chapter-rail::-webkit-scrollbar-track{background:transparent}
.chapter-rail::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
.chapter-rail:hover::-webkit-scrollbar-thumb{background:var(--hair)}
.chapter-rail[hidden]{display:none}
.ch-item{pointer-events:auto;display:flex;align-items:flex-start;gap:8px;width:100%;border:0;background:none;text-align:left;padding:4px 6px;border-radius:var(--r);font-size:12px;line-height:1.4;color:var(--faint);transition:color .15s ease}
.ch-item .tick{flex:none;width:6px;height:6px;border-radius:50%;background:var(--hair);margin-top:6px;transition:background .15s ease}
.ch-item .t{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ch-item:hover{color:var(--ink)}
.ch-item.on{color:var(--ink)}.ch-item.on .tick{background:var(--accent)}
.ch-item.part .t{color:var(--ink-2);font-weight:500}   /* the one part the chat is known to have, above its turns */
.app.with-pane .chapter-rail,.app.split .chapter-rail{width:22px;right:12px}
.app.with-pane .ch-item,.app.split .ch-item{padding:5px 0;justify-content:center}
.app.with-pane .ch-item .t,.app.split .ch-item .t{display:none}
@media (max-width:1099px){.chapter-rail{width:22px;right:12px}.ch-item{padding:5px 0;justify-content:center}.ch-item .t{display:none}}
.welcome{padding-top:18vh}
.welcome .hello{margin:0 0 18px;font:600 26px/1.25 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.welcome .examples{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.welcome .example{border:0;background:none;color:var(--ink-2);padding:7px 0;font:400 17px/1.45 var(--serif);text-align:left;white-space:normal;overflow-wrap:anywhere;transition:color .15s ease,transform .15s ease}
.welcome .example:hover{color:var(--accent);transform:translateX(3px)}
/* "About this record" (Wave B B4): quiet, under the suggestions, never on the answer path */
.about-record{margin-top:26px;max-width:62ch;font-family:var(--sans);line-height:1.55;color:var(--muted)}
.about-record .trust{color:var(--ink-2)}
.about-record details.why-open{margin-top:6px}
.about-record details.why-open summary{cursor:pointer;list-style:none;display:inline-block;user-select:none}
.about-record details.why-open summary::-webkit-details-marker{display:none}
.about-record details.why-open summary:hover{color:var(--ink)}
.about-record details.why-open p{margin:8px 0 0;color:var(--ink-2)}
details.sources .src.override{color:var(--muted);font-style:italic;cursor:default}
.welcome .example.muted{color:var(--faint)}
.msg{margin:0 0 24px}
.msg.rise{animation:rise .3s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.msg.user{display:block;padding-top:16px;margin-top:4px}.thread-inner>.msg.user:first-child{padding-top:0}
.msg.user .bubble{background:none;color:var(--ink);padding:0;border-radius:0;max-width:none;white-space:pre-wrap;overflow-wrap:anywhere;font:600 15px/1.55 var(--sans);letter-spacing:.002em}
.msg.assistant .body{overflow-wrap:anywhere;font:400 16px/1.68 var(--serif);color:var(--ink)}
.body p{margin:0 0 .85em}.body p:last-child{margin-bottom:0}
.body h1{font-size:21px;margin:.1em 0 .55em;font-weight:600;letter-spacing:-.005em}
.body h2{font-size:16.5px;margin:1.5em 0 .45em;font-weight:600;color:var(--ink)}.body h2:first-child{margin-top:0}
.body h3{font-size:15px;margin:1.1em 0 .35em;font-weight:600}
.body h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:1.2em 0 .4em;font-weight:500;color:var(--muted);font-family:var(--sans)}
.body ul,.body ol{margin:.3em 0 .9em 1.25em;padding:0}.body li{margin:.25em 0}
/* an enumeration whose every item leads with a bold label renders as scannable cards, not a prose column */
.body ul.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:.6em 0 .9em;list-style:none}
.body ul.cards li{margin:0;border:1px solid var(--hair-2);background:var(--sheet);border-radius:var(--r);padding:9px 12px;line-height:1.5}
.body ul.cards li>b:first-child{display:block;margin-bottom:2px;color:var(--ink)}
@media (max-width:640px){.body ul.cards{grid-template-columns:1fr}}
.body b,.body strong{font-weight:600}
.body code{font:13px var(--mono);background:var(--hair-2);padding:1px 4px;border-radius:3px}.body pre{font:12.5px/1.5 var(--mono);background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:10px 12px;overflow:auto;white-space:pre-wrap}
.body table{border-collapse:collapse;font:13.5px var(--sans);margin:.7em 0;width:100%;display:block;overflow:auto;font-variant-numeric:tabular-nums}.body td,.body th{border-bottom:1px solid var(--hair-2);padding:6px 10px;white-space:normal;text-align:left;vertical-align:top}.body th{border-bottom:1px solid var(--hair);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* citations as quiet pills: readable at [1] and at [18], a real hit target, no bracket clutter */
sup.cite{font-size:.62em;line-height:0;margin-left:2px;font-family:var(--sans)}
sup.cite a{display:inline-block;min-width:1.55em;padding:.18em .42em;border-radius:.7em;background:var(--accent-soft);color:var(--accent-ink);text-decoration:none;font-weight:600;text-align:center;line-height:1.25;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s ease,color .15s ease}
sup.cite a:hover{background:var(--accent);color:var(--paper);text-decoration:none}
sup.cite+sup.cite{margin-left:3px}
.unv{border-bottom:1.5px solid rgba(143,42,31,.55);background:rgba(143,42,31,.06);border-radius:2px;cursor:help}
.caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s infinite}
/* the working indicator: the status words themselves carry the motion — a soft highlight sweeps
   through the text (the suggestions-skeleton shimmer, masked to the words) */
.status{display:flex;align-items:center;gap:10px;font-size:13px;margin-top:8px;font-family:var(--sans)}
.status .stxt{color:var(--muted);transition:opacity .25s ease}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .status .stxt{background:linear-gradient(90deg,var(--faint) 0%,var(--faint) 38%,var(--ink-2) 50%,var(--faint) 62%,var(--faint) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:textshine 2s ease-in-out infinite}
}
@keyframes textshine{0%{background-position:130% 0}100%{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.status .stxt{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--muted)}}
.msg.assistant.live .body+.status{margin-top:10px}
.line{font-size:12.5px;color:var(--muted);margin-top:8px;font-family:var(--sans)}.line.warn{color:var(--warn)}
/* editing an answer in place: the rendered body itself is the editor */
.msg.assistant .body.editing{outline:2px solid var(--accent);outline-offset:8px;border-radius:2px;caret-color:var(--accent)}
.msg.assistant .body.editing sup.cite a{pointer-events:none}
.line.editing-hint{color:var(--accent)}
.line.edited{color:var(--accent)}
/* landing on a part of a long chat from History: the target turn flashes quietly */
[data-turn].mark-turn{animation:markturn 1.6s ease}
@keyframes markturn{0%,55%{background:var(--accent-soft)}100%{background:transparent}}
.msg.assistant.error .body{color:var(--muted);font-family:var(--sans);font-size:14px}
/* the user's own file arriving in the conversation; a chart the analyst drew; a file handed over */
.msg.attach{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:0 0 18px;font-family:var(--sans)}.msg.attach .ico{display:inline-flex;color:var(--faint)}.msg.attach .lnk{font-size:12.5px}.msg.attach.removed{opacity:.7}
figure.chart{margin:14px 0 6px;padding:0}figure.chart img{display:block;max-width:100%;height:auto;border:1px solid var(--hair-2);border-radius:var(--r);background:var(--sheet)}
figure.chart figcaption{display:flex;gap:14px;align-items:baseline;font-size:12px;color:var(--muted);margin-top:6px;font-family:var(--sans)}figure.chart figcaption a{color:var(--muted);font-size:12px}figure.chart figcaption a:hover{color:var(--ink)}
/* native charts (U2): an SVG drawn in the browser from the chart's data; the palette is the page's own tokens,
   set as --c per series so lines, bars, slices, legend swatches and tooltip bullets all read the same color */
figure.chart .cv{position:relative;border:1px solid var(--hair-2);border-radius:var(--r);background:var(--sheet);padding:10px 12px 6px}
figure.chart .stage{position:relative;width:100%;min-height:120px;touch-action:pan-y}
figure.chart svg{display:block;width:100%;height:auto;font-family:var(--sans);overflow:visible}
figure.chart .s0{--c:var(--s0)}figure.chart .s1{--c:var(--s1)}figure.chart .s2{--c:var(--s2)}figure.chart .s3{--c:var(--s3)}figure.chart .s4{--c:var(--s4)}figure.chart .s5{--c:var(--s5)}figure.chart .s6{--c:var(--s6)}figure.chart .s7{--c:var(--s7)}
figure.chart .grid line{stroke:var(--hair-2);stroke-width:1}figure.chart .zero{stroke:var(--hair);stroke-width:1}
figure.chart .ax text{fill:var(--ink-2);font-size:11px;font-variant-numeric:tabular-nums}figure.chart .ax .lab{fill:var(--muted);font-size:11px}
figure.chart .ln{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}figure.chart .s2 .ln,figure.chart .s5 .ln{stroke-dasharray:5 3}
figure.chart .pt{fill:var(--c);stroke:var(--sheet);stroke-width:1}figure.chart .ar{fill:var(--c);opacity:.08}figure.chart .bar{fill:var(--c)}
figure.chart .vl{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
figure.chart .slice{fill:var(--c);stroke:var(--sheet);stroke-width:1}figure.chart .slice.hot{opacity:.8}figure.chart .pct{fill:var(--paper);font-size:10.5px}figure.chart .plab{fill:var(--ink-2);font-size:11px}
figure.chart .guide{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}figure.chart .ring{fill:none;stroke:var(--accent);stroke-width:2;pointer-events:none}
figure.chart .legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink-2);margin:0 0 6px}figure.chart .legend span{display:inline-flex;align-items:center;gap:6px}figure.chart .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c)}
figure.chart .tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:6px 9px;font-size:12px;line-height:1.45;box-shadow:var(--shadow);white-space:nowrap;font-variant-numeric:tabular-nums}
figure.chart .tip .k{font-weight:600}figure.chart .tip .v i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:6px}
figure.chart .nochart{font-size:12.5px;color:var(--muted);padding:8px 0}
/* answer tables: a header sorts on click (asc, desc, back to the answer's order); "Chart this" sits quietly under
   any table with numbers and draws it right there, in the browser. Both live outside the editable markdown. */
.body th.sortable{cursor:pointer;user-select:none}.body th.sortable:hover{color:var(--ink)}.body th[data-sort]{color:var(--ink)}
.body th[data-sort]::after{content:"\25B4";margin-left:4px;font-size:10px}.body th[data-sort=desc]::after{content:"\25BE"}
.body table caption.tcap{display:block;caption-side:bottom;text-align:right;padding:3px 0 0;opacity:0;transition:opacity .15s}
/* "Chart this" is a real tab stop, so it must be visible the moment it takes focus — not only on hover */
.body table:hover caption.tcap,.body table:focus-within caption.tcap,.body caption.tcap:focus-within,.body table caption.tcap.on{opacity:1}
.body caption.tcap .chart-this:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:none){.body table caption.tcap{opacity:1}}
.body caption.tcap .chart-this{font-size:12px}.body caption.tcap .fig{text-align:left}.body caption.tcap figure.chart{margin:8px 0 4px}
.body.editing caption.tcap{display:none}
/* B3: a folder being parsed ("Parsing 12 of 40 files…") and a checked request list's status pills */
.attach-jobs{display:flex;flex-direction:column;gap:3px;margin:0}
.strip .attach-jobs{align-items:center;padding:0 24px 8px}
.strip.with-files .attach-jobs{padding-top:0}
.attach-jobs .job{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.attach-jobs .job.error{color:var(--warn)}
.attach-jobs .spin{width:11px;height:11px;border:1.5px solid var(--hair);border-top-color:var(--muted);border-radius:50%;display:inline-block;animation:att-spin .8s linear infinite}
@keyframes att-spin{to{transform:rotate(360deg)}}
.body table .pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;letter-spacing:.02em;border:1px solid var(--hair);white-space:nowrap}
.body table .pill.found{background:#e8efe6;border-color:#c6d7c1;color:#2f5c33}
.body table .pill.partial{background:#f6efdd;border-color:#e0d0a8;color:#6b5410}
.body table .pill.missing{background:var(--warn-bg);border-color:#e0c4bf;color:var(--warn)}
.body table .pill.unchecked{background:var(--hair-2);border-color:var(--hair);color:var(--muted)}

@media print{figure.chart .tip,caption.tcap button{display:none!important}.body table caption.tcap{opacity:1}figure.chart .cv{border:0;padding:0}}
a.filecard{display:inline-flex;align-items:center;gap:10px;margin-top:12px;border:1px solid var(--hair);background:var(--sheet);border-radius:var(--r);padding:9px 14px 9px 12px;text-decoration:none;color:var(--ink);font:500 13.5px var(--sans)}a.filecard:hover{border-color:var(--ink)}a.filecard .ico{display:inline-flex;color:var(--muted)}a.filecard .muted{font-weight:400;font-size:12px}
.tools a.export{color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.01em}.tools a.export:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.msg.assistant.brief{border-left:2px solid #cdb36b;padding-left:14px}.brief-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8a6d1d;margin-bottom:6px;font-family:var(--sans)}.msg.assistant.brief details.sources a{color:var(--muted)}
details.sources{margin-top:9px;font-size:12.5px;color:var(--muted);font-family:var(--sans)}details.sources summary{cursor:pointer;list-style:none;display:inline-block;user-select:none}details.sources summary::-webkit-details-marker{display:none}details.sources summary:hover{color:var(--ink)}
details.sources[open] summary{color:var(--ink)}details.sources ol{margin:6px 0 0 18px;padding:0}details.sources li{margin:3px 0}details.sources .src{border:0;background:none;color:var(--muted);text-align:left;padding:0;font-size:12.5px}details.sources .src:hover{color:var(--ink);text-decoration:underline}
details.sources .marks{margin-right:6px;display:inline-flex;gap:3px;vertical-align:middle;margin-top:-2px}
details.sources .mark{border:0;display:inline-block;min-width:1.55em;padding:.14em .42em;border-radius:.7em;background:var(--accent-soft);color:var(--accent-ink);font-weight:600;font-size:10.5px;text-align:center;line-height:1.25;font-family:var(--sans);font-variant-numeric:tabular-nums;transition:background .15s ease,color .15s ease}
details.sources .mark:hover{background:var(--accent);color:var(--paper);text-decoration:none}
.msg.assistant .tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12px;color:var(--muted);margin-top:9px;opacity:0;transition:opacity .15s;font-family:var(--sans)}.msg.assistant:hover .tools,.msg.assistant:focus-within .tools{opacity:1}
.tools button{border:0;background:none;color:var(--muted);padding:0;font-size:12px;letter-spacing:.01em}.tools button:hover{color:var(--ink)}.tools .t{margin-left:auto;font-variant-numeric:tabular-nums}
/* the two follow-ups under the latest answer: quiet pills — unlabeled, no icon, no caption, but a hairline and
   the UI face below body size so they read as BUTTONS at a glance and never as another line of the answer */
.followups{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.followups .fu{display:inline-flex;align-items:center;max-width:100%;border:1px solid var(--hair-2);background:none;border-radius:var(--r);padding:5px 11px;font:400 13px/1.35 var(--sans);color:var(--muted);text-align:left;white-space:normal;overflow-wrap:anywhere;transition:border-color .15s ease,background .15s ease,color .15s ease}
.followups .fu:hover{border-color:var(--hair);background:var(--sheet);color:var(--ink)}
@media (hover:none){.msg.assistant .tools{opacity:1}}
.steps{margin-top:8px;font-size:12.5px;color:var(--muted);border-left:1px solid var(--hair);padding:2px 0 2px 12px;font-family:var(--sans)}.steps div{margin:2px 0}.steps b{font-weight:500;color:var(--ink-2)}.steps pre{font:12px/1.5 var(--mono);white-space:pre-wrap;margin:6px 0 0;background:var(--sheet);border-radius:var(--r);padding:6px 8px}
/* the text bar: a sheet with an ink edge, a square send mark — not a pill; a paperclip for the user's own files */
.composer{padding:6px 24px 20px;background:linear-gradient(to bottom,rgba(246,243,236,0),var(--paper) 30%)}
.composer .note{max-width:680px;margin:0 auto 8px;font-size:12.5px;color:var(--muted)}
.composer .box{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);border-radius:14px;background:var(--sheet);padding:10px 12px;box-shadow:0 1px 3px rgba(31,27,22,.05);transition:border-color .15s ease,box-shadow .2s ease}
.composer .box:focus-within{border-color:var(--ink);box-shadow:0 3px 14px rgba(31,27,22,.08)}
.composer .row{display:flex;align-items:flex-end;gap:8px}
.composer .clip{width:30px;height:30px;border:0;background:none;border-radius:var(--r);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;align-self:center}
.composer .clip .ico, .composer .clip span{display:flex;align-items:center;justify-content:center;line-height:0}
.composer .clip:hover{color:var(--ink);background:var(--hair-2)}.composer .clip:disabled{opacity:.35;cursor:default}
.composer .attached{display:flex;flex-wrap:wrap;gap:6px;padding:2px 2px 4px;border-bottom:1px solid var(--hair-2)}
.chip.file{display:inline-flex;align-items:center;gap:0;padding:0;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);max-width:100%}
.chip.file .name{border:0;background:none;padding:3px 6px 3px 8px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;color:var(--ink);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.file .name:hover{text-decoration:underline;text-underline-offset:3px}.chip.file .ico{display:inline-flex;color:var(--muted)}
.chip.file .x{border:0;background:none;padding:2px 8px 3px 4px;color:var(--faint);font-size:15px;line-height:1}.chip.file .x:hover{color:var(--warn)}
.col.dropping .composer .box{border-color:var(--ink);border-style:dashed;background:var(--accent-soft)}
.col.dropping .thread{outline:2px dashed var(--hair);outline-offset:-8px}
.composer textarea{flex:1;border:0;outline:0;resize:none;background:transparent;max-height:220px;padding:6px 0;font:400 15.5px/1.5 var(--sans);min-height:35px}.composer textarea::placeholder{color:var(--faint);font-family:var(--serif)}.composer textarea:disabled{color:var(--muted)}
.composer .go{width:36px;height:36px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1;transition:background .15s ease,transform .06s ease}
.composer .go .ico{display:flex;align-items:center;justify-content:center;line-height:0}
.composer .go:hover{background:var(--muted);border-color:var(--muted)}.composer .go:active{transform:scale(.93)}.composer .go:disabled{background:var(--hair-2);border-color:var(--hair-2);color:var(--faint);cursor:default;transform:none}
.composer .go.stop{background:var(--sheet);border:1px solid var(--ink);color:var(--ink)}.composer .go.stop:hover{background:var(--hair-2)}.composer .go.stop .sq{width:11px;height:11px;background:var(--ink);border-radius:2px;display:block}
/* Deep dive, beside Send: a named control, never an icon nobody can read (plan P38). */
.composer .dive-go{height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--hair);background:var(--sheet);color:var(--ink);font:500 13px/1 var(--sans);flex:none;white-space:nowrap;transition:border-color .15s ease,background .15s ease}
.composer .dive-go:hover{border-color:var(--ink);background:var(--hair-2)}
.composer .dive-go:active{transform:scale(.97)}
.composer .dive-go:disabled{color:var(--faint);border-color:var(--hair-2);background:transparent;cursor:default;transform:none}
.composer .dive-ask{padding:2px 2px 8px;border-bottom:1px solid var(--hair-2);display:flex;flex-direction:column;gap:6px}
.composer .dive-ask .qt{font-size:13.5px;color:var(--ink)}
.composer .dive-ask .chips{display:flex;flex-wrap:wrap;gap:6px}
.composer .dive-ask .chips .chip{white-space:nowrap;flex:none;width:auto}
/* ---------- memories modal ---------- */
.modal.drawer .loaded{border:1px solid var(--hair);border-radius:var(--r);padding:2px 14px;margin-bottom:10px;background:var(--sheet)}.modal.drawer .loaded ul{margin:0 0 0 16px;padding:0}
.mrow{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair-2);font-size:13.5px}.mrow:last-child{border-bottom:0}.mrow .k{color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}.mrow .v{min-width:0;overflow-wrap:anywhere}
.modal.drawer input{width:100%;padding:8px 11px;border:1px solid var(--hair);border-radius:var(--r);margin:4px 0 10px;background:var(--sheet)}.modal.drawer input:focus{outline:none;border-color:var(--ink)}
.eps{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:8px}.ep{border:1px solid var(--hair);border-radius:var(--r);padding:10px 12px;background:var(--sheet)}.ep.on{border-color:var(--ink)}.ep .ep-t{font-size:14px}.ep .ep-t b{font-family:var(--serif);font-weight:600}.ep .ep-acts{display:flex;gap:14px;margin-top:6px}
.ep-msgs{max-height:56vh;overflow:auto;padding:4px 2px}.ep-msgs .msg{margin:0 0 16px}
.field.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.field.inline>span{margin:0;flex:1;min-width:200px}.field.inline input[type=checkbox]{width:auto}.field.inline .hint{flex-basis:100%}
/* ---------- document pane ---------- */
.pane{border-left:1px solid var(--hair);background:var(--sheet);display:flex;flex-direction:column;min-height:0;min-width:0}
.pane .ph{padding:14px 18px 10px;border-bottom:1px solid var(--hair);display:flex;align-items:flex-start;gap:14px}.pane .pt{min-width:0;flex:1}.pane .ph b{display:block;font:600 15px/1.3 var(--serif)}.pane .ph .m{font-size:12px;color:var(--muted);margin-top:3px}
.pane .ph .lnk{flex:none;margin-top:0;padding:8px 2px}
.pane .nav{padding:6px 18px;border-bottom:1px solid var(--hair-2);font-size:12px;color:var(--muted);display:flex;gap:12px;align-items:center}
.pane .body{flex:1;overflow:auto;padding:18px 22px 40px;font:400 14.5px/1.7 var(--serif);color:var(--ink-2)}
.doc h1{font-size:18px;margin:0 0 10px;font-weight:600}.doc h2{font-size:15px;margin:20px 0 6px;font-weight:600}.doc h3{font-size:14px;margin:16px 0 4px;font-weight:600}.doc p{margin:0 0 10px;white-space:pre-wrap}.doc pre{font:12.5px/1.5 var(--mono);background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:8px 10px;overflow:auto;white-space:pre;margin:0 0 10px}
.doc table{border-collapse:collapse;font:13px var(--sans);margin:0 0 14px;width:100%;display:block;overflow:auto;font-variant-numeric:tabular-nums}.doc td,.doc th{border-bottom:1px solid var(--hair-2);padding:5px 9px;white-space:normal;text-align:left;vertical-align:top}.doc th{border-bottom:1px solid var(--hair);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.doc mark{background:var(--mark);border-radius:2px;padding:1px 0;box-shadow:0 0 0 2px var(--mark)}
/* ---------- admin ---------- */
.admin{grid-column:1;overflow:auto;padding:26px 32px 40px;min-height:0}.ad-inner{max-width:1100px}
.ad-head{display:flex;align-items:baseline;gap:18px;margin-bottom:10px}.admin h1{margin:0;font:600 20px/1.2 var(--serif)}.admin h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 8px;font-weight:500;color:var(--muted)}
.admin p{max-width:760px}
.tabs{display:flex;gap:20px;margin-bottom:18px;border-bottom:1px solid var(--hair)}.tabs button{border:0;background:none;padding:8px 0;border-bottom:2px solid transparent;color:var(--muted);margin-bottom:-1px;font-size:13px}.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}.tabs button:hover{color:var(--ink)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar input,.toolbar select{padding:7px 10px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet)}.toolbar input:focus{outline:none;border-color:var(--ink)}.toolbar .grow{flex:1}
table.grid{border-collapse:collapse;width:100%;font-size:13px;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;font-variant-numeric:tabular-nums}table.grid th,table.grid td{border-bottom:1px solid var(--hair-2);padding:8px 10px;text-align:left;vertical-align:top}table.grid th{font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--paper)}table.grid tr:last-child td{border-bottom:0}table.grid tr.click{cursor:pointer}table.grid tr.click:hover td{background:var(--paper)}
table.grid td.acts{white-space:nowrap}table.grid td.acts .lnk{margin-right:12px}
/* Admin -> Connectors (C1): a disabled connector's row reads back, not gone */
table.grid.connectors tr.off td{opacity:.55}
/* Any wide admin table lives in its own scroller, so a narrow screen can reach the right-hand columns
   (the connectors table is six columns wide and its actions are the last two). The box scrolls; the page
   does not — nothing here may push the document wider than the viewport. */
.tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table.grid{min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:8px}.kpi{background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:12px 14px}.kpi b{display:block;font:600 20px/1.2 var(--serif);font-variant-numeric:tabular-nums}.kpi span{font-size:12px;color:var(--muted)}
.drop{border:1px dashed var(--hair);border-radius:var(--r);padding:22px;text-align:center;color:var(--muted);background:var(--sheet)}.drop.over{border-color:var(--ink);background:var(--accent-soft)}
.staging{border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px;background:var(--sheet);margin-top:12px}.staging .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
/* admin -> Templates (the house Word template per kind of document) */
.tpl-row{border:1px solid var(--hair);border-radius:var(--r);padding:12px 14px;background:var(--sheet);margin-bottom:10px}.tpl-head{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}.tpl-head>div:first-child{flex:1 1 auto;min-width:0}.tpl-head .grow{flex:0 0 0}.tpl-head .btn{flex:none;white-space:nowrap}.tpl-secs{margin:2px 0 0;padding-left:20px;font-size:13px}.tpl-secs li{margin:2px 0}
/* ---------- Views (B2): the firm's pattern, from SQL — KPI strip + panels in a responsive grid ---------- */
.views{grid-column:1;overflow:auto;padding:26px 32px 44px;min-height:0}
.v-inner{max-width:1320px;margin:0 auto}
.v-head{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;flex-wrap:wrap}
.views h1{margin:0;font:600 20px/1.2 var(--serif)}.v-head .sub{font-size:13px;font-family:var(--serif)}.v-head .grow{flex:1}
/* V2: the query line and the saved-view chips. One input, a quiet clear, what was understood underneath. */
.views .qline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.views .qbox{position:relative;flex:1 1 420px;min-width:0;max-width:560px;display:flex;align-items:center}
.views input.q{width:100%;min-width:0;font:400 14px/1.4 var(--sans,inherit);padding:9px 30px 9px 12px;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);color:var(--ink)}
.views input.q:focus{outline:none;border-color:var(--accent)}
.views .qbox .qx{position:absolute;right:6px;border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:4px 6px;border-radius:var(--r)}
.views .qbox .qx:hover{color:var(--ink)}
.views .qline .save{white-space:nowrap;color:var(--accent)}
.views .understood{flex:1 1 100%;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.views .vchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.views .vchip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--hair);border-radius:999px;
  background:var(--sheet);padding:0 4px 0 10px;max-width:100%}
.views .vchip.on{border-color:var(--accent)}
.views .vchip .name{border:0;background:none;color:var(--ink);cursor:pointer;font:inherit;font-size:12.5px;
  padding:5px 2px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.views .vchip.on .name{color:var(--accent-ink,var(--ink))}
.views .vchip .x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px;border-radius:999px}
.views .vchip .x:hover{color:var(--ink)}
/* the group title gets air above its cards rather than resting on them, and the two strips line up: auto-FILL
   keeps the same column width in both, so a four-card strip and a six-card strip share one set of columns */
.views .kpi-group{margin:0 0 22px}
.views .kpi-group+.kpi-group{margin-top:4px}
.views .kpi-group h2{margin:0 0 10px;font:600 15px/1.3 var(--serif)}
.views .kpi-group .note{margin:4px 0 10px;line-height:1.5;max-width:74ch}
.views .kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0}
.views .kpi{border:1px solid var(--hair);border-radius:var(--r2);background:var(--sheet);padding:11px 14px 10px;
  display:flex;flex-direction:column;align-items:flex-start}
.views .kpi .v{font:600 23px/1.15 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink)}
.views .kpi .k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* the n line and the link sit close under the value: a card whose n line is short left a band of nothing */
.views .kpi .n{margin:1px 0 0;min-height:0}
.views .kpi .n:empty{display:none}
.views .kpi .ask{margin-top:4px;padding:0;text-align:left}
.views-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.views .panel{border:1px solid var(--hair);border-radius:var(--r2);background:var(--sheet);padding:16px 18px 14px;min-width:0;container-type:inline-size}
.views .panel h2{margin:0;font:600 15px/1.3 var(--serif)}
.views .panel .note{margin:4px 0 10px;line-height:1.5}
.views .panel figure.chart{margin:0 0 12px}
/* the table lives inside the panel at every width: fixed layout + wrapping cells, so a long list of codenames
   or a long criterion title takes another line instead of pushing the page sideways. Any scroll that remains
   is the table container's own, never the view's. */
.views .vtable{max-height:320px;overflow:auto;border-radius:var(--r);max-width:100%;overscroll-behavior:contain}   /* wide tables scroll inside the panel */
.views table.grid{font-size:12.5px;table-layout:auto;width:100%;min-width:max-content}
.views table.grid th{position:sticky;top:0;z-index:1}
.views table.grid th,.views table.grid td{white-space:nowrap;vertical-align:middle}
.views table.grid td{padding:6px 9px}
.views table.grid td.num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.views table.grid th.num{width:6em;text-align:right;overflow-wrap:normal}
.views table.grid .clip{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.views table.grid td.acts,.views table.grid th.acts{text-align:right}
.views table.grid td.acts{white-space:nowrap}
.views table.grid td.acts .docs{margin-left:0;max-width:100%;min-width:0}
.views table.grid td.acts .docs .doc{max-width:100%;min-width:0;flex:0 1 auto}
.views table.grid td.acts .docs .lnk:not(.doc){flex:none;white-space:nowrap}
.views th.sortable{cursor:pointer;user-select:none}.views th.sortable:hover{color:var(--ink)}
.views .ask{color:var(--accent);white-space:nowrap}.views .ask:hover{color:var(--accent-ink)}
.views .docs{display:inline-flex;align-items:center;gap:8px;margin-left:10px;max-width:180px}
.views .docs .doc{display:inline-flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.views .docs .ico{display:inline-flex;color:var(--faint)}
.views .panel-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--hair-2)}
.views .panel.bare figure.chart{display:none}
.views .prov{margin:18px 2px 0;line-height:1.6}
.welcome .pattern{display:block;margin:14px auto 0;color:var(--muted)}
@media (min-width:1100px){.views-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.views .panel.wide{grid-column:1/-1}}
/* ---------- responsive + print ---------- */
@media (max-width:860px){
  .app.single,.app.single.with-pane,.app.single.with-history{grid-template-columns:minmax(0,1fr)}
  .history{position:fixed;top:var(--top-h);left:0;bottom:0;width:min(310px,84vw);z-index:36;box-shadow:var(--shadow);border-right:1px solid var(--hair)}
  .hist-scrim{display:block;position:fixed;top:var(--top-h);left:0;right:0;bottom:0;z-index:35;background:rgba(31,27,22,.18)}
  /* every control stays on the bar at phone width and nothing scrolls out of sight: the BAR wraps onto two
     rows — the nav on the first, the split / tutorial / account buttons on the second */
  :root{--top-h:84px}
  .topbar{padding:5px 8px;gap:6px;flex-wrap:wrap;align-content:center;overflow:visible}
  .topbar > *{flex:none}.topbar .grow{flex:1 0 100%;height:0;margin:0}
  .topbar .who{max-width:130px}.topbar .brand small{display:none}.topbar .brand .prod{font-size:15px}
  .topbar .nav-btn,.topbar .hist-btn{padding:0 7px;font-size:11.5px;height:26px}.topbar .split-btn{font-size:0;gap:0;padding:5px 7px}
  .topbar .split-btn,.topbar .who.icon-btn,.topbar .help-btn.icon-btn{height:26px;min-width:34px;padding:0 7px}
  .topbar .pane-tabs.multi{display:flex}
  .app.split .cols{grid-template-columns:minmax(0,1fr)}
  .app.split .cols .col{display:none;border-left:0}.app.split .cols .col.mob-on{display:flex}
  .pane{position:fixed;inset:var(--top-h) 0 0 0;z-index:35}
  .strip{padding:8px 44px}
  .thread-inner{padding:22px 16px 12px}.composer{padding:6px 10px 12px}.admin{padding:18px 16px}
  .views{padding:18px 14px 30px}.views .kpis{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.views .panel{padding:14px 12px 12px}.views .docs{max-width:120px}.views .docs .doc{max-width:96px}
  .admin table.grid{display:block;overflow-x:auto;white-space:nowrap}
  /* inside a .tablewrap the BOX scrolls, so the table itself goes back to being a table and the two
     action columns stack their buttons instead of running off the side of a phone */
  .admin .tablewrap table.grid{display:table;overflow:visible;white-space:normal;min-width:520px}
  .admin .tablewrap table.grid td.acts{white-space:normal}
  .admin .tablewrap table.grid td.acts .lnk{display:block;margin:0 0 6px;text-align:left}
  .topbar .brand .names{display:none}          /* the mark alone: the phone needs the room for the nav */
  .hist-drag{display:none}                              /* the drawer has a fixed width on mobile; resizing is a desktop affordance */
  .chapter-rail{display:none}                           /* no gutter to live in */
}
@media print{
  .topbar,.strip,.composer,.pane,.tools,#toasts,.status,.caret,.rail-wrap,.cols .col + .col,.chapter-rail,.followups{display:none!important}
  .app.single,.app.single.with-pane,.cols{display:block}
  .col{display:block}
  .thread-row{display:block}
  .thread{overflow:visible}
  .thread-inner{max-width:none;padding:0}
  .msg{margin:0 0 22px;break-inside:avoid}
  .msg.user{border-top:0}
  details.sources{break-inside:avoid}
  details.sources summary{cursor:default}
  .body table,.doc table{break-inside:avoid}
  .body tr,.doc tr{break-inside:avoid}
  .body h1,.body h2,.body h3,.body h4{break-after:avoid}
  body{background:#fff}
}
@page{margin:1.6cm}

/* ---- sourcing v1 (C2): the outreach hand-off card and the Sourcing view ---- */
.filecard.outreach{display:block;margin-top:12px;border:1px solid var(--hair);background:var(--sheet);border-radius:var(--r);padding:11px 14px;font:14px/1.5 var(--sans);max-width:640px}
.filecard.outreach .oc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.filecard.outreach .oc-head .ico{color:var(--muted);align-self:center}
.filecard.outreach .oc-head .subj{font-weight:600}
.filecard.outreach .oc-head .muted{color:var(--muted);font-size:12.5px}
.filecard.outreach .oc-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.filecard.outreach .btn-sm{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:var(--r);padding:5px 11px;font:500 12.5px var(--sans);text-decoration:none;color:var(--ink);background:var(--paper)}
.filecard.outreach .btn-sm:hover{border-color:var(--ink)}
.filecard.outreach .oc-note{color:var(--faint);font-size:12px}
.filecard.outreach .oc-note.dropped{display:block;margin-top:7px;color:var(--muted)}
/* ---- Wave D S2U: the sourcing workspace (its own screen, its own scroll, a draft panel on the right) ---- */
.sourcing-ws{grid-column:1;display:flex;min-height:0;min-width:0;overflow:hidden}
.so-scroll{flex:1 1 auto;min-width:0;overflow:auto;padding:26px 32px 44px}
.so-inner{max-width:1320px;min-width:0}
.so-top{display:flex;align-items:baseline;gap:14px;margin:0 0 14px}
.sourcing-ws h1{margin:0;font:600 20px/1.2 var(--serif)}
.sourcing-ws h2{margin:0 0 10px;font:600 15px/1.3 var(--serif)}
.sourcing-ws .grow{flex:1}
.so-qrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 20px;margin:0 0 14px}
.so-query{position:relative;flex:1 1 320px;max-width:520px;display:flex;align-items:center;margin-top:2px}
.so-query input{width:100%;padding:9px 30px 9px 11px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet)}
.so-query input:focus{border-color:var(--ink);outline:none}
.so-qx{position:absolute;right:6px;border:0;background:none;color:var(--muted);font-size:17px;line-height:1;padding:2px 5px}
.so-qx:hover{color:var(--ink)}
.so-modebox{flex:none;min-width:0}
.so-modecap{display:flex;align-items:center;gap:8px}
.so-modecap .lbl{white-space:nowrap}
.so-modesel{border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);padding:7px 9px;font-size:13px;max-width:220px}
.so-modesel:focus{border-color:var(--ink);outline:none}
.so-modesays{margin:4px 0 0;max-width:48ch}
.so-understood{flex-basis:100%;margin:-2px 0 0}
.so-window{margin:0 0 2px}
.so-sources{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.so-refresh{color:var(--accent);white-space:nowrap}
.so-refresh:hover{color:var(--accent-ink)}
.so-demo{margin-top:10px}
/* the funnel: the centrepiece. left aligned bars of decreasing width, the n at the end of each bar and the
   conversion into the next stage under it. */
.so-funnel{margin:0 0 20px;max-width:940px}
.so-fsvg{display:block;width:100%;height:auto}
.so-flab{fill:var(--ink);font:600 13px var(--sans)}
.so-fn{fill:var(--ink);font:600 13px var(--sans);font-variant-numeric:tabular-nums}
.so-fpct{fill:var(--muted);font:11.5px var(--sans)}
.so-fbar{fill:var(--accent)}
.so-stage.s1 .so-fbar{fill-opacity:.86}.so-stage.s2 .so-fbar{fill-opacity:.72}.so-stage.s3 .so-fbar{fill-opacity:.58}.so-stage.s4 .so-fbar{fill-opacity:.44}
.so-stage:hover .so-fbar{fill:var(--ink);fill-opacity:1}
.so-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 18px}
.so-kpi{border:1px solid var(--hair);border-radius:var(--r2);background:var(--sheet);padding:12px 14px 10px}
.so-kpi .v{font:600 23px/1.15 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink)}
.so-kpi .k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.so-kpi .n{margin-top:2px}
.so-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 18px}
@media (min-width:1100px){.so-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.so-panel{border:1px solid var(--hair);border-radius:var(--r2);background:var(--sheet);padding:16px 18px 14px;min-width:0}
.so-panel figure.chart{margin:0}
.so-tablewrap{max-width:100%;overflow:auto;overscroll-behavior:contain}
.so-tablewrap.wide{overflow-x:auto}
table.so-lead{border-collapse:collapse;width:100%;font-size:13px}
table.so-lead th{text-align:left;font-weight:600;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--hair);padding:6px 10px 6px 0;white-space:nowrap;position:sticky;top:0;background:var(--sheet)}
table.so-lead td{border-bottom:1px solid var(--hair-2);padding:7px 10px 7px 0;white-space:nowrap}
table.so-lead td.num,table.so-lead th.num{text-align:right;font-variant-numeric:tabular-nums}
.so-listhead{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.so-listhead h2{margin:0}
.so-file{display:none}
.so-none{color:var(--muted);padding:8px 0 4px}
.sourcing-ws .empty{text-align:left;padding:14px 0;font-family:var(--sans);font-size:13.5px}
table.sourcing-table{border-collapse:collapse;width:100%;font-size:13px;min-width:940px}
table.sourcing-table th{text-align:left;font-weight:600;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--hair);padding:7px 12px 7px 0;white-space:nowrap}
table.sourcing-table td{border-bottom:1px solid var(--hair-2);padding:8px 12px 8px 0;vertical-align:top}
table.sourcing-table td.num{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
table.sourcing-table th.num{text-align:right}
table.sourcing-table .who{font-weight:600}
table.sourcing-table .small{font-size:11.5px}
.sourcing-ws th.sortable{cursor:pointer;user-select:none}.sourcing-ws th.sortable:hover{color:var(--ink)}
.so-sel{border:1px solid transparent;border-radius:var(--r);background:none;padding:3px 4px;font-size:12.5px;max-width:150px}
.so-sel:hover{border-color:var(--hair);background:var(--paper)}
.so-sel:focus{border-color:var(--ink);outline:none}
.so-note{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;display:block}
.so-note.blank{color:var(--faint)}
.so-note-in{width:190px;padding:3px 6px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);font-size:12.5px}
table.sourcing-table td.acts{text-align:left;white-space:nowrap}
.so-acts{display:flex;gap:10px;flex-wrap:wrap}
.so-rowmenu{display:none}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600;border:1px solid var(--hair);white-space:nowrap}
.pill.f-yes{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.pill.f-maybe{color:var(--muted)}
.pill.f-no{color:var(--faint)}
/* the draft panel: inside the workspace, never a trip back to the chat */
.so-draftpanel{width:400px;flex:none;border-left:1px solid var(--hair);background:var(--sheet);overflow:auto;padding:18px 20px 26px;min-width:0}
.so-dhead{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.so-dhead h2{margin:0}
.so-draftpanel .field{margin-bottom:12px}
.so-subj{width:100%;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper)}
.so-bodyin{width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);line-height:1.55;resize:vertical}
.so-subj:focus,.so-bodyin:focus{border-color:var(--ink);outline:none}
.so-checkcap{margin:2px 0 6px}
.so-checks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.so-check{border:1px solid var(--hair);border-radius:999px;padding:2px 9px;font-size:11.5px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-check.kept{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.so-check.out{color:var(--muted);border-style:dashed}
.so-dacts{display:flex;gap:10px;margin-top:12px}
@media (max-width:860px){
  .so-scroll{padding:18px 14px 32px}
  .so-kpis{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
  .so-panel{padding:14px 12px 12px}
  .so-query{max-width:none}
  .so-modesel{max-width:none;width:100%}
  .so-modebox{flex:1 1 100%}
  .so-acts{display:none}
  .so-rowmenu{display:inline-block}
  .so-draftpanel{position:fixed;inset:var(--top-h) 0 0 0;width:auto;z-index:36;border-left:0}
  .filecard.outreach{max-width:none}
}
.tpl-how{margin:0 0 14px}.tpl-how summary{cursor:pointer;color:var(--muted)}.tpl-how p{max-width:74ch;line-height:1.55}
.topbar .more-btn{font-family:inherit}

/* ---- Public-data layer (PDL spec B14): the session opener, mode offers, marks, dive progress ----
   Same paper and ink: no new colour, no new radius, no new face. Every rule below is reached only
   when the server reports public-data mode, so Sediment 1 renders byte-identically without them. */
.nav-btn.nav-export{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.welcome .examples .op-changed{align-self:stretch;margin:2px 0 14px;max-width:64ch}
.welcome .op-head{font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.welcome .op-line{font:15px/1.6 var(--serif);color:var(--ink-2);padding:2px 0}
.welcome .op-line.muted{color:var(--muted)}
.chips.offer{margin:10px 0 2px}
.chips.offer .chip{padding:5px 12px;font:500 13px var(--sans);background:var(--sheet)}
.chips.offer .chip.go{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.chips.offer .chip.go:hover{border-color:var(--accent-ink)}
.marks-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.marks-row .mk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);background:var(--sheet);border-radius:var(--r);padding:5px 8px 5px 11px}
.marks-row .mk .who{font:600 12.5px var(--sans);color:var(--ink-2);margin-right:2px;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marks-row .btn-sm{border:1px solid var(--hair);border-radius:var(--r);padding:3px 9px;font:500 12px var(--sans);color:var(--muted);background:var(--paper)}
.marks-row .btn-sm:hover{border-color:var(--ink);color:var(--ink)}
.marks-row .btn-sm.done{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.filecard.dive{display:block;margin-top:12px;border:1px solid var(--hair);background:var(--sheet);border-radius:var(--r);padding:11px 14px;font:14px/1.5 var(--sans);max-width:640px}
.filecard.dive .oc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.filecard.dive .oc-head .subj{font-weight:600}
.filecard.dive .oc-head .muted{color:var(--muted);font-size:12.5px}
.filecard.dive .oc-note{color:var(--muted);font-size:12.5px;margin-top:6px}
.filecard.dive .oc-note.muted{color:var(--faint);font-size:12px}
.filecard.dive .oc-acts{display:flex;gap:10px;margin-top:9px}
.filecard.dive .btn-sm{border:1px solid var(--hair);border-radius:var(--r);padding:5px 11px;font:500 12.5px var(--sans);color:var(--ink);background:var(--paper)}
.filecard.dive .btn-sm:hover{border-color:var(--ink)}
.filecard.dive .btn-sm[disabled]{color:var(--faint);border-color:var(--hair);cursor:default}
.filecard.dive .dive-clock{font-variant-numeric:tabular-nums;margin-left:auto}
.line.dive-opening{font-size:14.5px;color:var(--ink);margin-top:2px;line-height:1.5}
.dive-bar{height:4px;margin-top:10px;border-radius:2px;background:var(--hair-2);overflow:hidden}
.dive-bar i{display:block;height:100%;background:var(--accent);transition:width .3s ease}

/* ---- Public-data layer: Admin -> Review queue (PDL spec B4 "review queue 0.5-0.9", B6, B8) ----
   The same paper and ink as the Connectors panel it is modelled on: existing tokens only, no new
   colour, radius or face. Reached only from the tab that only public-data mode draws. */
.pdrev > p.muted{max-width:74ch;line-height:1.55}
.rv-item{border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);padding:12px 14px;margin:0 0 12px}
.rv-q{font:600 14px var(--sans);color:var(--ink);margin-bottom:9px}
.rv-q .muted{font-weight:400;margin-left:6px}
.rv-pair{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.rv-card{flex:1 1 260px;min-width:0;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);padding:9px 11px}
.rv-vs{align-self:center;color:var(--faint);font:italic 13px var(--serif)}
.rv-name{font:600 14px var(--sans);color:var(--ink);overflow-wrap:anywhere}
.rv-name a{color:var(--ink);text-decoration:underline}
.rv-card .muted.small{margin-top:2px}
.rv-snip{margin-top:5px;font:13px/1.5 var(--serif);color:var(--ink-2);max-height:6.5em;overflow:hidden}
.rv-ev{margin-top:6px;font:12px var(--sans);color:var(--faint);overflow-wrap:anywhere}
.rv-acts{display:flex;gap:10px;margin-top:11px;flex-wrap:wrap}
.rv-acts .btn-sm{border:1px solid var(--hair);border-radius:var(--r);padding:5px 11px;font:500 12.5px var(--sans);color:var(--ink);background:var(--paper)}
.rv-acts .btn-sm:hover{border-color:var(--ink)}
.rv-acts .btn-sm.go{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
@media (max-width:700px){.rv-vs{display:none}.rv-card{flex:1 1 100%}}

/* ---- Public-data layer (PDL spec B14/B15): whose app this is, on a phone ----
   The brand block drops the firm line at tablet width (:538) and the names altogether at phone
   width (:553) — the nav needs the room. In public-data mode one person can hold two of these
   apps, and two universes that are still empty look exactly alike (W4 live smoke §5 item 4), so
   the short form of the firm's name rides beside the mark wherever the full one is hidden.
   Existing tokens only; Sediment 1 never renders the element (app.js only builds it in pdMode). */
.topbar .brand .firm-short{display:none;font:600 12px/1.15 var(--sans);color:var(--muted);letter-spacing:.01em;
  max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
@media (max-width:860px){.topbar .brand .firm-short{display:inline-block}}
/* round 12: on a phone the firm's logo names the firm by itself; the short name would push the nav onto a third row */
@media (max-width:480px){.topbar .brand.has-logo .firm-short{display:none}}

/* ---- Public-data layer, P31: the firm's own list, the result cards, the second onboarding step.
   Existing tokens only; Sediment 1 renders none of these (app.js builds them only in pdMode). */

/* the calm line before any data exists, under the greeting */
.welcome .examples .op-first{align-self:stretch;margin:2px 0 14px;max-width:64ch;font:15px/1.6 var(--serif);color:var(--muted)}

/* a result card: rows, beside an answer, never inside one */
.res-card{margin:10px 0 2px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);padding:12px 14px;max-width:680px}
.rc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rc-name{font:600 14.5px var(--sans);color:var(--ink)}
.rc-facts{color:var(--muted);font-size:13px}
.rc-acts{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
.rc-item{padding:7px 0;border-top:1px solid var(--hair-2);font:14px/1.55 var(--serif);color:var(--ink-2)}
.rc-item:first-of-type{border-top:0}
.rc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.rc-table td{padding:5px 8px 5px 0;border-top:1px solid var(--hair-2);vertical-align:top}
.rc-fit{display:inline-block;padding:1px 8px;border-radius:999px;font:600 11.5px var(--sans);letter-spacing:.02em;white-space:nowrap;
  border:1px solid var(--hair);color:var(--muted);background:var(--paper)}
.rc-fit.strong{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.rc-fit.possible{border-color:var(--hair);color:var(--ink-2);background:var(--paper)}
.rc-fit.no,.rc-fit.lower,.rc-fit.unrated{border-color:var(--hair-2);color:var(--faint);background:transparent}

/* the list page: a table, and a panel that opens beside it */
.list-page.with-panel .v-inner{max-width:none}
.list-page{display:flex;gap:24px;align-items:flex-start}
.list-page > .v-inner{flex:1 1 auto;min-width:0}
.list-bar select{padding:7px 10px;border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet)}
.list-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
.list-table th{text-align:left;font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  padding:0 10px 7px 0;border-bottom:1px solid var(--hair);white-space:nowrap}
.list-table th.sortable{cursor:pointer}
.list-table th.sortable:hover{color:var(--ink)}
.list-table th.sortable.on{color:var(--ink)}
.list-table th.sortable.on.desc::after{content:" \2193"}
.list-table th.sortable.on.asc::after{content:" \2191"}
.list-table td{padding:8px 10px 8px 0;border-bottom:1px solid var(--hair-2);vertical-align:top}
.list-table tbody tr{cursor:pointer}
.list-table tbody tr:hover td{background:var(--sheet)}
.list-table tbody tr.on td{background:var(--accent-soft)}
.list-table td.nm{font-weight:600;color:var(--ink)}
/* the two tabs of the firm's own list (P34): its own book, and who to call */
.list-tabs{display:flex;gap:4px;margin:2px 0 10px;border-bottom:1px solid var(--hair)}
.list-tabs .tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font:600 13px var(--sans);color:var(--muted);padding:7px 12px;cursor:pointer;margin-bottom:-1px}
.list-tabs .tab:hover{color:var(--ink)}
.list-tabs .tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.tag{display:inline-block;font:600 10.5px var(--sans);letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:1px 8px;margin-left:8px;
  white-space:nowrap;vertical-align:middle}
.tag.worked{color:var(--ink-2);border-color:var(--ink-2)}
.tag.changed{color:var(--ink);border-color:var(--ink);background:var(--accent-soft)}
.book{margin-top:6px}
.book-row{padding:12px 0;border-bottom:1px solid var(--hair-2)}
.book-row.lit{background:var(--accent-soft);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:var(--r)}
.book-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.book-head .nm{font-weight:600;color:var(--ink);font-size:14px}
.book-head .grow{flex:1}
.book-known{font:14px/1.6 var(--serif);color:var(--ink-2);margin-top:5px;max-width:74ch}
/* the home screen's two strips: the firm's own companies, and its own words back to it */
/* round 11: in public-data mode the portfolio strip runs across the top, nearly the window's width
   (fitBook sets the width from the column's scroll box), in exactly two lines until it is opened;
   the greeting and the suggestions stay in the reading column below it. `.examples` is display:
   contents so the strip can sit above the greeting and still live in the block renderThread morphs. */
.welcome.op{padding-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.welcome.op .examples{display:contents}
.welcome.op .hello{margin-top:8vh}
.welcome .examples .op-book{order:-1;align-self:center;width:calc(100vw - 64px);max-width:1400px;margin:0}
.welcome .examples .op-told{align-self:stretch;margin:2px 0 14px;max-width:64ch}
.welcome .op-names{display:flex;flex-wrap:wrap;gap:6px}
.welcome .chipname{appearance:none;font:13px/1.35 var(--sans);color:var(--ink-2);background:var(--sheet);
  border:1px solid var(--hair);border-radius:999px;padding:3px 11px;cursor:pointer;text-align:left;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.welcome .chipname:hover{color:var(--ink);border-color:var(--ink-2)}
.welcome .chipname.lit{color:#fff;border-color:var(--accent);background:var(--accent);font-weight:600}
.welcome .chipname.lit:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.welcome .chipname.ww{background:transparent}
.welcome .chipname.more{background:none;border-color:transparent;color:var(--accent);font-weight:600}
.welcome .chipname.more:hover{border-color:var(--accent)}
.welcome .op-sep{flex-basis:100%;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:6px 0 1px}
.welcome .chipname.off,.welcome .op-sep.off,.welcome .chipname[hidden]{display:none}
@media (max-width:640px){.welcome.op .hello{margin-top:5vh}}
.welcome .op-toldrow{font:14px/1.6 var(--serif);color:var(--ink-2);padding:3px 0}
.welcome .op-toldrow .nm{font-weight:600;color:var(--ink);font-family:var(--sans);font-size:13px}
.list-pager{display:flex;align-items:center;gap:14px;margin-top:14px}
.list-pager .grow{flex:1}
.co-panel{flex:0 0 380px;position:sticky;top:26px;max-height:calc(100vh - 90px);overflow:auto;
  border:1px solid var(--hair);border-radius:var(--r2);background:var(--sheet);padding:16px 18px 22px}
.co-top{display:flex;align-items:baseline;gap:12px}
.co-top h2{font:600 17px var(--sans);margin:0 0 4px;flex:1;min-width:0;overflow-wrap:anywhere}
.co-facts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;margin:6px 0 12px}
.co-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.co-sec{margin-top:16px}
.co-sec h3{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:0 0 7px}
.co-sec ul{margin:0 0 10px;padding-left:18px;font:14px/1.6 var(--serif);color:var(--ink-2)}
.co-dl{margin:0;font-size:13.5px}
.co-dl dt{font-weight:600;color:var(--ink);margin-top:8px}
.co-dl dd{margin:2px 0 0;color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width:1100px){.list-page{display:block}.co-panel{position:static;max-height:none;margin-top:20px;width:100%}}

/* the one tick box on the second onboarding step */
.modal .check{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:13.5px}
.modal .check input{width:16px;height:16px;flex:none}

/* Asa, 2026-09-22: "'Send me the morning Brief' should be not blue but black." The tick box was
   the browser's own, which paints itself in the platform blue; the page has no blue in it. */
.modal .check input,.co-panel .check input{accent-color:var(--ink)}
.modal .check span,.co-panel .check span{color:var(--ink)}

/* the company panel: their own address, and the firm's notes on them */
.co-site .field{margin:8px 0 6px}
.co-site input{width:100%;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper)}
.co-site input:focus{outline:none;border-color:var(--ink)}
.co-look:empty{display:none}
.co-look{margin:10px 0 4px}
.co-note{border-left:2px solid var(--hair);padding:2px 0 2px 10px;margin:0 0 10px;
  font:14px/1.55 var(--serif);color:var(--ink-2)}
.co-note.pass{border-left-color:var(--accent)}
.co-note .co-verdict{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent-ink);font:600 11px var(--sans);
  letter-spacing:.03em;text-transform:uppercase}
.co-addnote{margin-top:10px}
.co-addnote textarea{width:100%;min-height:58px;padding:8px 10px;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--paper);resize:vertical;font:inherit}
.co-addnote textarea:focus{outline:none;border-color:var(--ink)}
.co-panel .check{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:13px}
.co-panel .check input{width:15px;height:15px;flex:none}
.co-panel .btn[disabled],.list-bar button[disabled]{opacity:.45;cursor:default}

/* ---- Public-data layer, P37: the firm's own workflow on top of its list -----------------------
   Five tabs with their counts, a company moved between four buckets, any field typed over in
   place with a byline under it, and a company typed in from scratch. Existing tokens only. */
/* five tabs (P37) do not fit across a phone, so the strip scrolls sideways rather than
   wrapping each label onto two lines ("Talking / with"). */
.list-tabs{overflow-x:auto;scrollbar-width:none}
.list-tabs::-webkit-scrollbar{display:none}
.list-tabs .tab{white-space:nowrap}
.list-tabs .tab .n{color:var(--faint);font-weight:500}
@media (max-width:700px){.list-tabs .tab{padding:7px 9px;font-size:12.5px}}
.list-tabs .tab.on .n{color:var(--muted)}
.tag.stage{color:var(--ink);border-color:var(--ink-2);margin-left:0;text-transform:none;
  font:600 12px var(--sans);letter-spacing:0}
.co-stage{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 10px;
  padding:9px 11px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper)}
.co-stage .lnk.move{font:500 12.5px var(--sans);color:var(--ink-2);border-bottom:1px dotted var(--hair)}
.co-stage .lnk.move:hover{color:var(--ink);border-bottom-color:var(--ink)}
.co-dl dd .val.dim{color:var(--faint)}
.co-dl dd .lnk.edit{margin-left:8px;font:500 12px var(--sans);color:var(--faint)}
.co-dl dd:hover .lnk.edit{color:var(--ink-2)}
.co-dl dd .lnk.edit:hover{color:var(--ink)}
.co-dl dd .byline{margin-top:1px;font-style:italic}
.co-dl dd.editing input{width:100%;padding:6px 9px;border:1px solid var(--ink);border-radius:var(--r);
  background:var(--paper);font:inherit}
.co-dl dd.editing input:focus{outline:none}
.co-dl dd.editing .co-acts{margin-top:6px}
.co-histrow{font:13.5px/1.55 var(--serif);color:var(--ink-2);padding:3px 0;border-bottom:1px solid var(--hair-2)}
.co-histrow:last-child{border-bottom:0}
.addco{border:1px solid var(--hair);border-radius:var(--r);background:var(--sheet);padding:12px 14px;margin:0 0 14px}
.addco-row{display:flex;gap:12px;flex-wrap:wrap}
.addco-row .field{flex:1 1 220px;display:flex;flex-direction:column;gap:3px;margin:0 0 9px}
.addco-row.wide .field{flex:1 1 100%}
.addco input{width:100%;padding:7px 10px;border:1px solid var(--hair);border-radius:var(--r);
  background:var(--paper);font:inherit}
.addco input:focus{outline:none;border-color:var(--ink)}
/* Round 11: the Companies page. One type scale (13.5px body, 11px labels, 12px sources). */
.list-table .size .est,.co-dl .est{color:var(--faint);font-size:12px;font-weight:500}
.list-table .size{cursor:help;border-bottom:1px dotted var(--hair)}
.book-table td.latest{color:var(--ink-2)}
.book-table td.latest .muted{white-space:nowrap}
.book-table tr.dead{cursor:default}
.book-table tr.book-sep td{padding:22px 14px 8px;font:600 11.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--hair);cursor:default;background:transparent}
.book-table tr.book-sep:hover td{background:transparent}
.book-table tr.book-sep .n{margin-left:8px;color:var(--muted);font-weight:500}
.book-table tbody tr.gone td.nm{color:var(--ink-2)}
.book-table td.nm .lit{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);
  margin:0 7px 1px -14px;vertical-align:middle}
.book-table td.nm{padding-left:14px}
.book-table th:first-child{padding-left:14px}
.co-sub{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13.5px;margin:2px 0 12px;color:var(--muted)}
.co-sub .co-where{color:var(--ink-2)}
.co-facts-dl{display:grid;grid-template-columns:96px 1fr;column-gap:12px;row-gap:10px}
.co-facts-dl dt{margin:0;font:600 11px/1.9 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.co-facts-dl dd{margin:0}
.co-dl dd .val{color:var(--ink)}
.co-dl dd a.val{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:2px}
.co-dl dd .val.prose{font:14px/1.55 var(--serif);color:var(--ink-2)}
.co-src{font-size:12px;color:var(--faint);margin-top:1px}
.co-src a{color:var(--faint);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:2px}
.co-src a:hover{color:var(--ink-2)}
.co-dl dd.editing input,.co-dl dd.editing textarea{width:100%;padding:7px 9px;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--paper);font:inherit;margin-bottom:8px}
.co-dl dd.editing input:focus,.co-dl dd.editing textarea:focus{outline:none;border-color:var(--ink)}
.co-facts-dl dd.editing{grid-column:1 / -1}
.co-news{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.co-news .co-src a{margin-left:6px}
.co-addon{display:grid;grid-template-columns:1fr auto;gap:1px 10px;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--hair-2);padding:8px 0;cursor:pointer;font:13.5px var(--sans);color:var(--ink)}
.co-addon:hover .nm{text-decoration:underline}
.co-addon .nm{font-weight:600}
.co-addon .muted{font-size:12px;text-align:right}
.co-addon .why{grid-column:1 / -1;font-size:12.5px;color:var(--ink-2)}
@media (max-width:700px){
  .book-table .c-sector,.book-table .c-latest{display:none}
  .co-facts-dl{grid-template-columns:84px 1fr}
}
.co-facts-dl dt.wide,.co-facts-dl dd.wide{grid-column:1 / -1}
.co-facts-dl dd.wide{margin-top:-8px}