/* -------------------------------------------------------------------
 * forecast.css — #52 forecast surfaces on the section gauge chart.
 *
 * Loaded on the section page ONLY when the forecast flag is on (the
 * template gates the <link> on chart.forecast_state != "off"), so a
 * dark-flag render is byte-identical to today — no forecast DOM, no
 * forecast stylesheet.
 *
 * Covers: the confidence badge (.conf, FC-2), the forecast legend row
 * (.fc-leg, FC-1/3/4), the FC-3 delayed banner (.fcban), the FC-4
 * micro-label, and the FC-5 empty-zone gate (.fc-gate). The Premium
 * chip (.pchip) + upsell note (.upsell) come from premium-lock.css
 * (reused verbatim from #57). Series / band / now-line / future-zone
 * are painted on the uPlot canvas by section_chart.js — this file only
 * defines the CSS-driven surfaces + the tokens the plugin reads.
 *
 * Builds on existing tokens; light + dark come from the tokens. The
 * one new token, --band-alpha (P10–P90 fill opacity), is defined here
 * mirroring the site's OS + cookie theme convention. "Free/Premium"
 * and confidence tiers never colour-alone — always word + glyph.
 * ------------------------------------------------------------------- */

:root { --band-alpha: 0.13; }
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) { --band-alpha: 0.20; }
}
:root[data-color-scheme="dark"] { --band-alpha: 0.20; }

/* --- FC-2 confidence badge -----------------------------------------
 * Neutral sunken pill at the RIGHT end of the chart-head meta row,
 * opposite the status pill. Signal-bars glyph (filled count = tier,
 * always brand blue — colour never judges) + a plain-words label.
 * Rendered ONLY while a forecast LINE is drawn (FC-1). */
.chart-head .chart-title-block { margin-right: auto; }

.conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  font: 600 11.5px var(--font-sans);
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  cursor: default;
  white-space: nowrap;
}
/* Signal-bars glyph: three ascending bars; filled count = tier. */
.conf-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.conf-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--border-strong);
}
.conf-bar:nth-child(1) { height: 5px; }
.conf-bar:nth-child(2) { height: 8px; }
.conf-bar:nth-child(3) { height: 11px; }
/* Filled bars are ALWAYS brand blue (never red/amber). c1 fills 1,
 * c2 fills 2, c3 fills all 3. */
.conf.c1 .conf-bar:nth-child(-n + 1),
.conf.c2 .conf-bar:nth-child(-n + 2),
.conf.c3 .conf-bar:nth-child(-n + 3) {
  background: var(--brand-500);
}

/* Tooltip — words only, on hover / keyboard focus / tap (the badge is
 * focusable, so a touch tap focuses it and toggles the tip). */
.conf-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 240px;
  z-index: 20;
  font: 500 11.5px var(--font-sans);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--surface-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  padding: 8px 10px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.conf:hover .conf-tip,
.conf:focus .conf-tip,
.conf:focus-visible .conf-tip,
.conf:focus-within .conf-tip {
  opacity: 1;
  visibility: visible;
}
.conf:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* --- FC-1/3/4 forecast legend row (.fc-leg) ------------------------
 * The first chart legend on nokken. Row under the chart with a top
 * border; max 3 plain-word items; wraps at narrow widths. */
.fc-leg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-secondary);
}
.fc-leg .li { display: inline-flex; align-items: center; gap: 6px; }
.fc-leg .sw {
  display: inline-block;
  width: 20px;
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
  flex-shrink: 0;
}
/* Observed: solid brand. Forecast: dashed brand. Likely range: a
 * filled swatch at band opacity. Hold-steady: dotted muted grey. */
.fc-leg .sw-fc-observed { border-top-color: var(--brand-500); }
.fc-leg .sw-fc-forecast {
  border-top-color: var(--brand-500);
  border-top-style: dashed;
}
.fc-leg .sw-fc-hold {
  border-top-color: var(--text-muted);
  border-top-style: dotted;
  border-top-width: 3px;
}
.fc-leg .sw-fc-band {
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-500) 40%, transparent);
  background: color-mix(in srgb, var(--brand-500) 16%, transparent);
  border-radius: 2px;
}
/* FC-4 micro-label — uppercase mono micro, muted. Sits inline in the
 * forecast legend row (moves under it on very narrow widths). */
.fc-nomicro {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- FC-3 delayed banner (.fcban) ----------------------------------
 * Reuses the warning notice tokens; clock glyph + full copy at all
 * widths. Rendered only in the persistence (hold-steady) fallback. */
.fcban {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warning-fg);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.fcban-icon { flex-shrink: 0; margin-top: 1px; color: var(--warning-fg); }

/* --- FC-5 empty-zone gate (.fc-gate) -------------------------------
 * The future zone is honestly EMPTY (never blurred/teaser data). The
 * NOW line + sunken tint still paint on the canvas so the reader sees
 * the forecast's real estate; this overlay centres the Premium chip
 * (from premium-lock.css) + a micro label in the right-third zone. */
.fc-gate {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Right third = the future zone (NOW sits ~2/3 across). */
  right: 0;
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  text-align: center;
}
/* Only the chip is interactive; the overlay itself is transparent to
 * pointer events so chart hover still works left of NOW. */
.fc-gate .pchip {
  pointer-events: auto;
  min-height: 44px; /* ≥44px tap target (FC-R) */
  padding-inline: 12px;
}
.fc-gate-micro {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- FC-R responsive ----------------------------------------------- */
@media (max-width: 480px) {
  /* FC-5 chip alone in the zone — the micro label drops (aria-label on
   * the chip keeps the full sentence). */
  .fc-gate-micro { display: none; }
  /* Confidence badge wraps below the pills, still right-aligned; never
   * truncates. */
  .conf { white-space: normal; }
  .conf-tip { max-width: min(240px, 80vw); }
}