/* ═════════════════════════════════════════════════════════════════════
   components.css · Full component library
   Aligned to v1 visual language: navy bands, gold accents,
   editorial serif numerics, mono labels, cream surfaces.
═════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1. App shell
════════════════════════════════════════════════════════════════════ */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#panelHost {
  padding: var(--sp-5) var(--sp-4) var(--sp-9);
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
/* Day-34: when the FAB is mounted, reserve extra bottom padding
   equal to FAB height + clearance + safe-area-inset-bottom so the
   last list row doesn't sit beneath it. Class is set/cleared from
   shell.js renderFab(). Avoids `:has()` for Safari < 15.4. */
body.has-fab #panelHost {
  padding-bottom: calc(var(--sp-9) + 64px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 720px) {
  #panelHost { padding: var(--sp-6) var(--sp-6) var(--sp-9); }
  body.has-fab #panelHost {
    padding-bottom: calc(var(--sp-9) + 64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ════════════════════════════════════════════════════════════════════
   2. Navy band — used as app header AND as panel header on inner views

   Day-34 retune: padding tightened so the band doesn't eat 60% of the
   viewport on iPhone SE. Project info cards + budget grid are no
   longer embedded inside the band — they render as the first card
   of the panel content instead.
════════════════════════════════════════════════════════════════════ */
.navy-band {
  background: var(--accent);
  color: var(--on-navy);
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-5) var(--sp-6);
  position: relative;
  overflow: hidden;
}
@media (max-width: 380px) {
  .navy-band { padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-5); }
}
@media (min-width: 720px) {
  .navy-band { padding: calc(var(--sp-6) + env(safe-area-inset-top, 0px)) var(--sp-7) var(--sp-7); }
}

/* App-level top bar that lives at the top of every page */
.app-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  flex-wrap: nowrap;
  min-width: 0;
}
.app-topbar > * { min-width: 0; }
.app-topbar .grow { flex: 1 1 auto; min-width: 0; }
@media (max-width: 380px) {
  .app-topbar { gap: 6px; }
}

/* Brand monogram in the top-right of overview */
.brand-monogram {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--on-navy);
  line-height: 0.95;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--on-navy-border);
  border-radius: var(--r);
  background: var(--on-navy-bg);
}
.brand-monogram .top { font-size: 14px; }
.brand-monogram .rule {
  width: 100%;
  height: 1px;
  background: var(--on-navy-bg-3);
  margin: 2px 0;
}
.brand-monogram .bot { font-size: 12px; letter-spacing: 0.05em; }

/* Eyebrow above titles in navy band */
.navy-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--on-navy-dim);
  margin-bottom: var(--sp-2);
}

/* Big brand title (used on the Overview navy band) */
.brand-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 600;
  color: var(--gold);
  line-height: 1.0;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--sp-3);
}

/* Panel-level title (smaller, used on inner views) */
.panel-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 5.2vw, 30px);
  font-weight: 500;
  color: var(--on-navy);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-title em { font-style: italic; color: var(--gold); font-weight: 500; }
/* When centered in a panel header, allow soft wrap rather than ellipsis */
.panel-title[style*="text-align: center"] {
  white-space: normal;
  text-overflow: clip;
}

.panel-sublabel {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--on-navy-dim);
  margin-top: 2px;
}

/* Action row under brand title (pills + buttons on overview) */
.brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Project header inside navy band (project name large, with edit icon) */
.proj-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.proj-header-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  justify-content: space-between;
}
.proj-name-large {
  font-family: var(--font-serif);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 500;
  color: var(--gold);
  line-height: 1.0;
  letter-spacing: var(--tracking-tighter);
  flex: 1;
  min-width: 0;
}
.proj-name-large em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
/* Day-59: when collapsed, project name gets a touch bigger to fill
   the visual weight that the budget grid leaves behind. */
.proj-name-large--collapsed {
  font-size: clamp(34px, 8.4vw, 46px);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
}
.inline-edit {
  background: transparent;
  border: 0;
  color: var(--on-navy-dim);
  padding: var(--sp-1) var(--sp-2);
  font-size: 16px;
  line-height: 1;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.inline-edit:hover {
  color: var(--gold);
  background: var(--on-navy-bg);
}

.proj-start {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-navy-dim);
  letter-spacing: 0.05em;
}

/* Day-59: collapsed project header — address + phone + share */
.proj-collapsed-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.proj-collapsed-info-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.proj-collapsed-info-line {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--on-navy-dim);
  line-height: 1.4;
  word-wrap: break-word;
}
a.proj-collapsed-info-link {
  text-decoration: none;
  color: var(--on-navy-dim);
  transition: color var(--t-fast);
}
a.proj-collapsed-info-link:hover,
a.proj-collapsed-info-link:active {
  color: var(--gold);
}

/* Day-59: phone gets distinct serif treatment so it reads as the
   primary tappable contact — without competing with the project name
   serif treatment above it. */
.proj-collapsed-info-phone {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--on-navy);
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1.2;
}
a.proj-collapsed-info-link.proj-collapsed-info-phone {
  color: var(--on-navy);
}
a.proj-collapsed-info-link.proj-collapsed-info-phone:hover,
a.proj-collapsed-info-link.proj-collapsed-info-phone:active {
  color: var(--gold);
}
/* Tiny share button — discreet next to the address/phone block */
.proj-share-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--on-navy-dim);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  padding: 0;
}
.proj-share-btn:hover,
.proj-share-btn:active {
  background: var(--on-navy-bg);
  color: var(--gold);
}

/* Day-60: unified style for the three icon actions in the project
   header (chevron / edit / share). All three render as 30x30
   borderless circles so their centers align on the right edge. */
.proj-action-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--on-navy-dim);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  padding: 0;
}
.proj-action-btn:hover,
.proj-action-btn:active {
  background: var(--on-navy-bg);
  color: var(--gold);
}

/* ════════════════════════════════════════════════════════════════════
   3. Hamburger / icon button (in navy bands)
════════════════════════════════════════════════════════════════════ */
.icon-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 0;
  border-radius: var(--r);
  color: var(--on-navy);
  transition: opacity var(--t-fast);
  padding: 0;
  cursor: pointer;
}
.icon-btn:hover {
  background: transparent;
  opacity: 0.7;
}
.icon-btn:active {
  opacity: 0.5;
}
.icon-btn span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--on-navy);
  border-radius: 1px;
  transition: background var(--t-fast);
}

/* Light-mode equivalent (for cards/inner panels) */
.icon-btn-light {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.icon-btn-light:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* "Back" pill button on inner pages (navy band) */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--on-navy-bg);
  border: 1px solid var(--on-navy-border);
  border-radius: var(--r);
  color: var(--on-navy);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-back:hover {
  background: var(--on-navy-bg-2);
  border-color: var(--on-navy-bg-3);
}
@media (max-width: 380px) {
  .btn-back { padding: 7px 10px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   4. Status pills (live, on-site, badges)
════════════════════════════════════════════════════════════════════ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill--green {
  color: var(--green);
  background: var(--green-soft);
  border-color: var(--green-line);
}
.status-pill--amber {
  color: var(--gold-deep);
  background: var(--gold-bg);
  border-color: var(--green-line);
  border-color: rgba(201, 165, 87, 0.30);
}
.status-pill--red {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red-line);
}
.status-pill--blue {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: var(--blue-line);
}
.status-pill--dim {
  color: var(--muted);
  background: var(--surf2);
  border-color: var(--border);
}

/* On-navy variants */
.status-pill--on-navy.status-pill--green {
  color: #7AC79C;
  background: rgba(46, 125, 82, 0.18);
  border-color: rgba(46, 125, 82, 0.45);
}

/* "Live" pulsing variant — calmer cycle than before. */
.status-pill--live::before {
  animation: pulse-dot 2.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(0.9); opacity: 0.75; }
}

/* ════════════════════════════════════════════════════════════════════
   5. Buttons
════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-out-expo),
              box-shadow var(--t-base),
              background var(--t-fast),
              border-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Primary navy (default) */
.btn-navy {
  background: var(--accent);
  color: #fff;
}

/* Gold high-stakes */
.btn-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(160, 130, 62, 0.20),
              0 2px 6px rgba(160, 130, 62, 0.18);
}

/* Cream secondary (the most common neutral) */
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* On-navy secondary (Sync, Sign Out style) */
.btn-on-navy {
  background: var(--on-navy-bg);
  color: var(--on-navy);
  border-color: var(--on-navy-border);
  box-shadow: none;
}
.btn-on-navy:hover:not(:disabled) {
  background: var(--on-navy-bg-2);
  border-color: var(--on-navy-bg-3);
}

/* Outlined ghost variants for actions inside cards */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
  box-shadow: none;
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-deep);
}
.btn-outline-green {
  background: transparent;
  color: var(--green);
  border-color: var(--green-line);
  box-shadow: none;
}
.btn-outline-green:hover:not(:disabled) {
  background: var(--green-soft);
  border-color: var(--green);
}
.btn-outline-gold {
  background: transparent;
  color: var(--gold-deep);
  border-color: rgba(201, 165, 87, 0.40);
  box-shadow: none;
}
.btn-outline-gold:hover:not(:disabled) {
  background: var(--gold-bg);
  border-color: var(--gold);
}
.btn-outline-red {
  background: transparent;
  color: var(--red);
  border-color: var(--red-line);
  box-shadow: none;
}
.btn-outline-red:hover:not(:disabled) {
  background: var(--red-soft);
  border-color: var(--red);
}

/* ─── Signature pad (capture modal) ────────────────────────────── */
.sig-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sig-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.sig-pad-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-3);
  overflow: hidden;
}
.sig-pad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  /* Fixed paper-cream background regardless of dark/light theme.
     The pen ink is always navy, so we need a light backdrop for it
     to be visible while signing. The exported PNG is transparent
     so this only affects the drawing UX, not the saved signature. */
  background: #FBF7EE;
  border: 1px solid rgba(14, 27, 53, 0.12);
  border-radius: var(--r-sm);
  cursor: crosshair;
  touch-action: none;
}
.sig-pad-baseline {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--sp-3) + 18px);
  height: 1px;
  /* Match the navy ink theme — visible on the cream pad regardless
     of app theme */
  background: rgba(14, 27, 53, 0.25);
  pointer-events: none;
}
.sig-pad-x {
  position: absolute;
  left: var(--sp-4);
  bottom: calc(var(--sp-3) + 18px - 18px);
  font-family: var(--font-serif);
  font-size: 18px;
  /* Fixed gold so it's visible against the cream pad in any theme */
  color: #A0823E;
  pointer-events: none;
  line-height: 1;
}
.sig-instructions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}

/* Existing signature preview (when re-signing) */
.sig-existing {
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: var(--r);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sig-existing-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.sig-existing-img {
  max-height: 80px;
  width: auto;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 4px 8px;
}

/* Side picker (Contractor vs Client) */
.sig-side-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sig-picker-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.sig-side-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out-expo);
  text-align: left;
}
.sig-side-btn:hover {
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.sig-side-btn--has {
  border-color: var(--green-line);
  background: var(--green-soft);
}
.sig-side-btn--has:hover {
  border-color: var(--green);
}
.sig-side-btn-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.sig-side-btn-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  text-transform: uppercase;
}
.sig-side-btn-status {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--green);
  text-transform: uppercase;
}
.sig-side-btn-status--empty {
  color: var(--muted);
}

/* ─── Sidebar · widget-toggle rows ──────────────────────────────── */
.sb-widget-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sb-widget-check {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--gold-deep);
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  background: transparent;
}
.sb-widget-check.on {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* ─── Compact upcoming appointments ─────────────────────────────── */
.appt-compact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.appt-compact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border-bottom: 1px dotted var(--border-soft);
  font-size: 13px;
}
.appt-compact:last-child { border-bottom: none; }
.appt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.appt-dot--red    { background: var(--red); }
.appt-dot--blue   { background: var(--blue, #3B6EA5); }
.appt-dot--gold   { background: var(--gold); }
.appt-dot--soon   { background: var(--muted); }
.appt-dot--none   { background: transparent; border: 1.5px dashed var(--border); }
.appt-compact-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appt-compact-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
}
.pa-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color 160ms ease, transform 160ms ease;
}
.pa-card.clickable {
  cursor: pointer;
}
.pa-card.clickable:hover {
  border-color: var(--gold-deep);
  transform: translateY(-1px);
}
.pa-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.pa-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--gold);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
}
.pa-info { flex: 1; min-width: 0; }
.pa-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.pa-rate {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-deep);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.pa-time-block { text-align: right; flex-shrink: 0; }
.pa-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pa-hours {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.pa-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pa-day-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--surf2);
  color: var(--muted);
  border: 1px solid var(--border-soft);
}
.pa-day-pill.active {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green-line);
  font-weight: 600;
}
.pa-notes {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--gold-bg);
  border-left: 3px solid var(--gold);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Day-pill row inside the assignment form (multi-select) */
.day-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.day-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.day-pill:hover {
  border-color: var(--gold-deep);
  color: var(--ink);
}
.day-pill.active {
  background: var(--gold-bg);
  color: var(--gold-deep);
  border-color: var(--gold);
  font-weight: 600;
}

/* ─── Bulk-categorize modal rows ──────────────────────────────── */
.bulk-cat-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 60vh;
  overflow-y: auto;
}
.bulk-cat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}
.bulk-cat-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: 13px;
}
.bulk-cat-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.bulk-cat-desc {
  font-family: var(--font-serif);
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-cat-amt {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.list-row.clickable {
  cursor: pointer;
  transition: background 140ms ease;
}
.list-row.clickable:hover {
  background: var(--gold-bg);
}
.lunch-deduct-group {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: var(--sp-3);
  background: var(--gold-bg);
}
.lunch-deduct-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  user-select: none;
}
.lunch-deduct-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}
.lunch-deduct-label strong {
  color: var(--gold-deep);
  font-weight: 600;
}
.fld-check {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: var(--gold-deep);
  flex-shrink: 0;
}

/* ─── Employees panel v2 ───────────────────────────────────────── */
.emp-top-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
@media (min-width: 720px) {
  .emp-top-stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
}
.emp-stat-box {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78px;
}
.emp-stat-box-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.emp-stat-box-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.emp-stat-box--gold .emp-stat-box-value { color: var(--gold-deep); }
.emp-stat-box--green .emp-stat-box-value { color: var(--green); }
.emp-stat-box--red .emp-stat-box-value { color: var(--red); }

.emp-action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.emp-action-btn {
  width: 100%;
  padding: 14px 8px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Card */
.emp-card-v2 {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.emp-card-v2.is-live {
  border-color: var(--green-line);
  box-shadow: 0 0 0 1px var(--green-soft) inset;
}
.emp-card-v2.is-archived { opacity: 0.65; }

/* Head */
.emp-head-v2 {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.emp-head-v2-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
}
.emp-head-v2-avatar.is-live {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-soft);
}
.emp-head-v2-info {
  flex: 1;
  min-width: 0;
}
.emp-head-v2-name-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.emp-head-v2-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: 1.1;
}
.emp-clockout-btn {
  font-size: 11px;
  padding: 6px 12px;
  white-space: nowrap;
}
.emp-head-v2-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  align-items: baseline;
  letter-spacing: 0.02em;
}
.mh-lbl  { color: var(--muted); }
.mh-pin  { color: var(--gold-deep); font-weight: 600; letter-spacing: var(--tracking-mono-wide); }
.mh-sep  { color: var(--border); margin: 0 2px; }
.emp-head-v2-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.emp-pencil-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 6px;
  transition: color 140ms ease;
}
.emp-pencil-btn:hover { color: var(--gold-deep); }

/* Today / This week dual grid */
.emp-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.emp-dual-card {
  border-radius: var(--r);
  padding: var(--sp-3);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emp-dual-card--today {
  background: var(--green-soft);
  border-color: var(--green-line);
}
.emp-dual-card--today .emp-dual-value { color: var(--green); }
.emp-dual-card--today .emp-dual-money { color: var(--green); }
.emp-dual-card--week {
  background: var(--gold-bg);
  border-color: rgba(201, 165, 87, 0.30);
}
.emp-dual-card--week .emp-dual-value { color: var(--gold-deep); }
.emp-dual-card--week .emp-dual-money { color: var(--gold-deep); }
.emp-dual-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  text-transform: uppercase;
}
.emp-dual-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.emp-dual-money {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-weight: 500;
}

