/* =========================================================================
   MONTHLY REFRESH DEMO (#monthlyRefreshDemo).
   See src/components/MonthlyRefreshDemo.astro for the storyboard.
   Timeline: public/js/monthly-refresh-demo.js toggles `is-*` classes and
   positions `.mrd__cursor` at runtime.

   A single steady scene, no crossfade — a monthly grid, card-style like
   BudgetDetailDemo's (CSS grid, not a <table> — table-layout:fixed proved
   unreliable at this column count there too). However many months fit at
   the current ~640px stage width are shown in full, the rest scroll off.
   Same --xxx-canvas/card/border/accent palette (product likeness) as
   every other demo on the site.
   ========================================================================= */

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

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

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

.mrd__pane { flex: 1; min-height: 0; min-width: 0; padding: 14px 14px 12px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/* ---------- monthly grid — sized to the ~470px content width this stage
   actually renders at (measured, not the 640px stage ceiling — the two-
   column SystemSubstep layout narrows it): a 70px label column and 12
   33px month columns (Jan–Dec) fit fully, so the full year is visible,
   not just the six months around the close event. ---------- */
.mrdGrid {
  display: grid; grid-template-columns: 70px repeat(12, 33px);
  background: var(--mrd-card); border: 1px solid var(--mrd-border); border-radius: 8px;
  overflow: hidden; max-width: 100%;
}
.mrdCell {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 4px; font-size: 8px; color: var(--mrd-ink2);
  border-bottom: 1px solid var(--mrd-line); border-right: 1px solid var(--mrd-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .3s ease, outline-color .3s ease;
  position: relative;
}
.mrdCell--head { background: var(--mrd-head); font-weight: 500; border-bottom: 1px solid var(--mrd-border); }
.mrdCell--corner { justify-content: flex-start; font-weight: 600; color: var(--mrd-ink); font-size: 7.5px; }
.mrdCell--label { justify-content: flex-start; font-weight: 600; color: var(--mrd-ink); font-size: 7.5px; }
.mrdCell--val { font-variant-numeric: tabular-nums; }
.mrdCell--total { font-weight: 700; color: var(--mrd-ink); border-top: 1px solid var(--mrd-border); }
.mrdCell--budget { color: var(--mrd-ink2); font-style: italic; }
.mrdCell--label.mrdCell--budget { font-weight: 500; font-style: normal; }

/* closed/actual months (Jan–May always; June once it closes) get a subtle
   tint distinguishing them from forecast months. */
.mrdCell[data-closed] { background: var(--mrd-closed-tint); }
.mrdCell--head[data-closed] { background: #EDECE6; }

/* June starts forecast-tinted (no [data-closed] yet); the "Close June"
   action adds it via the root class, matching the same visual language
   as the always-closed months. */
.mrd.is-jun-closed [data-month="5"] { background: var(--mrd-closed-tint); }
.mrd.is-jun-closed [data-month="5"].mrdCell--head { background: #EDECE6; }

/* the boundary between closed and forecast — starts after May (month 4),
   moves to after June (month 5) once June closes. */
.mrdCell[data-month="4"] { border-right: 2px solid var(--mrd-ink2); }
.mrd.is-jun-closed .mrdCell[data-month="4"] { border-right: 1px solid var(--mrd-line); }
.mrd.is-jun-closed .mrdCell[data-month="5"] { border-right: 2px solid var(--mrd-ink2); }

/* a cell mid-edit (June's revenue/net income updating from forecast to
   actual) or freshly recalculated (the cash ripple). */
.mrdCell.is-flash {
  outline: 1.5px solid var(--mrd-accent); outline-offset: -1.5px;
  background: var(--mrd-accent-soft);
}

.mrdAction {
  display: inline-flex; align-items: center; gap: 5px; align-self: center;
  font-size: 10px; font-weight: 600; color: var(--mrd-accent);
  background: var(--mrd-accent-soft); border: 1px solid #CFC7EF; border-radius: 999px;
  padding: 6px 12px;
  transition: transform .15s ease, opacity .3s ease;
}
.mrd.is-press-close .mrdAction { transform: scale(.94); }
.mrd.is-jun-closed .mrdAction { opacity: 0; pointer-events: none; }
.mrd__arrow { font-style: normal; }

/* ---------- cursor — positioned at runtime (JS sets left/top in px via
   getBoundingClientRect against .mrd__stage). ---------- */
.mrd__cursor {
  position: absolute; opacity: 0; pointer-events: none; z-index: 9;
  transition: left .6s cubic-bezier(.5, .05, .3, 1), top .6s cubic-bezier(.5, .05, .3, 1), opacity .3s ease;
}
.mrd.is-cursor-visible .mrd__cursor { opacity: 1; }

/* ---------- responsive — narrower columns below ~460px so the full year
   still fits without forcing horizontal scroll on the page itself. ---------- */
@media (max-width: 460px) {
  .mrd__stage { aspect-ratio: auto; min-height: 420px; }
  .mrdGrid { grid-template-columns: 54px repeat(12, 20px); }
  .mrdCell { font-size: 6px; padding: 4px 2px; }
  .mrdCell--corner, .mrdCell--label { font-size: 6px; }
}