/* ==========================================================================
   FEA for Power Electronics
   ansys_pe_web | ANSYS 2025 R2
   Design: unified surface — DEC-003
   ========================================================================== */

/* System font stack — Helvetica Neue on macOS/iOS, Arial on Windows */

/* --------------------------------------------------------------------------
   Custom properties — light mode
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Single surface — sidebar and content share this */
  --c-bg:           #FAFAFA;   /* zinc-50 — not pure white, ~19:1 contrast */
  --c-surface:      #FFFFFF;

  --c-border:       #E4E4E7;   /* zinc-200 */
  --c-border-light: #F4F4F5;   /* zinc-100 */

  --c-text:         #09090B;   /* zinc-950 — primary text, headings, body */
  --c-text-muted:   #71717A;   /* zinc-500 — nav labels, captions */
  --c-text-subtle:  #A1A1AA;   /* zinc-400 — unavailable phases, placeholders */

  --c-primary:      #09090B;   /* same as text — header uses this */
  --c-accent:       #B45309;   /* amber-700 — 5.8:1 on #FAFAFA, passes WCAG AA */
  --c-accent-hover: #92400E;   /* amber-800 */
  --c-accent-dim:   #FEF3C7;   /* amber-100 — callout bg only */

  --font:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;
  --t-4xl:  3rem;

  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;
  --s-4:  1rem;     --s-5:  1.25rem;  --s-6:  1.5rem;
  --s-8:  2rem;     --s-10: 2.5rem;   --s-12: 3rem;
  --s-16: 4rem;     --s-20: 5rem;     --s-24: 6rem;

  --max-w:    960px;
  --r-sm:     4px;  --r: 8px;  --r-lg: 12px;  --r-xl: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--c-border);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 0 0 1px var(--c-border);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 0 0 1px #D4D4D8;

  --header-h: 57px;
  --sidebar-w: 240px;
}

/* --------------------------------------------------------------------------
   Dark mode — designed independently, not derived from light mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Single surface — same dark bg everywhere */
    --c-bg:           #18181B;   /* zinc-900 — not black, no halation */
    --c-surface:      #09090B;   /* same — no second surface */

    --c-border:       #27272A;   /* zinc-800 */
    --c-border-light: #18181B;   /* zinc-900 */

    --c-text:         #D4D4D8;   /* zinc-300 — ~11:1 on zinc-900, no glow */
    --c-text-muted:   #A1A1AA;   /* zinc-400 — nav, secondary */
    --c-text-subtle:  #52525B;   /* zinc-600 — unavailable, placeholder */

    --c-primary:      #09090B;
    --c-accent:       #F59E0B;   /* amber-400 — readable on dark */
    --c-accent-hover: #D97706;   /* amber-500 */
    --c-accent-dim:   rgba(245,158,11,0.08);

    --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--c-border);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 0 0 1px var(--c-border);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px var(--c-border);
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   Shared layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* --------------------------------------------------------------------------
   Header — unified surface, border-only separation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-logo {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: none;
}
.site-logo:hover { color: var(--c-accent); }


/* --------------------------------------------------------------------------
   Hero — landing page
   Unified surface: no background-color override, just generous padding + border
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--s-20) var(--s-16);
  border-bottom: 1px solid var(--c-border);
}

.hero h1 {
  font-size: clamp(var(--t-3xl), 5.5vw, var(--t-4xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-text);
  margin-bottom: var(--s-5);
  max-width: 18ch;
}

.hero-description {
  font-size: var(--t-lg);
  line-height: 1.75;
  color: var(--c-text-muted);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   Landing page: curriculum grid
   -------------------------------------------------------------------------- */
main { flex: 1; padding-block: var(--s-16); }

.sect-header { margin-bottom: var(--s-10); }

.sect-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: var(--s-3);
}

.sect-header h2 {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.sect-header p {
  font-size: var(--t-base);
  color: var(--c-text-muted);
  max-width: 60ch;
  line-height: 1.7;
}

.curriculum-grid {
  list-style: none;
  display: grid;
  gap: var(--s-4);
}

.curriculum-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color 0.15s;
}

.curriculum-card:has(.card-cta):hover {
  border-color: var(--c-text-muted);
}

.card-section-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.curriculum-card h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text);
  line-height: 1.3;
}

.curriculum-card p {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.7;
  flex: 1;
  margin-top: var(--s-1);
}

.card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.tag {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-text-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 2px var(--s-3);
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-light);
}
.card-cta:hover { color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   Content page layout
   -------------------------------------------------------------------------- */
.page-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Sidebar — unified surface, border-only separation
   -------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--c-bg);        /* same as page — no separate surface */
  border-right: 1px solid var(--c-border);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--s-6) var(--s-4);
}

