/* V8 (SU-12j) overrides on top of the v3/v4/v5 sheets. Sizes live in su12-tokens-v8.css. Evolved from flow-v7.css.
   .v8 .step h2:is(#text-title,#details-title,#images-title) is replaced at build time by an id-strong selector so these rules beat the v5 phone rules for #text-title. */
.v8 main{margin-top:var(--s7);padding-bottom:var(--s12)}
/* ---------- page head: a quiet eyebrow, the vertical space goes to step 1 ---------- */
.v8 .page-title{margin:0 0 var(--s7)}
.v8 h1#page-title{font-size:var(--text-eyebrow);font-weight:600;line-height:1.2;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-2);max-width:none;margin:0}
/* ---------- steps: active = one big bold line + rail; done = one bar with Edit; future = one faint line ---------- */
.v8 .step{position:relative;border:0;padding:0;margin:var(--s9) 0 0}
.v8 #text-zone{margin-top:0}
.v8 .step-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s8);align-items:start}
.v8 .step-marker,.v8 .step-check,.v8 .step-summary,.v8 .edit-btn,.v8 .step-counter{display:none}
.v8 .step h2:is(#text-title,#details-title,#images-title){grid-column:1;grid-row:1;margin:0;font-size:var(--text-step-active);font-weight:var(--weight-step-active);line-height:1.1;letter-spacing:var(--tracking-title);color:var(--ink);scroll-margin-top:var(--s9)}
.v8 .step h2:is(#text-title,#details-title,#images-title):focus{outline:0}
.v8 .step h2 .step-n{font-weight:var(--weight-step-n);color:var(--ink-2);letter-spacing:0}
.v8 .step h2 .step-dot{font-weight:var(--weight-step-n);color:var(--ink-2)}
.v8 .step-desc{grid-column:1;grid-row:2;margin:var(--s4) 0 0;max-width:46em;font-size:var(--text-step-desc);line-height:1.55;color:var(--ink-2)}
.v8 .step[data-depth=active] .step-marker{display:block;position:absolute;left:calc(-1 * var(--rail-offset));top:var(--s1);bottom:0;width:var(--rail-width);background:var(--accent)}
.v8 .step[data-depth=active]{scroll-margin-top:calc(var(--bar-height) + var(--s6))}
/* done: one bar */
.v8 .step[data-depth=done] .step-head{grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s4);min-height:var(--bar-height);padding:var(--s2) var(--s4) var(--s2) var(--s5);border:1px solid var(--rule-line)}
.v8 .step[data-depth=done] .step-check{display:block;grid-column:1;grid-row:1;position:relative;width:28px;height:28px;border-radius:50%;background:var(--accent);border:1.5px solid var(--ink)}
.v8 .step-check::after{content:'';position:absolute;left:9px;top:4px;width:6px;height:12px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.v8 .step[data-depth=done] h2:is(#text-title,#details-title,#images-title){grid-column:2;grid-row:1;font-size:var(--text-step-done);font-weight:600;line-height:1.2;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.v8 .step[data-depth=done] h2 .step-n,.v8 .step[data-depth=done] h2 .step-dot{font-weight:600;color:inherit}
.v8 .step[data-depth=done] .step-summary{display:flex;grid-column:3;grid-row:1;flex-wrap:wrap;align-items:center;gap:0 var(--s5);min-width:0;font-size:15px;line-height:1.4;color:var(--ink-2)}
.v8 .step-summary>span{overflow-wrap:anywhere}
.v8 .quiet-link{border:0;background:transparent;padding:0;min-height:var(--tick-hit);font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:var(--s1)}
.v8 .step[data-depth=done] .edit-btn{display:inline-flex;align-items:center;justify-content:center;grid-column:4;grid-row:1;min-height:var(--edit-height);min-width:96px;padding:0 var(--s6);border:1.5px solid var(--ink);background:var(--paper);font-size:17px;font-weight:600;color:var(--ink)}
.v8 .step[data-depth=done] .edit-btn:hover{background:var(--accent)}
.v8 .step[data-depth=done] .step-desc,.v8 .step[data-depth=back] .step-desc,.v8 .step[data-depth=done] .step-counter{display:none}
/* future: one faint line */
.v8 .step[data-depth=back]{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule-faint)}
.v8 .step[data-depth=back] .step-head{display:block}
.v8 .step[data-depth=back] h2:is(#text-title,#details-title,#images-title){font-size:var(--text-step-future);font-weight:500;line-height:1.2;letter-spacing:0;color:var(--future)}
.v8 .step[data-depth=back] h2 span{color:inherit;font-weight:inherit}
.v8 .step[data-depth=back] #images-info{display:none}
/* ---------- step 1: three alternatives, one under the other, full width ---------- */
.v8 #text-entry{margin-top:var(--s8)}
.v8 .option{display:flex;flex-direction:column;gap:var(--s3);min-width:0;transition:opacity var(--motion)}
.v8 .opt-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--tick-hit)}
.v8 .opt-label{font-size:var(--text-step-desc);font-weight:700;letter-spacing:0;line-height:1.3}
.v8 .or-divider{display:flex;align-items:center;gap:var(--s5);margin:var(--opt-gap) 0;color:var(--ink-2);font-size:15px;line-height:1}
.v8 .or-divider::before,.v8 .or-divider::after{content:'';flex:1;height:1px;background:var(--rule-faint)}
.v8 #text-entry[data-source=paste] :is(.option-docx,.option-link),.v8 #text-entry[data-source=docx] :is(.option-paste,.option-link),.v8 #text-entry[data-source=link] :is(.option-paste,.option-docx){opacity:.4}
.v8 #text-entry .option:hover,.v8 #text-entry .option:focus-within{opacity:1}
.v8 #press-text{display:block;width:100%;height:calc(var(--s6) * 2 + var(--paste-lines) * var(--paste-line) * var(--text-step-desc) + var(--s2));border:var(--rule) solid var(--rule-line);background:var(--paper);padding:var(--s6);font-size:var(--text-step-desc);line-height:var(--paste-line);resize:vertical;border-radius:0}
.v8 #press-text:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.v8 #press-text.reading{height:calc(var(--s9) * 2 + 15 * 1.7 * var(--text-step-desc));line-height:1.7;padding:var(--s7) max(var(--s9),calc((100% - 76ch) / 2));overflow:auto}
.v8 textarea::placeholder{color:var(--grey);opacity:1;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:var(--s2);text-underline-offset:var(--s1)}
.v8 .text-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s5)}
.v8 .text-meta:not(:has(:not([hidden]))){display:none}
.v8 .conditions{color:var(--ink-2);font-size:15px;margin:0}
.v8 #close-text{font-weight:var(--weight-strong);font-size:17px;padding:0 var(--s4);min-height:var(--tick-hit);margin-left:auto;border:1.5px solid var(--ink)}
.v8 .option .notice{margin:0;font-size:16px;color:var(--ink);font-weight:500;border-left:var(--s1) solid var(--accent);padding-left:var(--s4)}
.v8 .docx-drop{min-height:var(--drop-min);padding:var(--s5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:var(--rule) dashed var(--ink-2);background:var(--paper);cursor:pointer;transition:background var(--motion),border-color var(--motion)}
.v8 .docx-drop>div{display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.v8 .docx-drop:hover,.v8 .docx-drop.dragover{background:var(--accent);border-style:solid;border-color:var(--ink)}
.v8 .docx-drop .drop-title{font-size:var(--text-body);font-weight:var(--weight-label);line-height:1.3}
.v8 .docx-drop .drop-or{color:var(--ink);font-size:var(--text-hint)}
.v8 .docx-drop .quiet{min-width:var(--tick-hit);font-size:var(--text-hint);background:transparent;border:0;text-decoration:underline;text-underline-offset:var(--s1);padding:0 var(--s2);color:var(--ink);display:inline-flex;justify-content:center}
.v8 .docx-drop[data-state=loading]{cursor:progress;background:var(--wash);border-style:solid;border-color:var(--grey)}
.v8 #docx-loading{width:100%;display:flex;flex-direction:column;gap:var(--s3);align-items:center}
.v8 #docx-loading-name{font-weight:var(--weight-label);overflow-wrap:anywhere}
.v8 .progress{display:block;width:100%;max-width:calc(var(--paste) + var(--s9));height:var(--s2);background:var(--soft);overflow:hidden;position:relative}
.v8 .progress span{position:absolute;inset:0 auto 0 0;width:40%;background:var(--ink);animation:v8-read 1.1s ease-in-out infinite}
@keyframes v8-read{0%{left:-40%}100%{left:100%}}
.v8 #docs-url{width:100%;border:var(--rule) solid var(--rule-line);border-radius:0;background:var(--paper);padding:0 var(--s5);font-size:var(--text-step-desc);min-height:var(--s10)}
.v8 #docs-url:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.v8 #docs-url::placeholder{color:var(--hint-grey);opacity:1}
.v8 .link-note{color:var(--ink-2);font-size:15px;margin:0;line-height:1.5}
/* ---------- step 2: a single-column spec sheet (label | value | tick) ---------- */
.v8 #project-details{margin-top:var(--s8)}
.v8 .spec-group{margin-top:var(--s10)}
.v8 .spec-group:first-child{margin-top:0}
.v8 .spec-heading{margin:0;padding:0 0 var(--s3);border-bottom:2px solid var(--ink);font-size:var(--text-group);font-weight:700;line-height:1.2;letter-spacing:.16em}
.v8 dl.spec{margin:0}
.v8 .field{display:grid;grid-template-columns:var(--label-col) minmax(0,1fr);column-gap:var(--label-gap);border-top:1px solid var(--rule-faint)}
.v8 dl.spec>.field:first-child{border-top:0}
.v8 .field>dt{margin:0;padding:0}
.v8 .field>dt label{display:flex;flex-direction:row;align-items:center;gap:0;min-height:var(--row-min);font-size:var(--text-label);font-weight:500;line-height:1.35;color:var(--ink-2)}
.v8 .field[data-field=title]>dt label{min-height:var(--title-row-min)}
.v8 .field[data-confirmed=true]>dt label::after{content:'';flex:none;width:5px;height:10px;margin:-3px 0 0 10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.v8 .field>dd{margin:0;min-width:0}
.v8 .boxes{display:block}
.v8 .box{position:relative;min-width:0}
.v8 .boxes>.box+.box{border-top:1px solid var(--rule-faint)}
.v8 .edit-value{display:grid;grid-template-columns:minmax(0,1fr) auto var(--tick-col);align-items:center;gap:0 var(--s3);min-height:var(--row-min);min-width:0}
.v8 .field[data-field=title] .edit-value{min-height:var(--title-row-min)}
.v8 .edit-value input{grid-column:1;width:100%;min-width:0;min-height:var(--row-min);border:0;border-radius:0;background:transparent;padding:0;font-size:var(--text-value);font-weight:400;line-height:1.4;color:var(--ink);box-shadow:inset 0 -2px 0 transparent}
.v8 .edit-value input:hover{box-shadow:inset 0 -1px 0 var(--rule-line)}
.v8 .edit-value input:focus,.v8 .loc-parts input:focus,.v8 .type-free input:focus,.v8 .extra-row :is(input,select):focus,.v8 .tile-editor input:focus{outline:0;border-bottom-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.v8 .edit-value input::placeholder{color:var(--hint-grey);opacity:1}
.v8 .edit-value .value-content{grid-column:1;min-width:0}
.v8 button#project-title{display:block;width:100%;text-align:left;min-height:var(--title-row-min);padding:0;border:0;background:transparent;font-size:var(--text-project-v8);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.v8 button#project-title strong.ttl,.v8 button#project-title strong.sl,.v8 button#project-title strong.off{font-weight:600;color:var(--ink)}
.v8 .field[data-field=title] input#title{min-height:var(--title-row-min);font-size:var(--text-project-v8);font-weight:600}
/* tick: one column at the right edge. Pending = outline + faint "Confirm" (desktop); confirmed = filled yellow */
.v8 .edit-value button[data-confirm]{grid-column:3;justify-self:end;width:var(--tick-col);min-width:var(--tick-col);height:var(--tick-hit);min-height:var(--tick-hit);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);font-size:var(--text-small);color:var(--ink)}
.v8 .edit-value button[data-confirm]:disabled{background:transparent}
.v8 .edit-value button[data-confirm]:not(:disabled):not([aria-pressed=true])::before{content:'Confirm';font-size:var(--text-small);font-weight:500;color:var(--hint-grey)}
.v8 .edit-value button[data-confirm]:not(:disabled):not([aria-pressed=true]):hover::before{color:var(--ink)}
.v8 .tick{position:relative;display:block;flex:none;width:var(--tick-visual);height:var(--tick-visual);border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);transition:background var(--motion),border-color var(--motion)}
.v8 .tick::after{content:'';position:absolute;left:9px;top:4px;width:6px;height:12px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.3;transition:opacity var(--motion)}
.v8 button[data-confirm]:hover:not(:disabled) .tick{background:var(--accent)}
.v8 button[data-confirm]:hover:not(:disabled) .tick::after{opacity:1}
.v8 button[data-confirm][aria-pressed=true] .tick{background:var(--accent)}
.v8 button[data-confirm][aria-pressed=true] .tick::after{opacity:1}
.v8 button[data-confirm]:disabled .tick{border-color:var(--rule-line)}
.v8 button[data-confirm]:disabled .tick::after{opacity:0}
.v8 .edit-value button[data-confirm]:focus-visible{outline:var(--focus) solid var(--ink);outline-offset:calc(-1 * var(--s1))}
/* status tags: tiny, inline, inside the value row, after the value */
.v8 .mark{grid-column:2;display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--text-micro);font-weight:var(--weight-micro);line-height:1.3;letter-spacing:.02em;color:var(--ink-2);border:var(--rule) solid var(--rule-faint);padding:1px var(--s2);white-space:nowrap}
.v8 .mark[data-kind=linked]::before{content:'';display:inline-block;width:var(--s2);height:var(--s2);border-radius:50%;background:var(--accent);border:var(--rule) solid var(--ink);margin-right:var(--s1)}
.v8 .add-another{display:inline-flex;align-items:center;margin:0 0 var(--s1);border:0;background:transparent;padding:0;min-height:var(--tick-hit);text-decoration:underline;text-underline-offset:var(--s1);font-size:var(--text-small);font-weight:var(--weight-micro);color:var(--ink)}
.v8 .field-hint{font-size:var(--text-small);font-weight:var(--weight-micro);color:var(--ink-2);margin:0 0 var(--s3);line-height:1.45}
.v8 .suggest{list-style:none;margin:0;padding:0;position:absolute;left:0;right:var(--tick-col);top:100%;z-index:10;background:var(--paper);border:var(--rule) solid var(--ink);box-shadow:var(--drag-shadow)}
.v8 .suggest li{padding:var(--s3) var(--s4);min-height:var(--touch);display:flex;align-items:center;cursor:pointer;font-size:var(--text-value)}
.v8 .suggest li[aria-selected=true],.v8 .suggest li:hover{background:var(--accent)}
.v8 .suggest li[data-adjacent]{color:var(--ink-2)}
.v8 .suggest li[data-adjacent]::after{content:'related';margin-left:auto;padding-left:var(--s4);font-size:var(--text-small)}
.v8 .loc-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);padding:0 var(--tick-col) var(--s5) 0}
.v8 .loc-parts .part{display:flex;flex-direction:column;gap:var(--s1)}
.v8 .loc-parts label{display:block;font-size:13px;font-weight:500;line-height:1.4;color:var(--ink-2);margin:0}
.v8 .loc-parts input{width:100%;border:0;border-bottom:var(--rule) solid var(--rule-line);border-radius:0;background:transparent;padding:0;min-height:var(--tick-hit);font-size:var(--text-value)}
.v8 .loc-parts .suggest{right:0}
.v8 .area-pair{grid-column:1;display:flex;align-items:center;gap:var(--s3);min-width:0}
.v8 .area-pair .unit{flex:none;flex-direction:row;align-items:center;gap:var(--s2);font-weight:400;color:var(--ink-2);font-size:var(--text-value)}
.v8 .area-pair input{width:112px;flex:none;box-shadow:inset 0 -1px 0 var(--rule-line)}
.v8 .area-eq{color:var(--ink-2)}
.v8 .type-warning{font-size:var(--text-small);font-weight:var(--weight-micro);margin:0 0 var(--s2)}
/* custom checkbox: 44 px hit area, 20 px square */
.v8 .permission{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:var(--tick-hit);padding-left:var(--s7);cursor:pointer;font-weight:var(--weight-body)}
.v8 .permission input{position:absolute;left:0;top:0;width:var(--tick-hit);height:var(--tick-hit);min-height:var(--tick-hit);margin:0;opacity:0;cursor:pointer}
.v8 .permission>span{display:block;position:relative}
.v8 .permission>span::before{content:'';position:absolute;left:calc(-1 * var(--s7));top:50%;width:20px;height:20px;margin-top:-10px;border:1.5px solid var(--ink);background:var(--paper)}
.v8 .permission input:checked+span::before{background:var(--accent)}
.v8 .permission input:checked+span::after{content:'';position:absolute;left:calc(-1 * var(--s7) + 7px);top:50%;width:5px;height:10px;margin-top:-7px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.v8 .permission input:focus-visible+span::before{outline:var(--focus) solid var(--ink);outline-offset:var(--s1)}
.v8 .suggest-check{margin-top:0;font-size:var(--text-small);font-weight:var(--weight-micro)}
.v8 .type-free{margin:0 var(--tick-col) var(--s3) 0}
.v8 .type-free label{font-size:13px;font-weight:500;color:var(--ink-2)}
.v8 .type-free input{width:100%;border:0;border-bottom:var(--rule) solid var(--rule-line);border-radius:0;background:transparent;padding:0;min-height:var(--tick-hit);font-size:var(--text-value)}
.v8 .extra{margin-top:var(--s5)}
.v8 .extra summary{display:inline-flex;align-items:center;font-weight:500;font-size:var(--text-small);text-decoration:underline;text-underline-offset:var(--s1)}
.v8 .extra p{color:var(--ink-2);font-size:var(--text-small);margin-top:var(--s2)}
.v8 .extra-row{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:end;margin-top:var(--s3)}
.v8 .extra-row label{min-width:calc(var(--paste) + var(--s9));flex:1;font-size:13px;font-weight:500;color:var(--ink-2)}
.v8 .extra-row select,.v8 .extra-row input{display:block;width:100%;border:0;border-bottom:var(--rule) solid var(--rule-line);border-radius:0;background:transparent;min-height:var(--tick-hit);padding:0;font-size:var(--text-value);text-transform:none;letter-spacing:normal;font-weight:var(--weight-body)}
.v8 #extra-fields{margin:0}
.v8 .required-note{margin:var(--s8) 0 0;font-size:var(--text-small);color:var(--ink-2)}
.v8 .detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s7)}
.v8 .detail-actions .btn{min-height:var(--s10);min-width:calc(var(--paste) - var(--s9));font-size:var(--text-value);font-weight:var(--weight-strong)}
.v8 .detail-actions .btn:disabled{background:var(--paper);color:var(--ink-2);border-color:var(--rule-line)}
.v8 .detail-actions .notice{margin:0;font-size:var(--text-small)}
.v8 .btn{font-weight:var(--weight-label)}
/* ---------- sent ---------- */
.v8 .success{padding:var(--s8) 0 var(--s9)}
.v8 .success h1#sent-title{font-size:var(--text-sent);font-weight:700;line-height:1.05;letter-spacing:var(--tracking-title);max-width:none;margin:0}
.v8 .success .sent-lead{font-size:var(--text-sent-lead);line-height:1.6;max-width:36em;margin:var(--s7) 0 0}
.v8 .success .sent-lead #sent-project{font-weight:var(--weight-body)}
.v8 .success .receipt-line{display:flex;align-items:center;gap:var(--s6);margin-top:var(--s8);flex-wrap:wrap}
.v8 .success #status-link{display:inline-flex;align-items:center;min-height:var(--touch);font-size:var(--text-body);font-weight:var(--weight-label);text-underline-offset:var(--s1)}
.v8 .success .receipt-line .btn{min-height:var(--touch);margin:0;padding:0 var(--s6);font-size:var(--text-hint)}
.v8 .success .email-line{color:var(--ink-2);font-size:var(--text-small);margin:var(--s7) 0 0}
.v8 .success .demo-note{font-size:var(--text-small);margin:var(--s1) 0 0}
.v8 .success #another{min-height:var(--s10);padding:0 var(--s8);font-size:var(--text-value);margin-top:var(--s8)}
.v8 .success .reference{color:var(--ink-2);font-size:var(--text-micro);margin-top:var(--s9);font-family:var(--font-sans);letter-spacing:normal;text-transform:none}

