/* ============================================================
   THE UPGRADE — page-local styles (W4)
   Leans on design-system.css; only Upgrade-specific pieces live here.
   Tokens/components reused: .folio .fig .field .cta .cta2 .kicker
   .deck .mono .loading-rule .state
   Red budget preserved: red = links, one accent (progress fill / active), kickers.
   ============================================================ */

.upg-state { margin-bottom:8px; }
.upg-h { font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.02; letter-spacing:-.025em; margin-top:8px; }
.masthead h1 a { color:inherit; }
.masthead h1 a span { color:var(--red); }

/* ---------- HUB: lead ---------- */
/* Two-column lead: headline earns the left measure (one line at 1240), a small
   always-present "how it works" aside fills the right so the row is never half
   empty. Collapses to one column at 820. */
.upg-lead { margin-top:40px; display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:start; }
.upg-lead-main { min-width:0; max-width:820px; }
.upg-lead-main .deck { max-width:720px; }
.upg-lead-aside { border-left:1px solid var(--hair); padding-left:36px; }
.upg-lead-aside .ula-label { font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; border-bottom:3px solid var(--rule); padding-bottom:8px; margin-bottom:2px; display:block; }
.ula-stat { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--hair2); }
.ula-stat b { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--red); line-height:1; font-variant-numeric:tabular-nums; }
.ula-stat span { font-size:12.5px; color:var(--ink2); line-height:1.4; }
.ula-note { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:14px; line-height:1.6; }

/* ---------- HUB: resume band ---------- */
.resume-band { border:1px solid var(--rule); border-top:3px solid var(--red); margin-top:32px; padding:20px 24px; }
.resume-inner { display:flex; flex-direction:column; gap:8px; }
.resume-label { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.resume-btn { text-align:left; background:none; border:none; cursor:pointer; padding:0; align-self:flex-start;
  font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.015em; color:var(--ink); line-height:1.15; }
.resume-btn:hover { color:var(--red); }
.resume-btn .resume-arrow { border-bottom:2px solid var(--red); }
.resume-note { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:10px; line-height:1.6; }

/* ---------- HUB: role grid (3-up column-ruled cards) ---------- */
.role-grid { display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:28px; border-top:1px solid var(--rule); }
.rcard { border-left:1px solid var(--hair); border-bottom:1px solid var(--hair2); padding:22px 26px 24px; display:flex; flex-direction:column; text-align:left;
  background:none; color:inherit; font:inherit; cursor:pointer; width:100%; }
.rcard:nth-child(3n+1) { border-left:none; padding-left:0; }
.rcard:nth-child(3n) { padding-right:0; }
.rcard.is-live:hover { background:var(--paper2); }
.rcard.is-live:hover .rcard-title { color:var(--red); }
.rcard .rcard-n { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.rcard .rcard-title { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.015em; margin:8px 0 4px; line-height:1.12; }
.rcard .rcard-sub { font-size:12.5px; color:var(--mut); line-height:1.45; margin-bottom:14px; }

/* progress meter */
.rcard .rcard-prog { margin-top:auto; }
.rcard .rprog-track { height:6px; background:var(--track); display:flex; gap:2px; }
.rcard .rprog-seg { flex:1; background:var(--track); }
.rcard .rprog-seg.done { background:var(--red); }
.rcard .rprog-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); margin-top:8px; display:flex; justify-content:space-between; align-items:baseline; }
.rcard .rprog-cta { font-family:var(--font-body); font-weight:600; font-size:12px; color:var(--ink); }
.rcard.is-live:hover .rprog-cta { color:var(--red); }

/* in-production (JSON 404) card */
.rcard.is-pending { cursor:default; }
.rcard.is-pending .rcard-title { color:var(--ink2); }
.rcard .rcard-pending { font-size:13px; color:var(--mut); line-height:1.5; margin-top:auto; }
.rcard .rcard-pending-tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:block; margin-top:10px; }

/* suggested (floated-first) role */
.rcard.is-suggested { box-shadow:inset 3px 0 0 var(--red); background:var(--paper2); }
.rcard.is-suggested.rcard:nth-child(3n+1) { padding-left:20px; }
.rcard .rcard-suggest { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:8px; }

.grid-note { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:18px; line-height:1.6; }

/* ---------- TRACK: header + module list ---------- */
.backlink { background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink); border-bottom:2px solid var(--red); padding-bottom:2px; align-self:flex-start; }
.backlink:hover { color:var(--red); }

