/* docs.css — the Document Intelligence page, in its v222 layout (restored v2.017,
   asked for directly). This is v222's pages.css, used by this page alone, so
   the login and diary pages keep the current pages.css untouched. */
/* pages.css — Document Intelligence + Case Diary + Login */

/* login / sign-up page — split layout (brand panel + form) */
/* The whole UI renders at zoom:0.8, and `zoom` does NOT rescale vh — so a bare
   100vh here is 80% of the window and the navy panel stopped short of the
   bottom, leaving a band of page ground under it. Same correction `.app` has
   used since the scale was introduced. */
.auth-page{min-height:calc(100vh / var(--ui-scale, 1));min-height:calc(100dvh / var(--ui-scale, 1));
  display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg)}
.auth-aside{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:40px 44px;color:#fff;background:linear-gradient(150deg,var(--brand),var(--brand-ink))}
.auth-aside-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:#fff}
.auth-aside-brand .auth-logo{background:rgba(255,255,255,.16)}
/* colour:#fff explicitly. `.auth-aside` sets it and the heading used to inherit
   it, until v169 gave every h1-h4 in the app `color:var(--ink)` for hierarchy —
   an element selector, which beats an inherited value. The result was navy text
   on the navy panel: legible only if you already knew what it said. */
.auth-aside-h{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 22px;max-width:14ch;color:#fff}
.auth-points{list-style:none;display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.45}
.auth-points li{display:flex;align-items:flex-start;gap:11px;color:rgba(255,255,255,.92)}
.auth-points b{font-weight:700;color:#fff}
.ap-ic{flex-shrink:0;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;margin-top:1px}
.auth-aside-foot{font-size:11.5px;color:rgba(255,255,255,.7)}
.auth-main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
.auth-back{position:absolute;top:20px;left:22px;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);transition:var(--tr)}
.auth-back:hover{color:var(--ink)}
.auth-card{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:32px 30px 26px;animation:fadeUp .5s both}
.auth-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:22px}
.auth-brand-sm{display:none}
.auth-logo{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--brand-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;border:1px solid var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-h1{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.auth-sub{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 20px}
.auth-google{margin:0 0 18px}
.auth-gbtn{display:flex;justify-content:center;min-height:40px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--ink-3);font-size:11.5px;font-family:var(--mono)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:3px;margin-bottom:20px}
.auth-seg-b{flex:1;font-size:12.5px;font-weight:500;color:var(--ink-2);padding:7px 0;border-radius:99px;transition:var(--tr)}
.auth-seg-b.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--sh-1);font-weight:600}
.auth-field{display:block;margin-bottom:14px}
.auth-label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:6px;letter-spacing:.02em}
.auth-input{width:100%;box-sizing:border-box;padding:11px 13px;font-size:14px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);outline:none;transition:var(--tr)}
.auth-input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-soft)}
.auth-input:disabled{opacity:.6}
.auth-pw{position:relative}
.auth-pw .auth-input{padding-right:56px}
.auth-pw-tog{position:absolute;top:50%;right:8px;transform:translateY(-50%);font-size:11px;font-weight:600;color:var(--ink-3);padding:5px 8px;border-radius:6px;transition:var(--tr)}
.auth-pw-tog:hover{color:var(--brand-ink);background:var(--brand-soft)}
.auth-err{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--warn);background:var(--warn-soft,rgba(190,120,0,.08));border:1px solid var(--warn-line,rgba(190,120,0,.2));border-radius:var(--r-sm);padding:9px 11px;margin-bottom:14px}
.auth-submit{width:100%;justify-content:center;margin-top:4px}
.auth-switch{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:18px}
.auth-switch button{color:var(--brand-ink);font-weight:600}
.auth-switch button:hover{text-decoration:underline}
.auth-legal{max-width:392px;text-align:center;font-size:11px;color:var(--ink-3);margin-top:18px;line-height:1.5}
@media (max-width:820px){
  .auth-page{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-brand-sm{display:flex;justify-content:center}
}

/* export menu in the document result bar */
.doc-export{position:relative}
.exp-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:208px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:6px;animation:pop .14s both}
.exp-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-xs);font-size:13.5px;color:var(--ink);transition:var(--tr)}
.exp-item:hover{background:var(--surface-2)}
.exp-hint{margin-left:auto;font-size:10.5px;color:var(--ink-3)}
/* the export PICKER — only what has been generated, each with a tick */
/* NOT a dropdown inside the rail: .dint-side is overflow-y:auto, which makes
   overflow-x auto too, so an absolutely-positioned menu wider than the rail
   is clipped — half the checkboxes and one whole button were cut off. Fixed
   positioning escapes the clip (no transformed ancestor). Seen in a browser. */
.exp-pick{position:fixed;top:auto;right:26px;min-width:330px;max-width:390px;max-height:70vh;overflow-y:auto}
.exp-h{padding:6px 10px 8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--border)}
.exp-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-xs);cursor:pointer;font-size:13px;color:var(--ink-2)}
.exp-row:hover{background:var(--surface-2)}
.exp-row.on{color:var(--ink)}
.exp-row input{width:15px;height:15px;flex:none;accent-color:var(--brand);cursor:pointer}
.exp-row-t{font-weight:650;white-space:nowrap}
.exp-row-q{flex:1;min-width:0;font-size:10.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-acts{display:flex;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.exp-acts .exp-item{flex:1;justify-content:flex-start;background:var(--surface-2);border:1px solid var(--border);font-weight:650}
.exp-acts .exp-item:hover{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink)}
.exp-acts .exp-item:disabled{opacity:.5;cursor:not-allowed}


/* signed-out gate on Document Intelligence */
.gate-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:18px 20px;margin:4px 0 8px}
.gate-ico{width:46px;height:46px;flex-shrink:0;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.gate-tx{flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px}
.gate-tx b{font-size:14.5px;color:var(--ink)}
.gate-tx span{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.gate-tx a{color:var(--brand-ink);font-weight:600}
.gate-cta{flex-shrink:0;white-space:nowrap}


/* document workspace tabs (mirrors the Ask page; research.css isn't loaded here) */
.qtabs{display:flex;align-items:flex-end;gap:5px;padding:8px 14px 0;border-bottom:1px solid var(--border);background:var(--bg);overflow-x:auto;flex-shrink:0;scrollbar-width:thin}
.qtabs::-webkit-scrollbar{height:0}
.qtab{display:flex;align-items:center;gap:8px;max-width:230px;flex-shrink:0;padding:8px 9px 8px 13px;border:1px solid var(--border);border-bottom:none;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;transition:var(--tr);position:relative;top:1px}
.qtab:hover{background:var(--surface);color:var(--ink)}
.qtab.on{background:var(--surface);color:var(--ink);font-weight:600;border-color:var(--border);box-shadow:0 -2px 6px rgba(30,28,40,.04)}
.qtab-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Same 24px-through-the-zoom rule as research.css — this is DocIQ's own copy
   of the tab strip, and it had been left behind (v218 audit). */
.qtab-x{width:calc(24px / var(--ui-scale,1));height:calc(24px / var(--ui-scale,1));border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);flex-shrink:0;transition:var(--tr)}
.qtab-x:hover{background:var(--surface-3);color:var(--ink)}
.qtab-new{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-sm);color:var(--ink-2);display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.qtab-new:hover{background:var(--surface-2);color:var(--brand)}

/* shared empty/hero reuse: .ask-h1, .ask-lede, .trust-row from research.css are not loaded here,
   so redeclare the few needed. */
.ask-h1{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.ask-h1 span{color:var(--ink-3)}
.ask-lede{margin:16px 0 28px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:var(--measure)}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}
.trust{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.trust svg{width:15px;height:15px;color:var(--ok)}
.result-foot{font-size:11px;color:var(--ink-3);border-top:1px solid var(--border);padding-top:16px;margin-top:8px;line-height:1.6}
.result-foot>*{max-width:var(--measure-wide)}

.result-bar{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:11px 22px;border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--surface),transparent 18%);backdrop-filter:blur(8px)}
.rb-back{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--ink-2);padding:7px 11px;border-radius:var(--r-sm);transition:var(--tr)}
.rb-back:hover{background:var(--surface-2);color:var(--ink)}
.rb-back svg{transform:rotate(45deg)}
.rb-spacer{flex:1}

/* ============ Document Intelligence ============ */
/* New-document / loading stage: fills the pane and never scrolls — the empty
   state is short and self-contained, so it's vertically centred instead. */
/* Centre the empty state, but SCROLL (not clip) when it's taller than the
   viewport. justify-content:center + overflow:hidden pushes the top off-screen
   with no way to reach it; margin:auto on the child centres it while leaving
   the overflow scrollable. */
.doc-stage{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:20px 0}
.doc-stage .doc-empty{padding-top:0;padding-bottom:0;margin:auto}
.doc-empty{max-width:700px;margin:0 auto;padding:clamp(40px,8vh,96px) 28px 70px;animation:fadeUp .5s both;text-align:center}

/* shared landing polish — gradient emblem · kicker · gradient headline · tone
   pills. Matches the Ask hero look; reused across the module landings. */
/* the page emblem — same treatment as the rail mark: brand gradient, gold
   ring, soft halo. The violet blend it used to carry belonged to the old
   palette and fought the navy. */
