/* LA28 section: the qualification tracker, in the site's ink/accent language.
   Shared by index.html (#la28) and mvk/index.html. Sizes follow the 1440-px
   artboard through --u (= 1/1440 of the section width) with pixel floors so the
   phone layout never collapses. The host page decides what animates: blocks
   marked .la-rise start hidden only inside .la28.is-animated. */
.la28 { --u: calc(100cqw / 1440 * 0.86); --U: max(var(--u), 1px); --gutter: max(calc(32 * 100cqw / 1440), var(--gutter-min, 0px));
  --la-contour: var(--raw-color-white-alpha-10); --la-ring-black: var(--foreground-on-dark); --la-rule: rgb(255 255 255 / 0.14); --la-rule-soft: rgb(255 255 255 / 0.08);
  --la-body: max(calc(14 * var(--u)), 12px); --la-small: max(calc(12 * var(--u)), 11px); --la-label: max(calc(11 * var(--u)), 10px);
  container-type: inline-size; position: relative; isolation: isolate; width: 100%; overflow: hidden;
  background: var(--surface-black); color: var(--foreground-on-dark); padding: calc(36 * var(--u)) var(--gutter) calc(56 * var(--u)); }
.la28 .contours { z-index: 0; }
.la28 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.la-muted { color: var(--foreground-on-dark-muted); }

/* masthead: eyebrow + headline + intro on the left, the LA28 emblem on the right */
.la-head { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: calc(40 * var(--u)); }
.la-eyebrow { margin-bottom: max(calc(12 * var(--u)), 10px); font-size: max(calc(12 * var(--u)), 11px); text-transform: uppercase; letter-spacing: 0.18em; line-height: 1; color: var(--accent); }
.la28 h2 { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95; color: var(--foreground-on-dark); font-size: max(calc(46 * var(--u)), var(--head-min, 0px)); }
.la28 h2 .accent { color: var(--accent); }
.la28 h2 .line-wrap { display: flex; align-items: baseline; }
.la28 h2 .dot-white { color: var(--foreground-on-dark); }
.la-asof { margin: max(calc(14 * var(--u)), 12px) 0 0; font-size: var(--la-label); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--foreground-on-dark-muted); }
.la-emblem-slot { display: flex; align-items: flex-start; }
.la-emblem { display: block; height: max(calc(132 * var(--u)), 104px); width: auto; flex: none; color: var(--foreground-on-dark); }

/* body: figures on the left, pathways + scenarios on the right */
.la-body { position: relative; z-index: 1; display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(40 * var(--u)); align-items: start; margin-top: calc(28 * var(--u)); }
.la-col { display: flex; flex-direction: column; gap: calc(18 * var(--u)); min-width: 0; }
.la-unavail { margin: 0; font-size: var(--la-body); text-transform: uppercase; line-height: 1.2; color: var(--foreground-on-dark-muted); }
.la28.is-animated .la-rise { opacity: 0; transform: translateY(0.75rem); }

/* rider strip + route badge */
.la-card { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); flex-wrap: wrap; }
.la-rider { display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; }
.la-rider > div { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.la-flag { width: max(calc(27 * var(--u)), 22px); height: max(calc(18 * var(--u)), 15px); flex: none; }
.la-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95; font-size: max(calc(30 * var(--u)), 24px); }
.la-cat { font-size: var(--la-label); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--accent); }
.la-route { --cut: calc(6 * var(--U)); position: relative; padding: 1px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.la-route::before { content: ""; position: absolute; inset: 1px; background: var(--surface-black); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 0.4px), calc(100% - var(--cut) + 0.4px) 100%, 0 100%); }
.la-route > * { position: relative; display: block; }
.la-route { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)); text-transform: uppercase; white-space: nowrap; }
.la-route-lbl { font-size: var(--la-label); letter-spacing: 0.14em; line-height: 1; color: var(--foreground-on-dark-muted); }
.la-route b { font-family: var(--font-display); font-weight: 700; font-size: max(calc(20 * var(--u)), 17px); line-height: 0.95; color: var(--foreground-on-dark); }
.la-route[data-state="OPEN"]::before, .la-route[data-state="SECURED"]::before, .la-route[data-state="SCENARIO"]::before { background: var(--accent); }
.la-route[data-state="OPEN"] b, .la-route[data-state="SECURED"] b, .la-route[data-state="SCENARIO"] b { color: var(--surface-black); }
.la-route[data-state="OPEN"] .la-route-lbl, .la-route[data-state="SECURED"] .la-route-lbl, .la-route[data-state="SCENARIO"] .la-route-lbl { color: var(--surface-black); opacity: 0.7; }
.la-route[data-state="UNAVAILABLE"], .la-route[data-state="NONE_LIVE"] { background: var(--foreground-on-dark-muted); }

