/* Application styles. Pico (vendor/pico.min.css) provides the base; this file dresses it in
   the Myriad360 look (colours and type taken from myriad360.com) and adds the few components
   Pico has no class for. No inline styles anywhere (CSP): everything the templates need is here. */

/* --- Poppins, self-hosted (vendor/poppins). Latin only; other characters fall back to Arial. -- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("vendor/poppins/poppins-latin-400-normal.9212f6f9860f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("vendor/poppins/poppins-latin-500-normal.a09f2fccfee3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/poppins/poppins-latin-600-normal.72993dddf88a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Theme: Pico's light variables, overridden ------------------------------------------------
   base.html fixes <html data-theme="light">. Pico sets its light values on
   `:root:not([data-theme=dark])` (specificity 0,2,0), so this selector matches that and wins
   by coming later. */

:root[data-theme="light"] {
  /* Myriad360 brand tokens */
  --m360-navy: #0a3971; /* primary: deep navy */
  --m360-blue: #2287fd; /* primary: dodger blue */
  --m360-amber: #fec234; /* primary: amber */
  --m360-midnight: #0a2546; /* secondary: midnight navy */
  --m360-alice: #f3f8ff; /* secondary: alice blue */
  --m360-steel: #48709f; /* secondary: steel blue */
  --m360-azure: #a7cffe; /* secondary: soft azure */
  --m360-n50: #f8fafb;
  --m360-n100: #f0f3f6;
  --m360-n200: #e8ecf0;
  --m360-n300: #dfe4e9;
  --m360-n400: #bbc3ce;
  --m360-n500: #96a1b2;
  --m360-n600: #728097;
  --m360-n700: #4d5e7b;
  --m360-n800: #293d60;
  --m360-n900: #041b45;
  --m360-blue-600: #1d4ed8;
  --m360-blue-700: #1e40af;
  /* States that are not brand colours: approved, and errors in forms. */
  --m360-green: #15803d;
  --m360-green-tint: #dcfce7;
  --m360-error: #b42318;
  --m360-error-tint: #fef3f2;
  /* Destructive buttons (Delete): 6.5:1 on white, so it reads as red without being a warning. */
  --m360-danger: #b91c1c;
  --m360-danger-hover: #991b1b;

  /* Type. Pico grows the root size with the window (up to 131%), which is too big for Poppins,
     so it stays at 16px. */
  --pico-font-family: "Poppins", Arial, sans-serif;
  --pico-font-weight: 400;
  --pico-font-size: 100%;
  --pico-border-radius: 0.5rem;

  /* Page, text and cards */
  --pico-background-color: var(--m360-alice);
  --pico-color: var(--m360-n800);
  --pico-muted-color: var(--m360-n700);
  --pico-muted-border-color: var(--m360-n200);
  --pico-text-selection-color: rgba(34, 135, 253, 0.25);
  --pico-h1-color: var(--m360-navy);
  --pico-h2-color: var(--m360-navy);
  --pico-h3-color: var(--m360-n800);
  --pico-h4-color: var(--m360-n800);
  --pico-h5-color: var(--m360-n700);
  --pico-h6-color: var(--m360-n700);
  --pico-card-background-color: #fff;
  --pico-card-border-color: var(--m360-n200);
  --pico-card-sectioning-background-color: var(--m360-n50);
  --pico-card-box-shadow: 0 1px 3px rgba(10, 37, 70, 0.08);
  --pico-table-border-color: var(--m360-n200);

  /* Links and filled buttons. Link text is blue-600 rather than dodger blue: dodger on white is
     only 3.5:1, blue-600 is 6.7:1. Button fills are dodger blue and go deep navy on hover. */
  --pico-primary: var(--m360-blue-600);
  --pico-primary-hover: var(--m360-navy);
  --pico-primary-underline: rgba(29, 78, 216, 0.45);
  --pico-primary-hover-underline: var(--m360-navy);
  --pico-primary-focus: rgba(34, 135, 253, 0.55);
  --pico-primary-background: var(--m360-blue);
  --pico-primary-hover-background: var(--m360-navy);
  --pico-primary-inverse: #fff;

  /* Outline buttons: .outline.secondary is navy, .outline.contrast (Delete, Remove, Deny) midnight. */
  --pico-secondary: var(--m360-navy);
  --pico-secondary-background: var(--m360-navy);
  --pico-secondary-hover: var(--m360-midnight);
  --pico-secondary-hover-background: var(--m360-midnight);
  --pico-secondary-underline: rgba(10, 57, 113, 0.45);
  --pico-secondary-focus: rgba(10, 57, 113, 0.3);
  --pico-contrast: var(--m360-midnight);
  --pico-contrast-background: var(--m360-midnight);
  --pico-contrast-hover: #000;
  --pico-contrast-hover-background: #000;
  --pico-contrast-focus: rgba(10, 37, 70, 0.3);

  /* Form fields: white, a visible border, a soft azure ring and a dodger blue edge on focus. */
  --pico-form-element-background-color: #fff;
  --pico-form-element-border-color: var(--m360-n500);
  --pico-form-element-color: var(--m360-n900);
  --pico-form-element-placeholder-color: var(--m360-n600);
  --pico-form-element-active-background-color: #fff;
  --pico-form-element-active-border-color: var(--m360-blue);
  --pico-form-element-focus-color: var(--m360-azure);
  --pico-form-element-invalid-border-color: var(--m360-error);
  --pico-form-element-invalid-active-border-color: var(--m360-error);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --pico-font-weight: 600;
}

