/* ZEJ CRM brand system. Semantic tokens keep the black/gold identity intact in
   dark, light, and operating-system modes. Legacy token aliases below let every
   existing screen inherit the paired themes from one place. */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface-root: #111111;
  --surface-raised: #181818;
  --surface-subtle: #202020;
  --border: #343434;
  --accent-text: #d7ba83;
  --accent-fill: #c9a96e;
  --accent-soft: rgba(201, 169, 110, 0.16);
  --on-accent: #1a1400;
  --text-primary: #f2f2f2;
  --text-muted: #adadad;
  --state-ok: #7fd39b;
  --state-ok-line: rgba(127, 211, 155, 0.48);
  --state-warn: #edc06a;
  --state-warn-line: rgba(237, 192, 106, 0.48);
  --state-bad: #e49a8b;
  --state-bad-line: rgba(228, 154, 139, 0.48);
  --state-bad-soft: rgba(217, 138, 122, 0.14);
  --focus-ring: #e7c98e;
  --shadow: rgba(0, 0, 0, 0.35);
  --ink: var(--surface-root);
  --ink-2: var(--surface-raised);
  --ink-3: var(--surface-subtle);
  --line: var(--border);
  --gold: var(--accent-text);
  --gold-fill: var(--accent-fill);
  --gold-soft: var(--accent-soft);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --ok: var(--state-ok);
  --warn: var(--state-warn);
  --bad: var(--state-bad);
  --radius: 12px;
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme='light'] {
  color-scheme: light;
  --surface-root: #f7f5f0;
  --surface-raised: #ffffff;
  --surface-subtle: #eeeae2;
  --border: #d6cfc2;
  --accent-text: #76531f;
  --accent-fill: #c9a96e;
  --accent-soft: rgba(118, 83, 31, 0.12);
  --on-accent: #1a1400;
  --text-primary: #1b1915;
  --text-muted: #5f5a51;
  --state-ok: #22693f;
  --state-ok-line: rgba(34, 105, 63, 0.45);
  --state-warn: #7b5100;
  --state-warn-line: rgba(123, 81, 0, 0.45);
  --state-bad: #923b2d;
  --state-bad-line: rgba(146, 59, 45, 0.45);
  --state-bad-soft: rgba(146, 59, 45, 0.1);
  --focus-ring: #76531f;
  --shadow: rgba(39, 31, 19, 0.18);
}

@media (prefers-color-scheme: light) {
  :root[data-theme='system'] {
    color-scheme: light;
    --surface-root: #f7f5f0;
    --surface-raised: #ffffff;
    --surface-subtle: #eeeae2;
    --border: #d6cfc2;
    --accent-text: #76531f;
    --accent-fill: #c9a96e;
    --accent-soft: rgba(118, 83, 31, 0.12);
    --on-accent: #1a1400;
    --text-primary: #1b1915;
    --text-muted: #5f5a51;
    --state-ok: #22693f;
    --state-ok-line: rgba(34, 105, 63, 0.45);
    --state-warn: #7b5100;
    --state-warn-line: rgba(123, 81, 0, 0.45);
    --state-bad: #923b2d;
    --state-bad-line: rgba(146, 59, 45, 0.45);
    --state-bad-soft: rgba(146, 59, 45, 0.1);
    --focus-ring: #76531f;
    --shadow: rgba(39, 31, 19, 0.18);
  }
}

* { box-sizing: border-box; }

html { background: var(--ink); }

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

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
  padding: 0.65rem 0.85rem; border-radius: 8px;
  background: var(--gold-fill); color: var(--on-accent);
  transform: translateY(-160%); transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* The owner's "View as client" banner (partials/head.ejs): sticky above the shell on
   every page of the borrowed portal view, so the read-only impersonated session is
   always visibly labelled no matter how far the owner scrolls. */
.viewas-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  background: var(--gold-fill); color: var(--on-accent);
  font-size: 0.9rem;
}
.viewas-banner form { margin: 0; }
.viewas-exit {
  padding: 0.25rem 0.7rem; border-radius: 8px;
  background: transparent; color: var(--on-accent);
  border: 1px solid currentColor; cursor: pointer;
  font: inherit; font-size: 0.85rem;
}
.viewas-exit:hover { filter: brightness(1.08); text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold-fill);
  box-shadow: 0 0 0 4px var(--gold-soft);
  flex: none;
}
.who { color: var(--muted); font-size: 0.85rem; }
.link {
  background: none; border: none; color: var(--gold);
  font: inherit; cursor: pointer; padding: 0;
}
.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.inline select, .inline input:not([type='hidden']), .inline textarea {
  min-height: 44px; padding: 0.55rem 0.65rem;
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: inherit;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 2rem 1.5rem 3rem; width: 100%; }

