:root {
  --navy: #0a1628;
  --navy-2: #12233d;
  --card: #162a47;
  --card-lift: #1c3558;
  --text: #f4f7fb;
  --muted: #9bb0c9;
  --cyan: #3ecfff;
  --ok: #3dd68c;
  --danger: #ff6b7a;
  --border: #2a4466;
  --pip: #2a4466;
  --pip-done: #3dd68c;
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, sans-serif;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --topbar-bg: rgba(10, 22, 40, 0.92);
  --pip-bar-bg: rgba(10, 22, 40, 0.95);
  --bg-glow-1: rgba(249, 115, 22, 0.16);
  --bg-glow-2: rgba(62, 207, 255, 0.12);
  --diagram-bg: #f8fafc;
  --link: #7dd3fc;
  --link-hover: #bae6fd;

  /* Global CTA stays orange across subjects */
  --cta: #f97316;
  --cta-hot: #fb923c;
  --cta-deep: #ea580c;
  --cta-glow: rgba(249, 115, 22, 0.35);

  /* Default subject = CTA until lesson sets data-subject */
  --subject: #f97316;
  --subject-soft: #2a1a10;
  --subject-border: #8a4b1f;
  --subject-glow: rgba(249, 115, 22, 0.35);

  /* Legacy aliases used by existing rules */
  --accent: var(--subject);
  --accent-hot: var(--subject);
  --accent-deep: var(--cta-deep);
  --accent-glow: var(--subject-glow);
  --pip-active: var(--subject);
}

/* ——— Themes (documentElement.dataset.theme) ——— */
html[data-theme="lab-dark"],
html:not([data-theme]) {
  color-scheme: dark;
}

html[data-theme="lab-light"] {
  color-scheme: light;
  --navy: #eef2f7;
  --navy-2: #e2e8f0;
  --card: #ffffff;
  --card-lift: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --cyan: #0284c7;
  --ok: #15803d;
  --danger: #dc2626;
  --border: #cbd5e1;
  --pip: #cbd5e1;
  --pip-done: #15803d;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --topbar-bg: rgba(255, 255, 255, 0.94);
  --pip-bar-bg: rgba(238, 242, 247, 0.96);
  --bg-glow-1: rgba(249, 115, 22, 0.08);
  --bg-glow-2: rgba(2, 132, 199, 0.07);
  --link: #0369a1;
  --link-hover: #0c4a6e;
  --subject-soft: #fff7ed;
  --subject-border: #fdba74;
  --subject-glow: rgba(249, 115, 22, 0.22);
}

html[data-theme="lab-neon"] {
  color-scheme: dark;
  --navy: #070712;
  --navy-2: #12122a;
  --card: #14142e;
  --card-lift: #1c1c3d;
  --text: #f5f3ff;
  --muted: #a5b4fc;
  --cyan: #22d3ee;
  --ok: #4ade80;
  --danger: #fb7185;
  --border: #4c1d95;
  --pip: #312e81;
  --pip-done: #4ade80;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(244, 114, 182, 0.12);
  --topbar-bg: rgba(7, 7, 18, 0.94);
  --pip-bar-bg: rgba(7, 7, 18, 0.96);
  --bg-glow-1: rgba(244, 114, 182, 0.2);
  --bg-glow-2: rgba(34, 211, 238, 0.16);
  --link: #67e8f9;
  --link-hover: #a5f3fc;
  --cta: #f97316;
  --cta-hot: #fb923c;
  --cta-deep: #ea580c;
  --cta-glow: rgba(249, 115, 22, 0.45);
}

/* ——— Subject tokens (UX exact) ——— */
[data-subject="bio"] {
  --subject: #2dd4a8;
  --subject-soft: #0f2f28;
  --subject-border: #1f6b56;
  --subject-glow: rgba(45, 212, 168, 0.35);
  --bg-glow-1: rgba(45, 212, 168, 0.16);
}
[data-subject="chem"] {
  --subject: #fbbf24;
  --subject-soft: #2f2610;
  --subject-border: #8a6a18;
  --subject-glow: rgba(251, 191, 36, 0.35);
  --bg-glow-1: rgba(251, 191, 36, 0.14);
}
[data-subject="phys"] {
  --subject: #60a5fa;
  --subject-soft: #0f2440;
  --subject-border: #2a5f9e;
  --subject-glow: rgba(96, 165, 250, 0.38);
  --bg-glow-1: rgba(96, 165, 250, 0.16);
}
[data-subject="skills"] {
  --subject: #c084fc;
  --subject-soft: #241833;
  --subject-border: #6b4a9e;
  --subject-glow: rgba(192, 132, 252, 0.35);
  --bg-glow-1: rgba(192, 132, 252, 0.16);
}

html[data-theme="lab-light"] [data-subject="bio"] {
  --subject-soft: #ecfdf5;
  --subject-border: #6ee7b7;
}
html[data-theme="lab-light"] [data-subject="chem"] {
  --subject-soft: #fffbeb;
  --subject-border: #fcd34d;
}
html[data-theme="lab-light"] [data-subject="phys"] {
  --subject-soft: #eff6ff;
  --subject-border: #93c5fd;
}
html[data-theme="lab-light"] [data-subject="skills"] {
  --subject-soft: #f5f3ff;
  --subject-border: #d8b4fe;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, var(--bg-glow-1), transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 0%, var(--bg-glow-2), transparent 45%),
    var(--navy);
  color: var(--text);
  line-height: 1.55;
  font-size: 17px;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ——— Login ——— */
.page-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.page-login::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 107, 44, 0.15), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(62, 207, 255, 0.1), transparent 40%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-2%, 3%) scale(1.05); }
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cta), var(--cta-deep));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 0 24px var(--accent-glow);
  animation: pulse-glow 2.4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-glow); }
  50% { box-shadow: 0 0 32px rgba(255, 107, 44, 0.55); }
}

