/* academic.css — overview header for the desktop academic shell */

/* ── Compact overview strip (target 56–72 px total) ─────────────── */
.academic-overview {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px 8px;
  flex-shrink: 0;
}

/* Single flex row: title · mastered% · By-course toggle · Hide btn */
.academic-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 32px;
}

.academic-overview-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.academic-mastered {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.academic-bycourse-toggle {
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.academic-bycourse-toggle:hover,
.academic-bycourse-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* "Hide skill tree" — sits inside the rhs flex group (no auto margin needed here) */
.academic-jump-btn {
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.academic-jump-btn:hover {
  border-color: var(--accent);
}

/* ── Export dropdown ─────────────────────────────────────────────── */
.academic-export-btn {
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.academic-export-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.academic-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 164px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  z-index: 300;
  overflow: hidden;
}

.academic-export-menu[hidden] { display: none; }

.academic-export-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}

.academic-export-menu button:hover {
  background: var(--bg3);
  color: var(--accent);
}

/* ── Single combined progress bar ────────────────────────────────── */
.academic-overall-bar-wrap {
  padding-top: 6px;
}

.academic-overall-bar {
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}

.academic-overall-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s;
}

/* ── Per-course breakdown (progressive disclosure) ────────────────── */
/* Hidden by default via the `hidden` attribute; JS toggle removes it */
.academic-course-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.academic-course-bars[hidden] {
  display: none;
}

.academic-course-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.academic-course-label,
.academic-frac {
  font-family: var(--font-mono);
}

.academic-course-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-bar {
  flex: 1;
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
}

.academic-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}

.academic-frac {
  width: 52px;
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ── Desktop academic shell fills remaining height ───────────── */
#academic-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* The #app (views container) must fill remaining space */
#academic-shell #app {
  flex: 1;
  min-height: 0;
}

/* Views section takes full height when shown */
#academic-views-section {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#academic-views-section #app {
  height: 100%;
}

/* ── Keyboard / A11y focus rings ─────────────────────────────── */
/* Suppress the browser default only for pointer users;
   restore a high-contrast ring for keyboard/switch users. */
.chip:focus-visible,
.tab-btn:focus-visible,
#chapter-select:focus-visible,
.academic-bycourse-toggle:focus-visible,
.academic-export-btn:focus-visible,
.academic-jump-btn:focus-visible,
#panel-close:focus-visible,
#mark-btn:focus-visible,
#tt-zoom-in:focus-visible,
#tt-zoom-out:focus-visible,
#tt-fit:focus-visible,
#tt-start:focus-visible,
#tt-minimap-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Minimap toggle button ────────────────────────────────────── */
#tt-minimap-toggle {
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

#tt-minimap-toggle:hover,
#tt-minimap-toggle[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Tech-tree minimap ────────────────────────────────────────── */
#tt-minimap {
  position: absolute;
  bottom: 48px;   /* sit above the tt-controls row */
  left: 12px;
  width: 168px;
  height: 100px;
  background: var(--chrome-bg);
  -webkit-backdrop-filter: var(--chrome-blur);
  backdrop-filter: var(--chrome-blur);
  border: 1px solid var(--chrome-border);
  border-radius: var(--radius);
  z-index: 10;
  overflow: hidden;
  cursor: crosshair;
  pointer-events: all;
}

#tt-minimap svg {
  display: block;
}

/* ── Mobile: hide academic shell by default (app.js controls) ── */
@media (max-width: 899px) {
  #academic-shell:not([style]) {
    display: none;
  }
}

/* ── Reduced-motion: kill all decorative CSS transitions/animations ── */
/* JS-driven d3 transitions already gate on prefersReducedMotion; this
   covers the remaining CSS-only animated elements in the academic shell. */
@media (prefers-reduced-motion: reduce) {
  .academic-bar-fill,
  .academic-overall-fill,
  .academic-bycourse-toggle,
  .academic-export-btn,
  .academic-export-menu button,
  .academic-jump-btn,
  #tt-minimap-toggle {
    transition: none !important;
  }

  /* The pulse ring on unlockable tech-tree nodes is purely decorative */
  .pulse-ring {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── Contrast: ensure interactive-element text reads clearly ──── */
/* All key color pairs already meet WCAG AA per the app.css comments
   (--text #e6dccb 13.75:1, --text-dim #b3a892 7.94:1, --accent #5bb3a6 7.51:1
   against --bg #15120e). The rules below harden a few academic-shell
   elements that could be affected by browser default overrides. */
.academic-overview-title { color: var(--accent); }

.academic-mastered { color: var(--text-dim); }

/* Ensure strip buttons don't fall below 3:1 in any forced-color mode */
@media (forced-colors: active) {
  .academic-bycourse-toggle,
  .academic-export-btn,
  .academic-jump-btn,
  #tt-minimap-toggle {
    border: 2px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }

  .academic-bycourse-toggle.active,
  .academic-export-btn:hover,
  .academic-jump-btn:hover {
    border-color: Highlight;
    color: Highlight;
  }

  .academic-export-menu {
    border: 2px solid ButtonText;
    background: Canvas;
  }

  .academic-export-menu button:hover {
    background: Highlight;
    color: HighlightText;
  }

  #tt-minimap {
    border: 2px solid ButtonText;
  }
}

/* Hide the redundant per-course progress hud on the desktop landing. The compact
   academic header already shows overall mastery plus a "By course" expander, so this
   second per-course list only crowds the top and pushes the skill map down. */
#hud { display: none; }

/* ── Profile menu (top-right avatar, theme + level + data) ── */
.academic-profile-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg2);border:1px solid var(--border);border-radius:999px;
  padding:4px 10px 4px 6px;color:var(--text-dim);cursor:pointer;
  font-family:var(--font-mono);font-size:12px;line-height:1;
}
.academic-profile-btn:hover{color:var(--text);border-color:var(--accent)}
.academic-profile-btn>svg{color:var(--accent)}
.academic-profile-lv{font-weight:600;color:var(--text)}
.academic-profile-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:9995;min-width:248px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);padding:6px;
}
.apm-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;
  border-bottom:1px solid var(--border);margin-bottom:6px}
.apm-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:999px;background:var(--bg3);color:var(--accent);flex-shrink:0}
.apm-level{font-family:var(--font-display);font-weight:600;color:var(--text);font-size:14px}
.apm-sub{color:var(--text-dim);font-size:11px;margin-top:2px}
.apm-section{padding:4px 0;border-bottom:1px solid var(--border)}
.apm-section:last-of-type{border-bottom:none}
.apm-grouplabel{font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-dim);padding:4px 8px 2px}
.apm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;
  text-align:left;background:none;border:none;border-radius:var(--radius-sm,4px);
  padding:7px 8px;color:var(--text);cursor:pointer;font-size:13px;font-family:inherit}
.apm-row:hover{background:var(--bg3)}
.apm-val{color:var(--accent);font-family:var(--font-mono);font-size:12px}
.apm-foot{color:var(--text-dim);font-size:11px;padding:8px;text-align:center}