/* --- Sidebar shell (all three roles; SPEC_V1.md section 1) --- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar {
  flex: 0 0 252px;
  width: 252px;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border-right: 1px solid var(--line);
}
.sidebar .brand {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.sidenav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem;
  overflow-y: auto;
}
.sidenav-link {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
}
.sidenav-link:hover { color: var(--text); background: var(--ink-3); text-decoration: none; }
.sidenav-link.active { color: var(--text); background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-fill); }
.sidenav-signout { margin: 0.4rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--line); }

.sidebar-foot { padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--line); }
.sidebar-foot .who { display: block; padding: 0 0.25rem 0.65rem; }
.theme-switcher { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.theme-label { display: block; color: var(--muted); font-size: 0.75rem; margin: 0 0 0.4rem 0.25rem; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.theme-option {
  min-height: 36px; padding: 0.35rem 0.25rem; border-radius: 7px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: inherit; font-size: 0.75rem; cursor: pointer;
}
.theme-option:hover { background: var(--ink-3); color: var(--text); }
.theme-option.active { background: var(--gold-soft); border-color: var(--gold); color: var(--text); font-weight: 700; }

.nav-scrim { display: none; }

.content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.topbar-mobile { display: none; }
.brand-mobile { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text); }
.nav-toggle-btn { display: none; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 18px var(--shadow);
  }
  .nav-toggle:checked ~ .shell .sidebar { transform: translateX(0); }

  .nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
  .nav-toggle:checked ~ .shell .nav-scrim { display: block; }

  .topbar-mobile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--ink-2);
  }
  .nav-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text);
    min-width: 44px; min-height: 44px; padding: 0.3rem 0.5rem;
    border-radius: 6px;
  }
  .nav-toggle-btn:hover { background: var(--ink-3); }
}

h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 0.75rem; }
.muted { color: var(--muted); }
.crumb { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.crumb a { color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.stat .num { font-size: 1.7rem; font-weight: 700; color: var(--gold); }
.stat .label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
th { color: var(--muted); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: var(--ink-3); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tablewrap table { margin: 0; }
.tablewrap th, .tablewrap td { padding: 0.7rem 0.9rem; }

.badge {
  display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; border: 1px solid var(--line);
  background: var(--ink-3); color: var(--muted);
}
.badge.paid, .badge.active, .badge.completed, .badge.approved, .badge.accepted { color: var(--ok); border-color: var(--state-ok-line); }
.badge.sent, .badge.on_hold, .badge.lead, .badge.published, .badge.changes_requested { color: var(--warn); border-color: var(--state-warn-line); }
.badge.overdue, .badge.cancelled, .badge.inactive, .badge.archived { color: var(--bad); border-color: var(--state-bad-line); }
/* Client value batch 2 states (SPEC_V1.md 3.6-3.8, 5.4): requests, referrals, care plans, inbox. */
.badge.resolved, .badge.rewarded, .badge.acknowledged { color: var(--ok); border-color: var(--state-ok-line); }
.badge.open, .badge.in_review, .badge.submitted, .badge.qualified, .badge.expiring, .badge.new, .badge.pending_acceptance { color: var(--warn); border-color: var(--state-warn-line); }
.badge.declined, .badge.lapsed { color: var(--bad); border-color: var(--state-bad-line); }
/* B3 (PORTAL-V2-SCOPE.md): the founding-client rate badge -- gold-toned like the brand
   accent, distinct from every status badge above (it is not a lifecycle state). */
.badge.founding { color: var(--gold); border-color: var(--gold); font-weight: 600; }

/* --- Project status timeline: stage bar, percent bar, milestones (SPEC_V1.md 3.2) --- */
.timeline-card { margin-bottom: 1.25rem; }
.status-headline { font-size: 1.02rem; margin: 0 0 1rem; }
.stagebar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.stage {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: 0.82rem; color: var(--muted);
}
.stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.stage.done { color: var(--text); border-color: var(--state-ok-line); }
.stage.done .stage-dot { background: var(--ok); }
.stage.active { color: var(--on-accent); background: var(--gold-fill); border-color: var(--gold-fill); font-weight: 600; }
.stage.active .stage-dot { background: var(--ink); }

