/* =============================================================
   PENTWARE COMPUTER — Corporate Website
   Application layer: components introduced by the dynamic build
   (filter bar, notices, vacancy cards, pagination, honeypot).
   Loads after style.css and reuses the same design tokens.
   ============================================================= */

/* ---------- Token extension ----------
   The base scale in style.css is unchanged. This adds the one value it lacks.

   --muted is #6B7787, which measures 4.55:1 on white but only 4.20:1 on the
   --tint band. Any small print set in --muted therefore fails WCAG AA the moment
   its section becomes tinted. --muted-strong keeps the same muted role and
   clears AA on both surfaces: 5.85:1 on white, 5.40:1 on --tint. */
:root {
  --muted-strong: #5A6675;
}

/* ---------- Surfaces on a tinted band ----------
   A card and its section must never resolve to the same colour. These components
   default to --tint, which is invisible once the section itself is --tint, so on a
   tinted band they take the white surface instead. Stated once here rather than as
   an inline override per page, so any section can be re-tinted without breaking.

   The dark projects band sets its own surface inline, which still wins over this. */
.table-wrap { background: var(--white); }

.section--tint .notice,
.section--tint .filterbar,
.section--tint .pager__link.is-disabled { background: var(--white); }

/* ---------- Small print ----------
   Used for the caveat lines that follow a table or a card grid. */
.smallprint {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted-strong);
}

/* ---------- Honeypot ----------
   Removed from the accessibility tree and from view. A sighted visitor and a
   screen-reader user both never see it, so only an automated submission fills it. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Notices ---------- */
