/* ============================================================================
   VelorStrategy Academy — VS visual system (dark theme)
   ============================================================================
   Drop-in replacement for the original light-theme stylesheet. All existing
   HTML class names are preserved so no per-page edits are needed to inherit
   the new look.
*/

/* -------- Tokens ---------------------------------------------------------- */
:root {
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'Courier New', Courier, monospace;

  --bg:        #07090f;
  --bg1:       #0e1320;
  --bg2:       #141c2e;
  --bg3:       #1b2540;
  --paper:     #141c2e;
  --soft:      #0e1320;
  --line:      rgba(255,255,255,.07);
  --line2:     rgba(255,255,255,.13);
  --line3:     rgba(255,255,255,.22);

  --text:      #dce5f5;
  --ink:       #dce5f5;
  --dim:       #7a90b8;
  --muted:     #7a90b8;
  --dim2:      #4a5878;

  --blue:      #1a56db;
  --blue-lt:   #4f86f7;
  --teal:      #0d9488;
  --teal-lt:   #2dd4bf;
  --gold:      #c47f17;
  --gold-lt:   #fbbf24;
  --violet:    #6d28d9;
  --violet-lt: #b197fc;
  --rose-lt:   #fb7185;
  --green-lt:  #34d399;

  --rail-w:    240px;
}

/* -------- Reset / base ---------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blue-lt); text-decoration: none; }
a:hover { color: var(--gold-lt); }
::selection { background: rgba(251,191,36,.28); color: #fff; }

/* -------- Topbar (kept for backwards compat) ------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(7,9,15,.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar nav { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--dim);
  text-transform: uppercase;
}
.topbar nav a:hover { color: var(--gold-lt); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line2);
  background: rgba(251,191,36,.1);
  color: var(--gold-lt);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  border-radius: 6px;
}
.brand strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.04rem; font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.brand em {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}

/* -------- Persistent left rail (desktop) + drawer (mobile) --------------- */
#academyRail {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  background: rgba(7,9,15,.96);
  border-right: 1px solid var(--line);
  z-index: 600;
  overflow-y: auto;
  padding: 18px 14px 80px;
  font-family: var(--font-sans);
}
#academyRail .rail-hdr { display: flex; align-items: center; justify-content: space-between; margin: 4px 6px 14px; }
#academyRail .rail-brand { font-family: var(--font-serif); font-size: 1.04rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
#academyRail .rail-brand-accent { color: var(--gold-lt); }
#academyRail .rail-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
  padding: 6px 10px 4px;
}
#academyRail .rail-group { padding: 8px 0 4px; border-top: 1px solid var(--line); margin-top: 10px; }
#academyRail .rail-group:first-of-type { border-top: 0; margin-top: 0; padding-top: 4px; }
#academyRail .rail-link {
  display: flex; align-items: center; gap: 6px;
  color: var(--text);
  font-size: .84rem; font-weight: 500;
  padding: 7px 10px; border-radius: 7px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
#academyRail .rail-link:hover { background: rgba(255,255,255,.05); color: var(--gold-lt); }
#academyRail .rail-link.is-active {
  background: rgba(26,86,219,.18);
  color: #fff;
  font-weight: 700;
  border-left: 3px solid var(--blue-lt);
  padding-left: 7px;
}
#academyRail .rail-close { display: none; background: transparent; border: 0; color: var(--dim); font-size: 1.5rem; cursor: pointer; line-height: 1; }
#railOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 590; }

@media (min-width: 961px) {
  body.vs-academy .topbar,
  body.vs-academy main,
  body.vs-academy footer { margin-left: var(--rail-w); }
}
@media (max-width: 960px) {
  #academyRail { transform: translateX(-100%); transition: transform .25s ease; }
  body.rail-open #academyRail { transform: translateX(0); }
  body.rail-open #railOverlay { display: block; }
  #academyRail .rail-close { display: inline-flex; }
}
body.rail-open { overflow: hidden; }

/* -------- Main + page layout --------------------------------------------- */
main { padding: 24px 28px 80px; }
main > section, main > article { max-width: 1120px; margin: 28px auto; }
main > section:first-of-type, main > article:first-of-type { margin-top: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-lt);
  background: rgba(196,127,23,.1);
  border: 1px solid rgba(251,191,36,.28);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.lead { font-size: 1rem; color: var(--text); line-height: 1.7; max-width: 760px; }