/* On-shift location card */
.emp-location {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emp-location-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--green);
  text-transform: uppercase;
  font-weight: 600;
}
.emp-location-coords {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}
.emp-location-link {
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 3px;
}
.emp-location-link:hover { color: var(--green); }

/* 4-button row */
.emp-quick-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
.emp-quick-v2 > .btn {
  width: 100%;
  padding: 10px 4px;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 480px) {
  .emp-quick-v2 { grid-template-columns: repeat(2, 1fr); }
}

/* Pay summary */
.emp-pay-summary {
  background: var(--surf2);
  border-radius: var(--r);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emp-pay-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.emp-pay-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}
.emp-pay-amt {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.emp-pay-hours {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.emp-pay-total {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-2);
}
.emp-pay-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emp-payrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border-soft);
}
.emp-payrow:last-child { border-bottom: none; }
.emp-payrow-date  { color: var(--muted); flex-shrink: 0; }
.emp-payrow-sep   { color: var(--border); }
.emp-payrow-method { color: var(--ink); flex: 1; }
.emp-payrow-amt   {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.emp-payrow-x {
  /* Day-34: dropped the fixed 22×22 (which was sized for a × glyph)
     so .btn-x can size to its "Delete" / "Confirm" text. */
  font-size: var(--fs-xs);
  min-height: 28px;
  padding: 3px 10px;
}

/* Former employees toggle */
.emp-archived-section { margin-top: var(--sp-5); }
.emp-archive-toggle-dashed {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.emp-archive-toggle-dashed:hover {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red-line);
  box-shadow: none;
}
.btn-danger:hover:not(:disabled) {
  background: var(--red-soft);
  border-color: var(--red);
}
.btn-danger.armed {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  font-weight: 600;
  animation: pulse-danger 1.5s ease infinite;
}

/* Day-34: filled-red variant for "I'm taking decisive action" buttons
   like the boss clock-out. Different from .btn-danger (outline, used
   for arming destructive removal) and different from .armed (pulsing,
   used during the second tap of a confirm-arm flow). This one is just
   a solid red at rest — no animation, no pulse, just immediate
   visual weight that says "this ends a live shift right now". */
.btn-danger-solid {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(168, 52, 43, 0.18);
}
.btn-danger-solid:hover:not(:disabled) {
  background: #8E2620;
  border-color: #8E2620;
}
.btn-danger-solid:active:not(:disabled) {
  background: #6F1C18;
  border-color: #6F1C18;
}
@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 52, 43, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(168, 52, 43, 0); }
}

.btn-small {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.btn-large {
  padding: 14px 24px;
  font-size: 14px;
  border-radius: var(--r-lg);
}

/* Action bar (one or more buttons aligned right) */
.action-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.action-bar.split {
  justify-content: space-between;
}
.action-bar-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.action-bar-grid-2 .btn { width: 100%; }

/* "Card head + action right" */
.card-head-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.card-head-with-action h3 { margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   6. Project tabs (the navy band's bottom edge → tabs)
   fix35: pill container · cream active · dashed gold "+ New"
════════════════════════════════════════════════════════════════════ */
.proj-tabs-wrap {
  background: var(--accent);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  margin-top: calc(var(--sp-7) * -1 + var(--sp-4));
}
.proj-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--on-navy-bg-2);
  border-radius: 999px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 1100px;
  margin: 0 auto;
}
.proj-tabs::-webkit-scrollbar { display: none; }

.proj-tab {
  position: relative;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--on-navy-dim);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color var(--t-base) var(--ease-out-expo),
              background var(--t-base) var(--ease-out-expo);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.proj-tab:hover {
  color: var(--on-navy);
}
.proj-tab.active {
  background: var(--surface);
  color: var(--accent-fg);
  font-weight: 600;
}
.proj-tab.active::before {
  content: none;
}

/* + New project tab — gold-accented, dashed pill, no fill */
.proj-tab--new {
  border: 1.5px dashed rgba(201, 165, 87, 0.45);
  color: var(--gold);
  padding: 8.5px 16px;
}
.proj-tab--new:hover {
  background: rgba(201, 165, 87, 0.10);
  border-color: var(--gold);
  color: var(--gold);
}
.proj-tab--new .proj-tab-dot {
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}

.proj-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
.proj-tab.active .proj-tab-dot {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--gold-bg-2);
}

/* ─── Design swaps (sidebar > Design) ──────────────────────────────
   Defaults render the pill-style tabs above. Each [data-tab-*]
   attribute is set on <html> by js/ui/designPrefs.js and overrides
   selectively. Combinations are independent. */

/* tab-shape="tab" — restore legacy browser-tab look. */
html[data-tab-shape="tab"] .proj-tabs-wrap {
  padding: var(--sp-4) 0 0;
}
html[data-tab-shape="tab"] .proj-tabs {
  align-items: flex-end;
  gap: 3px;
  background: transparent;
  border-radius: 0;
  padding: 0 var(--sp-4);
}
html[data-tab-shape="tab"] .proj-tab {
  background: var(--on-navy-bg);
  border: 1px solid var(--on-navy-border);
  border-bottom: none;
  border-radius: var(--r) var(--r) 0 0;
  font-size: 13px;
  padding: 10px var(--sp-4);
  letter-spacing: var(--tracking-tight);
  transition: background var(--t-base) var(--ease-out-expo), color var(--t-base) var(--ease-out-expo);
}
html[data-tab-shape="tab"] .proj-tab:hover {
  background: var(--on-navy-bg-2);
  transform: translateY(-1px);
}
html[data-tab-shape="tab"] .proj-tab.active {
  padding: 11px var(--sp-4) 14px;
}
html[data-tab-shape="tab"] .proj-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
}
html[data-tab-shape="tab"] .proj-tab--new {
  border: 1px dashed rgba(201, 165, 87, 0.45);
  border-bottom: none;
  padding: 10px var(--sp-4);
}

/* tab-active="gold" — gold-tinted active with italic Fraunces. */
html[data-tab-active="gold"] .proj-tab.active {
  background: var(--gold-bg-2);
  color: var(--gold);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}
html[data-tab-shape="tab"][data-tab-active="gold"] .proj-tab.active::before {
  background: var(--gold);
}

/* tab-active="elevated" — keeps cream surface, adds soft shadow. */
html[data-tab-active="elevated"] .proj-tab.active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18),
              0 1px 2px rgba(0, 0, 0, 0.10);
}
html[data-tab-shape="tab"][data-tab-active="elevated"] .proj-tab.active {
  box-shadow: none;
}

/* tab-font="serif" — every tab in Fraunces italic. */
html[data-tab-font="serif"] .proj-tab {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: var(--tracking-tight);
}

/* tab-dots="off" — hide dots on regular tabs (the "+" stays). */
html[data-tab-dots="off"] .proj-tab:not(.proj-tab--new) .proj-tab-dot {
  display: none;
}

/* sb-design-row — sidebar segmented controls for Design prefs.
   Inherits .sb-theme-row styling for layout; tightens label font. */
.sb-design-row .sb-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   7. Sidebar drawer
════════════════════════════════════════════════════════════════════ */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 28, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
  z-index: 90;
}
.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  max-width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform var(--t-base) var(--ease-out-expo);
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-3);
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  /* Day-34 fix: respect iOS safe-area-inset-top so the status bar
     (clock + signal indicators) doesn't render on top of the brand
     title when the drawer opens on a notched/dynamic-island iPhone. */
  padding:
    calc(var(--sp-5) + env(safe-area-inset-top, 0px))
    var(--sp-5)
    var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.sidebar-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.sidebar-title em { font-style: italic; color: var(--gold); font-weight: 500; }
.sidebar-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  margin-top: 4px;
}

.sidebar-list {
  flex: 1;
  padding: var(--sp-3) 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}
.sb-group {
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  font-weight: 500;
}
/* Clickable group header. Looks like a label, behaves like a toggle. */
.sb-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast), opacity var(--t-fast);
  /* Override the muted look on hover so the user knows it's tappable */
}
.sb-group-toggle:hover,
.sb-group-toggle:active {
  color: var(--gold-deep);
  opacity: 1;
}
.sb-group-label {
  flex: 1;
  pointer-events: none;
}
.sb-group-chevron {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.sb-group-toggle.is-collapsed .sb-group-chevron {
  transform: rotate(-90deg);
}
.sb-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  width: 100%;
}
.sb-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--muted);
}
.sb-item:hover .sb-item-icon { color: var(--gold-deep); }
.sb-item.active .sb-item-icon { color: var(--gold-deep); }
.sb-item:hover {
  background: var(--surf2);
  color: var(--gold-deep);
}
.sb-item.active {
  background: var(--surf2);
  border-left-color: var(--gold);
  color: var(--gold-deep);
  font-weight: 500;
}
.sb-label { flex: 1; min-width: 0; }
.sb-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-2) var(--sp-5);
}

/* Static (non-collapsible) group header for locked sections like Account */
.sb-group-static {
  cursor: default;
}
.sb-group-static:hover {
  color: var(--muted);
  opacity: 0.7;
}

/* Subheader inside a group — used for "Overview widgets" inside Settings */
.sb-subheader {
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Widget visibility toggle row */
.sb-widget-item {
  padding-left: var(--sp-5);
}
.sb-widget-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--gold-deep);
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.sb-widget-check.on {
  background: var(--gold-bg-2);
  border-color: var(--gold);
}

/* Theme segmented control (Light / Dark) */
.sb-theme-row {
  cursor: default;
}
.sb-theme-row:hover {
  background: transparent;
  color: var(--ink);
}
.sb-theme-segmented {
  display: inline-flex;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.sb-theme-opt {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-theme-opt:hover { color: var(--ink); }
.sb-theme-opt.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.sidebar-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

/* Sidebar item badge (for counts) */
.sb-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--accent);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.sb-badge.gold { background: var(--gold); color: var(--accent); }
.sb-badge.red { background: var(--red); color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   8. Card (universal container)
════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast);
  margin-bottom: var(--sp-3);
}
.card.flat { box-shadow: none; }
.card.tonal { background: var(--surf2); }
.card h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: var(--sp-3);
  letter-spacing: var(--tracking-tight);
}

/* Animation removed: previously every card / row fired rise-in on
   every render, which on a list of 30 projects produced visible
   jitter on mid-range Android. Premium apps animate sparingly —
   on mount via a one-shot class or on user interaction. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.first-mount .card,
.first-mount .stat-card,
.first-mount .project-row,
.first-mount .emp-row,
.first-mount .reimb-row,
.first-mount .hours-row,
.first-mount .list-row {
  animation: rise-in var(--t-base) var(--ease-out-expo) both;
}

/* ════════════════════════════════════════════════════════════════════
   9. Stat cards (overview & inner pages — 4-up grid)
════════════════════════════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (min-width: 540px) {
  .stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease-out-expo),
              border-color var(--t-fast),
              box-shadow var(--t-base);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}
.stat-value {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}
.stat-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.stat-card.green .stat-value { color: var(--green); }
.stat-card.amber .stat-value { color: var(--gold-deep); }
.stat-card.red   .stat-value { color: var(--red); }
.stat-card.blue  .stat-value { color: var(--accent-fg); }

/* Stat card on green band (for compact inner stats) */
.stat-card-mono .stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
  10. Team-today live card (Overview hero)
════════════════════════════════════════════════════════════════════ */
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-3);
}
.team-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.team-card-head-l,
.team-card-head-r {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  font-weight: 500;
}
.team-card-onsite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
}
.team-card-onsite::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.team-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.team-row + .team-row {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  border: 2px solid var(--accent);
  letter-spacing: -0.02em;
}
.avatar.live {
  border-color: var(--green);
}
.avatar.live::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
}
.avatar.sm {
  width: 40px; height: 40px; font-size: 16px;
}
.avatar.lg {
  width: 64px; height: 64px; font-size: 26px;
}

.team-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.team-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.team-totals {
  text-align: right;
  flex-shrink: 0;
}
.team-hours {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
}
.team-pay {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════
  11. Today's summary card (3 cols)
════════════════════════════════════════════════════════════════════ */
.today-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-3);
}
.today-summary-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.today-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  text-align: center;
}
.today-summary-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.today-summary-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.today-summary-value.cost { color: var(--red); }
.today-summary-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.today-summary-label .live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.today-summary-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.today-summary-foot strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ════════════════════════════════════════════════════════════════════
  12. Project info rows (OWNER / ADDRESS / PHONE on navy band)
  Day-59: dropped the box chrome — borders + bg made them read like
  editable fields. Now they're flat, label-above-value, with generous
  gaps between rows so the eye groups label↔value but separates rows.
════════════════════════════════════════════════════════════════════ */
.info-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--sp-4) 0;
}
.info-card:last-child { margin-bottom: 0; }
.info-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--on-navy-dim);
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.2;
}
.info-card-value {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--on-navy);
  font-weight: 500;
  word-wrap: break-word;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
  13. Budget grid (6 cells inside navy)
════════════════════════════════════════════════════════════════════ */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--on-navy-border);
}
@media (min-width: 540px) {
  .budget-grid { grid-template-columns: repeat(3, 1fr); }
}
.budget-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.budget-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--on-navy-dim);
  font-weight: 500;
}
.budget-value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--on-navy);
}
.budget-value.gold  { color: var(--gold); }
.budget-value.green { color: #7AC79C; }
.budget-value.red   { color: #E89089; }
.budget-value.percent {
  font-size: 13px;
  margin-left: 6px;
  color: var(--on-navy-faint);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.budget-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-navy-faint);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.budget-bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--on-navy-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--sp-2);
}
.budget-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width var(--t-slow) var(--ease-out-expo);
}
.budget-bar-fill.over {
  background: linear-gradient(90deg, var(--red), #C5564A);
}

/* ════════════════════════════════════════════════════════════════════
  14. Sub-tabs · Navy segmented control (Day-60 fix34: 2A redesign)
  Full-width navy container, active tab inverts to cream pill.
  Sized so 6 tabs (Overview/Expenses/Reimb/Tasks/Hours/Team) fit on
  a 360px viewport without cutting off names.
════════════════════════════════════════════════════════════════════ */
.subtabs {
  display: flex;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  gap: 0;
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 6px 12px;
  border-radius: 0;
  letter-spacing: -0.01em;
  transition: color var(--t-base) var(--ease-out-expo);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.subtab:hover {
  color: var(--ink);
}
.subtab.active {
  color: var(--ink);
  font-style: italic;
  font-weight: 600;
}
.subtab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.subtab-count {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--gold);
  vertical-align: 1px;
}
.subtab.active .subtab-count {
  color: var(--gold-deep, #8B6F2D);
}

/* Dark mode: same editorial pattern, ink/muted swap automatically via tokens */
html[data-theme="dark"] .subtabs {
  border-bottom-color: var(--border);
}

/* On wider screens (tablet+), give breathing room */
@media (min-width: 600px) {
  .subtab {
    font-size: 12.5px;
    padding: 9px 10px;
  }
  .subtab-count { font-size: 9.5px; }
}

/* ─── Subtab style swap (sidebar > Design > Sub-tabs) ──────────────
   Default = editorial (rules above). Two alternative variants below
   override per-property so the editor can flip them live. */

/* Masthead — JetBrains mono UPPERCASE compact, gold underline.
   The condensed letter-spacing (0.02em) keeps "Overview" / "Expenses"
   inside their column on small screens. */
html[data-subtab-style="masthead"] .subtab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  padding: 12px 4px;
}
html[data-subtab-style="masthead"] .subtab.active {
  font-weight: 700;
  font-style: normal;
}
html[data-subtab-style="masthead"] .subtab.active::after {
  width: 100%;
  max-width: 80%;
}
@media (min-width: 600px) {
  html[data-subtab-style="masthead"] .subtab {
    font-size: 11px;
    padding: 14px 8px;
  }
}

/* Gold mono — pill container (paper) + gold-fill active in mono caps.
   The masthead vibe but as a pill chip, like the Athena reference. */
html[data-subtab-style="goldmono"] .subtabs {
  background: var(--surf2);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
}
html[data-subtab-style="goldmono"] .subtab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: normal;
  padding: 8px 3px;
  border-radius: 100px;
}
html[data-subtab-style="goldmono"] .subtab.active {
  background: var(--gold);
  color: var(--accent);
  font-weight: 700;
  font-style: normal;
}
html[data-subtab-style="goldmono"] .subtab.active::after {
  display: none;
}
html[data-subtab-style="goldmono"] .subtab.active .subtab-count {
  color: var(--accent);
}
@media (min-width: 600px) {
  html[data-subtab-style="goldmono"] .subtab {
    font-size: 11px;
    padding: 10px 8px;
  }
}
html[data-theme="dark"][data-subtab-style="goldmono"] .subtabs {
  background: var(--surf2);
}

