/* ==========================================================================
   Storefront: the public ticket page, plus the design tokens the rest of the
   site was missing.

   Loaded only by index.html, so nothing here can affect the console or the
   scanner. That is deliberate: this file introduces new component styles, and
   the console should not change until its own stylesheet has been reviewed
   against them.

   WHY A NEW TOKEN LAYER IS IN HERE AT ALL

   The four themes override 26 custom properties, and 23 of them are colours.
   Typography, radius, spacing, border width and motion are not merely
   unthemed -- they are not tokenised anywhere, so no theme could vary them even
   if it wanted to. That is why switching theme felt like a hue rotation.

   The tokens below are the minimum set that lets a theme express a shape
   language rather than a palette. Every one has a working default, so a theme
   that sets none of them still renders correctly.
   ========================================================================== */

:root {
  /* --- type -------------------------------------------------------------
     One ramp, used everywhere, so headings stop being 19px in one place and
     20px in another for no reason. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas,
               'Liberation Mono', monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   2rem;       /* 32 */
  --text-2xl:  2.75rem;    /* 44 */

  /* One tracking token rather than six hand-typed letter-spacing values. */
  --track-tight: -0.011em;
  --track-normal: 0;
  --track-wide: 0.06em;

  --leading-tight: 1.15;
  --leading-body: 1.6;

  /* --- space ------------------------------------------------------------
     A 4px scale. Ad-hoc values from 3px to 40px were in use; anything that
     does not land on this scale is now visibly wrong, which is the point. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- shape ------------------------------------------------------------
     Themed. `royale` sharpens these towards zero, `slots` exaggerates them,
     which is what makes the themes read as different objects rather than
     differently coloured ones. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Border weight is themed too, so a theme can be hairline-thin or heavy. */
  --border-w: 1px;
  --border-w-strong: 1px;

  /* --- motion ----------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* --- focus ------------------------------------------------------------
     A single ring token. It used to be a hardcoded blue rgba beside a themed
     border colour, so the royal gold theme drew a green field with a blue halo.
   */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
  --focus-ring-width: 3px;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

body.page-storefront {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  /* Remove the fixed-attachment felt repaint: on this page it cost a full
     repaint on every scroll for a texture nobody looks at. */
  background-attachment: scroll;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-storefront .hidden { display: none !important; }

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  /* Above the scrim (var(--z-scrim), 50), because the account panel is a descendant of this
     bar. A sticky element with a z-index creates a stacking context, so
     everything inside it is painted at this level no matter how high its own
     z-index is. With the bar at 40 the panel was underneath the scrim and read
     as "a dark overlay with nothing on it". */
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-bottom: var(--border-w) solid var(--color-border);
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* The positioning context the account panel anchors to. Without this the
     panel's `top: 100%` resolves against the viewport instead of the bar. */
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  /* Single accent, not the blue-to-violet gradient that appeared five times
     across the old stylesheet. */
  background: var(--accent);
  color: #fff;
}

.brand-text {
  font-weight: 650;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}
.brand-text em {
  font-style: normal;
  color: var(--color-text-2);
  font-weight: 500;
}

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

/* ==========================================================================
   Account panel
   ========================================================================== */

.account-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  max-width: 260px;
}
.account-toggle:hover { background: var(--color-card); }
.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, .45);
}

.account-panel {
  /*
    absolute, not fixed, and anchored to .topbar-inner (position: relative).

    This is the bug that produced "a dark overlay with no modal". As a body-level
    fixed element, `top: calc(100% + 8px)` resolves `100%` against the VIEWPORT
    height, not against the top bar, so the panel was parked exactly one screen
    below the visible area while the scrim covered everything.
  */
  position: absolute;
  top: 100%;
  right: var(--space-5);
  z-index: 51;
  width: min(360px, calc(100vw - 2 * var(--space-5)));
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: var(--color-card);
  border: var(--border-w-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: panel-in var(--dur-base) var(--ease-out) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.account-panel-inner { padding: var(--space-5); }

.account-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.account-panel-head h2 {
  margin: 0;
  font-size: var(--text-md);
  letter-spacing: var(--track-tight);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--color-card-2); color: var(--color-text); }

.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  margin-bottom: var(--space-1);
}
.field-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-2);
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--color-bg-2);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  /* The themed token, replacing the hardcoded blue ring. */
  transition: border-color var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-fast) var(--ease-in-out);
}
.input-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.input-wrap .material-symbols-outlined {
  color: var(--color-text-2);
  font-size: 20px;
  flex: none;
}
.input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-text);
  font: inherit;
  padding: var(--space-3) 0;
}

.panel-switch {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  text-align: center;
}

.linkish {
  background: 0;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-details { margin: 0 0 var(--space-4); }
.account-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--border-w) solid var(--color-border);
  font-size: var(--text-sm);
}
.account-row:last-child { border-bottom: 0; }
.account-row dt { color: var(--color-text-2); margin: 0; }
.account-row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-all; }

.account-panel .btn-block { margin-bottom: var(--space-2); }