.lp-emblem{width:58px;height:58px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:17px;color:#fff;position:relative;background:var(--brand-grad);border:1px solid var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft),0 10px 26px -6px color-mix(in oklch,var(--brand),transparent 45%),inset 0 1px 0 rgba(255,255,255,.24)}
.lp-emblem svg{width:29px;height:29px}
.lp-emblem::after{content:"";position:absolute;inset:-9px;border-radius:21px;z-index:-1;background:radial-gradient(closest-side,color-mix(in oklch,var(--brand),transparent 60%),transparent)}
.lp-kicker{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:8px}
.lp-grad{color:var(--brand-ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.lp-grad{background:linear-gradient(100deg,var(--c-ask),var(--c-docs) 45%,var(--c-draft) 105%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}}
.doc-empty .trust-row{justify-content:center;gap:8px;flex-wrap:wrap}
.doc-empty .trust{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.doc-empty .trust.t-ok{color:var(--ok-ink,#16a34a);border-color:color-mix(in oklch,var(--ok,#16a34a),transparent 72%);background:color-mix(in oklch,var(--ok,#16a34a),transparent 92%)}
.doc-empty .trust.t-brand{color:var(--brand-ink);border-color:var(--brand-line);background:var(--brand-soft)}
@media (prefers-reduced-motion:no-preference){.doc-empty .lp-emblem{animation:askEmblem 4.5s ease-in-out 1s infinite}}
@keyframes askEmblem{0%,100%{box-shadow:0 8px 22px -6px color-mix(in oklch,var(--brand),transparent 45%),inset 0 1px 0 rgba(255,255,255,.28)}50%{box-shadow:0 12px 30px -6px color-mix(in oklch,var(--brand),transparent 25%),inset 0 1px 0 rgba(255,255,255,.28)}}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;background:var(--surface);border:2px dashed var(--border-2);border-radius:var(--r-lg);padding:46px 24px;transition:var(--tr);text-align:center}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone.drag{box-shadow:0 0 0 4px var(--brand-soft)}
.doc-err{display:flex;align-items:center;gap:7px;justify-content:center;margin-top:16px;font-size:12.5px;color:var(--warn)}
.dz-ico{width:58px;height:58px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.dropzone b{font-size:16px;color:var(--ink)}
.dropzone .mono{font-size:11.5px;color:var(--ink-3)}

/* (the legacy pre-v29 .doc-split side-panel rules lived here; removed in v44 —
   .doc-split is now the two-pane layout defined at the end of this file) */
.doc-panel{position:sticky;top:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);max-height:calc(100vh - 40px);overflow:auto}
/* one card per uploaded document when several are loaded */
.doc-setcount{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.doccard.multi{border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:12px;background:var(--surface-2)}
.doccard.multi .doc-file{padding-bottom:12px}
.doc-file{display:flex;gap:11px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--border)}
.doccard-x{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-3);border-radius:6px;cursor:pointer;transition:var(--tr)}
.doccard-x:hover:not(:disabled){background:var(--danger-soft,rgba(220,38,38,.1));color:var(--danger,#dc2626)}
.doccard-x:disabled{opacity:.4;cursor:default}
.docadd{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:14px;padding:10px;font-size:12.5px;font-weight:600;color:var(--brand-ink,var(--brand));background:var(--brand-soft);border:1px dashed var(--brand-line,var(--brand));border-radius:var(--r-md);cursor:pointer;transition:var(--tr)}
.docadd:hover:not(:disabled){background:var(--brand);color:var(--on-brand)}
.docadd:disabled{opacity:.6;cursor:default}
.docadd .qtab-spin{width:13px;height:13px}
.doc-file-ic{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-file-ic svg{width:19px;height:19px}
.doc-file-n{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:break-word;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-file-m{font-size:10.5px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.doc-sec-l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 9px}
.doc-facts{display:flex;flex-direction:column;gap:2px}
/* Stacked (label above value): legal facts often have long labels AND long
   values, which a side-by-side row can't fit in the narrow panel — forcing the
   value into a one-character-wide vertical column. Stacking always reads. */
.doc-fact{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--surface-2)}
.df-k{color:var(--ink-3);font-size:10.5px;letter-spacing:.02em;overflow-wrap:break-word;word-break:break-word}
.df-v{color:var(--ink);font-weight:500;font-size:12.5px;min-width:0;overflow-wrap:break-word;word-break:break-word}
.doc-clauses{display:flex;flex-direction:column;gap:3px}
.doc-clause{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-xs);transition:var(--tr);cursor:pointer}
.doc-clause:hover{background:var(--surface-2)}
.dc-id{font-size:10.5px;color:var(--brand);background:var(--brand-soft);padding:2px 6px;border-radius:5px;font-weight:600;flex-shrink:0}
.dc-t{font-size:12.5px;color:var(--ink);flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word}
.dc-p{font-size:10.5px;color:var(--ink-3)}

.doc-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.doc-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1)}
.ds-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ds-date{font-size:11px;color:var(--ink-3)}
.ds-text{font-size:15px;line-height:1.65;color:var(--ink-2)}
/* multi-document summary: one block per document */
.ds-docs{display:flex;flex-direction:column;gap:14px}
.ds-doc{padding-bottom:14px;border-bottom:1px solid var(--border)}
.ds-doc:last-child{padding-bottom:0;border-bottom:none}
.ds-doc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.ds-doc-n{font-size:13px;font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ds-doc .ds-text{font-size:13.5px}
.pill.ghost{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.ds-parties{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.party{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);padding:5px 10px;border-radius:99px}
.party svg{color:var(--brand)}

.qa-thread{display:flex;flex-direction:column;gap:20px}
.qa{animation:fadeUp .35s both}
.qa-q{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.qa-av{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qa-q p{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;padding-top:2px}
.qa-a{margin-left:35px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:15px 18px;box-shadow:var(--sh-1)}
/* Legal-analysis drafts read like a formal opinion: a brand accent rail, roomier
   set, and a clear section hierarchy so Strategy / Risk Radar / etc. are legible. */
.qa-a.ana{border-left:3px solid var(--brand);padding-left:17px}
.qa-a.ana .qa-md{font-size:14.5px;line-height:1.6}
/* Report headings, sized to be headings. They were within a point or two of
   the body text, so a seven-section opinion read as one column of prose. */
.qa-a.ana .qa-md-h1{font-size:21px;letter-spacing:-.015em}
.qa-a.ana .qa-md-h2{font-size:15.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-ink);border-bottom:2px solid var(--brand-line);padding-bottom:6px;margin-top:24px}
.qa-a.ana .qa-md-h3{font-size:16px;color:var(--ink);margin-top:16px}
.qa-a.ana .qa-md-ul,.qa-a.ana .qa-md-ol{gap:5px}
.qa-a.ana .qa-md-ul li,.qa-a.ana .qa-md-ol li{line-height:1.58}
.qa-a.err{border-color:var(--bad-line,var(--border));background:var(--bad-soft,var(--surface))}
.qa-a>p{font-size:14.5px;line-height:1.68;color:var(--ink-2)}
.qa-a strong{color:var(--ink);font-weight:600}
/* answer toolbar — label chip + copy */
.qa-a-hd{display:flex;align-items:center;gap:8px;margin:-2px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.qa-a-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:99px}
.qa-a-tag.ana{color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line)}
.qa-a-tag.doc{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border)}
.qa-copy{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);background:var(--surface);color:var(--ink-3);border-radius:8px;cursor:pointer;transition:var(--tr)}
.qa-copy+.qa-copy{margin-left:6px}
.qa-a-hd>.qa-copy:first-of-type{margin-left:auto}
.qa-copy:hover{color:var(--brand-ink);border-color:var(--brand-line);background:var(--brand-soft)}
/* actively reading the answer aloud */
.qa-copy.on{color:var(--on-brand);background:var(--brand);border-color:var(--brand)}
/* rendered markdown in an answer */
.qa-md{font-size:14px;line-height:1.55;color:var(--ink-2)}
.qa-md>*:first-child{margin-top:0}
.qa-md>*:last-child{margin-bottom:0}
.qa-md-p{margin:0 0 7px}
.qa-md strong{color:var(--ink);font-weight:600}
.qa-md em{font-style:italic}
.qa-md code{font-family:var(--mono,monospace);font-size:12.5px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.qa-md-h{font-weight:700;color:var(--ink);line-height:1.3;margin:12px 0 5px}
.qa-md-h1{font-size:20px;letter-spacing:-.015em}
/* v200 — headings carry a COLOUR cue, not weight alone. At 15px bold in body
   ink an h3 reads as an emphasised sentence rather than a heading, which is what
   "side heading" means here. Matches the .ana treatment above so DocIQ and Ask
   agree about what a heading looks like. */
.qa-md-h2{font-size:17px;padding-bottom:6px;border-bottom:1px solid var(--border-2);color:var(--brand-ink)}
.qa-md-h3{font-size:15px;color:var(--brand-ink);letter-spacing:.005em}
.qa-md-h4{font-size:12.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.qa-md-ul,.qa-md-ol{margin:0 0 7px;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.qa-md-ul{list-style:disc}
.qa-md-ol{list-style:decimal}
.qa-md-ul li,.qa-md-ol li{line-height:1.5;padding-left:3px}
.qa-md-ul li::marker{color:var(--brand)}
.qa-md-ol li::marker{color:var(--brand-ink);font-weight:600}
.qa-md-q{margin:0 0 11px;padding:8px 13px;border-left:3px solid var(--brand-line);background:var(--surface-2);border-radius:0 6px 6px 0;color:var(--ink-2);font-style:italic}
.qa-md-hr{border:none;border-top:1px solid var(--border);margin:16px 0}
/* "Confirm before relying" — the section that asks the reader a question.
   A scanned document has no text layer, so its dates and figures were RECOGNISED
   from ink and may be wrong by a character. Anything the analysis cannot trust
   is parked here instead of argued, and it has to look unlike the advice around
   it or it reads as one more finding. The blocks carry no margin between them,
   so the run reads as a single panel. */
.qa-ask{background:var(--accent-soft);border-left:3px solid var(--accent);padding:8px 13px;margin:0}
.qa-md-h.qa-ask{border-bottom:none;color:var(--accent-ink);padding-top:11px;margin-top:18px;border-radius:8px 8px 0 0}
.qa-md-ul.qa-ask,.qa-md-ol.qa-ask{padding-left:32px}
.qa-ask:last-child{padding-bottom:11px;border-radius:0 0 8px 8px}
/* Legal-document text formatting — justified prose + automatic hyphenation, to
   match the Ask analysis (see research.css). Only paragraphs and quoted blocks
   are justified; headings and list markers stay flush-left. */
.qa-md-p,.qa-md-q{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* List items are prose too — a justified paragraph followed by ragged bullets
   reads as two different documents. Headings stay left and unhyphenated. */
.qa-md-ul li,.qa-md-ol li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.qa-md-h{text-align:left;hyphens:none;-webkit-hyphens:none}
/* clickable case citations inside an answer */
.doc-citelink{display:inline;font:inherit;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:5px;padding:0 4px;line-height:1.4;cursor:pointer;transition:var(--tr)}
.doc-citelink:hover{background:var(--brand);color:var(--on-brand)}
/* authority drawer — same details/look as the Ask page (research.css isn't loaded here) */
@keyframes slideIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.drawer-scrim{position:fixed;inset:0;background:rgba(20,18,30,.42);backdrop-filter:blur(2px);z-index:120;display:flex;justify-content:flex-end;animation:fadeIn .18s both}
.drawer{width:min(480px,94vw);height:100%;background:var(--surface);border-left:1px solid var(--border-2);box-shadow:var(--sh-pop);overflow-y:auto;padding:22px 26px 40px;animation:slideIn .26s cubic-bezier(.4,0,.2,1) both}
.dr-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dr-court{font-size:12.5px;color:var(--ink-2);font-weight:500}
.dr-x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:var(--tr)}
.dr-x:hover{background:var(--surface-2);color:var(--ink)}
.dr-title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--ink);overflow-wrap:break-word}
.dr-cite{font-size:13px;color:var(--ink-2);margin-top:6px;overflow-wrap:anywhere}
.goodlaw{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:13px 15px;margin:18px 0;border:1px solid}
.goodlaw.ok{background:var(--ok-soft);border-color:var(--ok-line)}
.goodlaw.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.goodlaw.bad{background:var(--bad-soft);border-color:var(--bad-line)}
.gl-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.goodlaw.ok .gl-ico{background:var(--ok)}
.goodlaw.warn .gl-ico{background:var(--warn)}
.goodlaw.bad .gl-ico{background:var(--bad)}
.gl-tx{display:flex;flex-direction:column;gap:1px}
.gl-tx b{font-size:14.5px;color:var(--ink)}
.gl-tx span{font-size:12px;color:var(--ink-2);line-height:1.4}
.authrow{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:11px 14px;margin:14px 0;border:1px solid var(--border)}
.authrow.binding{background:var(--brand-soft);border-color:var(--brand-line)}
.authrow-lvl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;color:var(--ink)}
.authrow.binding .authrow-lvl{color:var(--brand-ink)}
.authrow-why{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dr-f{display:flex;flex-direction:column;gap:3px}
.dr-fl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dr-f span:last-child{font-size:13.5px;color:var(--ink);font-weight:500}
.dr-sec{margin-top:18px}
.dr-sl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.dr-sec p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.dr-quote{margin:0;padding:11px 14px;border-left:3px solid var(--brand-line);background:var(--brand-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;line-height:1.6;color:var(--ink);font-style:italic}
.dr-chips{display:flex;flex-wrap:wrap;gap:7px}
.dr-chip{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);padding:3px 9px;border-radius:99px}
.src-chip{display:inline-flex;align-items:center;gap:5px;cursor:pointer;text-decoration:none;transition:var(--tr)}
.src-chip:hover{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}
.dr-actions{display:flex;gap:10px;margin-top:24px}
.dr-actions .btn{flex:1}
.dr-verified{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--ok);margin-top:16px}
.qa-cites{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.qa-cite{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);padding:3px 9px;border-radius:99px}
.qa-grounded{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ok);margin-left:auto}
.qa-applied{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--accent-ink);margin-left:auto}
.qa-law{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
.qa-lawchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);padding:3px 9px;border-radius:99px;cursor:pointer;transition:var(--tr);text-decoration:none}
.qa-lawchip:hover{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}
.qa-hint{font-size:12.5px;color:var(--ink-3);text-align:center;padding:8px 0 4px}
.qa-reask{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:11.5px;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);padding:6px 11px;border-radius:99px;transition:var(--tr)}
.qa-reask:hover:not(:disabled){background:var(--brand);color:var(--on-brand)}
.qa-reask:disabled{opacity:.5;cursor:default}
.qa-pending{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;color:var(--ink-3)}
.qa-pending .qtab-spin{margin-top:1px;flex:none}
.qa-pending-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.qa-pending-tx b{font-size:13px;font-weight:600;color:var(--ink-2)}
.qa-pending-tx span{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.qa-prog{position:relative;height:3px;border-radius:2px;background:var(--brand-soft);overflow:hidden;margin-top:9px;max-width:300px}
.qa-prog-bar{position:absolute;top:0;height:100%;width:38%;border-radius:2px;background:var(--brand);animation:qaprog 1.25s ease-in-out infinite}
@keyframes qaprog{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){.qa-prog-bar{animation:none;width:100%;left:0;opacity:.5}}
.tx-caret{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--brand);border-radius:1px;animation:txblink 1s step-end infinite}
@keyframes txblink{50%{opacity:0}}
.qtab-spin{display:inline-block;width:14px;height:14px;flex-shrink:0;border-radius:50%;border:2px solid var(--brand-soft);border-top-color:var(--brand);animation:docrot .7s linear infinite}
@keyframes docrot{to{transform:rotate(360deg)}}