/* the four figures + the eligibility chips */
.la-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; column-gap: calc(40 * var(--u)); row-gap: calc(16 * var(--u)); margin: 0; padding: calc(14 * var(--u)) 0; border-top: 1px solid var(--la-rule); border-bottom: 1px solid var(--la-rule); }
.la-stats > div { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.la-stats dt { font-size: var(--la-label); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--foreground-on-dark-muted); }
.la-stats dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: max(calc(40 * var(--u)), 30px); line-height: 0.8; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* the bottom line, in a notched accent frame */
.la-line { --cut: calc(8 * var(--U)); position: relative; padding: 1px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.la-line-in { background: var(--surface-black); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 0.4px), calc(100% - var(--cut) + 0.4px) 100%, 0 100%); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(15 * var(--u)) calc(16 * var(--u)); border-left: calc(3 * var(--U)) solid var(--accent); }
.la-line p { margin: 0; font-size: var(--la-body); line-height: 1.3; color: var(--foreground-on-dark); opacity: 0.88; }

/* nation bar */
.la-sub { margin: 0; font-size: var(--la-label); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; color: var(--accent); }
.la-sub-rule { padding-bottom: calc(10 * var(--u)); border-bottom: 1px solid var(--la-rule); }
.la-nation-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; font-size: var(--la-label); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.la-bar { position: relative; height: calc(90 * var(--U)); margin-top: calc(8 * var(--u)); }
.la-track { position: absolute; left: 0; right: 0; top: calc(52 * var(--U)); height: 2px; background: var(--la-rule); }
.la-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); }
.la-tick { position: absolute; top: 0; bottom: 0; width: 0; }
.la-tick i { position: absolute; left: -0.5px; top: calc(44 * var(--U)); width: 1px; height: calc(18 * var(--U)); background: var(--foreground-on-dark-faint); }
.la-tick-lbl, .la-tick-fig { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; text-transform: uppercase; line-height: 1; }
.la-tick-lbl { top: 0; font-size: 10px; letter-spacing: 0.1em; color: var(--foreground-on-dark-muted); }
.la-tick-fig { top: calc(18 * var(--U)); font-family: var(--font-display); font-weight: 500; font-size: max(calc(17 * var(--u)), 15px); font-variant-numeric: tabular-nums; }
.la-tick-fig[data-sign="neg"] { color: var(--accent); }
.la-tick:first-of-type .la-tick-lbl, .la-tick:first-of-type .la-tick-fig { transform: none; }
.la-tick:last-of-type .la-tick-lbl, .la-tick:last-of-type .la-tick-fig { transform: translateX(-100%); }
.la-me { position: absolute; top: calc(52 * var(--U)); width: 0; }
.la-me i { position: absolute; left: 0; top: 1px; width: calc(10 * var(--U)); height: calc(10 * var(--U)); background: var(--accent); outline: 2px solid var(--surface-black); transform: translate(-50%, -50%) rotate(45deg); }
.la-me span { position: absolute; left: 0; top: calc(16 * var(--U)); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: max(calc(13 * var(--u)), 12px); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }

/* pathways */
.la-path-list { list-style: none; margin: 0; padding: 0; }
.la-path { display: grid; grid-template-columns: calc(36 * var(--u)) 1fr auto auto; align-items: start; column-gap: calc(16 * var(--u)); padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--la-rule-soft); }
.la-code { font-family: var(--font-display); font-weight: 500; font-size: max(calc(14 * var(--u)), 12px); line-height: 1.2; color: var(--foreground-on-dark-muted); padding-top: 0.15em; }
.la-what { display: flex; flex-direction: column; gap: calc(5 * var(--u)); min-width: 0; }
.la-title { font-family: var(--font-display); font-weight: 700; font-size: max(calc(20 * var(--u)), 17px); line-height: 0.95; text-transform: uppercase; }
.la-path[data-primary="true"] .la-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.la-tag { font-size: var(--la-label); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; color: var(--foreground-on-dark-muted); }
.la-tag em { font-style: normal; color: var(--accent); }
.la-hint { font-size: var(--la-small); text-transform: uppercase; line-height: 1.2; color: var(--foreground-on-dark); }
.la-needs { font-size: var(--la-small); line-height: 1.3; color: var(--foreground-on-dark-muted); }
.la-fig { font-family: var(--font-display); font-weight: 500; font-size: max(calc(22 * var(--u)), 18px); line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 0.05em; }
.la-path[data-status="BLOCKED"], .la-path[data-status="NA"], .la-path[data-status="REDUNDANT"] { opacity: 0.55; }
/* rows touched by a what-if scenario carry an accent rule */
.la-path[data-hypo="true"] { box-shadow: inset calc(2 * var(--U)) 0 0 var(--accent); padding-left: max(calc(12 * var(--u)), 10px); }
.la-pill { display: inline-block; padding: 6px 9px 5px; border: 1px solid var(--la-rule); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--foreground-on-dark-muted); }
.la-pill[data-status="ON_TRACK"], .la-pill[data-status="SECURED"] { background: var(--accent); border-color: var(--accent); color: var(--surface-black); }
.la-pill[data-status="AT_RISK"] { border-color: var(--accent); color: var(--accent); }
.la-pill[data-status="PENDING"] { border-color: var(--foreground-on-dark-faint); color: var(--foreground-on-dark); }
.la-pill[data-status="UNAVAILABLE"] { border-style: dashed; }
.la-pill[data-status="REDUNDANT"] { border-color: var(--accent); color: var(--accent); background: none; }

