/* ═══════════════════════════════════════════════════════════════════════════
   audit-patch.css · 21 Ocean Builders · Day-61 design system patch

   Drop-in patch. Loads AFTER components.css. Same-specificity selectors
   win because of load order; no !important used.

   Apply by adding ONE line to index.html (after the components.css link):

     <link rel="stylesheet" href="css/components.css?v=20260505-d60-fix35">
     <link rel="stylesheet" href="css/audit-patch.css?v=20260508-d61">  ← add

   Optional follow-ups (CSS doesn't need them, but they reduce dead code):
     · Delete  js/ui/designPrefs.js  and its <script> import.
     · Hide the sidebar "Design" group (or remove the entry from sidebar.js).
     · Remove "Manrope" from the Google Fonts URL in index.html.
     · Drop "Fraunces ital,wght@0,400" weights you don't use (keep 500/600 + ital500).

   Covers all 11 immediate items from the audit (sections K.1–K.11).
═══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   §1. TYPO FIXES — three sites use var(--serif) (token doesn't exist).
   The hero "Money in" $42px number was rendering in body Inter, not Fraunces.
   Original: components.css:8528, 8595, 8661.
────────────────────────────────────────────────────────────────────────── */
.mi-amount,
.mi-ambient-val,
.attn-item-icon {
  font-family: var(--font-serif);
}


/* ──────────────────────────────────────────────────────────────────────────
   §2. TAP TARGETS — iOS 44pt floor on touch. Allow denser desktop.
────────────────────────────────────────────────────────────────────────── */
.btn {
  min-height: 44px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.btn-back {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 13px;
}
.modal-close {
  width: 44px;
  height: 44px;
  font-size: 20px;
}
.icon-btn {
  width: 44px;
  height: 44px;
}
.icon-btn-light {
  width: 44px;
  height: 44px;
}
.subtab {
  padding: 14px 8px;
  min-height: 44px;
}
.proj-tab {
  padding: 12px 18px;
  min-height: 44px;
}
.proj-tab--new {
  padding: 10.5px 16px;
  min-height: 44px;
}

/* Desktop with a mouse — tighter targets are fine */
@media (hover: hover) and (pointer: fine) {
  .btn { min-height: 36px; padding: 9px 16px; }
  .modal-close { width: 36px; height: 36px; font-size: 18px; }
  .subtab { padding: 10px 8px; min-height: 0; }
  .proj-tab { padding: 10px 16px; min-height: 0; }
  .icon-btn, .icon-btn-light { width: 40px; height: 40px; }
}


/* ──────────────────────────────────────────────────────────────────────────
   §3. BUTTON SYSTEM — kill the gold gradient. Navy is primary.
   Gold becomes a state color (active tabs, money-positive trends, hero
   ring), not a button surface. The reserved gold-fill CTA lives on
   navy bands only and uses the new .btn-primary--gold modifier.
────────────────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-1);
  border: 1px solid transparent;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-2);
  box-shadow: var(--shadow-2);
}

/* Optional: keep ONE gold-fill option for the "+ Add" pill on navy bands */
.btn-primary--gold {
  background: var(--gold);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(160, 130, 62, 0.18);
  border: 1px solid rgba(201, 165, 87, 0.40);
}
.btn-primary--gold:hover:not(:disabled) {
  background: var(--gold-deep);
  color: #fff;
}

/* Quieter outline secondary — most common neutral, drop the lift */
.btn-secondary {
  box-shadow: none;
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surf2);
}


/* ──────────────────────────────────────────────────────────────────────────
   §4. FAB — navy core, gold accent ring (state, not surface).
   Also removes the per-mount entrance animation; remount no longer bounces.
────────────────────────────────────────────────────────────────────────── */
.fab {
  background: var(--accent);
  border: 1.5px solid var(--gold);
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(201, 165, 87, 0.12),
    0 8px 24px rgba(20, 22, 28, 0.18);
  animation: none;
}
.fab:hover {
  background: var(--accent-2);
  box-shadow:
    0 0 0 4px rgba(201, 165, 87, 0.18),
    0 10px 28px rgba(20, 22, 28, 0.22);
  transform: translateY(-2px);
}
.fab:active { transform: translateY(0) scale(0.97); }

/* Re-add the entrance animation only when the JS sets a one-shot class.
   Until then, navigations don't trigger fab-rise. */
.fab.fab-first-mount {
  animation: fab-rise var(--t-slow) var(--ease-out-expo) both;
}

html[data-theme="dark"] .fab {
  box-shadow:
    0 0 0 4px rgba(201, 165, 87, 0.20),
    0 10px 28px rgba(0, 0, 0, 0.40);
}


/* ──────────────────────────────────────────────────────────────────────────
   §5. MODAL — drop the decorative gold cap on the top edge.
   Rounded corners + drop shadow already say "elevated surface."
────────────────────────────────────────────────────────────────────────── */
.modal::before {
  content: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   §6. FOCUS RING — gold on cream is ~1.6:1 (fails AA 1.4.11).
   Use ink in light, gold in dark, gold on navy bands.
────────────────────────────────────────────────────────────────────────── */
:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
html[data-theme="dark"] :focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] button:focus-visible {
  outline-color: var(--gold);
}
/* On navy bands, switch to gold so the ring shows against navy */
.navy-band :focus-visible,
.proj-tabs-wrap :focus-visible,
.sidebar :focus-visible {
  outline-color: var(--gold);
}


/* ══════════════════════════════════════════════════════════════════════════
   §7. THE MONO PURGE — UI labels move to Inter, sentence case, no tracking.
   Mono is retained ONLY where mono earns it: tabular numerals in rows,
   document IDs (EST-001/INV-001), live-time tickers, currency amounts in
   ledger columns. Status pills keep mild caps but in Inter.

   This is the largest perceptual change. Touches ~50 selectors.
══════════════════════════════════════════════════════════════════════════ */

/* ── Universal labels (base.css patterns) ─────────────────────────────── */
.eyebrow,
.mono-label,
.mono-label-sm {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
/* Section eyebrow keeps the gold rule + ink color (it earns presence) */
.section-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

/* ── Empty states — drop italic serif, use neutral muted ──────────────── */
.empty,
.empty-inset {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
}

/* ── Navy band ────────────────────────────────────────────────────────── */
.navy-eyebrow,
.panel-sublabel {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-navy-dim);
}

/* ── Money-In card labels ─────────────────────────────────────────────── */
.mi-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.mi-trend {
  font-family: var(--font-sans);
}
.mi-expected-lbl {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-deep);
}
.mi-ambient-lbl {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.stat-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
}
/* Amber stat color collapses into the navy accent — fewer competing notes */
.stat-card.amber .stat-value {
  color: var(--accent-fg);
}

/* ── Team-today card ──────────────────────────────────────────────────── */
.team-card-head-l,
.team-card-head-r {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.team-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
}
/* team-hours stays mono — it's a numeric value */
.team-hours {
  letter-spacing: 0.01em;
}

/* ── Form labels & hints ──────────────────────────────────────────────── */
.fld-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.fld-label .req {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.form-section-head {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.fob-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.time-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.fld-hint {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sb-group,
.sb-subheader,
.sidebar-tag,
.sidebar-footer,
.sb-design-row .sb-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.sb-group-chevron {
  font-family: var(--font-sans);
}
.sb-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
}
.sb-theme-opt {
  letter-spacing: 0;
}

/* ── Status pills · Day-62b · Option A: smaller caps ─────────────────────
   Was 24px tall, competing with title weight. Now 18px with 10px font and
   tighter padding — clearly secondary to the row title. */
.status-pill {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 7px;
  gap: 4px;
  height: 18px;
  line-height: 1;
}
.status-pill::before {
  width: 4px;
  height: 4px;
}
/* The interactive pill carries a caret — keep it sized to match */
.status-pill--int .status-pill-caret {
  font-size: 9px;
  margin-left: 2px;
}

/* ── Appointments / payroll-avatar rows — numbers stay mono, normalize tracking */
.appt-compact-when,
.pa-rate,
.pa-hours,
.pa-day-pill,
.pa-time {
  letter-spacing: 0.02em;
}

/* ── Signature modal labels ───────────────────────────────────────────── */
.sig-subtitle,
.sig-instructions,
.sig-existing-label,
.sig-picker-eyebrow,
.sig-side-btn-sub,
.sig-side-btn-status {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Brand monogram ───────────────────────────────────────────────────── */
.brand-monogram .bot {
  letter-spacing: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   §8. MONEY-IN CARD — extract ambient stats into independent tiles.
   No DOM change required: we restyle the existing structure so the
   headline reads as the hero card and the ambient cells read as
   four standalone snapshot tiles below.
══════════════════════════════════════════════════════════════════════════ */
.money-in-card {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin-bottom: var(--sp-4);
}
.mi-headline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
  border-bottom: 1px solid var(--border); /* full border, not weld-rule */
}
.mi-amount {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mi-trend {
  margin-top: var(--sp-3);
}
.mi-expected {
  margin: 0 0 var(--sp-3) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--shadow-1);
}
.mi-ambient {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-top: 0;
}
@media (min-width: 480px) {
  .mi-ambient { grid-template-columns: repeat(4, 1fr); }
}
.mi-ambient-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.mi-ambient-val {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}


/* ══════════════════════════════════════════════════════════════════════════
   §9. SUB-TABS — single canonical style. Override the editorial italic
   AND the masthead/goldmono variants so designPrefs becomes a no-op
   (delete the JS file at your leisure).
══════════════════════════════════════════════════════════════════════════ */
.subtab {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}
.subtab.active {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.subtab.active::after {
  width: auto;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  max-width: none;
}
.subtab-count {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  vertical-align: 0;
  margin-left: 6px;
}
.subtab.active .subtab-count {
  color: var(--gold-deep);
  font-weight: 500;
}

/* Hard-override the variant attributes so the user can ignore designPrefs */
html[data-subtab-style="masthead"] .subtab,
html[data-subtab-style="goldmono"] .subtab {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 8px;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
html[data-subtab-style="goldmono"] .subtabs {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
}
html[data-subtab-style="masthead"] .subtab.active,
html[data-subtab-style="goldmono"] .subtab.active {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}
html[data-subtab-style="masthead"] .subtab.active::after,
html[data-subtab-style="goldmono"] .subtab.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  width: auto;
  max-width: none;
}

/* Project tabs — neutralize design-prefs alternates */
html[data-tab-font="serif"] .proj-tab {
  font-family: var(--font-sans);
  font-style: normal;
  letter-spacing: -0.005em;
}
html[data-tab-active="gold"] .proj-tab.active {
  background: var(--surface);
  color: var(--accent-fg);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
   §10. DROP MANROPE — form fields use Inter everywhere.
   The Day-60 fix35 form-density override is silenced.
══════════════════════════════════════════════════════════════════════════ */
.modal--wide .fld-input,
.modal--wide .fld-textarea,
.modal--wide .fld-select,
.modal-form-dense .fld-input,
.modal-form-dense .fld-textarea,
.modal-form-dense .fld-select {
  font-family: var(--font-sans);
}


/* ══════════════════════════════════════════════════════════════════════════
   §11. STRAGGLERS — 9/10px font-size sites the Day-34 sweep missed.
   These are reachable selectors; size them to the canonical 12px.
══════════════════════════════════════════════════════════════════════════ */
.subtab-count,
.appt-compact-when,
.team-meta,
.pa-rate,
.pa-hours,
.pa-day-pill,
.pin-numeral-text,
.brand-monogram .bot,
.sb-design-row .sb-label,
.fld-hint {
  font-size: 12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   §12. NAVY BAND — slim back further on small viewports. README claimed
   the band was slimmed; on iPhone SE it still consumes too much height.
══════════════════════════════════════════════════════════════════════════ */
.navy-band {
  padding:
    calc(var(--sp-4) + env(safe-area-inset-top, 0px))
    var(--sp-5)
    var(--sp-5);
}
@media (max-width: 380px) {
  .navy-band {
    padding:
      calc(var(--sp-3) + env(safe-area-inset-top, 0px))
      var(--sp-4)
      var(--sp-4);
  }
}
@media (min-width: 720px) {
  .navy-band {
    padding:
      calc(var(--sp-5) + env(safe-area-inset-top, 0px))
      var(--sp-7)
      var(--sp-6);
  }
}

/* Brand title polish */
.brand-title {
  letter-spacing: -0.025em;
  line-height: 1.0;
}


/* ══════════════════════════════════════════════════════════════════════════
   §13. REDUCED-MOTION REAFFIRMATION
══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fab.fab-first-mount,
  .fab { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   §14. SIDEBAR REDESIGN (Day-61)
   Header gets a close ×. Group headers go sentence-case Inter. Items go
   to 44px with three distinct states. Footer carries Sign out + version
   on a single row. Width tightens 300 → 280 so more app peeks through.
────────────────────────────────────────────────────────────────────────── */

/* Width — tighter so the navy app behind shows more */
.sidebar {
  max-width: 280px;
}

/* ── Header — flex row with brand on the left, close on the right ── */
.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding:
    calc(var(--sp-4) + env(safe-area-inset-top, 0px))
    var(--sp-4)
    var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-brand { flex: 1; min-width: 0; }
.sidebar-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
}
.sidebar-tag {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
  font-weight: 400;
}
.sidebar-close {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-close:hover {
  background: var(--surf2);
  color: var(--ink);
}
@media (hover: none) {
  /* On touch, bump to 44 so it meets HIG */
  .sidebar-close { width: 44px; height: 44px; font-size: 24px; }
}

/* ── List + group headers ────────────────────────────────────────────── */
.sidebar-list {
  padding: var(--sp-2) 0 var(--sp-3);
}
.sb-group {
  padding: 14px var(--sp-4) 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
}
.sb-group-toggle:hover,
.sb-group-toggle:active {
  color: var(--ink);
  opacity: 1;
}
.sb-group-chevron {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.7;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms;
}
.sb-group-toggle:hover .sb-group-chevron { opacity: 1; }

/* ── Items — 44px, three distinct states ─────────────────────────────── */
.sb-item {
  position: relative;
  min-height: 44px;
  padding: 10px var(--sp-4);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  border-left: 0;
  background: transparent;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.sb-item-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color var(--t-fast);
}

/* Hover — distinct from active. Soft navy wash. */
@media (hover: hover) {
  .sb-item:hover {
    background: rgba(14, 27, 53, 0.04);
    color: var(--ink);
  }
  .sb-item:hover .sb-item-icon { color: var(--ink); }
}

/* Active — gold-tinted surface + 3px gold left bar (interior, not edge) */
.sb-item.active {
  background: var(--gold-bg);
  color: var(--gold-deep);
  font-weight: 600;
  border-left: 0;
}
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}
.sb-item.active .sb-item-icon { color: var(--gold-deep); }

html[data-theme="dark"] .sb-item.active {
  background: rgba(201, 165, 87, 0.10);
  color: var(--gold);
}
html[data-theme="dark"] .sb-item.active .sb-item-icon { color: var(--gold); }

/* ── Theme tri-state segmented (Auto / Light / Dark) ─────────────────── */
.sb-theme-row {
  padding: 8px var(--sp-4);
  min-height: 44px;
}
.sb-theme-segmented {
  border-radius: 8px;
  padding: 2px;
}
.sb-theme-opt {
  font-size: 11px;
  padding: 5px 9px;
  letter-spacing: 0;
}

/* ── Footer — flex row: Sign out button + version ────────────────────── */
.sidebar-footer {
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.sidebar-signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 40px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sidebar-signout:hover {
  background: var(--red-soft);
  border-color: var(--red-line);
  color: var(--red);
}
@media (hover: none) {
  .sidebar-signout { min-height: 44px; }
}
.sidebar-version {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   §15. COLLAPSIBLE ROW (Day-62)
   Compact list rows used by estimates / invoices / change orders / RFIs /
   reimbursements / day-off / appointments. Tap row → expand in place to
   reveal description + actions. Multiple rows can be open simultaneously.
   Helper at js/ui/collapsibleRow.js.
────────────────────────────────────────────────────────────────────────── */
.c-row {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-2);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.c-row:hover { border-color: var(--gold); }
.c-row.is-expanded {
  border-color: var(--gold);
  box-shadow: var(--shadow-2);
}
.c-row.is-denied,
.c-row.is-overdue { border-color: var(--red-line); }
.c-row.is-denied:hover,
.c-row.is-overdue:hover { border-color: var(--red); }
.c-row.is-draft { opacity: 0.96; }
.c-row.is-completed { opacity: 0.78; }

.c-row-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  min-height: 60px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.c-row-head:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.c-row-pill { flex-shrink: 0; display: inline-flex; align-items: center; }

.c-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-row-line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.c-row-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.c-row-title em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.c-row-amount {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.c-row.is-overdue .c-row-amount { color: var(--red); }
.c-row-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}
/* Panels pass meta as h('div', {}, span1, span2, …). The wrapper div
   needs flex:1 + width:100% so it spans the full meta width — without
   that it shrinks to content size and `margin-left:auto` on the pill
   has nothing to push against. */
.c-row-meta > div {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
  width: 100%;
}
/* Right-align the status pill so it always sits next to the chevron
   in a fixed column. Anything in DOM order after the pill (conversion
   badges, denied text) stays glued to its right. */
.c-row-meta > .status-pill,
.c-row-meta > .status-pill-int,
.c-row-meta > div > .status-pill,
.c-row-meta > div > .status-pill-int,
.c-row-meta > div > .c-row-tag {
  margin-left: auto;
}
.c-row-meta > div > .status-pill ~ *,
.c-row-meta > div > .status-pill-int ~ * {
  margin-left: 0;
}
.c-row-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surf2);
  border: 1px solid var(--border-soft);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--muted);
}

.c-row-chevron {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 200ms var(--ease-out-expo),
              background var(--t-fast),
              color var(--t-fast);
}
@media (hover: none) {
  .c-row-chevron { width: 36px; height: 36px; }
}
.c-row-chevron:hover {
  background: var(--surf2);
  color: var(--ink);
}
.c-row.is-expanded .c-row-chevron {
  transform: rotate(180deg);
  color: var(--gold-deep);
}

.c-row-body {
  border-top: 1px solid var(--border-soft);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: c-row-body-in var(--t-base) var(--ease-out-expo);
}
@keyframes c-row-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.c-row-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
}
.c-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.c-row-actions-spacer { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .c-row-body { animation: none; }
  .c-row-chevron { transition: background var(--t-fast), color var(--t-fast); }
  .c-row.is-expanded .c-row-chevron { transform: rotate(180deg); }
}


/* ──────────────────────────────────────────────────────────────────────────
   §16. BUTTON SIZE TIERS (Day-62)
   The audit-patch §2 promoted ALL .btn to 44px min-height. Inside dense
   list rows that's wrong — HIG calls for 44pt on the primary tap target,
   not on every secondary inline action. Reintroduce .btn-sm (32px) and
   .btn-xs (26px). Existing markup using .btn .btn-small is back-compat'd
   by the override at the bottom — no panel-side edits required.
────────────────────────────────────────────────────────────────────────── */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  min-height: 32px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast),
              border-color var(--t-fast),
              color var(--t-fast),
              transform 80ms;
}
.btn-sm:hover:not(:disabled) {
  background: var(--surf2);
  border-color: var(--gold-deep);
}
.btn-sm:active:not(:disabled) { transform: scale(0.98); }
.btn-sm:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-sm.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.btn-sm.btn-primary:hover:not(:disabled) { background: var(--accent-2); }
.btn-sm.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn-sm.btn-outline-gold {
  border-color: rgba(201, 165, 87, 0.4);
  color: var(--gold-deep);
}
.btn-sm.btn-outline-gold:hover:not(:disabled) {
  background: var(--gold-bg);
  border-color: var(--gold);
}
.btn-sm.btn-outline-green {
  border-color: var(--green-line);
  color: var(--green);
  background: var(--green-soft);
}
.btn-sm.btn-outline-green:hover:not(:disabled) { border-color: var(--green); }
.btn-sm.btn-outline-red {
  border-color: var(--red-line);
  color: var(--red);
}
.btn-sm.btn-outline-red:hover:not(:disabled) {
  background: var(--red-soft);
  border-color: var(--red);
}
.btn-sm.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}

