/* Resource detail (2026-10-12): fact strip + three staged tabs. Loaded after design.css. */
.detailhero { margin-bottom: 20px; }
.detailhero .outcome { font-size: 17px; line-height: 1.8; color: var(--ink); margin: 14px 0 20px; max-width: 720px; }
.fact-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.fact-strip > div { padding: 14px 16px; border-left: 1px solid var(--line); min-width: 0; }
.fact-strip > div:first-child { border-left: 0; }
.fact-strip dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
.fact-strip dt .icon svg { width: 14px; height: 14px; }
.fact-strip dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }

.learning-tabs { gap: 8px; border-bottom: 0; margin-bottom: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.learning-tabs a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--sub); white-space: normal; }
.learning-tabs a:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.learning-tabs a.active { border-color: var(--brand); background: var(--soft); color: var(--brand); }
.tab-no { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--soft); color: var(--brand); }
.learning-tabs a.active .tab-no { background: var(--brand); color: var(--on); }
.tab-text { display: grid; min-width: 0; }
.tab-text b { font-size: 15px; font-weight: 650; color: var(--ink); }
.learning-tabs a.active .tab-text b { color: var(--brand); }
.tab-text small { font-size: 12px; color: var(--sub); line-height: 1.5; }

.learning-panel { max-width: 920px; }
.learning-panel h2 { font-size: 20px; font-weight: 650; margin: 0 0 14px; }

/* 课程概览 */
.ov-block { margin-bottom: 36px; }
.ov-text { font-size: 15px; }
.section .goal-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.goal-grid li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.7; }
.goal-grid .icon { color: var(--brand); margin-top: 3px; }
.goal-grid .icon svg { width: 18px; height: 18px; }
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fit-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--surface); }
.section .fit-card h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 8px; }
.fit-card h3 .icon svg { width: 16px; height: 16px; }
.section .fit-card p { font-size: 14px; line-height: 1.8; color: var(--ink); }
.fit-yes h3 { color: var(--brand); }
.fit-no h3 { color: var(--warm); }
.ov-facts { margin: 0; border-top: 1px solid var(--line); }
.ov-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ov-facts dt { color: var(--sub); font-size: 14px; }
.ov-facts dd { margin: 0; font-size: 15px; line-height: 1.8; }
.ov-note { display: block; color: var(--sub); font-size: 13px; line-height: 1.7; margin-top: 2px; }
.section h3.ov-sub { font-size: 15px; margin: 22px 0 10px; }
.section .topic-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.section .topic-chips li { font-size: 13px; line-height: 1.5; padding: 5px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); }

