/* ═══════════════════════════════════════════════════════════════════════════
   The night on every page but the home. The home draws its own
   (css/index/style.css); this carries the same grammar to the pages a
   visitor works in: a head under the floodlit sky, one ruled band to an
   idea, hairline rows, a tracked label beside every figure, silver on what
   acts and blue for the light. DESIGN.md is the source for every value.

   Load it after components.css and navbar.css and before the page's own
   stylesheet, so a page can refine it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The frame ─────────────────────────────────────────────────────────── */
/* The home's container widths, without needing Bootstrap on the page. */
.frame {
  width: 100%;
  margin-inline: auto;
  padding-inline: 12px;
}

@media (min-width: 576px)  { .frame { max-width: 540px; } }
@media (min-width: 768px)  { .frame { max-width: 720px; } }
@media (min-width: 992px)  { .frame { max-width: 960px; } }
@media (min-width: 1200px) { .frame { max-width: 1140px; } }
@media (min-width: 1400px) { .frame { max-width: 1320px; } }

/* A form or a short page reads at a measure, not at the frame's width. */
.frame--narrow {
  max-width: min(100%, 46rem);
}

/* Hidden means hidden, whatever display a class gives the element. Bootstrap
   says the same; pages that no longer load it keep the rule here. */
[hidden] {
  display: none !important;
}

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── The page head, under the floodlights ──────────────────────────────── */
/* The home's sky, lower and still: the same deep blue reaching up behind
   the transparent top bar, the two banks of floodlights spilling in from
   above the corners, and the ground coming up at its foot. The lights are
   simply on; the flicker and the warm-up belong to the home. */
.page-head {
  position: relative;
  isolation: isolate;
  padding: var(--space-12) 0 var(--space-12);
}

.sky {
  position: absolute;
  inset: -68px 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #081652 0%, #06103c 42%, #040a28 74%, var(--bg-deep) 100%);
}

.sky__lamp {
  position: absolute;
  top: -70%;
  width: 58%;
  height: 170%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(219, 229, 255, 0.42), rgba(143, 176, 255, 0.24) 22%, rgba(47, 91, 255, 0.12) 55%, transparent 100%);
}

.sky__lamp--left {
  left: -24%;
}

.sky__lamp--right {
  right: -24%;
}

.page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "meta  actions";
  align-items: end;
  column-gap: var(--space-10);
}

.page-head__title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Under the title: the page's figures, each with its word beside it, or
   one short line. Text on the sky is lit blue-white, not grey. */
.page-head__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-8);
  margin: var(--space-5) 0 0;
  color: rgba(219, 229, 255, 0.72);
}

.page-head__lede {
  grid-area: meta;
  max-width: 60ch;
  margin: var(--space-4) 0 0;
  color: rgba(219, 229, 255, 0.72);
  text-wrap: pretty;
}

.page-head__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.page-head .t-label {
  color: rgba(219, 229, 255, 0.72);
}

/* A way back to where the page belongs, above the title on the sky: a
   plain link, never a kicker. */
.page-head__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin: calc(-1 * var(--space-6)) 0 var(--space-2);
  color: rgba(219, 229, 255, 0.72);
  font-size: var(--text-sm);
  text-decoration: none;
}

.page-head__back:hover {
  color: #fff;
}

.page-head__back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Figures and the words beside them ─────────────────────────────────── */
.stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}

.stat .t-figure {
  font-size: var(--text-2xl);
  color: var(--text-primary);
}

.page-head .stat .t-figure {
  color: #fff;
}

.stat--lg .t-figure {
  font-size: clamp(2.25rem, 1.7rem + 1.6vw, 3rem);
}

/* A cup's number is a figure: "#1" in the figures face inside the
   Marcellus name, because Marcellus's 1 reads as an I. */
.cup-number {
  font-size: 0.92em;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

/* ── Bands ─────────────────────────────────────────────────────────────── */
/* One idea to a band, in reading order, far enough apart that the groups
   read before the details do. */
.band {
  padding-top: var(--space-16);
}

main > .band:last-child,
.band--last {
  padding-bottom: var(--space-20);
}

.band__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
}

/* Marcellus names a section, as it names the record on the home. */
.band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* A top rule drawn as its own layer, so script can draw it left to right
   when its band comes on (js/shared/on-air.js). */
.ruled {
  position: relative;
}

.ruled::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--rule, var(--border-strong));
  transform-origin: left;
  transition: background-color 0.3s var(--ease-out);
}

