/* take.css: answering views (js/views/take.js and js/views/psqi.js).
   Only area-specific classes (.take-*, .psqi-*); the shared vocabulary (.card, .btn, .option, .segmented, .field,
   .progress, .dialog ...) comes from base.css and is not redefined here, only extended with additional classes.
   Mobile first. Nothing may overflow horizontally at 320px: fieldsets get min-width 0, images max-width 100%. */

/* ---------- common pieces ---------- */
.take-back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--tap);
  color: var(--muted);
  text-decoration: none;
}

.take-back:hover {
  color: var(--text);
  text-decoration: underline;
}

.take-title--small {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
}

.take-section-title {
  margin: 0;
  font-size: 1.0625rem;
}

.take-start__btn,
.take-submit {
  min-height: 52px;
  font-size: 1.0625rem;
}

/* A fieldset without the browser's box: it only groups. min-width 0 is what stops long rows from widening the page.
   .take-fieldset is also the PSQI form body (.psqi-fieldset): disabled as a whole while a request is in flight. */
.take-question,
.take-fieldset,
.psqi-question {
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
}

.take-question,
.take-fieldset {
  padding: 0;
  border: 0;
}

/* <legend> is laid out specially by browsers (it straddles the border). Floating it makes it an ordinary block. */
.take-question > legend:not(.visually-hidden),
.psqi-question > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
}

.take-question > legend + *,
.psqi-question > legend + * {
  clear: both;
}

/* Live regions that are empty stay in the accessibility tree (so the first message is announced) but take no space. */
.take-hint:empty,
.take-status:empty,
.take-form-error:empty,
.take-field .field__error:empty,
.take-consent .field__error:empty,
.take-guardian .field__error:empty,
.psqi-control .field__error:empty {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.take-hint,
.take-form-error {
  margin: 0;
  color: var(--risk-ink);
  font-weight: 500;
}

/* The "choose an answer first" hint is the first thing inside the sticky action bar, above the buttons: always on
   screen, never below the fold or under the bar. It is opaque because the bar fades out towards its top edge.
   (:not(:empty): an empty alert keeps the invisible 1px box above, it must not turn into a bordered chip.) */
.take-actions > .take-hint:not(:empty) {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: var(--risk-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius-sm);
}

.take-form-error {
  padding: 10px 12px;
  background: var(--risk-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius-sm);
}

.take-status {
  margin: 0;
}

/* ---------- start step ---------- */
.take-start__form,
.take-finish__form {
  min-width: 0;
}

.take-consent {
  margin-top: 4px;
}

.take-consent__check {
  font-size: 0.9375rem;
}

.take-consent__link {
  margin: 0;
}

.take-guardian {
  min-width: 0;
}

/* ---------- question step ---------- */
.take-step {
  min-width: 0;
}

.take-step__head {
  gap: 8px;
}

.take-step__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

.take-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.take-progress__bar {
  flex: 1 1 auto;
  min-width: 0;
}

.take-progress__text {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* big, readable stem */
.take-stem {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.take-text {
  white-space: normal;
}

.take-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px auto;
  object-fit: contain;
}

.take-stem > .take-image:first-child {
  margin-top: 0;
}

/* options: at least 48px tall, the whole row is the tap target (it is a <label>) */
.take-option {
  min-height: 52px;
  padding: 12px 14px;
  font-size: 1.0625rem;
}

.take-option > input[type="radio"] {
  margin-top: 3px; /* centres the 22px radio on the first text line */
}

.take-option__text {
  overflow-wrap: anywhere;
}

.take-option.option--image {
  padding: 10px;
}

.take-option > .take-image,
.take-option .take-image {
  margin: 0 auto;
}

.option-list--grid.take-options .take-option.option--image {
  padding: 8px;
}

/* picture options: base.css gives two columns; scoped to this view so the generic class stays untouched elsewhere */
@media (min-width: 560px) {
  .take-options.option-list--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.take-footer {
  display: flex;
  justify-content: flex-end;
}

.take-auto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--muted);
  font-size: 0.9375rem;
  cursor: pointer;
}

.take-auto > input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--control);
}