/* ===== SU-12h images step ===== */
.v8 #image-content{margin-top:var(--s5)}
.v8 .gallery-instruction{color:var(--grey);max-width:40em;margin:0 0 var(--s6);font-size:var(--text-body);line-height:1.5}
/* Tile: cover = thick yellow border */
.v8 .gal .g .cover-link[aria-current=true]{outline:var(--cover-width) solid var(--cover-border);outline-offset:calc(-1 * var(--cover-width))}
.v8 .cover-label{top:auto;bottom:var(--s3);left:var(--s3);background:var(--cover-border);color:var(--ink);padding:0 var(--s3);z-index:2;font-weight:var(--weight-label);font-size:var(--text-hint);line-height:1.6}
/* Controls: soft dark gradient on hover/focus, small white icon buttons, text button at the bottom */
.v8 .image-box::before,.v8 .image-box::after{content:'';position:absolute;left:0;right:0;pointer-events:none;opacity:0;transition:opacity var(--motion);z-index:1}
.v8 .image-box::before{top:0;height:96px;background:linear-gradient(to bottom,var(--scrim) 0,var(--scrim) 52px,transparent)}
.v8 figure:not(.is-cover) .image-box::after{bottom:0;height:84px;background:linear-gradient(to top,var(--scrim) 0,var(--scrim) 52px,transparent)}
.v8 figure:hover .image-box::before,.v8 figure:focus-within .image-box::before,.v8 figure:hover .image-box::after,.v8 figure:focus-within .image-box::after{opacity:1}
.v8 .tile-controls{z-index:3}
.v8 .tile-controls button{border:0;background:radial-gradient(circle at center,rgba(255,255,255,.16) 0 calc(var(--icon-visual) / 2),transparent calc(var(--icon-visual) / 2 + 1px));color:var(--on-scrim);width:var(--icon-hit);min-width:var(--icon-hit);height:var(--icon-hit);min-height:var(--icon-hit);padding:0;font-size:var(--text-body);line-height:1;font-weight:400;display:grid;place-items:center;text-shadow:0 0 var(--s2) rgba(0,0,0,.35)}
.v8 .tile-controls button:hover:not(:disabled){background:radial-gradient(circle at center,rgba(255,255,255,.34) 0 calc(var(--icon-visual) / 2),transparent calc(var(--icon-visual) / 2 + 1px))}
.v8 .tile-controls button:disabled{color:rgba(255,255,255,.45);background:none}
.v8 .tile-controls button:focus-visible{outline:var(--focus) solid var(--on-scrim);outline-offset:calc(-1 * var(--s1))}
.v8 .tile-controls [data-image-action=grab]{top:var(--s1);left:var(--s1);transform:none;font-size:var(--text-lead)}
.v8 .tile-controls [data-image-action=delete]{top:var(--s1);right:var(--s1);font-size:var(--text-card)}
.v8 .tile-controls [data-image-action=right]{top:var(--s1);bottom:auto;right:calc(var(--s1) + var(--icon-hit))}
.v8 .tile-controls [data-image-action=left]{top:var(--s1);bottom:auto;left:auto;right:calc(var(--s1) + var(--icon-hit) * 2)}
.v8 .tile-controls [data-image-action=cover]{bottom:var(--s1);left:50%;transform:translateX(-50%);width:auto;padding:0 var(--s4);font-size:var(--text-hint);font-weight:var(--weight-label);text-decoration:underline;text-underline-offset:var(--s1);background:none;white-space:nowrap}
.v8 .tile-controls [data-image-action=cover]:hover:not(:disabled){background:none;text-decoration-thickness:var(--s1)}
/* Under each tile: two plain boxes, body-size text, placeholders only */
.v8 .tile-editor{display:grid;gap:var(--s2);margin-top:var(--s3);padding:0}
.v8 .tile-editor>input,.v8 .photo-choice>input{border:0;background:var(--wash);padding:var(--s2) var(--s3);font-size:var(--text-body);font-weight:var(--weight-value);min-height:var(--touch)}
.v8 .tile-editor input::placeholder{color:var(--grey)}
.v8 .photo-choice{display:grid;gap:var(--s2)}
.v8 .chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.v8 .chip{font-weight:var(--weight-label);position:relative;display:inline-flex;flex-direction:row;min-height:var(--icon-hit);cursor:pointer;margin:0}
.v8 .chip input{position:absolute;inset:0;width:100%;height:100%;min-height:var(--icon-hit);margin:0;opacity:0;cursor:pointer}
.v8 .chip span{display:inline-flex;align-items:center;min-height:var(--icon-hit);padding:0 var(--s4);background:var(--wash);color:var(--ink);font-size:var(--text-hint);font-weight:var(--weight-label);line-height:1.2;border:var(--rule) solid transparent;transition:background var(--motion),color var(--motion)}
.v8 .chip:hover span{border-color:var(--ink)}
.v8 .chip input:checked+span{background:var(--ink);color:var(--paper)}
.v8 .chip input:focus-visible+span{outline:var(--focus) solid var(--ink);outline-offset:var(--s1)}
/* Drop box: large Swiss cross, rotates 90 degrees on hover (DECISIONS #230), stays below the grid */
.v8 .image-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);width:100%;min-height:var(--drop-image-min);padding:var(--s7);border:var(--rule-section) dashed var(--grey);background:var(--wash);color:var(--ink);cursor:pointer;transition:background var(--motion),border-color var(--motion)}
.v8 .gal.has-images .image-drop{flex-direction:row;min-height:calc(var(--drop-min) / 2 + var(--s4));margin-top:var(--s7);gap:var(--s5);background:var(--paper)}
.v8 .gal.has-images .drop-cross{display:block}
.v8 .drop-cross{position:relative;display:block;width:var(--drop-cross);height:var(--drop-cross);flex:none;transition:transform var(--motion)}
.v8 .drop-cross::before,.v8 .drop-cross::after{content:'';position:absolute;top:50%;left:50%;background:var(--ink);transform:translate(-50%,-50%)}
.v8 .drop-cross::before{width:100%;height:var(--s1)}
.v8 .drop-cross::after{width:var(--s1);height:100%}
.v8 .gal.has-images .drop-cross{width:var(--s8);height:var(--s8)}
.v8 .drop-text{font-size:var(--text-card);line-height:1.25;letter-spacing:var(--tracking-tight)}
.v8 .drop-text strong{font-weight:var(--weight-label)}
.v8 .drop-sub{color:var(--grey);font-size:var(--text-hint)}
.v8 .image-drop:hover,.v8 .gal.files-over .image-drop{background:var(--accent);border-style:solid;border-color:var(--ink)}
.v8 .image-drop:hover .drop-cross,.v8 .gal.files-over .image-drop .drop-cross{transform:rotate(90deg)}
.v8 .gal.files-over .g{outline:var(--rule-section) dashed var(--ink);outline-offset:var(--s3);background:var(--wash)}
/* Refused files */
.v8 .refused{margin-top:var(--s6);border-left:var(--s1) solid var(--warning);padding:var(--s2) 0 var(--s2) var(--s5)}
.v8 .refused-title{font-weight:var(--weight-label);color:var(--ink)}
.v8 .refused ul{list-style:none;margin:var(--s2) 0 0;padding:0}
.v8 .refused li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);min-height:var(--touch)}
.v8 .refused-text{color:var(--warning);font-weight:var(--weight-label);overflow-wrap:anywhere;min-width:0}
.v8 .refused .quiet{border:0;background:transparent;text-decoration:underline;text-underline-offset:var(--s1);padding:0 var(--s2);min-width:var(--icon-hit);min-height:var(--icon-hit);font-size:var(--text-hint)}
.v8 .gallery-help{color:var(--grey);margin-top:var(--s3)}
@media(max-width:700px){
 .v8 .image-box::before{opacity:1;height:72px}
 .v8 figure:not(.is-cover) .image-box::after{opacity:1;height:64px}
 .v8 .image-drop{min-height:calc(var(--drop-image-min) - var(--s7));padding:var(--s5)}
 .v8 .gal.has-images .image-drop{padding:var(--s4);flex-direction:column;gap:var(--s2)}
 .v8 .gal.has-images .drop-cross{width:var(--s7);height:var(--s7)}
 .v8 .drop-text{font-size:var(--text-lead)}
}
@media(hover:none),(pointer:coarse){.v8 .image-box::before,.v8 figure:not(.is-cover) .image-box::after{opacity:1}}
@media(prefers-reduced-motion:reduce){.v8 .image-drop:hover .drop-cross,.v8 .gal.files-over .image-drop .drop-cross{transform:none}.v8 .drop-cross,.v8 .image-drop,.v8 .chip span,.v8 .image-box::before,.v8 .image-box::after{transition:none}}