/* 学前准备 */
.section .pstep-list { list-style: none; padding: 0; margin: 0; }
.pstep { position: relative; padding: 0 0 32px 48px; }
.pstep:before { content: ""; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 2px; background: var(--line); }
.pstep:last-child:before { display: none; }
.pstep-head { display: flex; gap: 14px; align-items: flex-start; margin-left: -48px; margin-bottom: 14px; }
.pnum { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on); font-weight: 700; font-size: 14px; }
.learning-panel .pstep-head h2 { margin: 3px 0 0; font-size: 18px; }
.section p.pstep-hint { font-size: 14px; color: var(--sub); line-height: 1.75; margin-top: 4px; }
.prep .guide-systems { margin: 0 0 12px; }
.route-card { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px 18px; }
.section .route-card p { font-size: 14px; line-height: 1.8; }
.section .route-card .route-name { font-weight: 650; font-size: 15px; margin-bottom: 2px; }
.section .route-card .route-req { color: var(--sub); margin-top: 6px; }
.section .route-status { margin-top: 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.route-status .icon svg { width: 15px; height: 15px; }
.route-status.ok { color: var(--brand); }
.route-status .link { font-size: 13px; margin-left: 4px; }
details.route-status { display: block; color: var(--warm); }
details.route-status summary { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.section details.route-status ul, .section details.route-status p, .section details.route-status li { color: var(--ink); font-size: 13px; margin: 6px 0 4px; }
.section .tool-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.section .tool-grid li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); display: grid; gap: 2px; font-size: 14px; line-height: 1.7; }
.tool-grid .tool-name { font-size: 15px; }
.tool-grid .tool-purpose { color: var(--sub); }
.tag { font-size: 11px; font-weight: 500; color: var(--sub); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.section .pstep-meta { display: grid; gap: 2px; margin-top: 12px; font-size: 13px; color: var(--sub); }
.prep a.primary.next-step { margin-top: 0; color: var(--on); font-size: 15px; padding: 11px 18px; border-radius: 10px; }
.prep .next-step:hover { text-decoration: none; filter: brightness(1.08); }

/* prompts */
.prompt-block { margin: 6px 0 4px; border-radius: 12px; }
.prompt-block .codehead { padding: 10px 14px; }
.prompt-block .codehead > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.prompt-block .codehead .icon svg { width: 15px; height: 15px; color: var(--brand); }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--on); background: var(--brand); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.copy-btn .icon svg { width: 14px; height: 14px; color: var(--on); }
#course-setup-prompt, #course-lesson-prompt { max-height: none; overflow: visible; font-size: 14px; line-height: 1.9; padding: 18px 22px; }
.prompt-block.folded pre, .prompt-block.folded #course-setup-prompt, .prompt-block.folded #course-lesson-prompt { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.fold-toggle { display: block; width: 100%; padding: 10px; font-size: 13px; color: var(--brand); border-top: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.prompt-block.fold-none .fold-toggle { display: none; }

