/* ============================================================================
   AVID Fulfillment — "Counsel's Ledger"
   A legal-editorial design system drawn from the artifacts this app produces:
   pleading paper (the red+navy margin rules), recorded deeds (engraved serif
   headings), and ledgers (tabular mono figures, hairline rules).
   Type: Fraunces (display serif) · Atkinson Hyperlegible (body) ·
         Spline Sans Mono (filenames, dates, figures).
   ========================================================================= */

:root {
  /* brand */
  --avid-primary:#0B2C4A;      /* ink navy (deepened from #002E4F) */
  --avid-navy-deep:#071E33;
  --avid-accent:#0171BD;       /* cobalt — actions */
  --brass:#A07C2C;             /* engraved-plate brass — labels & fine rules */
  --plead-red:#B3413B;         /* pleading-paper margin rule */
  /* surfaces */
  --bg:#F4F1E9;                /* warm parchment */
  --paper:#FDFCF8;             /* card paper */
  --ink:#1C2127;
  --muted:#6E6A5E;             /* warm gray */
  --line:#E2DCCC;              /* hairline on parchment */
  --line-strong:#CFC7B0;
  /* type */
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-card:0 1px 2px rgba(28,33,39,.05), 0 6px 18px -8px rgba(11,44,74,.10);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

body {
  margin:0; font-family:var(--sans); font-size:15px; line-height:1.5;
  color:var(--ink); min-height:100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(1,113,189,.045), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(160,124,44,.05), transparent 55%),
    var(--bg);
}

/* THE SIGNATURE — pleading-paper double margin rule down the left edge */
body::before {
  content:""; position:fixed; inset:0 auto 0 0; width:26px; z-index:5;
  pointer-events:none;
  background:
    linear-gradient(to right,
      transparent 14px, var(--plead-red) 14px, var(--plead-red) 15.5px,
      transparent 15.5px, transparent 20px,
      var(--avid-primary) 20px, var(--avid-primary) 21px, transparent 21px);
  opacity:.38;
}
@media (max-width:880px) { body::before { display:none; } }

