/* review-room.css — the review room (/reviewroom/<room>) and the room list (/reviewroom/).
 * Neutral on purpose: the room frames other people's pages, so its chrome carries
 * no brand of its own. One blue for actions; every status is a color, an icon and
 * a word. Tokens first, a dark set after. */
:root{
  --paper:#F4F4F1; --surface:#FFFFFF; --sunk:#EDEDE8; --ink:#17191F; --ink-2:#4A4F5C; --ink-3:#6E7381; --line:#E0E0DA; --line-2:#CFCFC8;
  --blue:#2F5BD8; --blue-ink:#FFFFFF; --blue-soft:#E7EDFD; --mark:rgba(255,214,64,.55);
  --ok:#1D8455; --ok-soft:#E3F3EA; --warn:#B85A08; --warn-soft:#FBEBDC; --late:#BF3629; --late-soft:#FBE4E1; --no:#6B7080; --no-soft:#ECEDF0;
  --shadow:0 10px 30px -12px rgba(20,24,36,.35);
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark; --paper:#111317; --surface:#1A1D23; --sunk:#15171C; --ink:#ECEDEF; --ink-2:#AEB3BE; --ink-3:#8A909C; --line:#2B2F37; --line-2:#3A3F49;
  --blue:#7D9CF4; --blue-ink:#0E1426; --blue-soft:#1D2644; --mark:rgba(255,214,64,.42);
  --ok:#52C48E; --ok-soft:#15291F; --warn:#F2A35A; --warn-soft:#2F2113; --late:#F2786C; --late-soft:#321A18; --no:#9095A3; --no-soft:#23262D;
  --shadow:0 12px 32px -10px rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
.ic{width:16px;height:16px;flex:none}
.mono{font-family:var(--mono);font-size:12px}
.hint{font-size:12.5px;color:var(--ink-3)}
.kbd{font:500 11px/1 var(--mono);padding:2px 5px;border-radius:4px;border:1px solid currentColor;opacity:.6}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--blue);display:inline-block;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.boot{display:flex;gap:10px;align-items:center;justify-content:center;height:100%;color:var(--ink-3)}

.app{height:100%;display:grid;grid-template-rows:auto 1fr;min-height:0}

/* ── buttons and chips ── */
.tb{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:5px 9px;font-size:13px;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink)}
.tb:hover{background:var(--sunk)}
.tb .car{color:var(--ink-3);width:14px;height:14px;margin-left:-2px;transition:transform .15s}
.tb[aria-expanded="true"] .car{transform:rotate(180deg)}
.tb.primary{background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.tb.primary:hover{filter:brightness(1.06);background:var(--blue)}
.tb.danger{color:var(--late)}
.tb:disabled{opacity:.5}
.tb.sm{padding:3px 8px;font-size:12px}
.ib{border:0;background:transparent;border-radius:7px;padding:6px;color:var(--ink-2);display:grid;place-items:center}
.ib:hover{background:var(--sunk)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:5px 9px;display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:500;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.chip{display:inline-flex;gap:5px;align-items:center;border-radius:999px;padding:2px 9px 2px 7px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;background:transparent}
.chip .ic{width:13px;height:13px}
button.chip .car{width:12px;height:12px;opacity:.8}
.st-open{background:var(--blue-soft);color:var(--blue)}
.st-ok{background:var(--ok-soft);color:var(--ok)}
.st-warn{background:var(--warn-soft);color:var(--warn)}
.st-no{background:var(--no-soft);color:var(--no)}
.st-late{background:var(--late-soft);color:var(--late)}
.st-draft{color:var(--ink-2);border:1px dashed var(--line-2)}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;border:2px solid var(--surface);flex:none;text-transform:uppercase}
.who{display:flex;align-items:center}
.who .av+.av{margin-left:-7px}

/* ── header ── */
.rh{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:30}
.crumb{display:flex;align-items:center;gap:8px;min-width:0;margin-right:auto}
.crumb a{color:inherit;text-decoration:none}
.crumb a.logo{color:var(--surface)}
.logo{width:26px;height:26px;border-radius:7px;background:var(--ink);color:var(--surface);display:grid;place-items:center;flex:none}
.logo .ic{width:15px;height:15px}
.crumb b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb .sep{color:var(--ink-3)}
.me{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-2);padding:3px 8px 3px 3px;border-radius:999px;background:var(--sunk);border:0}
.me .av{width:22px;height:22px;font-size:10px;border:0}

/* ── body: stage + panel ── */
.body{display:grid;grid-template-columns:1fr auto;min-height:0;position:relative}
.stage{position:relative;min-height:0;background:var(--sunk);display:grid;grid-template-rows:auto 1fr auto 0}
/* A two-finger swipe on a trackpad is the browser's Back: in a room it would throw away what's open. */
html,body{overscroll-behavior-x:none}
#banner{grid-row:1;min-width:0} #frames{grid-row:2} #barwrap{grid-row:4}
.frame>.fbar{grid-row:1} .frame>.viewport{grid-row:2}
.banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 12px;font-size:13px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.banner b{color:var(--ink)}
.banner .grow{flex:1;min-width:200px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.banner .grow.all{-webkit-line-clamp:unset}
.banner input{border:1px solid var(--line-2);border-radius:7px;padding:4px 8px;background:var(--surface);min-width:220px;font-size:13px}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.frames{min-height:0;display:grid;gap:10px;padding:10px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}
.frame{min-height:0;min-width:0;display:grid;grid-template-rows:auto 1fr;border-radius:8px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface)}
.fbar{display:flex;gap:8px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-3);min-width:0}
.fbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar select{font-size:12.5px;padding:3px 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);max-width:60%}
.fbar a{margin-left:auto;display:inline-flex;color:var(--ink-3)}
.viewport{position:relative;min-height:0;overflow:hidden;background:repeating-linear-gradient(45deg,var(--sunk) 0 8px,var(--paper) 8px 16px)}
.viewport iframe{position:absolute;top:0;left:50%;border:0;background:#fff;transform-origin:top center}
.viewport.wide{overflow-x:auto;overflow-y:hidden}
/* A page wider than its frame always shows its scrollbar (macOS hides overlay ones until you scroll). */
.viewport.wide::-webkit-scrollbar{height:12px}
.viewport.wide::-webkit-scrollbar-track{background:var(--sunk)}
.viewport.wide::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 32%,transparent);border-radius:6px;border:3px solid var(--sunk)}
.viewport.wide::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
@supports not selector(::-webkit-scrollbar){.viewport.wide{scrollbar-width:thin;scrollbar-color:var(--line-2) var(--sunk)}}
.zsizer{position:absolute;top:0;left:0;height:1px;pointer-events:none}
.frames{position:relative}
/* Zoom: a slider in the stage's corner, as in Canva */
.zoomer{position:absolute;right:18px;bottom:18px;z-index:15;display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);color:var(--ink)}
.zoomer.left{right:auto;left:18px}
.zoomer .zb{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--ink-2);cursor:pointer}
.zoomer .zb:hover{background:var(--sunk);color:var(--ink)}
.zoomer .zb svg{width:16px;height:16px}
.zoomer input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:4px;margin:0 6px;border-radius:2px;background:linear-gradient(to right,var(--ink-2) var(--p,40%),var(--line-2) var(--p,40%));cursor:pointer}
.zoomer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.zoomer input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
.zoomer .zpct{min-width:58px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:600 12.5px/1 inherit;font-variant-numeric:tabular-nums;padding:8px 6px;cursor:pointer;white-space:nowrap}
.zoomer .zpct:hover{background:var(--sunk)}
.app.reading .zoomer{opacity:.35;transition:opacity .2s} .app.reading .zoomer:hover{opacity:1}
@media (max-width:700px){.zoomer input[type=range]{width:72px}}
/* Customers on a phone read the page at fit: the zoom box only covers it. */
@media (max-width:480px){.app.cust .zoomer{display:none}}
.empty-stage{display:grid;place-items:center;text-align:center;padding:24px;color:var(--ink-2);gap:10px;align-content:center}
.empty-stage h2{font-size:18px;color:var(--ink)}
.empty-stage.in-frame{position:absolute;inset:0;background:var(--surface)}

