/* =========================================================
   RACEMANAGER — SITE-WIDE THEME
   Ported from .build/design/racemanager-redesign.html (design mockup).
   Deliberately a standalone CSS file, NOT part of .build/theme_custom's
   Sass pipeline: that pipeline's compiled output is shared with a
   separate live production site (misocial.net) outside this repo and
   must not be touched. This file retheme's Bootstrap 5.3 purely via
   its own CSS custom properties and loads after the compiled Bootstrap
   CSS, so it needs no build step of its own.
   ========================================================= */
:root{
  --rm-red:        #C8102E;
  --rm-red-dark:   #920D22;
  --rm-red-tint:   #FBE4E7;
  --rm-asphalt:    #17120F;
  --rm-asphalt-2:  #241C18;
  --rm-asphalt-3:  #352A24;
  --rm-white:      #FBF9F5;
  --rm-white-2:    #F2ECE3;
  --rm-ink:        #221C19;
  --rm-slate:      #6E645E;
  --rm-slate-2:    #948A83;
  --rm-line:        #E3DACD;
  --rm-line-dark:   rgba(251,249,245,.14);
  --rm-green:      #2F7D4F;
  --rm-green-tint: #E5F2EA;
  /* green text on --rm-green-tint: 4.9:1 (--rm-green itself is only 4.4:1 there) */
  --rm-green-ink:  #2B7549;

  /* flag colours from design/prototype.html */
  --rm-yellow:        #F2B705;
  --rm-yellow-tint:   #FFF3C4;
  --rm-yellow-ink:    #6B4E00;
  --rm-flag-red:      #A10E22;
  --rm-flag-red-tint: #FBE0E3;
  --rm-blue:          #1F4E8C;
  --rm-blue-tint:     #E2ECF8;
  --rm-p1:            #E3BC3F;
  --rm-p2:            #CFCBC4;
  --rm-p3:            #D59A63;
  --rm-board:         #EAE3D8;

  --font-display: 'Racing Sans One', 'Arial Narrow', sans-serif;
  --font-body: 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--rm-white);
  color:var(--rm-ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ---------- hero/footer: full-bleed regardless of which centered .container
   they're nested in, and a sticky footer (pinned to the viewport bottom on
   short pages, normal flow on long ones) — scoped to pages that actually
   have a footer via :has(), so it can't touch layout on any other page. ---------- */
