/* =========================================================================
   STATEMENT YEAR DEMO (#statementYearDemo) — hero visual on
   /v2/three-statement-modeling-v2.
   See src/components/StatementYearDemo.astro for the storyboard.
   Timeline: public/js/statement-year-demo.js toggles `is-*` classes.

   A single steady scene, no crossfade — one shared twelve-month header
   above three stacked single-metric panel rows (P&L / Balance Sheet /
   Cash Flow). CSS grid per row (not a <table>), same pattern as
   MonthlyRefreshDemo's monthly grid. Same --xxx-canvas/card/border/accent
   palette (product likeness) as every other demo on the site.
   ========================================================================= */

.styd {
  --styd-canvas: #FAF9F5;
  --styd-card: #FFFFFF;
  --styd-border: #DBDBDE;
  --styd-line: #EAEAEA;
  --styd-head: #F6F6F7;
  --styd-ink: #2B2B2B;
  --styd-ink2: #777777;
  --styd-accent: #6A5BC6;
  --styd-accent-soft: #ECECFF;
  --styd-closed-tint: #F0EFEA;
}

/* standard product-demo dimensions (width:100% keeps aspect-ratio from
   computing width off the min-height floor in a narrow container). */
.styd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--styd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.styd.is-out .styd__stage { opacity: 0; }

.styd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--styd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--styd-line);
  white-space: nowrap;
}

.styd__pane { flex: 1; min-height: 0; min-width: 0; padding: 16px 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }

/* ---------- shared month header + per-panel grids — sized to the
   content width this stage actually renders at inside .pf-hero__visual
   (measured, not the 640px stage ceiling). ---------- */
.stydGrid {
  display: grid; grid-template-columns: 92px repeat(12, 1fr);
  max-width: 100%;
}
.stydGrid--head {
  background: var(--styd-head); border: 1px solid var(--styd-border); border-radius: 6px 6px 0 0;
  border-bottom: 0;
}
.stydCell {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 5px 4px; font-size: 8px; color: var(--styd-ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .3s ease;
}
.stydCell--corner { justify-content: flex-start; font-weight: 600; color: var(--styd-ink); font-size: 7.5px; }
.stydCell--head { font-weight: 500; }
.stydCell--label { justify-content: flex-start; font-weight: 600; color: var(--styd-ink); font-size: 7.5px; }
.stydCell--val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--styd-ink); }

/* closed months (Jan–May) get a subtle tint distinguishing them from the
   plain forecast months (Jun–Dec). */
.stydCell[data-closed] { background: var(--styd-closed-tint); }

/* the boundary between closed and forecast, right after May. */
.stydGrid .stydCell[data-month="4"] { border-right: 1.5px solid var(--styd-ink2); }

.stydPanel {
  border: 1px solid var(--styd-border); border-top: 0; border-radius: 0 0 6px 6px;
  background: var(--styd-card);
  padding: 4px 0 6px;
  transition: background .35s ease, box-shadow .35s ease;
}
.stydPanel:last-child { border-radius: 0 0 6px 6px; }
.stydPanel + .stydPanel { border-top: 1px solid var(--styd-line); border-radius: 0; }
.stydPanel:last-child { border-radius: 0 0 6px 6px; }

.stydPanel__tag {
  display: inline-block; margin: 0 0 3px 92px;
  font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--styd-ink2);
}

/* the highlight sweep — one panel at a time lights up. */
.stydPanel.is-lit { background: var(--styd-accent-soft); box-shadow: inset 2px 0 0 var(--styd-accent); }
.stydPanel.is-lit .stydPanel__tag,
.stydPanel.is-lit .stydCell--label { color: var(--styd-accent); }

/* ---------- responsive — narrower month columns below ~460px. ---------- */
@media (max-width: 460px) {
  .styd__stage { aspect-ratio: auto; min-height: 460px; }
  .stydGrid { grid-template-columns: 60px repeat(12, 1fr); }
  .stydCell { font-size: 6px; padding: 4px 2px; }
  .stydCell--corner, .stydCell--label { font-size: 6px; }
  .stydPanel__tag { margin-left: 60px; }
}