/* ===== v99 · the first run (pages/lonboarding.js) — the 4-step flow, Setting up, the Dashboard's setup strip, day-1 findings, the portal's
   "Connect your accounts". ob-* only. The card system holds (22 px padding; rules at card + 15; icons at + 23; titles and row text at + 56 —
   v92-website.css W8). Every colour is a token, so dark mode follows. Bars are for time, meters for samples (ui/meters.js) — no rings here.
   Calm: no motion but the check's 1-second spinner, and none with reduced motion. ===== */

/* ---------- the flow's frame ---------- */
.page.ob-page{padding-top:26px}   /* v106: the frame's width; the flow keeps its 760px reading column (.ob-wrap) */
.ob-wrap{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ob-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.ob-bar li{display:flex;flex-direction:column;gap:7px;min-width:0}
.ob-bar li > i{display:block;height:4px;border-radius:var(--r-full);background:var(--m-track,var(--bg-3))}
.ob-bar li.is-done > i{background:var(--m-meas,var(--accent))}
.ob-bar li.is-on > i{background:linear-gradient(90deg,var(--m-meas,var(--accent)) 50%,var(--m-track,var(--bg-3)) 50%)}
.ob-bar li > span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-bar li.is-on > span{color:var(--fg);font-weight:var(--w-medium)}
.ob-bar li.is-done > span{color:var(--fg-3)}
.ob-top{display:flex;align-items:center;gap:12px;min-height:22px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-n{font-variant-numeric:tabular-nums}
.ob-later{color:var(--link-tint,var(--link));font-weight:var(--w-medium)}
@media (hover:hover){.ob-later:hover{text-decoration:underline}}

.sec.panel.ob-card{margin-top:0;padding:24px 22px 18px;display:flex;flex-direction:column;gap:20px}
.ob-hd{display:flex;flex-direction:column;gap:4px}
.ob-t{margin:0;font-size:var(--t-page);line-height:var(--lh-page);letter-spacing:var(--ls-page);font-weight:var(--w-semibold);color:var(--fg);outline:none}
.ob-s{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-3);text-wrap:pretty}
.ob-ft{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px -22px 0;padding:14px 22px 0;border-top:1px solid var(--ln-2)}
.ob-ft > .grow{flex:1 1 0;min-width:0}
.ob-ft-n{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-align:right;text-wrap:pretty;max-width:46ch}
.ob-ft .btn{height:32px;padding:0 14px}

/* ---------- fields ---------- */
.ob-f{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.ob-fl{padding:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg)}
.ob-fh{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty;display:flex;align-items:flex-start;gap:6px}
.ob-fh > svg{flex:none;margin-top:2px;color:var(--fg-4)}
.ob-fh.is-guess{color:var(--fg-2)}
.ob-fh.is-guess > svg,.ob-guess > svg{color:var(--accent)}
.ob-fh.is-note{margin-top:2px}
.ob-err{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--neg)}
.ob-err > svg{flex:none}
.ob-in{height:34px;width:100%;min-width:0;padding:0 11px;border-radius:var(--r-8);border:1px solid var(--bd-2);background:var(--bg);font:inherit;font-size:var(--t-body);color:var(--fg)}
.ob-in::placeholder{color:var(--fg-4)}
.ob-in[aria-invalid="true"]{border-color:var(--neg)}
.ob-in.is-short{max-width:240px}
.ob-url{display:flex;align-items:stretch;max-width:440px;border-radius:var(--r-8)}
.ob-url-p{display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--bd-2);border-right:0;border-radius:var(--r-8) 0 0 var(--r-8);background:var(--bg-4);color:var(--fg-3);font-size:var(--t-body)}
.ob-url .ob-in{border-radius:0 var(--r-8) var(--r-8) 0}
.ob-chk{margin:2px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:20px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-chk.is-done{color:var(--fg-2);align-items:flex-start}   /* fixer r1: a check line that wraps keeps its icon on the first line */
.ob-chk.is-done > svg{color:var(--pos);flex:none;margin-top:2px}
.ob-chk b{font-weight:var(--w-medium);color:var(--fg)}
.ob-proto{color:var(--fg-4)}
.ob-proto::before{content:"· "}
.ob-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-3);border-top-color:var(--accent);animation:ob-spin var(--dur-spin) linear infinite;flex:none}
@keyframes ob-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ob-spin{animation:none}}
.reduce-motion .ob-spin{animation:none}
.ob-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}
.ob-inline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.ob-mb.btn{height:30px;max-width:100%}
.ob-mb .mb-l{overflow:hidden;text-overflow:ellipsis}
.ob-guess{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-co);color:var(--fg-3)}
.ob-radios{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.ob-radios.is-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ob-radio{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--r-8);cursor:pointer;border:1px solid transparent;min-width:0}
.ob-radios.is-row .ob-radio{border-color:var(--ln-2)}
@media (hover:hover){.ob-radio:hover{background:var(--hover)}}
.ob-radio.is-on{background:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.ob-radio input{margin:2px 0 0;accent-color:var(--accent);flex:none}
.ob-radio:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:-1px}
.ob-rt{display:flex;flex-direction:column;min-width:0}
.ob-rt b{font-weight:var(--w-medium);color:var(--fg)}
.ob-rt span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-also{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--t-co);color:var(--fg-3)}
.ob-ck{position:relative;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:var(--r-full);border:1px solid var(--ln-2);color:var(--fg-2);cursor:pointer;font-size:var(--t-co)}
.ob-ck.is-on{background:var(--accent-t);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--fg)}
.ob-ck input{margin:0;accent-color:var(--accent)}
.ob-ck.is-big{height:auto;align-items:flex-start;padding:9px 12px;border-radius:var(--r-8);font-size:var(--t-body);line-height:var(--lh-body)}
.ob-ck.is-big input{margin-top:3px}
.ob-ck.is-big span span{color:var(--fg-3)}
.ob-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.ob-f2{display:flex;flex-direction:column;gap:5px;font-size:var(--t-co);color:var(--fg-3);min-width:0}