.is-armed .ruled::before,
.ruled.is-armed::before {
  transform: scaleX(0);
}

.desk {
  min-width: 0;
  padding-top: var(--space-6);
}

.desk + .desk {
  margin-top: var(--space-16);
}

.desk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-8);
}

.desk__head .desk__title {
  margin: 0;
}

.desk__title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* Two desks side by side, 7 : 5, folding to one column. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-12) var(--space-16);
}

.split > .desk + .desk {
  margin-top: 0;
}

/* The reading page's pattern for settings and long forms: the band's name
   in a column of its own, the fields beside it. */
.aside-grid {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--space-4) var(--space-16);
  align-items: start;
}

/* ── Sentences for loading, empty and failed ───────────────────────────── */
.quiet,
.desk__quiet {
  margin: 0;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.quiet + .quiet {
  margin-top: var(--space-2);
}

/* A door inside a band: Polished Silver, white on hover. */
.link,
.desk__link {
  color: var(--accent-hover);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--duration) var(--ease-out);
}

.link:hover,
.desk__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.retry,
.desk__retry {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-hover);
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out);
}

.retry:hover,
.desk__retry:hover {
  color: var(--text-primary);
}

/* ── Facts: a term column beside the values ────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: 0;
  font-size: var(--text-sm);
}

.facts > div {
  display: contents;
}

.facts dt {
  padding-top: 0.2em;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.facts dd {
  margin: 0;
  color: var(--text-primary);
  text-wrap: pretty;
}

.facts dd .t-figure {
  font-size: var(--text-xl);
}

/* Facts as a row of figures under a hairline each, for a head or a band. */
.tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-6) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tally > * {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-strong);
  min-width: 0;
}

.tally .t-figure {
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  color: var(--text-primary);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
/* Set like the top bar's links: uppercase, tracked, caption grey, with a
   1px rule drawing under the current one from its left edge. A count is
   a figure beside the word. */
/* The strip scrolls sideways on a phone, which clips anything drawn past
   its edge, so its rule is an inset line inside it and the current tab's
   rule lies over that line. */
.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: inset 0 -1px 0 var(--border-strong);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-shrink: 0;
  min-height: 44px;
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out);
}

.tab::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.tab:hover {
  color: var(--text-primary);
}

.tab:hover::after {
  transform: scaleX(1);
}

.tab[aria-selected="true"],
.tab.is-active,
.tab.active {
  color: var(--accent-hover);
}

.tab[aria-selected="true"]::after,
.tab.is-active::after,
.tab.active::after {
  transform: scaleX(1);
}

.tab .t-figure {
  font-size: var(--text-xl);
  letter-spacing: 0;
}

.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The shared .tab-group and Bootstrap's nav tabs, in the same voice. */
.tab-group,
.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
  padding: 0;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--border-strong);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-group .tab-btn,
.nav-tabs .nav-link {
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color var(--duration) var(--ease-out);
}

.tab-group .tab-btn::after,
.nav-tabs .nav-link::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.tab-group .tab-btn:hover,
.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border: 0;
}

.tab-group .tab-btn.active,
.nav-tabs .nav-link.active {
  color: var(--accent-hover);
  background: none;
  border: 0;
}

.tab-group .tab-btn:hover::after,
.tab-group .tab-btn.active::after,
.nav-tabs .nav-link:hover::after,
.nav-tabs .nav-link.active::after {
  transform: scaleX(1);
}

.nav-tabs .nav-item {
  flex-shrink: 0;
}

/* A strip wider than the screen fades out at an edge that has tabs past
   it, so the ones out of sight can be found. The fade follows the strip's
   own scroll, and a strip that fits has none. Where scroll-driven
   animation is missing the strip still scrolls, without the fade. */
@property --strip-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --strip-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@keyframes strip-edges {
  0%   { --strip-fade-start: 0px;  --strip-fade-end: 48px; }
  8%   { --strip-fade-start: 48px; }
  92%  { --strip-fade-end: 48px; }
  100% { --strip-fade-start: 48px; --strip-fade-end: 0px; }
}

@supports (animation-timeline: scroll(self inline)) {
  .tabs,
  .tab-group,
  .nav-tabs {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--strip-fade-start), #000 calc(100% - var(--strip-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--strip-fade-start), #000 calc(100% - var(--strip-fade-end)), transparent);
    animation: strip-edges linear both;
    animation-timeline: scroll(self inline);
  }
}

