/*
 * Road to, the shared design system. Every page (login, sign-up, dashboard, settings) loads this first,
 * so type, colour, buttons, fields and the logo look the same everywhere. The full guide is brand book B (Aurora).
 *
 *   tokens      colours (light + dark), type, radii            :root
 *   base        reset, body, links, headings
 *   components  .brand  .btn  .field  .chip  .card  .modal  .eyebrow  mark
 *
 * Page-specific layout lives in each page's own stylesheet; it should only USE these, not redefine them.
 * This folder (/brand/) is the only static content served to logged-out visitors.
 *
 * Your training is the aurora. Calm indigo-tinted paper, midnight ink, Aurora for the big moments.
 *   aurora      the brand colour: the header band, the days-to-race panel, every progress and timeline bar
 *   highlight   --hl neon cyan, the one highlighter (selected, "you are here", the marker); always dark text
 *   race        --sunrise for test and race cards, --test/--race-ink for small marks and text; the only warm colours
 *   sport       swim indigo, bike orchid, run aqua (each from Aurora), strength near-white with an edge;
 *               use --x-ink for sport-coloured text, the fills are too light for text on white
 *   cycle       moon tones in js/core/cycle.js, only on the phase band and pill
 *   status      dark outline + word (good, warn, danger); never fills a chip or a bar
 * A sport is always a flat colour and Aurora is always a gradient, so the two never read alike.
 */

