/* PM Multi-Tenant — app shell stylesheet.
 *
 * ONE stylesheet for the whole product (staff app + client portal both link it):
 * design tokens + a small set of reusable pattern classes (nav, page header,
 * card, button, form row, table, flash, badge, board, stats). Hand-written, no
 * framework, no build step — a cold rebuild needs nothing but this file.
 *
 * P10 VISUAL/BRAND PASS: this is the deliberately-deferred polish. The whole look
 * is driven by the design tokens in :root below — the brand colour, neutrals,
 * radius, elevation, and type scale all live there, so re-skinning the product
 * (or white-labelling per brand) is an edit to the token block, not a sweep across
 * components. No template/markup changes: every class name is preserved.
 */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Ink + neutrals — cool slate, softer than pure black for long reading. */
  --color-text:        #1b2430;
  --color-muted:       #5b6675;
  --color-faint:       #8a94a3;
  --color-bg:          #ffffff;   /* card / raised surfaces */
  --color-canvas:      #f7f9fc;   /* page background behind cards */
  --color-surface:     #f2f5fa;   /* subtle fills (nav hover, table hover, badges) */
  --color-border:      #e3e8f0;
  --color-border-soft: #eef1f6;

  /* Brand — a confident, professional indigo-blue (trust + focus, right tone for
     a practice-management tool). Move the whole identity by editing these. */
  --color-accent:       #3a5bd9;
  --color-accent-hover: #2c47b8;
  --color-accent-fg:    #ffffff;
  --color-accent-soft:  #eef1fd;  /* tinted backgrounds (active nav, info alert) */

  --color-danger:      #d23b3b;
  --color-danger-hover:#b22a2a;
  --color-danger-fg:   #ffffff;
  --color-danger-soft: #fdecec;
  --color-danger-line: #efb8b8;
  --color-success:     #157f43;
  --color-success-soft:#e9f6ee;
  --color-warning:     #9a6700;
  --color-warning-soft:#fbf3e1;

  /* ---- Status ladder (D0) ------------------------------------------------
     One 4-slot token set per status: fg (text on the tint), bg (tint), line
     (border/strip), solid (filled element, white text). STATUS COLOR LAW:
     amber belongs to `wait` (waiting-on-client) EXCLUSIVELY; red means
     deadline-risk/chase-exhausted (`call`) or destructive — and those two are
     SEPARATE tokens so a "needs a call" chip never shares a token with a
     Delete button. Status is never conveyed by color alone — always pair
     with a text label or icon. Light theme only; shaped so a dark theme can
     override this block wholesale. */
  --status-wait-fg:      #845200;
  --status-wait-bg:      #fbf3e1;
  --status-wait-line:    #e0aa3e;
  --status-wait-solid:   #b97c0a;

  --status-overdue-fg:   #9a3412;
  --status-overdue-bg:   #fdeee4;
  --status-overdue-line: #f0a37c;
  --status-overdue-solid:#c2410c;

  --status-call-fg:      #8f1d1d;
  --status-call-bg:      #fdecec;
  --status-call-line:    #e58d8d;
  --status-call-solid:   #b91c1c;

  --status-ok-fg:        #115e36;
  --status-ok-bg:        #e9f6ee;
  --status-ok-line:      #93d3b0;
  --status-ok-solid:     #157f43;

  --status-review-fg:    #553c9a;
  --status-review-bg:    #f1edfb;
  --status-review-line:  #bfaeec;
  --status-review-solid: #6d4fc4;

  --status-info-fg:      #1e55c4;
  --status-info-bg:      #e9f1fd;
  --status-info-line:    #9dbef2;
  --status-info-solid:   #2a62c9;

  --status-neutral-fg:   #45505e;
  --status-neutral-bg:   #f2f5fa;
  --status-neutral-line: #cbd5e1;
  --status-neutral-solid:#64748b;

  /* Destructive = the existing danger family under its semantic name. */
  --color-destructive:       var(--color-danger);
  --color-destructive-hover: var(--color-danger-hover);
  --color-destructive-fg:    var(--color-danger-fg);
  --color-destructive-soft:  var(--color-danger-soft);
  --color-destructive-line:  var(--color-danger-line);

  /* Type scale (D0). Functional text never below 12px (0.8rem at 15px base). */
  --text-xs:     0.8rem;
  --text-sm:     0.85rem;
  --text-md:     0.95rem;
  --text-lg:     1.2rem;
  --text-xl:     1.6rem;
  --text-num-lg: 1.7rem;   /* statstrip numerals (~25px) */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius:    8px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* Elevation — layered, low-opacity slate shadows for a soft, modern depth. */
  --shadow-sm: 0 1px 2px rgba(20, 30, 48, 0.06);
  --shadow:    0 1px 3px rgba(20, 30, 48, 0.10), 0 1px 2px rgba(20, 30, 48, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 30, 48, 0.10);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-size: 15px;
  --container-width: 1000px;
  --transition: 140ms ease;
}

