/* 谱图馆：版式沿用基础科学栏目（../fundamental-science/fundamental.css），这里只加本栏目独有的部分。颜色只用 shared-nav.css 的变量，所以深浅主题不用各写一套。 */

/* ── 图的六种颜色 ── */
.sp-c0{--c:var(--accent-text)}.sp-c1{--c:var(--gold-ink)}.sp-c2{--c:var(--info)}.sp-c3{--c:var(--danger)}.sp-c4{--c:var(--violet)}.sp-c5{--c:var(--muted)}

/* ── SVG 图 ── */
.sp-plot{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-family:var(--font-sans);-webkit-user-select:none;user-select:none}
.sp-plot text{fill:var(--muted);font-size:11px}
.sp-plot .sp-axis{fill:var(--ink-2);font-size:12px}
.sp-plot .sp-tick{font-family:var(--font-num);font-size:11px}
.sp-plot .sp-lbl{fill:var(--c,var(--ink-2));font-size:10.5px;font-weight:600;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.sp-plot .sp-cur{fill:var(--ink);font:600 11.5px/1 var(--font-num);paint-order:stroke;stroke:var(--paper);stroke-width:4px}
.sp-plot .sp-rowl{fill:var(--ink);font-size:12px}
.sp-grid{stroke:var(--line);stroke-width:1;opacity:.55}
.sp-frame{fill:none;stroke:var(--line-strong);stroke-width:1}
.sp-zero{stroke:var(--line-strong);stroke-width:1}
.sp-line{fill:none;stroke:var(--c);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sp-fill{fill:var(--c);opacity:.13;stroke:none}
.sp-stick{stroke:var(--c);stroke-width:1.6;vector-effect:non-scaling-stroke}
.sp-stick.is-sel{stroke-width:2.6}
.sp-pt{fill:var(--c);stroke:var(--paper);stroke-width:1}
.sp-pt.is-open{fill:var(--paper);stroke:var(--c);stroke-width:1.6}
.sp-vl{stroke:var(--c);stroke-width:1;opacity:.8;fill:none}
.sp-band{fill:var(--c)}
.sp-bar{fill:var(--c);opacity:.78}
.sp-cross{stroke:var(--ink-2);stroke-width:1;opacity:.5;pointer-events:none}
.sp-diagram .sp-lv{stroke:var(--ink);stroke-width:2.2}
.sp-diagram .sp-lv.is-vib{stroke:var(--line-strong);stroke-width:1}
.sp-diagram .sp-arrow{stroke:var(--c);stroke-width:2}
.sp-diagram .sp-head,.sp-diagram .sp-spot{fill:var(--c)}
.sp-diagram .sp-plate{fill:var(--surface-2);stroke:var(--line-strong)}
.sp-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink-2)}
.sp-legend li{display:flex;align-items:center;gap:6px}
.sp-key{width:18px;height:0;border-top:2.4px solid var(--c);flex:0 0 auto}
.sp-key.is-dash{border-top-style:dashed}
.sp-key.is-dot{width:9px;height:9px;border:0;border-radius:50%;background:var(--c)}
.sp-plot-t{margin:10px 0 4px;font-size:13px;font-weight:600;color:var(--ink)}
.sp-plots{display:grid;gap:10px;min-width:0}
.sp-plot-host{min-width:0}

