/* ============================================================
   MSTA · District formula walkthrough (vertical scroll)
   Shares tokens and type with the SAT horizontal scroller.
   Background is transparent so the site's page background shows through.
   Fonts and heading styles come from the site CSS, same as the
   SAT scroller; only sizes are set here.
   ============================================================ */
.msta-formula {
  --red: #b42e34;
  --red-soft: #f3dcdd;
  --weight: #e3a9ac;
  --regional: #d9777c;
  --ink: #231f20;
  --muted: #555555;
  --line: #dedede;
  --soft: #f5f5f5;
  --paper: #ffffff;
  --dot: #c4c4c4;
  --mf-top: 100px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  position: relative;
  width: 100%;
}
.msta-formula *, .msta-formula *::before, .msta-formula *::after { box-sizing: border-box; }

/* ---------- type (same scale as the SAT scroller) ---------- */
.msta-formula .mf-label {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin: 0 0 12px;
}
.msta-formula h3 {
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; margin: 0 0 18px;
}
.msta-formula p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; margin: 0 0 14px; color: var(--ink); max-width: 34em; }
.msta-formula .mf-fine {
  font-size: 14px; color: var(--muted); border-left: 3px solid var(--red);
  padding-left: 12px; margin-top: 20px;
}
.msta-formula .mf-sr, .msta-formula__sr, .msta-formula [data-mf-status] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- intro (mirrors the SAT opening panel) ---------- */
.msta-formula .mf-intro { text-align: center; padding: 12vh 8vw 6vh; }
.msta-formula .mf-intro-text p { margin: 0 auto 14px; font-size: clamp(18px, 1.6vw, 24px); }
.msta-formula .mf-hint { margin: 32px auto 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.msta-formula .mf-hint b { display: inline-block; color: var(--red); animation: mf-nudge 1.6s ease-in-out infinite; }
@keyframes mf-nudge { 50% { transform: translateY(6px); } }

/* ---------- layout: text left, pinned visual right ---------- */
.msta-formula .mf-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4vw;
  padding: 0 8vw;
}
.msta-formula .mf-step {
  min-height: calc(100vh - var(--mf-top));
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vh 0;
  transition: opacity .4s ease;
}
.msta-formula.is-enhanced .mf-step { opacity: .25; }
.msta-formula.is-enhanced .mf-step.is-current { opacity: 1; }
.msta-formula .mf-pin {
  position: sticky; top: var(--mf-top);
  height: calc(100vh - var(--mf-top));
  display: flex; align-items: center;
}

