/* Supervision Hub interactive tools */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.sh-tools-grid{display:grid;gap:28px}
.sh-tool{padding:32px;scroll-margin-top:96px}
.sh-tool__head{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:center;margin-bottom:20px}
.sh-tool__title{font-size:28px;margin-bottom:6px}
.sh-tool__illus{width:180px;height:auto}
.sh-tool__small{font-size:var(--text-body-sm);margin-top:16px}
.sh-tool .status.info,.sh-quiz__note{color:var(--ink);background:var(--surface-selected);border-inline-start:3px solid var(--lattice-primary);border-radius:var(--radius-sm);padding:var(--space-md) var(--space-lg);margin:12px 0}

/* Quiz */
.sh-quiz__progress{font-size:var(--text-ui);color:var(--text-muted);margin-bottom:8px}
.sh-tools-js .sh-quiz__progress:empty{display:none}
.sh-quiz__step{border:0;padding:0;margin:0 0 20px}
.sh-quiz__q{font-size:var(--text-h4);line-height:1.3;margin-bottom:14px;padding:0}
.sh-quiz__q:focus{outline:none}
.sh-opts{display:grid;gap:10px}
.sh-opt{display:flex;gap:12px;align-items:center;min-height:52px;padding:12px 16px;border:1px solid var(--border-control);border-radius:var(--radius-md);background:var(--canvas);cursor:pointer}
.sh-opt:hover{background:var(--surface-hover)}
.sh-opt input{width:20px;height:20px;accent-color:var(--lattice-primary);flex:none;margin:0}
.sh-opt:has(input:checked){background:var(--surface-selected);border-color:var(--lattice-primary);box-shadow:inset 3px 0 0 var(--lattice-primary)}
.sh-opt:has(input:focus-visible){outline:3px solid var(--focus-outer);outline-offset:2px}
.sh-opt:has(input:disabled){cursor:default}
.sh-opt.is-correct{background:var(--surface-selected);border-color:var(--lattice-primary);box-shadow:inset 3px 0 0 var(--lattice-primary)}
.sh-opt.is-correct span::after{content:" (correct answer)";color:var(--lattice-primary)}
.sh-opt.is-wrong{background:var(--danger-bg);border-color:var(--danger)}
.sh-opt.is-wrong span::after{content:" (your answer)";color:var(--danger)}
.sh-quiz__feedback{margin-top:14px;padding:14px 16px;background:var(--surface-cream);border-radius:var(--radius-sm)}
.sh-quiz__feedback p{margin:0 0 4px}
.sh-quiz__error{color:var(--danger);margin:0 0 12px}
.sh-quiz__nav{display:flex;gap:12px;flex-wrap:wrap}
.sh-quiz__nav [hidden]{display:none}
.sh-quiz__result{padding:20px;border-radius:var(--radius-md);background:linear-gradient(160deg,var(--surface-mint),var(--canvas));border:1px solid var(--border-subtle)}
.sh-quiz__result:focus{outline:3px solid var(--focus-outer);outline-offset:2px}
.sh-quiz__result .sh-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 8px}
.sh-linkbtn{background:none;border:0;padding:0;color:var(--text-link);text-decoration:underline;font:inherit;cursor:pointer}
/* Without JS: show every question, hide step buttons */
html:not(.sh-tools-js) .sh-quiz__nav,html:not(.sh-tools-js) .sh-flip__btn{display:none}

/* Calculator */
.sh-calc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-bottom:20px}
.sh-calc__grid label{display:block;font-size:var(--text-ui);margin-bottom:6px}
.sh-calc__out{padding:20px;border-radius:var(--radius-md);background:linear-gradient(160deg,var(--surface-mint),var(--canvas));border:1px solid var(--border-subtle)}
.sh-calc__big{font-size:40px;line-height:1.1;letter-spacing:-0.01em;font-weight:600;margin:0 0 12px}
.sh-calc__big span{display:block;font-size:var(--text-body);font-weight:500;color:var(--text-muted);letter-spacing:0}
.sh-calc__notes{margin:0 0 8px;padding-left:20px}
.sh-calc__notes li{margin-bottom:6px}

/* Flip cards */
.sh-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.sh-flip{position:relative;display:flex;flex-direction:column;min-height:230px;padding:20px;border-radius:var(--radius-md);border:1px solid var(--ink);background:var(--canvas)}
.sh-flip--mint{background:linear-gradient(160deg,var(--art-mint),var(--art-pale-aqua))}
.sh-flip--aqua{background:linear-gradient(160deg,var(--art-pale-aqua),var(--surface-mint))}
.sh-flip--spring{background:linear-gradient(160deg,var(--art-spring),var(--lattice-secondary))}
.sh-flip--lavender{background:linear-gradient(160deg,var(--art-lavender),var(--canvas))}
.sh-flip.is-turned{background:var(--canvas)}
.sh-flip__title{font-size:var(--text-h4);line-height:1.2;margin:0 0 6px}
.sh-flip__by{font-size:var(--text-ui);color:var(--ink);opacity:.8;margin:0}
.sh-flip__back{font-size:var(--text-body-sm);margin-top:12px}
.sh-flip__back p{margin:0 0 10px}
.sh-flip__ask{padding-top:10px;border-top:1px solid var(--border-subtle)}
.sh-flip__btn{margin-top:auto;align-self:flex-start;min-height:44px;padding:10px 16px;border:1px solid var(--ink);border-radius:var(--radius-md);background:var(--canvas);color:var(--ink);font:inherit;font-size:var(--text-ui);cursor:pointer}
.sh-flip__btn:hover{text-decoration:underline;background:var(--surface-hover)}
.sh-flip__btn:focus-visible{outline:3px solid var(--focus-outer);outline-offset:2px}
.sh-flip__front+.sh-flip__back+.sh-flip__btn{margin-top:auto}

/* Tools teaser cards */
.sh-tool-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.sh-tool-link{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--canvas);box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none}
.sh-tool-link:hover strong{text-decoration:underline}
.sh-tool-link:focus-visible{outline:3px solid var(--focus-outer);outline-offset:2px}
.sh-tool-link .sh-art{min-height:0;padding:10px;margin-bottom:8px}
.sh-tool-link img{max-width:200px;margin:0 auto}
.sh-tool-link span{color:var(--text-muted);font-size:var(--text-body-sm)}

@media (max-width:700px){
.sh-tool{padding:22px}
.sh-tool__head{grid-template-columns:1fr}
.sh-tool__illus{width:140px;order:-1}
.sh-calc__grid{grid-template-columns:1fr}
.sh-calc__big{font-size:32px}
.sh-tool-links{grid-template-columns:1fr 1fr;gap:12px}
.sh-tool-link{padding:10px}
.sh-tool-link img{max-width:110px}
.sh-tool-link span{display:none}
.sh-tool-link strong{font-size:var(--text-body-sm)}
}
@media (forced-colors:active){.sh-opt,.sh-flip,.sh-flip__btn{border-color:ButtonText}}