.sidebar-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-3);
  display: block;
}

.nav-phases {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-phase > a,
.nav-phase > span {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  line-height: 1.45;
  border-left: 2px solid transparent;
  transition: color 0.12s;
}

.nav-phase > a:hover { color: var(--c-text); }

.nav-phase.is-active > a {
  border-left-color: var(--c-accent);
  color: var(--c-text);
  font-weight: 600;
  padding-left: calc(var(--s-3) - 2px);
}

.nav-phase > span {
  color: var(--c-text-subtle);
  cursor: default;
  font-style: italic;
}

.nav-sub {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  margin-left: calc(var(--s-3) + 6px);
}

.nav-sub a {
  display: block;
  padding: 3px var(--s-2);
  font-size: 0.8125rem;
  color: var(--c-text-subtle);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 0.12s;
}
.nav-sub a:hover { color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   Content main
   -------------------------------------------------------------------------- */
.content-main {
  flex: 1;
  min-width: 0;
  padding: var(--s-12) var(--s-12) var(--s-20);
  max-width: 760px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-subtle);
  margin-bottom: var(--s-8);
}

.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb-sep { color: var(--c-text-subtle); }

/* --------------------------------------------------------------------------
   Phase header
   -------------------------------------------------------------------------- */
.phase-header {
  margin-bottom: var(--s-12);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--c-border);
}

.phase-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: var(--s-3);
}

.phase-header h1 {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: var(--s-5);
  line-height: 1.15;
}

.phase-intro {
  font-size: var(--t-lg);
  color: var(--c-text-muted);
  line-height: 1.75;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Topic sections
   -------------------------------------------------------------------------- */
.topic {
  margin-bottom: var(--s-16);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

.topic + .topic {
  padding-top: var(--s-16);
  border-top: 1px solid var(--c-border-light);
}

.topic h2 {
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin-bottom: var(--s-6);
  line-height: 1.25;
}

.topic h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-text);
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  line-height: 1.35;
}

.topic p {
  margin-bottom: var(--s-5);
  line-height: 1.75;
  color: var(--c-text);
}

.topic p:last-child { margin-bottom: 0; }

.topic ul, .topic ol {
  margin: var(--s-3) 0 var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.topic li { line-height: 1.65; color: var(--c-text); }

/* Definition list */
dl { margin-top: var(--s-4); }
dt {
  font-weight: 600;
  color: var(--c-text);
  margin-top: var(--s-5);
  margin-bottom: var(--s-1);
}
dt:first-child { margin-top: 0; }
dd {
  margin-left: var(--s-5);
  color: var(--c-text-muted);
  line-height: 1.7;
}

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--c-border-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: var(--c-text);
}

/* Inline images — border for light mode visibility */
.topic img {
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  margin-block: var(--s-5);
}

/* Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin-block: var(--s-6);
}

.data-table th {
  text-align: left;
  font-weight: 600;
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
  border-bottom: 2px solid var(--c-border);
}

.data-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border-light);
  vertical-align: top;
  line-height: 1.55;
  color: var(--c-text);
}

.data-table tr:last-child td { border-bottom: none; }

/* Key points callout */
.key-points {
  background: var(--c-accent-dim);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-8);
}

.key-points-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  display: block;
  margin-bottom: var(--s-3);
}

.key-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.key-points li {
  font-size: var(--t-sm);
  color: var(--c-text);
  line-height: 1.65;
  padding-left: var(--s-4);
  position: relative;
}

.key-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* Annotated example note (tier: 3.0–3.9) */
.example-note {
  border-left: 3px solid var(--c-text-muted);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-8);
  background: var(--c-border-light);
}

.example-note-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: block;
  margin-bottom: var(--s-3);
}

.example-note p {
  font-size: var(--t-sm);
  color: var(--c-text);
  line-height: 1.7;
  margin-bottom: var(--s-3);
}
.example-note p:last-child { margin-bottom: 0; }

/* Citations */
sup.cite {
  font-size: 0.7em;
  color: var(--c-accent);
  font-weight: 600;
}

.references {
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-border);
}

.references h2 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-5);
}

.references ol {
  margin: 0;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.references li {
  font-size: var(--t-sm);
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Phase navigation arrows
   -------------------------------------------------------------------------- */
.phase-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-16);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-border);
}

.phase-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--c-text);
  transition: border-color 0.15s;
  min-width: 200px;
}

.phase-nav-btn:hover {
  border-color: var(--c-text-muted);
  color: var(--c-text);
}

.phase-nav-btn.is-prev { flex-direction: row; }
.phase-nav-btn.is-next { flex-direction: row-reverse; margin-left: auto; }
.phase-nav-btn.is-disabled { opacity: 0.25; pointer-events: none; }

