/* ==========================================================================
   Ottawa's Best Jollof — Voting Portal Stylesheet
   Mobile-first. Design tokens derived from the Ottawa Jollof Festival
   flyer branding (sunset orange, ember red, palm green, marigold gold).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Color tokens */
  --sunset: #F5941E;
  --sunset-deep: #E2660F;
  --ember: #C22A26;
  --ember-deep: #8E1D1A;
  --palm: #2F7A4D;
  --palm-deep: #205836;
  --marigold: #F2B705;
  --cream: #FFF7E8;
  --cream-deep: #FBE9C8;
  --charcoal: #2B1B12;
  --charcoal-deep: #1A100A;
  --ink-on-light: #2B1B12;
  --ink-on-dark: #FFF7E8;
  --ink-muted-light: #6B5C4E;
  --ink-muted-dark: #E7D3AE;

  /* Type tokens */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout tokens */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --max-width: 640px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

/* --------------------------------------------------------------------- */
/* Reset & base                                                          */
/* --------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-on-light);
  background: var(--cream);
  line-height: 1.5;
  overflow-x: hidden;
}

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

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* Wider variant used only around the ballot's restaurant grid, so all
   10 choices can breathe on desktop without touching the shared
   .container max-width used by every other section on the page. */
.container.container--wide {
  max-width: 820px;
}

/* Pulls content back down to the standard reading width inside a
   .container--wide parent (e.g. the ballot heading/errors above the
   grid, and the email/checkbox/button fields below it). */
.container--narrow {
  max-width: var(--max-width);
  margin: 0 auto;
}

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

a.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--charcoal);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 100;
  font-weight: 600;
}
a.skip-link:focus {
  left: 0;
}

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

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

/* --------------------------------------------------------------------- */
/* Hero                                                                   */
/* --------------------------------------------------------------------- */

.hero {
  background: linear-gradient(160deg, var(--sunset) 0%, var(--sunset-deep) 55%, var(--ember-deep) 100%);
  padding: var(--space-2) 0 var(--space-2);
  text-align: center;
  color: var(--cream);
}

.hero__logo {
  width: 100%;
  max-width: 140px;
  margin: 0 auto var(--space-1);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}

.hero__subhead {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
  color: var(--cream-deep);
}

/* Share button — now sits below the Cast My Vote button as a secondary
   action, so it's restyled for the cream ballot background instead of
   the hero's dark gradient. Kept modest (outlined ghost pill) so it
   doesn't compete with the primary vote button above it. */
.hero-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  background: #fff;
  border: 1.5px solid var(--cream-deep);
  color: var(--ink-on-light);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin: 0.75rem auto 0;
  transition: background 0.15s ease, transform 0.08s ease;
}

.hero-share:hover {
  background: var(--cream);
}

.hero-share:active {
  transform: scale(0.97);
}

.hero-share svg {
  width: 1rem;
  height: 1rem;
  fill: var(--ember);
  flex: 0 0 auto;
}

/* Countdown — a thin single-line strip: label + d/h/m/s inline, no
   stacked digit boxes. */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--charcoal-deep);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  margin: 0 var(--space-2);
}

.countdown__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marigold);
  white-space: nowrap;
}

.countdown__digits {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.countdown__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
}

.countdown__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.countdown__unit-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted-dark);
}

.hero__closed-message {
  background: var(--charcoal-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin: 0 var(--space-2);
}

.hero__closed-message h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
}

.hero__closed-message p {
  margin: 0;
  color: var(--ink-muted-dark);
}

/* --------------------------------------------------------------------- */
/* Section shell                                                         */
/* --------------------------------------------------------------------- */

.section {
  padding: var(--space-4) 0;
}

/* The ballot section sits directly under the hero; trim its top padding
   so the restaurant choices appear right away instead of after another
   full section-gap of empty space. Other sections keep the standard
   .section padding. */
#ballot {
  padding-top: var(--space-2);
}

.section--cream { background: var(--cream); }
.section--palm { background: var(--palm); color: var(--cream); }
.section--charcoal { background: var(--charcoal); color: var(--cream); }
.section--gold-band {
  background: linear-gradient(160deg, var(--marigold) 0%, var(--sunset) 100%);
  color: var(--charcoal-deep);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.section__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  margin: 0 0 var(--space-1);
}

.section__body {
  margin: 0 0 var(--space-2);
}

.section--palm .section__body,
.section--charcoal .section__body { color: var(--ink-muted-dark); }

/* --------------------------------------------------------------------- */
/* Campaign preselect banner                                             */
/* --------------------------------------------------------------------- */

