/* ============================================================
   Higher Physics — shared stylesheet (hub + topic pages)
   Blue identity. Light + dark mode via prefers-color-scheme.
   Page-specific widget CSS stays inline on each topic page.
   ============================================================ */

/* ---------- GLOBAL FIX: prevent clipping/overflow ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { margin: 0; overflow-x: hidden; }
img, iframe { max-width: 100%; height: auto; display: block; }

/* ---------- A11Y HELPERS ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -999px; top: 10px;
  background: var(--accent);
  color: #ffffff;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  font-weight: 900;
  z-index: 1200;
  box-shadow: 0 12px 24px rgba(0,0,0,0.14);
}
.skip-link:focus {
  left: 10px;
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
}

/* ============================================================
   THEME TOKENS — light mode defaults
   ============================================================ */
:root {
  --font-stack: "Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;

  --bg0:#f6fbff;
  --bg1:#eef8ff;
  --bg2:#ffffff;

  --text:#0b1630;
  --muted:#2c466a;

  --accent:#0a6fbf;
  --accent-2:#0a4f86;
  /* hub-tile bands (assets/css/hub-tiles.css), one colour per course unit.
     White ink on all three: electricity 5.20:1 · dynamic universe 7.90:1 · particles 5.47:1 */
  --tile-electricity:#0a6fbf; --tile-odu:#4338ca; --tile-pw:#0f766e;
  --tile-ink:#ffffff;
  /* ink for a pill filled with --accent. The dark accent is a LIGHT blue, so white
     text on it measures 1.88:1 — it has to flip. */
  --on-accent:#ffffff;
  --page-accent:var(--accent);
  --menu-accent:var(--accent);

  --card:#ffffff;
  --glass:rgba(255,255,255,0.86);
  --surface-2:rgba(10,111,191,0.05);

  --border:rgba(11,22,48,0.14);
  --border-soft:rgba(11,22,48,0.10);
  --border-accent:rgba(10,111,191,0.18);
  --border-strong:rgba(10,111,191,0.28);

  --shadow:0 18px 40px rgba(0,0,0,0.10);
  --shadow-soft:0 10px 22px rgba(0,0,0,0.08);
  --shadow-hover:0 18px 34px rgba(10,111,191,0.16);

  --tile-bg:rgba(255,255,255,0.92);
  --label-bg:rgba(255,255,255,0.88);
  --overlay-bg:rgba(255,255,255,0.82);
  --subnav-wrap-bg:rgba(238,248,255,0.80);
  --subnav-bg:rgba(255,255,255,0.78);
  --summary-bg:rgba(255,255,255,0.70);
  --footer-bg:rgba(255,255,255,0.80);

  /* accent glows used in the body + emoji-tile backgrounds */
  --glow-1:rgba(10,111,191,0.14);
  --glow-2:rgba(10,79,134,0.10);

  --radius:18px;

  --focus-ring:3px solid rgba(10,111,191,0.55);
  --focus-offset:4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg0:#0a0f1f;
    --bg1:#0c1226;
    --bg2:#070b18;

    --text:#eaf0ff;
    --muted:#9fb3d6;

    --accent:#5cc8ff;
    --on-accent:#0b1630;   /* 7.65:1 on the dark accent */
    --accent-2:#aaddff;

    --card:#121a30;
    --glass:rgba(20,28,52,0.86);
    --surface-2:rgba(92,200,255,0.10);

    --border:rgba(255,255,255,0.16);
    --border-soft:rgba(255,255,255,0.10);
    --border-accent:rgba(92,200,255,0.30);
    --border-strong:rgba(92,200,255,0.42);

    --shadow:0 18px 40px rgba(0,0,0,0.50);
    --shadow-soft:0 10px 22px rgba(0,0,0,0.40);
    --shadow-hover:0 18px 34px rgba(92,200,255,0.22);

    --tile-bg:rgba(20,28,52,0.92);
    --label-bg:rgba(10,15,33,0.86);
    --overlay-bg:rgba(8,12,26,0.70);
    --subnav-wrap-bg:rgba(10,15,31,0.82);
    --subnav-bg:rgba(18,26,48,0.78);
    --summary-bg:rgba(18,26,48,0.66);
    --footer-bg:rgba(8,12,26,0.55);

    --glow-1:rgba(92,200,255,0.16);
    --glow-2:rgba(60,90,200,0.14);
  }
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-stack);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 12% 0%, var(--glow-1), transparent 62%),
    radial-gradient(900px 520px at 88% 6%, var(--glow-2), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ============================================================
   BANNER
   ============================================================ */
.banner-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  z-index: 2;
  aspect-ratio: 3 / 1;
  background: var(--glass);
}
.banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.banner-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(10,111,191,0.20),
    rgba(10,79,134,0.14),
    rgba(255,255,255,0.00));
  mix-blend-mode: multiply;
  pointer-events: none;
  display: none;
}

