/* Forecast - app-specific styles on top of kynship-ui */

/* Accent override: off-white bone. Status colors (negatives, warnings) stay
   red/amber - only the UI accent changes. */
:root {
  --grn: #EFEAE0;
  --grn-deep: #D8D0C0;
  --accent-ink: #14161b;   /* text that sits ON the accent */
  --grid-line: #262a33;
}

/* ── Light mode theme ───────────────────────────────────────────────────
   Gray-brown palette with depth and hierarchy (cooler than beige/tan).
   Applied via data-theme="light" attribute on html element. */
[data-theme="light"] {
  --bg: #f2f0ed;           /* cool gray-beige background */
  --panel: #fdfcfa;         /* soft cream white panels */
  --panel-2: #f0ede7;       /* cool light gray-tan for secondary surfaces */
  --panel-3: #e3ddd5;       /* cool medium gray-brown for tertiary surfaces */
  --line: #cdc5ba;          /* gray-taupe borders */
  --grid-line: #e3dfd9;     /* lighter grid lines */
  --fg: #1a1815;            /* cool near-black text */
  --fg-dim: #5a534c;        /* cool gray-brown dim text */
  --fg-faint: #9a9188;      /* gray-brown faint text */
  --grn: #E3DDD5;           /* cooler bone accent */
  --grn-deep: #C8BFB3;      /* deeper gray-brown accent */
  --accent-ink: #1a1815;
}

/* Update Tailwind colors for light mode */
[data-theme="light"] body {
  background: #f2f0ed;
  color: #1a1815;
}

/* Tailwind color overrides for light mode (these need to be applied globally) */
html[data-theme="light"] {
  /* This ensures Tailwind utilities also update */
  color-scheme: light;
}

