/* TRACES brand: Navy Ink, Teal, Root Gold on Cream; Fraunces, Public Sans, Roboto Mono.
   The brighter teal and gold are for shapes; text uses the darker versions. Contrast:
   paragraph text 7:1 or better, other text 4.5:1, shapes and lines 3:1. Fonts are served
   by the platform, so a client's browser never contacts anyone else while it shows their
   answers. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/fonts/roboto-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --navy: #22415f; /* text: 9.4:1 on cream */
  --teal: #3e93a6; /* focus ring and lines: 3.1:1 */
  --teal-dark: #2e6e7e; /* buttons, with white text: 5.8:1 */
  --gold: #c2942f;
  --cream: #f5f1e8;
  --sand: #e6decf;
  --slate: #5b6b74; /* captions only: 4.9:1 */
  --problem: #9b2c1f; /* 6.7:1 on cream */
  --field: #ffffff;
  --field-line: #6f7f88; /* 4.1:1 on white */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(3rem, env(safe-area-inset-bottom));
}
.page.narrow {
  max-width: 34rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 0.5rem;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
h1 {
  font-size: 2rem;
  margin: 0 0 0.75rem;
}
h2 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
}

.lede {
  font-size: 1.1em;
}

/* The iPad's code, read from across a desk. Even-width digits, so it never shifts. */
.kiosk-code {
  font-family: var(--mono);
  font-size: clamp(3rem, 14vw, 5.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.15em;
  margin: 1rem 0 1.5rem;
}

.form-section {
  margin-top: 2rem;
}

.field {
  margin: 0 0 1.5rem;
  border: 0;
  padding: 0;
  min-width: 0;
}
.field label,
.field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.required {
  font-weight: 400;
  color: var(--slate);
  font-size: 0.875rem;
}
.help,
.note {
  color: var(--slate);
  font-size: 0.875rem;
  margin: 0.25rem 0 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  min-height: 2.75rem;
}
textarea {
  resize: vertical;
  min-height: 8rem;
}
/* A multi-line box drawn as its box on the form: fixed-width characters, sized so exactly as
   many fit across as the printed box holds (--columns), and as many lines down, so lines
   break on screen where they will print. A Roboto Mono character is 0.6 of its size; the
   0.61 leaves room for rounding. Never under 16px, the size text stays readable at on a
   phone: there the box wraps sooner than the form, and the line count under it says how
   much of the form is used. */
.boxed-wrap {
  container-type: inline-size;
}
textarea.boxed {
  font-family: var(--mono);
  font-size: max(1rem, calc((100cqi - 1.5rem - 2px) / (var(--columns) * 0.61)));
  line-height: 1.3;
  min-height: 0;
  resize: none;
}
input[readonly] {
  background: var(--sand);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.choices {
  display: grid;
  gap: 0.5rem;
}
.choice,
.checkbox-field label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
}
.choice input,
.checkbox-field input {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  flex: none;
  accent-color: var(--teal-dark);
}

.problem {
  color: var(--problem);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.4rem 0 0;
}
.problem:empty {
  display: none;
}
.problem:not(:empty)::before {
  content: "Please fix: ";
}

.submit-bar {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
}
.summary {
  color: var(--problem);
  font-weight: 600;
}
.summary:empty {
  display: none;
}
.save-line {
  color: var(--slate);
  font-size: 0.875rem;
  min-height: 1.4em;
}

button.primary {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--teal-dark);
  border: 0;
  border-radius: 6px;
  padding: 0.8rem 1.6rem;
  min-height: 2.75rem;
  cursor: pointer;
}
button.primary[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* The quieter choice beside it: teal-dark on cream, 5.1:1, and a teal-dark edge. */
button.secondary {
  font: inherit;
  font-weight: 600;
  color: var(--teal-dark);
  background: transparent;
  border: 2px solid var(--teal-dark);
  border-radius: 6px;
  padding: calc(0.8rem - 2px) calc(1.6rem - 2px);
  min-height: 2.75rem;
  cursor: pointer;
}
button.secondary[disabled] {
  opacity: 0.6;
  cursor: default;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Where the client left off: navy on sand, 7.9:1. */
.notice {
  background: var(--sand);
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
}
.masthead .notice {
  margin-top: 1rem;
}

.outcome {
  margin-top: 1rem;
}
.outcome:empty {
  display: none;
}

/* The countdown sits over the bottom of the page rather than pushing it, and never takes
   focus from what the client is typing. Cream on navy, 9.4:1; the gold edge is a shape,
   3.8:1 against the navy. */
.countdown {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--navy);
  color: var(--cream);
  border-top: 4px solid var(--gold);
  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: center;
}
.countdown[hidden] {
  display: none;
}
.countdown p {
  margin: 0;
  max-width: 34rem;
}
.countdown-time {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 500;
}

/* A button on navy: navy on cream, 9.4:1. */
button.light {
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  background: var(--cream);
  border: 0;
  border-radius: 6px;
  padding: 0.7rem 1.4rem;
  min-height: 2.75rem;
  cursor: pointer;
}
button.light:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
button[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    /* biome-ignore lint/complexity/noImportantStyles: reduced motion overrides every animation */
    animation: none !important;
    /* biome-ignore lint/complexity/noImportantStyles: reduced motion overrides every transition */
    transition: none !important;
  }
}

/* Staff: people and roles. */
.staff-section {
  margin-top: 2.5rem;
}
.staff-list,
.role-list,
.role-chips {
  list-style: none;
  padding: 0;
  margin: 0;
}
.staff-row,
.role-row {
  border-top: 1px solid var(--sand);
  padding: 1rem 0;
}
.role-chips li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.give-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.role-form {
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
}
.check-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: normal;
}
.notice[hidden] {
  display: none;
}