/* base.css — reset, design tokens, typography, and the page shell.
   Mobile-first. No inline styles (the CSP forbids them); it all lives here. */

:root {
  /* Palette — warm "paper & petrol" vintage car-show theme */
  --paper:       #f4efe3;
  --paper-2:     #faf6ec;
  --ink:         #1c1b18;
  --ink-soft:    #4a463d;
  --line:        #d9d1bf;
  --petrol:      #1f4f4a;
  --petrol-dark: #163a36;
  --amber:       #c9772b;
  --amber-soft:  #e7a85e;
  --good:        #2f6b46;
  --good-bg:     #e7f0e6;
  --bad:         #9d2f2a;
  --bad-bg:      #f6e4e1;

  /* A4 (WCAG 2.2 AA). --amber is 2.97:1 on paper — fine as a decorative accent
     (header rule, handles, fills) but failing for text/links. --amber-text is the
     AA-contrast link/text amber (5.04:1 on paper, 5.79:1 on #fff). --line at
     1.32:1 is fine for decorative dividers but fails SC 1.4.11 (3:1) as the
     boundary of an interactive control; --line-strong (3.57:1 on paper, 4.10:1 on
     #fff) is the border for inputs and bordered controls only. */
  --amber-text:  #9c5210;
  --line-strong: #8a7c5e;

  /* A2 (admin theme). The header band is a dedicated surface family so an
     admin "banner colour" recolours the band only — never --petrol, which is
     also the app-wide accent text (dashboard figures, headings, links). The
     defaults reproduce the stock band exactly (--banner = old --petrol-dark,
     --banner-fg = old --paper-2, --banner-fg-soft = old --amber-soft). The
     served /theme.css overrides these (and --paper/--paper-2) when an admin
     customises, and carries the fixed dark palette under prefers-color-scheme. */
  --banner:        #163a36;
  --banner-fg:     #faf6ec;
  --banner-fg-soft:#e7a85e;

  /* Type scale */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --fs-100: 0.82rem;
  --fs-200: 0.95rem;
  --fs-300: 1.05rem;
  --fs-400: 1.35rem;
  --fs-600: 2rem;

  /* Spacing */
  --sp-1: 0.35rem;
  --sp-2: 0.70rem;
  --sp-3: 1.10rem;
  --sp-4: 1.60rem;
  --sp-5: 2.40rem;

  /* Layout */
  --measure: 40rem;   /* readable body + header content column */
  --shell:   64rem;   /* full-bleed bar inner cap (header + nav) */
  --tap:     44px;    /* minimum touch-target size (real devices) */

  --radius: 10px;
  --shadow: 0 1px 2px rgba(28,27,24,.06), 0 8px 24px rgba(28,27,24,.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% -10%, var(--paper-2), var(--paper)) fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* A4 (WCAG 2.2 AA): skip link — SC 2.4.1 Bypass Blocks. Off-screen until it
   takes keyboard focus, then pinned at the top over the header. */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -3.5rem;
  z-index: 100;
  padding: var(--sp-1) var(--sp-3);
  background: var(--banner);
  color: var(--banner-fg);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Screen-reader-only text utility. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.site-header { background: var(--banner); color: var(--banner-fg); border-bottom: 3px solid var(--amber); }
.site-header__inner { max-width: var(--shell); margin: 0 auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.site-header__mark { font-weight: 800; letter-spacing: .28em; font-size: var(--fs-400); }
/* Free-placement header band (D-027). The 1000px reference canvas is positioned
   and scaled by brand_render.js; it starts hidden so there is no flash before
   the layout is applied. */
.brandbar { position: relative; width: 100%; overflow: hidden; visibility: hidden; }
.brandbar__canvas { position: relative; }
.brandbar__logo { position: absolute; z-index: 1; }
.brandbar__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brandbar__powered { position: absolute; z-index: 2; color: var(--banner-fg-soft); font-weight: 600; white-space: nowrap; line-height: 1; }
/* Admin header-layout editor. The stage is the same 1000px reference space,
   scaled to fit the settings column by branding_editor.js. */
.be-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 6px 6px 0 0; margin-top: var(--sp-2); }
.be-stage { position: relative; width: 1000px; height: 150px; background: var(--banner); border-bottom: 3px solid var(--amber); user-select: none; }
.be-el { position: absolute; cursor: grab; }
.be-el.be-el--active { cursor: grabbing; }
.be-el--logo { z-index: 1; outline: 1px dashed var(--amber-soft); outline-offset: 2px; }
.be-el--logo img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.be-el--powered { z-index: 2; color: var(--banner-fg-soft); font-weight: 600; white-space: nowrap; line-height: 1; outline: 1px dashed var(--amber-soft); outline-offset: 2px; }
.be-handle { position: absolute; background: var(--amber); border: 2px solid #fff; z-index: 5; }
.be-handle--c { right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; cursor: nwse-resize; }
.be-handle--r { right: -7px; top: 50%; margin-top: -8px; width: 12px; height: 16px; border-radius: 3px; cursor: ew-resize; }
.be-handle--b { bottom: -7px; left: 50%; margin-left: -8px; width: 16px; height: 12px; border-radius: 3px; cursor: ns-resize; }
.be-toolbar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: var(--sp-2) 0; font-size: var(--fs-100); }
.be-toolbar label { display: flex; gap: 6px; align-items: center; }
.settings-logo-preview { display: block; max-height: 72px; max-width: 100%; width: auto; object-fit: contain; margin-top: var(--sp-2); }
.site-header__tag { font-size: var(--fs-100); letter-spacing: .08em; text-transform: uppercase; color: var(--banner-fg-soft); }

/* Role-aware navigation bar — full-bleed bar, centered wrapping inner.
   The bar background/border span the viewport (matching .site-header); the
   inner row is capped at --shell, centered, and wraps so it can never
   overflow at any role or width. */
.site-nav {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
}
.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-1);
  color: var(--petrol);
  font-weight: 600;
  font-size: var(--fs-200);
  text-decoration: none;
}
.site-nav__link:hover { text-decoration: underline; }
.site-nav__session { display: flex; align-items: center; gap: var(--sp-2); }
.site-nav__role {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .15rem .6rem;
}
.site-nav__logout { margin: 0; }
.site-nav__button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-100);
  font-weight: 700;
  color: var(--paper-2);
  background: var(--petrol);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.site-nav__button:hover { background: var(--petrol-dark); }

