/* kagai.me: free store check (check.html, the J10 detector)
   SH Added: October 2026. Only what shared.css lacks; tokens, .btn, .contact-form, .ctablock,
   .enquiry-hp, .sr-only and the focus ring all come from shared.css.
   Bands: the word is always written; colour only backs it up. Text colours on --ink-100:
   --pos #3F6B4A, --amber-ink #5C4310, --neg #9A4423 all pass WCAG AA for small text. */

/* Hero and section rail, same grid as the door page */
.check-hero{padding:var(--s-10) var(--s-6) var(--s-7);display:grid;grid-template-columns:200px 1fr;gap:var(--s-7)}
.check-hero .marker,.check-sec .marker{font:500 11px/1.5 var(--f-mono);color:var(--ink-55);text-transform:uppercase;letter-spacing:0.12em}
.check-hero .marker em,.check-sec .marker em{color:var(--amber);font-style:normal}
.check-hero h1{margin:0;max-width:20ch;font:500 64px/1.05 var(--f-display);letter-spacing:-0.022em;color:var(--ink-10)}
.check-hero h1 .accent{background-image:linear-gradient(var(--amber),var(--amber));background-size:100% 2px;background-position:0 95%;background-repeat:no-repeat;padding-bottom:2px}
.check-hero .lede{margin-top:var(--s-5);max-width:58ch;font:400 19px/1.55 var(--f-body);color:var(--ink-25)}
.check-sec{padding:var(--s-7) var(--s-6) var(--s-9);display:grid;grid-template-columns:200px 1fr;gap:var(--s-7);border-top:1px solid var(--rule)}
.check-sec > div{min-width:0}

/* The URL form */
.check-form{max-width:640px}
.check-form input{font-size:20px}
.check-turnstile{min-height:65px}
.check-status{margin:0;font:400 14px/1.55 var(--f-body);color:var(--ink-25);max-width:60ch}
.check-status:empty{display:none}

/* Progress */
.reading-progress h2,.reading-message h2{margin:0 0 var(--s-4)}
.reading-progress p,.reading-message p{margin:var(--s-4) 0 0;font:400 17px/1.55 var(--f-body);color:var(--ink-25);max-width:56ch}
.progress-bar{position:relative;height:3px;max-width:480px;background:var(--ink-95);overflow:hidden;border-radius:var(--r-1)}
.progress-bar span{position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--amber);animation:checkslide 1.6s var(--ease-out) infinite}
@keyframes checkslide{to{left:100%}}
.reading-message .actions{margin-top:var(--s-5);display:flex;gap:var(--s-3);flex-wrap:wrap}
.reading-message .btn,.reading-again .btn-link{cursor:pointer}
[tabindex="-1"]:focus{outline:none}

/* Reading */
.reading-head h2{margin:0;max-width:24ch;overflow-wrap:anywhere}
.reading-meta{margin:var(--s-3) 0 0;font:400 14px/1.5 var(--f-body);color:var(--ink-40)}
.reading-notes{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);background:var(--ink-95);border-left:2px solid var(--amber);max-width:720px}
.reading-notes ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.reading-notes li{font:400 15px/1.55 var(--f-body);color:var(--ink-15)}
.reading-block{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--ink-15);max-width:900px}
.reading-block h3{margin:0;font:500 28px/1.25 var(--f-display);letter-spacing:-0.012em;color:var(--ink-10)}
.reading-block .block-sub{margin:var(--s-3) 0 var(--s-5);font:400 15px/1.55 var(--f-body);color:var(--ink-40);max-width:60ch}