.campaign-banner {
  background: var(--marigold);
  color: var(--charcoal-deep);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------- */
/* Ballot — restaurant grid                                              */
/* --------------------------------------------------------------------- */

.ballot-form { margin: 0; }

/* Compact ballot list: 2 per row on mobile (5 rows for 10 restaurants),
   5 per row on desktop where space allows. Each tile is a text-first
   voting choice (radio indicator + name) rather than a promotional
   card — no logos, no shadows, minimal padding. The label IS the tile;
   the native radio stays the source of truth but is visually hidden. */
.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 0 0 var(--space-3);
}

@media (min-width: 640px) {
  .restaurant-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.restaurant-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.4rem;
  padding: 0.65rem 0.7rem;
  background: #fff;
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.restaurant-tile:hover {
  border-color: var(--sunset);
}

/* The native radio stays the source of truth but is visually hidden —
   the whole label/tile is the actual tap target. */
.restaurant-tile__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Small logo (or monogram placeholder when no logo file exists) —
   sized to match the selection indicator's footprint so adding it
   doesn't grow the tile's height. */
.restaurant-tile__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
}

.restaurant-tile__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.restaurant-tile__monogram {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--sunset), var(--ember));
}

/* Radio-style selection indicator: empty ring by default, filled with
   a checkmark when this tile's input is checked. */
.restaurant-tile__indicator {
  position: relative;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--ink-muted-light);
  border-radius: 50%;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Truncates with an ellipsis instead of wrapping/growing the tile —
   the restaurant's full name is unchanged in the underlying data
   (RESTAURANTS in config.php) and in the accessible label; only the
   visible text is shortened when it doesn't fit. */
.restaurant-tile__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--ink-on-light);
}

.restaurant-tile--selected,
.restaurant-tile:has(.restaurant-tile__input:checked) {
  border-color: var(--ember);
  background: var(--cream);
}

.restaurant-tile--selected .restaurant-tile__indicator,
.restaurant-tile:has(.restaurant-tile__input:checked) .restaurant-tile__indicator {
  border-color: var(--ember);
  background: var(--ember);
}

.restaurant-tile--selected .restaurant-tile__indicator::after,
.restaurant-tile:has(.restaurant-tile__input:checked) .restaurant-tile__indicator::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.restaurant-tile:has(.restaurant-tile__input:focus-visible) {
  outline: 3px solid var(--marigold);
  outline-offset: 2px;
}

/* Honeypot field — visually hidden, kept off the accessibility tree and
   out of tab order so real voters never encounter it */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------- */
/* Confirmation page sharing                                             */
/* --------------------------------------------------------------------- */

.taster-callout {
  background: var(--palm);
  color: var(--cream);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin: var(--space-2) 0;
}

.taster-callout__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
}

.taster-callout__body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cream-deep);
}

.share-section {
  margin-top: var(--space-3);
  text-align: left;
}

.share-section__heading {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 var(--space-2);
  color: var(--ember-deep);
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 0.75rem;
  transition: transform 0.08s ease;
}

.share-btn:active { transform: scale(0.98); }

.share-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

/* WhatsApp is the primary share channel for this campaign — largest,
   boldest, top of the list. */
.share-btn--whatsapp {
  background: #25D366;
  color: #052E16;
  font-size: 1.05rem;
  padding: 1.1rem 1.5rem;
  box-shadow: 0 4px 0 #128C4A;
}

.share-btn--whatsapp svg { fill: #052E16; }

.share-btn--facebook {
  background: #fff;
  color: #1877F2;
  border: 2px solid #1877F2;
}

.share-btn--facebook svg { fill: #1877F2; }

.share-copy-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.share-copy-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink-muted-light);
}

.share-copy-btn {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--ember);
  background: #fff;
  color: var(--ember);
  cursor: pointer;
  white-space: nowrap;
}

.share-copy-btn:active { transform: scale(0.98); }

.share-copy-btn--copied {
  background: var(--palm);
  border-color: var(--palm);
  color: #fff;
}

/* --------------------------------------------------------------------- */
/* Check your email state                                                */
/* --------------------------------------------------------------------- */

.masked-email {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 var(--space-3);
}

/* Makes a <button> inside a form look identical to a plain link — used
   for "Resend email", which needs to be a CSRF-protected POST form
   rather than a plain <a href> GET link, without changing how it looks
   or reads to the person using it. */
.link-button {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ember);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.vote-reference {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  background: #fff;
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius-md);
  padding: 0.6rem 1.2rem;
  margin: var(--space-2) 0;
}