.v8 .gallery-instruction .line{display:block}

/* ===== v7 images step overrides (SU-12i) ===== */
.v8 .zone-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);margin-bottom:0}
.v8 .zone-heading h2{font-size:var(--text-step);font-weight:var(--weight-heading)}
.v8 .step[data-depth=back] .zone-heading h2{font-size:var(--text-step-quiet);font-weight:var(--weight-step-quiet)}
.v8 .gallery-instruction{color:var(--grey);font-size:var(--text-small);margin:0 0 var(--s6)}
.v8 #image-content{margin-top:var(--s7)}
.v8 .tile-editor{gap:0;margin-top:var(--s2)}
.v8 .tile-editor>input,.v8 .photo-choice>input{border:0;border-bottom:var(--rule) solid var(--rule-line);border-radius:0;background:transparent;padding:var(--s2) 0;font-size:var(--text-hint);font-weight:var(--weight-value);min-height:var(--value-height)}
.v8 .tile-editor input::placeholder{color:var(--grey);opacity:1}
.v8 .photo-choice{gap:var(--s1)}
.v8 .chips{gap:var(--s1) var(--s2);margin-top:var(--s1)}
.v8 .chip span{background:var(--paper);color:var(--ink);font-size:var(--text-small);font-weight:var(--weight-body);padding:0 var(--s3);border:var(--rule) solid var(--rule-line)}
.v8 .chip:hover span{border-color:var(--ink)}
.v8 .chip input:checked+span{background:var(--accent);border-color:var(--ink);color:var(--ink);font-weight:var(--weight-strong)}
.v8 .image-drop{min-height:var(--drop-image-empty);background:var(--paper);border:var(--rule) dashed var(--rule-line);gap:var(--s4)}
.v8 .gal.has-images .image-drop{min-height:var(--drop-image-min);margin-top:var(--s8);flex-direction:column;gap:var(--s3);padding:var(--s7)}
.v8 .gal.has-images .drop-cross{width:var(--s8);height:var(--s8)}
.v8 .drop-text{font-size:var(--text-lead);letter-spacing:normal}
.v8 .drop-text strong{font-weight:var(--weight-strong)}
.v8 .drop-sub{font-size:var(--text-small)}
.v8 .image-drop:hover,.v8 .gal.files-over .image-drop{border-style:solid}
.v8 .completion{border-top:0;margin-top:var(--s10);padding-top:0}
.v8 .completion .send-row{display:flex;align-items:center;gap:var(--s6);margin-top:var(--s5)}
.v8 #send{min-height:var(--send-height);min-width:var(--send-width);padding:0 var(--s9);font-size:var(--text-lead);font-weight:var(--weight-strong)}
.v8 #send:disabled{background:var(--paper);color:var(--grey);border-color:var(--rule-line)}
.v8 .send-row .notice{margin:0;font-size:var(--text-hint);max-width:22em}
.v8 .disclaimer{font-size:var(--text-small);color:var(--grey);max-width:44em;margin-top:var(--s7);line-height:1.6}
@media(max-width:700px){
 .v8 .completion .send-row{flex-direction:column;align-items:stretch;gap:var(--s3)}
 .v8 #send{width:100%;min-width:0;min-height:var(--s11);padding:0 var(--s5)}
 .v8 .send-row .notice{max-width:none}
 .v8 .image-drop{min-height:var(--drop-image-empty);padding:var(--s6)}
 .v8 .gal.has-images .image-drop{min-height:var(--drop-image-min);padding:var(--s6);flex-direction:column;gap:var(--s2)}
 .v8 .gal.has-images .drop-cross{width:var(--s8);height:var(--s8)}
 .v8 .drop-text{font-size:var(--text-body)}
}