.banner-overlay-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--border-soft);
  padding: .95rem .9rem;
  text-align: center;
}
/* Hub/landing pages: banner art already shows the title — hide the duplicate bar (SR-only) */
.banner-wrap.is-hub .banner-overlay-text {
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  inset: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.banner-overlay-text h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--text);
}
.banner-overlay-text p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: .95rem;
}

/* ============================================================
   STICKY JUMP MENU
   ============================================================ */
.subnav-wrap {
  position: sticky;
  top: 0;
  z-index: 320;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: var(--subnav-wrap-bg);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-bottom: 1px solid var(--border-soft);
}
.subnav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid var(--border-accent);
  background: var(--subnav-bg);
}
.subnav-links {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.subnav-links::-webkit-scrollbar { display: none; }

/* on narrow phones keep a single scrollable row — never wrap (wrapping stacks the links and covers the screen) */
@media (max-width: 560px) {
  .subnav-links { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
}

.subnav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 900;
  color: var(--text);
  padding: 8px 4px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  opacity: 0.95;
  font-size: 1rem;
}
.subnav-link:hover {
  opacity: 1;
  border-bottom-color: var(--accent);
}
.subnav-link.is-active {
  opacity: 1;
  border-bottom-color: var(--accent);
}

/* standout call-to-action pinned to the right of the sticky bar */
.subnav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 7px 14px;
  min-height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3bb0ff, #0a4f86);
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(10,111,191,0.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.subnav-cta:hover,
.subnav-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(10,111,191,0.45);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.page-wrap {
  max-width: 1200px;
  margin: 1rem auto 2rem;
  padding: 0 1rem 4rem;
  flex: 1;
  width: 100%;
}
.page-wrap > section { scroll-margin-top: 170px; }

.panel {
  background: var(--glass);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1rem;
}
.panel h2 {
  margin: 0 0 .35rem;
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--text);
}
.panel p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}
.muted { color: var(--muted); }

/* ---------- collapsibles ---------- */
details.mini {
  margin-top: .8rem;
  border-radius: 16px;
  border: 1px solid var(--border-accent);
  background: var(--surface-2);
  overflow: hidden;
}
details.mini summary {
  cursor: pointer;
  padding: .85rem 1rem;
  font-weight: 900;
  color: var(--text);
  list-style: none;
  display: flex;
  gap: .55rem;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  background: var(--summary-bg);
}
details.mini summary::-webkit-details-marker { display: none; }
details.mini summary::after {
  content: "▾";
  margin-left: auto;
  font-weight: 900;
  opacity: .8;
  transition: transform .18s ease;
}
details.mini[open] summary::after { transform: rotate(180deg); }

.details-inner {
  padding: .9rem 1rem;
  color: var(--muted);
  font-weight: 800;
}
.details-inner ul {
  margin: .35rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.75;
}
.details-inner li { margin: .35rem 0; }

/* ============================================================
   UNITS & TOPICS (collapsed roadmap)
   ============================================================ */
.unit-group { margin-top: 1.1rem; }
.unit-group:first-child { margin-top: .2rem; }
.unit-title {
  margin: 0 0 .1rem;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--text);
}

.topic-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr));
  margin-top: .7rem;
}
.topic-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .85rem;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-accent);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  line-height: 1.25;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.topic-link:hover,
.topic-link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}
.topic-link .go { color: var(--accent-2); font-weight: 900; flex-shrink: 0; }

/* coming-soon placeholder: inert, not focusable, quiet (no per-item badge) */
.topic-link.soon {
  pointer-events: none;
  background: var(--surface-2);
  color: var(--muted);
  border-style: dashed;
  border-color: var(--border-soft);
  font-weight: 800;
}

/* ============================================================
   CARD TILES (resources)
   ============================================================ */
.tile-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr));
  align-items: stretch;
  margin-top: .9rem;
}
@media (max-width: 560px) {
  .tile-grid { grid-template-columns: 1fr; }
}

.class-tile {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 132px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.class-tile:hover,
.class-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
}
.class-tile.featured {
  border: 2px solid var(--accent);
}

