/* Training Programs redesign: Training Plans, Store Plans, plan builder and
   Blocks & Hours editor. Scoped to body.rd-page so the rest of the site is
   untouched. */

.rd-page {
    --rd-bg: #f4f6f9;
    --rd-surface: #fff;
    --rd-surface-2: #f8f9fb;
    --rd-border: #e3e7ec;
    --rd-border-soft: #edf0f3;
    --rd-input-border: #d5dbe2;
    --rd-input-hover: #9aa5b3;
    --rd-ink: #1b2430;
    --rd-ink-2: #3d4a5c;
    --rd-muted: #5b6675;
    --rd-faint: #8a94a3;
    --rd-faintest: #b3bbc6;
    --rd-heading: #16365e;
    --rd-accent: #1d5fa7;
    --rd-accent-hover: #164a84;
    --rd-accent-soft: #eef4fb;
    --rd-accent-row: #f3f7fc;
    --rd-accent-ring: #1d5fa71f;
    --rd-accent-border: #c6d4e6;
    --rd-avatar-bg: #e8eef6;
    --rd-hover: #f4f6f9;
    --rd-success: #2e9e5b;
    --rd-success-ink: #1e6b3a;
    --rd-success-soft: #e5f4ea;
    --rd-ok-ink: #1f7a45;
    --rd-danger: #b42318;
    --rd-danger-soft: #fdf0ef;
    --rd-danger-border: #f0c8c4;
    --rd-warn-ink: #9a6a00;
    --rd-warn-dot: #d99a00;
    --rd-neutral-soft: #eef0f3;
    --rd-purple-soft: #f1ecfb;
    --rd-purple-ink: #5b3c99;
    --rd-switch-off: #d5dbe2;
    --rd-toast-bg: #1b2430;
    --rd-toast-link: #9cc3e8;
    --rd-overlay: #1b243033;
    --rd-shadow-pop: 0 12px 32px #1b243024;
    --rd-shadow-drawer: -12px 0 40px #1b24301f;
    --rd-blk-base: oklch(0.62 0.12 150);
    --rd-blk-vo2: oklch(0.60 0.15 25);
    --rd-blk-lt: oklch(0.66 0.13 65);
    --rd-blk-end: oklch(0.55 0.12 310);
    --rd-blk-taper: oklch(0.62 0.07 250);
    --rd-mix-end: #9cc3e8;
    --rd-mix-spec: #6fbf94;
    --rd-mix-lt: #1d5fa7;
    --rd-mix-vo2: #16365e;
    --rd-stripe-a: #e3e7ec;
    --rd-stripe-b: #f4f6f9;
    --rd-warn-soft: #fdf6e3;
    --rd-warn-border: #f0dca8;
    --rd-missed: #d14b3f;
    --rd-cell-off: #fafbfc;
}
html.dark-mode .rd-page {
    --rd-bg: #0f1722;
    --rd-surface: #172231;
    --rd-surface-2: #1c2838;
    --rd-border: #2a3646;
    --rd-border-soft: #233041;
    --rd-input-border: #3a4759;
    --rd-input-hover: #56657a;
    --rd-ink: #e4e9f0;
    --rd-ink-2: #c3ccd8;
    --rd-muted: #9aa6b6;
    --rd-faint: #7d8a9c;
    --rd-faintest: #5d6a7c;
    --rd-heading: #a9cdf2;
    --rd-accent: #4b93e0;
    --rd-accent-hover: #6aa8ea;
    --rd-accent-soft: #1a2b42;
    --rd-accent-row: #1a2a3e;
    --rd-accent-ring: #4b93e033;
    --rd-accent-border: #34507a;
    --rd-avatar-bg: #24364f;
    --rd-hover: #1f2c3d;
    --rd-success: #3fb871;
    --rd-success-ink: #7fd8a4;
    --rd-success-soft: #173826;
    --rd-ok-ink: #6fd09a;
    --rd-danger: #f0857a;
    --rd-danger-soft: #3a1f1f;
    --rd-danger-border: #6b3430;
    --rd-warn-ink: #e8b74f;
    --rd-warn-dot: #e8b74f;
    --rd-neutral-soft: #263243;
    --rd-purple-soft: #2c2445;
    --rd-purple-ink: #c4b2f0;
    --rd-switch-off: #3a4759;
    --rd-toast-bg: #e4e9f0;
    --rd-toast-link: #1d5fa7;
    --rd-overlay: #00000066;
    --rd-shadow-pop: 0 12px 32px #00000066;
    --rd-shadow-drawer: -12px 0 40px #00000059;
    --rd-mix-vo2: #6d8fbf;
    --rd-stripe-a: #2a3646;
    --rd-stripe-b: #1c2838;
    --rd-warn-soft: #33290f;
    --rd-warn-border: #5c4a1a;
    --rd-missed: #f0857a;
    --rd-cell-off: #131d2a;
}

/* The site-wide dark theme recolors bare h1-h4; keep this page's heading palette. */
html.dark-mode .rd-page .rd-h1,
html.dark-mode .rd-page .rd-h3,
html.dark-mode .rd-page .rd-drawer__title,
html.dark-mode .rd-page .rd-builder-title h2,
html.dark-mode .rd-page .rd-sticky-head__title h1 { color: var(--rd-heading); }
html.dark-mode .rd-page .rd-h2,
html.dark-mode .rd-page .rd-guide h4 { color: var(--rd-ink); }

/* ── Page shell ─────────────────────────────────────────────────────────── */
.rd-page [hidden] { display: none !important; }
.rd-page .container {
    background: var(--rd-bg);
    padding: 0;
    box-shadow: none;
    overflow: clip;
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    color: var(--rd-ink);
    -webkit-font-smoothing: antialiased;
}
.rd-page .container button,
.rd-page .container input,
.rd-page .container select,
.rd-page .container textarea { font-family: inherit; }
.rd-page .rd-num { font-variant-numeric: tabular-nums; }
.rd-page input[type=number].rd-nospin::-webkit-inner-spin-button,
.rd-page input[type=number].rd-nospin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rd-page input[type=number].rd-nospin { -moz-appearance: textfield; }

.rd-header { background: var(--rd-surface); border-bottom: 1px solid var(--rd-border); }
.rd-header__inner { max-width: 1440px; margin: 0 auto; padding: 22px 32px 0; display: flex; flex-direction: column; gap: 16px; }
.rd-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-header__text { display: flex; flex-direction: column; gap: 4px; }
.rd-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--rd-heading); text-align: left; }
.rd-subtitle { margin: 0; font-size: 14px; color: var(--rd-muted); text-wrap: pretty; }
.rd-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rd-muted); border: 1px solid var(--rd-border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rd-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-success); }

.rd-page .tp-tabs { display: flex; gap: 28px; border-bottom: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
.rd-page .tp-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin: 0; padding: 10px 0 12px; font-size: 15px; font-weight: 500; color: var(--rd-muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.rd-page .tp-tab:hover { color: var(--rd-ink); }
.rd-page .tp-tab.active { font-weight: 600; color: var(--rd-heading); border-bottom-color: var(--rd-accent); }
html.dark-mode .rd-page .tp-tab.active { color: var(--rd-heading); border-bottom-color: var(--rd-accent); }

.rd-page .tp-tab-panel.rd-panel-page.active { display: block; }

.rd-main { max-width: 1440px; margin: 0 auto; padding: 24px 32px 64px; display: flex; flex-direction: column; gap: 16px; }
.rd-main--narrow { max-width: 1280px; padding-top: 20px; }

.rd-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-section-head__text { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.rd-h2 { margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; color: var(--rd-ink); }
.rd-h2__count { font-size: 14px; font-weight: 500; color: var(--rd-faint); }
.rd-desc { margin: 0; font-size: 13px; color: var(--rd-muted); text-wrap: pretty; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.rd-btn { height: 38px; padding: 0 16px; border: 1px solid var(--rd-input-border); background: var(--rd-surface); color: var(--rd-ink); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.rd-btn:hover { border-color: var(--rd-accent); color: var(--rd-accent); text-decoration: none; }
.rd-btn:disabled { opacity: .5; cursor: not-allowed; }
.rd-btn:disabled:hover { border-color: var(--rd-input-border); color: var(--rd-ink); }
.rd-btn--primary { background: var(--rd-accent); border-color: var(--rd-accent); color: #fff; font-weight: 600; }
.rd-btn--primary:hover { background: var(--rd-accent-hover); border-color: var(--rd-accent-hover); color: #fff; }
.rd-btn--primary:disabled:hover { background: var(--rd-accent); border-color: var(--rd-accent); color: #fff; }
.rd-btn--ghost { border-color: transparent; background: transparent; color: var(--rd-muted); }
.rd-btn--ghost:hover { border-color: transparent; background: var(--rd-hover); color: var(--rd-ink); }
.rd-btn--danger { color: var(--rd-danger); border-color: var(--rd-danger-border); }
.rd-btn--danger:hover { color: var(--rd-danger); border-color: var(--rd-danger); background: var(--rd-danger-soft); }
.rd-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 7px; }
.rd-btn--icon { width: 32px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1; color: var(--rd-muted); }
.rd-btn--icon:hover { background: var(--rd-hover); border-color: var(--rd-input-border); color: var(--rd-ink); }
.rd-btn__plus { font-size: 18px; line-height: 1; }
.rd-help-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rd-accent); color: var(--rd-accent); font-size: 11px; font-weight: 700; display: grid; place-items: center; box-sizing: border-box; }
.rd-link { color: var(--rd-accent); font-size: 13px; font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
.rd-link:hover { color: var(--rd-accent-hover); text-decoration: underline; }

/* ── List card ──────────────────────────────────────────────────────────── */
.rd-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; overflow: hidden; }
.rd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; min-height: 40px; }
.rd-bulkbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--rd-accent-soft); flex-wrap: wrap; min-height: 40px; }
.rd-bulkbar__count { font-size: 14px; font-weight: 600; color: var(--rd-heading); margin-right: 8px; }
.rd-bulkbar .rd-btn { border-color: var(--rd-accent-border); }
.rd-bulkbar .rd-btn--danger { border-color: var(--rd-danger-border); }
.rd-bulkbar .rd-link { margin-left: auto; align-self: center; }
.rd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rd-input-border); background: var(--rd-surface); color: var(--rd-ink); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rd-chip:hover { border-color: var(--rd-input-hover); }
.rd-chip span { color: var(--rd-faint); }
.rd-chip.is-active { border-color: var(--rd-accent); background: var(--rd-accent); color: #fff; font-weight: 600; }
.rd-chip.is-active span { color: #fff; font-weight: 500; opacity: .85; }
.rd-search { position: relative; flex: 0 1 300px; min-width: 200px; }
.rd-search input { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid var(--rd-input-border); border-radius: 8px; padding: 0 12px 0 34px; font-size: 14px; color: var(--rd-ink); background: var(--rd-surface); outline: none; }
.rd-search input:focus { border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
.rd-search::before { content: ""; position: absolute; left: 12px; top: 10px; width: 11px; height: 11px; border: 1.6px solid var(--rd-faint); border-radius: 50%; pointer-events: none; box-sizing: content-box; }
.rd-search::after { content: ""; position: absolute; left: 23px; top: 22px; width: 5px; height: 1.6px; background: var(--rd-faint); transform: rotate(45deg); pointer-events: none; }

.rd-table-scroll { overflow-x: auto; }
.rd-table { min-width: var(--rd-table-min, 1000px); }
.rd-tr { display: grid; grid-template-columns: var(--rd-cols); gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rd-border-soft); background: var(--rd-surface); }
.rd-tr.is-selected { background: var(--rd-accent-row); }
.rd-tr--head { padding: 10px 16px; background: var(--rd-surface-2); border-top: 1px solid var(--rd-border); border-bottom: 1px solid var(--rd-border); font-size: 12px; font-weight: 600; color: var(--rd-muted); text-transform: uppercase; letter-spacing: .04em; }
.rd-tr--head + .rd-tr, .rd-tr--head + .rd-group-label { border-top: 0; }
.rd-group-label { padding: 14px 16px 8px 58px; font-size: 12px; font-weight: 600; color: var(--rd-faint); text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 8px; border-top: 1px solid var(--rd-border-soft); }
.rd-group-label span { color: var(--rd-faintest); }
.rd-empty { padding: 48px 16px; text-align: center; font-size: 14px; color: var(--rd-muted); border-top: 1px solid var(--rd-border-soft); }
.rd-right { text-align: right; }
.rd-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-cell-name { font-size: 14px; font-weight: 600; color: var(--rd-ink); cursor: pointer; text-wrap: pretty; background: none; border: 0; padding: 0; text-align: left; }
.rd-cell-name:hover { color: var(--rd-accent); text-decoration: underline; }
.rd-cell-sub { font-size: 13px; color: var(--rd-muted); }
.rd-cell-sub--none { color: var(--rd-faintest); }
.rd-cell-meta { font-size: 12px; color: var(--rd-faint); }
.rd-cell-text { font-size: 13px; }
.rd-cell-strong { font-size: 14px; }
.rd-cell-warn { color: var(--rd-danger); }
.rd-cell-unset { color: var(--rd-faintest); font-weight: 400; }
.rd-actions { display: flex; gap: 6px; justify-content: flex-end; position: relative; }
.rd-actions .rd-btn { flex: none; }
.rd-check { width: 16px; height: 16px; accent-color: var(--rd-accent); cursor: pointer; margin: 0; }

/* Status badges */
.rd-status { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rd-badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.rd-badge--assigned { background: var(--rd-success-soft); color: var(--rd-success-ink); }
.rd-badge--past { background: var(--rd-neutral-soft); color: var(--rd-muted); }
.rd-badge--draft { padding: 1px 8px; border: 1px dashed var(--rd-input-hover); color: var(--rd-muted); }
.rd-badge--store { background: var(--rd-purple-soft); color: var(--rd-purple-ink); }
.rd-badge--editing { background: var(--rd-accent-soft); color: var(--rd-accent); }
.rd-oncal { font-size: 12px; color: var(--rd-accent); display: flex; align-items: center; gap: 5px; }
.rd-oncal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-accent); }

/* Athlete assign cell */
.rd-assign-btn { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 8px 4px 4px; margin-left: -4px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; color: var(--rd-ink); }
.rd-assign-btn:hover { border-color: var(--rd-input-border); background: var(--rd-surface); }
.rd-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rd-avatar-bg); color: var(--rd-heading); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.rd-avatar--empty { width: 24px; height: 24px; background: transparent; border: 1px dashed var(--rd-input-hover); color: var(--rd-faint); font-size: 14px; font-weight: 400; }
.rd-assign-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-assign-name--empty { color: var(--rd-faint); }
.rd-caret { font-size: 10px; color: var(--rd-faint); }
.rd-assign-edit { display: flex; gap: 6px; align-items: center; }
.rd-assign-edit select { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--rd-accent); border-radius: 7px; font-size: 13px; padding: 0 6px; background: var(--rd-surface); color: var(--rd-ink); }
.rd-x { height: 32px; width: 28px; border: 0; background: transparent; color: var(--rd-muted); font-size: 16px; cursor: pointer; border-radius: 6px; }
.rd-x:hover { background: var(--rd-hover); color: var(--rd-ink); }