/* Staff-entry banner — makes the assisted-entry page unmistakable */
.staff-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-200);
  color: var(--ink);
}
.staff-banner__label {
  font-size: var(--fs-100);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--paper-2);
  background: var(--amber);
  border-radius: 999px;
  padding: .15rem .65rem;
  white-space: nowrap;
}

.page { flex: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: var(--sp-4) var(--sp-3) var(--sp-5); }

.site-footer { border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--fs-100); text-align: center; padding: var(--sp-3); }

.reg__title { font-size: var(--fs-600); line-height: 1.1; margin: 0 0 var(--sp-2); letter-spacing: -.01em; }
.reg__lede { margin: 0 0 var(--sp-4); color: var(--ink-soft); }

/* Admin dashboard — stat grid, manage tiles, recent-entries table */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.dash-stat {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-stat__num { font-size: var(--fs-600); font-weight: 800; line-height: 1.1; color: var(--petrol); }
.dash-stat__label { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }

.dash-section__title { font-size: var(--fs-400); margin: var(--sp-4) 0 var(--sp-2); }

.dash-table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dash-table th, .dash-table td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); }
.dash-table th { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); background: var(--paper); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-status { font-size: var(--fs-100); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }

.dash-empty { color: var(--ink-soft); background: var(--paper-2); border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--sp-3); text-align: center; }
.dash-updated { font-size: var(--fs-100); color: var(--ink-soft); margin: var(--sp-2) 0 0; }

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-2);
}
.dash-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
}
a.dash-tile:hover { border-color: var(--petrol); }
.dash-tile strong { color: var(--petrol); }
.dash-tile span { font-size: var(--fs-100); color: var(--ink-soft); }
.dash-tile__icon { width: 26px; height: 26px; color: var(--petrol); margin-bottom: var(--sp-1); flex-shrink: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dash-tile--soon { opacity: .55; box-shadow: none; }
.dash-tile--soon strong { color: var(--ink-soft); }
.dash-tile--soon .dash-tile__badge {
  align-self: flex-start;
  margin-top: var(--sp-1);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .05rem .5rem;
}

/* Cash handling (Payment P2) — awaiting-cash queue, confirm lines, receipts */
.cash-queue { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.cash-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.cash-group__header {
  margin: 0;
  font-size: var(--fs-200);
  font-weight: 800;
  color: var(--petrol);
  text-transform: none;
  border-bottom: 2px solid var(--line);
  padding-bottom: var(--sp-1);
}

.cash-line {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
}
.cash-line__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cash-line__name { color: var(--ink); }
.cash-line__vehicle { font-size: var(--fs-200); color: var(--ink-soft); }
.cash-line__meta { font-size: var(--fs-100); color: var(--ink-soft); }

.cash-line__due { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cash-line__due-label { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.cash-line__due-amount { font-size: var(--fs-400); font-weight: 800; color: var(--petrol); }

.cash-line__form {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2);
  border-top: 1px dashed var(--line);
  padding-top: var(--sp-2);
}
.cash-line__received { display: flex; flex-direction: column; gap: 2px; }
.cash-line__received > span { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.cash-line__received .field__input { max-width: 9rem; }

.cash-line__change { font-size: var(--fs-200); font-weight: 700; color: var(--petrol); min-height: 1.2em; flex: 1; }
.cash-line__change--short { color: var(--amber-text); }

.cash-line__confirm {
  background: var(--petrol);
  color: var(--paper-2);
  border: 0;
  border-radius: var(--radius);
  font-weight: 800;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}
.cash-line__confirm:hover { filter: brightness(1.1); }
.cash-line__confirm:disabled { opacity: .6; cursor: wait; }

.cash-result { grid-column: 1 / -1; }
.cash-result:empty { display: none; }
.cash-error {
  margin: 0;
  font-size: var(--fs-200);
  color: var(--ink);
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
}

.cash-confirmed { display: flex; flex-direction: column; gap: 2px; }
.cash-confirmed__change { margin: 0; font-size: var(--fs-400); color: var(--petrol); }
.cash-confirmed__change strong { font-weight: 800; }
.cash-confirmed__line { margin: 0; font-size: var(--fs-200); color: var(--ink); }
.cash-confirmed__meta { margin: 0; font-size: var(--fs-100); color: var(--ink-soft); }

/* --- Track D: public content pages + the admin content-block editor --------
   No inline styles (CSP style-src 'self'); everything lives here. */

/* Public content page (/about, /schedule). Readable column inherited from
   .page; blocks stack with comfortable spacing. */
.content-page { }
.content-page__title { font-size: var(--fs-600); line-height: 1.1; margin: 0 0 var(--sp-4); letter-spacing: -.01em; }
.content-page__empty { color: var(--ink-soft); }
.content-block { margin: 0 0 var(--sp-4); }
.content-block__header { font-size: var(--fs-400); color: var(--petrol); margin: 0 0 var(--sp-2); }
.content-block__body { color: var(--ink); }
.content-block__body p { margin: 0 0 var(--sp-2); }
.content-block__body ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.content-block__body li { margin: 0 0 var(--sp-1); }
.content-block__body a { color: var(--amber-text); text-decoration: underline; }

/* Admin content-block editor. .ce-block is one stacked, draggable-by-buttons
   block; the bar carries move/delete controls. */
.ce__head { margin-bottom: var(--sp-3); }
.ce__view { color: var(--petrol); font-weight: 600; white-space: nowrap; }
.ce-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.ce-status { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-weight: 600; }
.ce-status--ok { background: var(--good-bg); color: var(--good); }
.ce-status--err { background: var(--bad-bg); color: var(--bad); }
.ce-blocks { display: flex; flex-direction: column; gap: var(--sp-3); }
.ce-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: var(--sp-3); margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ce-block__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.ce-block__tag { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-100); color: var(--ink-soft); }
.ce-block__moves { display: flex; align-items: center; gap: var(--sp-1); }
.ce-move { font: inherit; min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--petrol); cursor: pointer; }
.ce-move:hover { border-color: var(--petrol); }
.ce-del { min-height: var(--tap); cursor: pointer; }
.ce-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ce-meta { margin: 0; font-size: var(--fs-100); color: var(--ink-soft); }

/* Track D content editor — body formatting toolbar (B / I / • List). */
.ce-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.ce-fmt { font: inherit; font-weight: 700; min-width: var(--tap); min-height: 2.1rem; padding: 0 .65rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--petrol); cursor: pointer; line-height: 1; }
.ce-fmt:hover { border-color: var(--petrol); }
.ce-fmt:active { transform: translateY(1px); }
.ce-fmt--i { font-style: italic; }
.ce-hint-bullet { white-space: nowrap; }

/* Track D content editor — WYSIWYG body box (contenteditable). Looks like the
   text inputs; shows real bold/italic/lists while editing. */
.ce-rte { min-height: 5rem; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); line-height: 1.5; }
.ce-rte:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(31,79,74,.18); }
.ce-rte:empty::before { content: attr(data-placeholder); color: var(--ink-soft); }
.ce-rte p { margin: 0 0 var(--sp-2); }
.ce-rte ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.ce-rte li { margin: 0 0 var(--sp-1); }
.ce-rte a { color: var(--amber-text); text-decoration: underline; }

