/* Layout of the check, mobile first. Colours, fonts and shapes come from tokens.css only. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  /* The smallest viewport height, with every browser bar shown: a screen that fits this always fits; on a bigger
   * viewport the page simply grows. 100dvh put the last button behind Chrome's bar on Android (testronde 1). */
  min-height: 100svh;
  /* A long word or a web address must wrap instead of pushing the page wider than the screen. */
  overflow-wrap: anywhere;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-surface-cool);
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

:focus-visible {
  outline: 3px solid var(--color-primary-deep);
  outline-offset: 2px;
}

.top :focus-visible,
.screen--dark :focus-visible {
  outline-color: var(--color-on-dark);
}

/* A title gets the focus after a screen change so it is announced; it is not a control, so it shows no ring. */
[data-focus]:focus-visible {
  outline: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Screen and column ---------- */

.screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.screen--dark {
  background: var(--color-ink-deep);
  color: var(--color-on-dark);
}

.column {
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
}

.column--wide {
  max-width: var(--column-wide);
}

/* ---------- Header ---------- */

.top {
  background: var(--color-ink-deep);
  color: var(--color-on-dark);
  padding: 8px 20px 32px 8px;
}

.top--rounded {
  border-radius: 0 0 var(--radius-header) var(--radius-header);
}

.top--question {
  padding-bottom: 60px;
}

.top__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: block;
  height: 48px;
  width: auto;
}

.top__body {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.eyebrow--soft {
  color: var(--color-on-dark-soft);
}

.title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}

.title--large {
  font-size: clamp(30px, 10vw, 40px);
  line-height: 1.1;
}

.lead {
  font-size: 16px;
  color: var(--color-on-dark-soft);
}

.lead--large {
  font-size: 18px;
}

.caption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-on-dark-soft);
}

/* ---------- Ladder ---------- */

.ladder {
  --ladder-width: 36px;
  --ladder-gap: 6px;
  --ladder-base: 42px;
  --ladder-rise: 18px;
  display: inline-flex;
  flex-direction: column;
  gap: var(--ladder-gap);
  /* The big ladder sits in the middle of the header; the small one in a question header stays right (.progress). */
  align-self: center;
}

.ladder--small {
  --ladder-width: 16px;
  --ladder-gap: 4px;
  --ladder-base: 14px;
  --ladder-rise: 6px;
}

.ladder__steps {
  display: flex;
  align-items: flex-end;
  gap: var(--ladder-gap);
}