/* Switch */
.rd-switch-wrap { display: flex; align-items: center; gap: 8px; }
.rd-switch { flex: none; width: 36px; height: 20px; border: 0; border-radius: 10px; background: var(--rd-switch-off); padding: 2px; cursor: pointer; display: flex; justify-content: flex-start; box-sizing: border-box; }
.rd-switch::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #1b243033; }
.rd-switch[aria-checked="true"] { background: var(--rd-success); justify-content: flex-end; }
.rd-switch--accent[aria-checked="true"] { background: var(--rd-accent); }
.rd-switch--lg { width: 40px; height: 22px; border-radius: 11px; }
.rd-switch--lg::after { width: 18px; height: 18px; }
.rd-switch:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.rd-switch-label { font-size: 13px; font-weight: 500; color: var(--rd-faint); }
.rd-switch-label.is-on { color: var(--rd-success-ink); }

/* Popover menu */
/* Menus and popovers are placed with position:fixed by rdPlacePopovers() so the
   table's horizontal-scroll wrapper can't clip them. */
.rd-menu { position: fixed; z-index: 900; width: 210px; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 10px; box-shadow: var(--rd-shadow-pop); padding: 6px; display: flex; flex-direction: column; text-align: left; }
.rd-menu__item { text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--rd-ink); text-decoration: none; display: block; }
.rd-menu__item:hover { background: var(--rd-hover); text-decoration: none; color: var(--rd-ink); }
.rd-menu__item--danger { color: var(--rd-danger); }
.rd-menu__item--danger:hover { background: var(--rd-danger-soft); color: var(--rd-danger); }
.rd-menu__sep { height: 1px; background: var(--rd-border-soft); margin: 4px 0; }
.rd-pop { position: fixed; z-index: 900; width: 280px; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 10px; box-shadow: var(--rd-shadow-pop); padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.rd-pop__title { font-size: 13px; font-weight: 600; color: var(--rd-ink); }
.rd-pop label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--rd-muted); }
.rd-pop select, .rd-pop input { height: 34px; box-sizing: border-box; border: 1px solid var(--rd-input-border); border-radius: 7px; padding: 0 8px; font-size: 13px; background: var(--rd-surface); color: var(--rd-ink); }
.rd-pop__foot { display: flex; justify-content: flex-end; gap: 6px; }

/* ── Form fields ────────────────────────────────────────────────────────── */
.rd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rd-field--full { grid-column: 1 / -1; }
.rd-label { font-size: 13px; font-weight: 500; color: var(--rd-ink-2); }
.rd-label small { font-weight: 400; color: var(--rd-faint); }
.rd-hint { margin: 0; font-size: 12px; color: var(--rd-faint); text-wrap: pretty; }
.rd-input, .rd-page .rd-field input[type=text], .rd-page .rd-field input[type=number], .rd-page .rd-field input[type=date], .rd-select, .rd-textarea {
    height: 38px; box-sizing: border-box; width: 100%; border: 1px solid var(--rd-input-border); border-radius: 8px; padding: 0 12px; font-size: 14px; color: var(--rd-ink); background: var(--rd-surface); outline: none;
}
.rd-select { padding: 0 10px; }
.rd-textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.rd-input:focus, .rd-page .rd-field input:focus, .rd-select:focus, .rd-textarea:focus { border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
.rd-affix { display: flex; align-items: center; height: 38px; box-sizing: border-box; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); padding-right: 12px; }
.rd-affix:focus-within { border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
.rd-page .rd-field .rd-affix input { flex: 1; min-width: 0; width: auto; height: 100%; border: 0; border-radius: 0; background: transparent; padding: 0 12px; font-size: 14px; color: var(--rd-ink); outline: none; box-shadow: none; }
.rd-page .rd-field .rd-affix input:focus { box-shadow: none; }
.rd-affix span { font-size: 13px; color: var(--rd-faint); white-space: nowrap; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--rd-grid-min, 220px), 1fr)); gap: 14px 16px; }
.rd-error { font-size: 13px; color: var(--rd-danger); }

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.rd-drawer-overlay { position: fixed; inset: 0; background: var(--rd-overlay); z-index: 1000; }
.rd-drawer-overlay[aria-hidden="true"], .rd-drawer[aria-hidden="true"] { display: none; }
.rd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--rd-surface); z-index: 1001; box-shadow: var(--rd-shadow-drawer); display: flex; flex-direction: column; color: var(--rd-ink); font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }
.rd-drawer--wide { width: 520px; }
.rd-drawer button, .rd-drawer input, .rd-drawer select, .rd-drawer textarea { font-family: inherit; }
.rd-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--rd-border); }
.rd-drawer__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--rd-heading); }
.rd-drawer__sub { font-size: 13px; color: var(--rd-muted); }
.rd-drawer__close { width: 32px; height: 32px; border: 0; background: transparent; font-size: 20px; color: var(--rd-muted); cursor: pointer; border-radius: 6px; flex: none; }
.rd-drawer__close:hover { background: var(--rd-hover); }
.rd-drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.rd-drawer__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--rd-border); }
.rd-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--rd-border); border-radius: 10px; }
.rd-toggle-row__title { font-size: 14px; font-weight: 600; }
.rd-toggle-row__hint { font-size: 12px; color: var(--rd-muted); }
.rd-toggle-row__hint.is-warn { color: var(--rd-danger); }
.rd-drawer .urc-rte, .rd-drawer [contenteditable] { color: var(--rd-ink); }

