/* ===== v94 · Content Studio (2026-10-03) — pages/ldraft.js (.edp.cs), the Guide's rail, suggestions in the text, marks, the "/" menu =====
   Research _research/2026-10-content-studio §5.2; premium study _research/2026-10-premium-design §4.4 (a meter, never a ring or a traffic-light
   gauge: the coverage guide is a neutral meter toward the band of the pages compared; the only motion is a one-time 600 ms draw per document;
   reduced motion → static). Word states carry meaning with icons; no new colours — tokens only, so dark mode follows. */

/* ---------- the layout: the text and a 380 px sticky rail ---------- */
.edp.cs .dp-grid{grid-template-columns:minmax(0,1fr) 352px;gap:24px}   /* D06: the guide 320–360 px; the text is the centre */
@media (max-width:1320px){.edp.cs .dp-grid{grid-template-columns:minmax(0,1fr) 352px;gap:20px}}   /* Oct 7 review (D06 · D14): 352px here too — at 328 the Guide's last tab (Versions) was cut off */
.edp.cs .dp-side{gap:12px;padding-bottom:8px;scrollbar-width:thin}
.edp.cs .dp-r > .btn.ghost{height:28px}

/* ---------- the header card: Coverage, the meter, the band, the four counts ---------- */
.cs-head{padding:16px 20px 16px;gap:10px}
.cs-k{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-hl);line-height:var(--lh-hl);font-weight:var(--w-semibold);color:var(--fg)}
.cs-num{font-size:26px;line-height:30px;font-weight:var(--w-semibold);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.cs-na{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg-2)}
.cs-delta > span{overflow:hidden;text-overflow:ellipsis}
.cs-delta b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
@keyframes csIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.cs-meter{position:relative;height:6px;margin:8px 0 2px;border-radius:3px;background:var(--m-track,var(--bg-5))}   /* ui/meters.js geometry (6 px, the shared track). meters.js has no band meter yet — this is coverage's: neutral, never a goal's blue */
/* NOTE FOR THE MERGE (CS-B, 2026-10-03 02:50): fold this band meter into ui/meters.js as bandMeter({ value, lo, hi, from }) once the Growth fixer has
   finished with meters.js — it was still running, so the meter stays local here (pages/ldraft.js meterEl + lcontent.js covCell use .cs-meter). */
.cs-meter.is-sk{background:var(--bg-4)}
.cs-band{position:absolute;top:-4px;bottom:-4px;border-left:1.5px solid var(--fg-3);border-right:1.5px solid var(--fg-3);background:color-mix(in srgb,var(--fg) 7%,transparent);border-radius:2px}
.cs-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--fg-3);transform-origin:left center}
.cs-you{position:absolute;top:-5px;width:2px;height:16px;margin-left:-1px;border-radius:1px;background:var(--fg);box-shadow:0 0 0 2px var(--bg)}
.cs-meter.is-draw .cs-fill{animation:csDraw var(--dur-draw) var(--m-ease) both}
.cs-meter.is-draw .cs-you{animation:csFade var(--dur-draw) var(--m-ease) both}
@keyframes csDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes csFade{from{opacity:0}to{opacity:1}}
.cs-line{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.cs-line b{color:var(--fg-2);font-weight:var(--w-semibold)}
.cs-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.cs-ct{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:7px 9px 6px;border-radius:var(--r-8);background:var(--bg-4);text-align:left;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);transition:var(--tr-ui)}
.cs-ct b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
@media (hover:hover){.cs-ct:hover{background:var(--bg-3)}}
.cs-sheet{display:none;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:var(--r-8);font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg-2)}
@media (hover:hover){.cs-sheet:hover{background:var(--hover);color:var(--fg)}}
.cs-head.is-reading .cs-meter{animation:csPulse var(--dur-loop) ease-in-out infinite alternate}
@keyframes csPulse{from{opacity:.5}to{opacity:1}}

/* ---------- the tabs and the card that holds a tab ---------- */
.cs-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- the Guide: two groups, eleven steps, one open at a time ---------- */
.cs-guide{display:flex;flex-direction:column}
.cs-step{border-radius:var(--r-12)}
.cs-step.is-on{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ln-3)}
@media (hover:hover){.cs-sh2:hover:not(:disabled){background:var(--hover)}}
.cs-sh2:disabled{cursor:default}
.cs-sh2 > svg{color:var(--fg-3)}
.cs-stt{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg);white-space:nowrap}
.cs-step.is-gate .cs-sum{color:var(--warn);font-weight:var(--w-medium)}
.cs-st{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--fg-3)}
.cs-st.is-done{color:var(--fg-2)}
.cs-st.is-gate{color:var(--warn)}
.cs-st.is-info{color:var(--fg-4)}
.cs-body{display:flex;flex-direction:column;gap:10px}
.cs-step[data-step="words"] .cs-body,.cs-step[data-step="read"] .cs-body,.cs-step[data-step="links"] .cs-body,.cs-step[data-step="google"] .cs-body,.cs-step[data-step="sections"] .cs-body{padding-left:8px}
.cs-p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.cs-p .ib{vertical-align:-3px;margin-left:2px}
.cs-note{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);padding:8px 10px;border-radius:var(--r-8);background:var(--bg-4)}   /* v105 (a11y): --fg-3 on --bg-4 read 4.25:1 */
.cs-warn{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-warn b{color:var(--warn);font-weight:var(--w-semibold)}
.cs-rm{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);font-variant-numeric:tabular-nums}
.cs-rk{display:block;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);color:var(--fg-3)}
.cs-rw{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);white-space:nowrap}
.cs-sh{padding:4px 0 2px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-semibold);color:var(--fg-2)}
.cs-list{display:flex;flex-direction:column}
.cs-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;align-items:center;column-gap:8px;min-height:32px;padding:4px 0;border-top:1px solid var(--ln-4);text-align:left;width:100%}
.cs-list > .cs-row:first-child,.cs-list > .cs-sub:first-child > .cs-row{border-top:0}
.cs-row.is-top{align-items:start}
.cs-row.is-top > .cs-st{margin-top:1px}
.cs-row.is-btn{border-radius:var(--r-8);transition:var(--tr-ui)}
@media (hover:hover){.cs-row.is-btn:hover{background:var(--hover)}}
.cs-rt{min-width:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);text-wrap:pretty}
.cs-rt > p{margin-top:2px}
.cs-rn{color:var(--fg-3);font-variant-numeric:tabular-nums}
.cs-row.is-ok .cs-rt{color:var(--fg-2)}
.cs-sub{border-top:1px solid var(--ln-4)}
.cs-list > .cs-sub:first-child{border-top:0}
.cs-sub > .cs-row{border-top:0;grid-template-columns:18px minmax(0,1fr) 44px auto}
.cs-sub.is-on > .cs-row .cs-rt{font-weight:var(--w-medium)}
.cs-bd{display:flex;flex-direction:column;gap:8px;padding:2px 0 12px 26px}
.cs-bd > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-terms{color:var(--fg-3)!important}
.cs-terms b{color:var(--fg);font-weight:var(--w-semibold)}
.cs-bar{display:block;width:44px;height:4px;border-radius:2px;background:var(--bg-5);overflow:hidden}
.cs-bar > i{display:block;height:100%;border-radius:2px;background:var(--fg-3)}
.cs-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cs-acts .btn.sm{height:28px}
.cs-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cs-more{font-size:var(--t-co);color:var(--fg-3)}
.cs-more > summary{cursor:pointer;padding:6px 0;font-weight:var(--w-medium);color:var(--fg-2);list-style-position:inside}
.cs-more[open] > summary{margin-bottom:2px}
.cs-done-l{margin-top:10px}

/* structure against the pages */
.cs-tbl{display:flex;flex-direction:column;border-top:1px solid var(--ln-3);padding-top:4px}
.cs-tr{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.3fr);column-gap:10px;min-height:28px;align-items:center;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-tr.is-h{min-height:22px;font-size:var(--t-sh);font-weight:var(--w-semibold);color:var(--fg-3)}
.cs-tr .num{text-align:left;font-variant-numeric:tabular-nums;color:var(--fg)}

/* the words table: Word · You · Pages · Used by · State */
.cs-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:2px}
.cs-seg > button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:26px;font-size:var(--t-co)}
.cs-seg .n{color:var(--fg-3);font-variant-numeric:tabular-nums}
.cs-wtbl{display:flex;flex-direction:column}
.cs-w{display:grid;grid-template-columns:minmax(0,1fr) 28px 40px 30px 74px 18px;column-gap:6px;align-items:center;min-height:30px;border-top:1px solid var(--ln-4);font-size:var(--t-co);line-height:var(--lh-co)}
.cs-w.is-h{min-height:24px;border-top:0;font-size:var(--t-sh);font-weight:var(--w-semibold);color:var(--fg-3)}
.cs-w .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg-2)}
.cs-w.is-h .num{color:var(--fg-3)}
.cs-w > .cs-by{color:var(--fg-3)}
.cs-w.is-on{background:var(--bg-4);border-radius:var(--r-6)}
.cs-wt{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:2px 4px;margin-left:-4px;border-radius:var(--r-6);text-align:left;font-size:var(--t-co);color:var(--fg)}
.cs-wt > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.cs-wt:hover{background:var(--bg-3)}}
.cs-ws{display:inline-flex;align-items:center;gap:3px;color:var(--fg-2);white-space:nowrap}
.cs-ws .cs-st{width:14px;height:14px}
.cs-ws .cs-st svg{width:12px;height:12px}
.cs-x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-4);color:var(--fg-4);opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.cs-w:hover .cs-x,.cs-x:focus-visible{opacity:1}
@media (hover:hover){.cs-x:hover{background:var(--bg-3);color:var(--fg)}}
.cs-wnote{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);padding:8px 10px;border-radius:var(--r-8);background:var(--bg-4)}