/* A strip scrolls, and fades, only on a phone: wider, every tab strip on the
   site fits. The scroll and the fade's mask both cut off whatever is drawn
   past the strip's edge, and they cut a focused tab's ring to a 2px sliver
   (WCAG 2.4.7). So from 768px the strip neither scrolls nor fades, and the
   ring stands clear of its tab; on a phone it is drawn inside the tab. */
@media (min-width: 768px) {
  .tabs {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }
}

@media (max-width: 767px) {
  .tab:focus-visible {
    outline-offset: -2px;
  }
}

/* ── Rows ──────────────────────────────────────────────────────────────── */
/* A list under a strong rule, one hairline between rows. A row that is a
   link draws its hairline over in silver from the left on hover, the
   home's one verb at the scale of a pointer. */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
}

.rows__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}

a.rows__item::after,
.rows__item--link::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

a.rows__item:hover,
.rows__item--link:hover {
  color: var(--accent-hover);
}

a.rows__item:hover::after,
a.rows__item:focus-visible::after,
.rows__item--link:hover::after,
.rows__item--link:focus-within::after {
  transform: scaleX(1);
}

/* Under a desk's own rule and heading a list needs no second rule, as the
   home's Live now list has none. */
.desk > .rows {
  border-top: 0;
}

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

.rows__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: inherit;
  overflow-wrap: anywhere;
}

/* A club or a cup is named in Marcellus. */
.rows__name--named {
  font-family: var(--font-display);
  font-weight: 400;
}

.rows__meta {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.rows__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* ── The ledger ────────────────────────────────────────────────────────── */
/* A table set like a league table: the head row is tracked labels, the
   numbers are figures, rows part by hairlines and there is no box. */
.ledger,
.table-dark {
  width: 100%;
  border-collapse: collapse;
  background: none;
  border-radius: 0;
  overflow: visible;
  font-variant-numeric: tabular-nums lining-nums;
}

.ledger thead,
.table-dark thead {
  background: none;
}

.ledger th,
.table-dark th {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  vertical-align: bottom;
}

.ledger td,
.table-dark td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.ledger tbody tr,
.table-dark tbody tr {
  position: relative;
  background: none;
  transition: color var(--duration) var(--ease-out);
}

.table-dark tbody tr:hover {
  background: none;
}

.table-dark tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

.ledger .num,
.ledger th.num {
  text-align: right;
}

.ledger td.num,
.ledger .t-figure {
  font-family: var(--font-figures);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.ledger th:last-child,
.ledger td:last-child,
.table-dark th:last-child,
.table-dark td:last-child {
  padding-right: 0;
}

/* A sortable column's head is a button in the label's voice. Its padding
   reaches past the row, so the target is tall while the word keeps the
   other labels' baseline. */
.ledger__sort {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  min-height: 0;
  margin: calc(-1 * var(--space-3)) 0;
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out);
}

.ledger__sort:hover,
[aria-sort="ascending"] .ledger__sort,
[aria-sort="descending"] .ledger__sort {
  color: var(--accent-hover);
}

/* In a right-aligned column the arrow goes before the word, so the word
   stays over the figures. */
.ledger .num .ledger__sort {
  flex-direction: row-reverse;
}

.ledger__sort svg {
  align-self: center;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}

.ledger__sort:hover svg,
[aria-sort] .ledger__sort svg {
  opacity: 1;
}

[aria-sort="descending"] .ledger__sort svg {
  transform: rotate(180deg);
}

.ledger__sort:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── A cup's state: a square LED before the words ──────────────────────── */
/* Blue and breathing slowly while entries are open, red and quicker while
   the cup is played, off otherwise (DESIGN.md, the lead cup). */
.cup__state {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-secondary);
  font-family: var(--font-figures);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cup__state--registration_open {
  color: var(--led-pale);
}

.cup__state--in_progress {
  color: var(--text-primary);
}

.cup__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--text-secondary);
}

.cup__state--completed .cup__dot,
.cup__state--cancelled .cup__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--text-secondary);
}

.cup__state--registration_open .cup__dot {
  background: var(--led-bright);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 10px 2px var(--led-glow);
  animation: lamp-breathe 2.4s ease-in-out infinite;
}

.cup__state--in_progress .cup__dot {
  background: var(--live);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 2px rgba(255, 77, 94, 0.4);
  animation: lamp-breathe 1.6s ease-in-out infinite;
}

.is-offscreen .cup__dot {
  animation-play-state: paused;
}

@keyframes lamp-breathe {
  50% { opacity: 0.45; }
}

/* A match in play carries a slow red pulse. */
.live-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--live);
  vertical-align: 0.1em;
  animation: live-pulse 1.6s ease-in-out infinite;
}

