/* Palette and typography follow ams.org: Merriweather for headings over a
   sans-serif text face, brand blue on white. */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Names are kept from the previous theme because the admin pages rendered in
     server.js reference them; only the values change. */
  --bg: #ffffff;
  --fg: #212529;
  --accent: #0057b8;
  --accent-dark: #00408a;
  --muted: #5c6771;
  --field-bg: #ffffff;
  --border: #dee2e6;
  --error: #b02a37;

  --brand: #0057b8;
  --brand-ink: #ffffff;
  --wash: #f4f6f8;

  --serif: Merriweather, Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The measure every page shares. The nav bar spans the window and re-applies
   this to its own contents, so the two line up. */
main {
  max-width: 54rem;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 4rem;
}

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

a:hover,
a:focus {
  color: var(--accent-dark);
  text-decoration: underline;
}

b,
strong {
  font-weight: 700;
}

h1 {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

/* The payoff line of the headline, in the brand blue. <em> rather than a bare
   span so it still reads as emphasis with styles off; the italics the tag
   would bring are not wanted at display size. */
h1 em {
  color: var(--accent);
  font-style: normal;
}

h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 2.5rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}

p {
  margin: 0 0 1.15rem;
}

ul {
  padding-left: 1.35rem;
}

li {
  margin-bottom: 0.4rem;
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* The commitments mirror the numbered outline in the source document. */
.commitments {
  padding-left: 1.5rem;
}

.commitments > li {
  margin-bottom: 1.15rem;
}

.commitments ol {
  margin-top: 0.65rem;
  padding-left: 1.5rem;
}

.commitments ol li {
  margin-bottom: 0.8rem;
}

/* -------------------------------------------------------------- masthead */

/* Identity row on white above the blue bar, as ams.org sets it. */
.masthead {
  max-width: 54rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1.25rem;
}

.masthead .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--fg);
  text-decoration: none;
}

.masthead .wordmark:hover,
.masthead .wordmark:focus {
  color: var(--fg);
  text-decoration: none;
}

.masthead img {
  height: 3.1rem;
  width: auto;
  display: block;
}

.masthead b {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.masthead small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ nav */

.site-nav {
  background: var(--brand);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
}

.site-nav .nav-inner {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  color: var(--brand-ink);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--brand-ink);
  text-decoration: none;
  border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* The page you are on is not a link anywhere useful. */
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--brand-ink);
  cursor: default;
  pointer-events: none;
}

/* The masthead sits to the left of the links and names the site. */
.site-nav .brand {
  font-family: var(--serif);
  font-weight: 700;
  margin-right: auto;
  letter-spacing: 0.01em;
}

/* Halmos tombstone closing the page, as at the end of a proof. Drawn rather
   than typed so it matches the surrounding text at any font. */
.qed {
  margin: 2.5rem 0 0;
  text-align: right;
  line-height: 1;
}

.qed::after {
  content: "";
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--fg);
}

/* ---------------------------------------------------------------- forms */

.apply-form p {
  margin: 0 0 1.15rem;
}

.apply-form label {
  display: block;
  font-weight: 600;
}

.apply-form .optional {
  font-weight: 400;
  color: var(--muted);
}

.apply-form .hint {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.15rem 0 0.4rem;
  max-width: 36rem;
}

.apply-form input,
.apply-form select,
.apply-form textarea {
  display: block;
  width: 100%;
  max-width: 36rem;
  margin-top: 0.3rem;
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg);
  background: var(--field-bg);
  border: 1px solid #adb5bd;
  border-radius: 3px;
}

.apply-form textarea {
  resize: vertical;
}

/* The bordered box the text fields get looks wrong wrapped around a file
   picker, which draws its own button. */
.apply-form input[type="file"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.92rem;
}

.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.apply-form .field-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--error);
}

.apply-form button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 1.6rem;
  color: var(--brand-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
}

.apply-form button:hover,
.apply-form button:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.apply-form .submit {
  margin-top: 1.75rem;
}

.apply-form button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.form-status {
  margin-left: 0.85rem;
  color: var(--muted);
}

.form-status.error {
  color: var(--error);
}

/* Honeypot: positioned off-screen rather than display:none, which some bots
   know to skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- terms */

.terms {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  background: var(--wash);
}

.terms summary {
  cursor: pointer;
  font-weight: 600;
}

