/* 翠排版尺 v2：排版頁 */
:root{--f-threads:system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}   /* 預覽、量字寬：跟脆、跟本體同一組字型 */
body.edit{padding-bottom:calc(var(--tab-h) + 24px)}
.measure{position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre;font:15px var(--f-threads)}
.measure-box{position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre-wrap;overflow-wrap:anywhere;font:15px var(--f-threads)}
.seg{display:flex;align-items:center;gap:0 20px;margin:10px var(--gut) 0}
.seg .r{margin-left:auto;display:flex;gap:0 18px}
.seg .chip{font-size:14px}
.wbar{display:flex;align-items:center;gap:12px;margin:2px var(--gut) 0;font-size:12.5px;color:var(--muted)}
.wbar .chip{margin-left:auto;font-size:13px}
.sample-note{margin:6px var(--gut) 0;font-size:12.5px;color:var(--muted)}
.sample-note .chip{font-size:12.5px;color:var(--pink);min-height:28px;padding:0}

/* 編輯框：四角細框，裡面一則一則 */
.ed{margin:8px var(--gut) 0;border:1px solid var(--line);background:var(--card);position:relative}
.ed::before,.ed::after{content:"";position:absolute;z-index:1;width:11px;height:11px;border:1.5px solid var(--pink);pointer-events:none}
.ed::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.ed::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.tools{position:sticky;top:0;z-index:4;background:var(--card);display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 14px;padding:2px 14px;border-bottom:1px solid var(--line)}
.tools::-webkit-scrollbar{display:none}
.tools .chip{flex:none}   /* 工具一排，放不下就左右滑 */
.tools .chip{font-size:13.5px;color:var(--ink);min-height:40px}
.tool-panel{padding:8px 14px 10px;border-bottom:1px solid var(--line);background:var(--bg);position:relative}
.tool-panel[hidden]{display:none}
.tool-panel .row{display:flex;gap:0 18px;align-items:center}
.tool-panel .row.wrap{flex-wrap:wrap;gap:0 16px}
.tool-panel .kao-now{display:block;font:24px/1.4 var(--kao);margin:2px 0}
.tool-panel .chip.font{font:14px var(--kao);color:var(--ink)}
.tool-panel .close{position:absolute;right:14px;top:4px;font-size:12.5px}
.tool-panel .cats-mini{overflow-x:auto;scrollbar-width:none;padding-right:48px}
.tool-panel .cats-mini::-webkit-scrollbar{display:none}
.tool-panel .cats-mini .chip{flex:none;font-size:13px}
.div-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.div-list .chip.div-line{display:block;width:100%;text-align:left;font:15px/1.5 var(--kao);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px dotted var(--dot);min-height:40px;padding:8px 0}
.div-list .chip.div-line::before,.div-list .chip.div-line::after{content:none}
.post-ed + .post-ed{border-top:1px solid var(--line)}
.ph{display:flex;align-items:center;gap:10px;padding:2px 14px;font-size:12.5px;color:var(--muted);border-bottom:1px dotted var(--dot)}
.ph b{color:var(--ink);font-weight:600}
.ph .stat.over{color:var(--pink);font-weight:600}
.ph .r{margin-left:auto;display:flex;gap:0 14px}
.ph .chip{font-size:12.5px;color:var(--ink);min-height:34px}
.post-ed textarea{display:block;width:100%;border:0;background:none;resize:none;outline:none;padding:12px 16px 14px;font:16px/1.8 var(--kao);color:var(--ink);min-height:72px}
.hint{font-size:12px;color:var(--muted);padding:6px 16px 10px;text-align:right;margin:0}
.bottom{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:0 22px;margin:12px var(--gut) 0}
.bottom .chip{font-size:14px;color:var(--ink)}
.bottom .chip.go{color:var(--pink)}
.bottom .chip:disabled{opacity:.35}

