/* =========================================================================
   Theme tokens — TWO axes:
     data-tr-skin  = trail | road | track   (visual identity + motifs)
     data-tr-theme = dark  | light          (light/dark variant)

   Type / flag / deviation / shadow colors are keyed by THEME only — their
   meaning is consistent across skins. Surfaces, ink, accent, ridge, band and
   motif palettes are keyed by SKIN×THEME — that's the identity.

   --tr-gold is the per-skin accent. --tr-band-{a,b,c}-{0..3} are the three
   phase-band gradient palettes (0 = bottom/darkest → 3 = top/lightest);
   PHASE_SLOTS in app.js maps a phase index onto one of them.

   Road·light and Track·light invert the usual relationship: the PAGE surface
   is dark (tarmac / brick) while cards stay light. Anything drawn directly on
   the page surface — hero, phase band, footer, signed-in meta line — must use
   the --tr-ink-surface* / --tr-accent-surface tokens, not the card ink.
   ========================================================================= */

/* ---- Type pairings (skin-keyed; the calendar page is the only skinnable
   surface, so onboarding / consent stay on the Trail pairing) ---- */
:root {
  --tr-font-display:     "Instrument Serif", "Fraunces", Georgia, serif;
  --tr-font-body:        "Outfit", "Inter Tight", system-ui, sans-serif;
  --tr-font-data:        "IBM Plex Mono", ui-monospace, monospace;
}
/* Track = Timing Board pairing (Saira Condensed keeps a true italic). */
[data-tr-skin="track"] {
  --tr-font-display:     "Saira Condensed", "Oswald", system-ui, sans-serif;
  --tr-font-body:        "Archivo", "Inter Tight", system-ui, sans-serif;
}
/* Road = Highway pairing (Overpass derives from Highway Gothic, the US
   interstate-signage face, and keeps a true italic for display). */
[data-tr-skin="road"] {
  --tr-font-display:     "Overpass", "Oswald", system-ui, sans-serif;
  --tr-font-body:        "Overpass", "Inter Tight", system-ui, sans-serif;
}