.nav-arrow { font-size: 1.1rem; color: var(--c-text-muted); line-height: 1; }
.nav-label { display: flex; flex-direction: column; gap: 2px; }
.nav-direction {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.nav-title { font-size: var(--t-sm); font-weight: 600; color: var(--c-text); }

/* --------------------------------------------------------------------------
   Hero — two-column layout (landing page)
   -------------------------------------------------------------------------- */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}

.hero-narrative p + p { margin-top: var(--s-4); }

.hero-audience {
  font-size: var(--t-base);
  color: var(--c-text-subtle);
  line-height: 1.7;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border-light);
  margin-top: var(--s-5);
}

/* Quick-access panel */
.hero-quickaccess {
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  align-self: start;
}

.quickaccess-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: block;
  margin-bottom: var(--s-4);
}

.quickaccess-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.quickaccess-grid a {
  display: block;
  padding: var(--s-3) var(--s-4);
  background: var(--c-border-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
  line-height: 1.4;
}

.quickaccess-grid a:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-dim);
  color: var(--c-accent-hover);
}

/* Phase cards — prerequisite note */
.card-prereq {
  font-size: var(--t-xs);
  color: var(--c-text-subtle);
  margin-top: auto;
  padding-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   Collapsible examples
   -------------------------------------------------------------------------- */
.example-block {
  margin-top: var(--s-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.example-block summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-border-light);
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}

.example-block summary::-webkit-details-marker { display: none; }

.example-block summary::before {
  content: '+';
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
  background: var(--c-accent-dim);
  border: 1.5px solid var(--c-accent);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}

details[open] > .example-block summary::before,
.example-block[open] > summary::before {
  content: '−';
  transform: none;
}

details[open] > summary.example-block,
details > .example-block summary {
  /* handled by parent details element */
}

details > summary.example-summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-border-light);
  list-style: none;
  user-select: none;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-top: var(--s-8);
  transition: background 0.12s, border-color 0.12s;
}

details > summary.example-summary::-webkit-details-marker { display: none; }

details > summary.example-summary::before {
  content: '+';
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
  background: var(--c-accent-dim);
  border: 1.5px solid var(--c-accent);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}

details[open] > summary.example-summary::before {
  content: '−';
  transform: none;
}

details > summary.example-summary:hover {
  border-color: var(--c-accent);
  background: var(--c-bg);
}

details > summary.example-summary:hover::before,
.example-block summary:hover::before {
  background: var(--c-accent);
  color: var(--c-bg);
}

.example-content {
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.example-content p { margin-bottom: var(--s-4); line-height: 1.75; color: var(--c-text); }
.example-content ol, .example-content ul {
  margin: var(--s-3) 0 var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.example-content li { line-height: 1.65; color: var(--c-text); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--t-sm);
  padding-block: var(--s-6);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.footer-license { color: var(--c-text-muted); }
.footer-license a { color: var(--c-text-muted); text-underline-offset: 2px; }
.footer-license a:hover { color: var(--c-accent); }
.footer-note { color: var(--c-text-subtle); }

/* --------------------------------------------------------------------------
   Learning Hub inline hint — one line under a relevant section heading.
   Purely secondary; should disappear visually while reading prose.
   -------------------------------------------------------------------------- */
.hub-inline-ref {
  font-size: var(--t-xs);
  color: var(--c-text-subtle);
  margin: calc(-1 * var(--s-4)) 0 var(--s-6);
  line-height: 1.4;
}

.hub-inline-ref a {
  color: var(--c-text-subtle);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.hub-inline-ref a:hover { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   Learning Hub references
   Placed after phase content, before phase-nav. Visually subordinate —
   footnote weight, not a call-to-action.
   -------------------------------------------------------------------------- */
.hub-ref {
  border-left: 2px solid var(--c-border);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin-top: var(--s-10);
}

.hub-ref__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  display: block;
  margin-bottom: var(--s-3);
}

.hub-ref__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.hub-ref__list li {
  font-size: var(--t-sm);
  line-height: 1.5;
}

.hub-ref__list a {
  color: var(--c-text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.hub-ref__list a:hover { color: var(--c-accent); }

.hub-ref__meta {
  font-size: var(--t-xs);
  color: var(--c-text-subtle);
  margin-left: var(--s-2);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .curriculum-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .hero-layout { grid-template-columns: 1fr; gap: var(--s-8); }
  .quickaccess-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .sidebar { display: none; }
  .content-main { padding: var(--s-8) var(--s-5) var(--s-12); }
  .phase-nav { flex-direction: column; }
  .phase-nav-btn { min-width: unset; }
}