/* ---- Reset / base ----------------------------------------------------- */
* { box-sizing: border-box; }

html { font-size: var(--font-size); }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-canvas);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.012em; margin: 0 0 var(--space-2); }
h2 { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.008em; margin: 0 0 var(--space-2); }

/* Accessible keyboard focus everywhere — visible ring, never on mouse click. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Layout container ------------------------------------------------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* ---- Top navigation --------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav__brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  padding: var(--space-3) 0;
  margin-right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__brand:hover { text-decoration: none; color: var(--color-text); }
/* Brand accent mark — a small brand dot before the firm name. */
.nav__brand::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1;
}

.nav__link {
  display: inline-block;
  padding: var(--space-3) var(--space-3);
  color: var(--color-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav__link:hover { color: var(--color-text); text-decoration: none; }
.nav__link.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Reserved (planned-but-unbuilt) nav slots — greyed, non-interactive. */
.nav__link.is-reserved {
  color: var(--color-faint);
  cursor: default;
}
.nav__link.is-reserved:hover { color: var(--color-faint); text-decoration: none; }
.nav__soon {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
}

.nav__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-muted);
}
.nav__user select {
  font: inherit;
  font-size: 0.85rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---- App shell with grouped sidebar (D2) -------------------------------
   Staff chrome only — the portal keeps the .nav top bar above. The toggle
   checkbox + label drive the <1024px drawer with zero JS. */
.app-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar-toggle { display: none; }
.mobile-bar { display: none; }

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}
.sidebar__brand:hover { text-decoration: none; color: var(--color-text); }
.sidebar__brand::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  flex-shrink: 0;
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  flex: 1;
  overflow-y: auto;
}
.sidebar__group {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
  color: var(--color-faint);
  padding: var(--space-4) var(--space-2) var(--space-1);
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.sidebar__link:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.sidebar__link.is-active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
/* The amber count pill — waiting-on-client ONLY (color law C3). */
.sidebar__pill {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--status-wait-fg);
  background: var(--status-wait-bg);
  border: 1px solid var(--status-wait-line);
}
.sidebar__user {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.sidebar__email { overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  /* Explicit rows: bar auto, main takes the rest (auto rows would otherwise
     stretch to absorb the free 100vh space and fatten the bar). */
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .mobile-bar__burger { display: inline-flex; padding: var(--space-1); cursor: pointer; }
  .mobile-bar__brand { font-weight: 700; }
  .sidebar {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 70;
    box-shadow: var(--shadow-md);
  }
  .sidebar-toggle:checked ~ .sidebar { display: flex; }
}

/* ---- Page header ------------------------------------------------------ */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}
.page-header__titles { min-width: 0; }
.page-header__subtitle { color: var(--color-muted); font-size: 0.9rem; }
.page-header__actions { display: flex; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; align-items: center; }
/* Selects in a header actions row (e.g. the Work page's workflow switcher). */
.page-header__actions select {
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---- Card ------------------------------------------------------------- */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 500;
  line-height: 1.4;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.btn:hover { background: var(--color-surface); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-fg);
}
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--secondary { background: var(--color-surface); }
.btn--secondary:hover { background: var(--color-border-soft); }
.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-fg);
}
.btn--danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
/* A button styled as a plain inline link (used by the logout form). */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  box-shadow: none;
}
.btn-link:hover { color: var(--color-accent-hover); }

/* ---- Forms ------------------------------------------------------------ */
.form-row { margin-bottom: var(--space-4); }
.form-row > label { display: block; font-weight: 550; margin-bottom: var(--space-1); }
.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select,
.form-row textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:not([type="checkbox"]):not([type="radio"]):focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.form-row__hint { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-1); }