.doc-modes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.doc-modeseg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:3px}
.dm-pill{font-size:12.5px;font-weight:500;color:var(--ink-2);padding:6px 14px;border-radius:99px;transition:var(--tr)}
.dm-pill.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--sh-1)}
.doc-side{font-size:12px;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:6px 12px;cursor:pointer;max-width:240px}
.doc-lenses{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.doc-lens{font-size:12.5px;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);padding:7px 13px;border-radius:99px;transition:var(--tr)}
.doc-lens:hover:not(:disabled){background:var(--brand);color:var(--on-brand)}
.doc-lens:disabled{opacity:.5;cursor:default}
.doc-ask{display:flex;gap:10px;background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:9px 9px 9px 16px;box-shadow:var(--sh-1);transition:var(--tr)}
.doc-ask:focus-within{border-color:var(--brand);box-shadow:var(--sh-1),0 0 0 4px var(--brand-soft)}
.doc-ask-in{flex:1;border:none;outline:none;background:none;font-size:14.5px}
.doc-ask-in::placeholder{color:var(--ink-3)}

/* merged single-column document workspace (replaces the two-column doc-split) */
.doc-merged{max-width:940px;margin:0 auto;padding:26px 32px 56px;display:flex;flex-direction:column;gap:18px}
@media(max-width:700px){.doc-merged{padding:18px 14px 44px}}
.doc-merged .doccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1)}
.doc-setcount{font-size:11px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:-6px}
.doc-cardsum{font-size:14px;line-height:1.6;margin-top:6px}
/* acting-for row */
.doc-actingfor{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.af-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* the five options (Chat + four lenses) */
.doc-opts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.doc-opt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);padding:7px 13px;border-radius:99px;cursor:pointer;transition:var(--tr)}
.doc-opt:hover:not(:disabled){border-color:var(--brand-line);color:var(--brand-ink)}
.doc-opt.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.doc-opt:disabled{opacity:.5;cursor:default}
.doc-opt svg{flex-shrink:0}

/* document-reading progress — a real % readout that never looks frozen */
.docprog-wrap{max-width:440px;margin:24px auto 0}
.docprog{display:flex;flex-direction:column;gap:9px}
.docprog-track{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.docprog-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-line),var(--brand));transition:width .25s ease}
.docprog-meta{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--ink-3)}
.docprog-meta b{color:var(--brand-ink);font-weight:700;font-variant-numeric:tabular-nums}

/* collapsible "Clauses detected" — minimised by default to keep the card compact */
.doc-clausesec{margin-top:16px}
.doc-cltoggle{display:flex;align-items:center;gap:7px;width:100%;margin:0;padding:0;background:none;border:none;cursor:pointer;color:var(--ink-3)}
.doc-cltoggle:hover{color:var(--brand-ink)}
.doc-clcount{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:99px;padding:1px 7px}
.doc-clausesec .doc-clauses{margin-top:10px}