/* ════════════════════════════════════════════════════════════════════
  15. Project list rows (overview)
════════════════════════════════════════════════════════════════════ */
.project-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.project-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  transition: transform var(--t-base) var(--ease-out-expo),
              border-color var(--t-fast),
              box-shadow var(--t-base);
}
.project-row:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.project-row:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
}
.project-row.over-budget {
  border-color: rgba(168, 52, 43, 0.4);
}
.pr-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.pr-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-name em { font-style: italic; color: var(--gold); font-weight: 500; }
.pr-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.pr-pct.over { color: var(--red); }

.pr-bar {
  height: 4px;
  background: var(--surf2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.pr-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width var(--t-slow) var(--ease-out-expo);
}
.pr-fill.over {
  background: linear-gradient(90deg, var(--red), #C5564A);
}
.pr-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.pr-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-amount {
  color: var(--ink);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
  16. Cash-flow project row (deposit + spent bars)
════════════════════════════════════════════════════════════════════ */
.cf-project {
  margin-bottom: var(--sp-4);
}
.cf-project-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.cf-project-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
}
.cf-project-name em { font-style: italic; color: var(--gold); font-weight: 500; }
.cf-project-left {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cf-project-left.over { color: var(--red); }

.cf-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 4px 0;
}
.cf-bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
}
.cf-bar-track {
  height: 14px;
  background: var(--surf2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cf-bar-fill {
  height: 100%;
  border-radius: var(--r-sm);
  transition: width var(--t-slow) var(--ease-out-expo);
}
.cf-bar-fill.deposit { background: #6FB58A; }
/* Day-34: 'spent' fill uses --accent for the navy color, but in dark
   mode --accent is #1A2747 which sits invisibly on the --surf2 track.
   Use --accent-fg (lifted brand blue in dark) so the bar reads. */
.cf-bar-fill.spent { background: var(--accent-fg); }
.cf-bar-fill.over { background: linear-gradient(90deg, var(--accent-fg), var(--red)); }
.cf-bar-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Cash-flow legend (top of card) */
.cf-legend {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.cf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-tight);
  font-weight: 500;
}
.cf-legend-item::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}
.cf-legend-deposit::before { background: #6FB58A; }
.cf-legend-spent::before { background: var(--accent-fg); }
.cf-legend-over::before { background: var(--red); }

/* ════════════════════════════════════════════════════════════════════
  17. 7-day cash-flow chart
════════════════════════════════════════════════════════════════════ */
.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
  align-items: end;
  height: 160px;
  padding: var(--sp-3) 0;
}
.bar-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  height: 100%;
  gap: 4px;
}
.bar-chart-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.bar-chart-bar {
  width: 100%;
  max-width: 28px;
  background: #C5564A;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height var(--t-slow) var(--ease-out-expo);
}
.bar-chart-day {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--sp-1);
}
.bar-chart-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.bar-chart-total {
  color: var(--red);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
  18. Appointments rows (overview + appointments page)
════════════════════════════════════════════════════════════════════ */
.appt-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-1);
  position: relative;
}
.appt-row.overdue { border-color: var(--red-line); }
.appt-row.tomorrow { border-color: var(--blue-line); }

.appt-row-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
  flex-wrap: wrap;
}
.appt-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
}
.appt-when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.appt-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
}

/* ════════════════════════════════════════════════════════════════════
  19. Active-shift / Clock-in cards (employees page)
════════════════════════════════════════════════════════════════════ */
.active-shift {
  background: var(--green-bg-band);
  border: 1px solid var(--green-line);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.active-shift-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--green);
  font-weight: 600;
  margin-bottom: 2px;
}
.active-shift-info {
  flex: 1;
  min-width: 0;
}
.active-shift-proj {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.active-shift-since {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.active-shift-timer {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.location-card {
  background: var(--green-bg-band);
  border: 1px solid var(--green-line);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.location-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--green);
  font-weight: 600;
  margin-bottom: 4px;
}
.location-coords {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.location-link {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--green);
  font-weight: 500;
  margin-top: 4px;
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
  20. Employee row (employees page)
════════════════════════════════════════════════════════════════════ */
.emp-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-fast), transform var(--t-base) var(--ease-out-expo);
}
.emp-row.live {
  border-color: var(--green-line);
}
.emp-row:hover {
  border-color: var(--gold);
}
.emp-row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.emp-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.emp-row-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.emp-row-name .name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}
.emp-row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.emp-row-actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.emp-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.emp-stat {
  background: var(--surf2);
  border-radius: var(--r);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.emp-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  font-weight: 500;
}
.emp-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.emp-stat-money {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--gold-deep);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.emp-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 540px) {
  .emp-quick-actions { grid-template-columns: repeat(4, 1fr); }
}

.emp-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
}
.emp-foot-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.emp-foot-line .week {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
}
.emp-foot-line .amt {
  color: var(--gold-deep);
  font-weight: 600;
  font-family: var(--font-serif);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.emp-foot-line .hrs {
  color: var(--muted);
  margin-left: var(--sp-2);
}

.emp-archive-toggle {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  margin-top: var(--sp-3);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.emp-archive-toggle:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* ════════════════════════════════════════════════════════════════════
  21. Generic list rows (hours, history)
════════════════════════════════════════════════════════════════════ */
.list { display: flex; flex-direction: column; }
.list-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.list-row:last-child { border-bottom: 0; }
.list-row.clickable { cursor: pointer; }
.list-row.clickable:hover { background: var(--surf2); }
.lr-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.lr-text {
  font-family: var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-amount {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Day-34: dedicated class for HH:MM duration values in list rows.
   Was using .lr-amount which gave duration values the serif treatment
   meant for currency. Three typefaces in one row felt busy. Now:
   mono for tabular data (date + duration), sans for identity (name),
   serif reserved for currency where editorial weight serves the
   "this is money" signal. */
.lr-duration {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.lr-was {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  margin-left: var(--sp-1);
}
/* Hide-on-locked variant: when row is gold-locked, the duration also
   tints gold-deep so the lock state is unified. */
.list-row.locked .lr-duration { color: var(--gold-deep); }
.list-row.locked .lr-text { color: var(--gold-deep); }
.lr-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.4);
  color: var(--gold-deep);
  font-size: 11px;
  margin-left: var(--sp-2);
  vertical-align: middle;
  padding: 0;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.lr-photo-btn:hover { background: var(--gold); color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
  22. Hours panel row
════════════════════════════════════════════════════════════════════ */
.hours-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row.clickable { cursor: pointer; }
.hours-row.clickable:hover { background: var(--surf2); }
.hours-row.live {
  background: var(--green-soft);
}
.hours-row.edited {
  border-left: 2px solid var(--gold);
}
.hr-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-date {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
}
.hr-emp {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-project {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-totals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  flex-shrink: 0;
}
.hr-hours {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.05em;
  font-weight: 500;
}
.hr-cost {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hr-was {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
  23. Reimbursement / day-off / estimate / invoice rows
════════════════════════════════════════════════════════════════════ */
/* ── Reimbursement-style row (also used by estimates / invoices / day-off) ──
   Layout: 72px thumb on left, body on right (flex 1).
   On phones below 480px the thumb stacks above the body. */
.reimb-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease-out-expo),
              border-color var(--t-fast),
              box-shadow var(--t-base);
  display: flex;
  gap: var(--sp-4);
  align-items: stretch;
  overflow: hidden;
}
.reimb-row:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.reimb-row.denied { border-color: var(--red-line); }
.reimb-row.draft  { border-color: var(--border); }

.rb-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surf2);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.rb-thumb:hover {
  border-color: var(--gold);
  transform: scale(1.04);
}
.rb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--r) - 4px);
}

/* Day-60: standalone num pill for invoices/estimates rows.
   Independent class — no .rb-thumb inheritance — so neither the 64x64
   base nor the 56x56 mobile media query can leak in. Single horizontal
   line: "INV 84T97" / "EST 8LXA5".
   !important on dimensions to defend against any leaked rule. */
.rb-num-pill {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.rb-num-pill:hover {
  transform: scale(1.04);
}
.rb-num-pill .rb-num-pill-label {
  font-size: 8px;
  letter-spacing: 0.15em;
  opacity: 0.7;
}

.rb-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

/* Top line: NAME on left, AMOUNT on right with explicit gap */
.rb-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  width: 100%;
}
.rb-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: var(--tracking-tight);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;  /* explicit fallback if gap fails */
}
.rb-amount {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Meta line: small mono items separated by · */
.rb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
  align-items: center;
  line-height: 1.6;
}
.rb-meta > span:not(.rb-tag):not(.status-pill):not(.denied-text):not(:last-child)::after {
  content: '·';
  margin-left: var(--sp-2);
  color: var(--border);
}
.rb-tag {
  background: var(--surf2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.rb-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin-top: 2px;
  word-break: break-word;
  /* clamp very long descriptions on the row — full text shows on detail */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Action buttons: contained inside the card, wrap nicely */
.rb-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.rb-actions > .btn,
.rb-actions > .btn-x {
  flex-shrink: 0;
}
.rb-actions-right {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.rb-status-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: var(--sp-1);
  letter-spacing: 0.03em;
}

/* Mobile: stack thumb above body so cramped phones get full-width content */
@media (max-width: 480px) {
  .reimb-row {
    flex-direction: column;
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
  .rb-thumb {
    width: 56px;
    height: 56px;
    align-self: flex-start;
  }
  .rb-name { font-size: 16px; }
  .rb-amount { font-size: 18px; }
}

/* Inline armed-delete button. Day-34: now carries text labels
   ("Delete" / "Confirm") instead of × / ✓ glyphs, so the box must
   size to its content rather than be locked to 28×28. Min-height
   keeps it tap-friendly on mobile (44px target with padding). */
.btn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.btn-x:hover { border-color: var(--red); color: var(--red); }
.btn-x.armed {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
  24. Modal
════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.50), rgba(20, 22, 28, 0.30));
  backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity var(--t-base);
}
.modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(201, 165, 87, 0.08), transparent 60%);
  pointer-events: none;
}
.modal-overlay.open { opacity: 1; }

.modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease-out-expo);
  box-shadow: var(--shadow-4);
}

/* Wide variant — for forms with line items (estimates, invoices,
   change orders) that need more horizontal room on desktop. The
   form opts in by passing { wide: true } to openModal.

   Sizing: on phones the bottom-sheet still fills the viewport. On
   tablet/desktop the modal grows up to 880px, but we cap it at
   min(92vw, 880px) so it never crowds the viewport edges. */
.modal--wide {
  max-width: min(92vw, 880px);
}
.modal::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 28%;
  right: 28%;
  height: 2px;
  background: var(--gold);
  border-radius: 0 0 2px 2px;
}
.modal-overlay.open .modal { transform: translateY(0); }

@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: var(--sp-5); }
  .modal {
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-2xl);
    transform: translateY(20px);
  }
  .modal-overlay.open .modal { transform: translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.modal-close:hover { border-color: var(--red); color: var(--red); }
.modal-body {
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--surf2);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}
.modal-footer.split {
  justify-content: space-between;
}
.modal-footer-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  width: 100%;
}
.modal-footer-grid-2 .btn { width: 100%; }

/* Destructive zone — own its own band, real button, not an italic link.
   Destructive actions deserve clarity, not "elegance". */
.modal-destructive-zone {
  margin: var(--sp-4) calc(var(--sp-6) * -1) calc(var(--sp-5) * -1);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--red-line);
  background: var(--red-soft);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.modal-destructive-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  align-self: flex-start;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red-line);
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 8px 14px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.modal-destructive-link:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════════════
  25. Forms
════════════════════════════════════════════════════════════════════ */
.form { display: flex; flex-direction: column; gap: var(--sp-5); }

/* Section divider with eyebrow */
.form-section + .form-section {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.form-section-head {
  position: relative;
  padding-left: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0;
}
.form-section-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  background: var(--gold);
  border-radius: 2px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.fld-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  font-weight: 500;
}
.fld-label .req {
  color: var(--red);
  margin-left: var(--sp-2);
  font-size: 12px;
  letter-spacing: var(--tracking-mono-wide);
}

/* Card-style input wrapper. Sans-serif for typing — serif inputs
   are decoration over function. Stripe / Linear / Mercury all use
   sans because parseability while typing matters more than texture. */
.fld-input {
  width: 100%;
  background: var(--surf2);
  border: 1.5px solid transparent;
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  transition: border-color var(--t-base) var(--ease-out-expo),
              background var(--t-base);
  -webkit-appearance: none;
  outline: none;
}
.fld-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
  font-style: normal;
}
.fld-input:focus {
  background: var(--surface);
  border-color: var(--gold);
}

.fld-textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  /* Preserve all whitespace/newlines on paste from sources like ChatGPT */
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 4;
  -moz-tab-size: 4;
}

.fld-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23A0823E' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  padding-right: 36px;
}

.fld-time { font-family: var(--font-mono); letter-spacing: 0.03em; }

.fld-mono {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.fld-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.005em;
}

.form-err {
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  color: var(--red);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-size: 13px;
  font-family: var(--font-sans);
  margin-bottom: var(--sp-3);
}

.form-warning {
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  color: var(--gold-deep);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
}

.form-original-banner {
  background: var(--surf2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
}
.fob-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  margin-bottom: 2px;
  font-weight: 500;
}
.fob-value {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 540px) { .two-col { grid-template-columns: 1fr; } }

.time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.time-cell { display: flex; flex-direction: column; gap: 4px; }
.time-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
}

/* Two-column action row inside the body of a modal (Use current location / View on map) */
.field-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════════════
  26. Photo upload field
════════════════════════════════════════════════════════════════════ */
.photo-preview {
  position: relative;
  width: 100%;
  min-height: 140px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: var(--surf2);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.photo-preview:hover { border-color: var(--gold); }
.photo-preview-img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.photo-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  pointer-events: none;
}
.photo-preview-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  font-size: 24px;
  font-weight: 300;
}
.photo-preview-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
}
.photo-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}
.photo-clear:hover { background: var(--red); border-color: var(--red); }

/* ════════════════════════════════════════════════════════════════════
  27. Lightbox
════════════════════════════════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 28, 0.92);
  z-index: 300;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  transition: opacity var(--t-fast);
  cursor: zoom-out;
}
.lightbox-overlay.open { opacity: 1; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.lightbox-close:hover { background: var(--red); border-color: var(--red); }

/* ════════════════════════════════════════════════════════════════════
  28. Line-items editor (estimates / invoices)
════════════════════════════════════════════════════════════════════ */
.li-editor {
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4);
}
.li-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 70px 110px 110px 32px;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  padding: 0 var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}
.li-h-qty,
.li-h-price,
.li-h-total { text-align: right; }
.li-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.li-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 70px 110px 110px 32px;
  gap: var(--sp-3);
  align-items: center;
}
.li-row > * { min-width: 0; }
.li-row .fld-input {
  font-size: 13px;
  padding: 9px 11px;
  background: var(--surface);
  width: 100%;
}
.li-qty,
.li-price { text-align: right; font-variant-numeric: tabular-nums; }
.li-total {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold-deep);
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.li-remove {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.li-remove:hover { border-color: var(--red); color: var(--red); }

.li-add {
  width: 100%;
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.li-add:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-bg);
}

.li-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.li-sub-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
}
.li-sub-value {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold-deep);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* Day-49: removed the old @media (max-width: 540px) block here that
   overrode .li-row grid-template-columns and shrunk all .fld-input
   to 12px — that was for the pre-card layout and conflicted with
   the new li-card grid which has its own responsive rules. */

/* ════════════════════════════════════════════════════════════════════
  29. Misc helpers
════════════════════════════════════════════════════════════════════ */
.spacer-sm { height: var(--sp-3); }
.spacer    { height: var(--sp-5); }
.spacer-lg { height: var(--sp-7); }

