/* rc3-tools.css */
/* ==========================================================================
   RC v3 — Interactive tools (NOSE instrument, symptom reading guide)
   Replaces the RC2 tools stylesheet, which referenced deleted design tokens
   and left the NOSE instrument rendering at roughly twice its needed height.
   Behaviour is untouched: controls stay disabled until JavaScript initialises.
   ========================================================================== */

.nose-score {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--rule-strong);
  background: var(--white);
}

.nose-score fieldset {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(320px, 1.5fr);
  align-items: center;
  gap: 10px clamp(18px, 2.4vw, 32px);
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
.nose-score fieldset:first-of-type { border-top: 0; padding-top: 0; }

/* A <legend> inside a grid fieldset is placed by the fieldset, not the grid,
   so it is floated out of the anonymous box and sized to the first column. */
.nose-score legend {
  float: left;
  width: min(100%, 300px);
  padding: 0;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.nose-score legend + * { clear: none; }

.nose-score__options {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.nose-score__options label {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  font-size: inherit;
}

/* The native control stays in the accessibility tree and keeps its disabled
   state; only its painted box is replaced by the span below. */
.nose-score__options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.nose-score__options span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  transition: color var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.nose-score__options span strong { font-size: 14px; font-weight: 800; }
.nose-score__options label:hover span { background: var(--mint); border-color: var(--navy); }
.nose-score__options input:checked + span {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
.nose-score__options input:focus-visible + span {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.nose-score__error {
  grid-column: 1 / -1;
  margin-top: 10px;
  color: #8a2d14;
  font-size: 14px;
  font-weight: 700;
}

.nose-score__result {
  margin-top: 20px;
  padding: clamp(18px, 2.2vw, 26px);
  border-left: 4px solid var(--yellow);
  background: var(--mint);
}
.nose-score__result:focus { outline: 3px solid var(--navy); outline-offset: 3px; }

.nose-score__number {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  letter-spacing: var(--track-display);
}

.nose-score__reset {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nose-score__reset:hover { color: var(--navy); }

.nose-score__source {
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: 13px;
}

/* Below the two-column threshold the legend returns to its own line. */
@media (max-width: 860px) {
  .nose-score fieldset { grid-template-columns: 1fr; gap: 10px; }
  .nose-score legend { float: none; width: auto; margin-bottom: 4px; }
  .nose-score__options { grid-column: 1; }
}

@media (max-width: 560px) {
  .nose-score__options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .nose-score__options span {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 56px;
    padding: 7px 3px;
    font-size: 10px;
  }
  .nose-score__options span strong { font-size: 13px; }
}