.progresswrap { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.progressbar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--ink-3); overflow: hidden; }
.progressfill { height: 100%; background: var(--gold-fill); border-radius: 999px; }
.progresslabel { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

/* --- Updates feed (SPEC_V1.md 3.2) --- */
.updatefeed { display: flex; flex-direction: column; gap: 0.75rem; }
.update-item { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; }
.update-date { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.update-body { white-space: pre-wrap; }
/* B1 (PORTAL-V2-SCOPE.md): the celebratory "Completed work" cut -- a left accent bar
   marks each shipped milestone card distinctly from the plain updates feed above. */
.milestone-item { border-left: 3px solid var(--ok); }
.milestone-item .update-date { color: var(--ok); }

/* --- Contract inline agreement body (SPEC_V1.md 3.4; A1/A2 fix, PORTAL-V2-SCOPE.md):
   owner/bridge markdown source rendered through the dependency-free renderer in
   src/lib/render-doc.js into real headings/lists/bold, styled to match the document
   surface. The renderer emits explicit <p>/<br> for breaks, so no white-space: pre-wrap
   here (that would double the spacing on top of the real block elements). --- */
.contract-body { margin: 0.5rem 0 0; }
.contract-body p { margin: 0 0 0.85rem; line-height: 1.55; }
.contract-body p:last-child { margin-bottom: 0; }
.contract-body h2, .contract-body h3, .contract-body h4, .contract-body h5, .contract-body h6 {
  margin: 1.1rem 0 0.5rem; color: var(--text);
}
.contract-body h2:first-child, .contract-body h3:first-child, .contract-body h4:first-child { margin-top: 0; }
.contract-body ul, .contract-body ol { margin: 0 0 0.85rem; padding-left: 1.4rem; line-height: 1.55; }
.contract-body li { margin-bottom: 0.25rem; }
.contract-body strong { color: var(--text); font-weight: 600; }

/* --- Deliverable / contract audit trail (SPEC_V1.md 3.3, 3.4) --- */
.eventlist { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.88rem; color: var(--muted); }
.eventlist li { padding: 0.3rem 0; border-top: 1px solid var(--line); }
.eventlist li:first-child { border-top: none; }
.event-note { color: var(--text); margin-left: 0.35rem; }

/* --- Generic form fields (owner create/edit forms, client action forms) --- */
.field { margin-bottom: 0.9rem; }
.field label { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.85rem; }
.field input:not([type='checkbox']), .field select, .field textarea {
  width: 100%; padding: 0.55rem 0.65rem; background: var(--ink); border: 1px solid var(--line);
  min-height: 44px; border-radius: 8px; color: var(--text); font: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 4.5rem; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.form-actions { margin-top: 0.25rem; }
.subcard { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--gold-fill); color: var(--on-accent);
  border: none; border-radius: 8px; padding: 0.6rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }

.subtabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0.25rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--line);
}
.subtab {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  padding: 0.55rem 0.8rem; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); font-weight: 600;
}
.subtab:hover { background: var(--ink-3); color: var(--text); text-decoration: none; }
.subtab.active { background: var(--gold-soft); border-color: var(--gold); color: var(--text); }
.subtab span { min-width: 1.45rem; padding: 0.05rem 0.35rem; border-radius: 999px; background: var(--ink-3); text-align: center; font-size: 0.75rem; }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 0.4rem 1rem; margin: 0.5rem 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.alert { background: var(--state-bad-soft); border: 1px solid var(--state-bad-line); color: var(--bad); padding: 0.6rem 0.85rem; border-radius: 8px; }
.note { background: var(--gold-soft); border: 1px solid rgba(201,169,110,0.35); color: var(--text); padding: 0.6rem 0.85rem; border-radius: 8px; font-size: 0.9rem; }

/* C3 (PORTAL-V2-SCOPE.md): the split login landing page -- the sign-in card beside an
   explainer panel of equal width, stacking to one column on narrow screens. */
.login-split { display: flex; flex-wrap: wrap; gap: 1.5rem; max-width: 860px; margin: 6vh auto 0; align-items: stretch; }
.login-split .login { margin: 0; flex: 1 1 340px; }
.login-panel {
  flex: 1 1 340px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem;
}
.login-panel h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.login-panel h3 { margin: 1.4rem 0 0.5rem; font-size: 1rem; }
.login-panel p { margin: 0 0 0.6rem; color: var(--muted); line-height: 1.55; }
.login-panel ul { margin: 0 0 0.6rem; padding-left: 1.2rem; color: var(--muted); line-height: 1.6; }
.login-panel li { margin-bottom: 0.2rem; }