/* "view all" right link in card heads */
.view-all-link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-weight: 500;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.view-all-link:hover { border-color: var(--gold); color: var(--gold-deep); }

/* Recent activity collapsible */
.collapsible {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.collapsible-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
}
.collapsible-chev {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  transition: transform var(--t-base);
}
.collapsible.open .collapsible-chev { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════════════
  30. Legacy-compat fallback rules (for class names used in JS panels
       that haven't been refactored to use the new component names yet).
       These are minimal stylings to keep the views readable until each
       panel is upgraded in a follow-up slice.
════════════════════════════════════════════════════════════════════ */

/* Employees panel legacy classes */
.emp-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.emp-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.emp-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
}
.emp-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.emp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.emp-tag {
  background: var(--surf2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 600;
}
.emp-live-tag {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  color: var(--green);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.emp-live-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* Archive section toggles */
.archive-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
  margin-top: var(--sp-3);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.archive-toggle:hover { border-color: var(--gold); color: var(--gold-deep); }
.archive-chevron {
  font-family: var(--font-mono);
  font-size: 14px;
  transition: transform var(--t-base);
}
.archive-toggle[aria-expanded="true"] .archive-chevron { transform: rotate(180deg); }

/* Open shifts banner card */
.open-shifts {
  background: linear-gradient(180deg, var(--green-soft), var(--surface));
  border-color: var(--green-line);
}
.os-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--sp-2);
}

/* Hour-row lock indicator — Day-34: now holds an inline SVG lock icon
   instead of the 🔒 emoji. */
.hr-lock,
.lr-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--gold-deep);
  vertical-align: middle;
}
.hr-lock .icon,
.lr-lock .icon {
  width: 12px;
  height: 12px;
}

/* Empty-rich-icon variants — colored badges per context */
.empty-rich-icon--success {
  background: var(--green-soft);
  border-color: var(--green-line);
  color: var(--green);
}
.empty-rich-icon--warning {
  background: var(--gold-bg);
  border-color: rgba(201, 165, 87, 0.30);
  color: var(--gold-deep);
}

/* Form-warning locked variant */
.form-warning--locked {
  background: var(--gold-bg);
  border-color: rgba(201, 165, 87, 0.30);
  color: var(--gold-deep);
}

/* Modal footer split layout */
.modal-footer-left {
  margin-right: auto;
  display: flex;
  gap: var(--sp-2);
}
.modal-footer-right {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
}
.modal-footer-split {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Line-items: extra header / column slots */
.li-h-desc { text-align: left; }
.li-h-unit { text-align: left; }
.li-h-x { text-align: center; }
/* Day-49: removed old .li-desc base rule that was overriding the
   day-47 card-title styling. Title styles live in section 58 below
   under .li-card .li-desc-cell .fld-input.li-desc. */
.li-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-align: left;
}

/* Reimbursement row legacy split */
.rb-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.rb-left {
  flex: 1;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════════════
  30. Tasks sub-panel
════════════════════════════════════════════════════════════════════ */
.tg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.tg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
}
.tg-head:hover { background: var(--surf2); }
.tg-head-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}
.tg-chev {
  width: 18px;
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  transition: transform var(--t-base);
}
.tg-card.open .tg-chev { transform: rotate(90deg); }
.tg-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.tg-name em { font-style: italic; color: var(--gold); font-weight: 500; }
.tg-progress {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}
.tg-progress.complete { color: var(--green); }
.tg-progress-bar {
  height: 3px;
  background: var(--surf2);
  margin: 0 var(--sp-5);
  border-radius: 2px;
  overflow: hidden;
}
.tg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width var(--t-slow) var(--ease-out-expo);
}
.tg-progress-fill.complete {
  background: var(--green);
}
.tg-body {
  display: none;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.tg-card.open .tg-body { display: block; }

.tk-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border-soft);
  transition: background var(--t-fast);
}
.tk-row:last-child { border-bottom: 0; }
.tk-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--gold);
  transition: border-color var(--t-fast), background var(--t-fast);
  padding: 0;
  line-height: 1;
}
.tk-check:hover { border-color: var(--gold); }
.tk-check.checked {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--accent);
}
.tk-label {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  cursor: text;
}
.tk-row.done .tk-label {
  color: var(--muted);
  text-decoration: line-through;
}
.tk-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: var(--tracking-mono);
  flex-shrink: 0;
}
.tk-x {
  /* Day-34: text labels (Delete/Confirm) replaced × glyph; size to content. */
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  line-height: 1.2;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.tk-x:hover {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red-line);
}
.tk-x.armed {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  font-weight: 600;
}

.tk-add-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}
.tk-add-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  padding: 6px 0;
}
.tk-add-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.tk-add-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--gold-deep);
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tk-add-btn:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
}

/* Add-group button (full-width dashed) */
.tg-add-btn {
  width: 100%;
  padding: var(--sp-4);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  margin-bottom: var(--sp-3);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.tg-add-btn:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-bg);
}

/* ════════════════════════════════════════════════════════════════════
  31. Expense categories sub-panel
════════════════════════════════════════════════════════════════════ */
.cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.cat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cat-name {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.cat-amount {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.cat-bar {
  height: 4px;
  background: var(--surf2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.cat-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--t-slow) var(--ease-out-expo);
}
.cat-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.cat-pct {
  color: var(--gold-deep);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
  32. Worker hour cards (Project Info > Hours)
════════════════════════════════════════════════════════════════════ */
.wh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.wh-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.wh-info {
  flex: 1;
  min-width: 0;
}
.wh-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.wh-rate {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.wh-totals {
  text-align: right;
  flex-shrink: 0;
}
.wh-hrs {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.wh-pay {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.wh-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  padding: 6px 0;
  font-size: 12px;
  align-items: center;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.wh-entry.clickable { cursor: pointer; padding: 6px var(--sp-2); }
.wh-entry.clickable:hover { background: var(--surf2); }
.wh-entry-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.wh-entry-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.wh-entry-amt {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.wh-source-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  padding: 2px 5px;
  border-radius: var(--r-sm);
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-fg);
  border: 1px solid var(--border);
}
.wh-source-pill.field { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.wh-source-pill.live { background: var(--green); color: #fff; border-color: var(--green); }


/* ════════════════════════════════════════════════════════════════════
  33. Filter pills (status segmented filters)
════════════════════════════════════════════════════════════════════ */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.filter-pill:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}
.filter-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.filter-pill .count {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.7;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════
  34. Document number pill (EST-001, INV-001, CO-001)
════════════════════════════════════════════════════════════════════ */
.doc-num-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  color: var(--gold-deep);
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  margin-right: var(--sp-2);
  text-transform: uppercase;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════
  35. From-project pre-fill bar (Estimates / Invoices)
════════════════════════════════════════════════════════════════════ */
.from-project-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: var(--sp-4);
}
.from-project-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  font-weight: 500;
  width: 100%;
}
.from-project-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.from-project-btn:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold-deep);
}
.from-project-btn em {
  font-style: italic;
  color: var(--gold);
  margin-left: 3px;
}
.from-project-btn .arrow {
  margin-right: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════
  36. Generic collapsible section (sec)
════════════════════════════════════════════════════════════════════ */
.sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.sec-head {
  /* Day-34: grid layout with three explicit columns:
       [chev] [title-block (title above meta)] [actions]
     This eliminates the flex collision where a long meta value was
     forcing the title to wrap and overlap the meta visually. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  user-select: none;
  font: inherit;
  color: inherit;
  transition: background var(--t-fast);
}
.sec-head:hover { background: var(--surf2); }
.sec-chev {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  line-height: 14px;
  transition: transform var(--t-base) var(--ease-out-expo);
}
.sec.sec-open .sec-chev { transform: rotate(90deg); }

/* Title above meta — vertical stack inside the middle grid column. */
.sec-title-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sec-title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-title em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.sec-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-meta.green { color: var(--green); }
.sec-meta.gold  { color: var(--gold-deep); }
.sec-meta.red   { color: var(--red); }
.sec-body {
  display: none;
  padding: 0 var(--sp-5) var(--sp-5);
}
.sec.sec-open .sec-body { display: block; }

/* When the head is also clickable but contains action buttons,
   actions sit at the right and don't trigger toggle */
.sec-head-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.sec-head-actions > * { pointer-events: auto; }

/* ════════════════════════════════════════════════════════════════════
  37. Empty state with icon
════════════════════════════════════════════════════════════════════ */
.empty-rich {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
/* Day-34: empty-state icon is a circular SVG badge instead of a 36px
   emoji. The old `font-size: 36px; filter: grayscale(0.3)` was for
   rendering 👤 👷 📄 🧾 📅 — which broke the editorial tone every
   time a list was empty. */
.empty-rich-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--surf2);
  border: 1px solid var(--border);
  color: var(--gold-deep);
}
.empty-rich-icon .icon {
  width: 26px;
  height: 26px;
}
.empty-rich-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--sp-2);
  letter-spacing: var(--tracking-tight);
}
.empty-rich-body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto var(--sp-5);
}
.empty-rich-cta {
  display: inline-block;
  margin-top: var(--sp-3);
}

/* ════════════════════════════════════════════════════════════════════
  38. Day-off, reimbursement denied row red border + DENIED text
════════════════════════════════════════════════════════════════════ */
.reimb-row.is-denied,
.reimb-row.is-rejected {
  border-color: var(--red-line);
  background: linear-gradient(180deg, var(--red-soft), var(--surface));
}
.denied-text {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--red);
  font-weight: 600;
  margin-left: var(--sp-2);
}

/* Overdue inline tag */
.rb-overdue {
  color: var(--red);
  font-weight: 600;
}

/* "Generate PDF" specific look (light navy with gold flush) */
.btn-generate-pdf {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.btn-generate-pdf:hover:not(:disabled) {
  background: var(--accent-2);
}


/* ════════════════════════════════════════════════════════════════════
  39. Modal sub-tabs (PENDING / APPROVED with gold underline)
════════════════════════════════════════════════════════════════════ */
.modal-tabs {
  display: flex;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.modal-tab {
  background: transparent;
  border: 0;
  padding: var(--sp-3) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.modal-tab:hover { color: var(--ink); }
.modal-tab.active {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

/* ════════════════════════════════════════════════════════════════════
  40. Backups modal — status card, snapshot rows
════════════════════════════════════════════════════════════════════ */
.backup-status {
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.backup-status-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.backup-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.backup-status-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.backup-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.backup-line strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--green);
}
.backup-line .icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  color: var(--muted);
}

.backup-explainer {
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.backup-explainer-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 4px;
}

.snap-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}
.snap-row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.snap-when {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
}
.snap-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 600;
  border: 1px solid;
}
.snap-pill.cloud {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green-line);
}
.snap-pill.local {
  background: var(--surf2);
  color: var(--muted);
  border-color: var(--border);
}
.snap-counts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════════════
  41. Review card (Website Reviews modal)
════════════════════════════════════════════════════════════════════ */
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.review-stars {
  font-family: var(--font-mono);
  letter-spacing: 2px;
  color: var(--gold);
  font-size: 16px;
}
.review-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.review-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.review-svc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}
.review-quote {
  background: var(--surf2);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════════════
  42. Portfolio modal — upload bar, photo group, photo card
════════════════════════════════════════════════════════════════════ */
.pf-upload-bar {
  background: var(--surf3);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.pf-upload-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.pf-upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: end;
}
.pf-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.pf-group {
  margin-bottom: var(--sp-5);
}
.pf-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.pf-group-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-transform: uppercase;
}
.pf-group-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.pf-photo {
  background: var(--surf3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.pf-photo-info {
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: var(--r);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.pf-photo-info-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.pf-photo-img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--r);
  display: block;
  margin-bottom: var(--sp-3);
  cursor: zoom-in;
}
.pf-photo-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}


/* ════════════════════════════════════════════════════════════════════
  39. Project Info Overview/Hours mini visualizations
════════════════════════════════════════════════════════════════════ */

/* Donut chart wrapper (CSS conic-gradient based, super lightweight) */
.donut {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut::after {
  content: '';
  position: absolute;
  inset: 18px;
  background: var(--surface);
  border-radius: 50%;
}
.donut-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.donut-value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.donut-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Mini bar chart for spend by category / hours by day */
.mini-chart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.mini-bar {
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  gap: var(--sp-3);
  align-items: center;
  font-size: 12px;
}
.mini-bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-bar-track {
  height: 12px;
  background: var(--surf2);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
}
.mini-bar-fill {
  height: 100%;
  border-radius: var(--r-sm);
  transition: width var(--t-slow) var(--ease-out-expo);
  background: var(--gold);
}
.mini-bar-fill.green { background: var(--green); }
.mini-bar-fill.red   { background: var(--red); }
.mini-bar-fill.navy  { background: var(--accent); }
.mini-bar-amount {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 500;
}
.mini-bar-amount.gold { color: var(--gold-deep); }
.mini-bar-amount.green { color: var(--green); }

/* Daily hours mini chart (vertical bars by weekday) */
.daily-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  height: 100px;
  align-items: end;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--sp-2);
}
.daily-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 4px;
  height: 100%;
}
.daily-bar {
  width: 100%;
  max-width: 32px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height var(--t-slow) var(--ease-out-expo);
}
.daily-bar.zero { background: var(--surf3); min-height: 2px; }
.daily-cap {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  text-align: center;
  margin-top: 2px;
}

/* Project overview hero card (top of Overview sub-tab) */
.pi-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.pi-hero-meta {
  flex: 1;
  min-width: 0;
}
.pi-hero-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.pi-hero-row:last-child { border-bottom: 0; }
.pi-hero-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-weight: 500;
}
.pi-hero-value {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.pi-hero-value.green { color: var(--green); }
.pi-hero-value.red   { color: var(--red); }
.pi-hero-value.gold  { color: var(--gold-deep); }

@media (max-width: 480px) {
  .pi-hero { flex-direction: column; gap: var(--sp-3); align-items: stretch; }
  .donut { align-self: center; }
}


/* ════════════════════════════════════════════════════════════════════
  40. Overview drag-to-reorder
  Every section in the Overview is wrapped in a .reorder-row that the
  user can long-press → drag to reorder. No handle, no mode toggle.
════════════════════════════════════════════════════════════════════ */

.reorder-row {
  position: relative;
  margin-bottom: var(--sp-3);
  /* Allow normal vertical scroll on touch; the long-press JS handles the
     drag intent itself by waiting 220ms before arming and aborting if the
     user moves more than 10px. */
  touch-action: pan-y;
  /* Smooth transforms when siblings shift during drag */
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

/* Day-34: subtle grip indicator on the right edge of every section.
   The original "no handle, no toggle" approach made the long-press
   reorder feature undiscoverable. This dot pattern is quiet enough
   not to compete with content but visible enough to communicate
   "drag-handle here". Sized for a 32px tap target. */
.reorder-row::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 14px;
  height: 22px;
  background-image:
    radial-gradient(circle at 25% 25%, var(--muted) 1.4px, transparent 1.6px),
    radial-gradient(circle at 75% 25%, var(--muted) 1.4px, transparent 1.6px),
    radial-gradient(circle at 25% 50%, var(--muted) 1.4px, transparent 1.6px),
    radial-gradient(circle at 75% 50%, var(--muted) 1.4px, transparent 1.6px),
    radial-gradient(circle at 25% 75%, var(--muted) 1.4px, transparent 1.6px),
    radial-gradient(circle at 75% 75%, var(--muted) 1.4px, transparent 1.6px);
  opacity: 0.30;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.reorder-row:hover::after { opacity: 0.55; }
.reorder-row.dragging::after { opacity: 0; }

/* Active drag state — the row that's being lifted */
.reorder-row.dragging {
  transition: none;            /* JS sets transform every frame */
  z-index: 50;
}
.reorder-row.dragging .sec {
  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%);
}

/* While anyone is dragging, freeze the body and dim non-dragged rows
   subtly so the lifted card is the focus */
body.reorder-dragging {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  touch-action: none;
  cursor: grabbing;
}
body.reorder-dragging .reorder-row:not(.dragging) {
  opacity: 0.85;
}

/* Locked head (no onToggle) — remove pointer cursor + hover */
.sec-head-locked {
  cursor: default;
}
.sec-head-locked:hover {
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════════
  41. Appointments panel
  Full-panel variants of the .appt-row preview (overview also uses these)
════════════════════════════════════════════════════════════════════ */

.appt-row--full {
  /* Inherit base .appt-row paddings; add room for actions row */
  padding-bottom: var(--sp-3);
}
.appt-row.completed {
  opacity: 0.65;
  border-color: var(--border);
  background: var(--surf2);
}
.appt-row.completed .appt-name {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
}
.appt-row.nodate {
  border-color: var(--gold);
  background: linear-gradient(180deg,
    rgba(201,165,87,0.06) 0%,
    var(--surface) 100%);
}

.appt-project {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.appt-project-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--muted);
  text-transform: uppercase;
}
.appt-project-name {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  font-style: italic;
}

.appt-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.appt-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

@media (max-width: 480px) {
  .appt-actions { gap: 6px; }
  .appt-actions .btn { font-size: 11px; padding: 6px 10px; }
}

/* ════════════════════════════════════════════════════════════════════
  42. Change-order preview strip (in addChangeOrder form)
════════════════════════════════════════════════════════════════════ */
.co-preview-strip {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(180deg,
    rgba(201, 165, 87, 0.08) 0%,
    rgba(201, 165, 87, 0.03) 100%);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: var(--r-sm);
}
.co-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
}
.co-preview-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.co-preview-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.co-preview-val {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.co-preview-val.is-credit {
  color: var(--red);
}
.co-preview-val.co-preview-grand {
  color: var(--gold-deep);
  font-size: 18px;
}
@media (max-width: 480px) {
  .co-preview-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .co-preview-row > div {
    flex-direction: row; justify-content: space-between; text-align: left;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Sticky filter pill (e.g. Hours filtered by worker)
   ════════════════════════════════════════════════════════════════════ */
.filter-pill-bar {
  display: flex;
  margin-bottom: var(--sp-3);
}
.filter-pill-bar .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  cursor: default;
}
.filter-pill-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono-tight);
  color: var(--gold-deep);
  text-transform: uppercase;
}
.filter-pill-value {
  font-weight: 500;
}
.filter-pill-clear {
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 16px;
  line-height: 1;
  color: var(--gold-deep);
  cursor: pointer;
  transition: background 120ms ease;
}
.filter-pill-clear:hover {
  background: rgba(160, 130, 62, 0.18);
}