strong,
b,
th {
  font-weight: 600;
}

h1 {
  --pico-font-size: 1.75rem;
}

h2 {
  --pico-font-size: 1.375rem;
}

/* Buttons and nav are Poppins 500. */
:is(button, [type="submit"], [type="button"], [role="button"]) {
  --pico-font-weight: 500;
}

/* Outline buttons tint on hover instead of staying see-through. Pico writes its hover rules
   as :is(..., [aria-current]:not(...), :hover, ...), which counts for as much as its most
   specific argument, so this repeats that form: equal weight, and later, so it wins. */
:is(button, [type="submit"], [type="button"], [role="button"]).outline:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
  --pico-background-color: rgba(34, 135, 253, 0.1);
}

/* A wider ring that stays visible on a white card. */
:where(select, textarea),
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
  --pico-outline-width: 0.1875rem;
}

/* --- Page frame: header, main, footer -------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* `body > main` because Pico's own padding rule is `body > main` and must be out-ranked. */
body > main {
  flex: 1 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.site-header {
  padding-block: 0.625rem;
  background: var(--m360-navy);
  /* The bar is dark, so its links, hover underline and focus ring are redefined for it. */
  --pico-color: #fff;
  --pico-primary: #fff;
  --pico-primary-hover: #fff;
  --pico-primary-underline: transparent;
  --pico-primary-hover-underline: var(--m360-amber);
  --pico-primary-focus: rgba(254, 194, 52, 0.7);
  /* Sign out is a light outline button on the navy bar: white text and border. */
  --pico-secondary: #fff;
  --pico-secondary-hover: #fff;
  color: #fff;
}

.site-header nav {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.site-header nav ul {
  flex-wrap: wrap;
}

.site-header nav li {
  padding-block: 0.25rem;
}

.site-header nav a {
  font-weight: 500;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 2px;
}

.site-header .brand-logo {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.site-header .brand-logo img {
  display: block;
  width: auto;
  height: 36px;
}

.site-header .product-name {
  margin-left: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 500;
  line-height: 1.2;
}

.site-header button.outline.secondary {
  --pico-border-color: rgba(255, 255, 255, 0.7);
  padding: 0.375rem 1rem;
}

.site-header
  :is(button, [type="submit"], [type="button"], [role="button"]).outline:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
  --pico-background-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 575px) {
  /* "Engineering Conference Wishlist" is too long to sit beside the logo on a phone, so the
     name takes its own row under it, flush with the logo and without the divider, and the
     links wrap beneath that. */
  .site-header .brand-logo img {
    height: 30px;
  }

  .site-header .product-name {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 0.5rem;
    border-left: 0;
    font-size: 0.875rem;
  }
}

.site-footer {
  padding-block: 1.25rem;
  background: var(--m360-midnight);
  color: var(--m360-n300);
}

.site-footer small {
  color: inherit;
}

/* The Sign out button sits in the nav next to links, so it must not carry form spacing. */
nav form.logout,
nav form.logout button {
  margin-bottom: 0;
}

/* --- Cards and tables ------------------------------------------------------------------------ */

article {
  border: 1px solid var(--m360-n200);
  border-radius: 0.75rem;
}

article > header {
  border-top-left-radius: calc(0.75rem - 1px);
  border-top-right-radius: calc(0.75rem - 1px);
}

article > footer {
  border-bottom-left-radius: calc(0.75rem - 1px);
  border-bottom-right-radius: calc(0.75rem - 1px);
}

/* Tables sit on a white card; the card scrolls sideways on a narrow screen. */
figure {
  margin-bottom: var(--pico-spacing);
  overflow-x: auto;
  border: 1px solid var(--m360-n200);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--pico-card-box-shadow);
}

figure table {
  /* Narrower than this the columns crush each other, so the card scrolls instead. */
  min-width: 46rem;
  margin-bottom: 0;
  --pico-background-color: #fff;
}

thead th {
  background: var(--m360-n50);
  color: var(--m360-n700);
  font-size: 0.875rem;
  white-space: nowrap;
}

tbody tr:last-child > * {
  border-bottom: 0;
}

/* A conference's description under its name, in a bold row header, stays regular weight. */
th small {
  font-weight: 400;
}

/* An engineer's submitted wishlists: three short columns, so the card need not scroll. On a phone
   the count goes, and the date (the link) and the status fit side by side. */
figure table.submitted {
  min-width: 0;
}

@media (max-width: 575px) {
  table.submitted .count {
    display: none;
  }

  table.submitted th,
  table.submitted td {
    padding-inline: 0.75rem;
  }
}

/* A date, a choice or a link that should not break across lines inside a table cell. Without it
   a cell shrinks to one word per line when the table is wider than its card. */
.nowrap {
  white-space: nowrap;
}

/* A table with many columns (the admin's has nine) pads its cells less, so on a desktop it fits
   its card instead of scrolling sideways. Money and counts line up on their right edge, in
   columns that are tighter still. */
table.dense th,
table.dense td {
  padding-inline: 0.75rem;
}

table.dense thead th {
  white-space: normal;
}

table.dense th.num,
table.dense td.num {
  padding-inline: 0.625rem;
  text-align: right;
}

/* The admin table's row actions are small and stay on one line, so a row is as tall as its name and
   not as tall as three stacked buttons. */
table.dense .actions {
  flex-wrap: nowrap;
  gap: 0.375rem;
}

table.dense .actions a[role="button"],
table.dense .actions button,
table.dense .wishlist-state button {
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* An admin's own wishlist control (Add to wishlist, "On your wishlist", "Requested") sits above
   the row's buttons, on a line of its own: beside them the Actions column would be 130px wider
   than the card has room for at 1280. */
table.dense .wishlist-state {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

table.dense .wishlist-state form,
table.dense .wishlist-state button {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  /* On a phone the table scrolls anyway, so the small buttons get a comfortable tap target. */
  table.dense .actions a[role="button"],
  table.dense .actions button,
  table.dense .wishlist-state button {
    padding: 0.5rem 0.75rem;
  }
}

/* --- Sign-in, welcome, 403 and 404: one centred card ----------------------------------------- */

.centered-card {
  max-width: 28rem;
  margin: 1rem auto 2rem;
  padding: 2rem;
}

.centered-card h1 {
  font-size: 1.5rem;
  text-align: center;
}

.centered-card .card-logo {
  display: block;
  width: 180px;
  height: 40px;
  margin: 0 auto 1.5rem;
}

.centered-card p:last-child,
.centered-card form:last-child {
  margin-bottom: 0;
}

/* --- Status badges: pending is amber, approved green, denied neutral (never alarming red) -----
   Archived, on a conference, is neutral too. */

.badge {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.badge-pending {
  background: var(--m360-amber);
  color: var(--m360-navy);
}

.badge-approved {
  background: var(--m360-green-tint);
  color: var(--m360-green);
}

.badge-denied,
.badge-archived {
  background: var(--m360-n200);
  color: var(--m360-n700);
}

/* --- Messages and form errors ---------------------------------------------------------------- */

.message,
p[role="alert"] {
  margin-bottom: var(--pico-spacing);
  padding: 0.75rem 1rem;
  border: 1px solid var(--m360-azure);
  border-left-width: 4px;
  border-radius: var(--pico-border-radius);
  background: #fff;
  color: var(--m360-n800);
}

.message.success {
  border-color: var(--m360-green);
  background: var(--m360-green-tint);
}

.message.error,
p[role="alert"] {
  border-color: var(--m360-error);
  background: var(--m360-error-tint);
  color: var(--m360-error);
}

small[role="alert"] {
  color: var(--m360-error);
  font-weight: 500;
}

small[role="status"] {
  color: var(--m360-green);
  font-weight: 500;
}

/* --- Row actions: buttons side by side, without the form and button spacing Pico adds -------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.actions form,
.actions form button,
.actions a[role="button"] {
  margin-bottom: 0;
}

/* Pico makes every submit button full width. Wherever one is not wrapped in a shrink-to-fit
   form (Save, Approve and Deny, Retry, the catalog form) it keeps to its label, and Approve and
   Deny sit side by side without the stacked button margin. Only the buttons of the centred
   cards (sign in, welcome, admins only) stay full width. */
button[type="submit"] {
  width: auto;
}

.centered-card button[type="submit"] {
  width: 100%;
}

.actions > button {
  margin-bottom: 0;
}

/* --- Destructive buttons: Delete wears .outline.contrast.danger ------------------------------
   Pico builds an outline contrast button from --pico-contrast and --pico-contrast-hover, so
   redefining those two (and the focus ring) on the element is enough to turn it red. The hover
   tint repeats the form of the app's blue one above, equal weight and later, so it wins. */

:is(button, [type="submit"], [type="button"], [role="button"]).danger {
  --pico-contrast: var(--m360-danger);
  --pico-contrast-hover: var(--m360-danger-hover);
  --pico-contrast-focus: rgba(185, 28, 28, 0.3);
  /* "Delete wishlist" stays on one line in a narrow table column; the table scrolls instead. */
  white-space: nowrap;
}

:is(button, [type="submit"], [type="button"], [role="button"]).danger:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
  --pico-background-color: rgba(185, 28, 28, 0.1);
}

/* --- Admins page: one white card per group, a row per admin ---------------------------------- */

.admin-list {
  margin: 0 0 var(--pico-spacing);
  padding: 0;
  list-style: none;
  border: 1px solid var(--m360-n200);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--pico-card-box-shadow);
}

.admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--m360-n200);
}

