/* ===========================================================================
   Practice Tracker — the firm's visual language.

   The tokens are lifted verbatim from the marketing app's globals.css so the
   two feel like one firm rather than two vendors. Navy #0a2240 and gold
   #ffb347 are the authoritative brand values from brand/BRAND.md.

   Hand-authored rather than Tailwind-from-a-CDN, for three reasons that were
   all visible in the first version: the CDN build ignores the brand theme, so
   everything came out default slate; it blocks first paint while a megabyte of
   JavaScript compiles classes in the browser; and utility soup in the
   templates put the design in fifteen files at once, where it drifted.
   =========================================================================== */

:root {
  --navy: #0a2240;
  --navy-soft: #14345c;
  --navy-line: #1d3f68;
  --gold: #ffb347;
  --gold-deep: #d98b16;
  --paper: #faf8f4;
  --rule: #ece7dd;
  --ink: #16202e;
  --ink-muted: #6f6a5c;
  --surface: #ffffff;

  /* State. Held to three, so a row can only ever say one thing loudly. */
  --good: #1a7f4b;
  --good-bg: #e8f5ee;
  --warn: #b06a00;
  --warn-bg: #fdf1dd;
  --bad: #b42318;
  --bad-bg: #fdeceb;

  --radius: 0.5rem;
  --radius-sm: 0.3rem;
  --shadow-card: 0 1px 2px rgb(10 34 64 / 0.04), 0 1px 3px rgb(10 34 64 / 0.06);
  --shadow-pop: 0 4px 6px -1px rgb(10 34 64 / 0.1), 0 10px 24px -4px rgb(10 34 64 / 0.15);

  --sidebar-w: 216px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
              "Roboto Mono", monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* ---------------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: #e8eef6;
  padding: 18px 12px 12px;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
}
.sidebar__brand img { width: 22px; height: auto; display: block; }
.sidebar__brand span { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.sidebar__brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #90a6c2;
  letter-spacing: 0;
}

.sidebar__section {
  padding: 14px 8px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7f97b8;
}

