@font-face { font-family:Geist; src:url('/assets/brand/geist.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('/assets/brand/geist-mono.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  color-scheme:light;
  --bg:#f2f2ef; --surface:#fff; --surface-subtle:#fafaf8; --surface-muted:#f3f3f0; --surface-hover:#f6f7ff;
  --ink:#0b0b0a; --ink-2:#3a3a37; --muted:#6b6a65; --dim:#8f8e88;
  --line:#e8e7e2; --line-strong:#d6d5cf; --line-subtle:#f0efeb;
  --brand:#2a3fff; --brand-deep:#1f30d6; --brand-25:#f7f8ff; --brand-50:#eef0ff; --brand-300:#aab6ff; --brand-border:#d5daff;
  --night:#0d0d0d; --night-2:#161616; --night-line:#2b2b2b; --night-fg:#ededeb; --night-muted:#8a8a86;
  /* Code: a night block here; the signed-in pages draw it light in their light theme. */
  --code-bg:var(--night); --code-head:var(--night-2); --code-line:var(--night-line); --code-fg:var(--night-fg); --code-muted:var(--night-muted);
  --sel-bg:#c9d0ff; --sel-fg:#0b0b0a; /* selected text, readable on every surface */
  --block:#c4271c; --block-tint:#fdeeed; --block-text:#b0231a; --block-border:#f7cfcc;
  --amber:#f5b84b; --amber-tint:#fdf3e1; --amber-text:#8a5200; --amber-border:#f5dcaa; --amber-ink:#6f4a12;
  --ok:#1a7f4b; --ok-tint:#e8f5ee; --ok-border:#c7e8d5; --idle:#9a9993;
  --r-sm:0; --r-md:0; --r-lg:0; --r-panel:0; --r-round:0; /* square everywhere, like heedeo.com */
  --shadow-xs:0 1px 0 rgba(11,11,10,.04);
  --shadow-sm:0 1px 2px rgba(11,11,10,.05),0 0 0 1px var(--line);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(31,48,214,.3);
  --ring:0 0 0 3px rgba(42,63,255,.22);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --step-gutter:23px; /* a step's number square on Domains' steps */
  /* Motion: ease-out so a response starts at full speed, short so it never trails the click. */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-fast:120ms; --dur:160ms; --dur-slow:220ms;
}
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none!important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:13px/1.5 Geist,system-ui,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; letter-spacing:-.015em; line-height:1.25; font-weight:600; }
p { margin:0 0 10px; }
a { color:var(--brand); text-underline-offset:3px; text-decoration:none; }
a:hover { text-decoration:underline; }
code,kbd,pre { font-family:var(--mono); }
kbd { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--surface); color:var(--muted); font-size:11px; font-weight:500; }
:not(pre)>code { font-size:.9em; background:var(--surface-muted); border-radius:var(--r-sm); padding:1px 4px; overflow-wrap:anywhere; }
img,svg { flex-shrink:0; }
.skip { position:absolute; left:-999px; top:8px; z-index:99; background:var(--brand); color:#fff; padding:6px 10px; border-radius:var(--r-sm); }
.skip:focus { left:8px; }
:focus-visible { outline:none; box-shadow:var(--ring); }
::selection { background:var(--sel-bg); color:var(--sel-fg); }
.muted { color:var(--muted); }
.micro { font-size:12px; color:var(--muted); }
.mono { font-family:var(--mono); }
.grow { flex:1; min-width:0; }
.sr,.code-tabs.tabbed .code-head > span:first-child,.copy-icon > span:first-of-type { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* with tabs, the tab names a block */
/* Buttons */
button,.button { font:inherit; font-size:13px; font-weight:500; height:32px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; text-decoration:none; box-shadow:var(--shadow-xs); transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); }
button:hover,.button:hover { background:var(--surface-subtle); border-color:var(--dim); text-decoration:none; }
button:active,.button:active { transform:scale(.98); }
button:disabled { opacity:.55; cursor:default; }
.primary { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--shadow-btn); }
.primary:hover { background:var(--brand-deep); border-color:var(--brand-deep); }
.ghost { border-color:transparent; background:transparent; color:var(--ink-2); box-shadow:none; }
.ghost:hover { background:var(--surface-muted); border-color:transparent; }
.danger { color:var(--block-text); }
.danger:hover { background:var(--block-tint); border-color:var(--block-border); }
.sm { height:28px; padding:0 10px; font-size:12.5px; }
.lg { height:40px; padding:0 16px; font-size:14px; }
.wide { width:100%; }
.icon { width:28px; padding:0; flex-shrink:0; } /* an icon alone; its name is its aria-label */
.link { height:auto; padding:0; border:0; background:none; box-shadow:none; color:var(--brand); font-weight:500; }
.link:hover,.link:active { background:none; border-color:transparent; text-decoration:underline; transform:none; }
.actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:0; }
/* Fields */
input,textarea,select { font:inherit; font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); height:32px; padding:0 10px; width:100%; min-width:0; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
textarea { height:auto; padding:10px; line-height:1.55; resize:vertical; font-family:var(--mono); font-size:12px; }
input:hover,textarea:hover { border-color:var(--dim); }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
input[aria-invalid=true] { border-color:var(--block); }
/* A select stays native (keyboard, screen readers) and is drawn like the inputs, with a chevron. */
select { -webkit-appearance:none; appearance:none; padding-right:30px; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
select:hover { border-color:var(--dim); }
select option { background:var(--surface); color:var(--ink); }
/* A checkbox or radio keeps its native size beside its label, not the text field's box. */
input[type=checkbox],input[type=radio] { width:16px; height:16px; padding:0; margin:0; border:0; box-shadow:none; background:none; flex:none; accent-color:var(--brand); }
input[type=checkbox]:focus,input[type=radio]:focus { box-shadow:none; }
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.field { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:2px 24px; align-items:center; padding:14px 0; border-top:1px solid var(--line-subtle); }
.field:first-child { border-top:0; padding-top:0; }
.field:last-child { padding-bottom:0; }
.field label { font-weight:500; }
.field .hint { grid-column:1; font-size:12.5px; color:var(--muted); margin:0; }
.field > input,.field > select { grid-column:2; grid-row:1 / span 2; }
.field label:has(> input[type=checkbox]) { display:inline-flex; align-items:center; gap:8px; justify-self:start; }
label.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* Panels */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); min-width:0; }
.card > .table-wrap:first-child { border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg); }
.card > .table-wrap:last-child { border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg); }
.stack-y > * + * { margin-top:12px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.card-head :is(h2,h3) { font-size:13.5px; }
.card-head p { margin:1px 0 0; color:var(--muted); font-size:12.5px; }
.card-body { padding:16px; min-width:0; }
.card-body > :last-child { margin-bottom:0; }
.card-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:10px 16px; border-top:1px solid var(--line); background:var(--surface-subtle); border-radius:0 0 var(--r-lg) var(--r-lg); font-size:12.5px; color:var(--muted); }
/* Stats: one strip of numbers on hairlines that wrap with it (each cell draws its left and top line,
   the strip clips the outer ones). */