.admin-list li:last-child {
  border-bottom: 0;
}

/* The address and its note take what the Remove button leaves, and a long address wraps in
   its own column instead of pushing the button down or off a narrow screen. */
.admin-list li > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-list .admin-email {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.admin-list form {
  flex: none;
}

.admin-list form,
.admin-list form button {
  margin-bottom: 0;
}

/* --- Pick cards on My Wishlist: the name and details on a line, then one row of controls -------
   The row is a grid: the "Why this conference?" label, then the box with Save and the move and
   remove buttons beside it, then the status line under the box (it keeps its height when empty,
   so Saved and an error do not move the row). .pick-justify is the element htmx targets for an
   autosave, and display: contents lets its children take their places in the row's grid without
   it being a box of its own; the move and remove buttons are separate forms in .pick-moves. */

.pick {
  /* Pico's card spacing, tightened: a wishlist is a list of these. */
  --pico-block-spacing-vertical: 0.75rem;
}

.pick > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
}

.pick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "label label label"
    "text save moves"
    "feedback feedback feedback";
  column-gap: 0.5rem;
  align-items: start;
}

.pick-justify {
  display: contents;
}

.pick-row label {
  grid-area: label;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--pico-muted-color);
}

.pick-row textarea {
  grid-area: text;
  margin-bottom: 0;
}

