/* sm-week.css: the Week section of the stage 2 page (WEEK-UI). Loads after sm-ar.css.
   Same pattern as How: a scene box, the title unboxed over the sky, a row of hud-panel cards. The rail is logical (it runs
   right to left in Arabic on its own); only the scene box and the title plate are physical. Pixel AE sizes are multiples of 10. */

.sm .wk-stage { position: relative; display: flow-root; overflow: hidden; background: var(--ground-1, var(--hud-n1)); padding-block: 0; }
/* the S=2 snap (sm-hud.js) gives the next section a 1 px top margin when Week ends on an odd y; that strip is N1 here, not body N0 */
.sm .wk-stage { box-shadow: 0 1px 0 var(--ground-1, var(--hud-n1)); }
.sm .wk-scene-box { position: relative; inline-size: 100%; block-size: 800px; overflow: hidden; background: var(--hud-n1); }
.sm .wk-scene {
  position: absolute; inset-block-start: 0; left: 0; inline-size: 1440px; block-size: 800px;
  direction: ltr; image-rendering: pixelated;
}
.sm .wk-scene.is-placeholder { background: var(--hud-n1); }

/* title */
.sm .wk-plate { z-index: 2; }
.sm .wk-label { font-size: 25px; line-height: 25px; margin-block-end: 10px; }
.sm .wk-title { font-size: 50px; line-height: 56px; text-wrap: balance; }
.sm .wk-sub { margin: 12px 0 0; max-inline-size: 52ch; color: var(--hud-prose); line-height: 28px; }
[dir="rtl"] .sm .wk-sub { line-height: 32px; }

.sm .wk-prom { position: relative; }
.sm .wk-rail { list-style: none; margin: 0; padding: 0; display: grid; position: relative; z-index: 2; }

/* station: a tick on the line, a stem down to the card */
.sm .wk-station { position: relative; padding-block-start: 80px; display: flex; flex-direction: column; min-inline-size: 0; }
.sm .wk-station::before { content: ''; position: absolute; inset-block-start: -3px; inset-inline-start: 16px; inline-size: 8px; block-size: 8px; background: var(--hud-c3); }
.sm .wk-station::after { content: ''; position: absolute; inset-block-start: 5px; inset-inline-start: 19px; inline-size: 2px; block-size: 75px; background: var(--hud-c1); }
.sm .wk-card { flex: 1 1 auto; padding: 14px 12px 16px; text-align: start; }

/* chip: the date; wraps, never clips */
.sm .wk-date { display: block; inline-size: fit-content; max-inline-size: 100%; padding: 4px 10px; margin-block-end: 10px; line-height: 25px; white-space: normal; }
.sm .wk-date--real { color: var(--hud-hl); }

/* name: the cyan square mark of the pillar and step names */
.sm .wk-name { margin: 0 0 8px; line-height: 25px; }
.sm .wk-name::before { content: ''; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: 10px; background: var(--hud-hl); vertical-align: middle; position: relative; inset-block-start: -2px; }
.sm .wk-line { margin: 0; line-height: 28px; }
/* the competition list: three dated lines under the card's line, each led by the cyan square mark */
.sm .wk-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sm .wk-list li { position: relative; padding-inline-start: 18px; line-height: 28px; }
.sm .wk-list li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 10px; inline-size: 8px; block-size: 8px; background: var(--hud-hl); }
.sm .wk-list bdi { white-space: nowrap; }

/* Cubie stands on the compete card's top frame; 2x the 50 x 37 sprite, never mirrored, never scaled otherwise */
.sm .wk-cubie { position: absolute; inset-block-start: -76px; inset-inline-end: 16px; inline-size: 100px; block-size: 74px; pointer-events: none; }
.sm .wk-cubie img { position: absolute; inset: 0; inline-size: 100px; block-size: 74px; image-rendering: pixelated; }
.sm .wk-cubie-blink { opacity: 0; animation: wk-blink 3.2s step-end infinite; }
@keyframes wk-blink { 0%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }
html.still .sm .wk-cubie-blink { animation: none; }
@media (prefers-reduced-motion: reduce) { .sm .wk-cubie-blink { animation: none; } }

