/*
 * The runtime carries no design system. These are the few rules a respondent screen needs,
 * inlined as a single stylesheet so the language screen paints in one round trip.
 * Section 13.
 */
@import '/fonts.css';

:root {
  --bg: #ffffff;
  --fg: #14161c;
  --fg-muted: #5a616e;
  --border: #e3e5ea;
  --brand: #3d2fd6;
  --danger: #c0392b;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /*
   * San Francisco first. An iPhone renders in it and fetches no face at all; an Android
   * phone falls through to the self-hosted subsets, which is what keeps Tajik and Karakalpak
   * from rendering as boxes. Section 9.5.
   */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.screen {
  margin: 0 auto;
  max-width: 34rem;
  padding: 1.5rem 1.25rem 3rem;
}

/* Language screen: full-width buttons at least 48 px tall, in native script. Section 13.2. */
.locale-list { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.locale-button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.locale-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(61 47 214 / 30%);
}

.script-Geor { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans Georgian', system-ui, sans-serif; }
.script-Armn { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans Armenian', system-ui, sans-serif; }

.offline-banner {
  padding: 0.625rem 1rem;
  background: #fbf1df;
  color: #7a4e07;
  font-size: 0.875rem;
}

.progress-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.progress-text { font-size: 0.8125rem; color: var(--fg-muted); }
.switcher { margin-left: auto; }
.switcher select {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0 0.5rem;
  font: inherit;
}

.bar { width: 100%; height: 4px; margin-bottom: 1.5rem; }
.bar::-webkit-progress-bar { background: var(--border); border-radius: 2px; }
.bar::-webkit-progress-value { background: var(--brand); border-radius: 2px; }
.bar::-moz-progress-bar { background: var(--brand); }

.question { font-size: 1.25rem; line-height: 1.3; margin: 0 0 1.25rem; }

.choices { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

/*
 * Short options in a row rather than a column. The tap target keeps its 52px height because a
 * respondent outdoors on a phone has not got steadier hands just because the options are
 * short; only the width is allowed to shrink, and the row wraps rather than scrolls.
 */
.choices.inline { display: flex; flex-wrap: wrap; }
.choices.inline > li { flex: 1 1 8rem; }

/* A date and a time side by side, stacking when the screen is too narrow for both. */
.date-time { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.date-time > .text-input { flex: 1 1 10rem; }

/*
 * The place a ranked option holds. Reserved whether or not it is filled, so the labels do
 * not jump sideways as the respondent taps down the list.
 */
.rank {
  display: inline-block;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Large tap targets: a respondent is on a phone, often one-handed, often outdoors. */
.choice {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.choice.chosen { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.scale { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.scale.wide .point { min-width: 44px; }
.point {
  min-width: 56px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.point.chosen { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.text-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font: inherit;
  resize: vertical;
}

.required { color: var(--danger); font-size: 0.875rem; margin: 0.5rem 0 0; }

/*
 * Buttons are styled by their role, not by where they sit. The welcome screen has one on its
 * own with no navigation bar around it, and a button that falls back to the browser's default
 * reads as a broken page rather than a plain one.
 */
button.primary,
button.secondary {
  min-height: 52px;
  border-radius: 0.5rem;
  font: inherit;
  cursor: pointer;
  padding: 0 1.5rem;
}
.primary { border: none; background: var(--brand); color: #fff; }
.secondary { border: 1px solid var(--border); background: #fff; color: inherit; }
button:disabled { opacity: 0.4; cursor: default; }

.nav { display: flex; gap: 0.75rem; margin-top: 2rem; }
/* Inside the navigation bar the two share the width, so the padding gives way to the flex. */
.nav button { flex: 1; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * The introduction. Wider measure than a question because it is read as prose rather than
 * scanned as a choice, and a little air under it so the button is not the first thing the eye
 * lands on.
 */
.intro {
  margin: 0 0 1.5rem;
  line-height: 1.55;
  white-space: pre-wrap;
}