.is-offscreen .live-dot {
  animation-play-state: paused;
}

@keyframes live-pulse {
  50% { opacity: 0.25; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* The silver plate and the outline come from components.css. Inside a band
   they run smaller; a band carries at most one primary. */
.btn-sm,
.btn-accent.btn-sm,
.btn-outline.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  min-height: 36px;
}

.btn-block {
  width: 100%;
}

.btn-accent,
.btn-outline {
  min-height: 44px;
  text-decoration: none;
  line-height: 1.2;
}

.btn-outline {
  border-color: var(--border-strong);
}

a.btn-accent:hover,
a.btn-accent:focus {
  color: var(--bg-deep);
}

.btn-accent:focus-visible,
.btn-outline:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* A destructive door: an outline plate whose words are Signal Red. It is
   never filled, so the silver plate stays the page's action. */
.btn-danger {
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #f87171;
  font-weight: var(--weight-semibold);
  transform: none;
}

.btn-danger:hover {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  filter: none;
  transform: none;
}

.btn-danger.btn-sm {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
}

/* Green is not in the night; a confirming action is the silver plate. */
.btn-success {
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg-deep);
  transform: none;
}

.btn-success:hover {
  background: color-mix(in srgb, var(--accent) 60%, var(--accent-hover));
  filter: none;
  transform: none;
}

.btn-ghost {
  min-height: 44px;
  border-radius: var(--radius-sm);
}

/* A round 44px control with one icon, like the video's. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Fields ────────────────────────────────────────────────────────────── */
/* Monitor Slate, a 1px Strong Rule, a 6px plate, 44px tall; focus is the
   2px silver outline and never a glow. */
.field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.field + .field {
  margin-top: var(--space-5);
}

.field__label,
.form-label {
  display: block;
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field__hint,
.form-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.5;
  max-width: 60ch;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-5) var(--space-4);
}

/* Side by side, the row's gap parts the fields, not the stacking margin. */
.field-row > .field + .field {
  margin-top: 0;
}

.field-row + .field,
.field + .field-row,
.field-row + .field-row {
  margin-top: var(--space-5);
}

/* :where() keeps the exclusions from adding weight, so the rule for typed
   numbers below still sets them in the figures face. */
.form-input,
.form-control,
.form-select,
.field input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])),
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--duration) var(--ease-out);
}

textarea.form-input,
textarea.form-control,
.field textarea {
  min-height: 6rem;
  padding-block: var(--space-3);
  resize: vertical;
}

/* A long option ends in an ellipsis rather than mid-word. */
.form-select,
select.form-input,
.field select {
  padding-right: 2.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c8cfd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.8rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.form-input:hover,
.form-control:hover,
.form-select:hover,
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.form-input:focus,
.form-control:focus,
.form-select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--border-strong);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: none;
}

.form-input::placeholder,
.form-control::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-input:disabled,
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-select option,
.form-input option,
.field select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Numbers people type are figures too. */
input[type="number"].form-input,
input[type="number"].form-control,
.field input[type="number"] {
  font-family: var(--font-figures);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.4;
}

/* The native date picker's icon, lit silver instead of black. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

input[type="file"].form-input,
input[type="file"].form-control {
  padding: var(--space-2);
  font-size: var(--text-sm);
}

input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* A checkbox and a switch, drawn in full here so they keep their shape on
   pages that no longer load Bootstrap: Monitor Slate under a Strong Rule,
   silver when on. A switch's knob is caption grey, then navy on silver. */
.form-check-input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: var(--bg-elevated);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 1rem;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              background-position 0.15s var(--ease-out);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:focus {
  border-color: var(--border-strong);
  box-shadow: none;
  outline: none;
}

.form-check-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-check-input:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}

.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23020617' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23020617'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  border-radius: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238892a4'/%3e%3c/svg%3e");
  background-position: left center;
  background-size: contain;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238892a4'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23020617'/%3e%3c/svg%3e");
  background-position: right center;
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-left: 0;
}

.form-check .form-check-input {
  float: none;
  flex-shrink: 0;
  margin-left: 0;
}

.form-switch {
  padding-left: 0;
}

.form-check-label {
  color: var(--text-primary);
  cursor: pointer;
}