/* Planning guide drawer */
.rd-guide { padding: 20px 24px 32px; gap: 28px; }
.rd-guide section { display: flex; flex-direction: column; gap: 12px; }
.rd-guide section + section { border-top: 1px solid var(--rd-border-soft); padding-top: 24px; }
.rd-guide h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--rd-ink); }
.rd-guide ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.rd-guide p { margin: 0; font-size: 14px; line-height: 1.45; }
.rd-guide__sub { font-size: 13px; font-weight: 600; color: var(--rd-muted); }
.rd-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--rd-muted); }
.rd-legend span { display: flex; align-items: center; gap: 6px; }
.rd-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rd-mixrow { display: flex; flex-direction: column; gap: 6px; }
.rd-mixrow__label { font-size: 13px; font-weight: 500; }
.rd-mixbar { display: flex; height: 22px; border-radius: 5px; overflow: hidden; gap: 2px; }
.rd-mixbar > div { font-size: 11px; font-weight: 600; display: flex; align-items: center; padding-left: 6px; font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; }
.rd-mix--end { background: var(--rd-mix-end); color: #16365e; }
.rd-mix--spec { background: var(--rd-mix-spec); color: #0f3d24; }
.rd-mix--lt { background: var(--rd-mix-lt); color: #fff; }
.rd-mix--vo2 { background: var(--rd-mix-vo2); color: #fff; }

/* Toast */
.rd-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; background: var(--rd-toast-bg); color: var(--rd-bg); border-radius: 10px; padding: 12px 16px; font-size: 14px; display: flex; align-items: center; gap: 16px; box-shadow: 0 10px 30px #1b243040; max-width: calc(100vw - 32px); font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }
.rd-toast[hidden] { display: none; }
.rd-toast--error { background: var(--rd-danger); color: #fff; }

/* ── Plan builder ───────────────────────────────────────────────────────── */
.rd-builder-head { display: flex; flex-direction: column; gap: 6px; }
.rd-builder-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rd-builder-title h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--rd-heading); }
.rd-status-pill { font-size: 12px; font-weight: 500; color: var(--rd-muted); background: var(--rd-neutral-soft); border-radius: 999px; padding: 2px 10px; }
.rd-status-pill.is-dirty { color: var(--rd-warn-ink); }
.rd-status-pill.is-assigned { color: var(--rd-success-ink); background: var(--rd-success-soft); }
.rd-builder { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rd-builder__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rd-builder__aside { flex: 1 1 300px; max-width: 360px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.rd-panel { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.rd-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rd-panel__head > div { display: flex; flex-direction: column; gap: 2px; max-width: 560px; flex: 1 1 280px; }
.rd-panel__head > .rd-btn { flex: none; }
.rd-h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--rd-heading); }

.rd-blockbar { height: 28px; display: flex; gap: 2px; border-radius: 7px; overflow: hidden; background: var(--rd-hover); }
.rd-blockbar > div { flex-basis: 0; min-width: 0; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.rd-blockbar__ends { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--rd-faint); font-variant-numeric: tabular-nums; }
.rd-fit { font-weight: 500; }
.rd-fit--none { color: var(--rd-faint); }
.rd-fit--ok { color: var(--rd-ok-ink); }
.rd-fit--under { color: var(--rd-warn-ink); }
.rd-fit--over { color: var(--rd-danger); }
.rd-stripes { background: repeating-linear-gradient(135deg, var(--rd-stripe-a) 0 6px, var(--rd-stripe-b) 6px 12px); }
.rd-blk--base { background: var(--rd-blk-base); }
.rd-blk--vo2 { background: var(--rd-blk-vo2); }
.rd-blk--lt { background: var(--rd-blk-lt); }
.rd-blk--end { background: var(--rd-blk-end); }
.rd-blk--taper { background: var(--rd-blk-taper); }
.rd-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.rd-block { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rd-border); border-radius: 10px; }
.rd-block__dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.rd-block__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-block__name { font-size: 14px; font-weight: 600; }
.rd-block__desc { font-size: 12px; color: var(--rd-faint); }
.rd-stepper { flex: none; display: flex; align-items: center; border: 1px solid var(--rd-input-border); border-radius: 8px; overflow: hidden; }
.rd-stepper button { width: 32px; height: 32px; border: 0; background: var(--rd-surface); font-size: 16px; color: var(--rd-ink-2); cursor: pointer; }
.rd-stepper button:hover { background: var(--rd-hover); }
.rd-page .rd-stepper input { width: 40px; height: 32px; border: 0; border-left: 1px solid var(--rd-border); border-right: 1px solid var(--rd-border); text-align: center; font-size: 14px; font-weight: 600; color: var(--rd-ink); background: var(--rd-surface); outline: none; font-variant-numeric: tabular-nums; padding: 0; border-radius: 0; box-sizing: border-box; }

.rd-races { display: flex; flex-direction: column; gap: 8px; }
.rd-race { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--rd-border); border-radius: 10px; }
.rd-page .rd-race select, .rd-page .rd-race input { height: 34px; box-sizing: border-box; border: 1px solid var(--rd-input-border); border-radius: 7px; font-size: 13px; color: var(--rd-ink); background: var(--rd-surface); outline: none; }
.rd-page .rd-race select { flex: none; padding: 0 6px; font-weight: 600; }
.rd-page .rd-race input[name="b_race_name"] { flex: 1 1 160px; min-width: 0; padding: 0 10px; }
.rd-page .rd-race input[name="b_race_date"] { flex: none; width: 130px; padding: 0 8px; }
.rd-page .rd-race input:focus { border-color: var(--rd-accent); }
.rd-race__info { flex: none; min-width: 92px; font-size: 12px; color: var(--rd-muted); }
.rd-race__info.is-warn { color: var(--rd-danger); }
.rd-race__info.is-muted { color: var(--rd-faint); }
.rd-race__remove { flex: none; width: 30px; height: 30px; border: 0; background: transparent; border-radius: 6px; font-size: 16px; color: var(--rd-faint); cursor: pointer; }
.rd-race__remove:hover { background: var(--rd-danger-soft); color: var(--rd-danger); }
.rd-muted-note { font-size: 13px; color: var(--rd-faint); }

.rd-stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--rd-surface-2); border-radius: 10px; }
.rd-stat__label { font-size: 12px; color: var(--rd-muted); }
.rd-stat__value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-divider-block { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rd-border-soft); }
.rd-mix-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rd-mix-head strong { font-size: 13px; font-weight: 600; }
.rd-mix-head span { font-size: 12px; color: var(--rd-faint); }
.rd-minibar { height: 10px; display: flex; gap: 2px; border-radius: 5px; overflow: hidden; }
.rd-minibar > div { flex-basis: 0; }
.rd-mix-list { display: flex; flex-direction: column; gap: 4px; }
.rd-mix-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rd-mix-item i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.rd-mix-item span { flex: 1; color: var(--rd-muted); }
.rd-mix-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-actions-col { display: flex; flex-direction: column; gap: 8px; }
.rd-actions-col .rd-btn--primary { height: 40px; }
.rd-actions-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-actions-pair .rd-btn { height: 36px; font-size: 13px; padding: 0 8px; }
.rd-center-hint { font-size: 12px; color: var(--rd-faint); text-align: center; }
.rd-save-msg { font-size: 13px; text-align: center; }
.rd-save-msg:empty { display: none; }

/* flatpickr inputs keep the field look */
.rd-page .rd-field input.flatpickr-input[readonly] { background: var(--rd-surface); cursor: pointer; }

/* ── Blocks & Hours editor ──────────────────────────────────────────────── */
.rd-sticky-head { position: sticky; top: 0; z-index: 40; background: var(--rd-surface); border-bottom: 1px solid var(--rd-border); }
.rd-sticky-head__inner { max-width: 1280px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rd-sticky-head__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-sticky-head__title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rd-sticky-head__title h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--rd-heading); text-align: left; }
.rd-sticky-head__meta { font-size: 13px; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.rd-sticky-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-dirty { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rd-warn-ink); }
.rd-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rd-warn-dot); }
.rd-dirty[hidden] { display: none; }
.rd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rd-stat-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rd-stat-card select { height: 34px; border: 1px solid var(--rd-input-border); border-radius: 7px; padding: 0 8px; font-size: 14px; font-weight: 600; background: var(--rd-surface); color: var(--rd-ink); outline: none; margin-top: 2px; }
.rd-stat-card select:focus { border-color: var(--rd-accent); }
.rd-stat-card__value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-stat-card__unit { font-size: 13px; font-weight: 500; color: var(--rd-faint); }
.rd-segs { display: flex; gap: 4px; min-height: 64px; }
.rd-seg { flex-basis: 0; min-width: 104px; border-radius: 9px; padding: 9px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; cursor: grab; color: #fff; }
.rd-seg.is-dragging { opacity: .5; }
.rd-seg.is-over { box-shadow: 0 0 0 3px var(--rd-accent); }
.rd-seg__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-seg__ctrl { display: flex; align-items: center; gap: 6px; }
.rd-seg__ctrl button { width: 22px; height: 22px; border: 0; border-radius: 5px; background: #ffffff33; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.rd-seg__ctrl button:hover { background: #ffffff55; }
.rd-seg__ctrl span { min-width: 24px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-seg-gap { flex-basis: 0; min-width: 60px; border-radius: 9px; border: 1px dashed var(--rd-input-hover); display: grid; place-items: center; font-size: 12px; color: var(--rd-muted); }
.rd-wk-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; overflow: hidden; }
.rd-wk-card__head { padding: 16px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--rd-border); }
.rd-wk-card__head > div:first-child { display: flex; flex-direction: column; gap: 2px; max-width: 620px; }
.rd-legend i.rd-stripes-rec { width: 10px; height: 8px; background: repeating-linear-gradient(135deg, var(--rd-input-hover) 0 2px, var(--rd-border) 2px 4px); }
.rd-bars { padding: 18px 20px 10px; display: flex; align-items: flex-end; gap: 4px; height: 160px; box-sizing: border-box; border-bottom: 1px solid var(--rd-border-soft); }
.rd-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.rd-bar__val { font-size: 11px; font-weight: 600; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.rd-bar__fill { width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; }
.rd-bar__wk { font-size: 11px; color: var(--rd-faint); font-variant-numeric: tabular-nums; }
.rd-bar__wk.is-now { color: var(--rd-accent); font-weight: 700; }
.rd-weeks { min-width: 780px; display: grid; grid-template-columns: 64px minmax(150px, 1.2fr) minmax(200px, 1.4fr) 110px 96px 170px; font-size: 14px; }
.rd-weeks > div { padding: 8px 12px; border-bottom: 1px solid var(--rd-border-soft); display: flex; align-items: center; gap: 8px; background: var(--rd-surface); min-width: 0; }
.rd-weeks > .rd-weeks__th { padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--rd-muted); background: var(--rd-surface-2); border-bottom-color: var(--rd-border); }
.rd-weeks > .rd-c-first { padding-left: 20px; }
.rd-weeks > .rd-c-last { padding-right: 20px; }
.rd-weeks > .is-now { background: var(--rd-accent-row); }
.rd-weeks > .is-highlight { background: var(--rd-accent-soft); transition: background .3s; }
.rd-wk-num { font-variant-numeric: tabular-nums; color: var(--rd-muted); }
.rd-wk-dates { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 0 !important; }
.rd-wk-note { font-size: 12px; font-weight: 500; color: var(--rd-accent); }
.rd-wk-note.is-warn { color: var(--rd-danger); }
.rd-wk-blk-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.rd-wk-blk select { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--rd-border); border-radius: 7px; padding: 0 6px; font-size: 13px; background: var(--rd-surface); color: var(--rd-ink); outline: none; }
.rd-wk-blk select:hover { border-color: var(--rd-input-hover); }
.rd-wk-blk select:focus { border-color: var(--rd-accent); }
.rd-wk-edited { flex: none; font-size: 11px; font-weight: 500; color: var(--rd-warn-ink); }
.rd-wk-comp { justify-content: flex-end; font-variant-numeric: tabular-nums; color: var(--rd-muted); }
.rd-wk-comp.is-overridden { color: var(--rd-faintest); text-decoration: line-through; }
.rd-hours { display: flex; align-items: center; width: 96px; height: 32px; box-sizing: border-box; border: 1px solid var(--rd-input-border); border-radius: 7px; background: var(--rd-surface); padding-right: 8px; }
.rd-hours.is-set { border-color: var(--rd-accent); background: var(--rd-accent-soft); }
.rd-page .rd-hours input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--rd-ink); outline: none; text-align: right; font-variant-numeric: tabular-nums; }
.rd-page .rd-hours input::placeholder { color: var(--rd-faintest); font-weight: 500; }
.rd-hours span { font-size: 12px; color: var(--rd-faint); }
.rd-reset { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; color: var(--rd-faint); font-size: 14px; cursor: pointer; }
.rd-reset:hover { background: var(--rd-hover); color: var(--rd-ink); }