/* Light mode specific overrides for dark tailwind config */
[data-theme="light"] .bg-bg { background-color: #f2f0ed !important; }
[data-theme="light"] .bg-panel { background-color: #fdfcfa !important; }
[data-theme="light"] .bg-panel2 { background-color: #f0ede7 !important; }
[data-theme="light"] .bg-panel3 { background-color: #e3ddd5 !important; }
[data-theme="light"] .border-line { border-color: #cdc5ba !important; }
[data-theme="light"] .text-fg { color: #1a1815 !important; }
[data-theme="light"] .text-fg-dim { color: #5a534c !important; }
[data-theme="light"] .text-fg-faint { color: #9a9188 !important; }

/* Light mode table hover and emphasis */
[data-theme="light"] .sheet tbody tr:hover td {
  background: rgba(90, 83, 76, .08);
}
[data-theme="light"] .sheet tbody tr:hover th.sticky-col {
  background: #e3ddd5;
}
[data-theme="light"] .sheet tr.row-emphasis td,
[data-theme="light"] .sheet tr.row-emphasis th {
  background: rgba(90, 83, 76, .08);
  background-clip: padding-box;
}
[data-theme="light"] .sheet tr.row-emphasis th.sticky-col {
  background: linear-gradient(rgba(90, 83, 76, .08), rgba(90, 83, 76, .08)), #f0ede7;
  background-clip: padding-box;
}
[data-theme="light"] .sheet tbody tr.row-emphasis:hover th.sticky-col {
  background: #e3ddd5;
}
[data-theme="light"] .sheet .neg {
  color: #b91c1c;
}

/* Light mode cell inputs */
[data-theme="light"] .cell-in-grid:hover {
  background: rgba(90, 83, 76, .08);
}

/* Light mode buttons and UI elements */
[data-theme="light"] .btn-accent {
  background: var(--grn);
  color: var(--accent-ink);
  box-shadow: 0 2px 12px rgba(227, 221, 213, .24);
}
[data-theme="light"] .btn-accent:hover {
  background: #D5CEC5;
  color: var(--accent-ink);
}

/* Light mode stepper buttons */
[data-theme="light"] .stepper:hover {
  color: var(--fg);
  border-color: #C8BFB3;
}

/* Light mode tabbar */
[data-theme="light"] .tabbar-item:hover {
  color: var(--fg);
  background: rgba(90, 83, 76, .06);
}

/* Light mode progress fill */
[data-theme="light"] .progress-fill {
  background: #C8BFB3;
}

/* Light mode theme toggle button */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
  color: var(--fg-dim);
}
#theme-toggle:hover {
  color: var(--fg);
  background: var(--panel);
}
[data-theme="light"] #theme-toggle:hover {
  background: rgba(90, 83, 76, .08);
}

/* ── Header (light and dark) ────────────────────────────────────────────
   Solid background, proper logo visibility, readable nav pills. */

/* Header background */
.header-bg {
  background: var(--bg);
}

/* Logo visibility fix: invert logo in light mode so it's visible */
[data-theme="light"] .logo-wrapper svg {
  filter: invert(1) hue-rotate(180deg) brightness(0.3);
}

/* Nav pill states */
.nav-pill-active {
  background: var(--panel-3) !important;
  color: var(--fg) !important;
  font-weight: 500;
}

.nav-pill-inactive {
  color: var(--fg-dim) !important;
}

.nav-pill-inactive:hover {
  color: var(--fg) !important;
  background: var(--panel-2) !important;
}

::selection { background: rgba(227, 221, 213, .28); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(227, 221, 213, .16); }
#progress { box-shadow: 0 0 8px rgba(227, 221, 213, .5); }

/* kynship-ui's accent button is a green gradient with dark ink; off-white
   needs the same dark ink but a solid fill (a gradient→solid hover flashes). */
.btn-accent {
  background: var(--grn);
  color: var(--accent-ink);
  box-shadow: 0 2px 12px rgba(239, 234, 224, .18);
}
.btn-accent:hover { filter: none; background: #fff; color: var(--accent-ink); }

/* ── Spreadsheet grid ───────────────────────────────────────────────────
   Months run across as columns and metrics down as rows, matching the sheet
   these replace. The wrapper scrolls horizontally on its own so the page body
   never does, and the metric column stays pinned while you scan across. */
.sheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.sheet {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-2);
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet tbody th,
.sheet thead th.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--fg-dim);
  background: var(--panel-2);
  padding: 7px 14px;
  border-right: 1px solid var(--line);
  min-width: 190px;
}
.sheet thead th.sticky-col { z-index: 4; color: var(--fg-faint); font-size: 11px; }
/* The 190px label column suits metric names ("Customer File (start)"); a table
   whose first column is just a month needs far less. */
.sheet--month-labels tbody th,
.sheet--month-labels thead th.sticky-col { min-width: 104px; }
.sheet tbody td {
  padding: 7px 12px;
  text-align: right;
  border-top: 1px solid var(--grid-line);
  min-width: 104px;
}
.sheet tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.sheet tbody tr:hover th.sticky-col { background: var(--panel-3); }
.sheet .r { text-align: right; }
.sheet .neg { color: #f87171; }

/* Totals-style rows get a heavier rule and brighter ink, like a sheet's
   subtotal bands. */
.sheet tr.row-emphasis td,
.sheet tr.row-emphasis th {
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-weight: 600;
  background: rgba(239, 234, 224, .035);
  background-clip: padding-box;
}
/* The pinned label cell must stay opaque: a see-through tint let the cells
   scrolling or highlighting beneath it bleed into the summary band. The tint
   is layered over the solid panel instead. */
.sheet tr.row-emphasis th.sticky-col {
  background: linear-gradient(rgba(239, 234, 224, .035), rgba(239, 234, 224, .035)), var(--panel-2);
  background-clip: padding-box;
}
.sheet tbody tr.row-emphasis:hover th.sticky-col { background: var(--panel-3); }

/* Forecast table: columns size to their content instead of a fixed minimum,
   and long metric names wrap in the header rather than widening the column. */
.sheet--fit tbody td { min-width: 0; padding: 7px 10px; }
.sheet--fit thead th { white-space: normal; vertical-align: bottom; padding: 9px 10px; }
.sheet--fit thead th:not(.sticky-col) { min-width: 64px; }
.sheet--fit .col-emphasis { color: var(--fg); font-weight: 600; }
.sheet--fit thead th.col-child { color: var(--fg-dim); font-weight: 500; }
.sheet--fit tbody td.col-child { color: var(--fg-dim); }
.sheet--fit tr.row-total td { border-top: 1px solid var(--line); }
/* Section row above the column headers, with a thin rule where each section
   starts. */
.sheet--fit thead tr.col-groups th.col-group {
  text-align: center; padding: 7px 10px; border-bottom: 1px solid var(--grid-line);
  font-size: 10.5px; letter-spacing: .08em; }
.sheet--fit thead tr.col-groups th.sticky-col { vertical-align: bottom; }
.sheet--fit .sec-start { border-left: 1px solid var(--line); }
/* A headline that folds detail away is one button: the caret sits left of
   the label and the whole header is the hit area. Open, the caret turns
   down and the label brightens; detail opens to its right. */
.col-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
.col-toggle:hover { background: rgba(255, 255, 255, .05); color: var(--fg); }
.col-caret {
  display: inline-block;
  flex: none;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-faint);
  transition: transform .3s ease-in-out, color .3s ease-in-out;
}
.col-toggle:hover .col-caret { color: var(--fg); }
.col-toggle[aria-expanded="true"] { color: var(--fg); font-weight: 600; }
.col-toggle[aria-expanded="true"] .col-caret { color: var(--fg); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .col-toggle, .col-caret { transition: none; }
}
/* Detail columns sit on a darker band with smaller, sentence-case headers. */
.sheet--fit thead th.col-child {
  text-transform: none; letter-spacing: 0; font-size: 10.5px;
  background: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)), var(--panel-2); }
.sheet--fit tbody td.col-child { background: rgba(0, 0, 0, .14); }

/* Detail columns ease open and closed like the Scorecard's. The cell's own
   box stays static (no padding or minimum width) and everything that moves
   lives on the inner block (.cw), so every row of a column shrinks as one.
   The text fades through colour rather than opacity, which would promote
   each cell to its own compositor layer. While animating, labels hold one
   line so the header row does not rewrap at every step. */
.sheet--fit thead th.col-child, .sheet--fit tbody td.col-child {
  padding-left: 0; padding-right: 0; min-width: 0; }
.sheet--fit .col-child .cw { display: block; box-sizing: border-box; padding: 0 10px;
  overflow: hidden;
  transition: max-width .3s ease-in-out, min-width .3s ease-in-out,
              padding .3s ease-in-out, color .3s ease-in-out; }
.sheet--fit thead th.col-child .cw { min-width: 64px; }
.sheet--fit .col-child.col-anim .cw { white-space: nowrap; }
.sheet--fit .col-child.collapsing .cw, .sheet--fit .col-child.pre-open .cw {
  min-width: 0; padding-left: 0; padding-right: 0; color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .sheet--fit .col-child .cw { transition: none; }
}

/* ── Forecast table (Eli's redesign) ──────────────────────────────────
   Left-aligned headers and values on tabular figures. Total Revenue and
   Profit $ lead in bright bold with a fill bar (share of the column's
   largest month) and a change-on-prior-month chip; flat inputs recede.
   Zebra rows, a heavier rule at each quarter, and a tinted Totals band. */
:root {
  --fc-rev: #5b8def;
  --fc-profit: #4ade80;
  --fc-down: #f87171;
  --fc-track: rgba(255, 255, 255, .08);
  --fc-zebra: rgba(255, 255, 255, .018);
  --fc-actual: rgba(255, 255, 255, .035);
}
[data-theme="light"] {
  --fc-rev: #2f63c9;
  --fc-profit: #15803d;
  --fc-down: #b91c1c;
  --fc-track: rgba(90, 83, 76, .14);
  --fc-zebra: rgba(90, 83, 76, .04);
  --fc-actual: rgba(255, 255, 255, .55);
}
.sheet--forecast thead th:not(.col-group),
.sheet--forecast tbody td { text-align: left; font-variant-numeric: tabular-nums; }
.sheet--forecast tbody tr.zebra td {
  background-image: linear-gradient(var(--fc-zebra), var(--fc-zebra)); }
.sheet--forecast tbody tr.q-start td,
.sheet--forecast tbody tr.q-start th { border-top: 1px solid var(--line); }
.sheet--forecast tbody td.col-dim { color: var(--fg-dim); font-weight: 400; }
.sheet--forecast tbody td.pos { color: var(--fc-profit); }
.sheet--forecast tbody td.neg { color: var(--fc-down); }
.fc-cell { display: inline-flex; align-items: center; gap: 8px; }
.fc-bar { flex: none; width: 44px; height: 4px; border-radius: 2px;
  background: var(--fc-track); overflow: hidden; }
.fc-bar.is-empty { visibility: hidden; }
.fc-bar i { display: block; height: 100%; border-radius: 2px;
  transition: width .3s ease-in-out; }
.fc-cell--total_rev .fc-bar i { background: var(--fc-rev); }
.fc-cell--profit .fc-bar i { background: var(--fc-profit); }
.fc-mom { min-width: 30px; font-size: 10.5px; font-weight: 500; color: var(--fg-faint); }
.fc-up, .fc-mom.fc-up { color: var(--fc-profit); }
.fc-down, .fc-mom.fc-down { color: var(--fc-down); }
@media (prefers-reduced-motion: reduce) {
  .fc-bar i { transition: none; }
}
.sheet--forecast tr.row-total td,
.sheet--forecast tr.row-total th { border-top: 2px solid var(--line);
  padding-top: 10px; padding-bottom: 10px; }
.sheet--forecast tr.row-total td { background: rgba(91, 141, 239, .06); }
[data-theme="light"] .sheet--forecast tr.row-total td { background: rgba(47, 99, 201, .06); }
.sheet--forecast tr.row-total td.tot-rev { color: var(--fc-rev); }
.sheet--forecast tr.row-total td.tot-profit { color: var(--fc-profit); }
.sheet--forecast tr.row-total td.tot-profit.neg { color: var(--fc-down); }
.fc-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 4px 16px; margin-bottom: 8px; font-size: 11px; color: var(--fg-faint); }
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-legend b { font-weight: 500; }
.fc-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.fc-swatch--rev { background: var(--fc-rev); }
.fc-swatch--profit { background: var(--fc-profit); }
.fc-swatch--child { background: rgba(0, 0, 0, .14); border: 1px solid var(--line); }
.fc-swatch--actual { background: var(--fc-actual); border: 1px solid var(--line); }
.fc-tablebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-bottom: 8px; }
.fc-tablebar .fc-legend { flex: 1; margin-bottom: 0; }

