/* Race Direct — site styling built on tokens.css + accent.css (loaded before this). */

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip is a last-resort guard so a stray wide element can't cause
   page-level horizontal scroll — it is NOT permission to overflow (fix the element). */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--rd-bg);
  color:var(--rd-text);
  font-family:var(--rd-font-sans);
  font-weight:var(--rd-w-light);
  line-height:var(--rd-leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word; /* inherited: long tokens/URLs wrap instead of blowing out layout */
}

/* Media and wide content never exceed their container. */
img,video,canvas{max-width:100%;height:auto}
pre{max-width:100%;overflow-x:auto}
::selection{background:var(--rd-accent);color:var(--rd-on-accent)}

a{color:inherit;text-decoration:none}
a.rd-link{color:var(--rd-text);border-bottom:1px solid transparent;transition:border-color .15s var(--rd-ease)}
a.rd-link:hover{border-color:currentColor}

/* The brand spectrum device — a thin gradient rule. The full rainbow is
   RaceDIRECT's masterbrand device: inside a product theme the same element
   renders as that product's accent instead (module-colour separator). */
.rd-spectrum-bar{height:3px;width:100%;background:var(--rd-spectrum-lin);border:0}
.theme-vault .rd-spectrum-bar,.theme-rp .rd-spectrum-bar,
.theme-smart .rd-spectrum-bar,.theme-simple .rd-spectrum-bar{background:var(--rd-accent)}

/* Typography helpers */
.rd-display{font-family:var(--rd-font-display);font-weight:var(--rd-w-extrabold);text-transform:uppercase;letter-spacing:var(--rd-track-display);line-height:var(--rd-leading-tight)}
.rd-wordmark{font-family:var(--rd-font-display);font-weight:var(--rd-w-bold);text-transform:uppercase;letter-spacing:var(--rd-track-wordmark)}
.rd-label{font-family:var(--rd-font-mono);text-transform:uppercase;letter-spacing:var(--rd-track-label);font-size:var(--rd-text-label);color:var(--rd-text-muted)}
.rd-muted{color:var(--rd-text-muted)}
.rd-faint{color:var(--rd-text-faint)}

/* Surfaces */
.rd-surface{background:var(--rd-surface);border:1px solid var(--rd-border);border-radius:var(--rd-radius)}
.rd-surface-raised{background:var(--rd-surface-raised);border:1px solid var(--rd-border);border-radius:var(--rd-radius)}

/* Forms */
.rd-input{
  width:100%;background:var(--rd-carbon);color:var(--rd-text);
  border:1px solid var(--rd-border);border-radius:var(--rd-radius-sm);
  padding:.6rem .75rem;font:inherit;font-weight:var(--rd-w-regular);
  outline:none;transition:border-color .15s var(--rd-ease),box-shadow .15s var(--rd-ease);
}
.rd-input::placeholder{color:var(--rd-text-faint)}
.rd-input:focus{border-color:var(--rd-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--rd-accent) 25%,transparent)}

/* Buttons */
.rd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:var(--rd-radius-sm);cursor:pointer;
  font-family:var(--rd-font-mono);font-size:var(--rd-text-small);font-weight:var(--rd-w-medium);
  text-transform:uppercase;letter-spacing:var(--rd-track-label);
  padding:.6rem 1rem;transition:transform .12s var(--rd-ease),background .15s var(--rd-ease),border-color .15s var(--rd-ease)}
.rd-btn:active{transform:translateY(1px)}
.rd-btn-accent{background:var(--rd-accent);color:var(--rd-on-accent)}
.rd-btn-accent:hover{background:var(--rd-accent-deep)}
.rd-btn-ghost{background:transparent;color:var(--rd-text);border-color:var(--rd-border)}
.rd-btn-ghost:hover{border-color:var(--rd-text-muted)}

/* Logo sizing */
.rd-logo-lockup{height:26px;width:auto;display:block}
.rd-logo-lockup-lg{height:40px;width:auto;display:block}
.rd-logo-mark{height:28px;width:auto;display:block}

/* Accent text/dot for product theming (wrap area in .theme-smart/.theme-vault/.theme-rp) */
.rd-accent-text{color:var(--rd-accent)}
.rd-accent-bar{height:3px;width:100%;background:var(--rd-accent);border-radius:var(--rd-radius-pill)}
.rd-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--rd-accent);display:inline-block}

