/* [INPUT]: spine.templ / stations.templ 的稳定 id、服务端状态及 cellsmith.css token。
 * [OUTPUT]: 300px 方格纸侧栏, 文件/Doctor/修复/预览/保存分区, 不再用五站卡片。
 * [POS]: 工作台侧栏, 只投影权威状态。
 * [PROTOCOL]: 保留全部 fragment、详情与操作的可达性; 几何合同见 DESIGN.md。
 */
.spine { position: relative; padding: 0 0 40px; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--rule-2); background: var(--paper); }
.spine::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--sheet-margin); pointer-events: none; z-index: 2; }
.spine__head { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.spine__title { display: inline-block; padding: 0 12px; height: 30px; border-radius: 18px; background: var(--brand-green); color: var(--on-fill); font: 700 24px/30px var(--font-sheet); letter-spacing: -1px; text-decoration: none; }
.spine__utilities { display: flex; gap: 4px; opacity: 0; }
.spine__head:hover .spine__utilities, .spine__head:focus-within .spine__utilities { opacity: 1; }
.sheet-theme, .sheet-help { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 2px; font: 14px/24px var(--font-ui); background: var(--sheet-button); color: var(--mute); cursor: pointer; }
.spine__toggle { font: 14px var(--font-ui); position: absolute; right: 8px; top: 18px; width: 20px; height: 24px; padding: 0; border: 0; border-radius: 2px; background: var(--sheet-button); color: var(--mute); cursor: pointer; opacity: 0; }
.spine__head:hover .spine__toggle, .spine__toggle:focus-visible { opacity: 1; }
.spine__utilities { margin-right: 20px; }
.spine__stations { list-style: none; margin: 0; padding: 0; }
/* 行格: 侧栏的每个元素占整数个 30px 格线行 (= 网格行高), 文字在行内垂直居中; 每站从自己的顶边起画格线. */
.station { position: relative; padding: 0; scroll-margin-block: 8px; background-image: var(--sheet-ruling); }
.station::before, .station__num { display: none; }
.station__main { min-height: 30px; }
.station__title { height: 30px; line-height: 28px; border-block: 1px solid var(--rule-2); display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 0 12px 0 16px; margin: 0; color: var(--mute); background: var(--surface-header); font: 400 12px/28px var(--font-ui); }
.station__name::before { content: "{}"; display: inline-block; width: 21px; color: var(--sheet-region); }
#station-interpret .station__name::before { content: "⊞"; }
#station-propose .station__name::before { content: "↳"; }
#station-preview .station__name::before { content: "◫"; }
#station-save .station__name::before { content: "↓"; }
.station__count { font: 400 12px var(--font-ui); color: var(--mute); }
.station--warn .station__count { color: var(--verm); }
.station__sum { margin: 0; padding: 6px 16px; font-size: 12px; color: var(--mute); }
.station__sum { display: none; }
#station-interpret { min-height: 90px; }
#station-interpret > .station__main > .station__sum { display: none; }
#station-interpret .station__count { display: none; }
.top-bar__title { display: block; min-width: 0; padding: 0 16px; }
.top-bar__line { display: grid; grid-template-columns: 13px minmax(0, 1fr); align-items: start; column-gap: 5px; min-height: 30px; }
.table-mark { width: 13px; height: 12px; margin-top: 9px; background: var(--swatch-gray); border: 2px solid var(--faint); border-radius: 1px; }
.file-name { font: 14px/30px var(--font-sheet); color: var(--ink-2); white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
.save-state { grid-column: 2; padding: 0; border: 0; border-radius: 0; font-size: 12px; line-height: 30px; }
.fidelity-line { display: block; height: auto; white-space: pre-line; overflow: visible; text-overflow: clip; line-height: 30px; font-size: 12px; }
.file-details { visibility: visible; position: fixed; inset: auto auto 32px 310px; margin: 0; width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 64px); overflow: auto; padding: 12px 16px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-float); }
.file-details__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-details__head h2 { margin: 0; font: 500 14px/30px var(--font-ui); }
.file-details .fidelity-line { margin: 0; line-height: 24px; font-size: 12px; }
.is-folded .file-details { left: 86px; }
@media (max-width: 699px) { .file-details { left: 8px; } }
.facts { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-auto-rows: 30px; align-items: center; column-gap: 12px; margin: 0; padding: 0; font-size: 12px; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; color: var(--ink); }
.facts dt, .facts dd { min-width: 0; white-space: nowrap; overflow: hidden; }
.station__note { margin: 0; padding: 0 16px; font-size: 12px; line-height: 30px; color: var(--mute); }
.station__note--stale { background: var(--ochre-bg); color: var(--ochre); }
.station__note--error { color: var(--verm); background: var(--verm-bg); }
#station-diagnose { min-height: 60px; }
#station-diagnose.station--off { min-height: calc(100vh - 210px); }
#station-diagnose.station--off .station__sum { display: none; }
.station__help { position: absolute; right: 4px; top: 3px; width: 28px; }
#station-diagnose .station__action { position: absolute; right: 34px; top: 3px; margin: 0; width: 28px; height: 24px; padding: 0; font-size: 0; border-radius: 2px; }
#station-diagnose .station__action::after { content: "▶"; font: 14px/24px var(--font-ui); }
.station--off:not(#station-diagnose) { display: none; }
#station-interpret.station--cur { display: block; }
.checks { list-style: none; margin: 0; padding: 0; border: 0; background: transparent; }
.check { display: flex; align-items: center; height: 30px; padding-right: 12px; gap: 8px; }
.check__head { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; box-sizing: border-box; padding: 0 4px 0 20px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 14px/30px var(--font-sheet); }
.check__head:hover { background: var(--surface-hover); }
.check__head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.check__label { white-space: nowrap; }
.check__count { font: 12px var(--font-sheet); font-variant-numeric: tabular-nums; }
.check__fix { flex: none; padding: 0 6px; font-size: 12px; }
.check--warn .check__count { color: var(--verm); }
.check--sel { background: var(--swatch-green); color: var(--ink-press); }
.checks-passed { font-size: 12px; }
.doctor-help { width: min(440px, calc(100vw - 16px)); }
.doctor-help__checks { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; line-height: 1.5; }
.doctor-help__checks li + li { border-top: 1px solid var(--rule-2); padding-top: 8px; margin-top: 8px; }
.doctor-help__checks strong { font-weight: 500; }
.doctor-help__checks p { margin: 4px 0 0; }
#station-preview:has(#repair-preview[hidden]):not(:has(#preview-head)) { display: none; }
.station__action { display: block; margin: 3px 16px; }
.station .station__check { height: 30px; margin: 0; padding: 0 16px; box-sizing: border-box; }
#station-save:not(:has(.save-report:not([hidden]), .station__check, .station__note:not(#save-unverified-note):not(:empty))):not([data-save-unverified="1"]) { display: none; }
#save-unverified-note { display: none; }
#station-save[data-save-unverified="1"] .station__note:not(#save-unverified-note), #station-save[data-save-unverified="1"] #save-report { display: none; }
#station-save[data-save-unverified="1"] #save-unverified-note { display: block; }
/* 自由排版的两块面板: 不透明纸面卡片盖住格线 (线不会穿过文字), 它们总在站尾. */
.station .save-report { margin: 0; padding: 12px 16px; font-size: 12px; border-radius: 0; box-shadow: none; background: var(--paper); }
#station-preview #repair-preview, .station .repair-preview { padding: 3px 16px; }
#station-preview .repair-preview__actions { row-gap: 6px; }
.is-folded .spine { width: 76px; }
.is-folded .spine__head { padding: 0 8px; }
.is-folded .spine__title { font-size: 0; padding: 0 10px; }
.is-folded .spine__title::after { content: "c"; font: 700 24px/30px var(--font-sheet); }
.is-folded .spine__utilities { display: none; }
.is-folded .station { min-height: 76px !important; height: 76px; }
.is-folded .station__main > :not(.station__title) { display: none; }
.is-folded .station__main > .file-details:popover-open { display: block; }
.is-folded .station__title { flex-direction: column; justify-content: center; height: 76px; padding: 0 2px; gap: 0; font-size: 12px; }
.is-folded .station__name::before { display: none; }
.is-folded .station__count { display: block !important; font-size: 12px; }
.is-folded .spine__toggle { opacity: 1; right: 2px; }