.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  min-height: 26px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn-xs.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-xs.btn-outline-gold { border-color: rgba(201,165,87,0.4); color: var(--gold-deep); background: var(--gold-bg); }
.btn-xs.btn-outline-green { border-color: var(--green-line); color: var(--green); background: var(--green-soft); }

/* ── Backwards-compat: existing markup uses .btn .btn-small. Make that
   class equivalent to .btn-sm so panels don't all need to be edited. ── */
.btn.btn-small {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn-small {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* The .btn-x deletion button — keep small but bump touch target floor */
.btn-x {
  min-height: 32px;
}
@media (hover: none) {
  .btn-x { min-height: 36px; padding: 8px 12px; }
}

/* ─── End of patch (Day-61) ─────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 2 · Day-62 design system patch
   ─────────────────────────────────────
   Applied fixes from the May-9 panel-by-panel audit:
     · Hours       A C D E
     · Employees   F G I J K L M N O Q R
     · Appointments S T U V W X Y Z AA AB AC
     · Leads       AD AE AF AG AH AI AJ AK AL AM AN AO AP AQ
     · Overview    AT AU AX AY AZ BA BB BC BD
   AW (sticky on-site bar) intentionally NOT included.
   Companion JS edits applied in panels/*.js · ui/widgets.js · tokens.css.
═════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   §A · HOURS PANEL
────────────────────────────────────────────────────────────────────────── */

/* A · 6 stat cards → 2 hero + caption ribbon. Hours panel uses .stat-grid;
   we scope a 2-col variant via .stat-grid--hero. The panel JS opt-in adds
   the modifier class. (See panels/hours.js Day-62 commit.) */
#root .panel-hours .stat-grid--hero {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
#root .panel-hours .stat-grid--hero .stat-card {
  padding: var(--sp-4);
  min-height: 78px;
}
#root .panel-hours .stat-grid--hero .stat-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
#root .panel-hours .stat-ribbon {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surf2);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  padding: 8px 12px;
  margin-top: var(--sp-2);
  line-height: 1.5;
}
#root .panel-hours .stat-ribbon b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#root .panel-hours .stat-ribbon .sep { opacity: 0.4; margin: 0 4px; }

/* D · Recent entries: single Inter family, gold dot edited indicator
   (replaces left bar — was conflicting with sidebar accent). */
.entry-row .entry-name,
.entry-row .entry-when,
.entry-row .entry-cost {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.entry-row .entry-cost {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.entry-row.is-edited::before { display: none; }   /* kill left bar */
.entry-row.is-edited .entry-cost::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 6px;
  vertical-align: 1px;
}

/* E · Sidebar Hours item: pulsing red badge when there's a live shift. */
.sb-badge.red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(155, 45, 36, 0.55);
  animation: hoursLivePulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes hoursLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(155, 45, 36, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(155, 45, 36, 0); }
}


/* ──────────────────────────────────────────────────────────────────────────
   §B · EMPLOYEES PANEL
────────────────────────────────────────────────────────────────────────── */

/* I · Avatar restraint — 38px tonal disc, sans-semibold initials.
   Drop italic Fraunces, drop gold ring decoration. */
.emp-card .avatar,
.team-card .avatar,
.team-today .avatar {
  width: 38px;
  height: 38px;
  background: var(--accent);
  color: var(--on-navy);
  font-family: var(--font-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: none;
  border: 0;
}

/* I · Employee name typography: 15px Inter (was 24px Fraunces). */
.emp-card .emp-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.emp-card .emp-name em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}

/* G · Clock-out: green-soft pill with pulsing dot (live state) +
   outline-red for the action button. The visual swap happens via
   the existing .btn-outline-red on the clock-out action. */
.emp-card .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px 2px 7px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-line);
  border-radius: var(--r-pill);
}
.emp-card .live-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(31, 107, 67, 0.55);
  animation: livePillPulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes livePillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 107, 67, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(31, 107, 67, 0); }
}

/* K · Pay summary: single tonal row, money first.
   Replaces the dual tinted Today-green / Week-gold boxes. */
.emp-card .pay-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--surf2);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  padding: 9px 12px;
  margin: var(--sp-2) 0;
}
.emp-card .pay-summary .pay-amount {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.emp-card .pay-summary .pay-amount.live { color: var(--green); }
.emp-card .pay-summary .pay-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
/* J · Drop the duplicated "this week" line that sits below pay-summary */
.emp-card .pay-summary + .pay-summary--week { display: none; }

/* L · Verb-only labels + button hierarchy: Pay (gold) + Adjust (outline) +
   [⋯] for tip / report. The .btn-overflow class is shared with hours. */
.emp-card .emp-actions .btn-pay {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--accent);
  border: 1px solid var(--gold-deep);
  font-weight: 600;
  font-size: 13px;
}
.emp-card .emp-actions .btn-adjust {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}

/* M · Single [⋯] overflow per card replacing pencil + delete glyphs.
   Shared component class .btn-overflow used across panels. */
.btn-overflow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: 180ms cubic-bezier(.32,.72,0,1);
}
.btn-overflow:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn-overflow svg { width: 16px; height: 16px; }

/* N · Compact archived rows (~60px) instead of full faded cards. */
.emp-card.is-archived {
  background: var(--bg);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
}
.emp-card.is-archived .emp-name { font-size: 14px; opacity: 0.75; }
.emp-card.is-archived .pay-summary,
.emp-card.is-archived .emp-actions > :not(.btn-restore) { display: none; }
.emp-card.is-archived .btn-restore {
  margin-left: auto;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 7px;
  color: var(--ink);
}
/* No dashed borders anywhere — convert remaining dashed → solid border-soft */
.emp-card.is-archived,
.lead-desc,
.appt-desc {
  border-top-style: solid;
  border-color: var(--border-soft, var(--border));
}

/* O · Stat values use serif at consistent size; breakpoint earlier. */
.panel-employees .stat-grid .stat-value {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
@media (max-width: 540px) {
  .panel-employees .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Q · Collapsible cards default-collapsed. Head shows the original
   .emp-head-v2 (avatar + name + clock-out + edit + delete) UNCHANGED,
   followed by a summary + week $ + a SEPARATE chevron toggle button.
   The head wrapper is a <div> (not a <button>) so inner action
   buttons keep working — Clock out, Edit, Delete were broken in the
   d62q version because nested <button> swallowed inner clicks.
   Day-62r: selectors target .emp-card-v2; chev-toggle is its own btn. */
.emp-card-v2.is-collapsible {
  padding: 0;
  overflow: hidden;
}
.emp-card-v2.is-collapsible .emp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  min-height: 60px;
}
/* The original .emp-head-v2 expands to fill available space. Its
   internal flex layout (avatar + info + icons block) is preserved. */
.emp-card-v2.is-collapsible .emp-card-head > .emp-head-v2 {
  flex: 1;
  min-width: 0;
}
.emp-card-v2.is-collapsible .emp-card-body {
  display: none;
  border-top: 1px solid var(--border-soft, var(--border));
  padding: 11px 12px 12px;
  animation: empBodyIn 180ms cubic-bezier(.32,.72,0,1) ease-out;
}
.emp-card-v2.is-collapsible.is-expanded .emp-card-body { display: block; }
@keyframes empBodyIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Summary line shown next to the head row when collapsed. Always
   visible (even when expanded) so the boss sees today/week numbers
   without scrolling — but hides on narrow phones to keep the head
   uncluttered when name + action buttons are also competing. */
.emp-card-v2.is-collapsible .emp-collapsed-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  text-align: right;
}
.emp-card-v2.is-collapsible .emp-collapsed-summary-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: 500;
}
.emp-card-v2.is-collapsible .emp-collapsed-summary-week {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.emp-card-v2.is-collapsible.is-expanded .emp-collapsed-summary-text {
  /* When expanded, the dual-grid below repeats this info — so the
     summary text degrades to just the week $ on the right. */
  display: none;
}

/* Chevron toggle button — its own <button>, the only thing that
   toggles expansion. Sized to be a comfortable tap target. */
.emp-card-v2.is-collapsible .emp-chev-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.32,.72,0,1),
              color 180ms cubic-bezier(.32,.72,0,1),
              background 140ms ease;
}
.emp-card-v2.is-collapsible .emp-chev-toggle:hover {
  background: var(--surf2);
  color: var(--ink);
}
.emp-card-v2.is-collapsible .emp-chev-toggle svg {
  transition: transform 200ms cubic-bezier(.32,.72,0,1);
}
.emp-card-v2.is-collapsible.is-expanded .emp-chev-toggle svg {
  transform: rotate(180deg);
  color: var(--gold-deep);
}

/* Live mode · workers on shift — card is pinned open, summary +
   chev hidden, head row shows only the original .emp-head-v2 with
   Clock out / Edit / Delete buttons. Body always visible. */
.emp-card-v2.is-collapsible.is-live .emp-card-body { display: block; }
.emp-card-v2.is-collapsible .emp-card-head--live {
  /* Same layout but no summary + no chev (only .emp-head-v2 inside) */
}

/* Hide the inline summary text on narrow phones so the head row
   doesn't compete with the name and action buttons. The week $ stays
   because it's the most useful collapsed signal. */
@media (max-width: 380px) {
  .emp-card-v2.is-collapsible .emp-collapsed-summary-text { display: none; }
}

/* R · Compact density — card padding reduced, gap reduced. */
.panel-employees .emp-list { gap: 7px; }
.emp-card { padding: 11px 12px; }


/* ──────────────────────────────────────────────────────────────────────────
   §C · APPOINTMENTS PANEL
────────────────────────────────────────────────────────────────────────── */

/* T · Filter pill set reduced. Completed → "Show completed" toggle below
   the list. Visual just hides the pill if the panel JS didn't render it;
   no rule needed unless overriding. */

/* U · Section headers grouping by date bucket — shared pattern with Leads. */
.section-head,
.list-section-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 14px 4px 6px;
}
.section-head:first-child,
.list-section-head:first-child { padding-top: 4px; }
.section-head .count,
.list-section-head .count {
  color: var(--ink);
  opacity: 0.55;
  font-weight: 500;
}
.section-head .urgent,
.list-section-head .urgent { color: var(--red); }
.section-head .warm,
.list-section-head .warm { color: var(--gold-deep); }
.section-head .cold,
.list-section-head .cold { color: var(--red); opacity: 0.6; }

/* V · Action row hierarchy — primary gold solid, secondary outline,
   [⋯] overflow, Delete far-right with spacer. Reused across panels. */
.actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.actions-row .actions-spacer { flex: 1 1 auto; }
.btn-primary-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(160, 130, 62, 0.20),
              0 2px 6px rgba(160, 130, 62, 0.16);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn-primary-gold svg { width: 13px; height: 13px; }

/* W · Drop italic-last-word styling app-wide: the helper now passes through
   plain (see widgets.js Day-62). Belt-and-suspenders rule for any leftover. */
.c-row-title em,
.lead-name em,
.proj-verbose .pv-name em,
.pl-name em,
.attn-item-title em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}

/* Y · Status pill right-anchored in collapsed row meta. Phone moved to body. */
.c-row-meta > .status-pill { margin-left: auto; }
.c-row-body .phone-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.c-row-body .phone-link:hover { color: var(--gold-deep); }
.c-row-body .phone-link svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Z · No-date banner — gold band at top of list when there are appts
   without dates. Tap to fix inline. */
.nodate-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.35);
  border-radius: var(--r);
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: 180ms cubic-bezier(.32,.72,0,1);
}
.nodate-banner:hover { border-color: var(--gold); }
.nodate-banner .nb-icon {
  color: var(--gold-deep);
  flex-shrink: 0;
  width: 16px; height: 16px;
}
.nodate-banner .nb-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--gold);
  color: var(--accent);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}

/* AA · Swipe action backgrounds revealed under .c-row on touch.
   The transform is driven by panels/appointments.js touch handlers. */
.c-row.swipe-host { position: relative; overflow: hidden; touch-action: pan-y; }
.swipe-bg {
  position: absolute;
  top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  padding: 0 16px;
  pointer-events: none;
}
.swipe-bg--complete { right: 0; background: var(--green); }
.swipe-bg--edit     { left: 0;  background: var(--accent); }


/* ──────────────────────────────────────────────────────────────────────────
   §D · LEADS PANEL
────────────────────────────────────────────────────────────────────────── */

/* AD · Adopt collapsibleRow pattern. The lead row already has the left
   accent bar (.lead-row::before). When the panel JS opts into collapsed
   mode (.lead-row.is-collapsible), most body content hides until expand. */
.lead-row.is-collapsible {
  padding: 0;     /* head supplies its own padding */
}
.lead-row.is-collapsible .lead-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 15px;
  cursor: pointer;
  user-select: none;
  min-height: 60px;
}
.lead-row.is-collapsible .lead-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lead-row.is-collapsible .lead-head-line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.lead-row.is-collapsible .lead-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.lead-row.is-collapsible .lead-budget-inline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.lead-row.is-collapsible .lead-head-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.lead-row.is-collapsible .lead-head-meta .activity {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.lead-row.is-collapsible .lead-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lead-row.is-collapsible .lead-chev {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(.32,.72,0,1),
              color 180ms cubic-bezier(.32,.72,0,1);
}
.lead-row.is-collapsible.is-expanded .lead-chev {
  transform: rotate(180deg);
  color: var(--gold-deep);
}
.lead-row.is-collapsible .lead-row-body {
  display: none;
  border-top: 1px solid var(--border-soft, var(--border));
  padding: 11px 14px 12px;
  flex-direction: column;
  gap: 8px;
}
.lead-row.is-collapsible.is-expanded .lead-row-body { display: flex; }

/* AG · italic-last-word killed in lead names (covered by W rule above). */
.lead-name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; }
.lead-name em { font-style: normal; color: inherit; font-weight: inherit; }

/* AH · Status pill: hide in collapsed head, show in expanded body. */
.lead-row.is-collapsible .lead-head-meta > .status-pill { display: none; }
.lead-row.is-collapsible .lead-row-body .lead-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* AI · Source pill right-anchored in collapsed head. */
.lead-row.is-collapsible .lead-head-right > .source-pill { order: -1; }

/* AJ · Distinct status colors per stage. Contacted ≠ quoted.
   Override the existing .status-pill--contacted to use deep navy. */
.status-pill--contacted {
  color: #fff;
  background: var(--accent-2, var(--accent));
  border-color: var(--accent);
}
/* Lead row left bar mirrors the new contacted color */
.lead-row--contacted::before { background: var(--accent-2, var(--accent)); }

/* AK · "All" filter renamed to "Active" — text change happens in panels/leads.js */

/* AM · Section headers for active leads grouped by age. Reuses .section-head */

/* AN · Header: one Add button. (panels/leads.js change.) */

/* AO · Sublabel live context. (panels/leads.js change.) */

/* AP · Single-dialog 3-action variant. (ui/dialog.js + panels/leads.js change.) */