/* Metric rows: plain name, technical name small, band chip, number small */
.metric-list{list-style:none;margin:0;padding:0}
.metric{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:0.5px solid var(--rule)}
.metric-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.metric-label{font:500 16px/1.35 var(--f-body);color:var(--ink-15)}
.metric-tech{font:400 11px/1.4 var(--f-mono);color:var(--ink-55);letter-spacing:0.04em}
.metric-result{display:flex;align-items:center;gap:var(--s-3);flex:0 0 auto}
.metric-value{font:400 12px/1 var(--f-mono);color:var(--ink-40);min-width:5ch;text-align:right}
.band{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--f-mono);letter-spacing:0.08em;text-transform:uppercase;padding:6px 9px;border:1px solid currentColor;border-radius:var(--r-1);white-space:nowrap}
.band::before{content:"";width:8px;height:8px;flex:0 0 8px;background:currentColor}
.band-good{color:var(--pos)}
.band-good::before{border-radius:50%}
.band-needs-work{color:var(--amber-ink);background:rgba(232,199,112,0.25)}
.band-needs-work::before{width:0;height:0;background:none;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid currentColor;flex-basis:10px}
.band-poor{color:var(--neg)}
.band-none{color:var(--ink-40)}
.band-none::before{display:none}

.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
.lab-col h4{margin:0 0 var(--s-2);font:500 11px/1 var(--f-mono);color:var(--amber-ink);letter-spacing:0.1em;text-transform:uppercase}

/* Theme and scripts */
.facts{margin:var(--s-4) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-7)}
.fact{padding:var(--s-3) 0;border-bottom:0.5px solid var(--rule)}
.fact dt{font:500 10px/1.4 var(--f-mono);color:var(--ink-55);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--s-2)}
.fact dd{margin:0;font:500 18px/1.35 var(--f-display);color:var(--ink-10);overflow-wrap:anywhere}

/* The three problems */
.problem-list{margin:0;padding:0;list-style:none;counter-reset:prob}
.problem-list li{counter-increment:prob;display:flex;gap:var(--s-4);align-items:baseline;padding:var(--s-3) 0;border-bottom:0.5px solid var(--rule);font:500 18px/1.4 var(--f-display);color:var(--ink-10)}
.problem-list li::before{content:"0" counter(prob);font:500 11px/1 var(--f-mono);color:var(--amber-ink);letter-spacing:0.12em;flex:0 0 auto}

/* CTA and send form */
.reading-cta{margin-top:var(--s-8)}
.reading-cta .btn{cursor:pointer}
.send-block .contact-form{max-width:720px}
.send-block .btn{cursor:pointer}
.send-done p{margin:0;font:400 16px/1.6 var(--f-body);color:var(--ink-25);max-width:60ch}
.send-done a{border-bottom:1px solid var(--amber);color:var(--ink-15)}
.reading-again{margin:var(--s-7) 0 0}

/* Tablet */
@media (max-width: 1024px){
  .check-hero{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-9) var(--s-5) var(--s-7)}
  .check-hero h1{font-size:50px}
  .check-sec{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-7) var(--s-5) var(--s-8)}
  .lab-grid{grid-template-columns:1fr;gap:var(--s-5)}
}
/* Phone, down to 320px */
@media (max-width: 640px){
  .check-hero{padding:var(--s-7) var(--s-5) var(--s-6)}
  .check-hero h1{font-size:34px;line-height:1.08}
  .check-hero .lede{font-size:16px;margin-top:var(--s-4)}
  .check-sec{padding:var(--s-6) var(--s-5) var(--s-7)}
  .reading-head h2{font-size:28px;line-height:1.15}
  .reading-block h3{font-size:22px}
  .contact-form .row{grid-template-columns:1fr}
  .contact-form .submit-row{flex-direction:column;align-items:stretch;gap:var(--s-4)}
  .facts{grid-template-columns:1fr}
  .metric{flex-wrap:wrap;gap:var(--s-2)}
  .problem-list li{font-size:16px}
  .reading-message .actions{flex-direction:column;align-items:stretch}
  .reading-message .btn{justify-content:center}
}
@media (max-width: 360px){
  .check-hero h1{font-size:30px}
  .check-sec,.check-hero{padding-left:var(--s-4);padding-right:var(--s-4)}
}

/* SH Updated: October 2026 - the hidden attribute wins on this page. .btn, .contact-form and .check-sec
   set display, which beats the browser's [hidden] rule, so "Keep waiting" showed on finished readings.
   Scoped to the check sections so shared.css and other pages are untouched. */
.check-sec[hidden],.check-sec [hidden]{display:none}