:root{
  --paper:#ffffff; --shell:#f6f8fb; --ink:#101828; --muted:#667085; --rule:#e6e9ef;
  --add-bg:#e4f3e9; --add-ink:#0f5c37; --add-mark:#7fc39c;
  --del-bg:#fceceb; --del-ink:#8c1d18; --del-mark:#e0938d;
  --focus:#2563eb; --warn-bg:#fdf3dc; --warn-ink:#7a5a11;
  --tint:#eef4ff; --tint-line:#d6e4ff;
  --chg-bg:#fee4e2; --chg-ink:#b42318;
  --type-bg:#eef2f7; --type-ink:#475467;
  --ok:#12b76a;
  --r:10px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--shell);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:30px 22px 90px}
a{color:var(--focus)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.lede{color:var(--muted);margin:0;max-width:60ch;font-size:14px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.top-title{min-width:260px;flex:1}

/* ---------- connection status card ---------- */
.conn{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);padding:12px 14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.conn-dot{flex:0 0 9px;height:9px;border-radius:50%;background:#98a2b3}
.conn[data-state=ok] .conn-dot{background:var(--ok)}
.conn[data-state=busy] .conn-dot{background:#f79009}
.conn[data-state=error] .conn-dot{background:#d92d20}
.conn-text{min-width:0}
.conn-text b{font-size:13.5px;font-weight:600;display:block}
.conn-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
/* an error is the one time the detail has to be readable in full */
.conn[data-state=error]{align-items:flex-start}
.conn[data-state=error] .conn-dot{margin-top:5px}
.conn[data-state=error] .conn-sub{white-space:normal;overflow:visible;max-width:46ch;color:#b42318}
.conn-controls{display:flex;align-items:center;gap:8px;margin-left:4px}

.topbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.topbar .grow{flex:1;min-width:220px}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=search],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:14px;padding:9px 11px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:8px}
input:focus,select:focus,textarea:focus,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.search{position:relative}
.search input{padding-left:34px}
.search-i{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--muted);pointer-events:none}
button{font:inherit;font-size:14px;font-weight:500;padding:9px 14px;border-radius:8px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
button:hover{background:#f7f9fa}
button.primary{background:var(--ink);border-color:var(--ink);color:#fff}
button.primary:hover{background:#2b3844}
button.mini{font-size:12.5px;padding:5px 10px}
.btn-ghost{display:inline-flex;align-items:center;gap:4px;color:var(--focus);border-color:var(--rule);font-size:13.5px;font-weight:500}
.count{font-size:13px;color:var(--muted);white-space:nowrap;padding-bottom:9px}

/* a check the schema calls for but the sheet can't feed yet */
.sync-todo>summary .count{color:#b54708}
.sync-todo code{font-family:var(--mono);font-size:11.5px;background:#f2f5f9;border:1px solid var(--rule);
  border-radius:4px;padding:1px 5px;word-break:break-all}

/* ---------- access checker ---------- */
.tools{margin-top:14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.tools>summary{cursor:pointer;list-style:none;padding:11px 16px;font-size:13px;font-weight:600;color:var(--muted)}
.tools>summary::-webkit-details-marker{display:none}
.tools>summary:hover{color:var(--ink)}
.tools-b{padding:0 16px 16px}
.tools-row{display:flex;gap:9px;align-items:center;margin:10px 0}
.tools-row .probe-url{flex:1;font-family:var(--mono);font-size:12.5px}
.probe-out{font-size:13px;line-height:1.55;border-radius:8px;padding:10px 13px}
.probe-out:empty{display:none}
.probe-out code{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:11.5px;
  background:rgba(255,255,255,.65);border-radius:4px;padding:2px 6px;word-break:break-all}
.probe-ok{background:var(--add-bg);border:1px solid var(--add-mark);color:var(--add-ink)}
.probe-warn{background:var(--warn-bg);border:1px solid #dcc282;color:var(--warn-ink)}
.probe-bad{background:var(--del-bg);border:1px solid var(--del-mark);color:var(--del-ink)}

/* ---------- back to top ---------- */
.totop{position:fixed;right:20px;bottom:20px;z-index:20;display:flex;align-items:center;gap:7px;
  padding:9px 15px 9px 12px;border-radius:22px;background:var(--paper);border:1px solid var(--rule);
  font-size:13px;font-weight:500;color:var(--ink);box-shadow:0 3px 10px rgba(16,24,40,.13)}
.totop:hover{background:#f7f9fa;border-color:#cfd6e0}
.totop-a{width:8px;height:8px;border-left:1.9px solid var(--focus);border-top:1.9px solid var(--focus);
  transform:rotate(45deg);position:relative;top:2px}
@media(max-width:560px){.totop{right:14px;bottom:14px}}

/* chevrons */
.chev{width:7px;height:7px;border-right:1.8px solid #98a2b3;border-bottom:1.8px solid #98a2b3;
  transform:rotate(45deg);flex:0 0 auto;margin-left:2px}
.chev-r{transform:rotate(-45deg)}

/* ---------- data source banner ---------- */
.src-banner{font-size:13.5px;font-weight:500;border-radius:8px;padding:10px 14px;margin-bottom:16px}
.src-sample{background:var(--warn-bg);border:1px solid #dcc282;color:var(--warn-ink)}
.src-live{background:var(--add-bg);border:1px solid var(--add-mark);color:var(--add-ink)}

/* ---------- hero summary band ---------- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--tint-line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.hero-main{display:flex;align-items:flex-start;gap:13px;min-width:280px;flex:1}
.hero-i{flex:0 0 38px;height:38px;border-radius:9px;background:#dbe8ff;display:flex;align-items:center;justify-content:center}
.hero-i svg{width:19px;height:19px;fill:var(--focus)}
.hero-h{font-size:17px;font-weight:600;margin:0 0 1px;letter-spacing:-.01em}
.hero-sub{margin:0;font-size:14px;color:#344054}
.hero-hint{margin:5px 0 0;font-size:12.5px;color:var(--focus)}
.hero-tiles{display:flex;gap:10px;flex-wrap:wrap}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:10px 14px;min-width:132px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center}
.tile-i{grid-row:1/3;width:28px;height:28px;border-radius:7px;background:#f2f5f9;display:flex;align-items:center;justify-content:center}
.tile-i svg{width:15px;height:15px;fill:var(--muted)}
.tile-v{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tile-l{font-size:11.5px;color:var(--muted)}

/* ---------- pills ---------- */
.pill{display:inline-block;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:20px;white-space:nowrap}
.pill-chg{background:var(--chg-bg);color:var(--chg-ink)}
.pill-type{background:var(--type-bg);color:var(--type-ink)}

/* ---------- latest changes index ----------
   A table-style jump list into the reviews below. */
.rf{background:var(--paper);border:1px solid var(--rule);border-radius:12px;margin:0 0 22px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden}
.rf-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.rf-h{font-size:15px;font-weight:600;margin:0;flex:1;letter-spacing:-.01em}
.rf-showing{font-size:12.5px;color:var(--muted);white-space:nowrap}
.rf-list{list-style:none;margin:0;padding:0}
.rf-item+.rf-item{border-top:1px solid var(--rule)}
.rf-open{width:100%;text-align:left;border:0;border-radius:0;background:none;cursor:pointer;
  display:grid;grid-template-columns:22px minmax(120px,1.4fr) minmax(90px,1fr) auto auto 14px;
  align-items:center;gap:12px;padding:9px 18px;font-size:13.5px}
.rf-open:hover{background:#f9fafc}
.rf-item .rf-n{font-size:12px;color:var(--muted);text-align:right}
.rf-item .rf-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-item .rf-u{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-open:hover .rf-t{text-decoration:underline}
.rf-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rf-d{font-size:12.5px;color:var(--muted);white-space:nowrap}
.rf-foot{border-top:1px solid var(--rule);text-align:center}
.rf-more{width:100%;border:0;border-radius:0;background:none;color:var(--focus);font-size:13.5px;
  padding:11px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.rf-more:hover{background:#f9fafc}
@media(max-width:760px){
  .rf-open{grid-template-columns:20px 1fr auto;row-gap:3px}
  .rf-item .rf-u{grid-column:2/4}
  .rf-d,.rf-open>.chev{display:none}
}

/* ---------- page rows ---------- */
.page{background:var(--paper);border:1px solid var(--rule);border-radius:12px;margin-bottom:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.page>summary{cursor:pointer;list-style:none;padding:15px 18px;display:flex;align-items:flex-start;gap:12px}
.page>summary::-webkit-details-marker{display:none}
.page>summary:hover{background:#fcfdfe}
.p-num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--tint);color:var(--focus);
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.p-main{flex:1;min-width:0}
.p-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.page[open] .p-right .chev{transform:rotate(-135deg)}
.p-right .chev{transform:rotate(45deg);margin-top:-3px}
.u{font-size:15.5px;font-weight:600;word-break:break-all;color:var(--focus);display:flex;align-items:center;gap:6px}
.page>summary:hover .u{text-decoration:underline}
.ext{display:inline-flex;flex:0 0 auto}
.ext svg{width:13px;height:13px;fill:var(--muted)}
.ext:hover svg{fill:var(--focus)}
.line2{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;font-size:12.5px;color:var(--muted);margin-top:4px}
.line2 b{color:#344054;font-weight:600}
.latest{font-size:13px;color:#475467;margin-top:7px}
.badge{display:inline-block;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:20px;border:1px solid var(--rule);color:var(--muted)}
.badge.live{background:var(--add-bg);border-color:var(--add-mark);color:var(--add-ink)}
.badge.draft{background:var(--warn-bg);border-color:#dcc282;color:var(--warn-ink)}
.badge.new{background:var(--tint);border-color:var(--tint-line);color:#1849a9}
.body{padding:0 18px 18px;border-top:1px solid var(--rule)}
.block{margin-top:17px}
.block>h4{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px}

ul.chg{list-style:none;margin:0;padding:0;font-size:14px}
ul.chg li{padding:4px 0 4px 20px;position:relative}
ul.chg li::before{position:absolute;left:0;font-family:var(--mono);font-weight:700}
ul.chg li.add::before{content:"+";color:var(--add-ink)}
ul.chg li.del::before{content:"–";color:var(--del-ink)}
ul.chg li.mod::before{content:"~";color:var(--warn-ink)}
ul.chg li.nil::before{content:"·";color:var(--muted)}

/* ---------- collapsibles inside a page ---------- */
.fold{border:1px solid var(--rule);border-radius:5px;margin-top:9px;background:var(--paper)}
.fold>summary{cursor:pointer;list-style:none;padding:9px 13px;font-size:13.5px;font-weight:500;position:relative}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .count{padding:0;font-weight:400}
.fold>summary::after{content:"+";position:absolute;right:13px;top:8px;color:var(--muted);font-size:16px}
.fold[open]>summary::after{content:"–"}
.fold .inner{padding:0 13px 13px}
.foldbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.spacer{flex:1}

/* ---------- diff ---------- */
.diff{font-family:var(--mono);font-size:12.5px;line-height:1.6;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.gut{display:flex;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);background:#f2f4f6;border-bottom:1px solid var(--rule)}
.gut span{flex:1 1 50%;padding:4px 0 4px 48px}
.gut span+span{border-left:1px solid var(--rule)}
.row{display:flex;align-items:stretch}
.cell{flex:1 1 50%;display:flex;min-width:0}
.cell+.cell{border-left:1px solid var(--rule)}
.cell .no{flex:0 0 40px;text-align:right;padding:0 8px 0 0;color:#9aa5b1;background:#fafbfc;user-select:none;font-size:11.5px}
.cell .tx{flex:1;min-width:0;padding:0 9px;white-space:pre-wrap;word-break:break-word}
.cell.a{background:#eef8f1} .cell.a .tx{color:var(--add-ink)} .cell.a .no{background:#d9ede2}
.cell.d{background:#fdf1f0} .cell.d .tx{color:var(--del-ink)} .cell.d .no{background:#f7dedb}
/* the words that actually changed, inside an edited line */
.cell.a .hl{background:#aee5c1;border-radius:2px}
.cell.d .hl{background:#f5c2be;border-radius:2px}
.cell.void{background:#f7f8f9} .cell.void .no{background:#f7f8f9}
.skip{background:#fafbfc;color:var(--muted);font-size:11.5px;padding:3px 0 3px 48px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--sans)}

/* ---------- line comments (comment column beside a diff) ---------- */
.gut span.gcm{flex:0 0 40px;padding:0}
.cmcell{flex:0 0 40px;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--rule);background:#fafbfc}
.ln-cm-btn{border:0;background:none;cursor:pointer;font-size:13px;padding:4px;border-radius:4px;color:var(--muted);position:relative;font-family:var(--sans);
  visibility:hidden}
/* The icon stays out of the way until the line is highlighted or hovered,
   or already carries comments. */
.row.sel-hit .ln-cm-btn,.row:hover .ln-cm-btn,.ln-cm-btn.has-cm{visibility:visible}
.row.sel-hit{background:#eef4fd}
.row.sel-hit .cmcell{background:#e3ecfb}
.ln-cm-btn:hover{background:#eef2f6}
.ln-cm-count{display:inline-block;margin-left:2px;font-size:10.5px;font-weight:600;color:var(--focus)}
.ln-cm-panel{font-family:var(--sans);font-size:13px;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 14px}
/* a heading for each half of the panel, so the read and write parts of it
   are obviously separate things */
.cm-head{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:0 0 8px}
.cm-head-add{margin-top:0;padding-top:12px;border-top:1px solid var(--rule)}

ul.cm-list{list-style:none;margin:0 0 4px;padding:0}
ul.cm-list li{padding:0}
ul.cm-list li.cm-empty{color:var(--muted);font-size:13px}
.cm-item{display:flex;gap:10px;padding:10px 12px;margin-bottom:8px;
  background:#f7f9fc;border:1px solid var(--rule);border-radius:9px}
.cm-av{flex:0 0 26px;height:26px;border-radius:50%;background:var(--tint);color:#1849a9;
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.cm-b{min-width:0;flex:1}
.cm-meta{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted)}
.cm-meta b{font-size:13px;font-weight:600;color:var(--ink)}
.cm-when{font-size:11.5px}
/* the line a comment refers to: present, but clearly a reference not the point */
.cm-ctx{margin:5px 0 0;padding:3px 9px;border-left:2px solid var(--rule);background:var(--paper);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:pre-wrap;word-break:break-word;
  max-height:4.4em;overflow:hidden}
/* the comment itself — the thing you actually came to read */
.cm-text{margin:6px 0 0;font-size:14px;color:var(--ink);white-space:pre-wrap}
.cm-on{margin:0 0 9px}
.cm-on-l{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.cm-on .cm-ctx{margin:0;border-left-color:var(--focus)}
.cm-form input,.cm-form textarea{margin-bottom:8px;font-family:var(--sans)}
.cm-form textarea{resize:vertical;min-height:62px;display:block}

/* resolved comments stay readable but visibly settled */
ul.cm-list li.cm-resolved{opacity:.6;background:var(--paper)}
ul.cm-list li.cm-resolved .cm-text{text-decoration:line-through;text-decoration-color:var(--muted)}
.cm-done{font-size:10.5px;font-weight:600;color:var(--add-ink);background:var(--add-bg);
  border-radius:20px;padding:1px 8px}
.ln-cm-btn.all-done{opacity:.5}

/* the highlighted text a comment refers to, quoted in the comment panel */
.sel-quote{margin:0 0 9px;padding:6px 10px;border-left:3px solid var(--focus);background:#eef2f6;font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word}
ul.cm-list .sel-quote{border-left-color:var(--rule);background:#f7f8f9}

pre.code{font-family:var(--mono);font-size:12.5px;line-height:1.6;background:#fafbfc;border:1px solid var(--rule);border-radius:4px;padding:12px 14px;margin:0;max-height:460px;overflow:auto;white-space:pre}

/* ---------- version history ---------- */
ol.vh{list-style:none;margin:0;padding:0}
ol.vh li{border-top:1px solid var(--rule)}
ol.vh li:first-child{border-top:0}
ol.vh button.v{width:100%;text-align:left;border:0;background:none;padding:9px 4px;border-radius:0;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
ol.vh button.v:hover{background:#f7f9fa}
ol.vh button.v[aria-expanded=true]{background:#eef2f6}
ol.vh .vn{font-weight:600;font-size:13.5px;flex:0 0 58px;font-variant-numeric:tabular-nums}
ol.vh .vd{font-size:13px;color:var(--muted);flex:0 0 108px}
ol.vh .vs{font-size:13.5px;flex:1;min-width:160px}
.vdetail{padding:2px 4px 14px}

.flat{font-size:13.5px;color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:11px 14px}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.err{background:var(--del-bg);border:1px solid var(--del-mark);color:var(--del-ink);border-radius:4px;padding:11px 14px;font-size:13.5px}
.empty{background:var(--paper);border:1px dashed var(--rule);border-radius:6px;padding:34px 20px;text-align:center;color:var(--muted)}
footer{margin-top:26px;font-size:12.5px;color:var(--muted)}

@media(max-width:720px){
  .wrap{padding:22px 14px 70px}
  .gut span{padding-left:36px}
  .cell .no{flex:0 0 30px;font-size:10.5px}
  .diff{font-size:11.5px}
  ol.vh button.v{gap:2px 12px}
  ol.vh .vs{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media print{
  body{background:#fff}
  .wrap{max-width:none;padding:0}
  .noprint{display:none!important}
  .page,.fold{border:0}
  .page>summary::after,.fold>summary::after{display:none}
  .row,.skip{page-break-inside:avoid}
  @page{margin:11mm;size:landscape}
}