/* ============================================================================
   一团线 · skein.css —— 只有一套尺度（下面这些变量），全应用不许违反
   结构骨架：左右分栏（左＝密度与尺码，右＝工艺单长文）；窄屏左栏折成一条横块
   圆角：全作 0（裁缝纸样的直角感），唯一例外是"记号扣"那枚 12px 圆点
   分隔：左侧 2px 竖线 + 右侧留白（段与段之间不画横线）
   ========================================================================== */
:root {
  --sha:  #f4f1ec;   /* 纱：底 */
  --zhi:  #fffefb;   /* 纸：面板 */
  --mo:   #242019;   /* 墨：正文与读数 */
  --hui:  #7a7468;   /* 灰：次要文字 */
  --xian: #e2dcd0;   /* 线：描边与表格线 */
  --teng: #4a6b52;   /* 藤：主（可点、进度、勾选） */
  --xiu:  #a8442f;   /* 锈：错误与 fail-loud 红字 */
  --tong: #b9741f;   /* 铜：强调（用线量读数、广告角标） */
  --f1: 11px; --f2: 13px; --f3: 16px; --f4: 20px; --f5: 27px;
  --s1: 5px;  --s2: 8px;  --s3: 14px; --s4: 22px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}
* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--sha); color: var(--mo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--f3); line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- 启动过程 ---------- */
#boot { position: fixed; inset: 0; z-index: 40; background: var(--sha); display: flex; align-items: center; justify-content: center; }
.bwrap { text-align: center; padding: var(--s4); }
.bico { line-height: 0; }
.bwrap h1 { font-size: var(--f4); letter-spacing: .28em; margin: var(--s2) 0 var(--s3); font-weight: 600; }
.bbar { width: 168px; height: 3px; background: var(--xian); margin: 0 auto; }
.bbar i { display: block; height: 3px; width: 4%; background: var(--teng); transition: width 180ms linear; }
#bootMsg, #bootErr { font-size: var(--f2); color: var(--hui); margin: var(--s2) 0 0; }
#bootErr { color: var(--xiu); max-width: 22em; }

/* ---------- 版面 ---------- */
#app { display: grid; grid-template-columns: 306px minmax(0, 1fr); gap: 0 var(--s4); max-width: 1080px; margin: 0 auto; padding: 0 var(--s3); }
#side { position: sticky; top: 0; align-self: start; padding: var(--s3) var(--s3) var(--s4) 0; border-right: 1px solid var(--xian); max-height: 100vh; overflow: auto; }
#main { padding: var(--s3) 0 var(--s4); min-width: 0; }

.brand { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding-bottom: var(--s2); border-bottom: 2px solid var(--mo); }
.brand b { font-size: var(--f4); letter-spacing: .1em; }
.brand .ver { font-family: var(--mono); font-size: var(--f1); color: var(--hui); margin-right: auto; }
.brand button { border: 0; background: none; padding: 0 2px; font-size: var(--f2); color: var(--teng); text-decoration: underline; }
.brand .tog { display: none; color: var(--mo); text-decoration: none; border: 1px solid var(--xian); padding: 1px var(--s1); }

.blk { border-left: 2px solid var(--xian); padding-left: var(--s3); margin: var(--s3) 0; }
.blk h2 { font-size: var(--f1); letter-spacing: .18em; color: var(--hui); font-weight: 600; margin: 0 0 var(--s2); }

/* ---------- 输入（下划线式） ---------- */
.fld { display: flex; align-items: baseline; gap: var(--s1); margin: var(--s2) 0; }
.fld label { font-size: var(--f2); color: var(--hui); min-width: 66px; }
.fld input { width: 62px; border: 0; border-bottom: 1px solid var(--xian); background: transparent; color: var(--mo);
             font-family: var(--mono); font-size: var(--f3); text-align: right; padding: 2px 1px; }
.fld input:focus { outline: 0; border-bottom-color: var(--teng); }
.fld span { font-size: var(--f2); color: var(--hui); }
.tip { font-size: var(--f2); color: var(--hui); margin: var(--s2) 0 0; }
.lnk { border: 0; background: none; color: var(--teng); text-decoration: underline; padding: 0; font-size: inherit; }
.tiny { font-size: var(--f1); color: var(--hui); }
.mono { font-family: var(--mono); }

/* ---------- 版型 ---------- */
.shapes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.shp { border: 1px solid var(--xian); background: var(--zhi); padding: var(--s2); text-align: left; }
.shp.on { border-color: var(--teng); background: rgba(74, 107, 82, .08); }
.shp b { display: block; font-size: var(--f2); }
.shp span { font-size: var(--f1); color: var(--hui); }