/* --------------------------------------------------------------------- */
/* Ballot form errors + fields                                           */
/* --------------------------------------------------------------------- */

.form-errors {
  background: #FCEBEB;
  border: 2px solid #F09595;
  color: #791F1F;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.form-errors ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  font-weight: 400;
}

.field {
  margin-bottom: 0.85rem;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.field__hint {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-muted-light);
  margin-top: 0.3rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink-on-light);
  transition: border-color 0.15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--ember);
}

.field--invalid input {
  border-color: #C22A26;
}

.field__error {
  display: block;
  color: #C22A26;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.4rem;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.1rem;
  accent-color: var(--ember);
}

.checkbox-field__text {
  font-size: 0.9rem;
  font-weight: 600;
}

.checkbox-field__text small {
  display: block;
  font-weight: 400;
  color: var(--ink-muted-light);
  margin-top: 0.15rem;
}

.checkbox-field__text small a {
  color: var(--ember);
  font-weight: 600;
  text-decoration: underline;
}

/* Short reassurance line under the vote button — replaces a separate
   verification-explainer block; keeps the submit action visually
   dominant instead of competing with instructional copy. */
.verify-note {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  color: var(--ink-muted-light);
}

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--ember);
  color: var(--cream);
  box-shadow: 0 4px 0 var(--ember-deep);
}

.btn--primary:hover { background: var(--ember-deep); }

.btn--dark {
  background: var(--charcoal-deep);
  color: var(--cream);
  box-shadow: 0 4px 0 #000;
}

/* --------------------------------------------------------------------- */
/* How it works                                                          */
/* --------------------------------------------------------------------- */

.how-it-works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  color: var(--ember-deep);
  text-align: center;
}

.how-it-works__arrow {
  color: var(--palm);
  font-weight: 400;
}

/* --------------------------------------------------------------------- */
/* Verified vote counter                                                 */
/* --------------------------------------------------------------------- */

.vote-counter {
  text-align: center;
}

.vote-counter__count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 2.75rem);
  margin: 0 0 0.25rem;
}

/* --------------------------------------------------------------------- */
/* Festival info                                                         */
/* --------------------------------------------------------------------- */

.festival-info {
  text-align: center;
}

.festival-info__badge {
  display: inline-block;
  background: var(--palm);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------- */
/* Footer                                                                 */
/* --------------------------------------------------------------------- */

.site-footer {
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin: var(--space-2) 0;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 247, 232, 0.1);
  transition: background 0.15s ease;
}

.social-links a:hover { background: rgba(255, 247, 232, 0.2); }

.social-links svg { width: 1.25rem; height: 1.25rem; fill: var(--cream); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
  margin: 0 0 var(--space-2);
  color: var(--ink-muted-dark);
}

.footer-links a { text-decoration: underline; }

.footer-copy {
  font-size: 0.8rem;
  color: var(--ink-muted-dark);
  margin: 0;
}

/* --------------------------------------------------------------------- */
/* Admin dashboard — utilitarian, not decorative                         */
/* --------------------------------------------------------------------- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: var(--space-2) 0 var(--space-3);
}

@media (min-width: 640px) {
  .admin-stats { grid-template-columns: repeat(5, 1fr); }
}

.admin-stat {
  background: #fff;
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  text-align: center;
}

.admin-stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
}

.admin-stat__label {
  font-size: 0.75rem;
  color: var(--ink-muted-light);
  margin-top: 0.25rem;
}

.admin-section {
  margin: var(--space-3) 0;
}

.admin-section__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius-md);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: #fff;
}

.admin-table th,
.admin-table td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--cream-deep);
  white-space: nowrap;
}

.admin-table th {
  background: var(--cream);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
}

.admin-badge--verified { background: #EAF3DE; color: #27500A; }
.admin-badge--invalidated { background: #FCEBEB; color: #791F1F; }

.admin-form-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.admin-input {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius-md);
  background: #fff;
}

.admin-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ember);
  background: #fff;
  color: var(--ember);
  cursor: pointer;
  white-space: nowrap;
}

.admin-btn--danger {
  border-color: #C22A26;
  color: #C22A26;
}

.admin-btn--primary {
  background: var(--ember);
  border-color: var(--ember);
  color: #fff;
}

.admin-empty {
  color: var(--ink-muted-light);
  font-size: 0.9rem;
  padding: 0.75rem;
}

.admin-banner {
  background: #EAF3DE;
  color: #27500A;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: 0.9rem;
}