/* AQ · Cleanup — dashed borders → solid; hardcoded Thumbtack hex → cyan token */
.source-pill--thumbtack {
  background: var(--cyan-soft);
  color: var(--cyan);
  border-color: var(--cyan-line);
}
.source-pill--phone {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--blue-line);
}
.lead-desc { border-top-style: solid; }


/* ──────────────────────────────────────────────────────────────────────────
   §E · OVERVIEW PANEL
────────────────────────────────────────────────────────────────────────── */

/* AT · Money In ambient grid → caption ribbon. Hide the 4-grid when the
   panel JS renders the .mi-ribbon element instead. */
.money-in-card .mi-ribbon {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  background: var(--surf2);
  border-top: 1px solid var(--border-soft, var(--border));
  padding: 8px 16px;
  margin: 14px -16px -14px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.money-in-card .mi-ribbon b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.money-in-card .mi-ribbon .sep { opacity: 0.4; margin: 0 5px; }
/* When ribbon is rendered, the old grid is removed by JS; defensively
   hide it if the JS hasn't been updated yet. */
.money-in-card.has-ribbon .mi-ambient { display: none; }

/* AU · Drag handles on every reorderable widget. The .reorder-row wrapper
   already exists for some sections; this extends the visual to all
   widgets including the always-on cards. The JS adds the .drag-handle
   element to each top-level Overview card. The legacy components.css
   .reorder-row::after dots are suppressed here to avoid dot duplication —
   we now use a single explicit .drag-handle child element instead. */
.reorder-row.overview-widget::after { display: none !important; }
.reorder-row,
.overview-widget {
  position: relative;
  padding-left: 4px;
}
.drag-handle {
  position: absolute;
  left: -2px;
  top: 14px;
  width: 12px;
  color: var(--border);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(.32,.72,0,1);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 0.5;
  letter-spacing: -3px;
  user-select: none;
}
.drag-handle::before { content: '\22EE\22EE'; }
.overview-widget:hover .drag-handle,
.reorder-row:hover .drag-handle { opacity: 0.55; }
@media (hover: none) {
  /* On touch devices, long-press on the card triggers drag mode and the
     handle stays visible for the duration. The .is-dragmode class is
     toggled by panels/overview.js touch handlers. */
  .overview-widget.is-dragmode .drag-handle,
  .reorder-row.is-dragmode .drag-handle { opacity: 1; }
}

/* AX · Attention card icons swap from text glyphs to SVG. The JS injects
   <svg> children into .attn-item-icon. Strip any leftover text content. */
.attn-item-icon { font-size: 0; line-height: 1; }
.attn-item-icon svg { width: 14px; height: 14px; }

/* AY · Kill italic-last-word in project rows.
   (covered by global W rule above; explicit override for active project rows) */
.proj-verbose .pv-name,
.pl-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  font-style: normal;
}
.proj-verbose .pv-name em,
.pl-name em { font-style: normal; color: inherit; font-weight: inherit; }

/* AZ · Smart default-collapsed states — driven by panels/overview.js
   default `collapsed` Set seeding. CSS just ensures clean transitions. */

/* BA · Section header counts comprehensive. The header text is computed
   in JS; this CSS just lifts visual weight of the meta when present. */
.collapsible-section-head .meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* BB · Active + Finished projects → compact rows. The JS swaps to compact
   row markup; this provides the styling. */
.proj-row-compact {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(.32,.72,0,1);
}
.proj-row-compact:hover { border-color: var(--gold); }
.proj-row-compact .pl-bar {
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.proj-row-compact .pl-bar--over    { background: var(--red); }
.proj-row-compact .pl-bar--green   { background: var(--green); }
.proj-row-compact .pl-bar--archived{ background: var(--border); }
.proj-row-compact .pl-info { flex: 1; min-width: 0; }
.proj-row-compact .pl-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-row-compact .pl-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.proj-row-compact .pl-amt {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}
.proj-row-compact .pl-amt--over { color: var(--red); }
.proj-row-compact .pl-chev {
  color: var(--muted);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.proj-row-compact .pl-chev svg { width: 14px; height: 14px; }

/* BC · Financials hero typography normalize — drop italic Fraunces gold,
   match Money In's hero treatment for visual consistency between the two
   widgets that now sit separately on Overview. The original markup uses
   .fin-sky-hero-val with an <em> child for the gold-tail dollar number;
   we kill the italic and re-color to ink while keeping the size weight. */
.fin-sky-hero-val {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  /* keep original 52px on desktop; the .fin-sky-hero-val rule in
     components.css already sets that. Just ensure the em child doesn't
     re-introduce gold italic. */
}
.fin-sky-hero-val em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}
.fin-sky-hero {
  background: linear-gradient(180deg, rgba(201, 165, 87, 0.05), transparent);
}
.fin-sky-hero--red .fin-sky-hero-val { color: var(--red); }

/* BD · Recent Activity → compact 1-line rows. JS adds .recent-list--compact
   modifier (or, fallback: this CSS targets the activity rows). */
.recent-list--compact .recent-row,
.recent-activity .recent-row {
  padding: 6px 0;
  align-items: center;
  gap: 9px;
}
.recent-list--compact .recent-icon,
.recent-activity .recent-icon {
  width: 22px; height: 22px;
  font-size: 10px;
}
.recent-list--compact .recent-text,
.recent-activity .recent-text {
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-list--compact .recent-text .muted,
.recent-activity .recent-text .muted {
  display: inline;
  margin: 0;
  font-size: 12px;
}


/* ──────────────────────────────────────────────────────────────────────────
   §F · GLOBAL CLEANUPS
────────────────────────────────────────────────────────────────────────── */

/* Italic-last-word elements rendered by the deprecated helper now pass
   through plain text (see widgets.js). The <em> tags inside list titles
   are also styled away here as belt-and-suspenders. */
.c-row-title em,
.lead-name em,
.attn-item-title em,
.emp-name em,
.team-name em,
.tt-name em,
.pv-name em,
.pl-name em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}

/* No more dashed borders anywhere — solid 1px border-soft is the standard. */
.lead-desc,
.appt-desc,
.emp-card.is-archived {
  border-top-style: solid !important;  /* override any leftover dashed */
}

/* Tabular numbers everywhere money or hours render. */
.cf-row-amt,
.fin-cell-val,
.fh-pos-val,
.mi-amount,
.mi-ambient-val,
.fh-amount,
.fin-hero-val,
.team-hours, .team-pay,
.tt-hours, .tt-pay,
.pl-amt,
.pv-stats b,
.lead-budget-amt,
.lead-cost-amt,
.entry-cost,
.attn-item-amount,
.today-cell-val,
.ttm-tot-val {
  font-variant-numeric: tabular-nums;
}

/* ─── End of Day-62 patch ───────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 3 · Day-62 fix-up patch (post-deploy review)
   ─────────────────────────────────────────────────
   Three issues caught during real-device testing:
     · Drag dots were rendering on BOTH sides of the Attention card
       (and other widgets) because the legacy ::after suppression
       rule was scoped too narrowly. The legacy rule lives on
       .reorder-row directly; my suppression only applied to
       .reorder-row.overview-widget. Some widget wrappers ended up
       with only .reorder-row (race during render or class merge).
     · No UI to show/hide widgets — the OVERVIEW_WIDGETS list was
       exported but had no consumer. Added a Customize modal opened
       from a button on the Overview header.
     · Missing companion styles for the new Customize modal.
═════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   §G · DRAG-DOT DUPLICATION (hardened)
────────────────────────────────────────────────────────────────────────── */

/* The legacy .reorder-row::after rule (components.css:5499) paints dots on
   the right edge of every reorder-row. The new .drag-handle element paints
   dots on the left. We had a suppression scoped to .reorder-row.overview-widget,
   but in some render paths the .overview-widget class hadn't been applied
   when the user took the screenshot (or the production CSS was cached at
   the previous version). Belt-and-suspenders: kill the legacy ::after dots
   wherever a .drag-handle sibling element exists. The :has() guard means
   browsers that don't support :has() (very few in 2026) get the unconditional
   suppression below. */
.reorder-row:has(> .drag-handle)::after { display: none !important; }

/* Unconditional fallback for browsers without :has() support — every
   reorder-row in the Day-62 build ships with a .drag-handle child, so
   it's safe to suppress ::after broadly. The .drag-handle dots are the
   single source of truth for "this is draggable". */
@supports not selector(:has(*)) {
  .reorder-row::after { display: none !important; }
}


/* ──────────────────────────────────────────────────────────────────────────
   §H · CUSTOMIZE OVERVIEW MODAL · V1 final
   ─────────────────────────────────────────
   Grouped sections (Always-on / Modules) with drag-to-reorder rows and
   readable iOS-style toggles. Footer counter + reset button on a
   visible cream surface (was previously navy-on-navy and invisible).
────────────────────────────────────────────────────────────────────────── */

.cust-frame {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 0;
  min-height: 0;
}

.cust-help {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
  padding: 0 6px;
  margin: 0;
}
.cust-help svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Section */
.cust-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cust-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
}
.cust-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.cust-section-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.cust-section-list {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}

/* Row */
.cust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 8px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  min-height: 54px;
  background: var(--surface);
  user-select: none;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1),
              background 180ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 180ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 180ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  position: relative;
}
.cust-row:last-child { border-bottom: 0; }

/* Hidden state — cream-bg + strikethrough name */
.cust-row.is-off { background: var(--surf2); }
.cust-row.is-off .cust-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(107, 99, 84, 0.35);
}

/* Drag grip — left edge, 24×36 tap target */
.cust-grip {
  width: 24px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--border);
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
  border-radius: 6px;
  transition: color 180ms cubic-bezier(0.32, 0.72, 0, 1),
              background 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cust-grip:hover {
  color: var(--gold-deep);
  background: var(--gold-bg);
}
.cust-grip:active { cursor: grabbing; }
.cust-grip svg { width: 14px; height: 14px; }

.cust-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cust-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cust-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cust-row.is-off .cust-status { color: var(--muted); }

/* iOS toggle — readable on/off */
.cust-tog {
  position: relative;
  width: 44px;
  height: 26px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.cust-tog-track {
  display: block;
  width: 44px;
  height: 26px;
  background: var(--border);
  border-radius: 999px;
  border: 1px solid var(--border);
  position: relative;
  transition: background 180ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cust-tog-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),
              0 1px 1px rgba(0, 0, 0, 0.15);
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cust-tog.is-on .cust-tog-track {
  background: var(--green);
  border-color: var(--green);
}
.cust-tog.is-on .cust-tog-thumb { transform: translateX(18px); }

/* Drag states */
.cust-row.is-dragging {
  box-shadow: 0 12px 32px rgba(14, 27, 53, 0.18),
              0 2px 6px rgba(14, 27, 53, 0.10);
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, rgba(201, 165, 87, 0.10) 0%, var(--surface) 100%);
  z-index: 50;
  border-radius: var(--r);
  transition: none;
}
.cust-row.is-off.is-dragging {
  background: linear-gradient(180deg, rgba(201, 165, 87, 0.10) 0%, var(--surf2) 100%);
}
body.cust-dragging-active .cust-row:not(.is-dragging) { opacity: 0.85; }
body.cust-dragging-active { cursor: grabbing; }

/* Footer — visible cream surface, navy text */
.cust-foot {
  margin-top: 4px;
  padding: 14px;
  background: var(--surf2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cust-foot-info {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
}
.cust-foot-info b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.cust-foot-btn {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.005em;
  transition: 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cust-foot-btn:hover {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.cust-foot-btn svg { width: 13px; height: 13px; }

/* Modal-frame override — the cream surface inside the navy modal frame */
.modal--navy.cust-modal .modal-body {
  background: var(--bg);
  padding: 14px 14px 0;
}
.modal--navy.cust-modal .cust-foot {
  margin: 14px -14px 0;
}

/* ─── End of Day-62 fix-up patch ────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 4 · d62i fix-up — sidebar overflow + customize entry point
   ─────────────────────────────────────────────────────────────────
   Issues from on-device review of d62h:
     · Sidebar Appearance row: the Auto/Light/Dark segmented control
       overflowed and visually overlapped the "Appearance" label,
       because .sb-label had no flex constraints. Fix: make the label
       flex-shrink + ellipsize, tighten segmented padding so all four
       elements (icon + label + 3-opt segmented) fit on a 280px row.
     · Customize entry point: the ⚙ icon-button on the Overview header
       wasn't discoverable for the user. Add a parallel entry point as
       a sidebar item under the System group so it's findable from
       wherever in the app.
═════════════════════════════════════════════════════════════════════════ */

/* §I · Sidebar Appearance row — overflow fix */
.sb-theme-row {
  /* Allow label to shrink before segmented does */
  min-width: 0;
}
.sb-theme-row .sb-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tighten segmented spacing so it fits next to label on narrow drawers */
.sb-theme-segmented {
  flex-shrink: 0;
  max-width: 60%;
}
.sb-theme-opt {
  padding: 5px 8px;
  font-size: 11.5px;
}

/* §J · Sidebar Customize Overview entry — uses standard .sb-item layout */
.sb-item--customize .sb-item-icon { color: var(--gold-deep); }

/* ─── End of d62i fix-up ────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 5 · d62j — Leads hero panel
   ─────────────────────────────────
   The 4-cell stat-grid in Leads was rendering "[object Object]" because
   the panel called statCard() with an options-object signature it
   doesn't support. AE had already ratified killing the grid (the four
   counts were duplicated in the filter pills below). Replaces with a
   single hero metric — money won this month — which is the one number
   the boss cares about that ISN'T already on the pills.
═════════════════════════════════════════════════════════════════════════ */

.leads-hero {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-1);
}
.leads-hero-l {
  flex: 1;
  min-width: 0;
}
.leads-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.leads-hero-val {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.leads-hero-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.leads-hero-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.leads-hero-meta-2 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Skeleton placeholder for the leads-hero while data loads */
.leads-hero.skel-block {
  background: linear-gradient(90deg,
    var(--surf2) 0%,
    var(--surface) 50%,
    var(--surf2) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}

/* ─── End of d62j ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 6 · d62l — Project tab strip refinement
   ──────────────────────────────────────────────
   The pills already render fully rounded. Refinements in this patch:
     · Tighter padding (10/18 → 7/14) so more names fit visible
     · Right-edge fade gradient signals "more content scrollable"
     · Cleaner "+ New" pill — drop dashed border, use solid bg with
       gold icon, matches the rest of the strip's visual language
     · Stronger active state — keep the cream surface but add subtle
       shadow + bolder weight so it pops against the capsule
═════════════════════════════════════════════════════════════════════════ */

/* Tighter pill padding so longer names like "Hanna Gunnoe" don't truncate
   as easily. Was 10px 18px. */
.proj-tab {
  padding: 7px 14px;
  font-size: 13px;
}

/* Active pill — keep cream surface (matches existing design system) but
   add a subtle shadow + tabular weight bump. */
.proj-tab.active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* "+ New" pill — drop the dashed border treatment. Use a clean solid
   pill with gold-tinted hover, matching the rest of the strip. */
.proj-tab--new {
  border: 1px solid var(--on-navy-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-navy-dim);
  padding: 7px 12px;
}
.proj-tab--new:hover {
  border-color: rgba(201, 165, 87, 0.60);
  background: rgba(201, 165, 87, 0.10);
  color: var(--gold);
}
.proj-tab--new .proj-tab-dot {
  /* The "+ New" tab's "dot" slot was being abused as a "+" glyph;
     restore it to a real icon-friendly slot. */
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: currentColor;
  opacity: 1;
}

/* Right-edge fade — signals "more content scrollable". The .proj-tabs
   capsule already has overflow:auto + scrollbar-hidden; this just adds
   the visual hint. Implemented on the wrap so the fade tracks the
   capsule's right edge regardless of inner scroll position. */
.proj-tabs-wrap {
  position: relative;
}
.proj-tabs-wrap::after {
  content: '';
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-4);
  bottom: var(--sp-4);
  width: 28px;
  background: linear-gradient(90deg,
    rgba(14, 27, 53, 0) 0%,
    var(--accent) 100%);
  pointer-events: none;
  border-radius: 0 999px 999px 0;
  z-index: 1;
}

/* Active dot — preserve the gold ring (it's good signal) but tighten
   the ring color so it reads against the cream active pill. */
.proj-tab.active .proj-tab-dot {
  box-shadow: 0 0 0 2px rgba(201, 165, 87, 0.30);
}

/* ─── End of d62l ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 7 · d62m — Project header collapsed state · V1 redesign
   ──────────────────────────────────────────────────────────────
   The collapsed header info block was visually heavy: address as plain
   sans, phone in serif large 19px on its own line. V1 tightens it:
     · Address + phone get leading icons (pin / phone) for type clarity
     · Phone uses sans tabular instead of serif large to reduce
       contention with the title's serif treatment above
     · Edit + share buttons sit together on the right
   Title size and the expanded state are intentionally untouched —
   the larger title-when-collapsed is preserved by request.
═════════════════════════════════════════════════════════════════════════ */

/* V1 collapsed info block — overrides the legacy spacing */
.proj-collapsed-info--v1 {
  margin-top: var(--sp-3);
  align-items: center;
}
.proj-collapsed-info--v1 .proj-collapsed-info-text {
  gap: 4px;
}
.proj-collapsed-info--v1 .proj-collapsed-info-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.35;
}
.proj-collapsed-info--v1 .proj-collapsed-info-line svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
}
.proj-collapsed-info--v1 .proj-collapsed-info-line-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Override the legacy serif-large phone treatment when in V1 layout —
   sans-tabular reads cleaner alongside the icon and matches address. */
.proj-collapsed-info--v1 .proj-collapsed-info-phone {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--on-navy);
  letter-spacing: -0.005em;
}
.proj-collapsed-info--v1 a.proj-collapsed-info-link.proj-collapsed-info-phone {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-navy);
}