h1, h2, h3, h4, h5 { font-family: var(--font-serif); color: #fff; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: 2.2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold-lt); }
p { margin: 0 0 .8em; }
strong { color: #fff; }

/* -------- Hero variants --------------------------------------------------- */
.academy-hero, .course-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, 380px);
  gap: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(26,86,219,.10) 0%, rgba(13,148,136,.06) 50%, rgba(196,127,23,.06) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
}
@media (max-width:760px){ .academy-hero, .course-hero { grid-template-columns: 1fr; padding: 24px; } }
.academy-hero h1, .course-hero h1 { margin-bottom: 12px; }

.academy-panel, .course-summary {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 18px 20px;
}
.academy-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.metric strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.7rem; font-weight: 700;
  color: var(--gold-lt);
  letter-spacing: -.02em;
}
.metric span {
  display: block; margin-top: 2px;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}

/* -------- Section grid layout ------------------------------------------- */
.section-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 28px;
  align-items: start;
}
@media (max-width:760px){ .section-grid { grid-template-columns: 1fr; } }
.section-grid h2 { margin: 6px 0 8px; }
.section-head h2 { margin: 6px 0 8px; }

/* -------- Timeline (release plan) ---------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline article {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--blue-lt);
  border-radius: 12px;
  padding: 16px 18px;
}
.timeline article span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-lt);
  margin-bottom: 6px;
}
.timeline article h3 { color: #fff; margin: 0 0 6px; }

/* -------- Module list ---------------------------------------------------- */
ol.module-list { counter-reset: m; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ol.module-list li {
  counter-increment: m;
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--teal-lt);
  border-radius: 10px;
  padding: 12px 14px 12px 50px;
  color: var(--text);
  line-height: 1.55;
}
ol.module-list li::before {
  content: counter(m, decimal-leading-zero);
  position: absolute; left: 14px; top: 12px;
  font-family: var(--font-mono);
  font-size: .8rem; font-weight: 700;
  color: var(--teal-lt);
  letter-spacing: .04em;
}
ul { padding-left: 1.2rem; }
ul li { margin: .35em 0; }