/* ---- Table ------------------------------------------------------------ */
.table { border-collapse: collapse; width: 100%; }
.table th, .table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}
.table thead th {
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  font-weight: 600;
}
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--color-surface); }

/* ---- Flash / alerts --------------------------------------------------- */
.flash-region { margin-bottom: var(--space-4); }
.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
}
.alert--error   { border-color: var(--color-danger);  background: var(--color-danger-soft);  color: #8f2020; }
.alert--success { border-color: var(--color-success); background: var(--color-success-soft); color: #0d5b30; }
.alert--warning { border-color: var(--color-warning); background: var(--color-warning-soft); color: #7a5200; }

/* ---- Utilities -------------------------------------------------------- */
.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.text-sm { font-size: 0.85rem; }

.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

/* ---- Board (flow-board kanban) ---------------------------------------- */
.board {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--space-3);
}
.board__column {
  flex: 0 0 250px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.board__col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.board__col-name { font-weight: 600; }
.board__terminal { border-color: var(--color-success); color: var(--color-success); }

.board__card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.board__card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.board__card-title { display: block; font-weight: 550; margin-bottom: var(--space-1); }
.board__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.board__empty {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-faint);
  padding: var(--space-2) 0;
}

/* ---- D3 board additions ------------------------------------------------ */
/* Card anatomy: client first/bold, job title under it, optional wait strip,
   one footer row. The amber left edge doubles the wait signal (with the
   strip's text — never color alone). */
.board__card-client {
  display: block;
  font-weight: 650;
  font-size: var(--text-sm);
}
.board__card-title { font-weight: 500; }
.board__card--waiting { border-left: 3px solid var(--status-wait-solid); }
.board__card .wait-strip { margin: var(--space-1) 0; }
.board__card-facts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.board__due--risk { color: var(--status-call-fg); font-weight: 600; }

/* Top rail: counted filter chips + Mine + search. */
.board-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-muted);
  transition: background var(--transition), border-color var(--transition);
}
.filter-chip:hover { background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.filter-chip.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.filter-chip__count { font-variant-numeric: tabular-nums; font-weight: 700; }
/* The waiting chip's count is an amber surface (whitelist law C3). */
.filter-chip--wait .filter-chip__count { color: var(--status-wait-solid); }
.filter-chip--overdue .filter-chip__count { color: var(--status-overdue-solid); }
.board-rail__search { margin-left: auto; }
.board-rail__search input {
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  min-width: 220px;
}
.board-rail__search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ---- Dashboard stat cards --------------------------------------------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.stat-card {
  flex: 1 1 140px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.stat-card--alert { border-color: var(--color-danger); background: var(--color-danger-soft); }
.stat-card__num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.stat-card--alert .stat-card__num { color: var(--color-danger); }
.stat-card__label { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-1); }

.badge--alert { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }

/* ---- Description list (detail pages) ---------------------------------- */
.dl-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.dl-grid dt { color: var(--color-muted); }
.dl-grid dd { margin: 0; white-space: pre-wrap; }

/* ---- Fieldset rendered as a card (forms) ------------------------------ */
fieldset.card { padding-top: var(--space-4); }
fieldset.card > legend { font-weight: 650; padding: 0 var(--space-2); }

/* ---- Form actions row (submit + cancel) ------------------------------- */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ======================================================================== */
/* ---- D0 component layer ------------------------------------------------ */
/* The redesign's shared components. Defined here ahead of the screens that
   adopt them (phases D1–D8); the /styleguide dev page renders one of each.
   All colors come from the status ladder / brand tokens above — no literal
   hex below this line. */

/* Numbers scan better aligned; apply to any number cell. */
.tnum { font-variant-numeric: tabular-nums; }

/* Small button variant — used by 10 existing templates (was undefined). */
.btn--small { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

/* ---- Status pill -------------------------------------------------------
   Read-only status indicator. Always contains text (never color alone). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--status-neutral-line);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  white-space: nowrap;
}
.pill--wait    { color: var(--status-wait-fg);    background: var(--status-wait-bg);    border-color: var(--status-wait-line); }
.pill--overdue { color: var(--status-overdue-fg); background: var(--status-overdue-bg); border-color: var(--status-overdue-line); }
.pill--call    { color: var(--status-call-fg);    background: var(--status-call-bg);    border-color: var(--status-call-line); }
.pill--ok      { color: var(--status-ok-fg);      background: var(--status-ok-bg);      border-color: var(--status-ok-line); }
.pill--review  { color: var(--status-review-fg);  background: var(--status-review-bg);  border-color: var(--status-review-line); }
.pill--info    { color: var(--status-info-fg);    background: var(--status-info-bg);    border-color: var(--status-info-line); }
/* Supplementary dot (always beside the label, never instead of it). */
.pill__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}

/* ---- Wait strip ---------------------------------------------------------
   THE signature element: the amber waiting-on-client state strip shown on a
   board card (in its actual stage) and anywhere a wait is summarized. */
.wait-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--status-wait-fg);
  background: var(--status-wait-bg);
  border: 1px solid var(--status-wait-line);
  border-radius: var(--radius-sm);
  padding: 0.15rem var(--space-2);
}

