/* Chapter 16, Honesty is part of the job. Site tokens only, over /style.css and /playbook/kit/kit.css. The stock
   board's status colours (green, amber, red) are the example under test, so they sit on the SVG and on inline styles,
   never here; this file sets the page's own text and marks. */

/* the still */
.see .pb-still text{font-family:var(--font)}
.hn-s-title{fill:var(--ink);font-size:22px}
.hn-s-box{stroke:var(--faint);stroke-width:1.5}
.hn-s-head{fill:var(--muted);font-size:18px}
.hn-s-row{fill:var(--ink);font-size:20px}
.hn-s-key{fill:var(--muted);font-size:16px}
.hn-s-ratio{fill:var(--ink);font-size:30px}
.hn-s-read{fill:var(--muted);font-size:18px}
.hn-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the live viewer: four panels, each a base image with the simulated one developing over it */
.see{--hn-in:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.js .see .pb-stage > .pb-still{display:none}
.js .see .pb-stage > .pb-layer{display:block}
.see .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
.hn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 1.25rem}
@media (max-width:60rem){.hn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hn-panel{margin:0;min-width:0}
.hn-p-name{font-size:1.0625rem;color:var(--ink);margin-bottom:.5rem}
.hn-view{position:relative;overflow:hidden;border:1px solid var(--faint)}
.hn-lens{position:absolute;inset:0}
.hn-art{display:grid;place-items:center;aspect-ratio:9 / 10;padding:.5rem}
.hn-art svg,.hn-art img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.hn-sample{margin:0;padding:.55rem .75rem;font-size:1.125rem;line-height:1.3;border-top:1px solid var(--rule)}
.hn-sweep{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--spark);opacity:0;pointer-events:none}
.hn-p-read{font-size:.875rem;line-height:1.45;color:var(--muted);margin-top:.5rem;font-variant-numeric:lining-nums tabular-nums}
.hn-p-read b{font-weight:400;color:var(--ink);font-size:1.0625rem;display:block}

/* the controls */
.hn-controls{align-items:flex-start;gap:1.25rem 2rem;max-width:60rem}
.hn-src{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;flex-basis:100%}
.hn-src legend,.hn-q legend{color:var(--muted);font-size:var(--t-meta);padding:0;margin-bottom:.5rem;float:left;width:100%}
.hn-src label,.hn-q label{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem 1rem;border:1px solid var(--faint);font-size:var(--t-meta);line-height:1.3;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.hn-src label,.hn-q label{transition:border-color .2s,background-color .2s}}
.hn-src label:hover,.hn-src label:has(input:checked),.hn-q label:hover,.hn-q label:has(input:checked){border-color:var(--ink)}
.hn-src label:has(input:checked),.hn-q label:has(input:checked){background:var(--ground-raised)}
.hn-src label:has(input:focus-visible),.hn-q label:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.hn-src input,.hn-q input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.hn-src label::before,.hn-q label::before{content:"";flex:none;width:.55rem;height:.55rem;border:1px solid var(--faint);border-radius:50%}
.hn-src label:has(input:checked)::before,.hn-q label:has(input:checked)::before{background:var(--spark);border-color:var(--spark)}
.hn-file{display:flex;flex-direction:column;gap:.35rem;flex:1 1 20rem;min-width:0;max-width:30rem}
.hn-file label{font-size:var(--t-meta);color:var(--ink)}
.hn-file input{font:inherit;font-size:.9375rem;color:var(--ink);min-height:44px;max-width:100%}
.hn-file input::file-selector-button{font:inherit;color:var(--ink);background:none;border:1px solid var(--faint);border-radius:0;min-height:44px;padding:.5rem 1rem;margin-right:.75rem;cursor:pointer}
.hn-file input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.hn-hint{font-size:.875rem;color:var(--muted);line-height:1.45}
.hn-msg{font-size:var(--t-meta);color:var(--halo-lamp);line-height:1.45}
.hn-msg:empty{display:none}
.hn-colours{max-width:30rem}
.hn-colours > div{grid-template-columns:minmax(0,1fr) auto}
.hn-colours label{font-size:var(--t-body)}
.hn-colours input[type="color"]{width:4.5rem;height:44px;padding:2px;border:1px solid var(--faint);background:none;cursor:pointer}
.hn-colours input[type="color"]:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
html:not(.js) .hn-controls,html:not(.js) .hn-colours{display:none}
.hn-table-wrap{overflow-x:auto;max-width:min(40rem,100cqw);margin-top:1.5rem;margin-left:var(--hn-in)}
.hn-table,.hn-audit{border-collapse:collapse;font-size:var(--t-meta);line-height:1.4;width:100%}
.hn-table caption,.hn-audit caption{text-align:left;color:var(--muted);caption-side:top;padding-bottom:.5rem}
.hn-table th,.hn-table td,.hn-audit th,.hn-audit td{text-align:left;font-weight:400;padding:.45rem 1rem .45rem 0;border-top:1px solid var(--rule);vertical-align:top}
.hn-table thead th,.hn-audit thead th{color:var(--muted)}
.hn-table td{font-variant-numeric:lining-nums tabular-nums}
.hn-table td.is-fail{color:var(--halo-lamp)}

/* the clip */
.hn-clip{margin-top:1.75rem;max-width:40rem}
.hn-clip video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border:1px solid var(--faint)}
.hn-clip video::cue{font-family:var(--font);font-size:1.125rem;color:var(--ink);background:rgba(21,19,17,.85)}
.hn-clip-controls{display:flex;gap:.6rem;margin-top:.75rem}
html:not(.js) .hn-clip-controls{display:none}
.hn-transcript{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.hn-transcript p + p{margin-top:.5rem}

/* the claim checker */
.hn-claim{margin-top:1.5rem;max-width:40rem;display:flex;flex-direction:column;gap:1.25rem}
.hn-claim-in{display:flex;flex-direction:column;gap:.3rem}
.hn-claim-in label{font-size:var(--t-meta);color:var(--ink)}
.hn-claim-in input{font:inherit;font-size:1.0625rem;color:var(--ink);background:none;border:1px solid var(--faint);border-radius:0;min-height:44px;padding:.45rem .7rem;width:100%}
.hn-claim-in input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.hn-q{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
.hn-q legend{color:var(--ink);font-size:var(--t-body);line-height:1.45}
.hn-verdict{border:1px solid var(--faint);padding:1rem 1.1rem}
.hn-v-word{font-size:1.75rem;line-height:1.2;margin-top:.3rem;color:var(--ink)}
.hn-verdict.is-run .hn-v-word{color:var(--spark)}
.hn-verdict.is-drop .hn-v-word{color:var(--halo-lamp)}
.hn-v-why{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.4rem}
html:not(.js) .hn-q input:checked + span{color:var(--ink)}

/* the audit */
.hn-audit-wrap{overflow-x:auto;max-width:48rem;margin-top:1.5rem}
.hn-audit th[scope="row"]{color:var(--ink)}
.hn-audit td{color:var(--muted)}