/* 学习指南 */
.section p.guide-first { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; background: var(--soft); font-size: 14px; margin-bottom: 28px; }
.guide-first .icon { color: var(--brand); margin-top: 2px; }
.guide-first .link { font-size: inherit; text-decoration: underline; margin: 0 2px; padding: 0; }
.section .rhythm { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: rhythm; }
.section .rhythm li { counter-increment: rhythm; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); display: grid; gap: 4px; align-content: start; }
.rhythm b { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.rhythm b:before { content: counter(rhythm); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--soft); color: var(--brand); }
.rhythm span { font-size: 13px; line-height: 1.7; color: var(--sub); }
.learning-panel h2.lessons-head { display: flex; align-items: baseline; gap: 12px; margin-top: 36px; }
.lessons-head span { font-size: 13px; font-weight: 400; color: var(--sub); }
.section .lesson-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.section .lesson-list li { display: flex; gap: 14px; align-items: baseline; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.lesson-no { flex: 0 0 26px; font: 600 12px/1 Consolas, monospace; color: var(--sub); }
.lesson-list .link { font-size: 15px; color: var(--ink); }
.lesson-list .link:hover { color: var(--brand); }
.lesson-list .link .icon { color: var(--sub); }
.lesson-more summary { cursor: pointer; padding: 12px 4px; font-size: 14px; color: var(--brand); }
.section .lesson-more .lesson-list { border-top: 0; }
.source-toggle { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 8px; }

@media (max-width: 900px) {
  .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact-strip > div:nth-child(4) { border-left: 0; }
  .fact-strip > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .fit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 610px) {
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip > div { border-left: 0; border-top: 1px solid var(--line); }
  .fact-strip > div:nth-child(even) { border-left: 1px solid var(--line); }
  .fact-strip > div:nth-child(-n+2) { border-top: 0; }
  .fact-strip > div { padding: 12px 14px; }
  .learning-tabs { gap: 6px; }
  .learning-tabs a { padding: 10px 6px; flex-direction: column; gap: 4px; text-align: center; }
  .learning-tabs .tab-no { flex: none; width: 26px; height: 26px; }
  .detailhero > .cover { display: none !important; }
  .tab-text small { display: none; }
  .tab-text b { font-size: 14px; }
  .section .goal-grid, .section .tool-grid, .section .rhythm { grid-template-columns: 1fr; }
  .ov-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .pstep { padding-left: 0; }
  .pstep:before { display: none; }
  .pstep-head { margin-left: 0; }
  #course-setup-prompt, #course-lesson-prompt { font-size: 13px; padding: 14px 16px; }
}
.section .source-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.section .source-list li { font-size: 14px; line-height: 1.75; }
.source-more summary { cursor: pointer; font-size: 13px; color: var(--brand); margin-top: 4px; }
.source-more .source-list { margin-top: 6px; }
.tree-pick.is-empty { color: var(--sub); }
/* Disclosed limits (2026-10-13 standard) */
.access-notice { margin: -12px 0 28px; padding: 16px 20px; border-radius: 12px; background: var(--warmbg); border: 1px solid color-mix(in srgb, var(--warm) 45%, transparent); color: var(--ink); }
.access-notice h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; color: var(--warm); margin: 0; }
.access-notice h2 .icon svg { width: 18px; height: 18px; }
.access-notice p { font-size: 14px; line-height: 1.75; margin: 6px 0 0; }
.access-notice dl { margin: 10px 0 0; display: grid; gap: 8px; }
.access-notice dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.access-notice dt { font-size: 13px; color: var(--sub); }
.access-notice dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.need-chip { font-size: 13px; line-height: 1.5; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--warm) 35%, var(--line)); }
.route-status.warn p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--warm); margin: 0; }
.section .route-status.warn ul { margin: 6px 0 0; padding-left: 20px; }
.section .route-status.warn li { font-size: 13px; color: var(--ink); }
.source-notes { margin-top: 48px; }
.notice-box { margin-top: 16px; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.section .notice-box h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.notice-box h3 .icon svg { width: 16px; height: 16px; }
.notice-box.rights h3 { color: var(--brand); }
.notice-box.caution { background: var(--warmbg); border-color: color-mix(in srgb, var(--warm) 35%, transparent); }
.notice-box.caution h3 { color: var(--warm); }
.section .notice-box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.section .notice-box li { font-size: 14px; line-height: 1.8; }
.notice-box .link { font-size: 13px; margin-left: 4px; }
@media (max-width: 610px) { .access-notice dl > div { grid-template-columns: 1fr; gap: 4px; } }
.section .route-status.warn { display: block; }

/* 2026-10-13: limits read as a plain note, not a warning (owner feedback). */
.access-notice { background: transparent; border: 0; border-left: 3px solid var(--line); border-radius: 0; padding: 4px 0 4px 16px; margin: -8px 0 28px; }
.access-notice h2 { color: var(--ink); font-size: 15px; font-weight: 600; }
.access-notice h2 .icon { color: var(--sub); }
.access-notice h2 .icon svg { width: 16px; height: 16px; }
.access-notice p { color: var(--sub); }
.need-chip { background: var(--surface); border-color: var(--line); }
.section .route-status.note { display: block; color: var(--sub); }
.route-status.note p { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.route-status.note .icon svg { width: 14px; height: 14px; }
.section .route-status.note ul { margin: 6px 0 0; padding-left: 20px; }
.section .route-status.note li { font-size: 13px; color: var(--ink); }
.prompt-note { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--sub); }
.prompt-block .codehead .prompt-note .icon svg { width: 13px; height: 13px; color: var(--sub); }
.notice-box.info { background: var(--surface); border-color: var(--line); }
.notice-box.info h3 { color: var(--ink); }
.notice-box.info h3 .icon { color: var(--sub); }

/* Prompt status: icon only; the text shows on hover, tap or keyboard focus. */
.prompt-note { position: relative; cursor: help; margin-left: 8px; }
.prompt-note:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; }
.prompt-tip { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 400; line-height: 1.5; padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 14px #0000002a; }
.prompt-note:hover .prompt-tip, .prompt-note:focus .prompt-tip { display: block; }