/* ══════════════════════════════════════════════════════════════════════
   什物 · 器页骨架（栏目共享）
   ──────────────────────────────────────────────────────────────────────
   收「两器共用、与器无关」的骨架：左栏书脊（sticky 30%）＋右栏台面（70%）。
   2026.09.13 逐条自 logs/什物/和光/index.html 的内联 <style> 摘出，只摘骨架，
   不摘器专有件。现使用者：和光、圆箧。

   器专有件留在各器页自己的 <style> 里，不进本文件：
     · 和光：笔刷 .brk 系（墨点 + 两条 range + 两处 focus 环）、舞台 .stage 系、
             空态 .empty 系、.brk-line、prefers-reduced-motion 一条。

   三条铁律（改动前先读）：
   1. 加载顺序：warm.css → qi.css → 页内 <style>。qi.css 必须排在 warm.css 之后。
   2. 本文件不自带 :root，色值一律取 warm.css 的 var()；
      凡 warm.css 已有的类（.back / .container / .footer-note …）此处只做作用域收窄
      （如 .rail .back），不重写覆盖。
   3. .toc 是通用名（warm.css 只有 .toc-grid，无碰撞），勿在什物之外复用。
   ══════════════════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 页面纵向撑满（2026.09.13 站长令「撑满视口」）──
   器页内容少，「页面高度由右栏决定」会露出下半屏留白（1440×900 实测：和光 233px、
   圆箧 299px）。故 body 改纵向 flex 撑满视口，余高由 .layout 吃下、再交给台面。
   ⚠ 只作用于引本文件的器页（和光 / 圆箧），文章页不受影响。 */
body { min-height: 100vh; display: flex; flex-direction: column; }

/* ── 左右栏：三七分割（左 30% 书脊 / 右 70% 台面）──
   借「不靠岸的钢琴师」长滚动双栏：sticky 定住的是身份（标题·说明·工序目录），
   滚动的是内容 —— 内容即正文。
   ★ 撑满视口（2026.09.13 站长令）：.layout 吃下 body 的余高（flex:1），
   交叉轴由 flex-start 改 stretch，好让右栏被拉满；书脊自带 align-self:flex-start，
   不受影响。台面再由各器自取余高（和光 .stage / 圆箧 .desk），
   故「内容即正文」的承诺仍然成立 —— 只是短内容时由台面把版面撑住。 */
/* ⚠ width:100% 不可省：body 已是 flex 容器，交叉轴上带 auto 外边距的元素会
   **放弃 stretch 改为 shrink-to-fit** —— 曾实测 .layout 缩到 662px、页脚缩到 85px。
   显式 width 定住伸展，auto 外边距才只负责居中。（两器页同病同修，2026.09.13。） */
.layout { display: flex; align-items: stretch; gap: 56px; flex: 1 1 auto;
          width: 100%; max-width: 1000px; margin: 0 auto; padding: 64px 24px 44px; }
/* 书脊自持：最高不超出视口（top 48 + 底部呼吸 32），矮视口时自身内滚，
   页面高度由右栏决定 —— 书脊不撑破内容区的承诺。 */
.rail { flex: 0 0 30%; position: sticky; top: 48px; align-self: flex-start;
        max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* 右栏自成一个纵向弹性容器：台面（+:first-child 之类不做猜测）由各器给 flex:1，
   于是「台面吸收余高」是各器自己的声明，骨架只提供容器。 */
.reading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* 书脊内节奏：比文章页紧凑（.back 的 48px 是文章页体例，书脊收为 24） */
.rail .back { margin-bottom: 24px; }
.rail h1 { font-size: 1.5rem; font-weight: 400; letter-spacing: 2px; line-height: 1.5;
           margin: 0 0 14px; color: var(--text-title); }
.rail .intro { margin-bottom: 20px; }

/* 工序目录：借正文页 .rail-toc —— 每项一行细字、左侧 2px 透明线，
   hover 浮出墨色；当前工序浅朱砂点亮（劳作进度，如正文页的阅读进度） */
.rail-toc { display: flex; flex-direction: column; align-items: stretch;
            gap: 7px; padding-top: 18px; border-top: 1px solid var(--border); }
.toc { font-family: inherit; font-size: 0.82rem; letter-spacing: .5px; text-align: left;
       color: var(--text-soft); background: none; border: 0; border-left: 2px solid transparent;
       padding: 0 0 1px 12px; cursor: pointer; transition: color .3s, border-color .3s; }
.toc:hover:not(:disabled), .toc:focus-visible { color: var(--ink); border-left-color: var(--ink); }
.toc:disabled { color: var(--text-faint); cursor: default; }
/* 点亮色是浅朱砂 #C2553F，刻意不用 --seal（#AE1300）—— 与 logs/字渡/潮留/ 四篇的
   .rail-toc a.active 同色同义，属站内成例。全站共四处，本文件只收这一处；
   其余三处（笔刷墨点、两条 range 滑块）属器专有，留在和光页内。改色请四处同改。 */
.toc.active { color: #C2553F; border-left-color: #C2553F; font-weight: 500; }
/* 落笔：最终确认执行的动作，不与工序同列 —— 独占一行、朱砂、左侧粗线（3px）。
   上下各一条细线把它从「工序」里框出来，如钤印前落笔的那一档空白。 */
.act-run { display: flex; flex-direction: column; align-items: stretch;
           gap: 4px; margin: 13px 0; padding: 11px 0;
           border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.run { font-family: inherit; font-size: 0.92rem; letter-spacing: .14em; text-align: left;
       color: var(--seal); background: none; border: 0; border-left: 3px solid var(--seal);
       padding: 0 0 1px 11px; cursor: pointer; transition: opacity .3s; }
.run:hover:not(:disabled), .run:focus-visible { opacity: .72; }
.run:disabled { color: var(--text-faint); border-left-color: var(--border); cursor: default; }
.run.active { font-weight: 500; }                  /* 当前该落笔时，加重而非换色 */
.toc-tail { border-top: 0; padding-top: 0; }
/* 档位行：一格一枚档位，只作当前档的标记，不作可换的选项 */
.mode-row { flex-direction: row; gap: 20px; padding-top: 14px; padding-bottom: 12px; }
.mod { letter-spacing: .14em; }

/* 状态行：器对外说的唯一一句 */
.state { font-size: 0.78rem; color: var(--text-soft); margin: 8px 0 0; line-height: 1.7; }

@media (max-width: 760px) {                    /* 窄屏回退上下：书脊在上，台面在下 */
  .layout { flex-direction: column; gap: 0; padding: 32px 16px 64px; }
  .rail { position: static; flex: none; width: 100%; margin-bottom: 30px; }
  /* 竖排了，.layout 却仍是 align-items: flex-start —— 那会让 .reading 收成「内容宽」
     而不是撑满（375px 视口曾实测只有 258 / 300px，应为 343px）。补丁原在圆箧页内自备，
     2026.09.13 站长令「顺手修掉」：上移至此，那才是它正确的位置；和光同病一并修好。 */
  .reading { width: 100%; }
  .rail-toc { flex-direction: row; flex-wrap: wrap; align-items: center;
              gap: 8px 18px; padding-top: 18px; }
  .act-run { flex-direction: row; align-items: center; gap: 18px; }
}
/* 页脚：与 .layout 同版心 */
/* 页脚沉底：layout 已吃满余高，此处 margin-top:auto 是第二道保险
   （若哪天 layout 不再吃满，页脚也不会飘在半空）。 */
.page-foot { width: 100%; max-width: 1000px; margin: auto auto 0; padding: 0 24px 32px; }