/*
 * CEPR-Tsinghua Conference — guest-facing registration.
 *
 * Served from the application's own origin. No CDN, no Google Fonts, no third-party stylesheet:
 * guests connect from Mainland China, where those do not resolve and the page arrives broken.
 *
 * The type stack is deliberately system-only. It renders correctly in both languages on every
 * device the guest list will actually use, and costs nothing on a hotel connection. A licensed
 * face can be self-hosted here later without changing anything else.
 */

:root {
  /* CEPR's logo blue, and a blue-purple beside it for the banner and accents (CEPR, via
     Pentagon Events, 26 September 2026). */
  --brand: #101f96;
  --brand-tint: #2a2fa8;
  --accent: #c9c5f0;
  --accent-soft: #ebe9fa;
  --paper: #f6f7fb;
  --paper-raised: #ffffff;
  --link: #3b2ca0;
  --alert: #9c3d2a;
  --alert-soft: #fbeeeb;
  --ink: #161a2e;
  --ink-muted: #4d5068;
  --rule: #dcdde8;
  /* Input borders are a UI component boundary: WCAG 1.4.11 wants 3:1, and this clears it
     against the raised, paper and disabled grounds alike. */
  --field-border: #767a90;

  --radius: 4px;
  --measure: 52rem;

  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC",
    sans-serif;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  /* Assistants complete these on phones; kill the double-tap zoom delay. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(201, 197, 240, 0.4);
  /* Answering "yes" to the learning journeys inserts a tall block. Chrome's scroll anchoring
     then holds the content *below* it still and scrolls the viewport down by the block's
     height, dropping the guest at the last time slot instead of the question they just
     answered. This page loads nothing asynchronously, so anchoring buys us nothing and costs
     us that. */
  overflow-anchor: none;
}

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

:where(a) {
  color: var(--link);
  text-underline-offset: 0.15em;
}

/* Never remove the focus ring without replacing it. */
:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* The hidden attribute is only display:none in the UA stylesheet, so any author rule that sets
   display beats it. Several here do (the rail links, the choice rows), and a section suppressed
   in JS would otherwise stay on screen. */
