/* ==========================================================================
   Strike Electric — design tokens
   Palette sampled directly from the brand artwork in /img.
   ========================================================================== */

:root {
  /* Brand constants (identical in both themes) */
  --brand-teal: #22c3dc;
  --brand-teal-bright: #7fe9f5;
  --brand-teal-deep: #0e7f93;
  --brand-gold: #c9b463;
  --brand-gold-bright: #ded0a0;
  --brand-navy: #13303f;
  --brand-silver: #c4d2db;

  /* Type */
  --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Rhythm */
  --radius: 4px;
  --radius-lg: 8px;
  --shell: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Dark theme (default — matches the hero artwork) ---------- */
[data-theme='dark'] {
  --bg: #050b10;
  --bg-deep: #02060a;
  --surface: #0b1721;
  --surface-2: #112330;
  --line: #1c3444;
  --line-strong: #2a4d63;

  --text: #e4edf3;
  --text-dim: #93a8b6;
  --text-faint: #6a8091;

  --accent: var(--brand-teal);
  --accent-hover: var(--brand-teal-bright);
  --accent-contrast: #02181d;
  --gold: var(--brand-gold-bright);

  --glow: 0 0 32px rgba(34, 195, 220, 0.28);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);

  /* Hero art is background only — never a foreground photo. It sits off to the
     right and dissolves toward the copy.
     The scrim renders ON TOP of the art, so it has to clear away entirely on the
     right or it washes the image out no matter how high the opacity goes. */
  --hero-image-opacity: 0.92;
  --hero-image-width: 56%;
  --hero-image-filter: contrast(1.08) saturate(1.18);
  --hero-scrim: linear-gradient(
    100deg,
    rgba(2, 6, 10, 0.97) 0%,
    rgba(2, 6, 10, 0.86) 34%,
    rgba(2, 6, 10, 0.3) 58%,
    rgba(2, 6, 10, 0) 76%
  );
}

/* ---------- Light theme ---------- */
[data-theme='light'] {
  --bg: #ffffff;
  --bg-deep: #f2f5f7;
  --surface: #f6f9fa;
  --surface-2: #eaf0f3;
  --line: #d8e2e8;
  --line-strong: #b7c8d2;

  --text: #13303f;
  --text-dim: #4a6577;
  --text-faint: #6d8595;

  --accent: #0e7f93;
  --accent-hover: #095e6e;
  --accent-contrast: #ffffff;
  /* Darker than the brand gold: the logo's #c9b463 only reaches ~3:1 on white,
     below AA for the small uppercase eyebrow text this drives. */
  --gold: #6d5d20;

  --glow: 0 0 24px rgba(14, 127, 147, 0.16);
  --shadow: 0 14px 34px rgba(19, 48, 63, 0.12);

  /* The source art is dark teal on a white page, so it is lightened rather than
     faded — dropping the opacity far enough to stop it reading as a dark block
     is exactly what made it invisible. Brightness does the integrating instead,
     which keeps the subject legible. */
  --hero-image-opacity: 0.72;
  --hero-image-width: 56%;
  --hero-image-filter: brightness(1.72) saturate(0.92) contrast(0.92);
  --hero-scrim: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.88) 34%,
    rgba(255, 255, 255, 0.32) 58%,
    rgba(255, 255, 255, 0) 76%
  );
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover {
  color: var(--accent-hover);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  letter-spacing: 0.02em;
}
h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}
h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
}

p {
  margin: 0 0 1.1em;
}

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

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.section--tint {
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.lede {
  font-size: 1.12rem;
  color: var(--text-dim);
  max-width: 62ch;
}

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.82rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--glow);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--gold {
  background: transparent;
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.btn--gold:hover {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
}

.btn--block {
  width: 100%;
  justify-content: center;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header__utility {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-dim);
}

.header__utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  flex-wrap: wrap;
}

.header__utility-left {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.util-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
}
.util-item svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
a.util-item:hover {
  color: var(--accent);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 78px;
}

/* The bar's 78px min-height is the constraint: the logo grows into the existing
   headroom rather than pushing the header taller. The light lockup carries ~18%
   empty vertical padding that the dark one doesn't (its glow bleeds to the
   edge), so it needs a slightly larger box to read at the same visual size. */
.logo img {
  height: 62px;
  width: auto;
  display: block;
}

[data-theme='light'] .logo img {
  height: 70px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav__link {
  font-family: var(--font-display);
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  position: relative;
}
.nav__link:hover {
  color: var(--accent);
}
.nav__link.is-active {
  color: var(--accent);
}
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--glow);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Pay button matches the icon buttons' 40px box so every header control sits on
   one line. Vertical padding is dropped because the flex centring already
   handles it — leaving it in would fight the fixed height. */
