:root {
  --ink-0:#0b0907;
  --ink-1:#12100e;
  --ink-2:#1c1915;
  --ink-3:#28241e;
  --ink-4:#362f27;
  --rule:#3a342b;
  --rule-strong:#4d453a;
  --bone-0:#fbf8f0;
  --bone-1:#ede6d7;
  --bone-2:#c4baa3;
  --bone-3:#8f8670;
  --bone-4:#645c4c;
  --brick:#b8413a;
  --brick-hi:#d45a52;
  --brick-lo:#8f2d27;
  --moss:#6b9460;
  --amber:#c8872e;
  --rust:#c85a3c;
  --slate:#7a8a9c;
}

* { box-sizing:border-box; }

body {
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(184,65,58,.08), transparent 28rem),
    var(--ink-1);
  color:var(--bone-1);
  font:14px/1.45 "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, select { font:inherit; }

.shell {
  max-width:1680px;
  margin:0 auto;
  padding:32px 24px 72px;
}

.top {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--rule);
}

.eyebrow,
.label {
  color:var(--bone-3);
  font:600 10px/1.2 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}

h1 {
  margin:8px 0 0;
  color:var(--bone-0);
  font:500 42px/1 "Fraunces", Georgia, serif;
  letter-spacing:-.025em;
}

h2 {
  margin:6px 0 0;
  color:var(--bone-0);
  font:500 26px/1.1 "Fraunces", Georgia, serif;
  letter-spacing:-.02em;
}

.sub {
  max-width:820px;
  margin-top:9px;
  color:var(--bone-2);
}

.controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

select {
  min-height:32px;
  padding:6px 10px;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--ink-2);
  color:var(--bone-1);
}

.btn {
  min-height:32px;
  padding:7px 13px;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--ink-3);
  color:var(--bone-2);
  cursor:pointer;
  transition:background .18s cubic-bezier(.2,0,0,1), color .18s cubic-bezier(.2,0,0,1);
}

.btn:hover { color:var(--bone-0); border-color:var(--rule-strong); }

.btn.brick {
  background:var(--brick);
  border-color:var(--brick);
  color:var(--bone-0);
  font-weight:600;
}

.btn.brick:hover { background:var(--brick-hi); border-color:var(--brick-hi); }
.btn.brick:active { background:var(--brick-lo); }
.btn[disabled] { opacity:.55; cursor:progress; }

.stamp {
  flex-basis:100%;
  text-align:right;
  color:var(--bone-3);
  font:500 11px/1.3 "Geist Mono", ui-monospace, Menlo, monospace;
}

.stamp .stale { color:var(--amber); }

.banner {
  margin-top:14px;
  padding:10px 14px;
  border:1px solid var(--rule);
  border-left:3px solid var(--amber);
  border-radius:2px;
  background:var(--ink-2);
  color:var(--bone-2);
  font-size:13px;
}

.banner.error { border-left-color:var(--rust); }

.panel {
  margin-top:22px;
  padding:16px 18px 18px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--ink-2);
}

.panel-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:12px;
}

.legend {
  display:flex;
  gap:14px;
  color:var(--bone-3);
  font-size:12px;
}

.legend span { display:inline-flex; align-items:center; gap:6px; }

.swatch {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
}

.swatch.bone { background:var(--bone-2); }
.swatch.brick { background:var(--brick); }

.muted { color:var(--bone-3); font-size:12px; }

/* Overview strip: independent per-source mini bars, never summed. */
.overview {
  display:flex;
  align-items:flex-end;
  gap:6px;
  min-height:120px;
  overflow-x:auto;
  padding-bottom:4px;
}

.ov-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:44px;
  flex:1;
}

.ov-bars {
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:88px;
}

.ov-bar { width:11px; border-radius:2px 2px 0 0; min-height:2px; }
.ov-bar.rev { background:var(--bone-2); }
.ov-bar.ads { background:var(--brick); }

.ov-label {
  color:var(--bone-3);
  font:500 10px/1.2 "Geist Mono", ui-monospace, Menlo, monospace;
  white-space:nowrap;
}

/* Seasonality */
.season-strip {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:1px;
  border:1px solid var(--rule);
  border-radius:2px;
  overflow:hidden;
  background:var(--rule);
}