/* ─── Lock screen (post sign-out) ──────────────────────────────── */
.lock-screen {
  position: fixed;
  inset: 0;
  background: var(--accent);
  background-image:
    radial-gradient(ellipse at top, rgba(201, 165, 87, 0.12), transparent 65%),
    radial-gradient(ellipse at bottom, rgba(46, 125, 82, 0.08), transparent 60%);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: var(--sp-4);
}
.lock-card {
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 24px 48px -12px rgba(14, 27, 53, 0.6),
    0 0 0 1px rgba(201, 165, 87, 0.2);
}
.lock-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-4);
}
.lock-title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}
.lock-title em {
  font-style: italic;
  color: var(--gold-deep);
}
.lock-sub {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}
.lock-btn {
  background: var(--gold);
  color: var(--accent);
  border: none;
  border-radius: var(--r);
  padding: 14px var(--sp-5);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 140ms ease, transform 80ms ease;
}
.lock-btn:hover { background: var(--gold-deep); }
.lock-btn:active { transform: scale(0.98); }

/* ─── Project-tab drag-reorder ─────────────────────────────────── */
.proj-tab--draggable {
  transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.proj-tab--draggable.dragging {
  transition: none;
  opacity: 0.92;
  box-shadow: 0 8px 16px -4px rgba(14, 27, 53, 0.4),
              0 0 0 2px var(--gold);
  cursor: grabbing;
}
body.proj-tab-dragging {
  user-select: none;
  -webkit-user-select: none;
}
body.proj-tab-dragging .proj-tab--system {
  pointer-events: none;
  opacity: 0.5;
}

/* ─── Live map (Leaflet) ──────────────────────────────────────── */
.overview-map { position: relative; }

/* Project marker — gold teardrop with initial */
.mp-marker {
  width: 30px;
  height: 38px;
  background: var(--gold);
  border: 2px solid var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 8px rgba(14, 27, 53, 0.30);
}
.mp-marker > span {
  transform: rotate(45deg);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  line-height: 1;
}

/* Worker marker — pulsing green dot */
.mw-marker {
  width: 16px;
  height: 16px;
  margin: 3px;
  background: var(--green);
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(46, 125, 82, 0.30),
              0 2px 6px rgba(14, 27, 53, 0.30);
  position: relative;
}
.mw-marker::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.4;
  animation: mw-pulse 1.8s ease-out infinite;
  z-index: -1;
}
@keyframes mw-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Leaflet popup — match brand palette */
.leaflet-popup-content-wrapper {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 8px 24px rgba(14, 27, 53, 0.25) !important;
}
.leaflet-popup-tip { background: var(--bg) !important; }
.leaflet-popup-content { margin: var(--sp-3) var(--sp-4) !important; }
.mp-popup-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.mp-popup-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.45;
}

/* ─── Branded dialog (alert/confirm replacement) ───────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 27, 53, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.dialog-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  max-width: 380px;
  width: 100%;
  box-shadow:
    0 20px 50px -8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 165, 87, 0.20);
  transform: translateY(8px) scale(0.98);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dialog-overlay.open .dialog {
  transform: translateY(0) scale(1);
}

.dialog--success { border-color: var(--green-line); }
.dialog--warning { border-color: var(--gold); }
.dialog--danger  { border-color: var(--red-line); }

.dialog-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.dialog-message {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: var(--sp-5);
  word-break: break-word;
}
.dialog-message p {
  margin: 0 0 var(--sp-3) 0;
}
.dialog-message p:last-child {
  margin-bottom: 0;
}

.dialog-buttons {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dialog-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono-tight);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
  min-width: 92px;
}
.dialog-btn:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.dialog-btn:active {
  transform: scale(0.97);
}

.dialog-btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--accent);
}
.dialog-btn--primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--accent);
}

.dialog-btn--danger {
  background: var(--red);
  border-color: var(--red);
  color: #FFFFFF;
}
.dialog-btn--danger:hover {
  background: var(--red);
  border-color: var(--red);
  filter: brightness(1.08);
  color: #FFFFFF;
}

@media (max-width: 380px) {
  .dialog {
    padding: var(--sp-4);
  }
  .dialog-buttons {
    flex-direction: column-reverse;
  }
  .dialog-btn {
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════════
  43. Skeletons — Firebase loading placeholders
════════════════════════════════════════════════════════════════════ */
@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skel,
.skel-card,
.skel-stat-card,
.skel-row,
.skel-row-avatar,
.skel-row-body span,
.skel-row-trail span {
  background: linear-gradient(
    90deg,
    var(--surf2) 0%,
    var(--surf3) 50%,
    var(--surf2) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s linear infinite;
}
.skel-card,
.skel-stat-card {
  /* Outer card shape, but use a static cream surface — only inner
     lines shimmer to keep the eye calm. */
  background: var(--surface);
  animation: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.skel-stat-card {
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: 0;
}

.skel-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.skel-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  animation: none;
}
.skel-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skel-row-body { flex: 1; min-width: 0; }
.skel-row-trail { flex-shrink: 0; }

/* Gentle entrance — fades the whole skeleton block in once. */
.skel-fade-in {
  animation: skel-fade-in var(--t-base) var(--ease-out-expo) both;
}
@keyframes skel-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduce shimmer for prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .skel,
  .skel-row-avatar,
  .skel-row-body span,
  .skel-row-trail span {
    animation: none;
    background: var(--surf2);
  }
}

/* ════════════════════════════════════════════════════════════════════
  44. First-run onboarding (Overview when state is empty)
════════════════════════════════════════════════════════════════════ */
.onb {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-9);
}
.onb-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-2);
}
.onb-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.onb-title em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 500;
}
.onb-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: var(--sp-7);
  max-width: 480px;
}
.onb-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.onb-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-base);
  width: 100%;
}
.onb-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.onb-card:active { transform: translateY(0) scale(0.99); }
.onb-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onb-card-body { flex: 1; min-width: 0; }
.onb-card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 2px;
}
.onb-card-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.4;
}
.onb-card-arrow {
  color: var(--muted);
  flex-shrink: 0;
  transition: color var(--t-fast), transform var(--t-fast);
}
.onb-card:hover .onb-card-arrow {
  color: var(--gold-deep);
  transform: translateX(2px);
}

/* ════════════════════════════════════════════════════════════════════
  45. Floating action button — persistent primary CTA
════════════════════════════════════════════════════════════════════ */
/* Day-60 fix25: FAB is now a circular icon-only + button that opens
   a stack of quick-create options. Previous version was a wide pill
   labeled "+ New project". */
.fab {
  position: fixed;
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  right: var(--sp-5);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #fff;
  border: 1px solid rgba(160, 130, 62, 0.40);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 6px 16px rgba(160, 130, 62, 0.32),
    0 12px 28px rgba(20, 22, 28, 0.18);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out-expo),
              box-shadow var(--t-base),
              opacity var(--t-base);
  animation: fab-rise var(--t-slow) var(--ease-out-expo) both;
}
.fab--hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
}
.fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.20) inset,
    0 8px 18px rgba(160, 130, 62, 0.38),
    0 16px 34px rgba(20, 22, 28, 0.22);
}
.fab:active { transform: translateY(0) scale(0.97); }
.fab .icon { stroke-width: 2.5; }
/* When stack is open, rotate the + into an x for visual feedback */
body.fab-open .fab .icon {
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease-out-expo);
}
@keyframes fab-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════
  46. Connectivity badge — Firebase offline / back-online indicator
════════════════════════════════════════════════════════════════════ */
.conn-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -180%);
  opacity: 0;
  transition:
    transform var(--t-base) var(--ease-out-expo),
    opacity var(--t-base);
  box-shadow: var(--shadow-3);
}
.conn-badge.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.conn-badge.is-offline {
  background: linear-gradient(180deg, #B83B32 0%, #8E2620 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.conn-badge.is-online {
  background: linear-gradient(180deg, var(--green) 0%, #155033 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.conn-badge.is-syncing {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.conn-badge.is-syncing .icon { animation: conn-spin 0.9s linear infinite; }
@keyframes conn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.conn-badge .icon { stroke-width: 2.5; }
.conn-badge-text { line-height: 1; }
@media (max-width: 380px) {
  .conn-badge {
    /* On narrow screens, anchor to the top edge full-width-ish */
    left: 8px;
    right: 8px;
    transform: translateY(-180%);
    justify-content: center;
  }
  .conn-badge.is-visible { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
  47. Toast — non-modal feedback notifications
════════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-5));
  z-index: 320;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
  max-width: min(92vw, 520px);
  pointer-events: none;
}

/* Day-34: pill-shaped editorial toast.
   The app's vocabulary leans pill (FAB), serif/mono type pairing,
   warm cream/navy palette with gold-deep accents. The previous
   --r-md rectangle felt like a stock framework notification glued
   to the bottom edge. This iteration:
     - fully rounded so it reads as a floating object
     - no hard outer border — soft shadow handles separation
     - 3px left accent bar communicates kind (success/error/info)
       without crowding the message with a bubbled icon
     - backdrop-filter blur picks up whatever's behind, premium feel
     - generous horizontal padding so words breathe
*/
.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 22px 12px 18px;
  background: rgba(245, 239, 227, 0.94); /* var(--surface) at 94% */
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.40) inset,
    0 4px 12px rgba(20, 22, 28, 0.10),
    0 12px 32px rgba(20, 22, 28, 0.16);
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden; /* keeps the accent bar inside the pill curve */
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition:
    opacity var(--t-base) var(--ease-out-expo),
    transform var(--t-base) var(--ease-out-expo);
}
.toast.is-shown { opacity: 1; transform: translateY(0) scale(1); }
.toast.is-leaving { opacity: 0; transform: translateY(10px) scale(0.96); }

/* Dark-mode surface tint */
html[data-theme="dark"] .toast {
  background: rgba(30, 36, 46, 0.88); /* var(--surf2) at 88% */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 12px rgba(0, 0, 0, 0.40),
    0 12px 32px rgba(0, 0, 0, 0.55);
}

/* 3px left accent bar — replaces the bubbled icon background.
   The icon itself stays inside the pill, just colored by kind. */
.toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-deep);
}
.toast--success::before { background: var(--green); }
.toast--error::before   { background: var(--red); }
.toast--info::before    { background: var(--gold-deep); }

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Color matches the accent bar — quiet visual link without
     repeating the bubble pattern that competed with the pill shape. */
}
.toast-icon .icon { stroke-width: 2.4; }
.toast--success .toast-icon { color: var(--green); }
.toast--error   .toast-icon { color: var(--red); }
.toast--info    .toast-icon { color: var(--gold-deep); }

.toast-message {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  min-width: 0;
  letter-spacing: 0.005em;
  /* Wrap gracefully on long messages instead of truncating. The pill
     remains a pill — height grows, width stays bounded by max-width
     on the parent. */
  overflow-wrap: anywhere;
  white-space: normal;
}

.toast-action {
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-deep);
  cursor: pointer;
  padding: 4px 10px;
  margin-left: var(--sp-2);
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: background var(--t-fast), color var(--t-fast);
}
.toast-action:hover {
  background: var(--gold-bg);
  color: var(--ink);
}

/* On narrow phones, the pill stretches more and the padding eases off
   so the message has room to breathe. */
@media (max-width: 380px) {
  .toast-stack { width: calc(100vw - 16px); max-width: none; }
  .toast {
    padding: 12px 18px 12px 16px;
    gap: var(--sp-2);
  }
  .toast-message { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity var(--t-fast); transform: none; }
  .toast.is-shown,
  .toast.is-leaving { transform: none; }
}

/* Day-34: when the FAB is mounted, lift the toast stack above it so
   the toast doesn't cover the FAB (and can't be tapped to dismiss
   the FAB by mistake). */
body.has-fab .toast-stack {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-5) + 64px + var(--sp-3));
}

/* ════════════════════════════════════════════════════════════════════
  48. Panel mount transition — gentle fade-in on each navigation
════════════════════════════════════════════════════════════════════ */
@keyframes panel-mount-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#panelHost.panel-mount-anim {
  animation: panel-mount-in 220ms cubic-bezier(0.2, 0, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #panelHost.panel-mount-anim {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
  49. Theme-flip transition (fallback for browsers without View
      Transitions API). The class is added by shell.js toggleTheme
      and removed 240ms later, just long enough for the crossfade.
════════════════════════════════════════════════════════════════════ */
html.theme-flipping,
html.theme-flipping body,
html.theme-flipping .card,
html.theme-flipping .navy-band,
html.theme-flipping .sidebar,
html.theme-flipping .stat-card,
html.theme-flipping .list-row,
html.theme-flipping .sec,
html.theme-flipping .modal-shell,
html.theme-flipping .btn,
html.theme-flipping input,
html.theme-flipping select,
html.theme-flipping textarea {
  transition:
    background-color 220ms cubic-bezier(0.2, 0, 0, 1),
    color 220ms cubic-bezier(0.2, 0, 0, 1),
    border-color 220ms cubic-bezier(0.2, 0, 0, 1) !important;
}

/* View Transitions API — when supported, the native crossfade replaces
   our class-based fallback. We tune the default duration so it lines
   up with the rest of the app's motion vocabulary (220ms base). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.theme-flipping,
  html.theme-flipping * {
    transition: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
  50. Scope items editor — appointment scope/observation list
      Used in addAppointment form so the boss can jot work items + photos
      while walking a job site. Mirrors the lineItemsEditor visual
      vocabulary (li-row) but without prices.
════════════════════════════════════════════════════════════════════ */
.si-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-3);
}
.si-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.si-meta-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.si-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.si-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.si-row-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: var(--tracking-mono);
  padding-top: 8px;
  min-width: 18px;
}
.si-row-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.si-desc { font-weight: 500; }
.si-note { font-size: var(--fs-sm); color: var(--ink); }

/* Photo cell — a 64x64 button. Empty: dashed outline + plus.
   Filled: thumbnail with a small × badge to clear. */
.si-row-photo { width: 64px; flex-shrink: 0; }
.si-photo-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border);
  background: var(--bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.si-photo-btn:hover { background: var(--gold-bg); border-color: var(--gold); }
.si-photo-btn.has-photo { border-style: solid; border-color: var(--border); padding: 0; }
.si-photo-icon {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
}
.si-photo-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.si-photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.si-photo-btn.has-photo { cursor: zoom-in; }
.si-photo-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 22, 28, 0.85);
  color: #fff;
  border: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.si-photo-clear:hover { background: var(--red); }