.login {
  max-width: 380px; margin: 6vh auto 0;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem;
}
.login label { display: block; margin: 1rem 0 0; color: var(--muted); font-size: 0.9rem; }
.login input {
  width: 100%; margin-top: 0.35rem; padding: 0.65rem 0.7rem;
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: inherit;
}
.login input:focus { border-color: var(--gold); }
.login .btn { width: 100%; margin-top: 1.4rem; }
.login .demo { margin-top: 1.4rem; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; }

.actions { margin: 1.25rem 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.assign-list { list-style: none; padding: 0; margin: 0.5rem 0 0.75rem; }
.assign-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.assign-list li:last-child { border-bottom: none; }
.assign-form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
.assign-form select {
  padding: 0.5rem 0.6rem; background: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); font: inherit; min-width: 240px;
}
.assign-form select:focus { border-color: var(--gold); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.footer { border-top: 1px solid var(--line); padding: 1.25rem 1.5rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
.footer a { color: var(--muted); }

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

/* --- Print: the invoice and contract detail pages carry a Print button (window.print
   via /static/print.js). These rules drop the app shell, the mobile top bar, every action
   control and form, and print the content cleanly on white. The stylesheet is global, so
   any page printed with Ctrl+P is tidied the same way; only the detail pages show a button. */
/* The ZEJ print letterhead/footer (partials/print-letterhead.ejs, print-footer.ejs)
   are hidden on screen and revealed only when printing, so a printed invoice carries
   the same ink-and-gold branding as a Document Studio PDF. */
.print-letterhead, .print-footer { display: none; }

@media print {
  .sidebar, .nav-scrim, .nav-toggle, .nav-toggle-btn,
  .topbar, .topbar-mobile, .skip-link, .footer,
  .actions, .form-actions, form, .btn, [data-print] {
    display: none !important;
  }
  html, body { background: #fff; color: #000; }
  .shell { display: block; min-height: 0; }
  .content { display: block; }
  .wrap { max-width: none; margin: 0; padding: 0; }
  .card, .timeline-card, .update-item {
    background: #fff; color: #000; border-color: #999; box-shadow: none;
  }
  .badge { background: #fff; color: #000; border-color: #999; }
  .muted, .crumb, .crumb a, .kv dt { color: #333; }
  a { color: #000; text-decoration: none; }

  /* Studio-template letterhead: solid ink bar, gold ZEJ mark, gold doc-type label.
     print-color-adjust:exact forces the dark bar and gold to actually print rather
     than being dropped as a background. */
  .print-letterhead {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    background: #111111 !important;
    padding: 6mm 8mm;
    margin: 0 0 8mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-lh-brand { color: #F0EDE8; font-size: 10.5pt; }
  .print-lh-brand strong { color: #C9A96E; font-weight: 700; }
  .print-lh-type {
    color: #C9A96E; font-weight: 700; font-size: 9pt;
    letter-spacing: 0.09em; text-transform: uppercase;
  }
  .print-footer {
    display: block !important;
    margin-top: 10mm;
    padding-top: 4mm;
    border-top: 1px solid #C9A96E;
    text-align: center;
    color: #6B665F; font-size: 7.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The on-page invoice title (H1) prints as the document heading; drop the badge tint. */
  h1 .badge { border: none; color: #6B665F; padding: 0; }
}

/* Library checklist items (src/lib/render-doc.js emits ul.checklist). The box is a
   static glyph, not a form control: there is nowhere to persist a tick, and a checkbox
   that forgets its state on reload is worse than an honest printable list. */
.checklist { list-style: none; padding-left: 0; }
.checklist .checkitem { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.6rem; line-height: 1.5; }
.checklist .checkbox { flex: 0 0 auto; font-size: 1.05em; opacity: 0.75; }

/* Two-way Messages inbox: nav unread badge + message-list rows. */
.nav-badge {
  display: inline-block; min-width: 1.25rem; padding: 0 0.35rem; margin-left: 0.35rem;
  font-size: 0.72rem; line-height: 1.25rem; text-align: center; border-radius: 999px;
  background: var(--gold-fill); color: var(--on-accent); font-weight: 700; vertical-align: middle;
}
.msg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem; margin-bottom: 0.6rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-raised); color: var(--text);
}
.msg-row:hover { border-color: var(--gold); text-decoration: none; }
.msg-row--unread { border-left: 3px solid var(--gold); background: var(--gold-soft); }
.msg-row__main { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.msg-row__subject { font-weight: 600; color: var(--text-primary); }
.msg-row--unread .msg-row__subject { font-weight: 700; }
.msg-row__snippet { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row__meta { flex: 0 0 auto; display: flex; gap: 0.35rem; align-items: center; }
.msg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 0.4rem; vertical-align: middle; }