/* readability: the numbers, the longest sentences */
.cs-kv{display:flex;flex-direction:column}
.cs-kv > div{display:grid;grid-template-columns:118px 72px minmax(0,1fr);column-gap:8px;align-items:baseline;min-height:28px;padding:4px 0;border-top:1px solid var(--ln-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-kv > div:first-child{border-top:0}
.cs-kv b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.cs-sent{display:flex;flex-direction:column;gap:3px;padding:7px 0;border-top:1px solid var(--ln-4)}
.cs-sent > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-sm{display:flex;align-items:center;gap:10px}
.cs-fx{display:inline-flex;gap:10px;margin-left:auto}

/* brand voice */
.cs-vr{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--ln-4)}
.cs-vr:first-child{border-top:0;padding-top:2px}
.cs-vt > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);margin-top:2px}
.cs-vt b{color:var(--fg);font-weight:var(--w-semibold)}

/* links and images */
.cs-lk{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid var(--ln-4)}
.cs-lk > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-lk b{color:var(--fg)}
.cs-occ{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start;padding:5px 8px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-alt{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:8px;align-items:center;min-height:34px;font-size:var(--t-co);color:var(--fg-2)}
.cs-alt input{height:28px;padding:0 9px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);font:inherit;color:var(--fg);min-width:0}
.cs-alt input:focus{border-color:var(--bd-3)}

/* reader and angle */
.cs-for{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-for b{color:var(--fg)}
.cs-angle{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-4)}
.cs-angle > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.cs-angle b{font-weight:var(--w-semibold)}

/* ready to send */
.cs-ready > svg{flex:none;margin-top:1px}
.cs-ready > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.cs-ready b{color:var(--warn);font-weight:var(--w-semibold)}

/* ---------- the Brief tab, in reading order ---------- */
.cs-brief{display:flex;flex-direction:column}
.cs-bs{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--ln-3)}
.cs-bs:first-child{border-top:0;padding-top:4px}
.cs-bs > p{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-bs > p b{color:var(--fg)}
.cs-bs[data-k="angle"] .cs-ang{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);text-wrap:pretty}
.cs-ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-ul b{color:var(--fg)}
.cs-brief.is-reading{gap:10px;padding:10px}
.cs-brief.is-reading .sk-line{height:12px;border-radius:6px}