/* ─── End of d62m ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 8 · d62n — Project info subtabs · V2 (icon + label)
   ──────────────────────────────────────────────────────────
   The 6 subtabs (Overview · Expenses · Reimb · Tasks · Hours · Team)
   were truncating to "Over..." "Expe..." "Reim..." because flex 1:1
   gave each tab ~60px on a 360px-wide screen and the labels were 14px
   serif italic. V2 stacks an icon above each label and shrinks the
   label to 11px sans, so all 6 fit comfortably without scroll. The
   icon compensates for the shorter label visually.
═════════════════════════════════════════════════════════════════════════ */

.subtabs.subtabs--v2 {
  padding: 0 6px;
}

.subtab.subtab--v2 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 9px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 180ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.subtab.subtab--v2 svg {
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}
.subtab.subtab--v2 .subtab-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.subtab.subtab--v2.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
  font-weight: 600;
  font-style: normal;
}
.subtab.subtab--v2.active svg {
  opacity: 1;
  color: var(--gold-deep);
}
/* Override the legacy ::after underline indicator — V2 uses
   border-bottom-color directly on the button so the indicator spans
   the full tab width, not just the label. */
.subtab.subtab--v2.active::after {
  display: none;
}
/* V2 count pill — tighter than the legacy mono treatment */
.subtab.subtab--v2 .subtab-count {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  font-style: normal;
  background: var(--surf2);
  color: var(--muted);
  padding: 0 4px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  min-width: 14px;
  text-align: center;
  margin-left: 0;
}
.subtab.subtab--v2.active .subtab-count {
  background: var(--gold-deep);
  color: #fff;
}

/* ─── End of d62n ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 9 · d62o — Project info Overview · unified Activity card (V2A)
   ─────────────────────────────────────────────────────────────────────
   The 5 individual collapsibles below the hero (Spend breakdown · Top
   workers · 7-day chart · Recent expenses · Recent hours) became one
   "Activity" card with internal underline tabs. Same tab language as
   the project sub-tab strip above for visual coherence — an active tab
   is signaled by gold underline + bold ink, inactive by muted sans.
═════════════════════════════════════════════════════════════════════════ */

.pi-activity-card {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}

/* Header — clickable, collapses the entire card */
.pi-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft, var(--border));
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pi-activity-head:hover {
  background: var(--surf2);
}
.pi-activity-card:has(.pi-activity-head[aria-expanded="false"]) .pi-activity-head {
  border-bottom: 0;
}
.pi-activity-title-block {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
.pi-activity-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.pi-activity-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.pi-activity-chev {
  flex-shrink: 0;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pi-activity-chev.is-open {
  transform: rotate(180deg);
}

/* Tab strip — same underline-gold language as the subtab strip above */
.pi-activity-tabs {
  display: flex;
  gap: 0;
  background: var(--bg);
  padding: 0 6px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  overflow-x: auto;
  scrollbar-width: none;
}
.pi-activity-tabs::-webkit-scrollbar { display: none; }

.pi-activity-tab {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 9px 11px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pi-activity-tab:hover {
  color: var(--ink);
}
.pi-activity-tab.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
.pi-activity-tab-count {
  font-family: var(--font-mono);
  font-size: 8.5px;
  background: var(--surf2);
  color: var(--muted);
  padding: 0 5px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-width: 14px;
  text-align: center;
}
.pi-activity-tab.active .pi-activity-tab-count {
  background: var(--gold-deep);
  color: #fff;
}

/* Optional action row above the body (e.g. "+ Expense", "+ Hours") */
.pi-activity-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px 0;
}

.pi-activity-body {
  padding: 12px 14px 14px;
}

/* ─── End of d62o ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 10 · d62p — Unified subtab design system
   ─────────────────────────────────────────────────
   Same component vocabulary applied across all 5 project subtabs
   (Expenses · Reimburse · Tasks · Hours · Team). Each subtab keeps
   its own data shape and behavior, but shares: summary head, group
   head, card container, list row, task row, person row, empty state,
   pill, day pills, sparkline, and category card. This eliminates the
   one-off styling that used to differ between subtabs.
═════════════════════════════════════════════════════════════════════════ */

/* SUMMARY HEAD — top of every subtab */
.sub-head {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  padding: 13px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-1);
}
.sub-head--align-end {
  align-items: flex-end;
}
.sub-head-l {
  flex: 1;
  min-width: 0;
}
.sub-head-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.sub-head-primary {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sub-head-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.sub-head-meta b {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* + ADD BUTTON — gold-bordered outline */
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-deep);
  background: var(--gold-bg);
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.btn-add:hover {
  background: var(--gold);
  color: var(--accent);
}
.btn-add svg {
  width: 13px;
  height: 13px;
}

/* GROUP HEAD — separator above a list of items */
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 4px 6px;
  gap: 10px;
}
.group-head-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.group-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.group-status-dot.green { background: var(--green); }
.group-status-dot.red   { background: var(--red); }
.group-status-dot.gold  { background: var(--gold); }
.group-status-dot.muted { background: var(--muted); }
.group-head-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* GENERIC CARD CONTAINER */
.uc-card {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: 8px;
  overflow: hidden;
}

/* COLLAPSIBLE CARD HEAD */
.uc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background var(--t-fast);
}
.uc-head:hover {
  background: var(--surf2);
}
.uc-head.is-open {
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.uc-head-chev {
  flex-shrink: 0;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast);
}
.uc-head-chev svg {
  width: 13px;
  height: 13px;
}
.uc-head.is-open .uc-head-chev {
  transform: rotate(180deg);
}
.uc-head-color-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--accent);
}
.uc-head-info {
  flex: 1;
  min-width: 0;
}
.uc-head-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-head-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 1px;
}
.uc-head-amount {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.uc-head-amount.gold {
  color: var(--gold-deep);
}
.uc-head-progress {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.uc-head-progress.complete {
  color: var(--green);
}

/* PROGRESS BAR inside a card head */
.uc-progress-bar {
  height: 4px;
  background: var(--surf2);
}
.uc-progress-fill {
  height: 100%;
  background: var(--gold);
  transition: width var(--t-fast);
}
.uc-progress-fill.complete {
  background: var(--green);
}

.uc-body {
  padding: 10px 14px 12px;
}
.uc-body--flush {
  padding: 0;
}

/* UNIFIED LIST ROW */
.uc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  min-height: 42px;
  cursor: pointer;
  font-family: inherit;
  border: 0;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid var(--border-soft, var(--border));
  transition: background var(--t-fast);
}
.uc-row:last-child {
  border-bottom: 0;
}
.uc-row:hover {
  background: var(--surf2);
}
.uc-row-date {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 42px;
  text-transform: uppercase;
  font-weight: 600;
}
.uc-row-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surf2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--muted);
}
.uc-row-icon svg {
  width: 12px;
  height: 12px;
}
.uc-row-icon.gold  { background: var(--gold-bg); color: var(--gold-deep); }
.uc-row-icon.blue  { background: var(--blue-soft, rgba(45,74,120,.10)); color: var(--blue, #2D4A78); }
.uc-row-icon.green { background: var(--green-soft); color: var(--green); }
.uc-row-icon.red   { background: var(--red-soft); color: var(--red); }
.uc-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.uc-row-name {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.uc-row-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.uc-row-amount {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.uc-row-amount.gold  { color: var(--gold-deep); }
.uc-row-amount.muted { color: var(--muted); }

/* "+ N more" footer */
.uc-more {
  display: block;
  text-align: center;
  padding: 8px 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
}
.uc-more:hover {
  color: var(--gold);
}

/* TASK ROW (checkbox variant) */
.uc-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  min-height: 38px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.uc-task:last-child {
  border-bottom: 0;
}
.uc-task-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.uc-task-check svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
  transition: opacity 120ms;
}
.uc-task.done .uc-task-check {
  background: var(--green);
  border-color: var(--green);
}
.uc-task.done .uc-task-check svg {
  opacity: 1;
}
.uc-task-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.uc-task.done .uc-task-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(107, 99, 84, 0.4);
}

/* PERSON / ASSIGNMENT row (Team subtab) */
.uc-person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: var(--surface);
  cursor: pointer;
}
.uc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-bg);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.uc-person-info {
  flex: 1;
  min-width: 0;
}
.uc-person-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.uc-person-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.uc-person-r {
  flex-shrink: 0;
  text-align: right;
}
.uc-person-time {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.uc-person-hours {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* DAY PILLS (Team assignment) */
.uc-days {
  display: flex;
  gap: 3px;
  padding: 8px 12px 11px;
  background: var(--surface);
}
.uc-day {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 0;
  border-radius: 4px;
  background: var(--surf2);
  color: var(--muted);
}
.uc-day.active {
  background: var(--gold);
  color: var(--accent);
}

/* UNIFIED EMPTY STATE */
.uc-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 8px;
}
.uc-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-bg);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid rgba(201, 165, 87, 0.30);
}
.uc-empty-icon svg {
  width: 22px;
  height: 22px;
}
.uc-empty-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.uc-empty-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto 16px;
}

/* MINI 7-BAR SPARKLINE */
.spark-mini {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  padding-top: 4px;
  flex: 0 0 80px;
  max-width: 80px;
}
.spark-mini-col {
  flex: 1;
  background: var(--gold-soft);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.spark-mini-col.today {
  background: var(--gold);
}

/* STATUS PILL */
.uc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
  flex-shrink: 0;
}
.uc-pill.field   { color: var(--blue, #2D4A78); border-color: rgba(45,74,120,.30); background: var(--blue-soft, rgba(45,74,120,.10)); }
.uc-pill.manual  { color: var(--muted); border-color: var(--border); background: var(--surf2); }
.uc-pill.live    { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.uc-pill.live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green);
  animation: uc-pill-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes uc-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--green); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px transparent; opacity: 0.7; }
}

