/* ============================================================================
   LP-AI Analysis — design system
   ----------------------------------------------------------------------------
   DIRECTION: "Ledger"

   Thirty years of pension and QDRO records, read by partners who print reports
   and carry them into meetings. So: an archival, editorial register rather than
   a SaaS dashboard. Ink on paper. Hairline rules instead of drop shadows. A
   serif for headings, because the subject matter is legal and the gravity is
   earned. Numbers set in tabular figures throughout, aligned to the character,
   because in this application the numbers ARE the content.

   Restraint is the point. One accent — a deep teal that reads as ink, not as a
   brand colour. Colour is reserved for meaning: money in, money late, caution.
   Nothing is coloured merely to be colourful.

   CONSTRAINTS (from APP-PLAN.md): no build step, no framework, nothing from a
   CDN. Fonts are therefore system faces — but chosen and paired deliberately.
   Cambria/Georgia carries the headings on every Windows and Mac the practice
   runs; Segoe UI carries the data.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  /* --- paper & ink ------------------------------------------------------- */
  --bg:          #F7F6F3;   /* warm paper, not clinical white */
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F7;   /* table stripes, insets */
  --border:      #E3E0DA;   /* hairline */
  --border-firm: #CFCBC3;   /* section rules */

  --text:        #1A1815;
  --text-2:      #56514A;   /* secondary prose */
  --text-3:      #8B857C;   /* labels, captions */

  /* --- accent ------------------------------------------------------------ */
  --accent:      #14586B;
  --accent-2:    #0E4050;   /* hover / pressed */
  --accent-tint: #E8F0F2;   /* selected rows, quiet fills */

  /* --- semantic: colour means something ---------------------------------- */
  --pos:         #1A6B3C;
  --pos-tint:    #E7F1EA;
  --neg:         #A32020;
  --neg-tint:    #F7E9E9;
  --warn:        #8A5A08;
  --warn-tint:   #F8EFDF;

  /* --- aging ramp: one sequential scale, never five arbitrary hues ------- */
  --age-0:       #DCE6E9;
  --age-1:       #B6CDD3;
  --age-2:       #8FB3BC;
  --age-3:       #5F8F9C;
  --age-4:       #34697A;

  /* --- type -------------------------------------------------------------- */
  --font-display: Cambria, Georgia, "Iowan Old Style", "Palatino Linotype",
                  "Book Antiqua", serif;
  --font-body:    "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui,
                  "Helvetica Neue", sans-serif;
  --font-mono:    "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono",
                  ui-monospace, monospace;

  --t-xs: 11.5px;  --t-sm: 13px;   --t-base: 14.5px;  --t-md: 16px;
  --t-lg: 20px;    --t-xl: 26px;   --t-2xl: 34px;

  /* --- space: 4px grid --------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --radius:    7px;
  --radius-sm: 5px;

  /* Depth comes from rules, not shadow. One token, used sparingly. */
  --lift: 0 1px 2px rgba(26, 24, 21, .05);

  --speed: 150ms;
  --ease:  cubic-bezier(.4, 0, .2, 1);
}

/* Dark: after-hours, warm charcoal. Never pure black — it vibrates against
   text and prints nothing useful. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #131211;
    --surface:     #1B1A18;
    --surface-2:   #201F1C;
    --border:      #302E2A;
    --border-firm: #45423C;

    --text:        #F2EFE9;
    --text-2:      #B5AFA5;
    --text-3:      #858077;

    --accent:      #6FB2C4;
    --accent-2:    #93CADA;
    --accent-tint: #1A2C33;

    --pos:         #5FBF85;  --pos-tint:  #16281D;
    --neg:         #E8776F;  --neg-tint:  #2C1919;
    --warn:        #D9A441;  --warn-tint: #2A2313;

    --age-0: #2B3134; --age-1: #3C4A50; --age-2: #4F666F;
    --age-3: #648391; --age-4: #7FA3B2;

    --lift: none;
  }
}

:root[data-theme="dark"] {
  --bg: #131211; --surface: #1B1A18; --surface-2: #201F1C;
  --border: #302E2A; --border-firm: #45423C;
  --text: #F2EFE9; --text-2: #B5AFA5; --text-3: #858077;
  --accent: #6FB2C4; --accent-2: #93CADA; --accent-tint: #1A2C33;
  --pos: #5FBF85; --pos-tint: #16281D;
  --neg: #E8776F; --neg-tint: #2C1919;
  --warn: #D9A441; --warn-tint: #2A2313;
  --age-0: #2B3134; --age-1: #3C4A50; --age-2: #4F666F;
  --age-3: #648391; --age-4: #7FA3B2;
  --lift: none;
}

/* ------------------------------------------------------------- 2. FOUNDATION */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;   /* every figure, everywhere */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.25;
  margin: 0 0 var(--s2);
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--s4); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }

.sub  { color: var(--text-2); margin: 0 0 var(--s5); }
.mute { color: var(--text-3); }
.num  { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); font-size: var(--t-sm); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent-tint); color: var(--text); }

/* ----------------------------------------------------------------- 3. SHELL */

.topbar {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--border-firm);
  position: sticky; top: 0; z-index: 10;
}

.brand {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.brand span { color: var(--text-3); font-weight: 400; }

.freshness {
  display: flex; align-items: center; gap: var(--s2);
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--t-sm);
}

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3); flex: none;
}
.dot.ok   { background: var(--pos); }
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--neg); }
.dot.busy { background: var(--accent); animation: pulse 1.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.user { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); }
.who  { color: var(--text-3); }
.inline { display: inline; margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }

.foot {
  max-width: 1180px; margin: 0 auto;
  padding: 0 var(--s5) var(--s6);
  color: var(--text-3); font-size: var(--t-xs);
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
}

/* Page-load reveal. One orchestrated moment, not scattered fidgeting. */
.wrap > * { animation: rise 320ms var(--ease) backwards; }
.wrap > *:nth-child(1) { animation-delay: 0ms; }
.wrap > *:nth-child(2) { animation-delay: 40ms; }
.wrap > *:nth-child(3) { animation-delay: 80ms; }
.wrap > *:nth-child(4) { animation-delay: 120ms; }
.wrap > *:nth-child(n+5) { animation-delay: 160ms; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ----------------------------------------------------------------- 4. CARDS */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.card > :last-child { margin-bottom: 0; }

.card-head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.card-head h2 { margin: 0; }
.card-head .spacer { margin-left: auto; }

/* ------------------------------------------------------------- 5. KPI TILES */

.grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  margin-bottom: var(--s4);
}
.grid .card { margin: 0; }

.stat { position: relative; }

/* The hairline that makes a tile read as a ledger entry rather than a box. */
.stat::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 2px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent); opacity: .5;
}

.stat-label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
}
.stat-value {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-top: var(--s2);
}
.stat-note { font-size: var(--t-sm); color: var(--text-2); margin-top: var(--s1); }

.delta { font-size: var(--t-sm); font-weight: 600; }
.delta.up   { color: var(--pos); }
.delta.down { color: var(--neg); }
.delta.flat { color: var(--text-3); }

/* ---------------------------------------------------------------- 6. TABLES */

.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

table.data th {
  text-align: left;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 600;
  padding: 0 var(--s3) var(--s2);
  border-bottom: 2px solid var(--border-firm);   /* the register rule */
  white-space: nowrap;
}
table.data td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: var(--surface-2); }
table.data tbody tr:hover { background: var(--accent-tint); }

/* Scoped to table.data on purpose. `table.data th` above sets text-align:left
   at specificity (0,1,2); a bare `th.r` is (0,1,1) and loses to it, which left
   every numeric HEADER aligned left over right-aligned figures while `td.r`
   worked fine -- td has no competing rule. Matching the specificity is the fix;
   !important would only hide the collision. */
table.data th.r, table.data td.r { text-align: right; }
table.data td.r, table.data td.num { font-variant-numeric: tabular-nums; }
table.data td.strong { font-weight: 600; }

/* Row that leads somewhere. */
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* Key/value table — used on detail panels. */
table.kv { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.kv th, table.kv td {
  text-align: left; padding: var(--s2) 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
table.kv th { font-weight: 400; color: var(--text-3); width: 200px; }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------- 7. CHIPS, BADGES, PILLS */

.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-xs); font-weight: 600;
  padding: 2px var(--s2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-firm);
  color: var(--text-2);
  white-space: nowrap;
}
.chip.pos  { color: var(--pos);  border-color: var(--pos);  background: var(--pos-tint); }
.chip.neg  { color: var(--neg);  border-color: var(--neg);  background: var(--neg-tint); }
.chip.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-tint); }
.chip.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* Impact / effort chips on findings. */
.chip-impact { font-family: var(--font-mono); }

