/* Academy chrome — design tokens live in player.css (shared with the SCORM player) */

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#app {
  max-width: 1360px;
  margin: 0 auto;
  padding: 30px 28px 90px;
}

/* chrome bar (dark app-shell treatment) */
#chrome {
  display: block;
  padding: 0;
  background: var(--lu-chrome-bg);
  border-bottom: 1px solid var(--lu-chrome-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.chrome-bar {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
}
.chrome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--lu-chrome-text);
  text-decoration: none;
}
.chrome-logo {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  border-radius: var(--lu-r-sm);
  overflow: hidden;
}
.chrome-logo svg { width: 30px; height: 30px; display: block; }
.chrome-session { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.chrome-session a { color: var(--lu-chrome-text); text-decoration: none; }
.chrome-session a:hover { text-decoration: underline; }
.chrome-email { color: var(--lu-chrome-muted); }
.chrome-session button {
  background: transparent;
  color: var(--lu-chrome-text);
  border: 1px solid var(--lu-chrome-inset-border);
  padding: 6px 12px;
  font-size: 13px;
  border-radius: var(--lu-r-sm);
}
.chrome-session button:hover { filter: none; background: var(--lu-chrome-inset); }

/* catalogue hero */
.catalogue-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.catalogue-hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.catalogue-strapline { margin: 0; font-size: 14.5px; color: var(--lu-text-muted); max-width: 620px; }
.catalogue-hero-actions { display: flex; align-items: center; gap: 10px; }
.catalogue-hero-actions button { padding: 9px 16px; font-size: 13.5px; font-weight: 600; }
.btn-outline-link {
  display: inline-flex;
  align-items: center;
  background: var(--lu-surface);
  color: var(--lu-ink);
  border: 1px solid var(--lu-btn-outline-border);
  border-radius: var(--lu-r-sm);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.btn-outline-link:hover { border-color: var(--lu-text-disabled); }

/* path tabs (round 2) */
.path-tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 0 0 16px;
}
.path-tabs {
  display: inline-flex;
  background: var(--lu-track);
  border-radius: var(--lu-r-card);
  padding: 3px;
  flex: none;
}
.path-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: transparent;
  border: none;
  color: var(--lu-text-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--lu-r-tab);
  cursor: pointer;
}
.path-tab:hover { filter: none; }
.path-tab[aria-selected='true'] {
  background: var(--lu-surface);
  color: var(--lu-ink);
  box-shadow: var(--lu-shadow-raised);
}
.path-tab-count { font-size: 11.5px; font-weight: 600; color: var(--lu-text-muted); }
.path-tab[aria-selected='true'][data-path='analyst'] .path-tab-count { color: var(--lu-track-analyst); }
.path-tab[aria-selected='true'][data-path='builder'] .path-tab-count { color: var(--lu-track-builder); }
.path-tabs-helper {
  margin: 0;
  font-size: 12.5px;
  color: var(--lu-text-faint);
  max-width: 460px;
  text-align: right;
}

/* progress-and-badges grid */
/* two balanced panels — the badge column was sized for an eight-tile shelf and
   left most of a full-width card empty once it became one badge (CS-81) */
.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 20px;
}
.path-panel,
.badge-strip {
  background: var(--lu-surface);
  border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-panel);
  padding: 18px;
  box-shadow: var(--lu-shadow-card);
}
.path-stat { margin: 10px 0 0; font-size: 13px; color: var(--lu-text-secondary); }
.path-stat-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lu-ink);
  margin-right: 6px;
}
.path-bar {
  margin: 12px 0 0;
  height: 7px;
  border-radius: var(--lu-r-pill);
  background: var(--lu-track);
  border: 1px solid var(--lu-border-faint);
  overflow: hidden;
}
.path-bar-fill { height: 100%; border-radius: var(--lu-r-pill); background: var(--lu-done); transition: width 0.2s; }