/* what-if toggles: a row of compact switch buttons under the nation bar */
.la-whatif-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: max(calc(10 * var(--u)), 8px); border-bottom: 1px solid var(--la-rule); }
.la-reset { font: inherit; font-size: var(--la-label); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--foreground-on-dark-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.la-reset:hover { color: var(--accent); }
.la-hypo-note { margin: max(calc(10 * var(--u)), 8px) 0 0; font-size: var(--la-label); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--accent); }
.la-toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: max(calc(10 * var(--u)), 8px); margin-top: max(calc(10 * var(--u)), 8px); }
.la-toggle { display: flex; align-items: center; gap: max(calc(10 * var(--u)), 8px); min-width: 0; padding: max(calc(10 * var(--u)), 9px) max(calc(12 * var(--u)), 10px); border: 1px solid var(--la-rule); text-align: left; cursor: pointer; color: inherit; font: inherit; background: none; transition: border-color var(--duration-fast, 150ms); }
.la-toggle-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.la-toggle b { font-family: var(--font-display); font-weight: 700; font-size: max(calc(14 * var(--u)), 13px); line-height: 1; text-transform: uppercase; }
.la-toggle .la-tag { font-size: 10px; letter-spacing: 0.08em; }
.la-switch { position: relative; flex: none; width: 26px; height: 14px; border: 1px solid var(--foreground-on-dark-faint); border-radius: 7px; transition: border-color var(--duration-fast, 150ms), background var(--duration-fast, 150ms); }
.la-switch i { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--foreground-on-dark-muted); transition: transform var(--duration-fast, 150ms) var(--ease-entrance, ease), background var(--duration-fast, 150ms); }
.la-toggle[aria-pressed="true"] { border-color: var(--accent); }
.la-toggle[aria-pressed="true"] .la-switch { border-color: var(--accent); background: var(--accent); }
.la-toggle[aria-pressed="true"] .la-switch i { background: var(--surface-black); transform: translateX(12px); }
.la-toggle em[data-realism="live"] { color: var(--foreground-on-dark); }
@media (hover: hover) { .la-toggle:hover { border-color: var(--accent); } }

.la-foot { margin: 0; font-size: var(--la-label); letter-spacing: 0; line-height: 1.45; color: var(--foreground-on-dark-muted); }

@media (max-width: 1023px) {
  .la28 { --head-min: 6.6667cqw; --copy-min-w: 200px; }
  .la-head { grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
  .la-emblem { height: 116px; }
  .la-asof { margin-top: 14px; }
  .la-body { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .la-col { gap: 20px; }
  .la-card { gap: 16px; }
  .la-rider { gap: 12px; } .la-rider > div { gap: 6px; }
  .la-route { gap: 5px; padding: 10px 16px 9px 12px; }
  .la-stats { column-gap: 32px; row-gap: 18px; padding: 18px 0; }
  .la-stats > div { gap: 8px; }
    .la-line-in { padding: 16px 18px 18px 16px; }
  .la-nation-head { row-gap: 6px; }
  .la-bar { margin-top: 12px; }
  .la-sub-rule { padding-bottom: 10px; }
  .la-path { grid-template-columns: 28px 1fr auto; grid-template-areas: "code what fig" "code what pill"; column-gap: 12px; row-gap: 8px; padding: 14px 0; }
  .la-what { gap: 6px; }
  .la-code { grid-area: code; } .la-what { grid-area: what; } .la-fig { grid-area: fig; justify-self: end; } .la-pill { grid-area: pill; justify-self: end; }
}
@media (max-width: 639px) {
  .la28 { --gutter-min: 24px; --head-min: 40px; padding-top: 12cqw; padding-bottom: 12cqw; }
  .la-head { gap: 16px; }
  .la-emblem { height: 92px; }
    .la-card { flex-direction: column; align-items: flex-start; }
  .la-toggles { grid-template-columns: 1fr; }
  .la-route { white-space: normal; }
  .la-stats { grid-template-columns: repeat(2, auto); column-gap: 24px; }
  .la-path { grid-template-columns: 24px 1fr auto; }
  .chequer.on-la28 { z-index: 0 !important; }
}