/* ── the review bar: full / mini / collapsed ── */
.rbar{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:var(--ink);color:var(--surface);box-shadow:var(--shadow);max-width:calc(100% - 24px)}
.rbar button{border:0;background:transparent;color:inherit;display:inline-flex;gap:6px;align-items:center;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap}
.rbar button:hover{background:color-mix(in srgb,var(--surface) 14%,transparent)}
.rbar button[aria-pressed="true"]{background:var(--surface);color:var(--ink)}
.rbar .cnt{font:600 11px/1 var(--mono);padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--surface) 18%,transparent)}
.rbar button[aria-pressed="true"] .cnt{background:var(--sunk)}
.rbar .sep{width:1px;align-self:stretch;margin:4px 3px;background:color-mix(in srgb,var(--surface) 22%,transparent)}
.rbar .vname{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.fab{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;display:inline-flex;gap:6px;align-items:center;border:0;border-radius:999px;background:var(--ink);color:var(--surface);padding:9px 12px;box-shadow:var(--shadow);font-weight:600;font-size:13px}

/* ── the panel ── */
.panel{width:var(--pw,380px);border-left:1px solid var(--line);background:var(--surface);display:grid;grid-template-rows:auto auto 1fr;min-height:0;position:relative}
.panel.with-composer{width:var(--pw,480px)}
.ph{display:flex;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:2px;margin-right:auto}
.tabs button{border:0;background:transparent;padding:6px 9px;border-radius:7px;font-weight:600;font-size:13px;color:var(--ink-3);display:inline-flex;gap:6px;align-items:center}
.tabs button[aria-selected="true"]{background:var(--sunk);color:var(--ink)}
.filters{display:flex;gap:6px;flex-wrap:wrap;padding:9px 10px;border-bottom:1px solid var(--line)}
.filters button{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:500;color:var(--ink-2);display:inline-flex;gap:5px;align-items:center}
.filters button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.list{overflow:auto;min-height:0;padding:10px;display:grid;gap:8px;align-content:start;padding-bottom:80px}
.card{border:1px solid var(--line);border-radius:10px;padding:10px 11px;display:grid;gap:7px;background:var(--surface)}
.card.hot{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.card.lost{border-style:dashed}
.ctop{display:flex;gap:8px;align-items:center;min-width:0}
.ctop .n{width:22px;height:22px;border-radius:50% 50% 50% 4px;display:grid;place-items:center;font:700 11px/1 var(--sans);color:#fff;flex:none;background:#2F5BD8}
.ctop .n.st-ok{background:#1D8455}.ctop .n.st-no{background:#6B7080}.ctop .n.st-late{background:#BF3629}
.ctop b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctop time{font-size:12px;color:var(--ink-3);margin-right:auto;white-space:nowrap}
.quote{font-size:12.5px;color:var(--ink-2);border-left:3px solid var(--mark);padding:1px 0 1px 8px;max-height:4.6em;overflow:hidden}
.quote.area{border-left-color:var(--line-2);display:flex;gap:6px;align-items:center}
.sugg{font-size:13px;border-left:3px solid var(--ok);padding:1px 0 1px 8px}
.sugg small{display:block;color:var(--ink-3);font-size:11.5px}
.cbody{font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.meta{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.meta .m{display:inline-flex;gap:4px;align-items:center;font-size:12px;color:var(--ink-3)}
.meta .m .ic{width:13px;height:13px}
.meta .m.late{color:var(--late);font-weight:600}
.meta select,.meta input{font-size:12px;border:1px solid var(--line-2);border-radius:6px;padding:2px 5px;background:var(--surface);color:var(--ink-2)}
.meta .push{margin-left:auto}
.lostnote{font-size:12px;color:var(--warn)}
.sentk{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);margin:0}
.sentk.ok{color:var(--ok)}
.sentk.bad{color:var(--late)}
.sentk svg{width:14px;height:14px;flex:none}
.sendrow{display:flex}
.list .away{display:flex;gap:4px;align-items:center;font-size:12.5px;padding:4px 2px}
.replies{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:7px}
.rtog{border:0;background:transparent;padding:0;font-size:12.5px;font-weight:600;color:var(--ink-2);display:inline-flex;gap:4px;align-items:center;justify-self:start}
.rtog .ic{transition:transform .15s}
.rtog[aria-expanded="true"] .ic{transform:rotate(90deg)}
.reply{font-size:13px;display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:start}
.reply .av{width:20px;height:20px;font-size:9.5px;border:0}
.reply b{font-size:12.5px}
.reply p{white-space:pre-wrap;overflow-wrap:anywhere}
.rform{display:grid;gap:6px;grid-column:1/-1}
.rform textarea{width:100%;min-height:56px;resize:vertical;border:1px solid var(--line-2);border-radius:8px;padding:7px 9px;background:var(--surface);line-height:1.5}
.empty{padding:22px 12px;text-align:center;color:var(--ink-3);font-size:13px;display:grid;gap:10px;justify-items:center}
.more{font-size:12.5px;color:var(--ink-3);padding:4px 2px}
.vcard{border:1px solid var(--line);border-radius:10px;padding:10px 11px;display:grid;gap:6px}
.vcard.cur{border-color:var(--ink)}
.vtop{display:flex;gap:8px;align-items:center}
.vtop b{margin-right:auto}
.vsub{font-size:12px;color:var(--ink-3);display:flex;gap:4px 10px;flex-wrap:wrap}
.vacts{display:flex;gap:6px;flex-wrap:wrap}
.vcard .cbody{font-size:13px;color:var(--ink-2)}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line)}
.prow small{display:block;color:var(--ink-3);font-size:12px}
.prow select{font-size:12.5px;border:1px solid var(--line-2);border-radius:6px;padding:3px 6px;background:var(--surface)}
.pform{display:grid;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:6px}
.pform input,.pform select{border:1px solid var(--line-2);border-radius:7px;padding:6px 8px;background:var(--surface);font-size:13px;width:100%}
.pform .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pform .row>*{flex:1;min-width:120px}

/* ── menus, composer, dialogs, toasts ── */
.menu{position:fixed;z-index:60;min-width:250px;max-width:min(360px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px}
.menu .mh{font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:8px 8px 4px}
.menu .mh .sub{text-transform:none;letter-spacing:0}
.menu .mi.static{cursor:default}
.menu .mi.static:hover{background:none}
.menu .mi{border:0;background:transparent;text-align:left;padding:7px 8px;border-radius:7px;display:grid;grid-template-columns:18px 1fr auto;gap:2px 9px;align-items:center;font-size:13px;color:var(--ink)}
.menu .mi:hover{background:var(--sunk)}
.menu .mi:disabled{opacity:.45;background:transparent}
.menu .mi small{grid-column:2/4;color:var(--ink-3);font-size:11.5px}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.menu .pad{padding:4px 8px 8px}
.menu input[type=date]{border:1px solid var(--line-2);border-radius:7px;padding:5px 8px;background:var(--surface)}
.pop{position:fixed;z-index:50;width:min(380px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:12px;display:grid;gap:10px}
.pop.big{width:min(600px,calc(100vw - 24px))}
.pop .head{display:flex;gap:8px;align-items:center;min-width:0}
.pop .head b{white-space:nowrap}
.pop .head .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.pop textarea{width:100%;min-height:110px;resize:vertical;border:1px solid var(--line-2);border-radius:8px;padding:9px 10px;background:var(--surface);line-height:1.55}
.pop.big textarea{min-height:260px}
.pop .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pop select,.pop input[type=date]{border:1px solid var(--line-2);border-radius:7px;padding:4px 7px;background:var(--surface);font-size:12.5px}
.pop .push{margin-left:auto}
.pop label.inline{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(15,17,22,.45);display:grid;place-items:center;padding:16px}
.dialog{width:min(500px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:18px;display:grid;gap:12px}
.dialog label{display:grid;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.dialog input,.dialog textarea,.dialog select{border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;background:var(--surface);font-size:14px;font-weight:400;color:var(--ink)}
.dialog textarea{min-height:90px;resize:vertical}
.dialog .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dialog p{color:var(--ink-2);font-size:13.5px}
.dialog ol.steps{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--ink-2);font-size:13px}
.dialog pre{background:var(--sunk);border-radius:8px;padding:10px;overflow:auto;font:12px/1.5 var(--mono);white-space:pre-wrap}
.dialog .err{color:var(--late);font-size:13px}
.toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;box-shadow:var(--shadow);display:inline-flex;gap:7px;align-items:center;max-width:calc(100vw - 24px)}
.toast.bad{background:var(--late);color:#fff}
/* Comment stays in reach: beside the counts when the bar is collapsed, in the notes list, in a toast's next step */
.fabs{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:8px;align-items:center}
.fabs .fab{position:static}
#barwrap[class^="dock-t"] .fabs,#barwrap[class*=" dock-t"] .fabs{top:14px;bottom:auto}
#barwrap.dock-tl .fabs,#barwrap.dock-bl .fabs{left:16px;right:auto}
.fab.fabc{background:var(--blue);color:var(--blue-ink)}
.fab.fabc[aria-pressed="true"]{box-shadow:0 0 0 3px var(--blue-soft)}
.nhead select{margin-left:auto;min-width:0;flex:0 1 auto}
.nhead .addnote{flex:none}
.toast .tb{margin-left:4px;border-radius:999px;background:rgba(255,255,255,.14);border-color:transparent;color:inherit}
.toast .tb:hover{background:rgba(255,255,255,.24)}

/* ── sign-in and the room list ── */
.center{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.card-lg{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px;display:grid;gap:14px}
.card-lg h1{font-size:22px}
.card-lg p{color:var(--ink-2)}
.card-lg form{display:grid;gap:8px}
.card-lg input{border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;background:var(--surface);font-size:14px}
.card-lg .tb{justify-content:center;padding:9px 12px;font-size:14px}
.or{display:flex;gap:10px;align-items:center;color:var(--ink-3);font-size:12px}
.or::before,.or::after{content:"";height:1px;background:var(--line);flex:1}
.page{max-width:920px;margin:0 auto;padding:28px 16px 64px;display:grid;gap:18px;align-content:start}
.page header{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.page header h1{font-size:24px;margin-right:auto}
.rooms{display:grid;gap:8px}
.rrow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.rrow:hover{border-color:var(--line-2)}
.rrow small{color:var(--ink-3);font-size:12.5px}
.rrow .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

@media (max-width:860px){
  .panel{position:absolute;inset:auto 0 0 0;width:auto;height:62%;border-left:0;border-top:1px solid var(--line-2);z-index:25;box-shadow:var(--shadow);border-radius:12px 12px 0 0}
  .body.bar-full .rbar{bottom:calc(62% + 10px)}
  .rbar .lbl,.rbar .vname{display:none}
  .frames{grid-auto-flow:row}
  .hide-sm{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── joining a public room ── */
.join{justify-items:stretch;text-align:left;padding:16px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2)}
.join>.ic{width:22px;height:22px;color:var(--blue)}
.join b{color:var(--ink);font-size:15px}
.join textarea{width:100%;min-height:70px;resize:vertical;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;background:var(--surface)}
.join .tb{justify-content:center}
.joinmail{display:flex;gap:6px;flex-wrap:wrap}
.joinmail input{flex:1;min-width:160px;border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;background:var(--surface)}
.dialog .join{border:0;padding:0}

/* ── focus: the page and the notes, nothing else ── */
.app.focus{grid-template-rows:1fr}
.app.focus .rh,.app.focus #banner{display:none}
.app.focus .frames{padding:0;gap:2px;background:var(--line-2)}
.app.focus .frame{border:0;border-radius:0}
.app.focus .frame .fbar{display:none}
.app.focus .frames:has(.frame + .frame) .fbar{display:flex;position:absolute;z-index:5;margin:8px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}
.app.focus .frame{position:relative}
.app.focus .viewport{background:var(--sunk)}
.app.focus .panel{width:var(--pw,340px)}
.app.focus .panel.with-composer{width:var(--pw,480px)}
.app.focus .ph .tabs button{cursor:default}
.rbar .navc{font:600 12px/1 var(--mono);padding:0 2px;min-width:34px;text-align:center}
.rbar .navc small{opacity:.6;font-size:11px}
.app.focus.on-draft #banner{display:block}

/* ── the bar's spot: six presets (#barwrap.dock-xx), dragged or picked ── */
#barwrap .rbar{left:auto;right:auto;top:auto;bottom:auto;transform:none}
#barwrap.dock-bc .rbar{left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}
#barwrap.dock-bl .rbar{left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#barwrap.dock-br .rbar{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#barwrap.dock-tc .rbar{left:50%;top:14px;transform:translateX(-50%)}
#barwrap.dock-tl .rbar{left:14px;top:14px}
#barwrap.dock-tr .rbar{right:14px;top:14px}
#barwrap.dock-bc .rbar.dragging,#barwrap.dock-tc .rbar.dragging{translate:-50% 0}
.rbar.dragging{opacity:.85;cursor:grabbing;transition:none}
.rbar{transition:left .18s,right .18s,top .18s,bottom .18s}
.rbar .grip{padding:7px 3px;cursor:grab;opacity:.65;touch-action:none}
.rbar .grip:hover{opacity:1}
#barwrap[class^="dock-t"] .fab,#barwrap[class*=" dock-t"] .fab{top:14px;bottom:auto}
#barwrap.dock-tl .fab,#barwrap.dock-bl .fab{left:16px;right:auto}
.dockmenu{min-width:200px}
.dockgrid{display:grid;grid-template-columns:repeat(3,48px);gap:6px;padding:4px 8px 6px}
.dockgrid button{height:34px;border:1px solid var(--line-2);border-radius:7px;background:var(--sunk);position:relative;padding:0}
.dockgrid button i{position:absolute;width:18px;height:5px;border-radius:3px;background:var(--ink-3);left:50%;transform:translateX(-50%)}
.dockgrid button:nth-child(-n+3) i{top:5px}.dockgrid button:nth-child(n+4) i{bottom:5px}
.dockgrid button:nth-child(3n+1) i{left:6px;transform:none}.dockgrid button:nth-child(3n) i{left:auto;right:6px;transform:none}
.dockgrid button.on{border-color:var(--blue);background:var(--blue-soft)}.dockgrid button.on i{background:var(--blue)}
@media (max-width:860px){.body.bar-full #barwrap[class^="dock-b"] .rbar{bottom:calc(62% + 10px)}}
.app.dragging-bar iframe{pointer-events:none}

/* ── Claude: the studio tab ── */
.panel.with-composer{grid-template-rows:auto auto 1fr auto}
.turns{padding-bottom:16px}
.turn{display:grid;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.turn:last-child{border-bottom:0}
.tq,.ta{display:grid;gap:6px}
.th{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.th .av{width:24px;height:24px;border:0}
.tq p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.tq p{color:var(--ink)}
.ta .logo{width:26px;height:26px;background:var(--blue-soft);color:var(--blue)}
.ta .say{color:var(--ink);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.say p{margin:0 0 10px}
.say p:last-child{margin-bottom:0}
.say ol,.say ul{margin:0 0 10px;padding-left:22px;display:grid;gap:6px}
.say code{font:12.5px var(--mono);background:var(--sunk);border-radius:4px;padding:1px 4px}
.turns{position:relative}
.pgrip{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:5}
.pgrip:hover,.dragging-bar .pgrip{background:linear-gradient(90deg,transparent 4px,var(--blue) 4px,var(--blue) 6px,transparent 6px)}
.ta .chip .spin{width:11px;height:11px;border-width:1.5px}
.ta details{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.ta summary{cursor:pointer}
.steps{margin:6px 0 0;padding-left:18px;display:grid;gap:2px;font-family:var(--mono);font-size:11.5px;overflow-wrap:anywhere}
.ta .vacts{margin-top:8px}
.composer{display:grid;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--surface)}
.composer textarea{width:100%;min-height:74px;max-height:40vh;resize:vertical;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;background:var(--surface)}
.composer .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.composer .push{margin-left:auto}
.composer .ctip{margin:0;font-size:11.5px;line-height:20px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer .ctip .kbd{display:inline-block;padding:0 4px;margin-right:2px;font-size:10.5px;line-height:15px;vertical-align:1px}
@container (max-width:360px){.composer .attach .tl{display:none}}
.filters .hint.where{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.turns > .asks{margin:0 0 10px}
.atts{display:flex;flex-wrap:wrap;gap:6px}
.atts .chip button{border:0;background:transparent;padding:0;margin-left:2px;display:grid;place-items:center;color:inherit}
.atts .chip button .ic{width:12px;height:12px}
.card .tb[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.pform textarea{border:1px solid var(--line-2);border-radius:7px;padding:6px 8px;background:var(--surface);font-size:13px;width:100%;min-height:80px;resize:vertical}

/* ── Claude at work: four steps, a clock, a moving bar ── */
.work{display:grid;gap:10px;justify-items:start;margin-top:8px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.work.big{justify-items:center;text-align:center;margin:0;padding:28px 24px;border:0;background:transparent;max-width:520px;gap:14px}
.work.big h2{font-size:20px;color:var(--ink)}
.work.big p{color:var(--ink-2)}
.wsteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-3)}
.wsteps li{display:inline-flex;align-items:center;gap:6px}
.wsteps li i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-2);display:inline-block}
.wsteps li.done{color:var(--ok)}
.wsteps li.done .ic{width:13px;height:13px}
.wsteps li.now{color:var(--blue);font-weight:600}
.wsteps li.now .spin{width:12px;height:12px;border-width:2px}
.work.big .wsteps{justify-content:center;font-size:13.5px}
.wbar{width:100%;height:4px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.wbar b{position:absolute;inset:0 auto 0 0;width:38%;border-radius:99px;background:var(--blue);animation:wslide 1.5s ease-in-out infinite}
@keyframes wslide{0%{left:-40%}100%{left:100%}}
.wnow{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--ink-2);min-width:0;max-width:100%}
.wnow .mono{color:var(--blue);font-weight:600}
.wnow .wtext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orb{position:relative;width:64px;height:64px;display:grid;place-items:center;color:var(--blue)}
.orb .ic{width:26px;height:26px;position:relative;animation:wpulse 1.6s ease-in-out infinite}
.orb span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);opacity:0;animation:wring 2.4s ease-out infinite}
.orb span:nth-child(2){animation-delay:.8s}
.orb span:nth-child(3){animation-delay:1.6s}
@keyframes wring{0%{transform:scale(.45);opacity:.55}100%{transform:scale(1.15);opacity:0}}
@keyframes wpulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(12deg)}}
.frame.working .viewport::before{content:"";position:absolute;z-index:3;top:0;left:0;height:3px;width:30%;background:var(--blue);border-radius:0 3px 3px 0;animation:wslide 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.wbar b,.orb span,.orb .ic,.frame.working .viewport::before{animation:none}.wbar b{width:100%;opacity:.5}}
.work:not(.big) .wsteps{gap:4px 10px;font-size:12px}

/* ── Review: what changed, your decision, sign-off ── */
.rv{gap:0}
.rv-v{font-weight:650}
.rv-sec{display:grid;gap:8px;padding:12px 2px;border-bottom:1px solid var(--line)}
.rv-sec:last-child{border-bottom:0}
.rv-sec h4{margin:0;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:6px;align-items:baseline}
.rv-sec h4 small{text-transform:none;letter-spacing:0;font-weight:500}
.rv-btns{display:grid;gap:8px}
.rv-btns .tb{justify-content:center;padding:10px 12px;font-size:14px;font-weight:600}
.rv-mine{display:flex;gap:8px;align-items:flex-start;padding:10px 11px;border-radius:10px;font-size:13px}
.rv-mine span{flex:1;color:var(--ink)}
.rv-form{display:grid;gap:8px}
.rv-form textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;background:var(--surface)}
.rv-form .row{display:flex;gap:8px;align-items:center}
.rv-form .push{margin-left:auto}
.chgs{display:grid;gap:6px}
.chg{display:grid;gap:4px;text-align:left;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--surface);font-size:13px;color:var(--ink)}
.chg:not(:disabled):hover{border-color:var(--line-2);background:var(--sunk)}
.chg:disabled{cursor:default;opacity:.85}
.chg.hot{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.chg .chip{justify-self:start}
.chg .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chg .was{font-size:12px;color:var(--ink-3);text-decoration:line-through;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-need{text-align:left;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--surface);font-size:13px;color:var(--ink-2)}
.rv-need b{color:var(--ink)}
.rv-who{display:flex;gap:8px;align-items:center;font-size:13px}
.rv-who span:nth-child(2){flex:1}
.rv .cnt{font-size:11px}
@media (max-width:860px){.app.focus .panel{width:auto}}

@media (max-width:860px){.panel.with-composer,.app.focus .panel.with-composer{width:auto}.pgrip{display:none}}

/* ── The calm room: a quiet header, one next step, notes that open when picked ── */
.crumb .sp{color:var(--ink-3);font-size:13px;white-space:nowrap}
.rtitle{display:inline-flex;gap:8px;align-items:center;border:0;background:transparent;padding:4px 6px;border-radius:8px;min-width:0;color:var(--ink)}
.rtitle:hover,.rtitle[aria-expanded="true"]{background:var(--sunk)}
.rtitle b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtitle .car{color:var(--ink-3);width:14px;height:14px}
.rh .cnt,.nhead .cnt,.chgsec .cnt{font:600 11px/1 var(--mono);padding:3px 6px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.frame.bare>.fbar{display:none}
.nextwrap{display:block;padding:12px}
.next{display:grid;gap:10px;padding:12px 13px;border-radius:12px;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent)}
.next.done.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.next.done.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.nx-h{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.nx-h>.ic,.nx-h>.spin{margin-top:2px;color:var(--blue)}
.next.done.ok .nx-h>.ic{color:var(--ok)} .next.done.warn .nx-h>.ic{color:var(--warn)}
.nx-h b{display:block;font-size:14.5px;line-height:1.35;color:var(--ink)}
.nx-h small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.nx-a{display:flex;gap:8px;flex-wrap:wrap}
.nx-a .tb{padding:7px 12px;font-size:13.5px}
.next .rv-form textarea{background:var(--surface)}
.next .work{background:var(--surface)}
.nhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 2px}
.nhead b{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.nhead select{border:1px solid var(--line-2);border-radius:8px;padding:4px 8px;background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.chgsec{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:8px}
.chgsec[open]{gap:8px}
.chgsec summary{list-style:none;cursor:pointer;display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:var(--ink)}
.chgsec summary::-webkit-details-marker{display:none}
.chgsec summary .ic{width:14px;height:14px;color:var(--ink-3);transition:transform .15s}
.chgsec[open] summary .ic{transform:rotate(90deg)}
.card{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.card:hover{border-color:var(--line-2)}
.card.hot{cursor:default}
.card .quiet{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.card .quiet span{display:inline-flex;gap:4px;align-items:center}
.card .quiet .ic{width:12px;height:12px}
.card .quiet .late{color:var(--late)} .card .quiet .att{color:var(--blue)}
.card .meta .push{margin-left:auto}
.empty.sm{padding:14px 8px;display:block}
.linkish{border:0;background:transparent;color:var(--blue);padding:0;font-size:12.5px;font-weight:500;display:inline-flex;gap:5px;align-items:center;justify-self:start}
.linkish .ic{width:13px;height:13px}
.dialog.wide{width:min(620px,100%);padding:0;gap:0}
.dialog .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.dialog .dscroll{padding:14px 16px;overflow:auto;max-height:calc(100vh - 120px);display:grid;gap:8px}
.crumb{flex:1 1 auto;min-width:0}
.rtitle{min-width:0;max-width:100%}
.rtitle b{min-width:0}
@media (max-width:860px){.rh{flex-wrap:nowrap}.rtitle .chip{display:none}}
.app{grid-template-columns:minmax(0,1fr)}
.rh{min-width:0}
.rtitle{overflow:hidden;flex:0 1 auto}
/* ── Claude runners, on the rooms list ── */
.runners{margin-top:28px;display:grid;gap:8px}
.sites{margin:0 0 22px}.sites-d{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);display:grid;gap:8px}
.sites-d>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.sites-d>summary::-webkit-details-marker{display:none}
.sites-d>summary h2{display:flex;align-items:center;gap:6px;font-size:15px;margin:0}.sites-d .steps{margin:0;padding-left:18px}
.sites-d .prow small.warn{color:var(--warn,#b45309)}
.sites-d .dnsrecs{display:grid;gap:4px;margin-top:6px}.sites-d .dnsrecs .row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);overflow-wrap:anywhere}
.sites-d .dnsrecs .row small{flex-basis:100%}
.pc-to{margin-bottom:8px}
.runners .rhead{display:flex;align-items:center;justify-content:space-between}
.runners h2{font-size:16px;display:flex;gap:8px;align-items:center}
.runners .prow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.runners .prow small{display:block;color:var(--ink-3);font-size:12px}
.runners textarea{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:8px;background:var(--sunk)}

/* ── Getting around: the logo's drawer, and the same lists on /reviewroom/ ── */
.navbtn{position:relative;border:0;cursor:pointer}
.navbtn .badge{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--late);color:#fff;font:700 10px/16px var(--sans);text-align:center;border:2px solid var(--surface)}
.crumb button.sp{border:0;background:transparent;padding:4px 4px;border-radius:6px;cursor:pointer}
.crumb button.sp:hover{background:var(--sunk);color:var(--ink)}
.dscrim{position:fixed;inset:0;z-index:80;background:rgba(15,17,22,.28);animation:fadein .15s ease}
.drawer{position:fixed;z-index:81;top:0;left:0;bottom:0;width:min(400px,92vw);background:var(--surface);border-right:1px solid var(--line);box-shadow:var(--shadow);display:grid;grid-template-rows:auto auto auto 1fr auto;animation:slidein .18s ease}
@keyframes slidein{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.dr-h{display:flex;align-items:center;gap:10px;padding:12px 14px}
.dr-h b{margin-right:auto;font-size:15px}
.dr-s{display:flex;align-items:center;gap:8px;margin:0 14px 8px;padding:7px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface)}
.dr-s input{border:0;outline:0;flex:1;background:transparent;font-size:14px;min-width:0}
.dr-s .ic{color:var(--ink-3)}
.dr-t{display:flex;gap:4px;padding:0 14px 8px;border-bottom:1px solid var(--line)}
.dr-t button{border:0;background:transparent;padding:6px 10px;border-radius:7px;font-weight:600;font-size:13px;color:var(--ink-3)}
.dr-t button[aria-selected="true"]{background:var(--sunk);color:var(--ink)}
.dr-l,.navbox{overflow:auto;min-height:0;padding:8px}
.dr-f{display:flex;gap:14px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px}
.dr-f a{display:inline-flex;gap:6px;align-items:center;color:var(--ink-2);text-decoration:none}
.dr-f a:hover{color:var(--ink)}
.grp{display:grid;gap:2px;margin-bottom:10px}
.gh{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 4px}
.gh b{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.nr{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:9px;text-decoration:none;color:var(--ink)}
.nr:hover{background:var(--sunk)}
.nr.cur{background:var(--blue-soft)}
.nr .t{min-width:0}
.nr .t b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr .t small{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr .dot{width:9px;height:9px;border-radius:50%;background:currentColor;border:0;padding:0}
/* Pages made here: each with its share card (its face everywhere), under its client. */
.nr.pg{grid-template-columns:96px 1fr auto;align-items:start}
.nthumb{width:96px;aspect-ratio:1200/630;border-radius:6px;object-fit:cover;display:block;background:var(--sunk);box-shadow:0 0 0 1px var(--line)}
.nthumb.none{display:grid;place-items:center;overflow:hidden}
.nr.pg .t small{margin-top:2px}
.nr.pg .t .mono{font-size:11.5px}
.chip.sm{padding:0 7px;font-size:11px;line-height:18px}
.gbrand{display:flex;align-items:center;gap:8px;min-width:0}
.gbrand b{font-size:13px}.gbrand small{color:var(--ink-3);font-size:12px}
.gbrand .bmk{width:20px;height:20px}
.thumb .cardimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb:has(.cardimg){aspect-ratio:1200/630}
.nr .dot.st-draft{color:var(--ink-3);background:transparent;border:1.5px dashed var(--ink-3)}
.cnt{font:600 11px/1 var(--mono);padding:3px 6px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
.cnt.mine{background:var(--blue-soft);color:var(--blue)}
.ni{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:9px 8px;border-radius:9px;text-decoration:none;color:var(--ink);position:relative}
.ni:hover{background:var(--sunk)}
.ni.new::before{content:"";position:absolute;left:-2px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.ni .nt{display:grid;gap:3px;font-size:13px;line-height:1.4;min-width:0}
.ni .nt small{font-size:12px;color:var(--ink-3)}
.ni .nt .q{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.logo.sm{width:24px;height:24px;border-radius:7px;background:var(--blue-soft);color:var(--blue)}
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:8px}
.home-col{border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;grid-template-rows:auto 1fr;min-height:320px}
.home-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.home-h h2{font-size:16px}
.home-h input{border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;font-size:13px;background:var(--surface);min-width:0;width:200px}
@media (max-width:860px){.home{grid-template-columns:1fr}}

/* ── Reading: the controls step aside, and come back ── */
.rh,#barwrap .rbar,#banner{transition:opacity .25s ease,transform .25s ease}
.app.reading .rh{height:0;min-height:0;padding-top:0;padding-bottom:0;border-bottom:0;overflow:hidden;opacity:0;pointer-events:none}
/* Reading, the banner steps aside, except the review queue: it's how you move on to the next page. */
.app.reading #banner>:not(.qstrip){display:none}
.app.reading #barwrap .rbar{opacity:0;transform:translateY(14px);pointer-events:none}
.wz{position:fixed;left:0;right:0;top:0;height:10px;z-index:60;display:none}
.app.reading .wz{display:block}
.wakepills{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:61;display:none;gap:6px}
.app.reading .wakepills{display:flex}
.wakepill{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);color:var(--ink-2);border-radius:999px;padding:4px 10px 4px 7px;font-size:12px;font-weight:600;opacity:.55;cursor:pointer}
.wakepill:hover{opacity:1}
.wakepill .ic{width:14px;height:14px}
.wakepill.wcm{opacity:1;background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.wakepill.wcm:hover{filter:brightness(1.06)}
@media (prefers-reduced-motion:reduce){.rh,#barwrap .rbar,#banner,.drawer,.dscrim{transition:none;animation:none}}

/* ── Home: make a page, and every page as a card ─────────────────────────── */
.home2{max-width:1180px;margin:0 auto;padding:18px 20px 72px;display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-content:start}
.home2>*{min-width:0}
.h2top{display:flex;gap:10px;align-items:center}
.h2name{font-size:16px;letter-spacing:-.01em}
.push{flex:1}
.h2search{display:flex;gap:7px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;color:var(--ink-3);width:min(280px,42vw)}
.h2search input{border:0;background:transparent;outline:0;width:100%;font-size:13.5px;color:var(--ink)}
.maker{display:grid;gap:8px}
.maker h1{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.025em}
.maker .lead{color:var(--ink-2);font-size:15.5px;max-width:640px}
.starts{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px;margin-top:14px}
.start{position:relative;display:grid;grid-template-rows:1fr auto;gap:12px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;min-height:196px;
  box-shadow:0 1px 0 rgba(20,24,36,.03);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s;color:var(--ink)}
.start:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(20,24,36,.35);border-color:var(--line-2)}
.start:active{transform:translateY(-1px)}
.start .st-t{display:grid;gap:1px}
.start .st-t b{font-size:15px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start .st-t small{color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start.blank{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--blue-soft) 70%,var(--surface)),var(--surface) 70%)}
.start .plus{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:var(--blue-ink);display:grid;place-items:center;box-shadow:0 6px 14px -6px var(--blue)}
.start .plus .ic{width:16px;height:16px}
.start.more{border-style:dashed;background:transparent}
.start.more .bart{color:var(--ink-3)}
.start.ghost{display:grid;place-items:center;border-style:dashed;background:transparent}
.start.going{pointer-events:none;opacity:.7}
.start.going .st-t small::after{content:" · opening…"}
.bart{display:grid;place-items:center;border-radius:12px;background:var(--sunk);min-height:118px}
/* The drawn blank sheet: a page's outline in a few lines. */
.sheetart{display:grid;align-content:start;gap:7px;background:#fff;border-radius:10px;border:1px solid var(--line);padding:16px 14px;min-height:118px;box-shadow:0 8px 18px -14px rgba(20,24,36,.45)}
.sheetart i{display:block;height:6px;border-radius:3px;background:#ECECE7;width:88%}
.sheetart i.h{height:10px;width:62%;background:#DCDCD5;margin-bottom:4px}
.sheetart i.s{width:64%}
.sheetart.big{border:0;border-radius:0;box-shadow:none;height:100%;padding:22px 24px}
/* Brand marks: the initial first, the logo when it loads. */
.bmk{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--ink);color:var(--surface);font-weight:700;font-size:14px;flex:none;overflow:hidden}
.bmk.img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bmk img{width:100%;height:100%;object-fit:contain;padding:3px}
.bmk.lg{width:58px;height:58px;border-radius:15px;font-size:24px;box-shadow:0 8px 18px -12px rgba(20,24,36,.5)}
.bmk.sm{width:18px;height:18px;border-radius:5px;font-size:10px}
.bmk.site{background:var(--sunk);color:var(--ink-2)}
.bmk.site .ic{width:16px;height:16px}

.mh2{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
.mh2 h2{font-size:18px;letter-spacing:-.01em}
.seg{display:inline-flex;gap:2px;background:var(--sunk);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,24,36,.12)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
/* Pages by client: each client's pages under its name, with Build pages from its report. */
#cards.grouped{display:grid;grid-template-columns:1fr;gap:28px}
.cgroup .cg-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cgroup .cg-t{display:grid;gap:2px}.cgroup .cg-t b{font-size:15px}.cgroup .cg-t small{color:var(--ink-3);font-size:12px}
.cgroup .push{flex:1}
.cg-more{justify-self:start}
.thumb .bchip{position:absolute;left:10px;top:10px;background:var(--surface);box-shadow:0 2px 8px rgba(20,24,36,.15)}
.pcard{display:grid;border:1px solid var(--line);background:var(--surface);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(20,24,36,.4);border-color:var(--line-2)}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;border-bottom:1px solid var(--line);--s:.2}
.thumb iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform:scale(var(--s));transform-origin:0 0;pointer-events:none;background:#fff}
.thumb .tchip{position:absolute;left:10px;bottom:10px;background:var(--surface);box-shadow:0 2px 8px rgba(20,24,36,.15)}
.pc-b{display:flex;gap:10px;align-items:center;padding:12px 14px;min-width:0}
.pc-t{display:grid;min-width:0;flex:1}
.pc-t b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-t small{color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-b .cnt{font:600 11px/1 var(--mono);padding:4px 7px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.pc-b .cnt.mine{background:var(--late-soft);color:var(--late)}
.needs-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.needs-row .ni{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px}
.more{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.more summary{cursor:pointer;display:flex;gap:8px;align-items:center;padding:13px 16px;font-weight:600;color:var(--ink-2);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more-b{display:grid;gap:20px;padding:4px 16px 18px}
.mway{display:grid;gap:6px}
.mway pre{background:var(--sunk);border-radius:8px;padding:10px;overflow:auto;font:12px/1.5 var(--mono);margin:0}
#bpick .dialog{padding:0}
#bpick .dialog>.hint,#bpick #bpq{margin:12px 16px 0}
#bpick #bpq{border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;background:var(--surface);font-size:14px}
.bplist{display:grid;gap:2px;padding:10px 8px 12px;max-height:min(56vh,520px);overflow:auto}
.bprow{display:flex;gap:12px;align-items:center;border:0;background:transparent;border-radius:10px;padding:8px 10px;text-align:left;color:var(--ink)}
.bprow:hover{background:var(--sunk)}
.bprow>span:not(.bmk){display:grid;flex:1}
.bprow small{color:var(--ink-3)}
@media (max-width:600px){
  .home2{padding:14px 16px 56px;gap:26px}
  .starts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .start{min-height:170px;padding:11px}
  .h2search{width:auto;flex:1}
  .h2name{display:none}
}

/* ── A new page: the blank sheet, and who it's written for ───────────────── */
.sheetwrap{position:absolute;inset:0;overflow:auto;background:var(--sunk);display:grid;place-items:start center;padding:28px 20px}
.sheet{justify-items:stretch;width:min(760px,100%);background:#fff;color:#14161b;border-radius:14px;box-shadow:0 30px 60px -30px rgba(20,24,36,.35),0 0 0 1px rgba(20,24,36,.06);padding:22px 26px 34px;display:grid;gap:18px;animation:sheetIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.sheet .sheetart.page{width:100%;justify-self:stretch;border:0;box-shadow:none;padding:6px 0;gap:12px;min-height:340px}
.sheet .sheetart.page i{height:10px;background:#EBEBE6}
.sheet .sheetart.page i.h{height:28px;width:70%;background:#E0E0DA;margin:10px 0 8px}
.sheet .sheetart.page{animation:shimmer 2.4s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.6}}
.sheet-top{display:flex}
.brandpick{display:inline-flex;gap:10px;align-items:center;border:1px solid #E4E4DF;background:#fff;color:#14161b;border-radius:12px;padding:6px 10px 6px 6px;text-align:left}
.brandpick:hover{border-color:#CFCFC8;box-shadow:0 4px 12px -8px rgba(20,24,36,.4)}
.brandpick>span:not(.bmk){display:grid;line-height:1.2}
.brandpick small{font-size:11px;color:#6b7080;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.brandpick b{font-size:14px}
.sheet-hint{display:flex;gap:8px;align-items:center;justify-content:center;color:#474c57;font-size:14px;text-align:center}
.sheet-hint .ic{color:var(--blue)}
.sheet-hint.bad{color:var(--late)}
.brandmenu .mi .bmk.sm{margin:0}
.starters{display:grid;gap:6px;width:100%;margin-top:4px}
.starter{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 11px;text-align:left;font-size:13px;color:var(--ink-2);transition:border-color .15s,background .15s}
.starter:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--ink)}
.dialog .addr{display:flex;gap:6px;align-items:center}
.dialog .addr input[type=text],.dialog .addr input:not([type]){flex:1;min-width:0}
.dialog .addr input[type=color]{width:44px;height:38px;padding:3px;flex:none}
.dialog label small.hint{font-weight:400}
.dialog:not(.wide) .dh{padding:0 0 10px;margin:0 0 2px}

/* ── The review bar: dark, rounded, one bright control ────────────────────── */
.rbar{gap:3px;padding:6px;border-radius:18px;background:linear-gradient(180deg,#2B2E37 0%,#181A20 100%);color:#F1F2F4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.4),0 22px 44px -16px rgba(8,10,18,.6),0 5px 14px -6px rgba(8,10,18,.45)}
.rbar::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);pointer-events:none}
.rbar button{padding:9px 12px;border-radius:12px;font-size:13.5px;transition:background .15s,color .15s,transform .12s,box-shadow .15s}
.rbar button:hover{background:rgba(255,255,255,.08)}
.rbar button:active{transform:scale(.96)}
.rbar button[aria-pressed="true"]{background:#F1F2F4;color:#181A20;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.rbar .sep{width:1px;margin:8px 4px;background:rgba(255,255,255,.1)}
.rbar .cnt{background:rgba(255,255,255,.12)}
.rbar .grip{padding:9px 4px;border-radius:10px}
.rbar .hero{position:relative;overflow:visible;background:linear-gradient(180deg,#5A84FF 0%,#2F5BD8 100%);color:#fff;font-weight:600;padding:9px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(20,40,120,.5),0 8px 18px -8px rgba(47,91,216,.9)}
.rbar .hero:hover{background:linear-gradient(180deg,#6790FF 0%,#3764E4 100%)}
.rbar .hero[aria-pressed="true"]{background:#fff;color:#2F5BD8;box-shadow:0 0 0 1px rgba(47,91,216,.35),0 8px 18px -8px rgba(47,91,216,.8)}
.rbar .hero:disabled{opacity:.55;filter:grayscale(.4)}
/* A slow sheen across Comment, now and then: there, never loud. */
.rbar .hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;animation:sheen 11s ease-in-out 2.5s infinite}
.rbar .hero[aria-pressed="true"]::after,.rbar .hero:disabled::after{display:none}
@keyframes sheen{0%,86%{background-position:130% 0}100%{background-position:-30% 0}}
.rbar .live{width:7px;height:7px;border-radius:50%;background:#2F5BD8;box-shadow:0 0 0 0 rgba(47,91,216,.6);animation:live 1.4s ease-out infinite}
@keyframes live{to{box-shadow:0 0 0 7px rgba(47,91,216,0)}}
/* Claude at work: a level meter. */
.rbar .eqb{color:#AFC4FF}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px;width:17px}
.eq i{flex:1;border-radius:2px;background:currentColor;height:30%;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
/* The first time: a hint above Comment. */
.bhint{position:absolute;left:50%;bottom:calc(100% + 14px);translate:-50% 0;width:max-content;max-width:230px;background:#fff;color:#181A20;font-size:12.5px;font-weight:500;line-height:1.35;
  padding:8px 11px;border-radius:10px;box-shadow:0 10px 26px -10px rgba(8,10,18,.5),0 0 0 1px rgba(20,24,36,.08);white-space:normal;text-align:center;pointer-events:none;animation:hintIn .5s cubic-bezier(.2,.9,.25,1.2) .9s backwards}
.bhint::after{content:"";position:absolute;left:50%;top:100%;translate:-50% -5px;rotate:45deg;width:10px;height:10px;background:#fff;box-shadow:2px 2px 3px -1px rgba(20,24,36,.12)}
#barwrap[class*="dock-t"] .bhint{bottom:auto;top:calc(100% + 14px)}
#barwrap[class*="dock-t"] .bhint::after{top:auto;bottom:100%;translate:-50% 5px}
@keyframes hintIn{from{opacity:0;translate:-50% 6px}to{opacity:1;translate:-50% 0}}
/* Arriving: the bar rises in, its controls follow, Comment glows a few times. */
#barwrap[data-fx~="enter"] .rbar{animation:barIn .7s cubic-bezier(.2,.9,.25,1.12) .15s backwards}
#barwrap[data-fx~="enter"] .rbar>*{animation:btnIn .45s ease-out backwards}
#barwrap[data-fx~="enter"] .rbar>:nth-child(2){animation-delay:.3s}#barwrap[data-fx~="enter"] .rbar>:nth-child(3){animation-delay:.34s}
#barwrap[data-fx~="enter"] .rbar>:nth-child(4){animation-delay:.38s}#barwrap[data-fx~="enter"] .rbar>:nth-child(5){animation-delay:.42s}
#barwrap[data-fx~="enter"] .rbar>:nth-child(6){animation-delay:.46s}#barwrap[data-fx~="enter"] .rbar>:nth-child(n+7){animation-delay:.5s}
@keyframes barIn{from{opacity:0;translate:0 26px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes btnIn{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
#barwrap[data-fx~="glow"] .rbar .hero:not([aria-pressed="true"]){animation:halo 2s ease-out 1s 3}
@keyframes halo{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(20,40,120,.5),0 0 0 0 rgba(90,132,255,.7)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(20,40,120,.5),0 0 0 14px rgba(90,132,255,0)}}
.fab{border-radius:16px;padding:10px 14px;background:linear-gradient(180deg,#2B2E37,#181A20);color:#F1F2F4;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.4),0 16px 34px -14px rgba(8,10,18,.6)}
@media (max-width:860px){.rbar .hero .lbl{display:inline}.rbar button{padding:9px 10px}}
@media (prefers-reduced-motion:reduce){.rbar,.rbar>*,.rbar .hero,.rbar .hero::after,.eq i,.rbar .live,.bhint,.sheet{animation:none!important}}
@media (max-width:600px){.bhint{left:-6px;translate:0 0;animation-name:hintInL}.bhint::after{left:48px}}
@keyframes hintInL{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* ── The draft: one line that says what just happened, and its history ───── */
.banner.dline{gap:8px;flex-wrap:wrap}
.banner.dline .grow{min-width:180px}
.tb.on{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 40%,var(--line-2));color:var(--blue)}
.dhist{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:6px;margin-bottom:10px}
.dhist summary,.chgsec summary{cursor:pointer;display:flex;gap:6px;align-items:center;font-weight:600;list-style:none}
.dhist summary::-webkit-details-marker{display:none}
.dhist[open]>summary .ic:first-child{transform:rotate(90deg)}
.cps{display:grid;gap:2px}
.cph{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:8px 2px 2px}
.cp{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:8px;align-items:start;padding:7px 6px;border-radius:8px}
.cp:hover{background:var(--sunk)}
.cp.now{background:var(--ok-soft)}
.cpt{color:var(--ink-3);padding-top:2px}
.cpb{display:grid;gap:2px;font-size:13px;min-width:0}
.cpb q{color:var(--ink-2)}
.cpb small{color:var(--ink-3);font-size:12px}

/* ── What changed, as a story: by section, with the words that went and came ── */
.story{display:grid;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}
.sthead{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.sthead b{font-size:14px}
.sthead p{margin-top:2px}
.stgroup{display:grid;gap:6px;padding:8px 0 2px;border-top:1px solid var(--line)}
.sttitle{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;border:0;background:transparent;padding:0;text-align:left;color:var(--ink);min-width:0}
button.sttitle:not(:disabled):hover .sth{text-decoration:underline}
.stg{display:inline-flex;gap:4px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);flex:none}
.stg .ic{width:12px;height:12px}
.stg.k-added{color:#1A7F37}.stg.k-removed{color:#CF222E}.stg.k-changed{color:var(--blue)}
.sth{font-size:13.5px;min-width:0}
.sth.del{text-decoration:line-through;color:var(--ink-3)}
.stgroup.k-added{border-left:3px solid #2EA043;padding-left:10px;margin-left:-2px}
.stgroup.k-removed{border-left:3px solid #CF222E;padding-left:10px;margin-left:-2px}
.sti{display:grid;gap:3px;text-align:left;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink);font-size:13px;line-height:1.5}
.sti.k-added{border-left-color:#2EA043}.sti.k-removed{border-left-color:#CF222E}
.sti:not(:disabled):hover{background:var(--sunk)}
.sti:disabled{cursor:default}
.sti.hot{box-shadow:0 0 0 3px rgba(255,200,40,.45)}
.stk{font-size:11px;font-weight:600;color:var(--ink-3)}
.sti.k-removed .stx{text-decoration:line-through;color:var(--ink-3)}
.stx{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.stx ins,.sth ins{text-decoration:none;background:rgba(46,160,67,.2);color:inherit;border-radius:3px;padding:0 2px;box-shadow:inset 0 -2px 0 rgba(46,160,67,.55)}
.stx del,.sth del{background:rgba(207,34,46,.12);color:#9a1c24;border-radius:3px;padding:0 2px;text-decoration:line-through 1.5px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stx del,:root:not([data-theme="light"]) .sth del{color:#ff9a93}}
/* Before and after, side by side */
.banner.cmpline{gap:10px;flex-wrap:wrap}
.cmpline .side{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:12.5px;padding:3px 10px;border-radius:999px}
.cmpline .side.old{background:rgba(207,34,46,.1);color:#CF222E}
.cmpline .side.new{background:rgba(46,160,67,.14);color:#1A7F37}
.cmpline .grow{flex:1;min-width:200px}

/* ── The bar: an open-note count you always see, Compare, and the view by its device ── */
.rbar .cnt{background:#5A84FF;color:#fff;font:700 11px/1 var(--mono);padding:3px 7px;border-radius:999px;min-width:20px;text-align:center}
.rbar button[aria-pressed="true"] .cnt{background:#2F5BD8;color:#fff}
.rbar .cmpb{color:#C9D7FF}
.rbar .cmpb:hover{color:#fff}
.rbar .cmpb.on{background:#F1F2F4;color:#181A20}
.ph .tabs .cnt{font:700 10.5px/1 var(--mono);padding:2px 6px;border-radius:999px;background:var(--blue);color:var(--blue-ink);margin-left:2px}
.cpa{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){.rbar .cmpb .lbl{display:none}}
.cp .cpa{grid-column:2/-1;justify-content:flex-start}

/* ── Comment, Feedback, Changes: three things, three looks ────────────────────
   Comment: a conversation, blue, a speech bubble. Feedback: a to-do, orange, a flag.
   Changes: green and red, only in Changes and Compare. */
:root{--fb:#D9480F;--fb-soft:#FFF0E6;--cm:#2F5BD8;--cm-soft:#E7EDFD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fb:#FF8A4C;--fb-soft:#3A2012;--cm:#7D9CF4;--cm-soft:#1D2644}}
.kpick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpick button{display:flex;gap:8px;align-items:center;text-align:left;border:1.5px solid var(--line-2);background:var(--surface);border-radius:10px;padding:8px 10px;color:var(--ink-2)}
.kpick button>span{display:grid;line-height:1.25}
.kpick small{font-size:11.5px;color:var(--ink-3)}
.kpick .k-cm.on{border-color:var(--cm);background:var(--cm-soft);color:var(--ink)}
.kpick .k-fb.on{border-color:var(--fb);background:var(--fb-soft);color:var(--ink)}
.kpick .k-cm .ic{color:var(--cm)} .kpick .k-fb .ic{color:var(--fb)}
.card .n{display:inline-flex;gap:3px;align-items:center;width:auto;padding:0 6px}
.card .n .ic{width:11px;height:11px}
.card .n.k-fb{background:var(--fb);color:#fff;border-radius:5px}
.card .n.k-cm{background:var(--cm);color:#fff;border-radius:999px}
.card .n.k-fb.st-ok,.card .n.k-cm.st-ok{background:var(--ok)} .card .n.st-no{background:var(--no)}
.nhead b{display:inline-flex;gap:6px;align-items:center}
.nhead.k-fb b .ic{color:var(--fb)} .nhead.k-cm b .ic{color:var(--cm)}
.rbar .cnt.fb{background:#FF7A33;color:#fff}
.rbar .cnt.cm{background:#5A84FF;color:#fff}
.rbar .kfb .ic:first-child{color:#FFB38A} .rbar .kcm .ic:first-child{color:#A9BEFF}
.rbar .kfb[aria-pressed="true"] .ic:first-child{color:var(--fb)} .rbar .kcm[aria-pressed="true"] .ic:first-child{color:var(--cm)}
.ph .tabs .cnt.fb{background:var(--fb);color:#fff} .ph .tabs .cnt.cm{background:var(--cm);color:#fff}
.fab .fsep{width:1px;height:14px;background:rgba(255,255,255,.25);margin:0 4px}
.card .n.k-fb.st-late,.card .n.k-cm.st-late{background:var(--late)}
/* Four tabs with counts: they shrink to fit the panel; the selected one keeps its word, the others their icon. */
.ph{min-width:0}
.ph .tabs{min-width:0;flex:1;overflow:hidden}
.ph .tabs button{padding:6px 7px;gap:5px;min-width:0;flex:none}
/* Narrow panel: the tabs keep their words (what makes them readable) and lose their icons; only a very
   narrow one falls back to icons, keeping the open tab's word. */
@container (max-width:440px){.ph .tabs button svg{display:none}.ph .tabs button{padding:6px}}
@container (max-width:320px){.ph .tabs button svg{display:inline}.ph .tabs button:not([aria-selected="true"]) .tl{display:none}}
.panel{container-type:inline-size}
.filters .hint .ic{margin-right:6px;vertical-align:-3px}

/* ── The compare strip: Before and After, each changeable, swappable ───────── */
.banner.cmpbar{gap:8px;flex-wrap:wrap;align-items:center}
.cmpbar .side{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.cmpbar .side.old{background:rgba(207,34,46,.1);color:#CF222E}
.cmpbar .side.new{background:rgba(46,160,67,.14);color:#1A7F37}
.cmpbar select{max-width:260px;border:1px solid var(--line-2);border-radius:8px;padding:5px 8px;background:var(--surface);font-size:13px;color:var(--ink)}
.cmpbar .swap{border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}
.cmpbar .cmpst{display:inline-flex;gap:6px;align-items:center;min-width:180px;flex:1}
.sidechip{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;flex:none}
.sidechip.old{background:#CF222E;color:#fff}
.sidechip.new{background:#1A7F37;color:#fff}
/* Improving a page of theirs: their live page, copied, is always one click from the draft. */
.rbar .cmpb.live{color:#9FE8BE}
.rbar .cmpb.live:hover{color:#fff}
.cmpbar .cmplive{display:inline-flex;align-items:center;gap:4px;color:var(--blue);text-decoration:none;white-space:nowrap}
.cmpbar .cmplive .ic{width:13px;height:13px}
/* Operators: back to the portal from the pages list. */
.h2nav{display:flex;gap:2px;margin-left:6px}
.h2nav a{color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:500;padding:5px 9px;border-radius:8px}
.h2nav a:hover{color:var(--ink);background:var(--sunk)}
@media (max-width:640px){.h2top{flex-wrap:wrap}.h2nav a{padding:5px 6px;font-size:12.5px}.h2search{order:4;flex:1 1 100%}}
.fbar .livelink{color:var(--blue);text-decoration:none}
.fbar .livelink:hover{text-decoration:underline}

/* The bar fits its page: labels go first, then Compare, screen width and collapse move into More. */
.rbar{min-width:0}
.rbar .moreb{display:none}
.rbar.tight .lbl,.rbar.tight .vname{display:none}
.rbar.tighter .cmpb,.rbar.tighter .scrb,.rbar.tighter .colb,.rbar.tighter .grip{display:none}
.rbar.tighter .moreb{display:inline-flex}

/* What the report asked of the page, at the top of Klaude's panel. */
.asks{margin:0 12px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.asks summary{display:flex;gap:8px;align-items:baseline;padding:9px 12px;cursor:pointer;font-size:13px}
.asks summary .hint{margin-left:auto}
.asks ol{list-style:none;margin:0;padding:0 12px 10px;display:grid;gap:8px;max-height:46vh;overflow:auto}
.asks .ask{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:start;padding:8px;border-radius:8px;background:var(--paper)}
.asks .ask .chip{grid-column:1/-1;justify-self:start}
.asks .ask-n{font:600 11px/1.6 var(--mono);color:var(--ink-3)}
.asks .ask p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.asks .ask small{grid-column:2;font-size:11.5px;color:var(--ink-3)}
.asks .ask .tb{grid-column:2;justify-self:start}
/* Edit in place: beside Comment, with whether it's saved and undo/redo while on */
.rbar .editb{font-weight:600}
.rbar .editb.on{background:#fff;color:#1D6B45;box-shadow:0 0 0 1px rgba(29,132,85,.4)}
.rbar .editb.on .live{background:#1D8455;box-shadow:none}
.rbar .estat{display:inline-flex;gap:5px;align-items:center;font-size:12px;opacity:.85;padding:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rbar .estat.ok{color:#9FE8BE;opacity:1} .rbar .estat.bad{color:#FFB4A8;opacity:1}
.rbar .estat svg{width:14px;height:14px} .rbar .estat .spin{width:11px;height:11px}
.rbar .eub{padding:7px 7px}
.rbar .eub:disabled{opacity:.35;cursor:default}

/* ── Remix: the strip of versions under the draft, and every version side by side ── */
.rxdock{border-top:1px solid var(--line);background:var(--surface);padding:10px 12px 12px;display:grid;gap:10px}
.rxhead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.rxtitle{display:inline-flex;gap:8px;align-items:center;min-width:0}
.rxtitle>svg{color:#E8590C}
.rxtitle .hint{white-space:normal}
.rxacts{display:inline-flex;gap:6px;flex-wrap:wrap}
.rxrow{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px;scroll-snap-type:x proximity}
.rxcard{flex:0 0 200px;scroll-snap-align:start;display:grid;gap:6px;align-content:start;text-align:left;border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:6px 6px 8px}
.rxcard:hover{border-color:var(--ink-3)}
.rxcard.on{border-color:#E8590C;box-shadow:0 0 0 3px rgba(232,89,12,.2)}
.rxshot{display:block;height:112px;border-radius:6px;overflow:hidden;background:var(--sunk)}
.rxshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.rxnone{display:grid;place-items:center;height:100%;color:var(--ink-3)}
.rxmeta{display:flex;gap:7px;align-items:baseline;min-width:0;padding:0 2px}
.rxmeta b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rxn{font:500 11px/1 var(--mono);color:var(--ink-3);flex:none}
.rxcard.on .rxn{color:#E8590C}
.rxchips{display:flex;flex-wrap:wrap;gap:4px;padding:0 2px}
.rxchips span{font-size:11px;line-height:1.3;color:var(--ink-2);background:var(--sunk);border-radius:5px;padding:2px 6px}
.rxnote{font-size:12.5px;color:var(--ink-2);padding:0 2px}
.rxtour{display:flex;gap:8px;align-items:center;background:var(--warn-soft);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:13px}
.rxtour>svg{color:#E8590C}
.rxtour span{flex:1}
.rxgrid{position:absolute;inset:0;z-index:30;background:var(--paper);display:grid;grid-template-rows:auto 1fr;animation:rlfade .15s ease-out}
@keyframes rlfade{from{opacity:0}to{opacity:1}}
.rxgh{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.rxgh .hint{flex:1}
.rxgcards{overflow:auto;padding:14px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(min(78vw,260px),1fr));gap:14px;align-items:start}
.rxgcards .rxcard{padding:8px 8px 10px}
.rxgcards .rxshot{height:auto;max-height:62vh;overflow:auto}
.rxgcards .rxshot img{height:auto;object-fit:contain}
@media (max-width:640px){.rxcard{flex-basis:150px}.rxshot{height:86px}.rxtitle .hint{display:none}}
@media (prefers-reduced-motion:reduce){.rxgrid{animation:none}}

/* Remix, open: one slim bar over the page (the pictures are in All versions). */
.rxfloat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -8px 24px -18px rgba(20,24,36,.35)}
.rxft{display:inline-flex;gap:8px;align-items:center;min-width:0;flex:1 1 180px}
.rxft>svg{color:#E8590C;flex:none}.rxft .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rxnav{display:inline-flex;align-items:center;gap:6px}
.rxnow{display:grid;justify-items:center;min-width:140px;text-align:center}.rxnow b{font-size:13.5px}.rxnow small{font-size:11.5px;color:var(--ink-3)}
.rxfloat .rxtour{flex-basis:100%}
/* Remix's notices float at the top of the page, clear of the review bar at the bottom; every version at
   once covers the page. Neither takes a row of its own. */
#remixdock{position:absolute;inset:0;z-index:21;pointer-events:none}
#remixdock>*{pointer-events:auto}
.rxwait{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:9px 12px;border-radius:12px;background:var(--warn-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);box-shadow:0 10px 28px -12px rgba(20,24,36,.45);font-size:13px;width:max-content;max-width:calc(100% - 24px)}
.rxwait>svg{color:var(--warn)}
.rxwait span{flex:1 1 220px}
.drow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:8px}
.drow:hover{border-color:var(--ink-3)}
.drow-i{color:#E8590C}.drow-t{display:grid;gap:2px;min-width:0}.drow-t small{color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Reviewing a client's pages: new pages, then theirs improved; each says what reviewing it takes. */
.cgroup .cg-t .rdy{color:var(--ink);font-weight:650}
.cg-sub{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 10px}
.cg-sub b{font-size:14px}.cg-sub .num{color:var(--ink-3);font-weight:500;margin-left:2px}.cg-sub small{color:var(--ink-3);font-size:12.5px}
.pc-t .load{color:var(--ink-2);font-weight:600}
/* The review queue strip, at the top of a room. */
/* Its own ink on its own tint, light and dark alike (dark mode had light text on this light blue). */
.qstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 14px;background:var(--cm-soft);color:var(--ink);border-bottom:1px solid var(--line);font-size:13px}
.qstrip>.ic,.qstrip>svg{color:var(--blue,#2F5BD8)}
.qstrip .grow{flex:1 1 280px;min-width:0}

/* Their live page, or the proposal: a small layer on the page, Live | Proposed. */
.livetoggle{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:22;display:flex;align-items:center;gap:12px;padding:7px 8px 7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);box-shadow:0 10px 28px -14px rgba(20,24,36,.45);max-width:calc(100% - 24px);animation:rlfade .2s ease-out}
.lt-dot{width:9px;height:9px;border-radius:50%;background:#2EA043;box-shadow:0 0 0 4px rgba(46,160,67,.18);flex:none}
.lt-dot.live{background:#8A8F98;box-shadow:0 0 0 4px rgba(138,143,152,.18)}
.lt-t{display:grid;gap:1px;min-width:0}.lt-t b{font-size:13px;white-space:nowrap}.lt-t small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--sunk);flex:none}
.lt-seg button{border:0;background:transparent;border-radius:999px;padding:5px 12px;font:600 12.5px/1 inherit;color:var(--ink-3);cursor:pointer}
.lt-seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,24,36,.18)}
.lt-seg button[data-livetoggle="draft"][aria-selected="true"]{color:var(--ok)}
/* Remix's "ready" card sits under it when both are up. */
#stage:has(#livetoggle) .rxwait{top:64px}
.livetoggle.tight{gap:8px;padding-left:10px}.livetoggle.tight .lt-t{display:none}
.livetoggle.tight:hover,.livetoggle.tight:focus-within{gap:12px;padding-left:14px}.livetoggle.tight:hover .lt-t,.livetoggle.tight:focus-within .lt-t{display:grid}
@media (max-width:620px){.lt-t small{display:none}}

/* The page bar: where the page stands, the proposal or their live page, quiet tools, one thing to do next. */
.banner.pbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 14px}
.pstep{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pstep li{display:inline-flex;align-items:center;gap:5px}
.pstep li+li::before{content:"";width:18px;height:1.5px;background:var(--line-2);margin-right:2px}
.pstep li i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-2);display:inline-block}
.pstep li.now{color:var(--ink)}.pstep li.now i{border-color:var(--blue,#2F5BD8);background:var(--blue,#2F5BD8);box-shadow:0 0 0 3px rgba(47,91,216,.18)}
.pstep li.done{color:var(--ok)}.pstep li.done svg{width:13px;height:13px}
.pbar .lt-seg{flex:none}
.pbar .pwhat{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 140px}
.pbar .ib{flex:none}
.pq{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--ink-3);padding:0 4px;border-left:1px solid var(--line);margin-left:2px}
.pq .ib.off{opacity:.35}
.pbar .pgo{flex:none;font-weight:650}
/* The confirm screen. */
.pubconf{max-width:640px;padding-bottom:16px}
.pubconf>.pc-top,.pubconf>.pc-row,.pubconf>.pc-sure,.pubconf>.row,.pubconf>.pc-ok,.pubconf>.err,.pubconf>.hint{margin-left:20px;margin-right:20px}
.pc-top{display:flex;gap:14px;align-items:center;margin:4px 0 14px}.pc-top img{width:150px;aspect-ratio:1200/630;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.pc-top b{display:block;font-size:15px}.pc-top small{color:var(--ink-3)}
.pc-row{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
/* Backstage and frontstage side by side (confirmPubHtml), then one line on whether it's ready, then Details. */
.pubconf>.pc-stages,.pubconf>.pc-ready,.pubconf>.pc-fix,.pubconf>.pc-more,.pubconf>.pc-note{margin-left:20px;margin-right:20px}
.pc-stages{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px;align-items:stretch;margin-bottom:14px}
.pc-stage{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;min-width:0}
.pc-stage.front{border:2px solid var(--ok)}
.pc-stage .hint{margin:0}
.pc-sg{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--sans,inherit);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.pc-sg svg{width:15px;height:15px}.pc-sg.front{color:var(--ok)}
.pc-url{font-size:13px;overflow-wrap:anywhere}
.pc-stage .pc-addr{width:100%;flex-direction:column;align-items:stretch;gap:6px}.pc-stage .pc-addr input{min-width:0;width:100%;box-sizing:border-box;padding:7px 9px}
.pc-arrow{display:grid;place-items:center;color:var(--ink-3)}
.pc-ready{display:flex;gap:8px;align-items:center;margin-top:0;margin-bottom:10px;font-size:14px;font-weight:600}.pc-ready svg{color:var(--ok);flex:none}
/* Theme tokens only in the publish screen and its chips: a fixed light tint under theme ink was light-on-light in dark mode. */
.pc-fix{margin-bottom:10px;padding:12px 14px;border-radius:10px;background:var(--late-soft);border:1px solid color-mix(in srgb,var(--late) 35%,transparent)}
.pc-fix b{display:flex;gap:8px;align-items:center;font-size:14px}.pc-fix b svg{color:var(--late)}
.pc-fix ul{margin:8px 0 0;padding-left:30px;display:grid;gap:4px;font-size:13px;color:var(--ink-2)}.pc-fix small,.pc-fix .hint{display:block;color:var(--ink-2)}
/* Live: where it lives, beside the title (kindChip) */
.kchip.lv{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 72%,var(--ink));text-decoration:none;display:inline-flex;align-items:center;gap:5px}.kchip.lv svg{width:14px;height:14px}
.pgo-ok svg{width:14px;height:14px}
/* The quick update (quickUpdateHtml): where, what changes, Update now */
.dialog.quickup{width:min(560px,100%)}
.qu-where{display:flex;gap:8px;align-items:center;margin:0;font-size:13.5px;overflow-wrap:anywhere}.qu-where svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.qu-n{margin:0;font-size:14px}
.qu-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--ink-2);max-height:260px;overflow:auto}
.qu-list li{display:flex;gap:8px;align-items:flex-start}.qu-list .chip{flex:none}
.dialog.quickup .row{align-items:center}
.qu-full{all:unset;cursor:pointer;margin-right:auto;font-size:13px;font-weight:600;color:var(--blue,#2F5BD8);text-decoration:underline;text-underline-offset:3px}
.qu-on{flex:none;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 72%,var(--ink))}
.pc-fixing{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0 30px;font-size:13.5px;color:var(--ink-2)}.pc-fix .pc-fixing b{display:inline;font-size:inherit}
.pc-foot .pc-sure{margin:0 auto 0 0}
.pubconf>.pc-foot{position:sticky;bottom:-16px;margin:0;padding:12px 20px 16px;background:var(--surface);border-top:1px solid var(--line);align-items:center;z-index:1}
.pc-why{display:inline-flex;gap:6px;align-items:center;margin-right:auto;font-size:13px;font-weight:600;color:var(--late)}.pc-why svg{width:16px;height:16px}
.pc-share.one .pc-link small.hint{display:block;margin-top:6px}
.pc-fixa{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0 30px}.pc-fix .hint{margin:8px 0 0 30px}
/* The way past a page's blanks (flowHtml): a step track, one line on what's happening now, then the lines Klaude
   rewrites (each with its own state), Keep and Edit. Rows sit on the surface for contrast; every row keeps one height
   from waiting to ready, so nothing jumps while answers land. */
.pubconf>.pc-flow{margin:0 20px 12px}
.pc-flow{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--sunk)}
.pc-flow.t-stop{background:var(--late-soft);border-color:color-mix(in srgb,var(--late) 35%,transparent)}
.pc-flow.t-ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pc-track{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;counter-reset:none}
.pc-track li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;line-height:1.3;color:var(--ink-2);position:relative;min-width:0}
.pc-track li::after{content:"";position:absolute;top:11px;left:28px;right:4px;height:2px;border-radius:1px;background:var(--line-2)}
.pc-track li:last-child::after{display:none}
.pc-track li.done::after{background:var(--ok)}
.pc-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;font:700 12px/1 var(--sans);border:2px solid var(--line-2);background:var(--surface);color:var(--ink-3)}
.pc-dot svg{width:14px;height:14px}
.pc-track li.done .pc-dot{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.pc-track li.now .pc-dot{background:var(--blue);border-color:var(--blue);color:var(--blue-ink);box-shadow:0 0 0 3px var(--blue-soft)}
.pc-track li.now{color:var(--ink);font-weight:650}
.pc-track li.done{color:var(--ink-2)}
.pc-track li.off{opacity:.6}.pc-track li.off .pc-sl{text-decoration:line-through}
.pc-now{display:flex;gap:9px;align-items:flex-start;margin:0;min-height:2.9em;font-size:14px;line-height:1.45;color:var(--ink)}
.pc-now svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--blue)}.pc-now .spin{margin-top:3px}
.pc-flow.t-stop .pc-now svg{color:var(--late)}.pc-flow.t-ok .pc-now svg{color:var(--ok)}
.pc-fbody{margin-top:10px}
.pc-blanks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;font-size:13px}
.pc-also{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--ink)}
.pc-also li{display:flex;gap:6px;align-items:flex-start}.pc-also svg{width:15px;height:15px;color:var(--late);flex:none;margin-top:2px}.pc-also small{display:block;color:var(--ink-2)}
.pc-slow{margin:0;font-size:13.5px;color:var(--ink-2)}
.pc-flow .pc-fixa{margin:12px 0 0}.pc-flow .hint{margin:8px 0 0}
.pc-flow b{font-size:inherit}
.pc-ar-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:0 0 8px;font-size:13.5px;color:var(--ink)}
.pc-ar-head .hint{margin:0;display:inline}
.pc-ar-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px;color:var(--ink)}
.pc-ar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;min-height:104px;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.pc-ar-row.off .pc-ar-a>span:not(.k){color:var(--ink-3);text-decoration:line-through}
.pc-ar-row.cant{border-style:dashed}
.pc-ar-txt{display:grid;gap:6px;min-width:0}
.pc-ar-b,.pc-ar-a{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;line-height:1.45;overflow-wrap:anywhere}
.pc-ar-b{color:var(--ink-2)}
.pc-ar-txt .k{font:600 10.5px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pc-blank{background:var(--late-soft);color:var(--ink);border-bottom:2px solid var(--late);border-radius:3px;padding:0 2px}
.pc-new{background:var(--ok-soft);color:var(--ink);border-bottom:2px solid var(--ok);border-radius:3px;padding:0 1px}
.pc-ar-rm{display:inline-flex;gap:6px;align-items:center;font-style:italic;color:var(--ink-2)}.pc-ar-rm svg{width:14px;height:14px}
.pc-ar-wait{color:var(--ink-3);font-style:italic}.pc-ar-why{color:var(--ink-2)}
.pc-ar-a textarea{font:inherit;width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical}
.pc-ar-do{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:96px}
.pc-ar-do .tb.on{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ink)}.pc-ar-do .tb.on svg{color:var(--ok)}
.pc-ar-do svg{width:14px;height:14px}
.pc-st{display:inline-flex;gap:5px;align-items:center;justify-content:center;font-size:12px;font-weight:650;padding:3px 8px;border-radius:999px;white-space:nowrap}
.pc-st svg{width:13px;height:13px}.pc-st .spin{width:11px;height:11px}
.pc-st.wait{background:var(--no-soft);color:var(--ink-2)}.pc-st.work{background:var(--blue-soft);color:var(--ink)}
.pc-st.ok{background:var(--ok-soft);color:var(--ink)}.pc-st.ok svg{color:var(--ok)}
.pc-st.no{background:var(--warn-soft);color:var(--ink)}.pc-st.no svg{color:var(--warn)}
.pc-ar-row.sk{grid-template-columns:1fr;align-content:center;gap:10px}
.sk-l{display:block;height:10px;border-radius:5px;background:var(--sunk);animation:skp 1.2s ease-in-out infinite}.sk-l.short{width:55%}
@keyframes skp{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.sk-l{animation:none}}
.pc-ar-left{display:flex;gap:6px;align-items:flex-start}.pc-ar-left svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--warn)}
.pc-flow .err{margin:8px 0 0}
.banner.kon{background:var(--blue-soft);color:var(--ink)}.banner.kon svg{color:var(--blue)}
@media (max-width:620px){.pc-track{grid-template-columns:1fr;gap:4px}.pc-track li{flex-direction:row;align-items:center}.pc-track li::after{display:none}
  .pc-ar-row{grid-template-columns:1fr}.pc-ar-do{flex-direction:row;flex-wrap:wrap;min-width:0}.pc-ar-b,.pc-ar-a{grid-template-columns:1fr;gap:2px}.pubconf>.pc-flow{margin:0 12px 12px}}
.pc-more{margin-bottom:6px;border-top:1px solid var(--line);padding-top:10px}
.pc-more>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:4px 0}
@media (max-width:700px){.pc-stages{grid-template-columns:1fr}.pc-arrow{transform:rotate(90deg)}}
.pc-row .k{font:600 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.pc-addr{display:flex;align-items:center;flex-wrap:wrap;gap:0;font-size:13.5px}.pc-addr input{font:inherit;font-family:var(--mono);padding:4px 6px;border:1px solid var(--line-2);border-radius:6px;min-width:220px;flex:1}
.pc-err{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:10px;background:var(--late-soft);color:var(--late);font-size:13px;line-height:1.45}
/* Not an error when the store can be connected from here: a step to take, with its button on its own line. */
.pc-err.pc-conn{background:var(--sunk);color:var(--ink)}.pc-conn .pc-connect{display:inline-flex;margin-top:10px}.pc-conn .pc-again{display:flex;gap:6px;align-items:center;margin-top:8px;color:var(--ink-3)}
.pc-ch,.pc-checks{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.pc-share{display:grid;gap:10px}
.pc-link{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sunk);max-width:440px}
.pc-link img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid var(--line)}
.pc-link>div{display:grid;gap:2px;padding:8px 12px 10px}.pc-link small{color:var(--ink-3);font-size:11.5px}.pc-link b{font-size:13.5px;line-height:1.35}
.pc-link span,.pc-serp span{font-size:12.5px;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-serp{display:grid;gap:2px;max-width:560px}.pc-serp small{color:var(--ink-3);font-size:11.5px;overflow-wrap:anywhere}.pc-serp b{font-weight:500;font-size:15px;color:var(--ink)}
.pc-checks{list-style:none;padding:0}.pc-checks li{display:flex;gap:8px;align-items:flex-start}
.pc-checks li.ok svg{color:var(--ok)}.pc-checks li.bad svg{color:var(--late)}.pc-checks li.warn svg{color:var(--warn)}
.dialog .pc-sure{display:flex;gap:9px;align-items:center;margin-top:12px;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.pc-sure input{width:16px;height:16px;accent-color:var(--blue,#2F5BD8)}
.pc-ok{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--ok-soft);margin:4px 0 12px}.pc-ok>svg{color:var(--ok);flex:none}
.pc-ok b{display:block}.pc-ok a{display:inline-flex;gap:4px;align-items:center;margin:4px 0;font-size:13px}.pc-ok small{display:block;color:var(--ink-3)}
@media (max-width:700px){.pstep span{display:none}.pc-row{grid-template-columns:1fr}}

/* The review stepper in the page bar: walk every change, mark it reviewed, see how many are left. */
.rvs{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 2px;border:1px solid var(--line,#e2e2e2);border-radius:10px;background:var(--bg-soft,#f6f7f4);white-space:nowrap}
.rvs-t{font-size:12.5px;padding:0 2px}
.rvs-ok{gap:4px;border-color:#16a34a;color:#15803d}
.rvs-ok.on{background:#16a34a;color:#fff;border-color:#16a34a}
.rvs-n{font-size:12px;color:var(--muted,#6b7280);padding:0 6px;display:inline-flex;align-items:center;gap:4px}
.rvs-n.all{color:#15803d;font-weight:600}
@media (max-width:760px){.rvs-n{display:none}}

/* The dock that holds it: over the page, above the Comment and Controls pills. */
#rvdock{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:6;pointer-events:none}
#rvdock:empty{display:none}
#rvdock .rvs{pointer-events:auto;padding:5px 6px 5px 4px;background:#fff;border-color:#bbf7d0;box-shadow:0 10px 30px rgba(15,23,42,.18)}
#rvdock .rvs{color:#1f1d1a}#rvdock .rvs .ib{color:#3f3b35}#rvdock .rvs .ib:hover{background:#f1efea;color:#1f1d1a}#rvdock .rvs-t b{color:#15803d}
/* ── A client's page plan (/reviewroom/?plan=): every page its report asks for, where each stands, what's left ── */
.plan{max-width:1180px;margin:0 auto;padding:18px 20px 120px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-content:start}
.plan>*{min-width:0}
.pp-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pp-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
.pp-id{display:flex;gap:16px;align-items:flex-start}
.pp-eye{font:600 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pp-id h1{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.025em;margin:2px 0 6px}
.pp-lead{color:var(--ink-2);font-size:15px;max-width:520px}
.pp-prog{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.pp-left{display:flex;gap:10px;align-items:baseline}
.pp-left b{font-size:34px;letter-spacing:-.03em;line-height:1}
.pp-left span{color:var(--ink-2);font-size:14px}
.pp-bar{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--sunk)}
.pp-seg{display:block;min-width:4px}
.pp-seg.live,.pp-dot.live{background:var(--ok)}
.pp-seg.approved,.pp-dot.approved{background:color-mix(in srgb,var(--ok) 55%,var(--surface))}
.pp-seg.ready,.pp-dot.ready{background:var(--warn)}
.pp-seg.klaude,.pp-dot.klaude{background:var(--blue)}
.pp-seg.stuck,.pp-dot.stuck{background:var(--late)}
.pp-seg.todo,.pp-dot.todo{background:var(--line-2)}
.pp-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.pp-legend span{display:inline-flex;gap:6px;align-items:center}
.pp-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.pp-prog .hint b{color:var(--ink)}
.pp-bar2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pp-bar2 .seg .num{font-size:11px;color:var(--ink-3);margin-left:2px}
.pp-err{background:var(--late-soft);color:var(--late);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:10px}
.pp-rows{display:grid;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.pp-row{display:grid;grid-template-columns:28px 76px minmax(0,1fr) auto auto 92px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.pp-row:first-child{border-top:0}
.pp-row:hover{background:color-mix(in srgb,var(--sunk) 55%,var(--surface))}
.pp-row.plain{grid-template-columns:76px minmax(0,1fr) auto}
.pp-tick{display:grid;place-items:center;cursor:pointer}
.pp-tick input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.pp-tick input:disabled{opacity:.3;cursor:default}
.pp-thumb{width:76px;aspect-ratio:1200/630;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:var(--sunk);color:var(--ink-3);border:1px solid var(--line)}
.pp-thumb.new{border-style:dashed;background:transparent}
.pp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pp-main{display:grid;gap:1px;text-align:left;border:0;background:transparent;padding:0;min-width:0;color:inherit}
.pp-main b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-main small{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-main .mono{font-size:11.5px}
.pp-as{font-size:12px;font-style:italic}
.pp-meta{display:flex;gap:12px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.pp-pri{font-weight:600;font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
.pp-pri.p3{background:var(--late-soft);color:var(--late)}
.pp-pri.p2{background:var(--warn-soft);color:var(--warn)}
.pp-go{display:flex;justify-content:flex-end}
.pp-row.ready{box-shadow:inset 3px 0 0 var(--warn)}
.pp-row.klaude{box-shadow:inset 3px 0 0 var(--blue)}
.pp-row.stuck{box-shadow:inset 3px 0 0 var(--late)}
.pp-row.live,.pp-row.approved{box-shadow:inset 3px 0 0 var(--ok)}
.pp-row.live .pp-main b,.pp-row.approved .pp-main b{color:var(--ink-2)}
.pp-detail{grid-column:3/-1;display:grid;gap:12px;padding:4px 0 8px;font-size:13.5px;color:var(--ink-2)}
.pp-detail ol,.pp-detail ul{margin:4px 0 0;padding-left:20px;display:grid;gap:4px}
.pp-detail li.had{color:var(--ink-3)}
.pp-detail li.had::after{content:" ✓ asked";color:var(--ok);font-size:12px}
.pp-k{font:600 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.pp-detail .tb{justify-self:start}
.pp-act{display:grid;gap:8px;margin-bottom:18px}
.pp-acth{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pp-acth b{font-size:14.5px}
.pp-acth small{color:var(--ink-3);font-size:12.5px}
.pp-lvl{font:600 10.5px/1 var(--mono);padding:3px 6px;border-radius:5px;background:var(--ink);color:var(--surface)}
.pp-other h2,.pp-box h2{font-size:17px;letter-spacing:-.01em}
.pp-other{display:grid;gap:8px}
.pp-rest{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.pp-box{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.pp-boxh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pp-boxh small{color:var(--ink-3);font-size:12.5px}
.pp-fix{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px;cursor:pointer}
.pp-fix input{margin-top:3px;accent-color:var(--ok)}
.pp-fix.done span:nth-child(2){color:var(--ink-3);text-decoration:line-through}
.pp-off{border-top:1px solid var(--line);padding:8px 0}
.pp-off summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;font-size:13.5px;list-style:none}
.pp-off summary::-webkit-details-marker{display:none}
.pp-off summary small{color:var(--ink-3);white-space:nowrap}
.pp-off ul{margin:8px 0 0;padding-left:20px;display:grid;gap:5px;font-size:13px;color:var(--ink-2)}
.pp-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(760px,calc(100% - 32px));display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:10px 12px 10px 16px;box-shadow:var(--shadow);font-size:13.5px;color:var(--ink-2);z-index:20}
.pp-dock.on{border-color:color-mix(in srgb,var(--blue) 45%,var(--line-2))}
.pp-dock b{color:var(--ink)}
/* A batch the portal holds (page-plan.js batchHtml): how far it's got, and Stop. */
.pp-batch{display:grid;gap:8px}
.pp-batch-row{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid color-mix(in srgb,var(--blue) 40%,var(--line));border-radius:14px;padding:12px 14px;font-size:13.5px;color:var(--ink-2)}
.pp-batch-row.done{border-color:var(--line)}
.pp-batch-t{display:inline-flex;gap:8px;align-items:center;flex:1 1 320px;min-width:0}
.pp-batch-t b{color:var(--ink);font-weight:600}
.pp-batch-row small{flex-basis:100%;color:var(--ink-3)}
.pp-batch-bad{flex-basis:100%;margin:0;padding-left:20px;display:grid;gap:3px;color:var(--late);font-size:13px}
.pp-held{color:var(--ink-3);font-size:12px;white-space:nowrap}
@media (max-width:860px){
  .pp-head{grid-template-columns:minmax(0,1fr)}
  .pp-row{grid-template-columns:24px 64px minmax(0,1fr) auto;row-gap:6px}
  .pp-thumb{width:64px}
  .pp-meta{grid-column:3/4;grid-row:2}
  .pp-row>.chip{grid-column:4;grid-row:1;justify-self:end}
  .pp-go{grid-column:4;grid-row:2}
  .pp-detail{grid-column:1/-1}
  .pp-row.plain{grid-template-columns:64px minmax(0,1fr)}
  .pp-row.plain>.chip{grid-column:2;grid-row:2;justify-self:start}
}
@media (max-width:520px){
  .plan{padding:14px 16px 150px}
  .pp-id .bmk.lg{width:44px;height:44px;border-radius:12px;font-size:18px}
  .pp-row{grid-template-columns:22px minmax(0,1fr) auto;padding:10px 12px}
  .pp-thumb{display:none}
  .pp-meta{grid-column:2/-1;flex-wrap:wrap;gap:8px}
  .pp-row>.chip{grid-column:3}
  .pp-go{grid-column:1/-1;grid-row:3;justify-content:flex-start}
  .pp-row.plain{grid-template-columns:minmax(0,1fr)}
  .pp-row.plain>.chip{grid-column:1}
  .pp-bar2 .seg{overflow-x:auto;max-width:100%;scrollbar-width:none}
  .pp-bar2 .seg button{white-space:nowrap;flex:none}
  .pp-go [data-build]{display:none}
  .pp-rest{grid-template-columns:minmax(0,1fr)}
}
/* Page drips (dripsSection) */
.drips{display:grid;gap:10px}.drips .rhead h2{font-size:16px;display:flex;gap:8px;align-items:center;margin:0}
.drips .sites-d>summary{flex-wrap:wrap}.drips .sites-d>summary small{flex-basis:100%;margin-left:26px}
.dp-week h3{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:10px 0 2px;text-transform:none}
.dp-row>.chip{min-width:max-content}.dp-row .dp-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.dp-row small a{color:inherit}
.dp-set>summary{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:13px;color:var(--ink-2)}
.dp-set .pform{display:grid;gap:10px;margin-top:8px}.dp-set .pform label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.dp-set .pform input,.dp-set .pform select{width:auto}.dp-set .pform input[type=checkbox]{width:16px;height:16px;margin:0}
.dp-set input[type=number]{width:64px}.dp-set input:not([type]),.dp-set input[name=notify_extra]{flex:1;min-width:220px}
.dp-set .dp-days{border:0;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap;font-size:13px}.dp-set .dp-days legend{margin-bottom:4px}
.dp-ck{display:inline-flex;gap:6px;align-items:center}.dp-pair{display:inline-flex;gap:6px;align-items:center}
.drips .err{color:var(--no)}
@media (max-width:600px){.dp-row{grid-template-columns:auto 1fr}.dp-row .dp-acts{grid-column:1/-1;justify-content:flex-start}}

/* The pages dock (renderDock): back to review, Approve, Publish or Update, big, along the bottom */
.pdock { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(980px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(14, 14, 16, .92); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7); color: #f4f4f5; font-family: inherit; }
.pdock .pd-back { display: flex; align-items: center; gap: 6px; color: #c9c9cf; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.pdock .pd-back:hover { color: #fff; }
.pdock .pd-hint { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: #9b9ba3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdock .pd-btn { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #f4f4f5; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pdock .pd-btn:hover { background: rgba(255, 255, 255, .12); }
.pdock .pd-btn.primary { background: #c8ff00; border-color: #c8ff00; color: #0a0a0b; }
.pdock .pd-btn.primary:hover { background: #d6ff3d; }
.pdock .pd-btn:disabled { opacity: .5; cursor: default; }
.pdock .pd-ok { display: flex; align-items: center; gap: 6px; color: #c8ff00; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pdock .ic { width: 16px; height: 16px; }
body.has-pdock #frames, body.has-pdock .frames { padding-bottom: 84px; }
@media (max-width: 700px) {
  .pdock { bottom: 10px; flex-wrap: wrap; gap: 8px; padding: 10px; }
  .pdock .pd-hint { order: 3; flex: 1 0 100%; white-space: normal; }
  .pdock .pd-btn { flex: 1; justify-content: center; height: 48px; padding: 0 12px; }
}
.pc-checks li small{display:block;color:var(--ink-3);font-size:12px;margin-top:1px}

/* ── Pages home tabs, and the Sites tab (account/review-sites.js) ── */
.h2tabs{display:flex;gap:2px;margin-left:10px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.h2tabs a{display:inline-flex;gap:6px;align-items:center;color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:600;padding:5px 11px;border-radius:7px}
.h2tabs a .ic{width:15px;height:15px}
.h2tabs a:hover{color:var(--ink);background:var(--sunk)}
.h2tabs a[aria-selected="true"]{background:var(--ink);color:var(--surface)}
.hpane{display:grid;gap:34px;min-width:0}
.hpane[hidden]{display:none}
.sites-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.sites-head h1{margin:0 0 6px}
.sites-head .lead{margin:0;max-width:60ch}
.sites-demo{margin-top:24px;border:1px solid var(--line,#e6e2dc);border-radius:12px;padding:14px 16px}
.sites-demo h2{margin:0 0 4px;font-size:16px}
.sites-demo .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sites-demo input{flex:1 1 260px;min-height:36px;padding:6px 10px;border:1px solid var(--line,#e6e2dc);border-radius:8px;font:inherit}
.sitestab{display:grid;gap:12px}
.slist{display:grid;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.sic{width:34px;height:34px;border-radius:9px;background:var(--sunk);display:grid;place-items:center;color:var(--ink-2)}
.sic .ic{width:17px;height:17px}
.sbody{display:grid;gap:2px;min-width:0}
.sbody b{font-size:14.5px;overflow-wrap:anywhere}
.sbody small{color:var(--ink-3);font-size:12.5px}
.sbody .snote{color:var(--ink-2)}
.sbody .swarn{color:var(--warn)}
.sacts{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.tb.quiet{border-color:transparent;background:transparent;color:var(--ink-3)}
.tb.quiet:hover{color:var(--late);background:var(--sunk)}
@media (max-width:640px){.srow{grid-template-columns:auto minmax(0,1fr) auto}.sacts{grid-column:2/-1;justify-content:flex-start}.h2tabs{margin-left:0;order:3;width:100%}.h2tabs a{flex:1;justify-content:center}.h2top{flex-wrap:wrap}.h2nav{display:none}}

/* The Connect a site wizard */
.dialog.wide.swiz{padding:20px;gap:14px;width:min(640px,100%)}
.swiz .dh h3{margin:0}
.wsteps{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.wsteps li{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:4px 10px 4px 5px;border-radius:999px;background:var(--sunk)}
.wsteps li span{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:11px}
.wsteps li .ic{width:14px;height:14px}
.wsteps li.on{background:var(--blue-soft);color:var(--blue)}
.wsteps li.done{color:var(--ok)}
.wbody{display:grid;gap:12px}
.wbody p{margin:0}
.wfound{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.wfound .ic{width:22px;height:22px;color:var(--ink-2)}
.wfound small{display:block;color:var(--ink-3)}
.wwarn{display:flex;gap:8px;align-items:center;color:var(--ok);font-size:13px}
.wpaths{display:grid;gap:8px}
.wpath{display:grid;gap:3px;text-align:left;border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:12px 14px;color:var(--ink);cursor:pointer}
.wpath:hover{border-color:var(--blue)}
.wpath.rec{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.wpath b{display:flex;gap:8px;align-items:center;font-size:14px}
.wpath small{color:var(--ink-3);font-size:12.5px}
.wlist{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;color:var(--ink-2)}
.wlist a{color:var(--blue)}
.wvals{width:100%;border-collapse:collapse;font-size:13px}
.wvals th{text-align:left;font-weight:600;color:var(--ink-2);padding:7px 10px 7px 0;white-space:nowrap}
.wvals td{padding:7px 6px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.wvals tr:first-child td{border-top:0}
.wvals td:last-child{text-align:right;width:1%}
.wwait{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:13px;padding:10px 12px;border-radius:9px;background:var(--sunk)}
.wwait .ic{animation:spin 1.2s linear infinite;width:16px;height:16px;flex:none}
.wsub{display:flex;align-items:center;gap:6px}
.wsub input{flex:1;min-width:0}
.wsub span{font-size:14px;color:var(--ink-2);font-weight:400}
.wdone{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:10px;background:var(--ok-soft)}
.wdone>.ic{width:26px;height:26px;color:var(--ok);flex:none}
.wdone p{margin:4px 0 0;color:var(--ink-2)}
.werr:empty{display:none}
.werr{color:var(--late)}

/* The share link: beside Review & publish, and copyable in the publish dialog. */
.pc-sl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-sl a{overflow-wrap:anywhere}
.sl-in{display:block;width:calc(100% - 32px);margin:0 16px 16px;padding:8px 10px;font-size:13px;border:1px solid var(--line, #ddd);border-radius:8px;background:transparent;color:inherit}

/* ── A customer's room (customer() in review-room.js): the page's name, the version, who shared it ── */
.crumb .ctitle{display:grid;line-height:1.2;min-width:0}
.crumb .ctitle small{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .chip.side{font-size:11px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.pform .warnline{display:flex;gap:6px;align-items:center;color:var(--warn)}
.pform .warnline .ico,.pform .warnline svg{width:14px;height:14px;flex:none}
.dialog.welcome p{margin:0;color:var(--ink-2)}
.dialog.welcome .howto{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.dialog.welcome .howto li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;counter-increment:s;font-size:14px}
.dialog.welcome .howto li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:12.5px;display:grid;place-items:center}
.dialog.welcome .row{display:flex;justify-content:flex-end}
.pop.cust .row .hint{font-size:12.5px}

/* ── An invite link's screen, with feedback as a guest (signInView) ── */
.card-lg .eyebrow{margin:0;font:600 11.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.guestform{display:grid;gap:6px;text-align:left}
.guestform label{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:4px}
.guestform label .hint{font-weight:400}
.guestform input{border:1px solid var(--line-2);border-radius:8px;padding:9px 10px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);width:100%}
.guestform button{margin-top:8px;justify-content:center}
.guestform #gmsg:empty{display:none}
.pform label.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;cursor:pointer}
.pform label.chk input{width:16px;height:16px;flex:none;margin-top:2px;padding:0;accent-color:var(--blue)}
.pform label.chk span{font-weight:500;color:var(--ink)}

/* Visible to search and AI (account/review-room.js visibilityHtml) */
.pvis.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.dialog.vis{max-height:min(88vh,860px);overflow:auto}
.vis .pc-row>div{min-width:0}
.vis-t{width:100%;border-collapse:collapse;font-size:12.5px}
.vis-t th{font:600 10.5px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:right;padding:0 0 4px 8px;white-space:nowrap}
.vis-t th:first-child,.vis-t td:first-child{text-align:left;padding-left:0}
.vis-t td{text-align:right;padding:5px 0 5px 8px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.vis-t td:first-child{white-space:normal}
.vis-t td b{font-weight:600;color:var(--ink)}.vis-t td small{display:block;color:var(--ink-3);font-size:11.5px}
.vis-t tr.none td{color:var(--ink-3)}.vis-t tr.none b{font-weight:500;color:var(--ink-3)}
.vis-ppl{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13px;color:var(--ink-2)}.vis-ppl b{color:var(--ink);font-variant-numeric:tabular-nums}
.vis-spark rect{fill:var(--ok)}.vis-spark rect.z{fill:var(--line)}
@media (max-width:700px){.vis-t th:nth-child(2),.vis-t td:nth-child(2){display:none}}

/* ── The feedback loop: what Klaude did with each note, the company's rules (docs/review-layer.md) ── */
.kres{display:grid;gap:6px;border-left:3px solid var(--line-2);padding:2px 0 2px 9px;justify-items:start}
.kres.st-ok,.kres.st-warn,.kres.st-late,.kres.st-open,.kres.st-draft{background:transparent;color:inherit}
.kres.st-ok{border-left-color:var(--ok)}.kres.st-warn{border-left-color:var(--warn)}.kres.st-late{border-left-color:var(--late)}
.kres p{font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.kres .hint{font-size:12px}
.kres .rform{width:100%}
.kres .ruled{display:inline-flex;gap:5px;align-items:center;color:var(--ok)}
.kres .ruled .ic{width:13px;height:13px}
/* A done note leads to its change on the page (review-room.js showChangeOf), and from there to the page before. */
.kres .kchip{cursor:pointer;border:0;font:inherit}
.kres .kchip:hover{filter:brightness(1.08)}
.kres .kgo{display:flex;flex-wrap:wrap;gap:6px}
.kres .kgo .tb{min-height:36px}
.kres .kgo .tb.on{border-color:var(--ok);color:var(--ok)}
@media (pointer:coarse){.kres .kgo .tb{min-height:44px}}
.reply .av.kl{background:var(--ink);color:var(--surface);display:grid;place-items:center}
.reply .av.kl .ic{width:12px;height:12px}
.next.fbsum{margin:0 0 4px}
.fbwhole{margin:2px 0 0}
.fbwait{display:grid;gap:8px;justify-items:start;font-size:13px;line-height:1.45;color:var(--ink-2);border:1px dashed var(--line-2);border-radius:10px;padding:10px 11px}
.fbwait>span{display:flex;gap:6px;align-items:flex-start}
.fbwait>span .ic{width:14px;height:14px;flex:none;margin-top:2px;color:var(--fb)}
.fbrules,.fbset{border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;margin-top:6px}
.fbrules summary,.fbset summary{display:flex;gap:6px;align-items:center;flex-wrap:wrap;cursor:pointer;list-style:none}
.fbrules summary::-webkit-details-marker,.fbset summary::-webkit-details-marker{display:none}
.fbrules summary .ic,.fbset summary .ic{width:14px;height:14px;color:var(--ok)}
.fbset summary .ic{color:var(--ink-3)}
.fbrules ul{margin:8px 0 0;padding:0 0 0 2px;display:grid;gap:7px;list-style:none}
.fbrules li{display:flex;gap:8px;justify-content:space-between;align-items:flex-start;line-height:1.45}
.fbrules li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);margin-top:7px;flex:none}
.fbrules li>span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
.fbrules li.off{color:var(--ink-3);text-decoration:line-through}
.fbrules li.off::before{background:var(--line-2)}
.fbset label{display:flex;gap:8px;align-items:flex-start;margin-top:8px;line-height:1.4;color:var(--ink-2)}
.fbset input{margin-top:3px;accent-color:var(--ok)}

/* ── a customer's room (review-customer.js): back to all their pages, Approve, and on a phone the bar along the bottom ── */
.rh .allp{flex:none}
.rbar .apb{color:#BFF0CF}
.rbar .apb:hover{color:#fff}
.rbar .apb.done{color:#7BE39B}
/* A gap still on the page ("[number]"): no Approve until it's filled in; pressing says what's left. */
.rbar .apb.gap{color:#FFD08A}
.rbar .heldchip{display:inline-flex;align-items:center;gap:6px;padding:0 8px;color:#FFD08A;font-size:12px;white-space:nowrap}
@media (max-width:480px){
  .hide-xs{display:none!important}
  .rh .allp{padding:0;min-width:44px;min-height:44px;justify-content:center}
  /* The page first, then the bar under it: the bar takes its own row, so it never covers the page's title. */
  .app.cust .stage{grid-template-rows:auto 1fr auto auto}
  .app.cust #barwrap{position:relative;z-index:30}
  .app.cust #barwrap .rbar,.app.cust .body.bar-full #barwrap .rbar{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;translate:none;max-width:none;width:100%;
    border-radius:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));gap:6px;justify-content:stretch}
  .app.cust #barwrap .rbar::before{display:none}
  .app.cust .rbar .grip,.app.cust .rbar .colb,.app.cust .rbar .sep{display:none}
  .app.cust .rbar button{min-height:44px;justify-content:center}
  .app.cust .rbar .hero{flex:1 1 auto}
  .app.cust .rbar .kfb,.app.cust .rbar .apb{flex:0 0 auto;min-width:56px}
  .app.cust .rbar .hero .lbl,.app.cust .rbar .apb .lbl{display:inline}
  .app.cust .rh [data-tabgo]{display:none}
  .app.cust .rbar .bhint{display:none}
  .app.cust.reading #barwrap .rbar{opacity:1;transform:none;pointer-events:auto}
  /* The feedback sheet opens above the bar, not over it. */
  .app.cust .panel{bottom:calc(56px + env(safe-area-inset-bottom,0px));height:min(62%,calc(100% - 120px))}
}
/* On a phone the gap's words shorten to fit the bar; pressing it says them in full. */
@media (max-width: 640px) { .rbar .apb.gap { min-width: 0; flex: 0 1 auto; } .rbar .apb.gap .lbl { display: inline-block; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } }
/* A customer's pinned question (review-room.js questionPin): phones only, where the feedback list is a sheet away. */
.banner.cq{display:none;background:var(--warn-soft);color:var(--ink);border-bottom-color:var(--warn)}
.banner.cq .ic{color:var(--warn);flex:none}
.banner.cq .grow{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.banner.cq .tb{min-height:44px}
@media (max-width:640px){.banner.cq{display:flex}}
/* A customer on a phone: the header's two round buttons and the welcome's button are full 44px tap targets (the
   transparent border is the extra reach; what shows stays the same size). */
@media (max-width:640px){
  .app.cust .rh .navbtn{width:44px;height:44px;border:9px solid transparent;background-clip:padding-box}
  .app.cust .rh .me{border:8px solid transparent;background-clip:padding-box;margin:-8px 0}
  .app.cust .dialog.welcome .tb{min-height:44px}
}
/* A customer's room in their company's look (account/kit-brand.js, review-room.js brandHeader) */
.crumb .blogo{display:inline-flex;align-items:center;flex:none}
.crumb .blogo img{display:block;height:26px;width:auto;max-width:140px;object-fit:contain}
.crumb .blogo.chip{background:#fff;border-radius:6px;padding:3px 7px}
.crumb .blogo.chip.dark{background:#111}
@media (max-width:420px){.crumb .blogo img{max-width:88px;height:22px}}

/* ── Klaude's walk-through of a rewrite (review-walk.js): in place of the panel, beside the page ── */
.app.walking #panel{display:none}
.walk{width:min(410px,40vw);min-height:0;overflow-y:auto;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;font-size:14px;line-height:1.5;color:var(--ink)}
.wk-head{position:sticky;top:0;z-index:1;display:flex;gap:10px;align-items:center;padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.wk-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex:none}
.wk-ttl{flex:1;min-width:0;display:flex;flex-direction:column}.wk-ttl small{color:var(--ink-3);font-size:12px}
.wk-prog{height:3px;background:var(--sunk)}.wk-prog i{display:block;height:100%;background:var(--blue);transition:width .3s}
.wk-body{padding:16px 16px 24px;display:flex;flex-direction:column;gap:12px}
.wk-body h3{margin:0;font-size:17px;line-height:1.3;text-wrap:balance}
.wk-body h4{margin:4px 0 -4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wk-say{margin:0;color:var(--ink)}
.wk-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.wk-n{margin-right:auto}
.wk-chip{display:inline-flex;gap:4px;align-items:center;padding:2px 8px;border-radius:999px;font-size:11.5px;background:var(--sunk);color:var(--ink-2)}
.wk-chip.k-added{background:var(--blue-soft);color:var(--blue)}.wk-chip.k-removed{background:var(--late-soft);color:var(--late)}
.wk-chip.done{background:var(--ok-soft);color:var(--ok)}
.wk-chip svg{width:12px;height:12px}
.wk-qs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wk-qs li{padding:9px 11px;border-radius:8px;background:var(--sunk);display:flex;flex-direction:column;gap:3px}
.wk-qs q{font-style:italic;color:var(--ink)}.wk-qs small{color:var(--ink-3);font-size:12px}
.wk-ba{border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.wk-ba summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.wk-col{margin-top:8px}.wk-col small{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.wk-col p{margin:3px 0 0;font-size:13px;color:var(--ink-2)}.wk-col.ours p{color:var(--ink)}
.wk-blank{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px}
.wk-ask{display:flex;gap:9px;padding:10px 12px;border-radius:8px;background:var(--blue-soft);color:var(--ink)}
.wk-ask span{color:var(--blue);flex:none;padding-top:2px}.wk-ask p{margin:0}
.wk-note{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.wk-note textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;resize:vertical;min-height:64px}
.wk-acts{display:flex;gap:8px;flex-wrap:wrap}
.wk-nav{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.wk-sum{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.wk-li{width:100%;display:flex;justify-content:space-between;gap:10px;align-items:baseline;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.wk-li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wk-li em{font-style:normal;color:var(--ink-3);flex:none;font-size:12px}
.wk-li.todo{border-color:var(--blue)}.wk-li.todo em{color:var(--blue)}
.walk .spin{animation:wkspin 1s linear infinite;vertical-align:-2px}@keyframes wkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.walk .spin{animation:none}.wk-prog i{transition:none}}
@media (max-width:760px){
  .app.walking .wakepills,.app.walking .wakepill,.app.walking #barwrap,.app.walking .zoomer{display:none!important}
  .walk{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:58vh;border-left:0;border-top:1px solid var(--line-2);border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);z-index:40;padding-bottom:env(safe-area-inset-bottom,0px)}
}
.wk-more summary{cursor:pointer;font-size:13px;color:var(--ink-2);margin-bottom:8px}
.wk-foot{position:sticky;bottom:0;margin:0 -16px -24px;padding:12px 16px 14px;background:var(--surface);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.wk-foot .wk-nav{border-top:0;padding-top:0}

/* ── Pages by client (account/client-ws.js): a card per client, then a client's workspace ── */
#cards.clients{display:block}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.ccard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
.ccard:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the newest page's card, with the next two fanned at its corner */
.cc-faces{position:relative;display:block;aspect-ratio:1280/672;background:var(--sunk);overflow:hidden}
.cc-face{display:block;object-fit:cover;object-position:top left;background:var(--sunk)}
.cc-face.lead{width:100%;height:100%}
.cc-face.fan{position:absolute;width:30%;aspect-ratio:1280/672;height:auto;border-radius:6px;border:2px solid var(--surface);box-shadow:0 6px 18px -6px rgba(0,0,0,.45);transition:transform .2s}
.cc-face.f1{right:12px;bottom:12px;transform:rotate(3deg)}.cc-face.f2{right:30px;bottom:24px;transform:rotate(-4deg);z-index:-0}
.cc-faces .f2{z-index:1}.cc-faces .f1{z-index:2}
.ccard:hover .cc-face.f1{transform:rotate(6deg) translate(4px,-2px)}.ccard:hover .cc-face.f2{transform:rotate(-7deg) translate(-6px,-4px)}
.cc-b{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}
.cc-h{display:flex;align-items:center;gap:10px}
.cc-t{display:grid;gap:1px;min-width:0;flex:1}.cc-t b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-t small{color:var(--ink-3);font:12px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-due{min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--warn);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.cc-bar{display:flex;gap:2px;height:6px;border-radius:999px;overflow:hidden;background:var(--sunk)}
.cc-bar i{display:block;height:100%}.cc-bar .lv{background:var(--ok)}.cc-bar .ap{background:color-mix(in srgb,var(--ok) 55%,var(--surface))}.cc-bar .rd{background:var(--warn)}.cc-bar .kl{background:var(--blue)}
.cc-n{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink-3)}.cc-n b{color:var(--ink);font-weight:650}
.cc-n .rd b{color:var(--warn)}.cc-n .kl b{color:var(--blue)}.cc-n .lv b{color:var(--ok)}
.cc-go{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--blue-ink);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.ccard:hover .cc-go,.ccard:focus-visible .cc-go{opacity:1;transform:none}
.cc-go .ic{width:14px;height:14px}

body.ws-on{overflow:hidden}
.ws-host{height:100vh;height:100dvh}
.ws{display:grid;grid-template-columns:clamp(300px,26vw,380px) minmax(0,1fr);height:100%;background:var(--paper)}
.ws-rail{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--surface)}
.ws-head{display:grid;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.ws-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:none;justify-self:start;padding:4px 8px 4px 4px;border-radius:8px}
.ws-back:hover{background:var(--sunk);color:var(--ink)}.ws-back .ic{width:15px;height:15px}
.ws-co{display:flex;gap:10px;align-items:center}.ws-co span{display:grid;gap:1px;min-width:0}.ws-co b{font-size:17px}.ws-co small{font-size:12px;color:var(--ink-3)}
.ws-tot{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--ink-3);align-items:center;min-height:18px}
.ws-tot span{display:inline-flex;align-items:center;gap:4px}.ws-tot b{color:var(--ink)}.ws-tot .ic{width:13px;height:13px}.ws-tot small{font-size:11.5px}
.ws-q{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--paper)}
.ws-q input{all:unset;flex:1;font-size:14px}.ws-q .ic{width:15px;height:15px;color:var(--ink-3)}
.ws-f{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}.ws-f::-webkit-scrollbar{display:none}
.ws-f button{all:unset;cursor:pointer;flex:none;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.ws-f button span{color:var(--ink-3);font-weight:500;margin-left:2px}
.ws-f button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}.ws-f button[aria-selected=true] span{color:inherit;opacity:.7}
.ws-list{flex:1;overflow-y:auto;padding:6px 8px 20px}
.ws-sub{margin:12px 8px 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.ws-sub span{font-weight:500}
.ws-row{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:12px;position:relative}
.ws-row:hover{background:var(--sunk)}
.ws-row.cur{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.ws-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.ws-thumb{width:64px;height:40px;border-radius:7px;object-fit:cover;object-position:top;display:block;background:var(--sunk);border:1px solid var(--line)}
span.ws-thumb.none{display:grid;place-items:center;overflow:hidden}
.ws-t{display:grid;gap:3px;min-width:0}.ws-t b{font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ws-t .mono{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ws-reach{display:inline-flex;gap:8px;align-items:center;font:500 11.5px var(--mono);color:var(--ink-2)}
.ws-reach .ic{width:12px;height:12px;margin-right:2px;color:var(--ink-3);vertical-align:-1px}.ws-reach.dim,.ws-reach:not(:has(.ic)){color:var(--ink-3);font-family:var(--sans)}
.ws-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.ws-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface);min-height:52px}
.ws-bar .push{flex:1}.ws-pos{font:500 12px var(--mono);color:var(--ink-3);min-width:56px;text-align:center}
.ws-title{font-size:14px;margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ws-frame{flex:1;min-height:0;position:relative}
.ws-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--paper)}
.ws-empty{height:100%;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--ink-3);text-align:center;padding:24px}.ws-empty .ic{width:28px;height:28px}.ws-empty b{color:var(--ink);font-size:16px}.ws-empty p{margin:0;max-width:36ch}
@media (max-width:859px){.ws{grid-template-columns:1fr}.ws-main{display:none}.ws-rail{border-right:0}}

/* numbers on hover */
.htip{position:fixed;z-index:9999;width:250px;background:var(--ink);color:var(--surface);border-radius:12px;padding:12px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);pointer-events:none;font-size:13px;animation:htin .12s ease-out}
.htip p{margin:0}.htip .ht-h{font-weight:650;line-height:1.3;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.htip .ht-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.htip .ht-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.htip .ht-g span{display:grid;gap:1px;font-size:11.5px;opacity:.85}.htip .ht-g b{font:600 18px/1.1 var(--mono);opacity:1}
.htip .ht-bots{margin-top:8px;font-size:11.5px;opacity:.8;display:flex;gap:5px;align-items:center}.htip .ht-bots .ic{width:12px;height:12px}
.htip .ht-none,.htip .dim{opacity:.75;line-height:1.45}
@keyframes htin{from{opacity:0;transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){.htip,.ccard,.cc-go{animation:none;transition:none}}

/* the Pages home's top, for operators: what it is and the two ways to start */
.maker.op{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.maker.op .mk-t{display:grid;gap:6px;min-width:0;flex:1 1 420px}
.maker.op .mk-a{display:flex;gap:8px;flex-wrap:wrap}
.cothers{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
.cothers summary{cursor:pointer;display:flex;align-items:baseline;gap:8px;font-weight:650;font-size:14px;color:var(--ink-2);list-style:none}
.cothers summary::-webkit-details-marker{display:none}
.cothers summary::before{content:"▸";color:var(--ink-3);transition:transform .15s}.cothers[open] summary::before{transform:rotate(90deg)}
.cothers summary span{color:var(--ink-3);font-weight:500}.cothers summary small{color:var(--ink-3);font-weight:400;font-size:12.5px}
.cgrid.sm{margin-top:14px;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.cgrid.sm .cc-faces{display:none}

.ccwrap{position:relative;display:flex}.ccwrap .ccard{flex:1}
.ccpin{all:unset;cursor:pointer;position:absolute;z-index:3;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2);box-shadow:0 2px 8px -2px rgba(0,0,0,.2);opacity:0;transition:opacity .15s}
.ccpin .ic{width:13px;height:13px}
.ccwrap:hover .ccpin,.ccpin:focus-visible{opacity:1}
.ccpin:focus-visible{outline:2px solid var(--blue)}
.cgrid.sm .ccpin{position:static;opacity:1;align-self:center;margin-left:auto;order:2;background:none;border-color:var(--line);box-shadow:none}
.cgrid.sm .ccwrap{align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding-right:10px;background:var(--surface)}
.cgrid.sm .ccard{border:0;background:none}
@media (hover:none){.ccpin{opacity:1}}

/* the workspace: where a page can be read and whether it's indexed, and the client's drip at a glance */
.ws-bar{flex-wrap:wrap;row-gap:8px}
.ws-where{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:var(--sunk);border:1px solid var(--line)}
.ww-place{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ww-url{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 280px;font:600 14px var(--mono);color:var(--ink);text-decoration:none}
.ww-url .ic{color:var(--blue)}
.ww-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ww-url .ic{width:15px;height:15px;flex:none}.ww-url:hover span{text-decoration:underline;text-underline-offset:3px}
.ww-url.none{font:500 13.5px var(--sans);color:var(--ink-2)}
.ww-copy{all:unset;cursor:pointer;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3)}.ww-copy:hover{background:var(--surface);color:var(--ink)}.ww-copy .ic{width:15px;height:15px}
.ww-ix{all:unset;cursor:pointer;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 12px 6px 8px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2)}
.ww-ix .t{grid-row:1/3;position:relative;width:38px;height:22px;border-radius:999px;background:var(--line-2);transition:background .2s}
.ww-ix .t::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.ww-ix b{font-size:13.5px;color:var(--no)}.ww-ix small{font-size:11.5px;color:var(--ink-3)}
.ww-ix.on{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}.ww-ix.on .t{background:var(--ok)}.ww-ix.on .t::after{left:19px}.ww-ix.on b{color:var(--ok)}
.ww-ix:focus-visible{outline:2px solid var(--blue)}.ww-ix:disabled{opacity:.6;cursor:default}
.ix{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ix.on{background:var(--ok-soft);color:var(--ok)}.ix.off{background:var(--no-soft);color:var(--no)}.ix.none{background:var(--sunk);color:var(--ink-3)}
.ws-status{display:grid;gap:5px;padding:10px 12px;border-radius:12px;background:var(--sunk);font-size:12.5px}
.wst-row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.wst-k{flex:none;width:52px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wst-v{color:var(--ink-2);min-width:0}.wst-v b{color:var(--ink);font-weight:600}
.wst-chip{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px}
.wst-chip i{width:8px;height:8px;border-radius:50%;background:currentColor}
.wst-chip.on{color:var(--ok)}.wst-chip.off{color:var(--warn)}.wst-chip.none{color:var(--ink-3)}
.wst-hub{display:inline-flex;align-items:center;gap:5px;font:600 12px var(--mono);color:var(--ink-2);text-decoration:none;margin-left:60px}.wst-hub .ic{width:13px;height:13px}

/* ── The open proposal (account/proposal.js): the page as proposed, Klaude's guide beside it, no sign-in ── */
.pv{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--paper)}
.pv-top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.pv-co{display:grid;gap:1px;min-width:0}.pv-co b{font-size:15px}.pv-co small{font-size:12.5px;color:var(--ink-3)}.pv-co .mono{color:var(--ink-2)}
.pv-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--sunk);font-size:12px;font-weight:600;color:var(--ink-2)}.pv-badge .ic{width:13px;height:13px}
.pv-top .push{flex:1}
.pv-legend{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.pv-legend i{width:12px;height:12px;border-radius:3px;margin-left:6px}.pv-legend i.added{background:rgba(46,160,67,.35);outline:2px solid rgba(46,160,67,.7)}.pv-legend i.changed{background:rgba(212,160,23,.3);outline:2px solid rgba(212,160,23,.7)}
.pv-top .tb svg{vertical-align:-3px;margin-right:2px}
.pv-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,30vw,440px)}
.pv-stage{position:relative;min-width:0;background:var(--sunk)}
.pv-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pv-guide{overflow-y:auto;border-left:1px solid var(--line);background:var(--surface);padding:22px 22px 32px;display:flex;flex-direction:column;gap:16px}
.pv-guide h2{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.01em}.pv-guide h3{margin:0;font-size:19px;line-height:1.25}
.pv-eb{margin:0;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}.pv-eb .ic{width:14px;height:14px}
.pv-lead{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.pv-why b,.pv-blk>b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.pv-why p{margin:0;font-size:15px;line-height:1.55}
.pv-qs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-qs li{padding:10px 12px;border-radius:10px;background:var(--sunk);font-size:14px;line-height:1.45}
.pv-qs small{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700}
.pv-qs small.no{background:var(--no-soft);color:var(--no)}.pv-qs small.some{background:var(--warn-soft);color:var(--warn)}.pv-qs small.yes{background:var(--ok-soft);color:var(--ok)}
.pv-guide .fine{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)}
.pv-acts{display:grid;gap:4px}
.tb.big{padding:12px 18px;font-size:15px;justify-content:center}
.pv-prog{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pv-prog .dots{display:flex;gap:4px}.pv-prog .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}.pv-prog .dots i.done{background:var(--ok)}.pv-prog .dots i.on{background:var(--blue);transform:scale(1.25)}
.pv-type{margin:0;display:inline-block;justify-self:start;align-self:flex-start;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pv-type.added{background:var(--ok-soft);color:var(--ok)}.pv-type.changed{background:var(--warn-soft);color:var(--warn)}.pv-type.removed{background:var(--no-soft);color:var(--no)}
.pv-ba summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.pv-ba .ba{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--sunk);font-size:13.5px;line-height:1.5}.pv-ba .ba.new{background:var(--ok-soft)}
.pv-ba .ba span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}.pv-ba .ba p{margin:0}
.pv-ba mark.blank{background:#ffe08a;color:#3d2c00;padding:0 3px;border-radius:3px}
.pv-ask{padding:12px 14px;border-radius:12px;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent)}
.pv-ask b{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--blue)}.pv-ask .ic{width:15px;height:15px}.pv-ask p{margin:4px 0 0;font-size:14.5px;line-height:1.5}
.pv-pick p{margin:0 0 8px;font-weight:650;font-size:14px}
.pv-pick .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pk{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;border:1px solid var(--line-2);font-size:13px;font-weight:600;text-align:center;color:var(--ink-2);background:var(--surface)}
.pk .ic{width:18px;height:18px}.pk:hover{border-color:var(--ink-3)}.pk:focus-visible{outline:2px solid var(--blue)}
.pk.on[data-pick=approve]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}.pk.on[data-pick=change]{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}.pk.on[data-pick=drop]{background:var(--no-soft);border-color:var(--no);color:var(--no)}
.pv-guide textarea{width:100%;box-sizing:border-box;margin-top:8px;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font:14px/1.5 var(--sans);resize:vertical;background:var(--paper)}
.pv-nav{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px}.pv-nav .push{flex:1}
.pv-gate{padding:16px;border-radius:14px;background:var(--sunk);display:grid;gap:10px}.pv-gate p{margin:0;font-size:14px;line-height:1.5}
.pv-gate .tb svg{margin-right:4px}
@media (max-width:860px){
  .pv-body{grid-template-columns:1fr;grid-template-rows:minmax(0,45vh) auto}
  .pv-guide{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .pv{height:auto;min-height:100vh}.pv-stage{min-height:45vh}
  .pv-legend{display:none}
}

/* ── The room inside a client's workspace (?ws=1, account/client-ws.js): the page keeps the whole frame ──
   No header, no page bar, nothing coming and going: the workspace's bar above holds what they did. The review bar
   stays as the dock on the page; the panel opens over the page as a drawer, and closes again. */
.app.ws-embed #banner>:not(.qstrip){display:none!important}
.app.ws-embed .wz,.app.ws-embed .wakepills{display:none!important}
.app.ws-embed.reading #barwrap .rbar{opacity:1;pointer-events:auto}
.app.ws-embed.reading #barwrap.dock-bc .rbar,.app.ws-embed.reading #barwrap.dock-tc .rbar{transform:translateX(-50%)}
.app.ws-embed.reading #barwrap:not(.dock-bc):not(.dock-tc) .rbar{transform:none}
.app.ws-embed .body{grid-template-columns:1fr}
.app.ws-embed #panel{position:absolute;top:10px;right:10px;bottom:10px;width:min(var(--pw,400px),calc(100% - 40px));z-index:40;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);overflow:hidden;animation:wsdrawer .18s ease-out}
.app.ws-embed .pgrip{display:none}
.app.ws-embed .zoomer{opacity:.45}.app.ws-embed .zoomer:hover{opacity:1}
@keyframes wsdrawer{from{transform:translateX(24px);opacity:.4}}
@media (prefers-reduced-motion:reduce){.app.ws-embed #panel{animation:none}}

/* the workspace's one bar (account/client-ws.js drawBar) */
.ws-bar{flex-wrap:nowrap;gap:10px;padding:8px 12px;min-height:56px}
.ws-bar .ws-where{flex-basis:auto;display:flex;padding:0;border:0;background:none;border-radius:0}
.ws-nav{display:inline-flex;align-items:center;gap:2px;flex:none;padding:2px;border-radius:10px;background:var(--sunk)}
.ws-nav .ib{width:30px;height:30px}.ws-nav .ws-pos{min-width:38px;font:600 12px var(--mono);color:var(--ink-2);text-align:center}
.ws-tt{display:flex;align-items:center;gap:8px;min-width:120px;flex:1 1 auto}
.ws-tt .ws-title{margin:0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ws-tt .chip{flex:none}
.ws-seg{display:inline-flex;flex:none;padding:3px;border-radius:999px;background:var(--sunk)}
.ws-seg button{all:unset;cursor:pointer;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-3)}
.ws-seg button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ws-seg button[aria-selected=true]:last-child{color:var(--ok)}
.ws-seg button:focus-visible{outline:2px solid var(--blue)}
.wc{display:inline-flex;align-items:center;gap:2px;min-width:0;max-width:min(440px,34vw);padding:3px 3px 3px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface)}
.wc a{display:inline-flex;align-items:center;gap:5px;min-width:0;text-decoration:none;color:var(--ink-2);font:500 12.5px var(--mono)}
.wc a .ic{width:14px;height:14px;flex:none;color:var(--blue)}.wc a .h{display:none}
.wc a b{color:var(--ink);font-weight:700;white-space:nowrap}.wc a:hover b{text-decoration:underline;text-underline-offset:3px}
.wc-copy{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);flex:none}.wc-copy:hover{background:var(--sunk);color:var(--ink)}.wc-copy .ic{width:14px;height:14px}
.wc-ix{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;border-radius:999px;font-size:12px;font-weight:700;background:var(--no-soft);color:var(--no)}
.wc-ix .t{position:relative;width:28px;height:16px;border-radius:999px;background:color-mix(in srgb,var(--no) 35%,var(--surface));transition:background .2s}
.wc-ix .t::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s}
.wc.on .wc-ix{background:var(--ok-soft);color:var(--ok)}.wc.on .wc-ix .t{background:var(--ok)}.wc.on .wc-ix .t::after{left:14px}
.wc-ix:focus-visible{outline:2px solid var(--blue)}.wc-ix:disabled{opacity:.6;cursor:default}
.wc.none{padding:5px 12px;gap:6px;font-size:12.5px;color:var(--ink-3)}.wc.none .ic{width:14px;height:14px}
.ws-more{position:relative;flex:none}
.ws-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:290px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);display:grid}
.ws-menu button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.ws-menu button:hover,.ws-menu button:focus-visible{background:var(--sunk)}.ws-menu .ic{width:16px;height:16px;margin-top:1px;color:var(--ink-3);flex:none}
.ws-menu small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:1px}
@media (max-width:1180px){.ws-tt .chip{display:none}.wc a .h{display:none}}

/* the suggestion in view (review-room.js suggestionHtml): one section, why we made it, the questions it helps */
#rvdock{display:flex;flex-direction:column-reverse;align-items:center;gap:8px}
/* Its header and answer row stay put; only the reasons between them scroll, so Approve is never below the fold. */
#rvdock .sugg{pointer-events:auto;width:min(560px,calc(100vw - 48px));max-height:min(46vh,440px);overflow:hidden;padding:0;background:#fff;color:#1f1d1a;border:1px solid #d9e7dc;border-radius:16px;box-shadow:0 18px 44px -14px rgba(15,23,42,.35);display:flex;flex-direction:column;white-space:normal;animation:sgin .16s ease-out}
#rvdock .sugg>.sg-h{flex:none;padding:12px 10px 8px 14px}
#rvdock .sugg>.sg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 12px;display:grid;gap:10px;align-content:start}
#rvdock .sugg>.sg-foot{flex:none;padding:10px 16px 12px;border-top:1px solid #eef0ec;background:#fbfcfa;display:grid;gap:8px}
.sg-h{display:flex;align-items:center;gap:8px}.sg-h>b{font-size:14.5px;line-height:1.3;flex:1 1 auto;min-width:0}.sg-h small{font-size:11.5px;color:#7a746c}
.sg-x{flex:none;margin-left:auto;align-self:flex-start}
/* Klaude's K: on the card it marks the reasoning as Klaude's; in the bar it shows or hides the card. */
.sg-kav,.sg-kbtn{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#B8532F;color:#fff;font:800 13px/1 Inter,system-ui,sans-serif;letter-spacing:0}
.sg-kbtn{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;cursor:pointer;font:800 13px/1 Inter,system-ui,sans-serif;background:#fff;color:#B8532F;border:1.5px solid #B8532F}
.sg-kbtn.on{background:#B8532F;color:#fff}.sg-kbtn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.sg-kbtn:not(.on){animation:sgk 2.4s ease-in-out 2}
@keyframes sgk{50%{box-shadow:0 0 0 5px rgba(22,163,74,.22)}}
.rvs-ok.r2{border-color:#c7d2fe;color:#3730a3;background:#eef2ff}
.sg-r2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:#57524b}.sg-r2>span{font-weight:600;margin-right:2px}
.sg-chip{all:unset;cursor:pointer;font-size:12.5px;line-height:1.2;padding:6px 10px;border-radius:999px;border:1px solid #c7d2fe;background:#eef2ff;color:#3730a3}
.sg-chip:hover{background:#e0e7ff}.sg-chip:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.sg-chip.ghost{background:transparent;border-style:dashed;color:#57524b;border-color:#cfcac2}
.sg-r2f{display:grid;gap:6px}.sg-r2f label{font-size:12.5px;font-weight:700;color:#3f3a33}
.sg-r2f textarea{font:inherit;font-size:13px;padding:8px 10px;border:1px solid #cfcac2;border-radius:9px;resize:vertical;min-height:52px}
.sg-done.r2{color:#3730a3}
.sg-err{margin:0;font-size:13px;color:#b91c1c}
.sg-proof{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sg-proof li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35}.sg-proof .ic{width:16px;height:16px;flex:none;margin-top:1px}
.sg-proof li.ok .ic{color:#16a34a}.sg-proof li.no .ic{color:#dc2626}.sg-proof li.soft .ic{color:#a8a29e}
.sg-proof small{display:block;color:#6b665e;font-size:11.5px;word-break:break-word}
.sg-meta{margin:0;font-size:11.5px;color:#6b665e}.sg-meta a{color:inherit}
@media (max-width:560px){#rvdock .sugg{max-height:52vh}.sg-r2>span{flex-basis:100%}#rvdock .sugg>.sg-h{flex-wrap:wrap}.sg-h>b{order:3;flex-basis:100%}}
.sg-nav{flex:none;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:#f3f1ed}.sg-nav .ib{width:30px;height:30px;border-radius:999px}.sg-nav .ib:hover{background:#fff}.sg-pos{font-size:12.5px;color:#5f5a52;padding:0 4px;white-space:nowrap;font-variant-numeric:tabular-nums}.sg-pos b{color:#1f1d1a}
.sg-k{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;flex:none}
.sg-k.add{background:#dcfce7;color:#15803d}.sg-k.chg{background:#fef3c7;color:#92400e}.sg-k.rem{background:#fee2e2;color:#b91c1c}
.sg-why{margin:0;font-size:13.5px;line-height:1.55;color:#2f2b26}.sg-why span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a746c;margin-bottom:2px}
.sg-q{list-style:none;margin:0;padding:0;display:grid;gap:6px}.sg-q li{font-size:13px;line-height:1.4;padding:7px 10px;border-radius:9px;background:#f6f5f2}
.sg-q small{display:block;margin-top:3px;font-size:11px;font-weight:700;color:#b91c1c}
.sg-ask{margin:0;display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.45;padding:8px 10px;border-radius:9px;background:#eef4ff;color:#1e3a8a}.sg-ask .ic{width:14px;height:14px;flex:none;margin-top:2px}
.sugg .tb.sm{justify-self:start}
@keyframes sgin{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){#rvdock .sugg{animation:none}}
.sg-a{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lnkb{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:#57524b;text-decoration:underline;text-underline-offset:3px}.lnkb:hover{color:#1f1d1a}.lnkb:focus-visible{outline:2px solid #2563eb;border-radius:3px}
.sg-done{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#15803d}.sg-done .ic{width:16px;height:16px}
.sg-why.wait{display:flex;align-items:center;gap:8px;color:#57524b}
#rvdock .sugg.ready{border-color:#86efac;background:linear-gradient(180deg,#f0fdf4,#fff)}
#rvdock .sugg.done{border-color:#86efac}
.sg-k .ic{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
/* The card, in layers (Kolin, 2026-11-03): who and what kind, the title, one sentence, the buyer questions, the rest of the
   reasoning folded; the answer row pinned under it. Approved, it stays: a check, the count, and what's next. */
.sg-hk{flex:1 1 auto;min-width:0;font-size:12.5px;color:#6b665e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sg-hk b{color:#1f1d1a;font-weight:700}
.sg-kind{font-weight:700;letter-spacing:.02em}.sg-kind.add{color:#15803d}.sg-kind.chg{color:#1d4ed8}.sg-kind.rem{color:#b91c1c}
.sg-title{margin:2px 0 0;font-size:16px;line-height:1.3;font-weight:700;color:#1f1d1a}
.sg-lede{margin:0;font-size:14px;line-height:1.5;color:#2f2b26}
.sg-whyd{border-top:1px solid #eef0ec;padding-top:6px}.sg-whyd summary{cursor:pointer;font-size:13px;font-weight:650;color:#3f3a33;padding:4px 0;list-style:none;display:flex;align-items:center;justify-content:space-between}
.sg-whyd summary::-webkit-details-marker{display:none}.sg-whyd summary::after{content:"+";font-size:16px;color:#7a746c}.sg-whyd[open] summary::after{content:"−"}
.sg-whyd p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:#2f2b26}
.sg-q li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}.sg-q li>span{flex:1 1 auto;min-width:0}
.sg-q li small{flex:none;margin-top:1px;padding:2px 8px;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:700;white-space:nowrap}
.sg-okd{display:flex;gap:12px;align-items:center}.sg-okd b{display:block;font-size:15px;color:#14532d}.sg-okd small{display:block;font-size:12.5px;color:#4b5563;margin-top:2px}
.sg-okic{flex:none;width:34px;height:34px;border-radius:50%;background:#2E7D32;color:#fff;display:grid;place-items:center;animation:sgok .5s cubic-bezier(.2,1.6,.4,1)}.sg-okic .ic{width:18px;height:18px}
@keyframes sgok{from{transform:scale(.3);opacity:0}}
#rvdock .sugg.okd{border-color:#86efac}#rvdock .sugg.okd>.sg-foot{background:#f0fdf4}
@media (prefers-reduced-motion:reduce){.sg-okic{animation:none}}

/* New page or rewrite, beside the title (review-room.js kindChip) */
.kchip{display:inline-flex;align-items:baseline;gap:6px;flex:none;font:700 11px/1 var(--sans,system-ui);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;white-space:nowrap}
.kchip small{font:500 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:0;text-transform:none;opacity:.85}
.kchip.nw{background:#dbeafe;color:#123a7a}.kchip.rw{background:#fdf0c8;color:#5c4300}
@media (max-width:1100px){.kchip small{display:none}}

/* Where the page is read (review-room.js whereHtml): its address on the hub, in search or not, copy; Hub and Live page */
.where{display:inline-flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--panel,#fff)}
.wh-a{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:5px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font:500 12.5px/1.2 var(--mono,ui-monospace,monospace)}
.wh-a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wh-a .ic{width:14px;height:14px;flex:none;color:var(--ink-3)}
.wh-a:hover{background:var(--sunk)}.wh-a.off{color:var(--ink-3)}
.wh-ix{flex:none;border:0;cursor:pointer;font:650 12px/1 var(--sans,system-ui);padding:6px 9px;border-radius:999px;background:#fdecc8;color:#7a4d00;white-space:nowrap}
.wh-ix.on{background:#d9f2e3;color:#15803d}.wh-ix:hover{filter:brightness(.97)}
.where .ib{flex:none}
.wh-go{flex:none}
@media (max-width:860px){.wh-a span{max-width:22vw}}
@media (max-width:640px){.where .wh-a span{display:none}}

/* The drawer's Pages, by client (review-room.js clientsHtml): clients down the side, the picked one's pages beside them */
.drawer.wide{width:min(900px,96vw)}
.dr-l.dr-cl{display:grid;grid-template-columns:240px minmax(0,1fr);padding:0;overflow:hidden;min-height:0}
.drc-rail{overflow-y:auto;border-right:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:2px;background:var(--sunk);min-height:0}
.drc{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 9px;border-radius:10px;cursor:pointer;text-align:left;color:var(--ink);font:inherit}
.drc:hover{background:var(--surface)}.drc.on{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 2px 6px -3px rgba(0,0,0,.15)}
.drc>span:not(.bmk):not(.bm):not(.cnt){display:flex;flex-direction:column;min-width:0;flex:1}.drc b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drc small{font-size:11.5px;color:var(--ink-3)}
.drc .cnt.warn{background:#fdecc8;color:#7a4d00}
.drc-main{overflow-y:auto;min-height:0;padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
.drc-h{display:flex;align-items:center;gap:12px}.drc-h>span:last-child{display:flex;flex-direction:column;min-width:0}.drc-h b{font-size:18px;font-weight:700;letter-spacing:-.01em}.drc-h small{color:var(--ink-3);font-size:12.5px}
.drc-go{display:flex;flex-wrap:wrap;gap:6px}
.drg{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:13px;font-weight:600}
.drg:hover{border-color:var(--ink-3)}.drg .ic{width:15px;height:15px}
.drc-f,.drc-k{display:flex;flex-wrap:wrap;gap:4px}
.drc-f button,.drc-k button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2,var(--ink));border-radius:999px;padding:6px 11px;font:600 12.5px/1 inherit;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.drc-f button span{font-weight:500;color:var(--ink-3)}
.drc-f button.on,.drc-k button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}.drc-f button.on span{color:inherit;opacity:.75}
.drc-k button{border-style:dashed;padding:5px 10px;font-size:12px}
.drc-l{display:flex;flex-direction:column;gap:2px}
@media (max-width:700px){
  .dr-l.dr-cl{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .drc-rail{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line)}
  .drc{width:auto;flex:none}.drc small{display:none}
}
/* A client's mark in the rail and header: a small square, so the name has the room */
.drc .bmk{width:34px;height:34px;min-width:34px;flex:none;border-radius:8px;overflow:hidden}
.drc .bmk img{width:100%;height:100%;object-fit:contain}
.drc-h .bmk{width:44px;height:44px;min-width:44px;flex:none;border-radius:10px;overflow:hidden}.drc-h .bmk img{width:100%;height:100%;object-fit:contain}
.drc .bm.none{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:var(--surface);color:var(--ink-3)}

/* One header row for a page (review-room.js pageHeadHtml): never wraps; the title gives way first */
.rh{flex-wrap:nowrap}
.rh .crumb{min-width:0;flex:1 1 auto}
.rh .rtitle{min-width:0}
.rh .rtitle b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh .kchip small{display:none}
.phead{display:inline-flex;align-items:center;gap:8px;flex:none;min-width:0}
.pdots{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;background:var(--sunk);font-size:12.5px;white-space:nowrap}
.pdots i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--ink-3);display:inline-block}
.pdots i.done{background:var(--ok,#15803d);border-color:var(--ok,#15803d)}.pdots i.now{background:var(--accent,#2f55d4);border-color:var(--accent,#2f55d4)}
.pdots b{margin-left:4px;font-weight:650}
.tb.ico{padding-left:8px;padding-right:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phead .pq{display:inline-flex;align-items:center;gap:2px}
.phead .where .wh-a span{max-width:16ch}
@media (max-width:1250px){.pdots b{display:none}.phead .where .wh-a span{max-width:10ch}}
@media (max-width:980px){.phead .pq,.phead .where .wh-a span,.phead .where .wh-ix{display:none}}
.rvs .rvs-ed{gap:5px}
.menu .zrow{display:flex;align-items:center;gap:6px;padding:4px 8px 6px}.menu .zrow .tb{flex:1;justify-content:center}

/* The suggestion card pinned beside its section (review-room.js pinCard), with a pointer at it */
#rvdock .sugg.pinned{z-index:30;max-height:62vh}
#rvdock .sugg.pinned::before{content:"";position:absolute;top:var(--py,28px);width:14px;height:14px;background:#fff;border:1px solid #d9e7dc;transform:rotate(45deg)}
#rvdock .sugg.pinned.pl::before{left:-8px;border-right:0;border-top:0}
#rvdock .sugg.pinned.pr::before{right:-8px;border-left:0;border-bottom:0}
#rvdock .sugg.pinned.pup::before,#rvdock .sugg.pinned.pdown::before{display:none}
#rvdock .sugg.pinned.pup{box-shadow:0 -3px 0 #16a34a,0 18px 44px -14px rgba(15,23,42,.35)}
#rvdock .sugg.pinned.pdown{box-shadow:0 3px 0 #16a34a,0 18px 44px -14px rgba(15,23,42,.35)}
#rvdock .sugg.pinned{overflow:visible}#rvdock .sugg.pinned>.sg-body{overflow-y:auto}
#rvdock .sugg.pinned>.sg-h{border-radius:16px 16px 0 0}#rvdock .sugg.pinned>.sg-foot{border-radius:0 0 16px 16px}

/* Signing off: one big Approve on the card, and Edit beside it */
.sg-sign{display:flex;gap:8px;align-items:stretch}
.sg-approve{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:12px;padding:13px 18px;background:#16a34a;color:#fff;font:700 15.5px/1 var(--sans,system-ui);box-shadow:0 6px 16px -8px rgba(22,163,74,.7);transition:transform .12s,background .2s,box-shadow .2s}
.sg-approve .ic{width:18px;height:18px}
.sg-approve:hover{background:#15803d;transform:translateY(-1px)}.sg-approve:active{transform:translateY(0)}
.sg-approve:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.sg-edit{flex:none;border-radius:12px;padding:0 14px}
.sg-approve.signing{background:#15803d;animation:sgsign .65s ease-out}
.sg-approve.signing .ic{animation:sgcheck .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes sgsign{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}60%{box-shadow:0 0 0 14px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@keyframes sgcheck{0%{transform:scale(.4) rotate(-20deg)}100%{transform:scale(1.25) rotate(0)}}
@media (prefers-reduced-motion:reduce){.sg-approve,.sg-approve.signing,.sg-approve.signing .ic{animation:none;transition:none}}

/* The chat while reviewing with the cards (review-room.js chatOnly): the build notes fold away, an invitation instead */
.kfold{display:flex;align-items:center;gap:6px;width:100%;border:0;background:var(--sunk);border-radius:10px;padding:9px 12px;font:600 13px/1.2 inherit;color:var(--ink-2,var(--ink));cursor:pointer;text-align:left;margin-bottom:10px}
.kfold .hint{margin-left:auto}.kfold .ic{width:15px;height:15px}
.kinvite{display:grid;gap:8px;padding:18px 16px;border-radius:14px;border:1px dashed var(--line-2,var(--line));text-align:left}
.kinvite>.ic{width:22px;height:22px;color:#7c3aed}.kinvite b{font-size:16px}.kinvite p{margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.5}
/* A customer's Claude tab (review-room.js connectPanel): open the page in Claude, connect once, what Claude did. */
.list>.kinvite+.kinvite{margin-top:10px}
.kinvite.inclaude .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.kinvite.inclaude a.tb{text-decoration:none}
details.kinvite summary{cursor:pointer;list-style:none}details.kinvite summary::-webkit-details-marker{display:none}details.kinvite summary b{font-size:14px}details.kinvite summary::after{content:"Show the steps";display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}details.kinvite[open] summary::after{content:none}
details.kinvite ol{margin:4px 0 0;padding-left:18px;display:grid;gap:8px;color:var(--ink-2);font-size:13.5px;line-height:1.5}details.kinvite .mono{word-break:break-all}
.claudecard .cbrand{display:flex;align-items:center;gap:9px}.claudecard .cmark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#B4532A;color:#fff}.claudecard .cmark .ic{color:#fff;width:17px;height:17px}
.claudecard .cbrand b{display:block;font-size:14px}.claudecard .cbrand small{display:block;font-size:11.5px;color:var(--ink-3)}
.claudecard .steps{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:10px}.claudecard .steps li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.claudecard .steps .n{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2,#f4f4f5);color:var(--ink-2);font-size:12px;font-weight:700}
.claudecard .steps li.done .n{background:#dcfce7;color:#166534}.claudecard .steps li.done b{color:#166534}.claudecard .steps b{font-size:13.5px}
.claudecard .steps .sb{margin-top:4px;color:var(--ink-3);font-size:13px;line-height:1.45}.claudecard .steps .sb a{color:#B4532A}.claudecard .steps .sb .tb{margin-top:6px}
.claudecard .tb.primary.claude{background:#B4532A;border-color:#B4532A;color:#fff}.claudecard .tb.primary.claude:hover{background:#9a4522}.claudecard .tb.primary.claude .ic{color:#fff}
.claudecard .fine{font-size:11.5px!important}
.fromclaude{list-style:none;margin:0;padding:0;display:grid;gap:10px}.fromclaude li{display:grid;gap:2px}.fromclaude li b{font-size:13.5px;font-weight:500}
.sg-lbl{margin:2px 0 -2px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a746c}
/* The visible-to-search switch (header and panel): a real on/off, green and knob right when on. */
.vsw{flex:none;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;padding:3px 10px 3px 3px;border-radius:999px;background:#ece9e4;color:#5f5a52;font:650 12px/1 var(--sans,system-ui);white-space:nowrap;transition:background .18s}
.vsw-k{position:relative;width:30px;height:18px;border-radius:999px;background:#c9c4bc;transition:background .18s;display:grid;place-items:center}
.vsw-k::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s}
.vsw.on{background:#d9f2e3;color:#15803d}.vsw.on .vsw-k{background:#16a34a}.vsw.on .vsw-k::after{transform:translateX(12px)}
.vsw:hover{filter:brightness(.97)}.vsw:disabled{cursor:progress;opacity:.8}.vsw .vsw-k .spin{width:10px;height:10px;z-index:1}
.vsw:focus-visible{outline:2px solid #2F5BD8;outline-offset:2px}
.vsw.big{padding:4px 14px 4px 4px;font-size:14px}.vsw.big .vsw-k{width:40px;height:24px}.vsw.big .vsw-k::after{width:20px;height:20px}.vsw.big.on .vsw-k::after{transform:translateX(16px)}
@media (prefers-reduced-motion:reduce){.vsw,.vsw-k,.vsw-k::after{transition:none}}
@media (max-width:980px){.phead .where .vsw .vsw-l{display:none}.phead .where .vsw{padding-right:3px}}

/* Done: the next page of theirs that needs them, one press away. */
.sg-nextf{padding:12px 14px 14px}
.sg-next{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#f3f7f4;border:1px solid #cfe8d8;color:#1f1d1a;text-decoration:none}
a.sg-next:hover{background:#e9f4ed;border-color:#16a34a}
.sg-next .sg-nthumb{flex:none;width:64px;height:40px;border-radius:6px;object-fit:cover;background:#fff;border:1px solid #e4e0d9;display:grid;place-items:center;overflow:hidden}
.sg-nt{flex:1 1 auto;min-width:0;display:grid;gap:2px}.sg-nt small{font-size:11.5px;color:#2f6b45;font-weight:650}.sg-nt b{font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-ngo{flex:none;display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:9px;background:#16a34a;color:#fff;font-weight:700;font-size:13px}
.sg-ngo .ic{width:15px;height:15px}
.sg-next.all{background:#f6f5f2;border-color:#e6e2db}.sg-next.all>span{color:#16a34a;flex:none;display:grid}.sg-next.all p{margin:0;font-size:13.5px;line-height:1.45;color:#3f3b35}
#rvdock .rvs.done{gap:8px}#rvdock .rvs-go{text-decoration:none}
.sg-proof1{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13.5px;line-height:1.5;color:#3f3b35}.sg-proof1>.ic{flex:none;color:#16a34a;width:20px;height:20px;margin-top:1px}.sg-proof1 b{color:#14532d}.sg-proof1 a{color:#3f3b35}
#rvdock a.rvs-go{background:#16a34a;border-color:#16a34a;color:#fff}#rvdock a.rvs-go:hover{background:#15803d}
#rvdock .sugg.pinned.corner::before{display:none}#rvdock .sugg.pinned.corner{box-shadow:0 18px 50px -12px rgba(15,23,42,.35)}
#rvdock .sugg.pinned.corner{max-height:min(46vh,420px)}

/* ── Review rooms board (account/rooms-home.js): the drawer's body here, and the console's Review rooms ──────────
   Clients down the side as cards with their picture and their drip; the one picked beside it; a Drips tab with
   each brand's month on a calendar. Every color is one of this sheet's tokens, so the console's dark copy only
   redefines the tokens (.rh-dark). */
.drawer.wide{width:min(1180px,98vw);grid-template-rows:auto minmax(0,1fr) auto}
.rh-mount{min-height:0;display:flex;flex-direction:column}
.rhb{display:flex;flex-direction:column;min-height:0;flex:1;align-items:stretch;width:100%}
.rh-search{margin:10px 12px 0}
.rh-tabs{margin:8px 12px 0}
.rh-body{flex:1;min-height:0;overflow:auto;padding:8px}
.rh-body.cl{display:grid;grid-template-columns:290px minmax(0,1fr);padding:0;overflow:hidden;border-top:1px solid var(--line);margin-top:8px}
.rh-rail{overflow-y:auto;min-height:0;border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--sunk)}
.rh-main{overflow-y:auto;min-height:0;padding:16px 18px 24px;display:flex;flex-direction:column;gap:12px}
.rh-main.wide{grid-column:1/-1}
.rh-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:hidden;flex:none}
.rh-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.rh-card.on{box-shadow:0 0 0 2px var(--blue);border-color:transparent}
.rh-pic{position:relative;height:78px;background:linear-gradient(135deg,color-mix(in srgb,var(--tint,var(--ink-3)) 55%,var(--sunk)),color-mix(in srgb,var(--tint,var(--ink-3)) 12%,var(--surface)));overflow:hidden}
.rh-hero{width:100%;height:100%;object-fit:cover;display:block}
.rh-search{align-self:stretch}
.rh-pic .cnt{position:absolute;right:8px;top:8px}
.cnt.warn{background:var(--warn-soft,#FBEBD7);color:var(--warn,#B85A08)}
.rh-ct{display:flex;align-items:center;gap:10px;padding:10px 12px}.rh-ct>span{display:flex;flex-direction:column;gap:1px;min-width:0}.rh-ct .bmk{width:36px;height:36px;border-radius:10px}
.rh-ct b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-ct small{font-size:12px;color:var(--ink-3)}
.rh-dw{font-weight:600}.rh-dw.on{color:var(--ok,#1D8455)}.rh-dw.off{color:var(--ink-3)}
.rh-sub{margin:8px 2px 0;font:600 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rh-none{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:13px}
.rh-none:hover{background:var(--surface)}.rh-none small{color:var(--blue);font-weight:600}
.drg.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.drg:disabled{opacity:.5;cursor:default}
.rh-dd{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:600;font-size:11px;line-height:18px}
.rh-dd .ic{width:12px;height:12px}.rh-dd.live{background:var(--ok-soft,#E2F2EA);color:var(--ok,#1D8455)}.rh-dd.held{background:var(--sunk);color:var(--ink-3)}
.rh-next{margin:0;font-size:14px;color:var(--ink-2)}.rh-next.act{color:var(--warn,#B85A08);font-weight:600}
.rh-msg{margin:0;padding:8px 12px;border-radius:9px;background:var(--blue-soft);color:var(--ink);font-size:13px}
.rh-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-3)}.rh-facts b{color:var(--ink)}
.rh-calbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.rh-calbar>b{min-width:130px;text-align:center}
.rh-legend{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink-3)}
.rh-legend span{display:inline-flex;align-items:center;gap:5px}
.rh-legend i,.rh-ev i,.rh-mail i{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--ink-3)}
.k-writing i{background:var(--ink-3)}.k-review i{background:var(--warn,#B85A08)}.k-approved i{background:var(--blue)}.k-live i{background:var(--ok,#1D8455)}
.k-held i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}.k-fix i{background:var(--late,#BF3629)}.k-mail i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--blue)}
.rh-cal{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.rh-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.rh-wk span{padding:6px 8px;font:600 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rh-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.rh-day{min-height:92px;padding:5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.rh-day:nth-child(7n){border-right:0}.rh-day.out{background:var(--sunk)}.rh-day.out .rh-n{opacity:.45}
.rh-day.today{box-shadow:inset 0 0 0 2px var(--blue)}
.rh-n{font:700 12px/1 var(--mono);padding:2px 3px}
.rh-ev{display:flex;align-items:center;gap:5px;width:100%;min-width:0;border:1px solid transparent;background:var(--sunk);color:inherit;font:inherit;font-size:11.5px;line-height:1.25;text-align:left;padding:3px 5px;border-radius:6px;cursor:pointer}
.rh-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rh-ev:hover{border-color:var(--line-2)}
.rh-ev.k-review{background:var(--warn-soft,#FBEBD7)}.rh-ev.k-approved{background:var(--blue-soft)}.rh-ev.k-live{background:var(--ok-soft,#E2F2EA)}.rh-ev.k-fix{background:var(--late-soft,#F8E1DE)}
.rh-mail{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3);padding:0 5px}
@media (max-width:820px){
  .rh-body.cl{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .rh-rail{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line)}
  .rh-card{width:200px}
  .rh-day{min-height:58px}.rh-ev span{display:none}.rh-ev{justify-content:center}
}
/* The console's dark copy: the same board, its own tokens (account/ops/console/views/rooms.js mounts it). */
.rh-dark{--paper:#08080a;--surface:#111114;--sunk:#0c0c0f;--ink:#f4f4f5;--ink-2:#c9c9cf;--ink-3:#9a9aa3;--line:#1f1f24;--line-2:#2c2c33;
  --blue:#7D9CF4;--blue-ink:#0E1426;--blue-soft:#1D2644;--ok:#57d957;--ok-soft:rgba(12,163,12,.16);--warn:#fab219;--warn-soft:rgba(250,178,25,.13);
  --late:#ff8a8a;--late-soft:rgba(224,83,83,.14);--no:#9a9aa3;--no-soft:rgba(154,154,163,.12);--shadow:0 10px 30px -12px rgba(0,0,0,.6);
  color:var(--ink);background:var(--paper);font:14px/1.5 "Instrument Sans",system-ui,sans-serif;color-scheme:dark}
.rh-dark .drg.pri{color:#0E1426}
.rv-shell{height:100%;display:flex;flex-direction:column}.rv-shell .rv-mount{flex:1;min-height:0;display:flex;flex-direction:column}
/* The next step (review-room.js nextStepHtml): what to do now, and the button that does it. One card at the top of
   the Klaude and Feedback panels; its edge color says whose move it is (go: yours, ok: done, wait: someone else's). */
.nextstep{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--blue);margin-bottom:12px;box-shadow:var(--shadow)}
.nextstep .ns-h{display:flex;align-items:center;gap:8px}.nextstep .ns-h b{font-size:15.5px;line-height:1.3}.nextstep .ns-h .ic{width:18px;height:18px;flex:none;color:var(--blue)}
.nextstep p{margin:0;color:var(--ink-2,var(--ink));font-size:13.5px;line-height:1.5}
.nextstep .ns-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.nextstep.ns-ok{border-left-color:var(--ok)}.nextstep.ns-ok .ns-h .ic{color:var(--ok)}
.nextstep.ns-wait{border-left-color:var(--warn)}.nextstep.ns-wait .ns-h .ic{color:var(--warn)}
.nextstep.ns-work{border-left-color:#7c3aed}.nextstep.ns-work .ns-h .ic{color:#7c3aed}
/* Klaude's reply: a plain headline, its notes on the work folded under it */
.khead{margin:2px 0 6px;font-weight:600;font-size:14px;line-height:1.45}
.knotes{margin:0 0 8px}.knotes>summary{cursor:pointer;color:var(--ink-3);font-size:13px;font-weight:600;padding:2px 0}
.knotes[open]>summary{margin-bottom:6px}

/* In the console's Pages view: the console already has the account, ops board and console links, and who's signed in. */
.in-console .h2top .h2nav, .in-console .h2top #out { display: none; }

/* A client's revision (review-room.js revisionCard): what changed, the revisions to flip between, and Approve. */
.rvcard{display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);margin-bottom:12px;box-shadow:var(--shadow)}
.rvcard .rvc-hi{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.rvcard .rvc-hi.as{display:flex;gap:6px;align-items:center;color:var(--warn)}
.rvcard .rvc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.rvcard .rvc-h b{display:block;font-size:15.5px;line-height:1.3}
.rvcard .rvc-h small{display:block;margin-top:3px;color:var(--ink-3);font-size:12.5px}
.rvcard .rvc-h small .chip{vertical-align:1px}
.rvcard .rvc-notes{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;line-height:1.5;color:var(--ink-2,var(--ink))}
.rvcard .rvc-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rvcard .story{border:0;padding:0;background:transparent}
.rvcard>.hint{margin:0}
.rv-flip{display:inline-flex;padding:3px;border-radius:999px;background:var(--sunk);flex:none;max-width:100%;overflow-x:auto}
.rv-flip button{border:0;background:transparent;border-radius:999px;padding:5px 11px;font:600 12.5px/1 inherit;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.rv-flip button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,24,36,.18)}
.rbar .rv-flip.bar{background:rgba(255,255,255,.08);padding:2px}
.rbar .rv-flip.bar button{padding:7px 10px;color:#C9CCD3;border-radius:10px}
.rbar .rv-flip.bar button[aria-selected="true"]{background:#F1F2F4;color:#181A20}
.rvcard .rvc-more>summary{cursor:pointer;color:var(--ink-3);font-size:13px;font-weight:600;padding:2px 0}
.rvcard .rvc-more[open]>summary{margin-bottom:6px}
/* A narrow bar keeps Approve: the revision switch stays in the card above the list. */
.rbar.tight .rv-flip.bar,.rbar.tight .rv-flip.bar+.sep{display:none}
@media (max-width:560px){.rbar .rv-flip.bar{display:none}}
.rbar.tight .rvsep{display:none}
@media (max-width:560px){.rbar .rvsep{display:none}}

/* Share a live page on LinkedIn (review-room.js liShareBtn): LinkedIn's blue, quiet beside the page's actions. */
.lishare { color: #0a66c2 !important; text-decoration: none; }
.lishare .li-mark { width: 15px; height: 15px; flex: none; }
.lishare:hover { background: rgba(10, 102, 194, .08); }

/* ── The page's story: Latest and Timeline (account/review-feed.js, review-room.js pagePanel) ──
 * A record, not a control panel: quiet lines, people's words in soft bubbles, revisions as milestones. A request keeps
 * its orange square number and a comment its blue round one when a line opens to its note. */
.card .n{width:auto;min-width:22px;padding:0 6px}
.story .card.cmt{background:var(--sunk);border-color:transparent}
.story .card.cmt.hot{background:var(--surface);border-color:var(--blue)}
.chan{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;background:var(--sunk);color:var(--ink-2);font-size:11.5px;font-weight:600;white-space:nowrap}
.chan .ic{width:12px;height:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.story{gap:12px}
.st-h{display:grid;gap:1px;padding:2px 2px 0}
.st-h b{font-size:15px}
.st-revs{display:flex;gap:6px}
.st-revs button{flex:1 1 0;min-width:0;display:grid;gap:3px;text-align:left;padding:7px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:12px;min-height:44px}
.st-revs button b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-revs button small{color:var(--ink-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-revs button[aria-selected="true"]{border:2px solid var(--blue);padding:6px}
.st-revs button.draft{border-style:dashed;background:var(--blue-soft)}
.st-revs button.draft small{color:var(--blue)}
.st-rv{display:flex;flex-direction:column;gap:3px;height:28px;padding:5px;border-radius:5px;background:var(--sunk)}
.st-rv i{display:block;height:4px;width:70%;border-radius:2px;background:var(--ink)}
.st-rv i+i{height:3px;width:45%;background:var(--line-2)}
.st-tabs{display:flex;padding:3px;border-radius:10px;background:var(--sunk)}
.st-tabs button{flex:1;border:0;background:transparent;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:500;color:var(--ink-2);min-height:34px}
.st-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,24,36,.12)}
.st-since{font-size:12px;color:var(--ink-3);margin:2px 2px -4px}
.st-line{display:flex;gap:10px;padding:6px 4px;border-radius:10px}
.st-line .av{width:26px;height:26px;font-size:10.5px;border:0}
.st-line .av.kl{background:var(--blue);color:var(--blue-ink)}
.st-line .av.kl .ic{width:13px;height:13px}
.st-line .av.kl .spin{width:12px;height:12px;border-color:color-mix(in srgb,var(--blue-ink) 35%,transparent);border-top-color:var(--blue-ink)}
.st-line.has-note{cursor:pointer}
.st-line.has-note:hover,.st-line.hot{background:var(--sunk)}
.st-line.rev .st-rv{width:40px;flex:none}
.st-b{display:grid;gap:3px;min-width:0}
.st-b p{margin:0;font-size:13px;line-height:1.45}
.st-q{padding:6px 10px;border-radius:4px 10px 10px 10px;background:var(--sunk);white-space:pre-line}
.st-line.hot .st-q{background:var(--surface)}
.st-m{font-size:11.5px;color:var(--ink-3)}
.st-diff s{color:var(--late)}
.st-diff ins{color:var(--ok);text-decoration:none;font-weight:600}
.st-quiet{display:flex;gap:7px;align-items:flex-start;margin:0;padding:6px 8px;font-size:12.5px;color:var(--warn);background:var(--warn-soft);border-radius:8px}
.st-quiet .ic{margin-top:2px}
.st-say{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 12px;border-radius:10px;background:var(--sunk)}
.st-say input{flex:1;min-width:0;border:0;background:transparent;font-size:13px;min-height:34px}
.st-say input:focus{outline:none}
.st-say:focus-within{box-shadow:0 0 0 2px var(--blue)}
.tl{list-style:none;margin:0;padding:0;display:grid}
.tl-day{display:flex;align-items:center;gap:10px;padding:10px 0 4px}
.tl-day span{width:56px;text-align:right;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.tl-day::after{content:"";flex:1;height:1px;background:var(--line)}
.tl-row{display:grid;grid-template-columns:56px 18px minmax(0,1fr);gap:0 10px;border-radius:8px}
.tl-row[data-stnote]{cursor:pointer}
.tl-row[data-stnote]:hover,.tl-row.hot{background:var(--sunk)}
.tl-row time{font-size:11.5px;color:var(--ink-3);text-align:right;padding-top:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-spine{position:relative;display:flex;justify-content:center}
.tl-spine::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--line)}
.tl-mk{position:relative;flex:none;box-sizing:border-box;margin-top:9px;width:10px;height:10px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 3px var(--surface)}
.tl-row:hover .tl-mk,.tl-row.hot .tl-mk{box-shadow:0 0 0 3px var(--sunk)}
.tl-mk.ring{background:var(--surface);border:2px solid var(--ink-3);box-sizing:border-box;width:11px;height:11px;flex:none}
.tl-mk.kl{background:var(--blue)}
.tl-mk.rev{width:12px;height:12px;border-radius:3px;background:var(--ink);transform:rotate(45deg);margin-top:18px}
.tl-row.now .tl-mk{background:var(--surface);border:2px dashed var(--blue)}
.tl-b{display:grid;gap:3px;padding:4px 0 8px;min-width:0}
.tl-b p{margin:0;font-size:13px;line-height:1.4}
.tl-q{color:var(--ink-2);font-style:italic;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-tags{display:flex;gap:5px;flex-wrap:wrap}
.tl-tags span{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
.tl-row.hot .tl-tags span{background:var(--surface)}
.tl-rev{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--sunk)}
.tl-rev .st-rv{width:44px;flex:none;background:var(--surface)}
.tl-rev>span:nth-child(2){display:grid;flex:1;min-width:0}
.tl-rev small{font-size:12px;color:var(--ink-2)}
.tl-card{padding:2px 0 8px 84px}
/* Review by email (functions/api/review/_mail.js): the panel's quiet switch and its dialog. */
.st-h{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.st-h>b,.st-h>.hint{grid-column:1}
.st-mail{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;min-height:30px;white-space:nowrap}
.st-mail .ic{width:13px;height:13px}
.st-mail[aria-pressed="true"]{background:var(--ok-soft);border-color:transparent;color:var(--ok);font-weight:600}
.st-quiet>span{flex:1}
.dialog.mail{max-width:520px}
.dialog.mail .chk{display:flex;align-items:center;gap:8px;font-weight:600}
.dialog.mail textarea{font-family:var(--mono);font-size:12.5px}
.ml-addr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:10px;border-radius:10px;background:var(--sunk);font-size:12.5px}
.ml-addr span{grid-column:1 / -1;color:var(--ink-2)}
.ml-addr code{overflow-wrap:anywhere}
.ml-held{display:grid;gap:4px;padding:10px;border-radius:10px;background:var(--warn-soft);font-size:12.5px}
.ml-held p{margin:0;overflow-wrap:anywhere}

/* ── Feedback first (Kolin, 2026-10-31; review-room.js renderPanel) ──────────────
 * Everyone opens on Feedback: where the page is, one line from Klaude with the one Approve, the revisions, the story, and
 * one box pinned at the bottom to tell Klaude what to change. On a phone the box is a bar along the bottom. */
:root{--go:#17803D;--go-ink:#FFFFFF;--about:#E9A23B;--about-soft:#FFF6E5;--about-ink:#7A4A00;--kl-soft:#F4F7FF;--kl-line:#DCE4FA;--kl-ink:#1E3E9C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--go:#3FB26F;--go-ink:#0B1A11;--about:#E9A23B;--about-soft:#2E2414;--about-ink:#F4C77A;--kl-soft:#18203A;--kl-line:#2A3762;--kl-ink:#A9BEF7}}
.ph .tabs button{min-height:40px;padding:0 12px;font-size:13.5px}
.pstat{display:grid;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);min-width:0}
.studio-back{flex:none;min-height:40px;font-weight:600}
.studio-back .ic{width:16px;height:16px}
/* Where the page is: its studio address, and its live one. */
.addrs{display:grid;gap:6px}
.addr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:12.5px}
.addr-k{font-weight:700;color:var(--ink);min-width:52px}
.addr.live .addr-k{color:var(--ok)}
.addr.goes .addr-k{font-weight:500;color:var(--ink-3)}
.addr-u{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.addr.goes .addr-u{color:var(--ink-3)}
.addr .tb{min-height:32px}
/* Klaude's one line, and the one Approve. */
.kstat{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--sunk)}
.kstat p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.kstat.k-go,.kstat.k-work{background:var(--kl-soft);box-shadow:inset 0 0 0 1px var(--kl-line)}
.kstat.k-ok{background:var(--ok-soft)}
.kstat.k-quiet{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.kav{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--blue);color:var(--blue-ink);font:700 12px/1 var(--sans)}
.kacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kacts .tb{min-height:36px}
.tb.go{background:var(--go);border-color:var(--go);color:var(--go-ink);font-weight:700}
.tb.go:hover{background:var(--go);filter:brightness(1.07)}
.kquiet{border:0;background:transparent;padding:6px 2px;min-height:36px;font:inherit;font-size:13px;font-weight:700;color:var(--go);cursor:pointer;margin-left:auto}
.kquiet:hover{text-decoration:underline}
.kgap{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;color:var(--warn);margin-left:auto}
/* The revisions: switched only here, Compare beside them. */
.st-revs-row{display:flex;gap:6px;align-items:center;min-width:0}
.st-revs-row .st-revs{flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.st-revs-row .st-revs button{flex:0 0 auto;min-width:96px;max-width:150px}
.st-revs-row>.tb{flex:none;min-height:44px}
.st-revs-row>.ib{flex:none;width:36px;height:44px}
.st-revs-row .tb.on{border-color:var(--blue);color:var(--blue)}
/* Klaude's welcome, and good places to start. */
.kwel{display:flex;gap:10px;align-items:flex-start}
.kwel-b{display:grid;gap:4px;padding:12px 14px;border-radius:4px 14px 14px 14px;background:var(--kl-soft);border:1px solid var(--kl-line);min-width:0}
.kwel-b b{font-size:13px;color:var(--kl-ink)}
.kwel-b p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.kstarts{display:grid;gap:8px}
.st-h3{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:4px 2px 0}
.st-h3.hx{display:block;margin-top:14px;font-size:13px;color:var(--ink)}
.kstart{min-height:48px;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.kstart:hover{border-color:var(--line-2)}
.kstart.on{border:2px solid var(--about);background:var(--about-soft);padding:7px 11px}
.start-t{width:30px;height:30px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;flex:none;font:700 11px/1 var(--sans);color:var(--ink-2)}
.start-x{display:grid;gap:1px;min-width:0}
.start-x b{font-size:14px}
.start-x small{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The story: Klaude's own words on its turns, and when Klaude takes the note just left. */
.st-k{margin:0;padding-left:9px;border-left:2px solid var(--blue);font-size:12.5px;color:var(--ink-2)}
.st-after{margin:2px 0 0!important;font-size:12.5px!important;font-weight:600;color:var(--kl-ink)}
.st-none{border:1px dashed var(--line-2);border-radius:12px;padding:12px 14px;text-align:left}
.st-mail{justify-self:start}
.rvc-hi{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.rvc-hi.as{display:flex;gap:6px;align-items:center;color:var(--warn)}
.list .rvc-notes{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
/* The one box. */
.composer.say{gap:8px;padding:12px 14px;box-shadow:0 -8px 18px -16px rgba(20,24,36,.45)}
.say-h{display:flex;align-items:center;gap:8px;min-width:0}
.say-h label{font-size:13px;font-weight:700;margin-right:auto}
.say-about{display:inline-flex;align-items:center;gap:2px;padding:0 0 0 10px;border-radius:999px;background:var(--about-soft);color:var(--about-ink);font-size:12px;font-weight:600;max-width:60%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px var(--about)}
.say-about button{border:0;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1;min-width:32px;min-height:28px;border-radius:999px;cursor:pointer}
.say-about button:hover{background:color-mix(in srgb,var(--about) 22%,transparent)}
.say-box{display:flex;gap:8px;align-items:flex-end;padding:6px 6px 6px 12px;border-radius:12px;border:1.5px solid var(--blue);background:var(--surface)}
.say-box:focus-within{box-shadow:0 0 0 3px var(--blue-soft)}
.composer.say textarea{flex:1;min-width:0;min-height:44px;max-height:30vh;border:0;padding:6px 0;resize:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);border-radius:0}
.composer.say textarea:focus{outline:none}
.say-send{min-height:40px;padding:0 16px;border-radius:9px;font-weight:600}
.say-f{margin:0;font-size:12.5px;color:var(--ink-2)}
.say-sheet{display:none}
.rbar .vname{display:inline-flex;gap:6px;align-items:center;padding:0 8px;font-size:13px;color:inherit;opacity:.85;white-space:nowrap}
@media (max-width:860px), (pointer:coarse){
  .addr .tb,.kacts .tb,.kquiet,.say-send,.say-about button{min-height:44px}
  .say-about button{min-width:44px}
  .composer.say textarea{font-size:16px}
}
@media (max-width:860px){
  .say-sheet{display:inline-flex;min-height:44px}
  /* The panel put away: the box alone, a bar along the bottom; Feedback opens the rest over the page. */
  .panel.sayonly{height:auto;max-height:50%;display:block;border-radius:12px 12px 0 0}
  .panel.sayonly>:not(.composer){display:none}
  .panel.sayonly .composer.say{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .body.say-on #barwrap[class^="dock-b"] .rbar{bottom:calc(var(--sayh,150px) + 10px)}
  .app.cust .body.say-on .panel.sayonly{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .app.cust .panel.sayonly{height:auto}
  /* Open over the page, the whole panel scrolls as one: its tabs stay at the top and the box at the bottom. */
  .panel.with-composer:not(.sayonly){display:block;overflow:auto;overscroll-behavior:contain}
  .panel.with-composer:not(.sayonly) .ph{position:sticky;top:0;z-index:3;background:var(--surface)}
  .panel.with-composer:not(.sayonly) .list{overflow:visible;padding-bottom:16px}
  .panel.with-composer:not(.sayonly) .composer.say{position:sticky;bottom:0;z-index:3}
}
.list.story .st-mail{grid-column:auto;grid-row:auto}
/* The publish screen's right card at 1440 (audit 2026-10-30): its message and its Connect button wrap inside the card
   instead of running past its edge. */
.pc-stage>*{max-width:100%}
.pc-stage .pc-err{align-self:stretch;min-width:0}
.pc-err>span{min-width:0;overflow-wrap:anywhere}
.pc-err .tb{white-space:normal;max-width:100%;text-align:left}
/* Review fixes (PR #741): the status line's … menu, the go-live line and its sheet, the team's box tools. */
.kstat .kmore{margin:-4px -6px -4px auto;flex:none;min-width:32px;min-height:32px}
.kstat p{flex:1;min-width:0}
.kgo{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:0;font-size:12.5px;color:var(--ink-2)}
.kgo .ic{width:14px;height:14px;flex:none}
.kgo .linkish{font-size:12.5px}
.addr.vis .addr-k{color:var(--ok)}
.addr.vis .addr-u{font-family:var(--sans)}
.dialog.golive{max-width:460px}
.gl-opts{display:grid;gap:8px;margin:4px 0 12px}
.gl-o{display:grid;gap:2px;text-align:left;min-height:52px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);cursor:pointer}
.gl-o small{color:var(--ink-2);font-size:12.5px}
.gl-o.on{border:2px solid var(--blue);background:var(--blue-soft);padding:9px 11px}
.dialog.golive .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dialog.golive .push{margin-left:auto}
div.say-f{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:space-between}
.say-team{display:inline-flex;gap:12px;align-items:center}
.say-team .linkish{font-size:12.5px;min-height:32px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.say-team .ic{width:14px;height:14px}
.composer.say .atts{display:flex;flex-wrap:wrap;gap:6px}
.composer.say .atts button{border:0;background:transparent;color:inherit;padding:0 0 0 4px;cursor:pointer}
.st-more summary{font-size:12px;color:var(--blue);cursor:pointer}
.st-more .say{font-size:12.5px;color:var(--ink-2)}
.st-more .say p{margin:4px 0}
@media (max-width:860px), (pointer:coarse){.say-team .linkish,.kgo .linkish,.kstat .kmore{min-height:44px}.kstat .kmore{min-width:44px}}
/* Going through a revision with Klaude: one change at a time, Looks right or Not quite, then the one Approve. */
.rw{display:grid;gap:12px}
.rw .kwel{align-items:flex-start}
.rw .kwel-b{flex:1}
.rw-x{flex:none;min-height:32px;margin-top:4px;color:var(--ink-2)}
.rw-prog{display:flex;gap:6px}
.rw-seg{flex:1;height:8px;min-height:8px;padding:0;border:0;border-radius:4px;background:var(--line);cursor:pointer;position:relative}
.rw-seg::after{content:"";position:absolute;inset:-10px 0}
.rw-seg.ok{background:var(--ok)}
.rw-seg.redo{background:var(--warn)}
.rw-seg.on{background:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.rw-seg.on.ok{background:var(--ok)}.rw-seg.on.redo{background:var(--warn)}
.rw-seg:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.rw-show{justify-self:start;font-size:13px;min-height:32px}
.rw-card{display:grid;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.rw-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);min-width:0}
.rw-h>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-kind{flex:none;padding:2px 9px;border-radius:999px;background:var(--sunk);font-weight:500;font-size:12px}
.rw-ask{display:flex;gap:10px;align-items:flex-start}
.rw-ask>div{display:grid;gap:4px;min-width:0}
.rw-ask small{font-size:12.5px;color:var(--ink-2)}
.rw-ask small b{color:var(--ink)}
.rw-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);font:700 11px/1 var(--sans)}
.rw-q{margin:0;padding:8px 12px;border-radius:4px 12px 12px 12px;background:var(--sunk);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.rw-did{display:grid;gap:6px;padding-left:38px;min-width:0}
.rw-did small{font-size:12.5px;font-weight:600;color:var(--kl-ink)}
.rw-did p{margin:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.rw-did del{font-size:13.5px;line-height:1.45;color:var(--late);overflow-wrap:anywhere}
.rw-did ins{text-decoration:none;font-size:14px;line-height:1.45;font-weight:600;color:var(--ok);overflow-wrap:anywhere}
.rw-wait{display:flex;gap:6px;align-items:center;color:var(--ink-3)!important;font-size:12.5px!important}
.rw-said{display:flex;gap:6px;align-items:center;margin:0;font-size:13px;font-weight:600}
.rw-said .ic{width:15px;height:15px;flex:none}
.rw-said.ok{color:var(--ok)}.rw-said.redo{color:var(--warn)}
.rw-a{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rw-a .tb{min-height:44px;padding:0 16px;font-size:14px;font-weight:600}
.rw-a .rw-ok{flex:1;justify-content:center;background:var(--ink);border-color:var(--ink);color:var(--surface)}
.rw-a .rw-ok:hover{filter:none;opacity:.9;background:var(--ink)}
.rw-a .linkish{min-height:44px;font-size:13px}
.rw-redo{display:grid;gap:8px;padding-left:38px}
.rw-redo label{font-size:13px;font-weight:600}
.rw-redo textarea{min-height:64px;border:1.5px solid var(--blue);border-radius:10px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical;background:var(--surface);color:var(--ink)}
.rw-redo textarea:focus{outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.rw-t{font-size:16px}
.rw-sum{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.rw-sum li{display:flex;gap:10px;align-items:baseline}
.rw-sum li>span:first-child{width:14px;flex:none;font-weight:700;color:var(--ink-3)}
.rw-sum li.ok>span:first-child{color:var(--ok)}
.rw-sum li.redo>span:first-child{color:var(--warn)}
.rw-sum .linkish{font-size:13.5px}
.rw-next{display:grid;gap:6px}
.rw-next small{font-size:12.5px;color:var(--ink-2)}
.rw-next .tb{min-height:48px;justify-content:center;font-size:15px}
.rw-next .kgap{margin:0}
.rw-done>.linkish{justify-self:start;min-height:32px;font-size:13px}
.rw-back{display:flex;gap:6px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:12px;background:var(--kl-soft);box-shadow:inset 0 0 0 1px var(--kl-line);font-size:13px;color:var(--ink)}
.rw-back .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--kl-ink)}
@media (max-width:860px), (pointer:coarse){.rw-x,.rw-show,.rw-done>.linkish,.rw-sum .linkish,.rw-back .linkish{min-height:44px}.rw-redo textarea{font-size:16px}}
@media (max-width:480px){.rw-did,.rw-redo{padding-left:0}}
/* On a phone the box is pinned over the bottom of the panel: a step's buttons stop above it, not under it. */
@media (max-width:860px){.rw-a,.rw-next{scroll-margin-bottom:calc(var(--sayh,190px) + 16px)}}
/* The panel scrolls as one at every size (Kolin, 2026-10-31: on a laptop the page's addresses, its status and its
   revisions kept their height and left the Feedback and History feed a sliver under them). Its tabs stay at the top and
   the box at the bottom, as on a phone (the max-width:860px rules above). */
.panel:not(.sayonly){display:block;overflow:auto;overscroll-behavior:contain}
.panel:not(.sayonly)>.ph{position:sticky;top:0;z-index:3;background:var(--surface)}
.panel:not(.sayonly)>.list{overflow:visible;padding-bottom:16px}
.panel.with-composer:not(.sayonly)>.composer{position:sticky;bottom:0;z-index:3;background:var(--surface)}

/* Publishing the new version of a live store page (review-room.js l2Html) */
.dialog.wide.l2{width:min(600px,100%)}
.l2-body{padding:4px 20px 18px;display:flex;flex-direction:column;gap:14px}
.l2-body .lead{margin:0;font-size:15px}
.l2-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.l2-step>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.l2-step.dim{opacity:.5}
.l2-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--surface);font-weight:700;font-size:13px}
.l2-fix>div{background:var(--sunk);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.l2-fix .l2-num{background:var(--warn)}
.l2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.l2-list li{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px}
.l2-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);font-size:11.5px;font-weight:700;flex:none}
.l2-t{flex:1;min-width:0}
.l2-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.l2-opt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);min-height:72px}
.l2-opt b{font-size:14.5px}.l2-opt span{font-size:12.5px;color:var(--ink-3)}
.l2-opt[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.l2-opt:disabled{opacity:.55;cursor:not-allowed}
.l2-go{justify-content:flex-end;align-items:center}
.l2-go .tb.primary{padding:9px 14px;font-size:14px}
.l2-how summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--ink-2)}
.l2-how ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.l2-hist{border-top:1px solid var(--line);padding-top:10px}
.l2-hist .lbl{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.l2-hist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.l2-hist li{display:flex;justify-content:space-between;align-items:center;gap:8px}
.l2-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.l2-checks li{display:flex;gap:8px;align-items:center}.l2-checks svg{width:16px;height:16px;flex:none}
@media (max-width:560px){.l2-pick{grid-template-columns:1fr}}
.l2-rev>div{background:var(--blue-soft);border-radius:10px;padding:10px 12px}
.l2-rev .l2-num svg{width:14px;height:14px}
.l2-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.l2-people li{display:flex;justify-content:space-between;padding:4px 8px;border-radius:8px;background:var(--surface)}
.l2-people b{font-size:12px;color:var(--warn)}.l2-people b.y{color:var(--ok)}
.l2-who{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.l2-who label{display:flex;gap:8px;align-items:center;font-size:13.5px;min-height:28px}
#l2-rule{min-height:34px;border:1px solid var(--line-2);border-radius:8px;padding:0 8px;font:inherit;background:var(--surface);color:var(--ink);align-self:flex-start}
/* Klaude's card in its own column beside the page (review-room.js sgDock): wide screens only */
.sg-lead{flex:none;padding:0 16px 10px}
#stage.sgdock #frames,#stage.sgdock #banner,#stage.sgdock #barwrap{margin-right:460px}
/* The card is the panel while it's docked (review-room.js sgDock): the side panel steps aside, so the page has the rest. */
.app.sgdocked #panel{display:none}
#stage.sgdock #rvdock{left:0;right:460px;transform:none}
#stage.sgdock #rvdock .sugg{position:fixed;top:var(--sgtop,64px);right:12px;bottom:12px;width:436px;max-height:none;z-index:20;animation:none}
#stage.sgdock #rvdock .sugg::before{display:none}
#stage.sgdock #rvdock .sugg>.sg-lead .sg-why{font-size:14.5px;line-height:1.55}
/* A change with blanks still in its words (l2Gaps): asks for them before it can be approved or published. */
.sg-gap{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;margin-bottom:8px;border-radius:8px;background:var(--warn-soft);border:1px solid var(--warn);color:var(--ink);font-size:13px;line-height:1.45}
.sg-gap>.ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--warn)}
.sg-gap>span{flex:1;min-width:0}
.sg-gap .tb{flex:none}
.rvs-gap{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.l2-list li.gap{border-color:var(--warn);background:var(--warn-soft)}
.l2-t small{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:2px;font-size:12px;color:var(--warn)}
.l2-t small .ic{width:13px;height:13px}

/* Publish, confirmed (Kolin, 2026-11-03): where it goes and what changes on the left, the checks on the right, one primary
   press that's inactive until they pass. The header's Publish lights only when approved changes aren't live. */
.dialog.wide.l2.l2x{width:min(820px,100%)}
.l2-sub{margin:0;font-size:14px;color:var(--ink-2)}
.l2-cols{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}
.l2-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.l2-sec{display:flex;flex-direction:column;gap:8px}
.l2-where{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px}
.l2-where>svg{flex:none;width:20px;height:20px;color:var(--ok);margin-top:2px}
.l2-where>span{display:flex;flex-direction:column;gap:3px;min-width:0}.l2-where b{font-size:15px}.l2-where .mono{color:var(--ink-2);word-break:break-all}
.l2-where small{font-size:13px;line-height:1.45;color:var(--ink-2)}
.l2-k{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--blue-soft);color:var(--blue)}
.l2-ck{padding:14px;border-radius:12px;background:var(--sunk)}
.l2-ck ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.l2-ck li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.35}.l2-ck li>svg{flex:none;width:18px;height:18px;margin-top:1px}
.l2-ck li.ok>svg{color:var(--ok)}.l2-ck li.no>svg{color:var(--late)}.l2-ck li.soft>svg{color:var(--ink-3)}
.l2-ck small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.pc-why.ok{color:var(--ink-2);font-weight:500}
@media (max-width:760px){.l2-cols{grid-template-columns:1fr}}
.pchip .pdot{width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block}
.pgo.pgo-on{position:relative;box-shadow:0 4px 12px -4px rgba(47,91,216,.55)}
.pgo-dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#F2A35A;border:2px solid var(--surface)}
.pgo.pgo-off{color:var(--ink-3);background:var(--sunk);border-color:var(--line)}
/* Request review: each person in or out, must approve or comments only; a note and a date. */
.l2-whos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.l2-rw{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}.l2-rw.off{opacity:.6}
.l2-rw>label{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:14px}.l2-rw>label>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-seg{flex:none;display:flex;padding:2px;border-radius:8px;background:var(--sunk)}
.l2-seg button{all:unset;cursor:pointer;padding:5px 9px;border-radius:6px;font-size:12px;font-weight:700;color:var(--ink-2)}.l2-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.l2-seg button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.l2-add{display:flex;gap:8px}.l2-add input{flex:1;min-width:0;min-height:38px;padding:0 10px;border:1.5px dashed var(--line-2);border-radius:10px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.l2-two{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px}.l2-two>div{display:flex;flex-direction:column;gap:6px}
.l2-two textarea,.l2-two input{font:inherit;font-size:14px;padding:8px 10px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink)}
.l2-note{margin:0;padding:8px 10px;border-radius:8px;background:var(--sunk);font-size:13.5px}
.l2-people small{font-weight:500;color:var(--ink-3);margin-left:4px}
@media (max-width:560px){.l2-two{grid-template-columns:1fr}.l2-rw{flex-wrap:wrap}}
/* Send to Klaude, from the edit bar: Klaude's orange (powered by Claude). */
.tb.fbsend{background:#B8532F;border-color:#B8532F;color:#fff}.tb.fbsend:hover{background:#9E4526}

/* A new page's card (Kolin, 2026-11-03): Klaude's hello in Claude's orange, the two ways to give feedback, then the one
   decision. The same standard as a page improved. */
.pcard{display:flex;flex-direction:column;gap:12px;padding:4px 0 6px}
.pc-hi{display:flex;gap:10px;align-items:flex-start}.pc-hi .kav{flex:none;background:#B8532F;color:#fff}
.pc-hi b{display:block;font-size:15px;line-height:1.3}.pc-hi small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pc-ways{display:flex;flex-direction:column;gap:6px}
.pc-way{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:1.35}
.pc-way>svg,.pc-t{flex:none;width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:7px;background:var(--sunk);color:var(--ink)}.pc-t{display:grid;place-items:center;padding:0;font-weight:700}
.pc-way small{display:block;color:var(--ink-2)}
.pc-st{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.pc-st.ok{flex-direction:row;align-items:flex-start;gap:12px;background:var(--ok-soft);border-color:transparent}.pc-st.ok>svg{flex:none;width:22px;height:22px;color:var(--ok)}
.pc-st b{display:block;font-size:14.5px}.pc-st small{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.pc-lbl{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.pc-approve{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:10px;background:#1D8455;color:#fff;font-weight:700;font-size:14.5px}
.pc-approve:hover{background:#176B45}.pc-approve:focus-visible{outline:3px solid #86efac;outline-offset:2px}.pc-approve[disabled]{opacity:.6;cursor:default}.pc-approve svg{width:16px;height:16px}
.pc-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
/* The bottom bar's tray: what Klaude has from you, and Send to Klaude. */
.tray{display:flex;align-items:center;gap:12px;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden}
.tray-n{display:flex;align-items:center;gap:12px}.tray-n>span{display:inline-flex;align-items:center;gap:5px}.tray-n svg{width:15px;height:15px;color:var(--blue)}
.tray-s,.tray-h{color:var(--ink-3)}.tray-h{display:inline-flex;align-items:center;gap:6px}.tray-h svg{width:15px;height:15px}
.kstat .kav{background:#B8532F;color:#fff}