[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Header ---------- */

.summit-header {
  background: var(--brand);
  color: #fff;
}

.summit-header__bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.summit-header__wordmark {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.locale-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* The toggle is a button on the registration page — it posts the form so nothing typed is
   lost — and a link elsewhere. Both should read the same. */
.locale-toggle a,
.locale-toggle button {
  font: inherit;
  font-size: 0.875rem;
  color: var(--accent);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.locale-toggle a[aria-current="true"],
.locale-toggle button[aria-current="true"] {
  background: var(--accent);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

/* The wordmark and the toggle on one line on a phone.
   In English the bar needs 413px of a 428px screen and wraps, putting the toggle on its own
   line under the title; in Chinese 亚洲公益国际会议 is short enough that it never did, which is
   why it only showed in one language. The letter-spacing and the padding are what is spent
   here, not the type size — the wordmark is already the smallest text on the page. */
@media (max-width: 30rem) {
  .summit-header__bar {
    padding-inline: 1rem;
    gap: 0.5rem;
  }

  .summit-header__wordmark {
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
  }

  .locale-toggle {
    flex: 0 0 auto;
    gap: 0.25rem;
  }

  .locale-toggle a,
  .locale-toggle button {
    padding: 0.25rem 0.375rem;
  }
}

/* One notch smaller again below 416px, which is where most phones actually are — the 12, 13
   and 14 are 390, the SE and the mini 375. The wordmark gives up the size; the toggle keeps
   its own, because it is the thing being tapped. Below about 350px the two go onto separate
   lines and that is left alone: a second line reads better than "TSINGHUA–PAA IMPACT SU…". */
@media (max-width: 26rem) {
  .summit-header__bar {
    padding-inline: 0.875rem;
    gap: 0.25rem;
    /* Below this width the two stop being allowed to wrap, so the toggle can never be pushed
       onto a line of its own. The wordmark gives way instead — it starts to ellipsise somewhere
       under 350px, which is a better failure than a control moving. */
    flex-wrap: nowrap;
  }

  .summit-header__wordmark {
    font-size: 0.75rem;
    letter-spacing: 0;
    /* min-width:0 is what lets a flex item shrink below its own content. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .locale-toggle a,
  .locale-toggle button {
    padding: 0.25rem;
  }
}

/* The key visual anchors a proportioned band, not a full-viewport hero.
   Shown whole rather than cropped to a fixed height: cropping cut the Chinese theme line off
   the left edge and the PAA and Tsinghua SEM lockups off the bottom, which is the co-branding
   this page exists to carry. Constrained to the content measure so it stays a band. */
.summit-keyvisual {
  background: var(--brand);
}

.summit-keyvisual img {
  display: block;
  width: 100%;
  max-width: calc(var(--measure) + 2.5rem);
  margin: 0 auto;
}

/* ---------- Layout ---------- */

.summit-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.summit-main > h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
  line-height: 1.25;
  color: var(--brand);
  margin: 0 0 0.5rem;
}

.lede {
  color: var(--ink-muted);
  margin: 0 0 2rem;
}

.summit-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
}

.summit-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* ---------- Form shell: rail beside the form ---------- */

/*
 * The form column keeps its reading measure at every width — long lines are what make a form
 * like this feel like work. On a wide screen the space beside it carries a scroll-spy rail
 * rather than being left empty, which is also what stops the page looking sparse on a monitor.
 *
 * Deliberately not a wizard or tabs: these guests hand the form to an assistant, and both need
 * to see the whole commitment at once. The rail moves the viewport; it never hides a field.
 */
.form-shell {
  display: block;
}

.section-rail {
  display: none;
}

/* Tablet portrait: no room for the rail beside the form, but plenty for a wider column than a
   phone needs. */
@media (min-width: 40rem) {
  .summit-main {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 64rem) {
  .summit-main {
    max-width: calc(var(--measure) + 16rem);
  }

  /* The heading and any notices sit in the form column, not the page, so they start on the
     same line as the fields rather than above the rail. */
  .form-shell {
    display: grid;
    grid-template-columns: 13rem minmax(0, var(--measure));
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    align-items: start;
  }

  .form-intro {
    grid-column: 2;
    grid-row: 1;
  }

  .form-shell > form {
    grid-column: 2;
    grid-row: 2;
  }

  .section-rail {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 4.5rem;
    font-size: 0.9375rem;
  }

  .section-rail__title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .section-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--rule);
  }

  .section-rail__list a {
    display: block;
    padding: 0.4rem 0.75rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    text-decoration: none;
  }

  .section-rail__list a:hover {
    color: var(--ink);
  }

  .section-rail__list a[aria-current="true"] {
    border-left-color: var(--link);
    color: var(--brand);
    font-weight: 600;
  }

  /* A section the guest still has to fix, marked where they are looking rather than only at
     the top of the page. */
  .section-rail__list a[data-invalid="true"]::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--alert);
    vertical-align: 0.05em;
  }
}

/* ---------- Sticky utility bar ---------- */

/* Appears once the key visual has scrolled away. The brand header is not pinned: 22rem of it
   would cost a third of a phone screen for no gain. */
.utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 6px rgba(16, 31, 150, 0.25);
}

.utility-bar__inner {
  max-width: calc(var(--measure) + 16rem);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.utility-bar__jump {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.utility-bar select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 16rem;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--brand-tint);
  color: #fff;
}

.utility-bar__locale {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
  font-size: 0.8125rem;
}

.utility-bar__locale a,
.utility-bar__locale button {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--accent);
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.utility-bar__locale a[aria-current="true"],
.utility-bar__locale button[aria-current="true"] {
  background: var(--accent);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

/* On a wide screen the rail already does the jumping, so the bar keeps only the language
   toggle and stays out of the way. */
@media (min-width: 64rem) {
  .utility-bar__jump,
  .utility-bar select {
    display: none;
  }
}

/* Anything jumped to must clear the bar. */
.form-section {
  scroll-margin-top: 4rem;
}

/* ---------- Sections ---------- */

/* A fieldset defaults to min-width: min-content, so it refuses to shrink below the widest
   thing inside it — here the nested legal lists — and pushes the page into a horizontal
   scroll on a phone. */
fieldset {
  min-width: 0;
}

.form-section {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 2.5rem;
  padding: 2rem 0 0;
}

.form-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.form-section > legend {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand);
  padding: 0;
  margin-bottom: 0.25rem;
}

.form-section__note {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}

/*
 * A section that reads as a continuation of the one above it: no rule, no gap and no visible
 * heading. The legend stays in the markup — a fieldset without one is unnamed to a screen
 * reader, and the rail still needs something to announce when it jumps here.
 */
.form-section--continues {
  border-top: 0;
  padding-top: 0;
  margin-top: -1.5rem;
}

