/* ============================== FULL-SCREEN VIEWS ============================== */
  .fullview{position:fixed; inset:0; background:var(--bg); z-index:150; display:none; flex-direction:column;}
  .fullview.show{display:flex;}
  .fullview-bar{display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--surface-default); border-bottom:1px solid var(--border); flex-shrink:0;}
  #homeView .fullview-bar{padding:13px 26px;}
  .fullview-title{font-weight:700; font-size:14px;}
  .breadcrumb-title{font-size:13px; color:var(--text-secondary);}
  .breadcrumb-title b{color:var(--text-primary); font-weight:600;}
  .fullview-body{flex:1; overflow-y:auto;}

  /* Survey Editor view — title/description controls + compiled "as respondents see it" preview */
  .editor-body{display:flex; gap:24px; padding:24px; align-items:flex-start; justify-content:center;}
  .editor-controls{width:280px; flex:none; display:flex; flex-direction:column; gap:6px; position:sticky; top:0;}
  .editor-field-label{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:12px;}
  .editor-title-controls{display:flex; gap:8px; align-items:center;}
  .icon-toggle{width:30px; padding:6px 0; text-align:center;}
  .icon-toggle.active{border-color:var(--accent); color:var(--accent); background:var(--panel3);}
  .editor-doc{width:640px; max-width:90vw; flex:none; background:var(--surface-default); color:var(--text-primary); border-radius:var(--r-card); padding:36px 40px; border:1px solid var(--border-strong); margin-bottom:40px;}
  .survey-doc-title{font-weight:700; font-size:28px; line-height:1.2; margin-bottom:8px; word-break:break-word;} /* spec §7 default 28/700; the author's Title style (size, bold) still applies inline */
  .survey-doc-desc{font-size:14px; color:var(--text-secondary); margin-bottom:20px; white-space:pre-wrap;}
  .survey-doc-branch-note{background:var(--warning-bg); border:1px solid var(--warning-line); color:var(--warning-fg); font-size:12px; padding:8px 12px; border-radius:var(--r-control); margin-bottom:16px;}
  .survey-doc-page{border-top:1px solid var(--border-default); padding-top:18px; margin-top:18px;}
  .survey-doc-page:first-child{border-top:none; margin-top:0; padding-top:0;}
  .survey-doc-page-hd{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px;}
  .survey-doc-q{margin-bottom:22px;}
  .survey-doc-qlabel{font-size:15px; font-weight:600; margin-bottom:8px;}

  /* ---- A4: comments margin column (spec §4) — a RIGHT MARGIN column, never inline in
     the respondent-facing document card, never an end-of-document list. ---- */
  .editor-body.with-comments{padding:24px 16px;}
  .editor-body.with-comments .editor-controls{width:240px;}
  .editor-notes{width:240px; flex:none; position:relative; margin-left:16px;}
  @media (max-width:1240px){
    .editor-body.with-comments{flex-wrap:wrap;}
    .editor-notes{width:640px; max-width:90vw; margin:0 auto 40px;}
    .editor-notes .editor-note{position:static !important; margin-bottom:10px; width:100%;}
  }
  .doc-cmt-anchor{display:inline-flex; align-items:center; gap:3px; margin-left:8px; vertical-align:middle; height:18px; padding:0 6px; border-radius:var(--r-chip);
    background:var(--brand-50); border:1px solid var(--brand-200); color:var(--brand-700); font-size:11px; font-weight:700; opacity:0; transition:opacity var(--dur-2) var(--ease-step); cursor:pointer;}
  .doc-cmt-anchor .nf-i{width:11px; height:11px;}
  .survey-doc-q:hover .doc-cmt-anchor, .survey-doc-page-hd:hover .doc-cmt-anchor{opacity:1;}
  .doc-cmt-anchor.has{opacity:1;}
  .editor-note{position:absolute; left:0; width:240px; background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); padding:12px; transition:border-color var(--dur-1) var(--ease-step);}
  .editor-note.linked{border-color:var(--brand-300);}
  .editor-note-kind{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; margin-bottom:2px;}
  .editor-note-summary{font-size:12px; font-weight:600; color:var(--text-primary); margin-bottom:8px; line-height:1.35;}
  .editor-note-foot{margin-top:6px; padding-top:8px; border-top:1px solid var(--border-default); font-size:11.5px;}
  .editor-note-foot .cmt-link-btn{color:var(--brand-700);}
  .editor-note.editor-note-other{position:static; margin-bottom:12px;}
  .editor-notes-other-hd{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:24px 0 8px;}
  @media (max-width:1240px){ .editor-notes-other-hd{margin-top:0 !important;} }
  .survey-doc-widget .opt{padding:6px 0; font-size:13.5px; display:flex; align-items:center; gap:8px; color:var(--text-primary);}
  .survey-doc-widget .resp-img-tile{background:var(--surface-subtle); border-color:var(--border-default); cursor:default;}
  .survey-doc-widget .rank-item{background:var(--surface-subtle); border-color:var(--border-default); cursor:default; color:var(--text-primary);}
  .survey-doc-widget .rank-item .num{background:var(--text-secondary);}
  .survey-doc-end{font-style:italic; color:var(--text-secondary);}
  .survey-doc-dead{color:var(--error-fg);}
  /* Edit Survey document widgets (were inline styles in edit-survey.js) — tokens only. */
  .doc-static{pointer-events:none;}
  .doc-req{color:var(--error-fg);}
  .doc-accept-box{background:var(--surface-subtle); border:1px solid var(--border-default); border-radius:var(--r-control); padding:10px 12px; font-size:12px; max-height:120px; overflow-y:auto; white-space:pre-wrap;}
  .doc-accept-line{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); margin-top:8px;}
  .doc-note{font-size:12px; color:var(--text-secondary);}
  .doc-list-badge{font-size:11.5px; color:var(--text-muted); margin-bottom:4px;}
  .doc-stars{display:flex; gap:6px; pointer-events:none; color:var(--border-control);}
  .doc-nps{display:flex; gap:4px; pointer-events:none;}
  .doc-nps-cell{flex:1; height:30px; border:1px solid var(--border-control); border-radius:var(--r-control); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-secondary);}
  .doc-nps-labels{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-muted); margin-top:6px;}
  .doc-img-label{font-size:11.5px; text-align:center;}
  .doc-elab{margin-top:10px; font-size:12px; color:var(--text-muted);}
  .doc-variant-note{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
  .doc-variant-chip{background:var(--repeat-bg); color:var(--repeat-fg); border-radius:var(--r-stamp); padding:1px 5px;}
  .preview-field.doc-row{display:flex; align-items:center; gap:8px;}
  .preview-field.doc-row.between{justify-content:space-between;}
  .survey-doc-endmsg{font-size:14px;}

  /* Click-to-edit text directly in the compiled document — title, description, question
     labels, option labels, row/column labels, elaboration prompts, end-screen message.
     No structural controls (type, required, add/remove) are ever editable here. */
  .doc-edit{outline:none; border-radius:var(--r-control); cursor:text; transition:background-color var(--dur-1) var(--ease-step);}
  .doc-edit:hover{background:var(--surface-sunken);}
  .doc-edit:focus{background:var(--brand-50); outline:2px solid var(--brand-600); outline-offset:2px;}
  .survey-doc-desc.doc-edit:empty:before{content:attr(data-placeholder); color:var(--text-muted);}

  /* Resizable, pannable pictures inside the compiled document (Editor view only — the
     canvas card, Quick logic test, and Respondent view keep their own fixed sizing). */
  .doc-img-wrap{position:relative; margin-bottom:10px; border-radius:var(--r-control); overflow:hidden; border:1px solid var(--border-default); max-width:100%; min-width:60px;}
  .doc-img{width:100%; height:100%; object-fit:cover; display:block; cursor:move; user-select:none;}
  .doc-img-resize{position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:var(--r-chip); background:var(--surface-default); border:1.5px solid var(--border-control); cursor:nwse-resize;}

  /* Branding — colored header/footer bands on the (always-white) survey
     document, with the company logo in the footer. */
  .doc-brand-header{margin:-36px -40px 26px; padding:22px 40px; border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; min-height:14px;}
  .doc-brand-footer{margin:28px -40px -36px; padding:16px 40px; border-radius:0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); display:flex; align-items:center; justify-content:center; gap:10px; min-height:14px;}
  .doc-brand-footer img{max-height:36px; max-width:180px; object-fit:contain; display:block;}
  .doc-brand-footer .brand-powered{font-size:11.5px; opacity:.75;}
  .brand-color-row{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:11.5px; color:var(--muted);}
  .brand-color-row input[type=color]{width:34px; height:26px; padding:1px; border:1px solid var(--border-control); border-radius:var(--r-control); background:var(--panel3); cursor:pointer;}
  .brand-logo-thumb{background:var(--surface-default); border-radius:var(--r-control); padding:4px 8px; display:inline-block; margin-top:6px;}
  .brand-logo-thumb img{max-height:28px; max-width:140px; display:block;}
  /* Branded respondent page: white body (the requirement), colored bands top & bottom */
  /* Branded page (spec §7): every literal grey is a token now — the white body and the ink
     hairline controls are the same as an unbranded page; only the customer bands differ. */
  .resp-page.branded{background:var(--surface-default); color:var(--text-primary); border-color:var(--border-strong); padding-top:0; padding-bottom:0; overflow:hidden;}
  .resp-page.branded .resp-brand-header{margin:0 -30px 22px; padding:18px 30px;}
  .resp-page.branded .resp-brand-footer{margin:26px -30px 0; padding:14px 30px; display:flex; align-items:center; justify-content:center; gap:10px;}
  .resp-page.branded .resp-brand-footer img{max-height:32px; max-width:160px; object-fit:contain;}
  .resp-page.branded .resp-survey-hd{border-bottom-color:var(--border-default);}
  .resp-page.branded .resp-qlabel{color:var(--text-primary);}
  .resp-page.branded .resp-widget .opt{border-color:var(--border-control); color:var(--text-primary);}
  .resp-page.branded .resp-input{background:var(--surface-default); border-color:var(--border-control); color:var(--text-primary);}
  .resp-page.branded .rank-item{background:var(--surface-default); border-color:var(--border-control); color:var(--text-primary);}
  .resp-page.branded .resp-img-tile{background:var(--surface-subtle); border-color:var(--border-control);}
  .resp-page.branded .img-choice-empty{border-color:var(--border-control); color:var(--text-secondary);}
  .resp-page.branded .mini-matrix th{color:var(--text-secondary);}
  .resp-page.branded .resp-doc-box{background:var(--surface-subtle); border-color:var(--border-default); color:var(--text-primary);}
  .resp-page.branded .resp-elab label{color:var(--text-secondary);}
  .resp-page.branded .chart-note{color:var(--text-muted);}
  .resp-page.branded button.ghost{color:var(--text-primary); border-color:var(--border-control); background:var(--surface-default);}
  .resp-page.branded button.ghost:hover{border-color:var(--text-secondary); color:var(--text-primary);}
  /* .resp-input already covers .resp-select/.resp-date (they carry that class too) — only
     the star/NPS widgets (not .resp-input) need explicit branded overrides. Selected
     states stay brand-600 regardless of branding, per spec — declared after the
     unselected overrides above so they win the cascade. */
  .resp-page.branded .resp-nps .nps-cell{border-color:var(--border-control); background:var(--surface-default);}
  .resp-page.branded .resp-stars .star-btn{color:var(--border-control);}
  .resp-page.branded .resp-stars .star-btn.hovered{color:var(--brand-300);}
  .resp-page.branded .resp-nps .nps-cell.selected{background:var(--brand-50); border-color:var(--brand-600); color:var(--text-primary);}
  .resp-page.branded .resp-stars .star-btn.selected{color:var(--brand-600);}
  /* Branch picker between pages in the compiled document, for previewing any path */
  .survey-doc-branchpick{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--brand-50); border:1px solid var(--brand-200); color:var(--brand-800); font-size:12px; padding:8px 12px; border-radius:var(--r-control); margin:14px 0;}
  .survey-doc-branchpick select{font-size:12px; height:28px; padding:3px 6px; border-radius:var(--r-control); border:1px solid var(--border-control); background:var(--surface-default);}

  /* A6 — visually-hidden-but-announced utility: the ONE canonical .sr-only in the app.
     clip-path (not just clip:rect, kept for older engines) fully hides the element AND
     its own outline/focus ring, which is why the image-choice radio and the "Required"
     text next to the visible red * never need separate ring-suppression rules. */
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

  /* Respondent preview view — the real, paginated, interactive survey */
  .resp-page{width:640px; max-width:92vw; margin:24px auto 60px; background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); padding:28px 30px;}
  .resp-survey-hd{margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border);}
  .resp-q{margin-bottom:22px;}
  .resp-qlabel{font-size:15px; font-weight:600; margin-bottom:10px;}
  h2.resp-qlabel, h1.resp-qlabel{margin-top:0;} /* A6 — now real headings; strip the UA default margin so nothing shifts visually */
  .req-star{color:var(--danger);}
  .resp-widget .opt{display:flex; align-items:center; gap:9px; min-height:44px; padding:9px 12px; border:1px solid var(--border-control); border-radius:var(--r-control); margin-bottom:7px; cursor:pointer; font-size:13.5px;}
  .resp-widget .opt:hover{border-color:var(--brand-600);}
  /* Selected (spec §7) — brand-600 border, --brand-50 fill, ink text. */
  .resp-widget .opt:has(input:checked){border-color:var(--brand-600); background:var(--brand-50); color:var(--text-primary);}
  .resp-optgroup{display:block;}
  .resp-optgroup.resp-invalid, .resp-stars.resp-invalid, .resp-nps.resp-invalid, .mini-matrix-wrap.resp-invalid{border:1px solid var(--error-fg); border-radius:var(--r-card); padding:8px;}
  .resp-input.resp-invalid, select.resp-invalid{border-color:var(--error-fg);}
  .resp-hint{font-size:12px; color:var(--text-muted); margin:-4px 0 10px;}
  /* .resp-doc-box's base style already lives in 12-community.css (shared with the
     onboarding acceptance preview) and cascades here unchanged — A6 only adds
     tabindex="0"+role="group" in the markup so it's keyboard-scrollable; it already had
     overflow-y:auto. */
  .resp-doc-box:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
  .resp-input{width:100%; padding:9px; border-radius:var(--r-control); border:1px solid var(--border-control); background:var(--surface-default); color:var(--text); font:inherit;}
  .resp-input:focus{outline:2px solid var(--brand-600); outline-offset:1px; border-color:var(--brand-600);}
  .resp-textarea{min-height:70px; resize:vertical;}
  .resp-elab{margin-top:12px;}
  .resp-elab label{font-size:12px; color:var(--text-secondary); display:block; margin-bottom:5px;}
  .resp-end{text-align:center;}
  .resp-page .actions{display:flex; gap:8px; margin-top:6px;}
  .resp-page .actions button{flex:1;}
  /* The submit-failed strip's "Try again" / "Copy my answers" pair wraps to two lines at
     narrow widths — a wrapping artefact on the highest-stakes screen a respondent sees.
     Stack instead, primary on top (already first in DOM order everywhere .actions is used). */
  @media (max-width:430px){
    .resp-page .actions{flex-direction:column;}
    .resp-page .actions button{width:100%;}
  }

  /* A6 — inline error tied to a field, and the focused summary above the page's first
     question. Error text is --error-fg ON WHITE (never on --error-bg, which fails
     contrast) per the audit's contrast finding. */
  .resp-err{display:flex; align-items:flex-start; gap:6px; font-size:13px; color:var(--error-fg); margin-top:6px;}
  .resp-err .nf-i{flex:none; margin-top:1px;}
  .resp-err-summary{background:var(--surface-default); border:1px solid var(--error-fg); border-radius:var(--r-card); padding:14px 16px; margin-bottom:20px;}
  .resp-err-summary:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
  .resp-err-summary-hd{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:8px;}
  .resp-err-summary-hd .nf-i{color:var(--error-fg); flex:none;}
  .resp-err-summary ul{margin:0; padding-left:20px;}
  .resp-err-summary li{margin-bottom:4px;}
  .resp-err-summary .link-btn{font-size:13.5px; color:var(--error-fg); text-decoration:underline;}

  /* File upload (spec file-upload §2). One box; its body swaps between empty, uploading and
     attached. The real control is a native file input inside the "Choose a file" label,
     which carries the focus ring (added to the single focus rule below). */
  .resp-file{background:var(--surface-default); border:1px solid var(--border-control); border-radius:var(--r-control); min-height:96px; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; transition:border-color var(--dur-1) var(--ease-step);}
  .resp-file.resp-invalid{border-color:var(--error-fg);}
  .rf-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:-16px; padding:16px; min-height:94px; border-radius:calc(var(--r-control) - 1px); transition:background-color var(--dur-1) var(--ease-step);}
  /* the whole box takes a drop, in every state (Guardian review fix 1) */
  .resp-file.is-over{border-color:var(--brand-600);}
  .resp-file.is-over .rf-drop{background:var(--brand-50);}
  .rf-choose{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid var(--border-control); border-radius:var(--r-control); background:var(--surface-default); color:var(--text-primary); font-size:15px; font-weight:600; cursor:pointer;}
  .rf-choose:hover{border-color:var(--text-secondary); background:var(--surface-sunken);}
  .rf-drag{display:none; font-size:14px; color:var(--text-secondary);}
  @media (hover:hover) and (pointer:fine){ .rf-drag{display:block;} }
  .rf-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0;}
  .rf-ico{color:var(--text-secondary); display:flex; flex:none;}
  .rf-name{flex:1 1 0; min-width:0; font-size:15px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .rf-size, .rf-status{font-size:13px; color:var(--text-secondary); white-space:nowrap; font-variant-numeric:tabular-nums;}
  .rf-ok{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--success-fg); white-space:nowrap;}
  .rf-actions{display:flex; gap:8px; flex:none;}
  .resp-page .rf-btn{min-height:44px; padding:0 14px; font-size:14px;}
  .rf-bar{height:4px; background:var(--surface-sunken); border-radius:2px; overflow:hidden;}
  .rf-bar > span{display:block; height:100%; background:var(--brand-600); border-radius:2px; transition:width var(--dur-1) linear;}
  .rf-row > .rf-bar{flex-basis:100%; order:5;} /* the bar sits under its own text */
  .rf-disclosure{margin:8px 0 0;}
  .rf-unavailable{margin:0; font-size:14px; color:var(--text-secondary);}
  @media (max-width:600px){
    .rf-choose{width:100%;}
    .rf-actions{flex-basis:100%;}
    .rf-actions .rf-btn{flex:1;}
    .rf-row .rf-actions{order:6;} /* name and progress, bar, then Cancel */
  }

  /* ---- A9 conductor mode: shared dashed "meta-not-content" note style, used
     identically in the player and in analytics (spec §0) — never warning-bg/logic-violet. ---- */
  .note-dashed{background:var(--surface-subtle); border:1px dashed var(--border-strong); border-radius:var(--r-control); padding:10px 14px;}
  .note-eyebrow{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);}
  .note-body{font-size:12.5px; color:var(--text-secondary); margin-top:4px;}
  .note-textarea{display:block; width:100%; background:transparent; border:none; outline:none; resize:vertical;
    font:inherit; font-size:12.5px; color:var(--text-secondary); min-height:54px; padding:0; margin-top:4px;}
  .resp-qlabel-conduct{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .note-toggle-btn{width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center;
    border:none; background:transparent; color:var(--text-muted); border-radius:var(--r-control); cursor:pointer; padding:0;}
  .note-toggle-btn:hover{color:var(--brand-600); background:var(--brand-50);}
  .note-toggle-btn.has-note{color:var(--brand-600);}
  .link-btn{background:none; border:none; color:var(--brand-600); font-size:12px; cursor:pointer; padding:0;}
  .link-btn:hover{text-decoration:underline;}
  /* Conduct bar: brand-800, unmistakable vs the white preview bar — same geometry as .fullview-bar. */
  /* Conduct bar (Drawing Set §4) — brand-700, distinct from the navy shell. */
  .conduct-bar{background:var(--brand-700); border-bottom-color:var(--brand-800);}
  .conduct-bar .fullview-title{color:var(--text-on-accent); font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;}
  .conduct-chip{background:var(--brand-800); color:var(--text-on-accent); border-radius:var(--r-chip); padding:3px 12px; font-size:12px; font-weight:600; white-space:nowrap;}
  .conduct-meta{font-size:12px; color:var(--conduct-meta); white-space:nowrap;}
  .conduct-elapsed{font-variant-numeric:tabular-nums;}
  .conduct-ghost-btn{background:transparent; border:1px solid var(--text-on-accent); color:var(--text-on-accent); border-radius:var(--r-control); padding:7px 15px; font-size:13px; line-height:18px; font-weight:500; cursor:pointer; white-space:nowrap;
    transition:background-color var(--dur-1) var(--ease-step);}
  .conduct-ghost-btn:hover{background:var(--brand-800); border-color:var(--text-on-accent); color:var(--text-on-accent);}
  .conduct-ghost-btn:focus-visible{outline:2px solid var(--text-on-accent); outline-offset:2px;}
  .conduct-field-label{font-size:12px; color:var(--text-muted); margin-top:18px; display:block; margin-bottom:5px;}

  /* A6 §A6.2 fix 5 — THE single focus-visible rule for the whole player (replaces the old
     four-selector rule that only covered star/NPS/select/date and left everything else
     falling back to the black UA ring — two focus languages on one page). Lands on the
     interactive element itself for plain controls, and on the CARD (.opt/.resp-img-tile/
     .matrix-cell/.rank-item) for anything whose real input is visually small or hidden,
     via :has() — so the ring is always exactly where the eye already is. */
  .resp-page :is(a,button,input,select,textarea,[tabindex]):focus-visible,
  .pr-state-card :is(a,button,input,select,textarea,[tabindex]):focus-visible,
  .resp-page .opt:has(input:focus-visible),
  .resp-page .resp-img-tile:has(input:focus-visible),
  .resp-page .matrix-cell:has(input:focus-visible),
  .resp-page .rf-choose:has(input:focus-visible),
  .resp-page .rank-item:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; border-radius:var(--r-control); }
  .resp-page .matrix-cell:has(input:focus-visible){ border-radius:var(--r-card); }
  /* The public respondent terminal states (skeleton/error/paused/etc.) render
     .pr-state-card OUTSIDE .resp-page (#respPageWrap is replaced wholesale, not wrapped),
     so the rule above never matched its focused h1 and it fell back to the black UA ring. */
  .pr-state-card h1:focus{ outline:none; }
  .pr-state-card h1:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; border-radius:var(--r-control); }
  /* The row/card carries the ring instead of the native input inside it — suppress the
     UA ring on the input itself ONLY where a card wraps it, so there is exactly one ring,
     not two. (.resp-img-tile's own input is .sr-only, whose clip-path already hides any
     outline it would draw, so it needs no separate suppression here.) */
  .resp-page .opt input:focus-visible, .resp-page .matrix-cell input:focus-visible{ outline:none; }

  /* A6/A7 remediation 2.2 — must come AFTER the focus-visible rule above (0,3,0) since a
     grabbed ranking item is by definition focused; declared here at matching specificity
     (0,3,0) so the dashed "picked up" outline actually wins the cascade instead of losing
     to the plain focus ring. */
  .resp-page .rank-item.grabbed, .resp-page .rank-item.grabbed:focus-visible{ outline:2px dashed var(--brand-600); outline-offset:2px; background:var(--brand-50); }

  .resp-stars{display:flex; gap:6px; align-items:center;}
  .resp-stars .star-btn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; padding:0; color:var(--border-control); cursor:pointer;}
  .resp-stars .star-btn:hover{border:none;}
  .resp-stars .star-btn.hovered{color:var(--brand-300);}
  .resp-stars .star-btn.selected{color:var(--brand-600);}
  .resp-star-value{font-size:12px; color:var(--text-secondary); margin-top:6px;}
  .resp-select-wrap{position:relative;}
  .resp-select{appearance:none; -webkit-appearance:none; padding:9px 36px 9px 12px; cursor:pointer;}
  .resp-select.placeholder{color:var(--text-secondary);}
  .resp-select-wrap .nf-i{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none;}
  .resp-select:hover, .resp-date:hover{border-color:var(--brand-600);}
  .resp-date{cursor:text;}
  .resp-date::-webkit-calendar-picker-indicator{opacity:.55;}
  .resp-nps{display:flex; gap:6px;}
  .resp-nps .nps-cell{flex:1; height:40px; border:1px solid var(--border-control); background:var(--surface-default); border-radius:var(--r-control); font-size:13px; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
  .resp-nps .nps-cell:hover{border-color:var(--brand-600);}
  .resp-nps .nps-cell.selected{background:var(--brand-50); border-color:var(--brand-600); color:var(--text-primary); font-weight:600;}
  .resp-nps-labels{display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); margin-top:6px;}
  .resp-nps-labels span:last-child{text-align:right;}
  .resp-page .chart-note{color:var(--text-secondary); font-size:12px;}
  /* Continue (spec §7) — brand-600, radius 4, 44px, 15/600; the arrow is an nfIcon, not a glyph. */
  .resp-page .actions button.primary{min-height:44px; font-size:15px; font-weight:600; border-radius:var(--r-control);}

  /* A6 — matrix: 44×44 tap/click cells (was ~40px with a 13px indicator, below the WCAG
     2.2 SC 2.5.8 minimum), the label wrapping every input giving it its "{row}, {column}"
     accessible name. */
  .matrix-cell{display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer; border-radius:var(--r-control);}

  /* A6/A7 remediation 1.4 — the player's mini-matrix <th> was falling to the UA default
     (16px/700), louder than the question heading it sits under. Scoped to .resp-page only
     — the builder canvas's own preview table is untouched. */
  .resp-page .mini-matrix th{font-size:13px; font-weight:500; color:var(--text-secondary);}
  .resp-page .mini-matrix th[scope="col"]{font-weight:600; color:var(--text-primary);}

  /* A6/A7 remediation 1.3 — .img-choice-empty's base color (var(--muted), builder-canvas
     scoped in 04-canvas-nodes.css) fails contrast at 11px; override for the player only. */
  .resp-page .img-choice-empty{color:var(--text-secondary);}

  /* A6 — ranking: the keyboard alternative. Two 32px arrow buttons per row (primary path,
     also what fixes touch, where drag is dead) plus Space-to-grab mode on the row itself. */
  .resp-rank-list{list-style:none; margin:0; padding:0;}
  .rank-item{min-height:44px;}
  /* .rank-item.grabbed lives further up this file (2,2 remediation), declared AFTER the
     :focus-visible rule so its specificity actually wins — a grabbed item is always focused. */
  .rank-btn{width:32px; height:32px; flex:none; border-radius:var(--r-control); border:1px solid var(--border-control); background:var(--surface-default);
    color:var(--text-secondary); padding:0; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .rank-btn:hover:not(:disabled){border-color:var(--brand-600); color:var(--brand-600);}
  .rank-btn.up .nf-i{transform:rotate(180deg);}
  .rank-btn:disabled{opacity:.35; cursor:not-allowed;}

  @media (max-width:480px){
    .resp-stars{gap:4px;}
    .resp-stars .star-btn{width:40px; height:40px;}
    .resp-stars .star-btn svg{width:28px; height:28px;}
    .resp-nps{display:grid; grid-template-columns:repeat(6,1fr); gap:6px;}
    /* A6/A7 remediation 2.8 — the matrix's natural width (402px) overflowed its 297px
       wrapper at 390px with no scroll affordance. Fixed layout + shrunk type keeps every
       column on-screen instead. */
    .resp-page .mini-matrix{table-layout:fixed; width:100%;}
    .resp-page .mini-matrix .rowhead{width:auto; font-size:12.5px; line-height:1.3; white-space:normal;}
    .resp-page .mini-matrix td{width:48px;}
    .resp-page .mini-matrix th[scope="col"]{font-size:11.5px;}
  }
  @media (max-width:640px){
    .conduct-bar{flex-wrap:wrap; row-gap:8px;}
    .conduct-bar .conduct-ghost-btn{padding:6px 12px; font-size:12px;}
  }

  /* Side panel — canvas spec §3: the builder's only editing surface, shown only while a
     node is selected (#main.has-selection). Sticky 48px header, scrolling body, sticky
     footer; the flex column keeps header and footer pinned. */
  #panel{width:384px; flex:none; display:none; flex-direction:column; min-height:0;
    border-left:1px solid var(--border-default); background:var(--surface-default);}
  #main.has-selection #panel{display:flex;}
  #panel .pn-hd{height:48px; flex:none; position:sticky; top:0; display:flex; align-items:center; gap:8px;
    padding:12px 12px 12px 16px; border-bottom:1px solid var(--border-default); background:var(--surface-default);}
  #panel .pn-hd h3{flex:1; min-width:0; margin:0; font-size:13px; font-weight:600; color:var(--text-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #panel .pn-close{width:28px; height:28px; padding:0; border:none; background:transparent; color:var(--text-muted); border-radius:var(--r-control); flex:none;}
  #panel .pn-close:hover{background:var(--surface-subtle); color:var(--text-primary); border:none;}
  #panel .pn-body{flex:1; min-height:0; overflow-y:auto; padding:16px; font-size:12.5px; color:var(--text-secondary); line-height:1.35;}
  #panel .pn-ft{flex:none; position:sticky; bottom:0; display:flex; align-items:center; gap:8px; padding:12px 16px;
    border-top:1px solid var(--border-default); background:var(--surface-default);}
  #panel .pn-ft button{font-size:13px; padding:6px 12px;}
  #panel .pn-start-note{font-size:13px; color:var(--text-muted); white-space:nowrap;}
  /* Matrix in the panel (§3): fixed layout, 104px row-header column, 28px add-column cell,
     column inputs fill their cell; a row/column's remove × floats over its cell on
     hover/focus so 4 columns fit the 352px content width without a scrollbar. */
  #panel .mini-matrix-wrap{overflow-x:visible;}
  #panel .mini-matrix{width:100%; table-layout:fixed;}
  #panel .mini-matrix th.corner, #panel .mini-matrix th.addcell-row{width:120px;}
  #panel .mini-matrix th.addcell{width:28px;}
  #panel .mini-matrix th.colhead{min-width:0;}
  #panel .mini-matrix th.colhead, #panel .mini-matrix th.rowhead{position:relative;}
  #panel .mini-matrix th, #panel .mini-matrix td{padding:3px 2px;}
  #panel .mini-matrix th.colhead .inline-edit, #panel .mini-matrix th.rowhead .inline-edit{width:100%; padding:2px 3px;}
  #panel .mini-matrix th .mini-x{position:absolute; top:-4px; right:-4px; opacity:0; padding:2px; background:var(--surface-default); border-radius:var(--r-control); box-shadow:var(--shadow-1);}
  #panel .mini-matrix th:hover .mini-x, #panel .mini-matrix th:focus-within .mini-x{opacity:1;}

  /* Templates modal */
  #templatesModal{
    position:fixed; inset:0; background:var(--scrim); display:none; align-items:center;
    justify-content:center; z-index:100; backdrop-filter:blur(2px);
  }
  #templatesModal.show{display:flex;}
  #templatesCard{
    width:520px; max-width:92vw; max-height:86vh; overflow-y:auto; background:var(--panel);
    border:1px solid var(--border-strong); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-3);
  }
  #templatesCard h2{margin:0 0 14px; font-size:16px; line-height:22px; font-weight:600;}
  .tpl-section{margin-bottom:18px;}
  .tpl-section-hd{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
  .tpl-section-hd strong{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
  .tpl-import-label{display:inline-flex; align-items:center; cursor:pointer;}
  .tpl-list{display:flex; flex-direction:column; gap:6px;}
  .tpl-row{display:flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--border-default); border-radius:var(--r-control); padding:7px 9px;}
  .tpl-row .tpl-name{flex:1; font-size:12.5px;}
  #templatesCard .actions{display:flex; gap:8px; margin-top:6px;}
  #templatesCard .actions button{flex:1;}

  /* Option lists manager — clones the templates-modal pattern exactly. */
  #optionListsModal{
    position:fixed; inset:0; background:var(--scrim); display:none; align-items:center;
    justify-content:center; z-index:185; backdrop-filter:blur(2px);
  }
  #optionListsModal.show{display:flex;}
  #optionListsCard{
    width:560px; max-width:92vw; max-height:86vh; overflow-y:auto; background:var(--panel);
    border:1px solid var(--border-strong); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-3);
  }
  .ol-modal-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .ol-modal-hd h2{margin:0; font-size:16px; line-height:22px; font-weight:600;}
  .ol-modal-x{background:transparent; border:none; color:var(--muted); padding:5px; border-radius:var(--r-control); cursor:pointer; display:inline-flex;}
  .ol-modal-x:hover{background:var(--panel3); border:none; color:var(--text);}
  #optionListsBody{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
  .ol-row{display:flex; flex-direction:column; align-items:stretch; gap:0;}
  .ol-row-hd{display:flex; align-items:center; gap:6px; width:100%;}
  .ol-row-hd .tpl-name{flex:1;}
  .ol-row-hd .tpl-name{min-width:0;}
  /* durable-history §4.2 — the usage line has its own line, its first letter under the name's */
  .ol-meta{display:block; white-space:normal; margin-top:2px; padding-left:var(--ol-name-inset, 26px); font-size:11.5px; color:var(--text-muted);}
  .ol-row-msg{display:flex; gap:6px; align-items:flex-start; font-size:12px; line-height:1.5; margin:6px 0 2px; padding-left:var(--ol-name-inset, 26px);}
  .ol-row-msg .nf-i{flex:none; margin-top:2px;}
  .ol-row-msg-error{color:var(--error-fg);}
  .ol-row-msg-warn{color:var(--warning-fg);}
  .ol-msg-body{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:2px; min-width:0;}
  .ol-msg-acts{display:inline-flex; gap:12px; white-space:nowrap;}
  .ol-del:disabled{opacity:.45; cursor:default;}
  #optionListsBody .ol-load-err{padding-bottom:0;}
  #optionListsBody:has(> .ol-load-err){margin-bottom:0;}
  button.ol-msg-btn{background:none; border:none; padding:0; margin-left:0; font-size:12px; font-weight:600; color:var(--brand-700); cursor:pointer;}
  button.ol-msg-btn:hover{text-decoration:underline; background:none;}
  .ol-row button.icon-btn{background:transparent; border:none; color:var(--muted); padding:4px; border-radius:var(--r-control); cursor:pointer; display:inline-flex; align-items:center;}
  .ol-row button.icon-btn:hover{background:var(--panel3); color:var(--text);}
  .ol-row-expanded{background:var(--panel2); border-radius:var(--r-control); padding:8px; margin-top:8px;}
  .ol-locked-label{flex:1; font-size:13px; color:var(--text-secondary);}
  .ol-lock-ic{color:var(--text-muted); display:inline-flex;}
  .ol-linked-actions{display:flex; gap:6px; margin-top:4px;}
  .ol-linked-actions .mini-add-row{flex:1;}
  .ol-pick-select{width:100%; margin-top:4px;}

  /* Test modal */
  #testModal{
    position:fixed; inset:0; background:var(--scrim); display:none; align-items:center;
    justify-content:center; z-index:100; backdrop-filter:blur(2px);
  }
  #testModal.show{display:flex;}
  #testCard{
    width:460px; max-width:92vw; max-height:86vh; overflow-y:auto; background:var(--panel);
    border:1px solid var(--border-strong); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-3);
  }
  #testCard h2{margin:0 0 4px; font-size:16px; line-height:22px; font-weight:600;}
  #testCard .progress{font-size:11.5px; color:var(--muted); margin-bottom:16px;}
  #testCard .qlabel{font-size:15px; font-weight:600; margin-bottom:14px; line-height:1.4;}
  #testCard .opt{
    display:block; padding:9px 12px; border:1px solid var(--border-control); border-radius:var(--r-control); margin-bottom:7px;
    cursor:pointer; font-size:13.5px; display:flex; align-items:center; gap:9px;
  }
  #testCard .opt:hover{border-color:var(--accent);}
  #testCard .opt input{margin:0;}
  #testCard table{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:8px;}
  #testCard table th, #testCard table td{padding:6px; text-align:center; border-bottom:1px solid var(--border);}
  #testCard table th:first-child, #testCard table td:first-child{text-align:left;}
  /* Unscoped (not just #testCard) — reused identically by the Respondent preview and the
     Editor view's compiled document, so drag-to-rank always looks like a real control:
     a bordered card per option, number badge, grip in the middle, label filling the rest. */
  .rank-item{
    display:flex; align-items:center; gap:10px; background:var(--surface-default); border:1px solid var(--border-control);
    border-radius:var(--r-control); padding:9px 12px; margin-bottom:7px; font-size:13.5px; cursor:grab;
  }
  .rank-item:hover{border-color:var(--brand-600);}
  .rank-item .num{width:22px; height:22px; border-radius:50%; background:var(--brand-600); color:var(--text-on-accent);
    display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex-shrink:0;}
  .rank-item .grip{color:var(--text-muted); padding:0 2px; flex:none; display:flex; align-items:center;}
  .rank-item .grow{flex:1;}
  .rank-item.dragging{opacity:.4;}
  .rank-item.drag-over{border-top:2px solid var(--accent);}
  #testCard .path-log{background:var(--panel2); border-radius:var(--r-control); padding:10px 12px; font-size:11.5px; color:var(--muted); margin-top:14px; max-height:120px; overflow-y:auto;}
  #testCard .actions{display:flex; gap:8px; margin-top:18px;}
  #testCard .actions button{flex:1;}
  #testCard .done-icon{color:var(--success-fg); margin-bottom:10px;}

  /* Toast (spec §4) — navy, white 13/500, radius 4, --shadow-2; action links --shell-focus. */
  #toast{
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--shell-bg); color:var(--shell-text-strong); border:1px solid var(--shell-line);
    padding:10px 16px; border-radius:var(--r-control); font-size:13px; font-weight:500; line-height:18px; z-index:200; opacity:0; transition:opacity var(--dur-2) var(--ease-step); pointer-events:none;
    box-shadow:var(--shadow-2); max-width:420px;
  }
  #toast a, #toast .link-btn, #toast button{color:var(--shell-focus);}
  #toast .nf-i{vertical-align:-2px;}
  #toast.show{opacity:1;}
  #toast.over-canvas{bottom:72px;} /* clears the builder zoom cluster (bottom 20 + 32 + 20) */
  #simBadge{font-size:11.5px; color:var(--accent2);}


  /* ============================== NARROW EDIT SURVEY — spec docs/specs/narrow-layouts.md §6 ==============================
     The controls column and the 640px document sit side by side only while the view can hold
     both (≈1000px); below that the controls stack above the document and the document fits
     the width. Keyed to the view's own width (container query), so the sidebar's state counts. */
  #editorView > .fullview-body{container:editor / inline-size;}
  .editor-doc{min-width:0;}
  @container editor (max-width:999px){
    .editor-body, .editor-body.with-comments{flex-direction:column; align-items:stretch; flex-wrap:nowrap;}
    .editor-controls, .editor-body.with-comments .editor-controls{width:auto; max-width:640px; position:static; align-self:center; width:100%;}
    .editor-doc{width:100%; max-width:640px; flex:0 1 auto; align-self:center; box-sizing:border-box;}
    .editor-notes{width:100%; max-width:640px; align-self:center; margin:0 0 40px;}
  }
  @container editor (max-width:599px){
    .editor-body, .editor-body.with-comments{padding:16px;}
    .editor-doc{padding:24px 20px;}
    .editor-doc table{display:block; max-width:100%; overflow-x:auto;} /* a matrix question scrolls inside itself */
  }
  @media (max-width:900px){
    #editorView > .fullview-bar .panel-hint{display:none;}
  }
  /* Editing help (narrow-layouts review fix 2): one folding section, open on desktop. */
  .editor-help > summary{display:flex; align-items:center; gap:6px; height:34px; margin-top:12px; cursor:pointer; list-style:none;
    font-size:13px; font-weight:500; color:var(--text-secondary);}
  .editor-help > summary::-webkit-details-marker{display:none;}
  .editor-help > summary .nf-i{transition:transform var(--dur-1) var(--ease-step);}
  .editor-help[open] > summary .nf-i{transform:rotate(180deg);}
  .editor-help > summary:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px; border-radius:var(--r-control);}
  @container editor (max-width:999px){
    .editor-quick{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;}
  }