/* CATEGORY CARD (Expenses subtab) */
.uc-cat {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: 8px;
  overflow: hidden;
}
.uc-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background var(--t-fast);
}
.uc-cat-head:hover {
  background: var(--surf2);
}
.uc-cat-name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-cat-pct {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.uc-cat-amount {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.uc-cat-bar {
  height: 4px;
  background: var(--surf2);
}
.uc-cat-bar-fill {
  height: 100%;
}
.uc-cat-foot {
  display: flex;
  justify-content: space-between;
  padding: 7px 14px 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.uc-cat-foot b {
  color: var(--ink);
}

/* ─── End of d62p ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 11 · d62q — Documents top-level panels · unified design
   ──────────────────────────────────────────────────────────────
   Eight panels in the sidebar's Documents group (Estimates, Invoices,
   Change orders, RFIs, Reimbursements, Day-off, Thumbtack expenses,
   Monthly PDF) had their own bespoke layouts that drifted apart over
   time — each had a custom stat-grid, list-row pattern, and pill
   treatment. d62q unifies them into one vocabulary: hero head replaces
   the stat-grid 4-up, doc rows replace the list-row variants, and
   shared status pills/group heads are reused from d62p.
═════════════════════════════════════════════════════════════════════════ */

/* HERO HEAD — replaces stat-grid 4-up at top of each panel.
   Layout: eyebrow → row(primary serif | secondary mono) → meta inline */
.hero-head {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  padding: 13px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-1);
}
.hero-head-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.hero-head-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.hero-head-primary {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-head-primary.amber { color: var(--gold-deep); }
.hero-head-primary.green { color: var(--green); }
.hero-head-primary.red   { color: var(--red); }
.hero-head-secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1.35;
}
.hero-head-secondary b {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.hero-head-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-head-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hero-head-meta b {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.hero-head-meta-item.danger,
.hero-head-meta-item.danger b {
  color: var(--red);
}

/* FROM-PROJECT BAR — restyle of existing .from-project-bar */
.from-bar,
.from-project-bar {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r);
  padding: 9px 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.from-bar::-webkit-scrollbar,
.from-project-bar::-webkit-scrollbar { display: none; }
.from-bar-eyebrow,
.from-project-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
  padding-right: 2px;
}
.from-chip,
.from-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: var(--t-fast);
}
.from-chip:hover,
.from-project-btn:hover {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  background: var(--gold-bg);
}
.from-chip svg,
.from-project-btn .arrow {
  width: 11px;
  height: 11px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
/* Override the legacy italic-last-word styling on chip text — V2A
   ratification deprecates italicLastWord across the app. */
.from-project-btn em {
  font-style: normal;
  font-weight: 500;
}

/* RESTYLE existing .filter-pill to match the new fp-pill design.
   Override the legacy treatment so we don't have to touch the
   filterPills() widget signature. */
.filter-pills {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: var(--t-fast);
}
.filter-pill:hover {
  color: var(--ink);
  border-color: var(--border);
}
.filter-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.filter-pill .count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  background: var(--surf2);
  color: var(--muted);
  padding: 0 5px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  min-width: 14px;
  text-align: center;
  line-height: 1.5;
}
.filter-pill.active .count {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* LIST CARD — wraps a series of doc/reimb/dayoff rows */
.list-card {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: 8px;
  overflow: hidden;
}

/* DOC ROW — used by Estimates / Invoices / Change orders / RFIs */
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  min-height: 54px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, var(--border));
  transition: background var(--t-fast);
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.doc-row:last-child {
  border-bottom: 0;
}
.doc-row:hover {
  background: var(--surf2);
}
.doc-num {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  padding: 4px 8px;
  border-radius: 5px;
  min-width: 54px;
}
.doc-num-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.doc-num-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gold-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.doc-num.blue {
  background: var(--blue-soft, rgba(45,74,120,.10));
  border-color: rgba(45, 74, 120, 0.30);
}
.doc-num.blue .doc-num-lbl,
.doc-num.blue .doc-num-val { color: var(--blue, #2D4A78); }
.doc-num.green {
  background: var(--green-soft);
  border-color: var(--green-line);
}
.doc-num.green .doc-num-lbl,
.doc-num.green .doc-num-val { color: var(--green); }
.doc-num.red {
  background: var(--red-soft);
  border-color: rgba(155, 45, 36, 0.30);
}
.doc-num.red .doc-num-lbl,
.doc-num.red .doc-num-val { color: var(--red); }
.doc-num.cyan {
  background: rgba(0, 115, 168, 0.10);
  border-color: rgba(0, 115, 168, 0.30);
}
.doc-num.cyan .doc-num-lbl,
.doc-num.cyan .doc-num-val { color: var(--cyan, #0073A8); }
.doc-info {
  flex: 1;
  min-width: 0;
}
.doc-info-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.doc-info-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 2px;
}
.doc-amt-block {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.doc-amt {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.doc-amt.green { color: var(--green); }
.doc-amt.red   { color: var(--red); }

/* SHORT STATUS PILL — restyle of existing .status-pill into the
   compact treatment used across Documents panels. The interactive
   variant inherits this. */
.s-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
  flex-shrink: 0;
  line-height: 1.5;
}
.s-pill.draft     { color: var(--muted); border-color: var(--border); background: var(--surf2); }
.s-pill.sent      { color: var(--blue, #2D4A78); border-color: rgba(45,74,120,.30); background: var(--blue-soft, rgba(45,74,120,.10)); }
.s-pill.accepted  { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.s-pill.rejected  { color: var(--red); border-color: rgba(155,45,36,.30); background: var(--red-soft); }
.s-pill.declined  { color: var(--red); border-color: rgba(155,45,36,.30); background: var(--red-soft); }
.s-pill.denied    { color: var(--red); border-color: rgba(155,45,36,.30); background: var(--red-soft); }
.s-pill.paid      { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.s-pill.overdue   { color: var(--red); border-color: rgba(155,45,36,.30); background: var(--red-soft); }
.s-pill.partial   { color: var(--gold-deep); border-color: rgba(201,165,87,.30); background: var(--gold-bg); }
.s-pill.pending   { color: var(--gold-deep); border-color: rgba(201,165,87,.30); background: var(--gold-bg); }
.s-pill.approved  { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.s-pill.answered  { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.s-pill.open      { color: var(--gold-deep); border-color: rgba(201,165,87,.30); background: var(--gold-bg); }
.s-pill.closed    { color: var(--muted); border-color: var(--border); background: var(--surf2); }
.s-pill.converted { color: var(--accent); border-color: var(--accent); background: rgba(14,27,53,.06); }
.s-pill.void      { color: var(--muted); border-color: var(--border); background: var(--surf2); text-decoration: line-through; }

/* REIMB ROW — top-level Reimbursements panel rows */
.reimb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  min-height: 50px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.reimb-row:last-child { border-bottom: 0; }
.reimb-row:hover { background: var(--surf2); }
.reimb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-bg);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.reimb-info {
  flex: 1;
  min-width: 0;
}
.reimb-name {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reimb-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 2px;
}
.reimb-amt {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.reimb-amt.gold { color: var(--gold-deep); }
.reimb-amt.muted { color: var(--muted); }

/* DAY-OFF ROW */
.dayoff-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.dayoff-row:last-child { border-bottom: 0; }
.dayoff-row:hover { background: var(--surf2); }
.dayoff-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--gold-bg);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(201, 165, 87, 0.30);
}
.dayoff-icon svg { width: 14px; height: 14px; }
.dayoff-info {
  flex: 1;
  min-width: 0;
}
.dayoff-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.dayoff-range {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.dayoff-reason {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
  font-style: italic;
}

/* LEAD-EXPENSE ROW (Thumbtack panel) */
.lead-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft, var(--border));
  min-height: 46px;
}
.lead-row:last-child { border-bottom: 0; }
.lead-row:hover { background: var(--surf2); }
.lead-date {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 42px;
  text-transform: uppercase;
  font-weight: 600;
}
.lead-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.lead-source-pill {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid;
}
.lead-source-pill.tt  { color: var(--cyan, #0073A8); background: rgba(0,115,168,.10); border-color: rgba(0,115,168,.30); }
.lead-source-pill.ig  { color: #C13584; background: rgba(193,53,132,.10); border-color: rgba(193,53,132,.30); }
.lead-source-pill.ref { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.lead-source-pill.fb  { color: #1877F2; background: rgba(24,119,242,.10); border-color: rgba(24,119,242,.30); }
.lead-source-pill.go  { color: #4285F4; background: rgba(66,133,244,.10); border-color: rgba(66,133,244,.30); }
.lead-source-pill.web { color: var(--blue, #2D4A78); background: var(--blue-soft, rgba(45,74,120,.10)); border-color: rgba(45,74,120,.30); }
.lead-source-pill.other { color: var(--muted); background: var(--surf2); border-color: var(--border); }
.lead-amt {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lead-amt.zero { color: var(--muted); }

/* ACTION CARD (Monthly PDF) */
.action-card {
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  padding: 24px 18px;
  text-align: center;
  margin-bottom: 8px;
  box-shadow: var(--shadow-1);
}
.action-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.action-card-icon svg {
  width: 24px;
  height: 24px;
}
.action-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.action-card-body {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 auto 14px;
  max-width: 280px;
}
.action-card-presets {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 14px;
}
.action-preset {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surf2);
  border: 1px solid var(--border-soft, var(--border));
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--t-fast);
}
.action-preset:hover {
  color: var(--ink);
}
.action-preset.active {
  background: var(--gold);
  color: var(--accent);
  border-color: var(--gold-deep);
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: var(--t-fast);
}
.action-btn:hover {
  background: var(--accent-2);
}
.action-btn svg {
  width: 14px;
  height: 14px;
}

/* ─── End of d62q ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 12 · d62r — Misc opt-ins (panel JS now uses CSS already shipped)
   ─────────────────────────────────────────────────────────────────────
   1. Hours panel A · 2-hero + ribbon (CSS shipped d62; JS opt-in d62r)
   2. Employees Q+R · collapsible cards (CSS shipped d62; JS opt-in d62r,
      CSS selector updated above from .emp-card to .emp-card-v2)
   3. Active+Finished projects BB · proj-row-compact (CSS shipped d62;
      JS opt-in d62r)
   4. Dialog 3-action · vertical stacking when 3+ buttons (below)
═════════════════════════════════════════════════════════════════════════ */

/* When a dialog has 3 or more buttons, stack them vertically full-width
   so each option reads independently. Two-button dialogs keep their
   original horizontal layout. The :has() selector is well-supported in
   modern Safari/Chrome which is the baseline for this PWA. */
.dialog-buttons:has(.dialog-btn:nth-child(3)) {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 6px;
}
.dialog-buttons:has(.dialog-btn:nth-child(3)) .dialog-btn {
  width: 100%;
  min-width: 0;
}

/* ─── End of d62r ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 13 · d62s — Lead form Paste-from-text CTA
   ─────────────────────────────────────────────
   Quick-paste affordance at the top of the new-lead form: tap → modal
   with a textarea → regex-parse → autofill name/phone/email/address/
   budget/description. Cuts a 90-second copy-paste loop down to ~5s.
═════════════════════════════════════════════════════════════════════════ */

.lead-paste-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  background: var(--gold-bg, rgba(201, 165, 87, 0.10));
  border: 1px dashed var(--gold-deep);
  border-radius: 10px;
}
.lead-paste-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.lead-paste-btn:hover {
  background: var(--gold);
  color: var(--accent);
}
.lead-paste-icon {
  font-size: 13px;
  line-height: 1;
}
.lead-paste-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.lead-paste-body { display: flex; flex-direction: column; gap: 10px; }
.lead-paste-helper {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.lead-paste-textarea {
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  resize: vertical;
}
.lead-paste-textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg, rgba(201, 165, 87, 0.18));
}
.lead-paste-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  min-height: 14px;
}

/* ─── End of d62s ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 14 · d62t — Shared UI components
   ─────────────────────────────────────
   1. overflowMenu dropdown · used by the [⋯] button across panels
   2. swipeRow swipe-to-action gesture · used in lists where a horizontal
      drag reveals a destructive or primary action behind the row
═════════════════════════════════════════════════════════════════════════ */

/* Overflow menu (popover anchored to .btn-overflow) */
.overflow-menu {
  position: fixed;
  z-index: 600;
  min-width: 180px;
  max-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 22, 28, 0.18),
              0 4px 10px rgba(20, 22, 28, 0.10);
  padding: 5px 0;
  animation: overflowMenuIn 140ms cubic-bezier(.32, .72, 0, 1);
}
@keyframes overflowMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.overflow-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 120ms ease;
}
.overflow-menu-item:hover { background: var(--surf2); }
.overflow-menu-item.is-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}
.overflow-menu-item--warning { color: var(--gold-deep); }
.overflow-menu-item--danger  { color: var(--red); }
.overflow-menu-divider {
  height: 1px;
  background: var(--border-soft, var(--border));
  margin: 4px 0;
}

/* Swipe row — horizontal-drag reveals an action behind the row.
   The row sits in a relative container; behind it (.swipe-row-action)
   is positioned absolutely flush right. JS translates the foreground
   left on touchmove. */
.swipe-row {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.swipe-row-fg {
  position: relative;
  z-index: 2;
  background: var(--surface);
  transition: transform 200ms cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
.swipe-row.is-dragging .swipe-row-fg {
  transition: none;
}
.swipe-row-action {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0 18px;
  border: 0;
  cursor: pointer;
  z-index: 1;
  min-width: 88px;
}
.swipe-row-action--primary { background: var(--gold-deep); }
.swipe-row-action--success { background: var(--green); }

/* ─── End of d62t ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 15 · d62u — Employee card V2 layout (approved by user)
   ──────────────────────────────────────────────────────────
   3-row card:
     Row 1: avatar + name (serif, ellipsis) + Live pill + edit + delete + chev
     Row 2: meta line (PIN · rate · phone) mono small, padded under name
     Row 3: clock-in/out btn + week amount block right (separated by divider)
   Live: border-left 3px green, chev hidden (card pinned open)
═════════════════════════════════════════════════════════════════════════ */

.emp-card-v2.is-v2t {
  padding: 0;
  overflow: hidden;
}
.emp-card-v2.is-v2t.is-live {
  border-left: 3px solid var(--green);
}

.emp-v2t-head {
  padding: 12px;
}

/* Row 1: avatar + name + actions */
.emp-v2t-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.emp-v2t-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  border: 1px solid var(--gold-deep);
}
.emp-v2t-avatar.is-live {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(77, 170, 124, 0.18);
}

.emp-v2t-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 7px;
}

.emp-v2t-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: rgba(77, 170, 124, 0.12);
  color: var(--green);
  border: 1px solid rgba(77, 170, 124, 0.32);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.emp-v2t-live-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: empV2tPulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes empV2tPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.emp-v2t-archived-tag {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--surf2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.emp-v2t-pencil,
.emp-v2t-chev {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.32, .72, 0, 1);
  font-family: inherit;
}
.emp-v2t-pencil:hover {
  border-color: var(--gold-deep);
  color: var(--gold);
}
.emp-v2t-chev {
  border: 0;
}
.emp-v2t-chev svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms cubic-bezier(.32, .72, 0, 1);
}
.emp-v2t-chev:hover {
  background: var(--surf2);
  color: var(--ink);
}
.emp-card-v2.is-v2t.is-expanded .emp-v2t-chev svg {
  transform: rotate(180deg);
  color: var(--gold);
}

/* Delete btn — dual state (idle "Delete" gray / armed "Confirm" red) */
.emp-v2t-del {
  flex-shrink: 0;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.emp-v2t-del:hover {
  border-color: rgba(212, 98, 90, 0.32);
  color: var(--red);
}
.emp-v2t-del.armed {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  animation: armedShake 360ms ease-in-out;
}
@keyframes armedShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

/* Row 2: meta line PIN · rate · phone */
.emp-v2t-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-bottom: 10px;
  padding-left: 50px;  /* aligns under name (avatar 40 + gap 10) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-v2t-meta-pin {
  color: var(--gold);
  font-weight: 600;
}
.emp-v2t-meta-sep {
  opacity: 0.4;
}

/* Row 3: clock btn + week amount, separated by top divider */
.emp-v2t-row3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft, var(--border));
}

.emp-v2t-clockin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: rgba(77, 170, 124, 0.12);
  color: var(--green);
  border: 1px solid rgba(77, 170, 124, 0.32);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.32, .72, 0, 1);
}
.emp-v2t-clockin:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.emp-v2t-clockout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 180ms ease;
}
.emp-v2t-clockout:hover {
  filter: brightness(1.1);
}

.emp-v2t-week {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.emp-v2t-week-amt {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.emp-v2t-week-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Body (expanded) */
.emp-card-v2.is-v2t .emp-card-body {
  display: none;
  border-top: 1px solid var(--border-soft, var(--border));
  padding: 11px 12px 12px;
  animation: empV2tBodyIn 180ms cubic-bezier(.32, .72, 0, 1);
}
.emp-card-v2.is-v2t.is-expanded .emp-card-body {
  display: block;
}
@keyframes empV2tBodyIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide name on very narrow screens? No — name should always be visible.
   But shrink the meta line on narrow phones to prevent overflow. */
@media (max-width: 360px) {
  .emp-v2t-meta {
    padding-left: 0;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Clock-in dialog (project picker)
═════════════════════════════════════════════════════════════════════════ */
.clockin-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clockin-helper {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.clockin-project-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.clockin-project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 10px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(.32, .72, 0, 1);
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.clockin-project-row:hover {
  border-color: var(--green);
  background: rgba(77, 170, 124, 0.06);
}
.clockin-project-info {
  flex: 1;
  min-width: 0;
}
.clockin-project-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clockin-project-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clockin-project-chev {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1;
}

/* ─── End of d62u ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 16 · d62v — Leads V4 stage-rail card (approved by user)
   ────────────────────────────────────────────────────────────
   Scope: .panel-leads only — never affects other panels' filter pills
   or row layouts. Includes:
     1. Pill filter single-row scroll (no wrap)
     2. Hero already correct visually; the data bug was in JS (l.budget
        → l.estimatedBudget), no CSS changes needed
     3. Lead row V4: vertical rail (color by status, status text rotated)
        + card body with name+source+cost top, meta rows, divider, bottom
        actions row
     4. Cost chip: yellow/muted instead of red destructive
     5. Status colors: blue=new, gold=contacted, gold-deep=quoted,
        green=won, red=lost
═════════════════════════════════════════════════════════════════════════ */

/* 1 · Pill filter — single line, horizontal scroll */
.panel-leads .filter-pills {
  flex-wrap: nowrap;
  padding: 2px 0;
}

/* 2 · Lead row V4 stage-rail */
.panel-leads .lead-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-leads .lead-row-v4 {
  display: grid;
  grid-template-columns: 32px 1fr;
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(.32, .72, 0, 1);
}
.panel-leads .lead-row-v4:hover {
  border-color: var(--gold-deep);
}

/* Vertical stage rail · color by status · status text rotated */
.panel-leads .lead-rail {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 14px 0;
  color: #fff;
  background: var(--accent);
}
.panel-leads .lead-row--new       .lead-rail { background: var(--blue); }
.panel-leads .lead-row--contacted .lead-rail { background: var(--gold-deep); color: #fff; }
.panel-leads .lead-row--quoted    .lead-rail { background: var(--gold); color: var(--accent); }
.panel-leads .lead-row--won       .lead-rail { background: var(--green); }
.panel-leads .lead-row--lost      .lead-rail { background: var(--red); }

/* Card body content area */
.panel-leads .lead-content {
  padding: 12px 14px;
  min-width: 0;
}

/* Top row: name (serif, ellipsis) + source pill + cost chip */
.panel-leads .lead-v4-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.panel-leads .lead-v4-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cost chip — yellow/muted, NOT red destructive. The leadPrice is a
   cost-of-acquisition (e.g. Thumbtack charged $25 for the lead), not
   an error or refund. Coloring it red was misleading. */
.panel-leads .lead-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--gold-bg, rgba(212, 184, 114, 0.10));
  color: var(--gold-deep);
  border: 1px solid rgba(212, 184, 114, 0.25);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Meta rows: PHONE / EMAIL / ADDR / REF — fixed-width gold mono label */
.panel-leads .lead-v4-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.panel-leads .lead-v4-meta-row {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-leads .lead-v4-meta-lbl {
  flex-shrink: 0;
  width: 42px;
  color: var(--gold-deep);
  font-weight: 700;
}
.panel-leads .lead-v4-meta-val {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-leads .lead-v4-meta-val[href]:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Description (italic, muted, separate visual block) */
.panel-leads .lead-v4-desc {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.45;
  font-style: italic;
  opacity: 0.75;
  padding: 8px 10px;
  background: var(--bg);
  border-left: 2px solid var(--border-soft, var(--border));
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}

/* Lost reason block */
.panel-leads .lead-v4-lost-reason {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--red);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(212, 98, 90, 0.06);
  border-left: 2px solid var(--red);
  border-radius: 0 6px 6px 0;
}
.panel-leads .lead-v4-lost-lbl {
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-right: 4px;
}

/* Bottom row: amount left + actions right, divider top */
.panel-leads .lead-v4-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft, var(--border));
}
.panel-leads .lead-v4-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.panel-leads .lead-v4-amount--won    { color: var(--green); }
.panel-leads .lead-v4-amount--quoted { color: var(--gold); }
.panel-leads .lead-v4-amount--new,
.panel-leads .lead-v4-amount--contacted { color: var(--ink); }
.panel-leads .lead-v4-amount--lost   { color: var(--muted); text-decoration: line-through; }
.panel-leads .lead-v4-amount--empty  { color: var(--muted); opacity: 0.4; }

.panel-leads .lead-v4-actions {
  margin-left: auto;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
/* Make the existing buttons in the action area more compact and consistent */
.panel-leads .lead-v4-actions .btn,
.panel-leads .lead-v4-actions button {
  height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 6px;
}

/* Status pill colors (used in some action confirmations / labels) */
.panel-leads .status-pill--new       { background: var(--blue-soft, rgba(107, 138, 184, 0.10)); color: var(--blue); border-color: rgba(107, 138, 184, 0.32); }
.panel-leads .status-pill--contacted { background: var(--gold-bg, rgba(212, 184, 114, 0.10)); color: var(--gold-deep); border-color: rgba(212, 184, 114, 0.32); }
.panel-leads .status-pill--quoted    { background: rgba(212, 184, 114, 0.18); color: var(--gold); border-color: rgba(212, 184, 114, 0.40); }
.panel-leads .status-pill--won       { background: var(--green-soft, rgba(77, 170, 124, 0.12)); color: var(--green); border-color: var(--green-line, rgba(77, 170, 124, 0.32)); }
.panel-leads .status-pill--lost      { background: rgba(212, 98, 90, 0.08); color: var(--red); border-color: rgba(212, 98, 90, 0.32); }

/* Source pill colors */
.panel-leads .source-pill--thumbtack { background: rgba(90, 181, 201, 0.10); color: var(--cyan, #5AB5C9); border-color: rgba(90, 181, 201, 0.32); }
.panel-leads .source-pill--website   { background: var(--gold-bg, rgba(212, 184, 114, 0.10)); color: var(--gold-deep); border-color: rgba(212, 184, 114, 0.30); }
.panel-leads .source-pill--referral  { background: rgba(141, 169, 221, 0.10); color: var(--accent-fg, #8DA9DD); border-color: rgba(141, 169, 221, 0.30); }
.panel-leads .source-pill--other     { background: var(--surf2); color: var(--muted); border-color: var(--border); }

/* Armed-delete state: red-outlined card */
.panel-leads .lead-row-v4.is-armed {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red-soft, rgba(212, 98, 90, 0.08));
}

/* Narrow phones: shrink rail width */
@media (max-width: 380px) {
  .panel-leads .lead-row-v4 {
    grid-template-columns: 26px 1fr;
  }
  .panel-leads .lead-rail { font-size: 9px; letter-spacing: 0.14em; }
  .panel-leads .lead-v4-meta-lbl { width: 38px; }
}

/* ─── End of d62v ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 17 · d62x — Expense category select with inline "+ New"
   ────────────────────────────────────────────────────────────
   Lets the boss create a new expense category from inside the
   addExpense form without going to settings. Renders the select
   normally, then a small gold link-button underneath.
═════════════════════════════════════════════════════════════════════════ */

.category-select-wrap {
  display: flex;
  flex-direction: column;
}
.category-new-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease;
}
.category-new-btn:hover {
  color: var(--gold-deep);
  text-decoration: underline;
}
.category-new-btn:active {
  opacity: 0.7;
}

/* ─── End of d62x ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 18 · d62z — Archived worker indicator in project per-worker view
   ────────────────────────────────────────────────────────────
   Project Per-worker now includes archived employees (their hours
   already count toward project Labor). A small "Archived" tag next
   to the name + slightly muted avatar makes them visually distinct
   without burying them.
═════════════════════════════════════════════════════════════════════════ */

.uc-card--archived {
  opacity: 0.78;
}
.uc-card--archived .uc-avatar.is-archived,
.uc-avatar.is-archived {
  background: var(--surf2);
  color: var(--muted);
  border-color: var(--border);
}

.uc-archived-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--surf2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ─── End of d62z ─────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 19 · d62am — Universal panel header: V1 Spacious (Apple-style)
   ────────────────────────────────────────────────────────────
   Applied to every sidebar panel via renderGlobalPanelHeader in shell.js:
   Hours, Employees, Appointments, Leads, Estimates, Invoices, Change
   orders, RFIs, Reimbursements, Day-off, Lead expenses, Clients,
   Service catalog.

   Vertical layout (top to bottom):
     1. Back button   — small pill, top-left aligned (32px)
     2. Title         — serif 28px, centered, gold italic accent
     3. Sublabel      — mono 10.5px uppercase, centered
     4. Divider       — 1px rgba(255,255,255,.08)
     5. Actions row   — 38px buttons, equidistributed (1 button = 220px max centered)

   Why this layout: spec V1 from header-system-preview.html, approved
   by user. Replaces the V3 horizontal layout (d62ai) which had buttons
   crammed beside the title and rendered invisibly when their colors
   matched the navy background.
═════════════════════════════════════════════════════════════════════════ */

.app-topbar.app-topbar-v1 {
  display: block;
  padding: 14px 16px 16px;
  margin-bottom: var(--sp-5);
  background: var(--accent);
  color: var(--on-navy);
}

/* Row 1: Back button alone, top-left */
.app-topbar.app-topbar-v1 .panel-back-row {
  display: flex;
  align-items: center;
  height: 32px;
  margin-bottom: 8px;
}
.app-topbar.app-topbar-v1 .btn-back {
  height: 32px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  font-size: 13px;
  font-weight: 600;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-navy);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  box-shadow: none;
}
.app-topbar.app-topbar-v1 .btn-back:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

/* Title centered, large */
.app-topbar.app-topbar-v1 .panel-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  color: var(--on-navy);
  margin: 0;
  padding: 0 20px;
  /* Override components.css panel-title nowrap so long titles wrap */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  /* Override flex: 1 1 auto from components.css (no longer in flex parent) */
  flex: none;
}
.app-topbar.app-topbar-v1 .panel-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}

/* Sublabel centered, mono uppercase */
.app-topbar.app-topbar-v1 .panel-sublabel {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-2, rgba(255, 255, 255, 0.6));
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
  padding: 0 20px;
  line-height: 1.3;
}

/* Actions row: divider on top, buttons evenly distributed */
.app-topbar.app-topbar-v1 .panel-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Button base: 38px tall, stretches by default (for 2+ buttons).
   Specificity beats .btn-primary override from earlier in audit-patch. */
.app-topbar.app-topbar-v1 .panel-actions .btn.panel-action-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: none;
}

/* Gold variant (primary action like + Add). The audit-patch override
   of .btn-primary forces navy-on-navy which would be invisible here. */
.app-topbar.app-topbar-v1 .panel-actions .btn-primary.panel-action-btn {
  background: var(--gold);
  color: var(--accent);
  border: 1px solid var(--gold-deep);
}
.app-topbar.app-topbar-v1 .panel-actions .btn-primary.panel-action-btn:hover:not(:disabled) {
  background: var(--gold-soft, var(--gold));
}

/* Navy variant (secondary actions like Weekly PDF, Quick, + Reimb).
   Brighter than the default 6% so it's visible over the navy header. */
.app-topbar.app-topbar-v1 .panel-actions .btn-on-navy.panel-action-btn {
  background: rgba(255, 255, 255, 0.10);
  color: var(--on-navy);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.app-topbar.app-topbar-v1 .panel-actions .btn-on-navy.panel-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

/* When there's a SINGLE button: center it, don't stretch.
   A lone full-width button looks heavy and out of place. */
.app-topbar.app-topbar-v1.app-topbar-one-btn .panel-actions {
  justify-content: center;
}
.app-topbar.app-topbar-v1.app-topbar-one-btn .panel-actions .btn.panel-action-btn {
  flex: 0 1 200px;
  max-width: 220px;
}

/* When there are NO actions (Clients, Service catalog): slightly reduce
   bottom padding so the title+sublabel don't have empty space hanging. */
.app-topbar.app-topbar-v1.app-topbar-no-actions {
  padding-bottom: 18px;
}

/* Very narrow phones (iPhone SE etc): tighten slightly */
@media (max-width: 360px) {
  .app-topbar.app-topbar-v1 {
    padding: 12px 14px 14px;
  }
  .app-topbar.app-topbar-v1 .panel-title {
    font-size: 24px;
    padding: 0 12px;
  }
  .app-topbar.app-topbar-v1 .panel-sublabel {
    padding: 0 12px;
  }
  .app-topbar.app-topbar-v1 .panel-actions {
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
  }
  .app-topbar.app-topbar-v1 .panel-actions .btn.panel-action-btn {
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ─── End of d62am ────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 20 · d62ae — Employee card spacing (V3 generous, approved)
   ────────────────────────────────────────────────────────────
   The expanded body of the employee card stacks: stat boxes (TODAY +
   THIS WEEK) → action grid (Edit hours / Pay / + Tip / Report) → pay
   history strip. Previous gap between each row was 6-8px which felt
   cramped. V3 raises the gap to 12px and adds a soft dashed divider
   between the stat boxes and the action grid so the eye gets a clear
   pause between "information" (stats) and "actions" (4 buttons).
═════════════════════════════════════════════════════════════════════════ */

/* Stat boxes grid — slightly more breathing room above */
.emp-card-v2 .emp-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* Action grid — 4 buttons in 2x2, generous gap, with a dashed divider
   on top that visually separates them from the stat boxes above. */
.emp-card-v2 .emp-quick-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft, var(--border));
}

/* Buttons sit fuller — 38px tall instead of the default 32px */
.emp-card-v2 .emp-quick-v2 .btn {
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Pay history strip — also gets a small breath below the actions */
.emp-card-v2 .emp-pay-summary {
  margin-top: 14px;
}

/* ─── End of d62ae ────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════
   PART 21 · d62ai — Employees action bar V3
   ────────────────────────────────────────────────────────────
   Print weekly is the primary action (weekly use). Clear is
   destructive and rare — small red link instead of a hot button.
═════════════════════════════════════════════════════════════════════════ */

.emp-action-bar-v3 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: var(--sp-4);
}

.emp-action-btn-primary {
  width: 100%;
  height: 46px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.emp-action-clear-link {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--red, #9B2D24);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.emp-action-clear-link:hover {
  text-decoration: underline;
}
.emp-action-clear-link:active {
  opacity: 0.7;
}

/* ─── End of d62ai-employees ───────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════
   PART 22 · d62ap — Payment card editor modal
   ────────────────────────────────────────────────────────────
   The editor lives inside a navy modal (.modal--navy). Fields stack
   vertically. The printable card itself renders in a separate window
   (see paymentCard.js buildPrintableHtml) so these styles only cover
   the in-app editor form.
═════════════════════════════════════════════════════════════════════════ */

.paycard-modal .paycard-intro {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-navy-dim, rgba(255,255,255,.72));
  margin-bottom: 18px;
}

.paycard-group {
  margin-bottom: 20px;
}
.paycard-group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(201, 165, 87, 0.30);
}

.paycard-field {
  display: block;
  margin-bottom: 12px;
}
.paycard-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-dim, rgba(255,255,255,.72));
  margin-bottom: 5px;
}
.paycard-field input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--on-navy, #fff);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color 0.15s;
}
.paycard-field input:focus {
  outline: none;
  border-color: var(--gold);
}
.paycard-field input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.paycard-toggles {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.paycard-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-navy, #fff);
}
.paycard-toggle input {
  width: auto;
  accent-color: var(--gold);
}

.paycard-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}
.paycard-actions .btn {
  flex: 1;
  min-height: 44px;
}

.paycard-hint {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--on-navy-faint, rgba(255,255,255,.48));
  margin-top: 14px;
}

/* ─── End of d62ap ────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════
   PART 23 · d62au — Audit & Link modal
═════════════════════════════════════════════════════════════════════════ */

.audit-link-modal .audit-link-intro,
.audit-link-modal .audit-link-summary {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-navy-dim, rgba(255,255,255,.75));
  margin-bottom: 18px;
}

.audit-link-modal .audit-link-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 8px;
  margin: 18px 0 10px;
  border-bottom: 1px solid rgba(201, 165, 87, 0.30);
}