/* ---------- suggestions in the text (D4): marked, never saved until accepted ---------- */
.dp-sg{position:relative;display:block;margin:12px -14px;padding:8px 14px 10px;border-radius:var(--r-12);border:1px dashed var(--bd-3);background:color-mix(in srgb,var(--accent) 5%,var(--bg));user-select:text}
.dp-sg-bar > svg{flex:none;color:var(--accent)}
.dp-sg-bar > b{font-weight:var(--w-semibold);color:var(--fg);white-space:nowrap}
.dp-sg-l::before{content:"· "}
.dp-sg-btn{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg-2);white-space:nowrap;transition:var(--tr-ui)}
@media (hover:hover){.dp-sg-btn:hover{background:var(--bg-3);color:var(--fg)}}
.dp-sg-btn[title="Accept"]{background:var(--inv);color:var(--inv-fg)}
@media (hover:hover){.dp-sg-btn[title="Accept"]:hover{background:var(--inv-h)}}
.dp-sg-body{padding-left:12px;border-left:2px solid var(--accent);color:var(--fg)}
.dp-sg-body > :first-child{margin-top:0}
.dp-sg-n{margin-top:6px;font-size:var(--t-co);color:var(--fg-3)}
.dp-sgi{display:inline;border-radius:4px;padding:1px 2px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dp-sgi del{color:var(--fg-3);text-decoration:line-through;text-decoration-color:var(--fg-4)}
.dp-sgi ins{margin-left:4px;text-decoration:none;color:var(--fg);background:var(--accent-t);border-radius:3px;padding:0 2px}
.dp-sgi-b{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px;user-select:none}
.dp-sgi-b .dp-sg-btn{height:22px;padding:0 6px}
.dp-sgi-b .dp-sg-btn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- marks of the open step (CSS Custom Highlights — the text's DOM is untouched) ---------- */
.dp-doc [data-mk="first"]{position:relative}
.dp-doc [data-mk="first"]::before{content:"";position:absolute;left:-14px;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--fg-3)}
.dp-doc [data-mk="h"]{position:relative}
.dp-doc [data-mk="h"]::before{content:attr(data-n);position:absolute;left:-30px;top:2px;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--r-full);background:var(--bg-4);font-size:11px;font-weight:var(--w-semibold);line-height:20px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.dp-doc [data-lit]{border-radius:2px}
.dp-doc blockquote{margin:10px 0;padding:2px 0 2px 14px;border-left:3px solid var(--ln);color:var(--fg-2)}
.dp-doc h4{margin:6px 0 -2px;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.dp-doc img{display:block;max-width:100%;height:auto;border-radius:var(--r-8);background:var(--bg-4)}

/* ---------- the toolbar: one line at every width (container queries on the text column) ---------- */
.edp.cs .dp-tools{flex-wrap:nowrap;position:sticky}
.dp-prov-l{white-space:nowrap}
@container dpmain (max-width:780px){.edp.cs .dp-tools .dp-prov{padding:0 8px}.edp.cs .dp-tools .dp-prov-l{display:none}}
@container dpmain (max-width:640px){.edp.cs .dp-tools{padding-left:20px;padding-right:20px}.edp.cs .dp-tools > button{min-width:28px}}
@container dpmain (max-width:560px){.edp.cs .dp-tools{padding-left:12px;padding-right:12px}.edp.cs .dp-tools > button{min-width:26px;padding:0 3px}.edp.cs .dp-tools .sel-sep{margin:0 3px}}
.dp-pop{position:absolute;z-index:30;width:300px;padding:6px;border-radius:var(--r-12);background:var(--elev);box-shadow:var(--sh-med);border:1px solid var(--bd-tl)}
.dp-pop[hidden]{display:none}
.dp-pop-r{display:flex;gap:6px;padding:2px 2px 6px}
.dp-pop-r input{flex:1;min-width:0;height:28px;padding:0 9px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);font:inherit;font-size:var(--t-co);color:var(--fg)}
.dp-pop-i{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:6px 8px;border-radius:var(--r-8);text-align:left;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.dp-pop-i span{color:var(--fg-3)}
@media (hover:hover){.dp-pop-i:hover{background:var(--hover)}}
.dp-pop .cs-rm{padding:6px 8px}
.cs-occ .cs-rm{color:var(--text-2)}

/* ---------- the selection bar: two rows (Tone ▾ / More ▾) and a note ---------- */
.sel-bar{flex-direction:column;align-items:stretch}
.sel-row,.sel-row2{display:flex;align-items:center;gap:2px}
.sel-row2{flex-wrap:wrap;padding-top:4px;margin-top:4px;border-top:1px solid var(--ln-3)}
.sel-row2[hidden],.sel-note[hidden]{display:none}
.sel-bar .sel-q{display:inline-flex;align-items:center;gap:4px;padding:0 8px;font-size:var(--t-body);font-weight:var(--w-medium);color:var(--fg-2);white-space:nowrap}
.sel-note{display:flex;align-items:center;gap:8px;max-width:420px;padding:6px 8px 4px;margin-top:4px;border-top:1px solid var(--ln-3);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.sel-note .sel-q{height:24px;border-radius:var(--r-6);background:var(--bg-4)}

/* ---------- the "/" menu ---------- */
.sl-menu{position:fixed;z-index:700;width:320px;max-height:340px;overflow-y:auto;padding:6px;border-radius:var(--r-12);background:var(--elev);box-shadow:var(--sh-med);border:1px solid var(--bd-tl);transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete}
.sl-menu[hidden]{display:none;opacity:0;translate:0 calc(var(--rise) * -1)}   /* I: opens and closes (it stays in the page; v110-motion.css §7) */
.sl-hd{padding:4px 8px 6px;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);color:var(--fg-3)}
.sl-i{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:0 8px;border-radius:var(--r-8);text-align:left;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.sl-i > svg{flex:none;color:var(--fg-3)}
.sl-i > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-i.is-on{background:var(--hover)}@media (hover:hover){.sl-i:hover{background:var(--hover)}}
.sl-none{padding:8px;font-size:var(--t-co);color:var(--fg-3)}

/* ---------- narrow screens (≤ 1180, CF10/CF15): the rail becomes a bottom sheet — a 48 px bar when closed (the number and "Open the guide");
   open, it rises over a backdrop, Esc closes it and focus goes in and back (pages/ldraft.js setSheet) ---------- */
@media (max-width:1180px){
  .edp.cs .dp-grid{grid-template-columns:minmax(0,1fr)}
  .edp.cs .dp-main{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}   /* D06: the bottom bar never covers the end of the text */
  .edp.cs .dp-side{position:fixed;top:auto;left:auto;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;width:min(560px,calc(100vw - 32px));max-height:none;overflow:visible;gap:10px}
  .edp.cs .dp-side:not(.is-open) > :not(.cs-head){display:none}
  .edp.cs .dp-side:not(.is-open) > .cs-head{height:48px;padding:0 8px 0 16px;justify-content:center;border-radius:var(--r-12);box-shadow:var(--sh-med)}
  .edp.cs .dp-side:not(.is-open) > .cs-head > :not(.cs-top){display:none}
  .edp.cs .dp-side:not(.is-open) .cs-delta{max-width:220px}
  .edp.cs .dp-side.is-open{max-height:min(78vh,760px);overflow-y:auto;overflow-x:hidden;padding:10px;border-radius:var(--r-card);background:var(--canvas);box-shadow:var(--sh-high)}
  .edp.cs .dp-side.is-open > .cs-head{box-shadow:var(--sh-tiny)}
  .cs-sheet{display:inline-flex}
  .edp.cs .dp-grid.has-dz .dp-side{display:flex}
  .cs-scrim:not([hidden]){position:fixed;inset:0;z-index:39;background:var(--scrim)}
}
@media (min-width:1181px){.cs-scrim{display:none!important}}

@media (prefers-reduced-motion:reduce){.cs-meter.is-draw .cs-fill,.cs-meter.is-draw .cs-you,.cs-delta,.cs-head.is-reading .cs-meter{animation:none}}

/* ---------- the library: the coverage column (the score lives only in the editor and the library) ---------- */
.cn-cov{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 8px;max-width:100%;font-variant-numeric:tabular-nums}   /* P6 W7: every cell wraps to its "against the aim" line */
.cn-cov b{min-width:20px;font-weight:var(--w-semibold);color:var(--fg)}
.cn-cov .cs-meter{width:56px;height:4px;margin:0}
.cn-cov .cs-band{top:-3px;bottom:-3px}
.cn-cov .cs-you{top:-4px;height:12px}
.cn-cov .hx-mut,.cn-cov-n{font-size:var(--t-co);color:var(--fg-3)}
.nd-try{margin:-4px 0 4px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.nd-try .lk{font-size:var(--t-co)}

/* ===================================================================== v94 · CS-B (2026-10-03) — P2 #11–#22, P3 #23–#28 =====================================================================
   pages/lstudio.js: Outline · Competitors · Comments · Versions tabs, Writer/Reviewer/Due, Suggesting, When it goes live, the shared brief, ⌘K, focus mode.
   Tokens only (dark mode follows); word states carry meaning with an icon; one-line rows; 380 px rail. */

/* ---------- the rail's tabs: four words, then two icons ---------- */
/* Oct 7 review (D06 · D14): the seven items fit the 352px rail with room to spare (they ran 11–20px past its edge, "Versions" cut in half) —
   9px between the words, 3px between the icons, the row's right inset 8px (.cs-tabs padding below) */
.edp.cs .cs-tabs > button{margin-right:9px;padding:0 1px;white-space:nowrap}
.cs-tsep{flex:1 1 auto;min-width:2px}
.edp.cs .cs-tabs > .cs-it{display:inline-flex;align-items:center;gap:3px;margin-right:3px;padding:0 3px;color:var(--fg-3)}
.edp.cs .cs-tabs > .cs-it:last-child{margin-right:0}
.edp.cs .cs-tabs > .cs-it.is-on{color:var(--fg)}
.cs-it .n{font-size:var(--t-co);font-variant-numeric:tabular-nums}
.cs-bn{margin-left:6px;font-weight:var(--w-medium);letter-spacing:0;text-transform:none;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* ---------- Writer · Reviewer · Due · Editing | Suggesting (above the title) ---------- */
.cs-meta{display:flex;align-items:center;flex-wrap:wrap;margin:14px 40px 0;padding:0 0 10px;border-bottom:1px solid var(--ln-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);column-gap:12px;row-gap:6px}
@media (max-width:1320px){.cs-meta{margin-left:28px;margin-right:28px}}
.cs-meta + .dp-title{padding-top:18px}
/* D06 (design review, 7 Oct): under the title, ONE compact context strip on the text's column — who and when (.cs-meta), "Since you wrote this"
   (its result on one line, the four facts behind "Show details") and the excerpt line — then the toolbar and the text */
.dp-ctx{display:flex;flex-direction:column;gap:8px;margin:2px 40px 16px;max-width:616px;min-width:0}
@media (max-width:1320px){.dp-ctx{margin-left:28px;margin-right:28px;max-width:592px}}
.dp-ctx > .cs-meta{margin:0;padding:0;border-bottom:0}
.dp-ctx > .cn-since,.edp .dp-ctx > .cn-ex{margin:0}
/* Oct 7 review (D06): the excerpt note inside "Since you wrote this" → Show details — one compact strip (pages/ldraft.js puts it there) */
.edp.cs .cn-since-f > .cn-ex{margin:8px 0 0;padding:0 0 0 2px;border-radius:0;background:none}
.dp-ctx > .cn-since{padding:8px 12px;border-radius:var(--r-12)}
.cn-since-f > summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-height:24px;list-style:none;cursor:pointer;border-radius:var(--r-6)}
.cn-since-f > summary::-webkit-details-marker{display:none}
.cn-since-hd .cn-since-k{order:2;flex-basis:100%;padding-left:20px;color:var(--fg-2)}
.cn-since-hd .cn-since-t{order:1;display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-2)}
.cn-since-hd .cn-since-t svg{color:var(--fg-3);transition:transform var(--dur-1) var(--ease-out)}
@media (hover:hover){.cn-since-f > summary:hover .cn-since-t{color:var(--fg)}}
.cn-since-f[open] .cn-since-t svg{transform:rotate(180deg)}
.cn-since-hd .cn-since-x,.cn-since-f[open] .cn-since-o,.cn-since-f[open] .cn-since-k{display:none}
.cn-since-f[open] .cn-since-hd .cn-since-x{display:inline}
.cs-mk{color:var(--fg-3)}
.cs-mk:not(:first-child){margin-left:6px}
.cs-pp{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:var(--r-8);font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg);background:transparent}
.cs-pp.is-open{background:var(--hover)}@media (hover:hover){.cs-pp:hover{background:var(--hover)}}
.cs-pp .mb-cv{color:var(--fg-4)}
.cs-mode{border:1px solid var(--bd);}
/* P5 fix (E4 · BILL-5): read-only — the mode chip says so, the people pickers are seen, not changed */
.cs-pp.is-ro,.cs-pp:disabled{color:var(--fg-3);cursor:default}
.cs-pp.is-ro svg{color:var(--fg-3)}
.cs-pp:disabled .mb-cv{display:none}
@media (hover:hover){.cs-pp.is-ro:hover,.cs-pp:disabled:hover{background:transparent}}
.cs-due{height:26px;padding:0 6px;border:1px solid transparent;border-radius:var(--r-8);background:transparent;font:inherit;font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg);color-scheme:light dark}
@media (hover:hover){.cs-due:hover{background:var(--hover)}}
.cs-due:focus{border-color:var(--bd-3)}
.cs-dueb{position:relative;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:var(--r-8);font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg)}
.cs-dueb:focus-within{background:var(--hover)}@media (hover:hover){.cs-dueb:hover{background:var(--hover)}}
.cs-dueb.is-none{color:var(--fg-3);font-weight:var(--w-regular)}
.cs-dueb > svg{color:var(--fg-3)}
.cs-dueb input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;color-scheme:light dark}
.cs-dueb input:focus-visible{opacity:0}
.cs-dueb:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:1px}
.cs-od{padding:0 7px;height:20px;line-height:20px;border-radius:var(--r-full);background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);font-weight:var(--w-medium)}

/* ---------- people's tracked changes (Suggesting) and comment anchors ---------- */
.dp-doc [data-prov="dpe"]{border-left:2px solid var(--fg-3);border-left-style:double;border-left-width:3px}
.pv-k.is-dpe i{border-left:3px double var(--fg-3)}
/* iteration 3 (P2-10): pasted text is its own mark — a dash-dot rule, never "Edited by you" */
.dp-doc [data-prov="paste"]{border-left:3px solid transparent;border-image:repeating-linear-gradient(to bottom,var(--fg-2) 0 6px,transparent 6px 9px,var(--fg-2) 9px 11px,transparent 11px 14px) 1}
.pv-k.is-paste i{border-left:3px solid transparent;border-image:repeating-linear-gradient(to bottom,var(--fg-2) 0 6px,transparent 6px 9px,var(--fg-2) 9px 11px,transparent 11px 14px) 1}