/* ---- Theme base: type / flag / deviation / shadow (skin-agnostic) ---- */
[data-tr-theme="dark"] {
  /* Shadows */
  --tr-shadow-week:      0 2px 24px #0006;
  --tr-shadow-drawer:    0 24px 64px #0009;
  --tr-shadow-toggle:    0 4px 16px #0005;
  /* Surface ink — defaults to card ink; the light Road/Track skins override */
  --tr-ink-surface:        var(--tr-ink);
  --tr-ink-surface-soft:   var(--tr-ink-soft);
  --tr-ink-surface-muted:  var(--tr-muted);
  --tr-accent-surface:     var(--tr-gold);
  /* Type colors (saturated for dark bg) */
  --tr-type-rest:        #6b746e;
  --tr-type-recovery:    #5aa5b3;
  --tr-type-easy:        #8ec077;
  --tr-type-quality:     #e08a4a;
  --tr-type-long:        #b496e0;
  --tr-type-b2b:         #c97ad0;
  --tr-type-sim:         #e6a062;
  --tr-type-race:        #ec5c4a;
  --tr-type-event:       #d4a155;
  /* Flag tints */
  --tr-flag-check-accent:#8ec077;
  --tr-flag-check-bg:    linear-gradient(180deg, #1c3526 0%, #182721 100%);
  --tr-flag-check-border:#56865d;
  --tr-flag-check-badge: #244430;
  --tr-flag-rec-accent:  #5aa5b3;
  --tr-flag-rec-bg:      linear-gradient(180deg, #173a44 0%, #172621 100%);
  --tr-flag-rec-border:  #3f7a8c;
  --tr-flag-rec-badge:   #1f4854;
  --tr-flag-race-accent: #ec5c4a;
  --tr-flag-race-bg:     linear-gradient(180deg, #2c1715 0%, #1d2120 100%);
  --tr-flag-race-border: #7a2e25;
  --tr-flag-race-badge:  #3a1816;
  /* Deviation accents */
  --tr-deviation-bg:     #3a2418;
  --tr-deviation-border: #d97c4f;
  --tr-deviation-text:   #e08a4a;
}

[data-tr-theme="light"] {
  /* Shadows */
  --tr-shadow-week:      0 2px 16px #5a460026;
  --tr-shadow-drawer:    0 24px 64px #2a1e0033;
  --tr-shadow-toggle:    0 4px 14px #2a1e0022;
  /* Surface ink — defaults to card ink; the light Road/Track skins override */
  --tr-ink-surface:        var(--tr-ink);
  --tr-ink-surface-soft:   var(--tr-ink-soft);
  --tr-ink-surface-muted:  var(--tr-muted);
  --tr-accent-surface:     var(--tr-gold);
  /* Type colors */
  --tr-type-rest:        #7c8278;
  --tr-type-recovery:    #246b7a;
  --tr-type-easy:        #3e7a4a;
  --tr-type-quality:     #b85e2a;
  --tr-type-long:        #6448a0;
  --tr-type-b2b:         #84348e;
  --tr-type-sim:         #a85a1f;
  --tr-type-race:        #a02018;
  --tr-type-event:       #976820;
  /* Flag tints */
  --tr-flag-check-accent:#3e7a4a;
  --tr-flag-check-bg:    linear-gradient(180deg, #dceec6 0%, #ebebcd 100%);
  --tr-flag-check-border:#78a872;
  --tr-flag-check-badge: #d4e8ba;
  --tr-flag-rec-accent:  #246b7a;
  --tr-flag-rec-bg:      linear-gradient(180deg, #cee4ec 0%, #ebebd1 100%);
  --tr-flag-rec-border:  #6196a4;
  --tr-flag-rec-badge:   #c6dde6;
  --tr-flag-race-accent: #a02018;
  --tr-flag-race-bg:     linear-gradient(180deg, #f1d2cc 0%, #efe5d1 100%);
  --tr-flag-race-border: #c8665a;
  --tr-flag-race-badge:  #ecc6c0;
  /* Deviation accents */
  --tr-deviation-bg:     #f5e0c8;
  --tr-deviation-border: #b86a30;
  --tr-deviation-text:   #8e4a20;
}

/* -------------------------------------------------------------------------
   TRAIL — forest green + gold; topo ridge / meandering trail / landscape.
   ------------------------------------------------------------------------- */
[data-tr-skin="trail"][data-tr-theme="dark"] {
  /* Surfaces */
  --tr-bg:               #0e1714;
  --tr-bg-grad-1:        #10231d;
  --tr-bg-grad-2:        #0a1411;
  --tr-bg-panel:         #16201d;
  --tr-bg-card:          #1a2520;
  --tr-bg-card-hi:       #243530;
  --tr-bg-card-past:     #121b18;
  --tr-rule-card-past:   #1f2a26;
  /* Ink */
  --tr-ink:              #ebe3cd;
  --tr-ink-soft:         #cabfa3;
  --tr-muted:            #8a9088;
  --tr-faint:            #5a625a;
  /* Rules / accents */
  --tr-rule:             #293530;
  --tr-rule-soft:        #1f2a26;
  --tr-gold:             #d4a155;
  --tr-gold-soft:        #b88a4a;
  /* Hero silhouette */
  --tr-ridge-back-top:   #2e4a3c;
  --tr-ridge-back-bot:   #16241e;
  --tr-ridge-fore-top:   #1d2f28;
  --tr-ridge-fore-bot:   #0a1310;
  /* Phase bands (0 = bottom, 3 = top) */
  --tr-band-a-0:         #0e1f24;
  --tr-band-a-1:         #163036;
  --tr-band-a-2:         #1f4854;
  --tr-band-a-3:         #3a8092;
  --tr-band-b-0:         #3a2418;
  --tr-band-b-1:         #5a3220;
  --tr-band-b-2:         #824827;
  --tr-band-b-3:         #c97a3a;
  --tr-band-c-0:         #1a1226;
  --tr-band-c-1:         #2a1e3b;
  --tr-band-c-2:         #4a2a55;
  --tr-band-c-3:         #a05c80;
  /* Motif strokes */
  --tr-motif-line:       #d4a155;
  --tr-motif-soft:       #8ec077;
}
[data-tr-skin="trail"][data-tr-theme="light"] {
  /* Surfaces — warm cream paper */
  --tr-bg:               #ebe2c5;
  --tr-bg-grad-1:        #e2d6b4;
  --tr-bg-grad-2:        #f0e8cc;
  --tr-bg-panel:         #f3ecd2;
  --tr-bg-card:          #f8f1d8;
  --tr-bg-card-hi:       #fffae3;
  --tr-bg-card-past:     #e0d6b8;
  --tr-rule-card-past:   #c8bd9a;
  /* Ink — deep forest */
  --tr-ink:              #1f2a23;
  --tr-ink-soft:         #3e4a44;
  --tr-muted:            #6b746e;
  --tr-faint:            #909089;
  /* Rules / accents */
  --tr-rule:             #cabea0;
  --tr-rule-soft:        #ddd2b4;
  --tr-gold:             #9a6a2a;
  --tr-gold-soft:        #b58444;
  --tr-panel-tex:        url("assets/grain-soft.png");
  /* Hero silhouette */
  --tr-ridge-back-top:   #b8a984;
  --tr-ridge-back-bot:   #ebe2c5;
  --tr-ridge-fore-top:   #948560;
  --tr-ridge-fore-bot:   #d4c8a4;
  /* Phase bands (lighter tonal versions) */
  --tr-band-a-0:         #345868;
  --tr-band-a-1:         #4a7888;
  --tr-band-a-2:         #6a9aaa;
  --tr-band-a-3:         #9cc2d0;
  --tr-band-b-0:         #8a5a2a;
  --tr-band-b-1:         #b07d44;
  --tr-band-b-2:         #d4a06a;
  --tr-band-b-3:         #ecc890;
  --tr-band-c-0:         #4a2a44;
  --tr-band-c-1:         #6a4868;
  --tr-band-c-2:         #946890;
  --tr-band-c-3:         #c094b8;
  /* Motif strokes */
  --tr-motif-line:       #9a6a2a;
  --tr-motif-soft:       #3e7a4a;
}

/* -------------------------------------------------------------------------
   ROAD — asphalt + hi-vis; city skyline / painted centerline / tarmac band.
   ------------------------------------------------------------------------- */
[data-tr-skin="road"][data-tr-theme="dark"] {
  /* Surfaces */
  --tr-bg:               #14161a;
  --tr-bg-grad-1:        #1a1d22;
  --tr-bg-grad-2:        #101215;
  --tr-bg-panel:         #191c21;
  --tr-bg-card:          #1e2229;
  --tr-bg-card-hi:       #262b33;
  --tr-bg-card-past:     #16181c;
  --tr-rule-card-past:   #23262c;
  /* Ink */
  --tr-ink:              #e8eaed;
  --tr-ink-soft:         #c3c7cd;
  --tr-muted:            #8b9098;
  --tr-faint:            #595e66;
  /* Rules / accents */
  --tr-rule:             #2b2f36;
  --tr-rule-soft:        #23262c;
  --tr-gold:             #ff7a14;
  --tr-gold-soft:        #e06a12;
  /* Hero silhouette */
  --tr-ridge-back-top:   #2a3038;
  --tr-ridge-back-bot:   #1a1d22;
  --tr-ridge-fore-top:   #22262d;
  --tr-ridge-fore-bot:   #101215;
  /* Phase bands */
  --tr-band-a-0:         #14161a;
  --tr-band-a-1:         #1c2026;
  --tr-band-a-2:         #2a3038;
  --tr-band-a-3:         #3d4650;
  --tr-band-b-0:         #17150f;
  --tr-band-b-1:         #241f16;
  --tr-band-b-2:         #352c1e;
  --tr-band-b-3:         #4d4130;
  --tr-band-c-0:         #101418;
  --tr-band-c-1:         #1a2028;
  --tr-band-c-2:         #28323e;
  --tr-band-c-3:         #3a4c5c;
  /* Motif strokes */
  --tr-motif-line:       #f4c542;
  --tr-motif-soft:       #c9cdd3;
}
/* Road · light = FRESH ASPHALT — dark tarmac surface, light "paper" cards.
   Cream text on the asphalt, dark text on the cards; hi-vis yellow + white
   road paint. Mirrors the Brick Lane track skin. */
[data-tr-skin="road"][data-tr-theme="light"] {
  /* Surfaces */
  --tr-bg:               #3a3d42;
  --tr-bg-grad-1:        #45484e;
  --tr-bg-grad-2:        #2f3236;
  --tr-bg-panel:         #f2f0ea;
  --tr-bg-card:          #f7f5f0;
  --tr-bg-card-hi:       #fffefb;
  --tr-bg-card-past:     #e6e3db;
  --tr-rule-card-past:   #cfcabf;
  /* Ink — on the light cards */
  --tr-ink:              #1c1f24;
  --tr-ink-soft:         #3d4148;
  --tr-muted:            #6c717a;
  --tr-faint:            #969aa1;
  /* Ink — on the dark tarmac surface */
  --tr-ink-surface:        #eef0f2;
  --tr-ink-surface-soft:   #cbced3;
  --tr-ink-surface-muted:  #9aa0a8;
  --tr-accent-surface:     #f4c542;
  /* Rules / accents */
  --tr-rule:             #cbc7bd;
  --tr-rule-soft:        #ddd9cf;
  --tr-gold:             #e2600a;
  --tr-gold-soft:        #c85408;
  --tr-panel-tex:        url("assets/grain-soft.png");
  /* Hero silhouette */
  --tr-ridge-back-top:   #4d515a;
  --tr-ridge-back-bot:   #3a3d42;
  --tr-ridge-fore-top:   #2f3339;
  --tr-ridge-fore-bot:   #25282c;
  /* Phase bands */
  --tr-band-a-0:         #26282c;
  --tr-band-a-1:         #33363b;
  --tr-band-a-2:         #44474d;
  --tr-band-a-3:         #5a5e65;
  --tr-band-b-0:         #2a2723;
  --tr-band-b-1:         #39352e;
  --tr-band-b-2:         #4c473d;
  --tr-band-b-3:         #655d4f;
  --tr-band-c-0:         #242830;
  --tr-band-c-1:         #31363f;
  --tr-band-c-2:         #434a54;
  --tr-band-c-3:         #585f6a;
  /* Motif strokes */
  --tr-motif-line:       #f4c542;
  --tr-motif-soft:       #f2f2ee;
}

/* -------------------------------------------------------------------------
   TRACK — tartan rust + white lanes; track bend / lane paint / lane sweep.
   ------------------------------------------------------------------------- */
[data-tr-skin="track"][data-tr-theme="dark"] {
  /* Surfaces */
  --tr-bg:               #1e120d;
  --tr-bg-grad-1:        #2a1811;
  --tr-bg-grad-2:        #170d09;
  --tr-bg-panel:         #241610;
  --tr-bg-card:          #2c1c14;
  --tr-bg-card-hi:       #38251a;
  --tr-bg-card-past:     #1c110c;
  --tr-rule-card-past:   #33221a;
  /* Ink */
  --tr-ink:              #f2e9dd;
  --tr-ink-soft:         #d6c8b8;
  --tr-muted:            #a08d7d;
  --tr-faint:            #6b5a4d;
  /* Rules / accents */
  --tr-rule:             #3d281d;
  --tr-rule-soft:        #2c1c14;
  --tr-gold:             #e8562b;
  --tr-gold-soft:        #cf4a24;
  /* Hero silhouette */
  --tr-ridge-back-top:   #4a2c1e;
  --tr-ridge-back-bot:   #241610;
  --tr-ridge-fore-top:   #38251a;
  --tr-ridge-fore-bot:   #170d09;
  /* Phase bands */
  --tr-band-a-0:         #2a1710;
  --tr-band-a-1:         #3d2418;
  --tr-band-a-2:         #5a3320;
  --tr-band-a-3:         #8a4d2e;
  --tr-band-b-0:         #251a12;
  --tr-band-b-1:         #38271a;
  --tr-band-b-2:         #523a26;
  --tr-band-b-3:         #7d5636;
  --tr-band-c-0:         #2a120e;
  --tr-band-c-1:         #40201a;
  --tr-band-c-2:         #5e3228;
  --tr-band-c-3:         #8c4a3c;
  /* Motif strokes */
  --tr-motif-line:       #f2e6d6;
  --tr-motif-soft:       #e8562b;
}
/* Track · light = BRICK LANE — brick-red granular surface, cream infield
   cards; cream text on the surface, dark text on the cards. */
[data-tr-skin="track"][data-tr-theme="light"] {
  /* Surfaces */
  --tr-bg:               #a8452b;
  --tr-bg-grad-1:        #b5502f;
  --tr-bg-grad-2:        #9a3c22;
  --tr-bg-panel:         #f3ead9;
  --tr-bg-card:          #f7efe2;
  --tr-bg-card-hi:       #fffaf0;
  --tr-bg-card-past:     #ecdfc9;
  --tr-rule-card-past:   #d8c7ab;
  /* Ink — on the cream infield cards */
  --tr-ink:              #2a1a12;
  --tr-ink-soft:         #5a463a;
  --tr-muted:            #8a7461;
  --tr-faint:            #ab937d;
  /* Ink — on the brick surface */
  --tr-ink-surface:        #fbf3e7;
  --tr-ink-surface-soft:   #eeddc9;
  --tr-ink-surface-muted:  #dcc0aa;
  --tr-accent-surface:     #f0c48a;
  /* Rules / accents */
  --tr-rule:             #e2d3bd;
  --tr-rule-soft:        #ede0c9;
  --tr-gold:             #a8452b;
  --tr-gold-soft:        #8f3a22;
  --tr-panel-tex:        url("assets/grain-soft.png");
  /* Hero silhouette */
  --tr-ridge-back-top:   #c96b45;
  --tr-ridge-back-bot:   #a8452b;
  --tr-ridge-fore-top:   #9a3c22;
  --tr-ridge-fore-bot:   #822f19;
  /* Phase bands */
  --tr-band-a-0:         #8a3a20;
  --tr-band-a-1:         #a8452b;
  --tr-band-a-2:         #c15f38;
  --tr-band-a-3:         #d98a5e;
  --tr-band-b-0:         #7f3620;
  --tr-band-b-1:         #9c4228;
  --tr-band-b-2:         #b85736;
  --tr-band-b-3:         #d0805a;
  --tr-band-c-0:         #853a24;
  --tr-band-c-1:         #a24a2e;
  --tr-band-c-2:         #bd6440;
  --tr-band-c-3:         #d68f66;
  /* Motif strokes */
  --tr-motif-line:       #f7ede0;
  --tr-motif-soft:       #f0c48a;
}

/* =========================================================================
   Page chrome
   ========================================================================= */
html, body { margin: 0; padding: 0; min-height: 100%; }
html { background: var(--tr-bg); color: var(--tr-ink); }
body {
  color: var(--tr-ink);
  font-family: var(--tr-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .25s;
  background:
    linear-gradient(180deg,
      var(--tr-bg-grad-1) 0%,
      var(--tr-bg)         22%,
      var(--tr-bg-grad-2) 100%);
  background-attachment: fixed;
  background-color: var(--tr-bg);
}

/* -------------------------------------------------------------------------
   Page surfaces — each skin lays its own texture over the base gradient.
   ------------------------------------------------------------------------- */

/* Trail: the shared granular tile over the forest/parchment gradient. Dark
   uses overlay (the grain lifts out of the deep green); light uses multiply
   at a larger, softer tile, since overlay washes out on a pale ground. */
[data-tr-skin="trail"] body {
  background:
    url("assets/grain.png") 0 0 / 150px,
    linear-gradient(180deg, var(--tr-bg-grad-1) 0%, var(--tr-bg) 22%, var(--tr-bg-grad-2) 100%);
  background-blend-mode: overlay, normal;
  background-attachment: fixed, fixed;
  background-color: var(--tr-bg);
}
[data-tr-skin="trail"][data-tr-theme="light"] body {
  background:
    url("assets/grain-soft.png") 0 0 / 180px,
    linear-gradient(180deg, var(--tr-bg-grad-1) 0%, var(--tr-bg) 22%, var(--tr-bg-grad-2) 100%);
  background-blend-mode: multiply, normal;
  background-attachment: fixed, fixed;
}

/* Road: coarse asphalt grain under a tarmac gradient. The white lane markings
   are NOT part of this stack — see the lane-marking layer below. */
[data-tr-skin="road"] body {
  background:
    url("assets/grain.png") 0 0 / 150px,
    linear-gradient(180deg, var(--tr-bg-grad-1) 0%, var(--tr-bg) 22%, var(--tr-bg-grad-2) 100%);
  background-blend-mode: overlay, normal;
  background-attachment: fixed, fixed;
  background-color: var(--tr-bg);
}

/* Track: brick gradient + granular crumb grain. Lane lines live in the
   lane-marking layer below. */
[data-tr-skin="track"] body {
  background:
    url("assets/grain.png") 0 0 / 150px,
    linear-gradient(180deg, var(--tr-bg-grad-1) 0%, var(--tr-bg) 22%, var(--tr-bg-grad-2) 100%);
  background-blend-mode: overlay, normal;
  background-attachment: fixed, fixed;
  background-color: var(--tr-bg);
}

/* -------------------------------------------------------------------------
   Lane markings (road + track) — painted on their own layer that STARTS at
   the right edge of the gutter motif, so the gutter is always the leftmost
   thing on the page and no line runs past it.

   The layer hangs off .tr-calendar so it only exists when the calendar is
   rendered — never over the sign-in card — but it is POSITION: FIXED, which
   buys two things: its containing block is the viewport *excluding* the
   scrollbar (so it can span edge to edge without ever creating horizontal
   overflow — `100vw` counts the scrollbar and overshoots by half of it), and
   it stays put on scroll, exactly like the `background-attachment: fixed`
   surface underneath it.

   left = the centred .tr-stage's own left margin, max(0, 50% - 740px), plus
   the width of the gutter motif.
   ------------------------------------------------------------------------- */
[data-tr-skin="road"]  { --tr-lane-left: 19px; }  /* gutter left 1px  + 18px wide */
[data-tr-skin="track"] { --tr-lane-left: 44px; }  /* gutter left 18px + 26px wide */

[data-tr-skin="road"]  .tr-calendar::before,
[data-tr-skin="track"] .tr-calendar::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(max(0px, 50% - 740px) + var(--tr-lane-left, 0px));  /* .tr-stage is 1480 wide */
  pointer-events: none;
}
/* Short stripe, long gap: the dash stays readable in the narrow windows
   between week panels instead of reading as a solid line. */
[data-tr-skin="road"] .tr-calendar::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='172' height='210'%3E%3Crect x='84' y='0' width='5' height='58' rx='2' fill='%23ffffff' fill-opacity='0.22'/%3E%3C/svg%3E") 0 0 / 172px 210px repeat;
}
[data-tr-skin="track"] .tr-calendar::before {
  background: repeating-linear-gradient(90deg,
    transparent 0 169px,
    color-mix(in srgb, var(--tr-ink-surface) 11%, transparent) 169px 172px);
}

#root { min-height: 100vh; }
.tr-stage { max-width: 1480px; margin: 0 auto; }

.tr-calendar {
  position: relative;
  background: transparent;
  color: var(--tr-ink);
  min-height: 100%;
  padding: 40px 70px 56px 70px;
  font-family: var(--tr-font-body);
  overflow: visible;
}
.tr-calendar-inner { position: relative; z-index: 1; }

/* =========================================================================
   Gutter motif (left gutter) — the meander spills left of the content column;
   the road centerline and track lane paint sit tighter to the page edge.
   ========================================================================= */
.tr-trail-ribbon {
  position: absolute;
  left: -18px;
  top: 0;
  pointer-events: none;
}
[data-tr-skin="road"]  .tr-trail-ribbon { left: 1px; }
[data-tr-skin="track"] .tr-trail-ribbon { left: 18px; }

/* =========================================================================
   Settings button + dropdown (top-right; replaces the old theme toggle)
   ========================================================================= */
.tr-settings-wrap {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 55;
}
.tr-settings-toggle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--tr-rule);
  background: var(--tr-bg-panel);
  color: var(--tr-ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--tr-shadow-toggle);
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.tr-settings-toggle:hover {
  background: var(--tr-bg-card-hi);
  color: var(--tr-ink);
  transform: translateY(-1px);
}
.tr-settings-toggle:active { transform: translateY(0); }
.tr-settings-toggle:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 2px;
}
.tr-settings-toggle[data-open="true"] {
  background: var(--tr-bg-card-hi);
  color: var(--tr-gold);
  border-color: color-mix(in srgb, var(--tr-gold) 45%, var(--tr-rule));
}
.tr-settings-toggle[data-open="true"] svg { transform: rotate(35deg); }
.tr-settings-toggle svg { transition: transform .25s; }

.tr-settings-menu {
  position: absolute;
  top: 54px;
  right: 0;
  width: 264px;
  background: var(--tr-bg-panel);
  border: 1px solid var(--tr-rule);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--tr-shadow-drawer);
  animation: tr-menu-in 0.16s cubic-bezier(.16,.84,.44,1);
  transform-origin: top right;
}
@keyframes tr-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tr-settings-menu-title {
  font-family: var(--tr-font-data);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tr-faint);
  padding: 4px 8px 8px;
}
.tr-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px;
  border-radius: 9px;
  transition: background-color .12s;
}
.tr-settings-row:hover { background: var(--tr-bg-card); }
.tr-settings-row-label {
  font-family: var(--tr-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--tr-ink);
}
.tr-settings-row-sub {
  font-family: var(--tr-font-data);
  font-size: 10px;
  color: var(--tr-muted);
  margin-top: 2px;
}