/* Base button reset — preflight is disabled, so strip native (light) button chrome. */
button{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer}

/* ============================================================================
   Unified suite header  —  [service] [menu]  …  [team] [profile ▾]
   Shared across race.direct + services (link this stylesheet or copy the block).
   ============================================================================ */
.rd-header{background:var(--rd-bg);position:sticky;top:0;z-index:40}
/* Suite content width — 72rem (Tailwind max-w-6xl) with 1rem gutters.
   Narrower page tiers compose with it: .rd-container.rd-container-md / -sm. */
.rd-container{width:100%;max-width:72rem;margin-inline:auto;padding-inline:1rem}
.rd-container-md{max-width:48rem}  /* prose, settings, detail pages */
.rd-container-sm{max-width:32rem}  /* auth, simple forms (matches .rd-dialog) */

/* Overflow utilities */
.rd-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* flex parents need min-width:0 */
.rd-break{overflow-wrap:anywhere} /* long IDs/URLs/tokens in tight cells */
.rd-scroll-x{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* wide tables/data scroll here, never the page */
.rd-header-inner{max-width:72rem;margin:0 auto;padding:0 1rem;height:56px;display:flex;align-items:center;gap:1.25rem}
.rd-header .rd-brand{display:inline-flex;align-items:center;flex:none}
.rd-header .rd-brand img,.rd-header .rd-brand svg{height:26px;width:auto;display:block}
.rd-nav{display:flex;align-items:center;gap:1.1rem}
.rd-nav a{font-family:var(--rd-font-mono);text-transform:uppercase;letter-spacing:var(--rd-track-label);font-size:var(--rd-text-label);color:var(--rd-text-muted);white-space:nowrap}
.rd-nav a:hover,.rd-nav a[aria-current="page"]{color:var(--rd-text)}
.rd-header .rd-spacer{flex:1 1 auto}

/* Nav sub-menu group — a nav item that groups routes. Desktop: click-to-open
   dropdown card; ≤768px: accordion rows inside the nav panel. */
.rd-nav-group{position:relative;display:inline-flex;align-items:center}
.rd-nav-sub-toggle{
  display:inline-flex;align-items:center;gap:.45rem;padding:0;
  font-family:var(--rd-font-mono);text-transform:uppercase;letter-spacing:var(--rd-track-label);
  font-size:var(--rd-text-label);color:var(--rd-text-muted);white-space:nowrap}
.rd-nav-sub-toggle::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .15s var(--rd-ease)}
.rd-nav-sub-toggle:hover,.rd-nav-group.is-open>.rd-nav-sub-toggle{color:var(--rd-text)}
.rd-nav-group.is-open>.rd-nav-sub-toggle::after{transform:translateY(25%) rotate(-135deg)}
.rd-submenu{display:none;position:absolute;left:-.9rem;top:calc(100% + 14px);min-width:180px;padding:.25rem 0;background:var(--rd-surface-raised);border:1px solid var(--rd-border);border-radius:var(--rd-radius);overflow:hidden;z-index:50;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.rd-nav-group.is-open>.rd-submenu{display:block}
.rd-submenu a{display:block;padding:.6rem .9rem}
.rd-submenu a:hover{background:var(--rd-steel)}

.rd-teamchip{display:inline-flex;align-items:center;gap:.5rem;color:var(--rd-text-muted);text-decoration:none;max-width:16rem;min-width:0}
.rd-teamchip:hover{color:var(--rd-text)}
.rd-teamchip img{height:34px;width:auto;max-width:180px;object-fit:contain;border-radius:4px;display:block}
.rd-teamchip .rd-teamchip-name{font-size:var(--rd-text-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rd-profile{position:relative;flex:none}
.rd-avatar{width:34px;height:34px;border-radius:var(--rd-radius-pill);overflow:hidden;border:1px solid var(--rd-border);background:var(--rd-carbon);display:inline-flex;align-items:center;justify-content:center;padding:0}
.rd-avatar:hover{border-color:var(--rd-text-muted)}
.rd-avatar img{width:100%;height:100%;object-fit:cover}
.rd-avatar .rd-avatar-initial{font-family:var(--rd-font-display);font-weight:var(--rd-w-bold);color:var(--rd-text);font-size:1rem;line-height:1}
.rd-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;max-width:calc(100vw - 2rem);background:var(--rd-surface-raised);border:1px solid var(--rd-border);border-radius:var(--rd-radius);overflow:hidden;z-index:50;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.rd-menu[hidden]{display:none}
.rd-menu-head{padding:.7rem .9rem;border-bottom:1px solid var(--rd-border)}
.rd-menu-head .rd-menu-name{color:var(--rd-text);font-size:var(--rd-text-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-menu-head .rd-menu-sub{color:var(--rd-text-faint);font-size:var(--rd-text-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-menu a{display:block;padding:.6rem .9rem;font-size:var(--rd-text-small);color:var(--rd-text);text-decoration:none}
.rd-menu a:hover{background:var(--rd-steel)}
/* Page sub-menu (secondary nav) — a horizontal tab row under the header for
   a page/section with several views (STYLE_GUIDE.md §2; RaceSMART's device
   tabs are the reference). Mark the active item with aria-current="page"
   (links) or .is-active (buttons). */
.rd-subnav{display:flex;gap:.2rem;border-bottom:1px solid var(--rd-border);margin-bottom:1rem;flex-wrap:wrap}
.rd-subnav a,.rd-subnav button{
  background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:.55rem .95rem;cursor:pointer;color:var(--rd-text-muted);text-decoration:none;
  font-family:var(--rd-font-display);text-transform:uppercase;letter-spacing:.06em;
  font-size:.95rem;font-weight:var(--rd-w-bold)}
.rd-subnav a:hover,.rd-subnav button:hover{color:var(--rd-text)}
.rd-subnav a[aria-current="page"],.rd-subnav .is-active{
  color:var(--rd-text);border-bottom-color:var(--rd-accent)}

/* Team switcher: the team chip becomes a menu anchor; menu items may be form
   buttons (POST team-select), styled to match the anchor items. */
.rd-teammenu{position:relative;flex:none}
.rd-teammenu .rd-teamchip{cursor:pointer;background:none;border:0;padding:0}
.rd-menu form{margin:0}
.rd-menu .rd-menu-item{display:block;width:100%;text-align:left;padding:.6rem .9rem;font-size:var(--rd-text-small);color:var(--rd-text);background:none;border:0;cursor:pointer}
.rd-menu .rd-menu-item:hover{background:var(--rd-steel)}
.rd-menu .rd-menu-item.is-active{color:var(--rd-accent,#22E0E6)}
.rd-menu .rd-menu-item.is-active::after{content:" ✓"}

/* Mobile menu toggle (hamburger) — hidden on desktop, shown ≤768px. Renders far LEFT
   (before the logo) via order:-1, wherever it sits in the DOM. */
.rd-menu-toggle{display:none;width:40px;height:40px;flex:none;align-items:center;justify-content:center;margin-left:-.5rem;border-radius:var(--rd-radius-sm);color:var(--rd-text-muted)}
.rd-menu-toggle:hover,.rd-menu-toggle[aria-expanded="true"]{color:var(--rd-text)}
.rd-menu-toggle svg{width:22px;height:22px;display:block}

/* ── Mobile rendering rules (see STYLE_GUIDE.md §3) ─────────────────────────
   ≤768px: nav collapses behind the hamburger into a full-width panel under the
   spectrum bar; team chip + profile bubble stay in the header (never inside the
   hamburger). ≤480px: compact — logo 22px, team chip capped tighter. */
@media (max-width:768px){
  .rd-header-inner{gap:.75rem}
  .rd-menu-toggle{display:inline-flex;order:-1}
  .rd-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--rd-surface-raised);border-bottom:1px solid var(--rd-border);
    padding:.25rem 0;box-shadow:0 12px 32px rgba(0,0,0,.45);
  }
  .rd-nav.is-open{display:flex}
  .rd-nav a{padding:.8rem 1rem;font-size:var(--rd-text-small)}
  .rd-nav a:hover,.rd-nav a[aria-current="page"]{background:var(--rd-steel);color:var(--rd-text)}
  /* Sub-menu → accordion: full-width toggle row (caret far right), children
     indented on the darker carbon surface. Opening one keeps the panel open. */
  .rd-nav-group{display:block;position:static}
  .rd-nav-sub-toggle{display:flex;width:100%;justify-content:space-between;padding:.8rem 1rem;font-size:var(--rd-text-small)}
  .rd-nav-group.is-open>.rd-nav-sub-toggle{background:var(--rd-steel)}
  .rd-submenu{position:static;min-width:0;padding:0;background:var(--rd-carbon);border:0;border-radius:0;box-shadow:none}
  .rd-submenu a{padding:.7rem 1rem .7rem 2rem}
  .rd-teamchip{max-width:10rem}
  .rd-teamchip img{height:28px;max-width:120px}
  /* Profile dropdown pins to the viewport (1rem gutters) under the spectrum bar,
     so long names/emails can't push it off-screen. Header is sticky at top:0. */
  .rd-menu{position:fixed;left:1rem;right:1rem;top:calc(56px + 3px + 8px);min-width:0;max-width:none}
  /* Extend the 34px avatar's tap area to ~42px without changing its visual size. */
  .rd-avatar{overflow:visible;position:relative}
  .rd-avatar::before{content:"";position:absolute;inset:-4px;border-radius:var(--rd-radius-pill)}
  .rd-avatar img,.rd-avatar .rd-avatar-initial{border-radius:var(--rd-radius-pill)}
}
@media (max-width:480px){
  .rd-header .rd-brand img,.rd-header .rd-brand svg{height:22px}
  .rd-teamchip{max-width:7rem}
  .rd-teamchip img{height:26px;max-width:96px}
}

/* Badge — dark pill for status/labels on dark surfaces (buttons or spans). */
.rd-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--rd-graphite-2);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius-pill);padding:.18rem .6rem;
  font-family:var(--rd-font-mono);font-size:var(--rd-text-label);
  text-transform:uppercase;letter-spacing:var(--rd-track-label);color:var(--rd-text-muted);
  line-height:1.4;white-space:nowrap;
}
button.rd-badge:hover{border-color:var(--rd-text-muted)}
.rd-badge-ok{color:#C6FF3D;border-color:color-mix(in srgb,#C6FF3D 40%,var(--rd-border))}
.rd-badge-alert{color:var(--rd-hot);border-color:color-mix(in srgb,var(--rd-hot) 45%,var(--rd-border))}

/* Modal dialog (native <dialog>) */
dialog.rd-dialog{background:var(--rd-surface);color:var(--rd-text);border:1px solid var(--rd-border);border-radius:var(--rd-radius);padding:0;max-width:32rem;width:calc(100% - 2rem);overflow:hidden}
dialog.rd-dialog::backdrop{background:rgba(0,0,0,.6)}

/* Alerts */
.rd-alert{border:1px solid color-mix(in srgb,var(--rd-hot) 50%,transparent);background:color-mix(in srgb,var(--rd-hot) 12%,transparent);color:var(--rd-chalk);border-radius:var(--rd-radius-sm);padding:.6rem .9rem;font-size:var(--rd-text-small)}

/* ============================================================================
   Notifications — bell + drawer + toasts (driven by /static/rd-notify.js).
   Ships in the brand kit so every *.race.direct product gets it for free.
   ========================================================================== */
.rd-bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--rd-radius-pill);color:var(--rd-text-muted);
  transition:color .15s var(--rd-ease),background .15s var(--rd-ease)}
.rd-bell:hover{color:var(--rd-text);background:var(--rd-steel)}
.rd-bell svg{width:19px;height:19px}
.rd-bell-badge{
  position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  background:var(--rd-alert);color:#fff;border-radius:var(--rd-radius-pill);
  font-family:var(--rd-font-mono);font-size:10px;font-weight:var(--rd-w-semibold);
  line-height:16px;text-align:center}

/* App launcher — opened by clicking the brand logo (rd-notify.js drop-in).
   Toggles via the hidden attribute; the [hidden] guard must beat display. */
.rd-launcher[hidden]{display:none}
.rd-launcher{
  position:fixed;top:calc(56px + 3px + 8px);left:1rem;z-index:60;
  width:15rem;max-width:calc(100vw - 2rem);
  background:var(--rd-surface-raised);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.rd-launcher-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rd-border)}
.rd-launcher-tile{
  display:flex;align-items:center;gap:.6rem;padding:.8rem .9rem;min-width:0;
  background:var(--rd-surface-raised);color:var(--rd-text);text-decoration:none}
.rd-launcher-tile:hover{background:var(--rd-steel)}
.rd-launcher-tile.is-current{box-shadow:inset 3px 0 0 var(--rd-accent,#22E0E6)}
.rd-launcher-tile img{width:26px;height:26px;object-fit:contain;flex:none}
.rd-launcher-fallback{
  width:26px;height:26px;flex:none;border-radius:6px;background:var(--rd-carbon);
  border:1px solid var(--rd-border);display:flex;align-items:center;justify-content:center;
  font-family:var(--rd-font-mono);font-size:12px;color:var(--rd-text-faint)}
.rd-launcher-name{
  font-size:var(--rd-text-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:768px){ .rd-launcher{left:.5rem;right:.5rem;width:auto} }

/* The drawer toggles via the hidden attribute — the display:flex below would
   otherwise override it and leave the (empty) drawer shell always visible. */
.rd-notify-drawer[hidden]{display:none}
.rd-notify-drawer{
  position:fixed;top:calc(56px + 3px + 8px);right:1rem;z-index:60;
  width:24rem;max-width:calc(100vw - 2rem);max-height:min(70vh,34rem);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--rd-surface-raised);border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.rd-notify-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .9rem;border-bottom:1px solid var(--rd-border)}
.rd-notify-actions{display:flex;gap:.9rem}
.rd-notify-actions button{
  font-family:var(--rd-font-mono);font-size:var(--rd-text-label);
  text-transform:uppercase;letter-spacing:var(--rd-track-label);
  color:var(--rd-text-muted)}
.rd-notify-actions button:hover{color:var(--rd-text)}
.rd-notify-list{overflow-y:auto}
.rd-notify-empty{padding:2.2rem 1rem;text-align:center;color:var(--rd-text-faint);font-size:var(--rd-text-small)}
.rd-notify-item{display:flex;align-items:flex-start;border-bottom:1px solid var(--rd-border)}
.rd-notify-item:last-child{border-bottom:0}
.rd-notify-item.is-unread{background:color-mix(in srgb,var(--rd-accent,#22E0E6) 7%,transparent)}
.rd-notify-item.is-unread .rd-notify-item-title::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:.45rem;
  border-radius:50%;background:var(--rd-accent,#22E0E6);vertical-align:2px}
.rd-notify-item-main{flex:1;min-width:0;display:block;padding:.65rem .9rem;cursor:pointer}
.rd-notify-item-main:hover{background:color-mix(in srgb,var(--rd-steel) 45%,transparent)}
.rd-notify-item-title{font-size:var(--rd-text-small);font-weight:var(--rd-w-medium);color:var(--rd-text)}
.rd-notify-item-body{
  font-size:var(--rd-text-small);color:var(--rd-text-muted);margin-top:.1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rd-notify-item-meta{font-family:var(--rd-font-mono);font-size:var(--rd-text-label);letter-spacing:.06em;color:var(--rd-text-faint);margin-top:.25rem;text-transform:uppercase}
.rd-notify-item-clear{
  padding:.55rem .7rem;color:var(--rd-text-faint);font-size:1rem;line-height:1;flex:none}
.rd-notify-item-clear:hover{color:var(--rd-text)}

.rd-toast-host{
  position:fixed;bottom:1rem;right:1rem;z-index:70;
  display:flex;flex-direction:column;gap:.5rem;max-width:22rem}
.rd-toast{
  display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem;
  background:var(--rd-surface-raised);border:1px solid var(--rd-border);
  border-left:3px solid var(--rd-accent,#22E0E6);border-radius:var(--rd-radius-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.4);animation:rd-toast-in .25s var(--rd-ease)}
.rd-toast-linked{cursor:pointer}
.rd-toast-success{border-left-color:#C6FF3D}
.rd-toast-error{border-left-color:var(--rd-hot)}
.rd-toast-warning{border-left-color:#FFB224}
.rd-toast-msg{flex:1;min-width:0;font-size:var(--rd-text-small);color:var(--rd-text-muted)}
.rd-toast-title{font-weight:var(--rd-w-medium);color:var(--rd-text)}
.rd-toast-close{flex:none;color:var(--rd-text-faint);font-size:1rem;line-height:1;padding:0 .1rem}
.rd-toast-close:hover{color:var(--rd-text)}
.rd-toast-out{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
@keyframes rd-toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:768px){
  .rd-notify-drawer{left:1rem;right:1rem;width:auto}
  .rd-toast-host{left:1rem;right:1rem;max-width:none}
}