.form-section--continues > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Fields ---------- */

.field {
  margin-bottom: 1.75rem;
  /* The select2 dropdown is anchored here rather than to the body, so this has to establish a
     containing block. Against a static parent select2's offset maths overflow the page. */
  position: relative;
}

/* :not(.choice) matters — a bare `.field > label` selector is more specific than `.choice`,
   so without it the consent checkboxes lose their flex row and the box stacks above its text. */
.field > label:not(.choice),
.field-group > legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--ink);
  /* Browsers give a legend 2px of inline padding of its own, which is why "Dietary restrictions"
     sat a hair to the right of "Designation" above it (PAA, 14 September 2026). */
  padding: 0;
}

.field .optional {
  font-weight: 400;
  color: var(--ink-muted);
}

/* Passport, visa and dietary labels carry both languages regardless of the toggle. */
.field .bilingual {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.field .hint,
p.hint {
  display: block;
  color: var(--ink-muted);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

p.hint {
  margin-top: 0;
  margin-bottom: 1rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}

/*
 * A native select sits at 43px, a text input at 47.6 and a date input at 49.6, each from its
 * own intrinsic sizing. Side by side in a row that reads as sloppy, so they are pinned to one
 * height. Textareas keep their own, being multi-line by nature.
 */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select {
  height: 3rem;
}

.field textarea {
  min-height: 6rem;
  resize: vertical;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--alert);
  border-width: 2px;
}

/* Locked, pre-populated fields. Read-only rather than disabled so a guest can still select and
   copy their own email, and so the value is not dropped from the tab order. */
.field input:disabled,
.field select:disabled,
.field input[readonly],
.field textarea[readonly] {
  background: #eeeff5;
  color: var(--ink-muted);
  -webkit-text-fill-color: var(--ink-muted);
  border-color: #c3c5d3;
  cursor: default;
}

/*
 * An error reads the same wherever it appears.
 *
 * This was scoped to .field, so the messages belonging to a group of radios or checkboxes —
 * dietary, residency, the breakout choice, the visa question — rendered in body colour and read
 * as a note rather than a problem. The message was there; it just did not look like an error.
 */
.error {
  display: block;
  color: var(--alert);
  font-size: 0.9375rem;
  margin-top: 0.375rem;
  font-weight: 600;
}

/*
 * A group of choices cannot take the red border a single control gets — the border would have
 * to go round every option. It says the same thing with its legend and a rule down the side, so
 * a guest scrolling back up finds the group the way they would find a bordered field.
 */
.field-group.is-invalid {
  border-left: 3px solid var(--alert);
  padding-left: 0.875rem;
  margin-left: -1rem;
}

.field-group.is-invalid > legend {
  color: var(--alert);
}

.field-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.field-row > * {
  flex: 1 1 8rem;
  min-width: 0;
}

/*
 * A date or number control carries an intrinsic minimum width that width: 100% does not beat,
 * so on a phone the third field in a row overflowed its box and sat on top of its neighbour.
 */
.field input[type="date"],
.field input[type="number"] {
  min-width: 0;
}

/*
 * Three fields across only fits a desktop. The wider basis makes the row break two-up and then
 * one, rather than squeezing all three onto a phone (PAA, 9 September 2026).
 */
.field-row--three > * {
  flex: 1 1 11rem;
}

/*
 * Bilingual labels wrap to two lines at different points, which left the inputs in a row
 * sitting at different heights. Each field becomes a column and its control is pushed to the
 * bottom, so the controls line up however tall the labels above them turn out to be.
 */
.field-row > .field {
  display: flex;
  flex-direction: column;
}

.field-row > .field > input,
.field-row > .field > select,
.field-row > .field > textarea,
.field-row > .field > .select2-container,
.field-row > .field > .iti {
  margin-top: auto;
}

/* ---------- Third-party controls, matched to the form ---------- */

/* select2 and intl-tel-input both ship their own look. These make them sit at the same height,
   width and border as every native field beside them, so the form reads as one thing. */

.iti {
  width: 100%;
}

.field .iti input[type="tel"] {
  width: 100%;
}

/*
 * Defensive, not decorative. If the plugin's own stylesheet fails to arrive — a stale cache
 * after a deploy, a blocked request — an unstyled country list is a full-width, full-height
 * block that covers the page. These keep it a dropdown regardless.
 */
.iti__country-list {
  font-size: 0.9375rem;
  position: absolute;
  z-index: 5;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--paper-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 22rem;
  max-width: min(28rem, 90vw);
  box-shadow: 0 4px 14px rgba(16, 31, 150, 0.15);
}

.iti__country-list.iti__hide {
  display: none;
}

/* The search box added to the flag dropdown; see addCountrySearch() in summit.js. It sits
   inside the list so it appears with the dropdown, and sticks while the countries scroll. */
.iti-search-item {
  position: sticky;
  top: 0;
  z-index: 1;
  list-style: none;
  padding: 0;
  background: var(--paper-raised);
}

.iti-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
}