.brand-text h1 {
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 22rem;
}

.brand-text p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.role-tab {
  border: 1px solid var(--border);
  background: var(--navy-2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: default;
  text-align: center;
}

.role-tab strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

/* ——— Layout ——— */
.wrap {
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
  padding: 1rem 24px 3rem;
}

/* Desktop lesson + dashboard (UX width) */
.wrap.wide,
.wrap.lesson {
  width: min(1120px, calc(100% - 48px));
  padding-inline: 24px;
}

/* Picture step may run slightly wider */
.wrap.lesson .step-panel#picture {
  width: min(1200px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  margin-left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.topbar-brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.topbar-right {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.mission-card {
  background: linear-gradient(160deg, var(--card-lift) 0%, var(--card) 55%);
  border-color: #3a5a82;
  position: relative;
  overflow: hidden;
}

.mission-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  pointer-events: none;
}

.login-card { width: 100%; position: relative; z-index: 1; }

.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.grid.two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
}

h1 { font-size: clamp(1.45rem, 4vw, 1.85rem); margin: 0.2rem 0 0.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; margin: 0 0 0.45rem; color: var(--cyan); }
h3 { font-size: 0.95rem; margin: 0 0 0.3rem; color: var(--accent-hot); }

.muted { color: var(--muted); }
.fineprint { font-size: 0.85rem; }
.lead { font-size: 1.1rem; }

.badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(62, 207, 255, 0.15);
  color: var(--cyan);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.badge.accent {
  background: rgba(255, 107, 44, 0.2);
  color: var(--accent-hot);
}

.badge.ok {
  background: rgba(61, 214, 140, 0.18);
  color: var(--ok);
}

.stack { display: grid; gap: 0.9rem; }

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.95rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--navy);
  color: var(--text);
  font-size: 1.05rem;
}

input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--navy-2);
  color: var(--text);
  border-radius: 12px;
  padding: 0.7rem 1.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: linear-gradient(135deg, var(--cta), var(--cta-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px var(--cta-glow);
}

.btn.primary.cta-pulse {
  animation: cta-pulse 2.2s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 6px 20px var(--cta-glow); transform: scale(1); }
  50% { box-shadow: 0 8px 28px var(--cta-glow); transform: scale(1.02); }
}

.btn.ghost {
  background: transparent;
}

.btn.big {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1.2rem;
  border-radius: 14px;
}

.btn.small {
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
}

.inline { display: inline; }

.error { color: var(--danger); }
.ok { color: var(--ok); }
.bad { color: var(--danger); }

/* ——— Dashboard ——— */
.hero-mission {
  margin-bottom: 1.25rem;
}

.hero-mission .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--navy);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--muted);
}

.chip strong { color: var(--text); }

