:root {
  --surface: #F7FAF9;
  --surface-raised: #FFFFFF;
  --on-surface: #001E18;
  --on-surface-muted: #40564F;
  --border: #DDE5E2;
  --border-strong: #6E837C;
  --accent: #77FBDC;
  --on-accent: #001E18;
  --accent-border: #039C82;
  --accent-text: #014034;
  --focus: #026152;
  --danger-text: #B3261E;
  --danger-surface: #FDECEA;
  --on-danger-surface: #6E1610;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #001E18;
    --surface-raised: #012C24;
    --on-surface: #E3F0EC;
    --on-surface-muted: #9FB5AF;
    --border: #014034;
    --border-strong: #6E837C;
    --accent: #77FBDC;
    --on-accent: #001E18;
    --accent-border: #77FBDC;
    --accent-text: #77FBDC;
    --focus: #77FBDC;
    --danger-text: #FFB4AB;
    --danger-surface: #4A1512;
    --on-danger-surface: #FFDAD5;
  }
}

/* Two faces, latin subset, woff2 only — every browser this service supports has
   handled woff2 for years, so a woff or ttf fallback would ship bytes nobody fetches.

   font-display: swap means the page is readable in the fallback face immediately and
   reflows once Roboto arrives. The alternative, blocking on the font, hides an incident
   page behind a network request. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/static/roboto-regular-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/static/roboto-medium-latin.woff2') format('woff2');
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Visible only once focused, so a keyboard user reaches the content without
   traversing the whole page and a mouse user never sees it. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--surface-raised);
  color: var(--accent-text);
  border: 2px solid var(--accent-border);
}
.skip:focus { left: 0; z-index: 1; }

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

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 1rem;
}

h2 { font-size: 1.25rem; font-weight: 500; margin: 2rem 0 0.5rem; }

p { margin: 0 0 1rem; }

a { color: var(--accent-text); }

/* Restyled, never removed — the design system's rule, and an outline: none somewhere in
   a reset is how a focus ring usually disappears. There is none anywhere in here.

   The ring is a translucent tint of --accent, so it reads as brand rather than as a dark
   institutional outline. A tint alone would be a weak indicator, so --focus is still
   drawn at full strength in the two places it has to carry: the focused field's own
   boundary, and the button, where a mint tint on a mint fill would be invisible. */
:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

.field input:focus-visible { border-color: var(--focus); }
.button:focus-visible { outline-color: var(--focus); }

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.illustration { display: block; width: 100%; max-width: 15rem; margin: 0 auto 1.5rem; }

.field { display: grid; gap: 0.375rem; margin: 0 0 1.25rem; }
.field label { font-weight: 500; }

.field input {
  font: inherit;
  color: inherit;
  padding: 0.625rem 0.75rem;
  background: var(--surface-raised);
  /* --border-strong, not --border: an input's boundary is a non-text UI component and
     needs 3:1. --border is decorative separation and does not clear it. */
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  width: 100%;
}

.actions { margin: 1.5rem 0 0; }

/* Unbordered on purpose, and this is the one place in the system where that costs
   something: the mint fill measures 1.20:1 against the page, under WCAG 1.4.11's 3:1 for
   a non-text control, which is precisely why --accent-border used to be drawn here. The
   trade was made deliberately for a flatter, calmer button — see design §4.7's amendment
   — and the shadow below is decoration, not a stand-in for that boundary. What keeps the
   control usable is that focus is unambiguous: :focus-visible draws --focus at full
   strength around it. */
.button {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  padding: 0.6875rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--on-surface) 14%, transparent);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.button:hover {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--on-surface) 20%, transparent);
  transform: translateY(-1px);
}

.banner { padding: 0.875rem 1rem; border-radius: 0.375rem; border: 1px solid; }
.banner--error {
  background: var(--danger-surface);
  color: var(--on-danger-surface);
  border-color: var(--danger-text);
}
.banner--notice {
  background: var(--surface-raised);
  color: var(--on-surface);
  border-color: var(--border);
}

.footnotes { margin: 2.5rem 0 0; color: var(--on-surface-muted); font-size: 0.875rem; }
.footnotes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.fn-num { font-variant-numeric: tabular-nums; }
.fn-ref { text-decoration: none; padding: 0 0.15rem; }

.hours { margin: 0 0 1rem; }
.hours dt { font-weight: 500; }
.hours dd { margin: 0 0 0.5rem; }

/* The desktop arrangement, opt-in per page via PageMeta.variant.

     prose  |  illustration
     form   |  small print

   One block per cell. The first attempt let the prose span both rows, and with the
   illustration and form stacked in the other column the prose cell stretched to their
   combined height — leaving a hole down the left side of the page beside short text.
   Two rows of two independent cells cannot do that: any slack stays inside the row it
   belongs to.

   Opt-in rather than global, because four of the seven pages sharing layout() have
   neither an illustration nor a form and would render an empty right-hand column. */
@media (min-width: 64rem) {
  .shell--split {
    max-width: 70rem;
    padding: 3rem 2.5rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "prose visual"
      "form  notes";
    column-gap: 4rem;
    row-gap: 2.5rem;
    align-items: start;
  }

  .shell--split .illustration { grid-area: visual; max-width: 26rem; margin: 0; }
  .shell--split .prose { grid-area: prose; }
  .shell--split .prose > :last-child { margin-bottom: 0; }
  .shell--split .card { grid-area: form; }
  .shell--split .footnotes { grid-area: notes; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The duration rule above cannot reach this: the lift is a static offset on hover,
     not an animation, so it has to be switched off by name. */
  .button:hover { transform: none; }
}