/* ── Calendar tab ───────────────────────────────────────────────────────────
   Every rule is prefixed with #tab-calendar so it outranks the older
   `html.dark-mode .tp-cal-*` rules in training_programs.css. */
.rd-page #tab-calendar { padding: 20px 32px 64px; background: var(--rd-bg); }
#tab-calendar .tp-cal-shell { max-width: 1440px; margin: 0 auto; gap: 16px; min-height: 0; }
#tab-calendar .tp-cal-main { gap: 12px; }

/* Toolbar */
#tab-calendar .tp-cal-toolbar { justify-content: space-between; gap: 12px; }
#tab-calendar .tp-cal-toolbar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#tab-calendar .tp-cal-toolbar .rd-btn { height: 36px; }
#tab-calendar .tp-cal-libbtn.is-active { display: none; }
#tab-calendar .cal-ath-sw { gap: 10px; }
#tab-calendar .ath-sw__trigger { height: 36px; min-width: 200px; box-sizing: border-box; padding: 0 10px 0 6px; gap: 8px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 14px; font-weight: 600; box-shadow: none; }
#tab-calendar .ath-sw__trigger:hover { border-color: var(--rd-input-hover); background: var(--rd-surface); box-shadow: none; }
#tab-calendar .ath-sw__trigger.is-open { border-color: var(--rd-accent); color: var(--rd-ink); background: var(--rd-surface); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
#tab-calendar .ath-sw__trigger > svg:first-child { width: 24px; height: 24px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--rd-avatar-bg); color: var(--rd-heading); }
#tab-calendar #calAthSwLabel { flex: 1; text-align: left; }
#tab-calendar .ath-sw__chevron { color: var(--rd-faint); }
#tab-calendar .ath-sw__coached { font-size: 13px; font-weight: 500; color: var(--rd-muted); }
#tab-calendar .ath-sw__coached input { accent-color: var(--rd-accent); }
#tab-calendar .tp-cal-provider { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
#tab-calendar .tp-cal-applybar { align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; background: var(--rd-accent-soft); border: 1px solid var(--rd-accent-border); border-radius: 8px; }
#tab-calendar .tp-cal-applybar select,
#tab-calendar .tp-cal-applybar input { height: 30px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--rd-input-border); border-radius: 7px; background: var(--rd-surface); color: var(--rd-ink); font-size: 13px; }
#tab-calendar .tp-cal-applybar .rd-btn { height: 30px; }
#tab-calendar #calApplyPlanMsg { font-size: 12px; }
#tab-calendar .tp-plan-save-btn { height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 13px; font-weight: 500; }
#tab-calendar .tp-plan-save-btn:hover { background: var(--rd-hover); }
#tab-calendar .tp-hidden-hint { background: var(--rd-warn-soft); color: var(--rd-warn-ink); border-color: var(--rd-warn-border); font-size: 12px; font-weight: 500; }
#tab-calendar .tp-hidden-hint:hover { border-color: var(--rd-warn-dot); background: var(--rd-warn-soft); }
#tab-calendar .tp-hidden-toast__dot { background: var(--rd-warn-dot); }

#tab-calendar .tp-cal-tools { margin-left: 0; background: var(--rd-surface); border: 1px solid var(--rd-input-border); border-radius: 8px; box-shadow: none; }
#tab-calendar .tp-cal-tool { height: 34px; box-sizing: border-box; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--rd-ink); }
#tab-calendar .tp-cal-tool + .tp-cal-tool { border-left: 1px solid var(--rd-border); }
#tab-calendar .tp-cal-tool:hover { background: var(--rd-hover); color: var(--rd-ink); text-decoration: none; }
#tab-calendar .tp-cal-tool.is-active { background: var(--rd-accent-soft); color: var(--rd-accent); font-weight: 600; }
#tab-calendar .tp-cal-tool:focus-visible { outline: 2px solid var(--rd-accent); }

/* Calendar card: month nav, grid, sync bar */
#tab-calendar .tp-cal-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; overflow: hidden; }
#tab-calendar .tp-cal-navbar { padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--rd-border); }
#tab-calendar .tp-cal-nav { gap: 8px; }
#tab-calendar .tp-cal-nav button { height: 32px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--rd-input-border); border-radius: 7px; background: var(--rd-surface); color: var(--rd-ink); font-size: 13px; font-weight: 500; }
#tab-calendar .tp-cal-nav button:hover { background: var(--rd-hover); }
#tab-calendar .tp-cal-nav .tp-cal-nav__arrow { width: 32px; padding: 0; font-size: 18px; line-height: 1; }
#tab-calendar .tp-cal-month-label { margin: 0 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: 0; color: var(--rd-heading); text-align: left; }
#tab-calendar .tp-cal-navbar__actions { display: flex; align-items: center; gap: 4px; }
#tab-calendar .tp-cal-headbtn { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--rd-muted); font-size: 13px; font-weight: 400; cursor: pointer; }
#tab-calendar .tp-cal-headbtn svg { width: 14px; height: 14px; }
#tab-calendar .tp-cal-headbtn:hover { background: var(--rd-hover); color: var(--rd-ink); border-color: transparent; }
#tab-calendar .tp-cal-headbtn:disabled { opacity: .6; cursor: default; }
#tab-calendar .tp-cal-headbtn.is-busy svg { animation: tp-spin .8s linear infinite; }
#tab-calendar .tp-cal-del-month:hover { background: var(--rd-danger-soft); color: var(--rd-danger); }

#tab-calendar .tp-cal-scroll { overflow-x: auto; }
#tab-calendar .tp-cal-grid { min-width: 720px; border: 0; border-radius: 0; background: var(--rd-surface); overflow: visible; }
#tab-calendar .tp-cal-dow-row,
#tab-calendar .tp-cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)) 176px; }
#tab-calendar .tp-cal-dow-row { background: var(--rd-surface-2); border-bottom: 1px solid var(--rd-border); }
#tab-calendar .tp-cal-dow { padding: 8px 10px; background: transparent; text-align: left; font-size: 12px; font-weight: 600; color: var(--rd-muted); letter-spacing: .04em; }
#tab-calendar .tp-cal-dow-week-act { padding: 8px 12px; border-left: 1px solid var(--rd-border); background: transparent; }
#tab-calendar .tp-cal-week { height: auto; border-bottom: 1px solid var(--rd-border-soft); }
#tab-calendar .tp-cal-week:last-child { border-bottom: 0; }
#tab-calendar .tp-cal-cell { height: auto; min-height: 118px; overflow: visible; padding: 6px; gap: 4px; border-right: 1px solid var(--rd-border-soft); background: var(--rd-surface); }
#tab-calendar .tp-cal-cell.other-month { background: var(--rd-cell-off); }
#tab-calendar .tp-cal-cell.is-today { background: var(--rd-accent-row); }
#tab-calendar .tp-cal-cell.drag-over { background: var(--rd-accent-soft) !important; box-shadow: inset 0 0 0 2px var(--rd-accent); }
#tab-calendar .tp-cal-cell .tp-block-bar,
#tab-calendar .tp-cal-cell .tp-race-bar { margin: -6px -6px 2px; width: auto; font-size: 10px; padding: 2px 6px; }
#tab-calendar .tp-cal-cell .tp-block-bar + .tp-race-bar { margin-top: -2px; }
#tab-calendar .tp-race-bar { background: var(--rd-missed); }
#tab-calendar .tp-block-bar--base, #tab-calendar .tp-wk-phase--base { background: var(--rd-blk-base); }
#tab-calendar .tp-block-bar--vo2max, #tab-calendar .tp-wk-phase--vo2max { background: var(--rd-blk-vo2); }
#tab-calendar .tp-block-bar--lactate, #tab-calendar .tp-wk-phase--lactate { background: var(--rd-blk-lt); }
#tab-calendar .tp-block-bar--endurance, #tab-calendar .tp-wk-phase--endurance { background: var(--rd-blk-end); }
#tab-calendar .tp-block-bar--taper, #tab-calendar .tp-wk-phase--taper { background: var(--rd-blk-taper); }
#tab-calendar .tp-cal-day-header { height: 22px; margin: 0; }
#tab-calendar .tp-cal-day-num { padding: 0 4px; margin: 0; font-size: 12px; font-weight: 500; color: var(--rd-ink-2); font-variant-numeric: tabular-nums; }
#tab-calendar .tp-cal-cell.other-month .tp-cal-day-num { color: var(--rd-faintest); }
#tab-calendar .tp-cal-cell.is-today .tp-cal-day-num { min-width: 22px; height: 22px; box-sizing: border-box; display: grid; place-items: center; border-radius: 11px; background: var(--rd-accent); color: #fff; font-weight: 600; }
#tab-calendar .tp-cal-note-btn { color: var(--rd-faint); font-size: 12px; padding: 2px 5px; }
#tab-calendar .tp-cal-note-btn:hover { color: var(--rd-accent); background: var(--rd-accent-soft); }
#tab-calendar .tp-cal-note-btn.has-note { color: var(--rd-accent); }
#tab-calendar .tp-cal-chips { flex: none; overflow: visible; gap: 4px; }

/* Calendar chips. The state shows as the background tint and the dot in the
   meta line; the sport emoji is dropped to match the design's dot language. */