/* Toggle switch */
.tr-switch {
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--tr-rule);
  background: var(--tr-bg-card);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background-color .18s, border-color .18s;
}
.tr-switch:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 2px;
}
.tr-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--tr-muted);
  box-shadow: 0 1px 3px #0004;
  transition: transform .18s, background-color .18s;
}
.tr-switch[data-on="true"] {
  background: color-mix(in srgb, var(--tr-gold) 32%, var(--tr-bg-card));
  border-color: color-mix(in srgb, var(--tr-gold) 55%, var(--tr-rule));
}
.tr-switch[data-on="true"] .tr-switch-knob {
  transform: translateX(18px);
  background: var(--tr-gold);
}

/* Skin picker — three cards, each a miniature of its own skin drawn in the
   active dark/light variant (the SVGs are built in theme.js). */
.tr-settings-divider {
  height: 1px;
  background: var(--tr-rule-soft);
  margin: 8px 6px;
}
.tr-theme-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px 2px 4px;
}
.tr-theme-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 1px solid var(--tr-rule);
  border-radius: 10px;
  background: var(--tr-bg-card);
  color: var(--tr-ink);
  font-family: var(--tr-font-body);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.tr-theme-opt:hover {
  background: var(--tr-bg-card-hi);
  transform: translateY(-1px);
}
.tr-theme-opt:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 2px;
}
.tr-theme-opt[data-active="true"] {
  border-color: color-mix(in srgb, var(--tr-gold) 65%, var(--tr-rule));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tr-gold) 45%, transparent);
}
.tr-theme-preview {
  display: block;
  width: 100%;
  height: 46px;
}
.tr-theme-name {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 6px 6px;
  text-align: center;
  border-top: 1px solid var(--tr-rule-soft);
}
.tr-theme-opt[data-active="true"] .tr-theme-name { color: var(--tr-gold); }
/* Fixed colors: this badge sits on top of arbitrary preview art, so it can't
   take its contrast from the theme. */
