/* The few things only the real product draws: the setup checklist that stays with the owner, and the plan rows on the start page. Tokens only, so light and dark both work. */
/* Nov 6 (first real browser): these names were never defined, so the checklist had no background or border and the page showed through it. They point at the kit's own tokens. */
:root{--surface:var(--surface-1);--bg-1:var(--bg);--hairline:var(--line);--border:var(--line);--green:var(--pos);--red:var(--neg);--shadow-lg:var(--sh-high)}
.lv-setup{position:fixed;right:20px;bottom:20px;z-index:60;width:280px;max-width:calc(100vw - 32px);max-height:calc(100vh - 96px);overflow:auto;background:var(--surface,var(--bg-1));color:var(--text-1);border:1px solid var(--hairline,var(--border));border-radius:var(--r-12);box-shadow:var(--shadow-lg,0 8px 32px rgba(0,0,0,.18));padding:12px 14px;font-size:var(--t-co);line-height:var(--lh-co)}
.lv-setup-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.lv-setup-x{appearance:none;border:0;background:none;color:var(--text-2);padding:4px;border-radius:var(--r-6);cursor:pointer}
.lv-setup-x:hover{background:var(--hover,rgba(127,127,127,.12))}
.lv-setup-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lv-setup-l li{display:flex;align-items:flex-start;gap:6px;color:var(--text-1)}
.lv-setup-l li svg{flex:none;margin-top:2px;color:var(--text-3,var(--text-2))}
.lv-setup-l li.is-done{color:var(--text-2)}
.lv-setup-l li.is-done svg{color:var(--green,#34c759)}
.lv-setup-l a{color:inherit;text-decoration:none}
.lv-setup-l a:hover{text-decoration:underline}
.lv-setup-l small{color:var(--text-3,var(--text-2))}
.lv-setup-n{margin:10px 0 0;color:var(--text-2)}
.lv-setup-n a,.lv-setup-a{color:var(--accent-text,inherit);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.lv-setup-min{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:6px;appearance:none;background:var(--surface,var(--bg-1));color:var(--text-1);border:1px solid var(--hairline,var(--border));border-radius:999px;box-shadow:var(--shadow-lg,0 8px 32px rgba(0,0,0,.18));padding:8px 12px;font:inherit;font-size:var(--t-co);cursor:pointer}
@media (max-width:760px){.lv-setup,.lv-setup-min{right:16px;bottom:16px}.lv-setup{width:calc(100vw - 32px);max-height:50vh}}
.au-plan{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;width:100%;text-align:left;appearance:none;background:none;color:var(--text-1);border:1px solid var(--hairline,var(--border));border-radius:var(--r-12);padding:12px 14px;margin-top:8px;font:inherit;cursor:pointer}
.au-plan:hover{background:var(--hover,rgba(127,127,127,.08))}
.au-plan small{grid-column:1/4;color:var(--text-2);font-size:var(--t-co);line-height:var(--lh-co)}
.au-plan svg{grid-row:1;grid-column:3;color:var(--text-2)}
.au-tick{display:flex;align-items:flex-start;gap:8px;margin:10px 0 14px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-1)}
.au-tick input{margin-top:3px}
.ob-opts{display:flex;flex-direction:column;gap:8px}
.ob-opt{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;appearance:none;background:none;color:var(--text-1);border:1px solid var(--hairline,var(--border));border-radius:var(--r-12);padding:10px 12px;font:inherit;cursor:pointer}
.ob-opt:hover,.ob-opt.is-on{background:var(--hover,rgba(127,127,127,.08))}
.ob-opt svg{flex:none;margin-top:2px;color:var(--text-2)}
.ob-opt b{display:block;font-weight:var(--w-semibold)}
.ob-opt small{display:block;color:var(--text-2);font-size:var(--t-co);line-height:var(--lh-co)}
.ob-code{white-space:pre-wrap;word-break:break-all;padding:8px 10px;border-radius:var(--r-8);background:var(--hover,rgba(127,127,127,.08));font-family:"Geist Mono",monospace;font-size:var(--t-co);margin:6px 0}
.ob-notice{border:1px solid var(--hairline,var(--border));border-radius:var(--r-12);padding:10px 12px;margin:10px 0}
/* the lean pages' forms: labelled fields in a grid that folds to one column on a phone */
.lv-fs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 12px;margin:10px 0}
.lv-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.lv-f > span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2)}
.lv-f small{font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-3,var(--text-2))}
textarea.ob-in{height:auto;min-height:68px;padding:8px 11px;line-height:var(--lh-body);resize:vertical}
select.ob-in{padding-right:28px}
.lv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.lv-more{margin:10px 0 0}
.lv-more > summary{cursor:pointer;color:var(--text-2);font-size:var(--t-co);line-height:var(--lh-co)}
.lv-rv{padding:6px 0 10px;border-bottom:1px solid var(--hairline,var(--border))}
.lv-rv:last-child{border-bottom:0}
.lv-fig{margin:8px 0}
.lv-pic{display:block;max-width:100%;height:auto;border-radius:var(--r-8);border:1px solid var(--hairline,var(--border))}
.lv-report{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:var(--t-body);line-height:var(--lh-body);margin:12px 0 0;padding:0;background:none}
.lv-shared{max-width:760px;margin:0 auto;padding:24px 16px}

/* Content's editor (Nov 6): the text beside its score, the score's box sticky on a wide screen and under the text on a phone. White and two blacks: the meter is .cs-meter's neutral one. */
.lv-ed-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.lv-ed-grid > .pt-card{margin:0}
.lv-ed-rail{position:sticky;top:12px}
.lv-ed-tools{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.lv-ed-doc{min-height:360px;padding:16px 18px;border:1px solid var(--line,var(--border));border-radius:var(--r-8,8px);background:var(--bg,#fff);line-height:1.6}
.lv-ed-doc:focus{border-color:var(--fg)}
.lv-ed-doc:empty::before{content:"Write here, or let Dottpace draft it from your site's facts.";color:var(--text-3)}
.lv-score{margin:2px 0 0;color:var(--text-2)}
.lv-score strong{font-size:28px;line-height:1.1;font-weight:var(--w-semibold,600);color:var(--fg);font-variant-numeric:tabular-nums;margin-right:2px}
@media (max-width: 900px){.lv-ed-grid{grid-template-columns:minmax(0,1fr)}.lv-ed-rail{position:static}}
/* design QA Nov 6: the live kit's one-line add/edit form had no rule, so its 100%-wide inputs ran off the card */
.fp-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fp-add > .ob-in{flex:1 1 180px;width:auto;min-width:0}
.fp-add > select.ob-in{flex:0 1 160px}
.fp-add > .btn{flex:0 0 auto}
/* design QA Nov 6: a list whose rows carry no status (or no button) kept the empty 150px / 170px columns, so every name sat far in */
.mn-gl:not(:has(> .mn-g > .mn-g-st:not(:empty))) > .mn-g{grid-template-columns:minmax(0,1fr) auto 14px}
.mn-gl:not(:has(> .mn-g > .mn-g-st:not(:empty))) > .mn-g > .mn-g-st{display:none}
/* design QA Nov 6: live pages stacked cards 14px apart, the tool pages 20px; one rhythm. A note under a card touched it (0px) */
.page.fp > :is(.sec, section, .sv-two) + :is(.sec.panel, .sv-two){margin-top:20px}
.page.fp > :is(.sec, section) + p.fd-muted{margin-top:8px}