/* -------- Tables --------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 14px;
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  background: rgba(255,255,255,.025);
}
tr:last-child td { border-bottom: 0; }

/* -------- Course catalog grid ------------------------------------------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.course-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--gold-lt);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.course-card:hover { background: rgba(20,28,46,.85); border-color: var(--line3); transform: translateY(-2px); }
.course-card h3 { color: #fff; margin: 6px 0 8px; }
.course-card a {
  align-self: flex-start;
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .78rem; font-weight: 700;
  padding: 8px 14px;
  border-radius: 7px;
  text-decoration: none;
  transition: background .2s ease;
}
.course-card a:hover { background: var(--blue-lt); color: #fff; }

/* -------- Reference link band ------------------------------------------- */
.reference-link-band {
  background: linear-gradient(135deg, rgba(109,40,217,.12) 0%, rgba(26,86,219,.10) 100%);
  border: 1px solid rgba(177,151,252,.28);
  border-radius: 14px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 22px; align-items: center;
}
@media (max-width:760px){ .reference-link-band { grid-template-columns: 1fr; } }
.reference-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reference-button {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .82rem; font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.reference-button:hover { background: rgba(255,255,255,.1); border-color: var(--gold-lt); color: var(--gold-lt); transform: translateY(-1px); }

/* -------- Module content shell ------------------------------------------ */
.course-learning-shell { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
@media (max-width:860px){ .course-learning-shell { grid-template-columns: 1fr; } }
.module-side-menu {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 16px 14px;
  position: sticky; top: 80px;
  align-self: start;
}
.module-side-menu strong {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.module-side-menu a {
  display: block;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .82rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.module-side-menu a:hover { background: rgba(255,255,255,.05); color: var(--gold-lt); }

.module-content-list { display: flex; flex-direction: column; gap: 16px; }
.module-content-block {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 20px 22px;
}
.module-content-heading h3 { margin: 6px 0 8px; color: #fff; }
.module-pages { display: grid; gap: 10px; margin-top: 12px; }
.module-page {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-lt);
  border-radius: 10px;
  padding: 12px 14px;
}
.module-page-body { font-size: .92rem; color: var(--text); line-height: 1.6; }

/* -------- Lesson slides -------------------------------------------------- */
.lesson-deck, .lesson-slides { display: flex; flex-direction: column; gap: 10px; }
.lesson-deck-head {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 14px 16px;
}
.lesson-slide {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--gold-lt);
  border-radius: 10px;
  padding: 14px 16px;
}
.lesson-slide-body { color: var(--text); }
.lesson-slide details summary {
  cursor: pointer;
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1rem;
  margin-bottom: 8px;
}

/* -------- Flashcards ----------------------------------------------------- */
.flashcard-layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
@media (max-width:860px){ .flashcard-layout { grid-template-columns: 1fr; } }
.flashcard-list { display: grid; gap: 8px; }
.flashcard-list-item {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease;
}
.flashcard-list-item:hover { background: rgba(255,255,255,.05); color: var(--gold-lt); }
.flashcard-list-item.is-active { background: rgba(26,86,219,.18); color: #fff; border-color: rgba(79,134,247,.32); }
.flashcard-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 28px 30px;
  min-height: 220px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.flashcard-card:hover { border-color: var(--line3); }
.flashcard-kicker { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt); }
.flashcard-card [data-flashcard-front],
.flashcard-card [data-flashcard-back]  { transition: opacity .18s ease; }
/* Default state: show front, hide back. The Flip button toggles .is-flipped. */
.flashcard-card [data-flashcard-back]  { display: none; }
.flashcard-card.is-flipped [data-flashcard-front] { display: none; }
.flashcard-card.is-flipped [data-flashcard-back]  { display: inline; color: var(--text); font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.55; font-weight: 400; font-style: normal; }
.flashcard-card.is-flipped { background: linear-gradient(180deg, rgba(26,86,219,.06) 0%, var(--bg2) 60%); }
.flashcard-hint { font-size: .82rem; color: var(--dim); font-style: italic; }
.flashcard-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 14px; }
.flashcard-controls button[data-flashcard-action="shuffle"] { margin-left: auto; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line2); }
.flashcard-controls button {
  background: var(--blue);
  color: #fff;
  border: 0;
  font-family: var(--font-sans);
  font-size: .82rem; font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.flashcard-controls button:hover { background: var(--blue-lt); transform: translateY(-1px); }
.flashcard-controls button.ghost { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line2); }
.flashcard-controls button.ghost:hover { background: rgba(255,255,255,.1); border-color: var(--line3); }

/* -------- Concept library ------------------------------------------------ */
.concept-library { display: flex; flex-direction: column; gap: 10px; }
.concept-entry {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 14px 16px;
}
.concept-entry-body { color: var(--text); font-size: .92rem; line-height: 1.6; }

/* -------- Rubric / panels ------------------------------------------------ */
.rubric, .plain-panel, .architecture-map, .learning-loop, .learning-principles {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 22px 24px;
}

/* -------- Buttons -------------------------------------------------------- */
.detail-button {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .82rem; font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.detail-button:hover { background: var(--blue-lt); }

/* -------- Footer --------------------------------
/* ============================================================================
   Academy Tutor (per-course Velora Q&A + business case)
   ============================================================================ */
.academy-tutor {
  margin: 36px 0;
  padding: 28px;
  background: linear-gradient(180deg, rgba(26,86,219,.06) 0%, rgba(20,28,46,.65) 100%);
  border: 1px solid var(--line2);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.academy-tutor-head { margin-bottom: 18px; }
.academy-tutor-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lt);
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.32);
  padding: 5px 12px; border-radius: 100px;
  margin-bottom: 12px;
}
.academy-tutor-title {
  font-family: var(--font-serif);
  font-size: 1.45rem; font-weight: 700;
  color: #fff; margin: 0 0 8px; line-height: 1.2;
}
.academy-tutor-title em { font-style: italic; color: var(--gold-lt); }
.academy-tutor-sub {
  color: var(--dim);
  font-size: .94rem; line-height: 1.6;
  margin: 0;
}
.academy-tutor-row { margin: 14px 0; }
.academy-tutor-field {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.academy-tutor-field > span { display: block; margin-bottom: 6px; }
.academy-tutor-topic,
.academy-tutor-q {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .92rem;
  text-transform: none; letter-spacing: 0;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color .15s ease, background .15s ease;
}
.academy-tutor-topic:focus,
.academy-tutor-q:focus {
  outline: none;
  border-color: rgba(79,134,247,.55);
  background: rgba(0,0,0,.35);
}
.academy-tutor-q { resize: vertical; min-height: 80px; line-height: 1.55; }
.academy-tutor-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 0;
}
.academy-tutor-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: .86rem; font-weight: 700; letter-spacing: .01em;
  padding: 10px 18px; border-radius: 9px;
  border: none; cursor: pointer;
  background: var(--blue); color: #fff;
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.academy-tutor-btn:hover { background: var(--blue-lt); transform: translateY(-1px); }
.academy-tutor-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.academy-tutor-btn-ghost {
  background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid var(--line2);
}
.academy-tutor-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--line3); }
.academy-tutor-meta {
  font-family: var(--font-mono);
  font-size: .68rem; color: var(--dim);
  letter-spacing: .06em; margin-left: 4px;
}
.academy-tutor-meta[data-kind="warn"]  { color: var(--gold-lt); }
.academy-tutor-meta[data-kind="error"] { color: var(--rose-lt); }
.academy-tutor-meta[data-kind="ok"]    { color: var(--teal-lt); }
.academy-tutor-meta[data-kind="busy"]  { color: var(--blue-lt); }

