/* shared/carer-about-you.css
 *
 * The three questions Grace answers once, just after her account exists. They
 * sit above her eight checks and disappear when all three are in.
 *
 * TOKENS ONLY, AND THE SIZES COME FROM THE SCALE. The first draft of this file
 * wrote raw rem values and one of them was .9375rem, which is 15px and below
 * the locked floor. Three guards in test/design-system.test.js caught it: the
 * scale rule, the heading specificity rule and the tap target rule. Every one
 * of them was pointing at something a person would have felt.
 *
 * SPECIFICITY IS LOAD BEARING HERE, not style. The design system sets
 * `.hds h1-h4` at (0,1,1) and `.hds button:not(.ds-btn)` at (0,2,1), so a bare
 * single class loses to both and the size written in it never applies at all.
 * That is why the headings and the button carry a second selector: without it
 * this screen silently inherits sizes nobody chose for it.
 *
 * The numbers are the locked accessibility ones: 56px for the primary action,
 * 48px minimum for anything else you tap, nothing below 16px, line height 1.5
 * for body and 1.2 for headings. Reasoned for somebody holding a phone one
 * handed, and a carer fills this in on a bus as often as at a desk.
 */

.ay {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--r-lg, 16px);
  padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-5);
}
.hds .ay-h { font-size: var(--fs-lead); line-height: var(--lh-head); margin: 0 0 var(--sp-1); }
.ay-lede { margin: 0 0 var(--sp-5); font-size: var(--fs-min); line-height: var(--lh-body); color: var(--t2); }

.ay-q { margin-bottom: var(--sp-5); }
.hds .ay-q__title { font-size: var(--fs-min); font-weight: 700; line-height: var(--lh-head); margin: 0 0 var(--sp-1); }
.ay-q__hint { margin: 0 0 var(--sp-3); font-size: var(--fs-min); line-height: var(--lh-body); color: var(--t3); }

.ay-choices { display: grid; gap: var(--sp-2); }
/* THE WHOLE ROW IS THE TARGET, not the little box. A 22px checkbox is a hard
   thing to hit with a thumb, and the label being clickable is what makes the
   48px height mean anything at all. */
.ay-choice {
  display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--bd-strong); border-radius: var(--r-md, 12px);
  background: var(--page); cursor: pointer;
}
.ay-choice:hover { border-color: var(--brand); }
.ay-choice.is-on { border-color: var(--brand); background: var(--brand-tint); }
.ay-choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.ay-choice__body { display: block; }
.ay-choice__label { display: block; font-size: var(--fs-min); font-weight: 700; color: var(--t1); }
.ay-choice__hint { display: block; margin-top: 2px; font-size: var(--fs-min); line-height: var(--lh-body); font-weight: 400; color: var(--t3); }

.ay-input {
  width: 100%; max-width: 220px; min-height: var(--tap-min); padding: 0 var(--sp-4);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md, 12px);
  font-family: var(--font-body); font-size: var(--fs-min); text-transform: uppercase;
  background: var(--page); color: var(--t1);
}
.ay-input:focus-visible { outline: 3px solid var(--t1); outline-offset: 2px; }

.ay-check {
  display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--tap-min);
  cursor: pointer; font-size: var(--fs-min); line-height: var(--lh-body); color: var(--t1);
}
.ay-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }

/* AN ERROR CARRIES A BORDER AND A WORD, never a colour on its own. Locked
   rule, and it is the difference between a screen that works for somebody
   colour blind and one that does not. */
.ay-err {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-min); line-height: var(--lh-body);
  color: var(--alert); background: var(--alert-bg);
  border: 1px solid var(--alert); border-radius: var(--r-sm, 10px);
}

.ay-actions { margin-top: var(--sp-1); }
/* A REAL BUTTON AT THE PRIMARY TARGET. The :not(.ds-btn) and the .hds prefix
   are what let this beat the design system's own button rule; without them the
   56px below never applies and this is a 48px control pretending otherwise. */
.hds .ay-save:not(.ds-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-primary); padding: 0 var(--sp-5);
  border: 1px solid var(--brand); border-radius: var(--r-md, 12px);
  background: var(--brand); color: var(--on-brand);
  font-family: var(--font-body); font-size: var(--fs-min); font-weight: 700; cursor: pointer;
}
.ay-save:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.ay-save:focus-visible { outline: 3px solid var(--t1); outline-offset: 3px; }
.ay-save[disabled] { opacity: .6; cursor: default; }

@media (max-width: 600px) {
  .ay { padding: var(--sp-4) var(--sp-4); }
  .ay-input { max-width: 100%; }
}