/* Aging buckets: one ramp, ordered. */
.age { display: inline-block; padding: 1px var(--s2); border-radius: var(--radius-sm);
       font-size: var(--t-xs); font-weight: 600; color: var(--text); }
.age-0 { background: var(--age-0); }
.age-1 { background: var(--age-1); }
.age-2 { background: var(--age-2); }
.age-3 { background: var(--age-3); color: #fff; }
.age-4 { background: var(--age-4); color: #fff; }

/* --------------------------------------------------------------- 8. BUTTONS */

.btn, .btn-ghost, .btn-quiet {
  font: inherit; font-size: var(--t-sm); font-weight: 500;
  cursor: pointer; border-radius: var(--radius-sm);
  padding: var(--s2) var(--s4);
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.btn {
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-firm);
  padding: var(--s1) var(--s3);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }

.btn-quiet {
  background: none; border: none; color: var(--accent);
  padding: var(--s1) 0; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.btn-quiet:hover { color: var(--accent-2); }

button[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------ 9. DISCLOSURE */
/* "show SQL" — every figure must be able to justify itself. */

details.sql { margin-top: var(--s3); }
details.sql > summary {
  cursor: pointer; list-style: none;
  font-size: var(--t-xs); color: var(--text-3);
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: var(--s1) 0;
}
details.sql > summary::-webkit-details-marker { display: none; }
details.sql > summary::before {
  content: "›"; display: inline-block;
  transition: transform var(--speed) var(--ease);
  font-size: var(--t-base);
}
details.sql[open] > summary::before { transform: rotate(90deg); }
details.sql > summary:hover { color: var(--accent); }

details.sql pre {
  margin: var(--s2) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--text-2);
  white-space: pre;
}

/* ---------------------------------------------------------- 10. FLASH / MSG */

.flash {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s4);
  border: 1px solid; border-left-width: 3px;
  font-size: var(--t-sm);
}
.flash-ok   { border-color: var(--pos);  background: var(--pos-tint);  color: var(--pos); }
.flash-err  { border-color: var(--neg);  background: var(--neg-tint);  color: var(--neg); }
.flash-warn { border-color: var(--warn); background: var(--warn-tint); color: var(--warn); }

/* Data-quality caveat — deliberately visible, never a footnote. */
.caveat {
  font-size: var(--t-xs); color: var(--warn);
  background: var(--warn-tint);
  border-left: 2px solid var(--warn);
  padding: var(--s2) var(--s3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--s3);
}

/* ------------------------------------------------------- 11. FINDING CARDS */
/* The AI report's unit of output: a claim, its size, its cost, its evidence. */

.finding {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.finding-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.finding-rank {
  font-family: var(--font-display); font-size: var(--t-lg);
  color: var(--text-3); font-weight: 600; line-height: 1;
}
.finding-head h3 { margin: 0; flex: 1 1 260px; }
.finding-chips { display: flex; gap: var(--s2); }

/* ----------------------------------------------------------- 12. EMPTY/SKEL */

.empty {
  text-align: center; padding: var(--s7) var(--s5);
  color: var(--text-3);
}
.empty-mark {
  font-family: var(--font-display); font-size: 40px;
  color: var(--border-firm); line-height: 1; margin-bottom: var(--s3);
}

.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 1em;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* -------------------------------------------------------------- 13. FILTERS */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--s4);
}
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); font-weight: 600;
}
.field select, .field input {
  font: inherit; font-size: var(--t-sm);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  min-width: 150px;
}
.field select:focus, .field input:focus { border-color: var(--accent); outline: none; }

/* ---------------------------------------------------------------- 14. LOGIN */

.login-wrap { display: flex; justify-content: center; padding-top: 9vh; }
.login { width: 100%; max-width: 380px; }
.login h1 { font-size: var(--t-xl); }
.login .sub { margin-bottom: var(--s5); }
.login label {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); font-weight: 600;
  margin: var(--s4) 0 var(--s1);
}
.login input {
  width: 100%; font: inherit; padding: var(--s2) var(--s3);
  border: 1px solid var(--border-firm); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
}
.login input:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.login .btn { width: 100%; margin-top: var(--s5); justify-content: center; }

/* ---------------------------------------------------------------- 15. ERROR */