/* --- Track D-D3: card directories (Vendors) ------------------------------- */
/* Admin editor. Groups nest cards; cards reuse the .ce-* toolbar / WYSIWYG box
   styles from the content editor. */
.cd-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.cd-groups { display: flex; flex-direction: column; gap: var(--sp-4); }
.cd-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: var(--sp-3); margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cd-cards { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-2); border-left: 3px solid var(--line); }
.cd-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: var(--sp-3); margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cd-addr { border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cd-addr legend { padding: 0 var(--sp-1); }
.cd-logo-preview-wrap { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cd-logo-preview { max-width: 160px; max-height: 90px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: var(--sp-1); }
.cd-logo-remove { min-height: var(--tap); cursor: pointer; }

/* Public directory page. Groups stack; cards sit in a responsive grid. */
.cd-public-group { margin: 0 0 var(--sp-5); }
.cd-public-group__title { font-size: var(--fs-400); color: var(--petrol); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.cd-public-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.cd-public-card__logo { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.cd-public-card__logo img { max-width: 100%; max-height: 110px; object-fit: contain; }
.cd-public-card__name { font-size: var(--fs-300); margin: 0; color: var(--ink); }
.cd-public-card__desc { color: var(--ink); }
.cd-public-card__desc p { margin: 0 0 var(--sp-2); }
.cd-public-card__desc ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.cd-public-card__desc a { color: var(--amber-text); text-decoration: underline; }
.cd-public-card__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-100); color: var(--ink-soft); }
.cd-public-card__meta a { color: var(--petrol); text-decoration: none; font-weight: 600; }
.cd-public-card__meta a:hover { text-decoration: underline; }
.cd-public-card__addr { display: flex; flex-direction: column; }

/* Card-directory per-tier style (D-029) — Sponsors. The editor control row plus
   the bounded public size scale. An unstyled group (the Vendor directory) emits
   no class and keeps the default sizing defined above; md in every scale equals
   that default, so a Sponsors tier left at md looks identical to a Vendor card. */
.cd-tier-style { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--line); border-radius: var(--radius); }
.cd-tier-style__field { flex: 1 1 8rem; min-width: 8rem; }

/* Per-card logo image size within a tier (6-step scale; md = default). */
.cd-public-group.cd-logo--xxl .cd-public-card__logo { min-height: 150px; }
.cd-public-group.cd-logo--xxl .cd-public-card__logo img { max-height: 200px; }
.cd-public-group.cd-logo--xl  .cd-public-card__logo { min-height: 120px; }
.cd-public-group.cd-logo--xl  .cd-public-card__logo img { max-height: 160px; }
.cd-public-group.cd-logo--lg  .cd-public-card__logo { min-height: 100px; }
.cd-public-group.cd-logo--lg  .cd-public-card__logo img { max-height: 130px; }
.cd-public-group.cd-logo--md  .cd-public-card__logo { min-height: 80px; }
.cd-public-group.cd-logo--md  .cd-public-card__logo img { max-height: 110px; }
.cd-public-group.cd-logo--sm  .cd-public-card__logo { min-height: 64px; }
.cd-public-group.cd-logo--sm  .cd-public-card__logo img { max-height: 84px; }
.cd-public-group.cd-logo--xs  .cd-public-card__logo { min-height: 48px; }
.cd-public-group.cd-logo--xs  .cd-public-card__logo img { max-height: 60px; }

/* Tier heading size + weight (md = default; bold = the default heading weight). */
.cd-public-group.cd-title--lg .cd-public-group__title { font-size: 1.7rem; }
.cd-public-group.cd-title--md .cd-public-group__title { font-size: var(--fs-400); }
.cd-public-group.cd-title--sm .cd-public-group__title { font-size: 1.1rem; }
.cd-public-group.cd-weight--bold   .cd-public-group__title { font-weight: 700; }
.cd-public-group.cd-weight--normal .cd-public-group__title { font-weight: 400; }

/* Per-card name size within a tier (md = default). */
.cd-public-group.cd-name--lg .cd-public-card__name { font-size: 1.3rem; }
.cd-public-group.cd-name--md .cd-public-card__name { font-size: var(--fs-300); }
.cd-public-group.cd-name--sm .cd-public-card__name { font-size: 0.92rem; }

/* ---------------------------------------------------------------------------
   Voting-context cross-links (Track D, D-D5)
   The "back to voting" banner (top of a public page reached from a car's voting
   page) and the "explore the show" row (bottom of the voting page and of those
   public pages). Both are token-gated in the templates, so these styles apply
   only when the affordance is actually rendered.
   --------------------------------------------------------------------------- */
.back-to-voting {
  max-width: var(--measure);
  margin: 0 auto var(--sp-2);
}
.back-to-voting__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  color: var(--petrol);
  font-weight: 600;
  font-size: var(--fs-200);
  text-decoration: none;
}
.back-to-voting__link:hover { text-decoration: underline; }