/* dedicated, full-width space for the answer/output (neater, roomier) */
.doc-merged .qa-q{margin-left:0}
.doc-merged .qa-a{margin-left:0;padding:18px 22px;border-radius:var(--r-lg)}
.doc-merged .qa-md{font-size:14.5px;line-height:1.72}
.doc-merged .qa-md-p{margin:0 0 12px}

/* ============ Case Diary ============ */
.diary-split{max-width:1240px;margin:0 auto;padding:26px 28px 56px;display:grid;grid-template-columns:320px 1fr;gap:26px;align-items:start}
@media(max-width:920px){.diary-split{grid-template-columns:1fr}}
.matters{display:flex;flex-direction:column;gap:9px}
.matters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.matters-head h2{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:8px}
.matters-head h2 .mono{font-size:12px;color:var(--ink-3);background:var(--surface-3);padding:2px 8px;border-radius:99px;font-weight:500}
.matter{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 15px;transition:var(--tr);position:relative}
.matter:hover{border-color:var(--border-2);box-shadow:var(--sh-1)}
.matter.on{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft);background:color-mix(in oklch,var(--brand-soft),var(--surface) 55%)}
.matter-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.matter-title{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.matter-st{flex-shrink:0;margin-top:1px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:99px}
.matter-st.act{color:var(--ink-2);background:var(--surface-3)}
.matter-st.urg{color:var(--bad-ink);background:var(--bad-soft);border:1px solid var(--bad-line)}
.matter-meta{font-size:11px;color:var(--ink-3);margin-bottom:9px}
.matter-next{font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px;line-height:1.4}
.matter-next svg{color:var(--brand);flex-shrink:0}
.matter-next b{color:var(--ink);font-weight:600}

.matter-detail{min-width:0}
.md-head{padding-bottom:18px;border-bottom:1px solid var(--border)}
.md-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.md-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.md-sub{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.md-next{display:flex;align-items:center;gap:15px;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:14px 16px;margin:20px 0}
.mn-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--brand);color:var(--on-brand);flex-shrink:0}
.mn-d{font-size:20px;font-weight:700;line-height:1}
.mn-mo{font-size:10.5px;letter-spacing:.04em;margin-top:2px;text-transform:uppercase}
.mn-w{font-size:14.5px;font-weight:600;color:var(--ink)}
.mn-f{font-size:11.5px;color:var(--brand-ink);margin-top:2px}

.md-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:8px}
@media(max-width:720px){.md-cols{grid-template-columns:1fr}}
.md-col-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-family:var(--mono);margin-bottom:13px}
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:13px;padding-bottom:18px;position:relative}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:5px;top:14px;bottom:-4px;width:1.5px;background:var(--border)}
.tl-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--border-2);background:var(--surface);flex-shrink:0;margin-top:3px;z-index:1}
.tl-item.up .tl-dot{border-color:var(--brand);background:var(--brand)}
.tl-item.done .tl-dot{border-color:var(--ok-line);background:var(--ok)}
.tl-t{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4}
.tl-item.done .tl-t{color:var(--ink-2)}
.tl-d{font-size:11px;color:var(--ink-3);margin-top:2px}

.tasks{display:flex;flex-direction:column;gap:7px}
.task{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);cursor:pointer;padding:6px 0;min-height:calc(24px / var(--ui-scale,1))}
.tk-box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:var(--tr)}
.task.done .tk-box{background:var(--ok);border-color:var(--ok)}
.task.done{color:var(--ink-3);text-decoration:line-through}

.saved-list{display:flex;flex-direction:column;gap:9px}
.saved{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;transition:var(--tr)}
.saved:hover{border-color:var(--brand-line);background:var(--brand-soft);transform:translateX(3px)}
.saved-ic{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.saved-ic svg{width:17px;height:17px}
.saved-ic.add{background:var(--surface-2);color:var(--ink-3)}
.saved-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.saved-m{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.saved.add{border-style:dashed}

/* ===== responsive hardening (Documents + Diary) ===== */
.doc-split>*,.diary-split>*,.md-cols>*{min-width:0}
.doc-panel,.matters{overscroll-behavior:contain}
.qa-q p,.qa-a,.matter-title,.md-title,.saved-t{overflow-wrap:anywhere}
@media(max-width:680px){
  .doc-split{padding:18px 14px 44px}
  .diary-split{padding:18px 14px 44px}
  .doc-panel{position:static}            /* don't pin the side panel when stacked */
  .result-bar{flex-wrap:wrap}
}
@media(max-width:520px){
  .md-next{flex-wrap:wrap}
  .md-next .btn{margin-left:0!important}
  .doc-ask{flex-wrap:wrap}
  .doc-ask .btn{flex:1}
}

/* ── on-point precedents (Document Intelligence) ─────────────────────────── */
.doc-precedents{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1);margin-top:16px}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dp-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink)}
.dp-sub{font-size:10.5px;font-weight:500;color:var(--ink-3)}
.dp-find{padding:6px 12px}
/* NOT display:flex — a flex row makes each text node and the <b> its own
   item, and the sentence renders as ragged columns. */
.dp-for{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--brand-ink)}
.dp-for svg{margin-right:5px;vertical-align:-2px}
.dp-for b{font-weight:700}

.dp-hint{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.55}
.dp-issue{font-size:12.5px;color:var(--ink-2);margin:10px 0 0;line-height:1.5}
.dp-issue b{color:var(--ink);font-weight:600}
.dp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:14px;margin-top:14px}
.dp-card{text-align:left;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 15px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:var(--tr)}
.dp-card:hover{border-color:var(--brand-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.dp-card-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dp-bench{font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--border-2);padding:1px 6px;border-radius:5px}
.dp-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ok)}
.dp-dot.warn{background:var(--warn)}
.dp-dot.bad{background:var(--bad)}
.dp-status{font-size:10.5px;font-weight:600}
.dp-status.ok{color:var(--ok)}.dp-status.warn{color:var(--warn)}.dp-status.bad{color:var(--bad)}
.dp-court{font-size:10.5px;color:var(--ink-3);margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-card-title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.dp-card-cite{font-size:10.5px;color:var(--brand-ink)}
.dp-block{display:flex;flex-direction:column;gap:2px}
.dp-lbl{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dp-text{font-size:12px;color:var(--ink-2);line-height:1.5;overflow-wrap:break-word;word-break:break-word}
.dp-quote{margin:0;font-size:12px;font-style:italic;color:var(--ink-2);line-height:1.5;padding-left:9px;border-left:2px solid var(--brand-line);overflow-wrap:break-word;word-break:break-word}
.dp-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dp-clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dp-clamp4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.dp-disp{display:inline-block;font-size:10.5px;font-weight:600;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:5px;padding:2px 8px}
.dp-chips{display:flex;flex-wrap:wrap;gap:5px}
.dp-chip{font-size:10.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--border-2);border-radius:5px;padding:1px 7px}
.dp-card-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);margin-top:2px;flex-wrap:wrap}
.dp-open{margin-left:auto;display:inline-flex;align-items:center;gap:3px;color:var(--brand-ink);font-weight:600}

/* ── grounded-analysis answer: verified references + document flags ───────── */
.qa-flags{margin:12px 0 0;border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:var(--r-md);padding:10px 12px}
.qa-flags-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);margin-bottom:6px}
.qa-flag{font-size:12.5px;color:var(--ink-2);line-height:1.5;padding:3px 0;border-top:1px dashed var(--warn-line)}
.qa-flag:first-of-type{border-top:none}
.doc-reflink{display:inline;border:none;background:none;padding:0 1px;margin:0;font:inherit;font-weight:700;font-size:.8em;vertical-align:.3em;color:var(--brand-ink);cursor:pointer;line-height:0}
.doc-reflink:hover{text-decoration:underline}
.qa-note{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:11.5px;color:var(--ink-3)}
.qa-refs{margin:14px 0 0}
.qa-refs-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.qa-reflist{display:flex;flex-direction:column;gap:10px}
.qa-ref{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:var(--tr)}
.qa-ref:hover{border-color:var(--brand-line);box-shadow:var(--sh-2);transform:translateY(-1px)}
.qa-ref-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.qa-ref-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:10.5px;font-weight:700;color:var(--on-brand);background:var(--brand)}
.qa-ref-title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:break-word;word-break:break-word}
.qa-ref-cite{font-weight:500;color:var(--brand-ink)}
.qa-ref-why{font-size:12.5px;color:var(--ink);line-height:1.55;overflow-wrap:break-word;word-break:break-word}
.qa-ref-why b{font-weight:600}
.qa-ref-hold{font-size:12px;color:var(--ink-2);line-height:1.5}
.qa-ref-hold .dp-lbl{display:inline;margin-right:5px}
.qa-ref-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);flex-wrap:wrap}

/* ── Document Intelligence: two-pane side-by-side layout (v44) ─────────────────
   Documents (left, own scroll) | drag divider | Q&A (right, own scroll) with the
   acting-for selector, 5 options and Ask bar PINNED to the bottom of the right
   pane — every control reachable without scrolling. The divider drags (300–720px,
   persisted); "Hide documents" collapses the left pane for full-width answers.
   Below 1000px the panes stack back into the classic single scrolling column. */
.doc-split{flex:1;min-height:0;display:grid;grid-template-columns:var(--dlw,400px) 7px minmax(0,1fr)}
/* collapsed: the docs pane + divider leave the grid, so ONE full-width track
   (display:none children are not grid items — a leading 0-track would swallow
   the chat pane). */