.audit-link-modal .audit-link-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.audit-link-modal .audit-link-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.audit-link-modal .audit-link-row-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-navy, #fff);
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-link-modal .audit-link-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.audit-link-badge--green  { background: rgba(31, 107, 67, 0.30);  color: #6FCB91; }
.audit-link-badge--blue   { background: rgba(42, 74, 127, 0.30); color: #8FB2E0; }
.audit-link-badge--gold   { background: rgba(201, 165, 87, 0.25); color: var(--gold); }
.audit-link-badge--muted  { background: rgba(255, 255, 255, 0.10); color: rgba(255,255,255,.55); }

.audit-link-modal .audit-link-row-amt {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}
.audit-link-modal .audit-link-row-paid {
  font-size: 11px;
  font-weight: 500;
  color: #6FCB91;
}

.audit-link-modal .audit-link-row-client {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 10px;
  line-height: 1.4;
}
.audit-link-modal .audit-link-row-addr {
  color: rgba(255, 255, 255, 0.50);
  font-size: 12px;
}

.audit-link-modal .audit-link-row-link {
  display: flex;
  gap: 10px;
  align-items: center;
}
.audit-link-modal .audit-link-row-link-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.audit-link-modal .audit-link-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--on-navy, #fff);
  font-family: var(--font-sans);
  font-size: 13px;
  min-height: 38px;
}
.audit-link-modal .audit-link-select:focus {
  outline: none;
  border-color: var(--gold);
}
.audit-link-modal .audit-link-select option {
  background: #1a2440;
  color: #fff;
}

.audit-link-modal .audit-link-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.audit-link-modal .audit-link-actions .btn {
  flex: 1;
  min-height: 44px;
}

.audit-link-modal .audit-link-empty {
  text-align: center;
  padding: 28px 16px;
}
.audit-link-modal .audit-link-empty-icon {
  font-size: 36px;
  color: var(--gold);
  margin-bottom: 8px;
}
.audit-link-modal .audit-link-empty-msg {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--on-navy-dim, rgba(255,255,255,.75));
}

/* ─── End of d62au ────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════
   PART 24 · d62az — Mark invoiced elsewhere modal + CO invoiced badge
═════════════════════════════════════════════════════════════════════════ */

.mie-modal .mie-intro {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-navy-dim, rgba(255,255,255,.75));
  margin-bottom: 18px;
}

.mie-modal .mie-warn {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gold);
  background: rgba(201,165,87,0.10);
  border: 1px solid rgba(201,165,87,0.30);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.mie-modal .mie-field {
  margin-bottom: 16px;
}

.mie-modal .mie-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.mie-modal .mie-select,
.mie-modal .mie-note {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--on-navy, #fff);
  font-family: var(--font-sans);
  font-size: 14px;
  min-height: 42px;
  box-sizing: border-box;
}
.mie-modal .mie-select:focus,
.mie-modal .mie-note:focus {
  outline: none;
  border-color: var(--gold);
}
.mie-modal .mie-select option {
  background: #1a2440;
  color: #fff;
}

.mie-modal .mie-summary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
}
.mie-modal .mie-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 13px;
}
.mie-modal .mie-summary-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.mie-modal .mie-summary-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gold);
}
.mie-modal .mie-summary-row--external {
  font-style: italic;
  color: rgba(255,255,255,.55);
  display: block;
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

/* Inline "Invoiced" tag for CO rows */
.c-row-tag.c-row-tag--invoiced {
  background: rgba(31, 107, 67, 0.16);
  color: #6FCB91;
  border-color: rgba(31, 107, 67, 0.40);
}

/* End d62az */

/* ═════════════════════════════════════════════════════════════════════════
   PART 25 · d62a2 — Lien Releases panel + form
═════════════════════════════════════════════════════════════════════════ */

/* Panel list container — same vertical rhythm as CO/INV lists */
.lr-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ── Lien release form ───────────────────────────────────────── */

/* Type segmented control — Partial / Final */
.lr-type-seg {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
  width: 100%;
  max-width: 280px;
}
.lr-type-btn {
  flex: 1 1 50%;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.lr-type-btn:hover {
  color: var(--on-navy, #fff);
}
.lr-type-btn.is-active {
  background: var(--gold);
  color: #0E1B35;
}
.lr-type-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  font-style: italic;
}

/* Signature tiles — two-up grid */
.lr-sigs-wrap {
  margin-top: var(--sp-4);
}
.lr-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 520px) {
  .lr-sig-grid {
    grid-template-columns: 1fr;
  }
}
.lr-sig-tile {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
}
.lr-sig-tile-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.lr-sig-tile-btn {
  align-self: stretch;
  margin-top: auto;
  min-height: 44px;
}
.lr-sig-tile-preview {
  background: #fff;
  border-radius: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.08);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.lr-sig-tile-preview img {
  max-width: 100%;
  max-height: 48px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.lr-sig-tile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lr-sig-tile-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--on-navy, #fff);
}

/* End d62a2 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 26 · d62a3 — Typography refinements (Variable Inter + tabular nums)

   Applies globally:
   - Tabular figures everywhere so dollar amounts line up vertically
   - Inter weight 425 in some places (between 400 and 500) — only possible
     with the variable font, and reads cleaner on dark navy
   - Tighter letter-spacing on big serif numbers (Fraunces feels premium
     with -0.025em on 30px+ sizes)
═════════════════════════════════════════════════════════════════════════ */

html, body {
  /* All number-bearing UI gets tabular figures by default. Real text
     paragraphs override this back to proportional via :where(p, li). */
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1, "cv11" 1;
}
:where(p, li, .prose, .form-hint) {
  font-feature-settings: "kern" 1;
}

/* All numeric values get tabular for vertical alignment in lists. The
   wildcard targets the mono numbers in invoice/CO/estimate rows AND
   the serif heroes. Element rules can override per-element via
   font-variant-numeric: proportional-nums. */
.rb-amount,
.amount-mono,
.amt,
.kpi-num,
.hero-head-primary,
.budget-grid .cell-value,
.c-row-amount,
[data-kind="money"],
[class*="-amount"],
[class*="-amt"],
[class*="-num"],
.pl-amt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Big serif heroes — tighter tracking, lighter weight (only possible
   with variable font). The original was font-weight: 500 which on a
   variable Inter axis is fine — but for Fraunces 32px+ we tighten
   the letter-spacing for a premium feel. */
.hero-head-primary,
.dh-doctype,
.stat-card-value {
  letter-spacing: -0.025em;
}

/* Small caps and uppercase labels — use Inter at weight 550 (only
   possible with variable axis) for slightly heavier weight without
   going to 600 which looks chunky on small sizes. */
.dh-tag,
.c-row-tag,
.kpi-label,
.section-eyebrow,
.fld-lbl,
[class*="-lbl"] {
  font-weight: 550;
}

/* Body text — weight 425 reads cleaner on dark backgrounds than 400.
   Imperceptible difference but reduces eye strain over long sessions. */
body {
  font-weight: 425;
}

/* End d62a3 Part 26 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 27 · d62a3 — Tactile active states (Apple-style scale-on-press)

   Adds a subtle scale-down on :active for all interactive elements.
   Combined with the existing 140ms snappy easing, gives a "physical"
   tap feel that's missing on web by default.

   IMPORTANT: only applied on (hover:none) devices — touch devices —
   because on desktop the :active state fires on mousedown for every
   click and creates a jittery feel.

   Excludes draggable elements via .drag-handle exception, otherwise the
   tap-scale interferes with the drag start gesture.
═════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  button:not(.no-tactile):not(.drag-handle):active,
  .btn:not(.no-tactile):active,
  [role="button"]:not(.no-tactile):not(.drag-handle):active,
  .c-row-head:not(.no-tactile):active,
  .pr-row:not(.no-tactile):active,
  .sb-item:not(.no-tactile):active,
  .filter-pill:active,
  .tab-btn:active,
  .nav-tab:active {
    transform: scale(0.985);
    transition: transform 80ms cubic-bezier(.32, .72, 0, 1) !important;
  }

  /* Strong tactile only on primary CTAs */
  .btn-primary:active,
  .btn-on-navy:active,
  .btn-gold:active {
    transform: scale(0.96);
  }
}

/* Even on desktop, apply tactile to the primary action buttons so
   the visual feedback is consistent. Just much subtler. */
@media (hover: hover) {
  .btn-primary:active,
  .btn-gold:active {
    transform: scale(0.97);
    transition: transform 60ms ease !important;
  }
}

/* ── Skeleton shimmer upgrade ───────────────────────────────────── */
/* The existing .skel-fade-in and skeleton rows use a static gradient.
   Layer an animated shimmer on top — looks more "alive" without
   being distracting. Only applied while readyFor() returns false. */

.skel-fade-in .skel-row,
.skel-fade-in .skel-line,
.skel-fade-in .skel-avatar,
.skel-fade-in .skel-amt,
.skel-fade-in .skel-block {
  position: relative;
  overflow: hidden;
}
.skel-fade-in .skel-row::after,
.skel-fade-in .skel-line::after,
.skel-fade-in .skel-avatar::after,
.skel-fade-in .skel-amt::after,
.skel-fade-in .skel-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.06) 60%,
    transparent 100%);
  background-size: 200% 100%;
  animation: skel-shimmer-pan 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes skel-shimmer-pan {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skel-fade-in .skel-row::after,
  .skel-fade-in .skel-line::after,
  .skel-fade-in .skel-avatar::after,
  .skel-fade-in .skel-amt::after,
  .skel-fade-in .skel-block::after {
    animation: none;
  }
  *:active {
    transform: none !important;
  }
}

