/* wizard.css — design A "Ledger" (owner choice, 10 September 2026) on the v1.2 tokens from tools/template.html.
   Tokens and the .vp-icon / .term / .label rules are copied unchanged; the rest is the wizard. */
:root{
  --bg:#2B2D31; --paper:#35383E; --paper-2:#3E4149; --ink:#FFFFFF; --ink-2:#CDD0D6; --ink-3:#8F939C; --line:#474B53; --line-2:#3F434B;
  --accent:#F5A742; --accent-2:#FFC46B; --accent-ink:#1E1707; --accent-soft:#4A3D22;
  --badge:#FFFFFF; --badge-fg:#2B2D31; --sel:#3F3A2A; --sel-line:#8A6F2E;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:6px; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
  --block:#FF6B6B; --ask:#F5A742; --note:#8E9CFF; --ok:#4FD37A;
  color-scheme:dark;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent-2)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.025em;margin:.35rem 0 .6rem}
h2{font-size:1.35rem}h3{font-size:1.1rem}
p{margin:0}
.muted{color:var(--ink-3)}
.eyebrow{font-family:var(--display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
code,.mono{font-family:var(--mono);font-size:.8em}
code{color:var(--accent-2);background:var(--accent-soft);padding:0 .3em;border-radius:3px}
button{font-family:var(--display);font-size:.88rem;font-weight:500;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:.5rem .9rem;line-height:1.2}
button:hover{border-color:var(--ink-3)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
input[type=date]:focus-within,input[type=date]:focus{outline:2px solid var(--accent);outline-offset:2px} /* 7b QA: Chromium moves focus into the date fields, so :focus-visible never matches the input */
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
button.quiet{border-color:transparent;background:transparent;color:var(--ink-2);padding:.4rem .6rem}
button.quiet:hover{background:var(--paper-2);color:var(--ink)}
button.link{border:0;background:none;color:var(--accent-2);text-decoration:underline;padding:0;font:inherit;font-family:var(--display);font-size:.85rem}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=search],select,textarea{font:inherit;font-family:var(--display);font-size:.98rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);width:100%;max-width:520px}
textarea{min-height:3.6rem;resize:vertical}
input.num{max-width:120px}
input.prop,textarea.prop,select.prop{border-style:dashed;border-color:var(--accent);color:var(--accent-2)}
input.bad,textarea.bad{border-color:var(--block)}
.vp-icon{display:inline-block;vertical-align:middle;color:var(--badge);--vp-bg:var(--badge);--vp-fg:var(--badge-fg)}
.cat .vp-icon,.vp-icon.cat{--vp-bg:var(--c);--vp-fg:#fff;color:var(--c)}
.vp-icon.missing{width:1em;height:1em;border-radius:50%;background:var(--line)}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.65rem 32px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand .vp-icon{width:28px;height:28px}
.brand .sub{color:var(--ink-3);font-weight:500}
.top .acts{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.saved{font-family:var(--display);font-size:.78rem;color:var(--ink-3);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.saved::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.saved.ok::before{background:var(--ok)}.saved.dirty::before{background:var(--block)}

/* progress badges */
.badges{display:flex;gap:.25rem;padding:1rem 32px .2rem;overflow-x:auto;scrollbar-width:none;max-width:1400px;margin:0 auto;width:100%}
.bd{display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink-3);font-family:var(--display);font-size:.8rem;padding:.35rem .7rem .35rem .4rem;border-radius:999px;border:1px solid transparent;flex:none}
.bd .vp-icon{width:26px;height:26px;opacity:.35;transition:opacity .2s}
.bd.has .vp-icon{opacity:1}.bd.has{color:var(--ink-2)}
.bd .k{font-variant-numeric:tabular-nums;font-size:.72rem;color:var(--ink-3);min-width:.6rem}
.bd.cur{border-color:var(--accent);color:var(--ink);background:var(--paper)}
.bd:hover{background:var(--paper)}

/* layout */
.wrap{display:grid;grid-template-columns:minmax(0,1.3fr) 360px;gap:3rem;padding:1.2rem 32px 4rem;max-width:1400px;margin:0 auto;width:100%;align-items:start;flex:1}
.main{min-width:0}
.q .lede{font-size:1.12rem;color:var(--ink-2);max-width:62ch}
.loading{color:var(--ink-3);font-family:var(--display);padding:3rem 0}
.side{position:sticky;top:70px;display:grid;gap:1rem;max-height:calc(100vh - 80px);overflow:auto;scrollbar-width:thin}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem}
.panel h4{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem;display:flex;justify-content:space-between}
.panel .label{display:grid;gap:.7rem}

/* label (template.html .label) */
.label .grp{display:grid;grid-template-columns:40px minmax(0,1fr);gap:.15rem .7rem;align-items:start;font-family:var(--display);cursor:pointer}
.label .grp .cat .vp-icon{width:40px;height:40px}.label .grp .cat{grid-row:1/span 9}
.label .grp .catname{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c);padding-top:.3rem}
.label .grp .catname small{color:var(--ink-3);font-weight:400;letter-spacing:0;margin-left:.2rem}
.label .grp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.label .grp li{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--ink);line-height:1.2}
.label .grp li .vp-icon{width:24px;height:24px;flex:none}
.label .grp li small{color:var(--ink-3);margin-left:.3rem}
.label.compact .grp{grid-template-columns:34px minmax(0,1fr);gap:.1rem .6rem;align-items:center}
.label.compact .grp .cat .vp-icon{width:34px;height:34px}.label.compact .grp .cat{grid-row:1/span 2}
.label.compact .grp .catname{font-size:.66rem}
.label.compact .grp ul{flex-direction:row;flex-wrap:wrap;gap:.2rem}
.label.compact .grp li span{display:none}.label.compact .grp li .vp-icon{width:22px;height:22px}
.label.compact .grp.open ul{flex-direction:column;gap:.25rem;margin-top:.1rem}.label.compact .grp.open li span{display:inline;font-size:.82rem}
.label .grp li.proposed .vp-icon{opacity:.5}.label .grp li.proposed span{color:var(--ink-3);font-style:italic}
.label.empty{color:var(--ink-3);font-family:var(--display);font-size:.9rem}
.lblfoot{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:.75rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:.5rem;margin-top:.2rem}
.lblfoot button{font-size:.75rem;padding:.2rem .4rem}