.doc-split.dcol{grid-template-columns:minmax(0,1fr)}
.doc-split.dcol .doc-pane-docs,.doc-split.dcol .doc-resizer{display:none}
.doc-pane{min-width:0;min-height:0;display:flex;flex-direction:column}
.doc-pane-docs{overflow-y:auto;overscroll-behavior:contain;background:var(--surface-2);border-right:1px solid var(--border)}
.doc-docs-inner{max-width:none;margin:0;padding:18px 18px 40px;gap:14px}
.doc-resizer{position:relative;cursor:col-resize;background:var(--bg)}
.doc-resizer::before{content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;background:var(--border);transition:background .15s,width .15s}
.doc-resizer::after{content:"";position:absolute;top:50%;left:1px;transform:translateY(-50%);width:5px;height:38px;border-radius:99px;background:var(--border-2);transition:background .15s}
.doc-resizer:hover::before{left:2px;width:3px;background:var(--brand)}
.doc-resizer:hover::after{background:var(--brand)}
.doc-pane-chat{background:var(--bg)}
.doc-chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
/* fill the pane's full width + height in the two-pane layout (no stranded gutters
   or an empty top-aligned void); max-width cap returns only when stacked (<1000px) */
.doc-chat-inner{padding:20px 34px 12px;gap:16px;max-width:none;margin:0;min-height:100%}
.doc-chat-inner .qa-thread{flex:1;min-height:0}
/* idle empty state is centred in the pane instead of a hint stranded at the top */
.doc-chat-empty{margin:auto;max-width:480px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px;padding:24px 0;animation:fadeUp .5s both}
.doc-chat-empty-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.doc-chat-empty-ic svg{width:25px;height:25px}
.doc-chat-empty h3{font-size:17px;font-weight:700;color:var(--ink);margin:2px 0 0;letter-spacing:-.01em}
.doc-chat-empty p{font-size:13.5px;line-height:1.62;color:var(--ink-3);margin:0}
.doc-chat-controls{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -4px 14px rgba(15,23,42,.04)}
.doc-controls-inner{padding:12px 34px 14px;gap:0;max-width:none;margin:0}
.doc-controls-inner .doc-actingfor{margin-bottom:8px}
.doc-controls-inner .doc-opts{margin-bottom:9px}
.doc-controls-inner .result-foot{border-top:none;padding-top:8px;margin-top:0}
/* narrow screens: stack back into one scrolling column (classic layout) */
@media(max-width:1000px){
  .doc-panetoggle{display:none}                  /* stacked mode has no pane to hide */
  .doc-split{display:flex;flex-direction:column;overflow-y:auto}
  .doc-split.dcol .doc-pane-docs{display:flex}   /* no hiding when stacked */
  .doc-resizer{display:none}
  .doc-pane,.doc-pane-docs,.doc-chat-scroll{overflow:visible;flex:none;min-height:auto}
  .doc-pane-docs{border-right:none;border-bottom:1px solid var(--border)}
  .doc-chat-controls{box-shadow:none;border-top:none}
  .doc-docs-inner,.doc-chat-inner,.doc-controls-inner{max-width:940px;margin:0 auto;width:100%}
}

/* ══ Document Intelligence — read view (v85) ═════════════════════════════════
   Maximises the document / answer area: the document identity + case brief live
   in a compact card in the RIGHT column (above the lens switch), and the centre
   pane fills the full height. Painted entirely in the app's own design tokens
   (indigo brand + light/dark), no palette of its own. Scoped to .dint. */
.dint{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px;overflow:hidden}
.dint-export{position:relative}
.dint-note{display:flex;align-items:flex-start;gap:6px;font-size:11px;line-height:1.4;color:var(--ink-3)}
.dint-note svg{flex:none;color:var(--accent);margin-top:1px}

/* three-column body: index · reader/Q&A (maximised) · document card + lens switch */
/* The right rail carries the attachments, the export picker and the six
   analysis options with their descriptions — 288px cramped every one of
   them. Widened 20% at v171. */
.dint-body{flex:1;min-height:0;display:grid;grid-template-columns:224px minmax(0,1fr) 346px;gap:12px}
/* v2.019 — 65 · 35, asked for directly. The options pane was a fixed 346px,
   which was enough for a vertical list of six described cards and nowhere near
   enough for 3×2 tiles, a length toggle, a format picker and two buttons. */
.dint-body.no-index{grid-template-columns:minmax(0,65fr) minmax(0,35fr)}
.dint-idxbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink-3);background:transparent;border:1px solid transparent;border-radius:var(--r-sm);padding:6px;cursor:pointer;transition:var(--tr)}
.dint-idxbtn:hover{color:var(--ink);background:var(--surface)}
.dint-idxbtn.on{color:var(--brand)}

