/* =====================================================================================================
   forecast.css: the cash-flow forecast demo (/toolbox/forecast/ and /es/herramientas/pronostico/), a room on Floor 3.
   Page-only rules, every selector scoped under body[data-page="forecast"]. Tokens come from site.css; the
   chart's lines use the brand and ink tokens, gold stays decoration. No 100vw, no animation, no inline styles:
   the SVG is built by /assets/pages/forecast.js and styled only through the classes below.
   ===================================================================================================== */

/* -- Page head ---------------------------------------------------------------------------------------- */
body[data-page="forecast"] .fc-head .scene__grid { align-items: end; }
body[data-page="forecast"] .fc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-block-start: var(--s-4);
  color: var(--ink-2);
  font-size: var(--t-callout);
}
body[data-page="forecast"] .fc-status .badge-construction { flex: 0 0 auto; }
body[data-page="forecast"] .fc-status span:not(.badge-construction) { flex: 1 1 18rem; }

/* -- The demo stage ------------------------------------------------------------------------------------ */
body[data-page="forecast"] .fc-stage { display: grid; gap: var(--s-5); margin-block-start: var(--s-4); }
body[data-page="forecast"] .fc-form {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: var(--s-4);
  background: var(--noir-1);
  border: 1px solid var(--deco-gold-line);
  border-radius: var(--radius-1);
}
@media (min-width: 40rem) {
  body[data-page="forecast"] .fc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  body[data-page="forecast"] .fc-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body[data-page="forecast"] .fc-form__title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body[data-page="forecast"] .fc-field { display: grid; gap: var(--s-2); min-width: 0; margin: 0; }
body[data-page="forecast"] .fc-field__label { font-size: var(--t-subhead); font-weight: 600; color: var(--ink-2); }
body[data-page="forecast"] .fc-field__control {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  background: var(--noir-0);
  border: 1px solid var(--mark-2);          /* a meaningful boundary uses mark-2 (3:1 or more) */
  border-radius: var(--radius-2);
}
body[data-page="forecast"] .fc-field__control:focus-within { border-color: var(--brand-accent); }
body[data-page="forecast"] .fc-field__unit {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.8em 0.2em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
body[data-page="forecast"] .fc-field input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0.55em 0.8em 0.55em 0.4em;
  font-size: max(16px, 1rem);               /* 16 px or more: iOS never zooms the page on focus */
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-1);
  background: transparent;
  border: 0;
  border-radius: var(--radius-2);
}
body[data-page="forecast"] .fc-field input[type="number"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
body[data-page="forecast"] .fc-field__hint { margin: 0; font-size: var(--t-footnote); color: var(--ink-3); }
body[data-page="forecast"] .fc-form__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-footnote);
  color: var(--ink-3);
}
body[data-page="forecast"] .fc-loading { margin: 0; font-size: var(--t-subhead); color: var(--ink-3); }

/* -- The chart ----------------------------------------------------------------------------------------- */
body[data-page="forecast"] .fc-chart { margin: 0; }
body[data-page="forecast"] .fc-chart__box {
  padding: var(--s-2);
  background: var(--surface-instrument);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2);
  overflow: clip;
}
body[data-page="forecast"] .fc-chart__box > div { min-width: 0; }
body[data-page="forecast"] .fc-chart svg { display: block; max-width: 100%; height: auto; }
body[data-page="forecast"] .fc-chart figcaption { margin-block-start: var(--s-3); font-size: var(--t-subhead); color: var(--ink-2); }
body[data-page="forecast"] .fc-chart figcaption .sample-tag { margin-inline-end: 0.4em; }

body[data-page="forecast"] .fc-grid { stroke: var(--hairline); stroke-width: 1; }
body[data-page="forecast"] .fc-tick { fill: var(--ink-3); font: 12px/1 var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }
body[data-page="forecast"] .fc-label { fill: var(--ink-2); font: 600 12px/1 var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }
body[data-page="forecast"] .fc-divider { stroke: var(--mark-3); stroke-width: 1; stroke-dasharray: 3 3; }
body[data-page="forecast"] .fc-band { stroke: none; }
body[data-page="forecast"] .fc-band--2 { fill: rgb(154 255 243 / 0.1); }   /* the brand teal at 10 % */
body[data-page="forecast"] .fc-band--1 { fill: rgb(154 255 243 / 0.22); }   /* the brand teal at 22 % */
body[data-page="forecast"] .fc-observed { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-linejoin: round; }
body[data-page="forecast"] .fc-dot { fill: var(--ink-1); }
body[data-page="forecast"] .fc-filtered { fill: none; stroke: var(--brand-violet); stroke-width: 1.5; stroke-linejoin: round; }
body[data-page="forecast"] .fc-mean { fill: none; stroke: var(--brand-accent); stroke-width: 2.5; stroke-dasharray: 7 4; stroke-linejoin: round; stroke-linecap: round; }
body[data-page="forecast"] .fc-floor { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 2 4; }
body[data-page="forecast"] .fc-goal { stroke: var(--brand-violet); stroke-width: 1.5; stroke-dasharray: 8 3 2 3; }