/* A control that gets focus (keyboard, switch access) scrolls clear of the sticky action bar below it. base.css
   reserves the bar itself (scroll-padding-bottom under html.has-sticky-bar, about 6rem); this margin adds the room for
   the hint chip that can sit on top of the buttons (about 45px) and for the focus ring. */
.take-step .take-option,
.take-step .take-auto {
  scroll-margin-bottom: 2rem;
}

/* sticky action bar: previous / answer sheet / next stay reachable with the thumb; the home indicator is respected */
.take-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr;
  gap: 8px;
  padding: 14px 0 calc(10px + var(--safe-bottom));
  background: linear-gradient(to bottom, rgba(255, 250, 244, 0), var(--bg) 28%);
}

.take-actions .btn {
  min-width: 0;
  min-height: 52px;
  padding-right: 8px;
  padding-left: 8px;
  font-size: 1rem;
}

/* A window this short has no room for a bar that stays: it scrolls with the page like everything else. */
@media (max-height: 600px) {
  .take-actions {
    position: static;
    padding-top: 0;
    background: none;
  }
}

.take-finish__nav {
  gap: 10px;
}

.take-summary {
  align-items: flex-start;
  gap: 8px;
}

.take-summary__text {
  margin: 0;
  min-width: 0;
  font-weight: 600;
}

/* ---------- answer sheet (modal) ---------- */
.take-sheet {
  width: min(560px, 100%);
}

.take-sheet__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.take-sheet__swatch {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  background: var(--panel);
  border: 1px solid var(--field-line);
  border-radius: 4px;
}

.take-sheet__swatch--answered {
  background: var(--info-bg);
  border-color: var(--ok);
}

/* A check mark besides the colour: answered must not depend on telling two light tints apart. */
.take-sheet__swatch--answered::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

/* The current question: a dark ring (>= 3:1 against white and against the page) plus an underline. */
.take-sheet__swatch--current {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--primary-ink);
  margin-right: 8px;
  margin-left: 4px;
}

.take-sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
  max-height: 52vh;
  padding: 6px; /* room for the ring of the current question */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.take-sheet__item {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.take-sheet__item--answered {
  background: var(--info-bg);
  border-color: var(--ok);
  color: var(--ok);
}

/* answered: a check mark in the corner as well (the colour alone is a 1.1:1 tint) */
.take-sheet__item--answered::after {
  content: "\2713";
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* current: dark double ring (white gap, then --primary-ink: 14:1 on white), bold and underlined number. These are
   not colour cues, so the current question stays recognisable without seeing hues. */
.take-sheet__item--current {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--primary-ink);
  color: var(--primary-ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .take-sheet__item:hover {
    border-color: var(--text);
  }
}

@media (forced-colors: active) {
  .take-sheet__item--answered {
    border-width: 2px;
    border-color: Highlight;
  }

  .take-sheet__item--current {
    outline: 3px solid Highlight;
  }
}

/* ---------- PSQI ---------- */
.psqi {
  min-width: 0;
}

.psqi-question {
  padding: 16px;
}

.psqi-question__legend {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.psqi-question__no {
  margin-right: 0.15em;
  color: var(--primary-ink);
  font-weight: 700;
}

.psqi-control {
  min-width: 0;
}

.psqi-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.psqi-time .select {
  padding-right: 30px;
  padding-left: 10px;
}

.psqi-time__unit,
.psqi-number__unit {
  color: var(--muted);
  white-space: nowrap;
}

.psqi-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.psqi-number__input {
  flex: 1 1 auto;
  max-width: 14rem;
}

.psqi-options {
  gap: 8px;
}

.psqi-option {
  min-height: 48px;
}

.psqi-respondent {
  min-width: 0;
}

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  .take-actions {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .psqi-question {
    padding: 18px 22px;
  }
}