.season-cell {
  padding:9px 4px 8px;
  background:var(--ink-3);
  text-align:center;
}

.season-cell .mn {
  display:block;
  color:var(--bone-2);
  font:600 10px/1.2 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing:.08em;
}

.season-cell .ix {
  display:block;
  margin-top:4px;
  color:var(--bone-0);
  font:600 13px/1 "Geist Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric:tabular-nums;
}

.narrative {
  margin-top:14px;
  max-width:920px;
  color:var(--bone-1);
}

.narrative p { margin:0 0 10px; }

.narrative .empty-cta { color:var(--bone-3); font-style:italic; }

/* Historical timeline */
.month-row {
  margin-top:14px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ink-2);
}

.month-head {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
}

.month-name {
  min-width:118px;
  color:var(--bone-0);
  font:600 17px/1 "Fraunces", Georgia, serif;
}

.heat {
  width:34px;
  height:20px;
  border-radius:2px;
  border:1px solid var(--rule);
  text-align:center;
  color:var(--bone-1);
  font:600 10px/19px "Geist Mono", ui-monospace, Menlo, monospace;
}

.stat-group {
  display:flex;
  align-items:baseline;
  gap:7px;
  color:var(--bone-2);
  font-size:12.5px;
}

.stat-group b {
  color:var(--bone-0);
  font:600 13px/1 "Geist Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric:tabular-nums;
}

.stat-group .src {
  color:var(--bone-4);
  font:600 9px/1.2 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.month-body { padding:10px 16px 13px; display:grid; gap:9px; }

.chip-line {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}

.chip-line .label { min-width:74px; }

.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border:1px solid var(--rule-strong);
  border-radius:999px;
  font-size:12px;
  color:var(--bone-1);
  background:var(--ink-3);
}

.badge i {
  font-style:normal;
  font:600 9px/1 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.badge.ads i { color:var(--brick-hi); }
.badge.ads_copy i { color:var(--amber); }
.badge.email i { color:var(--slate); }
.badge.discount_code i { color:var(--moss); }

.chip {
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--rule);
  border-radius:999px;
  font-size:12px;
  color:var(--bone-2);
  background:var(--ink-1);
}

.chip b { color:var(--bone-1); font-weight:600; }

.none { color:var(--bone-4); font-size:12px; font-style:italic; }

/* Forward calendar — deliberately inverted: proposal, not record. */
.forward {
  margin-top:30px;
  padding:20px 20px 22px;
  border:1px dashed var(--bone-4);
  border-radius:10px;
  background:var(--ink-0);
}

.eyebrow.proposed { color:var(--brick-hi); }

.forward-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:12px;
  margin-top:14px;
}

.f-card {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 15px 15px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ink-2);
}

.f-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }

.f-month {
  color:var(--bone-3);
  font:600 10px/1.2 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.f-ads {
  color:var(--bone-0);
  font:600 24px/1 "Geist Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric:tabular-nums;
}

.f-ads span { color:var(--bone-3); font-size:10px; letter-spacing:.08em; }

.f-theme {
  color:var(--bone-0);
  font:600 15px/1.25 "Fraunces", Georgia, serif;
}

.f-promo { color:var(--bone-1); font-size:13px; }

.f-meta { display:flex; flex-wrap:wrap; gap:6px; }

.f-card details { margin-top:2px; }

.f-card summary {
  cursor:pointer;
  color:var(--bone-3);
  font-size:11.5px;
}

.f-card details p { margin:6px 0 0; color:var(--bone-2); font-size:12.5px; }

.forward .empty-state {
  margin-top:14px;
  padding:26px;
  text-align:center;
  color:var(--bone-3);
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--ink-2);
}

.notes { display:grid; gap:8px; margin-top:26px; }

.note {
  padding:9px 13px;
  border:1px solid var(--rule);
  border-left:3px solid var(--slate);
  border-radius:2px;
  background:var(--ink-2);
  color:var(--bone-2);
  font-size:12.5px;
}

.note.warn { border-left-color:var(--amber); }

.status {
  padding:26px;
  text-align:center;
  color:var(--bone-3);
}

@media (max-width: 900px) {
  .top { flex-direction:column; align-items:stretch; }
  .controls { justify-content:flex-start; }
  .stamp { text-align:left; }
  h1 { font-size:32px; }
}