/* TrailGoat — Race Day (combined course + fueling planner). Loaded after fuel.css,
   which already provides the two-pane app shell (body.split-page) and all the
   course/fuel/plan components. This file only adds the collapsible left sections. */

/* The collapsible coloured section styles (.rd-section/.rd-sec-ico/.rd-sec-sub/.rd-form/.rd-note)
   now live in the shared fuel.css so /fuel and /planner can use them too. */

/* The collapsed-card body-hide rule now lives in the shared fuel.css (so /fuel and /planner
   get it too). */

/* Weather explorer card styles moved to the shared fuel.css — the card renders
   on /fuel and /planner too (weather-explorer.js self-renders on any page with
   the mount), so its styles must load everywhere it does. */

/* ===================== Left rail (Race setup) ===================== */
/* The left pane holds ONE thing now, so it stopped being a card: it's flat page
   chrome — a pinned control rail. Cards are reserved for the scrollable right
   pane, which is what makes "static left, scrolling right" legible at a glance. */
/* flex:1 so the dropzone (no course) / mini-map (course loaded) can grow into the
   full rail height — the shared fuel.css rules target #rd-course descendants. */
.rd-rail { display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1 1 auto; }
.rd-rail-head { display: flex; align-items: center; gap: 10px; }
.rd-rail-titles {
    flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25;
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.rd-rail-sub { font-family: Inter, sans-serif; font-weight: 400; font-size: 0.8rem; color: var(--muted); }

@media (min-width: 861px) {
    /* Hairline seam between the fixed rail and the scrolling content. */
    body.split-page .split-left { border-right: 1px solid var(--line); padding-right: 18px; }
    /* Explicit grid placement: the shell is THREE columns (rail | drag handle | content),
       and the fade divs precede everything in the DOM, so auto-placement would shuffle
       the lot. Pin each to its column; fades share the content column. */
    body.split-page .split-left { grid-column: 1; grid-row: 1; }
    body.split-page .split-handle { grid-column: 2; grid-row: 1; }
    body.split-page .split-right { grid-column: 3; grid-row: 1; }

    /* Scroll fades: overlaid on the right pane's edges, never on the rail.
       Inset from the right so the scrollbar (its own affordance) stays clear. */
    .rd-fade {
        grid-column: 3; grid-row: 1; justify-self: stretch;
        height: 38px; margin-right: 14px; pointer-events: none; z-index: 6;
        opacity: 1; transition: opacity 0.25s ease;
    }
    .rd-fade-top { align-self: start; background: linear-gradient(to bottom, rgba(7,18,15,0.85), transparent); }
    .rd-fade-btm { align-self: end; background: linear-gradient(to top, rgba(7,18,15,0.9), transparent); }
    .app-split.rd-at-top .rd-fade-top { opacity: 0; }
    .app-split.rd-at-end .rd-fade-btm { opacity: 0; }
}
@media (max-width: 860px) { .rd-fade { display: none; } }

/* Browse sits snug under the search field it complements (it moved up from
   below the elevation profile — loading actions live with loading inputs). */
.rd-rail > .creator-note { margin: -8px 0 0; }

/* Action pills — ONE quiet treatment shared by the course rail (Copy link / Clear
   course) and the plan bar (Save plan / Print). Equal-width (flex: 1 each), identity
   carried by a per-action accent on hover only. Overrides the loud site-wide styles
   these buttons arrive with (.export-btn's orange outline, .tg-plan-save's moss pill). */
.course-card-actions { display: flex; gap: 8px; align-items: stretch; }
.rd-rail .course-card-actions > button,
.rd-plan-actions > button {
    flex: 1 1 0; min-width: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: 600 0.82rem/1.1 Inter, sans-serif; letter-spacing: 0.01em;
    color: var(--ink); background: var(--glass);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 8px; box-shadow: var(--raise-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: none; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.rd-rail .course-card-actions > button:hover,
.rd-plan-actions > button:hover { transform: none; box-shadow: var(--raise-1); }
/* This display beats the [hidden] UA rule on specificity — guard it, or the
   auth "Save plan" pill shows signed-out (repo-wide gotcha). */
.rd-rail .course-card-actions > button[hidden],
.rd-plan-actions > button[hidden] { display: none; }
.rd-rail .course-card-actions > button .ico,
.rd-plan-actions > button .ico { width: 14px; height: 14px; flex: none; }
/* Course-rail accents (Copy link = teal course identity, Clear = coral) */
.rd-rail .course-card-actions > #share-course:hover { border-color: var(--teal); color: var(--teal); }
/* copied/failed feedback: gpx.js swaps the label + toggles these for ~1.8s */
.rd-rail .course-card-actions > #share-course.copied { border-color: var(--teal); color: var(--teal); }
.rd-rail .course-card-actions > #share-course.copy-fail { border-color: var(--coral); color: var(--coral); }
.rd-rail .course-card-actions > #course-clear:hover { border-color: var(--coral); color: var(--coral); }
/* Outline hierarchy: Save plan is the GREEN OUTLINE pill (green border, text + floppy
   icon — not a filled pill); Print / PDF is fully neutral (non-green). Both hold over
   the Emerald theme's green .export-btn — Print via #id specificity, Save via --moss.
   .ico { stroke: currentColor }, so each button's icon inherits its own colour. */
.rd-plan-actions > .tg-plan-save {
    background: color-mix(in srgb, var(--moss) 13%, rgba(10, 20, 17, 0.88));
    border-color: var(--moss);
    color: var(--moss);
    font-weight: 700;
}
.rd-plan-actions > .tg-plan-save:hover {
    border-color: var(--moss); color: var(--moss);
    box-shadow: 0 0 15px rgba(154, 230, 0, 0.20);
}
.rd-plan-actions > #print-plan {
    background: rgba(9, 20, 17, 0.86);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
}
.rd-plan-actions > #print-plan:hover {
    border-color: color-mix(in srgb, var(--ink) 45%, transparent);
    color: var(--ink); filter: none;
}
/* Plan-bar pills are compact + intrinsic-width (not full-bleed like the rail), so
   they read as a light floating control rather than a toolbar. Own translucent
   backing so they stay legible over whatever plan content sits underneath. */
.rd-plan-actions > button {
    flex: 0 0 auto; gap: 5px;
    padding: 6px 13px; border-radius: 999px;
    font-size: 0.72rem; letter-spacing: 0.015em;
    background: rgba(9,20,17,0.86);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 5px 16px rgba(0,0,0,0.30);
}
.rd-plan-actions > button .ico { width: 12px; height: 12px; }

/* Plan-level action bar: floats at the bottom of the scrolling right pane so the
   plan's own actions (Save plan, Print/PDF) travel with the plan rather than the
   course-setup rail. Compact pills, centred. Hidden until a plan exists (body.rd-armed).
   Static row at the end of the plan on narrow layouts; on desktop it floats over the
   pane, auto-hides after a few seconds idle, and wakes on scroll/pointer (raceday.js). */
.rd-plan-actions { display: none; gap: 8px; align-items: center; justify-content: center; }
body.rd-armed .rd-plan-actions { display: flex; }
@media (min-width: 861px) {
    body.split-page .rd-plan-actions {
        position: sticky; bottom: 0; z-index: 7;
        margin-right: 14px;                 /* clear the scrollbar, matching .rd-fade */
        padding: 4px 0 12px;
        pointer-events: none;               /* only the pills catch clicks; content stays reachable */
        transition: opacity 0.28s ease, transform 0.28s ease;
    }
    body.split-page .rd-plan-actions > button { pointer-events: auto; }
    /* auto-hidden state — raceday.js toggles .rd-actions-hidden when the pane goes idle */
    body.split-page .rd-plan-actions.rd-actions-hidden {
        opacity: 0; transform: translateY(10px); pointer-events: none;
    }
    body.split-page .rd-plan-actions.rd-actions-hidden > button { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.split-page .rd-plan-actions.rd-actions-hidden { transform: none; }
}
/* Print stays hidden until a plan exists, wherever it lives. */
#print-plan { display: none; }
body.rd-armed #print-plan { display: inline-flex; }

/* Post-wizard arrival: two accent pulses on the fueling card so the eye lands
   where the scroll did. Transient; the card's resting shadow returns after. */
@keyframes rd-flash-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, var(--orange)) 60%, transparent),
                      0 0 34px color-mix(in srgb, var(--acc, var(--orange)) 35%, transparent); }
}
.rd-flash { animation: rd-flash-pulse 1.1s ease 2; }
@media (prefers-reduced-motion: reduce) { .rd-flash { animation: none; } }