.si-photo-replace {
  position: absolute;
  top: 4px;
  right: 30px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 22, 28, 0.85);
  color: #fff;
  border: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.si-photo-replace:hover { background: var(--gold); color: var(--accent); }

/* ─── Media grid (multi-photo + video, fix35) ────────────────────── */
.si-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.si-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}
.si-tile-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.si-tile.is-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45));
  pointer-events: none;
}
.si-tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.si-tile-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(20, 22, 28, 0.78);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
}
.si-tile-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 22, 28, 0.85);
  color: #fff;
  border: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.si-tile-x:hover { background: var(--red); }

.si-tile-add {
  background: transparent;
  border: 1.5px dashed var(--border);
  color: var(--muted);
  cursor: pointer;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.si-tile-add:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--gold);
}
.si-tile-add-icon {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}
.si-tile-add-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* Video overlay (full-screen player) */
.si-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--sp-4);
}
.si-video-overlay-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r);
  background: #000;
}
.si-video-overlay-close {
  position: absolute;
  top: max(var(--sp-4), env(safe-area-inset-top, 16px));
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.si-video-overlay-close:hover { background: rgba(255, 255, 255, 0.22); }

.si-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  align-self: start;
  margin-top: 4px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.si-remove:hover { color: var(--red); background: var(--red-soft); }

.si-add { align-self: flex-start; }

/* Appointment row tweaks for new fields */
.appt-address {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 2px;
}
.appt-scope-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: 4px 10px;
  background: var(--gold-bg);
  border-radius: 999px;
  width: max-content;
}
.appt-scope-count {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--gold-deep);
  font-weight: 500;
}

/* Mobile: stack fields vertically */
@media (max-width: 480px) {
  .si-row {
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-2);
  }
}

/* ════════════════════════════════════════════════════════════════════
  51. Leads panel — sales pipeline rows
      Mirrors the appointments-row vocabulary: card surface, gold-deep
      tinting on hover, status pill at top right, action bar at bottom.
      Visual differentiator from appointments: the lead-row gets a 3px
      left accent bar by status (similar pattern to the toast accent),
      so a glance at the pipeline reveals where each lead sits.
════════════════════════════════════════════════════════════════════ */
.lead-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.lead-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 4px);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* Left accent bar by status — communicates pipeline position at a glance */
.lead-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-deep);
}
.lead-row--new::before       { background: var(--blue, #3D6FB6); }
.lead-row--contacted::before { background: var(--gold-deep); }
.lead-row--quoted::before    { background: var(--gold); }
.lead-row--won::before       { background: var(--green); }
.lead-row--lost::before      { background: var(--red); opacity: 0.5; }

.lead-row--lost {
  background: var(--bg);
}
.lead-row--lost .lead-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(20, 22, 28, 0.20);
}
.lead-row--won {
  background: linear-gradient(180deg, rgba(46, 125, 82, 0.04), transparent);
}

.lead-row-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.lead-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
}

.lead-contact {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.lead-address {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.lead-budget {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: 4px 10px;
  background: var(--gold-bg);
  border-radius: 999px;
  width: max-content;
}
.lead-budget-amt {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--gold-deep);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.lead-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  line-height: 1.5;
}
.lead-sourceref {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: var(--sp-2);
}
.lead-sourceref .mono-label-sm { color: var(--gold-deep); }
.lead-lost-reason {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 13px;
  color: var(--red);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--red-soft);
  border-radius: var(--r-sm);
}
.lead-lost-reason .mono-label-sm {
  color: var(--red);
  font-style: normal;
  margin-right: var(--sp-1);
}

.lead-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.lead-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Source pill — communicates which channel the lead came from.
   Visually distinct from status-pill so the two don't blur together. */
.source-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
.source-pill--thumbtack {
  background: rgba(0, 158, 230, 0.10);
  color: #0073A8;
  border-color: rgba(0, 158, 230, 0.25);
}
.source-pill--referral {
  background: rgba(46, 125, 82, 0.10);
  color: var(--green);
  border-color: rgba(46, 125, 82, 0.25);
}
.source-pill--website {
  background: var(--gold-bg);
  color: var(--gold-deep);
  border-color: rgba(201, 165, 87, 0.30);
}
.source-pill--phone {
  background: rgba(61, 111, 182, 0.10);
  color: #2D5290;
  border-color: rgba(61, 111, 182, 0.25);
}
.source-pill--walk-in {
  background: rgba(168, 52, 43, 0.08);
  color: var(--red);
  border-color: rgba(168, 52, 43, 0.20);
}
.source-pill--other {
  /* default look */
}

@media (max-width: 480px) {
  .lead-actions { gap: 6px; }
  .lead-actions .btn { font-size: 11px; padding: 6px 10px; }
  .lead-name { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
  52. Quick Add Lead — paste-to-parse form
      The textarea sits in a tinted block to visually separate "raw
      input you paste" from "structured fields that derive from it".
      The parse status line below the button shifts color by confidence.
════════════════════════════════════════════════════════════════════ */
.quick-paste-block {
  background: var(--gold-bg);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.quick-paste-block .fld-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.quick-paste {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  background: var(--surface);
  resize: vertical;
  min-height: 110px;
}
.quick-paste-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.quick-parse-btn {
  flex-shrink: 0;
}
.quick-parse-status {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
  flex: 1;
  min-width: 0;
}
.quick-parse-status--high {
  color: var(--green);
  font-style: normal;
}
.quick-parse-status--medium {
  color: var(--gold-deep);
  font-style: normal;
}
.quick-parse-status--low {
  color: var(--red);
}
.quick-parse-status--none {
  color: var(--muted);
}

.quick-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
  position: relative;
}
.quick-divider::before,
.quick-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.quick-divider-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
  53. Lead price + lead expenses
      .lead-cost is a red-tinted pill on lead rows showing the cost
      paid for that lead (negative — money out). Sits next to the
      gold .lead-budget which shows the estimated revenue (positive).
      The lead-exp-row layout matches the appt-row vocabulary but
      condensed for a tabular ledger feel.
════════════════════════════════════════════════════════════════════ */
.lead-pills {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.lead-cost {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 4px 10px;
  background: rgba(168, 52, 43, 0.06);
  border: 1px solid rgba(168, 52, 43, 0.18);
  border-radius: 999px;
  width: max-content;
}
.lead-cost .mono-label-sm { color: var(--red); }
.lead-cost-amt {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--red);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lead-exp-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.lead-exp-head {
  display: grid;
  grid-template-columns: 64px 1fr auto 110px;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.lead-exp-amt-h { text-align: right; }
.lead-exp-row {
  display: grid;
  grid-template-columns: 64px 1fr auto 110px;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px dashed var(--border);
  align-items: center;
  transition: background var(--t-fast);
}
.lead-exp-row:last-child {
  border-bottom: none;
}
.lead-exp-row:hover {
  background: var(--gold-bg);
}
.lead-exp-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.lead-exp-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-exp-amt {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--red);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.lead-exp-deleted {
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 480px) {
  .lead-exp-head,
  .lead-exp-row {
    grid-template-columns: 50px 1fr 90px;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }
  .lead-exp-head .source-pill,
  .lead-exp-row .source-pill {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════════
  54. Final balance invoice support styles
      The "→ Invoice remaining" CTA in project header was removed in
      day-48, but addInvoice form still supports the final-balance
      flow (via direct opt) and the FINAL badge appears on invoice
      list rows. Keep these styles for that path.
════════════════════════════════════════════════════════════════════ */

/* Locked select — when in final-balance flow, project picker is fixed */
.fld-input--locked {
  opacity: 0.78;
  cursor: not-allowed;
  background: var(--bg);
}

/* Final balance badge in invoice list */
.inv-finalbal-badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px 7px;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: 3px;
  vertical-align: 2px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
  55. Line items: autocomplete dropdown
      The desc input on each row gets wrapped in .li-desc-cell which
      establishes positioning context for the .li-suggest dropdown.
      Suggestions are sourced from the serviceItems catalog.
════════════════════════════════════════════════════════════════════ */
.li-desc-cell {
  position: relative;
  min-width: 0;
}
.li-desc-cell .fld-input {
  width: 100%;
}
.li-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(14, 27, 53, 0.15);
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.li-suggest-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background var(--t-fast);
}
.li-suggest-item:last-child {
  border-bottom: 0;
}
.li-suggest-item:hover {
  background: var(--gold-bg);
}
.li-suggest-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
}
.li-suggest-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.li-suggest-item:hover .li-suggest-meta {
  color: var(--gold-deep);
}

/* Mobile fallback: grid collapses into a stacked card per row.
   Description spans the full width; qty/unit/price/total are placed
   in a 2-column sub-grid below. Remove button absolute-positions
   to the top right of the card. */
@media (max-width: 720px) {
  .li-editor {
    padding: var(--sp-3);
  }
  .li-header { display: none; }
  .li-list { gap: var(--sp-3); }
  .li-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'desc desc'
      'qty unit'
      'price total';
    gap: var(--sp-2);
    padding: var(--sp-3) calc(var(--sp-3) + 32px) var(--sp-3) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    align-items: start;
  }
  .li-row > .li-desc-cell { grid-area: desc; }
  .li-row > .li-qty       { grid-area: qty; }
  .li-row > .li-unit      { grid-area: unit; }
  .li-row > .li-price     { grid-area: price; }
  .li-row > .li-total     {
    grid-area: total;
    padding: 9px 0;
    text-align: right;
  }
  .li-row > .li-remove {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
  }
}

/* ════════════════════════════════════════════════════════════════════
  56. Service catalog & Clients panels
      Two database management panels with similar table-row vocabulary:
      head row of mono labels + scrollable body of editable rows.
════════════════════════════════════════════════════════════════════ */

/* ── Service catalog ───────────────────────────────────────────── */
.svc-sort-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  flex-wrap: wrap;
}
.svc-sort-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.svc-sort-btn:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
}
.svc-sort-btn.is-active {
  background: var(--gold-deep);
  color: #fff;
  border-color: var(--gold-deep);
}

.svc-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.svc-head, .svc-row {
  display: grid;
  grid-template-columns: 1fr 80px 110px 80px auto;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  align-items: center;
}
.svc-head {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.svc-h-price, .svc-h-uses { text-align: right; }
.svc-row {
  border-bottom: 1px dashed var(--border);
  transition: background var(--t-fast);
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: var(--gold-bg); }
.svc-desc {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.svc-price {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--gold-deep);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.svc-uses {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.svc-uses-suffix {
  color: rgba(0, 0, 0, 0.30);
  font-size: 10px;
  margin-left: 1px;
}
.svc-actions {
  display: flex;
  gap: var(--sp-1);
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .svc-head, .svc-row {
    grid-template-columns: 1fr auto;
    gap: var(--sp-2);
  }
  .svc-head .svc-h-price,
  .svc-head .svc-h-uses,
  .svc-head > span:nth-child(2),
  .svc-head > span:nth-child(5) { display: none; }
  .svc-unit, .svc-uses { display: none; }
  .svc-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      'desc'
      'meta'
      'actions';
  }
  .svc-desc { grid-area: desc; white-space: normal; }
  .svc-price { grid-area: meta; text-align: left; }
  .svc-actions { grid-area: actions; }
}

/* ── Clients panel ─────────────────────────────────────────────── */
.cli-search-row {
  margin: var(--sp-3) 0;
}
.cli-search {
  width: 100%;
  font-size: 14px;
}
.cli-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cli-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-1);
}
.cli-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cli-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}
.cli-contact {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.cli-address {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.cli-activity {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}
.cli-act-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: var(--bg);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cli-act-pill--gold {
  background: var(--gold-bg);
  color: var(--gold-deep);
  border-color: rgba(201, 165, 87, 0.30);
}
.cli-act-suffix {
  color: var(--muted);
  font-weight: 400;
  margin-left: 2px;
}
.cli-actions {
  display: flex;
  gap: var(--sp-1);
}

@media (max-width: 600px) {
  .cli-row {
    grid-template-columns: 1fr;
  }
  .cli-activity { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
  57. Estimate ↔ Invoice conversion badges
      Tappable pills that show the link between an estimate and the
      invoice it was converted to (and vice versa).
════════════════════════════════════════════════════════════════════ */
.est-converted-badge,
.inv-source-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gold-bg);
  color: var(--gold-deep);
  border: 1px solid rgba(201, 165, 87, 0.30);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.est-converted-badge:hover,
.inv-source-badge:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.est-converted-badge--orphan,
.inv-source-badge--orphan {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--border);
  cursor: default;
  opacity: 0.6;
}
.est-converted-badge--orphan:hover,
.inv-source-badge--orphan:hover {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--border);
}

/* Project variant — navy-tinted to distinguish from the gold INV
   badge when an estimate has both badges on the same row. */
.est-converted-badge--proj {
  background: rgba(14, 27, 53, 0.06);
  color: var(--navy);
  border-color: rgba(14, 27, 53, 0.18);
}
.est-converted-badge--proj:hover {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
}

/* ════════════════════════════════════════════════════════════════════
  58. Line items: activity cards
      Each line item is now a self-contained card with: index badge
      top-left, the existing field grid (desc/qty/unit/price/total/×),
      and a details textarea below for activity steps. Visual
      separation between activities makes large estimates scannable.
════════════════════════════════════════════════════════════════════ */
.li-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.li-card-num {
  position: absolute;
  top: -10px;
  left: var(--sp-4);
  background: var(--gold-deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 2;
  line-height: 1;
}

/* The grid row inside a card — restructured day-47:
   the description (title of the activity) takes the full first row,
   then qty/unit/price/total/× go on the second row in a smaller
   sub-grid. This makes the title visually dominant and the specs
   feel like supporting metadata. */
.li-card .li-row {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 80px 80px 130px 130px 32px;
  grid-template-areas:
    'desc desc desc desc desc remove'
    '. qty unit price total .';
  gap: var(--sp-2) var(--sp-3);
  align-items: end;
}
.li-card .li-row > .li-desc-cell { grid-area: desc; }
.li-card .li-row > .li-cell--qty   { grid-area: qty; }
.li-card .li-row > .li-cell--unit  { grid-area: unit; }
.li-card .li-row > .li-cell--price { grid-area: price; }
.li-card .li-row > .li-cell--total { grid-area: total; }
.li-card .li-row > .li-remove      { grid-area: remove; justify-self: end; align-self: start; }

/* Each numeric cell: small label above + input below. */
.li-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.li-cell-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.li-cell .fld-input {
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}
.li-cell--total .li-total {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 8px 10px 8px 0;
  letter-spacing: -0.01em;
}

/* Day-49: the description input inside a card now reads as a TITLE.
   Bigger serif font + heavier weight, paired with a focus accent so
   it feels like a heading you're filling in rather than a generic
   field. !important guards against any base .li-row .fld-input rules
   trying to size it back down. */
.li-card .li-desc-cell .fld-input.li-desc,
.li-card .li-desc-cell input.li-desc {
  font-family: var(--font-serif) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em;
  padding: 12px 14px !important;
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border);
  line-height: 1.25;
}
.li-card .li-desc-cell .fld-input.li-desc::placeholder,
.li-card .li-desc-cell input.li-desc::placeholder {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0;
  font-size: 17px;
}
.li-card .li-desc-cell .fld-input.li-desc:focus,
.li-card .li-desc-cell input.li-desc:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 165, 87, 0.12);
}

/* Mobile: collapse to vertical stack, keep title prominent. */
@media (max-width: 720px) {
  .li-card .li-row {
    grid-template-columns: 1fr 1fr 32px;
    grid-template-areas:
      'desc desc remove'
      'qty unit unit'
      'price total total';
    gap: var(--sp-2);
  }
  .li-card .li-desc-cell .fld-input.li-desc {
    font-size: 18px;
    padding: 10px 12px;
  }
  .li-card .li-desc-cell .fld-input.li-desc::placeholder {
    font-size: 14px;
  }
  .li-cell--total .li-total { font-size: 15px; }
}

