/* The SIS Health Check wizard. Builds on styles.css tokens. */

.hc-wrap { padding: clamp(2rem, 5vw, 3.5rem) var(--pad-x) var(--section-y); }
.hc-start, #hc { max-width: 46rem; margin: 0 auto; }
.hc-wrap [hidden] { display: none; }

/* Start screen */
.hc-start { display: grid; grid-template-columns: 1fr 13rem; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hc-start h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: var(--tracking-heading); margin-bottom: 1rem; }
.hc-start .lede { margin: 0 0 1.25rem; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; }
.hc-chips li { font-size: var(--text-note); font-weight: 600; color: var(--brand); background: var(--brand-tint); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; }
.hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hc-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand); border-bottom: 2px solid var(--brand-edge); cursor: pointer; }
.hc-linkbtn:hover { border-bottom-color: var(--brand); }
.hc-resume { margin-top: 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.hc-resume p { margin: 0; }
.hc-fine { margin-top: 1.5rem; font-size: var(--text-note); color: var(--ink-dim); }
.hc-preview { width: 100%; height: auto; }
.hc-preview .hc-dial__fill { stroke: var(--brand); }

/* Progress */
.hc-top { margin-bottom: 1.75rem; }
.hc-progress { height: 6px; background: var(--bg-muted); border-radius: var(--radius-pill); overflow: hidden; }
.hc-progress__fill { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); transition: width 0.35s var(--ease); }
.hc-count { margin: 0.6rem 0 0; font-size: var(--text-note); color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* Question card */
.hc-card { animation: hc-in 0.28s var(--ease); }
@keyframes hc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hc-card { animation: none; } .hc-progress__fill { transition: none; } }
.hc-area { margin-bottom: 0.5rem; }
.hc-intro { color: var(--ink-muted); margin: 0 0 1.25rem; max-width: 40rem; }
.hc-q { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; letter-spacing: var(--tracking-heading); margin: 0 0 1.5rem; outline: none; }
.hc-hint { margin: -0.75rem 0 1rem; color: var(--ink-dim); font-size: var(--text-note); }

.hc-options { display: grid; gap: 0.6rem; }
.hc-opt {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left;
  padding: 0.95rem 1.1rem; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated); color: var(--ink-strong); font: inherit; font-size: 1.0625rem;
  cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform 0.12s var(--ease);
}
.hc-opt:hover { border-color: var(--brand-edge); background: var(--brand-tint); }
.hc-opt:active { transform: scale(0.99); }
.hc-opt:focus-visible { outline: 3px solid var(--brand-edge); outline-offset: 2px; }
.hc-opt.is-on { border-color: var(--brand); background: var(--brand-tint); }
.hc-key {
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 6px;
  border: 1.5px solid var(--border); font-family: var(--font-data); font-size: 0.8125rem; color: var(--ink-dim);
}
.hc-opt.is-on .hc-key { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.hc-input { width: 100%; padding: 0.95rem 1.1rem; border: 1.5px solid var(--border); border-radius: 8px; font: inherit; font-size: 1.0625rem; background: var(--bg-elevated); color: var(--ink-strong); }
.hc-input:focus { outline: 3px solid var(--brand-edge); outline-offset: 2px; border-color: var(--brand); }
.hc-continue { margin-top: 1.25rem; }

.hc-nav { margin-top: 1.5rem; }
.hc-back { background: none; border: 0; padding: 0.25rem 0; font: inherit; font-size: var(--text-note); color: var(--ink-dim); cursor: pointer; }
.hc-back::before { content: "\2190\00a0"; }
.hc-back:hover { color: var(--ink-strong); }

/* Result */
.hc-hero { display: grid; grid-template-columns: 12rem 1fr; gap: 1.75rem; align-items: center; padding: 1.5rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
.hc-dial { width: 100%; height: auto; }
.hc-dial__track { fill: none; stroke: var(--bg-muted); }
.hc-dial__fill { fill: none; stroke: var(--brand); }
.hc-dial__score { font-family: var(--font-display); font-size: 64px; font-weight: 600; fill: var(--ink-strong); text-anchor: middle; }
.hc-dial__of { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-dim); text-anchor: middle; }
.hc-band { font-size: clamp(1.75rem, 3.6vw, 2.25rem); color: var(--brand); margin: 0 0 0.6rem; outline: none; }
.hc-hero .hc-intro { margin: 0; }

.hc-bars { margin: 1.5rem 0 0; filter: blur(5px); user-select: none; pointer-events: none; opacity: 0.85; }
.hc-bar { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: center; padding: 0.4rem 0; }
.hc-bar__name { font-weight: 600; font-size: var(--text-note); }
.hc-bar__track { height: 8px; background: var(--bg-muted); border-radius: var(--radius-pill); overflow: hidden; }
.hc-bar__fill { display: block; height: 100%; background: var(--brand); }

.hc-gate { margin-top: 1.75rem; padding: 1.5rem; border: 1.5px solid var(--brand-edge); border-radius: 10px; background: var(--bg-elevated); display: grid; gap: 1rem; }
.hc-gate__title { font-size: 1.375rem; margin: 0; }
.hc-gate .field { display: grid; gap: 0.35rem; }
.hc-gate label { font-weight: 600; font-size: var(--text-note); }
.hc-gate input[type="text"], .hc-gate input[type="email"] { padding: 0.75rem 0.9rem; border: 1.5px solid var(--border); border-radius: 6px; font: inherit; background: #fff; color: var(--ink-strong); }
.hc-gate input:focus { outline: 3px solid var(--brand-edge); outline-offset: 1px; border-color: var(--brand); }
.hc-gate .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--text-note); color: var(--ink-muted); }
.hc-gate .consent input { margin-top: 0.2rem; }
.hc-gate .consent label { font-weight: 400; }
.hc-gate .btn { justify-self: start; }

@media (max-width: 640px) {
  .hc-start { grid-template-columns: 1fr; }
  .hc-preview { max-width: 11rem; }
  .hc-hero { grid-template-columns: 1fr; text-align: center; }
  .hc-hero .hc-dial { max-width: 12rem; margin: 0 auto; }
  .hc-bar { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* The optional profile questions on the report form. */
.hc-extra { margin: 0.25rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--border); display: grid; gap: 1.25rem; min-width: 0; }
.hc-extra__title { padding: 0; font-weight: 600; font-size: var(--text-ui); color: var(--ink-strong); margin-bottom: 0.25rem; }
.hc-extra .field { display: grid; gap: 0.35rem; margin: 0; }
.hc-extra select { padding: 0.7rem 0.9rem; border: 1.5px solid var(--border); border-radius: 6px; font: inherit; background: #fff; color: var(--ink-strong); max-width: 100%; }
.hc-extra select:focus { outline: 3px solid var(--brand-edge); outline-offset: 1px; border-color: var(--brand); }
.hc-extra__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.hc-extra__label { padding: 0; font-weight: 600; font-size: var(--text-note); margin-bottom: 0.5rem; }
.hc-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.4rem 1rem; }
.hc-tick { display: flex; gap: 0.5rem; align-items: center; font-size: var(--text-note); }
.hc-tick label { font-weight: 400; }