.terms ol {
  margin: 1rem 0 0.35rem;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

.terms li {
  margin-bottom: 0.65rem;
}

.terms b {
  color: var(--fg);
}

.consent label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.5;
}

.consent input[type="checkbox"] {
  width: auto;
  margin: 0.3rem 0 0;
  flex: none;
  accent-color: var(--accent);
}

/* -------------------------------------------------------------- chooser */

.choices {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.choices li {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  background: var(--wash);
}

.choices a {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.choices span {
  display: block;
  max-width: 36rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------------------------------------------------- sponsorship table */

/* Five columns will not fit a phone, so the table scrolls inside its own box
   rather than widening the page. */
.tier-scroll {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.tiers {
  border-collapse: collapse;
  width: 100%;
  /* never squeeze columns below their content — overflow scrolls instead */
  min-width: 38rem;
  font-size: 0.95rem;
}

.tiers th,
.tiers td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: center;
}

.tiers thead th {
  font-family: var(--serif);
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
  background: var(--wash);
}

.tiers thead th span {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--muted);
}

.tiers tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
}

.tiers .group th {
  background: var(--brand);
  color: var(--brand-ink);
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.tiers .yes {
  color: var(--accent);
  font-weight: 700;
}

.tiers .fn {
  text-decoration: none;
}

.footnote {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------------ faq */

/* Two columns of questions that open. No rule under each row: questions wrap
   to one or two lines, so rules in adjacent columns come to rest at different
   heights and the page fills with short lines that align with nothing. Space
   separates the questions instead, and nothing can fall out of alignment. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.75rem;
  margin: 1.25rem 0 2.25rem;
  align-items: start;
}

/* Side by side, each column is too narrow to read a paragraph in. */
@media (max-width: 48rem) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

.faq details {
  margin-bottom: 1.05rem;
}

.faq details:last-child {
  margin-bottom: 0;
}

.faq summary {
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  /* Both are needed: the property hides the marker in Firefox, the
     pseudo-element in Safari and older Chrome. */
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover,
.faq summary:focus-visible {
  color: var(--accent);
}

/* A chevron rather than the default triangle, which sits tight against the
   text and is drawn differently by every browser. Pinned to the first line
   rather than centred, so it stays put on a question that wraps. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.15rem;
  top: 0.45em;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.faq details[open] > summary::after {
  transform: rotate(-135deg);
  top: 0.62em;
}

.faq .answer {
  padding: 0.5rem 1.5rem 0 0;
  font-size: 0.97rem;
}

.faq .answer p {
  margin: 0 0 0.7rem;
}

.faq .answer ol {
  margin: 0.6rem 0 0;
  padding-left: 1.35rem;
}

.faq .answer li {
  margin-bottom: 0.55rem;
}

.faq .answer > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------- formula */

/* A display equation, set as MathML so the browser applies real mathematical
   spacing around the operators and picks a maths face for the terms. */
.formula {
  margin: 1.2rem 0;
  font-size: 1.02rem;
  /* An equation is one object: it must not be broken across lines. In the
     narrow FAQ column there is barely room for this one, so let it scroll
     inside its own box rather than wrap mid-expression or push the column
     wider than its neighbour. */
  overflow-x: auto;
  overflow-y: hidden;
}

/* ----------------------------------------------------------- supporters */

/* The strip under the headline. A ruled section heading would compete with the
   h1 directly above it, so the label is quiet and the marks run smaller than
   in the standalone sponsors section.  */
.supporters {
  margin: 2.75rem 0 2.25rem;
  padding: 0 0 1.1rem;
}

.sponsor-grid-divider {
  margin: 0 0 2.25rem;
  border-top: 1px solid var(--border);
}

.supporters h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}

.supporters .sponsor-group-label.tier-divider {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
}

.supporters .sponsors {
  --mark-box: 2.1rem;
  --logo-scale: 0.74rem;

  margin: 0;
  gap: 1.9rem 0.9rem;
}

/* Tighter than on the sponsorship page: this is a strip under the headline,
   not a section of its own. */
.supporters .sponsors + .sponsors {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.supporters .sponsors .name {
  margin-top: 0.45rem;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------- sponsors */

/* A grid, not a wrapping row. The marks differ enough in width that flex let
   each one set its own column position, so nothing lined up from one row to
   the next and the last row read as a ragged offcut. Fixed tracks put every
   mark in the same column on every row, and a short last row sits under the
   columns above it. Tracks are sized to the widest wordmark at its rendered
   height, so no mark has to be squeezed to fit its cell. */
.sponsors {
  /* The mark box and the size the logos are drawn at. Both are multiplied by
     --tier per item, so one set of per-logo numbers serves every tier and
     both scales. */
  --mark-box: 3rem;
  --logo-scale: 1rem;

  list-style: none;
  display: grid;
  /* Twelve columns rather than tracks sized to a mark: the tiers want
     different widths, and spans off one frame keep their columns aligned with
     each other instead of each tier ruling its own grid. Every tier divides
     twelve exactly, so each one starts on a fresh row. */
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: 2.5rem 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* Bigger tiers get wider cells as well as bigger marks: a wordmark's width is
   what really sets the room it needs, so scaling the mark without the cell
   would just run it into the max-width clamp. */
/* A geometric run, each tier 1.3x the one below it. Evenly spaced steps were
   too fine to read as rank once the marks got small: 1.1 against 0.92 is a
   nine percent difference, which the eye takes for the marks being drawn a
   little differently rather than for a tier. The whole run is scaled up so
   the smallest tier still has somewhere to go.

   --tier-damp pulls the whole run in together on narrower screens. Held at
   full size there, the wide wordmarks in the top tiers hit the max-width
   clamp and come back the same size as the tier below, which is the flat
   look this is meant to fix. */
.sponsors {
  --tier-damp: 1;
}

.sponsors.t1 { --tier: calc(2.6 * var(--tier-damp)); }
.sponsors.t2 { --tier: calc(2 * var(--tier-damp)); }
.sponsors.t3 { --tier: calc(1.55 * var(--tier-damp)); }
.sponsors.t4 { --tier: calc(1.2 * var(--tier-damp)); }
.sponsors.t5 { --tier: calc(0.92 * var(--tier-damp)); }

@media (max-width: 48rem) {
  .sponsors {
    --tier-damp: 0.72;
  }
}

.sponsors.t1 > li { grid-column: span 6; }

/* A tier of one: span the full frame so the mark centres on the page rather
   than sitting in the left half of the row. */
.sponsors.t1 > li:only-child { grid-column: span 12; }
.sponsors.t2 > li { grid-column: span 4; }

/* Four across, not three. At three the tier's marks can leave the last one
   alone against a rule with two empty cells beside it, which reads as a
   mistake rather than as the end of a tier. */
.sponsors.t3 > li,
.sponsors.t4 > li,
.sponsors.t5 > li { grid-column: span 3; }

/* A rule between the tiers. Without one the marks simply change size partway
   down the block, which reads as inconsistency rather than as rank; the rule
   is what makes a size change legible as a step. The tiers keep one column
   frame between them, so the marks still line up across the rules. */
.sponsors + .sponsors {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
}

.sponsors li {
  margin-bottom: 0;
  min-width: 0;
}

.sponsors a {
  display: block;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.sponsors a:hover,
.sponsors a:focus {
  color: var(--fg);
  text-decoration: none;
}

/* A fixed box the marks are centred in, so logos of different proportions sit
   on one optical line and their captions line up underneath. */
.sponsors .mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--mark-box) * var(--tier, 1));
  /* The per-logo max-heights are in em, so this is the one place a logo's
     drawn size is set. */
  font-size: calc(var(--logo-scale) * var(--tier, 1));
}

.sponsors img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
}

/* Wordmarks read heavier than pictorial marks at equal height. Matched on src
   rather than alt: alt is empty whenever a caption already names the sponsor,
   so an alt selector silently stops applying the moment one is added. */

/* Set against SAIR's lettering, which fills only the top of its lockup above
   the tagline: at the full box height this bold wordmark far outweighs it. */
.sponsors img[src$="caltech.jpg"] {
  max-height: 1.8em;
}

.sponsors img[src$="8vc.png"] {
  max-height: 1.1em;
}

.sponsors img[src$="dmodel.png"] {
  max-height: 1.5em;
}

/* Long wordmarks: held by height so they do not outweigh the pictorial marks,
   since their width is what really sets how much room they take in the row. */
.sponsors img[src$="conway.png"] {
  max-height: 1.05em;
}

.sponsors img[src$="extraordinary.png"] {
  max-height: 0.95em;
}

/* Single-line wordmark now, not the two-line Andreessen Horowitz mark, so it
   is held like the other wordmarks rather than given the extra height stacked
   lines needed. Its letters run the full height of the file, so 1.3em puts
   their caps where the caps beside them sit. */
.sponsors img[src$="a16z.png"] {
  max-height: 1.3em;
}

.sponsors img[src$="indent.svg"] {
  max-height: 1.35em;
}

.sponsors img[src$="hud.svg"] {
  max-height: 1.7em;
}

.sponsors img[src$="formation.svg"] {
  max-height: 0.95em;
}

.sponsors img[src$="extropic.png"] {
  max-height: 0.85em;
}

.sponsors img[src$="pareto.png"] {
  max-height: 1.15em;
}

.sponsors img[src$="factory.svg"] {
  max-height: 1.15em;
}

/* A bold wordmark whose "b" runs the full height of the file, so it is held by
   its ascender rather than its caps and sits a shade under the lighter
   wordmarks beside it. */
.sponsors img[src$="base10.svg"] {
  max-height: 1.05em;
}

/* The lockup carries a band of clear space above and below the mark, so it is
   given more height than its ink actually uses. */
/* Sized well under the other lockups despite matching their proportions. The
   file gives almost its whole height to the wordmark, and the mark beside it
   is a solid square rather than an outline, so at a lockup's usual height its
   letters came out larger than the wordmarks next to it and the square read as
   a heavy block. */
.sponsors img[src$="sfcompute.svg"] {
  max-height: 1.1em;
}

.sponsors img[src$="primeintellect.svg"] {
  max-height: 1.35em;
}

/* The mark stands a good deal taller than the caps beside it, so the lockup is
   held by the mark and the wordmark lands where the other wordmarks do. */
.sponsors img[src$="emcap.svg"] {
  max-height: 1.8em;
}

/* Lining figures in a serif: lighter on the page than the sans wordmarks at
   the same cap height, so it sits a shade above them. */
.sponsors img[src$="1517.svg"] {
  max-height: 1.2em;
}

/* A solid pictorial mark, and a wide one: at the full box height its orange
   would outweigh every other mark in the row. */
/* Mark and wordmark in one lockup, so it is held like the other lockups
   rather than filling the box the way a bare pictorial mark does. The mark
   stands well clear of the wordmark's caps, which are only about six tenths
   of the lockup's height, so it is given more than a wordmark of the same
   height would need for its letters to match theirs. */
.sponsors img[src$="terac.svg"] {
  max-height: 1.85em;
}

/* A single tall glyph rather than a mark with breadth: left to fill the box
   like the square marks beside it, it towers over them on nothing but a thin
   stroke. Held shorter so its weight, not its height, matches theirs. */
.sponsors img[src$="midas.png"] {
  max-height: 2.2em;
}

.sponsors img[src$="cloudflare.svg"] {
  max-height: 2.1em;
}

/* Mountain plus wordmark, wider than Caltech (about five times as long as it
   is tall). At the box height it would fill a three-across cell and outweigh
   the marks beside it, so it is held near Conway's width. */
.sponsors img[src$="annapurna.png"] {
  max-height: 1.55em;
}

.sponsors .name {
  display: block;
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------- portal */

.status-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
  background: var(--wash);
}

.status-badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--muted);
}

.status-badge.status-under_review { background: #8a6d00; }
.status-badge.status-accepted     { background: #1b7a3d; }
.status-badge.status-waitlisted   { background: #9a5b00; }
.status-badge.status-declined     { background: #6c757d; }
.status-badge.status-withdrawn    { background: #6c757d; }

/* Update and withdraw are links to their own pages, dressed as the form
   buttons so they read as actions; withdrawing is outlined so it is never the
   one the eye lands on first. */
.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
}

.status-actions .button {
  display: inline-block;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  color: var(--brand-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  text-decoration: none;
}

.status-actions .button:hover,
.status-actions .button:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  text-decoration: none;
}

.status-actions .button-quiet {
  color: var(--error);
  background: transparent;
  border-color: var(--border);
}

.status-actions .button-quiet:hover,
.status-actions .button-quiet:focus {
  background: transparent;
  border-color: var(--error);
}

/* A note the organisers wrote for this applicant specifically, so it is set
   apart from the boilerplate above it. */
.status-note {
  border-left: 3px solid var(--border);
  padding-left: 0.9rem;
  margin: 0 0 1rem;
}

.status-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1.1rem;
  margin: 0;
  font-size: 0.95rem;
}

.status-meta dt { color: var(--muted); }
.status-meta dd { margin: 0; }

/* The prompt is a details block so it can sit open on first sign-in and be
   collapsed away afterwards, without becoming a separate page. */
.change-password summary {
  font-weight: 600;
}

.change-password .apply-form {
  margin-top: 1rem;
}

.notice-error {
  border-left-color: var(--error);
}

.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
  background: var(--wash);
}

.signed-in {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 1.15rem;
}

/* Signing out is a POST, so it is a real form; it should still read as part of
   the sentence around it rather than as a button block. */
.inline-form {
  display: inline;
}

.inline-form button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* Needs to outrank `.apply-form label { display: block }`, which would
   otherwise put the checkbox on its own line above its text. */
.apply-form .inline-check,
.inline-check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-weight: 400;
}

.apply-form .inline-check input,
.inline-check input {
  width: auto;
  margin: 0.25rem 0 0;
  flex: none;
  accent-color: var(--accent);
}

.status-form {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.1rem 1.25rem;
  background: var(--wash);
  margin-bottom: 2rem;
}

.portal-help {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 34rem) {
  body {
    font-size: 1rem;
  }

  main {
    padding: 1.75rem 1.15rem 3rem;
  }

  .site-nav .nav-inner {
    padding: 0.6rem 1.15rem;
    gap: 1.1rem;
    font-size: 0.9rem;
  }

  .masthead {
    padding: 1.15rem 1.15rem 1rem;
  }

  .masthead img {
    height: 2.4rem;
  }

  .masthead b {
    font-size: 1.15rem;
  }

  .masthead small {
    font-size: 0.78rem;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
  }

  ul {
    padding-left: 1.15rem;
  }

  .choices li {
    padding: 0.9rem 1rem;
  }

  /* iOS zooms the whole page when a focused field is under 16px. Anything
     smaller here costs the user a pinch-to-zoom on every single question. */
  .apply-form input,
  .apply-form select,
  .apply-form textarea {
    font-size: 16px;
  }

  .apply-form button {
    width: 100%;
    padding: 0.75rem 1rem;
  }

  /* Beside a full-width button there is no room left for it to sit inline. */
  .form-status {
    display: block;
    margin: 0.7rem 0 0;
  }

  /* Four columns instead of twelve: the top tier takes a row to itself and
     the rest pair up, so the marks stay legible rather than each tier trying
     to hold its full-width share. */
  .sponsors {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 0.75rem;
  }

  .sponsors.t1 > li { grid-column: span 4; }

  .sponsors.t2 > li,
  .sponsors.t3 > li,
  .sponsors.t4 > li,
  .sponsors.t5 > li {
    grid-column: span 2;
  }

  .supporters {
    margin-bottom: 1.75rem;
    padding: 0.9rem 0;
  }

  .supporters .sponsors {
    gap: 1.5rem 0.75rem;
  }
}

/* Confirmation questions stay grouped with their required responses. */
.confirmation-form fieldset {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  min-width: 0;
}
.confirmation-form legend { font-weight: bold; padding: 0 0.35rem; }
.confirmation-form .inline-check { display: flex; margin: 0.85rem 0; }
.confirmation-form li { margin-bottom: 0.4rem; }

/* Event documents: the portal checklist and the read-and-sign page. */
.documents-panel { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.documents-panel h3 { margin: 0 0 0.5rem; }
.documents-count { font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-left: 0.4rem; }
.documents-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.documents-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.documents-title { font-weight: 600; flex: 1 1 16rem; }
.documents-state { color: var(--muted); font-size: 0.92rem; }
.documents-signed { color: #1f8765; }
.documents-signed::before { content: "\2713\00a0"; }
.documents-list .status-actions { margin: 0 0 0 auto; }
.status-actions .button-plain { color: var(--fg); background: transparent; border-color: var(--border); }
.status-actions .button-plain:hover,
.status-actions .button-plain:focus { background: var(--wash); border-color: var(--muted); }
.document-form { margin-top: 1rem; }
.document-upload { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.document-upload input[type="file"] { max-width: 100%; }
.documents-reading { margin: 0.9rem 0 0; }
.documents-note { margin-top: 1.25rem; }