/* Details textarea: starts as one line, grows organically */
.li-details {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px dashed var(--border);
  background: var(--bg);
  resize: vertical;
  min-height: 36px;
  max-height: 240px;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: inherit;
  border-radius: var(--r-sm);
}
.li-details::placeholder {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}
.li-details:hover {
  border-color: rgba(201, 165, 87, 0.40);
}
.li-details:focus {
  outline: none;
  border-color: var(--gold);
  border-style: solid;
  background: var(--surface);
}

/* List spacing — more breathing room between cards than before */
.li-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-3);
}

/* Mobile: details textarea takes the natural full width below
   the stacked grid. */
@media (max-width: 720px) {
  .li-card {
    padding: var(--sp-3);
    padding-top: calc(var(--sp-3) + 6px);
  }
  .li-card-num {
    left: var(--sp-3);
  }
}

/* ════════════════════════════════════════════════════════════════════
  59. Project billing line (day-53)
      Subtle one-line context strip in the project header.
      No background, no border, no buttons — just inline mono text
      with text-link actions on the trailing edge.
════════════════════════════════════════════════════════════════════ */
.project-billing-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--on-navy-border);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.pbl-segments {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.pbl-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.pbl-lbl {
  color: var(--on-navy-faint);
  letter-spacing: 0.04em;
  font-size: 10.5px;
  text-transform: uppercase;
}
.pbl-lbl-strong {
  color: var(--gold);
  letter-spacing: 0.06em;
  font-size: 10.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.pbl-val {
  color: var(--on-navy);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pbl-sep {
  color: var(--on-navy-border);
  user-select: none;
}
.pbl-co-tag {
  background: rgba(201, 165, 87, 0.10);
  border: 1px solid rgba(201, 165, 87, 0.25);
  color: var(--gold);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pbl-co-tag:hover {
  background: rgba(201, 165, 87, 0.20);
  border-color: var(--gold);
}
.pbl-over .pbl-val { color: #f9a4a4; }
.pbl-over .pbl-over-tag {
  color: #f9a4a4;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.pbl-remaining .pbl-val { color: var(--gold); }
.pbl-fully .pbl-lbl { color: rgba(180, 220, 180, 0.75); }
.pbl-actions {
  display: inline-flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.pbl-link {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 0;
  text-transform: lowercase;
  transition: color var(--t-fast);
}
.pbl-link:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .project-billing-line {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .pbl-segments { font-size: 10.5px; }
  .pbl-actions { gap: var(--sp-4); }
}

/* ════════════════════════════════════════════════════════════════════
  60. Invoice form: live billing context (day-53)
      Subtle line below the project select that shows budget consumption
      live as the boss types. When the invoice exceeds remaining,
      a [+ change order] link appears inline.
════════════════════════════════════════════════════════════════════ */
.invoice-billing-context {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  min-height: 20px;
}
.invoice-billing-context:empty { display: none; }
.ibc-segments {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.ibc-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.ibc-lbl {
  color: var(--muted);
  letter-spacing: 0.04em;
  font-size: 10px;
  text-transform: uppercase;
}
.ibc-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ibc-co {
  color: var(--gold-deep);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ibc-sep { color: var(--border); user-select: none; }
.ibc-after .ibc-val { color: var(--gold-deep); font-weight: 600; }
.ibc-over .ibc-val { color: #b85555; font-weight: 600; }
.ibc-over .ibc-lbl { color: #b85555; }
.ibc-link {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 0;
  text-transform: lowercase;
  font-weight: 600;
  flex-shrink: 0;
  transition: color var(--t-fast);
}
.ibc-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

/* Day-53: invoice row "% of budget" badge — small, gold, mono, lowercase
   so it reads as quiet meta info next to status/dates. */
.rb-budget-share {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  background: rgba(201, 165, 87, 0.08);
  border: 1px solid rgba(201, 165, 87, 0.20);
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: lowercase;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
  61. Task editing (day-57)
      Tappable task labels and group-edit pencil. Disimulado —
      no underline, no different color, just pointer cursor.
════════════════════════════════════════════════════════════════════ */
button.tk-label-edit {
  flex: 1;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--t-fast);
}
button.tk-label-edit:hover {
  color: var(--gold-deep);
}
.tk-row.done button.tk-label-edit {
  color: var(--muted);
  text-decoration: line-through;
}
.tk-row.done button.tk-label-edit:hover {
  color: var(--gold-deep);
  opacity: 0.85;
}

.tg-head-right {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.tg-edit {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  opacity: 0.5;
}
.tg-edit:hover {
  background: rgba(201, 165, 87, 0.10);
  color: var(--gold-deep);
  opacity: 1;
}

/* ─── My Card modal (Day-59, navy editorial redesign) ────────────── */

/* Navy theme override for the modal chrome itself */
.modal.modal--navy {
  background: var(--accent);
  color: var(--on-navy);
  border-color: var(--on-navy-border);
}
.modal.modal--navy .modal-header {
  background: transparent;
  border-bottom-color: var(--on-navy-border);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.modal.modal--navy .modal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--on-navy-dim);
}
.modal.modal--navy .modal-close {
  color: var(--on-navy-dim);
  font-size: 24px;
  transition: color var(--t-fast);
}
.modal.modal--navy .modal-close:hover {
  color: var(--gold);
}
.modal.modal--navy .modal-body {
  background: transparent;
  padding: 0;
}
.modal.modal--navy .modal-footer {
  background: transparent;
  border-top-color: var(--on-navy-border);
}

/* The card frame itself */
.mycard-frame {
  padding: var(--sp-3) var(--sp-5) var(--sp-6);
  text-align: center;
}
.mycard-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin: var(--sp-2) 0 var(--sp-5);
  font-weight: 500;
}

/* QR — black on white card with subtle shadow (must stay light for scanning) */
.mycard-qr-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-6);
}
.mycard-qr-card {
  background: #FFFFFF;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.4),
              0 4px 10px -2px rgba(0,0,0,0.2);
}
.mycard-qr-loading {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--on-navy-border);
  border-radius: var(--r-lg);
  color: var(--on-navy-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0 auto;
}

/* Identity block — Fraunces serif, italic last name like the webpage */
.mycard-identity {
  margin-bottom: var(--sp-3);
}
.mycard-name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 500;
  color: var(--gold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  margin: 0 0 var(--sp-2);
}
.mycard-name em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.mycard-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--on-navy-dim);
  font-weight: 400;
}

/* Rule between identity and rows */
.mycard-rule {
  height: 1px;
  background: var(--on-navy-border);
  margin: var(--sp-5) auto;
  width: 60px;
}

/* Contact rows — flat, no boxes (Day-59 refinement) */
.mycard-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-6);
  text-align: left;
}
.mycard-row {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-3) 0;
  transition: opacity var(--t-fast);
}
.mycard-row + .mycard-row {
  border-top: 1px solid var(--on-navy-border);
}
.mycard-row:hover,
.mycard-row:active {
  opacity: 0.78;
}
.mycard-row-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--on-navy-dim);
  margin-bottom: 4px;
  font-weight: 500;
}
.mycard-row-value {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--on-navy);
  font-weight: 500;
  word-break: break-all;
  letter-spacing: -0.005em;
}

/* Action buttons */
.mycard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Footer hint */
.mycard-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--on-navy-faint, var(--on-navy-dim));
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

.mycard-error {
  padding: var(--sp-6);
  text-align: center;
  color: #f9a4a4;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ─── Notification settings modal (Day-59) ───────────────────────── */
.notif-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  margin: var(--sp-4) 0 var(--sp-3);
}
.notif-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
.notif-status-text {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--on-navy);
  font-weight: 500;
}

.notif-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--on-navy-dim);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: rgba(212, 184, 114, 0.08);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
}

.notif-events-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--on-navy-dim);
  font-weight: 500;
  margin-bottom: var(--sp-3);
  text-align: left;
}
.notif-events {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  text-align: left;
}
.notif-event {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--on-navy);
  line-height: 1.5;
  padding: var(--sp-2) 0;
  position: relative;
  padding-left: 18px;
}
.notif-event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

/* ─── Notifications · Team status section (Day-59 / Phase 5) ─────── */
.notif-team-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}
.notif-team-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--on-navy-border);
  text-align: left;
}
.notif-team-row:first-child { border-top: 0; }
.notif-team-name {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--on-navy);
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-team-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.notif-dot--small {
  width: 7px;
  height: 7px;
  box-shadow: none;
}
.notif-team-status-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--on-navy-dim);
  font-weight: 500;
}
.notif-team-test-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-navy);
  border: 1px solid var(--on-navy-border);
  border-radius: var(--r);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.notif-team-test-btn:hover:not(:disabled) {
  background: rgba(212, 184, 114, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.notif-team-test-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.notif-team-empty {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--on-navy-dim);
  font-style: italic;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-5);
  text-align: left;
}

/* ═════════════════════════════════════════════════════════════════
   Day-60: Overview redesign — Attention card + Money In card
   ═════════════════════════════════════════════════════════════════ */

/* Attention card — appears only when there are action items.
   Visible color is amber by default, escalates to red if any item
   inside is red-tone. The escalation is done via the .attn-item
   modifier classes (we don't try to detect from JS). */
