/* ─── Harvst visual theme ─────────────────────────────────────────────────────
   Loaded last, so it refines the tokens each page already defines rather than
   requiring 16 files to be rewritten.

   Scene: a solo agent at a kitchen table on a laptop, morning daylight, working
   through overnight replies before showings start. Bright room, glanceable
   surface, long session. That forces light, warm and low-glare, not a dark
   "tool" theme.

   Strategy: restrained. Warm paper ground, navy carries structure, and the
   three accents (sand, sage, amber) are reserved for meaning, never decoration.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Ground. Paper, not white. Pure #fff is a light source, not a surface. */
  --canvas: oklch(97.4% 0.006 85);
  --linen:  oklch(95.2% 0.008 85);
  --card:   oklch(99.1% 0.003 85);

  /* Structure. */
  --navy:    oklch(31% 0.055 264);
  --navy-8:  oklch(31% 0.055 264 / 0.07);
  --navy-14: oklch(31% 0.055 264 / 0.13);

  /* Accents, each with one job.
     sand = neutral emphasis, sage = healthy, amber = needs you, terra = wrong. */
  --sand:     oklch(78% 0.045 82);
  --sand-dim: oklch(78% 0.045 82 / 0.20);
  --sage:     oklch(52% 0.052 148);
  --sage-dim: oklch(52% 0.052 148 / 0.13);
  --amber:    oklch(56.5% 0.128 62);   /* 4.6:1 on card, passes AA for pill text */
  --amber-dim:oklch(56.5% 0.128 62 / 0.11);
  --terra:    oklch(56% 0.135 30);
  --terra-dim:oklch(56% 0.135 30 / 0.11);

  /* Text, tinted toward the brand hue so nothing reads as dead grey. */
  --ink: oklch(23% 0.014 264);
  --t2:  oklch(48% 0.012 264);
  --t3:  oklch(56% 0.010 264);   /* 4.5:1, the micro-labels are small and must pass AA */

  /* Hairlines. 1px at a light value beats 0.5px, which browsers round
     inconsistently and which disappears entirely on non-retina screens. */
  --border:    oklch(31% 0.055 264 / 0.11);
  --border-md: oklch(31% 0.055 264 / 0.19);

  /* Depth. Warm-tinted, never neutral grey, and never more than two steps. */
  --lift-1: 0 1px 2px oklch(31% 0.055 264 / 0.05);
  --lift-2: 0 4px 16px oklch(31% 0.055 264 / 0.07), 0 1px 2px oklch(31% 0.055 264 / 0.05);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
}

/* Hairlines at a real pixel. */
.sidebar, .head, .panel, .stat, .card,
.mobile-bar, .table-wrap, .box { border-width: 1px; }
.sidebar { border-right-width: 1px; }
.head, .mobile-bar { border-bottom-width: 1px; }

/* ── Typography ───────────────────────────────────────────────────────────────
   The display face was carrying page titles at 22px while stat numbers sat at
   26px, which inverts the hierarchy. Titles lead, numbers follow.            */

.head h1 {
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.018em;
}
.head p { font-size: 12.5px; color: var(--t2); }

/* Tabular figures stop numbers from jittering as they refresh. */
.stat-val, .card-val, .kpi-val, td, .bar-ct, .credit-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Uppercase micro-labels need air between letters to stay legible. */
.stat-lbl, .sec-label, .s-sec, .card-label {
  letter-spacing: 0.085em;
}

/* ── Breaking the four-identical-cards grid ───────────────────────────────────
   A row of same-sized tiles says every number matters equally, which is never
   true. The first metric is the one the agent opens the page for, so it leads
   and the rest support it.                                                    */

@media (min-width: 860px) {
  .stat-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .stat-grid > .stat:first-child {
    padding: 20px 22px;
    background:
      radial-gradient(120% 140% at 0% 0%, var(--sand-dim), transparent 62%),
      var(--card);
  }
  .stat-grid > .stat:first-child .stat-val { font-size: 40px; letter-spacing: -0.03em; }
  .stat-grid > .stat:first-child .stat-ico { width: 34px; height: 34px; font-size: 16px; }
}

/* Varied rhythm: the supporting tiles sit tighter than the lead. */
.stat { padding: 15px 17px; box-shadow: var(--lift-1); }
.stat-val { font-size: 28px; }

/* Interactive tiles should say so. */
.stat[onclick] {
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.stat[onclick]:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
  border-color: var(--navy-14);
}
.stat[onclick]:active { transform: translateY(0); transition-duration: .08s; }

/* ── Panels and tables ────────────────────────────────────────────────────── */
.panel { box-shadow: var(--lift-1); }

/* Sticky headers keep column meaning while scrolling a long list. */
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--linen);
  border-bottom: 1px solid var(--border);
}
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover td { background: var(--navy-8); }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.s-item { transition: color .14s var(--ease), background .14s var(--ease); border-radius: 0 8px 8px 0; margin-right: 10px; }
.s-item:hover { background: var(--navy-8); }
.s-item.active { background: var(--navy-8); }
.s-logo-word { letter-spacing: -0.03em; }

/* ── Controls ─────────────────────────────────────────────────────────────── */
button, .btn, input, select, textarea { transition: all .16s var(--ease); }
.btn-primary:hover:not(:disabled), .btn-navy:hover:not(:disabled) {
  box-shadow: var(--lift-2);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled), .btn-navy:active:not(:disabled) {
  transform: translateY(0); transition-duration: .07s;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--navy-8);
}

/* Pills read as status, so give them a quiet edge instead of a flat fill. */
.stat-pill, .chip, .tag {
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.pill-up   { background: var(--sage-dim);  color: var(--sage);  border-color: oklch(52% 0.052 148 / 0.25); }
.pill-warn { background: var(--amber-dim); color: var(--amber); border-color: oklch(56.5% 0.128 62 / 0.25); }

/* ── Toasts: full border, no side stripe ──────────────────────────────────── */
.harvst-toast {
  border: 1px solid var(--border-md);
  border-left-width: 1px;
  box-shadow: var(--lift-2);
}
.harvst-toast.ok  { background: var(--card); border-color: oklch(52% 0.052 148 / 0.32); }
.harvst-toast.err { background: var(--card); border-color: oklch(56% 0.135 30 / 0.32); }

@media (prefers-reduced-motion: reduce) {
  .stat[onclick]:hover, .btn-primary:hover, .btn-navy:hover { transform: none; }
}