.mk-hero, .mk-footer{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.mk-hero{ margin-top: -1.5rem; }
.mk-footer{ margin-top: auto; }
body:has(.mk-footer){
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body:has(.mk-footer) .container.pt-4{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
img{max-width:100%;}
a{color:var(--rm-red); text-decoration:none;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .btn:focus-visible{
  outline:2px solid var(--rm-red); outline-offset:2px;
}
h1,h2,h3,h4{ text-wrap:balance; margin:0; }
.tabular{ font-variant-numeric: tabular-nums; }

/* ---------- quantity stepper: a +/- pair either side of a number input, used anywhere
   someone picks a ticket count (see qty-stepper.js include pattern in the ticket-order
   templates). Hides the native spin arrows since these buttons replace them. ---------- */
.qty-stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--rm-line); background:#fff; }
.qty-stepper button{
  background:var(--rm-white-2); border:none; width:32px; flex:none;
  font-family:var(--font-body); font-size:1.05rem; font-weight:700; line-height:1;
  color:var(--rm-ink); cursor:pointer;
}
.qty-stepper button:hover{ background:var(--rm-red-tint); color:var(--rm-red-dark); }
.qty-stepper button:active{ background:var(--rm-red); color:#fff; }
.qty-stepper button:disabled{ opacity:.4; cursor:not-allowed; background:var(--rm-white-2); color:var(--rm-ink); }
.qty-stepper input{
  border:none; border-left:1px solid var(--rm-line); border-right:1px solid var(--rm-line);
  width:48px; text-align:center; font-family:var(--font-mono); font-weight:600;
  -moz-appearance:textfield;
}
.qty-stepper input:focus{ outline:none; box-shadow:none; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- ticket-order table (ticket_order_select.html.twig, ticket_order_review.html.twig):
   on phones/small tablets each row becomes a labelled stacked card instead of forcing the row into
   a cramped, horizontally-scrolling table - keeps the qty stepper always in view instead of pushed
   off-screen. Labels come from each td's own data-label attribute rather than a repeated header
   row; tfoot rows (Subtotal/Total/etc.) already carry their own label as the cell text, so they
   just become a plain label-left/value-right row instead of stacking further. ---------- */
@media (max-width: 860px){
  .rm-ticket-table thead{ display:none; }
  .rm-ticket-table tbody{ display:block; }
  .rm-ticket-table tbody tr{ display:block; border:1px solid var(--rm-line); border-radius:4px; margin-bottom:10px; padding:8px 12px; }
  .rm-ticket-table tbody td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border:none; padding:6px 0; }
  .rm-ticket-table tbody td::before{ content:attr(data-label); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--rm-slate); }
  .rm-ticket-table tbody td[data-label="Qty"]{ padding-top:10px; margin-top:4px; border-top:1px dashed var(--rm-line); }
  .rm-ticket-table tfoot{ display:block; }
  .rm-ticket-table tfoot tr{ display:flex; justify-content:space-between; padding:3px 0; }
  .rm-ticket-table tfoot td{ display:block; border:none; padding:0; }
}

/* ---------- Bootstrap root-level retheme: catches .text-primary/.bg-primary/
   .border-primary/progress bars/alerts/pagination site-wide, which read
   --bs-primary(-rgb) directly and are NOT covered by the .btn-primary override
   below (Bootstrap bakes each button variant's --bs-btn-bg as a literal
   compile-time hex, not a var(--bs-primary) reference, so both layers are
   needed). ---------- */
:root{
  --bs-primary: var(--rm-red);
  --bs-primary-rgb: 200, 16, 46;
  --bs-primary-text-emphasis: var(--rm-red-dark);
  --bs-primary-bg-subtle: var(--rm-red-tint);
  --bs-primary-border-subtle: var(--rm-red);
  --bs-link-color: var(--rm-red);
  --bs-link-color-rgb: 200, 16, 46;
  --bs-link-hover-color: var(--rm-red-dark);
  --bs-link-hover-color-rgb: 146, 13, 34;

  /* success/warning/danger/info become the flag colours, so alerts, badges and text utilities
     match the status chips */
  --bs-success: var(--rm-green);
  --bs-success-rgb: 47, 125, 79;
  --bs-success-text-emphasis: var(--rm-green-ink);
  --bs-success-bg-subtle: var(--rm-green-tint);
  --bs-success-border-subtle: #BFDCCB;
  --bs-warning: var(--rm-yellow);
  --bs-warning-rgb: 242, 183, 5;
  --bs-warning-text-emphasis: var(--rm-yellow-ink);
  --bs-warning-bg-subtle: var(--rm-yellow-tint);
  --bs-warning-border-subtle: #F0DE9A;
  --bs-danger: var(--rm-flag-red);
  --bs-danger-rgb: 161, 14, 34;
  --bs-danger-text-emphasis: var(--rm-flag-red);
  --bs-danger-bg-subtle: var(--rm-flag-red-tint);
  --bs-danger-border-subtle: #F2C2C9;
  --bs-info: var(--rm-blue);
  --bs-info-rgb: 31, 78, 140;
  --bs-info-text-emphasis: var(--rm-blue);
  --bs-info-bg-subtle: var(--rm-blue-tint);
  --bs-info-border-subtle: #C3D5EC;
  --bs-form-invalid-color: var(--rm-flag-red);
  --bs-form-invalid-border-color: var(--rm-flag-red);
  --bs-form-valid-color: var(--rm-green-ink);
  --bs-form-valid-border-color: var(--rm-green);
}

/* ---------- Bootstrap 5.3 component re-theme (via Bootstrap's own CSS custom
   properties — the documented way to reskin 5.3+ without recompiling Sass) ---------- */
.navbar{
  --bs-navbar-padding-y: 0; --bs-navbar-padding-x: 0;
  --bs-navbar-color: var(--rm-slate-2);
  --bs-navbar-hover-color: var(--rm-white);
  --bs-navbar-active-color: var(--rm-white);
  --bs-navbar-disabled-color: var(--rm-slate);
  --bs-navbar-brand-color: var(--rm-white);
  --bs-navbar-brand-hover-color: var(--rm-white);
}
/* Buttons (prototype .btn): 44px tall so they're easy to tap, 34px small, 54px large. */
.btn{
  --bs-btn-border-radius:2px; --bs-btn-font-weight:700; --bs-btn-font-size:.92rem; --bs-btn-line-height:1.25;
  --bs-btn-padding-x:16px; --bs-btn-padding-y:6px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; letter-spacing:.01em;
}
.btn-sm{ --bs-btn-border-radius:2px; --bs-btn-font-size:.82rem; --bs-btn-padding-x:10px; --bs-btn-padding-y:4px; min-height:34px; }
.btn-lg{ --bs-btn-border-radius:2px; --bs-btn-font-size:1rem; --bs-btn-padding-x:20px; --bs-btn-padding-y:8px; min-height:54px; }
.btn-primary{
  --bs-btn-bg: var(--rm-red); --bs-btn-border-color: var(--rm-red); --bs-btn-color:#fff;
  --bs-btn-hover-bg: var(--rm-red-dark); --bs-btn-hover-border-color: var(--rm-red-dark); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg: var(--rm-red-dark); --bs-btn-active-border-color: var(--rm-red-dark);
  --bs-btn-disabled-bg: var(--rm-red); --bs-btn-disabled-border-color: var(--rm-red);
  --bs-btn-focus-shadow-rgb: 200,16,46;
}
.btn-outline-light{
  --bs-btn-color: var(--rm-white); --bs-btn-border-color: var(--rm-line-dark);
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--rm-white); --bs-btn-hover-border-color: var(--rm-white);
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--rm-white); --bs-btn-active-border-color: var(--rm-white);
}
/* the prototype's plain button - white with a thin border - for Bootstrap's neutral variants */
.btn-outline-secondary, .btn-outline-dark, .btn-light{
  --bs-btn-color:var(--rm-ink); --bs-btn-bg:#fff; --bs-btn-border-color:var(--rm-line);
  --bs-btn-hover-color:var(--rm-ink); --bs-btn-hover-bg:var(--rm-white-2); --bs-btn-hover-border-color:var(--rm-slate-2);
  --bs-btn-active-color:var(--rm-ink); --bs-btn-active-bg:var(--rm-white-2); --bs-btn-active-border-color:var(--rm-slate-2);
  --bs-btn-disabled-color:var(--rm-slate); --bs-btn-disabled-bg:#fff; --bs-btn-disabled-border-color:var(--rm-line);
  --bs-btn-focus-shadow-rgb:110,100,94;
}
.btn-dark{
  --bs-btn-color:#fff; --bs-btn-bg:var(--rm-asphalt); --bs-btn-border-color:var(--rm-asphalt);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-asphalt-3); --bs-btn-hover-border-color:var(--rm-asphalt-3);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--rm-asphalt-2); --bs-btn-active-border-color:var(--rm-asphalt-2);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--rm-asphalt); --bs-btn-disabled-border-color:var(--rm-asphalt);
}
.btn-outline-primary{
  --bs-btn-color:var(--rm-red); --bs-btn-bg:#fff; --bs-btn-border-color:var(--rm-red);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-red); --bs-btn-hover-border-color:var(--rm-red);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--rm-red-dark); --bs-btn-active-border-color:var(--rm-red-dark);
  --bs-btn-disabled-color:var(--rm-red); --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:var(--rm-red);
  --bs-btn-focus-shadow-rgb:200,16,46;
}
.btn-success{
  --bs-btn-color:#fff; --bs-btn-bg:var(--rm-green); --bs-btn-border-color:var(--rm-green);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-green-ink); --bs-btn-hover-border-color:var(--rm-green-ink);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--rm-green-ink); --bs-btn-active-border-color:var(--rm-green-ink);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--rm-green); --bs-btn-disabled-border-color:var(--rm-green);
  --bs-btn-focus-shadow-rgb:47,125,79;
}
.btn-outline-success{
  --bs-btn-color:var(--rm-green-ink); --bs-btn-bg:#fff; --bs-btn-border-color:var(--rm-green);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-green); --bs-btn-hover-border-color:var(--rm-green);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--rm-green-ink); --bs-btn-active-border-color:var(--rm-green-ink);
  --bs-btn-disabled-color:var(--rm-green-ink); --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:var(--rm-green);
  --bs-btn-focus-shadow-rgb:47,125,79;
}
.btn-danger{
  --bs-btn-color:#fff; --bs-btn-bg:var(--rm-flag-red); --bs-btn-border-color:var(--rm-flag-red);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-red-dark); --bs-btn-hover-border-color:var(--rm-red-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--rm-red-dark); --bs-btn-active-border-color:var(--rm-red-dark);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--rm-flag-red); --bs-btn-disabled-border-color:var(--rm-flag-red);
  --bs-btn-focus-shadow-rgb:161,14,34;
}
.btn-outline-danger{
  --bs-btn-color:var(--rm-flag-red); --bs-btn-bg:#fff; --bs-btn-border-color:var(--rm-flag-red);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-flag-red); --bs-btn-hover-border-color:var(--rm-flag-red);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--rm-red-dark); --bs-btn-active-border-color:var(--rm-red-dark);
  --bs-btn-disabled-color:var(--rm-flag-red); --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:var(--rm-flag-red);
  --bs-btn-focus-shadow-rgb:161,14,34;
}
.btn-warning{
  --bs-btn-color:var(--rm-asphalt); --bs-btn-bg:var(--rm-yellow); --bs-btn-border-color:var(--rm-yellow);
  --bs-btn-hover-color:var(--rm-asphalt); --bs-btn-hover-bg:#E0A800; --bs-btn-hover-border-color:#E0A800;
  --bs-btn-active-color:var(--rm-asphalt); --bs-btn-active-bg:#E0A800; --bs-btn-active-border-color:#E0A800;
  --bs-btn-disabled-color:var(--rm-asphalt); --bs-btn-disabled-bg:var(--rm-yellow); --bs-btn-disabled-border-color:var(--rm-yellow);
  --bs-btn-focus-shadow-rgb:242,183,5;
}
.btn-outline-warning{
  --bs-btn-color:var(--rm-yellow-ink); --bs-btn-bg:#fff; --bs-btn-border-color:var(--rm-yellow);
  --bs-btn-hover-color:var(--rm-asphalt); --bs-btn-hover-bg:var(--rm-yellow); --bs-btn-hover-border-color:var(--rm-yellow);
  --bs-btn-active-color:var(--rm-asphalt); --bs-btn-active-bg:#E0A800; --bs-btn-active-border-color:#E0A800;
  --bs-btn-disabled-color:var(--rm-yellow-ink); --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:var(--rm-yellow);
  --bs-btn-focus-shadow-rgb:242,183,5;
}
.btn-info{
  --bs-btn-color:#fff; --bs-btn-bg:var(--rm-blue); --bs-btn-border-color:var(--rm-blue);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#173C6D; --bs-btn-hover-border-color:#173C6D;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#173C6D; --bs-btn-active-border-color:#173C6D;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--rm-blue); --bs-btn-disabled-border-color:var(--rm-blue);
  --bs-btn-focus-shadow-rgb:31,78,140;
}
.btn-outline-info{
  --bs-btn-color:var(--rm-blue); --bs-btn-bg:#fff; --bs-btn-border-color:var(--rm-blue);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--rm-blue); --bs-btn-hover-border-color:var(--rm-blue);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#173C6D; --bs-btn-active-border-color:#173C6D;
  --bs-btn-disabled-color:var(--rm-blue); --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:var(--rm-blue);
  --bs-btn-focus-shadow-rgb:31,78,140;
}
.badge{ border-radius:2px; font-family:var(--font-mono); font-weight:600; letter-spacing:.04em; }
.accordion{ --bs-accordion-border-color: var(--rm-line); --bs-accordion-btn-focus-border-color: var(--rm-red); --bs-accordion-active-bg: var(--rm-red-tint); --bs-accordion-active-color: var(--rm-red-dark); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(200,16,46,.2); }
.accordion-item, .accordion-button{ border-radius:0 !important; }
.accordion-button{ font-family:var(--font-body); gap:16px; padding:13px 16px; }
.accordion-button .datebox{ font-family:var(--font-mono); text-align:center; width:46px; flex:none; }
.accordion-button .datebox .d{ display:block; font-size:1.15rem; font-weight:600; line-height:1; }
.accordion-button .datebox .m{ display:block; font-size:.62rem; letter-spacing:.06em; color:var(--rm-slate); }
.accordion-button .evtext{ display:flex; flex-direction:column; text-align:left; gap:2px; }
.accordion-button .et{ font-weight:700; font-size:.92rem; }
.accordion-button .ed{ font-size:.78rem; color:var(--rm-slate); font-weight:400; }
.accordion-body{ padding:2px 16px 16px 78px; font-size:.86rem; color:var(--rm-slate); }
/* Form fields (prototype .field/.inp): 46px tall, a border dark enough to see (3.4:1), bold labels. */
.form-control, .form-select{ border-color:var(--rm-slate-2); border-radius:2px; font-family:var(--font-body); font-size:1rem; color:var(--rm-ink); min-height:46px; padding-top:.625rem; padding-bottom:.625rem; }
textarea.form-control{ min-height:90px; }
.form-control::file-selector-button{ margin-top:-.625rem; margin-bottom:-.625rem; padding-top:.625rem; padding-bottom:.625rem; }
.form-control-sm, .form-select-sm,
.input-group-sm > .form-control, .input-group-sm > .form-select{ min-height:36px; font-size:.88rem; padding-top:.4rem; padding-bottom:.4rem; }
.input-group-sm > .btn, .input-group-sm > .input-group-text{ min-height:36px; }
.form-control-lg, .form-select-lg,
.input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .btn{ min-height:54px; }
.form-control:focus, .form-select:focus{ border-color:var(--rm-red); box-shadow:0 0 0 .2rem rgba(200,16,46,.15); }
.form-control::placeholder{ color:var(--rm-slate); }
.form-label, .col-form-label{ font-weight:700; font-size:.93rem; color:var(--rm-ink); }
.form-label{ margin-bottom:6px; }
.form-text{ font-size:.8rem; color:var(--rm-slate); }
.invalid-feedback{ font-size:.84rem; }
.input-group-text{ border-color:var(--rm-slate-2); background:var(--rm-white-2); border-radius:2px; }
.form-check{ padding-left:2em; min-height:1.5rem; }
.form-check .form-check-input{ margin-left:-2em; }
.form-check-input{ width:1.375em; height:1.375em; margin-top:.05em; border-color:var(--rm-slate-2); }
.form-check-input[type=checkbox]{ border-radius:2px; }
.form-check-input:checked{ background-color:var(--rm-red); border-color:var(--rm-red); }
.form-check-input:focus{ border-color:var(--rm-red); box-shadow:0 0 0 .2rem rgba(200,16,46,.15); }
.form-check-label{ padding-top:.1em; }
/* on/off switch (prototype .sw): grey track with a white knob, green when on */
.form-switch{ padding-left:3.5em; }
.form-switch .form-check-input,
.form-switch .form-check-input:focus{
  --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input{ width:2.875em; height:1.75em; margin-left:-3.5em; margin-top:-.1em; border-radius:2em; background-color:var(--rm-slate-2); border-color:var(--rm-slate-2); }
.form-switch .form-check-input:checked{ background-color:var(--rm-green); border-color:var(--rm-green); }

.rm-wrap{ max-width:1180px; margin-inline:auto; padding-inline:20px; }
.rm-kicker{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rm-red);
}
.rm-display{ font-family:var(--font-display); letter-spacing:.01em; text-transform:uppercase; }

/* ---------- checker strip: the one recurring motif, used sparingly ---------- */
.rm-checker{
  height:10px;
  background-image: repeating-conic-gradient(var(--rm-asphalt) 0% 25%, transparent 0% 50%);
  background-size: 20px 20px;
  background-color: var(--rm-white);
}
.rm-checker.on-dark{ background-color: var(--rm-asphalt); background-image: repeating-conic-gradient(var(--rm-white) 0% 25%, transparent 0% 50%); }

/* =========================================================
   MOCKUP COMPONENTS — the real proposed RaceManager UI.
   ========================================================= */
/* ---------- top bar (templates/_partials/_nav_public / _nav_staff, prototype pubnav/snav/anav).
   Phones: brand + Menu button; the links open as a panel under the bar (Bootstrap collapse).
   768px and up: links inline, the panel's phone-only account links hidden. ---------- */
.mk-navbar{ background:var(--rm-asphalt); color:var(--rm-white); position:relative; z-index:1030; }
.mk-navbar .mk-nav-inner{ display:flex; align-items:center; gap:18px; padding-block:6px; }
.mk-navbar .mk-brand{ display:flex; align-items:center; gap:9px; min-height:44px; font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em; color:var(--rm-white); text-transform:uppercase; white-space:nowrap; }
.mk-navbar .mk-brand .flag{ width:11px;height:11px;background:var(--rm-red); transform:rotate(45deg); flex:none;}
.mk-navbar .mk-links{ position:absolute; top:100%; left:0; right:0; background:var(--rm-asphalt-2); padding:4px 16px 12px; box-shadow:0 12px 24px -12px rgba(23,18,15,.6); }
.mk-navbar .mk-links a{ display:flex; align-items:center; min-height:44px; color:#CFC6BF; font-weight:600; font-size:.95rem; }
.mk-navbar .mk-links a:hover, .mk-navbar .mk-links a.active{ color:var(--rm-white); }
.mk-navbar .mk-links-phone{ border-top:1px solid var(--rm-line-dark); margin-top:4px; padding-top:4px; }
.mk-navbar .mk-links-label{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#F0A3AE; margin:10px 0 0; }
/* system admins: the track office links in a second, lighter bar (desktop; phones get them in Menu) */
.mk-subnav{ display:none; background:var(--rm-asphalt-2); border-top:1px solid var(--rm-line-dark); }
.mk-subnav-inner{ display:flex; align-items:center; gap:4px; padding-block:6px; flex-wrap:wrap; }
.mk-subnav-label{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#F0A3AE; margin-right:10px; }
.mk-subnav a{ color:#CFC6BF; font-weight:600; font-size:.84rem; padding:5px 10px; border-radius:2px; }
.mk-subnav a:hover{ color:var(--rm-white); }
.mk-subnav a.active{ background:var(--rm-asphalt-3); color:var(--rm-white); }
.mk-navbar .mk-nav-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.mk-navbar .mk-nav-q, .mk-navbar .mk-nav-buy, .mk-navbar .mk-nav-who{ display:none; }
.mk-navbar a.mk-nav-q, .mk-navbar .mk-nav-account{ color:#CFC6BF; font-weight:600; font-size:.88rem; background:none; border:0; padding:0; }
.mk-navbar a.mk-nav-q:hover, .mk-navbar a.mk-nav-q.active, .mk-navbar .mk-nav-account:hover{ color:var(--rm-white); }
.mk-navbar .mk-nav-account{ display:inline-flex; align-items:center; gap:4px; max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-navbar .mk-nav-who{ font-size:.82rem; color:var(--rm-slate-2); white-space:nowrap; }
.mk-navbar .mk-nav-who a{ color:#CFC6BF; }
.mk-navbar .mk-nav-who a:hover{ color:var(--rm-white); }
.mk-navbar .dropdown-menu{ --bs-dropdown-border-radius:2px; --bs-dropdown-link-active-bg:var(--rm-red); --bs-dropdown-link-active-color:#fff; }
.mk-navbar .dropdown-item{ padding-block:8px; }
.mk-menu-btn{ background:none; border:1px solid rgba(251,249,245,.3); border-radius:2px; color:var(--rm-white); min-height:44px; padding:0 14px; font-weight:600; font-size:.9rem; }
.mk-menu-btn:hover{ border-color:var(--rm-white); }
@media (min-width:768px){
  .mk-navbar .mk-nav-inner{ padding-block:10px; }
  .mk-navbar .mk-links, .mk-navbar .mk-links.collapse, .mk-navbar .mk-links.collapsing{
    display:flex !important; height:auto !important; position:static; background:none; box-shadow:none; padding:0; gap:22px; margin-left:4px;
  }
  .mk-navbar .mk-links a{ min-height:0; font-size:.92rem; }
  .mk-navbar .mk-links-phone{ display:none; }
  .mk-subnav{ display:block; }
  .mk-navbar .mk-nav-q, .mk-navbar .mk-nav-buy{ display:inline-flex; align-items:center; }
  .mk-navbar .mk-nav-who{ display:inline; }
  .mk-menu-btn{ display:none; }
  /* staff and system admin: the current section gets a solid tab */
  .mk-navbar.is-staff .mk-links{ gap:4px; }
  .mk-navbar.is-staff .mk-links a{ padding:6px 10px; font-size:.88rem; border-radius:2px; }
  .mk-navbar.is-staff .mk-links a.active{ background:var(--rm-asphalt-3); }
}

.mk-hero{ background:linear-gradient(160deg, var(--rm-asphalt) 0%, #241a15 72%, var(--rm-red-dark) 145%); color:var(--rm-white); padding:44px 0 34px; position:relative; }
.mk-hero > .container{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; padding-inline:28px; }
.mk-hero .mk-kicker{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#F0A3AE; }
.mk-hero h1{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.9rem,4vw,2.9rem); line-height:1; margin-block:10px 12px; }
.mk-hero p{ color:#D9CFC8; max-width:52ch; font-size:.96rem; margin:0;}

.mk-stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--rm-line); }
.mk-stat{ padding:18px 20px; border-left:1px solid var(--rm-line); }
.mk-stat:first-child{ border-left:none; }
.mk-stat .n{ font-family:var(--font-mono); font-weight:600; font-size:1.5rem; color:var(--rm-asphalt); }
.mk-stat .l{ font-size:.74rem; color:var(--rm-slate); text-transform:uppercase; letter-spacing:.06em; }

.mk-section{ padding:34px 28px; }
.mk-tabs-bleed{ margin:20px -28px; }
.mk-section h2{ font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem; letter-spacing:.01em; margin-bottom:4px;}
.mk-section .sub{ color:var(--rm-slate); font-size:.86rem; margin-bottom:20px; }

.mk-action-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.mk-action{ border:1px solid var(--rm-line); padding:18px 14px; text-align:left; background:var(--rm-white); transition:border-color .15s, transform .15s; color:var(--rm-ink); }
.mk-action .t{ color:var(--rm-ink); }
.mk-action:hover{ border-color:var(--rm-red); transform:translateY(-2px); }
.mk-action .ic{ width:34px;height:34px; background:var(--rm-red); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.mk-action .ic svg{ width:18px; height:18px; }
.mk-action .t{ font-weight:700; font-size:.92rem; }
.mk-action .d{ color:var(--rm-slate); font-size:.76rem; margin-top:3px; }

.mk-footer{ background:var(--rm-asphalt); color:var(--rm-slate-2); padding:30px 0 18px; }
.mk-footer > .container{ padding-inline:28px; }
.mk-footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:22px; }
.mk-footer h4{ color:var(--rm-white); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-mono); margin-bottom:10px;}
.mk-footer a{ color:#CFC6BF; display:block; font-size:.84rem; margin-block:6px; }
.mk-footer a:hover{ color:var(--rm-white); }
.mk-footer .bottom a{ display:inline; margin:0; font-size:inherit; text-decoration:underline; }
.mk-footer .mk-footer-blurb{ font-size:.84rem; max-width:32ch; margin:10px 0 0; }
@media (max-width:767.98px){
  .mk-footer .cols > :first-child{ grid-column:1 / -1; }
  .mk-footer .cols a{ display:flex; align-items:center; min-height:44px; margin-block:0; }
}
.mk-footer .brandline{ display:flex; align-items:center; gap:8px; color:var(--rm-white); font-family:var(--font-display); text-transform:uppercase; font-size:1rem;}
.mk-footer .brandline .flag{ width:9px;height:9px;background:var(--rm-red); transform:rotate(45deg); }
.mk-footer .bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:1px solid var(--rm-line-dark); margin-top:22px; padding-top:14px; font-size:.74rem; }

/* ---------- standalone brand mark (templates/_partials/_brand_mark.html.twig) - same red-diamond
   + wordmark look as .mk-navbar/.mk-footer's own scoped versions above, sized for a centered
   lockup on a light card (auth pages: activate/reset-password) rather than the dark nav/footer. ---------- */
.rm-brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; color:var(--rm-ink); }
.rm-brand .flag{ width:16px; height:16px; background:var(--rm-red); transform:rotate(45deg); flex:none; }
.rm-brand .word{ font-size:1.5rem; }

.mk-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mk-track-card{ border:1px solid var(--rm-line); background:#fff; }
.mk-track-card .img{ height:120px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-size:1.6rem; letter-spacing:.05em;}
.mk-track-card .body{ padding:14px 16px 16px; }
.mk-track-card .name{ font-weight:700; font-size:.98rem; }
.mk-track-card .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.mk-badge{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.04em; padding:3px 8px; border:1px solid var(--rm-line); color:var(--rm-slate); text-transform:uppercase;}
.mk-badge-red{ background:var(--rm-red-tint); border-color:var(--rm-red); color:var(--rm-red-dark); }
.mk-badge-green{ background:var(--rm-green-tint); border-color:var(--rm-green); color:var(--rm-green); }

.mk-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--rm-line); padding:0 28px; background:var(--rm-white-2); }
.mk-tabs a{ padding:12px 16px; font-size:.84rem; font-weight:600; color:var(--rm-slate); border-bottom:2px solid transparent; }
.mk-tabs a.active{ color:var(--rm-red); border-color:var(--rm-red); }

.mk-two-col{ display:grid; grid-template-columns:280px 1fr; gap:26px; padding:28px; align-items:start; }
.mk-two-col > *{ min-width:0; }
.mk-side-card{ border:1px solid var(--rm-line); }
.mk-side-card h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; background:var(--rm-white-2); padding:10px 14px; border-bottom:1px solid var(--rm-line);}
/* .row here collides with Bootstrap's grid .row (negative margins + wrapping + 100%-width children) -
   these overrides neutralize that so label/value pairs stay on one line within the card's own border. */
.mk-side-card .row{ display:flex; flex-wrap:nowrap; justify-content:space-between; margin:0; padding:9px 14px; font-size:.84rem; border-bottom:1px solid var(--rm-line); gap:10px;}
.mk-side-card .row:last-child{ border-bottom:none; }
.mk-side-card .row > span{ width:auto; max-width:none; min-width:0; padding:0; flex:0 1 auto; overflow-wrap:break-word; }
.mk-side-card .row .l{ color:var(--rm-slate); }

.mk-filter-bar{ display:flex; gap:10px; align-items:flex-end; padding:20px 28px; background:var(--rm-white-2); border-bottom:1px solid var(--rm-line); flex-wrap:wrap;}
.mk-field{ display:flex; flex-direction:column; gap:5px; }
.mk-field label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rm-slate); }
.mk-field select, .mk-field input{ border:1px solid var(--rm-line); padding:8px 10px; font-family:var(--font-body); font-size:.86rem; background:#fff; min-width:170px; }

.driver-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 28px; }
.driver-card{ border:1px solid var(--rm-line); display:flex; gap:12px; padding:13px; align-items:center; }
.driver-card .num{ width:44px; height:44px; background:var(--rm-asphalt); color:#fff; font-family:var(--font-mono); font-weight:600; font-size:.94rem; display:flex; align-items:center; justify-content:center; flex:none;}
.driver-card .name{ font-weight:700; font-size:.9rem; }
.driver-card .meta{ font-size:.76rem; color:var(--rm-slate); }

.sched-group{ padding:24px 28px 6px; }
.sched-group h3{ font-size:1.05rem; font-weight:700; margin-bottom:12px; }

.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tool-card{ border:1px solid var(--rm-line); padding:16px; display:flex; gap:12px; }
.tool-card .ic{ width:32px;height:32px; border:1px solid var(--rm-red); color:var(--rm-red); display:flex; align-items:center; justify-content:center; flex:none;}
.tool-card .ic svg{ width:16px;height:16px; }
.tool-card .t{ font-weight:700; font-size:.88rem; }
.tool-card .d{ font-size:.76rem; color:var(--rm-slate); margin-top:3px; }

.calc-panel{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:26px 28px; }
.calc-box{ border:1px solid var(--rm-line); }
.calc-box h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; background:var(--rm-white-2); padding:10px 14px; border-bottom:1px solid var(--rm-line);}
.calc-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-bottom:1px solid var(--rm-line); }
.calc-row:last-child{ border-bottom:none; }
.calc-row .l{ font-size:.82rem; color:var(--rm-slate); }
.calc-row .v{ font-family:var(--font-mono); font-weight:600; font-size:1rem; }
.calc-row .v.lg{ font-size:1.35rem; color:var(--rm-red); }

.login-split{ display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
.login-side{ background:var(--rm-asphalt); color:var(--rm-white); padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.login-side .rm-kicker{ color:#F0A3AE; }
.login-side h2{ font-family:var(--font-display); text-transform:uppercase; font-size:2rem; }
.login-side p{ color:#D9CFC8; font-size:.9rem; max-width:34ch; }
.login-form{ padding:40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.login-form label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rm-slate); display:block; margin-bottom:5px;}
.login-form input[type=email], .login-form input[type=password]{ width:100%; border:1px solid var(--rm-line); padding:11px 12px; font-family:var(--font-body); font-size:.92rem; }
.login-form .row-between{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; }

@media (max-width: 860px){
  .mk-action-grid, .mk-card-grid, .tool-grid, .driver-grid{ grid-template-columns:repeat(2,1fr); }
  .mk-footer .cols{ grid-template-columns:1fr 1fr; }
  .mk-two-col{ grid-template-columns:1fr; }
  .calc-panel{ grid-template-columns:1fr; }
  .login-split{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .mk-action-grid, .mk-card-grid, .tool-grid, .driver-grid, .mk-stat-strip{ grid-template-columns:1fr; }
  .mk-stat{ border-left:none; border-top:1px solid var(--rm-line); }
  .mk-stat:first-child{ border-top:none; }
  /* .mk-section's own 28px padding PLUS the Bootstrap .container's 12px gutter it sits inside ate
     ~80px total on a 375px phone. Cancel the container's gutter (negative margin) AND drop .mk-
     section's own horizontal padding to zero - not just shrink it - so content/cards/tables inside
     (not just the section's own invisible box) actually reach the true screen edge. Callers that want
     text not to touch the literal edge (see event_interactive.html.twig's header) add their own small
     padding on just that text, rather than .mk-section forcing it on every child including full-width
     tables/tab bars that shouldn't have it. */
  .mk-section{ margin:-24px -12px 0; padding:16px 0; }
  .mk-tabs-bleed{ margin:16px 0; }
  /* .mk-section has zero horizontal padding now (above) so full-width children (tables/tab bars)
     reach the true edge - text that still wants a readable inset (page titles/intro paragraphs)
     opts back in with this instead of .mk-section forcing it on everything. */
  .mk-section-header{ padding:0 14px; }
}

/* =========================================================
   SHARED PIECES FROM design/prototype.html (Phase 1)
   Tables, flash messages, status chips, empty states, page header.
   ========================================================= */

/* ---------- tables (prototype .tbl): small caps header on a warm band, roomy rows ---------- */
.table{
  --bs-table-bg:#fff; --bs-table-color:var(--rm-ink); --bs-table-border-color:var(--rm-line);
  --bs-table-striped-bg:var(--rm-white); --bs-table-hover-bg:var(--rm-white); --bs-table-active-bg:var(--rm-white-2);
  font-size:.88rem;
}
.table > :not(caption) > * > *{ padding:10px 12px; }
.table-sm > :not(caption) > * > *{ padding:6px 8px; }
.table > tbody{ vertical-align:middle; }
.table > thead{ --bs-table-bg:var(--rm-white-2); --bs-table-color:var(--rm-slate); }
.table > thead > tr > th, .table > thead > tr > td{
  font-family:var(--font-mono); font-size:.64rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; border-bottom-color:var(--rm-line);
}
.rm-table-wrap{ overflow-x:auto; border:1px solid var(--rm-line); background:#fff; }
.rm-table-wrap > .table{ margin-bottom:0; }
.table .rm-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* ---------- flash messages: toasts (templates/_partials/flash_toastr) in the flag colours, readable
   text on each (the old light green/yellow/cyan with white text were 1.5-2.3:1) ---------- */
.skalert-toast{ border-radius:2px; font-family:var(--font-body); box-shadow:0 12px 30px -14px rgba(23,18,15,.55); }
.colored-toast.skalert-icon-success{ background-color:var(--rm-green) !important; }
.colored-toast.skalert-icon-error{ background-color:var(--rm-flag-red) !important; }
.colored-toast.skalert-icon-warning{ background-color:var(--rm-yellow) !important; }
.colored-toast.skalert-icon-info, .colored-toast.skalert-icon-question{ background-color:var(--rm-blue) !important; }
.colored-toast .skalert-icon{ background:rgba(255,255,255,.22); color:#fff; }
.colored-toast.skalert-icon-warning .skalert-title,
.colored-toast.skalert-icon-warning .skalert-text,
.colored-toast.skalert-icon-warning .skalert-close{ color:var(--rm-asphalt); }
.colored-toast.skalert-icon-warning .skalert-icon{ background:rgba(23,18,15,.14); color:var(--rm-asphalt); }
.colored-toast.skalert-icon-warning .skalert-timer-bar{ background:rgba(23,18,15,.35); }
/* in-page messages (Bootstrap .alert) pick up the flag tints from the :root variables above */
.alert{ --bs-alert-border-radius:2px; --bs-alert-padding-x:14px; --bs-alert-padding-y:12px; }

/* ---------- status chips (@Racemanager/_macros/ui.html.twig chip/status) ---------- */
.rm-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px; line-height:1.2; white-space:nowrap;
  font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--rm-white-2); color:var(--rm-slate);
}
.rm-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.rm-chip-green{ background:var(--rm-green-tint); color:var(--rm-green-ink); }
.rm-chip-yellow{ background:var(--rm-yellow-tint); color:var(--rm-yellow-ink); }
.rm-chip-red{ background:var(--rm-flag-red-tint); color:var(--rm-flag-red); }
.rm-chip-blue{ background:var(--rm-blue-tint); color:var(--rm-blue); }
.rm-chip-grey{ background:var(--rm-white-2); color:var(--rm-slate); }
.rm-chip-check{ background:#fff; color:var(--rm-ink); border:1px solid var(--rm-ink); padding:3px 7px; }
.rm-chip-check::before{ border-radius:0; background:repeating-conic-gradient(var(--rm-ink) 0% 25%, #fff 0% 50%) 0 0 / 4px 4px; }
.rm-chip-solid-green{ background:var(--rm-green); color:#fff; }

/* ---------- empty list or panel (ui.empty_state) ---------- */
.rm-empty{ background:#fff; border:1px solid var(--rm-line); padding:16px; display:grid; gap:10px; justify-items:start; }
.rm-empty p{ margin:0; max-width:60ch; }

/* ---------- page building blocks (prototype .wrap/.card/.list/.li/.datebox/.seg/.tabs/.pos/.carno) ---------- */
.rm-page{ display:grid; gap:18px; padding-block:16px 36px; }
.rm-stack{ display:grid; gap:10px; }
.rm-stack-lg{ display:grid; gap:18px; }
.rm-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rm-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.rm-h2{ font-size:1.12rem; font-weight:700; line-height:1.2; margin:0; }
.rm-h3{ font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--rm-slate); margin:0; }
.rm-muted{ color:var(--rm-slate); }
.rm-small{ font-size:.86rem; }
.rm-card{ background:#fff; border:1px solid var(--rm-line); padding:14px; display:grid; gap:10px; align-content:start; color:var(--rm-ink); min-width:0; }
.rm-card p{ margin:0; }
a.rm-card:hover{ border-color:var(--rm-slate-2); color:var(--rm-ink); }
.rm-card.is-dark{ background:var(--rm-asphalt); color:var(--rm-white); border-color:var(--rm-asphalt); }
.rm-card.is-dark .rm-muted{ color:#CFC6BF; }
.rm-card.is-dark .rm-h3{ color:#F0A3AE; }
.rm-card.is-tint{ background:var(--rm-red-tint); border-color:#F2C2C9; }
.rm-card.is-note{ background:var(--rm-yellow-tint); border-color:#F0DE9A; }
.rm-card.is-flush{ padding:0; overflow:hidden; }
.rm-card-body{ padding:14px; display:grid; gap:4px; }
.rm-cols{ display:grid; gap:12px; }
.rm-cols.m2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.rm-split{ display:grid; gap:18px; align-items:start; }
.rm-list{ background:#fff; border:1px solid var(--rm-line); }
.rm-li{ display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:56px; color:var(--rm-ink); }
.rm-li + .rm-li{ border-top:1px solid var(--rm-line); }
a.rm-li:hover{ background:var(--rm-white); color:var(--rm-ink); }
.rm-li .grow{ flex:1; min-width:0; }
.rm-li .t{ font-weight:700; display:block; }
.rm-li .s{ font-size:.82rem; color:var(--rm-slate); display:block; }
.rm-li .grow .rm-chip{ margin-top:4px; }
.rm-chev{ color:var(--rm-slate-2); font-size:1.3rem; line-height:1; }
.rm-datebox{ font-family:var(--font-mono); text-align:center; width:48px; flex:none; }
.rm-datebox .d{ display:block; font-size:1.35rem; font-weight:600; line-height:1; }
.rm-datebox .m{ display:block; font-size:.62rem; letter-spacing:.08em; color:var(--rm-slate); margin-top:2px; text-transform:uppercase; }
.rm-seg{ display:inline-flex; flex-wrap:wrap; border:1px solid var(--rm-asphalt); background:#fff; max-width:100%; }
.rm-seg > a, .rm-seg > button{ border:0; background:none; padding:0 13px; min-height:44px; display:inline-flex; align-items:center; font-weight:600; font-size:.88rem; color:var(--rm-ink); }
.rm-seg > * + *{ border-left:1px solid var(--rm-asphalt); }
.rm-seg > .on, .rm-seg > .active{ background:var(--rm-asphalt); color:#fff; }
.rm-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--rm-line); overflow-x:auto; }
.rm-tabs > a, .rm-tabs > button{ background:none; border:0; border-bottom:3px solid transparent; padding:0 14px; min-height:46px; display:inline-flex; align-items:center; font-weight:600; font-size:.92rem; color:var(--rm-slate); white-space:nowrap; }
.rm-tabs > .on, .rm-tabs > .active{ color:var(--rm-red); border-bottom-color:var(--rm-red); }
.rm-pos{ display:inline-grid; place-items:center; min-width:30px; height:26px; padding:0 6px; font-family:var(--font-mono); font-weight:600; font-size:.8rem; background:var(--rm-white-2); color:var(--rm-ink); }
.rm-pos.p1{ background:var(--rm-p1); }
.rm-pos.p2{ background:var(--rm-p2); }
.rm-pos.p3{ background:var(--rm-p3); }
.rm-carno{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 4px; background:var(--rm-asphalt); color:#fff; font-family:var(--font-mono); font-weight:600; font-size:.95rem; flex:none; }
.rm-carno.sm{ min-width:28px; height:26px; font-size:.78rem; }
.rm-carno.xl{ min-width:84px; height:84px; font-size:2.2rem; background:var(--rm-red); }
.rm-stat{ background:#fff; border:1px solid var(--rm-line); padding:14px; display:grid; gap:2px; align-content:start; color:var(--rm-ink); }
.rm-stat b{ font-family:var(--font-mono); font-size:1.55rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.rm-stat span{ font-size:.8rem; color:var(--rm-slate); }
.rm-img{ display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-size:1.6rem; letter-spacing:.05em; min-height:120px; background:linear-gradient(135deg, var(--rm-red), #6b0d1c) center / cover no-repeat; }
.rm-logo{ display:grid; place-items:center; border:1px solid var(--rm-line); background:#fff; min-height:56px; padding:6px 10px; font-weight:700; font-size:.82rem; text-align:center; color:var(--rm-slate); }
.rm-search{ padding-left:40px !important; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E645E' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center / 18px; }
.rm-pits{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.rm-pit{ border:1px solid var(--rm-line); background:#fff; min-height:54px; display:grid; align-content:center; justify-items:center; gap:2px; font-family:var(--font-mono); font-size:.64rem; color:var(--rm-slate); }
.rm-pit b{ font-size:.9rem; color:var(--rm-ink); }
.rm-pit.taken{ background:var(--rm-asphalt); color:var(--rm-slate-2); border-color:var(--rm-asphalt); }
.rm-pit.taken b{ color:#fff; }
.rm-pit.match{ outline:3px solid var(--rm-red); outline-offset:-3px; }
.rm-doc{ max-width:68ch; display:grid; gap:14px; }
.rm-doc h2{ font-size:1.1rem; font-weight:700; margin:8px 0 0; scroll-margin-top:16px; }
.rm-doc p, .rm-doc ul{ margin:0; }
.rm-doc section{ display:grid; gap:10px; }
.rm-doc ul{ padding-left:1.2em; display:grid; gap:4px; }
.rm-policy-toc .rm-li{ min-height:44px; padding-block:8px; }
/* calculator results (public/tools/_layout.html.twig): read-only result fields read as big numbers on the dark panel */
.rm-calc-results .form-label{ color:#CFC6BF; }
.rm-calc-results .form-text{ color:#D9CFC8; }
.rm-calc-results .form-control[readonly], .rm-calc-results .form-select[disabled]{
  background:var(--rm-asphalt-2); border-color:var(--rm-asphalt-3); color:#fff;
  font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums;
}
.rm-calc-results .form-control-lg[readonly]{ font-size:1.5rem; }
.rm-calc-results .table{ --bs-table-bg:var(--rm-asphalt-2); --bs-table-color:#fff; --bs-table-border-color:var(--rm-asphalt-3); --bs-table-striped-bg:var(--rm-asphalt-3); --bs-table-hover-bg:var(--rm-asphalt-3); }
.rm-calc-results .table > thead{ --bs-table-bg:var(--rm-asphalt-3); --bs-table-color:#CFC6BF; }
.rm-calc-results hr{ border-color:rgba(251,249,245,.3); }
.rm-calc-notes p{ margin:0 0 8px; }
.rm-calc-notes p:last-child{ margin-bottom:0; }
.mk-hero .rm-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.mk-hero.is-home > .container{ display:grid; gap:10px; justify-content:stretch; padding-inline:16px; }
.mk-hero.is-home h1{ font-size:2.1rem; margin:0; }
.mk-hero.is-home .rm-kicker{ margin:0; }
@media (max-width:767.98px){
  .rm-hide-phone{ display:none !important; }
}
@media (min-width:768px){
  .rm-page{ gap:24px; padding-block:28px 48px; }
  .rm-cols.c2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rm-cols.c3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .rm-cols.c4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .rm-split{ grid-template-columns:minmax(0,1fr) 330px; }
  .rm-pits{ grid-template-columns:repeat(10, 1fr); }
  .rm-hide-desk{ display:none !important; }
  .mk-hero.is-home > .container{ padding-inline:28px; }
  .mk-hero.is-home h1{ font-size:3rem; }
}

/* ---------- page header (@Racemanager/_partials/_page_header.html.twig) ---------- */
.rm-back{ display:inline-flex; align-items:center; min-height:44px; font-size:.86rem; font-weight:600; }
.rm-page-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.rm-page-head-text{ min-width:0; }
.rm-page-head{ margin-bottom:18px; }
.rm-page-head h1{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.75rem; line-height:1.05; margin:0; }
.rm-page-head .rm-kicker{ margin:0 0 4px; }
.rm-page-head .rm-page-sub{ color:var(--rm-slate); margin:6px 0 0; }
/* public pages: the slim dark band */
.mk-hero.is-slim{ padding:20px 0; }
.mk-hero.is-slim > .container{ display:block; padding-inline:16px; }
.mk-hero.is-slim .rm-page-head-row{ display:grid; gap:10px; justify-content:stretch; }
.mk-hero.is-slim h1{ font-size:1.7rem; margin:0; }
.mk-hero .rm-kicker{ font-size:.7rem; color:#F0A3AE; margin:0 0 8px; }
.mk-hero .rm-page-sub{ margin-top:8px; }
.mk-hero .rm-back{ color:#F0A3AE; }
@media (min-width:768px){
  .rm-back{ min-height:0; margin-bottom:6px; }
  .rm-page-head h1{ font-size:2.2rem; }
  .mk-hero.is-slim{ padding:30px 0; }
  .mk-hero.is-slim > .container{ padding-inline:28px; }
  .mk-hero.is-slim h1{ font-size:2.3rem; }
}