.academy-tutor-out {
  margin-top: 18px;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
}
.academy-tutor-out-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.academy-tutor-out-head strong { color: var(--text); }
.academy-tutor-copy {
  background: transparent; border: 1px solid var(--line2);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  transition: all .15s ease;
}
.academy-tutor-copy:hover { color: var(--text); border-color: var(--line3); }
.academy-tutor-out-body {
  padding: 18px 20px;
  color: var(--text);
  font-size: .95rem; line-height: 1.65;
}
.academy-tutor-out-body h2,
.academy-tutor-out-body h3,
.academy-tutor-out-body h4 {
  font-family: var(--font-serif);
  color: #fff; margin: 18px 0 8px; line-height: 1.25;
}
.academy-tutor-out-body h2 { font-size: 1.1rem; }
.academy-tutor-out-body h3 { font-size: 1rem; color: var(--gold-lt); }
.academy-tutor-out-body h4 { font-size: .94rem; color: var(--teal-lt); }
.academy-tutor-out-body p  { margin: 8px 0; }
.academy-tutor-out-body ul,
.academy-tutor-out-body ol { margin: 8px 0 8px 20px; padding-left: 0; }
.academy-tutor-out-body li { margin: 4px 0; }
.academy-tutor-out-body strong { color: #fff; }
.academy-tutor-out-body em { color: var(--gold-lt); font-style: italic; }
.academy-tutor-out-body code { font-family: var(--font-mono); font-size: .85em; color: var(--teal-lt); background: rgba(45,212,191,.08); padding: 1px 6px; border-radius: 4px; }
.academy-tutor-loading { color: var(--dim); font-style: italic; }
.academy-tutor-error   { color: var(--rose-lt); }

/* Business case panel */
.academy-case {
  margin-top: 22px;
  padding: 22px;
  background: rgba(13,148,136,.06);
  border: 1px solid rgba(45,212,191,.28);
  border-left: 3px solid var(--teal-lt);
  border-radius: 12px;
}
.academy-case-eyebrow {
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-lt);
  margin-bottom: 8px;
}
.academy-case-title {
  font-family: var(--font-serif);
  font-size: 1.18rem; font-weight: 700;
  color: #fff; margin: 0 0 10px; line-height: 1.3;
}
.academy-case-scenario {
  color: var(--text);
  font-size: .94rem; line-height: 1.65;
  margin: 0 0 12px;
}
.academy-case-decision {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .92rem; color: var(--text);
  margin: 0 0 12px;
}
.academy-case-decision strong { color: var(--gold-lt); }
.academy-case-hint {
  margin: 0 0 12px;
  font-size: .92rem;
}
.academy-case-hint summary {
  cursor: pointer;
  color: var(--blue-lt);
  font-weight: 600;
  list-style: none;
  padding: 6px 0;
}
.academy-case-hint summary::-webkit-details-marker { display: none; }
.academy-case-hint summary::before { content: '▸ '; color: var(--blue-lt); }
.academy-case-hint[open] summary::before { content: '▾ '; }
.academy-case-hint summary:hover { color: var(--gold-lt); }
.academy-case-hint summary:hover::before { color: var(--gold-lt); }
.academy-case-hint p {
  margin: 6px 0 0; padding: 10px 12px;
  background: rgba(0,0,0,.2); border-left: 2px solid var(--gold-lt);
  border-radius: 6px;
  color: var(--text); line-height: 1.6;
}
.academy-case-load { margin-top: 4px; }

@media (max-width: 720px){
  .academy-tutor { padding: 20px; }
  .academy-tutor-title { font-size: 1.2rem; }
}