/* right column — compact document card stacked above the lens switch */
.dint-side{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.dint-info{flex:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:12px 13px}
/* attachments dropdown — the document list collapses into one control; the
   menu lists every attachment with its own × to remove, plus an Attach action. */
.dint-attach{position:relative;padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.dint-attach-btn{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;transition:var(--tr)}
.dint-attach-btn:hover{border-color:var(--brand-line)}
.dint-attach-btn>svg:first-child{color:var(--brand);flex:none}
.dint-attach-lbl{text-align:left;font-weight:600}
.dint-attach-n{flex:1;text-align:left;min-width:18px;color:var(--ink-3);font-size:11px}
.dint-attach-btn>svg:last-child{color:var(--ink-3);flex:none;transition:var(--tr)}
.dint-attach-menu{position:absolute;z-index:20;left:0;right:0;top:calc(100% - 4px);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-2,var(--sh-1));padding:5px;max-height:320px;overflow-y:auto}
.dint-attach-item{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:var(--r-sm)}
.dint-attach-item+.dint-attach-item{border-top:1px solid var(--border)}
.dint-attach-item>svg{color:var(--brand);flex:none;margin-top:2px}
.dint-attach-id{flex:1;min-width:0}
.dint-attach-name{font-weight:600;font-size:12.5px;color:var(--ink);line-height:1.3;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dint-attach-meta{font-size:10.5px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dint-attach-add{display:flex;align-items:center;gap:6px;width:100%;font:inherit;font-size:12px;color:var(--brand-ink);background:transparent;border:0;border-top:1px solid var(--border);margin-top:3px;padding:8px;cursor:pointer;border-radius:0 0 var(--r-sm) var(--r-sm);transition:var(--tr)}
.dint-attach-add:hover{background:var(--brand-soft)}
.dint-attach-add:disabled{opacity:.5;cursor:default}
.dint-docx{flex:none;border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:3px;border-radius:5px;margin-top:1px;transition:var(--tr)}
.dint-docx:hover{color:var(--bad);background:var(--bad-soft)}
.dint-docx:disabled{opacity:.4;cursor:default}
.dint-info-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.dint-info-row .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:none}
.dint-info-row .v{font-size:12px;color:var(--ink);text-align:right;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dint-info-row .v.dim{color:var(--ink-3);font-style:italic}
.dint-rep{font-family:inherit;font-size:12px;color:var(--brand);background:transparent;border:0;border-bottom:1px dashed var(--brand-line);padding:1px 2px;cursor:pointer;max-width:150px;text-align:right}
.dint-rep:focus{outline:none;border-bottom-style:solid}
.dint-info-notes{display:flex;flex-direction:column;gap:6px;padding:9px 0 2px}
.dint-info-acts{display:flex;gap:6px;padding-top:10px}
.dint-info-acts .dint-export{flex:1}
.dint-iact{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1;font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:6px 8px;cursor:pointer;white-space:nowrap;transition:var(--tr)}
.dint-iact:hover{border-color:var(--brand);color:var(--brand)}
.dint-iact:disabled{opacity:.5;cursor:default}

/* left index — every item mapped to its paragraph */
.dint-index{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden}
.dint-index-h{flex:none;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.dint-index-h .t{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.dint-index-h .c{font-size:10.5px;color:var(--ink-3)}
.dint-index-b{flex:1;min-height:0;overflow:auto;padding:6px}
.dint-index-empty{padding:16px 12px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.dint-index-doc{padding:10px 8px 4px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dint-ix{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:transparent;border:0;border-radius:var(--r-xs);padding:7px 8px;cursor:pointer;transition:var(--tr)}
.dint-ix:hover{background:var(--surface-2)}
.dint-ix.on{background:var(--brand-soft)}
.dint-ix.dim{opacity:.5;cursor:default}
.dint-ix-id{flex:none;min-width:30px;font-size:11px;color:var(--brand);font-weight:600}
.dint-ix-id.high{color:var(--bad)} .dint-ix-id.watch{color:var(--warn)} .dint-ix-id.low{color:var(--ok)}
.dint-ix-t{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dint-ix:hover .dint-ix-t{color:var(--ink)}

.dint-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* centre pane view tabs (Document / Q&A) */
/* v2.029 — the tab ribbon was removed; the report view names itself and
   carries a "‹ Case Brief" link back to the summary. */
.dint-ansbar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 26px 4px}
.dint-back{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--brand-ink);background:transparent;border:1px solid var(--brand-line);border-radius:99px;
  padding:5px 12px 5px 9px;cursor:pointer;transition:var(--tr)}
.dint-back:hover{background:var(--brand-soft)}
.dint-ansbar-t{font-size:17px;font-weight:700;color:var(--ink)}
/* one tab per option, each with its own thread — how many answers it holds */
/* the rail's Generate button — where an analysis is actually started */
/* Key facts as a schedule — label column, value column, ruled rows */
.dint-facts{margin:0;display:grid;grid-template-columns:1fr;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.dint-fact{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:0}
.dint-fact+.dint-fact{border-top:1px solid var(--border)}
.dint-fact dt{margin:0;padding:9px 12px;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--surface-2);
  border-right:1px solid var(--border);display:flex;align-items:center}
.dint-fact dd{margin:0;padding:9px 13px;font-size:13.5px;line-height:1.5;color:var(--ink)}
@media (max-width:760px){.dint-fact{grid-template-columns:1fr}
  .dint-fact dt{border-right:0;border-bottom:1px solid var(--border)}}
.dint-mode-wrap{display:flex;flex-direction:column}
.dint-mode-wrap.on{background:transparent;border:0;border-radius:var(--r-md);overflow:visible}
/* The selected row keeps its dark brand fill. Blanking it left WHITE text on
   a pale wrap — unreadable, and shipped for exactly one build. */
.dint-mode-wrap.on{padding:0}
.dint-mode-wrap.on .dint-mode{border-radius:var(--r-sm) var(--r-sm) 0 0}
.dint-mode-done{margin-left:7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ok,#0f7b52);background:var(--ok-soft,#e7f6ef);border:1px solid var(--ok-line,#bfe5d4);border-radius:99px;padding:1px 6px}
.dint-gen{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:11px 12px;
  font-size:12.5px;font-weight:700;color:var(--on-brand);background:var(--brand);border:1px solid var(--brand);border-radius:var(--r-sm);
  cursor:pointer;transition:var(--tr)}
.dint-gen{border-radius:0 0 var(--r-sm) var(--r-sm);border-top:0;box-shadow:0 4px 12px oklch(0.40 0.10 var(--brand-h) / .30)}
.dint-gen:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.dint-gen:disabled{opacity:.6;cursor:default}
/* whose case this is — an analysis argued for one party reads differently
   from a neutral one, and a report that does not say which can be read as
   the wrong one. */
.dint-forwhom{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;line-height:1.4;
  color:var(--ink-2);background:var(--surface-2);border-bottom:1px solid var(--border)}
.dint-forwhom svg{flex:none;color:var(--ink-3)}
.dint-forwhom b{color:var(--ink);font-weight:650}
.dint-forwhom.on{color:var(--brand-ink);background:var(--brand-soft);border-bottom-color:var(--brand-line)}
.dint-forwhom.on svg,.dint-forwhom.on b{color:var(--brand-ink)}
/* …and on each answer, the side it was ACTUALLY generated for */
.qa-a-for{padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--border)}
.qa-a-for.on{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}


/* consolidated summary — the landing view; one brief per attachment under a
   shared header, re-derived on every render so removals reflect at once. */
.dint-cons{max-width:820px;margin:0 auto}
.dint-cons-head{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.dint-cons-kick{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:5px}
.dint-cons-h{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.dint-cons-h>svg{color:var(--brand);flex:none}
/* v2.029 — "Case Brief" highlighted: brand-tinted band behind the words. */
.dint-cons-title{background:var(--brand-soft);color:var(--brand-ink);padding:2px 10px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dint-cons-n{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:2px 9px}
.dint-cons-doc{padding:12px 0}
.dint-cons-doc+.dint-cons-doc{border-top:1px solid var(--border)}
.dint-cons-name{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.dint-cons-name>svg{color:var(--brand);flex:none}
.dint-cons-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dint-cons-type{flex:none;font-size:10.5px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xs);padding:1px 7px}
.dint-cons-t{font-size:14px;line-height:1.7;color:var(--ink-2);text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;margin:0}
.dint-cons-t+.dint-cons-t{margin-top:9px}
/* The gist reads first and alone — larger, darker, unjustified, so it is the
   headline rather than the first slab of a wall. */
.dint-cons-lede{font-size:15px;line-height:1.65;font-weight:500;color:var(--ink);margin:0;max-width:78ch;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* …then the brief in labelled parts, each bound to its heading by the rule. */
.dint-cons-secs{display:flex;flex-direction:column;gap:15px;margin-top:16px;max-width:78ch}
.dint-cons-sec{border-left:2px solid var(--brand-line);padding-left:13px}
.dint-cons-sec-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:5px}

.dint-cons-t.dim,.dint-cons .v.dim{color:var(--ink-3);font-style:italic}

/* case-brief metadata strip (moved out of the right card) + richer per-doc
   sections (parties chips, key-facts list) under the summary. */
.dint-brief-meta{padding:12px 14px;margin-bottom:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
/* When the brief has no Type/Category/Date pills the meta strip has nothing to
   hold, and an empty bordered box is worse than no box. */
.dint-brief-meta:empty{display:none}
/* "Acting for" after the chronology — it belongs to the question, not the
   document, so it sits directly above the answer pane rather than in the header. */
.dint-act-after{margin-top:14px;margin-bottom:0}
/* v195 — the same matter, continued in Drafting. */
.dint-draftfrom{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;font-weight:600;
  color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-sm);
  padding:7px 12px;cursor:pointer;transition:var(--tr)}
.dint-draftfrom:hover{background:var(--surface);border-color:var(--brand)}
.dint-draftfrom svg{flex:none}
.dint-carry{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dint-carry .dint-draftfrom{margin-top:0}
/* Type / Category / Date as inline pills that wrap within the panel. */
.dint-brief-pills{display:flex;flex-wrap:wrap;gap:8px}
.dint-brief-pill{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 11px}
.dint-brief-pill .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:none}
.dint-brief-pill .v{font-size:12px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Acting for" on its own full-width row; the select fills the row and can never
   overflow the panel however long the party name is. */
.dint-brief-act{display:flex;align-items:center;gap:10px;min-width:0}
.dint-brief-pills+.dint-brief-act{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.dint-brief-act .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:none}
.dint-brief-act .v{font-size:12.5px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dint-brief-act .dint-rep{flex:1;min-width:0;width:100%;max-width:100%;font-family:inherit;font-size:12px;color:var(--brand-ink);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:4px 8px}
.dint-brief-sub{margin-top:10px}
.dint-brief-lbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin-bottom:5px}
.dint-brief-chips{display:flex;flex-wrap:wrap;gap:6px}
.dint-brief-chip{font-size:12px;color:var(--ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:2px 10px}
.dint-brief-facts{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.dint-brief-facts li{font-size:13px;line-height:1.55;color:var(--ink-2)}
.dint-brief-facts li::marker{color:var(--brand)}
.dint-brief-note{margin-top:10px;font-size:11.5px;color:var(--ink-3);background:var(--surface-2);border-left:2px solid var(--brand-line);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:6px 10px}
/* Retry for a brief that failed — an inline action inside the note, so the
   recovery sits where the bad news is instead of forcing a re-upload. */
.dint-brief-retry{display:inline-block;font:inherit;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:99px;padding:2px 10px;margin-top:4px;cursor:pointer}
.dint-brief-retry:hover{background:var(--brand-line)}

/* document reader */
.dint-doc{flex:1;min-height:0;overflow:auto;padding:18px 26px}
.dint-doc-empty{padding:24px 8px;font-size:12px;color:var(--ink-3)}

/* structured DOCX rendering — preserves the document's real tables / headings /
   lists, styled in the app theme. */
.dint-html{max-width:860px;margin:0 auto;font-size:14px;line-height:1.6;color:var(--ink-2)}
.dint-html>*:first-child{margin-top:0}
.dint-html p{margin:0 0 9px}
.dint-html h1,.dint-html h2,.dint-html h3,.dint-html h4,.dint-html h5,.dint-html h6{color:var(--ink);font-weight:700;line-height:1.3;margin:16px 0 7px}
.dint-html h1{font-size:17px} .dint-html h2{font-size:15px} .dint-html h3{font-size:14px}
.dint-html strong,.dint-html b{color:var(--ink);font-weight:600}
.dint-html ul,.dint-html ol{margin:0 0 9px;padding-left:22px;display:flex;flex-direction:column;gap:3px}
.dint-html li{line-height:1.55}
.dint-html blockquote{margin:0 0 9px;padding:6px 13px;border-left:3px solid var(--brand-line);background:var(--surface-2);color:var(--ink-2)}
.dint-html hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.dint-html a{color:var(--brand-ink);text-decoration:underline}
.dint-html table{border-collapse:collapse;width:100%;margin:4px 0 14px;font-size:13px;display:block;overflow-x:auto}
.dint-html th,.dint-html td{border:1px solid var(--border-2);padding:7px 10px;text-align:left;vertical-align:top;line-height:1.5}
.dint-html th{background:var(--surface-2);font-weight:600;color:var(--ink)}
.dint-html tr:nth-child(even) td{background:color-mix(in oklch,var(--surface-2),transparent 45%)}
.dint-p{position:relative;max-width:820px;margin:0 auto 10px;padding:1px 0;font-size:14px;line-height:1.62;color:var(--ink-2);scroll-margin-top:16px;border-radius:var(--r-sm);transition:background var(--tr)}
.dint-p.anch{padding-left:56px;min-height:26px}
.dint-p-tag{position:absolute;left:0;top:2px;font-size:10.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);border-radius:var(--r-xs);padding:2px 7px}
.dint-p-tag.high{color:var(--bad);background:var(--bad-soft)} .dint-p-tag.watch{color:var(--warn);background:var(--warn-soft)} .dint-p-tag.low{color:var(--ok);background:var(--ok-soft)}
.dint-p.on{background:color-mix(in oklch,var(--brand-soft),transparent 20%);box-shadow:0 0 0 6px color-mix(in oklch,var(--brand-soft),transparent 20%)}
.dint-p.on .dint-p-t{color:var(--ink)}
.dint-p-t{display:block}
.dint-win{flex:1;min-height:0;overflow:auto;padding:16px 22px}
.dint-win .qa-thread{max-width:860px;margin:0 auto}
.dint-win .doc-chat-empty{max-width:560px;margin:0 auto}

/* composer */
.dint-compose{flex:none;border-top:1px solid var(--border);padding:13px 16px;background:var(--surface-2);border-radius:0 0 var(--r-md) var(--r-md)}
.dint-ask{display:flex;gap:9px;align-items:flex-end}
.dint-in{flex:1;min-width:0;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:11px 13px;resize:none;max-height:160px;line-height:1.45;transition:var(--tr)}
.dint-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.dint-send{flex:none}
.dint-hints{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;font-size:11.5px}
.dint-hints button{font-family:var(--mono);font-size:11.5px;color:var(--brand);background:transparent;border:0;padding:0;cursor:pointer}
.dint-hints button:hover{text-decoration:underline}
.dint-hints button:disabled{opacity:.5;cursor:default;text-decoration:none}
.dint-hints span{color:var(--ink-3)}

/* vertical lens switch */
/* .dint-modes is defined once, at the foot of this file (v2.019). */
.dint-mode{display:flex;align-items:center;gap:10px;text-align:left;font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;transition:var(--tr)}
.dint-mode svg{flex:none;color:var(--ink-3);transition:var(--tr)}
/* Each lens now states what it produces, so the rail reads as four pieces of
   work you can commission rather than four tabs. */
.dint-mode-ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);transition:var(--tr)}
/* v175: six identical grey tiles in a column read as a form. Each analysis now
   wears its own colour in its badge — the rail becomes something you scan by
   colour rather than read top to bottom. */
.dint-mode.k-chat{--tone:var(--c-ask)}
.dint-mode.k-strategy{--tone:var(--c-docs)}
.dint-mode.k-risk{--tone:var(--bad)}
.dint-mode.k-opposing{--tone:var(--c-draft)}
.dint-mode.k-clause{--tone:var(--c-cause)}
.dint-mode.k-gaps{--tone:var(--c-lib)}
.dint-mode .dint-mode-ic{background:color-mix(in oklch,var(--tone,var(--brand)),transparent 90%);
  border-color:color-mix(in oklch,var(--tone,var(--brand)),transparent 78%)}
.dint-mode .dint-mode-ic svg{color:var(--tone,var(--brand))}
.dint-mode:hover .dint-mode-ic{background:color-mix(in oklch,var(--tone,var(--brand)),transparent 82%)}
.dint-mode-ic svg{width:15px;height:15px}
.dint-mode-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dint-mode-s{font-family:var(--mono);font-size:10.5px;line-height:1.35;color:var(--ink-3);transition:var(--tr)}
.dint-mode:hover .dint-mode-ic{background:var(--brand-soft);border-color:var(--brand-line)}
.dint-mode:hover{border-color:var(--brand-line);color:var(--ink)}
.dint-mode:hover svg{color:var(--brand)}
/* the chosen lens is filled with the brand colour + a left accent bar so the
   user's current choice is unmistakable */
/* SELECTED, NOT SHOUTING. A dark brand block here put three blues on top of
   each other — the row, the wrap, and the Generate button inside it — and the
   one thing meant to be pressed was the hardest to pick out. The selection is
   now a quiet tint with a brand edge; the button is the only filled thing. */
.dint-mode.on{position:relative;background:var(--surface);border-color:var(--brand-line);color:var(--ink);font-weight:700;box-shadow:none}
.dint-mode.on svg{color:var(--brand)}
/* the chosen analysis wears its own colour solid — the badge is the only filled
   thing in the rail besides the Generate button under it */
.dint-mode.on .dint-mode-ic{background:var(--tone,var(--brand));border-color:transparent}
.dint-mode.on .dint-mode-ic svg{color:#fff}
.dint-mode.on .dint-mode-s{color:var(--ink-3)}
.dint-mode.on::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--tone,var(--brand))}
.dint-mode:disabled{opacity:.55;cursor:default}
.dint-mode-l{flex:1;min-width:0}

/* medium: the right column narrows a touch */
@media(max-width:1180px) and (min-width:861px){
  .dint-body.no-index{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
}
/* narrow: single column — document card on top, then index, then the reader */
@media(max-width:860px){
  .dint{padding:12px;overflow-y:auto}
  .dint-body{grid-template-columns:1fr}
  .dint-side{order:-2}
  .dint-index{order:-1;max-height:220px}
  .dint-mode{flex:1;min-width:120px;justify-content:center}
  .dint-info-name{-webkit-line-clamp:1}
  .dint-doc{padding:16px}
}

/* ===== chronology: timeline + flowchart =====
   Two readings of one verified event set. Every event can be expanded to the
   verbatim words it came from — a chronology you cannot point to on a page has
   no business in front of a court. */
.doc-timeline{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1);margin-top:16px}
/* Unbuilt, the chronology is the one thing on the screen worth pressing —
   and it sat below a long brief looking like every other panel. */
.doc-timeline.invite{border-color:var(--brand-line);background:linear-gradient(180deg,var(--brand-soft),var(--surface) 76px)}
.doc-timeline.invite .dp-title{color:var(--brand-ink)}
.doc-timeline.invite .dp-title svg{color:var(--brand)}

.dtl-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dtl-views{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:2px}
.dtl-vb{font-size:11.5px;font-weight:600;color:var(--ink-3);padding:5px 12px;border-radius:99px;cursor:pointer;transition:var(--tr)}
.dtl-vb.on{color:var(--on-brand);background:var(--brand)}
.dtl-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);margin-top:12px}
.dtl-meta b{color:var(--ink);font-weight:700}
.dtl-copy{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;color:var(--brand-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.dtl-note{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:8px 0 0}
.dtl-dropped{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:8px 10px;border-radius:var(--r-xs);font-size:11px;line-height:1.5;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line)}
.dtl-dropped svg{flex-shrink:0;margin-top:1px}

/* timeline rail */
.dtl-rail{list-style:none;margin:16px 0 0;padding:0;position:relative}
.dtl-year{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);margin:14px 0 8px;padding-left:2px}
.dtl-year:first-child{margin-top:0}
.dtl-item{position:relative;display:grid;grid-template-columns:104px 1fr;gap:14px;padding:0 0 18px 18px;border-left:2px solid var(--border);margin-left:4px}
.dtl-item:last-child{border-left-color:transparent;padding-bottom:0}
.dtl-dot{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ink-3);border:2px solid var(--surface)}
.dtl-item.tone-ok .dtl-dot{background:var(--ok)}
.dtl-item.tone-warn .dtl-dot{background:var(--warn)}
.dtl-item.tone-bad .dtl-dot{background:var(--bad)}
.dtl-item.tone-brand .dtl-dot{background:var(--brand)}
.dtl-when{font-size:11.5px;color:var(--ink-2);padding-top:2px;overflow-wrap:anywhere}
.dtl-body{min-width:0}
.dtl-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink);line-height:1.4}
.dtl-d{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.dtl-actor{color:var(--ink);font-weight:600;margin-right:6px}
.dtl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:10.5px;color:var(--ink-3)}
.dtl-src{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;overflow-wrap:anywhere}
.dtl-ev{font-size:10.5px;color:var(--brand-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.dtl-quote{margin:9px 0 0;padding:9px 11px;border-left:3px solid var(--brand-line);background:var(--surface-2);border-radius:0 var(--r-xs) var(--r-xs) 0;font-size:12px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}

/* flowchart */
.dtl-flow{display:flex;flex-direction:column;align-items:center;margin-top:16px}
.dtl-arrow{color:var(--ink-3);line-height:0;padding:3px 0}
.dtl-node{width:100%;max-width:460px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--ink-3);border-radius:var(--r-md);padding:11px 13px;cursor:pointer;transition:var(--tr)}
.dtl-node:hover{border-color:var(--brand-line);box-shadow:var(--sh-1)}
.dtl-node.tone-ok{border-left-color:var(--ok)}
.dtl-node.tone-warn{border-left-color:var(--warn)}
.dtl-node.tone-bad{border-left-color:var(--bad)}
.dtl-node.tone-brand{border-left-color:var(--brand)}
.dtl-node-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.dtl-node-date{font-size:10.5px;color:var(--ink-3)}
.dtl-node-l{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.dtl-node-a{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-3)}

@media(max-width:680px){
  .doc-timeline{padding:14px 14px}
  .dtl-item{grid-template-columns:1fr;gap:2px}
  .dtl-when{padding-top:0}
}

/* A table written by the model (v181) — the Cross-document Gaps report is asked
   for one in terms, and until now the parser had no table block, so it rendered
   as a column of pipes. It scrolls inside its own box: a wide table must never
   push the answer column sideways. */
.qa-md-tw{margin:0 0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.qa-md-table{border-collapse:collapse;width:100%;font-size:12.5px;text-align:left}
.qa-md-table th{padding:8px 11px;background:var(--surface-2);border-bottom:1px solid var(--border-2);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;text-align:left}
.qa-md-table td{padding:8px 11px;border-top:1px solid var(--border);vertical-align:top;
  color:var(--ink-2);line-height:1.5;text-align:left;hyphens:none;min-width:120px}
.qa-md-table tr:first-child td{border-top:0}
.qa-md-table td:first-child{font-weight:600;color:var(--ink)}

/* The format control at the foot of DocIQ's analysis rail — separated from the
   lens buttons above it, because it is not a fifth thing to choose between. */
.dint-fmt{margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}


/* ═══ v2.020 — THE OPTIONS PANE, AND IT FITS ═════════════════════════════
   Everything that decides what gets generated, in one column, in the order
   the work is done. The change from v2.019 is that IT NO LONGER SCROLLS
   (asked for directly): the pane is sized so the whole of it — documents,
   acting-for, six tiles, the length toggle, the format picker, Generate and
   Export — is on screen at 768px tall without reaching for a scrollbar.
   Everything below is tuned to that budget, which is why the numbers are
   specific and why the tiles are as short as they are.

   THE PANE CARRIES COLOUR, and the colour is doing a job rather than
   decorating: the pane sits on the shelf tone so it reads as a control
   surface against the report's white paper; the three things the eye needs
   to find — who you act for, what you are generating, and how you get it
   out — are the three that are highlighted; and the selected tile is the
   band, so exactly one thing looks pressed. Tokens throughout, so dark mode
   flips with it. */
/* The card ends where its content ends. flex:1 stretched it to the column and
   left a tall empty panel under the buttons on a 1080px screen — a pane that
   is mostly nothing reads as a pane that failed to finish loading. */
.dint-modes{flex:none;display:flex;flex-direction:column;gap:8px;
  background:var(--surface-2);background-image:var(--shelf-grad);
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px 11px 11px;box-shadow:var(--sh-1)}
.dint-opt-sec{display:flex;flex-direction:column;gap:6px;min-width:0;flex:none}
/* The section labels are the pane's signposts, so they are brand ink and a
   step louder than a plain kick. */
.dint-opt-k{color:var(--brand-ink);font-size:10.5px;letter-spacing:.13em}
.dint-opt-dim{font-size:12px;color:var(--ink-3)}

/* ── ACTING FOR — one row, highlighted, because it changes every report below
   it. It was a label above a select in a stack of identical sections, which
   made the one control with consequences look like the least of them. */
.dint-actfor{display:flex;align-items:center;gap:9px;flex:none;padding:7px 10px;border-radius:var(--r-sm);
  border:1px dashed var(--border-2);background:var(--surface);transition:var(--tr)}
.dint-actfor.on{border-style:solid;border-color:var(--brand-line);background:var(--brand-soft);box-shadow:var(--hi)}
.dint-actfor-k{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dint-actfor.on .dint-actfor-k{color:var(--brand-ink)}
.dint-actfor-sel{flex:1;min-width:0;height:28px;padding:0 6px;border-radius:6px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--ink);font-size:12px;font-weight:600}
.dint-actfor.on .dint-actfor-sel{border-color:var(--brand-line)}
.dint-actfor-dim{flex:1;font-size:11.5px;color:var(--ink-3)}

/* ── 3 × 2 tiles. Short enough that six of them plus everything else clears
   768px; a fixed three-column grid, because the shape is the point. */
.dint-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.dint-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:52px;padding:6px 4px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface);color:var(--ink-2);cursor:pointer;transition:var(--tr);text-align:center}
.dint-tile:hover:not(:disabled){border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-ink)}
.dint-tile:disabled{opacity:.5;cursor:default}
.dint-tile-ic{display:flex;color:var(--tone,var(--brand-ink))}
.dint-tile-ic svg{width:17px;height:17px}
.dint-tile-l{font-size:11px;font-weight:600;line-height:1.2;overflow-wrap:break-word}
/* ALREADY GENERATED. A tick in the corner was easy to miss on a tile you were
   not looking at; the whole tile goes moss and says the word. */
.dint-tile.done{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok-ink)}
.dint-tile.done .dint-tile-ic{color:var(--ok)}
.dint-tile-done{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ok-ink)}
/* Selected wins over generated: exactly one tile is the pressed one. */
.dint-tile.on,.dint-tile.done.on{background:var(--band);background-image:var(--band-grad);border-color:var(--band);
  color:var(--band-ink);box-shadow:var(--sh-2)}
