/* Participant form. Phone first: one column, 16px gutters, 36rem at most. Right-to-left Urdu, English prose in Literata. */
/*
  Noto Nastaliq Urdu, from @fontsource/noto-nastaliq-urdu 5.3.0 (SIL OFL 1.1, see fonts/OFL.txt).
  Only the Arabic subset is shipped, because every Urdu string on the page is Arabic script.
  Weight 700 covers the scenario headings, which are h2 elements and so bold by default.
*/
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/noto-nastaliq-urdu-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}


/*
  Literata 400 and 600, Latin subset, from @fontsource/literata 5.3.0 (SIL OFL 1.1, see fonts/OFL-literata.txt).
  It sets the English reading text: the consent page, headings and end-state messages.
*/
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/literata-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/literata-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Tokens for the single light theme. The form stays light even when the phone is in dark mode,
  so color-scheme is fixed to light and form controls keep their light appearance.
  Every text pair meets WCAG AA. Control borders and progress segments meet the 3:1 non-text rule.
*/
:root {
  color-scheme: light;

  --paper: #f3f5f1;
  --surface: #ffffff;
  --field: #f5f8f5;
  --ink: #18221d;
  --muted: #4d5c54;
  --line: #a9b6ae;
  --control: #66766d;
  --track: #7f8f86;
  --accent: #1e5b49;
  --accent-text: #ffffff;
  --accent-soft: #e0eee7;
  --focus: #b45309;
  --warn: #9a3412;
  --warn-soft: #fbeee8;
  --disabled: #e4e9e5;
  --disabled-text: #5e6d65;

  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
}

/* Base */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/*
  Room kept clear above the sticky dock, so a focused field or a scrolled-to card is not hidden under it.
  It follows the dock's real state: the bare dock (rail and button, about 95px), the dock with a notice in
  it (up to about 256px), and no room while the dock is static (a textarea has focus with no submit notice,
  or the screen is short).
*/
html {
  --dock-clearance: 7rem;
  background: var(--paper);
  scroll-padding-bottom: var(--dock-clearance);
}

html:has(.dock .notice:not([hidden])) {
  --dock-clearance: 20rem;
}

html:has(#answers-form textarea:focus):not(:has(#submit-missing:not([hidden]), #submit-error:not([hidden]), #submit-invalid:not([hidden]), #content-changed:not([hidden]))) {
  --dock-clearance: 0rem;
}

@media (max-height: 30rem) {
  html {
    --dock-clearance: 0rem !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

/* Headings and reading text use Literata. Sections that read as prose set it for their children. */

h1,
h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
}

h1 {
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

h2 {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

section[data-view="consent"],
.status {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
}

section[data-view="consent"] .lead {
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* Urdu: Nastaliq needs a tall line box, so 2.0 to 2.3 everywhere, and right alignment. */

.urdu,
[lang="ur"] {
  font-family: var(--font-urdu);
  line-height: 2.1;
}

/* Buttons and controls use the system UI stack. */

button {
  display: inline-block;
  min-height: 3.25rem;
  min-width: 2.75rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

button.secondary {
  border-color: var(--control);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}

button.secondary:hover {
  background: var(--accent-soft);
}

button.wide {
  display: block;
  width: 100%;
}

button.urdu {
  min-height: 3.5rem;
  padding-block: 0.25rem;
  font-family: var(--font-urdu);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2;
}

button:disabled {
  border-color: var(--disabled);
  background: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
}

/* Choices: consent checkboxes and clarity radios share one row style. */

.checks {
  display: grid;
  gap: 0.625rem;
  margin: 1.5rem 0;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.choice input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--accent);
}

.choice span {
  min-width: 0;
  flex: 1 1 auto;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

@media (hover: hover) {
  .choice:hover {
    border-color: var(--accent);
  }
}

.actions {
  display: grid;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
}

/* Consent page */

section[data-view="consent"] .contact {
  font-size: 1rem;
}

/* Continue-later box */

.later {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.later h2 {
  font-size: 1.0625rem;
}

.warning {
  margin: 0 0 0.875rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid var(--warn);
  font-size: 0.9375rem;
  line-height: 1.5;
}

#resume-link {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  margin: 0 0 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--control);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  direction: ltr;
  text-overflow: ellipsis;
}

#copy-done,
#copy-failed {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

#copy-done {
  color: var(--accent);
  font-weight: 600;
}

#copy-failed {
  color: var(--warn);
  font-weight: 600;
}

/* Form intro: the English instruction under its heading, in the reading face, above the continue-later box */

.instructions {
  margin: 0 0 1.5rem;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: left;
}

/* The form view's h1. It is set at the size and spacing it had as an h2, and it stays that size at every width. */
.instructions h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.instructions p {
  margin: 0;
}

/* Scenario cards: one sheet per مسئلہ. The number fills when the card is answered. */

.need {
  margin: 0 0 1rem;
  padding: 1.125rem 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  scroll-margin-top: 1.25rem;
}

.need-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-urdu);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 2.1;
  text-align: right;
}

.need-number {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.need.is-complete .need-number {
  background: var(--accent);
  color: var(--accent-text);
}

.scenario {
  margin: 0.75rem 0 1.25rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 3px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-urdu);
  font-size: 1.3125rem;
  line-height: 2.25;
  text-align: right;
}

.answer {
  display: block;
  margin: 0 0 1.25rem;
}

.field-label {
  display: block;
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-family: var(--font-urdu);
  font-size: 1.125rem;
  line-height: 2.1;
  text-align: right;
}

textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--control);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-ui), var(--font-urdu);
  font-size: 1.0625rem;
  line-height: 1.5;
  resize: vertical;
}