/* ============================================================================
   Card layout fixes — strong+span pairs need stacking, not cramming
   ============================================================================
   The overview pages use this pattern in many places:
     <div class="architecture-map">
       <div><strong>Title</strong><span>Description</span></div>
       ...
     </div>
   Without explicit styling the strong and span render inline against each
   other and read like "TitleDescription". The rules below give every entry
   its own card, with the title on its own line and the description below in
   the dim text color.
*/

/* Containers: switch from "one big card" to grid of inner cards. */
.architecture-map,
.workshop-grid,
.learning-loop,
.learning-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Each inner item becomes its own card. */
.architecture-map > div,
.workshop-grid > article,
.learning-loop > div,
.learning-principles > article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 92px;
  transition: border-color .15s ease, transform .15s ease;
}
.architecture-map > div:hover,
.workshop-grid > article:hover,
.learning-loop > div:hover,
.learning-principles > article:hover {
  border-color: var(--line3);
  transform: translateY(-1px);
}

/* Title (strong) gets serif accent and a clear line of its own. */
.architecture-map > div > strong,
.workshop-grid > article > strong,
.learning-loop > div > strong,
.learning-principles > article > strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Description (span) drops to a new line in the dim text color. */
.architecture-map > div > span,
.workshop-grid > article > span,
.learning-loop > div > span,
.learning-principles > article > span {
  display: block;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--dim);
}

/* Learning loop entries are stepwise — let the number ride the top with a
   gold accent so 01..05 reads like a sequence. */
.learning-loop > div > strong {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--gold-lt);
  text-transform: uppercase;
}

/* Workshop-grid (course rhythm) titles read better in mono eyebrow style. */
.workshop-grid > article > strong {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--teal-lt);
  text-transform: uppercase;
}

/* Two-column layouts for the "objects" + "governance" rows on architecture. */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.two-col .plain-panel { margin: 0; }
.two-col .plain-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem; font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.25;
}
.two-col .plain-panel ul {
  margin: 0;
  padding-left: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.two-col .plain-panel li {
  font-size: .93rem;
  line-height: 1.55;
  color: var(--text);
}
.two-col .plain-panel li strong { color: var(--gold-lt); font-weight: 700; }
.two-col .plain-panel p {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* ============================================================================
   Global dark dropdown rule — match the page theme on Windows Chrome/Edge
   ============================================================================ */
select { color-scheme: dark; }
select option, select optgroup { background: #141c2e; color: #dce5f5; }
select option:checked, select option:hover { background: #0e1320; color: #fff; }

/* ============================================================================
   Footer — proper dark panel so the closing message doesn't render as a raw
   white-bordered line with the text cursor visible
   ============================================================================ */
body.vs-academy footer {
  margin-top: 48px;
  padding: 22px 28px;
  background: var(--bg2);
  border-top: 1px solid var(--line2);
  border-radius: 0;
  color: var(--dim);
  font-size: .88rem;
  line-height: 1.6;
  text-align: left;
}
body.vs-academy footer p {
  margin: 0;
  max-width: 780px;
}
body.vs-academy footer p::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-lt);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(251,191,36,.18);
}

/* ============================================================================
   Velora rail link — special highlight so it reads as the AI helper
   ============================================================================ */
/* Ask Velora — gentle gold accent without the heavy gradient/border treatment */
.rail-link.rail-velora {
  background: transparent;
  color: var(--gold-lt);
  font-weight: 600;
  padding: 9px 10px;
  margin: 2px 0;
}
.rail-link.rail-velora:hover {
  background: rgba(251,191,36,.08);
  color: #fff;
}
.rail-link.rail-velora::before {
  content: '✦';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  margin-right: 6px;
  color: var(--gold-lt);
  font-size: .9em;
}

/* ============================================================================
   Topic Index Grid + Filter Bar (course knowledge-base / definitions pages)
   ============================================================================ */
.topic-filter-bar {
  margin: 24px 0 18px;
  padding: 18px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.topic-filter-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.topic-filter-search {
  flex: 1 1 280px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: .94rem;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.topic-filter-search:focus {
  border-color: rgba(79,134,247,.55);
  background: rgba(0,0,0,.35);
}
.topic-filter-search::placeholder { color: var(--dim2); }
.topic-filter-count {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}
.topic-filter-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.topic-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all .15s ease;
}
.topic-filter-pill:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--line3);
}
.topic-filter-pill.is-active {
  background: rgba(26,86,219,.22);
  border-color: rgba(79,134,247,.5);
  color: #fff;
}
.topic-filter-pill-n {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  color: var(--dim);
  background: rgba(0,0,0,.3);
  padding: 1px 6px;
  border-radius: 100px;
}
.topic-filter-pill.is-active .topic-filter-pill-n {
  color: var(--gold-lt);
  background: rgba(0,0,0,.4);
}

/* Card grid (overrides any browser-default inline anchor flow) */
.topic-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 18px 0 28px;
}
.topic-index-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  min-height: 92px;
}
.topic-index-card:hover {
  background: rgba(255,255,255,.03);
  border-color: var(--line3);
  transform: translateY(-1px);
}
.topic-index-card > span {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-lt);
  background: rgba(196,127,23,.14);
  border: 1px solid rgba(251,191,36,.28);
  padding: 2px 8px;
  border-radius: 6px;
}
.topic-index-card > strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.topic-index-card > em {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-lt);
  background: rgba(13,148,136,.14);
  border: 1px solid rgba(45,212,191,.28);
  padding: 2px 8px;
  border-radius: 6px;
}

