/* Business health check page. Loaded after styles.css and quiz.css (which it shares screens, gate and results styles with).
   Everything is scoped under .fq. Band colours are set from health-check.js. */

/* Intro */
.fq #intro h1{max-width:14ch}
.fq .hc-tiles{list-style:none;padding:0;margin:0 0 2.25rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.fq .hc-tiles li{background:var(--cream);border-radius:4px;padding:1rem .9rem;min-height:6rem;display:flex;flex-direction:column;justify-content:space-between}
.fq .hc-tiles .n{font-family:var(--serif);font-weight:700;font-size:1.6rem;line-height:1;color:var(--orange)}
.fq .hc-tiles .name{font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1.15}

/* Area screens */
.fq .hc-q{font-size:1.2rem;font-style:italic;margin-bottom:1.25rem}
.fq .hc-legend{font-size:.9rem;font-weight:700;color:#555;margin-bottom:1.5rem}
.fq .statement{border:0;border-top:1px solid var(--fq-line);margin:0;padding:1.1rem 0 1.25rem;min-width:0}
.fq .statement legend{padding:0;font-size:1.05rem;line-height:1.4;margin-bottom:.8rem}
.fq .scale{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;max-width:26rem}
.fq .scale-opt{position:relative;display:block;cursor:pointer}
.fq .scale-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.fq .scale-opt .pill{display:block;text-align:center;font-weight:700;font-size:1.05rem;padding:.7rem 0;border:2px solid var(--black);border-radius:6px;background:#fff;transition:background-color .12s ease}
.fq .scale-opt:hover .pill{background:var(--cream)}
.fq .scale-opt input:checked + .pill{background:var(--fq-lime)}
.fq .scale-opt input:focus-visible + .pill{outline:3px solid var(--fq-purple);outline-offset:2px}
.fq .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fq #areaError{margin-top:1rem}

/* Results: the hero here is plain white on black with an orange accent, not a type colour */
.fq #rName,.fq .r-tagline{color:#fff}
.fq #rName .acc{color:var(--orange)}
.fq .hc-bars{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem}
.fq .hc-bars li{display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;align-items:baseline}
.fq .hc-bars .hc-name{font-weight:700}
.fq .hc-bars .hc-tag{display:inline-block;margin-left:.5rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:var(--black);color:#fff;border-radius:3px;padding:.15rem .4rem;vertical-align:1px}
.fq .hc-bars .hc-score{font-size:.92rem}
.fq .hc-track{grid-column:1/-1;display:block;height:14px;border-radius:3px;background:var(--fq-line);overflow:hidden}
.fq .hc-track i{display:block;height:100%}
.fq .hc-h3{font-size:1.25rem;margin:1.5rem 0 1rem}
.fq .hc-tie{font-size:.92rem;font-style:italic;color:#555}
.fq .hc-tie:empty{display:none}
.fq .hc-second{padding-top:3rem;padding-bottom:1rem}
.fq .hc-second h2,.fq .hc-rest h2{font-size:1.9rem;margin-bottom:.6rem}
.fq .hc-rest{padding-top:2rem;padding-bottom:3rem}
.fq .hc-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:1.1rem}
.fq .hc-list li{border-left:6px solid var(--band);padding:.1rem 0 .1rem 1rem}
.fq .hc-list strong{display:block;font-family:var(--serif);font-size:1.15rem}
.fq .hc-list span{display:block;font-size:.92rem;font-weight:700;margin:.1rem 0 .25rem}
.fq .hc-list p{margin:0}

@media (max-width:640px){
  .fq .hc-tiles{grid-template-columns:repeat(2,1fr)}
  .fq .hc-tiles li{min-height:5rem}
  .fq .scale{max-width:none}
}