:root {
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F6F6FB;--ink:#16142F;--ink-2:#5B5F7A;--ink-3:#7A7E99;--line:#D8DAE8;--line-2:#EEEFF6;--accent-soft:color-mix(in srgb,#33E1FF 24%,transparent);--swim:#4F5BF0;--bike:#DA70F0;--run:#14B8A6;--strength:#F4F3FB;--swim-ink:#3A44C9;--bike-ink:#A43CC2;--run-ink:#0C8578;--strength-ink:#5B5F7A;--strength-edge:#9A9CC0;--cycle:#E89BB8;--test:#FF8A7A;--good:#2A8A3E;--warn:#9A5B00;--warn-soft:#FBF1E3;--danger:#D92D20;--danger-soft:#FDECEA;--hl-line:#0089A8;--race-ink:#B4432A;--primary:#15133F;--primary-ink:#FFFFFF;--shadow-float:0 1px 3px rgba(22,20,47,.08),0 12px 32px rgba(22,20,47,.16);
  --accent:var(--ink); --hl:#33E1FF; --hl-deep:#12C7E8; --hl-ink:#16142F; --midnight:#15133F;
  --aurora:linear-gradient(150deg,#C26BEA 0%,#5CE1D6 46%,#3A2B9E 100%);
  --aurora-bar:linear-gradient(90deg,#C26BEA 0%,#5CE1D6 55%,#3A2B9E 100%);
  --aurora-deep:linear-gradient(160deg,#3A2B9E 0%,#15133F 100%);
  --aurora-panel:linear-gradient(rgba(21,19,63,.42),rgba(21,19,63,.42)),var(--aurora);   /* white text reads across the whole panel */
  --sunrise:linear-gradient(135deg,#C26BEA 0%,#FF8A7A 52%,#FFC46B 100%);
  --shadow:none;
  --display:"Bricolage Grotesque","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;  /* headings, titles, the wordmark */
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;                            /* body, captions, labels, buttons, fields */
  --num:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;                                     /* stats and figures: days to go, paces, times, totals */
  --mono:var(--sans);                                          /* the small uppercase labels across the dashboard */
  --r-sm:8px; --r:12px; --r-lg:16px; --pill:99px;
}
@media (prefers-color-scheme: dark){:root{--bg:#0D0C24;--surface:#15143A;--surface-2:#1A1942;--ink:#ECEBFA;--ink-2:#9A9CC0;--ink-3:#74769A;--line:#2E2C5C;--line-2:#1E1C45;--accent-soft:color-mix(in srgb,#33E1FF 16%,transparent);--swim:#6E78FF;--bike:#DA70F0;--run:#14B8A6;--strength:#F4F3FB;--swim-ink:#9AA2FF;--bike-ink:#E8A0F5;--run-ink:#3FD6C3;--strength-ink:#ECEBFA;--strength-edge:#F4F3FB;--cycle:#E89BB8;--test:#FF8A7A;--good:#4CC26A;--warn:#F2B04A;--warn-soft:#2A2210;--danger:#F26B5E;--danger-soft:#2A1613;--hl-line:#33E1FF;--race-ink:#FFB199;--primary:#33E1FF;--primary-ink:#16142F;--shadow-float:0 1px 3px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.55)}}
:root[data-theme="light"]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F6F6FB;--ink:#16142F;--ink-2:#5B5F7A;--ink-3:#7A7E99;--line:#D8DAE8;--line-2:#EEEFF6;--accent-soft:color-mix(in srgb,#33E1FF 24%,transparent);--swim:#4F5BF0;--bike:#DA70F0;--run:#14B8A6;--strength:#F4F3FB;--swim-ink:#3A44C9;--bike-ink:#A43CC2;--run-ink:#0C8578;--strength-ink:#5B5F7A;--strength-edge:#9A9CC0;--cycle:#E89BB8;--test:#FF8A7A;--good:#2A8A3E;--warn:#9A5B00;--warn-soft:#FBF1E3;--danger:#D92D20;--danger-soft:#FDECEA;--hl-line:#0089A8;--race-ink:#B4432A;--primary:#15133F;--primary-ink:#FFFFFF;--shadow-float:0 1px 3px rgba(22,20,47,.08),0 12px 32px rgba(22,20,47,.16)}
:root[data-theme="dark"]{--bg:#0D0C24;--surface:#15143A;--surface-2:#1A1942;--ink:#ECEBFA;--ink-2:#9A9CC0;--ink-3:#74769A;--line:#2E2C5C;--line-2:#1E1C45;--accent-soft:color-mix(in srgb,#33E1FF 16%,transparent);--swim:#6E78FF;--bike:#DA70F0;--run:#14B8A6;--strength:#F4F3FB;--swim-ink:#9AA2FF;--bike-ink:#E8A0F5;--run-ink:#3FD6C3;--strength-ink:#ECEBFA;--strength-edge:#F4F3FB;--cycle:#E89BB8;--test:#FF8A7A;--good:#4CC26A;--warn:#F2B04A;--warn-soft:#2A2210;--danger:#F26B5E;--danger-soft:#2A1613;--hl-line:#33E1FF;--race-ink:#FFB199;--primary:#33E1FF;--primary-ink:#16142F;--shadow-float:0 1px 3px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.55)}

/* ── base ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,.display{font-family:var(--display);letter-spacing:-.025em;font-weight:800;text-wrap:balance}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--hl);color:var(--hl-ink)}
/* the highlighter: cyan under a key word or two, peach for race-day moments */
mark,.mark{color:inherit;padding:0 .06em;background:linear-gradient(transparent 56%,var(--hl) 56%,var(--hl) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mark-race{background:linear-gradient(transparent 56%,var(--test) 56%,var(--test) 94%,transparent 94%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) mark,:root:not([data-theme="light"]) .mark{color:var(--hl-ink)}}
:root[data-theme="dark"] mark,:root[data-theme="dark"] .mark{color:var(--hl-ink)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ── logo: the icon on its own, or with the name ── */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:10px;display:block;flex:none}
.brand.lg img{width:44px;height:44px;border-radius:12px}

/* ── buttons: one shape (pill). Midnight is the default action (neon cyan in dark mode); sunrise only for race-day actions ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border:2px solid transparent;border-radius:var(--pill);
  font:inherit;font-size:15px;font-weight:700;letter-spacing:-.005em;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 86%,var(--bg))}
.btn-hl{background:var(--hl);color:var(--hl-ink)}
.btn-hl:hover:not(:disabled){background:var(--hl-deep)}
.btn-race{background:var(--sunrise);color:var(--hl-ink)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line);border-width:1.5px}
.btn-secondary:hover:not(:disabled){border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink-2);padding-left:14px;padding-right:14px}
.btn-ghost:hover:not(:disabled){color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover:not(:disabled){filter:brightness(.92)}
.btn-sm{padding:8px 16px;font-size:13px;gap:6px}
.btn-sm svg{width:14px;height:14px}
.btn-block{width:100%}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.icon-btn svg{width:19px;height:19px}

/* ── fields ── */
.label{display:block;margin:0 0 7px;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:0}
.field{display:block;width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);
  font:inherit;font-size:16px;font-weight:500;transition:border-color .15s,box-shadow .15s}
.field::placeholder{color:var(--ink-3);font-weight:500}
.field:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.field:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 55%,transparent)}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2371808D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
textarea.field{resize:vertical;line-height:1.5}
.field-note{margin:7px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3);font-weight:500}
.field-error{margin:10px 2px 0;font-size:13.5px;font-weight:600;color:var(--danger);min-height:1.4em}

/* ── chips, cards, modal ── */
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2);font-size:12px;font-weight:700}
.chip-hl{background:var(--hl);border-color:transparent;color:var(--hl-ink)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.chip-hl .dot{background:var(--hl-ink)}
.chip-race{background:var(--sunrise);border-color:transparent;color:var(--hl-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.modal-ov{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,15,23,.55);backdrop-filter:blur(4px)}
.modal-ov.on{display:flex}
.modal{width:100%;max-width:440px;padding:30px 28px 26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-float)}
.modal h3{margin:0 0 8px;font-size:22px}
.modal p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-3)}

/* ── aurora: progress and timeline bars, the one hero panel per screen ── */
.aurora{background:var(--aurora);color:#fff}
.aurora-bar{background:var(--aurora-bar)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}
.aurora-panel{background:var(--aurora-panel);color:#fff}
.sunrise{background:var(--sunrise);color:var(--hl-ink)}
/* a near-white strength mark needs an edge to show on white */
.sq-strength,[style*="var(--strength)"]{box-shadow:inset 0 0 0 1.5px var(--strength-edge)}