/* Actuals above the forecast: the toggle, then the measured months on a
   lighter band with an ACTUAL tag and gray bars, and a divider where the
   forecast begins. Table rows cannot animate their own height, so each
   cell's inner block (.rh) eases its max-height and vertical padding, the
   same 0.3s ease-in-out as the columns (forecast.js). */
.fc-actuals-toggle { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); font-size: 12px; color: var(--fg-faint);
  transition: border-color .3s ease-in-out; }
.fc-actuals-toggle:hover { border-color: var(--fg-faint); }
.fc-actuals-label { color: var(--fg); font-weight: 600; }
.fc-chev { width: 12px; height: 12px; color: var(--fg);
  transition: transform .3s ease-in-out; }
.fc-actuals-toggle[aria-expanded="true"] .fc-chev { transform: rotate(180deg); }
.sheet--forecast tbody tr.act-row td,
.sheet--forecast tbody tr.act-row th { padding-top: 0; padding-bottom: 0;
  background-image: linear-gradient(var(--fc-actual), var(--fc-actual));
  transition: border-color .3s ease-in-out; }
.sheet--forecast tr.act-row .rh { display: block; box-sizing: border-box; padding: 7px 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out, padding .3s ease-in-out, color .3s ease-in-out; }
.sheet--forecast tr.act-row.row-pre .rh,
.sheet--forecast tr.act-row.row-closing .rh { padding-top: 0; padding-bottom: 0;
  color: transparent; }