.tr-theme-check {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  color: #14161a;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}

/* =========================================================================
   Sync button (top-right, sits to the left of the theme toggle)
   ---------------------------------------------------------------------------
   Three states, all on the same element:
     data-state="idle"    → refresh glyph + "Sync"
     data-state="syncing" → spinning glyph + "Syncing…"  (disabled)
     data-state="done"    → checkmark + "Synced" (held ~1.8s, then idle)
   A faint mono sub-label under the button shows "last synced Nm ago".
   ========================================================================= */
.tr-sync-wrap {
  position: fixed;
  top: 22px;
  right: 78px;          /* 22 (toggle right) + 44 (toggle width) + 12 (gap) */
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none; /* let the button itself take pointer events */
}
.tr-sync-button {
  pointer-events: auto;
  height: 44px;
  padding: 0 16px 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  border: 1px solid var(--tr-rule);
  background: var(--tr-bg-panel);
  color: var(--tr-ink);
  font-family: var(--tr-font-data);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--tr-shadow-toggle);
  transition: background-color .15s, border-color .15s, color .15s,
              transform .15s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.tr-sync-button:hover {
  background: var(--tr-bg-card-hi);
  transform: translateY(-1px);
}
.tr-sync-button:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 2px;
}
.tr-sync-button:active { transform: translateY(0); }

/* Syncing — gold accent, progress cursor, slight inner glow.
   Disabled-style without using [disabled] (we want it focusable and
   to still respond to hover for visual continuity). */
.tr-sync-button[data-state="syncing"] {
  cursor: progress;
  color: var(--tr-gold);
  border-color: color-mix(in srgb, var(--tr-gold) 55%, var(--tr-rule));
  background: color-mix(in srgb, var(--tr-gold) 6%, var(--tr-bg-panel));
  box-shadow: var(--tr-shadow-toggle),
              inset 0 0 0 1px color-mix(in srgb, var(--tr-gold) 12%, transparent);
}
.tr-sync-button[data-state="syncing"]:hover { transform: none; }

/* Done — checkmark green, holds briefly */
.tr-sync-button[data-state="done"] {
  color: var(--tr-type-easy);
  border-color: color-mix(in srgb, var(--tr-type-easy) 55%, var(--tr-rule));
  background: color-mix(in srgb, var(--tr-type-easy) 6%, var(--tr-bg-panel));
}
.tr-sync-button[data-state="done"]:hover { transform: none; }

/* Error — race-red accent; clickable to retry, so it keeps the hover lift. */
.tr-sync-button[data-state="error"] {
  color: var(--tr-type-race);
  border-color: color-mix(in srgb, var(--tr-type-race) 55%, var(--tr-rule));
  background: color-mix(in srgb, var(--tr-type-race) 7%, var(--tr-bg-panel));
}
.tr-sync-button[data-state="error"]:hover {
  background: color-mix(in srgb, var(--tr-type-race) 12%, var(--tr-bg-panel));
}

.tr-sync-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--tr-gold);
  transition: color .15s, transform .25s;
}
.tr-sync-button[data-state="done"] .tr-sync-icon { color: var(--tr-type-easy); }
.tr-sync-button[data-state="error"] .tr-sync-icon { color: var(--tr-type-race); }
.tr-sync-button[data-state="syncing"] .tr-sync-icon {
  animation: tr-sync-spin 0.9s linear infinite;
}
@keyframes tr-sync-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tr-sync-meta {
  font-family: var(--tr-font-data);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-faint);
  padding: 0 4px;
  font-feature-settings: "tnum";
  transition: color .2s;
}
.tr-sync-button[data-state="syncing"] ~ .tr-sync-meta { color: var(--tr-gold-soft); }
.tr-sync-button[data-state="done"]    ~ .tr-sync-meta { color: var(--tr-type-easy); }
.tr-sync-button[data-state="error"]   ~ .tr-sync-meta {
  color: var(--tr-type-race);
  /* allow longer error message to wrap a line under the button without
     knocking the meta off the right edge of the viewport */
  max-width: 240px;
  text-align: right;
  white-space: normal;
  line-height: 1.4;
}

@media (max-width: 720px) {
  /* Collapse to icon-only on narrow viewports so it still fits in the
     top bar alongside the theme toggle. */
  .tr-sync-wrap { right: 64px; top: 14px; }
  .tr-sync-button { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .tr-sync-label { display: none; }
  .tr-sync-meta { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.tr-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tr-bg-grad-1) 0%, var(--tr-bg-grad-2) 100%);
  border: 1px solid var(--tr-rule);
  margin-bottom: 24px;
}
.tr-hero-body {
  position: relative;
  padding: 34px 36px 0;
}
.tr-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--tr-font-data);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--tr-accent-surface);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.tr-hero-title {
  font-family: var(--tr-font-display);
  font-size: 86px;
  line-height: 0.96;
  color: var(--tr-ink-surface);
  letter-spacing: -0.02em;
  font-style: italic;
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.tr-hero-sub {
  font-family: var(--tr-font-body);
  font-size: 15px;
  color: var(--tr-ink-surface-soft);
  line-height: 1.55;
  margin-top: 18px;
  margin-bottom: 22px;
  max-width: 800px;
  text-wrap: pretty;
}
.tr-hero-sub b { font-weight: 600; color: var(--tr-ink-surface); }
.tr-hero-ridge { margin: 0 -36px; }
.tr-hero-ridge svg { display: block; }

/* =========================================================================
   HR caps + legend
   ========================================================================= */
.tr-caps-legend {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 30px;
}
.tr-caps, .tr-legend {
  background-color: var(--tr-bg-panel);
  background-image: var(--tr-panel-tex, none);
  background-size: 180px;
  background-blend-mode: multiply;
  border: 1px solid var(--tr-rule);
  border-radius: 16px;
  padding: 16px 18px;
}
.tr-caps-title, .tr-legend-title {
  font-family: var(--tr-font-data);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--tr-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tr-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}
.tr-cap-label {
  font-family: var(--tr-font-body);
  font-size: 11px;
  color: var(--tr-muted);
  letter-spacing: 0.04em;
}
.tr-cap-value {
  font-family: var(--tr-font-body);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  color: var(--tr-ink);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.tr-cap-note {
  font-family: var(--tr-font-data);
  font-size: 9.5px;
  color: var(--tr-faint);
  margin-top: 2px;
}
.tr-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.tr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tr-font-body);
  font-size: 12.5px;
  color: var(--tr-ink-soft);
}
.tr-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--type-c, var(--tr-muted));
  box-shadow: 0 0 8px color-mix(in srgb, var(--type-c, var(--tr-muted)) 47%, transparent);
}

/* =========================================================================
   Phase block
   ========================================================================= */
.tr-phase { margin-bottom: 36px; position: relative; }
/* The header sizes to its own copy: artwork is anchored to the bottom behind
   the text, which sits in normal flow. min-height keeps a consistent floor. */