.mission-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.mission-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  background: var(--navy-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mission-list li:hover {
  border-color: var(--accent);
  background: var(--card-lift);
}

.mission-list a.mission-link {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}

.mission-list a.mission-link:hover { color: var(--accent-hot); }

.mission-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.stat-card h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.stat-card p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.parent-calm .card {
  box-shadow: none;
  background: var(--navy-2);
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.friday-note-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 160px;
}

/* ——— Lesson player ——— */
.pip-bar {
  position: sticky;
  top: 52px;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.65rem 0;
  margin-bottom: 0.5rem;
  background: var(--pip-bar-bg);
  backdrop-filter: blur(8px);
}

.pip {
  flex: 1 1 auto;
  min-width: 4.2rem;
  text-align: center;
  padding: 0.4rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--navy-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pip.done {
  border-color: rgba(61, 214, 140, 0.45);
  color: var(--ok);
  background: rgba(61, 214, 140, 0.1);
}

.pip.active {
  border-color: var(--subject);
  color: #fff;
  background: linear-gradient(135deg, var(--subject), color-mix(in srgb, var(--subject) 70%, #000));
  box-shadow: 0 0 16px var(--subject-glow);
  animation: pip-pop 0.35s ease;
}

@keyframes pip-pop {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}

.step-panel {
  display: none;
  animation: step-in 0.28s ease;
}

.step-panel.active { display: block; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: space-between;
  margin-top: 1.1rem;
}

.hook-text {
  font-size: clamp(1.15rem, 3.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0.4rem 0 0;
}

.callout {
  background: var(--navy);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 0.85rem 1rem;
  margin-top: 0.9rem;
}

.callout.loud {
  border-left-width: 5px;
  background: linear-gradient(90deg, var(--accent-glow), var(--navy));
  font-size: 1.08rem;
}

.callout.say {
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, rgba(62, 207, 255, 0.12), var(--navy));
}

.callout.redraw {
  border-left-color: var(--ok);
}

.callout h3 {
  margin: 0 0 0.3rem;
}

.idea-blocks {
  display: grid;
  gap: 1.1rem;
}

.idea-card {
  display: grid;
  /* UX: figure track min ~420px; prose takes the rest (≤70ch) */
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
  gap: 1.15rem 1.5rem;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-left: 3px solid var(--subject-border);
  padding-left: 1rem;
}

.idea-card--flip {
  grid-template-columns: minmax(420px, 1.15fr) minmax(280px, 0.85fr);
}

.idea-card--flip .idea-card-prose { order: 2; }
.idea-card--flip .idea-card-figure { order: 1; }

.idea-card--text-only {
  grid-template-columns: 1fr;
  border-left-style: dashed;
  padding-left: 1rem;
}

/* Complex multi-label diagrams: figure full width above text */
.idea-card.idea-block--stack,
.idea-block--stack {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.idea-block--stack .idea-card-figure { order: -1; }
.idea-block--stack .idea-card-prose {
  max-width: 70ch;
}

.idea-card-prose {
  max-width: 70ch;
  min-width: 0;
}

.idea-card-prose p,
.prose-block > p {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.idea-card-prose > p:last-child,
.prose-block > p:last-child,
.idea-card-prose > ul:last-child,
.prose-block > ul:last-child {
  margin-bottom: 0;
}

.hook-text.prose-block > p,
.hook-text.prose-block > ul {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.hook-text.prose-block > p {
  margin: 0 0 0.55rem;
}

ul.lesson-bullets {
  margin: 0.35rem 0 0.55rem;
  padding-left: 1.25rem;
  list-style: disc;
}

ul.lesson-bullets li {
  margin: 0.35rem 0;
  padding-left: 0.2rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.hook-text ul.lesson-bullets li {
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

.callout .prose-block ul.lesson-bullets li,
.lead.prose-block ul.lesson-bullets li {
  font-size: inherit;
  line-height: 1.5;
}

.idea-card-figure {
  margin: 0;
  min-width: 0;
}

/* No nested box-in-box on Idea diagrams */
.idea-card .idea-svg-frame,
.idea-card .svg-frame.idea-svg-frame {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
}

.idea-svg-frame svg {
  min-height: 240px;
  max-height: 460px;
}

.idea-card-figure figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.idea-card-figure .zoom-hint {
  margin: 0.1rem 0 0;
}

@media (max-width: 760px) {
  .idea-card,
  .idea-card--flip,
  .idea-block--stack {
    grid-template-columns: 1fr;
  }

  .idea-card--flip .idea-card-prose,
  .idea-card--flip .idea-card-figure {
    order: initial;
  }

  .idea-block--stack .idea-card-figure { order: -1; }

  .idea-svg-frame svg {
    min-height: 160px;
    max-height: 280px;
  }

  .idea-svg-frame .diagram-img {
    min-height: 140px;
    max-height: 260px;
  }

  .wrap.lesson .step-panel#picture {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }
}

.graphics-stack {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.graphic-figure { margin: 0; }

.svg-zoom-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  border-radius: 12px;
}

.svg-zoom-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.svg-frame {
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 0.55rem;
}

.svg-frame svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  max-height: none;
}

.svg-frame .diagram-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: none;
  object-fit: contain;
  background: var(--diagram-bg);
  border-radius: 8px;
}

.idea-svg-frame .diagram-img {
  min-height: 220px;
  max-height: 440px;
  object-fit: contain;
}

.diagram-credit {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--muted);
  line-height: 1.35;
}

.diagram-credit a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.diagram-credit a:hover {
  color: var(--link-hover);
}

.svg-lightbox-body .diagram-img,
.svg-lightbox-body .diagram-img--lightbox {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  max-height: 78vh;
  object-fit: contain;
  background: var(--diagram-bg);
  border-radius: 8px;
  cursor: zoom-out;
}

.graphic-figure figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.zoom-hint {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
}

/* Lightbox for enlarged diagrams */
body.lightbox-open {
  overflow: hidden;
}

.svg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.svg-lightbox[hidden] {
  display: none !important;
}

.svg-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  cursor: pointer;
}

.svg-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: var(--navy-2, #0f172a);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.85rem 1rem 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.svg-lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.svg-lightbox-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
}

.svg-lightbox-body {
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem;
  cursor: zoom-out;
}

.svg-lightbox-body svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 78vh;
}

.svg-lightbox-hint {
  margin: 0.65rem 0 0;
  text-align: center;
}

.video-slot { margin-top: 0.85rem; }

.video-slot iframe {
  width: 100%;
  min-height: 200px;
  border: 0;
  border-radius: 12px;
  background: #000;
}

.narration-block { margin-top: 1rem; }

.narration {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.narration-script {
  margin-top: 0.75rem;
  padding: 0.85rem;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 12px;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.98rem;
}

.say-line {
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  margin: 0.25rem 0 0;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem;
  background: var(--navy-2);
}

fieldset label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.45rem 0;
  font-size: 1.02rem;
  cursor: pointer;
}

fieldset legend {
  font-weight: 700;
  padding: 0 0.35rem;
}

.feedback { margin: 0.5rem 0 0; font-weight: 600; }

.boss-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.boss-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (min-width: 720px) {
  .graphics-stack {
    grid-template-columns: 1fr;
  }

  .svg-frame svg {
    min-height: 320px;
  }

  .svg-frame .diagram-img {
    min-height: 260px;
  }
}

@media (min-width: 1100px) {
  .graphics-stack {
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem;
  }
}

@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .pip { font-size: 0.65rem; min-width: 3.6rem; padding: 0.35rem 0.2rem; }
  .btn.big { font-size: 1.1rem; }
}

/* ——— Icon system ——— */
.icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--navy);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.icon-badge img {
  width: 28px;
  height: 28px;
}

.icon-badge.tip-badge {
  width: auto;
  height: auto;
  padding: 0.35rem 0.7rem;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.icon-badge.tip-badge img {
  width: 20px;
  height: 20px;
}

.login-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.deco-float {
  position: absolute;
  width: 56px;
  height: 56px;
  opacity: 0.45;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  animation: float-y 7s ease-in-out infinite;
}

.deco-a { top: 8%; left: 8%; animation-delay: 0s; }
.deco-b { top: 18%; right: 10%; width: 48px; animation-delay: 1.2s; }
.deco-c { bottom: 22%; left: 6%; width: 52px; animation-delay: 2s; }
.deco-d { bottom: 12%; right: 12%; animation-delay: 0.6s; }
.deco-e { top: 42%; left: 3%; width: 40px; opacity: 0.3; animation-delay: 1.8s; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.brand-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(1.15);
}

.role-tab-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 0.25rem;
  display: block;
}

.login-icon-row { margin-bottom: 0.85rem; }

.topbar-logo {
  display: block;
  flex-shrink: 0;
}

.hero-art {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  z-index: 1;
  pointer-events: none;
}

.hero-art img {
  width: 56px;
  height: 56px;
  opacity: 0.9;
  filter: drop-shadow(0 4px 12px rgba(255, 107, 44, 0.35));
}

.hero-art-secondary {
  width: 28px !important;
  height: 28px !important;
  margin-top: 1.5rem;
  opacity: 0.7 !important;
}

.section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.section-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.mission-row-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.mission-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--navy);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mission-icon-wrap img {
  width: 28px;
  height: 28px;
}

.stat-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.35rem;
}

