/* Sky legacy bridge (site redesign W0, 3 Nov 2026): re-skins the shared classes of the old (pre-Sky) pages with the Sky
   tokens from sky-tokens.css, so a tap from a Sky hub no longer lands in a different-looking site.
   Presentation only: no layout, size, display or state logic is changed, and correctness/status colours are left alone.

   WHERE IT APPLIES (all rules are screen-only, so print views are untouched):
   A  pages with the full Sky shell: html[data-sky] body:has(> .sk-top)
      (the top bar exists only on "space" pages; admin, /api, focus screens, exam runs and games have no top bar)
      - class rules (.primary, .secondary, .panel, .pill, ...) anywhere on the page, except inside the excluded areas;
      - element rules (headings, form fields) only inside the known legacy page roots (allowlist below).
   B  the speed-math menu on /play (a focus screen): body:has(> .kt-focus-back) > .family-shell, buttons/tiles/headings only.
   EXCLUDED (never matched): Sky's own markup (.sk, .skl), the classroom (.tc), the R3 player (.r3-root), the exam hubs
   (.nt-hub, .onet-hub), the W2 exam pages (.ske, .ske-pv), the shop/wardrobe (.wardrobe), the speed-math board and any game surface (.game, .sprint-arena,
   .keypad), and anything marked data-sky-legacy="off". Static apps (/avatar-studio, /wtn-studio, ...) never load this file.
   Browsers without :has() drop every rule here and keep the old look (safe fallback).
   Cascade: this file sits before learning-universe.css / sky-isles.css (React precedence group "sky-legacy"), so it wins by
   specificity (0,4,2+) over the legacy (0,1,2)-(0,2,2) rules, and never competes with sky-isles (excluded areas). */
@media screen {

/* ---------- A. typography inside legacy page roots ---------- */
html[data-sky] body:has(> .sk-top) > :is(.family-shell, .support-shell, .tp-admin, .learning-hub, .lg-parent-slot, .sa-report, .c03, .class-daily, .owner-tests, main:not([class])) {
  font-family: var(--sky-body);
}
html[data-sky] body:has(> .sk-top) > :is(.family-shell, .support-shell, .tp-admin, .learning-hub, .lg-parent-slot, .sa-report, .c03, .class-daily, .owner-tests, main:not([class])) :is(h1, h2, h3):not(:is(.game, .sprint-arena, [data-sky-legacy="off"]) *) {
  font-family: var(--sky-head); font-weight: 600; letter-spacing: 0; line-height: 1.3;
}

/* ---------- A. form fields inside legacy page roots (label above, radius 12, 1.5px outline, teal focus) ---------- */
html[data-sky] body:has(> .sk-top) > :is(.family-shell, .support-shell, .tp-admin, .learning-hub, .lg-parent-slot, .sa-report, .c03, .class-daily, .owner-tests, main:not([class])) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea, [data-slot="select-trigger"]):not(:is(.game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background-color: var(--sky-card); color: var(--sky-ink); border: 1.5px solid var(--sky-field); border-radius: var(--sky-r-tile); box-shadow: none;
}
html[data-sky] body:has(> .sk-top) > :is(.family-shell, .support-shell, .tp-admin, .learning-hub, .lg-parent-slot, .sa-report, .c03, .class-daily, .owner-tests, main:not([class])) :is(input, select, textarea, [data-slot="select-trigger"]):focus-visible:not(:is(.game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  border-color: var(--sky-teal-ink); box-shadow: var(--sky-ring);
}
html[data-sky] body:has(> .sk-top) > :is(.family-shell, .support-shell, .tp-admin, .learning-hub, .lg-parent-slot, .sa-report, .c03, .class-daily, .owner-tests, main:not([class])) :is(input, textarea)::placeholder {
  color: var(--sky-muted);
}
html[data-sky] body:has(> .sk-top) :is(input[type="checkbox"], input[type="radio"]):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  accent-color: var(--sky-teal-ink);
}

/* ---------- A. buttons: gold primary, ghost secondary, teal tool button ---------- */
html[data-sky] body:has(> .sk-top) .primary:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: linear-gradient(180deg, var(--sky-gold-top), var(--sky-gold) 45%, var(--sky-gold-2)); color: var(--sky-on-gold);
  border-color: transparent; border-radius: var(--sky-r-btn); box-shadow: var(--sky-sh-gold); text-shadow: none;
  font-family: var(--sky-head); font-weight: 600;
}
html[data-sky] body:has(> .sk-top) .secondary:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-card); color: var(--sky-ink); border: 1.5px solid var(--sky-field); border-radius: var(--sky-r-btn); box-shadow: none;
  font-family: var(--sky-head); font-weight: 600;
}
html[data-sky] body:has(> .sk-top) :is(.learning-primary, .tp-primary):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: linear-gradient(180deg, var(--sky-teal-top), var(--sky-teal-2)); color: var(--sky-on-teal);
  border-color: transparent; border-radius: var(--sky-r-btn); box-shadow: var(--sky-sh-teal); text-shadow: none;
  font-family: var(--sky-head); font-weight: 600;
}
html[data-sky] body:has(> .sk-top) :is(.primary, .tp-primary, .learning-primary):is(:disabled, [aria-disabled="true"]):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *),
html[data-sky] body:has(> .sk-top) .secondary:is(:disabled, [aria-disabled="true"]):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  opacity: .45; box-shadow: none; filter: none; cursor: not-allowed;
}
html[data-sky] body:has(> .sk-top) .secondary:hover:not(:disabled):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-zebra); border-color: var(--sky-teal-ink);
}
html[data-sky] body:has(> .sk-top) :is(.primary, .tp-primary, .learning-primary):hover:not(:disabled):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  filter: brightness(1.04) saturate(1.05);
}