#tab-calendar .tp-cal-chip { gap: 2px; padding: 4px 6px; border: 0; border-radius: 6px; background: var(--rd-neutral-soft); color: var(--rd-ink); font-size: 12px; box-shadow: none; }
#tab-calendar .tp-cal-chip:hover { transform: none; box-shadow: 0 0 0 1px var(--rd-input-hover); }
#tab-calendar .tp-cal-chip.synced { background: var(--rd-accent-soft); }
#tab-calendar .tp-cal-chip.hidden { background: transparent; box-shadow: inset 0 0 0 1px var(--rd-input-hover); opacity: 1; }
#tab-calendar .tp-cal-chip.hidden:hover { box-shadow: inset 0 0 0 1px var(--rd-accent); }
#tab-calendar .tp-cal-chip--pending { background: var(--rd-warn-soft); }
#tab-calendar .tp-cal-chip--done { background: var(--rd-success-soft); }
#tab-calendar .tp-cal-chip.adh-completed,
#tab-calendar .tp-cal-chip.adh-partial,
#tab-calendar .tp-cal-chip.adh-skipped { box-shadow: inset 3px 0 0 var(--rd-adh); padding-left: 9px; }
#tab-calendar .tp-cal-chip.adh-completed { --rd-adh: var(--rd-success); }
#tab-calendar .tp-cal-chip.adh-partial { --rd-adh: var(--rd-warn-dot); }
#tab-calendar .tp-cal-chip.adh-skipped { --rd-adh: var(--rd-missed); }
#tab-calendar .tp-cal-chip.is-cut { opacity: .35; }
#tab-calendar .tp-chip-icon { display: none; }
#tab-calendar .tp-chip-top { gap: 4px; }
#tab-calendar .tp-chip-name,
#tab-calendar .tp-cal-chip.synced .tp-chip-name,
#tab-calendar .tp-cal-chip.hidden .tp-chip-name,
#tab-calendar .tp-cal-chip--pending .tp-chip-name { font-size: 12px; font-weight: 500; color: var(--rd-ink); line-height: 1.35; }
#tab-calendar .tp-cal-chip.hidden .tp-chip-name { color: var(--rd-muted); }
#tab-calendar .tp-chip-meta { display: block; line-height: 1.35; margin: 0; font-size: 11px; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
#tab-calendar .tp-chip-sync-dot { width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px; background: var(--rd-faint); }
#tab-calendar .tp-chip-sync-dot.synced { background: var(--rd-accent); }
#tab-calendar .tp-chip-sync-dot.hidden { width: 6px; height: 6px; box-sizing: border-box; background: transparent; border: 1.5px solid var(--rd-faint); }
#tab-calendar .tp-chip-sync-dot.warn { background: var(--rd-missed); }
#tab-calendar .tp-chip-desc { font-size: 11px; color: var(--rd-muted); opacity: 1; -webkit-line-clamp: 1; line-clamp: 1; }
#tab-calendar .tp-chip-done-check { color: var(--rd-success-ink); font-size: 11px; font-weight: 700; }
#tab-calendar .tp-chip-prescribed { font-size: 11px; font-style: normal; color: var(--rd-purple-ink); border-top-color: var(--rd-border); }
#tab-calendar .tp-chip-hidden-mark,
#tab-calendar .tp-chip-custom-mark { color: var(--rd-faint); font-size: 11px; }
#tab-calendar .tp-cal-chip__menu,
#tab-calendar .tp-cal-chip__x { color: var(--rd-faint); font-size: 14px; padding: 0 3px; }
#tab-calendar .tp-cal-chip__menu:hover,
#tab-calendar .tp-cal-chip__x:hover { color: var(--rd-ink); background: var(--rd-hover); }
#tab-calendar .tp-cal-note-chip,
#tab-calendar .tp-cal-note-chip.is-hidden { gap: 6px; padding: 4px 6px 4px 9px; border: 0; border-radius: 6px; background: var(--rd-neutral-soft); color: var(--rd-ink-2); box-shadow: inset 3px 0 0 var(--rd-faint); font-size: 12px; line-height: 1.35; }
#tab-calendar .tp-cal-note-chip.is-hidden { background: transparent; border: 1px dashed var(--rd-input-hover); padding: 3px 5px 3px 8px; box-shadow: inset 3px 0 0 var(--rd-faint); color: var(--rd-muted); }
#tab-calendar .tp-cal-note-chip:hover { box-shadow: inset 3px 0 0 var(--rd-accent), 0 0 0 1px var(--rd-input-hover); }
#tab-calendar .tp-cal-note-chip__icon { font-size: 11px; }
#tab-calendar .tp-cal-note-chip__content .tp-cal-note-chip__text { font-size: 11px; color: var(--rd-muted); }
#tab-calendar .tp-cal-note-chip__subject { font-weight: 600; }
/* "Hidden" sits on its own line inside the chip so it never squeezes the text out of a narrow day. */
#tab-calendar .tp-cal-note-chip__hiddentag { align-self: flex-start; margin: 0 0 1px; padding: 0; border: 0; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rd-faint); }
#tab-calendar .tp-cal-note-chip.is-hidden .tp-cal-note-chip__subject { color: var(--rd-ink-2); }
@media (max-width: 768px) { #tab-calendar .tp-cal-note-chip.is-hidden .tp-cal-note-chip__icon { display: none; } }
#tab-calendar .tp-cal-paste-zone { font-size: 11px; color: var(--rd-accent); border: 1px dashed var(--rd-accent-border); border-radius: 6px; padding: 4px 6px; }
#tab-calendar .tp-cal-paste-zone:hover { background: var(--rd-accent-soft); }

/* Week column */
#tab-calendar .tp-cal-week-summary { padding: 10px 12px; gap: 4px; border-left: 1px solid var(--rd-border); background: var(--rd-cell-off); font-size: 12px; }
#tab-calendar .tp-wk-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
#tab-calendar .tp-wk-range { font-size: 11px; font-weight: 600; color: var(--rd-faint); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
#tab-calendar .tp-cal-week-act { display: contents; }
#tab-calendar .tp-cal-week-btn { width: 24px; height: 22px; padding: 0; border-radius: 6px; font-size: 14px; color: var(--rd-faintest); }
#tab-calendar .tp-cal-week-act.has-content .tp-cal-week-btn { color: var(--rd-muted); }
#tab-calendar .tp-cal-week-btn:hover { color: var(--rd-ink); background: var(--rd-hover); }
#tab-calendar .tp-wk-title { font-size: 11px; font-weight: 600; color: var(--rd-faint); letter-spacing: .04em; }
#tab-calendar .tp-wk-row { gap: 6px; color: var(--rd-faint); }
#tab-calendar .tp-wk-row span:first-child { color: var(--rd-faint); font-weight: 400; }
#tab-calendar .tp-wk-row strong { color: var(--rd-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
#tab-calendar .tp-wk-row--head { font-size: 10px; font-weight: 600; color: var(--rd-faintest); letter-spacing: .04em; }
#tab-calendar .tp-wk-bar-wrap { height: 5px; margin: 2px 0 4px; border-radius: 3px; background: var(--rd-border); }
#tab-calendar .tp-wk-bar { border-radius: 3px; background: var(--rd-faint); }
#tab-calendar .tp-wk-bar--low { background: var(--rd-warn-dot); }
#tab-calendar .tp-wk-bar--ok { background: var(--rd-accent); }
#tab-calendar .tp-wk-bar--full { background: var(--rd-success); }
#tab-calendar .tp-wk-prescribed { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--rd-border); }
#tab-calendar .tp-wk-phase { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }

/* Sync bar (footer of the calendar card) */
#tab-calendar .tp-cal-sync-bar { gap: 10px; padding: 10px 16px; border-top: 1px solid var(--rd-border); background: var(--rd-surface); }
#tab-calendar .tp-auto-sync-indicator { font-size: 13px; color: var(--rd-muted); }
#tab-calendar .tp-asi-dot--ok { background: var(--rd-success); }
#tab-calendar .tp-asi-dot--pending,
#tab-calendar .tp-asi-dot--warn,
#tab-calendar .tp-asi-dot--syncing { background: var(--rd-warn-dot); }
#tab-calendar .tp-asi-dot--err { background: var(--rd-danger); }
#tab-calendar .tp-asi-dot--idle { background: var(--rd-faintest); }
#tab-calendar .tp-sync-pill { font-size: 12px; font-weight: 500; padding: 2px 9px; border: 1px solid transparent; }
#tab-calendar .tp-sync-pill.draft { background: var(--rd-warn-soft); color: var(--rd-warn-ink); border-color: var(--rd-warn-border); }
#tab-calendar .tp-sync-pill.hidden { background: transparent; color: var(--rd-muted); border: 1px dashed var(--rd-input-hover); }
#tab-calendar .tp-sync-pill.unsynced { background: var(--rd-neutral-soft); color: var(--rd-muted); }
#tab-calendar .tp-sync-pill.synced { background: var(--rd-accent-soft); color: var(--rd-accent); }
#tab-calendar .tp-cal-sync-bar__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#tab-calendar .tp-cal-refresh-btn { height: 32px; min-width: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--rd-input-border); border-radius: 7px; background: var(--rd-surface); color: var(--rd-muted); font-size: 13px; font-weight: 500; }
#tab-calendar .tp-cal-refresh-btn:hover { background: var(--rd-hover); color: var(--rd-ink); }
#tab-calendar .tp-cal-refresh-btn--primary { padding: 0 12px; border-color: var(--rd-accent); background: var(--rd-accent); color: #fff; font-weight: 600; }
#tab-calendar .tp-cal-refresh-btn--primary:hover { border-color: var(--rd-accent-hover); background: var(--rd-accent-hover); color: #fff; }
/* The sync bar sits at the bottom of the card (overflow: hidden), so open upward. */
#tab-calendar .tp-cal-overflow-menu { top: auto; bottom: calc(100% + 4px); background: var(--rd-surface); border-color: var(--rd-border); border-radius: 10px; box-shadow: var(--rd-shadow-pop); padding: 6px; }
#tab-calendar .tp-cal-overflow-menu .tp-ctx-item { font-size: 13px; color: var(--rd-ink); }
#tab-calendar .tp-cal-overflow-menu .tp-ctx-item:hover { background: var(--rd-hover); }

#tab-calendar .tp-cal-legend { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--rd-muted); }
#tab-calendar .tp-cal-legend span { display: flex; align-items: center; gap: 6px; }
#tab-calendar .tp-cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
#tab-calendar .tp-cal-legend__dot--synced { background: var(--rd-accent); }
#tab-calendar .tp-cal-legend__dot--released { background: var(--rd-faint); }
#tab-calendar .tp-cal-legend__dot--hidden { border: 1.5px solid var(--rd-faint); }
#tab-calendar .tp-cal-legend__dot--done { background: var(--rd-success); }
#tab-calendar .tp-cal-legend__dot--partial { background: var(--rd-warn-dot); }
#tab-calendar .tp-cal-legend__dot--missed { background: var(--rd-missed); }

/* Library drawer */
#tab-calendar .tp-cal-library { position: sticky; top: 16px; width: 300px; max-height: calc(100vh - 32px); background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; box-shadow: none; color: var(--rd-ink); }
#tab-calendar .tp-cal-library-header { padding: 16px 16px 12px; gap: 8px; border: 0; }
#tab-calendar .tp-cal-library h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--rd-heading); text-align: left; }
#tab-calendar .tp-cal-library-actions { display: flex; align-items: center; gap: 4px; }
#tab-calendar .tp-cal-drawer-btns { gap: 4px; }
#tab-calendar .tp-cal-library h2 { white-space: nowrap; }
#tab-calendar .tp-cal-add { position: relative; }
#tab-calendar .tp-cal-add > summary { list-style: none; gap: 6px; }
#tab-calendar .tp-cal-add > summary::-webkit-details-marker { display: none; }
#tab-calendar .tp-cal-add__caret { font-size: 10px; }
#tab-calendar .tp-cal-add__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 180px; padding: 6px; display: flex; flex-direction: column; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 10px; box-shadow: var(--rd-shadow-pop); }
#tab-calendar .tp-cal-add__menu .rd-menu__item { width: 100%; font-family: inherit; }
#tab-calendar .tp-cal-library-close { width: 32px; height: 32px; padding: 0; border-radius: 7px; font-size: 16px; color: var(--rd-muted); }
#tab-calendar .tp-cal-library-close:hover { background: var(--rd-hover); color: var(--rd-ink); }
#tab-calendar .tp-cal-library-filters { display: flex; gap: 8px; align-items: center; padding: 0 16px; flex-shrink: 0; }
#tab-calendar .tp-cal-library-filters input,
#tab-calendar .tp-cal-library-filters select,
#tab-calendar .tp-plan-search { height: 34px; box-sizing: border-box; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 13px; outline: none; }
#tab-calendar .tp-cal-library-filters input { width: 100%; min-width: 0; padding: 0 28px 0 10px; }
#tab-calendar .tp-plan-search { padding: 0 10px; }
#tab-calendar .tp-cal-library-filters select { flex: none; width: 104px; padding: 0 6px; cursor: pointer; }
#tab-calendar .tp-cal-library-filters input:focus,
#tab-calendar .tp-cal-library-filters select:focus { border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
#tab-calendar .tp-lib-search__clear { background: var(--rd-neutral-soft); color: var(--rd-muted); right: 6px; }
#tab-calendar .tp-cal-library-hint { padding: 8px 16px 12px; font-size: 12px; font-style: normal; color: var(--rd-faint); border-bottom: 1px solid var(--rd-border-soft); }
#tab-calendar .tp-cal-library-count:empty { display: none; }
#tab-calendar .tp-cal-library-count { padding: 8px 16px 0; font-size: 12px; color: var(--rd-faint); }
#tab-calendar .tp-cal-library-list { padding: 6px 8px 12px; }
#tab-calendar .tp-lib-empty { color: var(--rd-faint); font-size: 13px; }
#tab-calendar .tp-folder { border: 0; border-radius: 0; margin: 0; overflow: visible; }
#tab-calendar .tp-folder summary,
#tab-calendar .tp-folder--notes summary { padding: 9px 8px; gap: 8px; border-radius: 7px; background: transparent; color: var(--rd-ink); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
#tab-calendar .tp-folder summary:hover { background: var(--rd-hover); }
#tab-calendar .tp-folder summary::before { content: '▶'; width: 10px; flex: none; font-size: 9px; color: var(--rd-faint); transform: none; }
#tab-calendar details.tp-folder[open] summary::before { content: '▼'; transform: none; }
#tab-calendar .tp-folder summary > span { margin-left: auto; font-size: 12px; color: var(--rd-faint) !important; font-variant-numeric: tabular-nums; }
#tab-calendar .tp-folder-menu-btn { margin-left: 0; width: 22px; height: 22px; color: var(--rd-faint); }
#tab-calendar .tp-folder-menu-btn:hover { background: var(--rd-neutral-soft); color: var(--rd-ink); }
#tab-calendar .tp-folder-items { padding: 2px 0 8px 18px; gap: 6px; background: transparent; }
#tab-calendar .tp-folder-items.tp-folder-drop-active { outline: 2px dashed var(--rd-accent); background: var(--rd-accent-soft); }
#tab-calendar .tp-cal-drag-card { gap: 8px; padding: 10px 12px; border: 1px solid var(--rd-border); border-radius: 9px; background: var(--rd-surface); }
#tab-calendar .tp-cal-drag-card:hover { border-color: var(--rd-input-hover); box-shadow: 0 2px 8px #1b24300f; }
#tab-calendar .tp-cal-drag-card__name { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--rd-ink); }
#tab-calendar .tp-lib-mini-tl { height: 30px; margin: 0; padding: 0; border-radius: 4px; background: var(--rd-hover); }
#tab-calendar .tp-lib-stats { gap: 8px; font-size: 12px; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
#tab-calendar .tp-lib-stat-icon { display: none; }
#tab-calendar .tp-lib-stat-time { font-size: 12px; font-weight: 600; color: var(--rd-ink); }
#tab-calendar .tp-lib-stat-dist { color: var(--rd-faint); }
#tab-calendar .tp-lib-stat-tss { font-size: 12px; font-weight: 400; color: var(--rd-muted); }
#tab-calendar .tp-lib-edit-btn { color: var(--rd-faint); }
#tab-calendar .tp-lib-edit-btn:hover { color: var(--rd-ink); background: var(--rd-hover); }
#tab-calendar .tp-note-tpl-card { background: var(--rd-surface); border-color: var(--rd-border); gap: 4px; }
#tab-calendar .tp-note-tpl-card:hover { border-color: var(--rd-input-hover); }
#tab-calendar .tp-note-tpl-card__preview { font-size: 12px; color: var(--rd-muted); }
#tab-calendar .tp-note-tpl-card__pics { font-size: 12px; font-weight: 500; color: var(--rd-accent); }
#tab-calendar .tp-plan-item { color: var(--rd-ink); font-size: 13px; border-radius: 7px; }
#tab-calendar .tp-plan-item:hover { background: var(--rd-hover); }
#tab-calendar .tp-plan-item.is-selected { background: var(--rd-accent-soft); color: var(--rd-heading); }
#tab-calendar .tp-plan-heading { font-size: 11px; font-weight: 600; color: var(--rd-faint); }
#tab-calendar .tp-plan-item__note,
#tab-calendar .tp-plan-item__wk { color: var(--rd-faint); }

@media (max-width: 768px) {
    #tab-calendar .tp-cal-library { position: fixed; top: 0; left: -320px; bottom: 0; max-height: none; border: 0; border-radius: 0; box-shadow: var(--rd-shadow-drawer); z-index: 900; }
    #tab-calendar .tp-cal-library.open { left: 0; }
    #tab-calendar .tp-cal-drawer-overlay { background: var(--rd-overlay); }
}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .rd-header__inner { padding: 16px 16px 0; }
    .rd-main { padding: 16px 16px 48px; }
    .rd-page #tab-calendar { padding: 16px 16px 48px; }
    #tab-calendar .ath-sw__trigger { min-width: 0; }
    #tab-calendar .tp-cal-tools { width: 100%; }
    #tab-calendar .tp-cal-tool { flex: 1; justify-content: center; padding: 0 8px; }
    #tab-calendar .tp-cal-navbar { padding: 10px 12px; }
    #tab-calendar .tp-cal-month-label { font-size: 17px; margin-left: 4px; }
    #tab-calendar .tp-cal-headbtn span { display: none; }
    #tab-calendar .tp-cal-sync-bar { padding: 10px 12px; }
    #tab-calendar .tp-cal-sync-bar__actions { margin-left: 0; }
    .rd-sticky-head__inner { padding: 12px 16px; }
    .rd-page .tp-tabs { gap: 20px; }
    .rd-h1 { font-size: 21px; }
    .rd-search { flex: 1 1 100%; }
    .rd-builder__aside { position: static; max-width: none; }
    .rd-drawer, .rd-drawer--wide { width: 100vw; }
    .rd-segs { flex-wrap: wrap; }
    .rd-seg { min-width: 96px; }
}