.dint-tile.on .dint-tile-ic{color:var(--brand)}
.dint-tile.on .dint-tile-done{color:var(--brand)}

/* ── Summary or detailed: two halves of one control. */
.dint-depth{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;
  background:var(--surface-3);border-radius:var(--r-sm)}
.dint-depth-b{padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--ink-2);
  font-size:11.5px;font-weight:600;cursor:pointer;transition:var(--tr)}
.dint-depth-b:hover:not(:disabled){color:var(--ink)}
.dint-depth-b.on{background:var(--surface);color:var(--brand-ink);box-shadow:var(--sh-1)}
.dint-depth-b:disabled{opacity:.55;cursor:default}

/* ── The two buttons that end the column: run it, then take it away. Export
   is a real action here, not the quiet icon-button it was in the old card. */
.dint-gen-main{width:100%;border-radius:var(--r-sm);padding:10px;font-size:12.5px;margin-top:2px}
.dint-gen-main:disabled{opacity:.55;cursor:default;box-shadow:none}
.dint-opt-exp{flex:none}
.dint-opt-exp .dint-export{width:100%}
.dint-exp-main{width:100%;justify-content:center;gap:7px;height:36px;font-size:12.5px;font-weight:700;
  border:1px solid var(--band);border-radius:var(--r-sm);
  background:var(--band);background-image:var(--band-grad);color:var(--band-ink);box-shadow:var(--sh-1)}