.pick-feedback {
  grid-area: feedback;
  /* One line of small text (a line of the page's text size plus the padding), so the card is as
     tall without a message as with one. */
  min-height: 1.625rem;
  padding-top: 0.125rem;
}

.pick-save {
  grid-area: save;
}

.pick-moves {
  grid-area: moves;
}

.pick-row button {
  margin-bottom: 0;
  padding: 0.5rem 0.875rem;
}

/* Up and down are arrows: square, and as wide as they are tall. */
.pick-row .pick-arrow {
  width: 2.5rem;
  padding-inline: 0;
}

@media (max-width: 575px) {
  /* The box takes the full width and the four buttons sit on one line under it. */
  .pick-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "label label"
      "text text"
      "feedback feedback"
      "save moves";
  }
}

@media (max-width: 360px) {
  /* A 320px phone is 16px short for the four buttons at full size, so they tighten up rather
     than let Remove drop to a second line. */
  .pick-row {
    column-gap: 0.375rem;
  }

  .pick-moves {
    gap: 0.375rem;
  }

  .pick-row button {
    padding-inline: 0.625rem;
  }

  .pick-row .pick-arrow {
    width: 2.25rem;
    padding-inline: 0;
  }
}

/* --- Show filter and sort bar above the admin's table: the one in use is bold, not underlined - */