/* ── Library hint: drag on desktop, "+" on touch / small screens ───────── */
#tab-calendar .tp-hint-tap,
#tab-calendar .tp-hint-target { display: none; }
@media (max-width: 768px), (pointer: coarse) {
    #tab-calendar .tp-hint-drag { display: none; }
    #tab-calendar .tp-hint-tap { display: inline; }
    #tab-calendar .tp-cal-drag-card { cursor: pointer; }
    #tab-calendar .tp-cal-drag-card:active { border-color: var(--rd-accent); background: var(--rd-accent-soft); }
}
#tab-calendar .tp-cal-library.has-add-target .tp-hint-drag,
#tab-calendar .tp-cal-library.has-add-target .tp-hint-tap { display: none; }
#tab-calendar .tp-cal-library.has-add-target .tp-hint-target { display: inline; color: var(--rd-accent); font-weight: 600; }
#tab-calendar .tp-cal-library.has-add-target .tp-cal-drag-card { cursor: pointer; }
#tab-calendar .tp-cal-library-hint.is-flash { animation: tp-hint-flash .8s ease-out; }
@keyframes tp-hint-flash { from { color: var(--rd-accent); background: var(--rd-accent-soft); } }

/* ── Phones: the library is a bottom sheet instead of a left slide-over ──── */
@media (max-width: 768px) {
    #tab-calendar .tp-cal-library {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(72dvh, 640px);
        border-radius: 16px 16px 0 0; transform: translateY(105%); transition: transform .25s ease;
    }
    #tab-calendar .tp-cal-library.open { left: 0; transform: none; }
    #tab-calendar .tp-cal-library::before {
        content: ''; display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--rd-border);
    }
    #tab-calendar .tp-cal-library-header { padding-top: 8px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #tab-calendar .tp-cal-library { transition: none; }
}

