/* Client screens. Builds on app.css. No inline styles anywhere: widths come from the .wN classes. */

.sec-first{margin-bottom:6px}
.sec-s{margin-top:14px}
.h3{font-size:17px}
.big{font-size:26px;margin:6px 0 4px}
.lead{font-size:18px}
.narrow{max-width:720px}
.hidden{display:none}
.ref{display:block;margin-top:2px}
.small{font-size:16px}
.quote{display:block;font-style:italic;color:var(--mute);font-size:15px;margin-top:2px}
.inline{display:inline}
form.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.small-select{width:auto;min-width:12em;padding:7px 9px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
blockquote{margin:8px 0;padding:8px 12px;border-left:4px solid var(--line);background:var(--bg);border-radius:0 6px 6px 0}
blockquote.was{border-left-color:var(--orange)}
table.compact td,table.compact th{padding:7px 8px}
table th[scope="row"]{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2)}

/* score bars: the width is a class, never an inline style */
.scorebar{display:flex;align-items:center;gap:10px}
.scorebar .bar{flex:1}
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}
.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}
.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}
.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}
.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}
.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}
.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}
.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}
.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}
.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}
.w100{width:100%}

/* native progress bars, readable without JavaScript */
progress.meter{display:block;width:100%;height:14px;margin:10px 0;appearance:none;-webkit-appearance:none;
  border:0;border-radius:7px;background:var(--line-2);overflow:hidden}
progress.meter::-webkit-progress-bar{background:var(--line-2);border-radius:7px}
progress.meter::-webkit-progress-value{background:var(--orange);border-radius:7px}
progress.meter::-moz-progress-bar{background:var(--orange);border-radius:7px}
progress.meter.big{height:20px}
.progtext{font-size:17px}