/* ==========================================================================
   Storefront body
   ========================================================================== */

.storefront {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
}

/*
  The hero.

  Deliberately not a centred gradient banner with a headline, a subhead and two
  buttons -- that shape is what reads as machine-made. This is a left-aligned
  column with a hard left edge and a single accent rule, which reads as an
  actual product page.
*/
.store-hero {
  max-width: 620px;
  border-left: 3px solid var(--accent);
  padding-left: var(--space-5);
}

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-2);
}

.store-hero h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  font-weight: 700;
}

.store-lede {
  margin: 0 0 var(--space-6);
  color: var(--color-text-2);
  max-width: 46ch;
}

.store-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.store-amount {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  /* Money wants tabular figures or the digits visibly jitter as it changes. */
  font-variant-numeric: tabular-nums;
}
.store-note {
  font-size: var(--text-sm);
  color: var(--color-warning);
}

.store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.store-foot {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-2);
  max-width: 52ch;
}

/* ==========================================================================
   Sections and the buyer's tickets
   ========================================================================== */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.section-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
}

.store-orders {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
}

.empty-note,
.muted {
  color: var(--color-text-2);
  font-size: var(--text-sm);
}

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  /* auto-fit rather than a fixed 3-up grid of identical cards. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.order-item {
  border: var(--border-w) solid var(--color-border);
  border-left: 3px solid var(--color-text-2);
  border-radius: var(--radius-md);
  background: var(--color-card);
  padding: var(--space-4);
}
.order-paid     { border-left-color: var(--color-success); }
.order-pending   { border-left-color: var(--color-warning); }
.order-cancelled { border-left-color: var(--color-text-2); opacity: .7; }

.order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.order-amount {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.order-code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: var(--color-bg-2);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  word-break: break-all;
}
.order-code:hover { border-color: var(--color-primary); }

.order-note {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.order-ref {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-2);
  font-family: var(--font-mono);
}

/* ==========================================================================
   Device picker
   ========================================================================== */

.devices-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
}

.devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.device-card {
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-in-out);
}
.device-card:hover,
.device-card:focus-visible {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.device-card:focus-visible { box-shadow: var(--focus-ring); outline: 0; }
.device-card .material-symbols-outlined {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.device-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
}
.device-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-2);
}

/* ==========================================================================
   Buttons (scoped: the console keeps its own)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 550;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-w-strong) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out),
              opacity var(--dur-fast) var(--ease-in-out);
}
.btn .material-symbols-outlined { font-size: 20px; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-card); }

.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--text-md); }
.btn-block { width: 100%; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  background: var(--color-card);
}
.theme-switch .material-symbols-outlined { font-size: 18px; color: var(--color-text-2); }
.theme-switch select {
  background: transparent;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  outline: 0;
  cursor: pointer;
}
.theme-switch select option { background: var(--color-card); color: var(--color-text); }

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 720px) {
  .topbar-inner { padding: var(--space-3) var(--space-4); }
  .brand-text em { display: none; }
  .account-panel {
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
  }
  .storefront { padding: var(--space-6) var(--space-4) var(--space-7); }
  .store-hero { padding-left: var(--space-4); }
  .store-hero h1 { font-size: var(--text-xl); }
}

/*
  The theme switcher is decorative, not information. Honour the OS preference
  rather than animating a page load for somebody who asked us not to.
*/
@media (prefers-reduced-motion: reduce) {
  .account-panel { animation: none; }
  .device-card,
  .btn,
  .input-wrap { transition: none; }
  .device-card:hover,
  .device-card:focus-visible { transform: none; }
  .page-storefront { scroll-behavior: auto; }
}
/* ==========================================================================
   Admin panel
   ========================================================================== */

.admin-setup {
  border: var(--border-w-strong) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.admin-setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-setup-head h3 {
  margin: 0;
  font-size: var(--text-md);
  letter-spacing: var(--track-tight);
}
.admin-setup-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--color-border);
}

.setup-list { display: grid; gap: var(--space-3); }

.setup-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border);
  background: var(--color-bg-2);
}
.setup-item .material-symbols-outlined { font-size: 20px; margin-top: 1px; }
.setup-item strong { display: block; font-size: var(--text-base); font-weight: 600; }
.setup-item p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.setup-blocking { border-left-color: var(--color-danger); }
.setup-blocking > .material-symbols-outlined { color: var(--color-danger); }
.setup-warning { border-left-color: var(--color-warning); }
.setup-warning > .material-symbols-outlined { color: var(--color-warning); }
.setup-ok { border-left-color: var(--color-success); }
.setup-ok > .material-symbols-outlined { color: var(--color-success); }

.setup-results {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-bg-2);
  border: var(--border-w) solid var(--color-border);
  font-size: var(--text-sm);
}
.setup-results h4 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.setup-results ul { margin: 0; padding-left: var(--space-5); }
.setup-results li.ok code { color: var(--color-success); }
.setup-results li.bad code { color: var(--color-danger); }
.setup-results code { font-family: var(--font-mono); }