/* ---------- 首屏那一行勾选 ---------- */
#consent { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--f2); color: var(--hui);
           border-bottom: 1px solid var(--xian); padding-bottom: var(--s1); }
#consent label { display: flex; align-items: center; gap: var(--s1); cursor: pointer; color: var(--mo); }

/* ---------- 读数条 ---------- */
#headline { display: flex; align-items: flex-end; gap: var(--s3); padding: var(--s3) 0 var(--s2); border-bottom: 2px solid var(--mo); }
.hl b { display: block; font-family: var(--mono); font-size: var(--f5); line-height: 1.1; }
.hl span { font-size: var(--f1); color: var(--hui); }
#headline .ghost { margin-left: auto; }

/* ---------- 按钮 ---------- */
.ghost { border: 1px solid var(--xian); background: var(--zhi); padding: var(--s1) var(--s2); font-size: var(--f2); }
.solid { border: 1px solid var(--teng); background: var(--teng); color: #fff; padding: var(--s1) var(--s3); font-size: var(--f2); }
.ghost:active, .solid:active { transform: translateY(1px); }

/* ---------- 那一处广告位（界面上唯一一处） ---------- */
#reviewBlk { border-left: 2px solid var(--xian); padding-left: var(--s3); margin: var(--s3) 0; }
#adRow { position: relative; display: flex; }
.adbtn { flex: 1; border: 1px solid var(--teng); background: var(--zhi); color: var(--teng); text-align: left;
         padding: var(--s2) var(--s3); font-size: var(--f2); }
.adbtn:active { background: rgba(74, 107, 82, .1); }
.adtag { position: absolute; right: -1px; top: -1px; background: var(--tong); color: #fff; font-size: var(--f1);
         font-style: normal; padding: 0 var(--s1); line-height: 1.5; }
.hint { font-size: var(--f2); color: var(--tong); margin: var(--s2) 0 0; }
.free { font-size: var(--f2); color: var(--hui); margin: var(--s1) 0 0; }
.revlist { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.rrow { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--s2); border-top: 1px solid var(--xian); padding: var(--s1) 0; font-size: var(--f2); }
.rrow b { font-weight: 600; }
.rrow.warn b { color: var(--xiu); }
.rrow span { color: var(--hui); }

/* ---------- 工艺图 / 尺子 / 分段卡片 ---------- */
#canvasWrap { border: 1px solid var(--xian); background: var(--zhi); margin: var(--s3) 0 0; }
.cvcap { font-size: var(--f1); color: var(--hui); margin: 0; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--xian); }
#draft { display: block; width: 100%; }
.ruler { margin: var(--s2) 0 var(--s1); }
.ticks { display: flex; height: 9px; gap: 0; }
.band { background: var(--xian); }
.band.pfirst { box-shadow: inset 2px 0 0 var(--zhi); }
.band.on { background: var(--teng); transition: background-color 120ms linear; }
.along { position: relative; height: 16px; }
.along .tk { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: var(--f1); color: var(--hui); }
.along .tk::before { content: ""; display: block; width: 1px; height: 4px; background: var(--xian); margin: 0 auto 1px; }
.along .tk.end { transform: translateX(-100%); }
.pc { margin: var(--s4) 0; }
.phead { display: flex; align-items: baseline; gap: var(--s2); border-bottom: 1px solid var(--xian); padding-bottom: var(--s1); }
.phead b { font-size: var(--f3); }
.phead .cnt { font-family: var(--mono); font-size: var(--f2); color: var(--tong); }
.phead .pnote { font-size: var(--f2); color: var(--hui); }
.secs { list-style: none; margin: 0; padding: 0; }
.sec { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s2); border-left: 2px solid var(--xian); padding: var(--s2) 0 var(--s2) var(--s3); margin: var(--s1) 0; }
.sec.on { border-left-color: var(--teng); background: rgba(74, 107, 82, .05); }
.mk { position: relative; display: block; padding-top: 4px; cursor: pointer; }
.mk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk .knot { display: block; width: 12px; height: 12px; border: 1px solid var(--hui); border-radius: 12px; }
.mk input:checked + .knot { background: var(--teng); border-color: var(--teng); }
.mk input:focus-visible + .knot { outline: 1px solid var(--teng); outline-offset: 2px; }
.sname { font-weight: 600; }
.nums { display: flex; gap: var(--s3); margin: 2px 0; }
.nums .n { font-size: var(--f1); color: var(--hui); }
.nums .n b { font-family: var(--mono); font-size: var(--f3); color: var(--mo); margin-right: 2px; }
.steps { font-family: var(--mono); font-size: var(--f2); color: var(--mo); }
.note { font-size: var(--f2); color: var(--hui); }