/* ── 控件和读数 ── */
.sp-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px 22px;margin:0 0 12px;align-items:end}
.sp-ctl-l{font-size:12.5px;color:var(--ink-2)}
.sp-ctl-seg{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.sp-ctl-seg .fs-btns{display:flex;flex-wrap:wrap;gap:6px}
.sp-ctl .button,.sp-fams .button{min-height:34px;padding:5px 11px;font-size:12.5px}
.sp-ctl .button[aria-pressed=true],.sp-fams .button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sp-ctl-sel select,.sp-ctl-text input{width:100%;min-height:38px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit;font-size:13px;min-width:0}
.sp-ctl-text input{font-family:var(--font-mono)}
.sp-ctl-check{flex-direction:row!important;align-items:center;gap:8px!important;min-height:38px}
.sp-ctl-check input{accent-color:var(--accent);width:16px;height:16px}
.sp-out{margin-top:10px}
.sp-out>div{display:contents}
.sp-out dd{text-align:left}
.sp-extra:empty,.sp-out[hidden]{display:none}
.sp-note,.sp-src,.sp-hint{margin:8px 0 0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.sp-hint{color:var(--gold-ink)}
.sp-wait{margin:0;padding:34px 12px;text-align:center;font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:6px}
.sp-ok{color:var(--ok)}.sp-bad{color:var(--danger)}

/* ── 每张图外面的框和来源标注 ── */
.sp-fig{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface);min-width:0;border-left:3px solid var(--k,var(--line-strong))}
.sp-fig:last-child{margin-bottom:0}
.sp-fig-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.sp-fig-h b{font-size:14px}
.sp-fig figcaption{margin-top:10px;font-size:13px;line-height:1.8;color:var(--ink-2);max-width:110ch}
[data-kind=measured]{--k:var(--ok)}[data-kind=computed]{--k:var(--info)}[data-kind=constants]{--k:var(--violet)}[data-kind=sketch]{--k:var(--warn)}
.sp-kind{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:99px;border:1px solid color-mix(in srgb,var(--k) 45%,transparent);color:color-mix(in srgb,var(--k) 76%,var(--ink));background:color-mix(in srgb,var(--k) 8%,transparent);white-space:nowrap}
.sp-kind::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-kind[data-kind=sketch]{border-style:dashed}

/* ── 表格 ── */
.sp-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.sp-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.6}
.sp-table th,.sp-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:normal}
.sp-table thead th{font-size:12px;color:var(--muted);font-weight:600;border-bottom-color:var(--line-strong);white-space:nowrap}
.sp-table tbody th{font-weight:600;color:var(--ink)}
.sp-table td{color:var(--ink-2)}
.sp-table tr.is-ref th,.sp-table tr.is-ref td{color:var(--gold-ink)}
.sp-table.sp-mini{width:auto;min-width:min(100%,340px);font-family:var(--font-num)}
.sp-table.sp-mini td,.sp-table.sp-mini th{white-space:nowrap}

/* ── 小标签 ── */
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sp-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--line-strong);border-radius:99px;background:var(--paper);font-size:12.5px;font-weight:600;color:var(--accent-text);text-decoration:none;min-height:28px}
.sp-chip:hover{border-color:var(--accent-2);background:var(--accent-soft)}
.sp-n{font-size:11.5px;color:var(--muted);font-weight:500}
.sp-core{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:4px;background:var(--gold-soft);color:var(--gold-ink);font-size:11px;font-weight:700;vertical-align:middle}