/* --- section switcher --------------------------------------------------- */

.admin-sections {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-w) solid var(--color-border);
  margin-bottom: var(--space-4);
}
.admin-sec-btn {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-2);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  margin-bottom: -1px;
}
.admin-sec-btn:hover { color: var(--color-text); }
.admin-sec-btn.active {
  color: var(--color-text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-help {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  max-width: 70ch;
}

.order-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text-2);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.chip:hover { color: var(--color-text); }
.chip.active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
}
.chip-n {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: var(--text-xs);
}

.admin-search { max-width: 320px; flex: 1; }
.admin-search input { width: 100%; }

.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.row-inactive td { opacity: .6; }

.badge-check.pending {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
}

code.id-chip {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  cursor: pointer;
}

/* --- settings ----------------------------------------------------------- */

/*
  One column, always. Deliberately not a multi-column grid.

  This was repeat(auto-fit, minmax(min(320px, 100%), 1fr)), and it produced
  overlapping cards in the admin panel. Two separate things forced the tracks
  wider than declared:

    - a `1fr` track has an automatic minimum of min-content, so the template
      above set a base size but did not stop the track growing to fit;
    - .settings-card is a <fieldset>, and browsers give fieldset a UA default of
      min-inline-size: min-content, so a fieldset refuses to shrink below its
      widest unbreakable content. "YOUR ACCOUNT" holds an email address and
      "SENDING TICKETS BY EMAIL" has a long legend, so both had a floor well
      above the track width.

  The cards then overflowed their tracks and painted over each other: the Currency
  input crossed the TICKET card's border and covered the "Ticket signing key"
  label beside it. The three columns were also visibly unequal, which a 1fr
  template cannot produce - proof they were sized by content, not by the grid.

  Stacking removes the neighbour to collide with, which is simpler than keeping
  three columns and defending every track and child against min-content. The
  min-width resets below are still applied, because a single-column grid has the
  same automatic-minimum problem and the fieldsets would otherwise still be
  wider than the page.
*/
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/*
  The grid items, and the fieldset's own UA minimum.

  min-inline-size is the logical-property spelling the UA default actually uses;
  min-width is kept as well for engines that only honour the physical one. Both
  are needed - setting only one leaves the behaviour to whichever the engine
  prefers, which is how this regressed unnoticed in the first place.
*/
.settings-grid > * {
  min-width: 0;
}

.settings-card {
  /*
    Defeats the fieldset UA default. Without this the card is as wide as its
    longest unbreakable string, whatever the grid says.
  */
  min-width: 0;
  min-inline-size: 0;

  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  padding: var(--space-5);
  margin: 0;
}
.settings-card legend {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-text-2);
}
.settings-card .field:last-of-type { margin-bottom: 0; }

/*
  A field must be allowed to be narrower than its contents, or its label, hint
  and input together set a min-content floor and the whole column is pushed wider
  than the card holding it.
*/
.settings-card .field,
.settings-card .field-row > * {
  min-width: 0;
}

/*
  Price and Currency sit side by side where there is room and stack where there
  is not.

  This was a plain `1fr 1fr`, and that is what let the Currency input escape the
  TICKET card in the admin panel: a `1fr` track has an automatic minimum of
  min-content, so the pair of inputs forced the row wider than the card, and the
  overflow painted over the card beside it. The minmax floor is explicit rather
  than automatic, so the row now only goes two-up when the two fields genuinely
  fit.
*/
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--space-3);
}
.field-row .field { margin-bottom: var(--space-4); }

.btn-row { align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.btn-row .field-hint { margin: 0; }

.settings-card select {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--color-text);
  font: inherit;
  outline: 0;
  cursor: pointer;
  padding: 0;
}
.settings-card select option { background: var(--color-card); color: var(--color-text); }

.switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  cursor: pointer;
}
.switch-row input { width: 18px; height: 18px; accent-color: var(--color-primary); }

.settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--color-border);
}
.settings-status { font-size: var(--text-sm); color: var(--color-text-2); }
.settings-status.ok { color: var(--color-success); }
.settings-status.error { color: var(--color-danger); }

/* The account control in the console navbar. */
.nav-account { position: relative; }
/* Anchored to .nav-account rather than the viewport, for the same reason as the
   storefront panel above. The console panel has no scrim, so it only needs the
   position change. */
.nav-account .account-panel { position: absolute; top: 100%; right: 0; }
.nav-account .account-toggle { max-width: 220px; }

@media (max-width: 720px) {
  /* minmax(0, ...) not a bare 1fr: the automatic minimum still applies. */
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .admin-sections { overflow-x: auto; }
  .admin-sec-btn { white-space: nowrap; }
}

/* --- diagnostics link --------------------------------------------------- */

.diag-card { margin-top: var(--space-4); }
.diag-actions { display: flex; align-items: flex-end; gap: var(--space-2); }
.diag-output { margin-top: var(--space-2); }
.diag-output .input-wrap input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}