/* ---------- visual card ---------- */
.msta-formula .mf-vis { width: 100%; max-width: 560px; margin: 0 auto; }
.msta-formula .mf-vis-top {
  display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.msta-formula .mf-figure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
/* The amount sizes to the space beside the symbols, not the window. */
.msta-formula .mf-figure > div:last-child { min-width: 0; container-type: inline-size; }

/* students: 20 solid = 100 students, 4 light = 20 funding weights */
.msta-formula .mf-students { display: grid; grid-template-columns: repeat(5, 18px); gap: 10px 10px; }
.msta-formula .mf-students i { display: block; width: 18px; height: 30px; position: relative; transition: opacity .4s ease, transform .4s ease; }
.msta-formula .mf-students i::before, .msta-formula .mf-students i::after { content: ''; position: absolute; background: var(--red); transition: background .5s ease; }
.msta-formula .mf-students i::before { width: 11px; height: 11px; border-radius: 50%; top: 0; left: 3.5px; }
.msta-formula .mf-students i::after { width: 18px; height: 16px; border-radius: 7px 7px 3px 3px; top: 13px; left: 0; }
.msta-formula .mf-students i.w { opacity: 0; transform: scale(.5); }
.msta-formula .mf-students i.w::before, .msta-formula .mf-students i.w::after { background: var(--weight); }
.msta-formula .mf-students.has-weights i.w { opacity: 1; transform: none; }
.msta-formula .mf-students.is-dim i::before, .msta-formula .mf-students.is-dim i::after { background: var(--dot); }
.msta-formula .mf-students.is-dim i.w::before, .msta-formula .mf-students.is-dim i.w::after { background: #e4e4e4; }

.msta-formula .mf-big {
  font-size: clamp(32px, 3.6vw, 72px); font-weight: 800; color: var(--red);
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* "$900,270" is the widest value (8 characters, about 4.8em), so 19% of the cell width always fits. */
@supports (font-size: 1cqi) {
  .msta-formula .mf-big { font-size: clamp(28px, 19cqi, 88px); }
}
.msta-formula .mf-big-label { font-size: 16px; font-weight: 600; color: var(--muted); margin-top: 8px; }
.msta-formula .mf-caption { font-size: 13px; color: var(--muted); margin: 16px 0 0; min-height: 1.5em; }

/* equation chips (same card style as the SAT scroller) */
.msta-formula .mf-eq { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 20px; min-height: 92px; align-content: flex-start; }
.msta-formula .mf-chip {
  background: var(--soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums;
  animation: mf-in .35s ease both;
}
.msta-formula .mf-chip--active { border-color: var(--red); font-weight: 700; }
.msta-formula .mf-chip--result { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
@keyframes mf-in { from { opacity: 0; transform: translateY(8px); } }

/* dollar bar (same track style as the SAT "target vs paid" panel) */
.msta-formula .mf-alloc { min-height: 82px; transition: opacity .4s ease; }
.msta-formula .mf-alloc.is-off { opacity: 0; }
.msta-formula .mf-track { display: flex; height: 44px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.msta-formula .mf-seg { height: 100%; width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.msta-formula .mf-seg--aid { background: var(--red); }
.msta-formula .mf-seg--regional { background: var(--regional); }
.msta-formula .mf-seg--local { background: repeating-linear-gradient(135deg, var(--dot) 0 8px, #dedede 8px 16px); }
.msta-formula .mf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.msta-formula .mf-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.msta-formula .mf-legend [hidden] { display: none; }
.msta-formula .mf-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.msta-formula .mf-sw--aid { background: var(--red); }
.msta-formula .mf-sw--regional { background: var(--regional); }
.msta-formula .mf-sw--local { background: var(--dot); }

/* progress (same as the SAT scroller) */
.msta-formula .mf-progress {
  display: flex; align-items: center; gap: 16px; margin-top: 28px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.msta-formula .mf-bar { flex: 1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.msta-formula .mf-bar span { display: block; height: 100%; width: 0; background: var(--red); }

/* footer note */
.msta-formula .mf-footer { padding: 4vh 8vw 8vh; }
.msta-formula .mf-footer p { font-size: 14px; color: var(--muted); max-width: 60em; }

/* ---------- mobile: visual pins on top, steps scroll beneath ---------- */
@media (max-width: 800px) {
  .msta-formula .mf-intro { padding: 56px 7vw 24px; }
  .msta-formula .mf-layout { grid-template-columns: 1fr; gap: 0; padding: 0 7vw; }
  .msta-formula .mf-pin {
    order: -1; height: auto; z-index: 2; background: var(--paper);
    padding: 14px 0 12px; border-bottom: 1px solid var(--line);
  }
  .msta-formula .mf-vis-top { margin-bottom: 10px; font-size: 11px; }
  .msta-formula .mf-figure { gap: 18px; }
  .msta-formula .mf-students { grid-template-columns: repeat(5, 11px); gap: 4px 6px; }
  .msta-formula .mf-students i { width: 11px; height: 18px; }
  .msta-formula .mf-students i::before { width: 7px; height: 7px; left: 2px; }
  .msta-formula .mf-students i::after { width: 11px; height: 10px; top: 8px; border-radius: 4px 4px 2px 2px; }
  .msta-formula .mf-big { font-size: clamp(26px, 19cqi, 44px); }
  .msta-formula .mf-big-label { font-size: 13px; margin-top: 4px; }
  .msta-formula .mf-caption { font-size: 11px; margin-top: 8px; }
  .msta-formula .mf-eq { margin: 10px 0; gap: 5px; min-height: 66px; }
  .msta-formula .mf-chip { font-size: 12px; padding: 6px 8px; border-radius: 8px; }
  .msta-formula .mf-alloc { min-height: 54px; }
  .msta-formula .mf-track { height: 22px; }
  .msta-formula .mf-legend { font-size: 11px; gap: 3px 10px; margin-top: 6px; }
  .msta-formula .mf-progress { margin-top: 10px; font-size: 11px; }
  .msta-formula .mf-step { min-height: 70vh; justify-content: flex-start; padding: 40px 0 15vh; }
}

@media (prefers-reduced-motion: reduce) {
  .msta-formula * { transition: none !important; animation: none !important; }
}