/* 公众号排版 (wxstudio.js) on 定稿: the panels (截图 / 插画 / 成稿 / 封面), each two columns that scroll on their own —
   the list or the text on the left, the preview on the right — and the 配色实验室 / 固定结尾 dialogs. Uses the desk's
   tokens. Dialogs only get a display value while [open]. */

.wd-body:has(> .wx-final) { display: flex; flex-direction: column; overflow: hidden; }
.wx-final { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.wx-tabbar { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wx-tabbar .grow { flex: 1; }
.art-tabs small.warn { color: var(--clay); }
.wx-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); gap: 12px; }
.wx-split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wx-pane { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.wx-wait { padding: 16px; }

/* X 定稿 (10/10): same two columns; the right pane is the post preview */
.x-final .x-out { padding: 14px; background: var(--paper); }
.x-final .x-out .xpost { max-width: 640px; margin: 0 auto; }
.x-final .wx-list .cover img { aspect-ratio: 5 / 2; }
.x-final .wx-list .shots-block h4 { margin-top: 0; }
.x-final .wx-tabbar .live-count { display: inline-flex; gap: 10px; font-size: 12.5px; }
.x-final .x-pic { font-size: 12.5px; color: var(--ink-soft); max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-final .x-pic b { margin-right: 6px; color: var(--muted); font-weight: 500; }
.wd-preview .x-hit { outline: 3px solid var(--zhu-line); outline-offset: 4px; border-radius: 10px; }
/* each picture in the X preview carries 复制图片 (the post's 复制 takes only the text) */
.wd-preview .x-fig { position: relative; margin: 0; }
.wd-preview .x-fig-cover { margin: -16px -18px 12px; }
.wd-preview .x-fig-cover .preview-cover { width: 100%; margin: 0; }
.wd-preview .x-copy-img { position: absolute; top: 10px; right: 10px; background: var(--card); opacity: 0.88; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.wd-preview .x-fig:not(.x-fig-cover) .x-copy-img { top: 22px; }
.wd-preview .x-copy-img:hover { opacity: 1; }

/* the left lists: screenshots, illustrations, covers */
.wx-list { display: grid; align-content: start; gap: 10px; padding: 10px; background: var(--paper); }
.wx-list .art-bar { margin: 0; }
.wx-list [data-follow] { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.wx-list [data-follow].on { border-color: var(--zhu); box-shadow: 0 0 0 3px var(--zhu-wash); }
.wx-item { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.wx-item > header { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.wx-item > header .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.wx-item > header .grow { flex: 1; }
.wx-item > header b { flex-shrink: 0; white-space: nowrap; }
.wx-item > img { display: block; width: 100%; height: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.wx-item .shot.missing { min-height: 96px; gap: 4px; }
.wx-item small.warn { color: var(--clay); font-size: 12px; }
.wx-list .shot.add { min-height: 56px; grid-auto-flow: column; }
.wx-list .spot { margin: 0; background: var(--card); }
.wx-list .covers { grid-template-columns: minmax(0, 1fr); margin: 0; }
.wx-list .cover img { aspect-ratio: 2.35 / 1; }
.cover figcaption .nm { display: grid; min-width: 0; margin-right: auto; }
.cover figcaption .nm small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cover-words .seg button { padding: 2px 10px; font-size: 12.5px; }
.cover-words { flex: 1 1 100%; min-width: 0; }   /* its own row; 换一组 / 风格 go under it */
.cover-words .field { flex: 1 1 100%; min-width: 0; padding: 4px 8px; font-size: 13px; }   /* each line gets the full width */

/* 成稿: the text, its marks and the length check */
.wx-final > .wx-tools { flex-shrink: 0; padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.wx-src { display: flex; flex-direction: column; overflow: hidden; }
.wx-hits-line { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 14px; border-bottom: 1px solid var(--line-soft); background: var(--clay-wash); color: var(--clay); font-size: 12.5px; }
.wx-editor { flex: 1; min-height: 0; width: 100%; margin: 0; padding: 16px 20px 40px; border: 0; outline: none; resize: none; background: var(--card); color: var(--ink);
  font: 14px/1.9 ui-monospace, "Cascadia Mono", Consolas, "Microsoft YaHei", monospace; tab-size: 2; }
.wx-editor[readonly] { color: var(--muted); }
.wx-foot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.wx-foot .live-count { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* the preview: the article on a dotted page at a phone's or a desktop's reading width */
.wx-out { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.wx-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); background: var(--paper); font-size: 13px; }
.wx-pane-head .seg button { padding: 2px 10px; font-size: 12.5px; }
.wx-stat { display: inline-flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wx-stat .warn { color: var(--clay); }
.wx-stat .link { padding: 0; border: 0; background: none; font: inherit; color: var(--clay); text-decoration: underline; cursor: pointer; }
.wx-stage { display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px 60px; background-color: var(--paper-deep);
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px); background-size: 14px 14px; overflow: auto; overscroll-behavior: contain; }
.wx-article { width: 100%; max-width: 390px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; }
.wx-stage.pc .wx-article { max-width: 680px; }
.wx-article img { max-width: 100%; }
.wx-article [data-ref] { cursor: pointer; }
.wx-article .wx-hit { outline: 3px solid var(--zhu); outline-offset: 3px; }

/* 封面: the chosen one as 公众号 crops it */
.cover-show { display: grid; align-content: start; gap: 16px; padding: 16px; background: var(--paper); }
.cover-show figure { display: grid; gap: 6px; margin: 0; }
.cover-show img { display: block; width: 100%; border-radius: 8px; object-fit: cover; }
.cover-show .crop-wide { aspect-ratio: 2.35 / 1; }
.cover-show .sq { width: min(260px, 60%); }
.cover-show .crop-square { aspect-ratio: 1 / 1; }
.cover-show figcaption { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.wd-nav .pub-url { width: min(280px, 32vw); padding: 5px 10px; font-size: 13px; }

/* on 公众号 定稿 the chat folds to a rail (write.js foldChat) */
.wd-chat { position: relative; }
.wd-chat-fold { position: absolute; top: 8px; right: 8px; z-index: 1; }
.wd-chat-fold[hidden] { display: none; }
@media (min-width: 1001px) {
  .wd.chat-folded { grid-template-columns: 216px minmax(0, 1fr) 44px; }
  .wd.chat-folded .wd-chat { padding: 8px 2px; }
  .wd.chat-folded .wd-chat > :not(.wd-chat-fold) { display: none !important; }
  .wd.chat-folded .wd-chat-fold { position: static; display: grid; justify-items: center; gap: 8px; width: 100%; padding: 10px 0; color: var(--ink-soft); }
  .wd-chat-fold span { writing-mode: vertical-rl; letter-spacing: 4px; font-size: 13px; }
}
@media (max-width: 1000px) { .wd-chat-fold { display: none; } }
@media (min-width: 1600px) { .wd.chat-folded { grid-template-columns: 240px minmax(0, 1fr) 44px; } }
@media (min-width: 2200px) { .wd.chat-folded { grid-template-columns: 260px minmax(0, 1fr) 44px; } }

/* narrow: the two columns stack and the page scrolls instead of each column */
@container (max-width: 640px) {
  .wd-body:has(> .wx-final) { display: block; overflow: auto; }
  .wx-split, .wx-split.even { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .wx-pane, .wx-out, .wx-out .wx-stage, .wx-src { overflow: visible; }
  .wx-editor { min-height: 60vh; }
}
@media (max-width: 1000px) { .wx-editor { min-height: 60vh; } }

/* toolbar controls */
.wx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; }
.wx-tools > label, .wx-tools > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.wx-tools .seg button { padding: 2px 9px; font-size: 12.5px; }
.wx-range input { width: 76px; accent-color: var(--ink); }
.wx-range b { min-width: 34px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-sel select, .wx-sel .field { width: auto; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }
.wx-tools input[type="color"], .wx-color input[type="color"] { width: 28px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.wx-ratio { color: var(--sage); font-variant-numeric: tabular-nums; }
.wx-tools [data-wx="ending"].is-on::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--sage); }

/* dialogs */
.wx-dialog { width: min(980px, calc(100vw - 2rem)); max-height: 88vh; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); overflow: auto; }
.wx-dialog::backdrop { background: rgba(27, 26, 23, 0.35); }
.wx-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.wx-dhead h3 { margin: 0; font: 600 16px/1.3 var(--display); }
.wx-dhead .icon-only { margin-left: auto; }

/* 配色实验室 */
.wx-sec { margin: 14px 18px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.wx-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; }
.wx-sec h4 b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px; }
.wx-pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wx-pal { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.wx-pal:hover { border-color: var(--ink-soft); }
.wx-pal.on { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.wx-pal .sw { display: flex; flex: none; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); }
.wx-pal .sw i { width: 12px; }
.wx-pal .nm { display: grid; min-width: 0; }
.wx-pal .nm b { font-size: 13px; }
.wx-pal .nm small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-pal > .ic { margin-left: auto; width: 16px; height: 16px; color: var(--ink); }
.wx-pal .del { position: absolute; top: -7px; right: -7px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.wx-pal .del .ic { width: 12px; height: 12px; }
.wx-pal:hover .del { display: grid; }
.wx-iprow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.wx-iprow .wx-sel { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.wx-ip { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.wx-ip img, .wx-ip .ph { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.wx-ip .ph { display: grid; place-items: center; background: var(--paper-deep); color: var(--muted); }
.wx-ip span { display: grid; }
.wx-ip small { color: var(--muted); font-size: 11.5px; }
.wx-custom { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.wx-palname { display: grid; gap: 6px; align-content: start; font-size: 12px; }
.wx-palname small { color: var(--muted); }
.wx-palname .btn { justify-self: start; }
.wx-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.wx-color { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; }
.wx-color input[type="color"] { width: 40px; height: 36px; }
.wx-color .hx { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.wx-color .field { width: 92px; padding: 4px 8px; font-family: var(--mono); font-size: 12.5px; }
.wx-roles { position: relative; margin-left: auto; }
.wx-roles summary { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; cursor: pointer; list-style: none; }
.wx-roles summary::after { content: " ⌄"; color: var(--muted); }
.wx-roles > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; gap: 2px; min-width: 170px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.wx-roles label { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 13px; cursor: pointer; }
.wx-roles input { accent-color: var(--ink); }

/* 固定结尾 */
.wx-end { width: min(720px, calc(100vw - 2rem)); }
.wx-endrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.wx-endrow .grow { flex: 1; }
.wx-endrow:last-child { margin: 10px 0 0; }
.wx-endtext { min-height: 200px; line-height: 1.9; }

.wx-copy-host { position: fixed; left: -10000px; top: 0; width: 680px; }

@media (max-width: 900px) {
  .wx-custom { grid-template-columns: 1fr; }
}