/* ---------- 2 · Connect ---------- */
.ob-cards{display:flex;flex-direction:column;gap:10px}
.ob-cc{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:14px 16px;border:1px solid var(--ln-2);border-radius:var(--r-12);background:var(--bg)}
.ob-cc.is-on{background:var(--bg-2)}
.ob-cc.is-later{background:var(--bg-2)}
.ob-cc-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-cc-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.ob-cc-t b{font-weight:var(--w-semibold);color:var(--fg)}
.ob-cc-t > .grow{flex:1 1 0}
.ob-or,.ob-opt{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-opt{padding:1px 7px;border-radius:var(--r-full);background:var(--bg-4)}
.ob-alt{padding:0;border:0;background:none;font:inherit;color:var(--link-tint,var(--link));cursor:pointer}
@media (hover:hover){.ob-alt:hover{text-decoration:underline}}
.ob-cc-r,.ob-cc-w{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ob-cc-w{color:var(--fg-2)}
.ob-cc-g{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);text-wrap:pretty}
.ob-cc-g b{font-weight:var(--w-medium);color:var(--fg)}
.ob-cc-a{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:4px}
.ob-cc-a > .grow{flex:1 1 0}
.ob-lnk{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;font:inherit;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--link-tint,var(--link));cursor:pointer;white-space:nowrap}
@media (hover:hover){.ob-lnk:hover{text-decoration:underline}}
.ob-lnk.is-quiet{color:var(--fg-3)}
.ob-lnk > svg{flex:none}
.lbl.ob-chip{height:20px;font-size:var(--t-sh);line-height:var(--lh-sh)}
.ob-br{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-4)}
.ob-br-t{margin:0;display:flex;align-items:flex-start;gap:7px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ob-br-t > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ob-br-t.is-ok > svg{color:var(--pos)}
.ob-br-t b{font-weight:var(--w-medium);color:var(--fg)}
.ob-br-a{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.ob-proto-row{margin:0;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-4)}
.ob-proto-row .ob-alt{font-size:var(--t-sh)}
.ob-proto-row b{font-weight:var(--w-medium);color:var(--fg-3)}
.ob-ask{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-12);border:1px dashed var(--bd-2);color:var(--fg-2)}
.ob-ask > svg{flex:none;color:var(--fg-3)}
.ob-ask b{font-weight:var(--w-medium);color:var(--fg)}
.ob-ask p{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-ask .grow{flex:1 1 0;min-width:0}
.ob-link{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px;border-radius:var(--r-8);background:var(--bg-4)}
.ob-link code{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"Geist Mono",ui-monospace,monospace;font-size:var(--t-co);color:var(--fg)}
.ob-ask-l{display:flex;flex-direction:column;gap:2px}
.ob-ask-r{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-8);cursor:pointer}
@media (hover:hover){.ob-ask-r:hover{background:var(--hover)}}
.ob-ask-r input{margin:0;accent-color:var(--accent);flex:none}
.ob-ask-r.is-done{opacity:.7;cursor:default}
.ob-ask-t{display:flex;flex-direction:column;min-width:0}
.ob-ask-t b{font-weight:var(--w-medium);color:var(--fg);font-size:var(--t-body)}
.ob-ask-t span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 3 · What Dottpace watches ---------- */
.ob-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.ob-sec-h{display:flex;align-items:center;gap:8px}
.ob-sec-h > svg{color:var(--fg-3);flex:none}
.ob-sec-h h2{margin:0;font-size:var(--t-hl);line-height:var(--lh-hl);font-weight:var(--w-semibold);color:var(--fg)}
.ob-sec-n{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-4);font-variant-numeric:tabular-nums}
.ob-wl{display:flex;flex-direction:column;border:1px solid var(--ln-2);border-radius:var(--r-12);overflow:hidden}
.ob-wr{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-top:1px solid var(--ln-3);cursor:pointer;min-width:0}
.ob-wl > .ob-wr:first-child{border-top:0}
@media (hover:hover){.ob-wr:hover{background:var(--hover)}}
.ob-wr input{margin:3px 0 0;accent-color:var(--accent);flex:none}
.ob-wr:not(.is-on) .ob-wr-t{opacity:.55}
.ob-wr:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:-2px}
.ob-wr-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0;font-size:var(--t-body);line-height:var(--lh-body)}
.ob-wr-t b{font-weight:var(--w-medium);color:var(--fg)}
.ob-wr-d{font-size:var(--t-co);color:var(--fg-3)}
.ob-wr-w{flex-basis:100%;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ob-wr-w:empty{display:none}
.ob-wr-q{color:var(--fg)}
.ob-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:var(--r-full);background:var(--bg-4);font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);white-space:nowrap}
.ob-add{display:flex;align-items:center;gap:8px;max-width:520px}
.ob-add .ob-in{height:30px}
.ob-line{margin:0;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ob-line > svg{flex:none;margin-top:1px;color:var(--fg-3)}

/* ---------- 4 · What counts, and who approves ---------- */
.ob-money{display:flex;align-items:center;gap:6px}
.ob-money > span{color:var(--fg-3)}
.ob-apv{display:flex;flex-direction:column;gap:2px}   /* fixer r1: the "Can approve" chip lines up with the card's right edge */
.ob-apv-r{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 8px;border-radius:var(--r-8)}
@media (hover:hover){.ob-apv-r:hover{background:var(--hover)}}
.ob-apv-r b{font-weight:var(--w-medium);color:var(--fg)}
.ob-apv-r .grow span{color:var(--fg-3);font-size:var(--t-co)}
.ob-apv-r .ib{width:26px;height:26px}
.ob-apv > .menu-btn{align-self:flex-start;margin-top:4px}
.ob-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--on-fill);font-size:10px;font-weight:var(--w-semibold)}
.ob-cli{display:flex;flex-direction:column;gap:10px;margin-top:8px;max-width:560px}
.ob-cli .ob-f2{max-width:320px}
.ob-promise{margin:0;display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:var(--r-12);background:var(--bg-4);font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);text-wrap:pretty}
.ob-promise > svg{flex:none;margin-top:2px;color:var(--fg-3)}