.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: #cfdcec;
  transition: background 120ms, color 120ms;
}
.navlink:hover { background: var(--navy-soft); color: #fff; }
.navlink svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.navlink[aria-current="page"] {
  background: var(--navy-soft);
  color: #fff;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--gold);
}
.navlink[aria-current="page"] svg { opacity: 1; color: var(--gold); }
.navlink__count {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #90a6c2;
}

.sidebar__foot {
  margin-top: auto;
  border-top: 1px solid var(--navy-line);
  padding-top: 10px;
  font-size: 12px;
  color: #90a6c2;
}
.sidebar__me { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; }
.sidebar__me strong { font-weight: 500; color: #e8eef6; font-size: 12.5px; }
.sidebar__links { display: flex; gap: 10px; padding: 0 8px; font-size: 11.5px; }
.sidebar__links a:hover { color: #fff; text-decoration: underline; }

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.page { padding: 22px 28px 64px; max-width: 1500px; width: 100%; }

/* ---------------------------------------------------------------------------
   Page head
   --------------------------------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.page-head .sub { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.page-head .spacer { flex: 1; }
.page-head .actions { display: flex; align-items: center; gap: 8px; }

.breadcrumb {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.breadcrumb:hover { color: var(--navy); }
.breadcrumb svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.btn:hover { background: var(--paper); border-color: #ddd7cc; }
.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn--primary:hover { background: var(--navy-soft); border-color: var(--navy-soft); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn--ghost:hover { background: var(--rule); color: var(--ink); }

.btn--sm { height: 27px; padding: 0 9px; font-size: 12.5px; }
.btn--danger { color: var(--bad); border-color: #f3d3d0; }
.btn--danger:hover { background: var(--bad-bg); }

/* Segmented control — the view switcher. */
.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--rule);
  border-radius: var(--radius-sm);
}
.segmented a {
  padding: 4px 11px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
}
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="true"] {
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------------------
   Saved views — the row of chips that mirrors how the work is actually cut up
   --------------------------------------------------------------------------- */
.views {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  background: transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.view-chip svg { width: 14px; height: 14px; flex: none; }
.view-chip:hover { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.view-chip[aria-current="page"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.view-chip .n {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--rule);
  color: var(--ink-muted);
}
.view-chip[aria-current="page"] .n { background: var(--navy-line); color: #cfdcec; }
.view-chip--alert .n { background: var(--bad-bg); color: var(--bad); }
.view-chip--alert[aria-current="page"] .n { background: #7d1610; color: #ffd9d5; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 14px; }
.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
}
.card__head h2 { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.card__head .hint { font-size: 12px; color: var(--ink-muted); }
.card__head .spacer { flex: 1; }
.card__body { padding: 14px; }

.count-pill {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}

/* Summary tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  display: block;
  transition: border-color 120ms, box-shadow 120ms;
}
a.tile:hover { border-color: #d8d0c2; box-shadow: var(--shadow-pop); }
.tile .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tile .v {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  line-height: 1.1;
}
.tile .foot { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.tile--bad .v { color: var(--bad); }
.tile--warn .v { color: var(--warn); }
.tile--good .v { color: var(--good); }

/* ---------------------------------------------------------------------------
   The grid — the screen people actually work from
   --------------------------------------------------------------------------- */
.grid-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.grid-scroll { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

table.grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 7px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
table.grid thead th a { display: inline-flex; align-items: center; gap: 4px; }
table.grid thead th a:hover { color: var(--navy); }
table.grid thead th svg { width: 12px; height: 12px; }

table.grid td {
  padding: 0 12px;
  height: 38px;
  border-bottom: 1px solid #f4f1ec;
  vertical-align: middle;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: #fcfbf9; }
table.grid tbody tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.grid tbody tr.is-soon td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* Group headings, the way the Airtable grid groups by client group. */
tr.group-row td {
  height: 30px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
tr.group-row .g-name { color: var(--ink); }
tr.group-row .g-count { font-weight: 500; }

.cell-client { font-weight: 500; }
.cell-client a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cell-job { color: var(--ink-muted); }
.cell-period {
  font-family: var(--font-num);
  font-size: 11.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.cell-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-muted);
}
.cell-date.overdue { color: var(--bad); font-weight: 600; }
.cell-date.soon { color: var(--warn); font-weight: 500; }
.cell-date.none { color: #b9b2a4; font-style: italic; }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }

.truncate { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Pills
   --------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Stage colours. Deliberately the same hues as the Airtable base, so nobody
   has to relearn what a colour means on the day they switch. */
.stage-NOT_STARTED       { background: #f1efe9; color: #6b6559; border-color: #e4e0d6; }
.stage-IN_PREP           { background: #e7effa; color: #1f5fae; border-color: #d3e2f5; }
.stage-WAITING_ON_CLIENT { background: var(--warn-bg); color: #8a5300; border-color: #f6e2c2; }
.stage-IN_REVIEW         { background: #f0e9fb; color: #6b3fb5; border-color: #e2d6f6; }
.stage-READY             { background: #e2f4ec; color: #14724a; border-color: #cbe9db; }
.stage-DONE              { background: #eef0f2; color: #5b6673; border-color: #e0e4e8; }

.prio-URGENT { background: var(--bad-bg); color: var(--bad); border-color: #f6cfcb; }
.prio-HIGH   { background: var(--warn-bg); color: var(--warn); border-color: #f6e2c2; }
.prio-NORMAL { display: none; }
.prio-LOW    { display: none; }

.flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.flag--bad { background: var(--bad-bg); color: var(--bad); }
.flag--warn { background: var(--warn-bg); color: var(--warn); }
.flag--good { background: var(--good-bg); color: var(--good); }
.flag--mute { background: var(--paper); color: var(--ink-muted); border: 1px solid var(--rule); }
.flag svg { width: 12px; height: 12px; }

/* People */
.who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.avatar--gold { background: var(--gold); color: var(--navy); }
.avatar--empty { background: var(--rule); color: #9a9284; }
.avatar--lg { width: 30px; height: 30px; font-size: 12px; }
.who--none { color: var(--warn); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   Inline editing. A stage or an owner changes in place; the row is swapped by
   the server. Nothing here navigates away, because a tracker you have to leave
   in order to update is a tracker nobody updates.
   --------------------------------------------------------------------------- */
.menu { position: relative; display: inline-block; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  border-radius: 999px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover .pill { filter: brightness(0.97); }
.menu[open] > summary .pill { box-shadow: 0 0 0 2px rgb(10 34 64 / 0.12); }

.menu__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  min-width: 210px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.menu__pop--right { left: auto; right: 0; }
.menu__label {
  padding: 5px 8px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.menu__item:hover { background: var(--paper); }
.menu__item[disabled] { opacity: 0.4; cursor: not-allowed; }
.menu__item[disabled]:hover { background: none; }
.menu__note {
  padding: 6px 8px 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}

.btn-quiet {
  border: 0;
  background: none;
  padding: 2px 5px;
  margin: -2px -5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.btn-quiet:hover { background: var(--rule); }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 12px; }
.field > .lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.field .help { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.45; }

.input, .select, .textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #ddd7cc;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
}
.textarea { height: auto; padding: 8px 10px; resize: vertical; min-height: 68px; }
.select { appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f6a5c' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 15px; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgb(20 52 92 / 0.1);
}
.input::placeholder, .textarea::placeholder { color: #b3aca0; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--navy); }

.search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.search svg {
  position: absolute; left: 9px;
  width: 15px; height: 15px; color: var(--ink-muted); pointer-events: none;
}
.search input {
  height: 32px;
  width: 230px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
}
.search input:focus { outline: none; border-color: var(--navy-soft); box-shadow: 0 0 0 3px rgb(20 52 92 / 0.1); }

/* ---------------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.45;
}
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.card__head svg, .empty svg, .tile svg { width: 15px; height: 15px; }
.flag svg, .pill svg { width: 12px; height: 12px; flex: none; }
.menu__item svg { width: 14px; height: 14px; margin-left: auto; color: var(--good); }
.search svg { width: 15px; height: 15px; }
.notice--bad { background: var(--bad-bg); border-color: #f3d3d0; color: #7d1610; }
.notice--warn { background: var(--warn-bg); border-color: #f6e2c2; color: #74450a; }
.notice--info { background: #eef3fa; border-color: #d8e4f3; color: #1c3f6e; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13.5px;
}
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }

.muted { color: var(--ink-muted); }
.tiny { font-size: 11.5px; }
.nowrap { white-space: nowrap; }

/* Decree facts — Act 60 relationship context. */
.decree {
  border: 1px solid #e6dcc4;
  background: linear-gradient(0deg, #fffdf8, #fffaf0);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 16px;
}
.decree h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px;
}
.decree .who-line { font-weight: 500; font-size: 13px; }

/* Two-column detail layout */
.split { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .split { grid-template-columns: 1fr; } }

.deflist { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; }
.deflist dt { color: var(--ink-muted); white-space: nowrap; }
.deflist dd { margin: 0; }

.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}
.bar > span { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.bar > span.over { background: var(--bad); }
.bar > span.warn { background: var(--gold-deep); }

@media (max-width: 860px) {
  .sidebar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 10px;
  }
  .sidebar__section, .sidebar__foot, .navlink__count { display: none; }
  .sidebar__brand { padding: 0 8px 0 0; }
  .shell { flex-direction: column; }
  .main { margin-left: 0; }
  .page { padding: 16px 14px 48px; }
}

/* ===========================================================================
   Filing Manager additions.

   Everything above this line is shared verbatim with the Practice Tracker, so
   it stays diffable against that app. Anything below is specific to filings and
   must not be copied back.
   =========================================================================== */

/* The nine filing statuses. The Practice Tracker's stage- classes cover its own
   workflow and none of these names, so they get their own set — same hues, so
   "amber means waiting" still means the same thing across the two apps. */
.stage-NOT_STARTED         { background: #f1efe9; color: #6b6559; border-color: #e4e0d6; }
.stage-AWAITING_DOCS       { background: var(--warn-bg); color: #8a5300; border-color: #f6e2c2; }
.stage-IN_REVIEW           { background: #f0e9fb; color: #6b3fb5; border-color: #e2d6f6; }
.stage-READY_TO_FILE       { background: #e2f4ec; color: #14724a; border-color: #cbe9db; }
.stage-AWAITING_SIGNATURE  { background: #fdf0f6; color: #9c2d6b; border-color: #f7d9e8; }
.stage-FILED               { background: #e6f2fa; color: #1a5f86; border-color: #cfe5f3; }
.stage-COMPLETE            { background: var(--good-bg); color: var(--good); border-color: #cbe9db; }
.stage-EJECTED_NONSTANDARD { background: var(--bad-bg); color: var(--bad); border-color: #f6cfcb; }

/* Notices carry the findings — the reason a package will not generate, or a
   year will not close. They are the most consequential thing on the screen, so
   the severity word is a block a reader cannot skim past. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  margin-bottom: 8px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}
.notice--bad  { background: var(--bad-bg);  border-color: #f3d3d0; color: #7d1610; }
.notice--warn { background: var(--warn-bg); border-color: #f0dcb8; color: #7a4a00; }
.notice--info { background: var(--good-bg); border-color: #cbe9db; color: #10593a; }
.notice__tag {
  flex: none;
  margin-top: 1px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgb(255 255 255 / 0.6);
}
.notice__body { min-width: 0; }
.notice__ref {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.findings__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

/* Definition lists — every detail screen shows label/value pairs and each one
   used to roll its own flex markup, which is how they drifted apart. */
.deflist { font-size: 13px; }
.deflist__row { display: flex; gap: 14px; padding: 4px 0; }
.deflist__row + .deflist__row { border-top: 1px solid #f4f1ec; }
.deflist dt { width: 190px; flex: none; color: var(--ink-muted); }
.deflist dd { margin: 0; min-width: 0; }
.deflist dd.mono { font-family: var(--font-num); font-size: 12.5px; }

/* Forms */
.req { color: var(--bad); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.check input { margin-top: 2px; flex: none; }
.check .help { display: block; }

/* A row of fields that should sit side by side on a wide screen and stack on a
   narrow one. Forms here are long; two columns halves the scrolling. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 14px;
}
.form-grid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* Choice cards — "Add a client" offers three routes in and the difference
   between them is the whole point of the screen, so they are cards with an
   explanation rather than three buttons in a row. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.choice {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color 120ms, box-shadow 120ms;
}
.choice:hover { border-color: #d8d0c2; box-shadow: var(--shadow-pop); }
.choice h2 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.choice p { font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); flex: 1; }
.choice .when { margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink); }

/* Tabs on the filing detail screen. */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.tabs a {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }

.stack > * + * { margin-top: 14px; }
.mono { font-family: var(--font-num); }
.sign-in {
  max-width: 380px;
  margin: 14vh auto 0;
  text-align: center;
}
.sign-in img { width: 34px; margin: 0 auto 14px; display: block; }
.sign-in h1 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.sign-in p { font-size: 13px; color: var(--ink-muted); margin-bottom: 18px; line-height: 1.55; }

/* Signed-out screens have no sidebar, so the main column must not be inset. */
.main--bare { margin-left: 0; }

/* Two cards side by side on a wide screen, stacked on a narrow one. */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }

/* The leaks card. Red edge because it is the one panel on the dashboard that
   means somebody has to do something. */
.card--alert { border-color: #f0cfcb; }
.card--alert .card__head { border-bottom-color: #f6e0dd; }
.card--alert .card__head h2 { color: var(--bad); }

.empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}