/* ==========================================================================
   LexCopia / Family Docket AI — application stylesheet
   Rewritten 2026-08-26 against docs/design/design-system.md

   The token values below are not invented. They were derived by reading the
   shipped stylesheets of Harvey AI, Legora, Clio, Spellbook, Ironclad and
   Linear. Two decisions carry most of the visual weight:

     1. WARM neutrals, not cool grey. A warm off-white reads as paper; a cool
        blue-grey reads as software. Every legal product studied ships warm.
     2. A SERIF for headings. Four of six products studied load a serif display
        face. It signals authority, which is the whole job here.

   No build step, no framework. The project rule is "legibility beats
   cleverness" and it applies to the CSS as much as to the Python.
   ========================================================================== */

@import url('fonts.css');

/* --------------------------------------------------------------------------
   Layer 1 — primitives. Components never reference these directly.
   -------------------------------------------------------------------------- */
:root {
  /* Warm neutral ramp (~40deg yellow-brown hue). */
  --n-0:#FFFFFF;   --n-25:#FBFAF8;  --n-50:#F6F4F1;  --n-100:#EFEDE8;
  --n-200:#E3E0D9; --n-300:#CFCBC2; --n-400:#A9A49A; --n-450:#948D80;
  --n-500:#857F74; --n-600:#6B6459; --n-700:#4E4840; --n-800:#33302B;
  --n-900:#201E1B; --n-950:#12100E;

  /* Deep legal navy. One primary. Never a gradient. */
  --p-50:#F1F6FA;  --p-100:#E4EEF5; --p-200:#C6DBEA; --p-300:#94BCD6;
  --p-500:#2A76A8; --p-600:#1C5C87; --p-700:#14496E; --p-800:#0E3A58;
  --p-900:#0A2C44; --p-950:#061C2C;

  /* Brass. Documents and seals, not "tech". Used sparingly. */
  --a-50:#FBF4E9;  --a-100:#F6E9D5; --a-500:#C2761F; --a-600:#A8631A;
  --a-700:#8A4F14;

  --success-100:#E3F1E7; --success-700:#1F6B3E; --success-900:#14532B;
  --warning-100:#FBF0D9; --warning-800:#7A4E08; --warning-900:#6B4405;
  --danger-100:#F9E6E5;  --danger-700:#9B2C2C;  --danger-900:#7F2222;

  --font-serif:"Source Serif 4","Source Serif Pro",Charter,"Bitstream Charter",
               Cambria,Georgia,"Times New Roman",Times,serif;
  --font-sans:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,
              "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-100:.6875rem; --fs-200:.75rem;  --fs-250:.8125rem; --fs-300:.9375rem;
  --fs-400:1.0625rem; --fs-500:1.25rem; --fs-600:1.5rem;  --fs-700:1.875rem;

  --lh-heading:1.25; --lh-body:1.6; --lh-dense:1.45;
  --ls-heading:-0.014em; --ls-caps:0.08em;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;  --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;

  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-full:9999px;

  --shadow-ring:0 0 0 1px #00000014;
  --shadow-sm:0 1px 2px #0000000d;
  --shadow-lg:0 0 0 1px #00000014, 0 16px 32px -12px #0000001f;
  --focus-ring:0 0 0 2px var(--n-25), 0 0 0 4px var(--p-600);

  --dur-fast:120ms; --dur-base:180ms; --ease:cubic-bezier(.2,0,.2,1);
  --nav-h:56px; --content-max:1180px; --measure:68ch;

  /* Semantic aliases. Rebrand later by editing only this block. */
  --bg-page:var(--n-25); --bg-surface:var(--n-0); --bg-sunken:var(--n-50);
  --bg-hover:var(--n-50); --bg-inverse:var(--p-950);
  --text-primary:var(--n-950); --text-body:var(--n-900);
  --text-secondary:var(--n-600); --text-muted:var(--n-500);
  --text-inverse:var(--n-25);
  --text-link:var(--p-700); --text-link-hover:var(--p-800);
  --border-default:var(--n-200); --border-emph:var(--n-300);
  --border-control:var(--n-450);
  --action-bg:var(--p-700); --action-bg-hover:var(--p-800); --action-fg:var(--n-0);
}

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

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-300);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 {
  font-family:var(--font-serif);
  font-weight:600;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:var(--text-primary);
  margin:0;
}
h2 { font-size:var(--fs-600); }
h3 { font-size:var(--fs-500); }