/* ---- Quick-action chip (qchip) ------------------------------------------
   One-click verb named by its outcome; rendered as a small button or link.
   One contextual qchip per board card / dep-row action slot. */
.qchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.qchip:hover { background: var(--color-surface); text-decoration: none; }
/* Remind / send actions are brand-colored (NOT amber — amber is state, not action). */
.qchip--remind { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
.qchip--remind:hover { background: var(--color-accent); color: var(--color-accent-fg); }
/* Chase-exhausted: a human call is the action. */
.qchip--call { color: var(--status-call-fg); border-color: var(--status-call-line); background: var(--status-call-bg); }
.qchip--call:hover { background: var(--status-call-solid); border-color: var(--status-call-solid); color: #fff; }

/* ---- Dependency row (dep-row) -------------------------------------------
   ONE component, four surfaces (Home preview, cockpit, client detail, job
   detail). Anatomy: status rail · who/what · deadline · age · action slot,
   with an optional full-width guardrail sentence underneath. */
.dep-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.dep-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 56px auto;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
}
.dep-row + .dep-row { border-top: 1px solid var(--color-border-soft); }
/* Left status rail. */
.dep-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--status-neutral-line);
}
.dep-row--wait::before   { background: var(--status-wait-solid); }
.dep-row--call::before   { background: var(--status-call-solid); }
.dep-row--review::before { background: var(--status-review-solid); }
.dep-row__main { min-width: 0; }
.dep-row__who { font-weight: 600; }
.dep-row__what { color: var(--color-muted); font-size: var(--text-sm); }
.dep-row__deadline {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.dep-row__deadline-sub { display: block; font-size: var(--text-xs); color: var(--color-faint); }
/* Red + dot ONLY when the deadline is actually at risk. */
.dep-row__deadline.is-risk { color: var(--status-call-fg); font-weight: 600; }
.dep-row__deadline.is-risk::before { content: "●\00a0"; font-size: 0.6em; vertical-align: 0.2em; }
.dep-row__age {
  text-align: right;
  color: var(--color-faint);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.dep-row__action { display: flex; gap: var(--space-2); justify-content: flex-end; }
/* "Will miss VAT deadline Jun 30 unless received by Jun 23" */
.dep-row__guardrail {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--status-overdue-fg);
}

/* ---- Statstrip -----------------------------------------------------------
   ONE bordered strip of stat cells; every cell is a link to the filtered
   view it counts (no dead numbers). */
.statstrip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.statstrip__cell {
  flex: 1 1 120px;
  display: block;
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition);
}
.statstrip__cell + .statstrip__cell { border-left: 1px solid var(--color-border-soft); }
a.statstrip__cell:hover { background: var(--color-surface); text-decoration: none; color: inherit; }
.statstrip__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  font-weight: 600;
}
.statstrip__num {
  font-size: var(--text-num-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.statstrip__delta { font-size: var(--text-xs); color: var(--color-faint); }
.statstrip__cell--wait .statstrip__num { color: var(--status-wait-solid); }
.statstrip__cell--call .statstrip__num,
.statstrip__cell--overdue .statstrip__num { color: var(--status-call-solid); }

/* ---- Empty state ---------------------------------------------------------
   Every empty list: icon + one sentence + the page's primary CTA. */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-muted);
}
.empty-state .icon { width: 28px; height: 28px; color: var(--color-faint); }
.empty-state__text { margin: var(--space-2) 0 var(--space-3); }

/* ---- Dropzone (portal / public upload) ---------------------------------- */
.dropzone {
  display: block;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-canvas);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover,
