/* layout: top bar, then pages rail | page preview | change list */
:root {
  --ink:#1f1c1a; --mid:#5d5753; --line:#e6e1dc; --bg:#f6f3f0; --card:#fff; --accent:#d9480f; --accent-ink:#b23a0a; --accent-pale:#fff1e8;
  --ok:#1f7a45; --ok-pale:#e5f4ea; --warn:#9a5b00; --warn-pale:#fff4dd; --bad:#b42318; --bad-pale:#fde8e6; --info:#1d4f8a; --info-pale:#e6eef8;
  --display:'Montserrat',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:14px/1.5 var(--body); color:var(--ink); background:var(--bg); }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
.muted { color:var(--mid); }

.top { height:52px; display:flex; align-items:center; gap:18px; padding:0 max(16px, env(safe-area-inset-left)); background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; font:800 16px var(--display); }
.logo { background:var(--accent); color:#fff; border-radius:6px; padding:3px 7px; font-size:13px; letter-spacing:.04em; }
.round-title { flex:1; min-width:0; font-weight:600; color:var(--mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-actions { display:flex; align-items:center; gap:6px; }
.link { background:none; border:0; padding:8px 10px; border-radius:8px; font-weight:600; color:var(--mid); }
.link:hover { background:var(--bg); color:var(--ink); }
.me { border:1px solid var(--line); background:#fff; border-radius:20px; padding:6px 12px; font-weight:600; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.layout { height:calc(100% - 52px); display:grid; grid-template-columns:230px minmax(0,1fr) 420px; }
.rail { background:#fff; border-right:1px solid var(--line); overflow:auto; padding:16px 12px; }
.rail-h { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); margin:4px 8px 10px; }
.page-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.page-list button { width:100%; text-align:left; background:none; border:0; border-radius:10px; padding:10px; display:grid; gap:6px; }
.page-list button:hover { background:var(--bg); }
.page-list button.on { background:var(--accent-pale); }
.pl-top { display:flex; justify-content:space-between; gap:8px; font-weight:600; }
.pl-count { color:var(--mid); font-weight:500; font-variant-numeric:tabular-nums; }
.bar { height:5px; border-radius:3px; background:var(--line); overflow:hidden; display:flex; }
.bar i { display:block; height:100%; }
.bar .s { background:var(--ok); } .bar .a { background:#7cc29a; } .bar .c { background:var(--bad); }
.rail-sum { margin:18px 8px 0; font-size:12.5px; color:var(--mid); display:grid; gap:4px; }
.rail-sum b { color:var(--ink); font-variant-numeric:tabular-nums; }

.viewer { display:flex; flex-direction:column; min-width:0; }
.viewer { container-type:inline-size; }
.vbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:8px 14px; padding:8px 14px 10px; background:#fff; border-bottom:1px solid var(--line); }
.vgroup { display:grid; gap:3px; justify-items:start; }
.vgroup:nth-child(2) { justify-items:center; }
.vlabel { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); }
.vtools { display:flex; align-items:center; justify-content:flex-end; gap:6px 12px; flex-wrap:wrap; }
@container (max-width:1200px) {
  .vtools { grid-column:1 / -1; justify-content:center; }
}
@container (max-width:800px) {
  .vbar { grid-template-columns:auto auto; justify-content:center; }
}
.seg { display:inline-flex; background:var(--bg); border-radius:10px; padding:3px; gap:2px; }
.seg button { border:0; background:none; padding:6px 14px; border-radius:8px; font-weight:600; color:var(--mid); }
.seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.seg button[data-view="before"].on { color:var(--bad); }
.seg button[data-view="after"].on { color:var(--ok); }
.seg.pop { background:var(--accent-pale); box-shadow:inset 0 0 0 1px #f6c9ad; }
.seg.pop button { color:var(--accent-ink); white-space:nowrap; }
.seg.pop button.on, .seg.pop button[data-view].on { background:var(--accent); color:#fff; box-shadow:0 1px 4px rgba(217,72,15,.45); }
.seg button:disabled { opacity:.4; cursor:not-allowed; }
.switch { display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--mid); cursor:pointer; }
.switch input { width:16px; height:16px; accent-color:var(--accent); }
.live { color:var(--mid); font-weight:600; text-decoration:none; white-space:nowrap; }
.live:hover { color:var(--accent-ink); }
.frame-wrap { flex:1; position:relative; overflow:auto; background:#e9e5e1; display:flex; justify-content:center; }
.frame-wrap iframe { border:0; width:100%; height:100%; background:#fff; display:block; }
.frame-wrap iframe.alt { position:absolute; top:0; left:0; visibility:hidden; pointer-events:none; }
.frame-wrap.mobile iframe.alt { left:calc(50% - 195px); }
.frame-wrap.mobile iframe { width:390px; margin:16px 0; height:calc(100% - 32px); border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,.18); }
.frame-note { position:absolute; left:50%; top:14px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:8px 14px; border-radius:20px; font-weight:600; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.2); }

.panel { background:#fff; border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.panel-head { padding:14px 16px 10px; border-bottom:1px solid var(--line); display:grid; gap:10px; }
.panel-head h2 { margin:0; font:800 17px var(--display); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chips button { border:1px solid var(--line); background:#fff; border-radius:16px; padding:4px 11px; font-size:12.5px; font-weight:600; color:var(--mid); }
.chips button.on { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-pale); }
.bulk { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--mid); }
.cards { list-style:none; margin:0; padding:14px 12px; overflow:auto; display:grid; gap:18px; align-content:start; flex:1; background:var(--bg); }
.kept { margin:0; padding:10px 16px 14px; font-size:12.5px; color:var(--mid); border-top:1px solid var(--line); }

.card { border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--card); display:grid; gap:11px; cursor:pointer; scroll-margin:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card:hover { border-color:#cfc6bf; }
.card.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-pale); }
.c-top { display:flex; align-items:flex-start; gap:8px; }
.c-n { flex:0 0 auto; background:var(--accent); color:#fff; border-radius:10px; padding:1px 7px; font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
.c-where { flex:1; min-width:0; font-weight:600; line-height:1.35; }
.c-where small { display:block; color:var(--mid); font-weight:500; }
.pill { flex:0 0 auto; border-radius:12px; padding:2px 9px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.pill.pending { background:var(--bg); color:var(--mid); }
.pill.approved { background:var(--ok-pale); color:var(--ok); }
.pill.signed_off { background:var(--ok); color:#fff; }
.pill.changes { background:var(--bad-pale); color:var(--bad); }
.pill.published { background:var(--info-pale); color:var(--info); }
.flags { display:flex; gap:5px; flex-wrap:wrap; }
.flag { font-size:11px; font-weight:700; border-radius:6px; padding:1px 7px; }
.flag.signoff { background:var(--warn-pale); color:var(--warn); }
.flag.live { background:var(--info-pale); color:var(--info); }
.flag.corrected, .flag.conflict { background:var(--bg); color:var(--mid); }
.diff { display:grid; gap:9px; font-size:13px; line-height:1.55; }
.diff > div + div { border-top:1px solid var(--line); padding-top:8px; }
.diff .lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); display:block; margin-bottom:1px; }
.diff .txt { overflow-wrap:anywhere; }
.diff.clamp .txt { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
del.d { background:var(--bad-pale); color:var(--bad); text-decoration:line-through; }
ins.i { background:var(--ok-pale); color:var(--ok); text-decoration:none; font-weight:600; }
.more { background:none; border:0; padding:0; color:var(--accent-ink); font-weight:600; font-size:12.5px; justify-self:start; }
.shot-link { text-align:left; text-decoration:underline; text-underline-offset:2px; }
#shotDlg .dlg-head h2 { margin:0; flex:1; }
.shot-view { margin-top:12px; max-height:75vh; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.shot-view img { display:block; width:100%; height:auto; }
.shot-msg { margin:0; padding:28px 16px; text-align:center; color:var(--mid); font-weight:600; }
.note { font-size:12.5px; color:var(--mid); font-style:italic; }
.acts { display:flex; gap:8px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; border-radius:9px; padding:7px 13px; font-weight:600; text-decoration:none; color:var(--ink); }
.btn:hover { border-color:#bfb5ad; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-ink); }
.btn.ok { color:var(--ok); } .btn.ok.sel { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.no { color:var(--bad); } .btn.no.sel { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.small { padding:4px 10px; font-size:12.5px; }
.reqbox { display:grid; gap:6px; }
textarea, input { font:inherit; color:inherit; border:1px solid var(--line); border-radius:9px; padding:8px 10px; width:100%; background:#fff; }
textarea { resize:vertical; min-height:70px; }
.activity { list-style:none; margin:0; padding:0; border-top:2px solid var(--line); display:grid; font-size:12.5px; }
.activity li { color:var(--mid); padding:10px 0; }
.activity li + li { border-top:1px solid var(--line); }
.activity li:last-child { padding-bottom:0; }
.activity b { color:var(--ink); }
.activity .cm { display:block; color:var(--ink); background:var(--bg); border-radius:8px; padding:7px 10px; margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere; }

.dlg { border:0; border-radius:16px; padding:22px; width:min(420px, calc(100vw - 32px)); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.dlg.wide { width:min(900px, calc(100vw - 32px)); }
.dlg::backdrop { background:rgba(30,25,22,.45); }
.dlg h2 { margin:0 0 6px; font:800 20px var(--display); }
.dlg form { display:grid; gap:8px; }
.dlg label { font-weight:600; font-size:13px; margin-top:4px; }
.dlg .row { display:flex; gap:8px; flex-wrap:wrap; }
.signin-rows { display:grid; gap:8px; }
.dlg-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.x { border:1px solid var(--line); background:#fff; border-radius:8px; padding:5px 10px; font-weight:600; }
.err { color:var(--bad); min-height:1em; margin:0; font-weight:600; }
.hint { margin:0; font-size:12.5px; color:var(--mid); }
fieldset { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:6px 0; }
legend { font-weight:600; font-size:13px; padding:0 4px; }
.radio { display:flex; gap:8px; align-items:center; font-weight:500 !important; }
.radio input { width:auto; }
.tbl-wrap { max-height:55vh; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.tbl { border-collapse:collapse; width:100%; font-size:12.5px; }
.tbl th, .tbl td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th { position:sticky; top:0; background:var(--bg); font-weight:700; }
.tbl td { font-variant-numeric:tabular-nums; }
.toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; transition:all .2s; pointer-events:none; z-index:10; }
.toast.on { opacity:1; transform:translateX(-50%); }

@media (max-width:1100px) {
  .layout { grid-template-columns:190px minmax(0,1fr) 360px; }
}
@media (max-width:820px) {
  .layout { grid-template-columns:1fr; grid-template-rows:auto 60vh auto; height:auto; }
  .rail { border-right:0; border-bottom:1px solid var(--line); }
  .page-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { border-left:0; }
  .round-title { display:none; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* page comments */
.seg [data-kind="change"].on { color:var(--bad); }
.note-draft { padding:12px 16px; border-bottom:1px solid var(--line); background:var(--accent-pale); display:grid; gap:8px; }
.nd-quote { margin:0; font-size:12.5px; color:var(--mid); border-left:3px solid var(--accent); padding-left:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.note-draft .seg { justify-self:start; background:#fff; }
.note-draft .seg button.on { background:var(--bg); }
.c-n.comment { background:var(--info); } .c-n.change { background:var(--bad); }
.note-txt { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-by { margin:0; font-size:12.5px; color:var(--mid); }
.note-by b { color:var(--ink); }
.card.done { opacity:.7; }
.layout.focus #modeBox, .layout.split #modeBox { visibility:hidden; }
.layout.focus [data-view="split"] { display:none; }
/* split view: both versions side by side, scrolling together */
.layout.split { grid-template-columns:minmax(0,1fr); }
.layout.split .rail, .layout.split .panel { display:none; }
.layout.split .frame-wrap { overflow:hidden; background:#e9e5e1; }
.split-lbl { display:none; position:absolute; top:6px; transform:translateX(-50%); padding:2px 12px; border-radius:12px; font-size:12.5px; font-weight:700; color:#fff; }
.split-lbl.l { left:25%; background:var(--bad); }
.split-lbl.r { left:75%; background:var(--ok); }
.layout.split .split-lbl { display:block; }
.nd-edit { margin:0; font-size:12.5px; font-weight:600; color:var(--accent-ink); }
.nd-edit:empty { display:none; }
.replies { list-style:none; margin:0; padding:0; border-top:2px solid var(--line); display:grid; font-size:12.5px; }
.replies li { display:grid; gap:5px; padding:10px 0; }
.replies li + li { border-top:1px solid var(--line); }
.replies p { margin:0; background:var(--bg); border-radius:8px; padding:7px 10px; white-space:pre-wrap; overflow-wrap:anywhere; }
.del { border:0; background:none; padding:0 0 0 6px; color:var(--bad); font-size:12px; font-weight:600; }
.del:hover { text-decoration:underline; }
.bell { position:relative; display:inline-flex; align-items:center; padding:8px; }
.badge { position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:11px; font-weight:700; line-height:17px; text-align:center; }
.rl { border:0; background:none; padding:0 0 0 6px; color:var(--accent-ink); font-size:12px; font-weight:600; }
.rl:hover { text-decoration:underline; }
/* something new: the bell turns orange, rings, and a light runs round its edge */
@property --bell-spin { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.bell.alert { gap:6px; padding:7px 12px; border-radius:20px; background:var(--accent); color:#fff; animation:bellGlow 1.8s ease-in-out infinite; }
.bell.alert:hover { background:var(--accent-ink); color:#fff; }
.bell.alert::before { content:''; position:absolute; inset:-3px; padding:3px; border-radius:23px; pointer-events:none; background:conic-gradient(from var(--bell-spin), transparent 0 50%, #ffc266 72%, #fff 84%, #ff7a1a 92%, transparent); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:bellSpin 1.8s linear infinite; }
.bell.alert svg { transform-origin:50% 12%; animation:bellRing 1.8s ease-in-out infinite; }
.bell.alert .badge { position:static; min-width:0; height:auto; padding:0; background:none; font-size:12.5px; line-height:1.2; white-space:nowrap; }
@keyframes bellSpin { to { --bell-spin:360deg; } }
@keyframes bellGlow { 0%, 100% { box-shadow:0 0 6px 1px rgba(240,84,9,.55); } 50% { box-shadow:0 0 20px 6px rgba(240,84,9,.8); } }
@keyframes bellRing { 0%, 45%, 100% { transform:rotate(0); } 10% { transform:rotate(16deg); } 20% { transform:rotate(-14deg); } 30% { transform:rotate(9deg); } 38% { transform:rotate(-6deg); } }
.ver { position:fixed; left:8px; bottom:6px; z-index:5; border:1px solid var(--line); border-radius:8px; background:#fff; padding:1px 7px; font-size:11.5px; font-weight:600; color:var(--mid); font-variant-numeric:tabular-nums; }
.ver:hover { color:var(--accent-ink); border-color:var(--accent); }
.changelog { max-height:65vh; overflow:auto; margin-top:8px; display:grid; gap:12px; }
.changelog h3 { margin:0; font:800 15px var(--display); }
.changelog small { font:500 12.5px var(--body); color:var(--mid); }
.changelog ul { margin:4px 0 0; padding-left:18px; }
.inbox { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; max-height:60vh; overflow:auto; }
.inbox button { width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; background:#fff; padding:9px 11px; display:grid; gap:3px; }
.inbox button:hover { border-color:#cfc6bf; }
.inbox button.new { border-color:var(--accent); background:var(--accent-pale); }
.inbox small { color:var(--mid); }
.start-opts { display:grid; gap:10px; margin-top:12px; }
.start-opt { text-align:left; border:1px solid var(--line); border-radius:12px; background:#fff; padding:14px; display:grid; gap:3px; }
.start-opt:hover { border-color:var(--accent); background:var(--accent-pale); }
.start-opt b { font:800 15px var(--display); }
.start-opt span { color:var(--mid); }

/* review one by one: page full width, decision bar underneath */
.layout.focus { grid-template-columns:minmax(0,1fr); }
.layout.focus .rail, .layout.focus .panel { display:none; }
.focus-bar { border-top:1px solid var(--line); background:#fff; padding:12px 18px 14px; display:grid; gap:9px; max-height:46vh; overflow:auto; box-shadow:0 -8px 24px rgba(0,0,0,.06); }
.fb-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fb-pos { font-weight:700; font-variant-numeric:tabular-nums; }
.fb-prog { flex:1; min-width:120px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.fb-prog i { display:block; height:100%; background:var(--ok); }
.fb-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fb-head b { font-size:15px; }
.fb-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fb-txt { font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; }
.fb-txt .lbl { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); margin-bottom:2px; }
.fb-ask { display:grid; gap:8px; }
.fb-acts { display:grid; grid-template-columns:auto 1fr 1fr 1fr auto; gap:10px; }
.btn.big { padding:11px 16px; font-size:14.5px; }
.fb-keys { margin:0; font-size:12px; color:var(--mid); }
.switch.small { font-size:12.5px; }
.flag.stale { background:var(--bad-pale); color:var(--bad); }
#openFocus { margin-right:6px; }

/* first-use tour */
.tour { position:fixed; inset:0; z-index:50; cursor:pointer; }
.tour-hole { position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(25,20,17,.62); transition:all .25s ease; pointer-events:none; outline:3px solid var(--accent); }
.tour-card { position:fixed; background:#fff; border-radius:14px; padding:18px 20px; box-shadow:0 18px 50px rgba(0,0,0,.3); display:grid; gap:6px; cursor:default; }
.tour-card h2 { margin:0; font:800 19px var(--display); }
.tour-card p { margin:0; }
.tour-step { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }
.tour-card .btn { justify-self:start; margin-top:6px; }
.tour-card::after { content:'Click anywhere to continue'; font-size:12px; color:var(--mid); }

@media (max-width:820px) {
  .fb-cols { grid-template-columns:1fr; }
  .fb-acts { grid-template-columns:1fr 1fr; }
  .fb-acts [data-f="approve"] { grid-column:1 / -1; order:-1; }
}
@media (max-width:820px) {
  .layout.focus { height:calc(100dvh - 52px); grid-template-rows:minmax(0,1fr); }
  .layout.focus .viewer { min-height:0; }
  .layout.focus .vbar { display:none; }
  .layout.focus .focus-bar { max-height:58%; padding:10px 14px 0; }
  .fb-acts { position:sticky; bottom:0; background:#fff; padding:8px 0 12px; }
  .fb-keys { display:none; }
}
@media (max-width:600px) {
  #openLog, #openExport, #openSettings { display:none; }
  .top { gap:10px; }
  .me { max-width:110px; }
  #openFocus { white-space:nowrap; }
}