.stat-icon img {
  width: 32px;
  height: 32px;
}

.empty-state {
  text-align: center;
  padding: 1.25rem 0.75rem;
  display: grid;
  gap: 0.65rem;
  justify-items: center;
}

.empty-state.illustrated {
  background: var(--navy);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.lesson-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.lesson-title-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  filter: drop-shadow(0 2px 8px rgba(62, 207, 255, 0.35));
}

.step-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}

.step-head h2 { margin: 0; }

.step-head-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.callout-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
}

.callout-head h3 { margin: 0; }

.pip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.3rem 0.4rem;
}

.pip img {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

.pip.active img,
.pip.done img {
  opacity: 1;
  filter: brightness(1.2);
}

.pip span { line-height: 1.1; }

.boss-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(1.2);
}

.quiz-type-row {
  justify-content: flex-start;
  margin-bottom: 0.85rem;
}

.q-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
  background: rgba(62, 207, 255, 0.18);
  color: var(--cyan);
  font-size: 0.85rem;
  margin-right: 0.25rem;
}

.q-type-tag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  background: rgba(255, 107, 44, 0.18);
  color: var(--accent-hot);
  vertical-align: middle;
}

.q-short .q-type-tag {
  background: rgba(61, 214, 140, 0.18);
  color: var(--ok);
}

.short-label {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.short-label textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--navy);
  color: var(--text);
  font-size: 1.02rem;
  font-family: inherit;
  resize: vertical;
  min-height: 3rem;
}

.short-label textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.model-answer {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(62, 207, 255, 0.1);
  border: 1px solid rgba(62, 207, 255, 0.35);
  color: var(--cyan);
  font-size: 0.95rem;
  font-weight: 600;
}

fieldset.q-right {
  border-color: rgba(61, 214, 140, 0.55);
}

fieldset.q-wrong {
  border-color: rgba(255, 107, 122, 0.55);
}

@media (max-width: 480px) {
  .deco-float { width: 40px; height: 40px; opacity: 0.3; }
  .hero-art img { width: 44px; height: 44px; }
  .pip img { width: 14px; height: 14px; }
}

/* ——— Lab-bot lesson guide ——— */
.lab-bot-guide {
  position: sticky;
  top: 0.75rem;
  z-index: 40;
  margin: 0 0 1rem;
  pointer-events: none;
}

.lab-bot-guide.is-active {
  display: block;
}

.lab-bot-guide[hidden] {
  display: none !important;
}

.lab-bot-body {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  max-width: 420px;
  margin-left: auto;
  pointer-events: auto;
  position: relative;
}

.lab-bot-avatar {
  width: 56px;
  height: 70px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(62, 207, 255, 0.35));
  animation: lab-bot-bob 2.8s ease-in-out infinite;
}

@keyframes lab-bot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.lab-bot-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--card-lift);
  border: 1px solid rgba(62, 207, 255, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.lab-bot-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 14px;
  width: 12px;
  height: 12px;
  background: var(--card-lift);
  border-left: 1px solid rgba(62, 207, 255, 0.45);
  border-bottom: 1px solid rgba(62, 207, 255, 0.45);
  transform: rotate(45deg);
}

.lab-bot-name {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan);
}

.lab-bot-tip {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text);
}

.lab-bot-dismiss {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 2;
  width: 1.55rem;
  height: 1.55rem;
  border: none;
  border-radius: 8px;
  background: rgba(10, 22, 40, 0.55);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.lab-bot-bubble .lab-bot-name {
  padding-right: 1.4rem;
}

.lab-bot-dismiss:hover,
.lab-bot-dismiss:focus-visible {
  color: var(--text);
  background: rgba(255, 107, 44, 0.35);
  outline: none;
}

.lab-bot-guide.is-collapsed .lab-bot-body {
  display: none;
}

.lab-bot-show {
  pointer-events: auto;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(62, 207, 255, 0.5);
  background: var(--card-lift);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.lab-bot-show[hidden] {
  display: none !important;
}

.lab-bot-show img {
  width: 36px;
  height: 45px;
}

.lab-bot-guide.is-collapsed {
  position: fixed;
  right: 0.75rem;
  bottom: 0.85rem;
  top: auto;
  margin: 0;
  z-index: 50;
}

@media (max-width: 640px) {
  .lab-bot-guide.is-active:not(.is-collapsed) {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.75rem;
    top: auto;
    margin: 0;
    z-index: 50;
  }

  .lab-bot-body {
    max-width: none;
    margin-left: 0;
  }

  .lab-bot-avatar {
    width: 44px;
    height: 55px;
  }

  .lab-bot-tip {
    font-size: 0.88rem;
  }

  /* Keep content clickable; guide sits above bottom chrome without blocking cards */
  .lab-bot-guide.is-active:not(.is-collapsed) ~ .step-panel.active {
    padding-bottom: 6.5rem;
  }
}


/* ——— Skin switcher ——— */
.skin-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.skin-control .skin-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.skin-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--navy-2);
}