.dropzone.is-over {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ---- Danger zone ---------------------------------------------------------
   Quarantined destructive block — always LAST on its page. Uses the
   destructive token family, never the `call` status red. */
.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-destructive-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}
.danger-zone__title { font-weight: 650; color: var(--color-destructive); }
.danger-zone__desc { color: var(--color-muted); font-size: var(--text-sm); }

/* ---- Toast ----------------------------------------------------------------
   Flash messages restyled as toasts (D1 swaps the flash region over; the
   .alert classes stay valid until then). */
.toast-region {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}
.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-border);
  background: var(--color-text);
  color: #fff;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  transition: opacity 400ms ease, visibility 400ms;
}
.toast--success { border-left-color: var(--status-ok-solid); }
.toast--error   { border-left-color: var(--color-destructive); }
.toast--warning { border-left-color: var(--status-wait-solid); }
/* JS enhancement fades toasts out; without JS they persist (still fine). */
.toast.is-hidden { opacity: 0; visibility: hidden; }

/* ---- Avatar (initials) --------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ---- Waiting cockpit (D4) ----------------------------------------------- */
/* Selectable dep-rows gain a leading checkbox column. */
.dep-row--selectable { grid-template-columns: auto minmax(0, 1fr) 110px 56px auto; }
.dep-row__select { width: 1rem; height: 1rem; accent-color: var(--color-accent); }
.dep-row.is-kb-focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.lane { margin-bottom: var(--space-5); }
.lane__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}
.lane__empty { padding: var(--space-2) 0; }

/* Segmented view switcher (server-rendered links). */
.seg {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.seg__item {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.seg__item:hover { background: var(--color-surface); text-decoration: none; }
.seg__item.is-active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.seg__hint { margin-left: auto; }
.seg__hint kbd, .kbd-sheet kbd {
  font-family: inherit;
  font-size: var(--text-xs);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  background: var(--color-bg);
}

.statstrip__cell.is-active { background: var(--color-accent-soft); }
.statstrip__cell--call .statstrip__num { color: var(--status-call-solid); }

.undo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Sticky bulk bar — appears when rows are selected. */
.bulk-bar {
  position: sticky;
  bottom: var(--space-3);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-md);
  width: fit-content;
  margin: var(--space-3) auto 0;
}
.bulk-bar__count { font-weight: 600; font-size: var(--text-sm); }

/* Inline detail expand (server-rendered fragment host). */
.dep-detail-host {
  border-top: 1px dashed var(--color-border);
  background: var(--color-canvas);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.dep-detail__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.dep-detail h3 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 var(--space-1);
}
.dep-detail__events { margin: var(--space-1) 0; padding-left: var(--space-4); }
.dep-detail__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.dep-detail__form label { display: block; }
.dep-detail__form input { display: block; font: inherit; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* Keyboard cheatsheet — a dismissible overlay, never blocking (Esc / click
   outside closes; nothing behind it is required to continue). */
.kbd-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 30, 48, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* display:flex would override the hidden attribute — without this the
   invisible overlay eats every click on the page. */
.kbd-sheet[hidden] { display: none; }
.kbd-sheet__panel {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  max-width: 420px;
}
.kbd-sheet__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0;
}
.kbd-sheet__list dt { text-align: right; }
.kbd-sheet__list dd { margin: 0; color: var(--color-muted); }

/* ---- Home (D5) ----------------------------------------------------------- */
/* "Your 3 moves" — a normal surface card with a brand accent (law K5: factual
   copy on an ordinary surface, never a dark gradient island). */
.moves {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}
.moves__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: var(--space-2) 0;
}
.move {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  color: inherit;
  border-radius: var(--radius-sm);
}
.move + .move { border-top: 1px solid var(--color-border-soft); }
.move:hover { background: var(--color-surface); text-decoration: none; }
.move__icon { display: inline-flex; }
.move__icon--call   { color: var(--status-call-solid); }
.move__icon--remind { color: var(--color-accent); }
.move__icon--review { color: var(--status-review-solid); }
.move__text { font-weight: 600; }
.move__count { color: var(--color-muted); font-size: var(--text-sm); }
.move__go { color: var(--color-faint); display: inline-flex; }
.moves__clear {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  margin: var(--space-2) 0;
}

/* Section scaffolding: heading row with an optional "See all" link. */
.home-section { margin-top: var(--space-6); min-width: 0; }
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.home-section__head h2 { font-size: var(--text-md); margin: 0; }
.see-all {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* My work / feed side-by-side; single column on narrow screens. */
.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 960px) {
  .home-split { grid-template-columns: 1fr; }
}