.dint-exp-main:hover:not(:disabled){background:var(--band-2);border-color:var(--band-2)}
.dint-exp-main:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.dint-exp-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--brand);color:var(--on-brand);font-size:10.5px;font-weight:700}

/* The format picker is the quietest thing in the pane — it is optional. */
.dint-fmt{margin-top:0;padding-top:0;border-top:0}

/* An attachment is a thing you can OPEN, so it looks like one. */
.dint-attach-open{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:0;
  background:none;border:0;text-align:left;color:inherit;cursor:pointer;border-radius:var(--r-xs);transition:var(--tr)}
.dint-attach-open:hover:not(:disabled) .dint-attach-name{color:var(--brand-ink);text-decoration:underline}
.dint-attach-open:disabled{cursor:default;opacity:.75}
.dint-attach-open .dint-attach-id{display:flex;flex-direction:column;min-width:0;flex:1}
.dint-attach-ext{flex:none;color:var(--ink-3)}
/* "Saved" — the original file is in this account's repository, not only in
   this browser tab. Small, moss, and quiet: it is a reassurance, not a
   control. v2.023. */
.dint-attach-kept{flex:none;font-size:10.5px;line-height:1;letter-spacing:.02em;
  padding:3px 6px;border-radius:999px;border:1px solid var(--ok-line);
  background:var(--ok-soft);color:var(--ok)}

@media(max-width:1100px){
  .dint-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── v2.021: the case brief on ONE column ──────────────────────────────────
   Asked for directly, with a screenshot: "Text in the answer is not aligned
   and formatted properly." It was three measures in one card — the header
   and fact pills at the card's 820px, the lede capped at 78ch of 15px, the
   sections at 78ch of their own smaller type and indented 15px behind a
   rule — so every block ended at a different right edge and the sections
   started at a different left one. And justified text with hyphens:auto broke
   words across lines ("ac-tual") in a column that never needed it.
   Now every block shares the card's left and right edge, the text is
   justified without mid-word breaks, and a section is marked by its heading
   (a short brand rule beside it), not by an indent. */
.dint-cons-lede,.dint-cons-t,.dint-cons-secs{max-width:none}
.dint-cons-lede,.dint-cons-t{text-align:justify;text-justify:inter-word;text-align-last:left;
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.dint-cons-lede{font-size:15px;line-height:1.7}
.dint-cons-t{font-size:14px;line-height:1.7;color:var(--ink-2)}
.dint-cons-secs{gap:18px;margin-top:20px}
.dint-cons-sec{border-left:0;padding-left:0}
.dint-cons-sec-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:600}
.dint-cons-sec-h::before{content:"";flex:none;width:3px;height:12px;border-radius:2px;background:var(--brand)}
.dint-brief-sub,.dint-brief-note{max-width:none}
/* the brief's other labels (Parties, Key facts) carry the same mark as its
   section headings, so every heading in the brief looks like one */
.dint-brief-lbl{display:flex;align-items:center;gap:8px;font-weight:600}
.dint-brief-lbl::before{content:"";flex:none;width:3px;height:12px;border-radius:2px;background:var(--brand)}

/* ── v2.022 ─────────────────────────────────────────────────────────────── */
/* "Length", Summary report and Detailed report on ONE line (asked for). */
.dint-opt-sec.dint-opt-row{flex-direction:row;align-items:center;gap:10px}
.dint-opt-row .dint-opt-k{flex:none}
.dint-opt-row .dint-depth{flex:1;min-width:0}
/* The export panel opens upward from its button (its bottom is set inline). */
.exp-pick{top:auto}
/* The chronology's Download, now beside Build / Rebuild, is a button like it,
   not a text link. */
.dtl-actions .dtl-dl > .btn.dtl-copy{text-decoration:none;font-size:13px;color:var(--ink);margin-left:0}