/* ── 768 and up ────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .sm .wk-stage { --ox: var(--stage-ox, 0px); --oxr: var(--stage-ox-r, 0px); }
  .sm .wk-scene { inline-size: 100%; }
  .sm .wk-plate[data-scene="physical"] {
    --x: 72px;
    position: absolute; inset-block-start: 48px; z-index: 2; direction: ltr;
    left: calc(var(--ox) + max(calc(min(var(--gutter), var(--x)) - var(--ox)), var(--x)));
    max-inline-size: min(640px, calc(100% - var(--ox) - 72px - var(--gutter)));
  }
  [dir="rtl"] .sm .wk-plate[data-scene="physical"] {
    direction: rtl; left: auto;
    right: calc(var(--oxr) + max(calc(min(var(--gutter), var(--x)) - var(--oxr)), var(--x)));
    max-inline-size: min(640px, calc(100% - var(--oxr) - 72px - var(--gutter)));
  }
  .sm .wk-rail {
    --x: 72px; --r: 72px;
    margin-left:  calc(var(--ox)  + max(calc(min(var(--gutter), var(--x)) - var(--ox)),  var(--x)));
    margin-right: calc(var(--oxr) + max(calc(min(var(--gutter), var(--r)) - var(--oxr)), var(--r)));
    padding-block-end: 96px;
  }
}
@media (min-width: 1024px) {
  .sm .wk-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sm .wk-rail::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px; background: var(--hud-c1); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sm .wk-rail { grid-template-columns: minmax(0, 1fr); gap: 32px; max-inline-size: 632px; margin-inline: auto; }
}

/* ── phone: the scene is the whole art at scale 1; title, then the rail, on the one ground ────────── */
@media (max-width: 767px) {
  .sm .wk-stage { overflow: visible; }
  .sm .wk-scene-box { block-size: 400px; }
  .sm .wk-scene { inline-size: 100%; block-size: 400px; left: 0; inset-block-start: 0; }   /* S = 1 on phones: the corniche manifest's phone block; the engine centres on focusX 560 and pins the Towers inside the window */
  .sm .wk-paper { padding: 28px 22px 0; }
  .sm .wk-plate[data-scene="physical"] { position: relative; }
  .sm .wk-title { font-size: 37.5px; line-height: 44px; }
  .sm .wk-rail { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding: 16px 22px 24px; }
  .sm .wk-station { inline-size: min(340px, 100%); padding-block-start: 56px; }
  .sm .wk-station::after { block-size: 51px; }
}

/* ── Arabic: Pixel AE sizes, 20 / 30 / 40 only (specificity 0,3,0, after sm-ar.css) ── */
[dir="rtl"] .sm .wk-title { font-size: 40px; line-height: 52px; font-weight: 400; }
[dir="rtl"] .sm :is(.wk-label, .wk-name, .wk-date) { font-size: 20px; line-height: 28px; font-weight: 700; }
[dir="rtl"] .sm .wk-line { line-height: 32px; }
[dir="rtl"] .sm .wk-list li { line-height: 32px; }
[dir="rtl"] .sm .wk-list li::before { inset-block-start: 12px; }
@media (max-width: 767px) {
  [dir="rtl"] .sm .wk-title { font-size: 30px; line-height: 42px; font-weight: 400; }
}

/* Arabic, 1024 and up (the brief named 1024 to 1279; 1280 and wider showed the same 13 px air): the plate is right-anchored, so the sub's lines start under the Towers' x range whatever the measure; it ends 24 px or more above the tallest spire tip instead (tip at y 224 of the section) */
@media (min-width: 1024px) {
  [dir="rtl"] .sm .wk-sub { max-inline-size: 560px; margin-block-start: 6px; line-height: 28px; }
}