/* My work today — open assigned tasks; the check button completes. */
.worklist, .feed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.workitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.workitem + .workitem { border-top: 1px solid var(--color-border-soft); }
.workitem__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: transparent;          /* the check appears on hover/focus */
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.workitem__check:hover, .workitem__check:focus-visible {
  border-color: var(--status-ok-solid);
  color: var(--status-ok-solid);
}
.workitem__meta { margin-top: 1px; }
.workitem__due { font-size: var(--text-sm); color: var(--color-muted); }
.workitem__due.is-overdue { color: var(--status-overdue-fg); font-weight: 600; }

/* "Just came in" — the activity feed (also the automation credit, F5). */
.feed__item {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.feed__item + .feed__item { border-top: 1px solid var(--color-border-soft); }
.feed__when { color: var(--color-faint); font-size: var(--text-xs); padding-top: 2px; }
/* The automation credit line gets a quiet brand tint — visible, not loud. */
.feed__item--credit { background: var(--color-accent-soft); }

/* ---- Detail pages (D6: client + job) -------------------------------------- */
/* Main + rail split; single column on narrow screens. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-5);
}
@media (max-width: 960px) {
  .detail-grid { grid-template-columns: 1fr; }
}
.detail-grid__main > .card + .card,
.detail-grid__rail > .card + .card,
.detail-grid__rail > .card + .danger-zone { margin-top: var(--space-5); }

/* Small in-card scaffolding. */
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.spaced-above { margin-top: var(--space-3); display: block; }
form.spaced-above { display: inline-block; }
.text-overdue { color: var(--status-overdue-fg); font-weight: 600; }
.dl-grid--tight { gap: 0 var(--space-3); font-size: var(--text-sm); }

/* No-JS actions menu (quick-win T7): a <details> dropdown. */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
}
.menu__item { font-weight: 600; }
.menu__item--danger {
  color: var(--color-destructive);
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-2);
}
.menu__form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.menu__form input[type="text"], .menu__form select {
  font: inherit;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-width: 160px;
}

/* Steps strip — where the job is on its board. */
.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  white-space: nowrap;
}
.step--done { color: var(--status-ok-fg); background: var(--status-ok-bg); border-color: var(--status-ok-line); }
.step--cur  { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
.steps__arr { color: var(--color-faint); display: inline-flex; }

/* The automation hint — one factual sentence under the steps. */
.hint {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.hint .icon { margin-top: 2px; flex-shrink: 0; }

/* Doc-request card rows. */
.req-block + .req-block { border-top: 1px solid var(--color-border-soft); margin-top: var(--space-3); padding-top: var(--space-3); }
.req-block--closed { opacity: 0.75; }
.req-block__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.req-block__chase {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.doc-item + .doc-item { border-top: 1px solid var(--color-border-soft); }
.doc-item__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  flex-shrink: 0;
}
.doc-item__ic--in  { background: var(--status-ok-bg);   color: var(--status-ok-fg); }
.doc-item__ic--out { background: var(--status-wait-bg); color: var(--status-wait-fg); }
.doc-item__main { min-width: 0; flex: 1; }
.doc-item__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* Upload-link copy row. */
.copy-row { display: flex; gap: var(--space-2); }
.copy-row__field {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* Compact task tree on the job rail. */
.tasklist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  padding-left: calc(var(--indent, 0) * 1.1rem);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
}
.tasklist__row:first-child { border-top: 0; }

/* The job page's compact feed sits inside a card — no own border. */
.feed--flat { border: 0; box-shadow: none; border-radius: 0; }
.feed--flat .feed__item { padding-left: 0; padding-right: 0; }

/* ---- Portal + public upload (D7) ------------------------------------------
   The client-facing surfaces: ONE centered column (~680px, law E5),
   mobile-first, on the shared stylesheet — layout classes only. Amber is
   reserved for waiting-on-YOU meanings (law C3: pending-card border, the
   Upload button, the "Waiting on you" pill). */
.container--portal { max-width: 680px; }

.phero { margin-bottom: var(--space-5); }
.phero h1 { margin-bottom: var(--space-2); }

/* Server-rendered progress row — truth, not animation. */
.pbar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-1);
}
.pbar__fill {
  height: 100%;
  background: var(--status-ok-solid);
  border-radius: var(--radius-pill);
}
/* Quota meter tones (storage, 2026-06-10): green → orange (80%) → red (full).
   Deliberately the overdue/destructive families, NOT amber (C3 reserves amber
   for waiting-on-client meanings). */