.tr-phase-header {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--tr-rule);
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
[data-tr-skin="road"]  .tr-phase-header,
[data-tr-skin="track"] .tr-phase-header { min-height: 116px; }
.tr-phase-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.tr-phase-landscape { display: block; width: 100%; height: 170px; }
[data-tr-skin="road"]  .tr-phase-landscape,
[data-tr-skin="track"] .tr-phase-landscape { height: 150px; }
.tr-phase-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tr-bg) 80%, transparent) 78%, var(--tr-bg) 100%);
  pointer-events: none;
}
.tr-phase-text {
  position: relative;
  padding: 18px 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tr-phase-kicker {
  font-family: var(--tr-font-data);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--tr-accent-surface);
  text-transform: uppercase;
}
.tr-phase-title {
  font-family: var(--tr-font-display);
  font-size: 44px;
  line-height: 1;
  font-style: italic;
  color: var(--tr-ink-surface);
  margin: 6px 0 6px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  font-weight: 400;
}
.tr-phase-desc {
  font-family: var(--tr-font-body);
  font-size: 13.5px;
  color: var(--tr-ink-surface-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 760px;
  text-wrap: pretty;
}

/* =========================================================================
   Week panel
   ========================================================================= */
/* Panel texture: --tr-panel-tex is only set by the light skins, so the dark
   ones fall through to `none` and keep a flat panel. */
.tr-week {
  position: relative;
  background-color: var(--tr-bg-panel);
  background-image: var(--tr-panel-tex, none);
  background-size: 180px;
  background-blend-mode: multiply;
  border: 1px solid var(--tr-rule);
  border-radius: 18px;
  padding: 20px 22px 22px;
  margin-bottom: 18px;
  box-shadow: var(--tr-shadow-week);
}
.tr-week[data-flag="checkpoint"] {
  background-image: var(--tr-panel-tex, none), var(--tr-flag-check-bg);
  background-size: 180px, auto;
  background-blend-mode: multiply, normal;
  border-color: var(--tr-flag-check-border);
  box-shadow: var(--tr-shadow-week), inset 0 0 0 1px color-mix(in srgb, var(--tr-flag-check-accent) 10%, transparent);
}
.tr-week[data-flag="recovery"] {
  background-image: var(--tr-panel-tex, none), var(--tr-flag-rec-bg);
  background-size: 180px, auto;
  background-blend-mode: multiply, normal;
  border-color: var(--tr-flag-rec-border);
  box-shadow: var(--tr-shadow-week), inset 0 0 0 1px color-mix(in srgb, var(--tr-flag-rec-accent) 10%, transparent);
}
.tr-week[data-flag="race"] {
  background-image: var(--tr-panel-tex, none), var(--tr-flag-race-bg);
  background-size: 180px, auto;
  background-blend-mode: multiply, normal;
  border-color: var(--tr-flag-race-border);
  box-shadow: var(--tr-shadow-week), inset 0 0 0 1px color-mix(in srgb, var(--tr-flag-race-accent) 10%, transparent);
}
/* Sits out in the left gutter, on the page surface — surface tokens. */
.tr-week-node {
  position: absolute;
  left: -31px;
  top: 28px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--tr-accent-surface);
  border: 2px solid var(--tr-ink-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tr-accent-surface) 40%, transparent),
              0 0 12px  color-mix(in srgb, var(--tr-accent-surface) 40%, transparent);
}
.tr-week[data-flag="checkpoint"] .tr-week-node {
  background: var(--tr-flag-check-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tr-flag-check-accent) 40%, transparent),
              0 0 12px  color-mix(in srgb, var(--tr-flag-check-accent) 40%, transparent);
}
.tr-week[data-flag="recovery"] .tr-week-node {
  background: var(--tr-flag-rec-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tr-flag-rec-accent) 40%, transparent),
              0 0 12px  color-mix(in srgb, var(--tr-flag-rec-accent) 40%, transparent);
}
.tr-week[data-flag="race"] .tr-week-node {
  background: var(--tr-flag-race-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tr-flag-race-accent) 40%, transparent),
              0 0 12px  color-mix(in srgb, var(--tr-flag-race-accent) 40%, transparent);
}

.tr-week-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
  cursor: pointer;
}
.tr-week-head:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 4px;
  border-radius: 8px;
}
.tr-week-head:hover .tr-week-chevron { color: var(--tr-gold); }
.tr-week-chevron {
  margin-top: 5px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tr-gold);
  transition: transform .2s, color .15s;
}
.tr-week[data-flag="checkpoint"] .tr-week-chevron { color: var(--tr-flag-check-accent); }
.tr-week[data-flag="recovery"]   .tr-week-chevron { color: var(--tr-flag-rec-accent); }
.tr-week[data-flag="race"]       .tr-week-chevron { color: var(--tr-flag-race-accent); }
.tr-week[data-collapsed="true"] .tr-week-chevron { transform: rotate(-90deg); }
.tr-week-id {
  font-family: var(--tr-font-display);
  font-size: 26px;
  line-height: 1;
  font-style: italic;
  color: var(--tr-ink);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.tr-week-dates {
  font-family: var(--tr-font-data);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--tr-gold);
  text-transform: uppercase;
  margin-top: 5px;
}
.tr-week[data-flag="checkpoint"] .tr-week-dates { color: var(--tr-flag-check-accent); }
.tr-week[data-flag="recovery"]   .tr-week-dates { color: var(--tr-flag-rec-accent); }
.tr-week[data-flag="race"]       .tr-week-dates { color: var(--tr-flag-race-accent); }

.tr-week-focus {
  font-family: var(--tr-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tr-ink-soft);
  margin-top: 8px;
  max-width: 760px;
  text-wrap: pretty;
}
.tr-week-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-top: 4px;
}
.tr-week-badge {
  font-family: var(--tr-font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 500;
  text-transform: uppercase;
}
.tr-week[data-flag="checkpoint"] .tr-week-badge {
  background: var(--tr-flag-check-badge);
  color: var(--tr-flag-check-accent);
  border: 1px solid color-mix(in srgb, var(--tr-flag-check-accent) 40%, transparent);
}
.tr-week[data-flag="recovery"] .tr-week-badge {
  background: var(--tr-flag-rec-badge);
  color: var(--tr-flag-rec-accent);
  border: 1px solid color-mix(in srgb, var(--tr-flag-rec-accent) 40%, transparent);
}
.tr-week[data-flag="race"] .tr-week-badge {
  background: var(--tr-flag-race-badge);
  color: var(--tr-flag-race-accent);
  border: 1px solid color-mix(in srgb, var(--tr-flag-race-accent) 40%, transparent);
}
.tr-week-numbers { text-align: right; }
.tr-week-mileage {
  font-family: var(--tr-font-body);
  font-weight: 300;
  font-size: 19px;
  line-height: 1;
  color: var(--tr-ink);
  font-feature-settings: "tnum";
}
.tr-week-mileage-unit {
  font-size: 11px;
  color: var(--tr-muted);
  margin-left: 3px;
}
.tr-week-load {
  font-family: var(--tr-font-data);
  font-size: 10px;
  color: var(--tr-muted);
  margin-top: 4px;
  font-feature-settings: "tnum";
}
.tr-week-tag {
  font-family: var(--tr-font-data);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 5px;
}
.tr-week-tag-label { color: var(--tr-gold); }
.tr-week-tag-label[data-plan="true"] { color: var(--tr-muted); }
.tr-week-tag-ref { color: var(--tr-faint); }
.tr-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

/* Collapsible week — the header toggles data-collapsed on .tr-week; both the
   full day grid and the condensed strip are rendered, CSS shows exactly one. */
.tr-week[data-collapsed="true"]  .tr-week-head  { margin-bottom: 0; }
.tr-week[data-collapsed="true"]  .tr-week-focus { display: none; }
.tr-week[data-collapsed="true"]  .tr-week-days  { display: none; }
.tr-week[data-collapsed="false"] .tr-week-strip { display: none; }

.tr-week-strip {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.tr-week-strip-seg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 8px;
  min-width: 0;
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-c, var(--tr-muted)) 26%, transparent);
}
.tr-week-strip-seg[data-rest="true"] {
  background: transparent;
  border-color: var(--tr-rule-soft);
  opacity: 0.6;
}
.tr-week-strip-seg[data-missed="true"] {
  background: color-mix(in srgb, var(--tr-type-race) 9%, transparent);
  border: 1px dashed color-mix(in srgb, var(--tr-type-race) 40%, transparent);
}
.tr-week-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--type-c, var(--tr-muted));
}
.tr-week-strip-seg[data-rest="true"] .tr-week-strip-dot {
  background: transparent;
  border: 1.5px solid var(--tr-faint);
}
.tr-week-strip-seg[data-missed="true"] .tr-week-strip-dot {
  background: transparent;
  border: 1.5px solid var(--tr-type-race);
}
.tr-week-strip-dow {
  font-family: var(--tr-font-data);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tr-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-week-strip-mark {
  margin-left: auto;
  font-size: 10px;
  line-height: 1;
  color: var(--type-c, var(--tr-muted));
}
.tr-week-strip-mark[data-kind="deviation"] { color: var(--tr-deviation-text); }
.tr-week-strip-mark[data-kind="missed"]    { color: var(--tr-type-race); font-size: 9px; }

/* Compact day labels for the collapsed strip on narrow screens (so the 7
   segments don't clip "Mon/Tue/Wed"). */
.tr-dow-short { display: none; }
@media (max-width: 760px) {
  .tr-dow-full  { display: none; }
  .tr-dow-short { display: inline; }
}

/* =========================================================================
   Day cell
   ========================================================================= */
.tr-day {
  position: relative;
  background: var(--tr-bg-card);
  border: 1px solid var(--tr-rule);
  border-radius: 14px;
  padding: 12px 13px 14px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s;
}
.tr-day[data-status="today"] {
  background: var(--tr-bg-card-hi);
  border-color: var(--type-c, var(--tr-rule));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--type-c, var(--tr-rule)) 33%, transparent),
    0 8px 24px color-mix(in srgb, var(--type-c, var(--tr-rule)) 13%, transparent);
}
.tr-day[data-status="past"] { opacity: 0.5; }
.tr-day[data-status="past"][data-logged="true"] {
  opacity: 1;
  background: var(--tr-bg-card-past);
  border-color: var(--tr-rule-card-past);
}
.tr-day[data-clickable="true"] { cursor: pointer; }
.tr-day[data-clickable="true"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
[data-tr-theme="light"] .tr-day[data-clickable="true"]:hover { filter: brightness(0.97); }
.tr-day[data-clickable="true"]:active {
  transform: translateY(0);
  filter: brightness(1.02);
}
.tr-day[data-clickable="true"]:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 2px;
}
.tr-day[data-clickable="false"] { cursor: default; }