.iti-search:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}



.field .select2-container {
  width: 100% !important;
}

.field .select2-container--default .select2-selection--single {
  height: 3rem;
  padding: 0.625rem 0.75rem;
  background: var(--paper-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}

.field .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.6;
  color: var(--ink);
}

.field .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ink-muted);
}

.field .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
}

/* select2 replaces the control, so the invalid state has to be carried across by hand. */
.field select[aria-invalid="true"] + .select2-container--default .select2-selection--single {
  border-color: var(--alert);
  border-width: 2px;
}

.field .select2-container--default.select2-container--focus .select2-selection--single,
.field .select2-container--default.select2-container--open .select2-selection--single {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.select2-dropdown {
  border-color: var(--field-border);
  z-index: 15;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--link);
}

.select2-search--dropdown .select2-search__field {
  padding: 0.5rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}

/* ---------- Choices ---------- */

.field-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}

.choice {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--link);
  background: var(--accent-soft);
}

.choice:has(input:disabled) {
  cursor: not-allowed;
  color: var(--ink-muted);
  background: #f0f1f6;
}

/* Ticked and locked — the plenary. It is settled, not unavailable, so it keeps the chosen
   colours rather than taking the greyed ground a full session gets. */
.choice:has(input:checked:disabled) {
  border-color: var(--link);
  background: var(--accent-soft);
  color: inherit;
}

.choice input {
  margin: 0.3rem 0 0;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--link);
}

.choice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.choice__title {
  display: block;
  font-weight: 600;
}

.choice__zh {
  display: block;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.seats {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--brand);
  margin-top: 0.25rem;
}

/* The timing and write-up PAA gave each session (14 September 2026). Under a heading for the
   plenary and the breakout pair; inside the choice for anything the guest picks between. The
   write-up keeps its line breaks — the team enters paragraphs in a plain textarea. */
.session-timing,
.choice__timing {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand);
}

.session-timing {
  margin: -0.125rem 0 0.5rem;
}

.session-desc,
.choice__desc {
  display: block;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-line;
}

.session-desc {
  margin: 0 0 1rem;
}

/* A session shown but not chosen (PAA, 22 September 2026): the breakouts listed under their
   shared timing, each a title and write-up, with nothing to tick. Set apart from each other
   the way the choices were, so the list still reads as four rooms. */
.session-info {
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--rule);
}

.session-info__title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.session-info .session-timing {
  margin: 0 0 0.25rem;
}

.session-info .session-desc {
  margin-bottom: 0.875rem;
}

.choice__timing {
  margin-top: 0.125rem;
}

.choice__desc {
  margin-top: 0.375rem;
}

.choice__desc + .seats {
  margin-top: 0.5rem;
}

.seats--full {
  background: var(--alert-soft);
  color: var(--alert);
}

/* ---------- Conditional blocks ---------- */

/*
 * The accent marks a block as belonging to the question above it. Indenting the content to make
 * room for it pushed those fields out of line with every other section, so on any screen with
 * a gutter to spare the rule hangs outside the column instead and the fields stay aligned.
 */
.conditional {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 0 0 1.75rem;
}

@media (min-width: 48rem) {
  .conditional {
    margin-left: calc(-1.25rem - 3px);
  }
}

/* ---------- Terms ---------- */

/* Long legal text, shown in full. Set smaller and a little tighter than the form so it reads as
   reference material without being hidden behind a disclosure the guest can skip. */
.terms {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-muted);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1rem 1.25rem 0.25rem;
  /* Tight to the acknowledgement beneath it — the box and its checkbox are one statement. */
  margin-bottom: 0.625rem;
}

/* The numbering already indents; on a narrow screen the list padding as well is too much. */
.terms .terms-list {
  padding-left: 1.35rem;
}

/* The privacy-statement URL is a single unbreakable token wider than a phone. */
.terms,
.choice__body {
  overflow-wrap: break-word;
}