/* 預覽：像一則脆的貼文，寬度是量好的像素 */
.t-wrap{margin:10px 0 0;overflow-x:auto;padding:0 var(--gut)}
.t-card{background:#fff;color:#000;border:1px solid oklch(26% 0.045 335 / .1);padding:4px var(--pad);margin:0 auto;font:15px var(--f-threads)}
.t-post{display:flex;gap:0;padding:12px 0 8px}
.t-post.feed + .t-post,.t-post.reply + .t-post{border-top:1px solid #eee}
.t-col{width:48px;flex:none;display:flex;flex-direction:column;align-items:flex-start}
.t-post.reply .t-col{width:38px}
.t-av{width:36px;height:36px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--fruit) 0 58%,oklch(80% 0.1 30) 58% 70%,#fff 70% 78%,var(--fruit) 78%)}
.t-post.reply .t-av{width:28px;height:28px}
.t-conn{flex:1;width:2px;background:#e5e5e5;margin:6px 0 0 17px;min-height:12px}
.t-main{min-width:0}
.t-post.lead{flex-direction:column}
.t-lead-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.t-head{display:flex;gap:6px;font-size:15px;line-height:21px}
.t-head span{color:#999}
.t-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:var(--lh,23px);margin-top:2px}
.t-body.empty{color:#bbb}
.t-acts{display:flex;gap:18px;margin-top:8px;color:#000}
.t-acts svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.t-wrap{padding:0}.t-card{border-left:0;border-right:0}}   /* 手機：卡片就是整個螢幕寬，跟脆一樣貼齊兩邊 */
@media (min-width:1100px){
  body.edit{max-width:min(1280px,calc(100vw - 320px))}   /* 兩邊各留 160px 給側邊選單，不蓋到內容 */
  .split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start;margin:0 var(--gut)}
  .split .ed{margin:8px 0 0}
  .split #previewPane{position:sticky;top:12px}
  .split .t-wrap{padding:0;margin-top:8px}
  .seg [data-mode]{display:none}
}
.warn{margin:0;padding:4px 14px;font-size:12.5px;color:var(--pink);display:flex;align-items:center;gap:10px;border-bottom:1px dotted var(--dot)}
.warn[hidden]{display:none}
.warn .chip{font-size:12.5px;color:var(--pink);font-weight:700;min-height:30px}
.panel-tip{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* 導覽：畫面下方一張小卡，被指到的地方加一圈點點框 */
.tour{position:fixed;left:16px;top:auto;bottom:calc(var(--tab-h) + 12px);z-index:61;width:min(320px,calc(100vw - 32px));background:var(--night);color:var(--night-ink);padding:12px 14px 8px;box-shadow:0 12px 30px -12px oklch(26% 0.045 335 / .5)}
.tour[hidden]{display:none}
.tour .tour-no{font:italic 600 12px var(--latin);color:oklch(80% 0.12 355);letter-spacing:.08em}
.tour b{display:block;font:900 17px/1.4 var(--serif);margin:2px 0}
.tour .tour-text{margin:0;font-size:13px;line-height:1.65;opacity:.9}
.tour .row{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.tour .row .acts{display:flex;gap:18px}
.tour .tour-dots{font:11px var(--latin);opacity:.55;letter-spacing:.18em}
.tour .chip{color:oklch(85% 0.03 30)}
.tour .chip.go{color:oklch(80% 0.12 355)}
/* 小箭頭指著正在講的東西；放不下（float）就不畫 */
.tour::before{content:"";position:absolute;width:12px;height:12px;background:var(--night);transform:rotate(45deg)}
.tour.below::before{top:-6px;left:var(--ax)}
.tour.above::before{bottom:-6px;left:var(--ax)}
.tour.right::before{left:-6px;top:var(--ay)}
.tour.left::before{right:-6px;top:var(--ay)}
.tour.float::before{content:none}
/* 粉色四角括號框住正在講的東西（不蓋畫面、點得到底下） */
.tour-frame{position:fixed;z-index:60;pointer-events:none}
.tour-frame[hidden]{display:none}
.tour-frame i{position:absolute;width:14px;height:14px;border:2px solid var(--pink)}
.tour-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.tour-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.tour-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.tour-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.tour .chip:focus-visible{outline:1px dotted currentColor;outline-offset:3px}

/* 整份草稿的「復原、貼上、清空草稿」：電腦放在第一則標題列（跟複製、刪除中間隔一條細線），手機留在底下那排跟設定裡 */
.ph .draft-acts{display:none}
@media (min-width:900px){
  .ph .draft-acts{display:flex;gap:0 14px;padding-right:14px;margin-right:0;border-right:1px dotted var(--dot)}
  .ph .draft-acts .clear{color:var(--pink)}
  .ph .chip:disabled{opacity:.35}
  .bottom #undo,.bottom #paste,body.edit #clearDraft{display:none}
}