/* ---------- Outline ---------- */
.cs-ol,.cs-cg,.cs-cm,.cs-vs{display:flex;flex-direction:column}
.cs-bh{font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center}
.ol-list{display:flex;flex-direction:column;margin:2px -6px 0}
.ol-r{position:relative;display:grid;grid-template-columns:16px 24px minmax(0,1fr) auto 44px;align-items:center;column-gap:6px;min-height:34px;padding:0 6px;border-radius:var(--r-8)}
.ol-r.is-h3{padding-left:22px}
.ol-r:focus-within{background:var(--hover)}@media (hover:hover){.ol-r:hover{background:var(--hover)}}
.ol-r.is-drag{opacity:.45}
.ol-r.is-before::before,.ol-r.is-after::after{content:"";position:absolute;left:6px;right:6px;height:2px;border-radius:1px;background:var(--fg)}
.ol-r.is-before::before{top:-1px}
.ol-r.is-after::after{bottom:-1px}
.ol-g{display:inline-grid;place-items:center;color:var(--fg-4);cursor:grab}
@media (hover:hover){.ol-r:hover .ol-g{color:var(--fg-3)}}
.ol-lv{display:inline-grid;place-items:center;height:18px;border-radius:var(--r-4);background:var(--bg-3);font-size:var(--t-sh);font-weight:var(--w-semibold);color:var(--fg-3)}   /* Oct 7 review (D03): 12px, not 10 */
.ol-in,.ol-t{min-width:0;height:28px;padding:0 6px;border:1px solid transparent;border-radius:var(--r-6);background:transparent;font:inherit;font-size:var(--t-body);line-height:28px;font-weight:var(--w-medium);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-r.is-h3 .ol-in{font-weight:var(--w-regular);color:var(--fg-2)}
@media (hover:hover){.ol-in:hover{border-color:var(--ln-3)}}
.ol-in:focus{border-color:var(--bd-3);background:var(--bg)}
.ol-w{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.ol-w b{font-weight:var(--w-semibold);color:var(--fg-2)}
.ol-w > span{color:var(--fg-3)}
.ol-mv{display:inline-flex;gap:2px;opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.ol-r:hover .ol-mv,.ol-r:focus-within .ol-mv{opacity:1}
.ol-b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-4);color:var(--fg-3)}
@media (hover:hover){.ol-b:hover:not(:disabled){background:var(--bg-3);color:var(--fg)}}
.ol-b:disabled{opacity:.3}
.ol-tpl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ol-tp{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:9px 10px;border:1px solid var(--ln-3);border-radius:var(--r-8);text-align:left;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);transition:var(--tr-ui)}
.ol-tp > svg{flex:none;margin-top:1px;color:var(--fg-3)}
.ol-tp > span{display:flex;flex-direction:column;min-width:0}
.ol-tp b{font-weight:var(--w-semibold);color:var(--fg)}
@media (hover:hover){.ol-tp:hover:not(:disabled){background:var(--hover)}}
.ol-tp.is-on{border-color:var(--fg-3)}
.ol-tp:disabled{opacity:.55;cursor:default}

/* ---------- Competitors: sections and subjects × the pages compared ---------- */
.cs-cg > .cw-for{padding-bottom:10px;margin-bottom:10px}
.cg{display:flex;flex-direction:column;margin:0 -2px;font-size:var(--t-co);line-height:var(--lh-co)}
.cg-r.is-hd{position:sticky;top:0;z-index:1;min-height:36px;border-top:0;background:var(--lvl-0,var(--bg));align-items:end;padding-bottom:4px}
.cg-l{display:flex;flex-direction:column;min-width:0;padding:4px 0}
.cg-k{font-size:10px;line-height:14px;font-weight:var(--w-semibold);letter-spacing:.03em;text-transform:uppercase;color:var(--fg-4)}
.cg-r.is-nobody{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.cg-r.is-angle .cg-t{white-space:normal}
.cg-c{display:grid;place-items:center;height:100%}
.cg-c.is-col{background:var(--bg-4)}
.cg-d{font-size:12px;line-height:1;color:var(--fg-4)}
.cg-d.is-on{color:var(--fg)}
.cg-d.is-half{color:var(--fg-2)}
.cg-h{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:3px 0;border-radius:var(--r-6);font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);font-variant-numeric:tabular-nums}
.cg-h b{font-weight:var(--w-semibold);color:var(--fg)}
.cg-h.is-on{background:var(--hover)}@media (hover:hover){button.cg-h:hover{background:var(--hover)}}
.cg-h.is-you{cursor:default}
.cg-pg{display:flex;flex-direction:column;gap:6px;margin:8px 0 2px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ln-3)}
.cg-pgh{display:flex;align-items:center;gap:8px;font-size:var(--t-co)}
.cg-pgh b{color:var(--fg)}
.cg-ttl{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg)}
.cg-has{display:flex;flex-direction:column;gap:2px;padding:6px 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cg-key{display:flex;flex-direction:column}
.cg-key .rk{display:flex;align-items:center;gap:8px;min-height:32px;border-bottom:1px solid var(--ln-4);font-size:var(--t-co);color:var(--fg-2);cursor:pointer;position:relative}
.cg-key .rk:last-child{border-bottom:0}
.cg-key .rk.is-off .cg-kt{color:var(--fg-3)}
.cg-key .rk input:checked + .tk-box{background:var(--fg);border-color:var(--fg)}
.cg-kt b{color:var(--fg);font-variant-numeric:tabular-nums}
.cg-add{display:flex;gap:6px}
.cg-add input{flex:1;min-width:0;height:28px;padding:0 9px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);font:inherit;font-size:var(--t-co);color:var(--fg)}
.cg-add input:focus{border-color:var(--bd-3)}

/* ---------- Comments ---------- */
.cm-list{display:flex;flex-direction:column;gap:8px}
.cm{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--r-12);border:1px solid var(--ln-3);background:var(--lvl-0,var(--bg))}
.cm.is-on{border-color:var(--fg-3);box-shadow:var(--sh-tiny,none)}
.cm.is-done{opacity:.8}
.cm.is-new{margin-bottom:10px;border-color:var(--bd-3)}
@media (hover:hover){button.cm-q:hover span{color:var(--fg)}}
.cm-q.is-gone{border-left-color:var(--ln)}
.cm-q.is-doc{border-left-color:var(--ln)}
.cm-hd{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--t-co);line-height:var(--lh-co)}
.cm-who{display:inline-flex;align-items:center;gap:6px}
.cm-who b{font-weight:var(--w-semibold);color:var(--fg)}
.cm-cl{height:18px;font-size:var(--t-sh)}
.cm-t{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);text-wrap:pretty}
.cm-at{font-weight:var(--w-semibold)}
.cm-rp{display:flex;flex-direction:column;gap:3px;margin-left:10px;padding-left:10px;border-left:1px solid var(--ln-3)}
.cm-acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cm-in{flex:1;min-width:120px;height:28px;padding:0 9px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);font:inherit;font-size:var(--t-co);color:var(--fg)}
.cm-in:focus,.cm-ta:focus{border-color:var(--bd-3)}
.cm-ta{width:100%;min-height:64px;resize:vertical;padding:8px 10px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);font:inherit;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.cm-to{display:inline-flex;align-items:center;gap:6px}
.hs-r{display:flex;flex-direction:column;gap:5px;padding:8px 0;border-top:1px solid var(--ln-4)}
.hs-r:first-child{border-top:0}
.hs-t{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.hs-t del{color:var(--fg-3)}
.hs-t ins{text-decoration:underline;text-underline-offset:3px;color:var(--fg)}

/* ---------- Versions ---------- */
.vs-sum{margin:2px 0 8px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-2)}
.vs-list{display:flex;flex-direction:column;margin-top:4px}
.vs-r{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-top:1px solid var(--ln-4)}
.vs-r:first-child{border-top:0}
.vs-r.is-now .vs-hd b{color:var(--fg-2)}
.vs-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:var(--t-co);line-height:var(--lh-co)}
.vs-hd b{font-weight:var(--w-semibold);color:var(--fg)}
.vs-cov{font-size:var(--t-co);color:var(--fg-3);font-variant-numeric:tabular-nums}
.vs-vd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;font-size:var(--t-co);line-height:var(--lh-co)}
.vs-vd .lbl{height:20px;line-height:20px;font-size:var(--t-sh)}
.vs-acts{display:flex;gap:12px}
.vs-cmp{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ln-3)}
.vs-pk{flex-wrap:wrap;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;color:var(--fg-3)}
.vs-pk select{min-width:0;width:100%}
.vd{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;scrollbar-width:thin}
.vd-b{padding:6px 8px;border-radius:var(--r-6);background:var(--lvl-0,var(--bg));font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.vd-b.is-h2,.vd-b.is-h3{font-weight:var(--w-semibold);color:var(--fg)}
.vd-b del,.vd del{color:var(--fg-3);text-decoration:line-through;border-radius:2px}
.vd-b ins,.vd ins{text-decoration:underline;text-underline-offset:3px;color:var(--fg);border-radius:2px}
.vd .df-same{font-size:var(--t-co);color:var(--fg-4);padding:0 8px}
.vs-name{display:flex;gap:6px;margin-top:8px;padding-top:10px;border-top:1px solid var(--ln-3)}
.vs-name input{flex:1;min-width:0;height:28px;padding:0 9px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);font:inherit;font-size:var(--t-co);color:var(--fg)}