.track-head { margin-top:36px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:start; }
.track-head .backlink { grid-column:1 / -1; margin-bottom:18px; }
.track-titlewrap { max-width:700px; }
.track-titlewrap .deck { max-width:640px; margin-top:14px; }
.track-progress { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); text-align:right; white-space:nowrap; padding-top:6px; }
.track-progress b { font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--ink); display:block; letter-spacing:-.02em; }

.module-list { margin-top:34px; border-top:1px solid var(--rule); }
.mrow { display:grid; grid-template-columns:54px 1fr auto; gap:22px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--hair2); width:100%;
  background:none; border-left:none; border-right:none; border-top:none; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.mrow:last-child { border-bottom:1px solid var(--rule); }
.mrow:hover { background:var(--paper2); }
.mrow:hover .mrow-title { color:var(--red); }
.mrow .mrow-n { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--faint); font-variant-numeric:tabular-nums; }
.mrow.done .mrow-n { color:var(--red); }
.mrow .mrow-main .mrow-title { font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.01em; line-height:1.2; }
.mrow .mrow-main .mrow-meta { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:5px; }
.mrow .mrow-status { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); text-align:right; white-space:nowrap; }
.mrow .mrow-status.is-done { color:var(--red); }
.track-updated { font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:16px; }

/* ---------- PLAYER: header ---------- */
.player-head { margin-top:36px; }
.player-head .backlink { margin-bottom:18px; }
.player-titlewrap { max-width:680px; }
.module-meta { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:8px; }

.folio.movement { margin-top:48px; }

.movement-body { margin-top:24px; max-width:760px; }

/* Movement 1: lesson */
.lesson-outline { list-style:none; counter-reset:lo; margin:0; padding:0; border-top:1px solid var(--hair2); }
.lesson-outline li { counter-increment:lo; position:relative; padding:15px 0 15px 44px; border-bottom:1px solid var(--hair2);
  font-size:16.5px; line-height:1.55; color:var(--ink2); }
.lesson-outline li::before { content:counter(lo,decimal-leading-zero); position:absolute; left:0; top:16px;
  font-family:var(--font-mono); font-size:11px; color:var(--red); letter-spacing:.04em; }
.keyidea { border-left:3px solid var(--red); background:var(--paper2); padding:20px 24px; margin-top:24px; }
.keyidea .ki-label { font-family:var(--font-body); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:8px; }
.keyidea p { font-family:var(--font-body); font-size:18px; line-height:1.5; color:var(--ink); }

/* Movement 2: exercise */
.ex-title { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.015em; margin-bottom:18px; }
.copyblock { border:1px solid var(--rule); margin-bottom:26px; }
.copyblock-head { display:flex; justify-content:space-between; align-items:center; background:var(--fig-bg); color:var(--fig-tx); padding:8px 14px 8px 18px; }
.copyblock-head .cb-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.copy-btn { cursor:pointer; border:1px solid var(--fig-tx); background:none; color:var(--fig-tx); font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; transition:.15s; }
.copy-btn:hover { background:var(--fig-tx); color:var(--fig-bg); }
.copy-btn.copied { background:var(--red); border-color:var(--red); color:#fff; }
.copyblock-pre { margin:0; padding:20px 22px; background:var(--paper2); color:var(--ink); font-size:13.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word; }

.ex-steps-wrap { margin-bottom:24px; }
.steps-label, .eo-label { font-family:var(--font-body); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:12px; }
.ex-steps { list-style:none; counter-reset:es; margin:0; padding:0; }
.ex-steps li { counter-increment:es; position:relative; padding:8px 0 8px 34px; font-size:15.5px; line-height:1.5; color:var(--ink2); }
.ex-steps li::before { content:counter(es) "."; position:absolute; left:0; top:8px; font-family:var(--font-mono); font-size:12px; color:var(--red); }
.ex-outcome { border-left:2px solid var(--hair); padding-left:16px; }
.ex-outcome .eo-label { color:var(--faint); margin-bottom:6px; }
.ex-outcome p { font-size:15px; color:var(--ink2); line-height:1.55; }

/* Movement 3: judgment check */
.jc-scenario { font-size:17px; line-height:1.6; color:var(--ink); margin-bottom:6px; }
.jc-fig { margin-top:22px; margin-bottom:22px; }
.jc-fig-body { display:block; padding:26px 30px; }
.jc-specimen { font-family:var(--font-mono); font-size:13.5px; line-height:1.7; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.jc-question { font-family:var(--font-body); font-weight:700; font-size:18px; line-height:1.4; letter-spacing:-.01em; color:var(--ink); margin-bottom:20px; }
.jc-reveal { border-top:1px solid var(--hair2); padding-top:20px; }
.jc-reveal-btn { cursor:pointer; background:none; border:none; padding-bottom:3px; }
.jc-answer { margin-top:20px; border-left:3px solid var(--red); background:var(--paper2); padding:20px 24px; }
.jc-answer-label { font-family:var(--font-body); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:10px; }
.jc-answer p { font-size:16px; line-height:1.6; color:var(--ink2); }
.jc-answer .jc-answer-note { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-top:14px; }

/* date-quickly flag (date_note) */
.date-flag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); border:1px solid var(--hair); padding:8px 12px; margin-top:20px; display:inline-block; line-height:1.5; }
.date-flag::before { content:"⚠ "; color:var(--red); }