/* ── Day "+" button: hover on desktop, always visible on touch / phones ──── */
#tab-calendar .tp-cal-add-btn {
    display: block; width: 100%; height: 26px; margin: 4px 0 0; padding: 0; flex: none;
    border: 1px dashed var(--rd-input-border); border-radius: 6px; background: transparent; color: var(--rd-muted);
    font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
}
#tab-calendar .tp-cal-cell:hover .tp-cal-add-btn,
#tab-calendar .tp-cal-add-btn:focus-visible { opacity: 1; }
#tab-calendar .tp-cal-add-btn:hover { border-style: solid; border-color: var(--rd-accent); color: var(--rd-accent); background: var(--rd-accent-soft); }
@media (max-width: 768px), (pointer: coarse) {
    #tab-calendar .tp-cal-add-btn { opacity: 1; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { #tab-calendar .tp-cal-add-btn { transition: none; } }

/* ── "Add to this day" chooser (same pattern as the athlete calendar) ───── */
.tp-day-add-overlay { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px; background: var(--rd-overlay); }
.tp-day-add-overlay[hidden] { display: none; }
.tp-day-add {
    width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; box-sizing: border-box;
    background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-border); border-radius: 14px; box-shadow: var(--rd-shadow-pop);
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
}
.tp-day-add[hidden] { display: none; }
.tp-day-add__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tp-day-add__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--rd-heading); }
.tp-day-add__date { margin-top: 2px; font-size: 14px; color: var(--rd-muted); }
.tp-day-add__close { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--rd-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.tp-day-add__close:hover { background: var(--rd-hover); color: var(--rd-ink); }
.tp-day-add__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tp-day-add__opt {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rd-border); border-radius: 10px;
    background: var(--rd-surface); color: var(--rd-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.tp-day-add__opt[hidden] { display: none; }
.tp-day-add__opt:hover, .tp-day-add__opt:focus-visible { border-color: var(--rd-accent); background: var(--rd-accent-soft); outline: none; }
.tp-day-add__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--rd-accent-soft); font-size: 18px; }
.tp-day-add__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-day-add__text strong { font-size: 15px; font-weight: 600; color: var(--rd-heading); }
.tp-day-add__text small { font-size: 13px; color: var(--rd-muted); }
.tp-day-add__cancel { display: none; }
@media (prefers-reduced-motion: reduce) { .tp-day-add__opt { transition: none; } }
@media (max-width: 768px), (pointer: coarse) {
    /* Phones: a bottom sheet, so it is reachable wherever the day is on screen. */
    .tp-day-add-overlay { place-items: end stretch; padding: 0; }
    .tp-day-add { max-width: none; border-radius: 16px 16px 0 0; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: var(--rd-shadow-drawer); }
    .tp-day-add__grid { grid-template-columns: 1fr; gap: 8px; }
    .tp-day-add__close { display: none; }
    .tp-day-add__cancel {
        display: block; height: 44px; border: 1px solid var(--rd-input-border); border-radius: 10px; background: var(--rd-surface);
        color: var(--rd-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    }
}

/* ── Day note modal: flat header and labelled fields ─────────────────────── */
#calNoteModal.tp-modal-overlay { background: var(--rd-overlay); }
#calNoteModal .tp-note-modal,
html.dark-mode #calNoteModal .tp-note-modal { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-border); box-shadow: var(--rd-shadow-pop); font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }
#calNoteModal .tp-note-modal__head { background: var(--rd-surface); border-bottom: 1px solid var(--rd-border); padding: 16px 20px; }
#calNoteModal .tp-note-modal__head h3,
html.dark-mode #calNoteModal .tp-note-modal__head h3 { font-size: 17px; font-weight: 600; color: var(--rd-heading); }
#calNoteModal .tp-note-modal-date,
html.dark-mode #calNoteModal .tp-note-modal-date { font-size: 14px; color: var(--rd-muted); }
#calNoteModal .tp-note-modal__close { width: 32px; height: 32px; background: transparent; color: var(--rd-muted); font-size: 22px; }
#calNoteModal .tp-note-modal__close:hover { background: var(--rd-hover); color: var(--rd-ink); }
#calNoteModal .tp-note-modal__main { padding: 18px 20px 20px; }
#calNoteModal .tp-note-field-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--rd-ink-2); }
#calNoteModal .tp-note-subject,
html.dark-mode #calNoteModal .tp-note-subject { height: 40px; margin-bottom: 14px; padding: 0 12px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 15px; font-weight: 500; }
#calNoteModal :is(.tp-note-subject, textarea):focus { border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
#calNoteModal .tp-note-modal textarea,
html.dark-mode #calNoteModal .tp-note-modal textarea { background: var(--rd-surface); border-color: var(--rd-input-border); color: var(--rd-ink); font-size: 15px; }
#calNoteModal .tp-note-char-count { color: var(--rd-faint); font-size: 12px; }
#calNoteModal .tp-note-private-toggle,
html.dark-mode #calNoteModal .tp-note-private-toggle { color: var(--rd-ink-2); font-size: 14px; }
#calNoteModal .tp-note-private-toggle input { accent-color: var(--rd-accent); }
#calNoteModal .tp-note-vis,
html.dark-mode #calNoteModal .tp-note-vis { background: var(--rd-surface-2); border-color: var(--rd-border); color: var(--rd-muted); }
#calNoteModal .tp-note-modal-footer .tp-btn,
#calNoteModal .tp-note-del-btn { height: 38px; padding: 0 16px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; }
#calNoteModal .tp-btn-secondary,
html.dark-mode #calNoteModal .tp-btn-secondary { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-input-border); }
#calNoteModal .tp-btn-primary { background: var(--rd-accent); color: #fff; border: 0; }
#calNoteModal .tp-btn-primary:hover { background: var(--rd-accent-hover); }
#calNoteModal .tp-note-del-btn,
html.dark-mode #calNoteModal .tp-note-del-btn { border-color: var(--rd-danger-border); color: var(--rd-danger); background: transparent; }
#calNoteModal .tp-note-del-btn:hover { background: var(--rd-danger-soft); }
#calNoteModal .tp-note-thread__title { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--rd-heading); }
@media (max-width: 640px) {
    #calNoteModal.tp-modal-overlay { align-items: stretch; }
    #calNoteModal .tp-note-modal { width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    #calNoteModal .tp-note-modal__main { flex: 1; padding: 16px; }
    #calNoteModal .tp-note-modal-footer .tp-btn { flex: 1; }
}

/* ── Target race form ────────────────────────────────────────────────────── */
#calRaceModal .tp-race-modal { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-border); box-shadow: var(--rd-shadow-pop); font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }
#calRaceModal.tp-modal-overlay { background: var(--rd-overlay); }
#calRaceModal .tp-race-modal__title { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: var(--rd-heading); }
#calRaceModal .tp-modal-field label,
html.dark-mode #calRaceModal .tp-modal-field label { font-size: 13px; font-weight: 500; text-transform: none; color: var(--rd-ink-2); }
#calRaceModal .tp-race-modal__opt { font-weight: 400; color: var(--rd-faint); }
#calRaceModal .tp-modal-field :is(input, select),
html.dark-mode #calRaceModal .tp-modal-field :is(input, select) { height: 38px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 15px; }
#calRaceModal .tp-modal-field :is(input, select):focus { outline: none; border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
#calRaceModal .tp-race-modal__err { padding: 8px 10px; border-radius: 8px; background: var(--rd-danger-soft); color: var(--rd-danger); font-size: 13px; }
#calRaceModal .tp-race-modal__err[hidden] { display: none; }
#calRaceModal .tp-btn { height: 38px; padding: 0 16px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; }
#calRaceModal .tp-btn-secondary,
html.dark-mode #calRaceModal .tp-btn-secondary { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-input-border); }
#calRaceModal .tp-btn-primary { background: var(--rd-accent); color: #fff; border: 0; }
#calRaceModal .tp-btn-primary:hover { background: var(--rd-accent-hover); }

/* ── Phones: keep the page still behind the open library sheet ───────────── */
@media (max-width: 768px) {
    body.tp-sheet-open { overflow: hidden; }
    #tab-calendar .tp-cal-library-list { overscroll-behavior: contain; }
}

/* ── Workout editor modals (builder + calendar assignment) ────────────────── */
:is(#builderModal, #assignEditModal) .tp-modal { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-border); box-shadow: var(--rd-shadow-pop); font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; }
:is(#builderModal, #assignEditModal).tp-modal-overlay { background: var(--rd-overlay); }
#builderModal .bm-modal__header,
#assignEditModal .ae-modal__header,
html.dark-mode #builderModal .bm-modal__header { background: var(--rd-surface); border-bottom: 1px solid var(--rd-border); padding: 16px 20px; align-items: center; }
#builderModal .bm-modal__title,
#assignEditModal .ae-modal__title { color: var(--rd-heading); font-size: 17px; font-weight: 600; }
#assignEditModal .ae-modal__date { margin-top: 2px; color: var(--rd-muted); font-size: 13px; }
#builderModal .bm-modal__header .tp-save-status { color: var(--rd-muted); }
#builderModal .bm-modal__header .tp-save-status.ok { color: var(--rd-success-ink); }
#builderModal .bm-modal__header .tp-save-status.err { color: var(--rd-danger); }
#assignEditModal .ae-override-badge { background: var(--rd-warn-soft); color: var(--rd-warn-ink); border-color: var(--rd-warn-border); }
:is(#builderModal, #assignEditModal) .tp-modal-close { width: 32px; height: 32px; background: transparent; color: var(--rd-muted); border-radius: 8px; font-size: 22px; }
:is(#builderModal, #assignEditModal) .tp-modal-close:hover { background: var(--rd-hover); color: var(--rd-ink); }
#assignEditModal .ae-btn--ghost { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-input-border); border-radius: 8px; font-size: 13px; padding: 6px 12px; }
#assignEditModal .ae-btn--ghost:hover { border-color: var(--rd-accent); color: var(--rd-accent); }

#builderModal .bm-modal__body { padding: 20px; gap: 18px; }
/* The body scrolls as a flex column; without this the timeline (overflow: hidden) shrinks to nothing once the steps list grows. */
#builderModal .bm-modal__body > * { flex-shrink: 0; }
#assignEditModal .ae-modal__body { padding: 4px 0 8px; }
#assignEditModal .ae-section { padding: 16px 20px; gap: 14px; border-bottom: 0; }
#assignEditModal .ae-section .tp-field[style] { margin-top: 0 !important; }
:is(#builderModal, #assignEditModal) .tp-field label,
:is(#builderModal, #assignEditModal) .ae-section .tp-field label,
html.dark-mode :is(#builderModal, #assignEditModal) .ae-section .tp-field label {
    margin-bottom: 6px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rd-ink-2);
}
:is(#builderModal, #assignEditModal) :is(.tp-field, .ae-section) :is(input:not([type="checkbox"]), select, textarea),
html.dark-mode :is(#builderModal, #assignEditModal) :is(.tp-field, .ae-section) :is(input:not([type="checkbox"]), select, textarea) {
    width: 100%; box-sizing: border-box; min-height: 38px; padding: 8px 11px; border: 1px solid var(--rd-input-border); border-radius: 8px;
    background: var(--rd-surface); color: var(--rd-ink); font-family: inherit; font-size: 14px;
}
:is(#builderModal, #assignEditModal) :is(input, select, textarea):focus { outline: none; border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }

/* Planned targets */
#assignEditModal .ae-targets-details,
#builderModal .tp-targets-details,
html.dark-mode #assignEditModal .ae-targets-details { margin: 0 20px; border: 1px solid var(--rd-border); border-radius: 10px; background: var(--rd-surface); }
#builderModal .tp-targets-details { margin: 0; }
#assignEditModal .ae-targets-summary,
#builderModal .tp-targets-summary,
html.dark-mode #assignEditModal .ae-targets-summary {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px; list-style: none; cursor: pointer; user-select: none;
    color: var(--rd-heading); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
:is(#builderModal, #assignEditModal) :is(.ae-targets-summary, .tp-targets-summary)::-webkit-details-marker { display: none; }
:is(#builderModal, #assignEditModal) :is(.ae-targets-summary, .tp-targets-summary) > span { color: var(--rd-faint); }
:is(#builderModal, #assignEditModal) .tp-target-field label,
html.dark-mode #assignEditModal .ae-targets-grid .tp-target-field label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rd-muted); }
:is(#builderModal, #assignEditModal) .tp-target-field input,
html.dark-mode #assignEditModal .ae-targets-grid input { height: 36px; padding: 0 10px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 14px; }
#assignEditModal .ae-targets-grid { gap: 12px; padding: 0 14px 14px; }

/* Summary + timeline */
#builderModal .tp-summary-bar,
html.dark-mode #builderModal .tp-summary-bar { background: var(--rd-surface-2); color: var(--rd-muted); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
#builderModal .tp-summary-bar b,
html.dark-mode #builderModal .tp-summary-bar b { color: var(--rd-ink); }
:is(#builderModal, #assignEditModal) .tp-timeline-wrap,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-timeline-wrap { border-color: var(--rd-border); background: var(--rd-surface); border-radius: 10px; }
#assignEditModal .ae-timeline-wrap { margin: 14px 20px 0; }
:is(#builderModal, #assignEditModal) .tp-timeline-header,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-timeline-header { padding: 12px 14px 6px; border: 0; color: var(--rd-heading); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
:is(#builderModal, #assignEditModal) .tp-timeline-canvas,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-timeline-canvas { margin: 6px 14px 4px; background: var(--rd-surface-2); border-radius: 8px; }

/* Steps */
#assignEditModal .tp-steps-section { padding: 0 20px 16px; }
:is(#builderModal, #assignEditModal) .tp-steps-header h4,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-steps-header h4,
#assignEditModal .tp-steps-section .tp-steps-header h4 { color: var(--rd-heading); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#assignEditModal .tp-steps-section .tp-steps-header { padding: 18px 0 10px; }
:is(#builderModal, #assignEditModal) .tp-add-step-btn {
    height: 34px; padding: 0 12px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-accent);
    font-size: 13px; font-weight: 600;
}
:is(#builderModal, #assignEditModal) .tp-add-step-btn:hover { border-color: var(--rd-accent); background: var(--rd-accent-soft); }
:is(#builderModal, #assignEditModal) .tp-step-card,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-step-card,
#assignEditModal.tp-modal-overlay .ae-modal .tp-step-card { border-color: var(--rd-border); border-radius: 10px; background: var(--rd-surface); padding: 12px; }
:is(#builderModal, #assignEditModal) .tp-group-card,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-group-card,
#assignEditModal.tp-modal-overlay .ae-modal .tp-group-card { border-color: var(--rd-accent-border); border-radius: 10px; background: var(--rd-accent-soft); }
:is(#builderModal, #assignEditModal) .tp-group-sub-card,
html.dark-mode :is(#builderModal, #assignEditModal) .tp-group-sub-card,
#assignEditModal.tp-modal-overlay .ae-modal .tp-group-sub-card { border-color: var(--rd-border); border-radius: 8px; background: var(--rd-surface); }
:is(#builderModal, #assignEditModal) :is(.tp-step-intensity select, .tp-group-sub-card > select, .tp-step-duration input, .tp-step-duration select, .tp-step-rpe__row input, .tp-step-rpe__row select, .tp-step-notes input),
html.dark-mode :is(#builderModal, #assignEditModal) :is(.tp-step-intensity select, .tp-group-sub-card > select, .tp-step-duration input, .tp-step-duration select, .tp-step-rpe__row input, .tp-step-rpe__row select, .tp-step-notes input) {
    min-height: 34px; border: 1px solid var(--rd-input-border); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink); font-size: 14px;
}
:is(#builderModal, #assignEditModal) .tp-step-rpe__range-toggle { color: var(--rd-accent); }
:is(#builderModal, #assignEditModal) .tp-step-duration { flex-wrap: nowrap; }
:is(#builderModal, #assignEditModal) .tp-step-duration input { width: 56px; padding: 0 6px; }
:is(#builderModal, #assignEditModal) .tp-step-duration select { padding: 0 4px; }
:is(#builderModal, #assignEditModal) .tp-step-notes input { width: 100%; min-width: 0; box-sizing: border-box; }
:is(#builderModal, #assignEditModal) .tp-step-rpe { min-width: 0; }
:is(#builderModal, #assignEditModal) .tp-step-rpe :is(.tp-step-rpe__row, div) { flex-wrap: wrap; min-width: 0; }
:is(#builderModal, #assignEditModal) .tp-target-toggle { min-width: 0; max-width: 100%; }
@media (min-width: 641px) {
    /* Six parts per step (handle, type, duration, target, notes, remove); give notes its own column. */
    :is(#builderModal, #assignEditModal) .tp-step-card,
    #assignEditModal.tp-modal-overlay .ae-modal .tp-step-card { grid-template-columns: 20px minmax(110px, 140px) 136px minmax(0, 1.3fr) minmax(0, 1fr) 28px; gap: 10px; align-items: start; }
    :is(#builderModal, #assignEditModal) .tp-group-sub-card,
    #assignEditModal.tp-modal-overlay .ae-modal .tp-group-sub-card { grid-template-columns: minmax(110px, 140px) 136px minmax(0, 1fr) 28px; gap: 10px; align-items: start; }
}
:is(#builderModal, #assignEditModal) .tp-step-remove:hover { background: var(--rd-danger-soft); color: var(--rd-danger); }
:is(#builderModal, #assignEditModal) .tp-steps-empty { border-color: var(--rd-border); color: var(--rd-faint); border-radius: 10px; }

/* Footers */
#builderModal .bm-modal__footer,
#assignEditModal .ae-modal__footer,
html.dark-mode :is(#builderModal .bm-modal__footer, #assignEditModal .ae-modal__footer) { padding: 12px 20px; background: var(--rd-surface); border-top: 1px solid var(--rd-border); gap: 8px; }
#assignEditModal .ae-summary { color: var(--rd-muted); font-size: 13px; }
:is(#builderModal, #assignEditModal) :is(.tp-btn, .ae-btn:not(.ae-btn--ghost)) { height: 38px; padding: 0 16px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; }
:is(#builderModal, #assignEditModal) :is(.tp-btn-secondary, .ae-btn--secondary),
html.dark-mode :is(#builderModal, #assignEditModal) :is(.tp-btn-secondary, .ae-btn--secondary) { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-input-border); }
:is(#builderModal, #assignEditModal) :is(.tp-btn-secondary, .ae-btn--secondary):hover { border-color: var(--rd-accent); color: var(--rd-accent); background: var(--rd-surface); }
:is(#builderModal, #assignEditModal) :is(.tp-btn-primary, .ae-btn--primary) { background: var(--rd-accent); color: #fff; border: 0; }
:is(#builderModal, #assignEditModal) :is(.tp-btn-primary, .ae-btn--primary):hover { background: var(--rd-accent-hover); }
#builderModal .tp-btn-success { background: var(--rd-surface); color: var(--rd-accent); border: 1px solid var(--rd-accent); }
#builderModal .tp-btn-success:hover { background: var(--rd-accent-soft); }

/* Phones: editors go full screen with the footer pinned */
@media (max-width: 640px) {
    :is(#builderModal, #assignEditModal).tp-modal-overlay { align-items: stretch; }
    :is(#builderModal, #assignEditModal) .tp-modal {
        width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0;
    }
    #builderModal .bm-modal__header, #assignEditModal .ae-modal__header { padding: 12px 16px; }
    #assignEditModal .ae-modal__header { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
    #assignEditModal .ae-modal__title-row { flex: 1 1 0; flex-wrap: wrap; gap: 4px 10px; }
    #assignEditModal .ae-modal__title { font-size: 16px; }
    #builderModal .bm-modal__body { padding: 16px; }
    #assignEditModal .ae-section { padding: 14px 16px; }
    #assignEditModal .ae-targets-details { margin: 0 16px; }
    #assignEditModal .ae-timeline-wrap { margin: 14px 16px 0; }
    #assignEditModal .tp-steps-section { padding: 0 16px 16px; }
    :is(#builderModal, #assignEditModal) .tp-step-card { grid-template-columns: 1fr 1fr; }
    :is(#builderModal, #assignEditModal) .tp-step-card > :is(.tp-step-drag, .tp-step-intensity, .tp-step-notes) { grid-column: 1 / -1; }
    :is(#builderModal, #assignEditModal) .tp-step-drag { display: none; }
    :is(#builderModal, #assignEditModal) :is(.tp-step-card, .tp-group-sub-card) > * { min-width: 0; }
    :is(#builderModal, #assignEditModal) :is(.tp-step-intensity select, .tp-group-sub-card > select, .tp-step-notes input) { width: 100%; box-sizing: border-box; }
    :is(#builderModal, #assignEditModal) .tp-group-sub-card { grid-template-columns: 1fr 1fr; }
    :is(#builderModal, #assignEditModal) .tp-group-sub-card > :is(select, .tp-step-rpe) { grid-column: 1 / -1; }
    /* The top fields carry inline grid-column spans that would force a second column. */
    :is(#builderModal, #assignEditModal) .tp-step-rpe :is(.tp-step-rpe__row, div) { flex-wrap: wrap; min-width: 0; }
    :is(#builderModal, #assignEditModal) .tp-target-toggle { min-width: 0; max-width: 100%; }
    #builderModal .tp-builder-top { grid-template-columns: 1fr; }
    #builderModal .tp-builder-top > * { grid-column: 1 / -1 !important; }
    #builderModal .bm-modal__footer, #assignEditModal .ae-modal__footer { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
    #assignEditModal .ae-summary { flex-basis: 100%; }
    #assignEditModal .ae-modal__footer .ae-btn { flex: 1; }
    #builderModal .bm-modal__footer .tp-btn { flex: 1 1 40%; }
}

/* ── Phones: "not yet released" reminder floats at the bottom ───────────── */
@media (max-width: 768px) {
    #tab-calendar .tp-cal-sync-bar.needs-release {
        position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 790;
        flex-wrap: nowrap; padding: 10px 10px 10px 12px; border: 1px solid var(--rd-warn-border); border-radius: 12px;
        background: var(--rd-surface); box-shadow: var(--rd-shadow-pop);
    }
    #tab-calendar .tp-cal-sync-bar.needs-release :is(.tp-auto-sync-indicator, .tp-sync-pills, .tp-cal-overflow) { display: none; }
    #tab-calendar .tp-cal-sync-bar.needs-release .tp-cal-sync-bar__actions { width: 100%; flex-wrap: nowrap; gap: 8px; }
    #tab-calendar .tp-cal-sync-bar.needs-release .tp-hidden-hint { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; }
    #tab-calendar .tp-cal-sync-bar.needs-release #calSyncBtn { flex: none; white-space: nowrap; }
    body.tp-needs-release #tab-calendar { padding-bottom: 104px; }
    /* The top copy of the reminder is redundant once the bottom one floats. */
    body.tp-needs-release #calHiddenToastTop { display: none !important; }
    body.tp-sheet-open #tab-calendar .tp-cal-sync-bar.needs-release { display: none; }
}

/* ── Leave warning (in-site links) ───────────────────────────────────────── */
#calLeaveModal.tp-modal-overlay { background: var(--rd-overlay); }
#calLeaveModal .tp-leave-modal {
    max-width: 460px; padding: 22px 22px 18px; background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-border);
    border-radius: 14px; box-shadow: var(--rd-shadow-pop); font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
}
#calLeaveModal .tp-leave-modal__icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 10px; background: var(--rd-warn-soft); color: var(--rd-warn-ink); font-size: 20px; }
#calLeaveModal .tp-leave-modal__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--rd-heading); }
#calLeaveModal .tp-leave-modal__intro { margin: 0 0 8px; font-size: 14px; color: var(--rd-muted); }
#calLeaveModal .tp-leave-modal__list { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--rd-ink); }
#calLeaveModal .tp-leave-modal__err { margin: -6px 0 14px; padding: 8px 10px; border-radius: 8px; background: var(--rd-danger-soft); color: var(--rd-danger); font-size: 13px; }
#calLeaveModal .tp-leave-modal__err[hidden] { display: none; }
#calLeaveModal .tp-leave-modal__footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
#calLeaveModal .tp-btn { height: 38px; padding: 0 16px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; }
#calLeaveModal .tp-btn[hidden] { display: none; }
#calLeaveModal .tp-btn-secondary,
html.dark-mode #calLeaveModal .tp-btn-secondary { background: var(--rd-surface); color: var(--rd-ink); border: 1px solid var(--rd-input-border); }
#calLeaveModal .tp-btn-secondary:hover { border-color: var(--rd-accent); color: var(--rd-accent); }
#calLeaveModal .tp-btn-primary { background: var(--rd-accent); color: #fff; border: 0; }
#calLeaveModal .tp-btn-primary:hover { background: var(--rd-accent-hover); }
@media (max-width: 520px) {
    #calLeaveModal .tp-leave-modal__footer { flex-direction: column-reverse; }
    #calLeaveModal .tp-btn { width: 100%; }
}