/* PDF Work Helper — R3 design system.
   Paper-on-desk work tool: grey-white desk, ink text, one teal for actions, six muted source colours that
   follow every page from its source file to its place in the final order. System fonts only. 8px spacing. */
:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #1e2321;
  --ink-2: #565c58;
  --ink-3: #767c78;
  --line: #dedad1;
  --line-2: #ece9e2;
  --accent: #0f6e68;
  --accent-hover: #0b5a55;
  --accent-soft: #e2efed;
  --danger: #a8231a;
  --danger-soft: #fbeceb;
  --warn-soft: #fdf4dc;
  --ok: #2d6a3e;
  --focus: #1d5fd1;
  --c0: #3d6fb4; --c1: #a8553a; --c2: #5e7f2e; --c3: #7c4d9c; --c4: #9a7012; --c5: #4d5d6b;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --r-ctl: 8px; --r-panel: 12px; --r-paper: 2px;
  --font: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo",
    "Noto Sans CJK KR", "Noto Sans CJK JP", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); overflow-wrap: anywhere; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s2); top: -60px; background: var(--ink); color: #fff; padding: var(--s2) var(--s3); border-radius: var(--r-ctl); z-index: 20; }
.skip:focus { top: var(--s2); }
h1, h2, h3 { line-height: 1.3; }

/* source colours */
.src-c0 { --src: var(--c0); } .src-c1 { --src: var(--c1); } .src-c2 { --src: var(--c2); }
.src-c3 { --src: var(--c3); } .src-c4 { --src: var(--c4); } .src-c5 { --src: var(--c5); }
.chip { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 4px; background: var(--src, var(--ink)); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; flex: none; }

/* ---------- site header ---------- */
.site { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); min-height: 60px; padding: 0 var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 17px; white-space: nowrap; }
.tasks { justify-self: center; display: inline-flex; gap: 2px; padding: 3px; background: var(--line-2); border-radius: 10px; }
.tasks a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-ctl); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.tasks a:hover { color: var(--ink); }
.tasks a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 35, 33, .12); }
.langs { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.langs a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--r-ctl); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.langs a[aria-current="true"] { color: var(--ink); font-weight: 700; background: var(--line-2); }

main { max-width: 1480px; margin: 0 auto; padding: 0 var(--s4) var(--s5); }
main:focus { outline: none; }
main.dropping { outline: 2px dashed var(--accent); outline-offset: -8px; }
.task-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); padding: var(--s3) 0 var(--s2); }
.task-head h1 { font-size: 20px; margin: 0; }
.task-head h1:focus { outline: none; }
.intro { margin: 0; color: var(--ink-2); font-size: 15px; }
body.is-empty .intro { display: none; }