/* End d62a3 Part 27 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 28 · d62a3 — Compact density mode

   Activated by [data-density="compact"] on <html>. Toggle persists in
   localStorage as '21ob-density'. Sidebar exposes the segmented
   control under System → Density.

   Scope: shrinks card padding, reduces hero number sizes, tightens
   line-height on lists. Does NOT change spacing inside forms, modals,
   or in-body content (where readability trumps density).
═════════════════════════════════════════════════════════════════════════ */

html[data-density="compact"] {
  /* Cards across the app — invoices, projects, COs, lien releases */
  --sp-card-y: 9px;
  --sp-card-x: 12px;
}

/* Project rows */
html[data-density="compact"] .pr-row {
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 5px;
  gap: 10px;
}
html[data-density="compact"] .pr-row .pl-name {
  font-size: 14px;
}
html[data-density="compact"] .pr-row .pl-meta {
  font-size: 11px;
}

/* Collapsible rows (invoice / CO / LR / estimate cards) */
html[data-density="compact"] .c-row-head {
  padding: 9px 12px;
}
html[data-density="compact"] .c-row-title {
  font-size: 15px;
}
html[data-density="compact"] .c-row-meta,
html[data-density="compact"] .c-row-meta > * {
  font-size: 11px;
}
html[data-density="compact"] .c-row-amount {
  font-size: 13px;
}

/* Hero KPI numbers (project detail) */
html[data-density="compact"] .hero-head-primary {
  font-size: 32px;
}
html[data-density="compact"] .budget-grid .cell-value {
  font-size: 19px;
}
html[data-density="compact"] .budget-grid .cell {
  padding: 10px 12px;
}

/* Stat cards on overview */
html[data-density="compact"] .stat-card {
  padding: 10px 13px;
  border-radius: 10px;
}
html[data-density="compact"] .stat-card-value {
  font-size: 22px;
}
html[data-density="compact"] .stat-card-label {
  font-size: 9px;
}

/* Section headers — keep visual hierarchy but tighter spacing */
html[data-density="compact"] .sec-head,
html[data-density="compact"] .section-h {
  margin-top: 16px;
  margin-bottom: 8px;
}

/* Filter pills shrink slightly */
html[data-density="compact"] .filter-pill {
  padding: 5px 10px;
  font-size: 12px;
}

/* End d62a3 Part 28 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 29 · d62a3 — Command Palette (⌘K + tap-brand-title)

   Linear/Raycast style. Headerless modal, top-positioned, search input
   with live results grouped by entity type. Mobile triggers via the
   brand title; desktop also gets ⌘K shortcut.
═════════════════════════════════════════════════════════════════════════ */

/* Brand title as tappable button.
   IMPORTANT: a <button> has UA stylesheet defaults (Inter, 13px, system
   color) that beat the .brand-title class on font-family/size/color.
   We have to restate the typography here so the button looks identical
   to the old <div class="brand-title">. The em inside inherits italic
   styling from the browser default. */
.brand-title--button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 600;
  font-style: normal;
  color: var(--gold);
  line-height: 1.0;
  letter-spacing: -0.025em;
  transition: opacity 140ms ease;
}
.brand-title--button:hover {
  opacity: 0.85;
}

/* Headerless modal: hide the title bar */
.modal-overlay .modal--cmdk-modal .modal-header,
.modal-overlay .modal.cmdk-modal .modal-header {
  display: none;
}

/* The .cmdk-panel is the body content inside our headerless modal */
.cmdk-modal .modal-body,
.modal-overlay .modal.cmdk-modal .modal-body {
  padding: 0;
}

.cmdk-panel {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.cmdk-search-icon {
  color: var(--muted, rgba(255,255,255,.5));
  display: flex;
  align-items: center;
}
.cmdk-input {
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--sans, var(--font-sans));
  font-size: 16px;
  font-weight: 425;
  color: var(--on-navy, var(--ink));
  width: 100%;
  letter-spacing: -0.005em;
}
.cmdk-input::placeholder {
  color: var(--muted, rgba(255,255,255,.4));
}
.cmdk-kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  letter-spacing: 0.04em;
}

.cmdk-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  min-height: 100px;
}
.cmdk-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 32px 16px;
  font-style: italic;
}
.cmdk-section {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding: 10px 14px 4px;
  user-select: none;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  transition: background 100ms ease;
}
.cmdk-item:hover,
.cmdk-item.active {
  background: rgba(201,165,87,.10);
}
.cmdk-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
}
.cmdk-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.cmdk-item-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-navy, var(--ink));
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-item-sub {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-item-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(201,165,87,.10);
  padding: 3px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* End d62a3 Part 29 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 30 · d62a3 — Sparkline placement
═════════════════════════════════════════════════════════════════════════ */

/* Sparkline inside the project row (overview). Sits between the meta
   text block and the percentage amount. Hidden in compact density to
   save horizontal real-estate. */
.pl-spark {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
  opacity: 0.85;
}
.pl-spark svg {
  display: block;
}
html[data-density="compact"] .pl-spark {
  display: none;
}

/* Invoice/CO/LR row: amount with a segmented paid-progress meter
   stacked beneath it (d62a12, replaces the old 2-point sparkline). */
.c-row-amount-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.inv-meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.inv-meter-segs {
  display: flex;
  gap: 2px;
  width: 92px;
  height: 8px;
}
.inv-meter-seg {
  flex: 1;
  border-radius: 1.5px;
  background: rgba(14, 27, 53, 0.12);
}
html[data-theme="dark"] .inv-meter-seg {
  background: rgba(245, 239, 227, 0.12);
}
.inv-meter-lab {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
}
/* Compact density: drop the meter to keep rows dense (as the old spark did) */
html[data-density="compact"] .c-row-amount-wrap { gap: 0; }
html[data-density="compact"] .inv-meter { display: none; }

/* Generic .sparkline (used by both contexts) — ensure no stroke leaks */
.sparkline {
  overflow: visible;
}

/* End d62a3 Part 30 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 31 · d62a4 — Project Overview new sections
═════════════════════════════════════════════════════════════════════════ */

.po-section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 22px 0 10px;
  padding: 0 4px;
}
.po-section-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* ── Section 1: Workdays heatmap ─────────────────────────────────── */
.po-work-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 16px;
  margin-bottom: 10px;
}
.po-work-stats {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.po-work-stat { display: flex; flex-direction: column; }
.po-work-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.po-work-num.dim { color: var(--ink); opacity: 0.85; font-size: 22px; }
.po-work-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 4px;
}

.po-heatmap {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}
/* d62a8 — Heatmap cells: light theme uses a navy escalating scale
   (cream paper background + navy ink is the editorial pairing).
   Dark theme overrides to gold scale because navy-on-navy would be
   invisible. Both legend chips use the same color logic. */
.po-hm-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(14, 27, 53, 0.06);
}
.po-hm-cell.l1 { background: rgba(14, 27, 53, 0.22); }
.po-hm-cell.l2 { background: rgba(14, 27, 53, 0.45); }
.po-hm-cell.l3 { background: rgba(14, 27, 53, 0.70); }
.po-hm-cell.l4 { background: var(--accent); }

html[data-theme="dark"] .po-hm-cell {
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .po-hm-cell.l1 { background: rgba(201, 165, 87, 0.22); }
html[data-theme="dark"] .po-hm-cell.l2 { background: rgba(201, 165, 87, 0.45); }
html[data-theme="dark"] .po-hm-cell.l3 { background: rgba(201, 165, 87, 0.70); }
html[data-theme="dark"] .po-hm-cell.l4 { background: var(--gold); }

.po-heatmap-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  margin-top: 6px;
}
.po-legend-scale {
  display: flex;
  align-items: center;
  gap: 3px;
}
.po-legend-scale > span:not(.po-legend-chip) {
  font-size: 9px;
  margin: 0 4px;
}
.po-legend-chip {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(14, 27, 53, 0.06);
}
.po-legend-chip.l1 { background: rgba(14, 27, 53, 0.22); }
.po-legend-chip.l2 { background: rgba(14, 27, 53, 0.45); }
.po-legend-chip.l3 { background: rgba(14, 27, 53, 0.70); }
.po-legend-chip.l4 { background: var(--accent); }

html[data-theme="dark"] .po-legend-chip {
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .po-legend-chip.l1 { background: rgba(201, 165, 87, 0.22); }
html[data-theme="dark"] .po-legend-chip.l2 { background: rgba(201, 165, 87, 0.45); }
html[data-theme="dark"] .po-legend-chip.l3 { background: rgba(201, 165, 87, 0.70); }
html[data-theme="dark"] .po-legend-chip.l4 { background: var(--gold); }

/* ── Section 2: Documents ─────────────────────────────────────────── */
.po-doc-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.po-doc-tab {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 550;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 8px 10px 9px;
  cursor: pointer;
  position: relative;
  letter-spacing: -0.005em;
  transition: color 140ms ease;
}
.po-doc-tab:hover { color: var(--ink); }
.po-doc-tab.active { color: var(--gold); }
.po-doc-tab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.po-doc-tab-ct {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--muted);
}
.po-doc-tab.active .po-doc-tab-ct {
  background: rgba(201,165,87,0.16);
  color: var(--gold);
}

.po-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.32,0.72,0,1), background 140ms ease;
}
.po-doc-row:active { transform: scale(0.985); background: var(--surf2); }
.po-doc-pill {
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--gold-bg);
  border: 1px solid rgba(201,165,87,0.30);
  color: var(--gold-deep);
  padding: 5px 8px;
  border-radius: 6px;
}
.po-doc-pill.red {
  background: rgba(180,58,51,0.12);
  border-color: rgba(180,58,51,0.40);
  color: var(--red);
}
.po-doc-body { flex: 1; min-width: 0; overflow: hidden; }
.po-doc-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.po-doc-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.po-doc-meta.red { color: var(--red); }
.po-doc-amt {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.po-doc-amt.green { color: var(--green); }
.po-doc-amt.muted { color: var(--muted); }
.po-doc-empty {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  padding: 16px 4px;
  text-align: center;
  font-style: italic;
}
.po-doc-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding: 0 4px;
}

/* ── Section 3: Spending donut (right side) ──────────────────────── */
.po-spend-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 16px;
  align-items: center;
}
@media (max-width: 360px) {
  .po-spend-card { grid-template-columns: 1fr; }
  .po-spend-donut-wrap { justify-self: center; }
}
.po-spend-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-spend-cat {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
}
.po-spend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.po-spend-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.po-spend-amt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.po-spend-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.po-spend-bar > div {
  height: 100%;
  border-radius: 2px;
}
.po-spend-pct {
  grid-column: 2 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: -4px;
}
.po-spend-donut-wrap {
  position: relative;
  width: 110px;
  height: 110px;
}
.po-spend-donut {
  width: 110px;
  height: 110px;
  display: block;
}
.po-spend-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.po-spend-donut-pct {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* ── Section 4: Forecast ─────────────────────────────────────────── */
.po-fc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
}
.po-fc-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.po-fc-headline {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.po-fc-headline em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.po-fc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.po-fc-row-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.po-fc-row-val {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.po-fc-row-val.green { color: var(--green); }
.po-fc-row-val.gold { color: var(--gold); }
.po-fc-row-val.red { color: var(--red); }
.po-fc-note {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-style: italic;
  line-height: 1.45;
}

/* End d62a4 Part 31 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 32 · d62a5 — Customize Project Overview · scope toggle
═════════════════════════════════════════════════════════════════════════ */

.cust-scope-row {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: var(--sp-3);
  width: 100%;
}
.cust-scope-opt {
  flex: 1 1 50%;
  position: relative;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ink); /* d62a35b · era blanco (era navy): invisible en claro */
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  border-radius: 7px;
  transition: background 140ms ease, color 140ms ease;
}
.cust-scope-opt:hover {
  color: var(--ink);
}
.cust-scope-opt.is-active {
  background: var(--gold);
  color: #0E1B35;
}
.cust-scope-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(201,165,87,0.20);
}
.cust-scope-opt.is-active .cust-scope-dot {
  background: #0E1B35;
  box-shadow: 0 0 0 2px rgba(14,27,53,.16);
}

/* End d62a5 Part 32 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 33 · d62a6 — Link documents tab in Customize modal
═════════════════════════════════════════════════════════════════════════ */

/* Top-level tabs (Layout / Link documents) */
.cust-toptabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-3);
}
.cust-toptab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 10px 12px 11px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: color 140ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cust-toptab:hover { color: var(--on-navy, var(--ink)); }
.cust-toptab.is-active { color: var(--gold); }
.cust-toptab.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.cust-toptab-ct {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  background: rgba(248,113,113,0.16);
  color: #F87171;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
  border: 1px solid rgba(248,113,113,0.30);
}

/* Sub-tabs inside Link (Invoices / Change orders) */
.cust-linktabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.cust-linktab {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 550;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.cust-linktab:hover {
  color: var(--on-navy, var(--ink));
  border-color: rgba(255,255,255,0.20);
}
.cust-linktab.is-active {
  background: rgba(201,165,87,0.16);
  border-color: rgba(201,165,87,0.45);
  color: var(--gold);
}
.cust-linktab-ct {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--muted);
}
.cust-linktab.is-active .cust-linktab-ct {
  background: rgba(201,165,87,0.16);
  color: var(--gold);
}