/* badge shelf */
.badge-strip-overline { color: var(--lu-text-muted); }
/* one badge per path (CS-81) — the eight-tile shelf duplicated the graph */
.badge-hero { margin: 14px 0 0; display: flex; align-items: center; gap: 18px; }
.badge-hero svg { image-rendering: pixelated; flex: none; }
.badge-hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.badge-hero-tier {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lu-text-secondary);
}
.badge-hero-detail { font-size: 12.5px; color: var(--lu-text-muted); }
.badge-hero-detail b { color: var(--lu-ink); font-weight: 600; }
.badge-hero[data-tier='bronze'] .badge-hero-tier { color: #b6763a; }
.badge-hero[data-tier='silver'] .badge-hero-tier { color: #6f7684; }
.badge-hero[data-tier='gold'] .badge-hero-tier { color: #c9a02c; }
.badge-hero[data-tier='violet'] .badge-hero-tier { color: #6b46f0; }
.badge-signin { margin: 10px 0 0; font-size: 12.5px; color: var(--lu-text-muted); }

/* "How badges work" disclosure — the full tier ladder, always available */
.badge-howto { margin: 14px 0 0; border-top: 1px solid var(--lu-border-faint); padding-top: 10px; }
.badge-howto-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lu-text-secondary);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-howto-summary::-webkit-details-marker { display: none; }
.badge-howto-summary::before { content: '▸'; font-size: 10px; color: var(--lu-text-muted); transition: transform 0.15s; }
.badge-howto[open] .badge-howto-summary::before { transform: rotate(90deg); }
.badge-howto-list { list-style: none; margin: 12px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.badge-howto-rung { display: flex; align-items: center; gap: 12px; }
.badge-howto-emblem svg { image-rendering: pixelated; display: block; }
.badge-howto-req { font-size: 12.5px; color: var(--lu-text-muted); }
.badge-howto-req b { font-weight: 700; margin-right: 6px; }
.badge-howto-rung[data-tier='bronze'] .badge-howto-req b { color: #b6763a; }
.badge-howto-rung[data-tier='silver'] .badge-howto-req b { color: #6f7684; }
.badge-howto-rung[data-tier='gold'] .badge-howto-req b { color: #c9a02c; }
.badge-howto-rung[data-tier='violet'] .badge-howto-req b { color: #6b46f0; }

/* earn modal */
.earn-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 19, 0.62);
}
.earn-card {
  background: var(--lu-surface); border-radius: var(--lu-r-card);
  padding: 32px 40px; text-align: center; max-width: 340px;
}
.earn-modal-batch .earn-card { max-width: 560px; }
.earn-heading { margin: 0 0 18px; font-size: 18px; }
.earn-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 26px; margin-bottom: 18px; max-height: 60vh; overflow-y: auto; }
.earn-item { display: flex; flex-direction: column; align-items: center; max-width: 132px; }
.earn-item-title { margin: 0; font-size: 12px; color: var(--lu-text-secondary); }
.earn-badge svg { image-rendering: pixelated; }
.earn-modal:not(.earn-modal-static) .earn-badge rect { opacity: 0; animation: earn-pixel 0.3s steps(1) forwards; }
@keyframes earn-pixel { to { opacity: 1; } }
/* settle swap (violet -> tier palette) replaces the badge's innerHTML — without
   this, the fresh <rect>s re-trigger the assembly animation and blank the
   badge for a beat before it re-fades in */
.earn-item.earn-settled .earn-badge rect { opacity: 1; animation: none; }
/* settle pop — the badge gives a quick scale bump as it resolves to its tier
   colours; violet (the pinnacle, 100%) gets a stronger bump and a glow so it
   really lands rather than settling quietly into its own assembly colour */
.earn-item.earn-settled .earn-badge { animation: earn-pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes earn-pop {
  0% { transform: scale(0.86); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.earn-item[data-tier='violet'].earn-settled .earn-badge { animation: earn-pop-violet 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes earn-pop-violet {
  0% { transform: scale(0.8); filter: drop-shadow(0 0 0 rgba(107, 70, 240, 0)); }
  55% { transform: scale(1.2); filter: drop-shadow(0 0 14px rgba(107, 70, 240, 0.75)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(107, 70, 240, 0.4)); }
}
.earn-tier { margin: 10px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lu-accent); }
.earn-continue { padding: 8px 22px; border-radius: var(--lu-r-sm); background: var(--lu-accent); color: #fff; border: 0; cursor: pointer; }

/* ask box */
.ask-box {
  background: var(--lu-surface);
  border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-section);
  box-shadow: var(--lu-shadow-card);
  padding: 14px 18px;
  margin: 0 0 20px;
}
.ask-form { display: flex; align-items: center; gap: 12px; }
.ask-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lu-r-sm);
  background: var(--lu-accent-tint);
  color: var(--lu-accent);
  font-size: 15px;
}
.ask-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--lu-ink);
  background: transparent;
  min-width: 0;
}
.ask-input::placeholder { color: var(--lu-text-disabled); }
.ask-btn {
  background: var(--lu-btn-filled-bg);
  color: var(--lu-btn-filled-fg);
  border: 1px solid var(--lu-btn-filled-bg);
  border-radius: var(--lu-r-sm);
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 600;
}
.ask-chips {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lu-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ask-chip {
  background: var(--lu-surface-sunken);
  color: var(--lu-text-secondary);
  border: 1px solid var(--lu-border-faint);
  border-radius: var(--lu-r-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.ask-chip:hover { filter: none; border-color: var(--lu-neutral-fill); }
.ask-result { margin: 12px 0 0; font-size: 13px; color: var(--lu-text-muted); }
.ask-result-hit { color: var(--lu-ink); }
.ask-result a { color: var(--lu-accent); text-decoration: none; }
.ask-result a:hover { text-decoration: underline; }
.ask-docs-link { font-size: 0.9em; color: var(--lu-text-secondary); }
.ask-docs-link:hover { color: var(--lu-accent); }
.ask-context { color: var(--lu-text-secondary); font-size: 0.9em; }
.ask-alts { display: block; margin-top: 4px; font-size: 0.9em; color: var(--lu-text-muted); }
.ask-alts a { color: var(--lu-accent); text-decoration: none; }
.ask-alts a:hover { text-decoration: underline; }

/* ask-match pulse on graph nodes */
@keyframes lu-pulse {
  from { box-shadow: 0 0 0 0 rgba(121, 80, 242, 0.45); }
  to { box-shadow: 0 0 0 12px rgba(121, 80, 242, 0); }
}
.node-pulse { animation: lu-pulse 1s 2; }

/* learning graph */
.graph-section {
  background: var(--lu-surface);
  border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-section);
  overflow: hidden;
  margin: 0 0 28px;
}
.graph-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--lu-border-soft);
}
.graph-title { margin: 0; font-size: 15px; font-weight: 600; }
.graph-desc { margin: 0; font-size: 12.5px; color: var(--lu-text-muted); }
.graph-legend { margin-left: auto; display: flex; gap: 16px; font-size: 12px; color: var(--lu-text-muted); flex: none; }
.graph-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.graph-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.graph-canvas {
  position: relative;
  overflow-x: auto;
  background-color: var(--lu-surface-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--lu-border-node) 1px, transparent 0);
  background-size: 22px 22px;
}
/* Scaled to fit the canvas by fitGraph() — --lu-graph-scale is set per render.
   transform-origin 0 0 keeps the scaled graph anchored to the canvas corner. */
.graph-inner {
  position: relative;
  transform: scale(var(--lu-graph-scale, 1));
  transform-origin: 0 0;
}
.graph-svg { position: absolute; inset: 0; pointer-events: none; }
.graph-overline { position: absolute; top: 14px; margin: 0; }

/* graph node = compact course card; description appears on hover/focus */
.course-card-node {
  position: absolute;
  width: 230px;
  height: 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.course-card-node .course-meta { margin-top: auto; }
/* Hover zoom (CS-70) undoes the fit: --lu-node-zoom is 1/scale, so a node that
   was shrunk to 68% grows ~1.5x back to full size, while an unshrunk graph gets
   only a small lift — there is nothing to undo. transform-origin is per node.
   Scoped under .graph-inner to outrank the generic .course-card:hover lift. */
.node-detail { display: none; }
.graph-inner .course-card-node:hover,
.graph-inner .course-card-node:focus-visible {
  z-index: 20;
  height: auto;
  min-height: 96px;
  overflow: visible;
  transform: scale(var(--lu-node-zoom, 1.1));
  box-shadow: var(--lu-shadow-hover-node);
  border-color: var(--lu-accent);
}
.graph-inner .course-card-node:hover .node-detail,
.graph-inner .course-card-node:focus-visible .node-detail {
  display: block;
  margin: 8px 0 0 33px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--lu-text-muted);
}
/* the resting card clamps its title to 2 lines; zoomed, let it breathe */
.graph-inner .course-card-node:hover h3,
.graph-inner .course-card-node:focus-visible h3 { -webkit-line-clamp: none; }
.course-card-node h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card-node .feature-chip { font-size: 10px; padding: 1px 7px; white-space: nowrap; }
/* gated node = 124px tall with a dedicated chip row (handoff 3c) */
.course-card-node.course-card-cloud { height: 124px; }
.chip-row { margin: 8px 0 0 33px; }
.course-card-node .course-bar { margin-top: 7px; }

/* track groups */
.track-group { margin: 0 0 28px; }
.track-head { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 12px; }
.track-overline {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.track-progress { font-size: 12.5px; color: var(--lu-text-faint); }
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

/* course card = proto module node */
.course-card {
  background: var(--lu-surface);
  border: 1px solid var(--lu-border-node);
  border-radius: var(--lu-r-card);
  padding: 12px 13px;
  cursor: pointer;
  box-shadow: var(--lu-shadow-node);
  transition: transform 0.12s, box-shadow 0.12s;
}
.course-card:hover { transform: translateY(-1px); box-shadow: var(--lu-shadow-raised); }
.course-card:focus-visible { outline: 2px solid var(--lu-accent); outline-offset: 2px; }
.course-card-head { display: flex; align-items: center; gap: 9px; }
.course-icon {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lu-r-icon);
  background: var(--lu-reading-bg);
  color: var(--lu-reading-fg);
  font-size: 13px;
}
/* Tabler icons (CS-81): stroke inherits `color`, so the per-state .course-icon
   rules below keep tinting the glyph exactly as they did the text character. */
.course-icon .ti { width: 15px; height: 15px; display: block; }
.ask-icon .ti { width: 16px; height: 16px; display: block; }
.course-card h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.course-description {
  margin: 8px 0 0 33px;
  font-size: 12.5px;
  color: var(--lu-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-meta {
  margin: 10px 0 0 33px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: var(--lu-text-disabled);
}
.course-status { font-size: 11px; font-weight: 600; color: var(--lu-text-disabled); }
/* "Start" is the call to action, not a status — as bare text next to real
   statuses it read as a button with no button (CS-70, Ash's mockup). The card
   itself is still the click target; this is the affordance, not a nested one. */
.course-status-open {
  background: var(--lu-ink);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--lu-r-pill);
  line-height: 1;
}
.course-card:hover .course-status-open { background: var(--lu-accent); }
.feature-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lu-accent) 12%, transparent);
  color: var(--lu-accent);
}
.course-meta-right { display: flex; align-items: baseline; gap: 8px; }
.course-meta > span:first-child { white-space: nowrap; }
/* gated modules: pixel-cascade corner motif (2026-08-01 Cloud-marker design) */
.course-card-cloud { position: relative; overflow: hidden; }
/* gutter on every card so Cloud/OSS titles wrap at the same measure (handoff §3a) */
.course-card .course-card-head h3 { padding-right: 44px; }
.cascade {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 10px);
  grid-template-rows: repeat(4, 10px);
}
.cascade i { display: block; }
.cascade i:nth-child(1) { grid-area: 1 / 1; background: #361fa0; }
.cascade i:nth-child(2) { grid-area: 1 / 2; background: #5b43f5; }
.cascade i:nth-child(3) { grid-area: 1 / 3; background: #9580ff; }
.cascade i:nth-child(4) { grid-area: 1 / 4; background: #d2c7ff; }
.cascade i:nth-child(5) { grid-area: 2 / 2; background: #361fa0; }
.cascade i:nth-child(6) { grid-area: 2 / 3; background: #5b43f5; }
.cascade i:nth-child(7) { grid-area: 2 / 4; background: #9580ff; }
.cascade i:nth-child(8) { grid-area: 3 / 3; background: #361fa0; }
.cascade i:nth-child(9) { grid-area: 3 / 4; background: #5b43f5; }
.cascade i:nth-child(10) { grid-area: 4 / 4; background: #361fa0; }
.course-bar {
  margin: 8px 0 0 33px;
  height: 4px;
  flex: none; /* fixed-height node cards must not squash the bar (cloud vs OSS parity) */
  border-radius: var(--lu-r-pill);
  background: var(--lu-track);
  border: 1px solid var(--lu-border-faint);
  overflow: hidden;
}
.course-bar-fill { height: 100%; border-radius: var(--lu-r-pill); background: var(--lu-neutral-fill); }

/* card states */
.course-card-current { border: 2px solid var(--lu-accent); padding: 11px 12px; box-shadow: var(--lu-shadow-focus); }
.course-card-current:hover { box-shadow: var(--lu-shadow-focus); }
.course-card-current .course-icon { background: var(--lu-accent-soft); color: var(--lu-accent); }
.course-card-current .course-status { color: var(--lu-accent); }
.course-card-current .course-bar-fill { background: var(--lu-accent); }
.course-card-done { background: var(--lu-done-bg); border-color: var(--lu-done-border); box-shadow: none; }
.course-card-done:hover { box-shadow: var(--lu-shadow-node); }
.course-card-done h3 { color: var(--lu-done-ink); }
.course-card-done .course-icon { background: var(--lu-done-icon-bg); color: var(--lu-done-fg); }
.course-card-done .course-status { color: var(--lu-done-fg); }
.course-card-done .course-bar-fill { background: var(--lu-done); }

/* single-course hero card */
.course-card-hero { max-width: 560px; border-radius: var(--lu-r-section); padding: 18px 20px; }
.course-card-hero.course-card-current { padding: 17px 19px; }
.course-card-hero .course-icon { width: 32px; height: 32px; font-size: 16px; }
.course-card-hero .course-icon .ti { width: 19px; height: 19px; }
.course-card-hero h3 { font-size: 15px; }
.course-card-hero .course-description {
  margin-left: 41px;
  font-size: 14.5px;
  display: block;
  -webkit-line-clamp: unset;
}
.course-card-hero .course-meta { margin-left: 41px; font-size: 12.5px; }
.course-card-hero .course-status { font-size: 12px; }
.course-stat { margin: 10px 0 0 41px; font-size: 13px; color: var(--lu-text-faint); }
.course-stat-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lu-ink);
  margin-right: 6px;
}
.course-card-hero .course-bar { margin: 8px 0 0 41px; height: 7px; }

/* course page */
.breadcrumb { max-width: 760px; margin: 0 auto 12px; font-size: 12.5px; }
.breadcrumb a { color: var(--lu-text-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--lu-text-secondary); }
.course-header {
  max-width: 760px;
  margin: 0 auto;
  background: var(--lu-surface);
  border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-section);
  box-shadow: var(--lu-shadow-card);
  padding: 18px 20px;
}
.course-header .track-overline { margin: 0 0 6px; }
.course-header-title { display: flex; align-items: center; gap: 10px; }
.course-header h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.course-header-desc { margin: 0 0 8px; font-size: 14.5px; color: var(--lu-text-muted); }
.course-badge { flex: none; }
.course-badge svg { image-rendering: pixelated; display: block; }
/* dark strip (handoff option E): Cloud Pro pricing-card treatment, cascade corner */
.feature-banner {
  position: relative;
  overflow: hidden;
  margin: 12px 0; /* keeps the measured 12px rhythm above and below */
  padding: 12px 14px;
  font-size: 13.5px;
  color: #d8d8de;
  background: #1f2229;
  border-radius: var(--lu-r-sm);
  max-width: 560px;
}
.feature-banner strong { color: #fff; }
.feature-banner a { color: #9580ff; text-decoration: underline; text-underline-offset: 2px; }
.feature-banner a:hover { color: #d2c7ff; }
.course-header-meta { margin: 0; font-size: 12.5px; color: var(--lu-text-faint); }

/* player embedded in the academy: header + progress + main compose one column card */
.player-root header {
  max-width: 760px;
  margin: 16px auto 0;
  border: 1px solid var(--lu-border);
  border-bottom: 1px solid var(--lu-border-soft);
  border-radius: var(--lu-r-section) var(--lu-r-section) 0 0;
}
.player-root .progress {
  max-width: 760px;
  margin: 0 auto;
  border-left: 1px solid var(--lu-border);
  border-right: 1px solid var(--lu-border);
}
.player-root main {
  margin: 0 auto 24px;
  border-top: none;
  border-radius: 0 0 var(--lu-r-section) var(--lu-r-section);
}

/* auth */
.auth-card {
  max-width: 420px;
  margin: 40px auto 0;
  padding: 24px 26px 26px;
  background: var(--lu-surface);
  border: 1px solid var(--lu-border);
  border-radius: var(--lu-r-section);
  box-shadow: var(--lu-shadow-card);
}
.auth-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.auth-card p { margin: 0 0 4px; font-size: 14.5px; color: var(--lu-text-muted); }
.auth-card .error { color: #b42318; }
.auth-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.auth-form label { font-size: 13.5px; font-weight: 600; }
.auth-form input {
  padding: 10px 12px;
  border: 1px solid var(--lu-btn-outline-border);
  border-radius: var(--lu-r-sm);
  font-size: 15px;
  font-family: inherit;
}
.auth-form input:focus { outline: 2px solid var(--lu-accent); border-color: transparent; }

/* ≤700px degradation — the graph stacks per column group, chrome tightens */
@media (max-width: 700px) {
  #app { padding: 20px 16px 60px; }
  .path-tabs-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .path-tabs { display: flex; }
  .path-tab { flex: 1; justify-content: center; }
  .path-tabs-helper { text-align: left; max-width: none; }
  .path-grid { grid-template-columns: 1fr; }
  .graph-head { flex-wrap: wrap; }
  .graph-legend { margin-left: 0; flex-basis: 100%; }
  .graph-svg { display: none; }
  .graph-canvas { padding: 16px; height: auto !important; }
  /* stacked: cards are already full-width, so no fit-scaling and no hover zoom */
  .graph-inner { width: auto !important; height: auto !important; transform: none; }
  .graph-overline { position: static; margin: 10px 0 12px; }
  .course-card-node { position: static; width: 100%; height: auto; min-height: 0; }
  .course-card-node + .course-card-node { margin-top: 12px; }
  .course-card-node .course-meta { margin-top: 10px; }
  .graph-inner .course-card-node:hover,
  .graph-inner .course-card-node:focus-visible { transform: none; }
  .node-detail { display: block; margin: 8px 0 0 33px; font-size: 12px; color: var(--lu-text-muted); }
}

/* states */
.loading { color: var(--lu-text-muted); }
.error { color: #b42318; }
.error button, .error a { margin-left: 6px; }