/* coloured gradient header carries the title; body carries the description */
.tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem .9rem;
  min-height: 66px;
  background: linear-gradient(135deg, var(--g1, #3258e0), var(--g2, #1b3aa0));
}
.tile-title {
  font-weight: 900;
  font-size: 1.06rem;
  line-height: 1.2;
  color: #fff;
}
.tile-head .ext-mark { color: #fff; opacity: .92; }

.tile-body {
  flex: 1;
  padding: .7rem .9rem .85rem;
}
.tile-sub {
  font-weight: 800;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}
.ext-mark {
  font-weight: 900;
  flex-shrink: 0;
}

/* tile gradient palette — white title text stays legible on every one */
.t-blue    { --g1:#3258e0; --g2:#1b3aa0; }
.t-cyan    { --g1:#0e7d99; --g2:#0b5f76; }
.t-indigo  { --g1:#5048d6; --g2:#3a32b0; }
.t-violet  { --g1:#7c3aed; --g2:#5b21b6; }
.t-emerald { --g1:#0f7a5a; --g2:#065f46; }
.t-rose    { --g1:#d61f47; --g2:#9f1239; }
.t-amber   { --g1:#b45309; --g2:#7c2d12; }
.t-sky     { --g1:#0277b3; --g2:#055a86; }
.t-navy    { --g1:#2a4bbd; --g2:#172554; }
.t-green   { --g1:#15803d; --g2:#14532d; }
.t-purple  { --g1:#8b2fd6; --g2:#6b21a8; }
.t-orange  { --g1:#c2410c; --g2:#9a3412; }
.t-pink    { --g1:#c41d6f; --g2:#9d174d; }
.t-teal    { --g1:#0b7d73; --g2:#0a5f57; }
.t-slate   { --g1:#506074; --g2:#334155; }

footer {
  text-align: center;
  padding: 1rem;
  background: var(--footer-bg);
  border-top: 1px solid var(--border-soft);
  font-size: 0.92rem;
  margin-top: auto;
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 720px) {
  .banner-overlay-text p { display: none; }
}
@media (max-width: 560px) {
  .banner-overlay-text h1 { font-size: 1.02rem; }
  .panel { padding: 1rem; }
}

/* ---- deck-link layer ------------------------------------------------------
   Lifted out of classes/higher/slides.html and capacitors.html on 28 August 2026,
   unchanged. They were byte-identical wherever they appeared in both pages. This is
   the Higher half of the same pattern Engineering carries in engineering-science.css:
     .top-pill   the deck link on a topic page
     .deck-card  the listing on the level's slides hub
   One component per job, per subject palette — see CLAUDE.md "Hub tiles". */

.top-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin:.1rem 0 .9rem; }
.top-pill {
      display:inline-flex; align-items:center; gap:.45rem;
      padding:.5rem .95rem; border-radius:999px;
      border:1.5px solid var(--border-strong); background:var(--surface-2);
      color:var(--accent-2); font-weight:900; font-size:.9rem; text-decoration:none;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }
.top-pill:hover, .top-pill:focus-visible { transform:translateY(-1px); box-shadow:var(--shadow-soft); border-color:var(--accent); }
.top-pill .pill-ic { flex-shrink:0; }
.deck-list {
      display:grid; gap:12px; margin-top:.85rem;
      grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
    }
.deck-card {
      display:flex; align-items:center; gap:.8rem;
      padding:.75rem .9rem; min-height:74px;
      border-radius:14px; border:1px solid var(--border-accent);
      background:var(--card); color:var(--text); text-decoration:none;
      transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
      -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    }
a.deck-card:hover, a.deck-card:focus-visible {
      transform:translateY(-1px); border-color:var(--border-strong); box-shadow:var(--shadow-soft);
    }
.deck-card .deck-txt { display:flex; flex-direction:column; gap:.12rem; min-width:0; flex:1; }
.deck-name { font-weight:900; line-height:1.22; }
.deck-meta { font-weight:800; font-size:.78rem; color:var(--muted); letter-spacing:.01em; }
.deck-card .go { color:var(--accent-2); font-weight:900; flex-shrink:0; }
.deck-card.soon {
      background:var(--surface-2); color:var(--muted);
      border-style:dashed; border-color:var(--border-soft);
    }
.deck-card.soon .deck-ic { opacity:.45; }
.deck-card.soon .deck-meta { opacity:.9; }
.deck-ic { width:44px; height:44px; flex-shrink:0; display:block; }
.unit-note { margin:.15rem 0 0; font-weight:800; color:var(--muted); font-size:.9rem; line-height:1.5; }