/* ---------- buttons, fields ---------- */
.btn { font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid #c9c4b8; border-radius: var(--r-ctl);
  padding: 0 var(--s3); min-height: 40px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover:not(:disabled) { border-color: var(--ink-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--accent); }
.btn.quiet:hover:not(:disabled) { background: var(--accent-soft); border-color: transparent; }
.btn.big { min-height: 52px; padding: 0 var(--s4); font-size: 17px; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn.icon { width: 32px; min-height: 32px; padding: 0; font-size: 15px; font-weight: 700; }
.btn.posbtn { min-height: 32px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s2) 0; }
.lbl { display: block; font-weight: 600; font-size: 14px; margin: var(--s3) 0 var(--s1); }
.text { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid #c9c4b8; border-radius: var(--r-ctl); min-height: 44px; background: var(--surface); color: var(--ink); }
.text.small { min-height: 36px; padding: 6px 10px; font-size: 15px; }
.text[aria-invalid="true"] { border: 2px solid var(--danger); }
.field { display: block; margin-top: var(--s2); }
.field .lbl { margin: 0 0 var(--s1); font-size: 13px; color: var(--ink-2); }
.inline { display: flex; gap: var(--s1); }
.inline .text { flex: 1; min-width: 0; }
.hint { color: var(--ink-3); font-size: 13px; margin: var(--s1) 0; line-height: 1.5; }
.hint.lead { color: var(--ink-2); font-size: 15px; margin: 0 0 var(--s2); }
.empty { color: var(--ink-2); }
.err { color: var(--danger); background: var(--danger-soft); padding: var(--s2) 12px; border-radius: var(--r-ctl); margin: var(--s2) 0; font-size: 14px; }
.ok { color: var(--ok); margin: var(--s1) 0; font-size: 14px; }
.notice { background: var(--accent-soft); color: var(--ink); padding: var(--s2) 12px; border-radius: var(--r-ctl); margin: var(--s2) 0; font-size: 14px; }
.notice.warn { background: var(--warn-soft); }
.counts { font-weight: 600; margin: var(--s1) 0; font-size: 14px; color: var(--ink-2); }
.counts.big { font-size: 17px; color: var(--ink); }

/* ---------- empty state ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s6); align-items: center; padding: var(--s5) 0 var(--s6); }
.hero-title { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; margin: 0 0 var(--s3); max-width: 16em; }
.hero-lead { font-size: 18px; color: var(--ink-2); margin: 0 0 var(--s4); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s2); }
.privacy { margin: var(--s3) 0 var(--s1); font-size: 15px; }
.support { margin-top: var(--s2); font-size: 14px; color: var(--ink-2); }
.support summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.support ul { margin: var(--s1) 0 0; padding-left: 20px; }
.support li { margin: 2px 0; }
.hero-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.demo-sources { display: grid; gap: 12px; }
.demo-doc { position: relative; height: 64px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--src); border-radius: var(--r-paper); padding: 10px 10px 0 40px; box-shadow: 4px 4px 0 -1px var(--surface), 4px 4px 0 0 var(--line); }
.demo-doc .chip { position: absolute; left: 8px; top: 8px; }
.demo-doc i { display: block; height: 4px; margin: 0 0 8px; background: var(--line-2); border-radius: 2px; }
.demo-doc i:nth-child(3) { width: 70%; }
.demo-doc i:nth-child(4) { width: 45%; }
.demo-result { display: grid; gap: var(--s2); }
.demo-page { display: flex; align-items: center; gap: var(--s2); height: 34px; padding: 0 var(--s2); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--src); border-radius: var(--r-paper); font-size: 13px; color: var(--ink-2); }
.demo-page b { color: var(--ink); min-width: 1.2em; }

/* ---------- workspace ---------- */
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 12px; }
.steps { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--ink-3); }
.steps li { display: flex; align-items: center; gap: 6px; }
.steps .num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); font-size: 12px; font-weight: 700; }
.steps li.done { color: var(--ink-2); }
.steps li.done .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps li.current { color: var(--ink); font-weight: 700; }
.steps li.current .num { border-color: var(--accent); color: var(--accent); }
.mtabs { display: none; }
.actionbar { display: none; }

.layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(300px, 360px); gap: var(--s3); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s3) 20px 20px; min-width: 0; }
.panel h2 { font-size: 17px; margin: 0; }
.panel h3 { font-size: 16px; margin: var(--s3) 0 var(--s2); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.panel-head .count { font-weight: 500; color: var(--ink-3); font-size: 14px; }
.layout .review { overflow: auto; }
/* R3.1 desktop (>=960px): the workbench fits the window. Files, pages and the final order each scroll on their own,
   side by side; the page does not need to be scrolled to compare them. --layout-top is measured by main.js. */
@media (min-width: 960px) {
  .layout { height: max(520px, calc(100dvh - var(--layout-top, 170px) - 12px)); align-items: stretch; }
  .layout > .panel { min-height: 0; max-height: 100%; overflow: auto; overscroll-behavior: contain; }
  .layout > .work { display: flex; flex-direction: column; overflow: hidden; }
  .layout > .work .cards-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -8px; padding: 0 8px 8px; }
}
/* desktop: the main action stays in view at the bottom of the scrolling result column */
.layout .review .create-row { position: sticky; bottom: -20px; z-index: 1; background: var(--surface); margin: 0 -20px; padding: 12px 20px 20px; border-top: 1px solid var(--line-2); }