.ladder__step {
  width: var(--ladder-width);
  /* --step is the position of the level on the ladder, set from the data. */
  height: calc(var(--ladder-base) + (var(--step) - 1) * var(--ladder-rise));
  padding-top: 8px;
  border-radius: 6px 6px 2px 2px;
  border: 2px solid transparent;
  background: var(--color-on-dark-faint);
  color: var(--color-on-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.ladder--small .ladder__step {
  padding-top: 0;
  /* Thin enough for 16 px steps; "al in huis" is drawn as this border alone. */
  border-width: 1px;
  border-radius: 3px 3px 1px 1px;
}

.ladder__bar {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 2px 2px 6px 6px;
  border: 2px solid transparent;
  background: var(--color-on-dark-faint);
  color: var(--color-on-dark);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.ladder--small .ladder__bar {
  min-height: 7px;
  padding: 0;
  border-width: 1px;
  border-radius: 1px 1px 3px 3px;
}

.ladder .is-filled {
  background: var(--color-on-dark);
  color: var(--color-ink);
}

.ladder .is-current {
  background: var(--color-primary);
  color: var(--color-ink);
}

.ladder .is-outlined {
  background: transparent;
  border-color: var(--color-on-dark);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--color-on-dark-soft);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid transparent;
}

.legend__swatch.is-filled {
  background: var(--color-on-dark);
}

.legend__swatch.is-current {
  background: var(--color-primary);
}

.legend__swatch.is-outlined {
  border-color: var(--color-on-dark);
}

/* ---------- Buttons ---------- */

.button {
  min-height: var(--button-height);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.button:disabled {
  background: var(--color-border);
  color: var(--color-muted);
}

.button--grow {
  flex: 1 1 0;
}

.button--outline {
  background: transparent;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
}

.button--outline:hover:not(:disabled) {
  background: var(--color-surface-tint);
}

.screen--dark .button--outline {
  border-color: var(--color-on-dark-line);
  color: var(--color-on-dark);
}

.screen--dark .button--outline:hover:not(:disabled) {
  background: var(--color-on-dark-faint);
}

.button--icon {
  width: var(--button-height);
  padding: 0;
  flex: 0 0 auto;
}

.button--text {
  min-height: var(--touch);
  padding: 0 8px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  text-decoration: underline;
}

.button--text:hover:not(:disabled) {
  background: transparent;
  color: var(--color-primary-deep);
}

.screen--dark .button--text:hover:not(:disabled) {
  color: var(--color-primary);
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.actions-bar {
  display: flex;
  gap: 12px;
  /* Room below the buttons, plus the phone's home bar where the browser reports one. */
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
}

/* A focused option scrolled into view must land above the sticky bar, not under it (WCAG 2.2, 2.4.11). */
@media (max-width: 639px) {
  html {
    scroll-padding-bottom: calc(var(--button-height) + 29px + env(safe-area-inset-bottom));
  }
}

/* On a phone the question bar sticks to the bottom of the window, so that Volgende is always in view. */
.actions-bar--sticky {
  position: sticky;
  bottom: 0;
  background: var(--color-surface-cool);
  border-top: 1px solid var(--color-border);
}

.actions-bar--end {
  margin-top: auto;
}

/* Followed by a text button, which brings its own space. */
.actions-bar--tight {
  padding-bottom: 8px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Text buttons under each other are only as wide as their text: a smaller target for a stray tap. */
.stack.center {
  align-items: center;
}

.center {
  text-align: center;
}

.small {
  font-size: 14px;
  color: var(--color-muted-strong);
}

/* ---------- Start ---------- */

.start__body {
  padding: 24px 20px 0;
}

/* After .start__body on purpose: the stop screen combines the two, and this one must win for the padding below. */
.bottom {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.funding {
  margin-top: auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted-strong);
}

.funding__flag {
  width: 36px;
  height: 24px;
  flex: 0 0 auto;
}

/* ---------- Interstitial and stop screen ---------- */

.interstitial {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 24px 20px;
}

.interstitial__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.interstitial .eyebrow {
  font-size: 16px;
  font-weight: 700;
}

.top--plain {
  padding-bottom: 0;
}

/* ---------- Question ---------- */

.progress {
  padding-left: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.progress__level {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress .ladder {
  align-self: flex-end;
  flex: 0 0 auto;
}

.progress__title {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}

.dots {
  display: flex;
  gap: 6px;
  padding-top: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-on-dark-line);
}

.dot.is-current,
.dot.is-done {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.dot.is-done {
  border-color: var(--color-on-dark);
  background: var(--color-on-dark);
}

.card {
  margin: 0 12px;
  padding: 22px 16px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.card--overlap {
  margin-top: -40px;
}

.question {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* A fieldset's gap does not reach its legend, so the space under the question is set here. */
.question legend {
  padding: 0;
}

.question__legend {
  padding: 0 0 16px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}

.question__max {
  font-size: 14px;
  color: var(--color-muted-strong);
}

.options {
  display: flex;
  flex-direction: column;
}

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 10px;
  border-top: 1px solid var(--color-border);
  font-size: 16px;
  cursor: pointer;
}

.option input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primary-deep);
}

.option:has(input:checked) {
  border-radius: 8px;
  background: var(--color-surface-tint);
  font-weight: 600;
}

.option:has(input:disabled) {
  color: var(--color-muted);
  cursor: not-allowed;
}

.option:has(input:focus-visible) {
  outline: 3px solid var(--color-primary-deep);
  outline-offset: 2px;
}

.hint {
  display: flex;
  gap: 10px;
  /* A little more below: the sticky bar's line must not touch the text. */
  padding: 16px 28px 24px;
  font-size: 14px;
}

.hint__icon {
  margin-top: 1px;
  color: var(--color-muted-strong);
}

/* ---------- Result ---------- */

.score {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score__number {
  font-size: 88px;
  line-height: 0.9;
  font-weight: 700;
}

.score__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score__of {
  font-size: 14px;
  color: var(--color-on-dark-soft);
}

.score__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.result__body {
  padding: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card--result {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card--rows {
  padding: 4px 20px;
}

.label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-deep);
}

.label--muted {
  font-weight: 600;
  color: var(--color-muted-strong);
}

.card__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

.card__text {
  font-size: 15px;
  line-height: 1.6;
}

.divider {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--color-border);
}

.card__subtitle {
  font-size: 16px;
  font-weight: 700;
}

.todo {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo__item {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
}

.todo__item::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  border: 2px solid var(--color-ink);
  border-radius: 4px;
}

.row {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.row:last-child {
  border-bottom: 0;
}

.row__toggle {
  width: 100%;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.row__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.row__title {
  font-size: 17px;
  font-weight: 600;
}

.row__line {
  font-size: 14px;
  line-height: 1.45;
}

.row__toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.row__panel {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result__buttons {
  padding: 8px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Message ---------- */

.message {
  width: calc(100% - 24px);
  margin: 16px auto;
  padding: 16px;
  border-radius: var(--radius-card);
  border: 2px solid var(--color-error);
  background: var(--color-bg);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loading {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-muted-strong);
}

/* ---------- Wider screens: same structure, centred column ---------- */

@media (min-width: 640px) {
  /* On a desktop everything fits; the bar sits in the flow again. */
  .actions-bar--sticky {
    position: static;
    border-top: 0;
  }

  .top {
    padding: 16px 24px 40px;
  }

  .top--question {
    padding-bottom: 68px;
  }

  .top--plain {
    padding-bottom: 0;
  }

  .title {
    font-size: 34px;
  }

  .title--large {
    font-size: 40px;
  }

  .card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- Print: the advice on paper, everything expanded, little ink ---------- */

@media print {
  body {
    background: var(--color-bg);
  }

  .screen {
    min-height: 0;
  }

  .top {
    background: var(--color-bg);
    color: var(--color-ink);
    border-radius: 0;
    padding: 0 0 16px;
  }

  .lead,
  .caption,
  .eyebrow--soft,
  .score__of,
  .legend {
    color: var(--color-ink);
  }

  .logo--light,
  .button,
  .row__toggle .icon {
    display: none;
  }

  .logo--dark {
    display: block;
  }

  /* Browsers leave out backgrounds on paper unless asked; the states of the ladder are backgrounds. */
  .ladder__step,
  .ladder__bar,
  .legend__swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ladder__step,
  .ladder__bar {
    background: transparent;
    border-color: var(--color-muted);
    color: var(--color-ink);
  }

  .ladder .is-filled {
    background: var(--color-border);
    border-color: var(--color-ink);
    color: var(--color-ink);
  }

  .ladder .is-current {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-bg);
  }

  .ladder .is-outlined {
    border-color: var(--color-ink);
    border-style: dashed;
  }

  .legend__swatch {
    border-color: var(--color-ink);
  }

  .legend__swatch.is-filled {
    background: var(--color-border);
  }

  .legend__swatch.is-current {
    background: var(--color-ink);
  }

  .legend__swatch.is-outlined {
    border-style: dashed;
    border-color: var(--color-ink);
  }

  .card {
    box-shadow: none;
    border: 1px solid var(--color-border);
    break-inside: avoid;
  }

  .row__panel[hidden] {
    display: flex !important;
  }
}

@media screen {
  .logo--dark {
    display: none;
  }
}