.notice {
  border-radius: var(--r);
  border-left: 4px solid var(--blue);
  background: var(--tint);
  color: var(--ink);
  padding: 1rem 1.25rem;
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.notice ul { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.notice li { margin-bottom: .25rem; }
.notice p { margin-bottom: .25rem; }
.notice p:last-child { margin-bottom: 0; }

.notice--success { border-left-color: #1B7F4B; background: #EAF6EF; }
.notice--error   { border-left-color: #B42318; background: #FDECEA; }
.notice--info    { border-left-color: var(--blue); }
.notice--muted   { border-left-color: var(--line); color: var(--muted-strong); background: var(--white); border: 1px solid var(--line); border-left-width: 4px; }

/* ---------- Data table on a light or tinted band ----------
   The header row carries the primary navy so the table reads as a data object
   rather than as running text — section 7 asks for tables to be among the most
   prominent elements on the site. White on navy is 13.29:1, the pairing already
   approved in section 8.2.

   Giving the header its own fill also means the body no longer depends on the
   section behind it for contrast: a --tint header on a --tint band was
   indistinguishable from the rows beneath it.

   The dark projects band sets its header colours inline, which still wins here. */
.dtable thead th {
  background: var(--navy);
  color: var(--white);
  border-bottom-color: var(--navy);
}

/* ---------- Status tag on a light surface ----------
   The base .tag in style.css is built for the dark projects band: white text on
   translucent white. On a light section that renders as white on white. This gives
   it a light-surface fill, while leaving .tag--live's amber fill untouched. */
.tag--status:not(.tag--live) {
  background: var(--tint);
  color: var(--body);
  border: 1px solid var(--line);
}
.section--tint .tag--status:not(.tag--live) { background: var(--white); }

/* ---------- Project card on a light surface ----------
   The whole .project family in style.css is written for the dark projects band:
   a translucent-white surface with white body text and an amber client line. Every
   one of those values disappears on a light section, and amber measures 2.11:1 on
   white, which section 8.2 rules out for text outright.

   .project--light restates each value for a light surface. The dark band keeps the
   original styling untouched — this variant is opt-in per card. */
.project--light {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  backdrop-filter: none;
}
.project--light:hover {
  background: var(--white);
  border-color: var(--amber);
  box-shadow: var(--sh);
}
.project--light h3 a { color: var(--ink); }
.project--light h3 a:hover { color: var(--blue); }
/* Navy carries the client name here. It is the light-surface equivalent of the
   amber used on the dark band, at 13.29:1 instead of amber's 2.11:1. */
.project--light .project__client { color: var(--navy); }
.project--light .project__state { color: var(--muted-strong); }
.project--light .project__desc { color: var(--body); }
.project--light .project__meta { border-top-color: var(--line); }
.project--light .project__meta dt { color: var(--muted-strong); }
.project--light .project__meta dd { color: var(--ink); }

/* ---------- Focus ring on amber controls ----------
   The global focus ring in style.css is amber, which measures 1.00:1 against an
   amber button — the indicator vanishes into the control it is marking. WCAG 1.4.11
   asks for 3:1 against the adjacent colour; navy gives 6.29:1 on amber and 13.29:1
   on the white surface the offset ring also crosses. */
.btn--accent:focus-visible { outline-color: var(--navy); }

/* ---------- Success dialog ----------
   Shown after a form submission. Rendered hidden and revealed by main.js, so a
   visitor without scripting keeps the inline notice instead of a dialog they
   would have no way to dismiss. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 35, 64, .55);
}

.modal__box {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}

.modal__dismiss {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: .7rem;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
}
.modal__dismiss:hover { background: var(--tint); color: var(--ink); }

.modal__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-2);
  padding: 1rem;
  border-radius: 50%;
  background: #EAF6EF;
  color: #1B7F4B;
}

.modal__title {
  font-size: 1.4rem;
  margin-bottom: .6rem;
}

.modal__body {
  color: var(--body);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-3);
}

.modal__action { width: 100%; justify-content: center; }

/* The page behind must not scroll while the dialog is open. */
body.is-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .modal__backdrop { animation: modal-fade .2s var(--ease) both; }
  .modal__box { animation: modal-rise .28s var(--ease) both; }
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Required file input ----------
   style.css marks an invalid field red via `input:invalid:not(:placeholder-shown)`.
   The :not() guard is what stops an untouched text field turning red, because those
   carry placeholder=" ". A file input has no placeholder, so the guard never applies
   to it — a required, empty CV field read as an error before the applicant had done
   anything. It stays neutral until something is actually wrong: .is-bad is set by
   main.js for a rejected file, aria-invalid by the server after a failed submission. */
.field input[type="file"]:invalid:not(.is-bad):not([aria-invalid="true"]) {
  border-color: var(--line);
}
.field input[type="file"][aria-invalid="true"] { border-color: #C0392B; }

/* ---------- Numbered steps ----------
   A short ordered sequence in a body column, where the horizontal .flow used on
   the homepage would be far too heavy. */
.steplist {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  counter-reset: step;
}
.steplist li {
  position: relative;
  padding-left: 2.75rem;
  min-height: 32px;
  font-size: var(--fs-sm);
  counter-increment: step;
}
.steplist li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.steplist strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  margin-bottom: .1rem;
}

/* A quiet aside beneath a column of detail. */
.sidenote {
  margin-top: var(--s-3);
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--amber);
  border-radius: var(--r);
  background: var(--tint);
  font-size: var(--fs-sm);
}
.section--tint .sidenote { background: var(--white); }

/* ---------- Eligibility criteria ----------
   The client's qualification specification, shown beside the pre-application
   guidance. It is reference material an applicant checks rather than reads, so it
   is set tighter than body copy and each role is separated by a rule.

   The role name takes h4, which the base scale sets as small uppercase for the
   footer's column headings. Here the role has to read as a job title, so the
   transform is dropped and the heading font restored. The requirement label below
   it keeps the small uppercase treatment, in --muted-strong: --muted measures
   4.20:1 once a section is tinted, and this panel may end up on one. */
.elig { display: grid; gap: var(--s-3); margin-top: var(--s-3); }

.elig__role + .elig__role {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.elig__role h4 {
  font-family: var(--font-head);
  font-size: var(--fs-body);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}

.elig__group { margin-top: 1.1rem; }
.elig__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.elig__intro {
  margin: .4rem 0 0;
  font-size: var(--fs-sm);
  color: var(--body);
}
.elig .ticklist { margin: .6rem 0 0; gap: .5rem; }

/* ---------- Application flow ----------
   The careers page runs the application as three stages on one address: read the
   criteria, complete the form, keep the reference number. The address never
   changes, so the tracker is the only thing telling the applicant where they are —
   which is why it is styled as a progress indicator rather than as navigation.

   Nothing here hides a stage on its own. The server renders every stage it has
   rendered at all, and only the .is-ready class that main.js sets makes the flow
   one-stage-at-a-time. With scripting unavailable the stages simply stack, which is
   how this page worked before the flow existed. */
.applyflow.is-ready [data-flow-step][data-flow-inactive] { display: none; }

/* Sections outside the flow that a stage should not have under it. Only main.js ever
   sets this attribute, so nothing is removed from a page without scripting. */
[data-flow-hidden] { display: none; }

/* The form sits on a tinted band and so does the benefits section below it. With the
   vacancy list — a white band — put away between them, the two tints would run
   together into one undifferentiated block, so the lower one takes white instead. */
.applyflow.is-ready[data-active-step="2"] ~ .section--tint { background: var(--white); }

.applyflow.is-ready .trackerband,
.applyflow--submitted .trackerband {
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}

.tracker { padding: 1.4rem 0; }
.tracker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tracker__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 0 .35rem;
  text-align: center;
}

/* The connector belongs to the step it arrives at, so a step that has been reached
   also darkens the line that led to it. */
.tracker__step::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--line);
}
.tracker__step:first-child::before { display: none; }
.tracker__step.is-done::before,
.tracker__step.is-current::before { background: var(--navy); }

.tracker__dot {
  position: relative;
  /* The connectors are positioned siblings that come later in the source, so without
     this the next step's line paints across this step's ring. */
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--muted-strong);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tracker__tick { display: none; width: 17px; height: 17px; }

.tracker__step.is-done .tracker__dot,
.tracker__step.is-current .tracker__dot {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.tracker__step.is-done .tracker__num { display: none; }
.tracker__step.is-done .tracker__tick { display: block; }

/* Amber as a ring, never as text: on white it measures 2.11:1 and Section 8.2 rules
   it out for anything that has to be read. */
.tracker__step.is-current .tracker__dot { box-shadow: 0 0 0 4px rgba(242, 162, 12, .38); }

.tracker__text { display: grid; gap: .1rem; }
.tracker__index {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.tracker__label {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.tracker__step.is-current .tracker__label { color: var(--navy); }
.tracker__step.is-next .tracker__label { color: var(--muted-strong); }

/* The move from one stage to the next. Sits on a light band, so the amber is a
   left border rather than a fill behind text. */
.flowactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-lg);
  background: var(--tint);
}
.section--tint .flowactions { background: var(--white); }
.flowactions__note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--body);
}

