/* 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;
}

/* -------------------------------------------------------------- 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;
}

/* ----------------------------------------------------------- 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: 0 0 2.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 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 .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. */
.sponsors.t1 { --tier: 1.7; }
.sponsors.t2 { --tier: 1.3; }
.sponsors.t3 { --tier: 1.1; }
.sponsors.t4 { --tier: 0.92; }
.sponsors.t5 { --tier: 0.78; }

.sponsors.t1 > li { grid-column: span 6; }
.sponsors.t2 > li,
.sponsors.t3 > li { grid-column: span 4; }
.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. */
.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;
}

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

/* Two-line wordmark: it carries as much ink stacked as a wide one does in a
   line, so it sits lower than its box would otherwise allow. */
.sponsors img[src$="a16z.svg"] {
  max-height: 1.9em;
}

.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;
}

/* The lockup carries a band of clear space above and below the mark, so it is
   given more height than its ink actually uses. */
.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. */
.sponsors img[src$="cloudflare.svg"] {
  max-height: 2.1em;
}

/* The logomark sizes like the other pictorial marks. It keeps its own pure
   black rather than being flattened to the site's ink, since the guidelines
   allow the mark in black or white only. */

/* Held at its native height. The source is 92x90, so rendering it larger than
   this would show the upscale; at 2.8rem it is roughly 1:1 on a retina screen
   and downsampled everywhere else. The rem term is a ceiling the tier scale
   cannot lift it past, which is what the em term alone would do. */
.sponsors img[src$="expmath.png"] {
  max-height: min(2.8em, 2.8rem);
  image-rendering: auto;
}

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

/* The programme, not the agency, is the thing being credited. */
.sponsors .sub {
  color: var(--muted);
}

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

/* --------------------------------------------------------------- banner */

/* Sits directly under the nav bar so it is seen before any of the page's own
   dates, which is the point of it. Amber rather than the brand blue: this is a
   notice about a change, not navigation. */
.site-banner {
  margin: 0;
  padding: 0.7rem 0;
  background: #fff4e0;
  border-bottom: 1px solid #f0d9ae;
  color: #6b4a10;
  font-size: 0.95rem;
  text-align: center;
}

.site-banner b {
  color: #6b4a10;
  font-weight: 700;
}

/* --------------------------------------------------------------- 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; }

/* 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;
  }
}