.attention-card {
  background: rgba(168, 52, 43, 0.04);
  border: 1px solid rgba(168, 52, 43, 0.18);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.attn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.attn-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red, #A8342B);
}
.attn-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--red, #A8342B);
  background: rgba(168, 52, 43, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
}
.attn-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.attn-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-sans);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.attn-item:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.attn-item--red {
  border-color: rgba(168, 52, 43, 0.35);
}
.attn-item--red:hover {
  border-color: var(--red, #A8342B);
}
.attn-item--amber {
  border-color: rgba(201, 165, 87, 0.35);
}
.attn-item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  border-radius: 50%;
}
.attn-item--red .attn-item-icon {
  background: rgba(168, 52, 43, 0.12);
  color: var(--red, #A8342B);
}
.attn-item--amber .attn-item-icon {
  background: rgba(201, 165, 87, 0.12);
  color: var(--gold-deep, #8B6F2D);
}
.attn-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attn-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attn-item-sub {
  font-size: 12px;
  color: var(--muted);
}
.attn-item-amount {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.attn-item--red .attn-item-amount {
  color: var(--red, #A8342B);
}

/* Money In card — replaces the old 4-KPI stat grid */
.money-in-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.mi-headline {
  text-align: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.mi-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.mi-amount {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--green, #2D7A4F);
  line-height: 1;
  letter-spacing: -0.01em;
}
.mi-trend {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}
.mi-trend--up    { color: var(--green, #2D7A4F); }
.mi-trend--down  { color: var(--red, #A8342B); }
.mi-trend--neutral { color: var(--muted); font-style: italic; }

/* Expected next 30 days — small notice between headline and ambient */
.mi-expected {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(201, 165, 87, 0.06);
  border-left: 2px solid rgba(201, 165, 87, 0.35);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.mi-expected-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep, #8B6F2D);
}
.mi-expected-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* Ambient stats — old 4-KPI demoted to small grid below the headline */
.mi-ambient {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (min-width: 480px) {
  .mi-ambient { grid-template-columns: repeat(4, 1fr); }
}
.mi-ambient-cell {
  padding: var(--sp-2) 0;
}
.mi-ambient-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.mi-ambient-val {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mi-ambient-val--green { color: var(--green, #2D7A4F); }
.mi-ambient-val--blue  { color: var(--blue, #1E40AF); }
.mi-ambient-val--red   { color: var(--red, #A8342B); }

/* ═════════════════════════════════════════════════════════════════
   Day-60: Financials snapshot widget — "Skyline" layout
   Vertical hierarchy with hero italic number on top, two cells below
   ═════════════════════════════════════════════════════════════════ */
.financials-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  margin-bottom: var(--sp-3);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

/* Header — title + "Today" tag */
.fin-sky-head {
  padding: var(--sp-4) var(--sp-5) 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.fin-sky-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.fin-sky-title em {
  font-style: normal;
  font-weight: 600;
  color: var(--gold, #C9A557);
}
.fin-sky-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold, #C9A557);
  padding: 3px 8px;
  background: rgba(201, 165, 87, 0.10);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: 3px;
}

/* Hero — Available cash, oversized italic with gold tail */
.fin-sky-hero {
  padding: 28px var(--sp-5) 24px;
  text-align: left;
  background: linear-gradient(180deg, transparent 0%, rgba(201, 165, 87, 0.04) 100%);
  position: relative;
}
.fin-sky-hero-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #C9A557);
  margin-bottom: 10px;
}
.fin-sky-hero-val {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--ink);
}
.fin-sky-hero-val em {
  font-style: italic;
  color: var(--gold, #C9A557);
  font-weight: 500;
}
.fin-sky-hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
/* Negative cash — switch the italic accent to red for warning */
.fin-sky-hero--red .fin-sky-hero-val em {
  color: var(--red, #A8342B);
}
.fin-sky-hero--red .fin-sky-hero-lbl {
  color: var(--red, #A8342B);
}

/* Secondary row — Pending + Budgets, two equal cells */
.fin-sky-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.fin-sky-cell {
  padding: 18px var(--sp-5);
  position: relative;
}
.fin-sky-cell + .fin-sky-cell {
  border-left: 1px solid var(--border);
}
.fin-sky-cell-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fin-sky-cell-val {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
}
.fin-sky-cell-val--blue  { color: var(--blue, #1E40AF); }
.fin-sky-cell-val--green { color: var(--green, #2D7A4F); }
.fin-sky-cell-val--muted { color: var(--muted); }
.fin-sky-cell-sub {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════
   Day-60 fix20+: Net cash position row in Money In card
   Sits below the .mi-ambient grid as a subordinate stat
   ═════════════════════════════════════════════════════════════════ */
.mi-net {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.mi-net-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
.mi-net-val {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: auto;
}
.mi-net-val--blue { color: var(--blue, #1E40AF); }
.mi-net-val--red  { color: var(--red, #A8342B); }
.mi-net-sub {
  flex-basis: 100%;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  text-align: right;
}

/* ═════════════════════════════════════════════════════════════════
   Day-60 fix25: FAB Stack menu
   Vertical column of options that appears above the FAB when open
   ═════════════════════════════════════════════════════════════════ */
.fab-stack {
  position: fixed;
  bottom: calc(var(--sp-5) + 56px + 16px + env(safe-area-inset-bottom, 0px));
  right: var(--sp-5);
  z-index: 89;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}
.fab-stack-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease-out-expo),
              transform var(--t-base) var(--ease-out-expo);
  pointer-events: none;
  cursor: pointer;
}
.fab-stack-lbl {
  background: var(--surface, #14213D);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(245, 239, 227, 0.10));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.fab-stack-icon {
  width: 44px;
  height: 44px;
  background: var(--surface, #14213D);
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.fab-stack-item:hover .fab-stack-icon {
  border-color: var(--gold);
  background: var(--surface-2, #1A2A4D);
}
.fab-stack-item:active {
  transform: translateY(0) scale(0.97);
}

/* When body.fab-open, items appear with staggered animation */
body.fab-open .fab-stack-item {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.fab-open .fab-stack-item:nth-child(1) { transition-delay: 0.05s; }
body.fab-open .fab-stack-item:nth-child(2) { transition-delay: 0.10s; }
body.fab-open .fab-stack-item:nth-child(3) { transition-delay: 0.15s; }
body.fab-open .fab-stack-item:nth-child(4) { transition-delay: 0.20s; }

/* Backdrop — captures taps outside the stack to close it.
   Transparent (no dimming) so the page behind stays visible. */
.fab-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 85;
  pointer-events: none;
  transition: background var(--t-base);
}
body.fab-open .fab-backdrop {
  pointer-events: auto;
}

/* ═════════════════════════════════════════════════════════════════
   Day-60 fix30: PIN gate · Editorial style with Giant 21 centerpiece
   3-zone layout:
     [top]    eyebrow + brand wordmark
     [center] GIANT 21 (180px outline italic) + title + sub + dots
     [bottom] keypad
   The center block is flex:1 + justify-center so the visual mass is
   genuinely in the middle of the screen, not floating between gaps.
   ═════════════════════════════════════════════════════════════════ */
.pin-screen {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  padding: 48px 28px calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse at 50% 118%, #1a2742 0%, #10182b 55%, #0a0f1c 100%);
  color: #F5EFE3;
  overflow: hidden;
}

/* ── Top header ─────────────────────────────────────────────── */
.pin-header { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pin-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: 0.30em;
  color: #9c7c3a; text-transform: uppercase;
}
.pin-name {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  color: #F5EFE3; margin-top: 8px; text-align: center;
}
.pin-name em { font-style: italic; color: #C9A557; }

/* ── Center block — owns the visual middle ──────────────────── */
.pin-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; gap: 13px; min-height: 0;
}

/* Lock glyph — the vault centerpiece (replaces the giant 21) */
.pin-lock {
  width: 38px; height: 34px; border: 2.5px solid #C9A557; border-radius: 9px;
  position: relative; margin-bottom: 2px;
  box-shadow: 0 0 22px rgba(201, 165, 87, 0.28);
}
.pin-lock::before {
  content: ""; position: absolute; width: 18px; height: 14px;
  border: 2.5px solid #C9A557; border-bottom: 0; border-radius: 9px 9px 0 0;
  top: -14px; left: 50%; transform: translateX(-50%);
}
.pin-lock::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #C9A557; top: 50%; left: 50%; transform: translate(-50%, -60%);
  box-shadow: 0 6px 0 -1px #C9A557;
}

.pin-title {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 23px; font-weight: 400; font-style: italic;
  color: #F5EFE3; letter-spacing: -0.015em; text-align: center; line-height: 1.15; margin-top: 2px;
}
.pin-title em { font-style: normal; color: #C9A557; font-weight: 600; }

.pin-sub {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12px; color: rgba(245, 239, 227, 0.5); line-height: 1.5;
  max-width: 280px; text-align: center; margin-top: -2px;
}

.pin-dots { display: flex; gap: 13px; margin-top: 4px; }
.pin-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid rgba(201, 165, 87, 0.5); background: transparent;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease-out-expo, ease);
}
.pin-dot.filled {
  background: #C9A557; border-color: #C9A557;
  box-shadow: 0 0 11px rgba(201, 165, 87, 0.5); transform: scale(1.1);
}

.pin-error {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; letter-spacing: 0.12em; color: #E08B83; text-transform: uppercase;
  min-height: 16px; text-align: center; max-width: 320px; line-height: 1.4;
}
.pin-error--ghost { color: transparent; }

/* ── Vault keypad — round pressable discs ───────────────────── */
.pin-keypad {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px; width: min(300px, 100%); flex-shrink: 0; margin-top: 8px;
}
.pin-key {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(165deg, #1e2c4a, #141d33);
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 27px; font-weight: 400; color: #F5EFE3;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 16px -8px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 100ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:active {
  transform: scale(0.93);
  background: linear-gradient(165deg, #C9A557, #9c7c3a);
  color: #1a1206; border-color: #C9A557;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4);
}
.pin-key:disabled { opacity: 0.35; pointer-events: none; }

/* side keys (Forgot / Clear / Cancel) — plain text, not discs */
.pin-key--side {
  aspect-ratio: auto; border: 0; background: transparent; box-shadow: none; border-radius: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245, 239, 227, 0.55); font-weight: 600;
}
.pin-key--side:active { transform: none; background: transparent; color: #C9A557; box-shadow: none; }
.pin-key--ghost {
  aspect-ratio: auto; background: transparent; border: 0; box-shadow: none; pointer-events: none;
}

/* ── QR code (setup-totp mode) ─────────────────────────────── */
.pin-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pin-qr {
  width: 192px; height: 192px; border-radius: 10px; background: #F5EFE3; padding: 10px;
  border: 1px solid rgba(201, 165, 87, 0.3); box-shadow: 0 10px 30px -16px #000;
}
.pin-qr-fallback { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pin-qr-fallback-lbl {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(245, 239, 227, 0.45);
}
.pin-qr-fallback-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: 0.06em; color: #C9A557;
  background: rgba(201, 165, 87, 0.06); padding: 6px 10px; border-radius: 3px;
  border: 1px solid rgba(201, 165, 87, 0.20); user-select: all; word-break: break-all; max-width: 240px;
}

/* TOTP/QR mode — shrink keypad + QR so the whole screen fits */
.pin-screen--totp .pin-keypad { width: min(248px, 78%); gap: 11px; margin-top: 4px; }
.pin-screen--totp .pin-key { font-size: 22px; }
.pin-screen--totp .pin-qr { width: 168px; height: 168px; }
.pin-screen--totp .pin-center { gap: 9px; }

/* Short screens — keep the keypad on-screen */
@media (max-height: 720px) {
  .pin-screen { padding-top: 32px; }
  .pin-keypad { width: min(264px, 86%); gap: 11px; }
  .pin-key { font-size: 24px; }
  .pin-lock { transform: scale(0.85); }
  .pin-center { gap: 10px; }
}

/* ═════════════════════════════════════════════════════════════════
   Day-60 fix32: Online acceptance card (in estimate edit form)
   Shows the client's online signature with name + date. Sits above
   the form fields so the boss sees the acceptance proof first.
   ═════════════════════════════════════════════════════════════════ */
.accept-card {
  background: linear-gradient(180deg, rgba(201, 165, 87, 0.10), rgba(201, 165, 87, 0.04));
  border: 1px solid rgba(201, 165, 87, 0.30);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.accept-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.accept-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-deep, #8B6F2D);
}
.accept-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep, #8B6F2D);
  background: rgba(201, 165, 87, 0.15);
  border: 1px solid rgba(201, 165, 87, 0.30);
  padding: 2px 8px;
  border-radius: 100px;
}
.accept-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 2px;
}
.accept-name em {
  font-style: italic;
  color: var(--gold-deep, #8B6F2D);
}
.accept-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.accept-sig-wrap {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.accept-sig {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  display: block;
}
.accept-foot {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════
   Day-60 fix34: Project sub-tabs — Reimb tab styles
   Header summary, status groups, and styled rows by status.
═══════════════════════════════════════════════════════════════════ */

/* Header row at the top of a sub-tab — counted total + add button */
.sub-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.sub-summary-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub-summary-val {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sub-summary-meta {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

/* Empty state used inline (inside a sub-tab body) */
.empty--inline {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

/* Status group wrapper */
.reimb-group {
  margin-bottom: var(--sp-4);
}
.reimb-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-1);
}
.reimb-group-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-deep, #8B6F2D);
}
.reimb-group-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Status modifiers — left border tint per status.
   Pending = neutral (paper border)
   Approved = gold (committed)
   Paid = green (settled)
   Denied = red */
.reimb-row--pending  { border-left: 3px solid var(--border, #D8CEB8); }
.reimb-row--approved { border-left: 3px solid var(--gold, #C9A557); }
.reimb-row--paid     { border-left: 3px solid var(--green, #6FA275); }
.reimb-row--denied   { border-left: 3px solid var(--red, #C25A52); opacity: 0.65; }

.reimb-row-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.reimb-row-desc {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
  76. Form font override + density (Day-60 fix35)
  ════════════════════════════════════════════════════════════════════
  Selectively swaps the form font to Manrope for estimate / invoice /
  appointment add+edit modals AND compresses the visual density —
  smaller padding, tighter gaps, smaller labels — so long forms don't
  feel cluttered and the boss can see more on one screen.

  Only fields inside .form-manrope are affected. Panels, tabs, tables,
  and OG stay on Inter / Fraunces.

  Contrast: input bg is bumped from --surf2 to a darker variant so the
  fields read more clearly against the cream modal surface (the boss
  reported low contrast at the original tone).
  ════════════════════════════════════════════════════════════════════ */
.form-manrope {
  font-family: var(--font-form);
}

/* Apply Manrope to every typing surface inside the form. */
.form-manrope .fld-input,
.form-manrope .fld-textarea,
.form-manrope .fld-select,
.form-manrope .fld-label,
.form-manrope .fld-hint,
.form-manrope .li-c-desc,
.form-manrope .li-c-num,
.form-manrope .li-c-qty,
.form-manrope .li-c-price,
.form-manrope .li-x-meta,
.form-manrope .li-x-collapse,
.form-manrope .li-cell-lbl,
.form-manrope .li-total,
.form-manrope .si-row,
.form-manrope .si-desc,
.form-manrope .si-note,
.form-manrope .si-row-num,
.form-manrope .time-label,
.form-manrope select,
.form-manrope textarea,
.form-manrope input,
.form-manrope button {
  font-family: var(--font-form);
}

/* ── Compact label ──────────────────────────────────────── */
.form-manrope .fld-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  margin: 0;
  line-height: 1.2;
}

/* ── Tight field-group spacing ──────────────────────────── */
.form-manrope .field-group {
  gap: 4px;
}

/* ── Compact input/textarea ─────────────────────────────── */
/* Use a slightly darker bg so fields stand out from the cream modal
   surface (better contrast). 16px font-size keeps iOS from zooming
   on focus while smaller padding cuts the visual height ~40%. */
.form-manrope .fld-input,
.form-manrope select.fld-input,
.form-manrope .fld-select {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  background: var(--surf3);
  border-width: 1px;
}
.form-manrope .fld-input:focus,
.form-manrope .fld-select:focus {
  background: var(--surface);
}

.form-manrope .fld-textarea {
  padding: 9px 12px;
  font-size: 14px;
  min-height: 56px;
  line-height: 1.45;
}

.form-manrope .fld-hint {
  font-size: 11px;
  font-style: italic;
  margin-top: 1px;
  line-height: 1.35;
}

/* ── Tighter form-level spacing ─────────────────────────── */
/* The default .form has gap: var(--sp-3) (12px). For the dense
   manrope variant we shrink it to ~9px so cards stack closer. */
.form-manrope.form,
.form-manrope .form-section,
form.form-manrope {
  gap: 10px;
}

/* ── Two-col rows: tighter gap inside ───────────────────── */
.form-manrope .two-col {
  gap: 10px;
}

/* ── Items list inside form: tighter ────────────────────── */
.form-manrope .li-list {
  gap: 3px;
}
.form-manrope .li-card .li-collapsed {
  padding: 7px 11px;
}
.form-manrope .li-c-desc {
  font-size: 13px;
  font-weight: 500;
}
.form-manrope .li-c-num {
  font-size: 11px;
  font-weight: 700;
}
.form-manrope .li-c-qty {
  font-size: 11px;
}
.form-manrope .li-c-price {
  font-size: 13px;
  font-weight: 700;
}

/* ── Inline labels above qty/price (inside expanded item) ── */
.form-manrope .li-numbers .li-cell-lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* ── Compact subtotal/total bars ────────────────────────── */
.form-manrope .li-subtotal {
  padding: 8px 11px;
  font-size: 12px;
}
.form-manrope .li-sub-value {
  font-size: 16px;
  font-weight: 800;
}


/* ════════════════════════════════════════════════════════════════════
  77. Line-item A1 layout (Day-60 fix35)
  ════════════════════════════════════════════════════════════════════
  The line-item card has two visual states:
   - Collapsed: a single compact row (#  ·  desc  ·  qty  ·  price)
   - Expanded: full editor (description + details + qty + price + total
     + remove button), one tap to expand.

  Tapping the collapsed row expands. Empty rows start expanded so the
  boss can immediately type. Existing rows start collapsed so a long
  list of items reads as one tight stack.

  The .li-row grid + per-cell label layout from earlier days is
  superseded by .li-numbers (a horizontal row of qty/price/total).
  Most older selectors still match — that's fine — but the visible
  layout is now driven by these rules.
  ════════════════════════════════════════════════════════════════════ */
.li-card {
  background: var(--surf2);
  border-radius: 10px;
  border: 1px solid transparent;
  margin-bottom: 6px;
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s;
}
.li-card:hover { background: var(--surf3); }
.li-card.li-card--expanded {
  background: var(--surface);
  border-color: var(--border);
}

/* Collapsed row — visible by default, hidden when expanded */
.li-collapsed {
  display: grid;
  grid-template-columns: 22px 1fr 56px 72px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-form);
}
.li-card.li-card--expanded > .li-collapsed { display: none; }

.li-c-num {
  font-family: var(--font-form);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-align: center;
}
.li-c-desc {
  font-family: var(--font-form);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.li-c-qty {
  font-family: var(--font-form);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-weight: 500;
}
.li-c-price {
  font-family: var(--font-form);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Expanded view — hidden by default, shown when expanded */
.li-x-head,
.li-x-body { display: none; }
.li-card.li-card--expanded > .li-x-head,
.li-card.li-card--expanded > .li-x-body { display: flex; }

.li-x-head {
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.li-x-meta {
  font-family: var(--font-form);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.li-x-collapse {
  font-family: var(--font-form);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.li-x-collapse:hover { background: var(--gold-bg); }

.li-x-body {
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.li-x-body .li-desc-cell { width: 100%; }
.li-x-body .li-details {
  width: 100%;
}

/* Numbers row inside expanded — qty | price | total horizontal */
.li-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.li-numbers .li-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.li-numbers .li-cell-lbl {
  font-family: var(--font-form);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.li-numbers .li-cell--total .li-total {
  font-family: var(--font-form);
  font-size: 16px;
  font-weight: 700;
  padding: 11px 14px;
  background: var(--surf2);
  border-radius: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Remove button inside expanded body */
.li-x-body .li-remove {
  align-self: flex-end;
  margin-top: 0;
}


/* ════════════════════════════════════════════════════════════════════
  78. Interactive status pill (Day-60 fix35)
  ════════════════════════════════════════════════════════════════════ */
.status-pill-int {
  display: inline-flex;
  align-items: center;
}
.status-pill--int {
  cursor: pointer;
  border: 0;
  background: var(--gold-bg, rgba(201,165,87,0.10));
}
.status-pill-caret {
  margin-left: 4px;
  font-size: 8px;
  opacity: 0.7;
}
.status-pill-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.status-pill--int-opt {
  cursor: pointer;
  border: 1px dashed var(--border);
  background: transparent;
  opacity: 0.85;
}
.status-pill--int-opt:hover {
  opacity: 1;
  background: var(--surf2);
}
.status-pill--int-current {
  cursor: default;
  border: 1px solid var(--gold);
}
.status-pill-cancel {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: var(--surf2);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-pill-cancel:hover {
  background: var(--red-soft);
  color: var(--red);
}


/* ════════════════════════════════════════════════════════════════════
  79. Form density follow-up (Day-60 fix35)
  ════════════════════════════════════════════════════════════════════
  - Keep two-col side-by-side on mobile (default .two-col collapses to
    single column at ≤540px; for the dense form we want 2-col always
    so Estimate#/Date and Markup/Deposit stay paired).
  - Compress the line-items wrapper. The .li-editor container had
    16px padding all around; we drop it to 8px so items don't sit
    inside a giant hollow card.
  - Shift the visual hierarchy so each line item card pops against
    the wrapper: wrapper stays --surf2 (mid beige), items become
    --surface (light cream). Without this contrast they read as one
    homogeneous block.
  - Style the .fld-pill select to look like an inline pill instead of
    a full-width box. Tap still opens the iOS native picker.
  ════════════════════════════════════════════════════════════════════ */

/* Always 2-col inside form-manrope, even on phones. */
.form-manrope .two-col {
  grid-template-columns: 1fr 1fr;
}

/* Tighter line-items wrapper. */
.form-manrope .li-editor {
  padding: 10px;
  border-radius: 10px;
}

/* Item cards stand out from the wrapper. */
.form-manrope .li-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.form-manrope .li-card:hover {
  background: #fff;
  border-color: var(--border);
}
.form-manrope .li-card.li-card--expanded {
  background: #fff;
  border-color: var(--gold);
}

/* Add-activity button: smaller, less margin, sits closer to items. */
.form-manrope .li-add {
  padding: 8px 12px;
  margin-top: 6px;
  margin-bottom: 8px;
  font-size: 12px;
}

/* Subtotal: tight, no big top padding. */
.form-manrope .li-subtotal {
  padding-top: 8px;
}
.form-manrope .li-sub-label {
  font-size: 11px;
}
.form-manrope .li-sub-value {
  font-size: 17px;
  font-weight: 800;
}

/* ── Pill-style existing-client picker ──────────────────── */
/* Keeps the native <select> behavior (iOS picker on tap) but renders
   as an inline pill button rather than a full-width form field. */
.form-manrope .fld-pill {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: auto;
  max-width: 100%;
  padding: 6px 30px 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--gold-bg-2);
  border: 1px solid var(--gold);
  border-radius: 999px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%),
    linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.form-manrope .fld-pill:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* ── Status field as a pill row ─────────────────────────── */
.form-manrope .fld-status-pill {
  padding: 4px 0;
}