/* sources */
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.file { border: 1px solid var(--line); border-left: 4px solid var(--src); border-radius: var(--r-ctl); padding: 0; }
.file > .file-head { padding: 10px 12px; }
.file-toggle { width: 100%; font: inherit; color: inherit; text-align: start; background: none; border: 0; border-radius: var(--r-ctl); cursor: pointer; min-height: 56px; }
.file-toggle:hover { background: var(--line-2); }
.file-toggle .caret { flex: none; margin-inline-start: auto; color: var(--ink-3); font-size: 14px; align-self: center; }
.file.open { background: var(--line-2); border-color: var(--src); }
.file.open > .file-toggle .caret { color: var(--ink); }
.file-toggle .file-meta > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-toggle { min-height: 0; }
.files { gap: 6px; grid-template-columns: minmax(0, 1fr); }
.file { min-width: 0; }
.file-detail.in-row { padding: 4px 12px 12px; }
section.file-detail { margin: 12px 0 var(--s2); padding: 12px; border: 1px solid var(--line); border-top: 4px solid var(--src); border-radius: var(--r-ctl); }
.fd-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; }
.fd-name { font-weight: 700; }
.fd-file { flex-basis: 100%; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.file .fname { font-size: 14px; }
.file .sub { font-size: 12.5px; line-height: 1.45; }
.file .fsize { white-space: nowrap; }
.file.error { border-color: var(--danger); border-left-color: var(--danger); }
.file.checking { border-left-color: var(--line); }
.file-head { display: flex; gap: 10px; align-items: flex-start; }
.file-meta { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.flabel { font-weight: 700; }
.fname { font-weight: 600; overflow-wrap: anywhere; }
.flabel + .fname { font-weight: 400; font-size: 14px; color: var(--ink-2); }
.sub { font-size: 13px; color: var(--ink-3); }
.status { white-space: nowrap; }
.status.ready { color: var(--ok); }
.status.error { color: var(--danger); font-weight: 700; }
.tag-sample { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--warn-soft); padding: 2px 6px; border-radius: 4px; }
.file-error .fix { font-size: 14px; margin: var(--s1) 0; }
.file-actions { margin: var(--s2) 0 0; }
.meter { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.meter .bar { flex: none; width: 64px; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.meter .fill { display: block; height: 100%; background: var(--src); }
.fill.w0 { width: 0; } .fill.w1 { width: 10%; } .fill.w2 { width: 20%; } .fill.w3 { width: 30%; } .fill.w4 { width: 40%; } .fill.w5 { width: 50%; }
.fill.w6 { width: 60%; } .fill.w7 { width: 70%; } .fill.w8 { width: 80%; } .fill.w9 { width: 90%; } .fill.w10 { width: 100%; }
.sample-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s2); background: var(--warn-soft); border-radius: var(--r-ctl); padding: 4px 4px 4px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.4; }
.sample-note p { margin: 0; }
.drop { display: inline-flex; }
.split-controls { margin-bottom: var(--s3); }
.modes { border: 0; padding: 0; margin: 0 0 var(--s2); }
.modes legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: var(--s1); }
.radio { display: flex; gap: 10px; align-items: center; padding: var(--s2) 10px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); margin-bottom: 6px; cursor: pointer; }
.radio.on { border-color: var(--accent); background: var(--accent-soft); }
.radio input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* canvas */
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0; }
.fbtn { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.fbtn:first-child { padding-left: 12px; }
.fbtn.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.fbtn .chip { width: 22px; min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; }
.cards { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: var(--s3); }
.card { position: relative; border: 1px solid transparent; border-radius: 10px; padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.card:hover { border-color: var(--line); }
.card:focus-visible { border-color: var(--focus); }
.card.dragging { opacity: .45; }
.card.flash { border-color: var(--accent); background: var(--accent-soft); }
.card-top { display: flex; gap: var(--s2); align-items: center; font-size: 14px; min-width: 0; }
.card .pos { font-weight: 800; font-size: 18px; min-width: 1.4em; color: var(--ink); }
.cap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); }
.cap-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-paper); }
.thumb { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--surface); border: 1px solid #e2ded5; border-top: 3px solid var(--src, var(--line)); border-radius: var(--r-paper);
  box-shadow: 0 1px 0 rgba(30, 35, 33, .05), 0 8px 16px -12px rgba(30, 35, 33, .45); overflow: hidden; }
.thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.thumb.loading { background: repeating-linear-gradient(135deg, #f6f5f1, #f6f5f1 8px, #efede8 8px, #efede8 16px); }
.thumb.failed { background: var(--danger-soft); }
.thumb-msg { color: var(--danger); font-size: 13px; padding: var(--s1); text-align: center; }
.card.excluded .thumb { opacity: .35; filter: grayscale(1); }
.card.excluded .pos { color: var(--ink-3); }
.badge { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 12px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.moves { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
/* R3.2: page-card actions wrap inside the card instead of overflowing it (44 px touch buttons on coarse-pointer
   desktops, e.g. Windows touch laptops: 4 arrows + "위치" do not fit one row of a 224 px card) */
.card-actions { min-width: 0; }
.card-actions > * { max-width: 100%; }
.toggle { gap: 6px; }
.toggle .box { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--ink-3); border-radius: 4px; font-size: 13px; line-height: 1; }
.toggle.on .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.cards.mini { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card.selected .thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.card.unselected .thumb { opacity: .4; }
.group { margin-left: auto; font-weight: 700; color: var(--accent); }

/* final order + check */
.src-summary { list-style: none; padding: 0; margin: var(--s2) 0; display: grid; gap: 6px; }
.src-summary li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; font-size: 14px; }
.ss-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-count { grid-column: 2; color: var(--ink-3); font-size: 13px; }
.jumps { display: flex; flex-wrap: wrap; gap: 2px var(--s1); margin: var(--s2) 0; }
.review-list { list-style: none; margin: var(--s2) 0; padding: 0; border-top: 1px solid var(--line-2); } /* R3.1: no inner scroll; the column scrolls once */
.review-list li { border-bottom: 1px solid var(--line-2); }
.linkrow { font: inherit; font-size: 14px; color: var(--ink); width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 40px; padding: 4px 6px; background: none; border: 0; text-align: left; cursor: pointer; }
button.linkrow:hover { background: var(--accent-soft); }
.linkrow .pos { font-weight: 800; min-width: 1.8em; text-align: right; }
.linkrow .ln { flex: 1; min-width: 0; }
.linkrow .tag { font-size: 12px; color: var(--accent); font-weight: 700; }
.confirm { margin: var(--s3) 0 var(--s2); padding: 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.confirm .hint { margin: var(--s1) 0 0 30px; }
.recipient { margin-top: var(--s2); }
.create-row .btn { width: 100%; }
.outlist { list-style: none; padding: 0; margin: var(--s2) 0; }
.outlist li { display: flex; flex-direction: column; padding: var(--s2) 0; border-bottom: 1px solid var(--line-2); }
.progress { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px; margin: var(--s2) 0; }
.progress p { margin: 0 0 var(--s2); }
.progress progress { width: 100%; height: 8px; accent-color: var(--accent); }
.results { border-top: 2px solid var(--accent); margin-top: var(--s3); padding-top: var(--s1); }
.results h3:focus { outline: none; }
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.result { display: flex; gap: 12px; align-items: flex-start; }
.rthumb { width: 96px; height: auto; border: 1px solid #e2ded5; border-radius: var(--r-paper); box-shadow: 0 8px 16px -12px rgba(30, 35, 33, .45); flex: none; background: #fff; }
.rbody { min-width: 0; flex: 1; }
.rbody p { margin: 0; }
.rname { font-weight: 700; }
.rinfo { color: var(--ink-2); font-size: 14px; }
.links { font-size: 13px; max-height: 180px; overflow: auto; padding-left: 20px; }
details summary { cursor: pointer; }

/* footer, dialogs */
.site-foot { max-width: 1480px; margin: 0 auto; padding: var(--s3) var(--s4) var(--s5); color: var(--ink-3); font-size: 13px; }
.site-foot p { margin: var(--s1) 0; }
.site-foot .about summary { cursor: pointer; display: inline-flex; min-height: 32px; align-items: center; }
.site-foot .preview-flag { font-size: 12px; }
.move-help .hint { margin: 0; }
.keys summary { cursor: pointer; font-size: 13px; color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.sample-loading { display: inline-flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
dialog { border: 0; border-radius: var(--r-panel); padding: 0; max-width: min(92vw, 460px); color: var(--ink); box-shadow: 0 24px 48px -16px rgba(30, 35, 33, .4); }
dialog::backdrop { background: rgba(30, 35, 33, .45); }
.dlg { padding: 20px; }
.dlg h2 { margin: 0 0 var(--s2); font-size: 18px; }
.dlg .row { justify-content: flex-end; margin-top: var(--s3); }
dialog:has(.dlg.wide) { max-width: min(94vw, 900px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.dlg-head h2 { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: 16px; }
.big-page { display: grid; place-items: center; min-height: 240px; margin-top: 12px; background: var(--bg); border-radius: var(--r-ctl); }
.big-page img { max-width: 100%; max-height: 78vh; height: auto; border: 1px solid #e2ded5; background: #fff; }
.big-page.loading { background: repeating-linear-gradient(135deg, #f6f5f1, #f6f5f1 8px, #efede8 8px, #efede8 16px); }
.root-lang { margin: 12px 0; }
.notice-text { white-space: pre-wrap; font-size: .85rem; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .layout { grid-template-columns: minmax(232px, 268px) minmax(0, 1fr) minmax(280px, 320px); }
  /* keep two page columns in the narrower centre; first/last stay reachable through the exact-position dialog */
  .cards:not(.mini) { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--s2); }
  .cards:not(.mini) .edge { display: none; }
  .cards:not(.mini) .cap-text { white-space: normal; overflow: visible; font-size: 13px; line-height: 1.3; }
  .site { padding: 0 var(--s3); }
  main { padding: 0 var(--s3) var(--s5); }
}
@media (max-width: 1100px) {
  .tasks a { padding: 0 12px; }
  .langs a { padding: 0 8px; }
}
@media (max-width: 1023px) {
  .site { grid-template-columns: auto 1fr; row-gap: 0; padding-top: var(--s1); }
  .site .tasks { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-bottom: var(--s2); }
  .site .langs-nav { justify-self: end; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}
/* 721-959px: logical two columns — files then final order on the left, pages on the right */
@media (max-width: 959px) {
  .layout { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); }
  .layout .sources { grid-column: 1; grid-row: 1; }
  .layout .work { grid-column: 2; grid-row: 1 / span 2; }
  .layout .review { grid-column: 1; grid-row: 2; position: static; max-height: none; }
  .layout .review .create-row { position: static; margin: 0; padding: 0; border: 0; }
}
/* phones: one step at a time, readable rows, the current main action fixed at the bottom */
@media (max-width: 720px) {
  body { padding-bottom: 84px; }
  .site { padding: var(--s1) var(--s3) 0; min-height: 0; }
  .brand { font-size: 16px; min-height: 48px; }
  .site .tasks { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .tasks a { justify-content: center; padding: 0 6px; font-size: 14px; min-height: 44px; white-space: normal; text-align: center; line-height: 1.2; }
  .site { grid-template-columns: minmax(0, 1fr); }
  .site .langs-nav { grid-row: 2; justify-self: start; margin-left: -6px; }
  .site .tasks { grid-row: 3; }
  .langs a { min-height: 44px; font-size: 14px; padding: 0 8px; white-space: nowrap; }
  main { padding: 0 var(--s3) var(--s4); }
  .task-head { padding: 12px 0 var(--s1); }
  .task-head h1 { font-size: 17px; }
  .intro { font-size: 14px; }
  .hero { padding: var(--s3) 0 var(--s4); }
  .hero-title { font-size: 30px; }
  .hero-lead { font-size: 16px; margin-bottom: var(--s3); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-demo { padding: var(--s3); gap: var(--s3); }
  .steps { display: none; }
  .ws-top { margin: 0 0 12px; position: sticky; top: 0; z-index: 4; background: var(--bg); padding: var(--s2) 0; }
  .mtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: var(--line-2); border-radius: 10px; width: 100%; }
  .mtab { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
  .mtab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 35, 33, .12); }
  .mtab:disabled { opacity: .45; }
  .mbadge { font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--line); color: var(--ink); display: inline-grid; place-items: center; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > .panel { display: none; grid-column: 1; grid-row: auto; }
  .layout.mstep-files > .sources, .layout.mstep-edit > .work, .layout.mstep-review > .review { display: block; }
  .layout .review { position: static; max-height: none; }
  .panel { padding: var(--s3); }
  .work .cards:not(.mini) { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .work .cards:not(.mini) .card { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb top" "thumb actions"; column-gap: 12px; row-gap: 6px; padding: var(--s2); border-color: var(--line-2); }
  .work .cards:not(.mini) .thumb-btn { grid-area: thumb; }
  .work .cards:not(.mini) .card-top { grid-area: top; }
  .work .cards:not(.mini) .card-actions { grid-area: actions; justify-content: flex-start; }
  .work .cards:not(.mini) .badge { position: static; transform: none; grid-area: top; justify-self: end; align-self: center; }
  .work .cards:not(.mini) .edge { display: none; }
  .cards.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actionbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; gap: 12px; align-items: center; justify-content: space-between;
    padding: 10px var(--s3) calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .actionbar.stepped-aside, body.typing .actionbar { display: none; }
  .ab-summary { font-size: 14px; font-weight: 600; min-width: 0; }
  .actionbar .btn { flex: none; min-height: 48px; }
}
/* Touch targets: at least 44x44 CSS px on touch devices and on narrow screens */
@media (pointer: coarse), (max-width: 720px) {
  .btn, .btn.small { min-height: 44px; min-width: 44px; }
  .btn.icon { width: 44px; min-height: 44px; }
  .fbtn { min-height: 44px; }
  .linkrow { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- root language chooser (/) ---------- */
.site-root { grid-template-columns: auto; }
.root-main { max-width: 1180px; }
.root-title { font-size: 28px; margin: var(--s5) 0 var(--s3); }
.root-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.root-lang h2 { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.root-value { font-size: 21px; font-weight: 700; line-height: 1.35; margin: var(--s1) 0 var(--s2); }
.root-privacy { font-size: 14px; color: var(--ink-2); }
.root-tasks { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s1); }
.root-tasks .btn { width: 100%; justify-content: flex-start; }
.root-tasks .btn { text-decoration: none; }
/* R3.1 folded help: a visible disclosure marker (summary is a flex box, so the default marker is not drawn) */
.keys summary, .site-foot .about summary { color: var(--accent); font-weight: 600; list-style: none; }
.keys summary::-webkit-details-marker, .site-foot .about summary::-webkit-details-marker { display: none; }
.keys summary::before, .site-foot .about summary::before { content: "▸"; display: inline-block; width: 1.1em; }
.keys[open] summary::before, .site-foot .about[open] summary::before { content: "▾"; }
/* R3.2: touch desktops / tablets (coarse pointer, wider than a phone): 44 px actions need wider page cards.
   One card column at 960 px, two at 1024–1279 px; actions wrap inside the card, nothing is hidden. */
@media (pointer: coarse) and (min-width: 721px) {
  .cards:not(.mini) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .card { min-width: 0; }
}

/* ---------- E1: work templates and conditions ---------- */
.warn { background: var(--warn-soft); color: var(--ink); padding: var(--s2) 12px; border-radius: var(--r-ctl); margin: var(--s2) 0; font-size: 14px; }
.ok-msg { color: var(--ok); margin: var(--s1) 0; font-size: 14px; }
.err-box .err { margin-bottom: var(--s1); }
.btn.primary-soft { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.tpl-drawer, .cond { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 4px 12px; margin: 0 0 12px; background: var(--surface); }
.tpl-drawer > summary, .cond > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; list-style: none; }
.tpl-drawer > summary::-webkit-details-marker, .cond > summary::-webkit-details-marker { display: none; }
.tpl-drawer > summary::before, .cond > summary::before { content: "▸"; color: var(--accent); width: 1em; }
.tpl-drawer[open] > summary::before, .cond[open] > summary::before { content: "▾"; }
.cond-sum { font-weight: 500; color: var(--ink-2); font-size: 14px; }
.tpl-save .text { width: 100%; }
.tpl-list { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; gap: 6px; }
.tpl-list > li { border-top: 1px solid var(--line-2); padding-top: 6px; }
.tpl-list .row { margin: 4px 0; gap: 4px; }
.tpl-item-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.tpl-list .sub { display: block; margin: 0; }
.tpl-active { border: 2px solid var(--accent); border-radius: var(--r-ctl); padding: 8px 12px; margin: 0 0 12px; }
.tpl-active-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tpl-active h3 { margin: 0; font-size: 15px; }
.tpl-active .tpl-name { color: var(--accent); }
.roles { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.role { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r-ctl); padding: 8px 10px; }
.role[class*="src-c"] { border-left-color: var(--src); }
.role-head { display: flex; flex-direction: column; }
.role-label { font-weight: 700; }
.role p { margin: 4px 0; font-size: 13.5px; }
.role .role-file { overflow-wrap: anywhere; }
.role .btn { margin-top: 4px; }
.hero-templates { margin: var(--s3) 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.hero-templates.empty { background: transparent; }
.ht-title { margin: 0 0 6px; font-weight: 700; font-size: 16px; }
.ht-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ht-item { width: 100%; text-align: start; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-ctl); padding: 8px 12px; min-height: 44px; cursor: pointer; display: flex; flex-direction: column; }
.ht-item:hover { border-color: var(--accent); }
.ht-name { font-weight: 700; }
.cond-fields { display: grid; grid-template-columns: 1fr; gap: 6px; }
.cond-fields .text { width: 100%; }
.cond-result { margin: 6px 0; padding: 6px 10px; border-radius: var(--r-ctl); background: var(--accent-soft); font-size: 13.5px; }
.cond-result.unmet { background: var(--warn-soft); border-left: 4px solid #b7791f; }
.cond-result .cond-head { margin: 0 0 2px; font-weight: 700; }
.cond-result ul { margin: 0; padding-left: 0; list-style: none; }
.cond-result li.warn, .cond-result li.ok-msg { background: none; padding: 0; margin: 2px 0; }
/* E1: compact role rows — name and last-time info on the left, the connect action on the right */
.role { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.role > .role-head { grid-column: 1; grid-row: 1; }
.role > .btn[data-role-connect] { grid-column: 2; grid-row: 1; margin-top: 0; }
.role > p, .role > .btn:not([data-role-connect]) { grid-column: 1 / -1; }
.role .role-file { margin-top: 6px; }