/* ============================================================================
   Flashcard list — make the NN number and title clearly separated
   ============================================================================ */
.flashcard-list-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold-lt);
  background: rgba(196,127,23,.14);
  border: 1px solid rgba(251,191,36,.28);
  padding: 2px 7px;
  border-radius: 6px;
  margin-right: 10px;
  min-width: 28px;
  text-align: center;
}
.flashcard-list-title {
  font-family: var(--font-serif);
  font-size: .94rem;
  color: var(--text);
}
.flashcard-list-item.is-active .flashcard-list-title { color: #fff; font-weight: 700; }

/* course child sub-menu in the rail (pilot) */
.rail-subgroup{display:flex;flex-direction:column;margin:2px 0 6px 14px;padding-left:10px;border-left:1px solid rgba(255,255,255,0.10);}
.rail-subgroup .rail-sublink{font-size:.74rem;color:#9fb0d0;text-decoration:none;padding:5px 8px;border-radius:6px;}
.rail-subgroup .rail-sublink:hover{color:#fff;background:rgba(255,255,255,0.04);}
.rail-subgroup .rail-sublink.is-active{color:#fbbf24;}

/* on-page section pills (course landing) */
html{scroll-behavior:smooth;}
.academy-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px auto 8px;}
.academy-pills a{display:inline-flex;align-items:center;padding:8px 15px;border:1px solid rgba(255,255,255,0.12);border-radius:999px;font-size:.78rem;color:#c8d2e6;text-decoration:none;background:rgba(255,255,255,0.02);transition:border-color .15s,background .15s;}
.academy-pills a:hover{border-color:#fbbf24;background:rgba(251,191,36,0.08);}


/* === canonical footer override (match dashboard / site-wide footer) === */
body.vs-academy footer{background:transparent;border-top:1px solid rgba(255,255,255,0.07);border-radius:0;padding:24px;display:flex;flex-direction:column;gap:12px;text-align:center;color:inherit;font-size:inherit;line-height:normal;}
@media (min-width:640px){body.vs-academy footer{flex-direction:row;align-items:center;justify-content:space-between;padding:24px 48px;text-align:left;}}
body.vs-academy footer p{margin:0;max-width:none;}
body.vs-academy footer p::before{content:none;display:none;}
body.vs-academy footer .foot-logo{font-family:Georgia,'Times New Roman',Times,serif;font-size:1.04rem;font-weight:700;}
body.vs-academy footer .foot-logo-accent{color:#fbbf24;}
body.vs-academy footer .foot-meta{font-family:'Courier New',Courier,monospace;font-size:.66rem;color:#7a90b8;letter-spacing:.06em;}
body.vs-academy footer .foot-copy{font-size:.72rem;color:#4a5878;}


/* Velora output toolbar */
.academy-tutor-tools{display:flex;flex-wrap:wrap;gap:6px;}
.academy-tutor-tool{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#c8d2e6;border-radius:8px;padding:5px 11px;font-size:.72rem;cursor:pointer;transition:border-color .15s,color .15s;}
.academy-tutor-tool:hover{border-color:#fbbf24;color:#fff;}
.academy-tutor-tool:disabled{opacity:.6;cursor:default;}


/* === unified side-menu typography (site-wide consistency) === */
#academyRail .rail-link,#academyRail .rail-sublink{font-family:var(--font-sans)!important}
#academyRail .rail-link{font-size:.84rem!important;font-weight:500!important}
#academyRail .rail-eyebrow{font-family:var(--font-mono)!important}