/* ---------- A. panels, cards, tiles (white, hairline, soft shadow; radius 20 panels / 14 cards) ---------- */
html[data-sky] body:has(> .sk-top) :is(.panel, .table-wrap, .legacy-banner, .tp-panel, .support-card):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background-color: var(--sky-card); border: 1px solid var(--sky-hair); border-radius: var(--sky-r-panel); box-shadow: var(--sky-sh-card);
}
html[data-sky] body:has(> .sk-top) :is(.metric, .skill-card):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background-color: var(--sky-card); border: 1px solid var(--sky-hair); border-radius: var(--sky-r-card); box-shadow: var(--sky-sh-card);
}
html[data-sky] body:has(> .sk-top) .metric:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) b {
  color: var(--sky-ink); font-family: var(--sky-head); font-weight: 600;
}
html[data-sky] body:has(> .sk-top) .table-wrap:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) th {
  background: var(--sky-zebra); color: var(--sky-muted); font-family: var(--sky-head); font-weight: 600;
}
/* mode tiles (speed-math modes on /student, mode progress) */
html[data-sky] body:has(> .sk-top) :is(.mode, .mp-mode):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-card); border: 1.5px solid var(--sky-hair); border-radius: var(--sky-r-card); box-shadow: var(--sky-sh-card); color: var(--sky-ink);
}
html[data-sky] body:has(> .sk-top) :is(.mode.selected, .mode:has(input:checked), .mp-mode[aria-pressed="true"], .mp-mode.active, .mp-mode.selected):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-teal-soft); border-color: var(--sky-teal); color: var(--sky-teal-ink);
}

/* ---------- A. pills, kickers, notices ---------- */
html[data-sky] body:has(> .sk-top) .pill:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-teal-soft); color: var(--sky-teal-ink); border-color: transparent; border-radius: var(--sky-r-pill); font-weight: 600;
}
html[data-sky] body:has(> .sk-top) :is(.eyebrow, .hero-tag):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  color: var(--sky-teal-ink); font-weight: 600; letter-spacing: .02em;
}
html[data-sky] body:has(> .sk-top) .notice:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-warn-bg); color: var(--sky-warn); border-color: var(--sky-gold-ink); border-radius: var(--sky-r-card);
}
html[data-sky] body:has(> .sk-top) .success-box:not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
  background: var(--sky-ok-bg); color: var(--sky-ok); border-radius: var(--sky-r-card);
}

/* ---------- B. the speed-math menu on /play (focus screen): never the board (.game) ---------- */
html[data-sky] body:has(> .kt-focus-back) > .family-shell :is(h1, h2):not(:is(.game, .sprint-arena, [data-sky-legacy="off"]) *) {
  font-family: var(--sky-head); font-weight: 600; letter-spacing: 0; line-height: 1.3;
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell .primary:not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  background: linear-gradient(180deg, var(--sky-gold-top), var(--sky-gold) 45%, var(--sky-gold-2)); color: var(--sky-on-gold);
  border-color: transparent; border-radius: var(--sky-r-btn); box-shadow: var(--sky-sh-gold); text-shadow: none;
  font-family: var(--sky-head); font-weight: 600;
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell .primary:is(:disabled, [aria-disabled="true"]):not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  opacity: .45; box-shadow: none; cursor: not-allowed;
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell .secondary:not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  background: var(--sky-card); color: var(--sky-ink); border: 1.5px solid var(--sky-field); border-radius: var(--sky-r-btn); box-shadow: none;
  font-family: var(--sky-head); font-weight: 600;
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell .mode:not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  background: var(--sky-card); border: 1.5px solid var(--sky-hair); border-radius: var(--sky-r-card); box-shadow: var(--sky-sh-card); color: var(--sky-ink);
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell :is(.mode.selected, .mode:has(input:checked)):not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  background: var(--sky-teal-soft); border-color: var(--sky-teal); color: var(--sky-teal-ink);
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell .pill:not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  background: var(--sky-teal-soft); color: var(--sky-teal-ink); border-color: transparent; border-radius: var(--sky-r-pill); font-weight: 600;
}
html[data-sky] body:has(> .kt-focus-back) > .family-shell :is(input[type="checkbox"], input[type="radio"]):not(.game *, .sprint-arena *, .keypad *, [data-sky-legacy="off"] *) {
  accent-color: var(--sky-teal-ink);
}

}
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-sky] body:has(> .sk-top) :is(.primary, .tp-primary, .learning-primary, .secondary):not(:is(.sk, .skl, .tc, .r3-root, .nt-hub, .onet-hub, .wardrobe, .ske, .ske-pv, .game, .sprint-arena, .keypad, [data-sky-legacy="off"]) *) {
    transition: filter .15s, background-color .15s, border-color .15s;
  }
}