.skin-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  line-height: 1.2;
}

.skin-seg button.is-active {
  background: linear-gradient(135deg, var(--cta), var(--cta-deep));
  color: #fff;
  box-shadow: 0 0 12px var(--cta-glow);
}

.skin-seg button:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 1px;
  z-index: 1;
}

.skin-select {
  appearance: none;
  padding: 0.35rem 1.6rem 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--navy-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239bb0c9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 9.5rem;
}

.skin-select:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 1px;
  border-color: var(--cta);
}

/* Subject pills */
.badge.subject-bio { background: color-mix(in srgb, #2dd4a8 22%, transparent); color: #2dd4a8; }
.badge.subject-chem { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #fbbf24; }
.badge.subject-phys { background: color-mix(in srgb, #60a5fa 22%, transparent); color: #60a5fa; }
.badge.subject-skills { background: color-mix(in srgb, #c084fc 22%, transparent); color: #c084fc; }

html[data-theme="lab-light"] .badge.subject-bio { background: #ecfdf5; color: #047857; }
html[data-theme="lab-light"] .badge.subject-chem { background: #fffbeb; color: #b45309; }
html[data-theme="lab-light"] .badge.subject-phys { background: #eff6ff; color: #1d4ed8; }
html[data-theme="lab-light"] .badge.subject-skills { background: #f5f3ff; color: #6d28d9; }

/* Mission / hero subject rail */
.mission-card[data-subject],
.hero-mission[data-subject] {
  border-color: var(--subject-border);
  background: linear-gradient(160deg, var(--subject-soft) 0%, var(--card) 55%);
}
.mission-card[data-subject]::after {
  background: radial-gradient(circle, var(--subject-glow), transparent 70%);
}

.mission-list li[data-subject] {
  border-left: 3px solid var(--subject);
  padding-left: 0.65rem;
  background: color-mix(in srgb, var(--subject-soft) 55%, transparent);
}
.mission-list li[data-subject] .mission-icon-wrap {
  border-color: var(--subject-border);
  box-shadow: 0 0 12px var(--subject-glow);
}

/* Lab-bot subject border */
[data-subject] .lab-bot-bubble {
  border-color: var(--subject-border);
  background: color-mix(in srgb, var(--subject-soft) 70%, var(--card-lift));
}
[data-subject] .lab-bot-bubble::before {
  border-left-color: var(--subject-border);
  border-bottom-color: var(--subject-border);
  background: color-mix(in srgb, var(--subject-soft) 70%, var(--card-lift));
}

/* Idea step subject accent on callouts inside lesson */
[data-subject] .callout.loud {
  border-left-color: var(--subject);
  background: linear-gradient(90deg, var(--subject-glow), var(--navy));
}

html[data-theme="lab-light"] .card {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
html[data-theme="lab-light"] a { color: var(--link); }
html[data-theme="lab-light"] .pip.active,
html[data-theme="lab-light"] .btn.primary {
  color: #fff;
}

html[data-theme="lab-neon"] .card {
  border-color: color-mix(in srgb, var(--subject) 22%, var(--border));
}
html[data-theme="lab-neon"] .topbar-brand .dot {
  box-shadow: 0 0 14px var(--cta-glow);
}

.topbar-brand .dot {
  background: var(--cta);
  box-shadow: 0 0 10px var(--cta-glow);
}

@media (max-width: 640px) {
  .skin-control .skin-label { display: none; }
  .skin-seg button { padding: 0.35rem 0.45rem; font-size: 0.68rem; }
}

/* ——— Movie spark + Stretch Goals (optional curiosity; not Core) ——— */
.curiosity-card {
  margin-top: 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel, var(--navy));
  overflow: hidden;
}

.curiosity-card > summary.curiosity-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.85rem 1rem;
  user-select: none;
}

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

.curiosity-card > summary.curiosity-summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}

.curiosity-card[open] > summary.curiosity-summary::after {
  transform: rotate(90deg);
}

.curiosity-icon {
  flex-shrink: 0;
  color: var(--cyan);
}

.curiosity-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.curiosity-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.curiosity-body {
  padding: 0 1rem 1rem;
  border-top: 1px dashed var(--border);
}

.movie-spark {
  border-color: color-mix(in srgb, var(--cyan) 45%, var(--border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cyan) 10%, transparent),
    var(--navy)
  );
}

.movie-spark .curiosity-icon {
  color: var(--cyan);
}

.movie-badge {
  background: color-mix(in srgb, var(--cyan) 18%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  color: var(--cyan);
}

.movie-title {
  margin: 0.75rem 0 0.35rem;
  font-size: 1.12rem;
}

.movie-why {
  margin: 0 0 0.5rem;
  max-width: 70ch;
}

.movie-watch {
  margin: 0;
  max-width: 70ch;
}

/* Stretch uses skills-adjacent purple — distinct from Bio/Chem/Phys Core */
.stretch-goals {
  --curiosity: #c084fc;
  --curiosity-soft: #241833;
  --curiosity-border: #6b4a9e;
  border-color: var(--curiosity-border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--curiosity) 12%, transparent),
    var(--navy)
  );
}

html[data-theme="lab-light"] .stretch-goals {
  --curiosity-soft: #f5f3ff;
  --curiosity-border: #d8b4fe;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--curiosity) 14%, #fff),
    var(--navy)
  );
}

.stretch-goals .curiosity-icon {
  color: var(--curiosity);
}

.stretch-badge {
  background: color-mix(in srgb, var(--curiosity) 22%, transparent);
  border-color: color-mix(in srgb, var(--curiosity) 45%, transparent);
  color: var(--curiosity);
}

.stretch-banner {
  margin: 0.75rem 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border-left: 4px solid var(--curiosity);
  background: color-mix(in srgb, var(--curiosity) 14%, var(--navy));
  font-weight: 600;
  font-size: 0.92rem;
  max-width: 70ch;
}

.stretch-block {
  margin-top: 0.65rem;
}

.stretch-block-title {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  color: var(--curiosity);
}

.stretch-bullets {
  margin: 0;
  max-width: 70ch;
}

/* ——— Memory pack (Idea flashcards + Check match) ——— */
.memory-pack {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--subject-soft, rgba(62, 207, 255, 0.12)) 80%, var(--card)) 0%, var(--card) 70%);
}

.memory-pack-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.memory-pack-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.memory-pack-icon {
  flex-shrink: 0;
  color: var(--subject, var(--cta));
  filter: drop-shadow(0 0 8px var(--subject-glow, var(--cta-glow)));
}

.memory-flash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.memory-flash {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  perspective: 900px;
  min-height: 148px;
  text-align: left;
  color: inherit;
  font: inherit;
}

.memory-flash:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: 12px;
}

.memory-flash-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 148px;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.memory-flash.is-flipped .memory-flash-inner {
  transform: rotateY(180deg);
}

.memory-flash-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-lift, var(--navy-2));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.memory-flash-back {
  transform: rotateY(180deg);
  border-color: color-mix(in srgb, var(--subject, var(--cta)) 35%, var(--border));
  background: color-mix(in srgb, var(--subject-soft, rgba(62, 207, 255, 0.15)) 55%, var(--card-lift, var(--navy-2)));
}

.memory-term {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--text);
}