.sheet--forecast tr.act-row.row-pre td, .sheet--forecast tr.act-row.row-pre th,
.sheet--forecast tr.act-row.row-closing td,
.sheet--forecast tr.act-row.row-closing th { border-color: transparent; }
.sheet--forecast tr.act-row.row-anim .rh { white-space: nowrap; }
.sheet--forecast tr.act-row .fc-bar i { background: var(--fg-faint); }
.act-tag { display: inline-block; margin-left: 8px; padding: 0 4px;
  border: 1px solid var(--line); border-radius: 3px; font-size: 9px;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  line-height: 14px; color: var(--fg-faint); vertical-align: 1px; }
.sheet--forecast tr.act-row.row-pre .act-tag,
.sheet--forecast tr.act-row.row-closing .act-tag { border-color: transparent; color: transparent; }
.act-tag { transition: color .3s ease-in-out, border-color .3s ease-in-out; }
.sheet--forecast tr.act-divider th .rh { font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint);
  white-space: nowrap; padding: 5px 0; }
.sheet--forecast tr.act-divider td,
.sheet--forecast tr.act-divider th { border-top: 1px solid var(--line);
  background-image: none; }
.sheet--forecast tbody tr.act-divider + tr td,
.sheet--forecast tbody tr.act-divider + tr th { border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .fc-actuals-toggle, .fc-chev, .act-tag,
  .sheet--forecast tr.act-row td, .sheet--forecast tr.act-row th,
  .sheet--forecast tr.act-row .rh { transition: none; }
}