/* ---------- the source rows (Setting up, the strip, the portal) — icon at card + 23, text at card + 56, rules from card + 15 ---------- */
.ob-list-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;min-height:28px;margin:0 -7px;padding:0 7px 10px;border-bottom:1px solid var(--ln-2)}
.ob-list-h > .ob-sec-n{white-space:nowrap}
@media (max-width:560px){ .ob-list-h > .grow{display:none} .ob-list-h > .grow + .ob-sec-n,.ob-list-h > .grow + .lbl{flex-basis:100%;white-space:normal;padding-left:32px} }   /* fixer r1: on a phone the link's line takes its own row */
.ob-list-h h2{margin:0;font-size:var(--t-hl);line-height:var(--lh-hl);font-weight:var(--w-semibold);color:var(--fg);white-space:nowrap}
.ob-list-h > .grow{flex:1 1 0}
.ob-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:9px;align-items:start;margin:0 -8px;padding:12px 8px;border-top:1px solid var(--ln-3)}
.ob-list-h + .ob-row,.ob-fh + .ob-row,.ob-pp + .ob-row,.ob-strip-b > .ob-row:first-child{border-top:0}
.ob-row-ic{display:grid;place-items:center;width:24px;height:24px;margin-top:1px}
.ob-ic{width:24px;height:24px;border-radius:var(--r-6);display:grid;place-items:center;background:var(--bg-4);color:var(--fg-2)}
.ob-row-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.ob-row-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.ob-row-t b{font-weight:var(--w-medium);color:var(--fg)}
.ob-row-w{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty;max-width:78ch}
.ob-row.is-todo .ob-row-w{color:var(--fg-2)}
.ob-row-a{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 10px;min-height:26px}
.ob-row-a:empty{display:none}   /* fixer r1: a connected row has no action — no empty band under it on a phone */
.ob-row .m-meter.is-inline .m-bar{width:96px}
.ob-open{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3);white-space:nowrap;padding:3px 6px;border-radius:var(--r-full)}
@media (hover:hover){.ob-open:hover{background:var(--hover);color:var(--fg)}}