/* ===== v8 tail: step heads for the images step, reduced motion, phone ===== */
.v8 .step[data-depth=active] .step-head.zone-heading{display:grid;grid-template-columns:minmax(0,1fr) auto}
.v8 .zone-heading #images-info{grid-column:2;grid-row:2;align-self:start}
.v8 #image-content{margin-top:var(--s7)}
/* counter (step 2, top right of the step) */
.v8 .step[data-step=details][data-depth=active] .step-counter{display:block;grid-column:2;grid-row:1;align-self:center;min-width:220px;text-align:right}
.v8 #confirm-progress{margin:0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.v8 .progress-line{height:3px;margin-top:var(--s2);background:var(--rule-faint)}
.v8 .progress-line span{display:block;height:100%;width:0;background:var(--ink);transition:width var(--motion)}
@media(max-width:1050px){.v8 .step-head{column-gap:var(--s6)}}
@media(max-width:700px){
 .v8 main{margin-top:var(--s5)}
 .v8 .page-title{margin-bottom:var(--s6)}
 .v8 .step{margin-top:var(--s8)}
 .v8 #text-zone{margin-top:0}
 .v8 .step[data-depth=active] .step-marker{left:-16px;width:5px}
 .v8 .step h2:is(#text-title,#details-title,#images-title){font-size:var(--text-step-active-phone)}
 .v8 .step-head{grid-template-columns:minmax(0,1fr)}
 .v8 .step-desc{font-size:16px;margin-top:var(--s3)}
 .v8 .step[data-depth=done] .step-head{grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4)}
 .v8 .step[data-depth=done] h2:is(#text-title,#details-title,#images-title){grid-column:2;grid-row:1;font-size:18px;white-space:normal}
 .v8 .step[data-depth=done] .edit-btn{grid-column:3;grid-row:1;min-width:76px;padding:0 var(--s4);flex:none;white-space:nowrap}
 .v8 .step[data-depth=done] .step-summary{grid-column:1 / -1;grid-row:2;margin-top:var(--s2);font-size:14px}
 .v8 .step[data-depth=back] h2:is(#text-title,#details-title,#images-title){font-size:20px}
 .v8 .step[data-depth=active] .step-head.zone-heading{grid-template-columns:minmax(0,1fr) auto}
 .v8 .step[data-step=details][data-depth=active] .step-counter{display:block;grid-column:1;grid-row:3;text-align:left;margin-top:var(--s4);min-width:0}
 .v8 #text-entry{margin-top:var(--s6)}
 .v8 #press-text{height:300px;padding:var(--s4);font-size:16px}
 .v8 #press-text.reading{height:440px;padding:var(--s5) var(--s4)}
 .v8 .docx-drop{min-height:var(--drop-min)}
 .v8 .or-divider{margin:var(--s6) 0}
 .v8 .field{display:block}
 .v8 .field>dt label{min-height:0;padding:var(--s4) 0 0;font-size:var(--text-label)}
 .v8 .field[data-field=title]>dt label{min-height:0}
 .v8 .field[data-confirmed=true]>dt label::after{margin-top:2px}
 .v8 .edit-value{grid-template-columns:minmax(0,1fr) var(--tick-hit);min-height:var(--row-min)}
 .v8 .field[data-field=title] .edit-value{min-height:var(--row-min)}
 .v8 .edit-value input{grid-column:1;grid-row:1}
 .v8 .edit-value .value-content{grid-column:1;grid-row:1}
 .v8 .edit-value .area-pair{grid-column:1;grid-row:1}
 .v8 .edit-value button[data-confirm]{grid-column:2;grid-row:1 / span 2;width:var(--tick-hit);min-width:var(--tick-hit);justify-self:end;align-self:center}
 .v8 .edit-value button[data-confirm]::before{content:none!important}
 .v8 .mark{grid-column:1;grid-row:2;justify-self:start;margin:0 0 var(--s3)}
 .v8 button#project-title{font-size:22px;min-height:var(--row-min)}
 .v8 .field[data-field=title] input#title{min-height:var(--row-min);font-size:22px}
 .v8 .loc-parts{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding-right:0}
 .v8 .type-free{margin-right:0}
 .v8 .suggest{right:0}
 .v8 .area-pair{flex-wrap:wrap}
 .v8 .area-pair input{width:96px}
 .v8 .spec-group{margin-top:var(--s9)}
 .v8 .detail-actions .btn{width:100%}
 .v8 .success{padding:var(--s7) 0}
 .v8 .success h1#sent-title{font-size:var(--text-sent-phone)}
 .v8 .success .sent-lead{font-size:var(--text-body)}
 .v8 .success #another{width:100%}
 .v8 .success .receipt-line{gap:var(--s2);flex-wrap:nowrap}
 .v8 .success #status-link{font-size:var(--text-small);flex:1 1 auto;min-width:0}
 .v8 .success .receipt-line .btn{padding:0 var(--s4);flex:none}
}
@media(prefers-reduced-motion:reduce){.v8 .progress span{animation:none;width:100%}.v8 .docx-drop,.v8 .tick,.v8 .tick::after,.v8 .option,.v8 .progress-line span{transition:none}}

.v8 .edit-value button[data-confirm][aria-pressed=true],.v8 .edit-value button[data-confirm][aria-pressed=true]:hover{background:transparent}