/* Cell that just changed value after a recompute - brief accent wash so an
   edit's downstream effect is visible rather than silent. */
@keyframes cell-flash {
  from { background: rgba(239, 234, 224, .16); }
  to   { background: transparent; }
}
.sheet td.flash { animation: cell-flash .5s ease-out; }

/* ── Editable cells ─────────────────────────────────────────────────── */
.cell-input {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  color: var(--fg);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cell-input:focus { outline: none; border-color: var(--grn); }
/* Inside the grid the input fills the cell so the row still reads as a row. */
.cell-in-grid {
  width: 100%;
  min-width: 122px;   /* fits a 6-figure plan value without clipping */
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 7px 12px;
}
.cell-in-grid:hover { background: rgba(255, 255, 255, .04); }
.cell-in-grid:focus { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--grn); }
/* Strip the spinners - they steal width in a dense grid. */
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-input[type=number] { -moz-appearance: textfield; }

.cell-input.saving { opacity: .55; }
.cell-input.saved { box-shadow: inset 0 0 0 2px var(--grn); }
.cell-input.error { box-shadow: inset 0 0 0 2px #f87171; }

/* ── +/- steppers ───────────────────────────────────────────────────────
   Nudging an assumption is the common move; typing an exact figure is the
   rare one. Buttons stay quiet until the card is hovered so a screen of ten
   inputs does not read as twenty buttons. */
.stepper {
  flex: 0 0 auto;
  width: 22px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--fg-faint);
  font-size: 13px; line-height: 1; font-weight: 600;
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
  user-select: none;
}
.rounded-xl:hover > .flex > .stepper { opacity: 1; }
.stepper:hover { color: var(--fg); border-color: var(--grn); }
.stepper:active { transform: scale(.94); }
.stepper:focus-visible { opacity: 1; outline: 1px solid var(--grn); }
/* Assumption tiles are packed about twice as dense as the headline cards, so
   the inputs and steppers shrink with them. */
.assume-grid .cell-input { padding: 3px 5px; font-size: 12px; }
.assume-grid .stepper { width: 18px; height: 22px; font-size: 12px; }

/* An assumption moved off the base forecast: tint the tile amber so edited
   figures stand out from seeded ones, and surface its reset button. */
.assume-tile { transition: background-color .15s ease, border-color .15s ease; }
.assume-tile.modified {
  border-color: rgba(245, 158, 11, .7);
  background-color: rgba(245, 158, 11, .10);
}
.tile-reset {
  display: none;
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid rgba(245, 158, 11, .7);
  border-radius: 6px;
  background: rgba(245, 158, 11, .18);
  color: var(--fg);
  font-size: 10px; line-height: 16px; font-weight: 600;
  cursor: pointer;
}
.assume-tile.modified .tile-reset { display: inline-block; }
.tile-reset:hover { background: rgba(245, 158, 11, .32); }
.tile-reset:focus-visible { outline: 1px solid var(--grn); }

/* ── Hover explanations ─────────────────────────────────────────────────
   No visible "?" marker: the term itself is the target. `cursor: help` plus a
   faint underline that only appears on hover keeps the grid clean while still
   hinting that there is something to read. */
.tip { cursor: help; }
.tip:hover { text-decoration: underline dotted var(--fg-faint); text-underline-offset: 3px; }

/* The bubble is appended to <body>, not the cell — a tooltip inside
   .sheet-wrap would be clipped by its horizontal scroll. */
#tooltip {
  position: fixed;
  z-index: 200;
  max-width: 310px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
#tooltip.visible { opacity: 1; transform: translateY(0); }

/* ── Provenance badges ──────────────────────────────────────────────────
   Every setting says where it came from, so a placeholder is never mistaken
   for evidence. */