.tr-day-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.tr-day[data-status="past"][data-logged="true"] .tr-day-plan { opacity: 0.55; }
.tr-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.tr-day-dow {
  font-family: var(--tr-font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tr-muted);
  text-transform: uppercase;
}
.tr-day-date {
  font-family: var(--tr-font-data);
  font-size: 10px;
  color: var(--tr-faint);
  margin-left: 6px;
}
.tr-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--tr-font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--type-c, var(--tr-muted));
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 11%, transparent);
}
.tr-day-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--type-c, var(--tr-muted));
}

.tr-day-title {
  font-family: var(--tr-font-display);
  font-size: 17px;
  line-height: 1.15;
  color: var(--tr-ink);
  font-style: italic;
  margin-top: 2px;
  text-wrap: pretty;
}
.tr-day-headline { margin-top: 2px; }
.tr-day-title + .tr-day-headline { margin-top: 0; }
.tr-day-amount {
  font-family: var(--tr-font-body);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--tr-ink);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.tr-day-amount--pace {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.tr-day-effort {
  font-family: var(--tr-font-data);
  font-size: 12px;
  color: var(--tr-gold);
  margin-top: 4px;
  font-feature-settings: "tnum";
}
.tr-day-effort-label {
  font-family: var(--tr-font-data);
  font-size: 10px;
  color: var(--tr-gold);
  margin-top: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tr-day-rest {
  font-family: var(--tr-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--tr-muted);
  margin-top: 4px;
}
.tr-day-extras {
  font-family: var(--tr-font-data);
  font-size: 11px;
  color: var(--tr-ink-soft);
  line-height: 1.55;
  font-feature-settings: "tnum";
}
.tr-day-structure {
  color: var(--tr-ink);
  margin-bottom: 3px;
}
.tr-day-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: var(--tr-muted);
}
.tr-day-spacer { flex: 1; }
.tr-day-est {
  font-family: var(--tr-font-data);
  font-size: 11.5px;
  color: var(--tr-ink-soft);
  padding-top: 9px;
  border-top: 1px solid var(--tr-rule-soft);
  line-height: 1.5;
  font-feature-settings: "tnum";
}
.tr-day-est-label {
  color: var(--tr-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 5px;
  font-size: 10px;
}

.tr-day-logged {
  padding: 8px 9px;
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-c, var(--tr-muted)) 33%, transparent);
  border-radius: 8px;
}
.tr-day[data-deviation="true"] .tr-day-logged {
  background: var(--tr-deviation-bg);
  border-color: color-mix(in srgb, var(--tr-deviation-border) 33%, transparent);
}
.tr-day-logged-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tr-font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--type-c, var(--tr-muted));
}
.tr-day[data-deviation="true"] .tr-day-logged-label { color: var(--tr-deviation-text); }
.tr-day-logged-summary {
  font-family: var(--tr-font-data);
  font-size: 11px;
  color: var(--tr-ink);
  margin-top: 5px;
  line-height: 1.55;
  font-feature-settings: "tnum";
}

/* Missed — a past scheduled running day with no logged run. Dashed race-red
   border; the cell reads at full opacity (overriding the past-day dim) with
   only the planned layer faded, so the missed treatment stands out. */
.tr-day[data-missed="true"] {
  opacity: 1;
  border: 1px dashed color-mix(in srgb, var(--tr-type-race) 45%, transparent);
}
.tr-day[data-missed="true"] .tr-day-plan { opacity: 0.72; }
.tr-day-missed {
  padding: 8px 9px;
  background: color-mix(in srgb, var(--tr-type-race) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--tr-type-race) 40%, transparent);
  border-radius: 8px;
}
.tr-day-missed-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tr-font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tr-type-race);
}
.tr-day-missed-sub {
  font-family: var(--tr-font-data);
  font-size: 11px;
  color: var(--tr-muted);
  margin-top: 5px;
  line-height: 1.55;
}

/* =========================================================================
   Drawer / modal
   ========================================================================= */
.tr-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 64%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
  animation: tr-scrim-in 0.18s ease;
}
[data-tr-theme="light"] .tr-scrim {
  background: color-mix(in srgb, #2a1e00 38%, transparent);
}
.tr-drawer {
  position: relative;
  background: var(--tr-bg-panel);
  border: 1px solid var(--tr-rule);
  border-radius: 18px;
  padding: 30px 34px 28px;
  width: min(580px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  color: var(--tr-ink);
  box-shadow: var(--tr-shadow-drawer);
  animation: tr-drawer-in 0.22s cubic-bezier(.16,.84,.44,1);
}
@keyframes tr-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-drawer-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tr-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--tr-rule);
  background: var(--tr-bg-card);
  color: var(--tr-ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background-color .15s, color .15s, transform .15s;
}
.tr-drawer-close:hover {
  background: var(--tr-bg-card-hi);
  color: var(--tr-ink);
}
.tr-drawer-close:focus-visible {
  outline: 2px solid var(--tr-gold);
  outline-offset: 2px;
}

.tr-drawer-pillrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 36px;
}
.tr-drawer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--type-c, var(--tr-muted));
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-c, var(--tr-muted)) 33%, transparent);
  font-family: var(--tr-font-body);
}
.tr-drawer-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--type-c, var(--tr-muted));
}
.tr-drawer-date {
  font-family: var(--tr-font-data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tr-muted);
}