/* ---------- 四态 ---------- */
#sheetMsg { border-left: 2px solid var(--xian); padding: var(--s3); margin: var(--s3) 0; background: var(--zhi); }
#sheetMsg .mt { margin: 0 0 var(--s2); }
.ready { display: grid; gap: var(--s1); margin: var(--s2) 0; }
.rdy { border: 1px solid var(--xian); background: var(--zhi); padding: var(--s2); text-align: left; }
.rdy b { display: block; font-size: var(--f2); }
.rdy span { font-family: var(--mono); font-size: var(--f1); color: var(--hui); }
.skl i { display: block; height: 10px; margin: var(--s1) 0; background: linear-gradient(90deg, #ecebe5, #f7f6f1, #ecebe5); }

/* ---------- 页脚 ---------- */
#foot { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: baseline;
        max-width: 1080px; margin: 0 auto; padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
#foot span { font-size: var(--f1); color: var(--hui); }
#footWarn { color: var(--xiu); }

/* ---------- 抽屉 ---------- */
.ov { position: fixed; inset: 0; z-index: 20; background: rgba(36, 32, 25, .34); display: flex; align-items: flex-end; justify-content: center; }
.ov .sheet { width: 100%; max-width: 620px; max-height: 84vh; overflow: auto; background: var(--zhi);
             border-top: 2px solid var(--teng); padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
.ov .sheet.narrow { max-width: 360px; }
.ov header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
             background: var(--zhi); border-bottom: 1px solid var(--xian); padding: var(--s2) var(--s3); }
.ov header b { font-size: var(--f3); }
.ov .x { border: 0; background: none; font-size: var(--f3); color: var(--hui); }
.ov .body { padding: var(--s3); }
.ov .body h4 { font-size: var(--f1); letter-spacing: .18em; color: var(--hui); margin: var(--s3) 0 var(--s1); }
.lst { list-style: none; margin: 0; padding: 0; }
.wrow { display: flex; align-items: stretch; gap: var(--s1); border-left: 2px solid var(--xian); padding-left: var(--s3); margin: var(--s1) 0; }
.wrow.on { border-left-color: var(--teng); }
.wrow .op { flex: 1; border: 0; background: none; text-align: left; padding: var(--s2) 0; }
.wrow .op b { display: block; }
.wrow .op span { font-family: var(--mono); font-size: var(--f1); color: var(--hui); }
.wrow .del { border: 0; background: none; color: var(--xiu); font-size: var(--f2); }
.none { color: var(--hui); font-size: var(--f2); }
.notes { border-left: 2px solid var(--tong); padding-left: var(--s3); margin: var(--s2) 0; }
.notes p { font-size: var(--f2); color: var(--hui); margin: var(--s1) 0; }
.ovfoot { display: flex; gap: var(--s2); margin-top: var(--s3); }
.how { padding-left: 1.3em; margin: 0; }
.how li { margin: var(--s2) 0; }
.how .stat { display: block; font-family: var(--mono); font-size: var(--f2); color: var(--tong); }
.facts { list-style: none; margin: var(--s2) 0; padding: 0; }
.facts li { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--s2); border-top: 1px solid var(--xian); padding: var(--s1) 0; font-size: var(--f2); }
.facts span { color: var(--hui); }
#copyArea { width: 100%; height: 260px; font-family: var(--mono); font-size: var(--f1); border: 1px solid var(--xian); background: var(--sha); padding: var(--s2); }
table.tb { width: 100%; border-collapse: collapse; font-size: var(--f2); }
table.tb th, table.tb td { border-bottom: 1px solid var(--xian); padding: var(--s1) var(--s2); text-align: left; vertical-align: top; }
table.tb th { color: var(--hui); font-weight: 600; font-size: var(--f1); }

/* ---------- 提示 ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); transform: translateX(-50%);
         z-index: 30; background: var(--mo); color: var(--sha); font-size: var(--f2); padding: var(--s2) var(--s3); max-width: 88vw; }

/* ---------- 窄屏：左栏折成上面一条横块，工艺单接管第一屏 ---------- */
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; padding: 0 var(--s2); }
  #side { position: static; max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--xian); padding: var(--s2) 0; }
  #sideBody { display: none; }
  #side.open #sideBody { display: block; }
  .brand { border-bottom: 0; padding-bottom: 0; }
  .brand .tog { display: inline-block; }
  #main { padding-top: var(--s2); }
  .hl b { font-size: var(--f4); }
  #foot { padding-left: var(--s2); padding-right: var(--s2); }
}