.header__actions .btn {
  height: 40px;
  padding-block: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.icon-btn svg {
  width: 20px;
  height: 20px;
}
.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.nav-toggle {
  display: none;
}

/* Mobile nav */
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
  }
  .header__bar .nav,
  .header__bar .btn--pay-desktop {
    display: none;
  }
  .nav--mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.75rem 0 1.5rem;
    border-top: 1px solid var(--line);
  }
  .nav--mobile .nav__link {
    padding: 0.8rem 0.25rem;
    font-size: 1rem;
  }
  .nav--mobile .nav__link.is-active::after {
    display: none;
  }
  .nav--mobile .btn {
    margin-top: 0.75rem;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* Background art, deliberately not a foreground image.
   The picture is pinned to the right edge, held at low opacity, and masked so
   it dissolves into the page before it reaches the headline copy. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.hero__media img {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--hero-image-width);
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--hero-image-opacity);
  filter: var(--hero-image-filter);

  /* Fades out toward the copy on the left and softens the top/bottom edges so
     the art never reads as a hard-edged photograph pasted into the band.
     The horizontal ramp reaches full strength by 55% of the image's own width —
     past where the headline column ends — so the subject stays punchy while the
     copy still sits over clean background.
     The vertical fade is kept shallow: subjects in these shots sit low in frame,
     and a deeper fade erases them. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 20%, #000 55%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 20%, #000 55%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-scrim);
}

/* Narrow screens: the copy spans the full width, so there is no side column to
   put the art in. Instead of fading it to nothing, it is anchored to the bottom
   of the band and masked to fade in below the copy — the subject stays visible
   where it costs no legibility, and the text sits over clean background.
   The hero also gains bottom padding to give that band somewhere to live. */
.hero__inner {
  padding-block: clamp(4rem, 11vw, 8.5rem);
  max-width: 42rem;
}

.hero--tall .hero__inner {
  padding-block: clamp(5.5rem, 14vw, 11rem);
}

.hero h1 {
  margin-bottom: 0.5em;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: var(--glow);
}

/* Full-HD and larger: keep long hero titles balanced within the copy column. */
@media (min-width: 1920px) {
  .hero h1 {
    font-size: 3.75rem;
    text-wrap: balance;
  }

  .hero .lede {
    text-wrap: pretty;
  }

  .hero__ending {
    white-space: nowrap;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.hero__badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* Narrow screens: the copy spans the full width, so there is no side column for
   the art. Instead of fading it to nothing, it gets its own band at the foot of
   the hero — the subject stays fully visible where it costs no legibility, and
   the text sits over clean background.

   This block must come after the .hero--tall rules above: those set
   padding-block at specificity (0,2,0), so an earlier override would lose the
   cascade and the band would silently collapse. */
@media (max-width: 860px) {
  .hero .hero__inner,
  .hero--tall .hero__inner {
    padding-bottom: clamp(15rem, 46vw, 19rem);
  }

  /* Sized to the band rather than full-height-and-masked, so it can never creep
     up behind the copy as text reflows at other widths. */
  .hero__media img {
    top: auto;
    bottom: 0;
    width: 100%;
    height: clamp(14rem, 44vw, 18rem);
    object-position: center 68%;
    opacity: var(--hero-image-opacity);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 26%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 26%, #000 55%);
  }
}

.hero__badges svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: all 0.2s var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card h3 {
  margin-bottom: 0.5rem;
}
.card p:last-child {
  margin-bottom: 0;
  color: var(--text-dim);
  font-size: 0.96rem;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.card__icon svg {
  width: 24px;
  height: 24px;
}

/* Numbered steps */
.step {
  position: relative;
  padding-left: 3.6rem;
}
.step__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Stats */
.stat {
  text-align: center;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.stat__label {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.6rem;
}

/* Split feature */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* Checklist */
.checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.7rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--text-dim);
}
.checklist svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
  margin-top: 0.2rem;
}

/* Callout band */
.band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--glow);
}
.band h2 {
  margin-bottom: 0.35rem;
}
.band p {
  margin: 0;
  color: var(--text-dim);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form {
  display: grid;
  gap: 1.1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field .req {
  color: var(--gold);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.72rem 0.85rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 130px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: #e0645d;
}
.field__error {
  font-size: 0.82rem;
  color: #e0645d;
}

.form__row {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Honeypot — hidden from humans, visible to naive bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius);
  font-size: 0.94rem;
  border: 1px solid;
}
.notice svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.1rem;
}
.notice--ok {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.notice--err {
  color: #e0645d;
  border-color: rgba(224, 100, 93, 0.4);
  background: rgba(224, 100, 93, 0.08);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.95rem;
}

.footer__top {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(240px, 1.1fr) repeat(2, minmax(150px, 0.6fr)) minmax(300px, 1.3fr);
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.footer__logo img {
  height: 42px;
  width: auto;
  margin-bottom: 1.1rem;
}

.footer h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer a {
  color: var(--text-dim);
}
.footer a:hover {
  color: var(--accent);
}

.footer p {
  color: var(--text-dim);
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 0.87rem;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

/* ==========================================================================
   Rich text (TinyMCE-authored content)
   ========================================================================== */

.rte > :first-child {
  margin-top: 0;
}
.rte > :last-child {
  margin-bottom: 0;
}
.rte h2,
.rte h3 {
  margin-top: 1.8em;
}
.rte ul,
.rte ol {
  padding-left: 1.3rem;
  margin: 0 0 1.1em;
}
.rte li {
  margin-bottom: 0.45em;
}
.rte blockquote {
  margin: 1.6em 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--accent);
  color: var(--text-dim);
  font-size: 1.08rem;
}
.rte table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.2em;
}
.rte th,
.rte td {
  border: 1px solid var(--line);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.rte img {
  border-radius: var(--radius);
  margin-block: 1.2em;
}

.prose {
  max-width: 72ch;
}

/* ==========================================================================
   Admin
   ========================================================================== */

.admin {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 820px) {
  .admin {
    grid-template-columns: 1fr;
  }
}

.admin__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  position: sticky;
  top: 110px;
}
.admin__list button {
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
}
.admin__list button:hover {
  color: var(--text);
  background: var(--surface);
}
.admin__list button.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.admin__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.admin__field {
  margin-bottom: 1.5rem;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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