/* LearnMap “按主题找”：/topics 的列表与 3D 图视图、细分主题页与大主题页的学习顺序列表（v2-topics-view.ts、topic-graph.js）。
   颜色用 light-dark()，跟随站点的深浅色；类名一律 tp-（页面）或 tg-（图）开头，不覆盖站点公共样式。 */
:root {
  --tg-1: light-dark(#2f6fdf, #86aeff);
  --tg-2: light-dark(#8455e8, #bba2ff);
  --tg-3: light-dark(#0e8f84, #55d6c4);
  --tg-4: light-dark(#d9622a, #ffa576);
  --tg-5: light-dark(#cf3f78, #ff90bb);
  --tg-6: light-dark(#a87d00, #f0cb5a);
  --tg-7: light-dark(#3b8f37, #92d483);
  --tg-8: light-dark(#0b88ad, #66d2f2);
  --tg-ink: light-dark(#1d2b2f, #eef4f3);
  --tg-sub: light-dark(#4c5d60, #bccbca);
  --tg-halo: light-dark(#ffffff, #0d1218);
  --tg-bg1: light-dark(#ffffff, #1a2333);
  --tg-bg2: light-dark(#e9eef3, #0a0e15);
  --tg-star: light-dark(#9aa8b5, #d9e3ff);
  --tp-intro-c: light-dark(#2f7d4f, #8fd6a8);
  --tp-mid-c: light-dark(#2d66c3, #93b8ff);
  --tp-adv-c: light-dark(#7b46c9, #c4a6ff);
}

/* ----- header and view switch ----- */
.tp-head { align-items: flex-start; }
.tp-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); flex: none; }
.tp-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-size: 14px; color: var(--sub); white-space: nowrap; }
.tp-switch a .icon svg { width: 15px; height: 15px; }
.tp-switch a[aria-current="page"] { background: var(--soft); color: var(--brand); font-weight: 600; }
.tp-stats { font-size: 13px; color: var(--sub); margin-top: 8px; }
.tp-graph-link { font-size: 14px; white-space: nowrap; flex: none; }
.tp-graph-link .icon svg { width: 15px; height: 15px; }
.tp-crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--sub); margin-bottom: 14px; flex-wrap: wrap; }
.tp-crumbs a { color: var(--brand); }

/* Which view shows: the server's choice, then the script's (data-view). "auto" without the script: list; wide screens with motion allowed: graph. */
.tp-views[data-view="list"] .tp-graph, .tp-views[data-view="auto"] .tp-graph { display: none; }
html.js .tp-views[data-view="graph"] .tp-list { display: none; }
/* Without the script a requested graph cannot draw: hide the graph block and show the list instead (review low-6). */
html:not(.js) .tp-views[data-view="graph"] .tp-graph { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js .tp-views[data-view="auto"] .tp-graph { display: grid; }
  html.js .tp-views[data-view="auto"] .tp-list { display: none; }
}

/* ----- level tags and the learning-order list ----- */
.tp-level { display: inline-block; font-size: 12px; line-height: 1.5; padding: 1px 7px; border-radius: 5px; font-weight: 600; white-space: nowrap; }
.tp-level.level-intro { color: var(--tp-intro-c); background: color-mix(in srgb, var(--tp-intro-c) 13%, transparent); }
.tp-level.level-intermediate { color: var(--tp-mid-c); background: color-mix(in srgb, var(--tp-mid-c) 13%, transparent); }
.tp-level.level-advanced { color: var(--tp-adv-c); background: color-mix(in srgb, var(--tp-adv-c) 14%, transparent); }
.tp-order { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.tp-step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; position: relative; }
.tp-step:not(:last-child)::before { content: ''; position: absolute; left: 28px; top: 44px; bottom: -14px; width: 2px; background: var(--line); }
.tp-mark { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; position: relative; z-index: 1; }
.tp-no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 650 15px/1 system-ui, sans-serif; color: var(--brand); background: var(--surface); border: 2px solid color-mix(in srgb, var(--brand) 55%, var(--line)); }
.tp-step .resource { margin: 0; }
.tp-more { margin: 10px 0 0 72px; }
.tp-more .link, .tp-siblings .chip { font-size: 14px; }

/* ----- list view: big topic groups and subtopic cards ----- */
.tp-group { margin: 26px 0 8px; }
.tp-group:first-child { margin-top: 6px; }
.tp-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tp-group-head h2 { font-size: 21px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.tp-group-head h2::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--tp-hue, var(--brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tp-hue, var(--brand)) 20%, transparent); }
.tp-group-head h2 a, .tp-section h2 a { color: var(--ink); }
.tp-group-head h2 a:hover, .tp-section h2 a:hover { color: var(--brand); }
.tp-group-head .muted { font-size: 13px; }
.tp-intro { font-size: 14px; line-height: 1.75; color: var(--sub); margin-top: 8px; }
.tp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.tp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; border-top: 3px solid var(--tp-hue, var(--brand)); min-width: 0; }
.tp-card h3 { font-size: 17px; font-weight: 650; }
.tp-card h3 a { color: var(--ink); }
.tp-card h3 a:hover { color: var(--brand); }
.tp-card .tp-intro { font-size: 13px; margin-top: 6px; }
.tp-count { font-size: 13px; color: var(--sub); margin-top: 8px; }
.tp-first { margin: 10px 0 0; padding: 10px 0 0 18px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.6; }
.tp-first li { margin: 4px 0; }
.tp-first li a { color: var(--ink); margin-right: 6px; }
.tp-first li a:hover { color: var(--brand); }
.tp-first .tp-level { font-size: 11px; padding: 0 5px; }
.tp-section { margin: 30px 0 0; }
.tp-section h2 { font-size: 20px; font-weight: 650; }
.tp-siblings { margin: 34px 0 6px; }
.tp-siblings h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.tp-siblings .chip small { color: var(--sub); margin-left: 3px; }

/* ----- 3D graph ----- */
.tp-graph { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 6px; }
.tg-stage { position: relative; height: clamp(480px, 72vh, 720px); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, var(--tg-bg1), var(--tg-bg2)); }
.tg-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
/* Touch screens: vertical swipes scroll the page (horizontal drags still rotate, pinch zooms the page); a shorter stage leaves room to scroll. */
@media (pointer: coarse) {
  .tg-stage { height: clamp(360px, 60vh, 560px); }
  .tg-stage canvas { touch-action: pan-y pinch-zoom; }
}
.tg-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.tg-probe { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
.tg-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 280px; padding: 8px 11px; border-radius: 9px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 6px 20px #0000001f; display: flex; flex-direction: column; gap: 2px; backdrop-filter: blur(6px); }
.tg-tip strong { font-size: 14px; line-height: 1.45; color: var(--ink); }
.tg-tip span { font-size: 12px; color: var(--sub); }
.tg-tools { position: absolute; z-index: 2; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tg-tools button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.tg-tools button:hover { border-color: var(--brand); color: var(--brand); }
.tg-tools .icon svg { width: 16px; height: 16px; }
.tg-spin { width: 12px; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.tg-tools button[aria-pressed="false"] .tg-spin { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.tg-hint { position: absolute; z-index: 2; left: 14px; top: 12px; font-size: 12px; color: var(--sub); pointer-events: none; }
.tg-legend { position: absolute; z-index: 2; left: 10px; right: 58px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-legend .tg-item { width: auto; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); backdrop-filter: blur(4px); font-size: 13px; }
.tg-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-height: clamp(480px, 72vh, 720px); overflow-y: auto; min-width: 0; }
.tg-panel h2 { font-size: 19px; font-weight: 650; line-height: 1.4; margin: 4px 0 6px; }
.tg-panel .muted { font-size: 13px; line-height: 1.7; }
.tg-intro { font-size: 14px; line-height: 1.7; color: var(--sub); }
.tg-stats { font-size: 13px; color: var(--sub); margin: 8px 0 12px; }
.tg-eyebrow { font-size: 12px; color: var(--brand); letter-spacing: .5px; margin: 6px 0 4px; }
.tg-back { font-size: 13px; color: var(--brand); padding: 2px 0; cursor: pointer; }
.tg-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; }
.tg-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; text-align: left; cursor: pointer; color: var(--ink); font-size: 14px; }
.tg-item:hover, .tg-item:focus-visible { background: var(--soft); }
.tg-item small { margin-left: auto; color: var(--sub); font-size: 12px; }
.tg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tg-order { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 2px; }
.tg-order li { display: grid; grid-template-columns: 26px auto minmax(0, 1fr); grid-template-areas: "no lv title" ". . kind"; column-gap: 7px; align-items: baseline; padding: 7px 6px; border-radius: 8px; }
.tg-order li:hover { background: var(--soft); }
.tg-order li:not(:has(.tp-level)) { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "no title" ". kind"; }
.tg-no { grid-area: no; font: 650 13px/1.5 system-ui, sans-serif; color: var(--brand); text-align: right; }
.tg-order .tp-level { grid-area: lv; font-size: 11px; padding: 0 5px; }
.tg-order a { grid-area: title; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tg-order a:hover { color: var(--brand); }
.tg-order small { grid-area: kind; font-size: 12px; color: var(--sub); }
.tg-panel .primary { margin-top: 4px; font-size: 14px; }

@media (max-width: 1100px) { .tp-graph { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 760px) {
  .tp-graph { grid-template-columns: minmax(0, 1fr); }
  .tg-stage { height: max(360px, 62vh); border-radius: 12px; }
  .tg-panel { max-height: none; border-radius: 12px; }
  .tg-hint { display: none; }
  .tp-head { flex-wrap: wrap; }
}
@media (max-width: 610px) {
  .tp-step { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .tp-step:not(:last-child)::before { left: 19px; top: 38px; }
  .tp-no { width: 30px; height: 30px; font-size: 13px; }
  .tp-mark .tp-level { font-size: 11px; padding: 0 4px; }
  .tp-more { margin-left: 48px; }
  .tp-cards { grid-template-columns: minmax(0, 1fr); }
  .tp-switch a { padding: 6px 10px; font-size: 13px; }
  .tg-legend .tg-item { font-size: 12px; padding: 4px 8px; }
}