.flowback { margin-bottom: var(--s-3); }

@media (max-width: 560px) {
  .tracker { padding: 1.1rem 0; }
  .tracker__step { gap: .45rem; padding: 0 .2rem; }
  .tracker__step::before { top: 15px; }
  .tracker__dot { width: 32px; height: 32px; font-size: var(--fs-xs); }
  .tracker__tick { width: 15px; height: 15px; }
  .tracker__index { font-size: .7rem; letter-spacing: .06em; }
  .tracker__label { font-size: .78rem; line-height: 1.3; }
  .flowactions { justify-content: stretch; }
  .flowactions .btn { width: 100%; justify-content: center; }
}

/* ---------- Filter bar ----------
   A plain GET form, so filtering works without JavaScript and every filtered
   view has its own shareable URL. */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--tint);
}
.filterbar__field { display: flex; flex-direction: column; gap: .35rem; min-width: 200px; flex: 1 1 200px; }
.filterbar__field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.filterbar__field select {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .85rem;
  min-height: 44px;
  width: 100%;
}
.filterbar__field select:focus-visible { border-color: var(--blue); }
.filterbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.filterbar__count {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted-strong);
}

/* ---------- Vacancy cards ---------- */
.joblist {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: var(--s-4);
}
.jobcard {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
}
.jobcard__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.jobcard__meta { font-size: var(--fs-xs); color: var(--muted-strong); }
.jobcard h3 { margin: 0; }
.jobcard h3 a { color: var(--ink); }
.jobcard h3 a:hover { color: var(--blue); }
.jobcard p { margin: 0; font-size: var(--fs-sm); }
.jobcard__facts { display: grid; gap: .5rem; margin: 0; }
.jobcard__facts > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .4rem; }
.jobcard__facts dt { font-size: var(--fs-xs); color: var(--muted-strong); margin: 0; }
.jobcard__facts dd { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); margin: 0; text-align: right; }
.jobcard .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Read-only field ---------- */
.form input[readonly] { background: var(--tint); color: var(--muted-strong); cursor: default; }