/* Three platforms as one segmented plate. */
.platform-picker {
  display: flex;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.platform-btn {
  flex: 1;
  min-width: 44px;
  border: 0;
  border-right: 1px solid var(--border-strong);
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-base);
  transition: color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.platform-btn:last-child {
  border-right: 0;
}

.platform-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.platform-btn.active {
  color: var(--bg-deep);
  background: var(--accent);
}

.platform-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* A sentence under a form that says how a request went. */
.status-line {
  min-height: 1.5em;
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.status-line:empty {
  display: none;
}

/* ── Menus ─────────────────────────────────────────────────────────────── */
/* A Monitor Slate menu under a Strong Rule with a 10px radius, like the
   search results; a row fills Control Room Blue under the pointer. */
.menu {
  min-width: 14rem;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.menu__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease-out);
}

.menu__option:hover,
.menu__option:focus-visible {
  background: var(--bg-surface);
  outline: none;
}

.menu__check {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--bg-deep);
}

.menu__check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

[aria-pressed="true"] > .menu__check,
[aria-checked="true"] > .menu__check {
  border-color: var(--accent);
  background: var(--accent);
}

[aria-pressed="true"] > .menu__check svg,
[aria-checked="true"] > .menu__check svg {
  opacity: 1;
}

/* ── Dialogs ───────────────────────────────────────────────────────────── */
/* SweetAlert2 and Bootstrap's modal, set as a Desk Navy panel under a
   Strong Rule: a Marcellus title, the silver plate for the answer and the
   outline for the way out. */
div.swal2-container.swal2-backdrop-show,
div.swal2-container.swal2-noanimation {
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
}

div.swal2-popup {
  width: min(92vw, 30rem);
  padding: var(--space-8) var(--space-8) var(--space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0d1430 0%, var(--bg-base) 55%);
  color: var(--text-primary);
  font-family: var(--font-body);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

div.swal2-popup .swal2-title {
  padding: 0;
  margin: 0 0 var(--space-3);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.15;
  text-align: left;
}

div.swal2-popup .swal2-html-container {
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.55;
  text-align: left;
}

div.swal2-popup .swal2-actions {
  justify-content: flex-end;
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-6) 0 0;
}

div.swal2-popup .swal2-styled {
  min-height: 44px;
  margin: 0;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
}

div.swal2-popup .swal2-styled:focus,
div.swal2-popup .swal2-styled:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

div.swal2-popup .swal2-styled.swal2-confirm {
  background: var(--accent);
  color: var(--bg-deep);
}

div.swal2-popup .swal2-styled.swal2-confirm:hover {
  background: color-mix(in srgb, var(--accent) 60%, var(--accent-hover));
  background-image: none;
}

div.swal2-popup .swal2-styled.swal2-cancel,
div.swal2-popup .swal2-styled.swal2-deny {
  order: -1;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

div.swal2-popup .swal2-styled.swal2-cancel:hover,
div.swal2-popup .swal2-styled.swal2-deny:hover {
  border-color: var(--accent);
  background: rgba(200, 207, 216, 0.05);
  background-image: none;
  color: var(--accent);
}

div.swal2-popup .swal2-input,
div.swal2-popup .swal2-textarea,
div.swal2-popup .swal2-select {
  width: 100%;
  min-height: 44px;
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--text-base);
  box-shadow: none;
}

div.swal2-popup .swal2-input:focus,
div.swal2-popup .swal2-textarea:focus,
div.swal2-popup .swal2-select:focus {
  border-color: var(--border-strong);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: none;
}

div.swal2-popup .swal2-validation-message {
  margin: var(--space-3) 0 0;
  padding: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  justify-content: flex-start;
}

div.swal2-popup .swal2-validation-message::before {
  display: none;
}

/* SweetAlert sizes every part of an icon in em, so a smaller font-size
   shrinks the icon and the space it takes. A transform shrank only the
   drawing and left a gap above the title. */
div.swal2-popup .swal2-icon {
  margin: 0 0 var(--space-5);
  font-size: 0.72em;
}

div.swal2-popup .swal2-icon.swal2-success {
  border-color: rgba(200, 207, 216, 0.35);
  color: var(--accent);
}

div.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--accent);
}

div.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(200, 207, 216, 0.35);
}

div.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
div.swal2-popup .swal2-icon.swal2-success .swal2-success-fix {
  background-color: transparent;
}

div.swal2-popup .swal2-icon.swal2-error {
  border-color: rgba(239, 68, 68, 0.5);
  color: var(--danger);
}

div.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--danger);
}

div.swal2-popup .swal2-icon.swal2-warning,
div.swal2-popup .swal2-icon.swal2-question {
  border-color: rgba(136, 146, 164, 0.5);
  color: var(--text-secondary);
}