.tr-drawer-title {
  font-family: var(--tr-font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1.15;
  color: var(--tr-ink);
  margin: 6px 0 14px;
  text-wrap: pretty;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.tr-drawer-headline { margin: 8px 0 16px; }
.tr-drawer-amount {
  font-family: var(--tr-font-body);
  font-weight: 300;
  font-size: 54px;
  line-height: 1;
  color: var(--tr-ink);
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
}
.tr-drawer-amount--pace { font-size: 36px; }
.tr-drawer-effort {
  font-family: var(--tr-font-data);
  font-size: 14px;
  color: var(--tr-gold);
  margin-top: 6px;
  font-feature-settings: "tnum";
}
.tr-drawer-effort-label {
  font-family: var(--tr-font-data);
  font-size: 10px;
  color: var(--tr-gold);
  margin-top: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tr-drawer-rest {
  font-family: var(--tr-font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--tr-muted);
  margin: 4px 0 14px;
}

.tr-drawer-est {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--tr-rule-soft);
  border-bottom: 1px solid var(--tr-rule-soft);
  margin-bottom: 14px;
}
.tr-drawer-est-label {
  font-family: var(--tr-font-data);
  font-size: 10px;
  color: var(--tr-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tr-drawer-est-value {
  font-family: var(--tr-font-data);
  font-size: 13px;
  color: var(--tr-ink-soft);
  font-feature-settings: "tnum";
}

.tr-drawer-extras {
  margin-bottom: 14px;
  font-family: var(--tr-font-data);
  font-size: 12px;
  color: var(--tr-ink-soft);
  line-height: 1.55;
  font-feature-settings: "tnum";
}
.tr-drawer-structure {
  color: var(--tr-ink);
  margin-bottom: 4px;
}
.tr-drawer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--tr-muted);
}

.tr-drawer-note {
  font-family: var(--tr-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tr-ink-soft);
  text-wrap: pretty;
  margin: 0 0 18px;
}

.tr-drawer-cc, .tr-drawer-logged {
  border: 1px solid color-mix(in srgb, var(--type-c, var(--tr-muted)) 33%, transparent);
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 6%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.tr-drawer-cc[data-deviation="true"],
.tr-drawer-logged[data-deviation="true"] {
  border-color: var(--tr-deviation-border);
  background: var(--tr-deviation-bg);
}
.tr-drawer-cc-label, .tr-drawer-logged-label {
  font-family: var(--tr-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--type-c, var(--tr-muted));
}
.tr-drawer-cc[data-deviation="true"] .tr-drawer-cc-label,
.tr-drawer-logged[data-deviation="true"] .tr-drawer-logged-label {
  color: var(--tr-deviation-text);
}
.tr-drawer-cc-text {
  font-family: var(--tr-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tr-ink);
  text-wrap: pretty;
}
.tr-drawer-logged-summary {
  font-family: var(--tr-font-data);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tr-ink);
  font-feature-settings: "tnum";
}
.tr-drawer-cc-divider {
  height: 1px;
  margin: 12px -14px;
  opacity: 0.55;
}
.tr-drawer-logged .tr-drawer-cc-label {
  margin-bottom: 5px;
}
/* Missed day in the drawer — reuses the logged card box, retinted race-red. */
.tr-drawer-missed {
  border-color: color-mix(in srgb, var(--tr-type-race) 33%, transparent);
  background: color-mix(in srgb, var(--tr-type-race) 6%, transparent);
}
.tr-drawer-missed .tr-drawer-logged-label { color: var(--tr-type-race); }

/* =========================================================================
   Responsive
   ---------------------------------------------------------------------------
   Wide  (>1280px) : 7-col grid, trail ribbon + week-node dots visible,
                     calendar uses its full padding to leave room for the
                     ribbon in the left gutter.
   Mid   (961–1280): Ribbon + dots hidden so the week panels can claim the
                     full content width — fixes pill wrapping and Recovery
                     pill overflowing its cell at this width.
   Narrow (≤960)   : Day grid collapses to 1 column, caps + legend stack,
                     cells shrink to fit content (rest days collapse).
   Phone  (≤600)   : Drawer becomes a bottom sheet.
   ========================================================================= */
@media (max-width: 1280px) {
  .tr-trail-ribbon { display: none; }
  .tr-week-node    { display: none; }
  .tr-calendar     { padding: 40px 28px 56px 28px !important; }
  /* No gutter motif at this width, so the lane markings have nothing to
     start after — run them edge to edge. */
  [data-tr-skin="road"], [data-tr-skin="track"] { --tr-lane-left: 0px; }
}

@media (max-width: 960px) {
  .tr-calendar    { padding: 24px 16px 40px 16px !important; }
  .tr-week-days   { grid-template-columns: 1fr !important; }
  .tr-caps-legend { grid-template-columns: 1fr !important; }
  .tr-caps-grid   { grid-template-columns: repeat(2, 1fr); }
  /* Cells fit their content instead of enforcing the desktop card height.
     Rest days are content-light and shrink almost flat as a result. */
  .tr-day         { min-height: 0 !important; }
  .tr-hero-title  { font-size: 44px; line-height: 1; }
  .tr-phase-title { font-size: 30px; }
  .tr-drawer {
    padding: 24px 22px 22px;
    max-height: 92vh;
    border-radius: 16px;
  }
  .tr-drawer-amount { font-size: 42px; }
  .tr-drawer-title  { font-size: 26px; }
  .tr-settings-wrap {
    top: 14px;
    right: 14px;
  }
  .tr-settings-toggle {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 600px) {
  .tr-scrim { padding: 0; align-items: flex-end; }
  .tr-drawer {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    animation: tr-sheet-in 0.24s cubic-bezier(.16,.84,.44,1);
  }
  @keyframes tr-sheet-in {
    from { transform: translateY(28px); opacity: 0.8; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

/* =========================================================================
   Auth screens — sign-in gate, invite/no-block states, signed-in meta line.
   ========================================================================= */
.tr-auth-card {
  max-width: 420px;
  margin: 18vh auto 0;
  padding: 32px 36px;
  background: var(--tr-bg-card);
  border: 1px solid var(--tr-rule);
  border-radius: 14px;
  box-shadow: var(--tr-shadow-week);
  text-align: center;
}
.tr-auth-card h1 {
  margin: 0 0 10px;
  font-family: var(--tr-font-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--tr-ink);
}
.tr-auth-card p {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tr-ink-soft);
}
.tr-auth-btn {
  font-family: var(--tr-font-data);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  color: var(--tr-bg);
  background: var(--tr-gold);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.tr-auth-btn:hover { background: var(--tr-gold-soft); }
/* Fixed to the page surface, outside any card — surface tokens. */
.tr-auth-meta {
  position: fixed;
  left: 14px;
  bottom: 10px;
  font-family: var(--tr-font-data);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--tr-ink-surface-muted);
  z-index: 5;
}
.tr-auth-meta a { color: var(--tr-ink-surface-soft); }

/* Danger (delete-account) button + type-to-confirm input. */
.tr-auth-btn-danger { background: #b3382e; color: #fff; }
.tr-auth-btn-danger:hover { background: #c9463b; }
.tr-auth-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.tr-delete-input {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 16px;
  padding: 10px 12px;
  font-family: var(--tr-font-data);
  font-size: 0.85rem;
  color: var(--tr-ink);
  background: var(--tr-bg-card);
  border: 1px solid var(--tr-rule);
  border-radius: 8px;
}

/* Owner-only access-request admin card (above the calendar). */
.tr-admin-card {
  max-width: 520px;
  margin: 26px auto 0;
  padding: 18px 22px;
  background: var(--tr-bg-card);
  border: 1px solid var(--tr-rule);
  border-radius: 14px;
}
.tr-admin-card h2 {
  font-family: var(--tr-font-data);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tr-gold);
  margin: 0 0 10px;
}
.tr-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--tr-rule-soft);
  font-size: 0.9rem;
  color: var(--tr-ink-soft);
}
.tr-admin-row span { flex: 1; word-break: break-all; }
.tr-admin-row .tr-auth-btn { font-size: 0.72rem; padding: 6px 14px; }

/* Consent page action row + quiet (deny) button variant. */
.tr-consent-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.tr-auth-btn-quiet {
  background: transparent;
  color: var(--tr-muted);
  border: 1px solid var(--tr-rule);
}
.tr-auth-btn-quiet:hover { background: var(--tr-bg-card-hi); color: var(--tr-ink-soft); }

/* =========================================================================
   Onboarding page.
   ========================================================================= */
.tr-ob {
  max-width: 680px;
  margin: 48px auto 40px;
  padding: 0 20px 40px;
}
.tr-ob-title {
  font-family: var(--tr-font-display);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--tr-ink);
  margin: 0 0 6px;
}
.tr-ob-lede { color: var(--tr-ink-soft); margin: 0 0 26px; line-height: 1.55; }
.tr-ob-step {
  background: var(--tr-bg-card);
  border: 1px solid var(--tr-rule);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 18px;
}
.tr-ob-step h2 {
  font-family: var(--tr-font-data);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tr-gold);
  margin: 0 0 12px;
}
.tr-ob-list { margin: 0 0 12px; padding-left: 20px; color: var(--tr-ink-soft); line-height: 1.6; }
.tr-ob-list li { margin-bottom: 6px; }
.tr-ob-note { color: var(--tr-ink-soft); line-height: 1.55; margin: 12px 0 8px; }
.tr-ob-options { list-style: none; margin: 0; padding: 0; }
.tr-ob-options li {
  border-top: 1px solid var(--tr-rule-soft);
  padding: 10px 2px;
  color: var(--tr-ink-soft);
  line-height: 1.5;
}
.tr-ob-options li b { color: var(--tr-ink); display: block; margin-bottom: 2px; }
.tr-ob-copy { position: relative; margin: 10px 0 4px; }
.tr-ob-copy pre {
  background: var(--tr-bg-panel);
  border: 1px solid var(--tr-rule);
  border-radius: 10px;
  padding: 12px 14px 40px;
  margin: 0;
  font-family: var(--tr-font-data);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--tr-ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.tr-ob-copybtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 0.72rem;
  padding: 6px 14px;
}
.tr-ob-starter-label {
  font-family: var(--tr-font-data);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tr-ink);
  margin: 16px 0 2px;
}
.tr-ob-status {
  font-family: var(--tr-font-data);
  font-size: 0.78rem;
  color: var(--tr-muted);
  margin: 22px 0 8px;
}
.tr-ob-back { color: var(--tr-gold-soft); font-size: 0.9rem; }
a.tr-auth-btn { display: inline-block; text-decoration: none; }

/* =========================================================================
   Multi-run days — cards layout + run cards (a day is a container of run
   cards; rest days keep the classic cell). Ported from the Trail Ribbon mock.
   ========================================================================= */
html { -webkit-tap-highlight-color: transparent; }

.tr-day-cardhead { display: flex; align-items: center; gap: 5px; }
.tr-day-cardhead-left { display: flex; align-items: baseline; }
.tr-day-double-badge {
  margin-left: auto;
  font-family: var(--tr-font-data);
  font-size: 9px; letter-spacing: 0.06em; color: var(--tr-gold);
  border: 1px solid color-mix(in srgb, var(--tr-gold) 40%, transparent);
  border-radius: 4px; padding: 1px 4px;
}

.tr-run-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 9px 9px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--type-c, var(--tr-muted)) 30%, transparent);
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 6%, transparent);
}
.tr-run-card[data-draggable="true"] { cursor: grab; }
.tr-run-card[data-draggable="true"]:active { cursor: grabbing; }
.tr-run-card[data-unplanned="true"],
.tr-run-card[data-deviation="true"] {
  border-color: color-mix(in srgb, var(--tr-deviation-border) 40%, transparent);
  background: var(--tr-deviation-bg);
}
.tr-run-card[data-unplanned="true"] { border-style: dashed; }
.tr-run-card[data-missed="true"] {
  border: 1px dashed color-mix(in srgb, var(--tr-type-race) 45%, transparent);
  background: color-mix(in srgb, var(--tr-type-race) 6%, transparent);
}
.tr-run-card-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tr-run-card-tag {
  font-family: var(--tr-font-data);
  font-size: 8.5px; letter-spacing: 0.16em; color: var(--tr-faint); text-transform: uppercase;
}
.tr-run-card-unplanned {
  font-family: var(--tr-font-body);
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tr-deviation-text);
}
.tr-run-card-pill {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap;
  font-family: var(--tr-font-body);
  font-size: 9px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--type-c, var(--tr-muted));
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 11%, transparent);
  padding: 2px 6px; border-radius: 999px;
}
.tr-run-card-pill-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--type-c, var(--tr-muted)); }
.tr-run-card-title {
  font-family: var(--tr-font-display);
  font-size: 15px; line-height: 1.15; font-style: italic; color: var(--tr-ink); text-wrap: pretty;
}
.tr-run-card-headline { line-height: 1; }
.tr-run-card-amount {
  font-family: var(--tr-font-body); font-weight: 300; font-size: 22px; line-height: 1;
  color: var(--tr-ink); letter-spacing: -0.02em; font-feature-settings: "tnum";
}
.tr-run-card-amount--pace { font-size: 18px; }
.tr-run-card-effort {
  font-family: var(--tr-font-data);
  font-size: 11px; color: var(--tr-gold); margin-left: 7px; font-feature-settings: "tnum";
}
.tr-run-card-structure {
  font-family: var(--tr-font-data);
  font-size: 10.5px; color: var(--tr-ink); line-height: 1.5;
}
.tr-run-card-est {
  font-family: var(--tr-font-data);
  font-size: 10.5px; color: var(--tr-ink-soft); font-feature-settings: "tnum";
}
.tr-run-card-est-label { color: var(--tr-faint); letter-spacing: 0.12em; text-transform: uppercase; font-size: 9px; }
.tr-run-card-logged {
  margin-top: 1px; padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--type-c, var(--tr-muted)) 22%, transparent);
}
.tr-run-card[data-unplanned="true"] .tr-run-card-logged,
.tr-run-card[data-deviation="true"] .tr-run-card-logged {
  border-top-color: color-mix(in srgb, var(--tr-deviation-border) 22%, transparent);
}
.tr-run-card-logged-label {
  font-family: var(--tr-font-body);
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--type-c, var(--tr-muted));
}
.tr-run-card[data-unplanned="true"] .tr-run-card-logged-label,
.tr-run-card[data-deviation="true"] .tr-run-card-logged-label { color: var(--tr-deviation-text); }
.tr-run-card-logged-summary {
  font-family: var(--tr-font-data);
  font-size: 10.5px; color: var(--tr-ink); margin-top: 4px; line-height: 1.5; font-feature-settings: "tnum";
}
.tr-run-card-missed {
  margin-top: 1px; padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--tr-type-race) 33%, transparent);
}
.tr-run-card-missed-label {
  font-family: var(--tr-font-body);
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tr-type-race);
}