/* home */
.kpilink{text-decoration:none;color:var(--ink);display:block}
.kpilink:hover{border-color:var(--ink);color:var(--ink)}
.todo{list-style:none;padding:0;margin:0 0 14px}
.todo li{padding:10px 0;border-bottom:1px solid var(--line-2)}
.todo li:last-child{border-bottom:0}
/* Getting started (Dan, 30 Sep 15:50, section 22.3): linear, one step at a time, one column at every width */
.steps{list-style:none;padding:0;margin:8px 0 0;display:block}
.steps .step{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 12px;border-radius:10px;margin:4px 0}
.steps .step-mark{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;box-sizing:border-box;border:2px solid var(--soft);color:var(--soft);background:#fff}
.steps .step-text{flex:1 1 220px;min-width:0}
.steps .step-name{display:block;font-weight:700}
.steps .step-hint{display:block;margin-top:2px}
.steps .step-lock{display:block;color:var(--soft);font-size:15px}
.steps .step.done .step-mark{background:var(--acc);border-color:var(--acc);color:#fff}
.steps .step.done .step-name{font-weight:600}
.steps .step.live{background:var(--acc-soft);border:2px solid var(--acc);padding:16px 14px}
.steps .step.live .step-mark{background:var(--ink);border-color:var(--ink);color:#fff}
.steps .step.live .step-name{font-size:18px}
.steps .step.locked{color:var(--soft)}
.steps .step.locked .step-mark{border-style:dashed}
.steps .step-act{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-left:44px}
.steps .step-act .btn{font-size:17px;padding:12px 20px}
.steps form.inline{display:inline;margin:0}
@media(max-width:600px){.steps .step-act{margin-left:0}.steps .step-act .btn{width:100%;justify-content:center}
  .steps form.inline{width:100%}}

/* the check page: start, or why not, before everything else (Dan, 30 Sep, section 22.1) */
.start-top{border-left:5px solid var(--acc)}
.start-top.blocked{border-left-color:var(--warn)}
.start-top h2{margin-top:0}
.start-top .btnrow{margin:12px 0 8px}
form[data-busy].working button[type=submit]{opacity:.7;cursor:progress}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters label{flex:1 1 160px;margin:0}
.filters .btnrow{flex:0 0 auto}

/* deadline and status */
.dl b{display:block}
.dl.red b{color:#7c2a13}.dl.amber b{color:#6b4600}
.chip.plain{background:var(--line-2);color:var(--ink)}
.chip.st-review,.chip.st-queued,.chip.st-running{background:#e6ecfa;color:#1d2f66}
.chip.ds-awaiting{background:var(--warn-soft);color:#6b4600}

/* forms */
.formats{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
@media(max-width:900px){.formats{grid-template-columns:1fr}}
.radio .hint{margin:2px 0 0}
.email-only{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.js .email-only.off{display:none}
.js [data-source-panel].off{display:none}
.pii-warning h2{margin-bottom:4px}
.flash ul{margin:6px 0 0;padding-left:20px}
.flash a{color:inherit}

/* stages while it runs */
.stages,.chain-steps{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.chain-steps{flex-direction:column}
.chain-steps .st{align-items:flex-start}
.chain-steps .st>span{display:block}

/* approval order */
.chain{list-style:none;padding:0;margin:0}
.chain li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line-2)}
.chain li:last-child{border-bottom:0}

/* the report */
.jump{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:12px 16px}
.answer{border:2px solid var(--ink)}
.answer.band-red{background:var(--fail-soft)}
.answer.band-amber{background:var(--warn-soft)}
.answer.band-green{background:var(--acc-soft)}
.reasons{margin:8px 0 12px;padding-left:22px}
.reasons li{margin:4px 0}
.lens h3{margin:10px 0 4px}
.lens details{margin-top:6px}
.gridcard{margin-bottom:14px}
.grid-table caption{font-size:17px}
.grid-table th[scope="col"]{font-size:11px;min-width:74px;padding:8px 4px}
.grid-table td.cell{padding:4px}
.grid-table th[scope="row"]{min-width:130px;font-size:14px}
.grid-table td.cell a{min-height:44px}
.cellword{display:block;font-size:12px;font-weight:600}
.hard{color:var(--ink);text-decoration:none;background:var(--orange-soft);box-shadow:inset 0 -3px 0 var(--orange);border-radius:2px}
.hard.amber{background:var(--warn-soft);box-shadow:inset 0 -3px 0 #c98a00}
.hard:hover,.hard:focus{background:#d4e0f7;color:var(--ink)}
.hard:target{outline:3px solid var(--ink)}
sup.fn{font-size:12px;font-weight:700;color:var(--orange-dark);margin-left:1px}
.finding{border-left:5px solid var(--line)}
.finding.sev-red{border-left-color:var(--fail)}
.finding.sev-amber{border-left-color:#c98a00}
.finding:target{outline:3px solid var(--ink);outline-offset:2px}
.finding h3{margin:0}
.rewrite,.suggestion{background:var(--acc-soft);border-radius:8px;padding:10px 14px;margin:10px 0}
.rewrite b{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#075048}
.rewrite p{margin:4px 0 0;font-weight:600}
.retest{border:2px solid var(--orange)}
.shot{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;display:block}
.findings-list{list-style:none;padding:0;margin:0}
.findings-list li{padding:12px 0;border-bottom:1px solid var(--line-2)}
.findings-list li:last-child{border-bottom:0}
.findings-list p{margin:6px 0 0}
.tl{list-style:none}
.how th[scope="row"]{width:28%}

/* the AI customers grid */
.readers-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start;margin-top:10px}
@media(max-width:1000px){.readers-wrap{grid-template-columns:1fr}}
.readers{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:4px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px}
.rd{aspect-ratio:1;min-width:24px;min-height:24px;border:1px solid rgba(11,22,54,.25);border-radius:4px;padding:0;
  cursor:pointer;font-weight:700;font-size:13px;line-height:1;font-family:inherit;color:var(--ink);background:#cfd5e4}
.rd.green,.rk.green{background:#7fd3c8}
.rd.amber,.rk.amber{background:#f0c34a}
.rd.red,.rk.red{background:#e08a68}
.rd.none,.rk.none{background:#cfd5e4}
.rd.unmarked,.rk.unmarked{background:#fff}
.rd:hover{outline:2px solid var(--ink)}
.rd[aria-current="true"]{outline:3px solid var(--ink);outline-offset:1px}
.rk{width:20px;height:20px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;line-height:1;font-family:inherit;font-style:normal;border:1px solid rgba(11,22,54,.25);color:var(--ink)}
.reader-panel{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.reader-panel[aria-busy="true"]{opacity:.6}
.reader-detail h3{margin-top:14px}
.answers dt{font-weight:700;font-size:14px;margin-top:8px}
.answers dd{margin:2px 0 0}
.marks{padding-left:20px}
.marks li{margin:6px 0}
.small-doc{font-size:15px;line-height:1.7;padding:16px}

/* notifications */
.notes{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.note-item.unread{border-left:5px solid var(--orange)}
.note-item p{margin:4px 0}

/* trail */
td.detail{max-width:520px;overflow-wrap:anywhere}
.hash{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* tables that read well on a phone: each row becomes a card with labels */
@media(max-width:700px){
  table.rtable thead{position:absolute;left:-9999px}
  table.rtable,table.rtable tbody,table.rtable tr,table.rtable td{display:block;width:100%}
  table.rtable tr{border-bottom:2px solid var(--line);padding:8px 0}
  table.rtable td{border:0;padding:6px 4px}
  table.rtable td[data-label]:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
}
@media print{
  .jump,.retest,.filters,.reader-panel,form{display:none!important}
  .finding,.lens{break-inside:avoid}
}

button.btn.sm{font-size:14px}
.legend i.rk{width:22px;height:22px;display:inline-flex}
label.f>span.hint{font-weight:400;color:var(--mute);font-size:14px}
label.f>span.err{font-weight:700;color:#7c2a13;font-size:15px}

/* round 1 fixes: open red findings, per cell readers, rebuild lines, the tick box refusal, swipe hint */
.open-red{background:#fff;border:2px solid var(--fail);border-radius:10px;padding:10px 14px;margin:12px 0}
.open-red h3{margin:0 0 4px;font-size:17px}
.open-red ul{margin:6px 0 0;padding-left:20px}
.open-red li{margin:4px 0}
.open-red p{margin:4px 0}
.rebuild{color:var(--ink);margin-top:6px}
.celln{display:block;font-size:12px;font-weight:400}
.cellnone{display:block;padding:6px 4px;font-size:13px;font-weight:600}
.grid-table td.cell.none{background:#eef0f5}
.made-up{margin:8px 0 12px}
.made-up.has-error{border-left:5px solid var(--fail);padding-left:10px}
p.err{font-weight:700;color:#7c2a13;margin:4px 0 8px}
.swipe-hint{display:none;font-weight:600;font-size:15px;margin:6px 0}
@media(max-width:900px){.swipe-hint{display:block}.swipe-hint:before{content:"\2194\00a0"}}
.how-check summary{cursor:pointer;font-weight:700}
.how-check ol{margin:8px 0 0;padding-left:22px}
.hash{overflow-wrap:anywhere}

/* round 2: long chips wrap, cards never push the page wider than the phone (M18) */
.pii-warning .chip,.card .chip{white-space:normal}
.card{min-width:0;overflow-wrap:anywhere}
.chip{max-width:100%}

/* round 2: nothing under 14px anywhere, secondary body copy at 16px */
.grid-table th[scope="col"]{font-size:14px;min-width:92px}
.cellword,.celln{font-size:14px}
.cellnone{font-size:14px}
sup.fn{font-size:14px;white-space:nowrap}
.rk,.legend i.rk{font-size:14px}
.hash{font-size:14px}
.rewrite b{font-size:14px}
.chip{font-size:14px}
.kpi .k,th{font-size:14px}
.st i{font-size:14px}
.side .who span,.side a.nav em,.side .grp,.side .foot{font-size:14px}
@media(max-width:700px){table.rtable td[data-label]:before{font-size:14px}}
p.small,p.soft,p.mute,.note,.open-red p,.hint,.kpi .n,.tl .e span,.findings-list p,.retest p{font-size:16px}
label.f>span.hint{font-size:16px}
.soft.small.ref,.ref.small{font-size:16px}

/* round 2: removed findings, the next setup step, the decide page */
.finding.removed{border-left-color:var(--line);background:var(--bg)}
.finding.removed p{margin:0}
.next-step{margin-bottom:14px}
.kp-list{padding-left:22px;margin:6px 0 10px}
.kp-list li{margin:4px 0}
.chain-steps .st.stopped,.chain-steps .st.sent-back{border-color:var(--fail);color:var(--ink)}
.chain-steps .st.stopped i,.chain-steps .st.sent-back i{background:var(--fail);color:#fff}
.chain-steps .st.closed{border-style:dashed}
.back-to-squares{margin-top:14px}
.reader-panel h2:focus{outline:3px solid var(--ink);outline-offset:2px}

/* round 2: the verdict sits right under the title on a phone */
@media(max-width:700px){
  .answer .big{font-size:22px}
  .answer{margin-top:10px}
}

/* round 3: headings and table headers never break mid-word (cards allow long hashes to wrap anywhere) */
h1,h2,h3,h4,th,legend{overflow-wrap:normal;word-break:normal;hyphens:manual;-webkit-hyphens:manual}
/* marked passages: a cue that is not colour alone. Red is underlined solid, amber dashed. */
.hard{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hard.amber{text-decoration-style:dashed}
/* the circumstance table: the firm's own mix beside the weighted run */
td.ownmix{border-left:3px solid var(--line,#dde1eb)}
.capnote{margin-top:4px;color:#4a5572}
/* approving against a red verdict: the tick box sits under the approve option */
.ack{margin:4px 0 12px 32px}
.ack.has-error{border-left:5px solid var(--fail);padding-left:10px}

/* round 4: radio and tick box hints sit outside their labels, joined with aria-describedby */
.opt{margin:0}
.opt .radio{padding-bottom:2px}
.opt-hint{margin:0 0 8px 32px}
div.f{display:block;margin-bottom:16px}
div.f>.flabel{display:block}
div.f>.hint{margin:0 0 6px}
div.f>.err{margin:4px 0 6px}
.error-summary:focus{outline:3px solid var(--ink);outline-offset:2px}
.harm-warn{color:#7c2a13}
.harm-warn a{color:inherit}
/* the version comparison, sentence by sentence */
.diff-list{list-style:none;padding:0;margin:6px 0 0}
.diff-list li{padding:8px 0;border-bottom:1px solid var(--line-2)}
.diff-list li:last-child{border-bottom:0}
.diff-list del{text-decoration:line-through;text-decoration-thickness:2px;background:#fae7e0}
.diff-list ins{text-decoration:underline;text-decoration-thickness:2px;background:#dcf5f1}
.diff-was,.diff-now{display:block}
.open-red h4{margin:0 0 4px;font-size:17px}
/* a lens with no measure of its own is grey, never red, amber or green */
.lens.not-separate{background:#f7f8fb}

/* round 4: information text (dates, who decided, status, reader counts) at 16px, like app.css small */
.soft.small,span.small,.celln,.dl-date,.quote{font-size:16px}
/* round 4: row labels stay in view when a table scrolls sideways (M18) */
.tablewrap th[scope="row"],.tablewrap thead th:first-child{position:sticky;left:0;z-index:2;background:#fff}
.tablewrap thead th:first-child{background:#fff;z-index:3}
.grid-table th.rowhead{box-shadow:3px 0 0 var(--line,#dde1eb);min-width:150px;max-width:190px}
.grid-table th[scope="col"].ownmix,.grid-table td.ownmix{border-left:3px solid var(--ink);background-clip:padding-box}
.grid-table th[scope="col"].ownmix{background:#eef0f5}
.dl-inline.red{color:#7c2a13;font-weight:700}.dl-inline.amber{color:#6b4600;font-weight:700}
.grid-table th[scope="col"] .celln{font-size:14px;text-transform:none;letter-spacing:0;font-weight:400}

/* round 5: the lens grid on a phone. The scroll box has no side padding, so nothing scrolls past the left edge of
   the sticky row label (junior F3), and the label column is narrower so more of the lenses show. */
@media(max-width:700px){
  .tablewrap.gridcard{padding-left:0;padding-right:0}
  .tablewrap.gridcard caption{padding:0 12px;text-align:left}
  .grid-table th.rowhead{min-width:112px;max-width:132px;left:0}
  .grid-table th.rowhead .ref{font-size:14px}
}
/* round 5: tap targets on a phone at least 44px tall: the main link in each list item and each test name (junior F5) */
@media(max-width:700px){
  .todo li>a,table.rtable td[data-label="Test"]>a,.todo li .btn.sm{display:inline-block;padding:10px 0;min-height:44px}
  .todo li .btn.sm{padding:10px 14px}
}
/* round 5: facts a later version lost, fingerprints, the reset sign-in disclosure */
.facts-lost ins{text-decoration:underline;background:#dcf5f1}
.facts-lost del{background:#fae7e0}
.facts-kept{margin:8px 0}
.fingerprint{display:block;overflow-wrap:anywhere}
.reset-sign-in summary{cursor:pointer;font-weight:600;min-height:24px;padding:4px 0}
.reset-sign-in p{max-width:420px}
.kp-removed td{background:#f7f8fb}
.runsize{margin:6px 0}

/* sections 5 to 8 (29 Sep): fix pointers, suggestions on request, report settings line, report footer */
.fixptr{background:var(--acc-soft);border-radius:8px;padding:10px 14px;margin:10px 0}
.fixptr b{color:#075048}
.suggestion{border:1px dashed #075048}
.suggestion .suggestion-text{font-weight:600;margin:6px 0}
.suggest-ask,.report-switch{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.settings-line{margin:6px 0}
.report-footer{border-top:3px solid var(--line)}
.report-footer p{margin:4px 0}
form[data-suggest].working button{opacity:.7;cursor:progress}

/* sections 11 to 14 (29 Sep, late evening): the vulnerable customers panel, the three lead lines, estimates,
   same-panel comparison, the scores tick, real samples */
.panel-box{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.panel-box>h3{margin:0 0 6px}
.lead-card{border-left:6px solid #075048}
.lead-card h2{margin:0 0 8px}
.lead-lines{margin:0}
.lead-lines>div{padding:6px 0;border-top:1px solid var(--line)}
.lead-lines>div:first-child{border-top:0}
.lead-lines dt{font-weight:700}
.lead-lines dd{margin:2px 0 0}
.run-size-note{margin:10px 0 0}
.estimate{border:1px dashed #5a6480;border-radius:8px;padding:10px 14px;margin:10px 0;background:#f7f8fb}
.estimate p{margin:4px 0}
.plan fieldset{border:0;padding:0;margin:8px 0}
.panel-compare{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.scores-ack-card{border:2px solid var(--accent)}
.scores-ack-card .check{align-items:flex-start}
.scores-ack{margin-top:12px}
.red-runs{margin:4px 0 8px;padding-left:20px}
.lens-list{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;padding:0;margin:2px 0}
.lens-list li{margin:0}
.lens-list li:not(:last-child)::after{content:","}
.suggest-kp{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start}
.suggest-kp .hint{flex:1 1 280px;margin:0}
.suggestion-note{margin:8px 0}
.prev-kp{white-space:pre-wrap;padding:6px 10px;background:#f7f8fb;border-radius:6px}
.sample-list li{margin:6px 0}
.samples summary{cursor:pointer;font-weight:600;min-height:24px;padding:4px 0}
.default-submit{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.working button[data-suggest-kp]{opacity:.7;cursor:progress}

/* round 7: nothing a person reads under 16px: chips, labels, table headers, small buttons and selects
   (screen-reader-keyboard F1). The reader squares keep their letter small enough to fit the square. */
.chip,.kpi .k,th,table th[scope="row"],.grid-table th[scope="col"],.grid-table th[scope="row"],
.grid-table th[scope="col"] .celln,.cellword,.celln,.cellnone,sup.fn,.hash,.rewrite b,.st i,.answers dt,
button.btn.sm,.small-select,.quote,.small-doc,label.f>span.hint,label.f>span.err,.swipe-hint,
.side .who span,.side a.nav em,.side .grp,.side .foot,.grid-table th.rowhead .ref{font-size:16px}
@media(max-width:700px){table.rtable td[data-label]:before{font-size:16px}}
.legend i.rk{font-size:14px}
/* round 7: the grid's column headers stay in view on a phone while the table scrolls (junior F7) */
@media(max-width:700px){
  .tablewrap.gridcard{max-height:85vh;overflow:auto}
  .grid-table thead th{position:sticky;top:0;z-index:3;background:#fff}
  .grid-table thead th:first-child{left:0;z-index:4}
}
/* round 7: the personal data found on the form, the structured mix request */
.pii-found{border-left:5px solid #c98a00}
.pii-found h3{margin:0 0 6px}
.pii-found ul{margin:6px 0;padding-left:20px}
.mixask{border:1px solid var(--line);border-radius:10px;padding:8px 14px}
.mixrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:8px}
.mixrow .flabel{flex:1 1 180px}
.mixrow .err{flex:1 1 100%}
.pctbox{white-space:nowrap}
.pctbox input{width:6em;display:inline-block}
.ai-route{margin:10px 0}

/* section 17 (30 Sep): the Examples page */
.examples{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.example h2{margin:0 0 8px}
.example-label{margin:0 0 10px;padding:8px 12px;border-left:4px solid #5a6480;background:#f7f8fb}
.example-facts{margin:0 0 12px}
.example-facts>div{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 0}
.example-facts dt{font-weight:700;min-width:11em}
.example-facts dd{margin:0}
.example .btnrow{align-items:center}
.cannot-try{margin:0}

/* round 8: the exact words on the decide page, in a readable box that scrolls on its own (approver F1) */
.words-card .words-scroll{max-height:32rem;overflow:auto;font-size:17px;line-height:1.7;margin:8px 0}
.words-card .words-scroll:focus{outline:3px solid var(--orange);outline-offset:2px}
.words-meta{margin:6px 0}
.report-fixed{margin-top:10px}
.close-line{border-left:4px solid #c98a00;background:#fff8e6;padding:8px 12px;margin:10px 0}
/* round 8: nothing a person reads under 16px: form labels, the crumb, report cells, the legend, notes, small links
   styled as buttons (screen-reader-keyboard F3). The reader squares keep their letter sized to fit the square. */
.flabel,label.f>span,.crumb,.grid-table td.cell,.legend,.note,.tl .e,.btn.sm,a.btn.sm,.cellnone,
.grid-table th[scope="col"],.grid-table th[scope="row"],table th[scope="row"],.small-select,.small-doc,
.answers dt,.rewrite b,.chip,.kpi .k,th,.st i,.hash{font-size:16px}
/* round 8: table cells never split a word with a hyphen (junior analyst F10) */
td,th{hyphens:manual;-webkit-hyphens:manual}
.note-item h2.note-title{font-size:18px;margin:0 0 4px}
/* round 9: stage labels on the watch page and the signed-in name in the menu at 16px (screen reader F7) */
.st,.st span,.side .who b{font-size:16px}
/* round 9: which run each headline number comes from (operator F2) */
.kpi .run-tag{font-weight:700;color:var(--ink)}
.kpi .unweighted{border-top:1px solid var(--line,#dde1eb);padding-top:6px}
.review-note{border-left:4px solid #c98a00;background:#fff8e6;padding:8px 12px;margin:10px 0}
/* round 9: words in the check page's side tables are never split in the middle ("Feedbac k only") */
.card table.compact td,.card table.compact th{overflow-wrap:break-word;word-break:normal}
.fix-group{margin-top:24px}
/* round 9: all eight lenses fit a 1366 wide screen without scrolling sideways (consumer duty lead F7): the lens
   headings are not set in capitals, and the cells are a little tighter. Text stays at 16px. */
.grid-table th[scope="col"]{text-transform:none;letter-spacing:0;padding:8px 3px;min-width:84px}
.grid-table td.cell{padding:3px}
.grid-table td.cell a{padding:8px 3px}
@media (min-width: 900px){
  .grid-table th.rowhead{min-width:120px;max-width:150px}
  .card.tablewrap.gridcard{padding-left:8px;padding-right:8px}
}
/* round 10: a comparison measured two ways, said beside the numbers */
.open-amber{background:#fff;border:2px solid var(--warn,#b45309);border-radius:10px;padding:10px 14px;margin:12px 0}
.open-amber p{margin:4px 0;font-size:16px}
/* round 10: the lens grid on a phone (junior analyst F1). The page scrolls, not the box: no fixed height and no
   sticky header row. The notes under each column name move to a key above the tables, so the header is short, and
   the table notes sit outside the scroller so they wrap inside the screen. Words in the grid are never split. */
.phone-key{display:none}
.grid-notes{margin:8px 0 4px}
.grid-table td,.grid-table th,.grid-table caption{overflow-wrap:normal;word-break:normal;hyphens:manual;-webkit-hyphens:manual}
@media(max-width:700px){
  .phone-key{display:block;border-left:4px solid var(--line,#dde1eb);padding:4px 10px;margin:8px 0}
  .phone-key ul{margin:4px 0 0;padding-left:20px}
  .grid-table thead .hnote{display:none}
  .tablewrap.gridcard{max-height:none;overflow-y:visible}
  .grid-table thead th{position:static}
  .grid-table thead th:first-child{position:sticky;left:0}
  .grid-table td.cell{min-width:118px}
  .grid-table th[scope="col"]{min-width:118px}
  .grid-table th[scope="col"].ownmix,.grid-table td.ownmix{min-width:170px}
  .grid-table caption{text-align:left}
}
/* round 10: the next step on each test is easy to tap on a phone (junior analyst F4); the note beside a held result */
@media(max-width:700px){
  a.next-link{display:inline-block;min-height:44px;padding:10px 0;line-height:24px}
  a.btn.sm.next-link{padding:10px 14px}
  .finding a.show-in,.findings-list a.show-in{display:inline-block;min-height:44px;padding:10px 0}
  /* the approver's phone: the four count tiles are compact, so "What needs doing now" is near the top (approver F2) */
  .home-tiles.grid.g4{grid-template-columns:1fr 1fr;gap:10px}
  .home-tiles .kpi{padding:10px 12px}
  .home-tiles .kpi .v{font-size:26px;margin-top:2px}
  .home-tiles .kpi .n{display:none}
}
.held-note{display:inline}

/* round 11, screen reader F5: the date field's calendar button gets the same strong focus ring as everything else */
input[type=date]:focus,input[type=date]:focus-within{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
input[type=date]::-webkit-calendar-picker-indicator:focus-visible{outline:3px solid var(--focus);outline-offset:1px;
  border-radius:2px}
/* round 11, screen reader F1: before the scores tick the AI customers carry no colour, only their words and marks */
.rd.held,.rk.held{background:#fff}
/* round 11, screen reader F7: a trail entry's detail keeps its own line breaks (each warning on its own line) */
.detail-text{white-space:pre-line}
/* round 11, consumer duty lead F10: the Handbook pointer under each lens column name */
.hcite{font-weight:400}
.rules-line{margin:.5rem 0}
/* round 12, junior analyst F1: on a phone the lens grid is one card per customer group, and every score carries
   its lens name, so nothing depends on column headers that have scrolled away. On wide screens the lens name in
   each cell is visually hidden but still read by screen readers. The table keeps its roles (set in the template)
   so the card layout does not take the table away from assistive technology. */
.cell-lens{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
.phone-cards-hint{display:none}
@media(max-width:700px){
  .swipe-hint{display:none}
  .phone-cards-hint{display:block;margin:6px 0}
  .tablewrap.gridcard{overflow:visible;max-height:none;padding:12px}
  .grid-table,.grid-table tbody,.grid-table caption{display:block;width:100%}
  .grid-table caption{padding:0 0 6px}
  .grid-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .grid-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:12px 0;
    border-top:2px solid var(--line,#dde1eb)}
  .grid-table tbody tr:first-child{border-top:0}
  .grid-table th.rowhead,.tablewrap .grid-table th[scope="row"]{grid-column:1/-1;position:static;min-width:0;
    max-width:none;box-shadow:none;padding:0 0 4px;text-align:left;background:none}
  .grid-table th.rowhead .ref{display:block;font-weight:400}
  .grid-table td.cell,.grid-table td.ownmix{display:block;min-width:0;border-radius:8px;padding:0;overflow:hidden}
  .grid-table td.cell>a,.grid-table td.cell>span:not(.cell-lens){box-sizing:border-box}
  .grid-table td.ownmix{grid-column:1/-1;border-left:3px solid var(--ink)}
  .grid-table td.cell a,.grid-table td.cell>span:not(.cell-lens){display:block;padding:8px 10px}
  .grid-table td.cell.red{background:var(--fail-soft);color:#7c2a13}
  .grid-table td.cell.amber{background:var(--warn-soft);color:#6b4600}
  .grid-table td.cell.green{background:var(--acc-soft);color:#075048}
  .grid-table td.cell.none{background:#eef0f5}
  .cell-lens{position:static;width:auto;height:auto;margin:0;padding:8px 10px 0;overflow:visible;clip:auto;
    white-space:normal;display:block;font-weight:700;font-size:16px;line-height:1.3}
  .grid-table td.cell>.cell-lens+a,.grid-table td.cell>.cell-lens+span{padding-top:2px}
  .grid-table td.cell .cellnone{padding:8px 10px}
}
/* round 12, junior analyst F2: each home tile keeps its one-line explanation on a phone, so the number says what
   it counts. Tiles stack one to a row so the text has room. */
@media(max-width:700px){
  .home-tiles.grid.g4{grid-template-columns:1fr}
  .home-tiles .kpi .n{display:block;margin-top:2px}
}
/* round 12, junior analyst F5: the "In three lines" box has a neutral edge until the verdict is shown, then the
   verdict's colour */
.lead-card{border-left-color:#5a6480}
.lead-card.band-green{border-left-color:var(--acc)}
.lead-card.band-amber{border-left-color:var(--warn)}
.lead-card.band-red{border-left-color:var(--fail)}
.lead-opens{margin:10px 0 0}
/* round 12, screen reader F4: the skip link's focus ring shows against the navy link and the navy page top: a
   white ring next to the link, an orange one outside it */
.skip:focus,.skip:focus-visible{outline:3px solid #fff;outline-offset:0;box-shadow:0 0 0 6px var(--orange)}
/* round 12, small advice firm owner F13: words in the People table are never split in the middle ("administrato r").
   The columns are sized to their longest word; an email address may break after its @ only. */
.card .team-table td,.card .team-table th{overflow-wrap:break-word;word-break:normal;hyphens:manual}
.team-table td[data-label="Role"],.team-table th:nth-child(2){min-width:9.5em}
.team-table .email{overflow-wrap:break-word}
/* round 13, junior analyst F1: on a phone each customer-group card folds to its name and its weakest lens, with a
   button to open it (only with the script, which adds .js-fold); a "Back to the top" link follows each section.
   Wide screens show every cell and no extra links. */
.fold-btn,.fold-note,.back-top{display:none}
@media(max-width:700px){
  .js-fold .fold-btn{display:inline-block;margin-top:6px}
  .js-fold .fold-note{display:block;font-weight:400}
  .js-fold tr.folded td.cell:not(.weakest),.js-fold tr.folded td.ownmix{display:none}
  .js-fold tr.folded td.cell.weakest{grid-column:1/-1}
  .js-fold tr:not(.folded) .fold-note{display:none}
  .back-top{display:block;margin:8px 0 0;text-align:right}
}
/* round 13, bank head of compliance F2: the lens's question under its column heading */
.grid-table th[scope="col"] .hq{font-style:italic}
.lens-rests{display:block;margin-top:4px}
/* round 13, approver F3: the harm chip when a key point about harm did not get through is outlined, not green */
.chip.harm-but{background:#fff;border:2px solid var(--warn);color:var(--ink)}
.dropped-list{margin:4px 0 6px}

/* personal details replaced before sending (Dan, 30 Sep 16:00, section 22.9) */
.pii-panel h3{margin-top:0}
.pii-hits{list-style:none;padding:0;margin:8px 0 0}
.pii-hits li{padding:8px 0;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.pii-hits .pii-snip{flex:1 1 260px;min-width:0;overflow-wrap:anywhere}
.pii-hits mark{background:#fdf1d3;color:var(--ink);font-weight:700;padding:0 3px;border-radius:3px;border-bottom:2px solid var(--warn)}
.pii-hits mark.kept{background:#fff;border-bottom:2px dashed var(--soft);font-weight:600}
.pii-warning{margin-bottom:0}

/* a link from the error summary lands a field with its label and error in view, below the phone's sticky bar
   (round 15, junior analyst F2). html has scroll-padding-top for the bar; this adds room for the label and error. */
form .f input, form .f textarea, form .f select{scroll-margin-top:120px}
form .f, form fieldset, form [id^="f-"]{scroll-margin-top:12px}
.pii-will{margin:6px 0}
.settings-sum summary{cursor:pointer;font-weight:600}.settings-sum .linklike{color:var(--accent);text-decoration:underline;font-weight:600}.fmt-how summary{cursor:pointer;font-weight:600;font-size:15px}

/* round 16 (M10): the decide page opens with the report's summary, then the decision; the rest is in More detail */
.dc-sum{border-left:8px solid #6b7591}
.dc-sum.band-red{border-left-color:#c2410c}.dc-sum.band-amber{border-left-color:#b7791f}.dc-sum.band-green{border-left-color:#1f7a5a}
.dc-sum h2{margin:0 0 4px}
.dc-verdict{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.dc-h{margin:12px 0 4px;font-size:17px}
.dc-fixes{margin:0 0 8px;padding-left:20px}
.dc-fixes li{margin:4px 0}
.dc-fix{display:block;color:#3d4660}
.dc-line{margin:8px 0}
.dc-ticks{border-left:3px solid var(--line);padding:4px 0 4px 14px;margin:6px 0 12px 26px}
.dc-ticks-h{margin:0 0 4px}
.dc-ticks .ack{margin:6px 0}
.dropped-list{margin:4px 0 0 28px}
.dc-more>summary{cursor:pointer;font-weight:700;font-size:17px}
.dc-more-body{margin-top:10px}
/* round 16 (M11, Dan 27.4): the governance trail's short fingerprint label and the per-test timeline */
.fp{margin-top:2px}
.fp>summary{cursor:pointer;color:#3d4660;font-size:14px}
.fp .hash{display:block;margin-top:2px}
.how-checks>summary{cursor:pointer;font-weight:700}
.how-checks>summary h2{display:inline;margin:0}
.tline{list-style:none;margin:0;padding:0}
.tline li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.tline li:first-child{border-top:0}
.tline .tl-when{color:#3d4660;font-size:15px}
.tline .tl-what b{display:block}
@media (max-width:600px){.tline li{grid-template-columns:1fr;gap:2px}}
/* UX round 1, M18 and M19: the governance trail as one card per entry, a human sentence first */
.trail-list{margin-top:8px}
.trail-entry{gap:6px}
.trail-entry .meta{margin:0;overflow-wrap:normal}
.trail-what{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.trail-said{margin:0;color:var(--fg)}
.trail-said q{font-family:var(--display);font-size:17px}
.trail-said .kicker{margin-right:6px}
.trail-details{border:0;background:none}
.trail-details>summary{font-size:15px;color:var(--mute);min-height:32px;padding:4px 0}
.trail-facts{margin:6px 0;display:grid;gap:4px}
.trail-facts div{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:10px}
.trail-facts dt{color:var(--mute)}
.trail-facts dd{margin:0}
@media(max-width:620px){.trail-facts div{grid-template-columns:1fr;gap:0}}
.trail-more{border:0;background:none}
.trail-more>summary{cursor:pointer;font-weight:600;min-height:32px}
.trail-more select{max-width:420px}
/* UX round 1, m1 and m2: Set your password */
.pw-card{max-width:500px;margin:32px auto 0;padding:28px 30px}
.pw-card h1{font-size:30px;margin:0 0 10px}
.pw-terms{display:flex;gap:10px;align-items:flex-start}
.pw-terms>span{flex:1;display:block}
.pw-go{width:100%;margin-top:6px}
@media(max-width:620px){.pw-card{margin-top:8px;padding:22px 18px}}
/* UX round 1, M19 and m13: Team as cards, and the invite link to copy */
.team-cards .lcard-top{align-items:flex-start}
.team-cards h3{font-family:var(--display);font-size:20px;margin:0}
.team-cards .actions{border-top:1px solid var(--line-2);padding-top:10px}
.invite-ready{border-left:4px solid var(--accent);margin-bottom:16px}
.invite-ready h2{margin-top:0}
.copyrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copyrow code{font-family:var(--mono);font-size:14px;background:var(--bg);padding:6px 8px;border-radius:4px;word-break:break-all;flex:1;min-width:0}