a { color:var(--avid-accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }

/* ---- Top bar: engraved nameplate ---- */
.topbar {
  display:flex; align-items:center; gap:1.5rem;
  background:linear-gradient(180deg, var(--avid-primary), var(--avid-navy-deep));
  color:#fff; padding:.7rem 1.5rem .7rem 2.4rem;
  border-bottom:2px solid var(--brass);
  position:relative; z-index:6;
}
.topbar .brand {
  color:#fff; font-family:var(--serif); font-weight:600; font-size:1.18rem;
  letter-spacing:.01em;
}
.topbar .brand::after {
  content:"ENGINE"; font-family:var(--sans); font-size:.55rem; font-weight:700;
  letter-spacing:.22em; color:#C9A85C; vertical-align:.45em; margin-left:.55rem;
}
.topbar nav { display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.topbar nav a {
  color:#BBD3E8; font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.topbar nav a:hover { color:#fff; text-decoration:none; }
.topbar .who { color:#7E9CB8; font-size:.8rem; letter-spacing:.01em; }

.container { max-width:1140px; margin:0 auto; padding:1.6rem 1.4rem 3rem 2.2rem; }

/* ---- Headings: deed-plate serif + brass section labels ---- */
.page-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.1rem; }
h1 {
  font-family:var(--serif); font-weight:600; font-size:1.7rem;
  letter-spacing:-.01em; margin:.2rem 0; color:var(--avid-primary);
}
h2 {
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
  margin:0 0 .7rem;
}
h2::after { content:""; flex:1; height:1px; background:var(--line); }
.count { color:var(--muted); font-size:.9rem; font-weight:400; font-family:var(--mono); }
.muted { color:var(--muted); }

/* ---- Buttons ---- */
.btn {
  display:inline-block; border:1px solid var(--line-strong); background:var(--paper);
  color:var(--ink); padding:.5rem .95rem; border-radius:.45rem; cursor:pointer;
  font-family:var(--sans); font-size:.88rem; font-weight:600;
  transition:border-color .12s, background .12s, transform .06s;
}
.btn:hover { border-color:var(--avid-primary); background:#fff; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn.primary {
  background:var(--avid-primary); border-color:var(--avid-primary); color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.btn.primary:hover { background:#12395d; }
.btn.small { padding:.22rem .6rem; font-size:.78rem; }

.filters { display:flex; gap:.5rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.filters input, .filters select {
  padding:.48rem .65rem; border:1px solid var(--line-strong); border-radius:.45rem;
  background:var(--paper); font-family:var(--sans); font-size:.88rem; color:var(--ink);
}
.filters input:focus, .filters select:focus, input:focus, select:focus, textarea:focus {
  outline:2px solid rgba(1,113,189,.35); outline-offset:1px; border-color:var(--avid-accent);
}

/* ---- Tables: the ledger ---- */
.grid {
  width:100%; border-collapse:collapse; background:var(--paper);
  border:1px solid var(--line); border-radius:.6rem; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.grid th, .grid td { text-align:left; padding:.62rem .8rem; border-bottom:1px solid var(--line); font-size:.88rem; }
.grid th {
  background:#EFEAD9; color:var(--avid-primary); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line-strong);
}
.grid tbody tr { cursor:pointer; transition:background .1s; }
.grid tbody tr:hover { background:#F8F4E8; }
.grid tbody tr:last-child td { border-bottom:none; }
.grid td:first-child, .grid th:first-child { padding-left:1rem; }
.grid.compact th, .grid.compact td { padding:.45rem .6rem; }
.grid.compact td:first-of-type { font-family:var(--mono); font-size:.8rem; }

.empty {
  text-align:center; padding:3rem 1rem; background:var(--paper);
  border:1px dashed var(--line-strong); border-radius:.6rem; color:var(--muted);
  font-family:var(--serif); font-style:italic;
}

/* ---- Cards: paper on parchment ---- */
.brief { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.card {
  background:var(--paper); border:1px solid var(--line); border-radius:.6rem;
  padding:1.05rem 1.2rem; box-shadow:var(--shadow-card);
}
.card dl { display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; margin:0; font-size:.88rem; }
.card dt { color:var(--muted); }
.card dd { margin:0; }
.card li.blocking { color:var(--plead-red); font-weight:700; }

/* page-load: quiet staggered settle */
@keyframes settle { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
main > .card, main > section, main > .matter-body, main > .brief, main > table.grid,
main > .matter-head, main > .statusbar {
  animation:settle .38s cubic-bezier(.2,.7,.3,1) backwards;
}
main > :nth-child(2) { animation-delay:.04s; }
main > :nth-child(3) { animation-delay:.08s; }
main > :nth-child(4) { animation-delay:.12s; }
main > :nth-child(5) { animation-delay:.16s; }
main > :nth-child(6) { animation-delay:.20s; }

.login {
  max-width:430px; margin:9vh auto; text-align:center; background:var(--paper);
  padding:2.4rem 2.2rem; border:1px solid var(--line); border-radius:.7rem;
  box-shadow:var(--shadow-card); border-top:3px solid var(--brass);
}
.login h1 { font-size:1.5rem; }

.flash {
  background:#EFF6EE; border:1px solid #BFDDBC; color:#23522B;
  padding:.6rem .9rem; border-radius:.45rem; margin-bottom:1rem; font-size:.88rem;
}
.flash-err { background:#FBEFEC; border-color:#E8C2BC; color:#8C3127; }
.page-head form { margin-left:auto; }

/* ---- Matter brief: caption header ---- */
.matter-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.matter-head .back { font-size:.8rem; letter-spacing:.02em; }
.matter-head h1 { margin:.15rem 0 .4rem; font-size:1.85rem; }
.caption-chips { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.chip {
  font-size:.72rem; font-weight:700; padding:.2rem .65rem; border-radius:1rem;
  letter-spacing:.04em;
}
.chip.track { background:#E3E9EF; color:var(--avid-primary); }
.chip.phase { background:#E1EFFA; color:#085f9c; }
.chip.status { background:#EFEAD9; color:#6E6A5E; font-weight:600; }
.chip.status-active { background:#EFF6EE; color:#23522B; }
.caption-chips .sub { font-size:.82rem; margin-left:.2rem; }
.parties-line { display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; margin:.1rem 0 .5rem; font-size:.95rem; }
.parties-line .party .lbl {
  display:inline-block; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--brass); font-weight:700; margin-right:.4rem;
}
.party-client { font-weight:700; color:var(--ink); }
.party-decedent { color:#56524A; }
.head-actions { flex-shrink:0; display:flex; gap:.5rem; }
.danger { color:var(--plead-red); font-weight:700; }
.right { text-align:right; }

/* ---- Status & Next Steps band: pleading-rule accent ---- */
.statusbar {
  background:var(--paper); border:1px solid var(--line); border-radius:.6rem;
  padding:.8rem 1rem .8rem 1.2rem; margin-bottom:1rem; box-shadow:var(--shadow-card);
  position:relative; overflow:hidden;
}
.statusbar::before {
  content:""; position:absolute; inset:0 auto 0 0; width:7px;
  background:linear-gradient(to right,
    var(--plead-red) 0, var(--plead-red) 2px, transparent 2px, transparent 5px,
    var(--avid-primary) 5px, var(--avid-primary) 7px);
}
.statusbar-head { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.6rem; }
.alert-chip { font-size:.76rem; padding:.16rem .6rem; border-radius:1rem; border:1px solid transparent; font-weight:600; }
.alert-chip.info { background:#E9F1F9; color:#1E4E79; border-color:#C9DDF0; }
.alert-chip.warn { background:#FBF3DC; color:#7A5410; border-color:#EBD9A4; }
.alert-chip.danger { background:#FBEFEC; color:#8C3127; border-color:#E8C2BC; }
.summary-text { white-space:pre-wrap; font-size:.9rem; line-height:1.5; }
.summary-meta { display:flex; gap:.6rem; align-items:center; margin-top:.5rem; font-size:.8rem; }

/* ---- Workflow card ---- */
.workflow { margin-bottom:1.1rem; }
.workflow-primary { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.workflow-primary .hint { font-size:.78rem; }
.workflow-tools {
  display:flex; gap:1.05rem; align-items:center; flex-wrap:wrap;
  margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--line); font-size:.84rem;
}
.workflow-tools .tools-label {
  color:var(--brass); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
}

/* ---- Two-column body ---- */
.matter-body { display:grid; grid-template-columns:1fr 340px; gap:1rem; align-items:start; }
.matter-main, .matter-rail { display:flex; flex-direction:column; gap:1rem; }
@media (max-width:880px) { .matter-body { grid-template-columns:1fr; } }
.matter-rail .card { padding:.85rem 1rem; }
h3.fact-group {
  font-size:.66rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--brass); margin:.85rem 0 .3rem; font-weight:700;
}
h3.fact-group:first-child { margin-top:0; }
ul.plain { list-style:none; padding:0; margin:0; font-size:.88rem; }
ul.plain li { padding:.12rem 0; }

/* deliverable status pills */
.pill {
  font-size:.7rem; font-weight:700; padding:.12rem .55rem; border-radius:1rem;
  text-transform:capitalize; white-space:nowrap; letter-spacing:.03em;
}
.pill-draft, .pill-in_review { background:#FBF3DC; color:#7A5410; }
.pill-approved { background:#E1EFFA; color:#0F5288; }
.pill-out_for_signature { background:#F1E9F8; color:#5B2D85; }
.pill-executed { background:#EFF6EE; color:#23522B; }
.pill-declined { background:#ECE9E0; color:#76705F; }
.tag-esign {
  font-size:.62rem; background:#F1E9F8; color:#5B2D85; border:1px solid #DCC8EE;
  border-radius:.3rem; padding:.02rem .32rem; vertical-align:middle; letter-spacing:.04em;
}
.deliv-actions { white-space:nowrap; }
.deliv-actions form { display:inline; margin:0 0 0 .25rem; }

/* misc checklist */
ul.checklist { list-style:none; padding:0; margin:0 0 .8rem; }
ul.checklist li { padding:.28rem 0; }
ul.checklist label { display:flex; gap:.55rem; align-items:flex-start; cursor:pointer; font-size:.9rem; }

/* ---- Editable Known Issues ---- */
.count-badge {
  font-size:.7rem; background:#FBEFEC; color:#8C3127; border:1px solid #E8C2BC;
  border-radius:1rem; padding:.02rem .45rem; font-weight:700; vertical-align:middle;
}
ul.issues { list-style:none; padding:0; margin:0 0 .7rem; }
ul.issues .issue {
  display:flex; gap:.5rem; align-items:flex-start; justify-content:space-between;
  padding:.5rem .65rem; border-radius:.45rem; margin-bottom:.4rem; font-size:.85rem;
}
.issue-warn { background:#FBF3DC; border:1px solid #EBD9A4; }
.issue-blocking { background:#FBEFEC; border:1px solid #E8C2BC; }
.issue .issue-text { line-height:1.4; }
.issue form { flex-shrink:0; }
.add-issue { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; padding-top:.6rem; border-top:1px solid var(--line); }
.add-issue input[type=text] {
  flex:1; min-width:140px; padding:.38rem .6rem; border:1px solid var(--line-strong);
  border-radius:.45rem; font-size:.85rem; background:#fff;
}
.add-issue .block-toggle { font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.25rem; }

/* notes */
ul.notes { list-style:none; padding:0; margin:0; font-size:.85rem; }
ul.notes li { border-bottom:1px solid var(--line); padding:.5rem 0; }
ul.notes li:last-child { border-bottom:none; }
.note-meta { font-size:.74rem; font-family:var(--mono); color:var(--muted); }

/* Queue: track counters + sortable headers + summary column */
.track-counters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.counter-chip {
  display:flex; align-items:center; gap:.5rem; background:var(--paper);
  border:1px solid var(--line); border-radius:.55rem; padding:.5rem .85rem;
  text-decoration:none; color:#56524A; font-size:.84rem;
  box-shadow:var(--shadow-card); transition:border-color .12s, transform .12s;
}
.counter-chip:hover { border-color:var(--avid-accent); text-decoration:none; transform:translateY(-1px); }
.counter-chip.active { border-color:var(--avid-primary); background:#EDF3F8; color:var(--avid-primary); }
.counter-chip.warn { border-color:#EBD9A4; background:#FBF3DC; color:#7A5410; }
.counter-num { font-size:1.2rem; font-weight:600; color:var(--avid-primary); font-family:var(--serif); }
.counter-chip.warn .counter-num { color:#7A5410; }
.sort-link { color:inherit; text-decoration:none; }
.sort-link:hover { text-decoration:underline; }
.cell-summary { max-width:380px; font-size:.8rem; color:#56524A; line-height:1.4; }
.grid .chip.track.unclassified { background:#FBF3DC; color:#7A5410; }
.grid td .chip { display:inline-block; }

/* stale-flag mop-up bar */
.stale-bar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:#FBF3DC; border:1px solid #EBD9A4; color:#7A5410; border-radius:.55rem;
  padding:.5rem .85rem; margin-bottom:1rem; font-size:.85rem;
}

/* ---- Upload zones (Trust-Diagram-style intake) ---- */
.upload-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin:.6rem 0; }
.upload-zone-form { display:flex; flex-direction:column; }
.upload-zone {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; min-height:172px; padding:1.4rem 1rem 1.1rem;
  border:2px dashed var(--avid-accent); border-radius:.65rem;
  background:#FBFAF5; cursor:pointer; text-align:center;
  transition:background .15s, border-color .15s, transform .12s;
}
.upload-zone:hover, .upload-zone.dragover {
  background:#EFF5FB; border-color:var(--avid-primary); transform:translateY(-2px);
}
.uz-badge {
  position:absolute; top:.6rem; right:.6rem; font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:.2rem .6rem;
  border-radius:999px; background:#EFEAD9; color:var(--avid-primary);
}
.uz-badge.dark { background:var(--avid-primary); color:#fff; }
.uz-icon { font-size:1.65rem; line-height:1; }
.uz-title { font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--avid-primary); }
.uz-hint { color:var(--muted); font-size:.82rem; }
.uz-types { color:#A39D8C; font-size:.72rem; font-family:var(--mono); }
.uz-helper { color:var(--muted); font-size:.78rem; margin:.45rem .2rem 0; text-align:center; }
.uz-helper strong { color:var(--ink); }
.uz-busy { display:none; color:var(--avid-accent); font-size:.84rem; font-weight:700; }
.upload-zone.busy .uz-busy { display:block; }
.upload-zone.busy .uz-hint { display:none; }
.doc-guide {
  background:var(--paper); border:1px solid var(--line); border-radius:.65rem;
  padding:1rem 1.15rem; box-shadow:var(--shadow-card);
}
.doc-guide h3 {
  margin:.1rem 0 .55rem; font-size:.68rem; color:var(--brass);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700;
}
.doc-guide ul { margin:.2rem 0 0 1.1rem; padding:0; }
.doc-guide li { font-size:.86rem; margin:.3rem 0; }
.doc-guide li .why { color:var(--muted); font-size:.78rem; }
.cta-bar {
  display:block; width:100%; background:var(--avid-primary); color:#fff; border:none;
  border-radius:.55rem; padding:.95rem 1rem; font-family:var(--sans); font-size:1rem;
  font-weight:700; letter-spacing:.02em; cursor:pointer; text-align:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2), var(--shadow-card);
  transition:background .12s, transform .06s;
}
.cta-bar:hover { background:#12395d; }
.cta-bar:active { transform:translateY(1px); }
.cond-wrap.cond-hidden { display:none; }

/* ---- Matter Assistant chat ---- */
.chat-card {
  margin:1rem 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#FAF8F1 0%, var(--paper) 30%);
}
.chat-card::before {
  content:""; position:absolute; inset:0 auto 0 0; width:7px;
  background:linear-gradient(to right,
    var(--brass) 0, var(--brass) 2px, transparent 2px, transparent 5px,
    var(--avid-accent) 5px, var(--avid-accent) 7px);
}
.chat-log { max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:.55rem; padding:.2rem .1rem .6rem; }
.chat-msg { display:flex; flex-direction:column; gap:.4rem; max-width:78%; }
.chat-msg.user { align-self:flex-end; align-items:flex-end; }
.chat-msg.assistant { align-self:flex-start; align-items:flex-start; }
.chat-bubble { padding:.6rem .85rem; border-radius:.85rem; font-size:.88rem; white-space:pre-wrap; line-height:1.45; }
.chat-msg.user .chat-bubble {
  background:var(--avid-primary); color:#F3EFE4; border-bottom-right-radius:.2rem;
}
.chat-msg.assistant .chat-bubble {
  background:#EFEAD9; color:var(--ink); border-bottom-left-radius:.2rem;
}
.chat-proposal {
  border:1px solid var(--line); border-left:4px solid var(--avid-accent);
  border-radius:.5rem; background:var(--paper); padding:.55rem .75rem;
  font-size:.82rem; width:100%; box-shadow:var(--shadow-card);
}
.chat-proposal.applied { border-left-color:#3E7C46; }
.chat-proposal.dismissed, .chat-proposal.failed { border-left-color:#A39D8C; opacity:.78; }
.chat-proposal.failed { border-left-color:var(--plead-red); }
.cp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.25rem; }
.cp-reason { color:var(--muted); margin:.15rem 0 .3rem; }
.cp-payload {
  background:#F6F3EA; border-radius:.4rem; padding:.45rem .55rem;
  font-family:var(--mono); font-size:.7rem; max-height:130px; overflow:auto;
  white-space:pre-wrap; margin:.2rem 0 .4rem;
}
.chat-input { display:flex; gap:.5rem; margin-top:.6rem; }
.chat-input input {
  flex:1; padding:.6rem .8rem; border:1px solid var(--line-strong);
  border-radius:.55rem; font-size:.9rem; background:#fff; font-family:var(--sans);
}