/* ---------- When it goes live ---------- */
.cs-wh{display:flex;align-items:center;gap:8px;font-size:var(--t-body);line-height:var(--lh-body)}
.cs-wh b{font-weight:var(--w-semibold);color:var(--fg)}
.cs-wh > :last-child{margin-left:auto}
.cs-wdate{display:flex;flex-direction:column;gap:8px}
.cs-wrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cs-wrow .cs-due{border-color:var(--bd)}
.cs-wwarn{display:flex;align-items:flex-start;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-wwarn:empty{display:none}
.cs-wwarn > svg{flex:none;margin-top:2px;color:var(--warn)}
.cs-wset{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-wset > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.cs-wset b{color:var(--fg);font-weight:var(--w-semibold)}

/* ---------- Guide additions: facts readers look for, tone, structured data, template checks, links ---------- */
.cs-lf,.cs-tone,.cs-sd,.cs-tc,.cs-lh{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--ln-3)}
.cs-lf .cs-sh,.cs-sd .cs-sh,.cs-lh .cs-sh{display:flex;align-items:center}
.cs-wk{display:flex;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-wk > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.cs-wk b{color:var(--fg);font-weight:var(--w-semibold)}

/* ---------- In Google: the phone's result, the address ---------- */
.cs-gseg{margin-bottom:-2px}
.cs-gseg > button{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-co)}
.gp.is-mob{max-width:340px;gap:6px;padding:14px;border-radius:var(--r-12)}
.gp-site{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.gp-site > span:last-child{display:flex;flex-direction:column;min-width:0}
.gp-site > span:last-child > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-site b{font-weight:var(--w-medium);color:var(--fg)}
.gp-fav{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-full);background:var(--bg-4);font-size:12px;font-weight:var(--w-semibold);color:var(--fg-2)}
.gp.is-mob .gp-t{font-size:var(--t-hl,17px);-webkit-line-clamp:3}
.gp.is-mob .gp-d{-webkit-line-clamp:3}
.cs-slug{display:flex;align-items:center;min-width:0;height:30px;border:1px solid var(--bd);border-radius:var(--r-8);background:var(--bg);overflow:hidden;font-size:var(--t-co)}
.cs-slug > span{padding:0 2px 0 9px;color:var(--fg-3);white-space:nowrap}
.cs-slug input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;color:var(--fg);padding:0 8px 0 0}

/* ---------- ⌘K — the editor's command menu ---------- */
.dp-cmdk{position:fixed;z-index:800;left:50%;top:14vh;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));max-height:min(520px,72vh);display:flex;flex-direction:column;border-radius:var(--r-12);background:var(--elev);box-shadow:var(--sh-high);border:1px solid var(--bd-tl);overflow:hidden;transition:opacity var(--dur-2) var(--ease-out),translate var(--dur-2) var(--ease-out),display var(--dur-2) allow-discrete}
.dp-cmdk[hidden]{display:none;opacity:0;translate:0 calc(var(--rise) * -1)}   /* I: opens and closes (it stays in the page; v110-motion.css §7) */
.dp-cmdh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--ln-3);color:var(--fg-3)}
.dp-cmdq{flex:1;min-width:0;height:28px;border:0;background:transparent;font:inherit;font-size:var(--t-body);color:var(--fg)}
.dp-cmdq:focus{outline:none}
.dp-cmdk kbd{flex:none;padding:0 6px;height:20px;line-height:20px;border-radius:var(--r-4);background:var(--bg-4);font:inherit;font-size:11px;color:var(--fg-3)}
.dp-cmdl{flex:1;overflow-y:auto;padding:6px;scrollbar-width:thin}
.dp-cmdg{padding:8px 8px 4px;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);color:var(--fg-3)}
.dp-cmdi{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:0 8px;border-radius:var(--r-8);text-align:left;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}
.dp-cmdi > svg{flex:none;color:var(--fg-3)}
.dp-cmdi > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-cmdi.is-on{background:var(--hover)}@media (hover:hover){.dp-cmdi:hover{background:var(--hover)}}
.dp-cmdf{padding:8px 14px;border-top:1px solid var(--ln-3);font-size:var(--t-co);color:var(--fg-3)}

/* ---------- focus mode: the text alone, at a reading width ---------- */
body.dp-focus .app.v89{grid-template-columns:minmax(0,1fr)!important}
body.dp-focus .app.v89 > .sb{display:none}
.edp.cs.is-focus .dp-grid{grid-template-columns:minmax(0,760px)!important;justify-content:center}
.edp.cs.is-focus .dp-side,.edp.cs.is-focus .cs-meta,.edp.cs.is-focus .dp-r > :not(.pt-mb),.edp.cs.is-focus .cn-since{display:none!important}

/* ---------- the shared brief (comment-only, for a freelance writer) ---------- */
.cs-shared .cs-shb{max-width:760px;margin:0 auto;padding:24px 28px 28px;display:flex;flex-direction:column;gap:6px}
.cs-shared .cs-brief{margin-top:10px}
.cs-shared .preview-line{max-width:760px;margin:0 auto 14px}
.cs-shared .dp-cmt{margin-top:16px}

/* ---------- Content → Documents: "Edits that worked" (≥ 3 judged edits of a kind) ---------- */
.cn-ew{padding:0!important}
.cn-ewh{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 22px;text-align:left;font-size:var(--t-body);color:var(--fg)}
.cn-ewh > svg{flex:none;color:var(--fg-3)}
.cn-ewh b{font-weight:var(--w-semibold)}
.cn-ewh .n{font-size:var(--t-co);color:var(--fg-3)}
@media (hover:hover){.cn-ewh:hover{background:var(--hover-solid)}}
.cn-ewb{display:flex;flex-direction:column;gap:8px;padding:0 22px 18px 45px}
.cn-ewl{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg)}