.stats { display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stats > .stat { flex:1 1 170px; min-width:0; box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line); }
.stat { padding:16px 18px; }
.stat .label { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.stat .value { font-size:28px; line-height:32px; font-weight:600; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:8px; }
.stat .value.bad { color:var(--block); }
.stat .value strong { font-weight:inherit; }
.stat .value small { font-size:12.5px; font-weight:400; color:var(--muted); letter-spacing:0; }
.stat .sub { font-size:12px; color:var(--muted); }
.empty { padding:32px 16px; text-align:center; color:var(--muted); }
.empty-icon { width:36px; height:36px; margin:0 auto 10px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--surface-muted); color:var(--muted); }
.empty strong,.empty h1 { display:block; color:var(--ink); font-size:inherit; font-weight:600; margin-bottom:2px; }
.empty h1 { font-size:15px; margin-bottom:4px; }
/* Key/value rows */
dl.rows { margin:0; display:grid; grid-template-columns:160px minmax(0,1fr); }
dl.rows dt,dl.rows dd { margin:0; padding:10px 0; border-top:1px solid var(--line-subtle); min-width:0; }
dl.rows dt { color:var(--muted); }
dl.rows > dt:first-of-type,dl.rows > dt:first-of-type + dd { border-top:0; padding-top:0; }
dl.rows > dd:last-child,dl.rows > dd:last-child ~ dt { padding-bottom:0; }
.checks { list-style:none; margin:0; padding:0; }
.check { display:grid; grid-template-columns:16px minmax(0,1fr); gap:0 10px; padding:10px 16px; border-top:1px solid var(--line-subtle); }
.check:first-child { border-top:0; }
.check > svg { margin-top:2px; }
.check strong { font-weight:500; display:block; }
.check p,.check ul { margin:1px 0 0; color:var(--muted); font-size:12.5px; }
.check ul { padding-left:14px; }
.check.ok > svg { color:var(--ok); }
.check.note > svg,.check.unknown > svg { color:var(--dim); }
.check.unknown strong { color:var(--muted); font-weight:400; }
.check.warn { background:var(--amber-tint); border-top-color:var(--amber-border); }
.check.warn + .check:not(.warn) { border-top-color:var(--amber-border); }
.check.warn > svg,.check.warn strong { color:var(--amber-text); }
.check.warn p,.check.warn ul { color:var(--amber-ink); }
dl.facts { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
dl.facts div { padding:12px 16px; border-left:1px solid var(--line-subtle); min-width:0; }
dl.facts div:first-child { border-left:0; }
dl.facts dt { font-size:12px; color:var(--muted); margin-bottom:3px; }
dl.facts dd { margin:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill svg { width:12px; height:12px; }
.key { display:flex; align-items:center; gap:6px; min-width:0; }
.key code { flex:1; min-width:0; font-size:12px; background:var(--surface-subtle); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 10px; overflow-wrap:anywhere; line-height:1.5; }
/* Notices */
.notice,.error,.callout { display:flex; gap:8px; align-items:flex-start; padding:8px 12px; border-radius:var(--r-md); border:1px solid; margin:0 0 12px; font-size:12.5px; }
.notice svg,.error svg,.callout svg { margin-top:1px; }
.notice { background:var(--ok-tint); border-color:var(--ok-border); color:#14603a; }
.error { background:var(--block-tint); border-color:var(--block-border); color:var(--block-text); }
.callout { background:var(--amber-tint); border-color:var(--amber-border); color:var(--amber-text); }
.callout code,.error code,.notice code { background:rgba(255,255,255,.7); }
/* Pills and status */
.badge { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 6px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-subtle); font:500 11.5px/1 var(--mono); color:var(--ink-2); white-space:nowrap; }
.badge.block { background:var(--block-tint); border-color:var(--block-border); color:var(--block-text); }
.badge.warn { background:var(--amber-tint); border-color:var(--amber-border); color:var(--amber-text); }
.badge.brand { background:var(--brand-50); border-color:var(--brand-border); color:var(--brand-deep); }
.badge.ok { background:var(--ok-tint); border-color:var(--ok-border); color:var(--ok); }
.pill { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:500; white-space:nowrap; }
.pill.bad { background:var(--block-tint); border-color:var(--block-border); color:var(--block-text); }
.pill.warn { background:var(--amber-tint); border-color:var(--amber-border); color:var(--amber-text); }
.pill.ok { background:var(--ok-tint); border-color:var(--ok-border); color:var(--ok); }
.badges { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:11px; background:var(--surface-muted); color:var(--ink-2); font-size:12px; font-weight:500; white-space:nowrap; }
.chip i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.ok { background:var(--ok-tint); color:var(--ok); }
.chip.warn { background:var(--amber-tint); color:var(--amber-text); }
.chip.bad { background:var(--block-tint); color:var(--block); }
/* An info button and its tooltip, shown on hover and on focus. */
.info-tip { position:relative; display:inline-flex; width:auto; height:auto; padding:0; border:0; background:none; box-shadow:none; color:var(--dim); cursor:help; vertical-align:-2px; }
.info-tip:hover { background:none; color:var(--ink-2); }
.info-tip:active { transform:none; }
.tip-body { display:none; position:absolute; z-index:30; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); width:max-content; max-width:min(230px,80vw); padding:9px 11px; border-radius:8px; background:var(--ink); color:#f2f2ef; font-size:12.5px; font-weight:400; line-height:18px; white-space:normal; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.info-tip:hover .tip-body,.info-tip:focus-visible .tip-body { display:block; animation:tip-in var(--dur-fast) var(--ease-out); }
@keyframes tip-in { from { opacity:0; translate:0 3px; } }
/* A checkbox drawn as a switch. */
.switch { position:relative; display:inline-flex; flex:none; width:34px; height:20px; cursor:pointer; }
.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.switch span { position:absolute; inset:0; pointer-events:none; border-radius:10px; background:#dcdbd6; transition:background var(--dur) var(--ease-out); }
.switch span::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform var(--dur) var(--ease-out); }
.switch input:checked + span { background:var(--brand); }
.switch input:checked + span::after { transform:translateX(14px); }
.switch input:focus-visible + span { box-shadow:var(--ring); }
.dot { width:7px; height:7px; border-radius:var(--r-round); background:var(--idle); display:inline-block; flex-shrink:0; }
.dot.block { background:var(--block); }
.dot.live { background:var(--brand); animation:pulse 1.6s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.seg,.seg-tabs > [role=tablist] { display:inline-flex; align-self:flex-start; gap:2px; padding:3px; border-radius:calc(var(--r-md) + 2px); background:var(--surface-muted); }
.seg a,.seg-tabs > [role=tablist] > [role=tab] { height:28px; padding:0 12px; border:0; border-radius:var(--r-md); background:none; box-shadow:none; color:var(--muted); font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.seg a:hover,.seg-tabs > [role=tablist] > [role=tab]:hover { color:var(--ink); text-decoration:none; background:none; }
.seg a[aria-current=page],.seg-tabs > [role=tablist] > [aria-selected=true] { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line); }
.seg-tabs,.seg-tabs > [role=tabpanel] { display:flex; flex-direction:column; gap:16px; min-width:0; }
.seg a span { color:var(--muted); font-variant-numeric:tabular-nums; }
/* The Visitors filter: one row above the table, the id wider than the dates. */
form.filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:0 0 16px; }
form.filters > div { flex:0 1 160px; }
form.filters > .visitor-id { flex:1 1 240px; max-width:360px; }
form.filters > .actions { flex:none; gap:12px; }
form.filters label { display:block; font-weight:500; margin-bottom:4px; }
/* Tables */
.table-wrap { overflow-x:auto; position:relative; } /* holds a cell's .sr label inside the scroll box */
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-weight:500; font-size:12px; color:var(--muted); padding:8px 16px; border-bottom:1px solid var(--line); background:var(--surface-subtle); white-space:nowrap; }
td { padding:10px 16px; border-bottom:1px solid var(--line-subtle); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--surface-hover); }
td.time { white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; }
td code { white-space:nowrap; }
td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
th.num { text-align:right; }
.table-note { margin-top:8px; }
fieldset.field { border:0; margin:0; min-width:0; }
fieldset.field legend { font-weight:500; padding:0; }
td input { height:28px; width:150px; font-size:12.5px; }
/* Code: a night block, its file name and buttons in a bar above the code */
.code-block { margin:0 0 14px; border:1px solid var(--code-line); border-radius:var(--r-lg); background:var(--code-bg); overflow:hidden; min-width:0; }
.code-block > pre { margin:0; border:0; border-radius:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.code-actions { display:flex; gap:2px; }
.code-block .real,.code-block.revealed .masked { display:none; }
.code-block.revealed .real { display:inline; }
pre { margin:0 0 14px; background:var(--code-bg); color:var(--code-fg); border:1px solid var(--code-line); border-radius:var(--r-lg); padding:12px 14px; font-size:12px; line-height:1.65; overflow-x:auto; max-width:100%; scrollbar-color:var(--code-line) transparent; scrollbar-width:thin; }
pre::-webkit-scrollbar { height:8px; }
pre::-webkit-scrollbar-thumb { background:var(--code-line); }
pre code { background:none; border:0; padding:0; color:inherit; font-size:inherit; }
.code-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; min-height:36px; padding:4px 6px 4px 14px; background:var(--code-head); border-bottom:1px solid var(--code-line); font:12px/1 var(--mono); color:var(--code-muted); }
.code-head button { background:transparent; border-color:transparent; color:var(--code-muted); box-shadow:none; }
.code-head button:hover { color:var(--code-fg); background:color-mix(in srgb,var(--code-fg) 8%,transparent); border-color:transparent; }
details { border-top:1px solid var(--line); }
details > summary { cursor:pointer; list-style:none; padding:10px 0; font-weight:500; display:flex; align-items:center; gap:8px; color:var(--ink-2); }
details > summary::-webkit-details-marker { display:none; }
details > summary::before { content:''; width:5px; height:5px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); transition:transform var(--dur-fast) var(--ease-out); margin:0 3px 0 1px; }
details[open] > summary::before { transform:rotate(45deg); }
details > :not(summary) { margin-left:16px; }
details.more { border:1px solid var(--line); border-radius:var(--r-lg); padding:0 16px; background:var(--surface-subtle); }
details.more > summary { padding:12px 0; }
details.more[open] { padding-bottom:12px; }
/* The brand mark and a list of links (the docs' sidebar; the signed-in pages' is app.css) */
.brand { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:500; letter-spacing:-.04em; color:var(--ink); text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand img { width:20px; height:18px; }
.brand .sub { color:var(--brand); font-weight:400; letter-spacing:-.02em; }
.nav { display:flex; flex-direction:column; gap:1px; margin:0; padding:0; list-style:none; }
.nav-label { font-size:11.5px; font-weight:500; color:var(--muted); padding:10px 8px 4px; }
.nav a { display:flex; align-items:center; gap:10px; height:32px; padding:0 8px; border-radius:var(--r-md); color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.nav a > span:first-of-type { flex:1; }
.nav a svg { color:var(--muted); }
.nav a:hover { background:#e9e9e5; color:var(--ink); }
.nav a[aria-current=page] { background:var(--surface); color:var(--ink); font-weight:500; box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.04); }
.nav a[aria-current=page] svg { color:var(--ink); }
.seg-tabs > [role=tabpanel] > .micro { margin:-6px 0 0; }
/* Connect: one card in the middle of the panel, the code in boxes */
.connect { min-height:100%; display:grid; place-items:center; padding:40px 0; background:radial-gradient(closest-side,var(--brand-50),transparent); }
.tag { display:inline-flex; align-items:center; height:18px; margin-left:8px; padding:0 6px; border-radius:var(--r-sm); background:var(--brand-50); color:var(--brand-deep); font-size:11px; font-weight:500; }
/* Review: the flags list beside the selected flag's panel, edge to edge in the panel */
.review { display:flex; flex-wrap:wrap; align-items:flex-start; min-height:calc(100dvh - 66px); }
.seg .bad { color:var(--block); font-weight:600; }
.filter { position:relative; border:0; }
.filter > summary { padding:0 10px; color:var(--ink); }
.filter > summary::before { display:none; }
.filter > summary svg { color:var(--muted); }
.sig-dot.bad { background:var(--block); }
@media (max-width:1023px) {
  .review { min-height:0; }
}
/* An id on a grey chip, with Copy; a share as a short bar */
.idchip { display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 2px 0 8px; border-radius:6px; background:var(--surface-muted); color:var(--ink-2); font-size:12px; min-width:0; }
.idchip:not(:has(button)) { padding-right:8px; }
.idchip > .mono { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idchip .icon { width:22px; height:22px; }
.bar { display:inline-block; flex:none; width:72px; height:6px; border-radius:3px; background:#eeeeea; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:3px; background:var(--brand); }
.bar > .warn { background:var(--amber); }
button[aria-pressed=true] { background:var(--surface-muted); border-color:var(--line-strong); box-shadow:inset 0 1px 2px rgba(0,0,0,.06); }
table.people .who { display:inline-flex; align-items:center; gap:8px; }
/* The person: who, their browsers, what they did, then More details */
.person { display:flex; flex-direction:column; gap:22px; }
details.more > .stack-y { margin-left:0; }
/* Settings: named groups of rows, then Advanced */
.settings { max-width:760px; }
.settings > * + * { margin-top:22px; }
.settings > .page-head { margin-bottom:0; }
.sgroup > h2 { display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:13px; color:var(--ink-2); }
.srow { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-height:52px; margin:0; padding:8px 16px; border-top:1px solid var(--line-subtle); }
.card > .srow:first-child { border-top:0; }
.srow .strong { font-weight:600; }
.srow > .grow { flex:1 0 auto; }
.srow.pref { flex-wrap:nowrap; }
.srow.pref > .grow { display:flex; flex:1 1 0; flex-direction:column; gap:2px; min-width:0; }
.page-head.wh-head { flex-direction:column; align-items:stretch; gap:14px; } /* the URL on its own line, the actions under it */
#assistants .card-body + .card-body { border-top:1px solid var(--line-subtle); }
.steps li.done .n { background:var(--brand); border-color:var(--brand); color:#fff; }
.steps li.now .n { border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 3px var(--brand-50); }
.steps .n { position:absolute; left:16px; top:12px; width:var(--step-gutter); height:var(--step-gutter); border-radius:var(--r-round); display:grid; place-items:center; border:1px solid var(--line-strong); background:var(--surface); font:500 11.5px/1 var(--mono); color:var(--ink-2); }
.steps { list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); }
.steps > li { position:relative; padding:14px 16px 14px calc(28px + var(--step-gutter)); border-top:1px solid var(--line-subtle); min-width:0; }
.steps > li:first-child { border-top:0; }
.steps li.later .n { color:var(--dim); border-color:var(--line); }
.steps li.later h3 { font-weight:500; color:var(--dim); }
@keyframes step-open { from { opacity:0; transform:translateY(-4px); } }
#zones-state { margin:12px 0 0; }
#zones-state:empty { display:none; }
#zones-state.bad { color:var(--block-text); }
#cf-form > .actions { justify-content:flex-end; margin-top:12px; }
.copy-icon.copied > svg { display:none; }
.copy-icon.copied { color:var(--ok); } /* the icon alone: a check in its place, the label stays for screen readers */
.copy-icon.copied::before { content:''; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Code tabs: without JavaScript every block stacked under its label; with it one bar of tabs, the
   chosen block's Copy at its right end. */
.code-tabs { position:relative; min-width:0; }
.code-tabs .code-block { margin:0; }
.code-tabs.tabbed .code-block { border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg); }
.code-tabs:not(.tabbed) [role=tabpanel] + [role=tabpanel] { margin-top:12px; }
.code-tabs [role=tablist] { display:flex; gap:2px; padding:0 92px 0 6px; background:var(--code-head); border:1px solid var(--code-line); border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow-x:auto; scrollbar-width:none; }
.code-tabs [role=tab] { height:36px; padding:0 10px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; box-shadow:none; color:var(--code-muted); font:12px/1 var(--mono); }
.code-tabs [role=tab]:hover { color:var(--code-fg); background:transparent; }
.code-tabs [role=tab][aria-selected=true] { color:var(--code-fg); background:var(--code-bg); }
.code-tabs [role=tab]:active { transform:none; }
.code-tabs.tabbed .code-head { position:absolute; top:0; right:0; height:36px; min-height:0; padding:0 4px; background:none; border:0; }
/* Already installed: each browser line before and after, as a short checklist inside its card */
.card > .steps { border:0; box-shadow:none; background:none; }
#switch-title { scroll-margin-top:64px; }
@media (max-width:640px) {
  .steps > li { padding-right:14px; }
}
/* The agent box, docs.heedeo.com's: a tinted header, the prompt, a Copy */
.prompt { border:1px solid var(--brand-border); border-radius:var(--r-lg); background:var(--brand-25); overflow:hidden; }
.prompt textarea { display:block; border:0; border-radius:0; box-shadow:none; resize:none; padding:12px 14px; background:transparent; color:var(--ink-2); font-size:12px; line-height:1.65; }
.prompt textarea:focus { box-shadow:none; }
@supports (field-sizing:content) {
  .prompt textarea { field-sizing:content; }
}
/* Public pages: top bar, landing, docs */
.top { position:sticky; top:0; z-index:20; height:52px; display:flex; align-items:center; gap:20px; padding:0 20px; border-bottom:1px solid var(--line); background:rgba(245,245,243,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.top nav { display:flex; gap:4px; flex:1; }
.top nav a { color:var(--ink-2); font-weight:500; padding:6px 10px; border-radius:var(--r-md); }
.top nav a:hover { background:var(--surface-muted); text-decoration:none; }
.top nav a[aria-current=page] { color:var(--ink); }
.top .actions { gap:8px; }
.hero { max-width:720px; margin:0 auto; padding:80px 24px 40px; text-align:center; }
.hero h1 { font-size:44px; letter-spacing:-.04em; line-height:1.05; font-weight:600; }
.hero p { font-size:16px; color:var(--muted); margin:16px auto 24px; max-width:540px; line-height:1.55; }
.hero .actions { justify-content:center; gap:8px; }
/* /mcp opened in a browser: the URL to copy, then a card per assistant. */
/* The frame around the one card that matters on a page (/mcp, the home page's agent box): heedeo.com's
   navy with its fine dither and soft blue streaks, a plain card inside. */
.frame { padding:56px; margin:8px 0 24px; background-color:#080b2a; background-image:radial-gradient(rgba(150,165,255,.22) .8px,transparent 1.1px),radial-gradient(ellipse 30% 7% at 8% 22%,rgba(88,112,255,.95),rgba(60,84,255,.35) 45%,transparent 75%),radial-gradient(ellipse 34% 6% at 92% 9%,rgba(110,132,255,.95),rgba(70,94,255,.3) 45%,transparent 75%),radial-gradient(ellipse 38% 8% at 90% 62%,rgba(80,104,255,.8),rgba(60,84,255,.25) 45%,transparent 75%),radial-gradient(ellipse 34% 7% at 18% 93%,rgba(88,112,255,.85),rgba(60,84,255,.3) 45%,transparent 75%),radial-gradient(ellipse 22% 5% at 50% 3%,rgba(80,104,255,.6),transparent 75%),radial-gradient(ellipse 80% 70% at 50% 50%,#10155a,transparent 85%); background-size:3px 3px,auto,auto,auto,auto,auto,auto; }
.foot { max-width:720px; margin:0 auto; padding:20px 24px 40px; border-top:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; }
.foot a { color:var(--muted); }
.docs { display:grid; grid-template-columns:240px minmax(0,1fr) 220px; }
.docs main { padding:40px 56px 80px; min-width:0; }
.docs article { max-width:680px; margin:0 auto; }
.eyebrow { font-size:12.5px; font-weight:500; color:var(--brand); margin-bottom:6px; }
.guide { font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.guide h1 { font-size:30px; letter-spacing:-.03em; color:var(--ink); margin:0 0 10px; }
.guide h1 + p { font-size:16px; line-height:1.6; color:var(--muted); }
.guide h2 { font-size:20px; color:var(--ink); margin:40px 0 10px; padding-top:28px; border-top:1px solid var(--line); scroll-margin-top:68px; }
.guide h3 { font-size:15px; color:var(--ink); margin:24px 0 6px; scroll-margin-top:68px; }
.guide p,.guide ul,.guide ol { margin:0 0 14px; }
.guide ul,.guide ol { padding-left:20px; }
.guide li { margin:3px 0; }
.guide strong { color:var(--ink); font-weight:600; }
.guide a { text-decoration:underline; text-decoration-color:var(--brand-border); }
.guide pre { margin:14px 0 18px; }
.guide .prompt,.guide .callout { margin:20px 0; }
.guide :not(pre)>code { font-size:.86em; }
.guide .table-wrap { margin:0 0 18px; }
.guide td code { white-space:nowrap; }
.next { display:flex; justify-content:flex-end; margin-top:40px; }
.next a { display:block; min-width:260px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); text-align:right; color:var(--ink); font-weight:500; text-decoration:none; }
.next a:hover { border-color:var(--line-strong); }
.next a span { display:block; font-size:12px; color:var(--muted); font-weight:400; margin-bottom:2px; }
.or { display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--muted); font-size:13px; }
.or::before,.or::after { content:''; flex:1; height:1px; background:var(--line); }
.out.ok { color:var(--brand-300); }
.out.wait { color:rgba(255,255,255,.55); }
.out.warn { color:var(--amber); }
@keyframes row-in { from { opacity:0; transform:translateY(4px); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1180px) {
  .docs { grid-template-columns:220px minmax(0,1fr); }
  .docs main { padding:32px 32px 72px; }
}
@media (max-width:1023px) {
  .docs { grid-template-columns:minmax(0,1fr); }
  .docs main { padding:24px 16px 56px; }
  .top { padding:0 16px; gap:12px; }
}
@media (max-width:640px) {
  .field { grid-template-columns:minmax(0,1fr); }
  .field > input,.field > select { grid-column:1; grid-row:auto; margin-top:6px; }
  form.filters > div, form.filters > .visitor-id { flex:1 1 100%; max-width:none; }
  dl.rows { grid-template-columns:minmax(0,1fr); }
  dl.rows dd { border-top:0; padding-top:0; }
  dl.facts div { border-left:0; border-top:1px solid var(--line-subtle); }
  .hero { padding:48px 16px 28px; }
  .hero h1 { font-size:32px; }
  .frame { padding:14px; }
  .guide h1 { font-size:26px; }
  .top nav { display:none; }
  .top .actions .ghost { display:none; }
  th,td { padding-left:12px; padding-right:12px; }
  .card-head,.card-body { padding-left:14px; padding-right:14px; }
  .summary .right { display:none; }
  table.stack thead { display:none; }
  table.stack tr { display:block; padding:10px 14px; border-bottom:1px solid var(--line-subtle); }
  table.stack tbody tr:last-child { border-bottom:0; }
  table.stack td { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 0; border:0; background:none!important; box-shadow:none!important; }
  table.stack td::before { content:attr(data-label); color:var(--muted); font-size:12px; flex-shrink:0; }
  table.stack td > div { text-align:right; }
  table.stack td form.inline { flex:1; justify-content:flex-end; }
  table.stack td input { width:auto; flex:1; min-width:0; }
  .check { padding:10px 14px; }
  table.stack td[data-label=Evidence] { display:block; padding:6px 0; }
  table.stack td[data-label=Evidence]::before { display:block; margin-bottom:2px; }
  table.stack td[data-label=Evidence] > div { text-align:left; }
  table.stack td:empty { display:none; }
}
/* Motion for the hover states that had none: colour, fast, ease-out. Transform stays in the list so
   the buttons here still ease their press. Rows in tables stay instant so scanning a list never smears. */
.nav a,.top nav a,.flag-list a,.filter-menu a,.toc a,.crumbs a,.next a,.off-actions > a,.wh-row,.wh-type,.fr,.seg a,.seg-tabs > [role=tablist] > [role=tab],.seg-radio label span,.code-head button,.code-tabs [role=tab],.info-tip { transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); }
@media (prefers-reduced-motion:no-preference) {
  details:not(.pop)[open] > :not(summary) { animation:step-open var(--dur) var(--ease-out); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

.prompt-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px 7px 12px; border-bottom:1px solid var(--brand-border); background:var(--brand-50); color:var(--brand-deep); font-weight:500; font-size:12.5px; }
.prompt-head > span { display:flex; align-items:center; gap:6px; }
.prompt-head .actions { gap:12px; }
.prompt-head .link { font-size:12.5px; gap:4px; color:var(--brand); }
.frame-card { background:var(--surface); padding:28px; color:var(--ink); }
.frame-card .prompt { border-radius:0; }
.frame-wrap { max-width:760px; margin:0 auto; padding:0 24px 72px; }
.frame-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.frame-head h2 { font-size:18px; font-weight:500; letter-spacing:-.01em; margin:0; }
.frame-card > p { font-size:14px; color:var(--ink-2); line-height:1.5; margin:14px 0 0; }
.frame-field { padding:14px 16px; background:var(--surface-muted); font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.frame-prompt { display:flex; align-items:center; gap:16px; margin-top:10px; line-height:1.5; }
.frame-prompt > span { flex:1; min-width:0; }
.frame-prompt > button { flex:none; }
.hero h1 .blue { color:var(--brand); }
.mcp-hero { padding-bottom:32px; }
.landing { max-width:720px; margin:0 auto; padding:0 24px 72px; }
.how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.how h3 { font-size:13.5px; margin-bottom:4px; }
.how p { color:var(--muted); font-size:12.5px; margin:0; }
.how .n { font:500 11.5px/1 var(--mono); color:var(--brand); display:block; margin-bottom:10px; }
.docs-nav { position:sticky; top:52px; height:calc(100dvh - 52px); overflow-y:auto; padding:16px 12px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.docs-nav .nav-label { padding:14px 8px 4px; }
.docs-nav .nav-label:first-child { padding-top:4px; }
.docs-nav .nav a { font-weight:400; color:var(--ink-2); height:30px; font-size:13.5px; }
.docs-nav .nav a[aria-current=page] { font-weight:500; color:var(--ink); }
.docs-nav .files { margin-top:auto; padding:12px 8px 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; }
.docs-nav .files a { color:var(--muted); }
.doc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.toc { position:sticky; top:52px; padding:40px 28px 24px 0; align-self:start; font-size:12.5px; max-height:calc(100dvh - 52px); overflow-y:auto; }
.toc-title { font-weight:500; color:var(--ink); margin-bottom:8px; }
.toc a { display:block; color:var(--muted); padding:4px 0 4px 12px; border-left:1px solid var(--line); line-height:1.35; }
.toc a:hover { color:var(--ink); text-decoration:none; }
.toc a.on { color:var(--brand); border-left-color:var(--brand); }
@media (max-width:1180px) {
  .toc { display:none; }
}
@media (max-width:1023px) {
  .docs-nav { position:static; height:auto; border:0; border-bottom:1px solid var(--line); padding:8px 16px; flex-direction:row; overflow-x:auto; }
  .docs-nav .nav-label,.docs-nav .files { display:none; }
  .docs-nav .nav { flex-direction:row; margin:0; }
  .docs-nav .nav a { white-space:nowrap; }
}
@media (max-width:640px) {
  .frame-card { padding:18px; }
  .frame-wrap { padding:0 16px 48px; }
  .frame-prompt { flex-direction:column; align-items:stretch; }
  .frame-prompt > button { align-self:flex-start; }
  .landing { padding:0 16px 48px; }
  .how { grid-template-columns:minmax(0,1fr); }
  .doc-head .button { display:none; }
}

.dot.wait { background:var(--amber); }
/* Sign-in split: the form on the left, the night panel with the ASCII mark and a live feed on the right */
.auth { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100dvh; background:var(--bg); }
.auth-side { display:flex; flex-direction:column; min-height:100dvh; padding:32px 56px 24px; }
.auth-main { flex:1; display:flex; flex-direction:column; justify-content:center; padding:40px 0; }
.auth-form { width:100%; max-width:400px; margin:0 auto; }
.auth-form :is(h1,h2) { font-size:28px; font-weight:500; letter-spacing:-.03em; }
.auth-lead { margin:10px 0 0; color:var(--muted); font-size:15px; }
.auth-form form { margin-top:32px; }
.auth-form label { display:block; font-weight:500; color:var(--ink-2); margin-bottom:6px; }
.auth-form input { height:44px; font-size:15px; padding:0 12px; }
.auth-form input.code { font:500 22px/1 var(--mono); letter-spacing:.5em; text-align:center; padding-left:.5em; }
.auth-form .lg { margin-top:16px; }
.auth-error { display:flex; gap:6px; align-items:flex-start; margin:8px 0 0; font-size:13px; color:var(--block-text); }
.auth-google { margin-top:32px; }
.auth-google .lg { margin-top:0; }
.auth-google:not([hidden]) + form { margin-top:0; }
.auth .google { gap:10px; }
.auth button:not(.primary) .spin { border-color:var(--line-strong); border-top-color:var(--ink); }
.auth-sent { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-md); background:var(--brand-50); color:var(--brand); margin-bottom:24px; }
.auth-back { margin-top:24px; display:flex; gap:16px; font-size:13px; }
.auth-back button { height:auto; padding:0; border:0; background:none; color:var(--muted); font-weight:400; }
.auth-back button:hover { color:var(--ink); text-decoration:underline; background:none; }
.auth-foot { display:flex; gap:16px; font-size:13px; }
.auth-foot a { color:var(--muted); padding:6px 0; }
.night { position:relative; overflow:hidden; background:var(--night); border-left:1px solid var(--night-line); color:#fff; }
.night canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.night-fade { position:absolute; inset:auto 0 0; height:60%; background:linear-gradient(to top,var(--night),rgba(13,13,13,.85),transparent); pointer-events:none; }
.feed { position:absolute; left:0; right:0; top:53%; bottom:64px; display:flex; flex-direction:column; justify-content:center; padding:0 48px; }
.feed ol { list-style:none; margin:0 auto; padding:0; width:100%; max-width:520px; display:grid; gap:4px; }
.feed li { display:flex; align-items:center; gap:12px; min-width:0; border:1px solid var(--night-line); background:rgba(22,22,22,.8); border-radius:var(--r-sm); padding:8px 12px; font-size:13px; animation:row-in var(--dur-slow) var(--ease-out); }
.feed li .what { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.55); }
.feed li .what b { font-weight:400; color:rgba(255,255,255,.9); }
.feed li .out { font:12px/1 var(--mono); flex-shrink:0; }
.night-foot { position:absolute; left:0; right:0; bottom:0; height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 48px; border-top:1px solid var(--night-line); font:13px/1 var(--mono); color:var(--night-muted); }
.night-foot span:last-child { display:flex; align-items:center; gap:8px; }
.night-foot .dot { width:6px; height:6px; background:var(--brand-300); }
.spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin 480ms linear infinite; }
.auth button,.auth .button { box-shadow:none; }
.auth .lg { height:44px; font-size:15px; }
.auth .primary { box-shadow:var(--shadow-btn); }
.auth-form label { font-size:14px; }
.auth-lead { font-size:15px; }
@media (max-width:1023px) {
  .auth { grid-template-columns:minmax(0,1fr); }
  .night { display:none; }
  .auth-side { padding:20px 16px 24px; }
}
.auth-switch { margin-top:24px; }
.auth-lead strong { color:var(--ink); }
.feed li > svg { color:var(--brand-300); }

/* Home: the setup (the one line, four steps and the live check), then the live view */
.setup-col { max-width:680px; margin:0 auto; padding:24px 0 8px; display:flex; flex-direction:column; gap:16px; }
.setup-col .eyebrow { margin:0 0 4px; }
.setup-title { font-size:26px; line-height:32px; letter-spacing:-.022em; overflow-wrap:anywhere; }
.setup-steps { list-style:none; margin:0; padding:0; }
.setup-steps > li { position:relative; display:flex; gap:14px; padding-bottom:22px; }
.setup-steps > li::before { content:''; position:absolute; left:11px; top:26px; bottom:2px; width:1px; background:var(--line); }
.setup-steps > li:last-child { padding-bottom:0; }
.setup-steps > li:last-child::before { display:none; }
.setup-n { width:23px; height:23px; flex-shrink:0; border-radius:var(--r-round); border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--ink-2); }
.setup-step { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.setup-step h3 { margin-top:2px; font-size:14px; }
.setup-step .code-block,.setup-step p { margin:0; }
.cmd { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:8px 10px 8px 20px; border-radius:var(--r-lg); background:var(--code-bg); color:var(--code-fg); box-shadow:inset 0 0 0 1px var(--code-line); }
.cmd code { padding:0; border:0; background:none; color:inherit; font-size:15px; overflow-wrap:anywhere; }
.check-card { margin-top:4px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.check-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 16px; background:var(--brand-25); border-bottom:1px solid var(--brand-border); }
.check-head h2 { font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--brand-deep); }
.check-when { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.check-when .link { font-size:12px; }
.check-when .link:disabled { color:var(--dim); cursor:default; }
.check-card.connected .check-head { background:var(--ok-tint); border-bottom-color:var(--ok-border); }
.check-card.connected .check-head h2 { color:var(--ok); }
.check-card.connected .check-head .dot { background:var(--ok); animation:none; box-shadow:0 0 0 4px rgba(26,127,75,.15); }
.check-card.connected .check-when { display:none; }
.check-hint { display:none; margin:0; padding:10px 16px; border-top:1px solid var(--line-subtle); }
.check-card.slow .check-hint { display:block; }
.check-head .dot { width:8px; height:8px; box-shadow:0 0 0 4px rgba(42,63,255,.15); }
.check-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; min-height:50px; padding:8px 16px; border-top:1px solid var(--line-subtle); }
.check-row:first-child { border-top:0; }
.check-row strong { flex:1; font-weight:500; }
.check-value { color:var(--dim); }
.check-row.done .check-value { color:var(--muted); }
.check-row .ring { width:18px; height:18px; border-radius:var(--r-round); border:1.5px dashed var(--line-strong); flex-shrink:0; }
.check-row .tick { width:18px; height:18px; border-radius:var(--r-round); background:var(--ok); color:#fff; display:none; place-items:center; }
.check-row.done .tick { display:grid; }
.check-row.done .ring { display:none; }
.home-cols { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin-top:16px; }
.home-cols > .card:first-child { flex:2 1 460px; }
.home-cols > .home-side { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.signup-checks { list-style:none; margin:0; padding:0; }
.signup-checks li { display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--line-subtle); }
.signup-checks li:first-child { border-top:0; }
.signup-checks .grow { flex:1; display:flex; flex-direction:column; }
.signup-checks strong { font-weight:500; }
.signup-checks .num { font-variant-numeric:tabular-nums; }
.signup-checks li.warn .num { color:var(--amber-text); font-weight:600; }
.signup-methods-title { margin:0; padding:10px 16px 0; border-top:1px solid var(--line-subtle); font-size:12.5px; font-weight:500; color:var(--muted); }
.signup-methods { margin:0; padding:10px 16px 14px; }
.signup-methods .flow-name { color:var(--ink-2); }
.flows.signup-methods .bar { background:var(--line-subtle); }
.social-hint { margin:8px 0 0; }
.home-actions td.bad { color:var(--block); font-weight:600; }
.home-actions td a { color:var(--ink); }
.flag-list { list-style:none; margin:0; padding:0; }
.flag-list a { display:flex; align-items:center; gap:12px; padding:10px 16px; color:var(--ink); border-top:1px solid var(--line-subtle); }
.flag-list li:first-child a { border-top:0; }
.flag-list a:hover { background:var(--surface-hover); text-decoration:none; }
.flag-list .grow { display:flex; flex-direction:column; }
.flag-list strong { font-weight:500; overflow-wrap:anywhere; }
@media (max-width:640px) {
  .setup-col { padding-top:8px; }
  .cmd { flex-wrap:wrap; padding:14px 10px 10px 14px; }
  .cmd code { font-size:13px; }
  .cmd .primary { width:100%; }
  .home-actions th,.home-actions td { padding-left:8px; padding-right:8px; }
  .home-actions :is(th,td):first-child { padding-left:14px; }
  .home-actions :is(th,td):last-child { padding-right:14px; }
}

.review-list { flex:2 1 520px; min-width:0; align-self:stretch; border-right:1px solid var(--line-subtle); }
.review-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; }
.filter > .filter-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:25; margin:0; min-width:200px; max-height:320px; overflow-y:auto; padding:6px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:0 8px 24px rgba(11,11,10,.1); }
.filter-menu a { display:flex; justify-content:space-between; gap:16px; padding:6px 8px; border-radius:var(--r-md); color:var(--ink-2); }
.filter-menu a:hover { background:var(--surface-muted); text-decoration:none; }
.filter-menu a[aria-current] { background:var(--brand-50); color:var(--ink); }
.filter-menu a > span:last-child { color:var(--muted); font-variant-numeric:tabular-nums; }
.group-h { margin:0; padding:8px 16px; background:var(--surface-subtle); border-block:1px solid var(--line-subtle); font-size:12px; font-weight:600; color:var(--ink-2); }
.group-h span { margin-left:4px; color:var(--muted); font-weight:400; }
.flag-rows { list-style:none; margin:0; padding:0; }
.fr { position:relative; display:flex; align-items:center; gap:8px; height:48px; padding-right:12px; border-bottom:1px solid var(--line-subtle); }
.fr:hover { background:var(--surface-subtle); }
.fr.sel { background:var(--brand-25); }
.fr.sel::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--brand); }
.fr-main { flex:1; min-width:0; align-self:stretch; display:flex; align-items:center; gap:12px; padding-left:16px; color:var(--ink); }
.fr-main:hover { text-decoration:none; }
.fr-main:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.sev { width:8px; height:8px; border-radius:2px; background:var(--block); flex-shrink:0; }
.fr-l { width:150px; flex-shrink:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-a { flex:1; min-width:0; color:var(--muted); font:12px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-t { color:var(--muted); font-size:12px; white-space:nowrap; }
.fr-btns { display:flex; gap:4px; opacity:.35; transition:opacity var(--dur-fast) var(--ease-out); }
.fr:hover .fr-btns,.fr.sel .fr-btns,.fr-btns:focus-within { opacity:1; }
.fr-btns form { margin:0; }
.fr-btns .confirm { color:var(--block); }
.review-panel { flex:1 1 340px; min-width:0; position:sticky; top:48px; max-height:calc(100dvh - 64px); overflow-y:auto; padding:16px 22px 22px; display:flex; flex-direction:column; gap:18px; }
/* Sticky beside a long list, the panel would stay pinned with its foot under the screen's edge until
   the list ran out. Held to the screen's height, it scrolls on its own; its parts keep their size. */
.review-panel > * { flex-shrink:0; }
.d-h { display:flex; align-items:center; gap:2px; color:var(--muted); font-size:12px; }
.d-title { margin:-6px 0 0; font-size:21px; letter-spacing:-.02em; }
dl.props { margin:0; display:flex; flex-direction:column; gap:2px; }
dl.props > div { display:flex; align-items:center; gap:8px; min-height:30px; }
dl.props dt { width:90px; flex-shrink:0; color:var(--muted); font-size:12.5px; }
dl.props dd { margin:0; display:flex; align-items:center; gap:6px; min-width:0; }
.d-sec h3 { margin:0 0 6px; font-size:12px; color:var(--ink-2); }
.d-sec h3 span { color:var(--muted); font-weight:400; }
.sig,.brow,.part { display:flex; align-items:center; gap:10px; min-height:38px; border-top:1px solid var(--line-subtle); }
.sig-dot { width:6px; height:6px; border-radius:var(--r-round); background:#c8c7c1; flex-shrink:0; }
.sig-dot.ok { background:var(--ok); }
.brow > svg { color:var(--muted); flex-shrink:0; }
/* The score's breakdown: its summary a row like the others, its rows the Signals rows, points at
   the right in tabular figures. */
details.breakdown { border-top:0; }
details.breakdown > summary { min-height:38px; padding:0; gap:10px; border-top:1px solid var(--line-subtle); color:var(--ink); }
details.breakdown > summary::before { display:none; }
details.breakdown > summary > svg { color:var(--muted); flex:none; transition:transform var(--dur-fast) var(--ease-out); }
details.breakdown[open] > summary > svg { transform:rotate(180deg); }
details.breakdown > :not(summary) { margin-left:0; }
.parts { list-style:none; margin:0; padding:0; }
.part-l { flex:1; min-width:0; }
.part-n { min-width:44px; text-align:right; font:12.5px var(--mono); font-variant-numeric:tabular-nums; }
.parts .off { color:var(--muted); }
.parts .off .part-n { text-decoration:line-through; }
.parts .total { border-top-color:var(--line); font-weight:500; }
.parts .total .sig-dot { visibility:hidden; }
.parts .total .part-n { font-weight:600; }
details.breakdown > p { margin:8px 0 0; }
.d-foot { display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--line-subtle); }
.row-btns { display:flex; gap:8px; }
.row-btns form { flex:1; margin:0; }
.row-btns button { width:100%; height:34px; }
.dark { background:#151514; border-color:#151514; color:#fff; }
.dark:hover { background:#000; border-color:#000; }
.dark kbd { background:transparent; border-color:#3a3a37; color:#c8c7c1; }
.tip-line { display:flex; align-items:center; gap:4px; }
@media (max-width:1023px) {
  .review-list { border-right:0; }
  .review-panel { position:static; max-height:none; overflow:visible; border-top:1px solid var(--line); }
}
@media (max-width:640px) {
  .fr-a,.fr .avatar { display:none; }
  .fr-main { gap:8px; }
  .fr-l { width:auto; flex:0 1 auto; }
  .review-head { padding:10px 12px; }
  .review-panel { padding:16px; }
}

.browser-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px 40px; }
.browser-groups h3 { margin:0 0 8px; font-size:12.5px; color:var(--ink-2); letter-spacing:0; }
.browser-groups dl.rows { grid-template-columns:130px minmax(0,1fr); }
.browser-groups dd { overflow-wrap:anywhere; }
/* The visitor's Browser card: identity and rows left, checks right, all readings below. */
.vb-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"id checks" "rows checks"; }
.vb-id { grid-area:id; padding:16px 16px 0; border-right:1px solid var(--line); min-width:0; }
.vb-name { margin:0; font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.vb-sub { margin:2px 0 0; color:var(--muted); }
.vb-checks { grid-area:checks; min-width:0; }
dl.vb-rows { grid-area:rows; align-content:start; padding:12px 16px 16px; border-right:1px solid var(--line); grid-template-columns:96px minmax(0,1fr); }
dl.vb-rows dt,dl.vb-rows dd { padding:7px 0; }
dl.vb-rows > dt:first-of-type,dl.vb-rows > dt:first-of-type + dd { padding-top:4px; }
dl.vb-rows dd { overflow-wrap:anywhere; }
details.readings > summary { padding:11px 16px; }
details.readings > summary .muted { font-weight:400; font-size:12px; }
details.readings > .browser-groups { margin:0; padding:4px 16px 16px; }
@media (max-width:860px) {
  .vb-body { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"id" "checks" "rows"; }
  .vb-id { border-right:0; padding-bottom:14px; border-bottom:1px solid var(--line); }
  dl.vb-rows { border-right:0; border-top:1px solid var(--line); }
}
/* Visitors: search, then one row per person */
form.search-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 16px; }
form.search-form input { flex:1 1 240px; max-width:360px; }
.p-head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.p-title { font-size:24px; line-height:32px; letter-spacing:-.022em; }
.p-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px; }
.conf { display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); }
.p-btns { display:flex; gap:8px; }
.p-btns button { height:34px; }
.bgrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px; }
.bcard { border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.bc-top { display:flex; align-items:center; gap:10px; }
.bc-top .grow { display:flex; flex-direction:column; }
.bc-top .grow > strong,.bc-top .grow > .micro { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-top > form { flex-shrink:0; margin-left:auto; }
.bc-ic { width:32px; height:32px; border-radius:8px; background:var(--surface-muted); color:var(--ink-2); display:grid; place-items:center; flex-shrink:0; }
.bc-bot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.bc-seen { margin-left:auto; white-space:nowrap; }
.p-cols { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; }
.p-cols > .card { flex:1 1 280px; padding:4px 0; }
.p-cols > .card:last-child:not(:first-child) { flex:2 1 440px; }
.p-cols .card-head { border-bottom:0; padding-bottom:4px; }
dl.kv { margin:0; }
dl.kv > div { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:40px; padding:0 16px; border-top:1px solid var(--line-subtle); }
dl.kv dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
dl.kv dd.bad { color:var(--block); }
.timeline { list-style:none; margin:0; padding:0 16px 6px; }
.tl { position:relative; display:flex; align-items:center; gap:12px; min-height:42px; padding-left:18px; }
.tl::before { content:''; position:absolute; left:3px; top:0; bottom:0; width:1px; background:var(--line); }
.tl:first-child::before { top:50%; }
.tl:last-child::before { bottom:50%; }
.tl:only-child::before { display:none; }
.tl-dot { position:absolute; left:0; width:7px; height:7px; border-radius:var(--r-round); background:#c8c7c1; box-shadow:0 0 0 3px var(--surface); }
.tl.bad .tl-dot { background:var(--block); }
.tl .grow { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-a,dl.kv dt { font-size:.93em; }
.tl-t { min-width:52px; text-align:right; white-space:nowrap; }
.tl-n { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.tl-why { color:var(--block-text); font-size:13px; white-space:nowrap; }
.p-body { display:grid; gap:16px; align-items:start; }
.p-body.two { grid-template-columns:minmax(300px,380px) minmax(0,1fr); }
.p-side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.p-body.two .bgrid { grid-template-columns:1fr; }
.p-body .card { padding:4px 0; }
.p-body .card-head { border-bottom:0; padding-bottom:4px; }
@media (max-width:1000px) {
  .p-body.two { grid-template-columns:1fr; }
  .p-body.two .bgrid { grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
}
@media (max-width:640px) {
  .p-btns { width:100%; }
  .p-btns form { flex:1; }
  .p-btns button { width:100%; }
  .tl-a { flex:1; min-width:0; }
  .tl-a + .grow { display:none; }
  .vb-id { padding:14px; }
  dl.vb-rows { padding:10px 14px 14px; grid-template-columns:96px minmax(0,1fr); }
  dl.vb-rows dd { border-top:1px solid var(--line-subtle); padding-top:7px; }
  dl.vb-rows > dt:first-of-type + dd { border-top:0; padding-top:4px; }
  details.readings > summary { padding:11px 14px; }
  details.readings > summary .muted { display:none; }
  details.readings > .browser-groups { padding:4px 14px 14px; }
}
.sort-menu a .micro { display:block; }

.weights-summary { margin:0; padding:12px 18px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--line); }
.weights-table { table-layout:fixed; }
.weights-table thead th { padding:10px 18px; }
.weights-table .num { width:104px; }
.weights-table .note { display:block; margin-top:2px; font-size:11px; font-weight:400; line-height:1.2; color:var(--muted); }
.weights-table tbody th { background:none; white-space:normal; color:var(--ink-2); font-size:13px; font-weight:400; border-bottom:1px solid var(--line-subtle); }
.weights-table tbody th,.weights-table td { padding:9px 18px; }
.weights-table tbody tr:last-child th { border-bottom:0; }
.weights-table tbody tr:hover th { background:var(--surface-hover); }
.weights-table .current { font-weight:600; }
.weights-table .proposed { background:var(--brand-50); color:var(--brand-deep); }
.weights-body > .callout { margin:16px; }
/* A row under Weights: its label and hint on the left, its control and Save on the right. */
.identity-step { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 24px; padding:16px 18px; border-bottom:1px solid var(--line); }
.identity-step > .field { padding:0; border:0; }
.identity-step > .field:not(:has(> input,> select)) { grid-template-columns:minmax(0,1fr); }
.identity-step > .table-wrap { grid-column:1 / -1; }
.reliability h3 { font-size:14px; font-weight:500; margin:0; }
.reliability-table { table-layout:fixed; }
.reliability-table th:first-child { width:28%; }
.reliability-table tbody th { background:none; font-weight:400; color:var(--ink-2); border-bottom:1px solid var(--line-subtle); }
.reliability-table tbody tr:last-child th { border-bottom:0; }
.reliability-table tr[aria-current] { background:var(--brand-50); }
.choices-inline { display:flex; flex-wrap:wrap; gap:6px 18px; grid-column:1; }
@media (max-width:640px) {
  .weights-table .num { width:76px; }
  .weights-table .note { font-size:10.5px; }
  .identity-step { grid-template-columns:minmax(0,1fr); }
  .identity-step > button { justify-self:start; }
  .weights-table thead th,.weights-table tbody th,.weights-table td { padding:9px 10px; }
  .weights-table thead th { font-size:11px; }
  .weights-table tbody th { font-size:12px; overflow-wrap:anywhere; }
}
.srow.rename input[name=name] { width:220px; max-width:100%; }
.usage { display:inline-flex; flex-wrap:wrap; gap:4px 14px; color:var(--ink-2); }
.callout.rec form.inline { margin-top:10px; }

/* Workspace overview */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.workspace-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:12px; align-items:start; min-width:0; }
.workspace-card,.workspace-create { position:relative; overflow:hidden; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.workspace-card > * { position:relative; }
.workspace-card.is-current { border-color:var(--line-strong); }
/* The current workspace's dots: a band along the card's foot, in its padding, never under its text. */
.workspace-dots { position:absolute!important; left:0; right:0; bottom:0; height:5px; pointer-events:none; background-image:radial-gradient(var(--dot,var(--brand)) 1px,transparent 1.3px); background-size:5px 5px; -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000); mask-image:linear-gradient(90deg,transparent 20%,#000); }
.workspace-mark { position:relative; overflow:hidden; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-md); background:var(--brand-50); color:var(--brand-deep); font-size:16px; font-weight:600; }
.workspace-mark.tone-1 { background:#e8f4ef; color:#24694f; }
.workspace-mark.tone-2 { background:#fff1e4; color:#985b20; }
.workspace-card h2 { font-size:15px; font-weight:500; line-height:1.3; }
.workspace-created { display:flex; flex-wrap:wrap; gap:4px 12px; margin:3px 0 0; color:var(--muted); font-size:12px; }
.workspace-active { display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); }
.workspace-flags strong { color:var(--ink); font-weight:600; margin-right:3px; }
.workspace-mark img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box; background:var(--surface); border:1px solid var(--line); }
.workspace-create { border-style:dashed; border-color:var(--line-strong); background:transparent; }
.workspace-create:focus-within { border-style:solid; background:var(--surface); }
.workspace-mark.new { background:transparent; border:1px dashed var(--line-strong); color:var(--muted); font-weight:400; font-size:18px; }
.workspace-create input { min-width:0; height:32px; }

.choices { border:0; margin:0; padding:4px 0; display:grid; gap:12px; align-items:start; min-width:0; }
.choices label { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 8px; align-items:start; }
.choices input { margin-top:2px; } /* the radio level with its label's first line */
.choices .hint { grid-column:2; font-size:12.5px; color:var(--muted); }
.callout.rec,.callout.new-key { display:block; }
.callout.rec > p,.callout.new-key > p { margin:0 0 8px; }

.dot.ok { background:var(--ok); }
/* Domains: one question, a route strip, then one way's numbered steps */
.domains { max-width:760px; }
.domains > * + * { margin-top:16px; }
.ways { border:0; margin:0; padding:0; min-width:0; }
.ways legend { padding:0; margin-bottom:8px; font-size:13.5px; font-weight:600; }
.way-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.way-option { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer; min-width:0; transition:border-color var(--dur-fast) var(--ease-out); }
.way-option:has(input:enabled):hover { border-color:var(--line-strong); }
.way-option input { margin-top:1px; }
.way-option:has(input:checked) { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50); background:var(--brand-25); }
.way-option:has(input:focus-visible) { box-shadow:var(--ring); }
.way-option:has(input:disabled) { cursor:default; background:var(--surface-subtle); color:var(--muted); }
.way-text { display:grid; gap:2px; min-width:0; font-size:12.5px; color:var(--muted); }
.way-text strong { font-size:13px; font-weight:500; color:var(--ink); }
.way-option:has(input:disabled) .way-text strong { color:var(--muted); }
.way-text strong .badge { margin-block:-3px; vertical-align:1px; }
.way-time { margin-top:4px; font-size:12px; color:var(--dim); }
.route { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; font-size:12px; color:var(--ink-2); }
.route li { display:flex; align-items:center; min-width:0; }
.route-hop { padding:4px 8px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); min-width:0; overflow-wrap:anywhere; }
.route-hop code { background:none; padding:0; font-size:11.5px; }
.route li:last-child .route-hop { border-color:var(--brand-border); background:var(--brand-50); color:var(--brand-deep); }
.route-arrow { display:inline-flex; padding:0 6px; color:var(--dim); }
.card-body > .route { margin-bottom:16px; }
.domains > .route { margin-top:16px; } /* .route's own margin:0 would undo the page's spacing */
.domains .card-body + .card-body,.domains .table-wrap + .card-body { border-top:1px solid var(--line-subtle); }
.way-panel { display:none; }
.way-panel > .steps { margin-top:12px; }
.domains:has(#way-cloudflare:checked) .way-panel[data-way=cloudflare],
.domains:has(#way-hostname:checked) .way-panel[data-way=hostname],
.domains:has(#way-code:checked) .way-panel[data-way=code] { display:block; }
.domains:has(.ways input:checked) .route[data-way=none] { display:none; }
.step-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; min-height:21px; padding-top:2px; }
.step-line h3 { font-size:13.5px; }
.step-summary { font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.step-body { margin-top:12px; min-width:0; }
.domains form > .field:first-of-type,.step-body > .field:first-child { border-top:0; padding-top:0; } /* the card or step has the line */
.step-body .table-wrap { border:1px solid var(--line); }
.step-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-subtle); font-size:12.5px; color:var(--muted); }
details.step-edit,details.step-edit[open] > summary,.steps .step-reopen { position:absolute; top:14px; right:16px; } /* Edit, the server's or the script's */
details.step-edit { border:0; }
details.step-edit > summary,.steps .step-reopen { font-size:12.5px; }
details.step-edit > summary { padding:0; color:var(--brand); }
details.step-edit > summary::before { display:none; }
details.step-edit[open] { position:static; margin-top:4px; }
details.step-edit > :not(summary) { margin-left:0; }
.steps li.done .step-line { padding-right:40px; } /* clear of Edit */
@media (prefers-reduced-motion:no-preference) {
  .steps li.opening > .step-body { animation:step-open var(--dur) var(--ease-out); }
}
.cf-token { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 24px; align-items:start; }
.cf-token p { margin:0; }
.cf-token .actions { margin-top:12px; gap:8px; }
.perms { list-style:none; margin:0; padding:10px 14px; display:grid; gap:6px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-subtle); font-size:12.5px; color:var(--ink-2); }
.perms li { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.perms svg { color:var(--brand); flex-shrink:0; }
.step-lead { margin:0 0 10px; }
.step-body > .code-block:last-child { margin-bottom:0; }
.step-note { margin:10px 0 0; }
.form-end { justify-content:flex-end; margin-top:8px; } /* a form's one button, under its field */
table.dns td[data-label=Type] { width:1%; }
table.dns td[data-label=Type] code { font-size:12px; }
table.dns .key code { flex:0 1 auto; white-space:normal; padding:3px 8px; } /* a long hostname wraps inside its cell */
.dns-check { display:flex; align-items:center; gap:8px; margin-left:auto; }
.dns-check > code { font-size:12px; }
.domains .card-body > .table-wrap { border:1px solid var(--line); }
.domains td > .actions { flex-wrap:nowrap; } /* Check and Remove side by side */
.card-note { margin:0; }
.origins-label { margin:0 0 6px; }
.origins-derived { list-style:none; padding:0; margin:0 0 14px; }
.origins-hint { margin:2px 0 6px; }
details.host-more > summary { padding:0; }
details.host-more[open] > summary { margin-bottom:12px; }
details.domains-more > summary { padding:12px 0; }
details.host-more > :not(summary),details.domains-more > :not(summary) { margin-left:0; }
details.domains-more > * + * { margin-top:12px; }
.domains .card > .steps + .card-body { border-top:1px solid var(--line-subtle); }
.card-body > .step-lead:has(+ .key) { margin-bottom:8px; }
.step-body > .step-lead:only-child { margin:0; }
.swap-label { margin:0 0 6px; font-size:12.5px; font-weight:500; }
.swap + .swap-label { margin-top:14px; }
dl.swap { margin:0; display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 8px; align-items:center; }
dl.swap dt { font-size:12px; color:var(--muted); }
dl.swap dd { margin:0; min-width:0; }
dl.swap dd > code { display:block; font-size:12px; padding:6px 10px; border:1px dashed var(--line); border-radius:var(--r-md); color:var(--muted); background:none; overflow-wrap:anywhere; line-height:1.5; }
.step-note + .key { margin-top:8px; }
.switch-prompt .key code { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* one line on screen; Copy takes it whole */
@media (max-width:640px) {
  .way-options { grid-template-columns:minmax(0,1fr); }
  .step-body { margin-left:calc(-12px - var(--step-gutter)); } /* the body takes the full width */
  .cf-token { grid-template-columns:minmax(0,1fr); }
  dl.swap { grid-template-columns:minmax(0,1fr); gap:4px; } /* Before and After above their lines */
  dl.swap dd + dt { margin-top:6px; }
  table.stack.dns td[data-label=Name],table.stack.dns td[data-label=Target] { display:block; }
  table.stack.dns td[data-label=Name]::before,table.stack.dns td[data-label=Target]::before { display:block; margin-bottom:4px; }
  .dns-check { margin-left:0; }
  table.dns td[data-label=Type] { width:auto; }
  table.stack td.host-status { justify-content:flex-start; gap:6px; } /* the dot beside its words */
  table.stack td.host-status::before { margin-right:auto; }
}

.connect-card { width:100%; max-width:400px; padding:32px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 60px -24px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:18px; text-align:center; }
.connect-card h1 { font-size:21px; line-height:28px; letter-spacing:-.02em; overflow-wrap:anywhere; }
.connect-card p { margin:0; }
.connect-card .empty { padding:8px 0 0; }
.connect-tiles { display:flex; align-items:center; justify-content:center; gap:10px; }
.connect-tile { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--night); color:#fff; }
.connect-tiles .avatar { border-radius:11px; font-size:18px; }
.connect-line { width:36px; border-top:1.5px dashed var(--line-strong); }
.connect-warn { font-size:13px; line-height:20px; text-align:left; }
.connect-who { text-align:left; font-size:13px; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
.connect-who dd { overflow-wrap:anywhere; }
.connect-form { display:flex; flex-direction:column; gap:14px; text-align:left; }
.connect-form #confirm { font:600 18px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.connect-buttons { display:flex; gap:8px; }
.connect-buttons .primary { flex:1; }
@media (max-width:420px) {
  .connect-card { padding:24px 18px; }
}

/* Webhooks (webhooks/pages.ts): endpoints as aligned rows (a fixed slot for the badge, the last
   answer and the chevron), an endpoint's facts in three columns, and its log as a table whose opened
   delivery sits under its row. */
.webhooks > :is(.notice,.error,.callout) { margin-bottom:0; }
.wh-note { margin:0; }
.wh-end { display:inline-flex; align-items:center; gap:12px; flex:none; }
.wh-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.wh-badge { width:72px; justify-content:center; flex:none; }
.app .wh-row { display:grid; grid-template-columns:72px minmax(0,1fr) minmax(120px,200px) 14px; gap:4px 16px; align-items:center; min-height:60px; padding:10px 16px; color:var(--ink); text-decoration:none; }
.wh-row:hover { background:var(--surface-hover); text-decoration:none; }
.wh-row > svg { color:var(--muted); }
.wh-main { display:grid; gap:3px; min-width:0; }
.wh-url { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wh-row .wh-url { font-size:13px; }
.wh-types { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
.wh-last { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wh-last .bad,.wh-log td.bad { color:var(--block-text); }
.wh-title { display:flex; align-items:center; gap:12px; min-width:0; }
.page-head .wh-title h1 { display:block; min-width:0; font:500 20px/1.35 var(--mono); letter-spacing:-.01em; }
.wh-title h1 .wh-url { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; } /* two lines at most; the whole URL on hover */
.wh-actions { gap:8px; }
.wh-actions .wh-test { margin-right:auto; }
.wh-test { display:flex; gap:8px; margin:0; }
.wh-test select { width:auto; min-width:150px; height:36px; font:12.5px var(--mono); }
.wh-menu > summary.button { width:36px; height:36px; padding:0; justify-content:center; }
details.wh-menu > summary > svg:last-child { margin:0; color:var(--ink-2); }
.wh-state { align-items:center; }
.wh-state form { margin:0; }
.wh-confirm { border-color:var(--block-border); }
.wh-confirm p { margin:0; font-weight:500; }
.wh-facts dl { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.5fr) minmax(0,1.4fr); margin:0; }
.wh-facts dl > div { min-width:0; padding:14px 16px; border-left:1px solid var(--line-subtle); }
.wh-facts dl > div:first-child { border-left:0; }
.wh-facts dt,.wh-detail dt { margin-bottom:6px; font-size:12px; color:var(--muted); }
.wh-facts dd,.wh-detail dd { margin:0; min-width:0; }
.wh-chips { margin:0; padding:0; list-style:none; } /* .badges, as a list */
.wh-chips code { font-size:11.5px; }
.wh-secret { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; }
.wh-secret form { margin:0; }
.wh-secret code { font-size:12px; overflow-wrap:anywhere; }
.wh-secret code.masked { color:var(--muted); }
.wh-log-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; }
.wh-log-head h2 { margin:0; font-size:13px; color:var(--ink-2); }
.wh-log { table-layout:fixed; min-width:600px; }
.wh-log th:nth-child(1) { width:24%; }
.wh-log th:nth-child(3) { width:120px; }
.wh-log th:nth-child(4) { width:100px; }
.wh-log th:nth-child(5) { width:88px; }
.wh-log td { padding:8px 16px; }
.wh-log td.time a { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); }
.wh-log td.time a svg { color:var(--muted); }
.wh-log td code { font-size:12px; }
.wh-log tr.is-open td { background:var(--surface-hover); border-bottom-color:var(--line); }
.wh-log tr.wh-opened td,.wh-log tr.wh-opened:hover td { padding:0; background:var(--surface-subtle); }
.wh-detail { display:grid; gap:14px; padding:14px 16px 16px 34px; }
.wh-detail dl { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.5fr); gap:14px 16px; margin:0; }
.wh-detail .wh-id dd { flex-wrap:nowrap; }
.wh-detail dl .wide { grid-column:1 / -1; }
.wh-detail dd { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-variant-numeric:tabular-nums; }
.wh-detail dd .mono { font-size:12px; overflow-wrap:anywhere; }
.wh-detail form { justify-self:start; margin:0; }
.wh-pre { flex:1 0 100%; max-height:320px; overflow:auto; margin:4px 0 0; padding:10px 12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; } /* on pre's own code box */
.wh-response { max-height:140px; }
.wh-form .card-body { display:grid; gap:22px; }
.wh-field { display:grid; gap:6px; }
.wh-field label,.wh-events legend { font-weight:500; }
.wh-field .hint { margin:0; font-size:12.5px; color:var(--muted); }
.wh-field input { height:36px; }
.wh-events { min-width:0; margin:0; padding:0; border:0; }
.wh-events legend { margin-bottom:8px; padding:0; }
.wh-type { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-top-width:0; cursor:pointer; }
.wh-type:first-of-type { border-top-width:1px; }
.wh-type:hover { background:var(--surface-hover); }
.wh-type:has(input:checked) { background:var(--brand-25); }
.wh-type input { margin-top:2px; }
.wh-type-text { display:grid; gap:2px; min-width:0; }
.wh-type .wh-type-text code { justify-self:start; padding:0; background:none; font-size:12.5px; color:var(--ink); }
.wh-error { display:flex; align-items:center; gap:6px; margin:4px 0 0; font-size:12.5px; color:var(--block-text); }
@media (max-width:760px) {
  .wh-facts dl { grid-template-columns:minmax(0,1fr); }
  .wh-facts dl > div { border-left:0; border-top:1px solid var(--line-subtle); }
  .wh-facts dl > div:first-child { border-top:0; }
  .wh-detail dl { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:640px) {
  .app .wh-row { grid-template-columns:72px minmax(0,1fr) 14px; }
  .wh-row .wh-last { grid-column:2; grid-row:2; text-align:left; }
  .wh-row > svg { grid-column:3; grid-row:1; }
  .page-head .wh-title h1 { font-size:16px; }
  .wh-actions { width:100%; flex-wrap:wrap; }
  .wh-test { flex:1 1 100%; }
  .wh-test select { flex:1; min-width:0; }
  .wh-detail { padding-left:16px; }
  .wh-log { min-width:0; table-layout:auto; }
  .wh-log td { white-space:nowrap; }
  .wh-log tr.wh-opened td { white-space:normal; }
  .wh-log td:nth-child(2) { white-space:normal; } /* a Test tag goes under its type */
  .wh-log :is(th,td):is(:nth-child(4),:nth-child(5)) { display:none; } /* the opened delivery says its answer and attempts */
  .wh-log :is(th,td) { padding-left:10px; padding-right:10px; }
  .wh-log th:is(:nth-child(1),:nth-child(3)) { width:1%; }
  .wh-log td.time svg { display:none; }
  .wh-log td .tag { margin:2px 0 0; }
  .wh-detail dl { grid-template-columns:minmax(0,1fr); }
}

/* The turn-off pages: one column of 440 in the upper third, left-aligned, logo at its top-left */
.off-page { width:min(100%,488px); margin:0 auto; padding:clamp(40px,14dvh,136px) 24px 48px; }
.off-page .brand { margin-bottom:40px; }
.off-page h1 { font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:34px; text-wrap:balance; }
.off-page p { margin:4px 0 0; font-size:15px; line-height:24px; color:var(--ink-2); }
.off-page h1 + p { margin-top:16px; }
.off-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; margin-top:28px; }
.off-actions form { margin:0; }
.off-actions > a { display:inline-flex; align-items:center; min-height:40px; font-size:14px; }
.off-actions > a,.off-page p a { color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.off-actions > a:hover,.off-page p a:hover { color:var(--ink); text-decoration-color:currentColor; }
@media (max-width:640px) {
  .off-page { padding-top:32px; }
  .off-page .brand { margin-bottom:32px; }
  .off-actions { flex-direction:column; align-items:stretch; }
  .off-actions button { width:100%; height:44px; }
  .off-actions > a { justify-content:center; min-height:44px; }
}