:is(.show-links, .sort-links) a[aria-current="true"] {
  font-weight: 600;
  text-decoration: none;
}

/* --- Calendar: the Table | Calendar switch, the year tabs and the year timeline -------------- */

/* Pico spreads a <nav> across the row like a menu bar; these are small pill links, left to
   right, with the current one filled navy. */
nav.tabs {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--pico-spacing);
}

.tabs a {
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--m360-n300);
  border-radius: 999px;
  background: #fff;
  font-weight: 500;
  text-decoration: none;
}

.tabs a:hover {
  border-color: var(--m360-blue);
}

.tabs a[aria-current="page"] {
  border-color: var(--m360-navy);
  background: var(--m360-navy);
  color: #fff;
}

/* The timeline (an inline SVG, drawn by the server) fills its white card. Narrower than 56rem
   its text would be too small to read, so the card scrolls sideways instead, as the tables do.
   Its colours are SVG attributes; this is only size, links and hover. */
figure svg.timeline {
  display: block;
  width: 100%;
  height: auto;
  min-width: 56rem;
}

/* A hint for the narrow screens where that happens. The timeline needs 56rem; the card is
   700px wide from 768px up to 1023px (Pico's container) and narrower below, and 950px from
   1024px, which is enough. So the hint shows exactly where the card scrolls. */
.timeline-hint {
  display: none;
  margin-bottom: 0.5rem;
}

@media (max-width: 1023px) {
  .timeline-hint {
    display: block;
  }
}

.timeline a {
  text-decoration: none;
}

.timeline a:hover text,
.timeline a:focus-visible text {
  text-decoration: underline;
}

.timeline a:focus-visible {
  outline: 2px solid var(--m360-blue);
  outline-offset: 2px;
}

/* Hovering or tabbing to a row darkens its bar, so the eye can follow the label across. */
.timeline-row:is(:hover, :focus-within) rect {
  fill: var(--m360-blue-600);
}

/* --- A conference's details page: the facts, then a card each for the venue, the hotel and the
   links, and the admin's panel under them ------------------------------------------------------ */

.detail-facts {
  color: var(--pico-muted-color);
  font-size: 1.0625rem;
}

/* Who added a conference (the admin's table, under the name, and the conference's page): a quiet
   line, not part of the facts. */
.added-by {
  color: var(--pico-muted-color);
}

p.added-by {
  margin-top: calc(var(--pico-spacing) * -0.5);
}

.detail-description {
  max-width: 46rem;
}

/* The wishlist button sits under the facts, small like the table's, and does not stretch. */
.detail-wishlist {
  margin-bottom: var(--pico-spacing);
}

.detail-wishlist form,
.detail-wishlist button {
  margin-bottom: 0;
}

/* Venue, hotel and links are cards side by side where there is room (three across the 1200px
   container, two in the narrower ones) and one above the other on a phone. */
.detail-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
}

.detail-card {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--m360-n200);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--pico-card-box-shadow);
}

.detail-card h2 {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.detail-card p {
  overflow-wrap: anywhere;
}

.detail-cards .detail-card {
  margin-bottom: 0;
}

.detail-card > :last-child {
  margin-bottom: 0;
}

.detail-admin {
  margin-bottom: var(--pico-spacing);
}

/* The conference form's optional details sit under a heading of their own. */
.form-details {
  margin-top: 2rem;
  padding: 0;
  border: 0;
}

.form-details legend {
  margin-bottom: 0.25rem;
  color: var(--m360-navy);
  font-size: 1.125rem;
  font-weight: 600;
}