/* ---------- Map ---------- */
.mapframe {
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Pagination ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.pager__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pager__link:hover { border-color: var(--blue); color: var(--blue); }
.pager__link.is-disabled { color: var(--muted-strong); background: var(--tint); cursor: not-allowed; }
.pager__status { font-size: var(--fs-xs); color: var(--muted-strong); }

@media (max-width: 560px) {
  .filterbar__actions { width: 100%; }
  .filterbar__actions .btn { flex: 1 1 auto; justify-content: center; }
  .pager { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Application form
   The career application collects a full candidate record — personal details,
   both addresses, every examination passed, certifications, experience and the
   supporting documents. That is too much to read as one undifferentiated column,
   so it is banded into numbered sections, and the education repeater is laid out
   as a table on a laptop and as labelled rows on a phone.
   --------------------------------------------------------------------------- */

/* A control the markup renders hidden — the permanent-address block and the
   repeater's Add button both start that way. */
[hidden] { display: none !important; }

.formpanel { max-width: 1040px; margin-inline: auto; }
.formpanel > h2 { margin-bottom: .5rem; }

.form--application { gap: var(--s-4); }

/* A block fieldset, not a grid one: a legend inside a grid or flex fieldset is
   laid out inconsistently between browsers. */
.formsec {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.formsec > * + * { margin-top: var(--s-3); }
.formsec + .formsec { padding-top: 0; border-top: 1px solid var(--line); }
/* The legend sits over the section rule, and the browser already reserves the
   legend's own height above the content box. Left to the generic rule above, the
   first field of every section dropped more than 50px away from its heading. */
.formsec > .formsec__legend + * { margin-top: .75rem; }

.formsec__legend {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
}
.formsec__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.formsec__hint { font-size: var(--fs-sm); color: var(--muted-strong); max-width: 68ch; }

.form__row--three { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.form__group { display: grid; gap: var(--s-3); }
.textarea--short { min-height: 5.5rem; }
.form__submit { display: grid; gap: .6rem; justify-items: start; }

/* Checkbox rows. The control itself meets the 24px minimum target size, and the
   label beside it is clickable as well. */
.check { display: flex; align-items: flex-start; gap: .65rem; }
.check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin: .15rem 0 0;
  accent-color: var(--navy);
  cursor: pointer;
}
.check label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--body);
  line-height: 1.55;
  cursor: pointer;
}
.check .req { color: #C0392B; }

/* Educational qualifications repeater. */
.qual { display: grid; gap: var(--s-2); }
.qual__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
}
.qual__remove {
  align-self: end;
  min-height: 40px;
  min-width: 44px;
  justify-content: center;
}
.qual__add { justify-self: start; }

@media (min-width: 860px) {
  .qual__row { grid-template-columns: 1.3fr 1.7fr .7fr .8fr auto; align-items: start; }
  /* The first row carries the column headings for the rows beneath it, which are
     kept in the markup for screen readers and for the stacked layout below. */
  .qual__row:not(:first-child) .field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .form--application { gap: var(--s-3); }
  .form__submit .btn { width: 100%; justify-content: center; }
}

/* The section list in the Careers panel: the same numbered list, but each item is a
   single line, so the 32px marker would leave it swimming in space. */
.panel__subhead { margin-top: var(--s-3); color: var(--muted-strong); }
.steplist--compact { gap: .35rem; margin-top: var(--s-2); }
.steplist--compact li { min-height: 26px; padding-left: 2.25rem; display: flex; align-items: center; }
.steplist--compact li::before { width: 26px; height: 26px; }
.steplist--compact strong { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Form field alignment
   `.field` is a grid, and two fields side by side in a `.form__row` stretch to
   the same height. With auto rows that extra height was distributed inside the
   field, so a control whose neighbour carried a hint sat lower than the one
   beside it — the date of birth and gender pair being the clearest case.
   --------------------------------------------------------------------------- */
.field { align-content: start; }
.field input, .field select { min-height: 46px; }

/* A date input has no placeholder, so the base `:invalid:not(:placeholder-shown)`
   rule painted it red before the applicant had reached it. `:user-invalid` only
   applies once they have actually interacted with the control. */
.field input[type="date"]:invalid:not(:user-invalid) { border-color: var(--line); }
.field input[type="date"]:user-invalid { border-color: #C0392B; }

/* `.field textarea` sets an 8rem floor, which is more than an address needs. */
.field textarea.textarea--short { min-height: 5.5rem; }

/* A row holding one field would otherwise stretch that field the full width. */
@media (min-width: 720px) {
  .form__row--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* `.btn--ghost` is a dark-band component — white text on a translucent white
   fill. On the white form panel it is invisible. This is its light-band twin. */
.btn--outline {
  background: var(--white);
  border-color: var(--line);
  color: var(--navy);
  backdrop-filter: none;
}
.btn--outline:hover {
  background: var(--tint);
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

/* The security question sits inside its own label, so a screen reader announces the
   question with the field rather than as loose text beside it. */
.captcha__question {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

/* ---------- Searchable state and district selects ----------
   The markup carries a native `<select>` holding every state and every district,
   so the field works with scripting unavailable. `main.js` hides that select and
   puts this text input and listbox in front of it; the select is still what the
   form submits. None of the rules below apply until that has happened.
   -------------------------------------------------------- */
.combo { position: relative; }

.combo__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 28px rgba(15, 48, 87, .16);
}

/* The state each district belongs to. Dropped once the list is down to one
   group, where it would only repeat the field above it. */
.combo__group {
  padding: .55rem .9rem .25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

/* 44px, so an option is a full tap target on a phone. */
.combo__option {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .9rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}

.combo__option:hover,
.combo__option.is-active { background: var(--tint); }

/* Amber as a border rather than as text — 2.11:1 on white is not readable. */
.combo__option[aria-selected="true"] {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--amber);
}

.combo__empty {
  padding: .75rem .9rem;
  font-size: var(--fs-xs);
  color: var(--muted-strong);
}

/* ---------- Application acknowledgement ----------
   The page an applicant lands on after a successful submission. It repeats the
   whole record back for printing, so it is laid out to survive being printed as
   much as being read on screen.
   ------------------------------------------------ */
.ack { display: grid; gap: var(--s-2); }

.ack__ref {
  display: grid;
  gap: .25rem;
  margin-top: var(--s-2);
  padding: 1rem 1.25rem;
  background: var(--tint);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-sm);
}

.ack__ref-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

/* The number is the one thing on this page the applicant has to be able to read
   back over the telephone, so it is the largest thing on it. */
.ack__ref-no {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
}

.ack__ref-meta { font-size: var(--fs-xs); color: var(--muted-strong); }

.ack__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

.ack__record { margin-top: var(--s-4); }

.ack__subhead {
  margin: var(--s-3) 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

.ack__list { display: grid; gap: .75rem; margin: 0; }
.ack__list > div { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; }
.ack__list dt { font-size: var(--fs-sm); font-weight: 600; color: var(--muted-strong); }
.ack__list dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); }

.ack__files { margin: 0; padding-left: 1.1rem; }

.ack__foot { margin-top: var(--s-3); }

@media (max-width: 640px) {
  .ack__list > div { grid-template-columns: 1fr; gap: .15rem; }
  .ack__ref-no { font-size: 1.4rem; }
}

/* Shown only on paper: a printed sheet has left the site behind and has to say
   for itself who issued it. */
.printhead { display: none; }

@media print {
  /* Everything that is navigation, decoration or an action the paper cannot take. */
  .topbar, .header, .footer, .floating, .pagehero, .scroll-progress,
  .skip-link, .no-print, .modal, .cta { display: none !important; }

  body { background: #fff; color: #000; }
  .section { padding: 0 !important; }
  .shell { max-width: none; padding: 0 !important; }

  /* Identifies the sheet once it has left the screen: who issued it, which
     application it is, and when it was filed. */
  .printhead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #000;
    font-family: var(--font-head);
  }
  .printhead__brand { display: flex; align-items: baseline; gap: .75rem; }
  .printhead__brand strong { font-size: 1.1rem; letter-spacing: .04em; }
  .printhead__brand span { font-size: .8rem; }
  .printhead__ref { display: grid; text-align: right; font-size: .8rem; }
  .printhead__ref span:first-child { font-weight: 700; letter-spacing: .04em; }

  /* Panels are a screen device; on paper they only waste the margin. */
  .panel, .ack {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
  }

  /* Kept on paper: it is the one thing on the sheet the applicant has to be able
     to quote, and the printed header alone is easy to overlook. */
  .ack__ref { border: 1px solid #000; background: none; }
  .ack__subhead { color: #000; }

  /* The reveal animation leaves elements at opacity 0 until they scroll into
     view, and print never scrolls them into view. */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }

  .table-wrap { overflow: visible !important; }
  .dtable { min-width: 0 !important; }
  .dtable thead th { background: none !important; color: #000 !important; border-bottom: 1px solid #000; }
  .ack__record, .ack__list > div, tr { break-inside: avoid; }

  a[href]::after { content: ''; }
}

/* ---------- Scroll reveal, quicker ----------
   The carried-over design fades each element in over .7s, and the observer waits
   until 12 % of it has crossed 8 % above the fold before starting. Together that
   reads as content arriving late rather than as motion, most of all on a phone
   where a thumb flick covers a whole section at once.

   Same effect, roughly twice as fast, and a shorter travel so it settles sooner.
   The per-element stagger is set inline as `--d` across every template; halving it
   here keeps the order it establishes without touching them.
   -------------------------------------------- */
.reveal {
  transform: translateY(14px);
  transition:
    opacity .32s var(--ease) calc(var(--d, 0s) * .5),
    transform .32s var(--ease) calc(var(--d, 0s) * .5);
}

/* ---------- The application form on a phone ----------
   Field staff apply from low-end Android handsets, and the client's own review is
   done on a phone. Two things the desktop layout gets away with and a phone does
   not.
   ---------------------------------------------------- */
@media (max-width: 900px) {
  /* iOS Safari zooms the whole page when a control smaller than 16px takes focus,
     and does not zoom back out. On a form this long that leaves the applicant
     scrolling sideways through every remaining field. 16px is the whole fix. */
  .field input,
  .field select,
  .field textarea,
  .combo__input,
  .combo__option {
    font-size: 16px;
  }

  /* A 24px checkbox meets WCAG 2.5.8, but it is a poor target for a thumb. The
     label is already clickable, so giving the row a 44px height makes the real
     target the full width of the form rather than the box alone. */
  .check {
    align-items: center;
    min-height: 44px;
    padding: .25rem 0;
  }
  .check input[type="checkbox"] {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    margin: 0;
  }
  .check label { padding: .5rem 0; }
}