/* glossary tooltips (template.html .term) */
.term{text-decoration:underline dotted var(--accent);text-underline-offset:3px;cursor:help;position:relative}
.term:hover .tip,.term:focus .tip,.term:focus-within .tip{display:block} /* 7b QA: focus-within keeps the tip open while its source link has focus */
.term .tip{display:none;position:absolute;left:0;bottom:1.6em;z-index:15;width:min(360px,80vw);background:#1F2124;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .75rem;font:.8rem/1.4 var(--display);text-decoration:none;box-shadow:var(--shadow);font-style:normal;font-weight:400;text-transform:none;letter-spacing:0}
.term .tip b{display:block;color:var(--ink);margin-bottom:.2rem}
.term .tip a{display:block;margin-top:.35rem;color:var(--accent-2);font-size:.75rem}

/* why we ask */
.whyask{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;font-size:.92rem;color:var(--ink-2)}
.whyask h4{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.links{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;font-family:var(--display);font-size:.78rem}
.links a{color:var(--accent-2);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem}
.links a:hover{border-color:var(--accent)}
.fig{margin:0;font-family:var(--display);font-size:.78rem;color:var(--ink-3);padding:0 .4rem}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{margin-top:.3rem}

/* warnings */
.warns{display:grid;gap:.6rem;margin:1.2rem 0 .2rem}
.warn{border-left:3px solid var(--w);background:color-mix(in srgb,var(--w) 9%,var(--paper));border-radius:0 8px 8px 0;padding:.8rem 1rem;font-size:.95rem;color:var(--ink-2);display:grid;gap:.35rem}
.warn.block{--w:var(--block)}.warn.ask{--w:var(--ask)}.warn.note{--w:var(--note)}
.warn b{font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--w)}
.warn.block .txt{color:var(--ink)}
.warn .why{font-family:var(--display);font-size:.8rem;color:var(--ink-3);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.warn .why a{color:var(--accent-2);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.1rem .55rem;overflow-wrap:anywhere}
.warn .why>span{overflow-wrap:anywhere}
.warn .acts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}

/* cards and rows */
.rows{display:grid;gap:.7rem;margin-top:1.4rem}
.prow{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;display:grid;gap:.9rem}
.prow.open{border-color:var(--sel-line);box-shadow:var(--shadow)}
.prow.sub{background:var(--bg)}
.prow>.head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:.9rem;align-items:center}
.prow>.head>.vp-icon,.prow>.head>.cat .vp-icon{width:44px;height:44px}
.prow>.head .t h3{font-size:1.1rem}
.prow>.head .t .sub{font-family:var(--display);font-size:.82rem;color:var(--ink-3);margin-top:.15rem}
.prow>.head .b{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.prow .detail{display:grid;gap:1rem;border-top:1px solid var(--line-2);padding-top:1rem}
.prow .fields{display:grid;gap:.9rem}
.status{font-family:var(--display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.status.prop{color:var(--accent)}.status.ok{color:var(--ok)}.status.over{color:var(--note)}.status.none{color:var(--ink-3)}
section.block{margin-top:2rem}
section.block>h2{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
section.block>h2 .vp-icon{width:30px;height:30px}
section.block>.intro{color:var(--ink-2);font-size:.98rem;max-width:64ch}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.row.start{justify-content:flex-start}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem;margin-top:1rem}
.tile{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:.7rem;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.85rem .9rem;cursor:pointer;position:relative;transition:border-color .12s}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile .ic .vp-icon{width:44px;height:44px}
.tile .tx b{font-family:var(--display);font-size:.98rem;display:block;line-height:1.2}
.tile .tx .q{font-family:var(--display);font-size:.8rem;color:var(--ink-3);display:block;margin-top:.2rem;line-height:1.35}
.tile .tick{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);margin-top:.15rem}
.tile:hover{border-color:var(--ink-3)}
.tile.on{background:var(--sel);border-color:var(--sel-line)}
.tile.on .tick{background:var(--accent);border-color:var(--accent)}
.tile.on .tick::after{content:"✓";display:block;color:var(--accent-ink);font:700 .8rem/20px var(--display);text-align:center}
.tile.prop:not(.on){border-style:dashed;border-color:var(--accent)}
.tile .prop-tag{display:block;font:.7rem var(--display);color:var(--accent);margin-top:.25rem;font-style:normal}
.tile.on .prop-tag{display:none}

/* switches, chips, lozenges, segments */
.sw{display:inline-flex;align-items:flex-start;gap:.6rem;font-family:var(--display);font-size:.95rem;cursor:pointer;position:relative}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw i{width:44px;height:24px;border-radius:12px;background:var(--line);position:relative;flex:none;transition:.15s;margin-top:.05rem}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink-2);transition:.15s}
.sw.on i{background:var(--accent)}.sw.on i::after{left:23px;background:var(--accent-ink)}
.sw span small{display:block;color:var(--ink-3);font-size:.78rem;font-weight:400}
.sw.small{font-size:.85rem}.sw.small i{width:36px;height:20px}.sw.small i::after{width:14px;height:14px}.sw.small.on i::after,.sw.small input:checked~i::after{left:19px}
.sw input:checked~i{background:var(--accent)}.sw input:checked~i::after{left:23px;background:var(--accent-ink)}
.sw.small input:checked~i::after{left:19px}
.sws{display:grid;gap:.6rem;margin-top:.6rem}
.sws.cols{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.seg{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;vertical-align:middle}
.seg button{border:0;border-radius:0;background:transparent;padding:.45rem 1rem}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg em{font:.75rem var(--display);color:var(--ink-3);padding:0 .7rem;font-style:normal}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-size:.85rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;line-height:1.2;text-align:left}
.chip .vp-icon{width:20px;height:20px}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.chip.on::before{content:"✓";font-weight:700}
.chip.on.prop{background:var(--accent-soft);color:var(--accent-2);border-style:dashed;border-color:var(--accent)}
.chip.depr{border-style:dotted;color:var(--ink-3)}
/* owner, 12 October 2026: an entry the operator added is selected, so it looks like any other selected chip */
.chip.free{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
/* owner, 12 October 2026: data already in another data group; data not in any group yet */
.chip.taken{background:var(--paper-2,#f1f0ec);color:var(--ink-3);border-style:dashed;cursor:not-allowed;opacity:.7}
.chip.taken:hover{border-color:var(--line);color:var(--ink-3)}
.chip.taken small{font-size:.72rem;font-weight:400}
.chip.taken .vp-icon{filter:grayscale(1);opacity:.6}
.chip.ghost{cursor:default;font-size:.8rem;padding:.25rem .6rem}
.chip.ghost:hover{border-color:var(--line);color:var(--ink-2)}
.left-over{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;padding:.8rem 1rem;border:1px dashed var(--line);border-radius:10px;font-size:.9rem}
.left-over b{font-family:var(--display);font-weight:600}
.left-over small{flex-basis:100%;color:var(--ink-3)}
.left-over.done{border-style:solid;color:var(--ink-2)}
.choices{display:flex;flex-wrap:wrap;gap:.4rem}
.freein{display:inline-flex;gap:.3rem;align-items:center}
.freein input{max-width:220px;padding:.35rem .6rem;font-size:.85rem}
.loz{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:.22rem .6rem .22rem .3rem;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);white-space:nowrap}
.loz .vp-icon{width:18px;height:18px}
.loz small{font-weight:400;opacity:.8;margin-left:.15rem}
.loz.prop{border-style:dashed;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.loz.ask{color:var(--ask);border-color:var(--accent-soft)}.loz.block{color:var(--block)}.loz.ok{color:var(--ok)}

/* fields */
.field{display:grid;gap:.35rem}
.field .flab{font-family:var(--display);font-weight:600;font-size:.95rem}
.field .flab small{color:var(--ink-3);font-weight:400;font-size:.78rem}
.field .hint{font-family:var(--display);font-size:.8rem;color:var(--ink-3);max-width:62ch}
.field .err{font-family:var(--display);font-size:.8rem;color:var(--block)}
.field .note{font-family:var(--display);font-size:.8rem;color:var(--note)}
.ptag{font:600 .7rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.period{display:inline-flex;gap:.4rem}.period input{max-width:110px}.period select{max-width:130px}
.sw.more{margin-top:.2rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
details.expl{font-family:var(--display);font-size:.82rem;color:var(--ink-3)}
details.expl summary{cursor:pointer;color:var(--accent-2);text-decoration:underline;list-style:none;display:inline}
details.expl>div{margin-top:.4rem;padding:.6rem .8rem;background:var(--bg);border:1px dashed var(--line);border-radius:8px;line-height:1.5}
details.expl .because{margin-top:.3rem}

/* matrix (step 5) */
.matrix{overflow-x:auto;margin-top:1rem}
.matrix table{border-collapse:collapse;font-family:var(--display);font-size:.85rem;min-width:100%}
.matrix th,.matrix td{padding:.35rem .4rem;border-bottom:1px solid var(--line-2);text-align:center}
.matrix th{color:var(--ink-3);font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;vertical-align:bottom}
.matrix th .vp-icon,.matrix td:first-child .vp-icon{width:24px;height:24px;margin-right:.3rem}
.matrix td:first-child,.matrix th:first-child{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--bg)}
.matrix .cell{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--paper);padding:0}
.matrix .cell.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.matrix .cell.on::after{content:"✓";font-weight:700}
.matrix .cell:disabled{opacity:.3;cursor:not-allowed}

/* countries (step 2) */
.countries{position:relative}
.countries .sel{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.countries input[type=search]{max-width:360px}
.countries .list{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem;max-height:220px;overflow:auto;padding:.3rem;border:1px solid var(--line-2);border-radius:8px;background:var(--bg)}
.countries .list button{font-size:.8rem;padding:.3rem .6rem}
.agebar{display:flex;gap:.4rem;flex-wrap:wrap}
.ag{font-family:var(--display);font-weight:600;padding:.5rem .8rem;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);display:flex;gap:.4rem;align-items:baseline;background:var(--paper);cursor:pointer}
.ag small{font-weight:400;color:var(--ink-3);font-size:.7rem}
.ag.prop{border-color:var(--accent);border-style:dashed;background:var(--accent-soft);color:var(--accent-2)}
.ag.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.ag.on small{color:var(--accent-ink)}

/* footer */
.foot{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 32px;z-index:10}
.foot .mid{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:600;font-size:.85rem;padding:.5rem .9rem;border-radius:var(--radius);opacity:0;transition:.2s;pointer-events:none;z-index:40}
.toast.on{opacity:1;transform:translateX(-50%)}
dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:1.4rem;max-width:min(680px,92vw);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{margin-bottom:.6rem}dialog .body{font-size:.95rem;color:var(--ink-2);max-height:60vh;overflow:auto}
dialog .row{margin-top:1rem;justify-content:flex-end}
.errs{font-family:var(--display);font-size:.85rem;padding-left:1.2rem;display:grid;gap:.25rem}
.later{color:var(--ink-2);background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:1.4rem;margin-top:1.4rem}
.later h3{margin-bottom:.4rem}

/* session 3c: starter packs, prompts, features, groups, platform question, purpose groups */
.tile.on.prop{border-style:dashed;border-color:var(--accent)}
.tile.on.prop .prop-tag{display:block}
.tile.noic{grid-template-columns:minmax(0,1fr) 22px}
.tiles.groups{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem;margin-top:1rem}
.pack{display:grid;gap:.2rem;text-align:left;padding:.7rem .85rem;border-radius:10px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.pack b{font-family:var(--display);font-size:.95rem;line-height:1.2}
.pack span{font-family:var(--display);font-size:.78rem;color:var(--ink-3);line-height:1.35;font-weight:400}
.pack.on{background:var(--sel);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pack.on b::before{content:"● ";color:var(--accent)}
.pack.none{border-style:dashed}
.qrows{display:grid;gap:.4rem;margin-top:.9rem}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem}
.qrow .qq{font-family:var(--display);font-size:.95rem;flex:1 1 260px}
.seg button.prop{outline:1px dashed var(--accent);outline-offset:-3px;color:var(--accent-2)}
.pgroups{display:grid;gap:.5rem;margin-top:1rem}
.pgroup{border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.pgroup.open{padding-bottom:.8rem}
.pgroup .tiles{margin:0 .8rem}
.pghead{display:flex;align-items:center;gap:.8rem;width:100%;border:0;background:transparent;padding:.75rem .9rem;text-align:left;font-size:1rem;font-weight:600}
.pghead small{font-weight:400;color:var(--ink-3);font-size:.8rem}
.pghead i{margin-left:auto;font-style:normal;color:var(--accent);font-size:1.2rem;line-height:1}
/* session 3c: overall progress bar in the colour of the current step's category, question dots, one question per screen */
.progress{position:relative;height:6px;background:var(--line-2)}
.progress i{position:absolute;left:0;top:0;bottom:0;background:var(--stepc,var(--accent));transition:width .45s ease,background-color .8s ease}
.progress span{position:absolute;right:.6rem;top:8px;font:600 .68rem var(--display);color:var(--ink-3);letter-spacing:.06em}
.q .eyebrow{color:var(--stepc,var(--accent));transition:color .8s ease}
.dots{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 .2rem}
.dots a{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink-3);display:block}
.dots a.done{background:var(--ink-3)}
.dots a.cur{background:var(--stepc,var(--accent));border-color:var(--stepc,var(--accent));transform:scale(1.25)}
.screen-note{font-family:var(--display);font-size:.85rem;color:var(--ink-3);margin-top:.8rem}
.ticks-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.bigseg{margin-top:1.2rem}
.bigseg .seg button{padding:.7rem 1.4rem;font-size:1rem}
.regions{display:grid;gap:.45rem;margin-top:1rem}
.reg{border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.reg .rh{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;flex-wrap:wrap}
.reg .rh .pghead{padding:.2rem 0;width:auto;flex:1 1 180px}
.reg .rl{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 .7rem .7rem}
.reg.single{border-style:dashed}
.ac{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem;min-height:0}
.result{font-family:var(--display);font-size:1.05rem;margin-top:1rem}
@media (max-width:1100px){.wrap{grid-template-columns:minmax(0,1fr) 320px;gap:2rem}}
@media (max-width:960px){
  .wrap{grid-template-columns:1fr}
  .side{position:static;max-height:none;overflow:visible}
  .top,.badges,.wrap,.foot{padding-inline:16px}
  .top .acts button.quiet{display:none}.top .acts button{font-size:.78rem;padding:.4rem .6rem}.top .acts .saved{font-size:.72rem}
  .prow>.head{grid-template-columns:36px minmax(0,1fr)}.prow>.head>.vp-icon,.prow>.head>.cat .vp-icon{width:36px;height:36px}
  .prow>.head .b{grid-column:1/-1;justify-content:flex-start}
  .foot{flex-wrap:wrap}.foot .mid{order:3;flex-basis:100%}
  .foot button{font-size:.8rem;padding:.45rem .7rem}
  input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea{max-width:100%}
  code{word-break:break-all}
  .tiles{grid-template-columns:1fr}
  .brand .sub{display:none}
}
@media (max-width:520px){.wrap{padding-bottom:2rem}h1{font-size:1.7rem}
  .term .tip{position:fixed;left:16px;right:16px;bottom:16px;width:auto;z-index:60} /* 3c: a tapped tooltip near the right edge no longer widens the page */
}

/* ---- session 4: steps 7 to 12 ---- */
h2.tgroup{font-family:var(--display);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:1.2rem 0 -.4rem;font-weight:600}
a.inl{color:var(--accent);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.dpia-note{border:1px dashed var(--accent);border-radius:12px;padding:.7rem .9rem;margin-top:1.2rem;font-family:var(--display);font-size:.88rem;line-height:1.45}
.tile.ro{cursor:default;opacity:.9}.tile.ro .q a{white-space:normal}
.fields.role{border-bottom:1px solid var(--line-2);padding-bottom:.8rem;margin-bottom:.4rem}
/* step 9 rows */
.trows{display:grid;gap:.6rem;margin-top:1rem}
.trow{display:grid;grid-template-columns:150px minmax(0,1fr) 170px 170px auto;gap:.8rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;background:var(--paper);font-family:var(--display);font-size:.9rem}
.trow .c b{display:block}.trow small{color:var(--ink-3);display:block;font-size:.75rem}
.trow.head{background:none;border:0;padding:.1rem .9rem;color:var(--ink-3);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.trow .acts{display:flex;gap:.4rem;justify-content:flex-end}
.prow.add{margin-top:1rem;border-style:dashed}
.preview{border-left:3px solid var(--accent);padding:.5rem .8rem;background:var(--bg);border-radius:0 10px 10px 0;font-size:.95rem;line-height:1.5}
.nofree .freein{display:none}.nofreechips .chip.free{display:none}
/* step 10 coverage table (stacks on phones) */
.cov td{text-align:left!important;vertical-align:middle}.cov td .loz{margin:.1rem 0}.cov td.act{text-align:right!important;white-space:nowrap}
.cov tr.chooser td{background:var(--paper);white-space:normal!important;position:static}
/* step 11 checklist */
.cklist{margin-top:.8rem}
.ck{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:.7rem;align-items:center;border-bottom:1px solid var(--line-2);padding:.6rem .2rem;font-family:var(--display);color:inherit;text-decoration:none}
.ck:hover{background:var(--paper)}.ck .n{color:var(--ink-3);font-size:.75rem}.ck small{display:block;color:var(--ink-3);font-size:.78rem}
.status.nyet{color:var(--block)}
/* step 12 review */
.sumrow{margin-top:.6rem;gap:.4rem;flex-wrap:wrap}
.rv h3{font-family:var(--display);font-size:1rem;margin:1.4rem 0 .4rem}
.rv .it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:start;padding:.45rem 0;border-bottom:1px solid var(--line-2);font-family:var(--display);font-size:.88rem}
.rv .it code{word-break:break-all}
/* session 5: the outputs, one card per output with its actions */
/* owner, 12 October 2026: My documents, two sections, one document per row; the label and the widget previewed */
.docsec{margin:1.4rem 0 .4rem}.docsec h2{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.2rem;margin:0 0 .2rem}
.docsec h2 svg{width:20px;height:20px;color:var(--accent)}.docsec.internal h2 svg{color:var(--ink-3)}.docsec .intro{color:var(--ink-3);margin:0 0 .7rem}
.docrow{display:grid;grid-template-columns:1fr;gap:1rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-bottom:.7rem}
.docrow.has-pv{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.docrow h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .3rem}.docrow p{margin:0 0 .7rem;color:var(--ink-2);font-size:.92rem;max-width:62ch}
.docrow .acts{display:flex;flex-wrap:wrap;gap:.4rem}.docrow .acts button{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;font-size:.85rem}
.docrow .acts button svg{width:16px;height:16px}.docrow .acts button[disabled]{opacity:.45;cursor:not-allowed}
.docsec.internal .docrow{border-style:dashed}
.dpv{margin:0;display:grid;gap:.3rem}.dpv iframe{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;height:320px;display:block}
.dpv iframe[data-pv="widget"]{height:560px;background:#f4f3ef}.dpv figcaption{font-size:.75rem;color:var(--ink-3);font-family:var(--display)}
@media (max-width:900px){.docrow.has-pv{grid-template-columns:1fr}}
.outs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem;margin-top:.6rem}
.outs .out{display:grid;gap:.3rem;align-content:start;padding:.8rem;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-family:var(--display)}
.outs .out small{color:var(--ink-3);font-size:.78rem}
.outs .acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.outs .acts button{padding:.4rem .7rem;font-size:.82rem}
.outs .acts button[disabled]{opacity:.45;cursor:not-allowed}
.ok-i{color:var(--ok)}.no-i{color:var(--block)}
@media (max-width:960px){
  .trow{grid-template-columns:minmax(0,1fr) auto}.trow .a,.trow .w,.trow .s{grid-column:1/-1}.trow.head{display:none}
  .cov table,.cov tbody,.cov tr,.cov td{display:block}.cov thead{display:none}.cov tr{padding:.5rem 0;border-bottom:1px solid var(--line-2)}
  .cov td{border:0!important;padding:.15rem 0!important;text-align:left!important;white-space:normal!important;position:static!important}
  .outs{grid-template-columns:1fr}
  .rv .it{grid-template-columns:minmax(0,1fr)}.rv .it a.go{justify-self:start}
}
/* a card head with no icon: the title spans the icon column */
.prow>.head>.t:first-child{grid-column:1/3}
@media (max-width:960px){.prow>.head>.t:first-child{grid-column:1/-1}}
.cond-h{font-family:var(--display);font-size:.95rem;margin-top:.4rem}
.field .keep{margin-left:.5rem;font-size:.8rem;padding:.15rem .6rem}

/* ---- session 6: the cookie branch (steps/cookies.js) ---- */
.ckhead,.ckrow{display:grid;grid-template-columns:minmax(150px,1.3fr) 1fr 120px 130px 130px 0;gap:.7rem;align-items:center;font-family:var(--display);font-size:.88rem}
.ckhead{color:var(--ink-3);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .9rem}
.ckrow{border-top:1px solid var(--line-2);padding:.55rem .9rem}
.ckrow code,.ckcard h4 code{font:600 .85rem ui-monospace,Menlo,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}
.ckrow small{display:block;color:var(--ink-3);font-size:.75rem}
.prov{border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-top:.8rem;overflow:hidden}
.prov>header{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;font-family:var(--display);flex-wrap:wrap}
.prov>header svg{width:28px;height:28px;flex:none}.prov>header b{font-size:1rem}.prov>header small{color:var(--ink-3)}.prov>header .sp{flex:1}
.sum{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin:1rem 0}
.sum div{border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem;font-family:var(--display);font-size:.8rem;color:var(--ink-3)}
.sum div b{display:block;font-size:1.3rem;color:var(--ink)}
.drawer{border:1px dashed var(--accent);border-radius:14px;padding:.8rem .9rem;margin-top:1rem}
.drawer h3{font-family:var(--display);font-size:.95rem;margin:0 0 .5rem}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.pgrid label{display:flex;gap:.5rem;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:.55rem .65rem;font-family:var(--display);font-size:.85rem;background:var(--paper);cursor:pointer}
.pgrid label small{display:block;color:var(--ink-3);font-size:.72rem}
.pgrid label.on{border-color:var(--accent)}
.sprov{margin-top:.8rem}
.prop-row{outline:1px dashed var(--accent);outline-offset:-3px;border-radius:10px}
.flag{color:var(--accent-2)}
.ckcard{border-top:1px solid var(--line-2);padding:.8rem .9rem}.ckcard:first-child{border-top:0}
.ckcard h4{margin:0 0 .5rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ckcard .f2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem}
.regime{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.6rem}
.regime>div{border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem;font-family:var(--display);font-size:.85rem}
.regime h5{margin:0 0 .35rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cond{list-style:none;margin:.4rem 0;padding:0;font-size:.82rem}.cond li{margin:.15rem 0}.cond li:before{content:"✓ ";color:var(--ok)}.cond li.q:before{content:"? ";color:var(--accent)}
.bann{width:100%;border-collapse:collapse;font-family:var(--display);font-size:.88rem;margin-top:.8rem}
.bann th,.bann td{border-bottom:1px solid var(--line-2);padding:.5rem .4rem;text-align:left;vertical-align:top}
.bann th{color:var(--ink-3);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.bann td small{display:block;color:var(--ink-3);font-size:.72rem;margin-top:.2rem}
.mode{display:inline-block;border-radius:999px;padding:.12rem .55rem;font-size:.75rem;border:1px solid var(--line);white-space:nowrap}
.mode.ask{border-color:var(--accent);color:var(--accent-2)}.mode.obj{border-color:#6BBF8A;color:#6BBF8A}.mode.on{color:var(--ink-3)}
.outs3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.8rem}
.outs3 div{border:1px solid var(--line);border-radius:12px;padding:.7rem;font-family:var(--display);font-size:.85rem}.outs3 small{display:block;color:var(--ink-3);font-size:.75rem}
@media (max-width:960px){
 .ckhead{display:none}.ckrow{grid-template-columns:1fr auto;row-gap:.2rem}.ckrow .c3,.ckrow .c4,.ckrow .c5{grid-column:1/-1}
 .sum{grid-template-columns:repeat(3,1fr)}.pgrid{grid-template-columns:1fr 1fr}.ckcard .f2,.regime,.outs3{grid-template-columns:1fr}
 .bann thead{display:none}.bann tr{display:block;border-bottom:1px solid var(--line-2);padding:.4rem 0}.bann td{display:block;border:0;padding:.1rem 0}}
.ckcard .f2{align-items:start}.ckcard .choices{align-items:flex-start}

/* ---- owner, 12 October 2026: interface pass ---- */
.ui-i{width:18px;height:18px;flex:none;vertical-align:-3px}
/* a heading focused by script after a screen change (for screen readers) shows no box */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none}
/* header: icon + plain words; icons only on narrow screens */
.top .acts{gap:.3rem}
.hb{display:inline-flex;align-items:center;gap:.45rem}
.hb.quiet{color:var(--ink-2)}
.saved{gap:.35rem}.saved::before{display:none}.saved .ui-i{width:15px;height:15px}
.saved.ok .ui-i{color:var(--ok)}.saved.dirty{color:var(--block)}
/* step badges: one per step, in walk order */
.badgewrap{max-width:1400px;margin:0 auto;width:100%}
.badgewrap .badges{display:flex;gap:.2rem;padding:1rem 32px .2rem;overflow-x:auto;scrollbar-width:none}
.bd{gap:.4rem;padding:.3rem .65rem .3rem .35rem}
.bd .vp-icon{width:26px;height:26px;opacity:.38}
.bd.has .vp-icon,.bd.cur .vp-icon{opacity:1}
.bd .k{display:inline-flex;color:var(--ok);min-width:0}.bd .k .ui-i{width:14px;height:14px;stroke-width:3}
.bd.cur{border-color:var(--c,var(--accent));background:var(--paper);color:var(--ink)}
.progress{height:4px}
/* bottom bar: the questions of this step as a yellow marker, then Back · Preview · Next */
.foot{flex-direction:column;align-items:stretch;gap:.55rem;padding:.55rem 32px .7rem}
.foot .frow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.foot .frow>:first-child{justify-self:start}.foot .frow>:last-child{justify-self:end}
.foot .frow button{display:inline-flex;align-items:center;gap:.45rem}
.foot .fspace{display:block}
.qbar{display:flex;gap:3px;height:6px;margin:0}
.qbar a{flex:1 1 0;min-width:6px;border-radius:3px;background:var(--line-2);border:0;transition:background-color .25s}
.qbar a.done{background:color-mix(in srgb,var(--accent) 45%,var(--line-2))}
.qbar a.cur{background:var(--accent)}
.qbar a:hover{background:var(--accent-2)}
.qbar a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pvbtn{border-color:var(--line);background:var(--paper-2)}
.pvbtn:hover{border-color:var(--accent)}
/* starting screen */
body.is-start .badgewrap,body.is-start .progress,body.is-start .side,body.is-start .foot{display:none}
body.is-start .wrap{grid-template-columns:minmax(0,1fr);max-width:1100px}
.start{padding:1.2rem 0 1rem}
.start h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch}
.start .lede{font-size:1.2rem;color:var(--ink-2);max-width:60ch;margin-top:.4rem}
.start .points{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2.6rem}
.start .points li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:1.1rem;align-items:start}
.start .points .vp-icon{width:76px;height:76px}
.start .points h2{font-size:1.25rem;margin:.35rem 0 .3rem}
.start .points p{color:var(--ink-2);font-size:1.02rem}
.start-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.start-foot .small{font-family:var(--display);font-size:.85rem;color:var(--ink-3);max-width:46ch}
.start-foot .go-row{display:flex;gap:.6rem;align-items:center;margin-left:auto}
.start-foot .go-row button{display:inline-flex;align-items:center;gap:.5rem}
button.big{font-size:1.15rem;padding:.9rem 1.6rem;border-radius:10px}
button.big .ui-i{width:22px;height:22px}
/* check your answers */
.ck-done,.ck-todo{display:flex;gap:1rem;align-items:center;border-radius:14px;padding:1rem 1.2rem;margin:1.2rem 0 1rem;font-family:var(--display)}
.ck-done{background:color-mix(in srgb,var(--ok) 12%,var(--paper));border:1px solid color-mix(in srgb,var(--ok) 45%,var(--line))}
.ck-todo{background:color-mix(in srgb,var(--block) 9%,var(--paper));border:1px solid color-mix(in srgb,var(--block) 40%,var(--line))}
.ck-done .big{color:var(--ok)}.ck-todo .big{color:var(--block)}
.ui-i.big{width:40px;height:40px}
.ck-done b,.ck-todo b{display:block;font-size:1.1rem}.ck-done span,.ck-todo span{color:var(--ink-2);font-size:.92rem}
.cklist{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.ck{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:.7rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem;background:var(--paper);font-family:var(--display)}
.ck .ui-i{width:24px;height:24px}
.ck .ui-i.yes{color:var(--ok)}.ck .ui-i.no{color:var(--block)}.ck .ui-i.skip{color:var(--ink-3)}
.ck .l b{display:block;font-weight:600;font-size:.98rem}.ck .l small{display:block;color:var(--ink-3);font-size:.82rem;margin-top:.1rem}
.ck.bad{border-color:color-mix(in srgb,var(--block) 50%,var(--line))}.ck.bad .l small{color:var(--ink-2)}
.ck a.go{display:inline-flex;align-items:center;gap:.3rem}.ck a.go .ui-i{width:16px;height:16px}
a.quietlink{color:var(--ink-3);font-size:.85rem}
h2.ck-h{font-size:1rem;margin:1.6rem 0 -.4rem;color:var(--ink-2)}
/* preview dialog: centred, background blurred */
dialog.pv{padding:0;width:min(1000px,94vw);height:min(88vh,1100px);max-width:none;max-height:none;display:none;flex-direction:column;overflow:hidden;border-radius:14px}
dialog.pv[open]{display:flex}
dialog.pv::backdrop{background:rgba(15,16,18,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.pv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem .8rem 1.3rem;border-bottom:1px solid var(--line)}
.pv-head h2{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;margin:0}
.pv-state{display:block;font-family:var(--display);font-size:.82rem;color:var(--ink-3);margin-top:.15rem}
.pv-state.draft{color:var(--accent-2)}.pv-state.bad{color:var(--block)}.pv-state.ok{color:var(--ok)}
button.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%}
button.icon .ui-i{width:22px;height:22px}
.pv-frame{flex:1;width:100%;border:0;background:#fff}
html.pv-open{overflow:hidden}
@media (max-width:960px){
  .badgewrap .badges{padding-inline:16px}
  .foot{padding:.5rem 16px .6rem}
  .start .points{grid-template-columns:1fr;gap:1.3rem}
}
@media (max-width:720px){
  .hb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top .acts button.quiet{display:inline-flex}
  .hb{padding:.45rem .55rem}
  .saved span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .start-foot{flex-direction:column;align-items:stretch}.start-foot .go-row{justify-content:flex-end}
  .start .points li{grid-template-columns:56px minmax(0,1fr)}.start .points .vp-icon{width:56px;height:56px}
  .foot .frow{gap:.5rem}
  .foot .frow button.primary span{max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  dialog.pv{width:100vw;height:100dvh;border-radius:0}
}
.qbar a{width:auto;height:auto;border-radius:3px;border:0;transform:none!important}
.qbar a.cur{background:var(--accent);border:0}
@media (max-width:960px){.top .acts button.hb.quiet{display:inline-flex}}
.foot .frow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.foot .frow>*{min-width:0;max-width:100%}
.foot .frow button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){.foot .frow button.primary span{max-width:none}.foot .frow button{padding:.45rem .6rem}}
.trow .s{min-width:0}.trow .s .loz{white-space:normal;max-width:100%}.trow .s small{display:block}
.qblock .detail{padding-top:.2rem}
button.danger{background:var(--block);border-color:var(--block);color:#1a0b0b}button.danger:hover{background:#ff8a8a;border-color:#ff8a8a}
.panel.law{font-family:var(--display);font-size:.92rem;color:var(--ink-2);padding:.8rem 1.1rem}
.panel.law b{color:var(--ink);font-weight:600}
/* owner, 12 October 2026: the yes/no question that opens a data tile's screen */
.gate{margin:0 0 1.2rem}
.gate .gate-q{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 .6rem;color:var(--ink)}

/* owner, 12 October 2026: the stage strip scrolls on its own on narrow screens: arrows at the edges over a 64 px fade */
.badgewrap{position:relative}
.badgewrap .bsc{position:absolute;top:50%;transform:translateY(-35%);z-index:3;display:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2)}
.badgewrap .bsc .ui-i{width:18px;height:18px}
.badgewrap .bsc.l{left:6px}.badgewrap .bsc.r{right:6px}
.badgewrap::before,.badgewrap::after{content:"";position:absolute;top:0;bottom:0;width:64px;pointer-events:none;z-index:2;opacity:0;transition:opacity .15s}
.badgewrap::before{left:0;background:linear-gradient(to right,var(--bg) 40%,transparent)}
.badgewrap::after{right:0;background:linear-gradient(to left,var(--bg) 40%,transparent)}
.badgewrap.can-l::before,.badgewrap.can-r::after{opacity:1}
.badgewrap.can-l .bsc.l,.badgewrap.can-r .bsc.r{display:inline-flex}
.badgewrap .badges{scroll-behavior:auto;overscroll-behavior-x:contain}
.bd .dot{width:8px;height:8px;border-radius:50%;background:var(--warn,#F5A742);flex:none}
.bd.todo{color:var(--ink-2)}
/* what needs attention, at the top of the side column */
.panel.attn{border-color:var(--accent)}
.panel.attn h4{color:var(--accent)}
.panel.attn p{margin:.2rem 0 .6rem;font-size:.9rem}
.panel.attn ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.9rem}
.panel.attn button.small{padding:.4rem .8rem;font-size:.85rem;display:inline-flex;gap:.4rem;align-items:center}
h2.ck-sec{font-family:var(--display);font-size:1rem;margin:1.4rem 0 .4rem;color:var(--ink-2)}

/* owner, 12 October 2026: the Review statement */
.stmt-box{border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;background:var(--paper);display:flex;flex-direction:column;gap:.7rem}
.stmt-box.ok{border-color:var(--ok)}
.stmt-st{display:flex;gap:.5rem;align-items:flex-start;margin:0;font-family:var(--display);font-size:.95rem}
.stmt-st .ui-i{flex:none;width:20px;height:20px;color:var(--accent)}.stmt-st.ok .ui-i{color:var(--ok)}
.stmt-list{margin:0;padding-left:1.2rem;font-size:.9rem;color:var(--ink-2)}
label.stmt{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;line-height:1.45;cursor:pointer;padding:.8rem;border-radius:10px;background:var(--bg)}
label.stmt input{width:20px;height:20px;margin-top:.15rem;flex:none;accent-color:var(--accent)}
.stmt-box button.big{align-self:flex-end;padding:.75rem 1.4rem;font-size:1rem}

/* owner, 12 October 2026: dialogs drawn within a screen (Customise, retention exceptions) */
.vp-modal-back{position:fixed;inset:0;z-index:60;background:rgba(20,21,24,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.vp-modal{background:var(--paper);border:1px solid var(--line);border-radius:14px;width:min(640px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.vp-modal.wide{width:min(900px,100%)}
.vp-modal-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem .6rem;border-bottom:1px solid var(--line)}
.vp-modal-h h2{margin:0;font-family:var(--display);font-size:1.15rem}
.vp-modal-h .x{font-size:1.4rem;line-height:1;padding:.2rem .6rem}
.vp-modal-b{padding:1rem 1.2rem;overflow:auto}
.vp-modal-f{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;padding:.8rem 1.2rem 1rem;border-top:1px solid var(--line)}
/* two-column option grid (rules, data groups) */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.opt{display:flex;gap:.7rem;align-items:flex-start;text-align:left;padding:.75rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink-2);cursor:pointer;font:inherit;width:100%}
.opt .vp-icon{width:30px;height:30px;flex:none}
.opt b{display:block;font-family:var(--display);font-size:.95rem;color:var(--ink)}
.opt small{display:block;font-size:.8rem;color:var(--ink-3);margin-top:.15rem;line-height:1.35}
.opt:hover{border-color:var(--ink-3)}
.opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--paper))}
.opt.prop{border-style:dashed;border-color:var(--accent)}
.opt .tag{display:inline-block;font:.7rem var(--display);color:var(--accent);margin-top:.3rem}
.opt.exc small.rule{color:var(--accent)}
.sugbox{margin-top:1rem;padding:.8rem 1rem;border:1px dashed var(--accent);border-radius:12px;font-size:.92rem}
.sugbox ul{margin:.4rem 0 .7rem;padding-left:1.2rem;color:var(--ink-2)}
.sugbox button.small{padding:.4rem .9rem;font-size:.85rem}

/* owner, 12 October 2026: lawful basis grid and details */
.confirmbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1rem;padding:.7rem 1rem;border:1px dashed var(--accent);border-radius:12px;font-family:var(--display);font-size:.92rem;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.bcard{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.bcard .vp-icon{width:30px;height:30px;flex:none}
.bcard .bt{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}
.bcard b{font-family:var(--display);font-size:.95rem;color:var(--ink)}
.bcard select{width:100%}
.bcard select.prop{border-style:dashed;border-color:var(--accent)}
.bcard small{font-size:.78rem;color:var(--ink-3)}
.bcard.prop{border-style:dashed;border-color:var(--accent)}
.bcard.on{border-color:var(--ok)}
.bcard.none{border-color:var(--line)}
.brow{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--line-2,var(--line))}
.brow:first-child{border-top:0}
.brow .bt{flex:1;min-width:0}.brow .bt b{display:block;font-family:var(--display);font-size:.92rem}.brow .bt small{display:block;color:var(--ink-3);font-size:.8rem}
.brow.prop .bt small{color:var(--accent)}
.pgroup h2.tgroup{display:flex;align-items:center;gap:.5rem}.pgroup h2.tgroup .vp-icon{width:26px;height:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* owner, 12 October 2026: the quick path (what the policy will say) */
.qlist{display:flex;flex-direction:column;gap:.5rem}
.qrow{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);flex-wrap:wrap}
.qrow .vp-icon{width:30px;height:30px;flex:none}
.qrow .bt{flex:1;min-width:12rem}
.qrow .bt b{display:block;font-family:var(--display);font-size:.95rem}
.qrow .bt small{display:block;font-size:.85rem;color:var(--ink-2);margin-top:.15rem;line-height:1.4}
.qrow .bt small .sg{color:var(--accent)}
.qrow .bt small .ms{color:var(--bad,#FF6B6B)}
.qrow.prop{border-style:dashed;border-color:var(--accent)}
.qrow.missing{border-color:var(--bad,#FF6B6B)}
.qrow.gate{border-color:var(--accent)}
.qrow .gate-q{font-family:var(--display);color:var(--ink);font-size:.92rem}
.qrow .warns{margin-top:.5rem}
.prow.bblock{min-width:0;max-width:100%}.prow.bblock .head{flex-wrap:wrap}.brow .bt{min-width:10rem}

/* owner, 12 October 2026: the bottom bar fills solidly through the stage: passed screens dimmer, the current one brightest,
 * screens ahead empty (outline only) */
.qbar a.todo{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.qbar a.done{background:color-mix(in srgb,var(--accent) 55%,var(--paper))}
.qbar a.cur{background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)}
.qbar a.todo:hover,.qbar a.done:hover{background:color-mix(in srgb,var(--accent) 35%,var(--paper))}

/* owner, 12 October 2026: data groups, renamed in place; one table of which kind of data is in which group */
.h-edit{display:inline-flex;align-items:center;gap:.4rem;padding:.1rem .3rem;margin:-.1rem -.3rem;border:0;background:none;color:inherit;font:inherit;cursor:text;border-radius:6px}
.h-edit .ui-i{width:15px;height:15px;opacity:.45}
.h-edit:hover{background:var(--paper-2)}.h-edit:hover .ui-i{opacity:1}
.rename{display:inline-flex;align-items:center;gap:.4rem}
.rename input{font:inherit;font-family:var(--display);font-weight:600;padding:.25rem .5rem;min-width:14rem}
.rename button.icon{padding:.35rem;line-height:0}.rename button.icon .ui-i{width:16px;height:16px}
.assign{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.arow{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;border-top:1px solid var(--line);flex-wrap:wrap}
.arow:first-child{border-top:0}
.arow .vp-icon{width:24px;height:24px;flex:none}
.arow .an{flex:0 0 13rem;font-family:var(--display);font-size:.92rem}
.arow .choices{flex:1;min-width:0}
.arow .chip.on.none{background:var(--paper-2);color:var(--ink-3);border-color:var(--line);font-weight:400}
.arow .chip.on.none::before{content:none}
@media (max-width:640px){.arow .an{flex-basis:100%}}

/* owner, 12 October 2026: the stage bar is centred, with spacing that grows with the width (never fully justified); on a
 * narrow screen the auto margins collapse and the strip scrolls */
.badgewrap .badges{gap:clamp(.2rem,1.6vw - .9rem,1.6rem)}
.badgewrap .badges .bd:first-child{margin-left:auto}
.badgewrap .badges .bd:last-child{margin-right:auto}
/* the cookie list question: what listing gives you (not choices) */
.gets-h{margin:.2rem 0 .4rem;font-family:var(--display);font-size:.9rem;color:var(--ink-2)}
ul.gets{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
ul.gets li{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;color:var(--ink-2)}
ul.gets li .ui-i{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--ok)}
ul.gets b{color:var(--ink);font-family:var(--display);font-weight:600}
a.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:10px;text-decoration:none;font-family:var(--display);font-weight:600}
a.btn.primary{background:var(--accent);color:var(--accent-ink)}
a.btn .ui-i{width:16px;height:16px}

/* owner, 12 October 2026: tips and questions shown outside a .warns list keep their space */
.warn{margin:0 0 1rem}
.warns .warn,.qrow .warns .warn{margin:0}
.panel.attn .attn-sub{margin:.8rem 0 .2rem;font-family:var(--display);font-size:.8rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.panel.attn ul.behind{list-style:none;padding:0}
.panel.attn ul.behind>li{margin:.35rem 0}
.panel.attn ul.behind>li>b{font-family:var(--display);font-size:.88rem}
.panel.attn ul.behind ul{margin:.15rem 0 0;padding-left:1.1rem;font-size:.86rem}

/* ---- owner, 12 October 2026: Settings ---- */
/* text size (rem-based; body text 17 px at Normal) */
html[data-text="small"]{font-size:93.75%}html[data-text="normal"]{font-size:100%}html[data-text="large"]{font-size:112.5%}html[data-text="xlarge"]{font-size:125%}
/* reduce movement */
html[data-motion="reduce"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
/* explain legal terms: off */
body.no-terms .term{text-decoration:none;cursor:auto}body.no-terms .term .tip{display:none!important}
/* light theme (the dark Ledger tokens stay the default) */
html[data-theme="light"]{
  --bg:#F4F3EF; --paper:#FFFFFF; --paper-2:#ECEBE6; --ink:#1D1F23; --ink-2:#3F434B; --ink-3:#6B7079; --line:#D6D4CD; --line-2:#E4E2DC;
  --accent:#E8912A; --accent-2:#9A4F07; --accent-ink:#1E1707; --accent-soft:#FBE7CC;
  --badge:#2B2D31; --badge-fg:#FFFFFF; --sel:#FFF1DA; --sel-line:#D9A24A;
  --block:#C62828; --ask:#A85F00; --note:#4652C8; --ok:#1E8A4C;
  --shadow:0 1px 2px rgba(0,0,0,.08),0 12px 32px -14px rgba(0,0,0,.25);
  color-scheme:light;
}
html[data-theme="light"] .fig svg{filter:invert(.92) hue-rotate(180deg)}
html[data-theme="light"] dialog::backdrop,html[data-theme="light"] .vp-modal-back{background:rgba(240,239,235,.55)}
/* the save button keeps one width in both states */
.savebtn{min-width:11.2rem;justify-content:center}
.savebtn i,.setbtn i{display:inline-flex;line-height:0}
.savebtn.done{opacity:1;color:var(--ink-3);border-color:var(--line);background:transparent;cursor:default}
.savebtn.done .ui-i{color:var(--ok)}
@media (max-width:720px){.savebtn{min-width:0}}
/* the dialog */
dialog.settings{width:min(620px,94vw);max-width:none;padding:0;max-height:min(86vh,900px);overflow:auto}
dialog.settings::backdrop{background:rgba(15,16,18,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.st-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem .7rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:1}
.st-head h2{display:flex;align-items:center;gap:.5rem;font-size:1.2rem}.st-head h2 .ui-i{width:20px;height:20px}
.st-head button.icon{padding:.35rem;line-height:0}
.st-body{padding:.6rem 1.2rem 1.2rem}
.st-body section{padding:.6rem 0}
.st-body h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
.srow{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.45rem 0}
.srow>span:first-child{font-family:var(--display);font-size:.95rem}
.seg.set button{font-size:.82rem}
label.sw.set{margin:.5rem 0}
label.sw.set small{display:block;color:var(--ink-3);font-size:.8rem;margin-top:.15rem;line-height:1.35}
.snote{font-size:.88rem;color:var(--ink-2);margin:.4rem 0 0}
.st-body hr{border:0;border-top:1px solid var(--line);margin:.8rem 0}
.danger{display:flex;gap:.6rem;flex-wrap:wrap}
.dangerbtn{display:inline-flex;align-items:center;gap:.45rem;color:var(--block);border-color:color-mix(in srgb,var(--block) 55%,var(--line));background:transparent}
.dangerbtn:hover{background:color-mix(in srgb,var(--block) 12%,transparent);border-color:var(--block)}
.dangerbtn .ui-i{width:16px;height:16px}
button.danger-solid{background:var(--block);border-color:var(--block);color:#fff;font-weight:600}
button.danger-solid:hover{filter:brightness(1.08)}
dialog#dialog .row:not([hidden]){display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}