.memory-say {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.memory-flip-hint {
  font-size: 0.72rem;
  margin-top: 0.35rem;
}

.memory-hook-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--subject, var(--cta));
}

.memory-hook {
  font-size: 0.88rem;
  line-height: 1.35;
}

.memory-comp {
  margin-top: 0.25rem;
}

.memory-pack--check {
  margin-top: 1rem;
}

.memory-match {
  display: grid;
  gap: 0.75rem;
}

.memory-match-col {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.memory-match-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--navy-2, var(--card-lift));
  color: var(--text);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  max-width: 100%;
  text-align: left;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.memory-match-chip.hook {
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.8rem;
  max-width: 100%;
}

.memory-match-chip:hover:not(:disabled),
.memory-match-chip:focus-visible:not(:disabled) {
  border-color: var(--cta);
  outline: none;
}

.memory-match-chip.is-selected {
  border-color: var(--cta);
  box-shadow: 0 0 0 2px var(--cta-glow);
  background: color-mix(in srgb, var(--cta) 18%, var(--navy-2, var(--card-lift)));
}

.memory-match-chip.is-matched {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: default;
}

.memory-match-status {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  min-height: 1.3em;
}

.memory-match-status.is-ok { color: #3dd68c; }
.memory-match-status.is-bad { color: #f87171; }
.memory-match-status.is-warn { color: #fbbf24; }

html[data-theme="lab-light"] .memory-flash-face {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

/* Featured / must-know Memory Pack cards — bigger for longer full-sentence hooks */
.memory-flash.is-featured {
  grid-column: span 2;
  min-height: 188px;
}
.memory-flash.is-featured .memory-flash-inner {
  min-height: 188px;
}
.memory-flash.is-featured .memory-flash-face {
  padding: 1rem 1.05rem;
  border-color: color-mix(in srgb, var(--subject, var(--cta)) 40%, var(--border));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--subject-glow, var(--cta-glow)) 35%, rgba(0, 0, 0, 0.14));
}
.memory-flash.is-featured .memory-term {
  font-size: 1.18rem;
}
.memory-flash.is-featured .memory-hook {
  font-size: 0.95rem;
  line-height: 1.45;
}
.memory-featured-badge {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subject, var(--cta));
  background: color-mix(in srgb, var(--subject-soft, rgba(62, 207, 255, 0.2)) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--subject, var(--cta)) 35%, var(--border));
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.15rem;
}
@media (max-width: 560px) {
  .memory-flash.is-featured {
    grid-column: span 1;
  }
}