.pbar__fill--ok   { background: var(--status-ok-solid); }
.pbar__fill--warn { background: var(--status-overdue-solid); }
.pbar__fill--full { background: var(--color-destructive); }
.pbar--quota { max-width: 420px; }

/* Portal cards; the pending variant carries the amber waiting border. */
.pcard {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.pcard--wait { border-color: var(--status-wait-line); border-width: 2px; }
.pcard__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}
.pcard h2 { font-size: var(--text-md); margin: 0 0 var(--space-2); }
.pcard .list { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.pcard .list li { padding: 2px 0; }

/* Dropzone internals: the real input stays clickable/focusable underneath. */
.dropzone { position: relative; margin-bottom: var(--space-3); }
.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone__text { display: block; margin-top: var(--space-2); font-weight: 600; }
.dropzone__picked { display: block; margin-top: var(--space-1); }
.dropzone:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* The amber upload verb (whitelisted — the one action that clears a wait). */
.btn--wait {
  background: var(--status-wait-solid);
  border-color: var(--status-wait-solid);
  color: #fff;
}
.btn--wait:hover { filter: brightness(0.95); }

/* "Not sure where to find this?" — a native details expander, never a toast. */
.phelp { margin-top: var(--space-3); font-size: var(--text-sm); }
.phelp > summary { cursor: pointer; font-weight: 600; color: var(--color-muted); }
.phelp > p { margin-top: var(--space-2); }

/* The dashed prefer-email box (truthful: capture files reply attachments). */
.prefer-email {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ONE consolidated trust box. */
.trust-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.trust-box h2 { font-size: var(--text-sm); color: var(--color-text); margin: 0 0 var(--space-2); }
.trust-box ul { margin: 0; padding-left: var(--space-4); }
.trust-box li { padding: 2px 0; }

/* ---- Dense pages (D8: mail / users / retention / checklist) -------------- */
/* Unread rows read bold; starring is an icon button (accent = starred —
   amber stays reserved for waiting-on-client). */
.table tr.is-unread td, .table tr.is-unread a { font-weight: 600; }
.star-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--color-faint);
  cursor: pointer;
}
.star-btn:hover { color: var(--color-accent); }
.star-btn.is-starred { color: var(--color-accent); }
.star-btn.is-starred .icon { fill: currentColor; }

/* The captured-email body: sandboxed iframe (content deliberately un-themed —
   foreign HTML never inherits our stylesheet) / plain-text fallback. */
.mail-frame {
  width: 100%;
  min-height: 24rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.mail-text { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* A card carrying a destructive confirmation (retention's final purge). */
.card--danger {
  border-color: var(--color-destructive-line);
  background: var(--color-destructive-soft);
}
.card--danger legend { color: var(--color-destructive); font-weight: 700; }

/* ---- Inline SVG icons (stroke, currentColor; no emoji iconography) ------- */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ---- Small utilities (D1 inline-style sweep) ----------------------------- */
.form-inline { display: inline; }
.spaced-top { margin-top: var(--space-6); }
/* Separates a destructive action from its neighbors in a flex actions row. */
.push-right { margin-left: auto; }

/* ---- Print (D1) ----------------------------------------------------------
   One block: chrome off, black-on-white tables. */
@media print {
  .nav, .sidebar, .mobile-bar, .toast-region, .page-header__actions,
  .form-actions, .danger-zone, .empty-state .btn { display: none !important; }
  .app-shell { display: block; }
  body { background: #fff; color: #000; }
  .card, .stat-card, .dep-list { box-shadow: none; border-color: #bbb; }
  .table th, .table td { border-color: #bbb; }
  a { color: inherit; text-decoration: none; }
  .container { max-width: none; padding: 0; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 640px) {
  .nav { padding: 0 var(--space-3); }
  .container { padding: var(--space-5) var(--space-3); }
  .page-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .dl-grid { grid-template-columns: 1fr; gap: 0 0; }
  .dl-grid dt { margin-top: var(--space-2); }
  /* D0 components: dep-row collapses its deadline/age columns under the main cell. */
  .dep-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dep-row__deadline, .dep-row__age { display: none; }
}