/* ── 能量的尺子、按问题找方法 ── */
.sp-ladder tbody th{white-space:nowrap}
.sp-ladder td.sp-chips{display:table-cell}
.sp-ladder td.sp-chips .sp-chip{margin:0 4px 4px 0}
.sp-q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.sp-q{padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.sp-q h3{margin:0;font-size:15px;line-height:1.5}
.sp-q-note{margin:0;font-size:13px;color:var(--ink-2)}

/* ── 方法目录 ── */
.sp-find{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.sp-find-q{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);max-width:420px}
.sp-find-q input{min-height:40px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit}
.sp-fams{display:flex;flex-wrap:wrap;gap:6px}
.sp-fams .button[aria-pressed=true] .sp-n{color:inherit;opacity:.8}
.sp-fam{margin:0 0 20px}
.sp-fam>header{margin:0 0 10px}
.sp-fam>header h3{margin:0;font-size:17px}
.sp-fam>header p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.sp-card{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
.sp-card:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.sp-card.is-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.sp-abbr{font:600 13px/1.2 var(--font-num);letter-spacing:.4px;color:var(--gold-ink)}
.sp-card h4{margin:0;font-size:15px;line-height:1.45}
.sp-card p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2);flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sp-card-k{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px}
.sp-card-k .sp-kind{font-size:10.5px;padding:3px 6px}

/* ── 方法详解 ── */
.sp-method{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:20px 22px;min-width:0}
.sp-m-fam{margin:0 0 4px;font-size:12.5px;color:var(--muted)}
.sp-m-h h3{margin:0 0 8px;font-size:22px;line-height:1.35;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.sp-m-h h3 .sp-abbr{font-size:22px}
.sp-m-en{font:italic 14px/1.4 var(--font-num);color:var(--muted);font-weight:400}
.sp-m-h .lead{margin:0 0 6px;font-size:15px;max-width:100ch}
.sp-sec{margin:18px 0 0;min-width:0}
.sp-sec>h4{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--gold-ink);letter-spacing:.3px}
.sp-sec p,.sp-sec li{font-size:14px;line-height:1.9;color:var(--ink-2)}
.sp-sec p{margin:0 0 8px;max-width:100ch}
.sp-sec ul,.sp-sec ol{margin:0;padding-left:1.3em;display:grid;gap:5px}
.sp-method .sp-fig{background:var(--paper)}
.sp-method .sp-fig .sp-plot{background:var(--surface)}
.sp-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 30px}
.sp-nums{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.sp-nums>div{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:10px;padding:7px 12px;font-size:13px}
.sp-nums>div+div{border-top:1px solid var(--line)}
.sp-nums dt{color:var(--muted)}
.sp-nums dd{margin:0;color:var(--ink);font-family:var(--font-num)}
.sp-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.sp-pn>:last-child{justify-self:end}
.sp-pn>:first-child{justify-self:start}

/* ── 联合解谱 ── */
.sp-case .lead{margin:0 0 12px;font-size:14.5px}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sp-step-t{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:0 0 10px}
.sp-step-t p{margin:0;flex:1 1 320px;font-size:14px;line-height:1.9;color:var(--ink-2);max-width:105ch}
.sp-step-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:600 13px/1 var(--font-num)}

/* ── 实验台、速查表、数据来源 ── */
.sp-lab .sp-fig{margin-top:12px;border:0;border-left:3px solid var(--k);border-radius:0;padding:0 0 0 14px;background:none}
.sp-atlas{display:grid;gap:8px}
.sp-atlas-item{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:0 14px;scroll-margin-top:calc(var(--cr-nav-height,64px) + 16px)}
.sp-atlas-item summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;min-height:46px;padding:10px 0;font-size:14.5px}
.sp-atlas-item[open]{padding-bottom:12px}
.sp-atlas-item .muted{margin:0 0 10px;font-size:13px;max-width:105ch}
.sp-ledger p{margin:0;font-size:13px;line-height:1.85;color:var(--ink-2)}
.sp-unverified{margin-top:14px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent);border-radius:6px;background:color-mix(in srgb,var(--warn) 6%,transparent)}
.sp-unverified h3{margin:0 0 6px;font-size:15px}
.sp-unverified p,.sp-unverified li{font-size:13px;line-height:1.85;color:var(--ink-2)}
.sp-unverified p{margin:0 0 8px;max-width:110ch}
.sp-unverified ul{margin:0;padding-left:1.3em;display:grid;gap:4px}
.sp-records .sp-table{font-size:12.5px}
#sp-reader,#sp-cases,.sp-lab,#sp-method{scroll-margin-top:calc(var(--cr-nav-height,64px) + 12px)}
#sp-cite{margin:8px 0}

@media (max-width:900px){
  .sp-cols{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sp-method{padding:14px}
  .sp-fig{padding:12px}
  .sp-m-h h3,.sp-m-h h3 .sp-abbr{font-size:19px}
  .sp-plot-host{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sp-plot{min-width:600px}
  .sp-plot text{font-size:13px}
  .sp-plot .sp-lbl{font-size:12.5px}
  .sp-plot .sp-axis{font-size:13.5px}
  .sp-plot .sp-tick{font-size:13px}
  .sp-pn{grid-template-columns:1fr 1fr}
  .sp-pn>:nth-child(2){grid-column:1/-1;grid-row:2;justify-self:center}
  .sp-out{grid-template-columns:1fr}
  .sp-out dt{margin-top:4px}
  .sp-nums>div{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){.sp-card{transition:none}}
@media print{.sp-ctl,.sp-find,.sp-pn,.fs-jump{display:none}.sp-fig{break-inside:avoid}}