.terms a,
.choice__body a {
  overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
  .terms {
    padding: 1.25rem 1.5rem 1.25rem 0.75rem;
  }

  .terms .terms-list {
    padding-left: 1.5rem;
  }
}

/*
 * One rhythm for all three consents: heading, then any context, then the checkbox row carrying
 * the wording. The context sits tight against its checkbox so they read as one thing, and the
 * space goes between the groups instead.
 */
.consent-group {
  margin-bottom: 2.5rem;
}

.consent-group:last-child {
  margin-bottom: 0;
}

.consent-group__heading {
  font-size: 1rem;
  color: var(--brand);
  margin: 0 0 0.625rem;
}

/* The explanatory paragraph gets the same raised panel the T&C box has, so all three consents
   read as the same kind of thing rather than one framed and the others loose on the page. */
.consent-group__lead {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-muted);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 0.625rem;
}

.consent-group > .field {
  margin-bottom: 0;
}

.terms-list {
  margin: 0;
  padding-left: 1.5rem;
}

.terms-list > li {
  margin-bottom: 0.75rem;
}

.terms-list--alpha {
  list-style: lower-alpha;
  margin-top: 0.5rem;
}

/* PAA's Chinese text writes its own (a)–(e) markers into each clause, so the list must not
   add a second set. */
.terms-list--bare {
  list-style: none;
  margin-top: 0.5rem;
  padding-left: 0;
}

.terms-list p {
  margin: 0.75rem 0 0;
}

/* The required marker.
   Red on its own is not an accessible way to convey meaning, so the asterisk carries the
   information by shape and the colour only reinforces it — and the note at the head of the form
   says what it means. The control itself carries `required`, which is what assistive technology
   actually announces; this span is aria-hidden so it is not read as "star" as well. */
.req {
  color: #b3261e;
  margin-left: 0.15rem;
  font-weight: 700;
  /* Keeps the asterisk on the label's baseline rather than riding up on a taller line. */
  line-height: 1;
}

legend > .req,
.choice__title > .req {
  margin-left: 0.2rem;
}

.required-note {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: #4a4a4a;
}

.required-note .req {
  margin-left: 0;
  margin-right: 0.15rem;
}

/* The consent checkboxes carry full clauses, so the text needs room to breathe. */
.choice__title {
  font-weight: 600;
}

.field > .choice .choice__title {
  font-weight: 400;
}

.field > .choice .choice__title strong,
.field > .choice .choice__title u {
  font-weight: 700;
}

/* ---------- Messages ---------- */

.notice {
  border-left: 4px solid var(--link);
  background: var(--accent-soft);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

.notice--alert {
  border-left-color: var(--alert);
  background: var(--alert-soft);
}

.notice h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.notice ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

/* ---------- Actions ---------- */

.actions {
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.actions__note {
  flex: 1 1 100%;
  margin: 0;
  color: var(--alert);
  font-weight: 600;
}

.btn {
  font: inherit;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  min-height: 44px;
}

.btn:hover:not(:disabled) {
  background: var(--brand-tint);
}

/* Muted while the acknowledgement is outstanding, but still focusable and still clickable —
   pressing it is what surfaces the reason. */
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
}

.btn:disabled {
  cursor: progress;
}

.summary {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.5rem 1rem;
}

.summary dt {
  font-weight: 600;
  color: var(--ink-muted);
}

.summary dd {
  margin: 0;
}

@media (max-width: 30rem) {
  .summary dl {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }

  .summary dd {
    margin-bottom: 0.75rem;
  }
}

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

/* ---------- Open link (self-funded guests) ---------- */

.open-register {
  max-width: var(--measure);
}

.open-register > h2 {
  margin: 2.25rem 0 0.75rem;
  color: var(--brand);
  font-size: 1.25rem;
}

.open-register .hint {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.signatories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem 2rem;
  margin-bottom: 2.5rem;
}

.open-register form {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  scroll-margin-top: 1rem;
}

.open-register form > h2 {
  color: var(--brand);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

/* Read by a screen reader, not drawn: a group whose section heading already says what it is. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CEPR asked for these notes in blue, not red (26 September 2026): the accommodation-funding
   remark and the capacity note above the terms, both on the self-funded form. */
.notice--info {
  border-left: 4px solid var(--brand);
  background: var(--accent-soft);
  color: var(--brand);
}

/* A hotel night outside the days the guest has ticked. Shown, so the guest can see why. */
.choice.is-unavailable {
  cursor: not-allowed;
  color: var(--ink-muted);
  background: #f0f1f6;
}

.contacts {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}