.src {
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}
.src-measured { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
.src-manual   { background: rgba(34,211,238,.12); color: #22d3ee; border: 1px solid rgba(34,211,238,.3); }
.src-default  { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }

textarea.cell-input { text-align: left; width: 100%; min-height: 90px; resize: vertical; }

/* ── Section tabs ───────────────────────────────────────────────────────
   Every part of a forecast workbook is a tab here. The bar never scrolls
   sideways (a trackpad swipe across it also scrolled the page): tabs are
   sized to fit one row on a laptop, and wrap on narrower windows. */
.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.tabbar-item {
  flex: 0 0 auto;
  padding: 7px 7px;
  font-size: 11px;
  color: var(--fg-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.tabbar-item:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.tabbar-item.active {
  color: var(--fg);
  border-bottom-color: var(--grn);
  font-weight: 600;
}
/* Second row under a tab that has views of its own (Campaigns). */
.tabbar-sub { margin-top: 10px; }
.tabbar-sub .tabbar-item { padding: 6px 7px; font-size: 11px; }
.tabbar-group {
  margin-right: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-faint);
}

/* ── Reload takeover ────────────────────────────────────────────────────
   A modal, not an inline spinner: while the re-ingest runs the figures
   underneath are being rewritten, so editing them would be misleading. */
.overlay {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9, 11, 14, .78);
  backdrop-filter: blur(3px);
  animation: overlay-in .16s ease-out;
}
@keyframes overlay-in { from { opacity: 0 } to { opacity: 1 } }
.overlay[hidden] { display: none; }
.overlay-card {
  width: 100%; max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.progress-track {
  height: 6px; border-radius: 999px;
  background: var(--panel-3);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: var(--grn);
  transition: width .35s ease;
}
/* Steps that report no internal progress get a moving stripe rather than a bar
   frozen at one value, so "slow" never reads as "stuck". */
.progress-fill.indeterminate {
  background-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,0) 100%);
  background-size: 200% 100%;
  animation: stripe 1.1s linear infinite;
}
@keyframes stripe { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.reload-steps { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.reload-steps li {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0;
  color: var(--fg-faint);
  transition: color .15s ease;
}
.reload-steps li .dot {
  flex: 0 0 auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
}
.reload-steps li.active { color: var(--fg); }
.reload-steps li.active .dot { border-color: var(--grn); }
.reload-steps li.done { color: var(--fg-dim); }
.reload-steps li.done .dot {
  border-color: var(--grn); background: var(--grn); color: var(--accent-ink);
}
.reload-steps li.failed .dot { border-color: #f87171; color: #f87171; }
.reload-steps li.failed { color: #f87171; }

/* ── Report preview theming ─────────────────────────────────────────────
   The composer preview mirrors the published page's theme. The sheet styles
   read CSS variables, so scoping new values under the preview retints the
   tables; the Tailwind token utilities are fixed colors, so the handful the
   preview uses are overridden here (the #id keeps specificity above the
   CDN-generated classes). The app's light mode forces those utilities with
   !important, so the preview repoints them at its own variables the same
   way; otherwise a dark report theme keeps the app's light surfaces. */
#rep-preview .bg-panel { background-color: var(--panel) !important; }
#rep-preview .bg-panel2 { background-color: var(--panel-2) !important; }
#rep-preview .bg-panel3 { background-color: var(--panel-3) !important; }
#rep-preview .border-line { border-color: var(--line) !important; }
#rep-preview .text-fg { color: var(--fg) !important; }
#rep-preview .text-fg-dim { color: var(--fg-dim) !important; }
#rep-preview .text-fg-faint { color: var(--fg-faint) !important; }
#rep-preview .sheet tbody tr:hover th.sticky-col { background: var(--panel-3); }

#rep-preview.preview-light {
  --panel: #fdfcfa; --panel-2: #f0ede7; --panel-3: #e3ddd5;
  --line: #cdc5ba; --grid-line: #e3dfd9;
  --fg: #1a1815; --fg-dim: #5a534c; --fg-faint: #9a9188;
  background: #f2f0ed;
  color: #1a1815;
}
#rep-preview.preview-light .text-emerald-400 { color: #047857; }
#rep-preview.preview-light .text-red-400 { color: #b91c1c; }
#rep-preview.preview-light .sheet .neg { color: #b91c1c; }
#rep-preview.preview-light .sheet tbody tr:hover td { background: rgba(90, 83, 76, .08); }
#rep-preview.preview-light .sheet tr.row-emphasis td,
#rep-preview.preview-light .sheet tr.row-emphasis th { background: rgba(90, 83, 76, .08); }

/* Dark preview: set explicitly so it holds when the app is in light mode. */
#rep-preview.preview-dark {
  --panel: #1a1d24; --panel-2: #22262f; --panel-3: #2a2f3a;
  --line: #2d3139; --grid-line: #262a33;
  --fg: #f3f4f6; --fg-dim: #9aa1ac; --fg-faint: #5f6672;
  background: #0f1115;
  color: #f3f4f6;
}
#rep-preview.preview-dark .sheet .neg { color: #f87171; }
#rep-preview.preview-dark .sheet tbody tr:hover td,
#rep-preview.preview-mdq-sunrise .sheet tbody tr:hover td { background: rgba(255, 255, 255, .025); }
#rep-preview.preview-dark .sheet tr.row-emphasis td,
#rep-preview.preview-dark .sheet tr.row-emphasis th,
#rep-preview.preview-mdq-sunrise .sheet tr.row-emphasis td,
#rep-preview.preview-mdq-sunrise .sheet tr.row-emphasis th { background: rgba(239, 234, 224, .035); }

/* The active theme button in the composer */
.rep-theme-btn.active { background: var(--grn); color: var(--accent-ink); }

/* Chart containers and the per-chart format switcher */
.kchart { position: relative; }
.kchart-alt {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  font-size: 11px; padding: 2px 6px; border-radius: 8px;
  background: var(--panel-2); color: var(--fg-dim);
  border: 1px solid var(--line); cursor: pointer; opacity: .55;
  transition: opacity .15s;
}
.kchart:hover .kchart-alt, .kchart-alt:focus { opacity: 1; }
@media print { .kchart-alt { display: none; } }

/* CA Sunset preview: warm light page, brand browns plus black on white. */
#rep-preview.preview-ca-sunset {
  --panel: #ffffff; --panel-2: #FCF1DC; --panel-3: #F5E3C2;
  --line: #EBD3A9; --grid-line: #F0DDB9;
  --fg: #000000; --fg-dim: #884A39; --fg-faint: #C38154;
  background: #F9E0BB;
  color: #000000;
}
#rep-preview.preview-ca-sunset .text-emerald-400 { color: #5C7A39; }
#rep-preview.preview-ca-sunset .text-red-400 { color: #8B2500; }
#rep-preview.preview-ca-sunset .sheet .neg { color: #8B2500; }
#rep-preview.preview-ca-sunset .sheet tbody tr:hover td { background: rgba(0, 0, 0, .03); }
#rep-preview.preview-ca-sunset .sheet tr.row-emphasis td,
#rep-preview.preview-ca-sunset .sheet tr.row-emphasis th { background: rgba(136, 74, 57, .07); }

/* MDQ Sunrise preview: cool slate page, sand and sea on deep blue-grey. */
#rep-preview.preview-mdq-sunrise {
  --panel: #2C3947; --panel-2: #34455A; --panel-3: #3D506A;
  --line: #3A4C5F; --grid-line: #384B5E;
  --fg: #E8EDF2; --fg-dim: #C2A56D; --fg-faint: #547A95;
  background: #1F2935;
  color: #E8EDF2;
}
#rep-preview.preview-mdq-sunrise .text-emerald-400 { color: #C2A56D; }
#rep-preview.preview-mdq-sunrise .text-red-400 { color: #D98E73; }
#rep-preview.preview-mdq-sunrise .sheet .neg { color: #D98E73; }

/* Chat thinking indicator: three dots breathing while the answer is fetched */
.chat-wait { display: inline-flex; align-items: center; gap: 8px; }
.chat-wait .dots { display: inline-flex; gap: 4px; }
.chat-wait .dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-faint);
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-wait .dots span:nth-child(2) { animation-delay: .15s; }
.chat-wait .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Example-question pills under the chat input */
.chat-pill {
  font-size: 11px; line-height: 1.3; text-align: left;
  padding: 4px 10px; border-radius: 9999px;
  background: var(--panel); color: var(--fg-faint);
  border: 1px solid var(--line);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.chat-pill:hover { color: var(--fg); border-color: var(--fg-faint); }

/* Drop placeholder while dragging a report block: a colored slot that makes
   room at the target position instead of shuffling items under the cursor. */
.rep-drop-slot {
  border: 1.5px dashed var(--grn);
  border-radius: 10px;
  background: color-mix(in srgb, var(--grn) 12%, transparent);
  list-style: none;
}

/* Composer lazy loading: placeholder layout (the ring is kynship-ui's
   shared .spinner). */
.rep-placeholder {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 140px;
  color: var(--fg-faint); font-size: 12px;
}

/* ── Date picker (flatpickr) customization ──────────────────────────────
   Minimal overrides - use flatpickr's default colors for better contrast */
.flatpickr-calendar {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}