/* —— Schedule page —— */
.schedule-banner {
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, #fbbf24 14%, var(--card, transparent));
}
.schedule-banner.draft strong { color: #fbbf24; }
html[data-theme="lab-light"] .schedule-banner {
  background: #fffbeb;
  border-color: #fcd34d;
}
html[data-theme="lab-light"] .schedule-banner.draft strong { color: #b45309; }
.schedule-banner p { margin: 0.4rem 0 0; color: var(--muted); }
.schedule-bullets {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
}
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.milestone-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--navy, #0a1628) 40%, transparent);
}
.milestone-date { font-weight: 650; margin: 0.2rem 0; }
.schedule-legend { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.schedule-next-hint {
  margin: 0.75rem 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--subject-border, var(--border));
  background: color-mix(in srgb, var(--subject, #f97316) 12%, transparent);
}
.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.schedule-table th,
.schedule-table td {
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.schedule-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.schedule-sessions tr.row-review { background: color-mix(in srgb, #a78bfa 10%, transparent); }
.schedule-sessions tr.row-buffer { background: color-mix(in srgb, #94a3b8 10%, transparent); }
.schedule-sessions tr.row-today,
.schedule-sessions tr.row-next {
  outline: 2px solid var(--subject, #f97316);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--subject, #f97316) 14%, transparent);
}
.badge.kind-review {
  background: color-mix(in srgb, #a78bfa 22%, transparent);
  color: #c4b5fd;
}
.badge.kind-buffer {
  background: color-mix(in srgb, #94a3b8 22%, transparent);
  color: #cbd5e1;
}
.badge.subject-mixed {
  background: color-mix(in srgb, #a78bfa 18%, transparent);
  color: #c4b5fd;
}
html[data-theme="lab-light"] .badge.kind-review { background: #f5f3ff; color: #6d28d9; }
html[data-theme="lab-light"] .badge.kind-buffer { background: #f1f5f9; color: #475569; }
.topbar-nav {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  margin-left: 0.35rem;
}
.topbar-nav:hover { color: var(--text); text-decoration: underline; }
.topbar-brand a { color: inherit; text-decoration: none; }
.topbar-brand a:hover { text-decoration: underline; }

/* —— Schedule UX pack (collapse + jazz-up) —— */
/* =============================================================================
   13Sci Schedule UX — snippets to add/adapt (merge into public/css/style.css)
   Tokens: existing lab themes + subject accents. Parent-calm stays calm.
   ============================================================================= */

/* --- Subject aliases (requested --subj-*); map to existing 13Sci hues --- */
:root {
  --subj-bio: #2dd4a8;
  --subj-chem: #fbbf24;
  --subj-phys: #60a5fa;
  --subj-skills: #c084fc;
  --subj-review: #a78bfa;
  --subj-buffer: #94a3b8;
}

/* --- Slim title / cadence --- */
.schedule-title-card .section-head h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: -0.02em;
}
.schedule-cadence-line {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.schedule-how {
  margin-top: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--navy, #0a1628) 35%, transparent);
  padding: 0.15rem 0.75rem 0.15rem;
}
.schedule-how > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 0.15rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  user-select: none;
}
.schedule-how > summary::-webkit-details-marker { display: none; }
.schedule-how > summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.75;
  flex: 0 0 auto;
}
.schedule-how[open] > summary::before { transform: rotate(45deg); }
.schedule-how > summary:hover { color: var(--text); }
.schedule-how .schedule-bullets { margin-top: 0.15rem; margin-bottom: 0.75rem; }

/* --- Compact milestones strip (optional tighten of existing grid) --- */
.milestone-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.55rem;
}
.milestone-grid.compact .milestone-card {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
}

/* --- Fold sections: History / Later / Phases --- */
.schedule-fold {
  margin: 1rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius, 16px);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.schedule-fold > summary.schedule-fold-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.9rem 1.1rem;
  color: var(--muted);
  font-weight: 650;
  font-size: 1rem;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.schedule-fold > summary.schedule-fold-summary::-webkit-details-marker { display: none; }
.schedule-fold > summary.schedule-fold-summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.7;
  flex: 0 0 auto;
}
.schedule-fold[open] > summary.schedule-fold-summary::before {
  transform: rotate(45deg);
}
.schedule-fold > summary.schedule-fold-summary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--card-lift) 55%, transparent);
}
.schedule-fold[open] > summary.schedule-fold-summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.schedule-fold-count {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}
.schedule-fold[open] .schedule-fold-count {
  background: color-mix(in srgb, var(--cyan, #3ecfff) 22%, transparent);
  color: var(--text);
}
.schedule-fold-body {
  padding: 0.65rem 0.85rem 0.95rem;
}
.schedule-fold .schedule-table {
  font-size: 0.88rem;
}
.schedule-fold .schedule-table th,
.schedule-fold .schedule-table td {
  padding: 0.38rem 0.5rem;
}

/* --- Now section --- */
.schedule-now {
  margin-top: 1rem;
}
.schedule-now-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.schedule-now-head h2 {
  margin: 0;
  font-size: 1.2rem;
}
.schedule-now-sub {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.schedule-now-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 720px) {
  .schedule-now-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Today / first focus card can span full width for hierarchy */
  .schedule-now-grid .schedule-lesson-card.is-today,
  .schedule-now-grid .schedule-lesson-card.is-featured {
    grid-column: 1 / -1;
  }
}

.schedule-lesson-card {
  position: relative;
  min-height: 112px;
  padding: 1rem 1.1rem 1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--card-lift) 0%, var(--card) 60%);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-left: 4px solid var(--subj-buffer);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.schedule-lesson-card[data-subject="bio"]    { border-left-color: var(--subj-bio); }
.schedule-lesson-card[data-subject="chem"]   { border-left-color: var(--subj-chem); }
.schedule-lesson-card[data-subject="phys"]   { border-left-color: var(--subj-phys); }
.schedule-lesson-card[data-subject="skills"] { border-left-color: var(--subj-skills); }
.schedule-lesson-card[data-kind="review"]    { border-left-color: var(--subj-review); }
.schedule-lesson-card[data-kind="buffer"]    { border-left-color: var(--subj-buffer); }

.schedule-lesson-card .slot-date {
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.schedule-lesson-card .slot-title {
  font-size: 1.02rem;
  font-weight: 650;
  margin: 0;
  line-height: 1.35;
}
.schedule-lesson-card .slot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.schedule-lesson-card .slot-actions {
  margin-top: auto;
  padding-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.schedule-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.schedule-pill.today {
  background: color-mix(in srgb, var(--cta) 28%, transparent);
  color: #ffedd5;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cta) 55%, transparent);
}
.schedule-pill.next {
  background: color-mix(in srgb, var(--cyan, #3ecfff) 22%, transparent);
  color: var(--text);
}
html[data-theme="lab-light"] .schedule-pill.today {
  color: #9a3412;
  background: #ffedd5;
}
html[data-theme="lab-light"] .schedule-pill.next {
  color: #0c4a6e;
  background: #e0f2fe;
}

/* Today: slightly larger + CTA orange ring */
.schedule-lesson-card.is-today {
  min-height: 132px;
  padding: 1.2rem 1.25rem 1.2rem 1.3rem;
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--cta) 28%, transparent),
    var(--shadow);
  transform: translateZ(0);
}
.schedule-lesson-card.is-next:not(.is-today) {
  outline: 1px solid color-mix(in srgb, var(--cyan, #3ecfff) 65%, var(--border));
  outline-offset: 1px;
}

.schedule-now-empty {
  padding: 1.25rem 1.1rem;
  border-radius: 14px;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  text-align: center;
}
.schedule-now-empty strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
  font-size: 1.05rem;
}

/* --- Theme tweaks --- */
html[data-theme="lab-light"] .schedule-lesson-card {
  background: var(--card);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
html[data-theme="lab-light"] .schedule-fold {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
html[data-theme="lab-neon"] .schedule-lesson-card.is-today {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--cta) 40%, transparent),
    0 0 28px color-mix(in srgb, var(--cta) 35%, transparent),
    var(--shadow);
}
html[data-theme="lab-neon"] .schedule-fold > summary.schedule-fold-summary:hover {
  background: color-mix(in srgb, #f472b6 10%, var(--card-lift));
}

/* Parent calm: dial back glow / scale cues */
.parent-calm .schedule-lesson-card.is-today {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 22%, transparent), var(--shadow);
  outline-width: 2px;
}
.parent-calm .schedule-lesson-card {
  box-shadow: none;
}

/* Placeholder / demo affordance (mock only — do not ship in live rows) */
.schedule-demo-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, #f97316 25%, transparent);
  color: #fdba74;
  border: 1px solid color-mix(in srgb, #f97316 45%, transparent);
}
html[data-theme="lab-light"] .schedule-demo-tag {
  color: #c2410c;
  background: #ffedd5;
  border-color: #fdba74;
}

/* --- Parent miss / make-up --- */
.badge.status-missed {
  background: color-mix(in srgb, #f87171 22%, transparent);
  color: #fca5a5;
}
.badge.status-done_late {
  background: color-mix(in srgb, #fbbf24 22%, transparent);
  color: #fbbf24;
}
.badge.status-on_time,
.badge.status-done {
  background: color-mix(in srgb, #2dd4a8 22%, transparent);
  color: #2dd4a8;
}
.badge.status-makeup_host {
  background: color-mix(in srgb, #c084fc 22%, transparent);
  color: #c084fc;
}
html[data-theme="lab-light"] .badge.status-missed { background: #fef2f2; color: #b91c1c; }
html[data-theme="lab-light"] .badge.status-done_late { background: #fffbeb; color: #b45309; }
html[data-theme="lab-light"] .badge.status-on_time,
html[data-theme="lab-light"] .badge.status-done { background: #ecfdf5; color: #047857; }
html[data-theme="lab-light"] .badge.status-makeup_host { background: #f5f3ff; color: #6d28d9; }

.slot-miss-actions { margin-top: 0.65rem; }
.parent-calm .slot-miss-actions .btn { font-size: 0.8rem; }

.missed-modal[hidden] { display: none !important; }
.missed-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.missed-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.missed-modal-panel {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  width: 100%;
  margin: 0;
}
.missed-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}


/* ——— Mica’s Science Notebook ——— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nb-tip {
  max-width: min(320px, calc(100vw - 16px));
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card, var(--navy));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 0.45rem;
}
.nb-tip-quote {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text);
  font-style: italic;
}
.nb-tip-note-label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.nb-tip-note-label textarea {
  width: 100%;
  resize: vertical;
  min-height: 2.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--navy, #0b1220);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.nb-tip-count { font-size: 0.72rem; justify-self: end; }
.nb-tip-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nb-tip-status { margin: 0; font-size: 0.8rem; }
.nb-tip-status.error { color: #f87171; }
.nb-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card, var(--navy));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-size: 0.9rem;
}
.nb-toast a { font-weight: 600; color: var(--accent, #ff6b2c); }
mark.nb-quote-mark,
.is-quote-target {
  background: color-mix(in srgb, var(--accent, #ff6b2c) 28%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #ff6b2c) 18%, transparent);
  scroll-margin-top: 5.5rem;
}
[data-block] { scroll-margin-top: 5.5rem; }
.ledger-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}
.ledger-select-all { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.ledger-count, .ledger-selected { color: var(--muted); }
.btn.danger {
  border-color: color-mix(in srgb, #ef4444 55%, var(--border));
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #fecaca;
}
.btn.danger:disabled { opacity: 0.4; cursor: not-allowed; }
html[data-theme="lab-light"] .btn.danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.hl-ledger { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hl-ledger th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid var(--border);
}
.hl-ledger .col-check { width: 2.2rem; text-align: center; }
.hl-row td {
  padding: 0.75rem 0.45rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.hl-row.is-checked td {
  background: color-mix(in srgb, var(--accent, #ff6b2c) 10%, transparent);
}
.hl-title {
  display: block;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  line-height: 1.35;
}
.hl-title:hover { text-decoration: underline; }
.hl-text {
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}
.hl-text:hover { text-decoration: underline; }
.col-note { color: var(--muted); max-width: 14rem; }
.col-quote { max-width: 22rem; }
.parent-calm .nb-tip { display: none !important; }