.explore-row {
  max-width: var(--measure);
  margin: var(--sp-4) auto 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.explore-row__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.explore-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
.explore-row__item { margin: 0; }
.explore-row__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-1);
  color: var(--petrol);
  font-weight: 600;
  font-size: var(--fs-200);
  text-decoration: none;
}
.explore-row__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   A4 — WCAG 2.2 AA: visible focus + device-preference auto-activation
   --------------------------------------------------------------------------- */

/* Visible keyboard focus for every interactive element (SC 2.4.7 Focus Visible,
   SC 2.4.13 Focus Appearance). :focus-visible so a mouse click doesn't ring the
   control. The D-D5 cross-links and the nav links inherit this via the element
   selectors; no per-component rule needed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Controls on the dark petrol fill need a light ring to keep ≥3:1 against it. */
.site-nav__button:focus-visible,
.btn--primary:focus-visible,
.cash-line__confirm:focus-visible {
  outline-color: var(--amber-soft);
}

/* Reduced motion (SC 2.3.3): honor the OS/browser preference by neutralizing
   transitions and animations. Inert when no preference is expressed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Higher contrast (prefers-contrast: more): promote soft text to full ink and
   strengthen every divider/control border + the focus ring. The default already
   meets AA; this is the device-preference uplift, inert when no preference. */
@media (prefers-contrast: more) {
  :root {
    --ink-soft:    #2b2820;
    --line:        #6f6648;
    --line-strong: #4a463d;
    --amber-text:  #7c3f08;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible,
  [contenteditable="true"]:focus-visible {
    outline-width: 3px;
  }
}