/* Legend: line style plus words, so colour is never the only cue. */
body[data-page="forecast"] .fc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-subhead);
  color: var(--ink-2);
}
body[data-page="forecast"] .fc-legend li { display: inline-flex; align-items: center; gap: 0.5em; min-height: 1.5rem; margin: 0; }
body[data-page="forecast"] .fc-swatch { display: inline-block; flex: 0 0 auto; width: 1.75rem; height: 0; border-block-start: 2px solid var(--ink-2); }
body[data-page="forecast"] .fc-swatch--observed { border-block-start-style: solid; }
body[data-page="forecast"] .fc-swatch--filtered { border-block-start-color: var(--brand-violet); }
body[data-page="forecast"] .fc-swatch--mean { border-block-start: 3px dashed var(--brand-accent); }
body[data-page="forecast"] .fc-swatch--band1,
body[data-page="forecast"] .fc-swatch--band2 { height: 0.9rem; border: 0; border-radius: 2px; background: rgb(154 255 243 / 0.22); }
body[data-page="forecast"] .fc-swatch--band2 { background: rgb(154 255 243 / 0.1); border: 1px solid rgb(154 255 243 / 0.35); }
body[data-page="forecast"] .fc-swatch--floor { border-block-start: 2px dotted var(--ink-2); }
body[data-page="forecast"] .fc-swatch--goal { border-block-start: 2px dashed var(--brand-violet); }

/* -- Readouts and tables ------------------------------------------------------------------------------- */
body[data-page="forecast"] .fc-readouts { display: grid; gap: var(--s-3) var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) {
  body[data-page="forecast"] .fc-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-page="forecast"] .fc-readouts h3 { margin: 0 0 var(--s-2); font-size: var(--t-title3); }
body[data-page="forecast"] .fc-readouts .pairs { margin: 0; }
body[data-page="forecast"] .fc-table-wrap { overflow-x: auto; }
body[data-page="forecast"] .fc-table th[scope="row"] { white-space: nowrap; }
body[data-page="forecast"] .fc-table td { font-variant-numeric: tabular-nums lining-nums; }
body[data-page="forecast"] .fc-math { white-space: pre-wrap; overflow-wrap: anywhere; }

/* -- How it works: equations and the noise table ------------------------------------------------------ */
body[data-page="forecast"] .fc-split { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 56rem) {
  body[data-page="forecast"] .fc-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
body[data-page="forecast"] .fc-split > * { min-width: 0; }
body[data-page="forecast"] .fc-copy > :is(p, si-p),
body[data-page="forecast"] .fc-copy > ul,
body[data-page="forecast"] .fc-copy > ol { max-width: min(var(--max-text), 54ch); }
body[data-page="forecast"] .fc-copy ul, body[data-page="forecast"] .fc-copy ol { padding-inline-start: 1.1em; }
body[data-page="forecast"] .fc-copy li::marker { color: var(--deco-gold); }
body[data-page="forecast"] .fc-panel h3 { margin-block-end: var(--s-3); }
body[data-page="forecast"] .fc-eq { white-space: pre-wrap; overflow-wrap: anywhere; }

/* -- The sample ledger --------------------------------------------------------------------------------- */
body[data-page="forecast"] .fc-ledger {
  margin-block-start: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2);
  background: var(--noir-2);
}
body[data-page="forecast"] .fc-ledger > summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--target);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-1);
  list-style: none;
}
body[data-page="forecast"] .fc-ledger > summary::-webkit-details-marker { display: none; }
body[data-page="forecast"] .fc-ledger > summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-inline-start: auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}
body[data-page="forecast"] .fc-ledger[open] > summary::after { transform: rotate(-135deg); }
body[data-page="forecast"] .fc-ledger__body { padding: 0 0.9rem 0.9rem; }
body[data-page="forecast"] .fc-ledger .compare { margin-block-end: var(--s-3); }