.err-card { max-width: 560px; margin: 9vh auto; text-align: center; }
.err-code {
  font-family: var(--font-display); font-size: 56px; font-weight: 600;
  color: var(--border-firm); letter-spacing: -.03em; line-height: 1;
  margin-bottom: var(--s3);
}
.err-detail {
  text-align: left; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 2px solid var(--neg);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
  overflow-x: auto; font-family: var(--font-mono);
  font-size: var(--t-xs); line-height: 1.6; color: var(--text-2);
}

/* ------------------------------------------------------------ 16. UTILITIES */

.row  { display: flex; gap: var(--s3); align-items: center; }
.row-b { display: flex; gap: var(--s3); align-items: baseline; }
.spacer { margin-left: auto; }
.stack > * + * { margin-top: var(--s3); }
.tight { margin-bottom: var(--s2); }
.nowrap { white-space: nowrap; }
hr.rule { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }

/* -------------------------------------------------------------- 17. STYLEGUIDE */

.sg-section { margin-bottom: var(--s7); }
.sg-section > h2 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); font-family: var(--font-body); font-weight: 700;
  padding-bottom: var(--s2); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.sg-swatches { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sg-swatch { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.sg-chip-color { height: 52px; }
.sg-swatch code { display: block; padding: var(--s2); font-size: 10.5px;
                  font-family: var(--font-mono); color: var(--text-3); background: var(--surface); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* Swatch fills for the styleguide. Written as classes rather than inline
   style attributes because the Content-Security-Policy is style-src 'self',
   which blocks inline styles as well as inline scripts. Keeping the policy
   strict and the markup compliant is the better trade. */
.sw-bg          { background: var(--bg); }
.sw-surface     { background: var(--surface); }
.sw-surface-2   { background: var(--surface-2); }
.sw-border      { background: var(--border); }
.sw-border-firm { background: var(--border-firm); }
.sw-text        { background: var(--text); }
.sw-text-2      { background: var(--text-2); }
.sw-text-3      { background: var(--text-3); }
.sw-accent      { background: var(--accent); }
.sw-accent-2    { background: var(--accent-2); }
.sw-accent-tint { background: var(--accent-tint); }
.sw-pos         { background: var(--pos); }
.sw-neg         { background: var(--neg); }
.sw-warn        { background: var(--warn); }

.sg-header  { margin-bottom: var(--s5); }
.sg-flush   { margin: 0; }
.sg-h3      { margin-top: var(--s5); }
.sg-bignum  { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.025em; }

/* Unit suffix — "156d", where the d is quieter than the number it follows.
   Sized in em, not px: the same markup appears beside a 34px KPI figure and
   beside 13px table text, and a fixed size is wrong in one of them. */
.unit { font-size: .68em; color: var(--text-3); font-weight: 500; margin-left: .5px; }

/* Skeleton widths, so loading states look like the content they stand in for
   rather than a row of identical bars. */
.w45 { width: 45%; } .w72 { width: 72%; }
.w80 { width: 80%; } .w88 { width: 88%; }

/* ---------------------------------------------------------------- 19. PRINT
   Swatches are meaningless on paper. */
@media print {
  .sg-swatches, .sg-row { break-inside: avoid; }
  .sg-chip-color { border: 1px solid #ccc; }
}

/* ---------------------------------------------------------------- 18. PRINT */
/* Partners print these and take them into meetings. */

@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #fff;
    --text: #000; --text-2: #333; --text-3: #555;
    --border: #ccc; --border-firm: #999; --lift: none;
  }
  .topbar, .foot, .filters, .btn, .btn-ghost, .btn-quiet,
  .user, .freshness, form { display: none !important; }

  body { background: #fff; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }
  .wrap > * { animation: none; }

  .card, .finding {
    border: 1px solid #ccc; box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
    margin-bottom: 12pt; padding: 10pt;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  table.data { font-size: 9.5pt; }
  table.data thead { display: table-header-group; }   /* repeat on every page */
  table.data tr { break-inside: avoid; }
  details.sql { display: none; }                      /* SQL is for the screen */
  .caveat { border: 1px solid #999; color: #000; }    /* caveats must survive */
  a { text-decoration: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}


/* ---------------------------------------------------------------- 20. SUBNAV
   Section tabs. A rule under the active item rather than a filled pill --
   quieter, and it echoes the register rule under every table header. */
.subnav {
  display: flex; gap: var(--s5);
  padding: 0 var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.subnav a {
  padding: var(--s3) 0;
  font-size: var(--t-sm);
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.subnav a:hover { color: var(--text); }
.subnav a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.stack li + li { margin-top: var(--s2); }
ul.stack { padding-left: var(--s4); margin: 0; }

@media print { .subnav { display: none; } }


/* ------------------------------------------------------------------ 21. CHAT
   A transcript, not a messaging app. The answer and its evidence are one
   block: an answer that cannot show its working is not usable for decisions
   about client money. */
.chat-head { margin-bottom: var(--s5); }

.turn { margin-bottom: var(--s5); }

.ask {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--text);
  padding-left: var(--s4);
  border-left: 3px solid var(--accent);
  margin-bottom: var(--s3);
}

.reply {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
}
.reply-bad { border-left: 3px solid var(--neg); }
.reply p:last-of-type { margin-bottom: 0; }

.tool-strip {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.reply-meta {
  margin-top: var(--s3);
  font-size: var(--t-xs);
  color: var(--text-3);
}

.ask-form textarea {
  width: 100%; font: inherit; font-size: var(--t-base);
  padding: var(--s3);
  border: 1px solid var(--border-firm); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); resize: vertical;
}
.ask-form textarea:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.ask-actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.ask-hint { font-size: var(--t-xs); }
.ask-actions .btn { margin-left: auto; }

.suggestions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.suggestion {
  font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.suggestion:hover { border-color: var(--accent); color: var(--text); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media print { .ask-form, .suggestions { display: none; } }


/* -------------------------------------------------------------- 22. ANALYSIS
   Two ways of putting a question to the same data: the panel read for you,
   and the follow-up you ask yourself. Tabs, not separate destinations. */

.tabs {
  display: flex; gap: var(--s5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s5);
}
.tabs a {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  color: var(--text-3); text-decoration: none;
  padding: var(--s2) 0 var(--s3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Provenance line. A finding without its data vintage is undated evidence. */
.analysis-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  font-size: var(--t-xs); color: var(--text-3);
  margin-bottom: var(--s4);
}

.analysis-summary p { font-size: var(--t-md); }
.analysis-summary p:last-child { margin-bottom: 0; }

/* What to do about it -- the part of a finding that is not just reporting. */
.actions {
  margin: var(--s4) 0 0; padding-left: var(--s5);
  font-size: var(--t-sm);
}
.actions li { margin-bottom: var(--s2); }
.actions li:last-child { margin-bottom: 0; }
.actions li::marker { color: var(--accent); font-weight: 600; }

.finding-caveat { margin-top: var(--s4); }

.evidence {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--border);
}
.evidence-label {
  font-size: var(--t-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em;
}

.analysis-panel .panel-item { margin-bottom: var(--s4); }
.analysis-panel .panel-item:last-child { margin-bottom: 0; }
.panel-head {
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: var(--t-sm); margin-bottom: var(--s2);
}
.panel-head .mute { font-size: var(--t-xs); }

.analysis-again {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s6);
}
.analysis-again form { margin-left: auto; }

@media print {
  .tabs, .analysis-again, .analysis-panel { display: none; }
}

/* ------------------------------------------------- 23. ASSISTANT PROSE
   Output from the model, rendered by Markup. Headings sit inside a reply
   card, so they are quieter than the page's own -- an answer with five
   sections must not read as five documents. */
/* .finding > h3 is a narrative heading. The finding's own title lives
   inside .finding-head, so it is not a direct child and keeps its own
   larger styling. */
.reply h3, .analysis-summary h3, .finding > h3 {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: var(--s5) 0 var(--s2);
}
.reply > h3:first-child,
.analysis-summary > h3:first-child { margin-top: 0; }

.reply ul, .reply ol,
.analysis-summary ul, .analysis-summary ol,
.finding ul, .finding ol:not(.actions) {
  margin: 0 0 var(--s3);
  padding-left: var(--s5);
}
.reply li, .analysis-summary li, .finding li { margin-bottom: var(--s2); }
.reply li:last-child, .analysis-summary li:last-child { margin-bottom: 0; }
.reply ol > li::marker, .analysis-summary ol > li::marker { color: var(--accent); font-weight: 600; }
.reply ul > li::marker, .analysis-summary ul > li::marker { color: var(--border-firm); }

.reply strong, .analysis-summary strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ 24. MATTER
   One engagement, one card per case. The diary is the centre of the page --
   everything else is context for reading it. */
.matter-case { margin-bottom: var(--s5); }
.matter-case .card-head { align-items: center; gap: var(--s2); }

.matter-sub {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: var(--s5) 0 var(--s3);
  display: flex; align-items: baseline; gap: var(--s3);
}
.matter-sub .mute { text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }

/* Diary entries are dated lines, not paragraphs of argument. Tighter leading
   and a rule down the left make thirty years of them scannable. */
.diary {
  font-size: var(--t-sm);
  line-height: 1.55;
  border-left: 2px solid var(--border);
  padding-left: var(--s4);
  max-height: 32em;
  overflow-y: auto;
}
.diary p { margin-bottom: var(--s2); }
.diary p:last-child { margin-bottom: 0; }

/* The redaction preview. Marked as a different kind of text so nobody mistakes
   it for the record -- it is a rehearsal of what would be sent. */
.diary-redacted {
  border-left-color: var(--accent);
  background: var(--surface-2);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm);
}
.diary-redacted p { color: var(--text-2); }

@media print {
  .diary { max-height: none; overflow: visible; }
}

/* The briefing sits above the record it was written from -- it is the first
   thing read and the least authoritative thing on the page, so it gets the
   accent rule that marks generated text rather than recorded fact. */
.briefing { border-left: 3px solid var(--accent); }
.briefing-body h3:first-child { margin-top: 0; }
.briefing-run { margin-top: var(--s4); }

/* ------------------------------------------------------- 25. MATTER FINDER
   The tab strip carries the search, because looking up one matter is what
   people came to do regardless of which list they are looking at. */
.tabs-row {
  display: flex; align-items: flex-end; gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.tabs-row .tabs { flex: 1 1 auto; margin-bottom: 0; }

.finder { position: relative; flex: 0 1 300px; padding-bottom: var(--s3); }
.finder-input {
  width: 100%; font: inherit; font-size: var(--t-sm);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-firm); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.finder-input:focus { border-color: var(--accent); outline: none; }

/* Absolute so the list floats over the table rather than shoving it down --
   a page that jumps as you type is a page you cannot aim at. */
.finder-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0; list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-firm); border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  max-height: 20em; overflow-y: auto;
}
.finder-list li {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s2) var(--s3);
  cursor: pointer; font-size: var(--t-sm);
  border-bottom: 1px solid var(--border);
}
.finder-list li:last-child { border-bottom: 0; }
.finder-list li:hover, .finder-list li.on { background: var(--accent-tint); }
.finder-name { color: var(--text); font-weight: 500; }
.finder-meta { color: var(--text-3); font-size: var(--t-xs); }
.finder-empty { color: var(--text-3); cursor: default; }
.finder-empty:hover { background: none; }

@media print { .finder, .tabs-row .tabs { display: none; } }

/* ------------------------------------------------- 26. ASSISTANT PROSE, cont.
   .briefing-body was missing from section 22, so the matter briefing's lists
   fell through to browser defaults while the same markup on /analysis and Ask
   was styled. Naming every surface once, here, rather than adding a fourth
   selector list further up. */
.briefing-body h3 {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: var(--s5) 0 var(--s2);
}
.briefing-body ul, .briefing-body ol {
  margin: 0 0 var(--s3);
  padding-left: var(--s5);
}
.briefing-body li { margin-bottom: var(--s2); }
.briefing-body li:last-child { margin-bottom: 0; }
.briefing-body ol > li::marker { color: var(--accent); font-weight: 600; }
.briefing-body ul > li::marker { color: var(--border-firm); }
.briefing-body strong { color: var(--text); font-weight: 600; }

/* A list item that carries an explanatory paragraph. The paragraph belongs to
   the item, so it indents with it -- flush left under its own number is what
   made the briefing read as a broken list rather than a structured one. */
.reply li > p,
.analysis-summary li > p,
.briefing-body li > p,
.finding li > p {
  margin: var(--s2) 0 var(--s3);
  color: var(--text-2);
}
.reply li > p:last-child,
.analysis-summary li > p:last-child,
.briefing-body li > p:last-child,
.finding li > p:last-child { margin-bottom: 0; }

/* Loose items need air between them; tight ones must not gain any. */
.briefing-body li:has(> p),
.reply li:has(> p),
.analysis-summary li:has(> p) { margin-bottom: var(--s4); }