/* Curriculum Map — standalone full-viewport page (CSP: external file only). */

.lm-body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0a0a0c;
  color: #e8e4da;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---- top bar ------------------------------------------------------------- */
.lm-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(12, 10, 7, 0.92);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}
.lm-back {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e8e4da;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.lm-back img { border-radius: 7px; display: block; }
.lm-back:hover .lm-back__label { color: #d4af37; }
.lm-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lm-title strong { font-size: 15px; letter-spacing: 0.02em; }
.lm-title__sub { font-size: 12px; color: #9a927f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lm-search {
  width: min(300px, 34vw);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #e8e4da;
  font-size: 13px;
  outline: none;
}
.lm-search:focus { border-color: #d4af37; }
.lm-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: transparent;
  color: #e8e4da;
  font-size: 13px;
  cursor: pointer;
}
.lm-btn:hover { border-color: #d4af37; color: #d4af37; }

/* view switch (Map | List) */
.lm-views {
  display: flex;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  overflow: hidden;
}
.lm-view {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #b8b0a0;
  font-size: 13px;
  cursor: pointer;
}
.lm-view + .lm-view { border-left: 1px solid rgba(212, 175, 55, 0.25); }
.lm-view:hover { color: #e8e4da; }
.lm-view.is-active { background: rgba(212, 175, 55, 0.16); color: #d4af37; font-weight: 600; }
.lm-quizlink { color: #b8b0a0; font-size: 13px; text-decoration: none; white-space: nowrap; }
.lm-quizlink:hover { color: #d4af37; }
.lm-cta {
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d4af37, #b8912a);
  color: #171207;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lm-cta:hover { filter: brightness(1.08); }

/* ---- main layout: sober side menu + stage -------------------------------- */
.lm-main { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }

.lm-nav {
  flex: 0 0 300px;
  min-height: 0;
  overflow-y: auto;
  background: #0d0b09;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 8px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.25) transparent;
}
.lm-body.lm-nav-hidden .lm-nav { display: none; }

.lm-nav__list { list-style: none; margin: 0; padding: 0; }
.lm-nav__mod { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.lm-nav__mod > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: #cfc8b8;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lm-nav__mod > summary::-webkit-details-marker { display: none; }
.lm-nav__mod > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #7d7663;
  border-bottom: 1.5px solid #7d7663;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.lm-nav__mod[open] > summary::before { transform: rotate(45deg); }
.lm-nav__mod > summary:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
.lm-nav__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.lm-nav__count { margin-left: auto; color: #6d6654; font-size: 11px; }

.lm-nav__lessons { list-style: none; margin: 0 0 6px; padding: 0 0 0 4px; }
.lm-nav__lessons button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #a49c89;
  font-size: 12px;
  line-height: 1.35;
  padding: 5px 8px 5px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.lm-nav__lessons button:hover { color: #e8e4da; background: rgba(212, 175, 55, 0.06); }
.lm-nav__lessons button.is-current { color: #d4af37; border-left-color: #d4af37; }

/* ---- LIST mode: the sober menu becomes the whole page -------------------- */
.lm-body.lm-mode-list .lm-stage { display: none; }
.lm-body.lm-mode-list .lm-nav {
  display: block;
  flex: 1 1 auto;
  border-right: 0;
  padding: 18px clamp(12px, 6vw, 120px) 60px;
}
.lm-body.lm-mode-list .lm-nav__mod > summary { font-size: 13.5px; padding: 10px 8px; }
.lm-body.lm-mode-list .lm-nav__lessons {
  column-width: 340px;
  column-gap: 28px;
  padding: 2px 0 10px 18px;
}
.lm-body.lm-mode-list .lm-nav__lessons li { break-inside: avoid; }

/* ---- stage --------------------------------------------------------------- */
.lm-stage { position: relative; flex: 1 1 auto; min-height: 0; }
#lm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#lm-canvas.lm-dragging { cursor: grabbing; }

.lm-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(12, 10, 7, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: #b8b0a0;
  font-size: 12px;
  pointer-events: none;
  transition: opacity 0.6s ease;
  max-width: 92%;
  text-align: center;
}
.lm-hint.lm-hidden { opacity: 0; }

/* ---- hover tooltip ------------------------------------------------------- */
.lm-tip {
  position: absolute;
  z-index: 5;
  max-width: 320px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(14, 12, 8, 0.94);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f0ecdf;
  font-size: 12.5px;
  line-height: 1.35;
  pointer-events: none;
}
.lm-tip .lm-tip__mod { display: block; color: #d4af37; font-size: 11px; margin-top: 2px; }

/* ---- lesson detail panel ------------------------------------------------- */
.lm-panel {
  position: absolute;
  top: 14px;
  bottom: 14px;
  border-radius: 12px;
  background: rgba(13, 11, 8, 0.96);
  border: 1px solid rgba(212, 175, 55, 0.28);
  overflow-y: auto;
  z-index: 6;
  right: 14px;
  width: min(360px, calc(100vw - 28px));
  padding: 18px;
}

.lm-x {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  color: #9a927f;
  font-size: 14px;
  cursor: pointer;
}
.lm-x:hover { color: #d4af37; }

.lm-panel__module { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #d4af37; }
.lm-panel__title { margin: 0 0 8px; font-size: 18px; line-height: 1.3; padding-right: 20px; }
.lm-panel__cat { margin: 0 0 14px; font-size: 12.5px; color: #9a927f; }
.lm-panel__linkshead { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #b8b0a0; margin-bottom: 8px; }
.lm-panel__links { list-style: none; margin: 0 0 16px; padding: 0; }
.lm-panel__links li { margin: 0 0 6px; }
.lm-panel__links button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #ddd6c6;
  font-size: 12.5px;
  line-height: 1.35;
  padding: 8px 10px;
  cursor: pointer;
}
.lm-panel__links button:hover { border-color: rgba(212, 175, 55, 0.5); color: #fff; }
.lm-panel__links .lm-linktype { color: #d4af37; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.lm-panel__open {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d4af37, #b8912a);
  color: #171207;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.lm-panel__note { margin: 12px 0 0; font-size: 11.5px; color: #8a8270; line-height: 1.45; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1020px) {
  .lm-nav { flex-basis: 260px; }
}
@media (max-width: 860px) {
  .lm-title__sub { display: none; }
  .lm-search { width: 150px; }
  .lm-cta { display: none; }
  /* map mode on small screens: menu overlays the stage instead of squeezing it */
  .lm-body:not(.lm-mode-list):not(.lm-nav-hidden) .lm-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 84vw);
    z-index: 7;
  }
  .lm-main { position: relative; }
}
@media (max-width: 560px) {
  .lm-top { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .lm-search { width: 120px; }
}