/* ---------- Setting up ---------- */
.ob-setup .pl-hd{align-items:flex-start}
.sec.panel.ob-clock{margin-top:4px;padding:18px 22px 16px;display:flex;flex-direction:column;gap:10px}
.ob-clock .m-clock .m-ch b{font-size:var(--t-t3);line-height:var(--lh-t3)}
.ob-clock-s{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ob-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.ob-main{display:flex;flex-direction:column;min-width:0}
.ob-side{position:sticky;top:calc(var(--top-h) + 16px);min-width:0}   /* fixer r1: never under the top bar */
.sec.panel.ob-list,.sec.panel.ob-when,.sec.panel.ob-d1,.sec.panel.ob-portal{padding:16px 22px 10px}
.ob-tl{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column}
.ob-tl li{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 0 10px 18px;border-left:2px solid var(--ln-2);margin-left:4px}
.ob-tl li::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--ln)}
.ob-tl li.is-done::before{background:var(--m-meas,var(--accent));box-shadow:none}
.ob-tl li.is-now::before{background:var(--bg);box-shadow:inset 0 0 0 3px var(--m-meas,var(--accent))}
.ob-tl li.is-key .ob-tl-t{color:var(--fg);font-weight:var(--w-medium)}
.ob-tl-d{display:flex;align-items:baseline;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg);font-variant-numeric:tabular-nums}
.ob-tl-d i{font-style:normal;font-weight:var(--w-regular);color:var(--fg-4)}
.ob-tl-t{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ob-done,.sec.panel.ob-done{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 22px}   /* fixer r1: icon, words, buttons in one row (the panel's column is overridden) */
.ob-done > svg{color:var(--pos);flex:none}
.ob-done p{margin:2px 0 0;font-size:var(--t-co);color:var(--fg-3)}
.ob-done .grow{flex:1 1 260px;min-width:0}

/* ---------- the Dashboard's strip ---------- */
.sec.panel.ob-strip{margin-top:14px;margin-bottom:14px;padding:12px 22px}
.ob-strip-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:28px}
.ob-strip-h > .grow{flex:1 1 0;min-width:0}
.ob-segs{display:inline-grid;grid-template-columns:repeat(var(--n),12px);gap:3px;flex:none}
.ob-segs > i{display:block;height:6px;border-radius:2px;background:var(--m-track,var(--bg-3))}
.ob-segs > i.on{background:var(--m-meas,var(--accent))}
.ob-strip-t{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);min-width:0}
.ob-strip-t b{font-weight:var(--w-semibold);color:var(--fg);font-variant-numeric:tabular-nums}
.ob-strip-d{color:var(--fg-3)}
.ob-strip-b{margin-top:10px;border-top:1px solid var(--ln-2);margin-left:-7px;margin-right:-7px;padding:0 7px}
.ob-strip-b > .ob-row{margin:0 -1px;padding-left:1px;padding-right:1px}
.ob-fold{border-top:1px solid var(--ln-3)}
.ob-fold > summary{cursor:pointer;padding:10px 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);list-style:none}
.ob-fold > summary::-webkit-details-marker{display:none}
.ob-fold > summary::before{content:"▸ ";color:var(--fg-4)}
.ob-fold[open] > summary::before{content:"▾ "}
.ob-strip-f{padding:8px 0 4px;border-top:1px solid var(--ln-3)}
.ob-strip.is-done{display:flex;align-items:center;gap:10px;color:var(--fg-2)}
.ob-strip.is-done > svg{color:var(--pos);flex:none}
.ob-strip.is-done .grow{flex:1 1 0}