@media (max-width:1180px){.ol-tpl{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ol-mv{transition:none}}
.cg-d.is-na{color:var(--fg-4);font-size:var(--t-sh)}
.cg-g{display:flex;align-items:flex-end;min-height:30px;padding:10px 2px 4px;border-top:1px solid var(--ln-3);font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.cg-g + .cg-r{border-top:0}
.cg-r.is-hd + .cg-g{border-top:0;padding-top:6px}
.cg-nb{color:var(--fg-2);font-weight:var(--w-medium);font-size:var(--t-sh);line-height:var(--lh-sh)}
.cs-occm{align-self:flex-start;margin:2px 0 0 8px;font-size:var(--t-co)}
/* Website → Pages' link step (pages/lpages.js linkStepPanel), mounted in the Links step: flat inside the rail */
.cs-body .ln-step{margin:4px 0 0;padding:10px 0 0!important;border:0;border-top:1px solid var(--ln-3);border-radius:0;box-shadow:none;background:transparent}
.cs-body .ln-step .pt-hd{padding:0 0 6px!important;min-height:0}
.cs-body .ln-step .ln-r{grid-template-columns:minmax(0,1fr)!important;gap:6px;padding:8px 0}

/* ===================================================================== v94 fix round (CF8–CF19, 2026-10-03) =====================================================================
   The design-QA review: keyboard, focus, 1100–1259 px, the rail's grid, marks that never use state colours, the reading measure, one toggle, one
   pressed style, one action style. Tokens only. */

/* ---------- CF13: the reading measure — 16 px body, about 60–75 characters a line ---------- */
.edp.cs .dp-doc{font-size:16px;line-height:26px;max-width:616px}
.edp.cs .dp-title{max-width:616px}.edp.cs .dp-main > .cs-gpw{max-width:620px}
.edp.cs .cs-meta{margin-right:auto}
.edp.cs .dp-doc.md{gap:12px}
@media (max-width:1320px){.edp.cs .dp-doc,.edp.cs .dp-title{max-width:592px}}

/* ---------- CF19: tables in the text — no inset, numbers right-aligned, 15 px ---------- */
.edp.cs .dp-doc.md table{font-size:15px;line-height:22px}
.edp.cs .dp-doc.md th{font-size:13px;line-height:18px}
.edp.cs .dp-doc.md th,.edp.cs .dp-doc.md td{padding:8px 14px 8px 0}
.edp.cs .dp-doc.md th:last-child,.edp.cs .dp-doc.md td:last-child{padding-right:0}
.edp.cs .dp-doc.md td[data-num],.edp.cs .dp-doc.md th[data-num]{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- CF12: marks never use state colours, and each reads in greyscale — blue is only Dottpace's suggestions ---------- */
::highlight(dp-term){background-color:color-mix(in srgb,var(--fg) 13%,transparent);color:inherit;text-decoration:none}
::highlight(dp-long){background-color:transparent;text-decoration:underline dotted;text-decoration-color:var(--fg-3);text-decoration-thickness:2px;text-underline-offset:5px}
::highlight(dp-vlong){background-color:color-mix(in srgb,var(--fg) 7%,transparent);text-decoration:underline dotted;text-decoration-color:var(--fg);text-decoration-thickness:2px;text-underline-offset:5px}
::highlight(dp-passive){background-color:transparent;text-decoration:underline dashed;text-decoration-color:var(--fg-3);text-decoration-thickness:1.5px;text-underline-offset:5px}
::highlight(dp-voice){text-decoration:underline wavy;text-decoration-color:var(--fg-3);text-decoration-thickness:1.5px;text-underline-offset:4px}
::highlight(dp-fact){background-color:color-mix(in srgb,var(--fg) 6%,transparent);text-decoration:underline double;text-decoration-color:var(--fg-2);text-underline-offset:4px}
::highlight(dp-anchor){background-color:transparent;text-decoration:underline solid;text-decoration-color:var(--fg-2);text-decoration-thickness:2px;text-underline-offset:3px}
::highlight(dp-open){background-color:color-mix(in srgb,var(--fg) 9%,transparent)}
::highlight(dp-cmt){background-color:transparent;text-decoration:underline solid;text-decoration-color:var(--fg-4);text-decoration-thickness:2px;text-underline-offset:6px}
::highlight(dp-cmt-on){background-color:color-mix(in srgb,var(--fg) 8%,transparent);text-decoration:underline solid;text-decoration-color:var(--fg-2);text-decoration-thickness:2px;text-underline-offset:6px}
.edp.cs .dp-main{container:dpmain / inline-size;position:relative}
.cm-dots{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.cm-dot{position:absolute;left:4px;width:10px;height:10px;margin-top:-5px;border-radius:var(--r-full);border:2px solid var(--fg-3);background:var(--bg);pointer-events:auto;cursor:pointer}
.cm-dot.is-on{background:var(--fg-2);border-color:var(--fg-2)}
@media (max-width:1320px){.cm-dot{left:3px}}
.dp-doc [data-lit]{background:color-mix(in srgb,var(--fg) 7%,var(--bg));box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 7%,var(--bg))}
.dp-doc [data-hl="good"]{background:color-mix(in srgb,var(--fg) 6%,var(--bg));box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 6%,var(--bg))}
.dp-doc [data-hl="weak"]{background:transparent;box-shadow:inset 3px 0 0 var(--fg-3);text-decoration:underline dotted;text-decoration-color:var(--fg-4);text-underline-offset:5px}
.hl-note .hl-k.is-good{background:color-mix(in srgb,var(--fg) 12%,var(--bg))}
.hl-note .hl-k.is-weak{background:transparent;box-shadow:inset 3px 0 0 var(--fg-3)}
/* people's tracked changes: neutral, with the writer's initials; a deletion is struck through */
.dp-doc ins[data-hs]{text-decoration:underline;text-decoration-color:var(--fg-2);text-decoration-thickness:2px;text-underline-offset:3px;background:color-mix(in srgb,var(--fg) 6%,transparent);color:inherit;border-radius:2px}
.dp-doc ins[data-hs][data-ini]::before{content:attr(data-ini);display:inline-block;margin-right:3px;padding:0 3px;border-radius:3px;background:var(--bg-3);font-size:10px;line-height:14px;font-weight:var(--w-semibold);color:var(--fg-2);vertical-align:2px;user-select:none}
.dp-doc del[data-hs]{border-radius:2px;text-decoration:line-through;text-decoration-color:var(--fg-2);text-decoration-thickness:1.5px;color:var(--fg-3);background:transparent}
.hs-t del,.vd-b del,.vd del{text-decoration-color:var(--fg-2);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.hs-t ins,.vd-b ins,.vd ins{text-decoration-color:var(--fg-2);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.cm-q{display:block;width:100%;padding:2px 0 2px 9px;border-left:3px solid color-mix(in srgb,var(--c-yellow) 70%,var(--fg-4));text-align:left;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);border-left-color:var(--fg-4)}

/* ---------- CF1: what earns nothing, in the header card; the excerpt line; Suggesting graded ---------- */
.cs-nw{white-space:nowrap}
.cs-ex,.cs-sv{display:flex;align-items:flex-start;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.cs-ex > svg,.cs-sv > svg{flex:none;margin-top:2px}
.cs-ex b,.cs-sv b{color:var(--fg-2);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.cs-flags{margin:0;padding:8px 10px;list-style:none;display:flex;flex-direction:column;gap:4px;border-radius:var(--r-8);background:var(--bg-4)}
.cs-flags li{display:flex;align-items:flex-start;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-flags li > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.cs-meter.is-vary .cs-band,.cs-meter.is-fallback .cs-band{border-left-style:dashed;border-right-style:dashed;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 0 3px,transparent 3px 6px)}
.cs-meter.is-client{margin-top:4px}
.cs-sub2{display:block;margin-top:1px}

/* ---------- CF14: the chip animates only when a new change arrives ---------- */
.cs-delta.is-new{animation:csIn var(--dur-3) var(--ease-out) both}

/* ---------- CF4: the suggestion's bar wraps — the facts and blanks it adds are never cut ---------- */
.dp-sg-bar{display:flex;align-items:center;gap:6px;min-height:28px;margin-bottom:4px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);user-select:none;flex-wrap:wrap;row-gap:4px}
.dp-sg-l{min-width:0;color:var(--fg-3);white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 220px}
.dp-sg-bar > .grow{display:none}
.fc-g{display:flex;flex-direction:column}
.fc-gh{display:flex;align-items:center;gap:6px;padding:10px 0 4px;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.fc-gh .cs-bn{margin-left:0;letter-spacing:0}
.fc-dp{height:18px;line-height:18px;font-size:var(--t-sh);vertical-align:1px}
.fc-i.is-blank .fc-t b{font-weight:var(--w-medium);color:var(--fg-2)}

/* ---------- CF11 + CF16: the rail never scrolls sideways; one grid — content at +22 in the header, icons at +23 and titles at +56 in the Guide ---------- */
.edp.cs .dp-side{overflow-x:hidden;min-width:0}
.edp.cs .dp-side > *{min-width:0;max-width:100%}
.edp.cs .dp-side > .cs-head{padding:16px 22px}
.edp.cs .dp-side > .cs-tabs{display:flex;align-items:flex-end;gap:0;padding:0 8px 0 22px}   /* Oct 7 review: the icons end 8px from the rail's edge — never past it */
.edp.cs .dp-side > .cs-card{padding:8px 7px 10px}
.cs-card > .pn,.cs-card > .cs-brief,.cs-card.is-outline > .cs-ol,.cs-card.is-rank > .cs-cg,.cs-card.is-cmt > .cs-cm,.cs-card.is-ver > .cs-vs{padding:8px 16px}
.cs-grp{font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);padding:12px 16px 6px}
.cs-grp:first-child{padding-top:6px}
.cs-sh2{display:grid;align-items:center;width:100%;min-height:40px;border-radius:var(--r-12);text-align:left;transition:var(--tr-ui);grid-template-columns:25px auto minmax(0,1fr) 14px;column-gap:8px;padding:0 16px}
.cs-sn{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);font-variant-numeric:tabular-nums;display:inline;margin-right:6px;text-align:left}
/* iteration 3 (P2-11): a step summary is never cut with "…" — it wraps to two lines (the reader's label lives in the step's body) */
.cs-sum{min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-align:right;-webkit-box-orient:vertical;display:block;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;text-wrap:balance;padding:2px 0;overflow-wrap:anywhere}
.cs-body,.cs-step[data-step] .cs-body{padding:2px 16px 14px}
.cs-guide > .cs-tc{margin:10px 16px 0}
.cs-ready{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;border-top:1px solid var(--ln-3);color:var(--fg-3);padding:12px 16px 4px}
.cs-when{display:flex;flex-direction:column;gap:10px;padding:16px 22px!important}
.edp.cs .dp-side > .dp-dw,.edp.cs .dp-side > .dw{margin:0}
/* "When it goes live": a radio list, never a segment wider than the card */
.cs-wradio{display:flex;flex-direction:column;gap:2px;margin:0 -8px}
.cs-wradio > button{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 8px;border-radius:var(--r-8);text-align:left;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
@media (hover:hover){.cs-wradio > button:hover:not(:disabled){background:var(--hover);color:var(--fg)}}
.cs-wradio > button[aria-checked="true"]{color:var(--fg);font-weight:var(--w-medium)}
.cs-wradio i{flex:none;width:14px;height:14px;border-radius:var(--r-full);border:1.5px solid var(--fg-3);background:var(--bg)}
.cs-wradio > button[aria-checked="true"] i{border:4px solid var(--accent)}
.cs-wslot{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-wslot b{color:var(--fg);font-weight:var(--w-semibold)}
/* Autopilot's "Next 4 weeks": every row on the same column tracks (CF16) */
@media (min-width:1281px){.rl-slot > .rl-sr{grid-template-columns:118px minmax(0,1fr) 248px 236px}}
.rl-slot > .rl-sr > .rl-acts{min-width:0}

/* ---------- CF17: one toggle (.tgl) and one pressed style ---------- */
.cs-tg{margin-top:2px;display:inline-flex;align-items:center;gap:8px;font-size:var(--t-co);color:var(--fg-2);cursor:pointer}
.edp.cs .dp-tools button[aria-pressed="true"],.edp.cs .dp-tools .dp-prov[aria-pressed="true"],.edp.cs.is-focus .dp-tools button[aria-label="Focus mode"]{background:var(--bg-4);color:var(--fg);border-color:var(--ln);box-shadow:inset 0 0 0 1px var(--ln-2)}

/* ---------- CF19: rail actions in one style — ghost buttons; links that act look like them ---------- */
.edp.cs .dp-side .cs-acts .btn.sm:not(.pri){background:transparent;border:1px solid var(--ln);color:var(--fg)}
@media (hover:hover){.edp.cs .dp-side .cs-acts .btn.sm:not(.pri):hover{background:var(--hover)}}
.edp.cs .dp-side button.lk{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--r-8);border:1px solid var(--ln);background:transparent;font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg);text-decoration:none;white-space:nowrap}
@media (hover:hover){.edp.cs .dp-side button.lk:hover{background:var(--hover)}}

/* ---------- CF18: rail inputs get the shared 2 px focus ring ---------- */
.cs-slug input:focus{outline:none}   /* the slug's box shows the ring (a composite field) */
.cs-alt input:focus-visible,.cg-add input:focus-visible,.cm-in:focus-visible,.cm-ta:focus-visible,.cs-due:focus-visible,.ol-in:focus-visible,.vs-name input:focus-visible,.fc-ed input:focus-visible,.dp-pop-r input:focus-visible{border-color:var(--bd-3)}
.cs-slug:focus-within{border-color:var(--bd-3);outline:2px solid var(--ring);outline-offset:2px}

/* ---------- CF18: Google's desktop result at its own width (about 600 px), above the title while step 11 is open ---------- */
.cs-gpw{margin:14px 40px 0;padding:14px 16px 16px;border-radius:var(--r-12);border:1px solid var(--serp-line,var(--ln-3));background:var(--serp-bg,var(--bg));font-family:Arial,"Helvetica Neue",sans-serif}
.cs-gpw[hidden]{display:none}
.cs-gpw .gw-k{display:flex;align-items:center;gap:6px;margin:-2px 0 10px;font-family:inherit;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.cs-gpw .gw{max-width:600px;display:flex;flex-direction:column;gap:3px}
.cs-gpw .gw-site{display:flex;align-items:center;gap:10px}
.cs-gpw .gw-fav{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-full);background:var(--serp-fav-bg);border:1px solid var(--serp-fav-line);font-size:12px;font-weight:700;color:var(--serp-fav-ink)}
.cs-gpw .gw-name{display:flex;flex-direction:column;min-width:0}
.cs-gpw .gw-name b{font-size:14px;line-height:20px;font-weight:400;color:var(--serp-name)}
.cs-gpw .gw-name span{font-size:12px;line-height:18px;color:var(--serp-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-gpw .gw-t{margin-top:4px;font-size:20px;line-height:26px;font-weight:400;color:var(--serp-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-gpw .gw-d{font-size:14px;line-height:22px;color:var(--serp-meta);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the preview's dark look comes from the --serp-* tokens (v103-tokens.css) */
@media (max-width:1320px){.cs-gpw{margin-left:28px;margin-right:28px}}

/* ---------- CF18: the Competitors grid's labels take two lines ---------- */
.cg-t{min-width:0;color:var(--fg);text-overflow:ellipsis;white-space:normal;overflow-wrap:break-word;text-wrap:pretty}   /* v105 (no-cut): a topic or angle reads whole (was a 2-line clamp) */
.cg-r{display:grid;grid-template-columns:minmax(0,1fr) 36px repeat(var(--cg-n),30px);column-gap:2px;min-height:30px;border-top:1px solid var(--ln-4);padding:0 2px;align-items:center}

/* ---------- CF19: small things ---------- */
.cs-h{flex:none;display:inline-grid;place-items:center;border-radius:3px;border:1px solid var(--bd-2);font-weight:var(--w-bold);color:var(--fg-3);width:16px;height:16px;font-size:11px;line-height:14px}
.cs-angle .cs-rk,.cs-bs[data-k="angle"] .cs-bh{color:var(--fg-2)}
.edp.cs .dr-who,.edp.cs .cn-ex{background:var(--bg-4);color:var(--fg-2)}
.edp.cs .dr-who.is-rev{color:var(--warn)}
.dp-empty[hidden]{display:none}
.dp-tools > button.is-more{display:none}
.dp-xpop{width:220px}
.dp-pop-i.is-row{flex-direction:row;align-items:center;gap:9px;min-height:32px}
.dp-pop-i.is-row > svg{flex:none;color:var(--fg-3)}
@container dpmain (max-width:640px){.edp.cs .dp-tools > .is-x{display:none}.edp.cs .dp-tools > button.is-more{display:inline-grid}}
/* CF10: "Due" stays with its date */
/* P5 fix (visual, 390): the space between Writer · Reviewer · Due is the row's column gap — a wrapped line starts flush, never 8px in */
.cs-meta .cs-mk + .cs-dueb{margin-left:-2px}
.cs-mg{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cs-delta.is-new{animation:none}}
.cn-cov.is-ex{flex-wrap:wrap;row-gap:2px;max-width:100%}
.cn-cov-ex{flex-basis:100%;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);white-space:normal;font-variant-numeric:tabular-nums}
.cn-cov .cs-meter.is-vary .cs-band,.cn-cov .cs-meter.is-fallback .cs-band{border-left-style:dashed;border-right-style:dashed;background:transparent}
/* CF15: the closed sheet is exactly the 48 px bar; CF19: info banners stay neutral in dark */
@media (max-width:1180px){.edp.cs .dp-side:not(.is-open){padding:0;gap:0}}
.edp.cs .preview-line,.cs-shared .preview-line{background:var(--bg-4)}
.edp.cs .preview-line svg{color:var(--fg-3)}
/* CF19: the library's loading skeleton has the library's shape */
.cn-sk-tabs{display:flex;gap:22px;margin:22px 0 14px}
.cn-sk-card{padding:6px 22px!important}
.cn-sk-row{display:grid;grid-template-columns:minmax(0,1.7fr) 130px 108px 100px;align-items:center;column-gap:16px;min-height:58px;border-top:1px solid var(--ln-4)}
.cn-sk-row:first-child{border-top:0}
.cn-sk-t{display:flex;flex-direction:column;gap:8px}
.cn-sk .sk-line{border-radius:6px}
/* the chip may take its own line rather than cut its words */
.cs-top{display:flex;align-items:center;gap:10px;min-height:30px;flex-wrap:wrap;row-gap:6px}
/* CF19: at 900 px all five Content tabs fit — no tab cut at either end */
@media (max-width:1100px){.cn > .pl-bar .pl-tabs{gap:18px}.cn > .pl-bar .pl-tab > svg{display:none}}
@media (max-width:960px){.cn > .pl-bar .pl-tabs{gap:14px}}
/* the chip, on its own line, may take two lines */
.cs-delta{display:inline-flex;align-items:center;gap:6px;max-width:100%;border-radius:var(--r-full);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);overflow:hidden;animation:none;flex:0 1 auto;min-width:min(100%,180px);height:auto;min-height:24px;padding:3px 9px}
.cs-delta > span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ===== v94 iteration 2 (2026-10-03): substance, sources, clean paste ===== */
/* each answered question shows the sentence that answers it and what it adds */
.cs-ans{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r-8);background:var(--bg-4)}
.cs-ans-t{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg);text-wrap:pretty}
.cs-ans .cs-rm b{color:var(--fg-2);font-weight:var(--w-semibold)}
/* a fact's source: a link or a few words, kept with the fact */
.fc-src{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.fc-src > svg{flex:none;margin-top:2px}
.fc-src a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fc-srcb{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:var(--t-co)}
.fc-srcf input{min-width:0;flex:1 1 160px}
/* a paste never brings its look: if an older saved text still holds a style, the page's own type and colours win (dark mode never shows black on black) */
.dp-doc [style]:not([data-sg]):not(.dp-sg):not(.dp-sgi),.dp-doc font{color:inherit!important;background:none!important;background-color:transparent!important;font-family:inherit!important;font-size:inherit!important;line-height:inherit!important}
/* your own verdicts and AI answers: context lines in the Guide, never a score */
.cs-cal{display:flex;align-items:flex-start;gap:6px;margin:4px 0 6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.cs-cal > svg{flex:none;margin-top:2px}
.cs-cal b{color:var(--fg-2);font-weight:var(--w-semibold)}
.fc-ai{display:flex;align-items:flex-start;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.fc-ai > svg{flex:none;margin-top:2px}
.fc-more{align-self:flex-start;margin-top:2px}

/* ====================================================================================================================================
   iteration 3 (2026-10-03, C3-1…C3-7): one history, first-hand counts, Your tests, the reader's contract, links that exist, the a11y fixes
   ==================================================================================================================================== */
/* the history's status and "Undo accept" beside the toolbar — words, never colour alone */
.dp-hist{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap;min-width:0}
.dp-hist:empty{display:none}
/* the undo line under the toolbar: shown while it has something to say (it stays a live region for screen readers) */
.edp .dp-tools > .dp-hist.sr-only:not(:empty){position:absolute;right:32px;top:calc(100% + 6px);width:auto;height:auto;overflow:visible;clip-path:none;padding:2px 8px;border:1px solid var(--line-strong);border-radius:var(--r-6);background:var(--surface-1);color:var(--text-2);font-size:var(--t-co);line-height:var(--lh-co);pointer-events:none;z-index:4}
.dp-undo{display:inline-flex;align-items:center;gap:8px;padding:2px 8px;border:1px solid var(--ln);border-radius:var(--r-6,6px);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);background:var(--bg)}
.dp-undo[hidden]{display:none}
.dp-undo .lk{display:inline-flex;align-items:center;gap:4px}
/* the first-hand count beside the coverage counts: an evidence count, set apart by a rule and its icon */
.cs-counts .cs-fh{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:2px 8px;background:transparent;border:1px dashed var(--ln);padding:6px 9px}
@media (hover:hover){.cs-counts .cs-fh:hover{background:var(--hover)}}
.cs-counts .cs-fh svg{color:var(--fg-3);flex:none}
.cs-counts .cs-fh b{font-size:var(--t-co);line-height:var(--lh-co);white-space:nowrap;flex:none}
.cs-counts .cs-fh > span{flex:0 1 auto;min-width:0;text-align:left;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);white-space:nowrap}   /* P6 W6: "first-hand", the tile's label size */
.cs-counts .cs-fh.is-none b{color:var(--warn)}
.cs-fhl{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-fhl svg{flex:none;margin-top:2px;color:var(--warn)}
.cs-ask{display:flex;gap:6px;align-items:flex-start;margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cs-ask svg{flex:none;margin-top:2px;color:var(--fg-3)}
.cs-tests .cs-trow{padding:6px 0;border-top:1px solid var(--ln)}
.cs-tests .cs-trow:first-of-type{border-top:0}
.cs-tests .cs-trow p{margin:0;font-size:var(--t-co);line-height:var(--lh-co)}
.cs-tests .cs-trow.is-wait{padding-left:8px;border-left:2px solid var(--st-orange)}
.cs-tv{color:var(--fg-2);font-variant-numeric:tabular-nums}
.cs-tlog{display:grid;gap:8px;margin-top:6px}
.cs-tl2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cs-tlog input,.cs-tlog select{width:100%;min-width:0;height:28px;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--r-8);background:var(--surface-1);font:inherit;font-size:var(--t-co);color:var(--text-1)}   /* focus: the shared ring (no border change — the border is already --line-strong) */
.cs-contract{margin-top:10px}
/* W2: the title and the rail's fields show the shared focus ring */
/* W2 at 390: the toolbar wraps onto two rows instead of spilling; a table in the text scrolls inside its own box */
@media (max-width:600px){
  .edp.cs .dp-tools{flex-wrap:wrap;row-gap:4px;max-width:100%;overflow:visible}
  .edp.cs .dp-tools .grow{flex-basis:100%;height:0}
  .dp-doc table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* W5: "The text / What changes" and the Words filter are button groups with aria-pressed */
.seg [aria-pressed="true"]{color:var(--fg)}
/* iteration 3 (P3): in sheet mode (1100–1180 px and below) the text column is centred in its card, and the title, the people row, the excerpt
   line and the history line sit on the same column — the toolbar stays full-bleed as the card's own rule */
@media (max-width:1180px) and (min-width:601px){
  .edp.cs .dp-main > .dp-doc,.edp.cs .dp-main > .dp-title,.edp.cs .dp-main > .cs-meta,.edp.cs .dp-main > .dp-ctx,.edp.cs .dp-main > .cs-gpw,.edp.cs .dp-main > .dp-empty,.edp.cs .dp-main > .pv-leg{margin-left:auto;margin-right:auto;width:100%;max-width:592px;box-sizing:border-box}
  .edp.cs .dp-main > .cs-meta{padding-left:0;padding-right:0}
}

/* D06 (design review, 7 Oct): on a desktop the text is the centre of its card — the title, the context strip and the text share one centred
   column (the toolbar stays the card's full-width rule); the comment dots follow the column's left edge */
@media (min-width:1181px){
  .edp.cs:not(.is-focus) .dp-main > :is(.dp-doc,.dp-title,.cs-gpw,.dp-empty,.pv-leg){margin-left:auto;margin-right:auto}
  .edp.cs:not(.is-focus) .dp-main > .dp-ctx{max-width:536px;width:calc(100% - 80px);margin-left:auto;margin-right:auto}
  .edp.cs:not(.is-focus) .dp-main > .cm-dots{left:max(0px,calc(50% - 308px))}
}
@media (min-width:1181px) and (max-width:1320px){.edp.cs:not(.is-focus) .dp-main > .cm-dots{left:max(0px,calc(50% - 296px))}}
/* night build (C5): a state's title is the page's h1 (pages/lpages.js stateH1 · lhealth.js · lexperience.js record states) — it keeps the card title's look */
.empty-t > .empty-h{font:inherit;color:inherit;letter-spacing:inherit;text-wrap:balance}
/* fixer r1: a state's "more" link (moreLink inside emptyState) reads as the state's action — the label and its chevron on one line, as .empty-a */
.empty > a.more{display:inline-flex;align-items:center;gap:3px;margin:8px 0 0;padding:3px 8px;border-radius:var(--r-full);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--link);white-space:nowrap}
@media (hover:hover){.empty > a.more:hover{background:var(--hover)}}
/* P5 fix: the seven approval fields at the top of a Website approval sheet (Health › Review and deploy, Pages › Insert) — two columns in the sheet's width */
.ap-facts.hx-apv{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0 0 4px}
.ap-facts.hx-apv .fd-k{white-space:normal}
/* P5 fix (Experience): a block's source is a muted caption beside its title — no separator dot that starts a wrapped line */
.ex-h3 > .ex-src{font-weight:var(--w-regular);color:var(--fg-3)}
.ex-blk > .ex-h3:has(> .ex-src){column-gap:10px}
/* P5 fix (Pages at 390): two views and More fit the row whole — the counted tabs ("All 1,842", "Key pages 50") are wider than Health's */
@media (max-width:640px){.wx .pl-bar > .pl-tabs{column-gap:20px}}
/* P6 W3 (Safe fixes): the rule's 8 terms fold under "The rule's terms", between the totals and the approval line; at phone width it keeps that place */
.fx-card > .fx-terms{margin:10px 0 0}
.fx-card > .fx-terms > .rl-flow{margin-top:4px}
@media (max-width:640px){.fx-card > .fx-terms{order:5}}
/* P6 W4 (Autopilot run history): who read the article before it went live — a quiet line under what happened; "Not opened" is said, not hidden */
.rl-sc > .rl-read{display:flex;align-items:center;gap:5px;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3)}
.rl-sc > .rl-read > svg{flex:none;color:var(--fg-4)}
.rl-sc > .rl-read.is-none{color:var(--fg-2)}
/* P6 W5 (What to do next): line 1 the reason, line 2 the numbers; the goal a small neutral chip; the stake in ONE column before the button */
.cn-next .cn-sub > .cn-l1,.cn-next .cn-sub > .cn-l2{display:block}
.cn-next .mn-g .u .cn-l1 > b{font-weight:var(--w-medium);color:var(--fg-2)}
.cn-goal{display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 7px;border:1px solid var(--ln-2);border-radius:999px;font-size:var(--t-sh);line-height:16px;color:var(--fg-3);white-space:nowrap;vertical-align:1px}
.cn-l1 > .cn-goal:first-child{margin-left:0}
.cn-next .cn-act{display:grid;grid-template-columns:200px 176px;align-items:center;column-gap:16px}
.cn-next .cn-act > :last-child{justify-self:end}
.cn-skc{display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.cn-skl{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3)}
.cn-skv{font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
@media (max-width:1320px){.cn-next .cn-act{grid-template-columns:168px 164px;column-gap:12px}}
@media (max-width:900px){
  .cn-next .cn-act{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .cn-next .cn-act > :last-child{flex:none}
  .cn-skc{flex:1 1 0;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px;text-align:left}
  .cn-skc:empty{display:none}
}
@media (max-width:640px){.cn-next .cn-sub > .cn-l2,.cn-next .cn-goal{display:none}}
/* P6 W6 (editor Coverage card): the First-hand count is the fifth tile on the counts row — "1/4 first-hand", its icon on the number line, set apart by its
   dashed edge; each tile sized to its words so the row never wraps in the 306px rail */
.cs-counts.has-fh{display:flex;gap:4px}
.cs-counts.has-fh > .cs-ct{flex:1 1 auto;padding-left:6px;padding-right:6px}
.cs-counts.has-fh > .cs-fh{grid-column:auto;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:1px;padding:6px 5px 5px}
.cs-counts .cs-fh > b{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-body);line-height:var(--lh-body)}
.cs-counts .cs-fh > b > svg{color:var(--fg-3)}
.cs-counts .cs-fh.is-none > b > svg{color:var(--warn)}
.cs-counts.has-fh > .cs-ct > span{white-space:nowrap}
/* P6 W7 (Documents): every coverage cell says where it sits against the aim on a second line; "below the aim" reads a step brighter */
.cn-cov.is-below .cn-cov-ex{color:var(--fg-2)}
/* P6 W8 (Experience · a stuck point): the current state in one line under the summary, with a link down to how it is judged */
.ex-state{display:flex;align-items:flex-start;column-gap:6px;margin:8px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ex-state > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ex-state > span{flex:1 1 auto;min-width:0}
.ex-state b{font-weight:var(--w-semibold);color:var(--fg)}
.ex-state.is-measuring > svg{color:var(--c-teal)}
.ex-state.is-waiting > svg{color:var(--warn)}
.ex-state .ex-state-lk{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:bottom}
/* P6 W16 (Experience funnels): the share against the 28 days before — "61% · was 66%" with "was" grey, then the gate's word */
.ex-keep.has-was{grid-template-columns:minmax(36px,120px) auto auto minmax(0,1fr);column-gap:0}
.ex-keep.has-was > i{margin-right:8px}
.ex-keep > .ex-was{color:var(--fg-3);white-space:nowrap}
.ex-keep > .ex-gw2{margin-left:10px;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ex-keep > .ex-gw2.is-real{color:var(--fg-2)}
@media (max-width:760px){.ex-keep.has-was{grid-template-columns:minmax(24px,60px) auto auto;row-gap:2px}.ex-keep > .ex-gw2{grid-column:1 / -1;margin-left:0}}
/* P6 W17 (Pages by type): the trailing chevron of a row that opens */
.wx-types .tbl-r > .wx-chev{display:flex;align-items:center;justify-content:flex-end;align-self:center;padding-top:0;color:var(--fg-4)}
@media (max-width:900px){.wx-types .tbl-r > .wx-chev{display:none}}
/* P6 W20 (Autopilot run history): the four verdicts as quick filters in one quiet line; "Show all N" keeps its chevron on its line */
.rl-vline{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;margin:4px 0 6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.rl-vline .rl-vsep{color:var(--fg-4)}
.rl-vline .rl-vchip{min-height:24px;color:var(--fg-2);font-variant-numeric:tabular-nums}
@media (hover:hover){.rl-vline .rl-vchip:not(:disabled):hover{color:var(--fg)}}
.rl-vline .rl-vchip.is-on{color:var(--fg);font-weight:var(--w-semibold)}
.rl-vline .rl-vchip:disabled{color:var(--fg-4);cursor:default}
.rl-hist .rl-all{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}