/* ---------- PLAYER: foot ---------- */
.player-foot { margin-top:44px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.mark-done-btn.is-done { background:var(--paper2); color:var(--ink); border:1px solid var(--rule); }
.mark-done-btn.is-done:hover { background:var(--paper); color:var(--red); }
.player-foot-note { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-top:14px; line-height:1.6; max-width:520px; }

/* ---------- shared CTA band ---------- */
.upg-cta-band { border:1px solid var(--rule); margin-top:56px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:30px 34px; }
.upg-cta-band .kicker { margin-bottom:10px; }
.upg-cta-band .upg-h { font-size:26px; margin-top:0; line-height:1.1; }
.upg-cta-band .deck { font-size:15px; margin-top:10px; max-width:620px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:820px){
  .upg-lead { grid-template-columns:1fr; gap:0; }
  .upg-lead-main { max-width:none; }
  .upg-lead-aside { border-left:none; padding-left:0; border-top:1px solid var(--rule); margin-top:32px; padding-top:24px; }
  .role-grid { grid-template-columns:1fr 1fr; }
  .rcard:nth-child(3n+1) { border-left:1px solid var(--hair); padding-left:26px; }
  .rcard:nth-child(3n) { padding-right:26px; }
  .rcard:nth-child(2n+1) { border-left:none; padding-left:0; }
  .rcard:nth-child(2n) { padding-right:0; }
  .rcard.is-suggested.rcard:nth-child(3n+1) { padding-left:26px; }
  .track-head, .upg-cta-band { grid-template-columns:1fr !important; }
  .track-progress { text-align:left; }
  .track-progress b { display:inline; margin-right:8px; }
  .upg-h { font-size:34px; }
  .upg-cta-band { text-align:left; }
}
@media (max-width:640px){
  .role-grid { grid-template-columns:1fr; }
  .rcard, .rcard:nth-child(2n+1), .rcard:nth-child(2n) { border-left:none; padding-left:0; padding-right:0; }
  .rcard.is-suggested { box-shadow:inset 3px 0 0 var(--red); padding-left:16px !important; }
  .upg-h { font-size:28px; }
  .mrow { grid-template-columns:40px 1fr; }
  .mrow .mrow-status { grid-column:2; text-align:left; margin-top:8px; }
  .jc-fig-body { padding:20px 18px; }
  .keyidea p { font-size:16.5px; }
}
@media (max-width:400px){
  .upg-h { font-size:24px; }
  .resume-btn { font-size:19px; }
}

/* ============================================================
   ACCOUNT NUDGE — inline ruled card in the data-account-nudge hook.
   Rendered by nudges.js (flag-gated). Never a modal.
   ============================================================ */
.nudge-card { position:relative; border-top:2px solid var(--rule); border-bottom:1px solid var(--hair2); padding:18px 40px 18px 0; margin:18px 0 0; }
.nudge-x { position:absolute; top:14px; right:0; background:none; border:none; cursor:pointer; font-size:14px; line-height:1; color:var(--mut); padding:4px; }
.nudge-x:hover { color:var(--red); }
.nudge-title { font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink); margin:0 0 6px; }
.nudge-body { font-size:14px; line-height:1.55; color:var(--ink2); margin:0 0 12px; max-width:560px; }
.nudge-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.nudge-primary { font-family:var(--font-body); font-weight:700; font-size:12.5px; background:var(--ink); color:var(--paper); padding:9px 18px; text-decoration:none; }
.nudge-primary:hover { background:var(--red); color:#fff; }
.nudge-notnow, .nudge-second { background:none; border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--mut); padding:0; }
.nudge-notnow:hover, .nudge-second:hover { color:var(--ink); }
.nudge-sep { color:var(--faint); }