/* ---------- day 1: where a finding comes from ---------- */
.ob-dtag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--r-full);background:var(--bg-4);color:var(--fg-2);font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ob-dtag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-blue);flex:none}
.ob-dtag.is-history::before{background:var(--fg-4)}
.ob-dtag.is-speed::before{background:var(--c-teal)}
.ob-dtag.is-competitors::before{background:var(--c-indigo)}
.ob-dtag.is-ai::before{background:var(--c-purple)}
.ob-d1-g{display:flex;flex-direction:column;padding:10px 0 4px;border-top:1px solid var(--ln-3);margin:0 -8px;padding-left:8px;padding-right:8px}
.ob-list-h + .ob-d1-g{border-top:0}
.ob-d1-l{margin-bottom:4px}
.ob-f1{display:flex;align-items:flex-start;gap:12px;padding:6px 0}
.ob-f1-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.ob-f1-t{font-weight:var(--w-medium);color:var(--fg)}
@media (hover:hover){.ob-f1-t:hover{text-decoration:underline}}
.ob-f1-n{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-d1-f{margin:4px -8px 0;padding:10px 8px 6px;border-top:1px solid var(--ln-2);display:flex;align-items:center;gap:7px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-d1-f > svg{flex:none;color:var(--fg-4)}
/* a day-1 card on the Dashboard: the label sits where "Found <date>" sat */

/* ---------- the portal ---------- */
.sec.panel.ob-portal{margin-top:14px}
.ob-portal > .ob-fh{margin:10px 0 8px}
.ob-pp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:6px}
.ob-pp > div{padding:10px 12px;border-radius:var(--r-8);background:var(--bg-4)}
.ob-pp b{font-size:var(--t-co);font-weight:var(--w-semibold);color:var(--fg)}
.ob-pp p{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}

/* ---------- widths: 1440 · 1280 · 900 · phone ---------- */
@media (max-width:1180px){.ob-cols{grid-template-columns:minmax(0,1fr) 280px}}
@media (max-width:900px){
  .page.ob-page{padding-left:16px;padding-right:16px}
  .ob-two,.ob-pair,.ob-pp{grid-template-columns:minmax(0,1fr)}
  .ob-radios.is-row{grid-template-columns:minmax(0,1fr)}
  .ob-cols{grid-template-columns:minmax(0,1fr)}
  .ob-side{position:static}
  .ob-bar li > span{display:none}
  .ob-row{grid-template-columns:24px minmax(0,1fr)}
  .ob-row-a{grid-column:2;justify-content:flex-start}
  .ob-ft-n{text-align:left;flex-basis:100%;order:-1}
}
@media (max-width:520px){.ob-url{max-width:none}.ob-segs{grid-template-columns:repeat(var(--n),8px)}.ob-strip-d{display:none}}

/* ---------- Home and Clients (agency) ---------- */
a.lbl.hs-su{cursor:pointer;text-decoration:none}
@media (hover:hover){a.lbl.hs-su:hover{background:var(--bg-5)}}
.hs-cl-kind{flex:1 1 100% !important}
.hs-cl-k{display:flex;flex-wrap:wrap;gap:6px}
.ob-cl{display:flex;flex-direction:column;gap:8px}
.ob-cl-s{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ob-cl-r{display:flex;flex-wrap:wrap;gap:6px}
.ob-cl-i{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 6px;border-radius:var(--r-full);border:1px solid var(--ln-2);font-size:var(--t-co);color:var(--fg-2)}
.ob-cl-i.is-on{background:var(--bg-4);color:var(--fg)}
.ob-cl-i > svg{color:var(--pos)}
.ob-cl-i > i{font-style:normal;color:var(--fg-4)}
.ob-cl-a{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
/* SL8 (settings loop 2, P2-13): #/connect/<token> — the page one connect link opens (agency branding on top, the accounts below) */
.page.ob-cn{max-width:760px;margin:0 auto}
.ob-cn-h{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.ob-cn-m{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-8);color:var(--on-fill);font-weight:var(--w-semibold);font-size:var(--t-t3)}
.ob-cn-k{margin:0 0 2px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-cn-x{display:flex;align-items:flex-start;gap:12px;padding:18px 22px}
.ob-cn-x > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ob-cn-x p{margin:4px 0 0;color:var(--fg-2)}
.ob-sec-n.is-late{color:var(--neg)}
/* SL8 (P2-13): several sites from Search Console — the line under step 1 */
.ob-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:4px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ob-bulk > svg{flex:none}

/* ===== night build Oct 7–8 (the onboarding builder — plan L1 · L2 · L5–L10 · B2 · B7 · M1). Tokens only; light and dark follow them. ===== */
/* L5: "Save and finish later" is a button now (it saves first, then says Saved) */
button.ob-later{padding:2px 4px;margin:-2px -4px;border:0;border-radius:var(--r-ctl);background:none;font:inherit;font-size:var(--t-co);line-height:var(--lh-co);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
/* L1 · M1: what to improve first — two columns of short choices; one on a phone */
.ob-radios.is-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 6px}
.ob-radios.is-grid .ob-radio{border-color:var(--ln-2)}
/* B7: what else the site does — chips; a detected one carries a small mark */
.ob-caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ob-caps .ob-ck{height:30px}
.ob-ck-d{display:inline-flex;align-items:center;color:var(--accent-text,var(--link));margin-left:-2px}
/* L2: "From your free audit" */
.ob-au{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--ln-2);border-radius:var(--r-12);background:var(--bg-2)}
.ob-au-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.ob-au-h > svg{flex:none;color:var(--fg-3)}
.ob-au-h h2{margin:0;font-size:var(--t-hl);line-height:var(--lh-hl);font-weight:var(--w-semibold);color:var(--fg)}
.ob-au-h > .grow{flex:1 1 0}
.ob-au-s{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ob-au-s b{font-weight:var(--w-medium);color:var(--fg)}
.ob-au-fs{display:flex;flex-direction:column;border-top:1px solid var(--ln-3)}
.ob-au-f{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--ln-3);align-items:start}
.ob-au-f > .lbl{justify-self:start;margin-top:1px}
.ob-au-fb{display:flex;flex-direction:column;gap:3px;min-width:0}
.ob-au-fb > b{font-weight:var(--w-medium);color:var(--fg)}
.ob-au-fb > p{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ob-au-ev ul,.ob-au-cl{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:5px}
.ob-au-ev li,.ob-au-cl li{display:flex;align-items:flex-start;gap:7px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.ob-au-ev li{display:block;padding-left:10px;border-left:2px solid var(--ln-2)}
.ob-au-ev li > span,.ob-au-cl li span span{color:var(--fg-3)}
.ob-au-cl li > svg{flex:none;margin-top:2px;color:var(--fg-4)}
.ob-au-cl li.is-done > svg{color:var(--pos)}
.ob-au-cl li.is-partial > svg{color:var(--warn)}
.ob-au-cl li b{font-weight:var(--w-medium)}
.ob-au-n{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ob-au-x{margin:0;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ob-au-x > svg{flex:none;margin-top:1px;color:var(--warn)}
.ob-au-x b{font-weight:var(--w-medium);color:var(--fg)}
/* L2 · L6: notes under the address — already a project; a new address is a new scope */
.ob-dup,.ob-scope{margin:4px 0 0;display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 10px;padding:8px 10px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ob-dup > svg,.ob-scope > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ob-dup > span,.ob-scope > span{flex:1 1 260px;min-width:0}
.ob-dup b,.ob-scope b{font-weight:var(--w-medium);color:var(--fg)}
/* M1: the account to connect first for the goal; why, and the folded details */
.ob-rec{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-full);background:var(--accent-t);color:var(--accent-text,var(--link));font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-medium);white-space:nowrap}
.ob-cc-y{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ob-cc-y b{font-weight:var(--w-medium);color:var(--fg)}
.ob-cc-more > p{margin:6px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ob-cc-more b{font-weight:var(--w-medium);color:var(--fg-2)}
/* L1 · M4: the goal from step 1, said on step 4 */
.ob-intent{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:9px 12px;border-radius:var(--r-8);background:var(--bg-4);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ob-intent > svg{flex:none;color:var(--fg-3)}
.ob-intent b{font-weight:var(--w-medium);color:var(--fg)}
/* L7: connected ≠ imported ≠ ready */
.ob-ph{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-4)}
.ob-ph > span{display:inline-flex;align-items:center;gap:4px}
.ob-ph > span.is-on{color:var(--fg-2)}
.ob-ph > span.is-on > svg{color:var(--pos)}
.ob-row-w.is-acc{color:var(--fg-3)}
.ob-row-w b{font-weight:var(--w-medium);color:var(--fg-2)}
/* B2: setup complete · first value · first outcome — three moments, never one */
.ob-ms{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--ln-2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ob-ms > li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;min-width:0}
.ob-ms-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ln);font-size:var(--t-sh);font-weight:var(--w-semibold);color:var(--fg-3);font-variant-numeric:tabular-nums}
.ob-ms > li.is-done .ob-ms-n{background:var(--m-meas,var(--accent));box-shadow:none;color:var(--on-fill)}
.ob-ms > li.is-blocked .ob-ms-n{box-shadow:inset 0 0 0 1.5px var(--neg);color:var(--neg)}
.ob-ms-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-ms-b b{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-semibold);color:var(--fg)}
.ob-ms-b p{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
/* B2: a simulated day-1 finding says so */
.ob-sim{flex:none;margin-top:1px}
.ob-dtag.is-sim::before{background:var(--fg-4)}
/* L10: the client's page — completed */
.ob-cn-x.is-done > svg{color:var(--pos)}
.sec.panel.ob-cn-x + .sec.panel.ob-cn-x{margin-top:10px}
@media (max-width:900px){
  .ob-radios.is-grid{grid-template-columns:minmax(0,1fr)}
  .ob-ms{grid-template-columns:minmax(0,1fr)}
  .ob-au-f{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){details.pt-more.ob-cc-more > summary::after{transition:none}}
.ob-chk.is-done > svg + span{flex:1 1 0;min-width:0}

/* fixer r1 (A11Y-C2): the error summary — two or more problems, each a link to its field */
.ob-errsum{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r-12);background:var(--st-red-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neg) 30%,transparent)}
.ob-errsum-t{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ob-errsum-t > svg{flex:none;color:var(--neg)}
.ob-errsum ul{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:2px}
.ob-errsum a{color:var(--neg-ink,var(--neg));text-decoration:underline;text-underline-offset:2px;font-size:var(--t-co);line-height:var(--lh-co)}
/* ---------- fixer r1 (settings-auth) ---------- */
/* a site set up before the clock: a readable panel — the icon on the title's line, the buttons under the words at the text's edge */
.sec.panel.ob-done.is-stack{max-width:720px;flex-wrap:nowrap;align-items:flex-start}
.ob-done.is-stack > svg{margin-top:1px}
.ob-done-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* the value's currency is attached to its field, like https:// on the address */
.ob-url.ob-money{gap:0;align-items:stretch;max-width:220px}
.ob-url.ob-money > .ob-in{flex:1 1 auto;min-width:0;width:auto}
/* the free audit's scope, once, under its group's label */
.ob-d1-s{margin:6px 0 2px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);max-width:72ch;text-wrap:pretty}