/* Cards-mode cells convey state per run card, so drop the whole-cell past-day
   dimming — a past missed day keeps its red card at full strength. */
.tr-day[data-cards="true"][data-status="past"] { opacity: 1; }

/* =========================================================================
   Drag & drop — cursors, drop-over highlight, insertion line, ghost
   ========================================================================= */
.tr-day[data-draggable="true"] { cursor: grab; }
.tr-day[data-draggable="true"]:active { cursor: grabbing; }
body[data-tr-dragging] { cursor: grabbing; user-select: none; }
body[data-tr-dragging] .tr-day[data-clickable="true"]:hover { transform: none; filter: none; }
.tr-day[data-drop-over="true"] {
  border-color: var(--tr-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tr-gold) 55%, transparent),
              0 8px 24px color-mix(in srgb, var(--tr-gold) 15%, transparent);
}
.tr-day[data-dragging-src="true"] { opacity: 0.4; }

.tr-drop-line {
  height: 2px; border-radius: 2px; background: var(--tr-gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tr-gold) 60%, transparent); margin: 1px 0;
}
.tr-drop-line[hidden] { display: none; }

.tr-drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  padding: 10px 12px; border-radius: 12px; background: var(--tr-bg-card);
  border: 1px solid color-mix(in srgb, var(--type-c, var(--tr-gold)) 40%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); will-change: transform;
}
.tr-drag-ghost[hidden] { display: none; }
.tr-drag-ghost-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-drag-ghost-date {
  font-family: var(--tr-font-data);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tr-muted); white-space: nowrap;
}
.tr-drag-ghost-pill {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--tr-font-body);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--type-c, var(--tr-muted));
  background: color-mix(in srgb, var(--type-c, var(--tr-muted)) 11%, transparent);
  padding: 3px 7px; border-radius: 999px;
}
.tr-drag-ghost-pill-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--type-c, var(--tr-muted)); }
.tr-drag-ghost-amount {
  font-family: var(--tr-font-body); font-weight: 300; font-size: 24px; line-height: 1;
  color: var(--tr-ink); letter-spacing: -0.02em; margin-top: 8px;
}
.tr-drag-ghost-effort { font-family: var(--tr-font-data); font-size: 11px; color: var(--tr-gold); margin-left: 8px; }
.tr-drag-ghost-rest {
  font-family: var(--tr-font-display); font-style: italic; font-size: 18px; color: var(--tr-muted); margin-top: 8px;
}
.tr-drag-ghost-pm { font-family: var(--tr-font-data); font-size: 10px; color: var(--tr-muted); margin-top: 6px; }

/* =========================================================================
   Staged-changes save bar (bottom center)
   ========================================================================= */
.tr-savebar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9998;
  display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 999px;
  background: var(--tr-bg-panel); border: 1px solid var(--tr-rule);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-family: var(--tr-font-body);
}
.tr-savebar[hidden] { display: none; }
.tr-savebar-msg { font-size: 13px; color: var(--tr-ink); }
.tr-savebar-ok { font-size: 13px; font-weight: 500; color: var(--tr-type-easy); }
.tr-savebar-discard, .tr-savebar-save {
  font-family: var(--tr-font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  padding: 6px 14px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
}
.tr-savebar-discard { background: transparent; color: var(--tr-muted); border-color: var(--tr-rule); }
.tr-savebar-discard:hover { color: var(--tr-ink); }
.tr-savebar-save { background: var(--tr-gold); color: #1a1205; border-color: var(--tr-gold); }
.tr-savebar-save:hover { filter: brightness(1.06); }

/* =========================================================================
   Drawer — planned second (PM) session block
   ========================================================================= */
.tr-drawer-second {
  border: 1px dashed color-mix(in srgb, var(--type-c, var(--tr-muted)) 40%, transparent);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.tr-drawer-second-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tr-drawer-second-tag {
  font-family: var(--tr-font-data);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tr-faint);
}
.tr-drawer-second-amount {
  font-family: var(--tr-font-body); font-weight: 300; font-size: 30px; line-height: 1;
  color: var(--tr-ink); letter-spacing: -0.02em;
}

/* =========================================================================
   Share links — the settings-menu row + the share dialog. Provisional
   styling: the dialog reuses .tr-scrim / .tr-drawer / .tr-auth-btn*, and is
   deliberately plain pending a Design pass.
   ========================================================================= */
.tr-settings-action {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--tr-font-body);
}
.tr-settings-row-chev { color: var(--tr-faint); font-size: 16px; line-height: 1; }
.tr-share-link {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 12px;
  padding: 10px 12px;
  font-family: var(--tr-font-data);
  font-size: 0.78rem;
  color: var(--tr-ink);
  background: var(--tr-bg-card);
  border: 1px solid var(--tr-rule);
  border-radius: 8px;
}
.tr-share-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 8px;
  font-size: 0.85rem;
  color: var(--tr-ink-soft);
  cursor: pointer;
}
.tr-share-check input { margin-top: 2px; accent-color: var(--tr-gold); }
.tr-share-note {
  font-family: var(--tr-font-data);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--tr-muted);
  margin: 0 0 16px;
}