/* Link rows */
.cust-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cust-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.cust-link-pill {
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--gold-bg);
  border: 1px solid rgba(201,165,87,0.30);
  color: var(--gold-deep);
  padding: 4px 8px;
  border-radius: 6px;
}
.cust-link-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.cust-link-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--on-navy, var(--ink));
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-link-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.cust-link-btn {
  flex-shrink: 0;
  background: var(--gold);
  border: 0;
  color: #0E1B35;
  padding: 6px 10px 7px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 140ms cubic-bezier(0.32,0.72,0,1), background 140ms ease;
}
.cust-link-btn:hover { background: #D4B26A; }
.cust-link-btn:active { transform: scale(0.96); }

/* Empty state */
.cust-link-empty {
  text-align: center;
  padding: 32px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.cust-link-empty-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--on-navy, var(--ink));
  margin-bottom: 6px;
}
.cust-link-empty-body {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* End d62a6 Part 33 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 34 · d62a7 — Editable Job Description + 2-week heatmap
═════════════════════════════════════════════════════════════════════════ */

/* ── Job description card ─────────────────────────────────────────── */
.jd-card { position: relative; }
.jd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.jd-edit-btn {
  background: rgba(201,165,87,0.10);
  border: 1px solid rgba(201,165,87,0.30);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 140ms ease, transform 140ms cubic-bezier(0.32,0.72,0,1);
}
.jd-edit-btn:hover { background: rgba(201,165,87,0.18); }
.jd-edit-btn:active { transform: scale(0.95); }
.jd-edit-btn svg { width: 12px; height: 12px; }
.jd-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--surf2, rgba(255,255,255,0.04));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 140ms ease;
}
.jd-textarea:focus {
  border-color: var(--gold);
}
.jd-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ── 2-week heatmap (14 cells) ───────────────────────────────────── */
.po-hm-day-labels {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.po-hm-day-labels span {
  text-align: center;
}
.po-hm-day-labels span.weekend {
  color: var(--gold-deep);
  opacity: 0.65;
}

/* 14-column heatmap variant — larger cells, more breathing room */
.po-heatmap.po-heatmap--14 {
  gap: 4px;
}
.po-heatmap.po-heatmap--14 .po-hm-cell {
  border-radius: 4px;
}

/* End d62a7 Part 34 */

/* ═════════════════════════════════════════════════════════════════════════
   PART 35 · d62a8e — Approved Budget sub-line size fix

   The "Original $X · N COs" sub-line under Approved Budget was 12px mono
   with wide tracking, which wrapped to 2 lines in projects with 2+ COs.
   Drop to 10.5px and tighter tracking so it fits on a single line in
   the budget-grid cell.
═════════════════════════════════════════════════════════════════════════ */

.budget-sub {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* End d62a8e Part 35 */

/* ═════════════════════════════════════════════════════════════════
   d62a13 · Invoices: summary strip, compact filters, relative due
   ═════════════════════════════════════════════════════════════════ */
.inv-summary {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}
.inv-summary .inv-sum-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 12px;
  cursor: pointer;
  transition: var(--t-fast);
}
.inv-summary .inv-sum-cell:hover { border-color: var(--gold-deep); }
.inv-summary .inv-sum-cell.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.inv-summary .inv-sum-n {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.inv-summary .inv-sum-k {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.inv-summary .inv-sum-cell--od {
  background: var(--red-soft, rgba(180, 58, 51, 0.08));
  border-color: var(--red-line, rgba(180, 58, 51, 0.30));
}
.inv-summary .inv-sum-cell--od .inv-sum-n,
.inv-summary .inv-sum-cell--od .inv-sum-k { color: var(--red); }
.inv-summary .inv-sum-cell--paid .inv-sum-n { color: var(--green); }

/* keep quick-create + status filters on a single scrollable row */
.from-project-bar.inv-from-compact {
  flex-wrap: nowrap;
  padding: 7px 9px;
  margin-bottom: 10px;
}
.inv-filter-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 10px;
}
.inv-filter-scroll::-webkit-scrollbar { display: none; }
.inv-filter-scroll .filter-pills {
  flex-wrap: nowrap;
  margin-bottom: 0;
  overflow: visible;
}

/* relative due date — gold when due soon (<= 5 days / today / tomorrow) */
.rb-due-soon { color: var(--gold-deep); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════
   d62a14 · Overdue invoice emphasis — red left accent bar + soft tint
   so an overdue invoice can't blend in while scanning. Amount is
   already red (see .c-row.is-overdue .c-row-amount). Applies anywhere
   a collapsibleRow uses the is-overdue variant.
   ═════════════════════════════════════════════════════════════════ */
.c-row.is-overdue {
  position: relative;
  background: linear-gradient(180deg, var(--red-soft), var(--surface) 42%);
  border-color: var(--red-line);
}
.c-row.is-overdue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
}

/* ═════════════════════════════════════════════════════════════════
   d62a15 · Compact invoice row (option D2) — INV tag inline with the
   client name (no left column), paid % as text in the meta line.
   ═════════════════════════════════════════════════════════════════ */
.inv-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.inv-title .inv-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}
.inv-title .inv-tag .inv-tag-n { color: var(--ink); }
.inv-title .inv-tag--overdue,
.inv-title .inv-tag--overdue .inv-tag-n { color: var(--red); }
.inv-title .inv-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 500;
}
.rb-pct { color: var(--gold-deep); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════
   d62a16 · Match the approved D2 preview exactly: bigger bold amount,
   meta as one "·"-separated line, pills on their own row below.
   ═════════════════════════════════════════════════════════════════ */
.c-row-amount .inv-amt,
.inv-amt {
  font-size: 20px;
  font-weight: 700;
}
/* stack the two meta rows (beats the generic .c-row-meta > div flex row) */
.c-row-meta > .inv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.inv-meta-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.inv-meta-line .inv-items { color: var(--ink); font-weight: 600; }
.inv-meta-line .inv-sep { color: var(--muted); opacity: 0.55; }
.inv-pills {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════
   d62a17 · Motion pass — press feedback, list stagger, status morph,
   modal fade. All transform/opacity, <300ms, custom easing, and
   gated behind prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════ */

/* 2 · Press feedback — tap shrinks slightly, springs back.
   These elements already carry an all-prop transition (var(--t-fast)),
   so the :active transform animates without overriding it. */
.filter-pill:active,
.inv-sum-cell:active,
.from-project-btn:active,
.from-chip:active,
.btn:active,
.btn-sm:active,
.btn-x:active {
  transform: scale(0.97);
}

/* 3 · List stagger — only on first render after panel mount
   (class added by invoices render(), then cleared). */
.inv-list--stagger .c-row {
  opacity: 0;
  transform: translateY(8px);
  animation: inv-stagger 300ms var(--ease-out-expo) forwards;
}
.inv-list--stagger .c-row:nth-child(1) { animation-delay: 0ms; }
.inv-list--stagger .c-row:nth-child(2) { animation-delay: 40ms; }
.inv-list--stagger .c-row:nth-child(3) { animation-delay: 80ms; }
.inv-list--stagger .c-row:nth-child(4) { animation-delay: 120ms; }
.inv-list--stagger .c-row:nth-child(5) { animation-delay: 160ms; }
.inv-list--stagger .c-row:nth-child(6) { animation-delay: 200ms; }
.inv-list--stagger .c-row:nth-child(7) { animation-delay: 240ms; }
.inv-list--stagger .c-row:nth-child(n+8) { animation-delay: 280ms; }
@keyframes inv-stagger { to { opacity: 1; transform: translateY(0); } }

/* 4 · Status change morph — colour transitions instead of a hard cut. */
.status-pill,
.status-pill-int,
.status-pill--int {
  transition: background-color 240ms var(--ease-out-expo),
              color 240ms var(--ease-out-expo),
              border-color 240ms var(--ease-out-expo);
}

/* 5 · Modal — add an opacity fade to the sheet on top of the existing
   slide-up (keeps the 220ms close timing in modal.js). */
.modal {
  opacity: 0;
  transition: transform var(--t-base) var(--ease-drawer),
              opacity 180ms ease;
}
.modal-overlay.open .modal { opacity: 1; }

/* Accessibility — reduce motion: keep fades, drop movement. */
@media (prefers-reduced-motion: reduce) {
  .filter-pill:active,
  .inv-sum-cell:active,
  .from-project-btn:active,
  .from-chip:active,
  .btn:active,
  .btn-sm:active,
  .btn-x:active { transform: none; }
  .inv-list--stagger .c-row {
    transform: none;
    animation: inv-stagger-fade 200ms ease forwards;
  }
  @keyframes inv-stagger-fade { to { opacity: 1; } }
  .modal { transition: opacity 160ms ease; }
}

/* ═════════════════════════════════════════════════════════════════
   d62a18 · Clients panel redesign (option T4) — tap-to-expand cards
   with actions inside, "＋ New" button beside the search input.
   Overrides the legacy 3-column grid layout in components.css.
   ═════════════════════════════════════════════════════════════════ */
.cli-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cli-search-row .cli-search { flex: 1; }
.cli-new-btn {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #1a1206;
  border: 0;
  border-radius: var(--r-md, 11px);
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms var(--ease-out-expo), filter 160ms ease;
}
.cli-new-btn:active { transform: scale(0.96); }
.cli-new-btn:hover  { filter: brightness(1.06); }

/* card replaces the old grid row */
.cli-row.cli-card {
  display: block;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.cli-row.cli-card.open { border-color: rgba(201, 165, 87, 0.35); }
.cli-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.cli-card .cli-name { font-size: 18px; }
.cli-card .cli-activity { margin-top: 8px; }
.cli-chev {
  flex: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  margin-top: 4px;
  transition: transform 200ms var(--ease-out-expo);
}
.cli-card.open .cli-chev { transform: rotate(180deg); }

/* expandable body — same grid-rows trick as invoice rows */
.cli-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out-expo);
}
.cli-card.open .cli-card-body { grid-template-rows: 1fr; }
.cli-card-body > div { overflow: hidden; }

.cli-actions--expand {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft, var(--border));
}
.cli-ab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft, var(--border));
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms var(--ease-out-expo), background 160ms ease;
}
.cli-ab:active { transform: scale(0.97); }
.cli-ab--call { color: var(--green); }
.cli-ab--edit { color: var(--gold-deep); }
.cli-ab--del  { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .cli-card-body { transition: none; }
  .cli-chev { transition: none; }
  .cli-new-btn:active, .cli-ab:active { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════
   d62a19 · Clients — visual parity with the approved T4 preview:
   serif name with italic-gold last word, smaller borderless pills,
   address only in the expanded body.
   ═════════════════════════════════════════════════════════════════ */
.cli-card .cli-name {
  font-size: 19px;
  letter-spacing: -0.01em;
}
.cli-card .cli-name em {
  font-style: italic;
  color: var(--gold-deep);
}
html[data-theme="dark"] .cli-card .cli-name em { color: var(--gold-soft, #d8bd7e); }

.cli-card .cli-act-pill {
  font-size: 10px;
  padding: 3px 9px;
  border: 0;
  background: rgba(14, 27, 53, 0.07);
  color: var(--muted);
}
.cli-card .cli-act-pill b,
.cli-card .cli-act-pill { font-weight: 600; }
html[data-theme="dark"] .cli-card .cli-act-pill {
  background: rgba(255, 255, 255, 0.06);
}
.cli-card .cli-act-pill--gold {
  background: rgba(201, 165, 87, 0.12);
  color: var(--gold-deep);
}
html[data-theme="dark"] .cli-card .cli-act-pill--gold { color: var(--gold-soft, #d8bd7e); }

.cli-address--expand {
  margin-top: var(--sp-3);
  font-size: 12.5px;
}

/* ═════════════════════════════════════════════════════════════════
   d62a21 · Service catalog — tap-to-expand cards, NO prices in the
   list view (option A3 minus price). Overrides the legacy table grid.
   ═════════════════════════════════════════════════════════════════ */
.svc-list--cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 0;
}
.svc-row.svc-card {
  display: block;
  grid-template-columns: none;
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-lg);
  padding: 13px 15px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color 180ms ease;
}
.svc-row.svc-card:hover { background: var(--surface); }
.svc-row.svc-card.open { border-color: rgba(201, 165, 87, 0.35); }
.svc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.svc-card-main { min-width: 0; }
.svc-card .svc-desc {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
}
.svc-uses-pill {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(201, 165, 87, 0.12);
  color: var(--gold-deep);
  border-radius: 12px;
  padding: 3px 9px;
}
html[data-theme="dark"] .svc-uses-pill { color: var(--gold-soft, #d8bd7e); }
.svc-chev {
  flex: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  margin-top: 3px;
  transition: transform 200ms var(--ease-out-expo);
}
.svc-card.open .svc-chev { transform: rotate(180deg); }
.svc-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ease-out-expo);
}
.svc-card.open .svc-card-body { grid-template-rows: 1fr; }
.svc-card-body > div { overflow: hidden; }
.svc-unit-line {
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.svc-actions--expand {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border-soft, var(--border));
}
.svc-ab {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft, var(--border));
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms var(--ease-out-expo);
}
.svc-ab:active { transform: scale(0.97); }
.svc-ab--edit { color: var(--gold-deep); }
html[data-theme="dark"] .svc-ab--edit { color: var(--gold-soft, #d8bd7e); }
.svc-ab--del { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .svc-card-body, .svc-chev { transition: none; }
  .svc-ab:active { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════
   d62a22 · V2 Eyebrow panel header (option B) — replaces the V1
   spacious header for every sidebar panel. Row 1: back + gold brand
   eyebrow. Row 2: large left serif title, last word italic gold.
   Sublabels dropped. Actions row reuses the V1 rules below via the
   shared .panel-actions selectors.
   ═════════════════════════════════════════════════════════════════ */
.app-topbar.app-topbar-v2 {
  display: block;
  padding: 14px 18px 20px;
  margin-bottom: var(--sp-5);
  background: var(--accent);
  color: var(--on-navy);
}
.app-topbar.app-topbar-v2 .panel-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.app-topbar.app-topbar-v2 .btn-back {
  height: 32px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  font-size: 13px;
  font-weight: 600;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-navy);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  box-shadow: none;
}
.app-topbar.app-topbar-v2 .btn-back:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}
.app-topbar.app-topbar-v2 .panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
html[data-theme="dark"] .app-topbar.app-topbar-v2 .panel-eyebrow {
  color: var(--gold-soft, #d8bd7e);
}
.app-topbar.app-topbar-v2 .panel-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: left;
  color: var(--on-navy);
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  flex: none;
}
.app-topbar.app-topbar-v2 .panel-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
html[data-theme="dark"] .app-topbar.app-topbar-v2 .panel-title em {
  color: var(--gold-soft, #d8bd7e);
}
.app-topbar.app-topbar-v2 .panel-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app-topbar.app-topbar-v2 .panel-actions .btn.panel-action-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: none;
}
.app-topbar.app-topbar-v2.app-topbar-one-btn .panel-actions .btn.panel-action-btn {
  flex: 0 1 220px;
  margin: 0 auto;
}

/* ═════════════════════════════════════════════════════════════════
   d62a23 · Band compacting (option C). Single-action panels: the
   action becomes a compact gold button in row 1 (next to eyebrow) —
   the band ends right after the title. Multi-action panels keep a
   compact, divider-less actions row.
   ═════════════════════════════════════════════════════════════════ */
.app-topbar.app-topbar-v2 { padding-bottom: 18px; }
.app-topbar.app-topbar-v2 .panel-back-row .panel-eyebrow {
  flex: 1;
  text-align: right;
}
.app-topbar.app-topbar-v2 .btn.panel-action-inline {
  flex: none;
  height: 32px;
  min-height: 32px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: none;
  white-space: nowrap;
}
/* compact multi-action row: no divider, tighter spacing */
.app-topbar.app-topbar-v2 .panel-actions.panel-actions--compact {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* ═════════════════════════════════════════════════════════════════
   d62a24 · Band height + button color fixes for the V2 header.
   (1) The topbar was adding its own padding INSIDE .navy-band (which
   already pads), plus the inherited .app-topbar margin-bottom —
   ~58px of dead air after the title and doubled side padding. V2 now
   relies on the band's padding and eats most of the band's bottom
   padding with a negative margin.
   (2) Gold/navy action colors were scoped to -v1 selectors; the V2
   buttons fell back to navy-on-navy (invisible). Scope them to V2.
   ═════════════════════════════════════════════════════════════════ */
.app-topbar.app-topbar-v2 {
  padding: 0;
  margin: 0 0 calc(var(--sp-5) * -1 + 10px); /* band pad-bottom 20 → net 10px after title */
}
.app-topbar.app-topbar-v2 .panel-back-row { margin-bottom: 12px; }

/* action colors — inline (row 1) and compact row variants */
.app-topbar.app-topbar-v2 .btn-primary.panel-action-inline,
.app-topbar.app-topbar-v2 .panel-actions .btn-primary.panel-action-btn {
  background: var(--gold);
  color: var(--accent);
  font-weight: 700;
  border: 1px solid rgba(201, 165, 87, 0.40);
  box-shadow: none;
}
.app-topbar.app-topbar-v2 .btn-primary.panel-action-inline:hover:not(:disabled),
.app-topbar.app-topbar-v2 .panel-actions .btn-primary.panel-action-btn:hover:not(:disabled) {
  background: var(--gold-deep);
  color: #fff;
}
.app-topbar.app-topbar-v2 .btn-on-navy.panel-action-inline,
.app-topbar.app-topbar-v2 .panel-actions .btn-on-navy.panel-action-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-navy);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.app-topbar.app-topbar-v2 .btn-on-navy.panel-action-inline:hover:not(:disabled),
.app-topbar.app-topbar-v2 .panel-actions .btn-on-navy.panel-action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

/* d62a25 · El panel de detalle de invoices (maestro-detalle desktop)
   no existe visualmente en móvil. desktop.css (solo ≥900px) lo revela. */
.inv-detail { display: none; }

/* d62a27 · botón de colapso del sidebar: solo existe/estiliza en desktop */
.sb-pin-toggle { display: none; }

/* d62a29 · capa del pad de firma: por ENCIMA del modal del formulario */
.modal-overlay.sig-layer { z-index: 260; }

/* ═══ d62a34 · Link-documents tab: contraste reparado ═══
   El body del cust-modal es CLARO (var(--bg)) desde d62i, pero estas
   clases conservaban texto blanco de cuando el body era navy. Ahora
   usan tokens del tema (y abajo, variantes para data-theme=dark). */
.cust-linktab { background: rgba(20,30,55,.05); border-color: var(--line); color: var(--muted); }
.cust-linktab:hover { color: var(--ink); border-color: var(--line); }
.cust-linktab.is-active { background: var(--gold-bg); border-color: rgba(201,165,87,.45); color: var(--gold-deep); }
.cust-linktab-ct { background: rgba(20,30,55,.07); color: var(--muted); }
.cust-linktab.is-active .cust-linktab-ct { background: rgba(201,165,87,.18); color: var(--gold-deep); }
.cust-link-row { background: var(--surface); }
.cust-link-title { color: var(--ink); }
.cust-link-empty { background: rgba(20,30,55,.03); }
.cust-link-empty-title { color: var(--ink); }

html[data-theme="dark"] .cust-linktab { background: rgba(255,255,255,.05); color: rgba(255,255,255,.65); }
html[data-theme="dark"] .cust-linktab:hover { color: #fff; }
html[data-theme="dark"] .cust-linktab.is-active { color: var(--gold); }
html[data-theme="dark"] .cust-linktab-ct { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .cust-link-row { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .cust-link-title { color: var(--on-navy); }
html[data-theme="dark"] .cust-link-empty { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .cust-link-empty-title { color: var(--on-navy); }

/* Botón "+ New change order" dentro del tab de linkeo */
.cust-link-newco {
  display: block; width: 100%;
  margin-bottom: var(--sp-3);
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(201,165,87,.55);
  background: var(--gold-bg);
  color: var(--gold-deep);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
html[data-theme="dark"] .cust-link-newco { color: var(--gold); }

/* ═══ d62a35 · (1) Sidebar: grupos en mono uppercase (V4 aprobada) ═══ */
.sb-group-toggle {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.sb-item { font-size: 15.5px; }

/* ═══ d62a35 · (2) Customize modal: restos blancos de la era navy ═══
   El body es claro (var(--bg)) desde d62i; toptabs y el toggle de
   alcance seguían con texto/bordes blancos → invisibles en tema claro.
   Tokens del tema + variantes dark abajo. */
.cust-toptab { color: var(--muted); }
.cust-toptab:hover { color: var(--ink); }
.cust-toptab.is-active { color: var(--gold-deep); }
.cust-toptab.is-active::after { background: var(--gold-deep); }

.cust-scope-row {
  background: rgba(20, 30, 55, 0.05);
  border-color: var(--line);
}

html[data-theme="dark"] .cust-toptab { color: rgba(255,255,255,0.55); }
html[data-theme="dark"] .cust-toptab:hover { color: var(--on-navy); }
html[data-theme="dark"] .cust-toptab.is-active { color: var(--gold); }
html[data-theme="dark"] .cust-toptab.is-active::after { background: var(--gold); }
html[data-theme="dark"] .cust-scope-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
/* dark: el inactivo vuelve a texto claro (el fondo del modal es navy) */
html[data-theme="dark"] .cust-scope-opt { color: rgba(255,255,255,0.65); }
html[data-theme="dark"] .cust-scope-opt:hover { color: var(--on-navy); }
html[data-theme="dark"] .cust-scope-opt.is-active { color: #0E1B35; }