/* Adaa — container scan (section #scan). Markup is in index.html, behaviour in assets/js/scan.js.
   Light section on #FFFFFF, so the palette here is the navy-on-white one the approach section uses. */

[data-scan-form][hidden],[data-scan-busy][hidden],[data-scan-result][hidden],[data-scan-paste][hidden],[data-scan-error][hidden],[data-scan-more][hidden],[data-scan-fine][hidden]{display:none!important}

/* ---- the input row */
[data-scan-row]{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
[data-scan-input]{flex:1 1 280px;min-width:0;box-sizing:border-box;margin:0;background:#FFFFFF;border:1px solid rgba(0,25,45,0.22);border-radius:0;color:#00192D;font-family:'Courier New',monospace;font-size:15px;letter-spacing:0.02em;line-height:1.5;padding:15px 18px;-webkit-appearance:none;appearance:none;transition:border-color 200ms ease,box-shadow 200ms ease}
[data-scan-input]::placeholder{color:rgba(0,25,45,0.38)}
[data-scan-input]:focus{outline:none;border-color:#043BC1;box-shadow:0 0 0 3px rgba(4,59,193,0.12)}
/* 16px so iOS Safari does not zoom the page when the field takes focus */
@media (max-width:760px),(hover:none) and (pointer:coarse){[data-scan-input]{font-size:16px}}
[data-scan-go]{flex:none;background:#043BC1;border:1px solid #043BC1;color:#FFFFFF;font-family:inherit;font-size:14px;font-weight:600;padding:15px 28px;cursor:pointer;transition:background 200ms ease}
[data-scan-go]:hover{background:#1A52D4}
[data-scan-go][disabled]{opacity:0.5;cursor:default}
[data-scan-note]{margin:0;font-family:'Courier New',monospace;font-size:12.5px;letter-spacing:0.02em;line-height:1.6;color:rgba(0,25,45,0.55)}
[data-scan-note] a,[data-scan-swap]{color:#043BC1;text-decoration:underline;text-underline-offset:3px}
[data-scan-swap]{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;letter-spacing:inherit;cursor:pointer}
[data-scan-swap]:hover{color:#1A52D4}
[data-scan-paste] textarea{width:100%;box-sizing:border-box;margin:0;background:#FFFFFF;border:1px solid rgba(0,25,45,0.22);border-radius:0;color:#00192D;font-family:'Courier New',monospace;font-size:13px;line-height:1.5;padding:14px 16px;min-height:150px;resize:vertical}
[data-scan-paste] textarea:focus{outline:none;border-color:#043BC1}
[data-scan-error]{margin:0;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid rgba(255,107,91,0.5);background:rgba(255,107,91,0.07);font-size:14.5px;line-height:1.6;color:#00192D}
[data-scan-error] i{display:block;width:10px;height:10px;margin-top:6px;flex:none;background:#FF6B5B}

/* ---- running */
[data-scan-busy]{display:flex;flex-direction:column;gap:14px}
[data-scan-steps]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-family:'Courier New',monospace;font-size:12.5px;letter-spacing:0.02em;color:rgba(0,25,45,0.4)}
[data-scan-steps] li{display:flex;align-items:center;gap:12px;transition:color 200ms ease}
[data-scan-steps] li i{display:block;width:10px;height:10px;flex:none;background:#00192D;opacity:0.12;transition:opacity 200ms ease,background 200ms ease}
[data-scan-steps] li[data-on]{color:#00192D}
[data-scan-steps] li[data-on] i{background:#043BC1;opacity:1;animation:scanBeat 1s steps(1) infinite}
[data-scan-steps] li[data-done]{color:rgba(0,25,45,0.55)}
[data-scan-steps] li[data-done] i{background:#043BC1;opacity:0.45;animation:none}
@keyframes scanBeat{0%,50%{opacity:1}50.01%,100%{opacity:0.25}}

/* ---- the score */
[data-scan-head]{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
[data-scan-score]{margin:0;font-family:Syne,sans-serif;font-weight:800;font-size:clamp(48px,6vw,76px);line-height:1;letter-spacing:-0.04em;color:#00192D}
[data-scan-score] span{margin-left:.18em;font-size:.34em;font-weight:700;letter-spacing:-0.01em;color:rgba(0,25,45,0.45)}
[data-scan-grade]{margin:0;font-family:Syne,sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-0.02em;color:#043BC1}
[data-scan-bar]{display:flex;gap:4px}
[data-scan-bar] i{display:block;flex:1;height:10px;background:#00192D;opacity:0.1}
[data-scan-bar] i[data-on]{opacity:1;background:var(--c,#043BC1)}
[data-scan-target]{margin:0;font-family:'Courier New',monospace;font-size:12.5px;letter-spacing:0.02em;line-height:1.6;color:rgba(0,25,45,0.55);overflow-wrap:anywhere}
[data-scan-target] b{font-weight:400;color:#00192D}

/* ---- the facts strip: what the container actually holds */
[data-scan-facts]{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin:0;padding:18px 0;border-top:1px solid #E2E7F2;border-bottom:1px solid #E2E7F2}
[data-scan-facts] span{display:flex;flex-direction:column;gap:3px;min-width:0}
[data-scan-facts] b{font-family:Syne,sans-serif;font-weight:700;font-size:21px;letter-spacing:-0.01em;color:#00192D}
[data-scan-facts] small{font-family:'Courier New',monospace;font-size:11px;letter-spacing:0.02em;color:rgba(0,25,45,0.5)}

/* ---- findings */
[data-scan-list]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
[data-scan-list] li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid #E2E7F2}
[data-scan-list] li:last-child{border-bottom:1px solid #E2E7F2}
[data-scan-list] li > i{display:block;width:10px;height:10px;margin-top:6px;flex:none;background:var(--c,#043BC1)}
[data-scan-list] li[data-level="high"]{--c:#FF6B5B}
[data-scan-list] li[data-level="warn"]{--c:#FFC44D}
[data-scan-list] li[data-level="ok"]{--c:#2ED3B7}
[data-scan-list] li[data-level="info"]{--c:#4D7EFF}
[data-scan-list] b{display:block;font-family:Syne,sans-serif;font-weight:700;font-size:16.5px;line-height:1.35;letter-spacing:-0.01em;color:#00192D}
[data-scan-list] p{margin:6px 0 0;max-width:68ch;font-size:14.5px;line-height:1.65;color:rgba(0,25,45,0.68)}
[data-scan-list] em{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:'Courier New',monospace;font-size:11.5px;font-style:normal;letter-spacing:0.02em;color:rgba(0,25,45,0.45)}
[data-scan-list] em::before{content:"";display:block;width:8px;height:8px;background:rgba(0,25,45,0.28);flex:none}
[data-scan-more]{background:none;border:0;padding:0;margin:0;font-family:inherit;font-size:13.5px;font-weight:600;color:#043BC1;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;transition:color 200ms ease,gap 200ms ease}
[data-scan-more]:hover{color:#1A52D4;gap:12px}

/* ---- actions */
[data-scan-actions]{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
[data-scan-send]{background:#043BC1;border:1px solid #043BC1;color:#FFFFFF;font-family:inherit;font-size:14px;font-weight:600;padding:14px 24px;cursor:pointer;transition:background 200ms ease}
[data-scan-send]:hover{background:#1A52D4}
[data-scan-again]{background:none;border:0;padding:0;font-family:inherit;font-size:13px;color:rgba(0,25,45,0.55);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color 200ms ease}
[data-scan-again]:hover{color:#043BC1}

/* the three notes under the panel follow the same breakpoint as [data-cols] in site.css */
@media (max-width:880px){[data-scan-go]{flex:1 1 100%}[data-cols-3]{grid-template-columns:1fr!important}}
/* The scan's top edge dissolves out of the navy Lab above it. On phones lab.css hides the Lab, so the
   white Approach section is the neighbour instead and the edge has to dissolve from white — the same
   correction lab.css already makes for the Signal check. */
@media (max-width:640px){#scan > [data-dither] > svg{fill:#FFFFFF}}
@media (prefers-reduced-motion:reduce){[data-scan-steps] li[data-on] i{animation:none}}
@media print{[data-scan-form],[data-scan-busy],[data-scan-actions]{display:none!important}}