div.swal2-popup .swal2-icon.swal2-info {
  border-color: rgba(143, 176, 255, 0.5);
  color: var(--led-bright);
}

div.swal2-popup .swal2-close {
  color: var(--text-secondary);
}

div.swal2-popup .swal2-close:hover {
  color: #fff;
}

div.swal2-popup.swal2-toast {
  width: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

div.swal2-popup.swal2-toast .swal2-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

div.swal2-popup.swal2-toast .swal2-icon {
  margin: 0 var(--space-3) 0 0;
  font-size: 1em;
}

/* Swal.showLoading() with nothing open shows the loader alone, in the row
   the buttons use. Centre it, and drop the gap that row keeps from the
   text above, which is not there. */
div.swal2-popup.swal2-loading .swal2-actions {
  justify-content: center;
}

div.swal2-popup.swal2-loading:has(> .swal2-title[style*="none"]):has(> .swal2-html-container[style*="none"]) {
  width: auto;
  padding: var(--space-6);
}

div.swal2-popup.swal2-loading:has(> .swal2-title[style*="none"]):has(> .swal2-html-container[style*="none"]) .swal2-actions {
  margin: 0;
}

.modal-content {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0d1430 0%, var(--bg-base) 55%);
  color: var(--text-primary);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
  padding: var(--space-5) var(--space-6);
}

.modal-body {
  padding: var(--space-5) var(--space-6);
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: #fff;
}

.modal-backdrop.show {
  background: #020617;
  opacity: 0.72;
}

/* ── Browser surfaces ──────────────────────────────────────────────────── */
html {
  scrollbar-color: var(--bg-surface) var(--bg-deep);
  accent-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── The footer ────────────────────────────────────────────────────────── */
/* The home's footer on every page with a top bar (js/shared/site-footer.js).
   On a page shorter than the window it sits at the window's foot, not
   halfway down it. Every such page is the navbar's holder, main and the
   footer, so the column moves nothing sideways. */
body:has(> #siteFooter) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(> #siteFooter) > #siteFooter {
  margin-top: auto;
}

.site-footer {
  padding: var(--space-12) 0 var(--space-8);
  border-top: 1px solid var(--border-strong);
  background: var(--bg-deep);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-10);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer__brand img {
  width: 48px;
  height: 48px;
}

.site-footer__brand:hover {
  color: #fff;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.site-footer__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__group li + li {
  margin-top: var(--space-2);
}

.site-footer__group a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}

.site-footer__group a:hover {
  color: var(--text-primary);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.site-footer__copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.site-footer__sponsors {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__sponsors img {
  display: block;
  width: auto;
  height: 20px;
  opacity: 0.6;
  transition: opacity var(--duration) var(--ease-out);
}

.site-footer__sponsors a:hover img {
  opacity: 1;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .split,
  .aside-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-12);
  }
  .aside-grid {
    row-gap: var(--space-4);
  }
  /* The wordmark does not fit a quarter of the 720px frame, so below
     1024px the brand takes a row of its own over the four groups. */
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .page-head {
    padding: var(--space-8) 0 var(--space-8);
  }
  .page-head__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "meta"
      "actions";
  }
  .page-head__actions {
    justify-content: flex-start;
    margin-top: var(--space-6);
  }
  .sky__lamp {
    top: -40%;
    width: 110%;
    height: 110%;
  }
  .sky__lamp--left {
    left: -62%;
  }
  .sky__lamp--right {
    right: -62%;
  }
  .band {
    padding-top: var(--space-12);
  }
  /* A thumb needs the full 44px, small plate or not. */
  .btn-sm,
  .btn-accent.btn-sm,
  .btn-outline.btn-sm,
  .btn-danger.btn-sm {
    min-height: 44px;
  }
  main > .band:last-child,
  .band--last {
    padding-bottom: var(--space-16);
  }
  .desk + .desk {
    margin-top: var(--space-12);
  }
  .tabs,
  .tab-group,
  .nav-tabs {
    gap: var(--space-6);
  }
  div.swal2-popup {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
  div.swal2-popup .swal2-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  div.swal2-popup .swal2-styled.swal2-cancel,
  div.swal2-popup .swal2-styled.swal2-deny {
    order: 0;
  }
  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cup__dot,
  .live-dot {
    animation: none;
  }
  .tab::after,
  .tab-group .tab-btn::after,
  .nav-tabs .nav-link::after,
  a.rows__item::after,
  .rows__item--link::after {
    transition: none;
  }
}