a { color:var(--text-link); text-decoration:none; }
a:hover { color:var(--text-link-hover); text-decoration:underline; }

:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); }

.muted { color:var(--text-secondary); }
.mono  { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   Top navigation. Dark bar, serif wordmark, brass underline on the active tab.
   Replaces the previous state of having no navigation at all.
   -------------------------------------------------------------------------- */
.nav {
  background:var(--bg-inverse);
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 var(--sp-6);
  gap:var(--sp-8);
  position:sticky; top:0; z-index:20;
}
.nav-inner {
  width:100%; max-width:var(--content-max); margin:0 auto;
  display:flex; align-items:center; gap:var(--sp-8);
}
.nav-brand {
  font-family:var(--font-serif); font-size:var(--fs-400); font-weight:600;
  color:#fff; letter-spacing:var(--ls-heading); white-space:nowrap;
}
.nav-brand:hover { color:#fff; text-decoration:none; }
.nav-brand .sub {
  font-family:var(--font-sans); font-size:var(--fs-200); font-weight:400;
  color:#FFFFFF99; margin-left:var(--sp-2);
}
.nav-links { display:flex; gap:var(--sp-1); align-items:center; flex:1; }
.nav-links a {
  color:#FFFFFFCC; font-size:var(--fs-250); font-weight:500;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-links a:hover { color:#fff; background:#FFFFFF14; text-decoration:none; }
.nav-links a.active { color:#fff; border-bottom-color:var(--a-500); }
.nav-right { display:flex; align-items:center; gap:var(--sp-4); }
.nav-right a { color:#FFFFFFCC; font-size:var(--fs-250); }
.nav-right a:hover { color:#fff; }

/* Environment badge. The old build used red for LIVE, which read as an error
   on every page. Both states are now calm and informational. */
.badge {
  font-size:var(--fs-100); font-weight:600; letter-spacing:var(--ls-caps);
  text-transform:uppercase; padding:3px var(--sp-2); border-radius:var(--r-xs);
  white-space:nowrap;
}
.badge.mock { background:#FFFFFF1F; color:#FFFFFFD9; }
.badge.live { background:var(--a-500); color:#241304; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { max-width:var(--content-max); margin:0 auto; padding:var(--sp-8) var(--sp-6) var(--sp-16); }
.page-head { margin-bottom:var(--sp-6); }
.page-head h2 { font-size:var(--fs-700); }
.page-head .sub { color:var(--text-secondary); margin:var(--sp-2) 0 0; max-width:var(--measure); }

/* The non-advice disclaimer. It must stay on every page for professional
   -responsibility reasons, but it does not need to shout. One quiet line with
   a brass rule, rather than the full-width amber panel it replaced. */
.disclaimer {
  border-left:3px solid var(--a-500);
  background:var(--a-50);
  color:var(--warning-900);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-250);
  line-height:var(--lh-dense);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-bottom:var(--sp-6);
}

.flash {
  background:var(--p-50); border:1px solid var(--p-200); color:var(--p-900);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-5); font-size:var(--fs-300);
}

.card {
  background:var(--bg-surface);
  border:1px solid var(--border-default);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-ring);
  padding:var(--sp-6);
  margin-bottom:var(--sp-5);
}
.card > h2 { font-size:var(--fs-500); margin-bottom:var(--sp-4); }
/* Forms read badly at full 1180px width -- a text input a metre wide looks
   unfinished. Cards that are mostly form get a comfortable reading measure. */
.card-form { max-width:760px; }

/* --------------------------------------------------------------------------
   Stat tiles. The case view already computed these numbers and buried them in
   a three-row table. Surfacing them is the cheapest credibility win available.
   -------------------------------------------------------------------------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.stat {
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md); box-shadow:var(--shadow-ring); padding:var(--sp-5);
}
.stat .num {
  font-family:var(--font-serif); font-size:var(--fs-700); font-weight:600;
  color:var(--text-primary); line-height:1.1; font-variant-numeric:tabular-nums;
}
.stat .lbl {
  font-size:var(--fs-200); color:var(--text-secondary);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  font-weight:600; margin-top:var(--sp-2);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label { display:block; font-weight:600; font-size:var(--fs-250); margin:var(--sp-5) 0 var(--sp-2); color:var(--text-primary); }
input[type=text], input[type=password], input[type=file], select {
  width:100%; padding:var(--sp-3); font-family:inherit; font-size:var(--fs-300);
  color:var(--text-body); background:var(--bg-surface);
  border:1px solid var(--border-control); border-radius:var(--r-sm);
}
input:focus-visible, select:focus-visible { border-color:var(--p-600); }
.hint { color:var(--text-secondary); font-size:var(--fs-200); margin-top:var(--sp-2); line-height:var(--lh-dense); }

button, .btn {
  display:inline-block; font-family:inherit; font-size:var(--fs-300); font-weight:600;
  padding:var(--sp-3) var(--sp-5); border:1px solid transparent;
  border-radius:var(--r-sm); cursor:pointer;
  background:var(--action-bg); color:var(--action-fg);
  transition:background var(--dur-fast) var(--ease);
}
button { margin-top:var(--sp-5); }
button:hover, .btn:hover { background:var(--action-bg-hover); color:var(--action-fg); text-decoration:none; }
button:disabled { background:var(--n-400); cursor:not-allowed; }
.btn-secondary { background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-emph); }
.btn-secondary:hover { background:var(--bg-hover); color:var(--text-primary); }

.dropzone {
  border:1px dashed var(--n-300); border-radius:var(--r-md);
  padding:var(--sp-8) var(--sp-5); text-align:center; background:var(--bg-sunken);
  transition:border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.dropzone.over { border-color:var(--p-600); background:var(--p-50); }
.dropzone .dz-main { margin:0 0 var(--sp-1); font-weight:600; font-size:var(--fs-400); color:var(--text-primary); }
.dropzone .dz-sub  { margin:0 0 var(--sp-3); color:var(--text-secondary); font-size:var(--fs-250); }
.dropzone button { margin-top:0; }
.dz-count { margin:var(--sp-3) 0 0; font-size:var(--fs-250); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
table.fields, table.data { width:100%; border-collapse:collapse; font-size:var(--fs-250); }
table.fields th, table.fields td, table.data th, table.data td {
  text-align:left; vertical-align:top; padding:var(--sp-3) var(--sp-3);
  border-bottom:1px solid var(--border-default); line-height:var(--lh-dense);
}
table.fields th { width:30%; color:var(--text-secondary); font-weight:600; }
table.data thead th {
  background:var(--bg-sunken); font-size:var(--fs-100); font-weight:700;
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-secondary);
  border-bottom:1px solid var(--border-emph);
}
table.data tbody tr:hover { background:var(--bg-hover); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   Badges, flags, provisions
   -------------------------------------------------------------------------- */
.flag {
  display:inline-block; background:var(--danger-100); color:var(--danger-900);
  border:1px solid #E7C4C2; border-radius:var(--r-xs);
  padding:1px var(--sp-2); font-size:var(--fs-200); font-weight:600;
}
a.flag-link {
  display:inline-block; background:var(--p-50); color:var(--p-800);
  border:1px solid var(--p-200); border-radius:var(--r-xs);
  padding:1px var(--sp-2); font-size:var(--fs-200); font-weight:500;
  margin:2px var(--sp-1) 2px 0; text-decoration:none;
}
a.flag-link:hover { background:var(--p-100); text-decoration:none; }
.review-flag {
  display:inline-block; background:var(--warning-100); color:var(--warning-900);
  border:1px solid #E8D5A8; border-radius:var(--r-xs);
  padding:1px var(--sp-2); font-size:var(--fs-200); font-weight:700; margin-top:var(--sp-2);
}

ul.provisions { list-style:none; padding:0; margin:0; }
ul.provisions > li {
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
  border-bottom:1px solid var(--border-default); padding:var(--sp-3) 0;
}
ul.provisions > li:last-child { border-bottom:0; }
.prov-cat { font-weight:600; font-size:var(--fs-300); }
a.prov-link { color:var(--text-link); }
.prov-meta { font-size:var(--fs-200); color:var(--text-muted); }
.prov-note {
  font-size:var(--fs-200); color:var(--warning-900); background:var(--a-50);
  border-left:3px solid var(--a-500); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-3);
}

ul.recent { list-style:none; padding:0; margin:0; }
ul.recent li {
  padding:var(--sp-3) 0; border-bottom:1px solid var(--border-default);
  font-size:var(--fs-250);
}
ul.recent li:last-child { border-bottom:0; }

pre.legal {
  white-space:pre-wrap; word-wrap:break-word; background:var(--bg-sunken);
  border:1px solid var(--border-default); border-radius:var(--r-sm);
  padding:var(--sp-4); font-family:var(--font-mono);
  font-size:var(--fs-250); line-height:var(--lh-dense); overflow-x:auto;
}
.pdfview {
  width:100%; height:600px; border:1px solid var(--border-default);
  border-radius:var(--r-sm); background:var(--bg-surface);
}

a.back { font-size:var(--fs-250); }
a.dl-btn {
  display:inline-block; background:var(--action-bg); color:var(--action-fg);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-250); font-weight:600; margin:var(--sp-1) var(--sp-2) var(--sp-1) 0;
}
a.dl-btn:hover { background:var(--action-bg-hover); color:var(--action-fg); text-decoration:none; }
a.dl-btn-amber { background:var(--a-700); }
a.dl-btn-amber:hover { background:#6F3F10; }

/* --------------------------------------------------------------------------
   Processing overlay.

   WHY THIS EXISTS: uploading runs live AI and can take a minute or more.
   Before this, the browser simply froze with no feedback, so a user (or
   someone being given a demo) could not tell "working" from "crashed".
   -------------------------------------------------------------------------- */
.overlay {
  position:fixed; inset:0; background:#12100EA6;
  display:none; align-items:center; justify-content:center; z-index:50;
}
.overlay.on { display:flex; }
.overlay-box {
  background:var(--bg-surface); border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-10); text-align:center; max-width:420px;
  box-shadow:var(--shadow-lg);
}
.spinner {
  width:36px; height:36px; margin:0 auto var(--sp-5); border-radius:var(--r-full);
  border:3px solid var(--n-200); border-top-color:var(--p-700);
  animation:spin 900ms linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.overlay-title {
  font-family:var(--font-serif); font-size:var(--fs-500); font-weight:600;
  margin:0 0 var(--sp-2); color:var(--text-primary);
}
.overlay-sub { font-size:var(--fs-250); color:var(--text-secondary); margin:0 0 var(--sp-4); line-height:var(--lh-dense); }
.overlay-clock { font-size:var(--fs-250); font-weight:600; color:var(--p-700); font-variant-numeric:tabular-nums; margin:0; }
@media (prefers-reduced-motion:reduce) { .spinner { animation-duration:2.4s; } }

/* --------------------------------------------------------------------------
   Login — a centred card on the dark navy field, so the first screen looks
   like a product rather than an internal tool.
   -------------------------------------------------------------------------- */
body.login-page { background:var(--bg-inverse); }
.login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.login-card {
  background:var(--bg-surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:var(--sp-10); width:100%; max-width:400px;
}
.login-brand { font-family:var(--font-serif); font-size:var(--fs-600); font-weight:600; color:var(--text-primary); margin:0 0 var(--sp-1); }
.login-tag { font-size:var(--fs-250); color:var(--text-secondary); margin:0 0 var(--sp-6); }
.login-card button { width:100%; }
.login-foot { text-align:center; margin-top:var(--sp-6); font-size:var(--fs-200); color:#FFFFFF8C; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width:720px) {
  .wrap { padding:var(--sp-5) var(--sp-4) var(--sp-12); }
  .nav { padding:0 var(--sp-4); }
  .nav-brand .sub { display:none; }
  .page-head h2 { font-size:var(--fs-600); }
  table.data { font-size:var(--fs-200); }
}