.clarity {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.clarity legend {
  width: 100%;
  margin: 0 0 0.375rem;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-urdu);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2.1;
  text-align: right;
}

.clarity .choice {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-family: var(--font-urdu);
  font-size: 1.1875rem;
  line-height: 2;
  text-align: right;
}

.clarity .choice input {
  accent-color: var(--accent);
}

/*
  Dock: sticks to the bottom of the form. It holds the submit notices (hidden ones take no room),
  then the progress rail, then the submit button.
*/

.dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 1rem -1rem 0;
  padding: 0.625rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/*
  A short screen, or a focused textarea with the keyboard up, leaves the dock in the flow so it
  stops covering the field. Submit notices keep it sticky, so they stay on screen. Typing-time
  notices sit under the card being typed in (app.js placeTextNotices), so they do not need that.
*/
@media (max-height: 30rem) {
  .dock {
    position: static;
  }
}

#answers-form:has(textarea:focus):not(:has(#submit-missing:not([hidden]), #submit-error:not([hidden]), #submit-invalid:not([hidden]), #content-changed:not([hidden]))) .dock {
  position: static;
}

.progress {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.progress .step {
  flex: 1 1 0;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--track);
  transition: background-color 0.2s ease;
}

.progress .step.is-done {
  background: var(--accent);
}

.dock .actions {
  margin: 0;
}

/* Notices. Inside the dock they are compact, so the dock stays short while one shows. */

.dock .notice {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.dock .notice.urdu {
  font-size: 1.125rem;
  line-height: 2;
}

.notice {
  margin: 0 0 1rem;
  padding: 0.75rem 0.875rem;
  border-inline-start: 3px solid var(--warn);
  border-radius: 6px;
  background: var(--warn-soft);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.notice.urdu {
  font-size: 1.1875rem;
  line-height: 2.1;
  text-align: right;
}

/* End states: a status mark, one message, and at most one button */

.status {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 2.5rem 0 1rem;
}

.status p {
  margin: 0;
}

.status button {
  justify-self: stretch;
}

.status[data-view="loading"] p {
  color: var(--muted);
}

.mark {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-warn {
  stroke: var(--warn);
}

/* Motion: the only motion is the progress and number fills, and it stops for reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Wider screens: more air, same column */

@media (min-width: 40rem) {
  main {
    padding-top: 3rem;
  }

  h1 {
    font-size: 2.125rem;
  }

  .need {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .dock {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }
}