/* ===================== Empty state (before a plan exists) ===================== */
/* Hide the live fuel numbers until the page is "armed" (a course loads, the wizard
   runs, or the user edits the effort form). fuel.js still computes them underneath. */
.fueling-plan .fuel-cards,
.fueling-plan #plan-summary { display: none; }
body.rd-armed .fueling-plan .fuel-cards { display: grid; }
body.rd-armed .fueling-plan #plan-summary:not([hidden]) { display: block; }

.rd-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; text-align: center; color: var(--muted); padding: 26px 20px;
}
.rd-empty-icon { font-size: 2rem; opacity: 0.75; }
.rd-empty-icon .ico { width: 30px; height: 30px; color: var(--teal); }
.rd-empty p { max-width: 30rem; margin: 0; }
body.rd-armed .rd-empty { display: none; }

/* The big "Plan a race" call-to-action. */
.rd-plan-btn {
    background: rgba(255, 122, 26, 0.08);
    color: var(--orange); border: 1px solid rgba(255, 122, 26, 0.45); border-radius: 999px;
    padding: 12px 24px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1rem;
    cursor: pointer; transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.rd-plan-btn:hover { transform: translateY(-1px);
    background: rgba(255, 122, 26, 0.16); border-color: var(--orange); }
.rd-plan-btn.rd-plan-sm { padding: 9px 18px; font-size: 0.9rem; }
.hero-cta { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (min-width: 861px) { body.split-page .hero-cta { margin-top: 10px; } }

/* ===================== Plan-a-race wizard (modal) ===================== */
.rd-wiz-backdrop {
    position: fixed; inset: 0; z-index: 4000; background: rgba(4,12,10,0.74);
    backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 4vh 16px;
}
.rd-wiz-backdrop[hidden] { display: none; }
.rd-wiz {
    width: min(620px, 100%); max-height: 92vh; overflow-y: auto;
    background: var(--bg-1, #0c1714); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5); padding: 22px 24px;
}
.rd-wiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rd-wiz-x {
    background: var(--glass-2); color: var(--muted); border: 1px solid var(--line); border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer; font-size: 0.9rem; flex: 0 0 auto;
}
.rd-wiz-x:hover { color: var(--ink); border-color: var(--orange); }
.rd-wiz-dots { display: flex; gap: 8px; margin: 16px 0 18px; }
.rd-wiz-dots span { height: 4px; flex: 1; border-radius: 999px; background: var(--line); transition: background 0.2s ease; }
.rd-wiz-dots span.on { background: linear-gradient(90deg, var(--orange), var(--gold)); }
.rd-step-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--ink); margin: 0 0 4px; }
.rd-step-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 16px; }
.rd-step .field-grid { margin-top: 6px; }
.rd-step .dropzone { margin-top: 8px; }
.rd-wiz-or { text-align: center; color: var(--muted); font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.08em; margin: 14px 0 8px; }
.rd-wiz-results { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; margin-top: 8px; }
.rd-wiz-result {
    text-align: left; background: var(--glass); border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 13px; cursor: pointer; color: var(--ink); font-family: inherit; font-size: 0.9rem;
}
.rd-wiz-result:hover { border-color: var(--orange); }
.rd-wiz-result .rd-wiz-result-meta { color: var(--muted); font-size: 0.78rem; }
/* Manual distance/vert is greyed out once a course is picked/uploaded. */
#rd-wiz-manual.rd-disabled { opacity: 0.4; pointer-events: none; }
.rd-step input:disabled { opacity: 0.55; cursor: not-allowed; }
.rd-wiz-chosen { margin-top: 12px; color: var(--moss); font-size: 0.88rem; font-weight: 600; }
.rd-wiz-chosen:empty { display: none; }
.rd-wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.rd-wiz-foot-right { display: flex; gap: 10px; align-items: center; }
.rd-wiz-back, .rd-wiz-skip {
    background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 16px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.rd-wiz-back:hover, .rd-wiz-skip:hover { color: var(--ink); border-color: var(--orange); }
.rd-wiz-back[hidden] { display: none; }
body.rd-wiz-open { overflow: hidden; }

/* Hour-by-hour weather strip styles now live in fuel.css (shared with /fuel). */
/* Flat-pace estimator is hidden on Race Day; guard against an explicit .field-block display. */
#rd-flatpace[hidden] { display: none; }

/* Card styling (Chakra Petch all-caps titles + filled header band + glow outline)
   now lives in the shared fuel.css so /fuel, /planner and /raceday stay consistent.
   Change the card look there, not here. */

/* ===== Split-by control (Pacing plan card) ===== */
.pace-split { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.pace-split > .field-label { margin: 0; }
.pace-split-x { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.pace-split-x input { width: 64px; }
.pace-split-x[hidden] { display: none; }      /* explicit display beats [hidden] — known trap */
.pace-split-grain[hidden] { display: none; }  /* same trap: .segmented sets display */
.pace-surf-adj { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem;
    color: var(--muted); cursor: pointer; }
.pace-surf-adj em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--gold);
    border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; letter-spacing: 0.05em; }
.pace-surf-adj[hidden] { display: none; }
.pace-split-note { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.pace-split-note[hidden] { display: none; }

/* Custom split-point chips + the click-to-cut affordance */
.pace-split-cuts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.pace-split-cuts[hidden] { display: none; }   /* explicit display beats [hidden] */

/* Terrain sub-rows inside a long aid leg (▸ toggle on the leg row) */
.pace-leg-toggle { background: none; border: 0; color: var(--muted); cursor: pointer;
    font: inherit; padding: 0 4px 0 0; }
.pace-leg-toggle:hover { color: var(--ink); }
.plan-table tr.pace-sub td { font-size: 0.82rem; background: rgba(255, 255, 255, 0.02); }
.plan-table tr.pace-sub td:first-child { padding-left: 26px; }
.plan-table tr.pace-sub[hidden] { display: none; }
.pace-cut { font: 600 0.75rem Inter, sans-serif; color: var(--ink); background: var(--glass);
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer;
    transition: border-color 0.15s, color 0.15s; }
.pace-cut:hover { border-color: var(--coral); color: var(--coral); }
.pace-cut-clear { color: var(--muted); }
body.pace-custom-on #elev-chart { cursor: crosshair; }