/* 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}
.ticks{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
@media(max-width:900px){.ticks{grid-template-columns:1fr}}
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.ticks .tick{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;background:var(--line-2);color:var(--ink)}
.ticks li.done .tick{background:var(--acc);color:#fff}
.ticks .hint{margin:2px 0 0}

/* 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:#f6d3c4;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:auto;-webkit-hyphens:auto}
/* 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 #b8410f}
.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}