/* ──────────────────────────────────────────────────────────────────────────
   BMHS Villains Baseball — Desktop styles (v0.1)
   Clean, minimal, 3DM-adjacent. Sidebar + main layout.
   ────────────────────────────────────────────────────────────────────────── */

/* Sticky-header offset for anchor navigation. The two-row top-header is
   ~104px tall (48px brand row + ~40px tab row + borders); the buffer
   keeps the anchored element clear of the header instead of behind it.
   Pairs with the scroll-preservation script in base.html so POST-redirect
   round trips don't jump the user to the top of the page. */
html {
    scroll-padding-top: 120px;
}

:root {
    --bg: #16406b;               /* mid navy — hover/row backgrounds */
    --bg-gradient: linear-gradient(180deg, #16406b 0%, #060f1d 100%);  /* page bg, darkens downward */
    --panel: #f8fafc;            /* off-white containers */
    --border: #cbd5e1;
    --border-strong: #94a3b8;
    --text: #0f172a;             /* near-black text */
    --text-muted: #475569;
    --text-faint: #94a3b8;
    --primary: #0c2340;          /* dark navy — buttons, active, links */
    --primary-hover: #071a31;    /* deeper navy */
    --primary-soft: #e3eaf3;     /* very light navy — backgrounds for done/active */
    --primary-deep: #0c2340;     /* text color on primary-soft */
    --danger: #b91c1c;
    --danger-hover: #991b1b;
    --accent: #c8961b;           /* school gold — accent borders/fills on LIGHT surfaces */
    --accent-bright: #ffc72c;    /* bright school gold — fills/text on NAVY only (fails contrast on white) */
    --success: #0c2340;          /* navy for success/done */
    --shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.95),   /* crisp white highlight along top edge */
        0 1px 2px rgba(0,0,0,0.15),                /* tight shadow right below */
        0 8px 24px rgba(0,0,0,0.35);               /* deep drop shadow */
    --radius: 8px;
    --radius-sm: 6px;

    /* ── Liquid Glass (iOS 26-style) ──────────────────────────────────── */
    --glass-bg: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.18) 100%
    );
    --glass-filter: blur(24px) saturate(1.8) contrast(1.05);
    --glass-border: 1px solid rgba(255, 255, 255, 0.45);
    /* Multi-directional bevel: bright top/left, darker bottom/right — simulates 3D lip */
    --glass-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.75),   /* top highlight */
        inset 1px 0 0 0 rgba(255, 255, 255, 0.35),   /* left highlight */
        inset -1px 0 0 0 rgba(0, 0, 0, 0.08),        /* right shadow */
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.18),        /* bottom shadow */
        0 6px 20px rgba(0, 0, 0, 0.18),              /* soft outer drop */
        0 1px 3px rgba(0, 0, 0, 0.12);               /* tight outer */
    --glass-radius: 16px;
}

/* Utility class + base for all glass containers */
.glass, .phone-card, .phone-cal-grid, .phone-ex, .phone-stat,
.phone-type-item, .phone-ex-details, .phone-type-btn, .phone-complete-banner {
    position: relative;
}

/* Specular sheen along the top half — the "liquid" shine */
.glass::before, .phone-card::before, .phone-cal-grid::before,
.phone-ex::before, .phone-stat::before, .phone-type-item::before,
.phone-ex-details::before, .phone-type-btn::before,
.phone-complete-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}
.glass > *, .phone-card > *, .phone-cal-grid > *, .phone-ex > *,
.phone-stat > *, .phone-type-item > *, .phone-ex-details > *,
.phone-type-btn > *, .phone-complete-banner > * {
    position: relative;
    z-index: 1;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                 Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg-gradient);
    line-height: 1.5;
    min-height: 100vh;
}

h1, h2, h3 { margin: 0 0 0.5em 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; color: var(--text); }
h3 { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1.2em; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Sidebar retired 2026-05-18. Body now contains <main class="main main-full">
   directly — no .app wrapper. Legacy .app + .sidebar rules below are kept as
   no-ops since DOM no longer renders those elements; rules can be deleted in
   a follow-up CSS cleanup pass. */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 24px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.brand-mark {
    width: 32px; height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.brand-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
}

/* Inline checkbox + label, used in forms where the option is a one-liner
   like "[ ] Also an Account Manager". Sits flush-left under the label. */
.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
/* Multiple checkbox-rows laid out horizontally (e.g. Sports multi-select). */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    padding-top: 4px;
}

/* Pinned launchers (Home + My Calendar) — stay visible above the scroll
   region. Visual separator below so the boundary between pinned + scroll
   is obvious. */
.nav-launchers-pinned {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

/* Scrollable middle/lower region of the sidebar — Teams + Nav + user
   profile/sign-out. Grows to fill space; scrolls when content exceeds
   viewport height. min-height:0 is required on a flex child to let it
   actually shrink + scroll instead of overflowing the parent. */
.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Thin custom scrollbar so it doesn't feel intrusive */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.sidebar nav {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-link {
    display: block;
    padding: 8px 12px;
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.08s;
    /* Single-line items — long activity rows like
       "🏀 Sunday Hitting Lessons - Practice Plans" truncate with ... rather
       than wrapping to two lines. Tooltip shows the full label on hover. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-link:hover { background: var(--bg); text-decoration: none; }
.nav-link.active {
    background: var(--primary);
    color: white;
}

.nav-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 12px 12px 4px 12px;
    margin-top: 6px;
}

.nav-link-child {
    padding-left: 24px;
    font-size: 13px;
}

.sidebar-footer {
    padding: 12px 20px 0;
    border-top: 1px solid var(--border);
}
.sidebar-footer-label {
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.main {
    padding: 32px 40px;
    max-width: 1200px;
    width: 100%;
}

/* ── Page header ─────────────────────────────────────────────────────────── */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--accent);
    border-bottom: 4px solid var(--accent);
    border-radius: 6px;
}
.page-header h1 { margin-bottom: 4px; color: white; }
.page-header .muted { color: rgba(255,255,255,0.7); }
.page-header-actions { display: flex; gap: 8px; align-items: center; }
.breadcrumbs {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.breadcrumbs a { color: rgba(255,255,255,0.9); }
.breadcrumbs a:hover { color: white; }

/* ── Cards / dashboard ───────────────────────────────────────────────────── */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}
.card.stub { opacity: 0.55; }
.card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.card-value {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
}
.card-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.card-meta a { font-size: 12px; }

/* ── Panels ──────────────────────────────────────────────────────────────── */

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-wrapper {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th, .data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.data-table th {
    background: #f1f5f9;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #fafbfc; }
.data-table .actions { text-align: right; }

/* ── Badges / links ──────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-active      { background: var(--primary-soft); color: var(--primary-deep); }
.badge-in_progress { background: #fbf0d2; color: #7a5a12; }   /* soft gold — usable but still being polished */
.badge-draft       { background: #fef3c7; color: #92400e; }
.badge-archived    { background: #e5e7eb; color: #4b5563; }
.badge-complete    { background: #dcfce7; color: #166534; }   /* soft green — session is done */
.badge-public   { background: #e3eaf3; color: #0c2340; }   /* soft navy — part of the canon */
.badge-private  { background: #fce7f3; color: #9d174d; }   /* soft pink — owned by a user */
.badge-author   { background: #fef3c7; color: #78350f; }   /* warm amber — author dummy account, no login */

/* Admin /admin/users — two create forms side-by-side (Dummy + Author). */
.admin-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
}
@media (max-width: 720px) {
    .admin-create-grid {
        grid-template-columns: 1fr;
    }
}

/* Exercise header meta row — pills/badges + "Developer: X" attribution */
.exercise-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.exercise-developer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    margin-left: 4px;
}

.link-primary  { color: var(--primary); font-weight: 500; }
.link-secondary { color: var(--text-muted); font-size: 13px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 8px 14px;
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;                   /* normalize a/button vertical sizing */
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.08s, border-color 0.08s;
    font-family: inherit;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: white; text-decoration: none; }
.btn-secondary {
    background: transparent; color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); }

/* Light-blue tinted variant — less bold than primary, more presence than secondary */
.btn-view {
    background: #bfdbfe;                 /* a notch darker than primary-soft */
    color: var(--primary-deep);
    border-color: #bfdbfe;
}
.btn-view:hover {
    background: #93c5fd;
    border-color: #93c5fd;
    color: var(--primary-deep);
}
.btn-danger {
    background: var(--danger); border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px 24px 24px 24px;
    margin-bottom: 20px;
}
.form-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.form-section:last-child { margin-bottom: 0; }

/* Sub-section inside a .form-section or .view-section bucket.
   Used for nested hierarchy: bucket h2 → sub h3 → inner h4. */
.form-subsection {
    margin: 8px 0 24px;
    padding-left: 14px;
    border-left: 3px solid var(--primary-soft);
}
.form-subsection > h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
}
.form-subsection > h3:first-child { margin-top: 0; }

/* Read-only field display — mirrors the edit-form layout on the view page.
   Label on top, value in a subtle panel below (looks like a disabled input). */
.view-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
/* Row wrapper for putting multiple .view-field columns side-by-side
   (e.g. Name | Sport | Status on athlete + lesson detail pages). Wraps
   gracefully on narrow viewports. */
.view-field-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.view-field-row > .view-field {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}
.view-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.view-field-value {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
    background: #f8fafc;
    min-height: 1.5em;
}
.view-field-value.empty {
    color: var(--text-muted);
    font-style: italic;
}
.view-field-value.prose {
    white-space: pre-wrap;
    line-height: 1.5;
    background: white;
}

/* Vertical radio list — native control + label, click anywhere on the row. */
.radio-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.radio-row:hover {
    background: #f1f5f9;
    border-color: var(--primary);
}
.radio-row input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}
.radio-row input[type="radio"]:checked ~ span {
    font-weight: 600;
    color: var(--primary-deep);
}
.radio-row:has(input[type="radio"]:checked) {
    background: var(--primary-soft);
    border-color: var(--primary);
}

/* Segmented toggle (radio-buttons-as-buttons). Two-or-more options visible
   side-by-side; the checked one is filled, others are outline. Pure CSS. */
.toggle-group {
    display: inline-flex;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: white;
}
.toggle-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.toggle-group label {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    background: white;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid var(--primary);
}
.toggle-group label:last-child { border-right: none; }
.toggle-group input[type="radio"]:checked + label {
    background: var(--primary);
    color: white;
}
.toggle-group label:hover {
    background: var(--primary-soft);
}
.toggle-group input[type="radio"]:checked + label:hover {
    background: var(--primary-deep);
}

/* Small callout-style note inside a form — e.g. "prescription is session-level" */
.form-note {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    color: var(--primary-deep);
    line-height: 1.5;
}
.form-note strong { font-weight: 700; }

/* Sub-sub header inside a subsection — used for Images/Videos inside Media */
.form-sub-h {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.form-section h2 { margin-bottom: 4px; }
.form-section .muted { margin-top: 0; margin-bottom: 12px; }

.form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.form-row-split {
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
}
.form-row-split .form-row-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.form-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-row .required { color: var(--danger); }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: white;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}
.form-row textarea { resize: vertical; min-height: 60px; }

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 640px) { .form-grid-3 { grid-template-columns: 1fr; } }

/* Shared chart scroll wrapper (2026-06-13) — every data chart sits in one
   of these so columns stay aligned (normal table) AND the header freezes on
   scroll (sticky thead inside this constrained-height scroller). */
.chart-scroll {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.chart-scroll > table { border: none; border-radius: 0; margin: 0; }
/* Dark-blue header, white text — standard for every workout-app chart. */
.chart-scroll > table thead th { position: sticky; top: 0; z-index: 1; background: var(--primary, #0c2340) !important; color: #fff !important; border-bottom-color: var(--primary, #0c2340) !important; }
/* Expand variant — grow to fit all rows, no inner scrollbar (keeps the
   dark-blue header; header goes static since there's nothing to scroll). */
/* overflow: hidden (not visible) so the rounded container still clips the
   square header corners — grows to fit all rows, no scrollbar, corners kept. */
.chart-scroll.chart-scroll-expand { max-height: none; overflow: hidden; }
.chart-scroll.chart-scroll-expand > table thead th { position: static; }

.form-actions {
    padding-top: 16px;
    display: flex;
    gap: 8px;
}

/* ── View pages ──────────────────────────────────────────────────────────── */

.view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.view-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.view-section:last-child { margin-bottom: 0; }

.data-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 16px;
    margin: 0;
}
.data-list dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-list dd { margin: 0; color: var(--text); }

.prose {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.video-block {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
    margin-bottom: 8px;
}
.video-embed {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0;
}

/* Video action row — "Open on YouTube" + "Remove video" sit side-by-side */
.video-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Fallback link shown below every embed so users have an out if the
   uploader has disabled embedding (YouTube shows "Video unavailable"). */
.video-fallback-link {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--primary-deep);
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 500;
}
.video-fallback-link:hover {
    background: var(--primary);
    color: white;
    text-decoration: none;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
    background: var(--panel);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 48px 24px;
    text-align: center;
}
.empty-state h2 { margin-bottom: 8px; }
.empty-state .btn { margin-top: 12px; }

/* ── Coach's Corner ──────────────────────────────────────────────────────── */

/* Bio layout — image + intro video stacked on the left, bio text on the right */
.coach-bio-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}
.coach-bio-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.coach-bio-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: #f1f5f9;
}
.coach-bio-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--text-muted);
}
.coach-bio-video {
    width: 100%;
    border-radius: 6px;
    background: #000;
    border: 0;
    aspect-ratio: 16 / 9;
}
.coach-bio-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

/* Equipment grid */
.coach-equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.coach-equipment-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    position: relative;
}
/* When the inline edit form is open inside a tile, give it a high
   stacking context so the popout sits on top of neighboring tiles. */
.coach-equipment-tile:has(.coach-equipment-actions-entity details[open]) {
    z-index: 30;
}
.coach-equipment-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    /* Center the image inside the tile when it's letterboxed by contain. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}
.coach-equipment-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.coach-equipment-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--text-muted);
}
.coach-equipment-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.coach-equipment-name {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}
.coach-equipment-notes {
    line-height: 1.4;
}
.coach-equipment-link {
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}
.coach-equipment-link:hover { text-decoration: underline; }
.coach-equipment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
/* Edit + delete on the left; arrows push to the far right. */
.coach-equipment-actions-entity {
    display: flex;
    align-items: center;
    gap: 4px;
}
.coach-equipment-actions-move {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
/* Equipment edit popout — when the inline-add details inside an equipment
   tile is open, lift the form out of the narrow tile so it has room to
   show all its fields. Anchored top-left of the entity-actions row,
   wide enough to be usable, with a drop shadow so it reads as elevated. */
.coach-equipment-actions-entity > details {
    position: relative;
}
.coach-equipment-actions-entity > details[open] > .form {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 340px;
    max-width: 92vw;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    margin-top: 0;
}

/* Add-equipment placeholder — build-by-placing tile that lives inside
   the grid alongside real equipment tiles. Same dimensions as a real
   tile (image area + body), dashed border + tinted bg, whole tile is
   the button. When opened, the form pops out absolutely beneath. */
.coach-equipment-tile-add {
    background: #f8fafc;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}
.coach-equipment-tile-add > details {
    position: relative;
}
.coach-equipment-tile-add > details > summary {
    list-style: none;
    cursor: pointer;
    display: block;
}
.coach-equipment-tile-add > details > summary::-webkit-details-marker { display: none; }
.coach-equipment-tile-add > details > summary::marker { content: ''; }
.coach-equipment-image-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(241, 245, 249, 0.6);
}
.coach-equipment-body-add {
    align-items: center;
    text-align: center;
    padding: 14px 12px;
}
.coach-equipment-add-icon {
    font-size: 48px;
    line-height: 1;
    color: var(--text-muted);
}
.coach-equipment-add-label {
    color: var(--primary-deep);
    font-weight: 600;
    font-size: 14px;
}
.coach-equipment-tile-add:hover .coach-equipment-add-label,
.coach-equipment-tile-add > details > summary:focus .coach-equipment-add-label {
    color: var(--primary);
    text-decoration: underline;
}
/* Lift the open form above neighboring tiles. */
.coach-equipment-tile-add:has(details[open]) {
    background: var(--panel);
    border-style: solid;
    border-color: var(--border);
    z-index: 30;
}
.coach-equipment-tile-add > details[open] > .coach-equipment-add-form {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 360px;
    max-width: 92vw;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* Coach's Corner tile on the athlete detail page (between Identity and Lessons) */
.coach-corner-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fbf0d2 0%, #fef3c7 100%);
    border: 1px solid #fbbf24;
    border-left: 5px solid #c8961b;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.15s;
}
.coach-corner-tile:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.coach-corner-tile-icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
}
.coach-corner-tile-text {
    flex: 1;
}
.coach-corner-tile-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
}
.coach-corner-tile-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 2px;
}
.coach-corner-tile-arrow {
    font-size: 24px;
    color: var(--text-muted);
}

/* Mobile / narrow viewport — collapse bio layout to single column */
@media (max-width: 720px) {
    .coach-bio-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Lessons: Root Video tiles ────────────────────────────────────────────── */

/* ── Root clips: thumbnail strip + click-to-open modal ──────────────── */

/* The grid: tight, compact thumbs. Each thumb is ~180px wide. */
.root-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

/* Thumbnail "tile" — small button that opens the full modal. Looks like
   a video preview chip. */
.root-video-thumb {
    appearance: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    display: flex;
    flex-direction: column;
}
.root-video-thumb:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.root-video-thumb-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1f2937;
    overflow: hidden;
}
.root-video-thumb-img video,
.root-video-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* crop to fit the 16:9 thumb regardless of source orientation */
    display: block;
}
.root-video-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    font-size: 32px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: opacity 0.15s;
}
.root-video-thumb:hover .root-video-thumb-play {
    color: #fff;
}
.root-video-thumb-label {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add-thumb — same shape as a real thumb, dashed border + camera icon. */
.root-video-thumb-add {
    border: 2px dashed var(--border-strong);
    background: #fff;
}
.root-video-thumb-add-img {
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.root-video-thumb-add-icon {
    width: 50px;
    height: 32px;
    color: #94a3b8;
}

.root-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    background: #1f2937;
    font-size: 24px;
}

/* ── Modal overlay — opens when a thumb is clicked ───────────────────── */

.root-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.root-video-modal[hidden] { display: none; }
.root-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
}
.root-video-modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.root-video-modal-content-form {
    max-width: 600px;
    padding: 24px;
}
.root-video-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 28px;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    z-index: 2;
    padding: 4px 8px;
}
.root-video-modal-close:hover { color: var(--text); }
.root-video-modal-player {
    background: #000;
}
.root-video-modal-player video,
.root-video-modal-player iframe {
    width: 100%;
    max-height: 70vh;
    display: block;
    border: 0;
}
.root-video-modal-body {
    padding: 18px 24px;
}
.root-video-modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
}
/* Labeled metadata rows in the root video tile body — "Label: value" stacked
   with a muted label + readable value. Used for Lesson Video Name, Original
   Video Name, Source on each tile. */
.root-video-meta-row {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    margin-bottom: 2px;
    word-wrap: break-word;
}
.root-video-meta-row .meta-label {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}
.root-video-meta-row .meta-value {
    color: var(--text);
}
.badge-source {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 999px;
}
.badge-source.badge-youtube { background: #fee2e2; color: #991b1b; }
.badge-source.badge-upload  { background: #e3eaf3; color: #1e40af; }

/* "Add another" placeholder tile — same SHAPE as a real .root-video-tile
   (player area on top, body underneath), with a dashed perimeter
   border that signals "empty slot, click to fill". The video camera
   icon + label inside the player area tell the user what kind of
   content slots in here.

   Real video tiles take their video's natural aspect ratio (phone-shot
   portrait videos are tall). The grid stretches every tile in a row to
   the same total height, so the add-tile's placeholder area FLEX-GROWS
   to match whatever height the real tiles end up at. The body sits at
   the bottom with its natural size. */
.root-video-add-tile {
    border: 2px dashed var(--border-strong);
    background: #fff;
}
/* The whole tile is one <details>. Summary covers the entire visible
   placeholder area (icon + label + Add Video button) — clicking anywhere
   on the tile opens the popup. When open, the placeholder collapses and
   the dual-form popup shows. */
.root-video-add-tile > details > summary {
    list-style: none;
    cursor: pointer;
    display: block;
}
.root-video-add-tile > details > summary::-webkit-details-marker { display: none; }
.root-video-add-tile > details > summary::marker { content: ''; }

/* Open state — hide the summary's placeholder visual; the form popup
   below takes over. A small × Cancel hint appears at top-right so the
   user can collapse back without submitting. */
.root-video-add-tile > details[open] > summary {
    padding: 6px 14px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.root-video-add-tile > details[open] > summary > * { display: none; }
.root-video-add-tile > details[open] > summary::after { content: "× Cancel"; }

/* The dual-form popup — shows BOTH upload + link options stacked, divider
   between. User fills whichever they want and submits that form. */
.root-video-add-tile-forms {
    padding: 16px;
}
.root-video-add-tile-form-h {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.root-video-add-tile-divider {
    margin: 18px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
}
.root-video-add-tile-divider::before,
.root-video-add-tile-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--border);
}
.root-video-add-tile-divider::before { left: 0; }
.root-video-add-tile-divider::after  { right: 0; }
/* The "+ Add Video" call-to-action button inside the summary — visually
   styled as a button but it's just a <span> (the <details> click handles
   the open behavior). Match the existing .btn look but live inside summary. */
.root-video-add-tile-cta {
    display: inline-block;
    margin: 8px 0;
}
.root-video-add-tile-placeholder {
    /* Override the .root-video-tile-player 16:9 aspect-ratio — let the
       placeholder grow vertically to match neighbor tiles. */
    aspect-ratio: auto;
    flex: 1;
    min-height: 180px;
    background: #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 1px dashed var(--border-strong);
}
/* Inline SVG video-camera icon — "video goes here" affordance. Uses
   currentColor so it picks up the muted text color from the parent. */
.root-video-add-tile-icon {
    width: 80px;
    height: 50px;
    color: #94a3b8;
    user-select: none;
    flex: 0 0 auto;
}
.root-video-add-tile-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    padding: 0 16px;
    line-height: 1.4;
    max-width: 240px;
}
.root-video-add-tile-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.root-video-add-tile .inline-add summary {
    width: 100%;
    text-align: center;
}
.root-video-tile-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.upload-status {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-left: 4px solid #10b981;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 18px 0;
}
.upload-status.upload-status-error {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left-color: #ef4444;
}
.upload-status-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.upload-status-icon {
    font-size: 24px;
    line-height: 1;
}
.upload-status-text {
    flex: 1;
    min-width: 0;
}
.upload-status-label {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 2px;
}
.upload-status-detail {
    color: var(--text-muted);
    font-size: 13px;
}
.upload-status.upload-status-error .upload-status-label {
    color: #991b1b;
}
.upload-progress-bar {
    width: 100%;
    height: 8px;
    background: #d1fae5;
    border-radius: 4px;
    overflow: hidden;
}
.upload-status.upload-status-error .upload-progress-bar {
    background: #fecaca;
}
.upload-progress-fill {
    height: 100%;
    background: #10b981;
    width: 0%;
    transition: width 0.15s ease-out;
}
.upload-status.upload-status-error .upload-progress-fill {
    background: #ef4444;
}

/* ── Lessons: Target Areas + Target Clips ────────────────────────────────── */

.target-area-block {
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    overflow: hidden;
}
.target-area-block.target-area-ungrouped {
    border-left-color: var(--border-strong);
}

/* Add Target Area placeholder block — looks like a real Target Area
   container (blue left border + light-blue header strip). The header IS
   a <summary>; its only content is a primary "+ Add Target Area" button
   in the slot where "Target Area: {label}" would sit on a populated area.
   Click toggles the form open beneath the header. */
.target-area-block.target-area-add-block {
    background: #fff;
}
summary.target-area-head-add {
    list-style: none;
    cursor: pointer;
    justify-content: center;
}
summary.target-area-head-add::-webkit-details-marker { display: none; }
summary.target-area-head-add::marker { content: ''; }
.target-area-head-add-text {
    color: var(--primary-deep);
    font-weight: 700;
    font-size: 15px;
}
summary.target-area-head-add:hover .target-area-head-add-text,
summary.target-area-head-add:focus .target-area-head-add-text {
    color: var(--primary);
    text-decoration: underline;
}
.target-area-add-form-wrap {
    padding: 14px 16px;
}

/* Add Target Clip placeholder row — sits at the bottom of each target
   area's clip stack. Dashed border + centered "click to fill" affordance,
   matches the root-video-add-tile pattern. */
/* Add Target Clip placeholder — Phase-container shape matching the real
   target clip rows above. Orange 5px left bar, light-orange header
   strip (when open, becomes a × Cancel hint). Whole tile clickable. */
.target-clip-add-placeholder {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 5px solid #c8961b;
    border-radius: 8px;
    overflow: hidden;
}
.target-clip-add-placeholder > details > summary {
    list-style: none;
    cursor: pointer;
    display: block;
}
.target-clip-add-placeholder > details > summary::-webkit-details-marker { display: none; }
.target-clip-add-placeholder > details > summary::marker { content: ''; }
/* Light-orange strip matching the real target clip rows' header */
.target-clip-add-summary-content {
    background: #fbf0d2;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.target-clip-add-icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    color: #8a6212;
    height: 24px;
    width: 36px;
}
.target-clip-add-icon-svg {
    width: 24px;
    height: 14px;
}
.target-clip-add-cta-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}
/* Open state — collapse the placeholder visual, show form. Summary
   collapses to a × Cancel hint top-right. */
.target-clip-add-placeholder:has(details[open]) {
    background: var(--panel);
    border-style: solid;
    border-color: var(--border);
}
.target-clip-add-placeholder details[open] summary {
    padding: 6px 14px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.target-clip-add-placeholder details[open] summary > * { display: none; }
.target-clip-add-placeholder details[open] summary::after { content: "× Cancel"; }
.target-clip-add-form {
    padding: 16px;
    max-width: 560px;
    margin: 0 auto;
}

/* Generic Add placeholder tile for any .program-stack — Build by placing.
   Reusable across Lessons (athletes / lessons), Workouts, Notebook, etc.
   Drop-in replacement for the old "+ Add X" buttons that sat in
   .console-section-actions.

   Closed: dashed-border card, big + icon centered, label below. Whole card
   is the click target (the entire summary covers the visible area).
   Open: card transforms — borders soften, icon + label hide, summary
   collapses to a small × Cancel link at the top right. Just the form is
   shown. */
.program-row-tile-add {
    background: #f1f5f9;
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.program-row-tile-add details summary {
    list-style: none;
    cursor: pointer;
    display: block;
    padding: 16px;
    text-align: center;
}
.program-row-tile-add details summary::-webkit-details-marker { display: none; }
.program-row-tile-add details summary::marker { content: ''; }
.program-row-tile-add-icon {
    display: block;
    font-size: 28px;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: 4px;
    user-select: none;
}
.program-row-tile-add-label {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
}

/* Open state — Modern :has() handles this cleanly for the parent. */
.program-row-tile-add:has(details[open]) {
    background: var(--panel);
    border: 1px solid var(--border);
}
.program-row-tile-add details[open] summary {
    padding: 6px 14px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
}
.program-row-tile-add details[open] .program-row-tile-add-icon,
.program-row-tile-add details[open] .program-row-tile-add-label {
    display: none;
}
.program-row-tile-add details[open] summary::after {
    content: "× Cancel";
}
.program-row-tile-add .form {
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 18px 18px 18px;
}
/* Target Clip add-placeholder CTA label — sits inside the right-side
   cta-area. The whole tile is the button, so the label IS the CTA.
   Dark-orange on light-orange to match the container theme. */
.target-clip-add-label {
    color: #7a5a12;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
}
.target-clip-add-placeholder:hover .target-clip-add-label,
.target-clip-add-placeholder summary:focus .target-clip-add-label {
    color: #8a6212;
    text-decoration: underline;
}
/* Target Area header strip — light-blue background extending edge-to-edge
   inside the block. Mirrors the .course-block-head treatment in
   program_form.html. */
.target-area-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--primary-soft);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.target-area-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.target-area-label {
    margin: 0;
    font-size: 16px;
    color: var(--text);
}

/* Canonical icon-only action button — Lessons app convention (target area,
   target clip, root video, lesson identity, athlete identity). Same size +
   styling whether it triggers Edit (✏️), Delete (🗑️), or anything else.
   White background + grey border. The icon inside does the talking.

   Works as <summary> inside <details>, as <a> linking to a page, or as
   <button type="submit"> inside a form. Once locked here, audit + roll
   out across other apps. */
/* ── Contextual help popover (.info-tip) — the reusable [i] primitive ──────
   Rendered by icons.info_tip(text) (partials/_icons.html). A small round
   [i] that toggles a short spot-specific explainer. Locked 2026-06-12. */
.info-tip {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 4px;
}
.info-tip > summary.info-tip-trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-soft, #f0f7ff);
    color: var(--primary);
    border: 1px solid var(--primary);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    user-select: none;
}
.info-tip > summary.info-tip-trigger::-webkit-details-marker { display: none; }
.info-tip > summary.info-tip-trigger::marker { content: ''; }
.info-tip[open] > summary.info-tip-trigger {
    background: var(--primary);
    color: #fff;
}
.info-tip-pop {
    position: absolute;
    top: 140%;
    left: 0;
    z-index: 40;
    width: 250px;
    max-width: 78vw;
    padding: 10px 12px;
    background: var(--panel, #fff);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
}

.icon-btn {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 5px 9px;
    min-width: 30px;
    min-height: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    user-select: none;
    font-family: inherit;
    font-weight: inherit;
}
button.icon-btn { -webkit-appearance: none; appearance: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn::marker { content: ''; }
.icon-btn:hover {
    background: #f1f5f9;
    border-color: var(--text-muted);
}
details[open] > .icon-btn {
    background: rgba(0,0,0,0.04);
}

/* Specificity override — the .inline-add.inline-add-compact > summary rule
   elsewhere paints summary as a blue primary button. When the summary
   carries .icon-btn, we want icon-btn to win regardless of wrapper. */
.inline-add > summary.icon-btn,
.inline-add.inline-add-compact > summary.icon-btn {
    background: #fff;
    color: inherit;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    min-width: 30px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.inline-add > summary.icon-btn:hover,
.inline-add.inline-add-compact > summary.icon-btn:hover {
    background: #f1f5f9;
    color: inherit;
    border-color: var(--text-muted);
}

/* Inline rename pencil — used on Target Area headings where the form
   expands beside the label (single input + Save). Uses .edit-icon-btn
   for the summary look. */
.rename-pencil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rename-pencil-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}
.rename-pencil-form input[type="text"] {
    font-size: 14px;
    padding: 4px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    min-width: 160px;
}
.target-area-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
/* Trash sits in the same group as the rename pencil but with a full
   button-width gap to prevent accidental delete clicks. */
.target-area-delete-action {
    margin-left: 44px;
}
.target-area-empty {
    margin: 0;
    padding: 8px 0;
    font-style: italic;
}
.target-clip-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
}
/* Target Clip row — Phase-style container: orange 5px left bar wraps the
   whole row, light-orange header strip across the top (name + source +
   time pill + actions), video and notes as side-by-side siblings in the
   content area below the strip. Mirrors the workout Phase container. */
.target-clip-row {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 5px solid #c8961b;
    border-radius: 8px;
    overflow: hidden;
}
.target-clip-header-strip {
    background: #fbf0d2;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
/* Compact icon buttons inside the header — smaller than the canonical
   .icon-btn so the orange header reads as a slim strip, not a full row. */
.target-clip-header-strip .icon-btn {
    padding: 2px 6px;
    min-height: 22px;
    min-width: 24px;
    font-size: 12px;
}
/* Header info: stacked rows. Row 1 = name + source + time pill; Row 2 =
   entity actions (edit + trash) sitting under the name. Move arrows are
   a sibling of .target-clip-header-info, positioned on the far right via
   .target-clip-header-strip's space-between. */
.target-clip-header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.target-clip-header-line1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.target-clip-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 12px;
    padding: 14px;
    align-items: stretch;
}
.target-clip-source {
    color: var(--text-muted);
}
/* Target Clip player — no fixed aspect ratio; video takes its native
   ratio at the column width. Portrait phone videos render tall;
   landscape refs render short. Row heights adapt to the content. */
.target-clip-player {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.target-clip-player video,
.target-clip-player .yt-window iframe,
.target-clip-player iframe {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    border: 0;
    background: #000;
}
/* The .target-clip-row row itself should also stretch to match the video's
   natural height so the notes column matches. Override grid baseline. */
.target-clip-row {
    align-items: stretch;
}
.target-clip-player .yt-window {
    width: 100%;
    height: 100%;
}
/* Legacy — unused after the Phase-container restructure. Kept for any
   stragglers but the active row uses .target-clip-header-strip /
   .target-clip-content instead. */
.target-clip-body { display: contents; }
.target-clip-header { padding-bottom: 0; }
/* Row 1: Clip name + entity actions (Edit/Delete) | move arrows */
.target-clip-header-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.target-clip-name {
    font-weight: 600;
    color: var(--text);
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
}
/* Entity actions (Edit + Delete) sit right after the title text. */
.target-clip-actions-entity {
    display: flex;
    gap: 6px;
    align-items: center;
}
/* Trash sits in the entity group but with a full button-width gap to
   prevent accidental delete clicks. */
.target-clip-delete-action {
    margin-left: 44px;
}
/* Move actions (▲ ▼) — positional concern. Pushed to the far right via
   margin-left:auto so they sit visually separated from the entity actions. */
.target-clip-actions-move {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}
/* Row 2: source-video label + name + time pill */
.target-clip-source-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.4;
}
.target-clip-source-label {
    font-weight: 500;
}
.target-clip-source-name {
    color: var(--text);
    font-size: 13px;
}
.target-clip-time-pill {
    display: inline-block;
    padding: 2px 10px;
    background: var(--primary-soft);
    color: var(--primary-deep);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* Labeled meta items in the header strip — "Root Video: foo", "Timestamp: pill" */
.target-clip-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1.3;
}
.target-clip-meta-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.target-clip-meta-value {
    color: var(--text);
    font-size: 13px;
}
.target-clip-divider {
    display: none;     /* legacy — Phase-style header strip replaces it */
}
/* Notes sub-container — sits in the content area beside the video. Plain
   bordered box (the orange treatment now lives on the OUTER row). Has
   a "Notes" header strip on top with a divider beneath. */
.target-clip-notes {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 0;
    overflow: hidden;
}
/* "Notes" header strip — also the click target for inline edit.
   Display the label on the left, the small ✏️ icon on the right;
   the whole strip is a <summary> so clicking anywhere toggles the
   edit form. */
.target-clip-notes-edit > summary {
    list-style: none;
    cursor: pointer;
}
.target-clip-notes-edit > summary::-webkit-details-marker { display: none; }
.target-clip-notes-edit > summary::marker { content: ''; }
.target-clip-notes-header {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.target-clip-notes-header-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.target-clip-notes-edit-icon {
    /* shrink slightly to fit comfortably in the small header */
    padding: 2px 6px;
    min-width: 24px;
    min-height: 22px;
    font-size: 12px;
}

/* When the edit details is open: show the form, hide the static body. */
.target-clip-notes-edit-form {
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.target-clip-notes-edit-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    resize: vertical;
}
.target-clip-notes-edit-actions {
    display: flex;
    gap: 8px;
}
.target-clip-notes:has(details[open]) .target-clip-notes-body {
    display: none;
}

.target-clip-notes-body {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
.target-clip-add {
    margin-top: 0;
}

/* ── Filter tabs ─────────────────────────────────────────────────────────── */

.filter-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 12px;
    align-self: center;
    padding-bottom: 8px;       /* aligns baseline with the tab text */
}

/* Resource search bar (sits above the Filters section) */
.resource-search {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    align-items: center;
}
.resource-search-input {
    flex: 1;
    min-width: 0;             /* allow shrink in flex row */
    max-width: 480px;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: white;
    color: #0f172a;
    font-size: 14px;
}
.resource-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}

/* Team tiles on the home page — clickable cards (<a href>) to switch teams. */
.team-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
/* Team tile is a container (<div>) wrapping two anchors:
   .team-tile-switch (main click area — switches active team)
   .team-tile-manage (footer link — opens team management page).
   HTML forbids nested <a>, so they're siblings inside the tile. */
.team-tile {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.team-tile:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15,107,194,0.12);
    transform: translateY(-1px);
}
.team-tile-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    flex: 1;
    position: relative;
}
.team-tile-switch:hover { text-decoration: none; }
.team-tile-manage {
    display: block;
    padding: 8px 18px;
    border-top: 1px solid var(--border);
    background: rgba(15, 107, 194, 0.03);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.12s, color 0.12s;
}
.team-tile-manage:hover {
    background: rgba(15, 107, 194, 0.10);
    color: var(--primary-deep);
    text-decoration: none;
}
.team-tile-personal { border-left: 4px solid #64748b; }
.team-tile-group    { border-left: 4px solid var(--primary); }
.team-tile-active {
    background: var(--primary-soft);
    border-color: var(--primary);
}
.team-tile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.team-tile-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.team-tile-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}
.team-tile-meta {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
}
.team-tile-active-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-deep);
    letter-spacing: 0.06em;
}

/* Dashed-outline "create new team" tile — visually distinct from real workspaces */
.team-tile-create {
    border: 1.5px dashed var(--border-strong);
    border-left: 1.5px dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.team-tile-create:hover {
    border-color: var(--primary);
    color: var(--primary-deep);
    background: rgba(15,107,194,0.04);
    text-decoration: none;
    transform: translateY(-1px);
}
.team-tile-create .team-tile-name {
    color: var(--primary-deep);
}

/* Sport-add page tiles — clickable cards to add a sport with one click. */
.sport-add-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.sport-add-tile-form { margin: 0; }
.sport-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 16px 12px;
    background: white;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.sport-add-tile:hover {
    border-color: var(--primary);
    background: rgba(15, 107, 194, 0.04);
    transform: translateY(-1px);
}
.sport-add-tile-icon {
    font-size: 32px;
    line-height: 1;
}
.sport-add-tile-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

/* Sidebar section labels — uppercase headers that demarcate the three tiers
   (Sport / Team / Activities) plus the Reference group. The .sport-block,
   .team-banner, and .sidebar-section-label-nav variants share a common style.
   NOTE: sidebar background is var(--panel) which is near-white; use dark
   muted color, NOT white. */
.sidebar-section-label {
    padding: 14px 14px 4px 14px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;  /* slate — visible on white sidebar background */
}
.sidebar-section-label-nav {
    /* Slightly smaller margin above when this section header appears in the
       nav list (vs above the sport/team blocks). */
    margin-top: 8px;
}

/* Home — Role cards. Two cards side by side describing Athlete and Coach.
   Card highlights when the user has that role (derived from team memberships). */
.role-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.role-card {
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.role-card-active {
    border-color: var(--primary);
    border-width: 1.5px;
    background: var(--primary-soft);
}
.role-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.role-card-icon {
    font-size: 22px;
    line-height: 1;
}
.role-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    flex: 1;
}
.role-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Home — Add a Team action cards (separate from the team tiles below).
   Two cards side by side: 'Track my own' and 'Create a team I coach'. */
.home-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.home-action-card {
    display: block;
    padding: 16px 18px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: white;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.home-action-card:hover {
    border-color: var(--primary);
    background: rgba(15, 107, 194, 0.04);
    transform: translateY(-1px);
    text-decoration: none;
}
.home-action-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.home-action-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-deep);
    margin-top: 2px;
}
.home-action-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Home — team tile placeholder logo (left of text in each tile). */
.team-tile-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    /* Real logo upload comes later — until then, initial-on-colored-disc placeholder. */
}
.team-tile-logo-personal { background: #64748b; }      /* slate */
.team-tile-logo-group    { background: var(--primary); } /* primary blue */

/* Home — Upcoming This Week list */
.upcoming-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}
.upcoming-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.upcoming-row:last-child { border-bottom: none; }
.upcoming-row-today {
    font-weight: 600;
}
.upcoming-date {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    min-width: 90px;
    flex-shrink: 0;
}
.upcoming-row-today .upcoming-date {
    color: var(--primary-deep);
    font-weight: 700;
}
.upcoming-name {
    flex: 1;
}

/* Home — sub-section blocks within a top-level <section>.
   Used to group related controls inside one container (e.g. "Your Teams"
   holds both "Add a Team" and "Teams you're on" as sub-sections). */
.home-subsection {
    margin-top: 18px;
}
.home-subsection:first-of-type {
    margin-top: 8px;
}
.home-subsection + .home-subsection {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.home-subsection-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    font-weight: 600;
}

/* Home — placeholder section (feature not built yet).
   Used for Practice Plans / Meal Plans / Messages / Schedule until
   their underlying Activities exist. */
.home-placeholder {
    padding: 18px 20px;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
}
.home-placeholder-tag {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--primary-soft);
    color: var(--primary-deep);
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
    font-weight: 600;
}

/* Home — Your Notes section.
   Inline quick-add form + recent-notes list. Reuses .upcoming-list / -row
   skeleton (consistent visual rhythm with Upcoming This Week below it). */
.home-quick-add {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin: 12px 0 4px 0;
}
.home-quick-add-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: white;
}
.home-quick-add-input:focus {
    outline: none;
    border-color: var(--primary-deep);
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.home-notes-row .home-notes-title {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
}
.home-notes-row .home-notes-title:hover {
    color: var(--primary-deep);
    text-decoration: underline;
}
.home-notes-cat {
    margin-left: 10px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Activity tab strip — top of every page within an "App" (Workouts,
   Notes). Console is the first tab; create-from-anywhere actions on
   the right. .app-tabs-row uses flex with a nav block + actions
   block so they sit on opposite ends of the row. */
.app-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.app-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.app-tabs-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* Activity Console — orientation header + numbered explainer + per-
   sub-page section heads with right-aligned action buttons. Used on
   workouts_console.html and notes_console.html. */
.console-explainer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
}
.console-explainer-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex: 1 1 220px;
    min-width: 200px;
    font-size: 14px;
    line-height: 1.45;
}
/* New 5-card explainer grid (Barry 2026-05-18). Each card vertical:
   numbered disc on top, task name, short description, detail bullets.
   All 5 fit on one row at standard widths. */
.explainer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.explainer-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 12px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.explainer-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-deep);
    color: white;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.explainer-card-task {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
}
.explainer-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
    text-align: center;
}
.explainer-card-bullets {
    list-style: disc inside;
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 0 0;
    padding: 0;
    width: 100%;
    text-align: left;
}
.explainer-card-bullets li { line-height: 1.4; }

.console-explainer-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-deep);
    color: white;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.console-explainer-arrow {
    align-self: center;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 18px;
    padding: 0 2px;
}
@media (max-width: 720px) {
    .console-explainer-arrow { display: none; }
}
.console-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.console-section-head h2 {
    margin: 0;
}
.console-section-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Note Playlists — edit-page item list (numbered, with reorder + remove
   buttons per row). Used inside playlist_form.html. */
.playlist-items {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    counter-reset: playlist-item;
}
.playlist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    background: white;
}
.playlist-item-pos {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 26px;
    flex-shrink: 0;
}
.playlist-item-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.playlist-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.btn-tiny {
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1;
}

/* Note Playlists — read-through view: each item rendered as a numbered
   article with the note's full body inline. Cliffs-notes consumption. */
.playlist-read-item {
    margin: 24px 0;
    padding: 20px 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.playlist-read-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.playlist-read-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-deep);
    color: white;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.playlist-read-title {
    margin: 0;
    font-size: 18px;
    flex: 1;
}
.playlist-read-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.playlist-read-body .prose {
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Notes list — small "team" tag next to owner name when owner is a
   group team (vs. a Personal team / individual user). Quick visual cue
   that this content is team-authored, not user-authored. */
.owner-tag-team {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--primary-soft);
    color: var(--primary-deep);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    font-weight: 600;
    vertical-align: middle;
}

/* Team list — sidebar's primary navigation for switching teams.
   Each team is a clickable row showing sport icon + label.
   Active team is highlighted. Add links sit at the bottom. */
.team-list {
    margin: 4px 12px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.team-list-form { margin: 0; }
.team-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    color: #0f172a;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}
.team-list-item:hover {
    border-color: var(--primary);
    background: rgba(15, 107, 194, 0.04);
}
.team-list-item-active {
    background: var(--primary-soft);
    border-color: var(--primary);
}
.team-list-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.team-list-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-list-sport-tag {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.team-list-add {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.12s;
}
.team-list-add:hover {
    background: rgba(15, 107, 194, 0.06);
    text-decoration: none;
}
.team-list-add-strong {
    font-weight: 600;
    color: var(--primary-deep);
    border: 1px dashed var(--border-strong);
    text-align: center;
    padding: 10px 12px;
}
.team-list-add-strong:hover {
    background: rgba(15, 107, 194, 0.08);
    border-color: var(--primary);
}
.team-list-empty {
    margin: 4px 12px 8px 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.team-list-empty-msg {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

/* Sport block — sits below the SPORT section label.
   Shows the active sport. Becomes a dropdown when user has 2+ sports.
   NOTE: sidebar is white (var(--panel)); use dark text, not white. */
.sport-block {
    margin: 4px 12px 6px 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: white;
    border: 1px solid var(--border-strong);
}
.sport-block-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.sport-block-select {
    width: 100%;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 700;
    background: white;
    color: #0f172a;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.sport-block-add {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--primary);
    text-decoration: none;
}
.sport-block-add:hover {
    color: var(--primary-deep);
    text-decoration: underline;
}

/* Team banner — sits below the Sport block, shows which Team is active.
   Color tinted by kind (personal vs team) so the user can recognize at a glance. */
.team-banner {
    margin: 8px 12px 14px 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: white;
    position: relative;
}
.team-banner-personal { border-left: 4px solid #64748b; }     /* slate */
.team-banner-group    { border-left: 4px solid var(--primary); } /* blue */
.team-banner-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.team-banner-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
    line-height: 1.2;
}
.team-banner-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.team-banner-switch {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    color: var(--primary);
    text-decoration: none;
}
.team-banner-switch:hover { text-decoration: underline; }

/* In-page activity tabs — large pill-buttons at the top of activity pages with
   sub-pages. E.g. Workouts activity has tabs for Exercise Library / Session
   Library / Assessments. Sidebar shows only the activity itself; sub-page
   navigation lives in-page. */
/* Tab strip — owner-block-style container holding nav pills.
   Used by app_tabs_workouts.html + app_tabs_notes.html partials. */
.app-tabs {
    margin: 0 0 18px 0;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border-left: 6px solid rgba(255, 255, 255, 0.30);
}
.app-tabs-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}
.app-tabs-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
/* Inner nav groups inside the tab row — primary on the left, libraries on
   the right. Each group is its own flex container so its tabs stay together. */
.app-tabs-nav-left, .app-tabs-nav-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.app-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.app-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
    color: white;
    text-decoration: none;
}
.app-tab-active {
    background: white;
    border-color: white;
    color: var(--primary);
}
.app-tab-active:hover {
    background: white;
    border-color: white;
    color: var(--primary);
}
/* Placeholder variant — sub-page exists in the design but isn't built
   yet. Muted text, dashed border, not clickable. Used by app-tabs
   partials for placeholder apps (Practice Plans / Messages / Meal
   Planner / Teams) and future-tabs-inside-real-apps (Schedule Events,
   Equipment Wishlist split, etc.). */
.app-tab-placeholder {
    color: rgba(255, 255, 255, 0.40);
    border-color: rgba(255, 255, 255, 0.18);
    border-style: dashed;
    cursor: not-allowed;
    background: transparent;
}
.app-tab-placeholder:hover {
    color: rgba(255, 255, 255, 0.40);
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
    text-decoration: none;
}

/* App-level help guide — collapsible <details> block per app. Sits
   between the page-header and the app tab strip on each app's
   console. Closed by default to keep the chrome compact; opens to
   reveal app-specific orientation content (currently empty —
   content authored later). */
.app-help {
    margin: 0 0 16px 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}
.app-help-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.app-help-summary::-webkit-details-marker { display: none; }
.app-help-summary:hover {
    color: white;
    background: rgba(255, 255, 255, 0.06);
}
.app-help-toggle {
    transition: transform 0.15s ease;
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
}
.app-help[open] > .app-help-summary > .app-help-toggle {
    transform: rotate(180deg);
}
.app-help-content {
    padding: 4px 14px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.5;
}
.app-help-content p { margin: 8px 0; }
.app-help-content p:first-child { margin-top: 4px; }
.app-help-content p:last-child { margin-bottom: 0; }
/* Section sub-header inside a help dropdown — e.g. "How it ties together"
   inside the Workouts help guide. Sits between the intro paragraph and a
   block of grid/list content. Smaller than the dropdown's summary label,
   distinct from body paragraphs. */
.app-help-section-h {
    margin: 14px 0 10px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
}

/* App-shell page-header — stacks h1 + help dropdown vertically (was
   flex row for h1/actions in the legacy pattern). When .page-header
   also has .page-header-shell, it switches to column layout and the
   nested help dropdown takes full width with its own orange-strip
   border that mirrors the page-header's left+bottom accent. */
.page-header-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.page-header-shell h1 { margin: 0 0 10px 0; }
.page-header-shell .app-help {
    margin: 0;
    width: 100%;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.20);
}
.page-header-shell .app-help-summary { padding: 9px 12px; }
.page-header-shell .app-help-content { padding: 4px 12px 12px 12px; }

/* In-shell variant of the app tab strip (2026-05-22). When .app-tabs
   sits INSIDE .page-header-shell, it's chrome of the app-header
   container — no own background/border-left needed (the container
   already provides those). Pills shrink: smaller padding, smaller
   font. Composes with feedback-collapse-ui-surfaces.md — same intent
   as moving Favorites inside the builder: helpers live inside the
   container that owns them, not as separate strips. */
.page-header-shell .app-tabs {
    margin: 10px 0 0 0;
    padding: 0;
    background: transparent;
    border-left: none;
    border-radius: 0;
}
.page-header-shell .app-tabs-row {
    gap: 6px;
}
.page-header-shell .app-tabs-nav-left,
.page-header-shell .app-tabs-nav-right {
    gap: 6px;
}
.page-header-shell .app-tab {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Page content header — the sub-page identity row that sits BELOW the
   app shell (page-header + tab strip + divider). Holds the entity
   name as h2, optional muted subtitle, optional action buttons, and
   optional breadcrumbs. Locked 2026-05-19 per the app-shell pattern.
   App h1 stays consistent across every page within an app; this h2
   row is where "where am I within the app" lives. */
.page-content-header {
    margin-bottom: 18px;
}
/* Page content sits on the dark blue page bg, so text needs to read
   light. h2 in white; muted subtitle in light grey. Mirrors the
   page-header's text-on-dark color treatment. */
.page-content-header h2 {
    margin: 0 0 4px 0;
    color: white;
}
.page-content-header p.muted {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.75);
}
.page-content-header h2 .muted { color: rgba(255, 255, 255, 0.55); }
.page-content-header .breadcrumbs { margin-top: 6px; }
.page-content-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.page-content-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Sidebar mode header — non-clickable label for a mode that has sub-pages.
   Used when an item has children (e.g. Workouts -> Exercise Library / Session Library / Assessments). */
.nav-mode-header {
    padding: 8px 12px 4px 12px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    user-select: none;
}

/* Sidebar divider — subtle horizontal line between groups of nav items */
.nav-divider {
    height: 1px;
    margin: 10px 12px;
    background: var(--border);
}

/* "Filters" section header above the type + status filter rows */
.filters-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.filters-icon {
    width: 20px;
    height: 20px;
    color: white;
}
/* mm-filters-disclosure-block */
.filters-disclosure > summary.filters-section-header {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.filters-disclosure > summary.filters-section-header::-webkit-details-marker {
    display: none;
}
.filters-disclosure > summary.filters-section-header::after {
    content: "▾";
    margin-left: 6px;
    font-size: 12px;
    transition: transform 0.15s ease;
    display: inline-block;
}
.filters-disclosure:not([open]) > summary.filters-section-header::after {
    transform: rotate(-90deg);
}
.filters-disclosure[open] > summary.filters-section-header {
    margin-bottom: 14px;
}
.filters-active-count {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.85;
    margin-left: 4px;
}
.filter-tab {
    padding: 8px 14px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.08s, border-color 0.08s;
}
.filter-tab:hover {
    color: white;
    text-decoration: none;
    border-bottom-color: rgba(255,255,255,0.5);
}
.filter-tab.active {
    color: white;
    border-bottom-color: white;
    font-weight: 600;
}
.filter-count {
    font-size: 11px;
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}
.filter-tab.active .filter-count { background: white; color: var(--primary); }

/* Help Guide page — TOC + content sections */
.help-toc-list,
.help-toc-list ol {
    list-style: decimal;
    padding-left: 22px;
    margin: 0;
    line-height: 1.8;
}
.help-toc-list ol {
    margin: 4px 0 8px;
    list-style: lower-alpha;
}
.help-toc-list a {
    color: var(--primary-deep);
    text-decoration: none;
}
.help-toc-list a:hover { text-decoration: underline; }
.help-section h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text);
}
.help-section p {
    margin: 0 0 10px;
    line-height: 1.55;
}
.help-section ul {
    margin: 0 0 10px 22px;
    line-height: 1.6;
}
.help-section code {
    background: #e2e8f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
}

/* Secondary status filter row — slightly less emphasis than the primary type row */
.filter-tabs-status {
    margin-top: -8px;       /* tighter spacing under the type row */
    border-bottom: none;
}
.filter-tabs-status .filter-tab {
    font-size: 12px;
    padding: 6px 12px;
}

/* ── Pills (exercise type) ───────────────────────────────────────────────── */

.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}
.pill-movement   { background: #bbf7d0; color: #14532d; }  /* green — main work */
.pill-drill      { background: #ddd6fe; color: #5b21b6; }  /* purple — skill work */
.pill-warm_up    { background: #fed7aa; color: #7c2d12; }  /* orange — warm-up */
.pill-speed      { background: #fde68a; color: #854d0e; }  /* amber — speed/sprint */
.pill-agility    { background: #a5f3fc; color: #155e75; }  /* cyan — agility/footwork */
.pill-dictionary { background: #cffafe; color: #155e75; }  /* cyan — definitions */
.pill-book       { background: #fecaca; color: #991b1b; }  /* coral — references */
.pill-website    { background: #e0e7ff; color: #3730a3; }  /* indigo — links */

/* Notes — freeform category pill (single neutral color since categories are user-defined) */
.pill-note-category { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

/* Session scheduling type pills */
.pill-scheduling-planned { background: #e3eaf3; color: #1e40af; }
.pill-scheduling-adhoc   { background: #ffe4e6; color: #9f1239; }

/* Session status badges */
.badge-session-scheduled   { background: #e5e7eb; color: #374151; }
.badge-session-in_progress { background: #e3eaf3; color: #1e40af; }
.badge-session-complete    { background: var(--primary-soft); color: var(--primary-deep); }
.badge-session-skipped     { background: #e5e7eb; color: #6b7280; }
.badge-session-overdue     { background: #fee2e2; color: #991b1b; }

/* Assessment type pills */
.pill-assessment-movement           { background: #e0e7ff; color: #3730a3; }
.pill-assessment-pitching_mechanics { background: #fef3c7; color: #92400e; }
.pill-assessment-hitting_mechanics  { background: #ffe4e6; color: #9f1239; }

/* Assessment status badges */
.badge-assessment-active    { background: var(--primary-soft); color: var(--primary-deep); }
.badge-assessment-complete  { background: #e3eaf3; color: #1e40af; }
.badge-assessment-archived  { background: #e5e7eb; color: #4b5563; }

/* ── Session-exercises table (compact) ───────────────────────────────── */

.sx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}
.sx-table th, .sx-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.sx-table th {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    background: #f1f5f9; /* same as .data-table th — light-grey on the form's white panel */
}
.sx-table tr:last-child td { border-bottom: none; }
.sx-table input[type="text"] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: white;
}
.sx-table input[type="text"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}
.sx-table .sx-name {
    font-weight: 500;
    color: var(--text);
    margin-right: 6px;
}

/* Elegant chart variant (2026-06-20) — rounded, defined header, column lines. */
.sx-chart {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d4dce5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 33, 64, .04);
}
.sx-chart th, .sx-chart td {
    border-bottom: 1px solid #d3dbe5;
    border-right: 1px solid #d3dbe5;
    vertical-align: middle;
}
.sx-chart th:last-child, .sx-chart td:last-child { border-right: none; }
.sx-chart tbody tr:last-child td { border-bottom: none; }
/* Exercise rows + empty "ghost" rows share the same grey — a real row is
   distinguished by its text + input fields, not by a darker shade. */
.sx-chart tbody td { background: #eef1f6; }

/* Ghost rows pad the chart to a minimum so it reads as a chart from the start
   and previews how it'll fill; same grey, just a fixed row height. */
.sx-chart tbody tr.sx-ghost-row td { height: 34px; }
.sx-chart thead th {
    background: #c8961b;            /* softer, muted orange (was the harsh #c8961b) */
    color: #fff;
    border-right-color: rgba(255, 255, 255, .28);
    border-bottom: none;
    padding: 9px 10px;
}
.sx-chart thead th .label-hint { color: #fff; opacity: 1; font-weight: 500; }

/* Sort column + delete cell (2026-06-20) — defined Sort column (header +
   arrows), then a clear trash beyond a column divider. */
.sx-chart .sx-col-sort {
    width: 56px; text-align: center; white-space: nowrap;
}
.sx-chart thead th.sx-col-sort { letter-spacing: .03em; }
.sx-chart .sx-col-remove { width: 42px; text-align: center; }
.sx-sortbtn {
    display: inline-block; background: none; border: none; cursor: pointer;
    padding: 1px 2px; color: #66758a; line-height: 1; vertical-align: middle;
}
.sx-sortbtn:hover { color: var(--primary, #0c2340); }
.sx-sortbtn svg { width: 15px; height: 15px; display: block; }
.sx-trash {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: #98a4b3; line-height: 1;
}
.sx-trash:hover { color: #dc2626; }
.sx-trash svg { width: 17px; height: 17px; display: block; margin: 0 auto; }

/* Build-by-placing "+ Add exercises" row inside the chart. */
.sx-add-row td { padding: 0 !important; border-right: none; background: #fff; }
.sx-add-details > summary {
    list-style: none; cursor: pointer; display: block;
    padding: 11px 12px; text-align: center; font-weight: 600;
    color: #37414f;                /* slate */
    background: #cbd4e0;           /* darker than the rows — the action footer */
    border-top: 1px dashed #a6b2c1;
}
.sx-add-details > summary::-webkit-details-marker { display: none; }
.sx-add-details > summary:hover { background: #bdc8d6; }
.sx-add-details[open] > summary { border-bottom: 1px solid #e7ecf3; }
.sx-add-body { padding: 10px 12px 12px; }
.sx-col-name         { width: 18%; }
.sx-col-type         { width: 10%; }
.sx-col-category     { width: 14%; }
.sx-col-prescription { width: 25%; }
.sx-col-notes        { width: 28%; }
.sx-col-remove       { width: 5%; }
.sx-col-circuit      { width: 8%; }

/* Circuits (2026-06-19) — Manage-circuits panel + per-row picker */
.circuit-manage { margin-bottom: 8px; }
.circuit-manage-body { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.circuit-edit-row,
.circuit-add-row {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; background: var(--panel);
    border: 1px solid var(--border);
}
.circuit-add-row { border-style: dashed; }
.circuit-fld { display: flex; flex-direction: column; gap: 2px; }
.circuit-lbl { width: 90px; }
.circuit-edit-row .rx-num,
.circuit-add-row  .rx-num { width: 72px; }
.circuit-pick { width: 100%; min-width: 56px; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* "+ Add circuit" — a small left-justified button (not the full-width blue
   bar the default .inline-add container produced), white text. */
#add-circuit {
    display: inline-block; width: auto; margin: 12px 0 0;
    padding: 0; background: transparent; border: none;
}
#add-circuit > summary {
    display: inline-block; list-style: none; cursor: pointer;
    background: var(--primary, #0c2340); color: #fff;
    padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 13px;
}
#add-circuit > summary::-webkit-details-marker { display: none; }
#add-circuit > summary:hover { background: var(--primary-hover, #1e40af); color: #fff; }
#add-circuit[open] { display: block; }

/* Circuit grouping in the exercise table + circuit cards (2026-06-19) */
.sx-table .circuit-group-head td {
    background: var(--primary-soft, #e0edff); color: var(--primary-deep, #0c2340);
    font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    padding: 6px 12px;
}
.circuit-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
.circuit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.circuit-card-title { font-weight: 600; color: var(--text); }
.circuit-card-actions { display: inline-flex; gap: 4px; align-items: center; }
.circuit-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.circuit-form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.circuit-checklist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
    max-height: 220px; overflow-y: auto; padding: 4px 2px; }
.circuit-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.circuit-check input { width: 16px; height: 16px; }

/* Phone circuits (2026-06-20, v2) — the bar is its own standalone element;
   the cards below are the EXACT standalone cards (same white border, radius,
   shadow) with only the faded background swapped from blue to the circuit
   color. */
.phone-circuit-wrap { margin: 18px 0; }
.phone-circuit-bar {
    background: var(--circ-color, #6366f1); color: #fff;
    padding: 9px 14px; border-radius: 12px; font-weight: 700; font-size: 16px;
    margin-bottom: 8px;
}
.phone-circuit-bar-sub { font-weight: 500; font-size: 13px; opacity: .92; }
/* Same card, only the faded background changes (keep border/radius/shadow).
   Matched to the standalone blue's saturation — the standard card is a
   translucent overlay on the dark blue page, so it reads fairly deep; the
   circuit fade needs the color at a similar strength, not a near-white tint. */
.phone-circuit-wrap .phone-ex {
    background: #cfe0f5;
    background: color-mix(in srgb, var(--circ-color, #6366f1) 68%, #fff);
}

/* Tags chip input (2026-06-19) */
.tag-input {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 8px; background: #fff; min-height: 40px;
}
.tag-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--primary-soft, #e0edff); color: var(--primary-deep, #0c2340);
    border-radius: 14px; padding: 3px 6px 3px 11px; font-size: 13px; font-weight: 500;
}
.tag-chip-x {
    border: none; background: none; cursor: pointer; font-size: 16px;
    line-height: 1; color: inherit; padding: 0 2px; opacity: .65;
}
.tag-chip-x:hover { opacity: 1; }
.tag-entry { border: none; outline: none; flex: 1; min-width: 130px; padding: 4px; font-size: 14px; background: transparent; }
.tag-entry[hidden] { display: none; }
/* Build-by-placing add affordance for tags — a dashed pill sitting after the
   chips; click to reveal the inline entry (2026-06-20). */
.tag-add-pill {
    border: 1px dashed var(--border); background: transparent;
    color: var(--text-muted); border-radius: 14px; padding: 3px 12px;
    font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.4;
}
.tag-add-pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft, #e0edff); }
.tag-add-pill[hidden] { display: none; }

/* Flat editor group (2026-06-20) — replaces .form-subsection inside the
   exercise editor: spacing only, no nested panel, no left accent bar. */
.ex-group { margin: 0 0 6px; }
.ex-group + .ex-group { margin-top: 4px; }

/* Divider above the editors' bottom Save/Cancel bar (2026-06-20). */
.editor-divider {
    border: 0; border-top: 1px solid var(--border);
    margin: 22px 0 14px;
}

/* Section header inside the flat exercise editor (Tutorial / Images / Videos) —
   a plain <h2>, matching the workout builder's section headers exactly; this
   class only adds top spacing to separate the sections (2026-06-20). */
.ex-section-h { margin: 18px 0 8px; }

/* Tutorial sub-containers (2026-06-19) */
.tut-block {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 12px 11px; margin-bottom: 10px; background: #fff;
}
.tut-block-h {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--primary-deep, #0c2340); margin: 0 0 6px;
}
.tut-block textarea { width: 100%; }

/* Tags shown as chips on view/library surfaces */
.tag-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag-pill {
    display: inline-block; background: var(--primary-soft, #e0edff);
    color: var(--primary-deep, #0c2340); border-radius: 12px;
    padding: 2px 9px; font-size: 12px; font-weight: 500; white-space: nowrap;
}

/* Multi-select add-exercise picker (2026-06-19) — collapsible disclosure */
.add-ex-picker { margin-bottom: 14px; }
.add-ex-picker-body { padding-top: 8px; }
.add-ex-filter {
    width: 100%; max-width: 420px; margin-bottom: 8px;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
}
.add-ex-list {
    max-height: 280px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); padding: 4px 0; margin-bottom: 10px;
}
.add-ex-group-head {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
    padding: 8px 12px 4px;
}
.add-ex-item {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 12px; cursor: pointer; font-size: 14px;
}
.add-ex-item:hover { background: var(--primary-soft); }
.add-ex-item input { width: 17px; height: 17px; flex: 0 0 auto; }
.add-ex-item-name { color: var(--text); }
.add-ex-item-cat {
    margin-left: auto; font-size: 12px; color: var(--text-muted);
    white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.add-ex-tagfilter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.aetf {
    border: 1px solid var(--border); background: #fff; color: var(--text);
    border-radius: 13px; padding: 3px 11px; font-size: 12px; cursor: pointer;
}
.aetf:hover { background: var(--primary-soft, #eef4ff); }
.aetf-active { background: var(--primary, #0c2340); color: #fff; border-color: var(--primary, #0c2340); }

.sx-batch-form {
    margin-bottom: 8px;
}

.btn-trash {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    color: var(--text-faint);
    border-radius: 4px;
    line-height: 1;
}
.btn-trash:hover {
    background: #fee2e2;
    color: var(--danger);
}
.sx-col-remove { text-align: center; }

.sx-save-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.sx-placeholder-row td {
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Chips (for linked-assessment bubbles) */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 12px;
}
.chip a { color: var(--text); font-weight: 500; }
.chip-type { color: var(--text-muted); font-size: 11px; }
.chip-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}
.chip-remove:hover { color: var(--danger); }

/* ── Form hints ──────────────────────────────────────────────────────────── */

.label-hint {
    /* Inline parenthetical next to a form label — lighter, normal case,
       muted dark grey to be readable on the white form panel. */
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.8;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}
.field-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/* ── Media section ──────────────────────────────────────────────────────── */

.media-row {
    margin-bottom: 16px;
}
.media-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.media-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.references-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.btn-icon {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);                  /* red by default — it's a delete */
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover { background: var(--bg); color: var(--danger); border-color: var(--danger); }

/* ── Inline add forms (<details>/<summary>) ─────────────────────────────── */

.inline-add {
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
}

/* Compact variant — sized like a button when closed, expands to form when opened.
   Used for Upload image / Add video / Edit reminder snippet on exercise edit page. */
.inline-add-compact {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}
/* Higher specificity (.inline-add.inline-add-compact) so this wins over the
   plain .inline-add summary rule defined later in the file. */
.inline-add.inline-add-compact > summary {
    display: inline-block;
    padding: 8px 14px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;                 /* hide default triangle */
    user-select: none;
}
.inline-add.inline-add-compact > summary::-webkit-details-marker { display: none; }
.inline-add.inline-add-compact > summary::marker { display: none; }
.inline-add.inline-add-compact > summary:hover {
    background: var(--primary-deep);
    color: white;
}
.inline-add-compact[open] > summary {
    margin-bottom: 10px;
}
.inline-add-compact[open] {
    display: block;                   /* take width for the form */
    padding: 12px;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    max-width: 560px;
}
.inline-add[open] { background: var(--panel); border-style: solid; }
.inline-add summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    user-select: none;
    padding: 4px 0;
}
.inline-add summary:hover { color: var(--primary-hover); }
.inline-form {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}
.inline-form .form-row { margin-bottom: 10px; }

/* ── Image gallery ───────────────────────────────────────────────────────── */

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 16px;
}
.image-tile {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.image-tile img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.image-caption {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--text);
}
.image-delete {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(2px);
}

.image-tile-primary {
    max-width: 400px;
    border: 2px solid var(--primary);
    position: relative;
}
.image-tile-primary img {
    height: auto;
    max-height: 320px;
    object-fit: contain;
    background: var(--bg);
}

.media-sub-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

/* Unified responsive image grid — fills the container width with
   uniform square tiles. Primary is marked, not separated. */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
/* Make tile image area perfectly square regardless of grid cell width;
   image is contained (not cropped) so tall/wide images get clean
   letterbox bars on the short axis. */
.image-grid .image-tile img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #f1f5f9;                 /* soft light-grey letterbox backing */
}
/* Primary tile inside the grid: blue accent border, full grid width
   (override the stand-alone .image-tile-primary max-width) */
.image-grid .image-tile-primary {
    max-width: none;
    border: 2px solid var(--primary);
}
.image-grid .image-tile-primary img {
    object-fit: contain;
    max-height: none;
}

/* Placeholder tiles for the empty state match grid cell size exactly */
.image-placeholder-tile {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

/* Square image placeholder building block (used in grid + stand-alone) */
.image-placeholder {
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.image-placeholder svg {
    width: 32px;
    height: 32px;
}

/* Primary-image "★ Primary" badge — top-right corner pill */
.image-primary-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Video grid (same shape as image grid, wider tiles for 16:9) ───────── */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.video-tile {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.video-tile-primary {
    border: 2px solid var(--primary);
}
.video-tile-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.video-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-tile-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    transition: background 0.15s;
}
.video-tile-thumb:hover .video-tile-play {
    background: rgba(0,0,0,0.25);
}

.video-placeholder {
    aspect-ratio: 16 / 9;
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.video-placeholder svg {
    width: 40px;
    height: 40px;
}

/* Primary video tile's action bar when it hosts the inline snippet editor:
   × delete | Snippet | [start] – [end] | Save — all in the blue bottom bar. */
.image-tile-actions.video-actions-snippet {
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 8px;
    flex-wrap: wrap;                /* graceful wrap on narrow tiles */
}
.video-actions-snippet .snippet-label {
    font-size: 11px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.03em;
    margin-left: 2px;
}
.video-actions-snippet .snippet-input {
    width: 46px;
    padding: 2px 4px;
    font-size: 11px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    -moz-appearance: textfield;     /* hide number spinners on Firefox */
}
.video-actions-snippet .snippet-input::-webkit-inner-spin-button,
.video-actions-snippet .snippet-input::-webkit-outer-spin-button {
    -webkit-appearance: none;       /* hide spinners on WebKit */
    margin: 0;
}
.video-actions-snippet .snippet-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}
.video-actions-snippet .snippet-sep {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.video-actions-snippet .snippet-save {
    margin-left: auto;              /* pin to far right */
}

/* (Legacy — no longer rendered but kept in case other pages reference) */
.reminder-snippet-box {
    max-width: 355px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}
.reminder-snippet-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.9);
}
/* Labels white + inputs stay inside the box (don't overflow) */
.reminder-snippet-box .form-row label {
    color: rgba(255, 255, 255, 0.9);
}
.reminder-snippet-box .form-row input[type="number"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.reminder-snippet-box .form-grid-2 {
    gap: 0 10px;
}

.placeholder-tile {
    padding: 24px;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
    max-width: 400px;
    margin-bottom: 8px;
}

.image-tile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
/* Buttons inside the blue tile action row need to be white outline for contrast */
.image-tile-actions .btn-sm,
.image-tile-actions .btn-icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: white;
}
.image-tile-actions .btn-sm:hover,
.image-tile-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    color: white;
}

.btn-sm {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.btn-sm:hover { background: var(--primary); color: white; border-color: var(--primary); }

.form-minimal {
    max-width: 520px;
}

.build-hint,
.muted.build-hint {
    margin-top: -8px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.85); /* readable against blue gradient bg — beats .muted */
}

/* ── Page title row (title + inline pill) ───────────────────────────────── */
.page-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

/* ── User pills (who a session / placement is FOR) ──────────────────────── */
.user-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(30, 58, 138, 0.12);
    color: var(--primary);
    border: 1px solid rgba(30, 58, 138, 0.2);
    white-space: nowrap;
}
.user-pill-lg {
    padding: 4px 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}
.cal-user-tag {
    display: inline-block;
    width: 14px; height: 14px;
    line-height: 14px;
    text-align: center;
    background: var(--primary);
    color: white;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    margin-right: 4px;
    vertical-align: middle;
}

/* ── Inline filter form (e.g. Sessions list user filter) ────────────────── */
.inline-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
}
.inline-filter-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
}
.inline-filter select {
    padding: 4px 8px;
}

/* ── Calendar ───────────────────────────────────────────────────────────── */

.cal-month-label {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cal-weekday {
    background: var(--bg);
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;   /* dark-blue cell bg → white text (light-bg trap in reverse) */
    text-align: center;
}

.cal-day {
    background: var(--panel);
    min-height: 100px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.08s;
}
.cal-day:hover { background: var(--bg); text-decoration: none; }

/* Day-cell rendered as a submit button (session build page toggle grid) */
button.cal-day-btn {
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cal-day-placed {
    background: #dcfce7;              /* soft green — this session is placed here */
}
.cal-day-placed:hover { background: #bbf7d0; }
.cal-day-mark {
    align-self: flex-start;
    color: #16a34a;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}

.cal-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 14px;
}
.cal-nav-row .cal-month-label {
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    min-width: 140px;
    text-align: center;
}

.cal-day-out { background: #fafafc; color: var(--text-faint); }
.cal-day-out .cal-day-num { color: var(--text-faint); }

.cal-day-today {
    background: #e3eaf3;
}
.cal-day-today .cal-day-num {
    background: var(--primary);
    color: white;
    border-radius: 50%;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
}

.cal-day-num {
    font-size: 13px;
    font-weight: 500;
}

.cal-placements {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}
.cal-placement {
    font-size: 11px;
    padding: 2px 6px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Program Workout Day placements — same blue family as ad-hoc sessions but
   with a left accent bar so a scheduled program day reads as "program" at a
   glance (Req/15 Phase 2 calendar merge). */
.cal-placement-program {
    border-left: 3px solid #4f46e5;
    background: #eef2ff;
}
/* Event chips on the calendar grid — visually distinct from session
   placements (orange/coral instead of blue) so workouts vs. events
   read at a glance. Kind-specific tints layer on top for game/lesson/etc. */
.cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}
.cal-event {
    font-size: 11px;
    padding: 2px 6px;
    background: #fff2d8;        /* light coral default */
    color: #92400e;
    border-radius: 3px;
    border-left: 3px solid #c8961b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-event-time {
    font-weight: 600;
    color: #7c2d12;
}
.cal-event-game        { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; }
.cal-event-practice    { background: #ddd6fe; color: #5b21b6; border-left-color: #8b5cf6; }
.cal-event-lesson      { background: #d1fae5; color: #065f46; border-left-color: #10b981; }
.cal-event-spectator   { background: #fce7f3; color: #9d174d; border-left-color: #ec4899; }
.cal-event-tournament  { background: #fee2e2; color: #991b1b; border-left-color: #ef4444; }
.cal-event-tryout      { background: #fbf0d2; color: #7a5a12; border-left-color: #c8961b; }
.cal-event-travel      { background: #e0f2fe; color: #075985; border-left-color: #0ea5e9; }

/* Event card — rich layout on the calendar-day detail page (one card per
   event with all the typical fields: when, where + map, matchup, uniform,
   cost, what to bring, etc.). Kind-specific left border matches the
   grid-chip color. */
.event-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}
.event-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 5px solid #c8961b;
    border-radius: 8px;
    padding: 14px 16px;
}
.event-card-game        { border-left-color: #f59e0b; }
.event-card-practice    { border-left-color: #8b5cf6; }
.event-card-lesson      { border-left-color: #10b981; }
.event-card-spectator   { border-left-color: #ec4899; }
.event-card-tournament  { border-left-color: #ef4444; }
.event-card-tryout      { border-left-color: #c8961b; }
.event-card-travel      { border-left-color: #0ea5e9; }
.event-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.event-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}
.event-kind-badge {
    background: var(--primary-soft);
    color: var(--primary-deep);
    font-size: 11px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.event-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 16px;
    margin-bottom: 8px;
}
.event-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.event-field-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.event-field-value {
    font-size: 14px;
    color: var(--text);
}
.event-map-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}
.event-map-link:hover {
    text-decoration: underline;
}
.event-card-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.event-bring-list {
    font-size: 13px;
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.5;
}

/* ── Login page ─────────────────────────────────────────────────────────── */

.login-body {
    background: linear-gradient(135deg, #16406b 0%, #0c2340 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    width: 100%;
    max-width: 380px;
}
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.login-card h1 {
    margin: 0 0 24px 0;
    font-size: 22px;
}
.login-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
}
.btn-full { width: 100%; padding: 10px; margin-top: 8px; }

/* ── Sidebar user block ─────────────────────────────────────────────────── */

.sidebar-account-label {
    /* "ACCOUNT" header above the user info — mirrors the nav-section-label style. */
    padding: 0 20px;
    margin-top: 4px;
    margin-bottom: 6px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sidebar-user {
    padding: 0 20px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-user-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.sidebar-user-field-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);            /* sidebar bg is white — use dark text */
}
.sidebar-role-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 8px;
}
.sidebar-role-admin   { background: var(--primary-soft); color: var(--primary-deep); }
.sidebar-role-coach   { background: #fbf0d2; color: #7a5a12; }
.sidebar-role-athlete { background: #e5e7eb; color: #374151; }   /* slate — visible on white */
.sidebar-role-author  { background: #fef3c7; color: #78350f; }   /* warm amber — author dummy */

/* Sidebar buttons — stacked Edit Profile + Sign Out on the white sidebar.
   Primary = filled blue. Secondary = outline. */
.sidebar-account-btn {
    display: block;
    width: 100%;
    padding: 6px 10px;
    margin-top: 4px;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar-account-btn:hover {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
    color: white;
    text-decoration: none;
}
.sidebar-account-btn.active {
    background: var(--primary-deep);
    border-color: var(--primary-deep);
}
.sidebar-account-btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-strong);
}
.sidebar-account-btn-secondary:hover {
    background: #f1f5f9;
    color: var(--text);
    border-color: var(--text-muted);
}
.sidebar-logout-form { margin: 0; }

/* Legacy logout-btn class kept for any other reference (no harm) */
.sidebar-logout-btn {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}
.sidebar-logout-btn:hover { color: var(--primary-hover); }

/* ── Phone PWA ──────────────────────────────────────────────────────────── */

.phone-body {
    background: var(--bg-gradient);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.phone-header {
    background: var(--primary);
    color: white;
    padding: env(safe-area-inset-top, 12px) 16px 12px 16px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.phone-brand {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.01em;
}
.phone-back {
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    min-width: 70px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.phone-back-arrow {
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}
.phone-back:hover { color: white; text-decoration: underline; }

/* Signed-in identity in the phone header (2026-06-11 — "so you know how
   you are logged in"). Home groups name + Sign out on the right; sub-pages
   show the name alone in the header's right slot. Dark-blue header chrome
   → light-on-dark is correct here. */
.phone-header-account {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.phone-user {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38vw;
    text-align: right;
}
.phone-logout-form { margin: 0; }
.phone-logout-btn {
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.15);
}
.phone-logout-btn:active {
    background: rgba(255, 255, 255, 0.28);
    color: white;
}

.phone-main {
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 32px) 16px;
    max-width: 640px;
    margin: 0 auto;
}

.phone-today-label {
    font-size: 26px;
    font-weight: 700;
    margin: 4px 0 16px 0;
    line-height: 1.1;
    color: white;
}
.phone-today-date {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}

.phone-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.75);
    margin: 24px 0 8px 0;
    font-weight: 600;
}

.phone-card {
    display: block;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--glass-shadow);
    transition: transform 0.05s;
    overflow: hidden;
}
.phone-card:active { transform: scale(0.98); text-decoration: none; color: var(--text); }
.phone-card-muted { opacity: 0.85; }
.phone-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.phone-card-meta {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.phone-card-progress {
    font-size: 13px;
    color: var(--text-muted);
}

.phone-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
}

.phone-placement-title {
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 4px 0;
    color: white;
}
.phone-placement-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 16px;
}
.phone-complete-banner {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    color: var(--primary-deep);
    padding: 10px;
    border-radius: var(--glass-radius);
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}

.phone-exercises {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phone-ex {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    padding: 12px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.phone-ex-done {
    background: rgba(219, 234, 254, 0.6);          /* light-blue tinted glass */
    border-color: rgba(147, 197, 253, 0.6);
}
.phone-ex-done .phone-ex-name { text-decoration: line-through; color: var(--text-muted); }

.phone-ex-header {
    display: flex;
    gap: 12px;
    align-items: center;
}

.phone-ex-toggle-form { margin: 0; }
.phone-ex-check {
    width: 42px;
    height: 42px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: white;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
}
.phone-ex-done .phone-ex-check {
    border-color: var(--success);
    background: var(--success);
    color: white;
}

.phone-ex-title {
    flex: 1;
    min-width: 0;
}

.phone-ex-body {
    /* Full-width — spans under the header row */
}
.phone-ex-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.phone-ex-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.phone-ex-meta .pill {
    /* Uniform width + centered label so Drill / Movement / Warm Up line up. */
    min-width: 80px;
    text-align: center;
}
.phone-ex-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.phone-ex-prescription-box {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 6px 0 8px;
    background: rgba(255, 255, 255, 0.6);
}
.phone-ex-prescription-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;
    background: var(--primary);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.phone-ex-prescription {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}
.phone-ex-details {
    margin-top: 10px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.phone-ex-details-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.35);
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    list-style: none;            /* hide Firefox / standard marker */
}
.phone-ex-details-summary::-webkit-details-marker { display: none; }
.phone-ex-details-summary::marker { content: ""; }

.phone-ex-details-summary::after {
    content: "▼";
    color: var(--text-muted);
    font-size: 13px;
    margin-left: 8px;
    transition: transform 0.2s;
}
.phone-ex-details[open] .phone-ex-details-summary::after {
    transform: rotate(180deg);
}
.phone-ex-details-summary:hover,
.phone-ex-details-summary:active {
    background: rgba(255, 255, 255, 0.5);
}
.phone-ex-details[open] .phone-ex-details-summary {
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* Body of the details panel (everything except summary) */
.phone-ex-details-body {
    padding: 12px 16px 14px 16px;
}
.phone-ex-details-body > *:first-child { margin-top: 0; }
.phone-ex-details-body p {
    margin: 0 0 10px 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}
.phone-ex-section {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin: 16px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.phone-ex-section:first-child { margin-top: 0; }
.phone-ex-prose {
    white-space: pre-wrap;
    line-height: 1.5;
}

.phone-ex-desc { margin-top: 10px !important; }
.phone-ex-img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg);
    margin-top: 8px;
    display: block;
}

/* Horizontal swipe carousel for images + videos on the phone placement page.
   Uses CSS scroll-snap for native touch swipe with snap-to-item feel. */
.phone-media-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin-top: 8px;
    padding-bottom: 4px;                /* breathing room for scroll shadow */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* hide scrollbar on Firefox */
}
.phone-media-carousel::-webkit-scrollbar { display: none; }

.phone-media-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.phone-media-caption {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

/* iOS-style dot pagination under each media carousel. Active dot fills
   with primary-deep blue; inactive dots are white-outline only. */
.phone-media-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
}
.phone-media-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid white;
    background: transparent;
    transition: background 0.15s, transform 0.15s;
}
.phone-media-dot-active {
    background: var(--primary-deep);
    transform: scale(1.15);
}

/* Media section header: "Images (N)" on the left, "← swipe for more →" on the right,
   with a divider line underneath separating it from the carousel content. */
.phone-media-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.phone-media-section-header .phone-ex-section {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.phone-ex-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #000;
    margin-top: 8px;
}
.phone-ex-video iframe,
.phone-ex-video video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0;
}
/* Uploaded exercise demo video — fills the tile like the YouTube thumb. */
.video-tile-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.phone-ex-tutorial-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--primary);
}

/* ── Phone browse-by-type buttons (frosted glass) ─────────────────────── */

.phone-type-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.phone-type-btn {
    display: block;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    padding: 14px 16px;
    border-radius: var(--glass-radius);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.01em;
    box-shadow: var(--glass-shadow);
    transition: transform 0.05s, background 0.15s;
    overflow: hidden;
}
.phone-type-btn:active {
    transform: scale(0.98);
    color: var(--text);
    text-decoration: none;
}
.phone-type-btn:hover { color: var(--text); text-decoration: none; }

/* ── Rise-in on scroll (iOS notification style) ───────────────────────────
   Elements with .rise-in start translated down + transparent.
   Added dynamically by JS (IntersectionObserver) — falls back gracefully
   to visible if JS is blocked. */

.rise-in-pending {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rise-in-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Phone type-summary page ─────────────────────────────────────────── */

.phone-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.phone-stat {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    padding: 14px 10px;
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    text-align: center;
    overflow: hidden;
}
.phone-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.phone-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 6px;
}

.phone-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phone-type-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    padding: 12px 14px;
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.phone-type-item-main { flex: 1; min-width: 0; }
.phone-type-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.phone-type-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.phone-type-item-stats {
    text-align: right;
    flex-shrink: 0;
}
.phone-type-item-count {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.phone-type-item-count-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ── Phone mini calendar ──────────────────────────────────────────────── */

.phone-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 4px;
}
.phone-cal-month-label {
    font-weight: 600;
    font-size: 15px;
    color: white;
}
.phone-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    color: white;
    text-decoration: none;
    background: rgba(255,255,255,0.15);
}
.phone-cal-nav-btn:active { background: #d9e2f0; }

.phone-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    padding: 6px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.phone-cal-dow {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.phone-cal-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
}
.phone-cal-cell:active { background: var(--bg); }
.phone-cal-out { color: var(--text-faint); }
.phone-cal-today {
    background: var(--primary);
    color: white;
    font-weight: 600;
}
.phone-cal-today:active { background: var(--primary-hover); color: white; }
.phone-cal-num {
    line-height: 1;
}
.phone-cal-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}
.phone-cal-today .phone-cal-dot { background: white; }
.phone-cal-has:not(.phone-cal-today) { background: #e0e7ff; }

/* ── Flash / toast messages ─────────────────────────────────────────────── */

.flash {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.flash-ok    { background: var(--primary-soft); color: var(--primary-deep); border: 1px solid #f6d5b3; }
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Utility ─────────────────────────────────────────────────────────────── */

.muted { color: var(--text-muted); }
.small { font-size: 12px; }


/* mm-filter-select-block */
/* ── Filter dropdown row (Source / Category — unbounded value lists) ─────── */
.filter-tabs-select {
    margin-bottom: 16px;
}
.filter-tabs-select .filter-label {
    padding-bottom: 0;
}
.filter-tabs-select form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.filter-select {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 200px;
    max-width: 360px;
}
.filter-select:focus {
    outline: 2px solid rgba(255,255,255,0.4);
    outline-offset: 1px;
}
.filter-select option {
    background: var(--primary);
    color: white;
}


/* mm-site-header-block */
/* ── Site header (orientation breadcrumb above main content) ─────────── */
.site-header {
    background: rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding: 10px 24px;
    margin: -24px -24px 20px -24px;     /* span the full width of .main */
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    line-height: 1.4;
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.site-header-lens {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: white;
}
.site-header-icon {
    font-size: 16px;
    line-height: 1;
}
.site-header-label {
    letter-spacing: 0.01em;
}
.site-header-sep {
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    user-select: none;
}
.site-header-app {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.site-header-subpage {
    color: rgba(255,255,255,0.65);
    font-style: italic;
}


/* mm-console-tabs-block */
/* ── Console tabs — two-row split (punch-list #1, 2026-05-27) ─────────
   Row 1 (universal): Home · Schedule · Messages · Equipment + Teams far-right
   Row 2 (your apps, filtered by enabled_apps): Workouts · Lessons · Notebook
        · Practice Plans · Meal Planner
   .console-tabs is the column container; .console-tabs-row is each horizontal
   row. Row 2 renders with slightly smaller / lighter chrome to read as
   "your apps" vs Row 1's "ships with TA infrastructure." */
.console-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 4px;
    padding: 0;
    margin: 0;
}
/* Left group (universal pages) + right group (your apps) on one row,
   pushed apart by the parent's space-between. */
.console-tabs-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.console-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.console-tabs-row-apps {
    background: rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 2px 6px;
    border-radius: 0 0 4px 4px;
    align-items: center;
}
/* "My Apps:" eyebrow — a label, NOT a nav link. Muted slate-blue (clearly
   not the white tabs), uppercase eyebrow form, default cursor, no hover. */
.console-tabs-row-label {
    padding: 0 12px 0 8px;
    color: #93a7c9;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    cursor: default;
}
.console-tab {
    padding: 10px 16px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.08s, border-color 0.08s;
}
.console-tabs-row-apps .console-tab {
    padding: 7px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.console-tab:hover {
    color: white;
    text-decoration: none;
    border-bottom-color: rgba(255,255,255,0.5);
}
.console-tab-active {
    color: white;
    border-bottom-color: white;
    font-weight: 600;
}
.console-tabs-row-apps .console-tab-active {
    color: white;
}
/* Push a tab to the far right of its row — used by Teams since it's an
   org-level destination, distinct from the content-app cluster. */
.console-tab-end { margin-left: auto; }

/* mm-page-intro-block */
/* Intro paragraph rendered directly on the page background (no panel).
   Uses light text instead of .muted (which is dark, designed for panels). */
.page-intro {
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    line-height: 1.5;
    margin: -8px 0 20px 0;
    max-width: 760px;
}


/* mm-team-apps-submenu-block */
/* ── Team apps submenu (under active team in team lens) ──────────── */
.team-apps-submenu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 4px 0 8px 28px;     /* indent under the team item */
    padding-left: 8px;
    border-left: 1px solid var(--border);
}
.team-app-link {
    display: block;
    padding: 5px 10px;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.3;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.08s, color 0.08s;
}
.team-app-link:hover {
    background: var(--bg);
    color: white;
    text-decoration: none;
}
.team-app-link-active {
    background: var(--primary);
    color: white;
    font-weight: 600;
}


/* mm-team-collapse-toggle-block */
/* ── Team collapse/expand caret (inside team-list-item button) ───────── */
.team-list-item {
    /* Make sure the team button is flex so caret can sit on the right */
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.team-list-item .team-list-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-collapse-caret {
    flex: 0 0 auto;
    padding: 4px 6px;
    color: var(--primary);     /* dark navy — visible on white + on primary-soft active bg */
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.08s;
}
.team-collapse-caret:hover {
    background: rgba(30, 58, 138, 0.12);
    color: var(--primary-hover);
}
.team-collapse-caret.collapsed {
    transform: rotate(-90deg);
}
.team-apps-submenu.collapsed {
    display: none;
}



/* mm-notebook-tiles-block */
/* ── Notebook tiles (grid on /notebooks list page) ──────────────────── */
.notebook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 8px 0 24px 0;
}
.notebook-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.notebook-tile:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15,23,42,0.08);
    text-decoration: none;
}
.notebook-tile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.notebook-tile-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.4;
}
.notebook-tile-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
}


/* mm-notebook-tiles-mirror-block */
/* ── Notebook tiles (faithful mirror of .team-tile structure: vertical
       stack with circular logo + text body, footer Edit bar) ─────────── */
.notebook-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.notebook-tile {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.notebook-tile:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(15,107,194,0.12);
    transform: translateY(-1px);
}
.notebook-tile-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    flex: 1;
    position: relative;
}
.notebook-tile-switch:hover { text-decoration: none; }
.notebook-tile-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    background: var(--primary);
    /* Real logo upload comes later — until then, initial-on-disc placeholder. */
}
.notebook-tile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.notebook-tile-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}
.notebook-tile-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notebook-tile-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.notebook-tile-manage {
    display: block;
    padding: 8px 18px;
    margin: 0 12px 12px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(15, 107, 194, 0.03);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.12s, color 0.12s;
}
.notebook-tile-manage:hover {
    background: rgba(15, 107, 194, 0.10);
    color: var(--primary-deep);
    text-decoration: none;
}


/* mm-page-divider-block */
/* ── Page section divider (used between tab strip and page-header) ───── */
.page-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.18);
    margin: 0 0 18px 0;
    height: 0;
}


/* mm-frozen-headers-block */
/* ── Frozen layout: two stacked sticky headers above the scrollable main.
       2026-05-06 redesign — sidebar is now purely a mode switcher; site-wide
       reference + admin + user-profile moved to a top header.
   ───────────────────────────────────────────────────────────────────── */

/* Post-sidebar layout (2026-05-18): main spans the full viewport.
   The top header stays sticky at the top; .main-content holds the padded
   page content with a max-width cap so wide screens don't sprawl. */
.main-full {
    min-height: 100vh;
    width: 100%;
}
.main {
    padding: 0;
    max-width: none;
}
.main-content {
    padding: 32px 40px;
    max-width: 1200px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}

/* ── Top site header (frozen) ───────────────────────────────────── */
/* Two-row sticky top header (locked 2026-05-18).
   Row 1 (white): brand left, account right.
   Row 2 (dark blue): the main app nav (console_tabs).
   Both rows scroll together (the whole .top-header is sticky). */
.top-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}
.top-header-row {
    width: 100%;
    box-sizing: border-box;
}
.top-header-row-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* Backgrounds stay full-bleed; inner content aligns to the same
       1200px max-width as .main-content. max() handles narrow viewports
       by collapsing to the 24px gutter. */
    padding: 8px max(24px, calc((100% - 1200px) / 2));
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    min-height: 48px;
}
.top-header-row-menu {
    background: rgba(15, 42, 79, 1);
    padding: 0 max(24px, calc((100% - 1200px) / 2));
}

.top-header-brand { flex: 0 0 auto; }
.top-header-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}
.top-header-brand-link:hover { text-decoration: none; color: var(--text); }

/* .top-header-nav rules retained for any holdover usage but the nav itself
   was retired 2026-05-18 — its single remaining link (My Calendar) was
   pulled out and the others moved to the footer. */
.top-header-nav {
    display: flex;
    gap: 4px;
}
.top-header-nav-link {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
.top-header-nav-link:hover {
    background: rgba(15, 107, 194, 0.06);
    color: var(--text);
    text-decoration: none;
}
.top-header-nav-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

/* Author-view-as banner — sticky indicator in the brand-row when admin
   is viewing an author's content. Red so it's impossible to miss. */
.top-header-view-as {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    margin: 0 16px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 500;
    flex: 0 1 auto;
}
.top-header-view-as-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    color: #991b1b;
}
.top-header-view-as-name {
    font-weight: 700;
    color: #7f1d1d;
}
.top-header-view-as-exit-form { display: inline; margin: 0; }
.top-header-view-as-exit {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #7f1d1d;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
}
.top-header-view-as-exit:hover { background: #fecaca; }

.top-header-account {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    font-size: 13px;
}
.top-header-user-name {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.top-header-user-name:hover,
.top-header-user-name.active {
    text-decoration: none;
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}
.top-header-role-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.top-header-role-admin   { background: #fee2e2; color: #991b1b; }
.top-header-role-coach   { background: #ddd6fe; color: #5b21b6; }
.top-header-role-athlete { background: #d1fae5; color: #065f46; }

.top-header-account-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.top-header-account-link:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}
.top-header-logout-form { margin: 0; display: inline; }

/* ── Site-header (where-you-are) overrides ──────────────────────── */
/* Override the older .site-header rules: drop the negative margins
   (no longer needed — .main has no padding now) and pin it sticky
   immediately below the top-header. Use a more opaque background so
   page content scrolling underneath doesn't bleed through. */
.site-header {
    position: sticky;
    /* Sits below the two-row top header. Row 1 ~48px + Row 2 ~36px ≈ 84px.
       Tweak if menu row padding changes. */
    top: 84px;
    z-index: 99;
    margin: 0;
    background: rgba(15, 42, 79, 0.94);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

/* Sidebar no longer has a brand block at the top — pad the launcher
   list so it doesn't sit flush against the very top edge. */
.sidebar { padding-top: 16px; }


/* mm-phone-move-session-block */
/* ── Phone: move session to another day ───────────────────────────── */
.phone-move-session {
    margin: 12px 0 8px 0;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: rgba(255,255,255,0.92);
    font-size: 14px;
}
.phone-move-session > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.phone-move-session > summary::before {
    content: '\21BB';
    margin-right: 6px;
    color: rgba(255,255,255,0.7);
}
.phone-move-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.phone-move-label {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    width: 100%;
}
.phone-move-form input[type="date"] {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 14px;
}
.phone-move-form .btn {
    flex: 0 0 auto;
    padding: 8px 14px;
}


/* mm-crumb-pill-block */
/* ── Breadcrumbs as pill buttons under the page-header card ─────── */
/* The page-header markup is: [page-header card] then [breadcrumbs div]
   immediately after, so the pills appear directly under the card. Each
   crumb renders as a thin filled pill with rounded corners. */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -16px 0 18px 0;
    font-size: 12px;
}
.breadcrumbs a,
.breadcrumbs > span {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.1s, transform 0.05s;
}
.breadcrumbs a:hover {
    background: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    color: white;
}
.breadcrumbs a:active { transform: translateY(0.5px); }

/* Color variants — apply via class on the <a> for emphasis. */
.breadcrumbs a.crumb-notebook { background: rgba(224, 123, 46, 0.85); border-color: rgba(255, 165, 0, 0.55); }
.breadcrumbs a.crumb-notebook:hover { background: rgba(224, 123, 46, 1); }
.breadcrumbs a.crumb-topic    { background: rgba(30, 58, 138, 0.85); border-color: rgba(70, 100, 200, 0.4); }
.breadcrumbs a.crumb-topic:hover { background: rgba(30, 58, 138, 1); }
.breadcrumbs a.crumb-team     { background: rgba(40, 100, 60, 0.85); border-color: rgba(80, 160, 100, 0.4); }

/* Workouts coaching breadcrumb TRAIL (context-aware full path, 2026-06-13).
   Sits in the .page-content-header over the translucent-white-on-dark
   .app-tabpage, so it uses light-on-dark text like .breadcrumbs. */
.crumbtrail { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -8px 0 16px; font-size: 13px; }
.crumbtrail-link { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-weight: 600; }
.crumbtrail-link:hover { color: #fff; text-decoration: underline; }
.crumbtrail-current { color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.crumbtrail-sep { color: rgba(255, 255, 255, 0.4); }


/* mm-meta-with-action-block */
/* Meta paragraph with an action button on the right (Owner/Status .. Edit). */
.meta-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* mm-owner-block */
/* ── Owner block — sits below the page-header card. Same lighter-blue
       background as page-header. Blue bar runs down the LEFT side as a
       built-in mark; single row with breadcrumbs on the left and
       Owner/Status/actions on the right. ── */
.owner-block {
    margin: -8px 0 24px 0;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border-left: 6px solid rgba(255, 255, 255, 0.30);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.owner-block .breadcrumbs {
    margin: 0;
}
.owner-block-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
}
.owner-block-info {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.owner-block-info .meta-pair { gap: 6px; }
.owner-block-info strong { color: white; }
.owner-block-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.owner-block-actions form { margin: 0; display: inline; }


/* mm-topic-list-divider */
/* Section rule — a thin line under a section-head, used to visually
   separate the section title row from its content. */
.section-rule {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0 12px 0;
    height: 0;
}
/* Flat variant of upcoming-list — no inter-row border. */
.topic-list-flat .upcoming-row { border-bottom: none; }


/* mm-meta-label */
.notebook-tile-meta .meta-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}


/* mm-tile-row-block */
/* Notebook tile new layout — column with logo+name on top, Owner/Status/Topics
   row below taking the full tile width. */
.notebook-tile-switch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}
.notebook-tile-row-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.notebook-tile-row-top .notebook-tile-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notebook-tile-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.meta-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* mm-tile-meta-tighten */
/* Tighten the notebook-tile meta row so Owner/Status/Topics fits on one row. */
.notebook-tile-meta-row { gap: 8px; font-size: 11px; flex-wrap: nowrap; min-width: 0; }
.notebook-tile-meta-row .meta-pair { gap: 4px; min-width: 0; }
.notebook-tile-meta-row .meta-label { font-size: 9px; letter-spacing: 0.04em; }
.notebook-tile-meta-row .badge { font-size: 10px; padding: 1px 7px; letter-spacing: 0.02em; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

/* ──────────── Reporting page (v0) ──────────── */
/* Window-chip selected state — primary fill so the active range stands out. */
.btn-active {
    background: var(--primary-deep);
    color: white;
    border-color: var(--primary-deep);
}
.btn-active:hover { background: var(--primary-deep); color: white; }
/* Rollup tile row above the placement table. */
.report-rollup {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 4px;
}
.report-rollup-tile {
    flex: 1 1 140px;
    min-width: 130px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: center;
}
.report-rollup-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-deep);
}
.report-rollup-label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Program card — a Phase rendered as a structured checkoff list.
   Temporary visual: orange left bar so adjacent phases inside a Course
   read as distinct cards (vs running together visually). Griffin can
   refine the styling later. */
.program-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 5px solid #c8961b;
    border-radius: 8px;
    margin: 14px 0 20px 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* Phase assessment block — sits at the bottom of each phase card,
   inside the .program-card wrapper. V1 = narrative-only textarea per
   (phase, user, cycle). Soft-purple to read distinctly from the
   orange phase chrome above + the white workout-day rows. */
.phase-assessment-block {
    margin: 6px 14px 14px;
    border: 1px solid var(--border);
    background: #faf5ff;
    border-radius: 6px;
}
.phase-assessment-block[open] {
    background: #fff;
}
.phase-assessment-block > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f3ff;
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
}
.phase-assessment-block:not([open]) > summary {
    border-radius: 6px;
    border-bottom: none;
}
.phase-assessment-block > summary::-webkit-details-marker { display: none; }
.phase-assessment-block > summary::marker { content: ''; }
.phase-assessment-block > summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}
.phase-assessment-block[open] > summary::after {
    content: '▴';
}
.phase-assessment-label {
    font-weight: 600;
    color: #6d28d9;
    font-size: 13px;
}
.phase-assessment-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.phase-assessment-empty { flex: 1; }
.phase-assessment-form {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.phase-assessment-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.phase-assessment-form button {
    align-self: flex-end;
}
.program-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fbf0d2; /* light orange — paired with the orange left border */
    border-bottom: 1px solid var(--border);
}
.program-card-title { font-weight: 600; font-size: 15px; }
.program-card-progress .badge { font-size: 12px; }
/* Inline-editable text inputs that visually read as plain heading text.
   Used in the Program build page where Course names, Phase labels, and
   per-phase alternate-author labels are typed directly into the header
   line rather than into a separate form-row below. The input "disappears"
   visually — looks like text — and grows a soft outline on focus to
   confirm it's editable. */
.inline-course-name,
.inline-phase-label,
.inline-alternate-label {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0;
    font: inherit;
    color: inherit;
    min-width: 80px;
    box-sizing: border-box;
}
.inline-course-name { font-size: inherit; font-weight: inherit; min-width: 180px; }
.inline-phase-label { font-size: inherit; font-weight: inherit; min-width: 140px; }
.inline-alternate-label {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 100px;
    width: auto;
}
.inline-course-name:hover,
.inline-phase-label:hover,
.inline-alternate-label:hover {
    border-color: var(--text-muted);
}
.inline-course-name:focus,
.inline-phase-label:focus,
.inline-alternate-label:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(15, 107, 194, 0.15);
}
/* Placeholder text in the inline name inputs reads as a muted hint, not
   a real value — keeps "e.g. Block 1" visually distinct from a saved
   alternate label like "Foundation Phase". */
.inline-course-name::placeholder,
.inline-phase-label::placeholder,
.inline-alternate-label::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
    font-style: italic;
}
.checkoff-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.checkoff-row {
    display: grid;
    /* status | recommended | placed-date | session-label | exercise-count | action */
    grid-template-columns: 28px 180px 110px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}
/* Curriculum-only variant — no per-athlete columns. Just label + count.
   Used by the Programs detail page since 2026-05-18 (per-athlete UI gutted). */
.checkoff-row-curriculum {
    grid-template-columns: 1fr auto;
}
/* Phase-row variant — operational rollup re-added 2026-05-18 PM.
   Six columns: status | session name | exercise count | "Proposed Date" label
   | date picker (or formatted date for complete) | Add-to-Calendar button.
   The form uses display:contents so the picker + button become separate grid
   cells (cols 5 and 6). For complete rows, the label cell + button cell are
   empty; the date sits plainly in col 5. */
/* Phase chart row layout — 5 hard-coded columns. The 5th column is a
   flex container ('action-pair') holding date + action (button or pill).
   Both sub-elements inside the pair are pinned to fixed widths so the
   right edges line up perfectly across complete and not-complete rows.

     status   |  session name   |  N exercises  |  label    |  date + action
     28px     |     1fr         |    110px      |  110px    |  300px
                                                            └ 150px + 140px
*/
/* 7 explicit columns — only col 2 (name) flexes, all others hard-fixed.
   Each <li> is its own grid container, so identical fixed widths is how
   columns ACTUALLY align across rows.
     1. 28px   status icon
     2. 1fr    session name (only variable col)
     3. 95px   exercise count ("12 exercises")
     4. 100px  date label ("Completed Date" — the longest)
     5. 150px  calendar slot (date input on live | date string on completed)
     6. 140px  main action (Add to Calendar | Move | Completed | Skipped)
     7. 90px   skip button (Skip | Undo Skip | empty)
*/
.checkoff-row-phase {
    grid-template-columns: 28px 1fr 95px 100px 150px 140px 90px;
}
/* Edit-mode variant — adds a reorder column at the very left holding
   the ↑ ↓ buttons side-by-side. Used only on the program edit page;
   view-mode rows keep the standard grid. */
.checkoff-row-phase.with-reorder {
    grid-template-columns: 70px 28px 1fr 95px 100px 150px 140px 90px;
}
.checkoff-reorder {
    display: flex;
    gap: 4px;
    align-items: center;
}
.checkoff-reorder form { margin: 0; }
/* Skipped rows: muted appearance — the row is acknowledged but
   intentionally not in the active workflow. Dash icon replaces the
   checkbox. */
.checkoff-row-skipped .checkoff-label,
.checkoff-row-skipped .checkoff-count,
.checkoff-row-skipped .sx-name {
    opacity: 0.6;
}
.checkoff-status.checkoff-skipped {
    color: #94a3b8; /* slate-400 — visible but quiet */
    font-weight: 600;
}
/* Lessons drop the leftmost checkoff-status column AND the per-row
   "Lesson" tag (redundant — you're on the Lessons page). 3 columns:
   name + date label + action pair. */
.checkoff-row-lesson {
    grid-template-columns: 1fr 110px 300px;
}
/* Warmups: 4-col fire-and-forget layout. No status, no date label,
   no completion. Just name + movement count + date picker + Add. */
.checkoff-row-warmup {
    grid-template-columns: 1fr 110px 150px 140px;
}
.checkoff-label-cell {
    text-align: right;
    white-space: nowrap;
}
.checkoff-action-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}
/* Date sub-cell (picker for not-complete, plain text for complete).
   In the new 7-col layout these are direct grid children of the row
   (col 5); width comes from the grid template, but constrain the
   input + date span so they fill the cell cleanly. */
.checkoff-row-phase .schedule-date,
.checkoff-row-phase > .checkoff-date {
    width: 150px;
    box-sizing: border-box;
}
/* Legacy: still apply when .checkoff-date lives inside an action-pair
   (lessons list uses that pattern). */
.checkoff-row-phase .checkoff-action-pair .schedule-date,
.checkoff-row-phase .checkoff-action-pair > .checkoff-date {
    width: 150px;
    box-sizing: border-box;
    flex: 0 0 150px;
}
/* Main action cell (Add-to-Calendar btn | Completed pill | Skipped pill).
   In 7-col layout, this is col 6 — width comes from the grid (140px).
   The class enforces text-centering + padding for badges. */
.checkoff-row-phase > .checkoff-action-btn {
    width: 140px;
    box-sizing: border-box;
    text-align: center;
}
.checkoff-row-phase > .badge.checkoff-action-btn {
    padding: 4px 8px;
}
/* Legacy: action-btn nested inside an action-pair (lessons list). */
.checkoff-row-phase .checkoff-action-pair .checkoff-action-btn {
    width: 140px;
    flex: 0 0 140px;
    box-sizing: border-box;
    text-align: center;
}
.checkoff-row-phase .checkoff-action-pair .badge.checkoff-action-btn {
    padding: 4px 8px;
}
/* Warmup rows have no date picker — push the "Add to today" button to
   the right edge of the action-pair so it lines up with the regular
   Add-to-Calendar button across rows. */
.checkoff-action-pair-warmup {
    justify-content: flex-end;
}
@media (max-width: 720px) {
    .checkoff-row-phase {
        grid-template-columns: 28px 1fr;
        gap: 6px;
    }
    .checkoff-row-phase > .checkoff-count,
    .checkoff-row-phase > .checkoff-label-cell,
    .checkoff-row-phase > .checkoff-date,
    .checkoff-row-phase > .schedule-date,
    .checkoff-row-phase > .checkoff-action-btn,
    .checkoff-row-phase > .checkoff-action-pair,
    .checkoff-row-phase > .checkoff-skip-btn {
        grid-column: 2;
    }
    .checkoff-row-phase .checkoff-label-cell {
        text-align: left;
    }
}

/* "+ Add a Course" container button — wide bar at the top of the
   courses list on Program detail, styled to look like a blank course
   block. Blue left-accent matches the .course-block left border so it
   visually pairs with real course blocks below. */
.add-course-footer {
    display: block;
    margin: 16px 0 22px 0;
    padding: 16px 16px;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-left: 3px solid var(--primary-deep);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--primary-deep);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.add-course-footer:hover {
    background: white;
    border-style: solid;
    color: var(--primary);
}

/* "+ Add Phase" footer button — wide bar at the bottom of each course,
   styled to visually anchor to the orange-bar phase cards above. */
.add-phase-footer {
    display: block;
    margin: 14px 0 20px 0;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-left: 5px solid #c8961b;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--primary-deep);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.add-phase-footer:hover {
    background: white;
    border-style: solid;
    color: var(--primary);
}

/* + Add Lesson inline form — sits below the Lessons list. Name input
   + submit button on the same row. Parallels the inline "+ Add a Phase"
   create flow but lives inside the program-level Lessons section. */
.add-lesson-form {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    align-items: center;
}
.add-lesson-input {
    flex: 1;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}
.checkoff-rec { font-size: 12px; white-space: nowrap; }
.checkoff-rec .rec-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-right: 2px;
}
.schedule-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.schedule-date {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.checkoff-action { white-space: nowrap; }
.checkoff-row:first-child { border-top: none; }
.checkoff-today { background: rgba(15, 107, 194, 0.06); }
.checkoff-status {
    font-size: 18px;
    line-height: 1;
    text-align: center;
}
.checkoff-complete    { color: #16a34a; }
.checkoff-partial     { color: #d97706; }
.checkoff-none        { color: var(--text-muted); }
.checkoff-unscheduled { color: var(--text-muted); opacity: 0.55; }

/* Program card summary block — brief description + link to source-of-truth notes. */
.program-card-summary {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: white;
    font-size: 14px;
    line-height: 1.5;
}
.program-card-summary p { margin: 0 0 6px 0; }
.program-card-summary p:last-child { margin-bottom: 0; }
.program-card-source {
    font-size: 13px;
    padding-top: 4px;
}

/* Program header — top of each Program section (level 1). */
.program-header h2 { margin: 0 0 4px 0; }
.program-header p  { margin: 0 0 8px 0; font-size: 14px; line-height: 1.45; }

/* Course block — wraps a course's phases inside a Program section (level 2).
   Blue left-accent removed 2026-05-23: each course now sits in its own
   .view-section container, so the side bar was redundant chrome. */
.course-block {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 8px;
    margin: 14px 0 22px 0;
    overflow: hidden;
}
/* Child sections (Create-a-Phase + phase cards) should be inset from
   the course-block's left/right edges so they don't butt up against
   the navy side bar / outer border. The .course-block-head + its
   description form-row are intentionally flush (the header strip
   extends edge-to-edge as the title bar). */
.course-block > .program-card {
    margin-left: 16px;
    margin-right: 16px;
}
.course-block > .form-section,
.course-block > .create-section {
    margin-left: 16px !important;
    margin-right: 16px !important;
}
/* Create-a-X container headings — colored underline ties the heading
   visually to the parent container's side-bar color. Each level uses
   the color of the thing it creates:
     "Create a Course" → navy (the course side-bar color)
     "Create a Phase"  → orange (the phase side-bar color)
   The underline sits below the heading text only, not wall-to-wall. */
.create-heading {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    padding-bottom: 6px;
    display: inline-block;
}
.create-heading-course {
    border-bottom-color: var(--primary);
}
.create-heading-phase {
    border-bottom-color: #c8961b;
}
.create-heading-workout-day {
    border-bottom-color: var(--border-strong);
}
/* Create-a-X section — lightweight container for the three create
   affordances (Create a Course, Create a Phase, Add a Workout Day).
   Lighter than the default .form-section which carries the heavy
   liquid-glass --shadow; this one gets a soft 1px+2px shadow so it
   reads as a quiet nested container, not a full lifted card. */
.create-section {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 14px 0;
}
/* Inline create-row (used inside .create-section):
   each "column" can carry its own help text above + an input below,
   so the help wraps OVER its related input. Final column is the
   submit button (no help text, aligned to the bottom of the column). */
.create-inline-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;          /* button + inputs bottom-align */
    margin-top: 10px;
}
.create-inline-row > .create-inline-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.create-inline-row .create-col-help {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}
.create-inline-row input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: white;
    box-sizing: border-box;
    width: 100%;
}
.create-inline-row input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}
.create-inline-row > .btn {
    flex: 0 0 auto;
    align-self: flex-end;
}
.course-block-head {
    background: var(--primary-soft);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.course-block-head h3 { margin: 0 0 6px 0; font-size: 22px; font-weight: 700; }
.course-block-head p  { margin: 0 0 8px 0; }
.course-block-head .program-card-source { margin-top: 4px; }
/* Description form-row beneath the heading sits on the same light-blue
   header background — give it its own bottom border to separate it from
   the Create-a-Phase container below. */
.course-block-head .form-row { margin-top: 8px; margin-bottom: 0; }

/* Course block — header row holds the title on the left and the per-course
   action buttons (+ Add a Phase, Edit) on the right. */
.course-block-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.course-block-head-row h3 { margin: 0; }
.course-block-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Program detail — action bar above the courses list (+ Add a Course,
   Edit Program). Sits inside .owner-block alongside the breadcrumbs. */
.program-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.checkoff-date { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.checkoff-label { font-weight: 500; }
.checkoff-count { white-space: nowrap; }

/* Calendar control row — athlete picker (admin) + month nav buttons. */
/* Calendar header — single short row with the month label + nav buttons.
   The wrapping .view-section gets a tight padding override (.cal-header-
   section) so the header doesn't take up half the page above the grid. */
.cal-header-section {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.cal-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.cal-athlete-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.cal-athlete-form label {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.cal-athlete-form select {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
}
.cal-nav-actions {
    display: flex;
    gap: 6px;
}

/* ── Site footer (Resources / Help / Settings / Users) ──────────────
   Moved out of the top-header 2026-05-18 — reference + admin links live
   at the bottom of every page. Footer scrolls with content (not sticky). */
.site-footer {
    margin-top: 64px;
    padding: 24px 24px 32px 24px;
    border-top: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Two-column layout — Quick Links + Admin side by side. Each column
   is a vertical stack of links under a small uppercase header. The
   admin column is only rendered for admin users (server-side gate). */
.site-footer-cols {
    display: flex;
    gap: 56px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}
.site-footer-col { min-width: 180px; }
.site-footer-col-h {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}
.site-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.site-footer-link {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    transition: color 0.08s, background 0.08s;
}
.site-footer-link:hover {
    color: white;
    background: rgba(255,255,255,0.06);
    text-decoration: none;
}
.site-footer-link.active {
    color: white;
    font-weight: 600;
}

@media (max-width: 600px) {
    .site-footer-cols {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        padding-left: 4px;
    }
}

/* ── Meal Planner (added 2026-05-19) ───────────────────────────────────
   Console form + month calendar with daily totals + today's entry list +
   meal-builder component grid + foods table styling. */

/* Quick-add form on the Console. Inline 3-column row for quantity/time/date. */
.mp-form .mp-form-inline,
.mp-form-inline {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
@media (max-width: 700px) {
    .mp-form .mp-form-inline,
    .mp-form-inline { grid-template-columns: 1fr; }
}

/* Chart-builder picker row (Console "Create Meal" + Library "Create Meal") */
.mp-picker-row {
    display: grid;
    grid-template-columns: 1fr 100px auto;
    gap: 12px;
    align-items: end;
}
.mp-picker-cell label { display: block; margin-bottom: 4px; }
.mp-picker-cell select,
.mp-picker-cell input[type="number"] {
    width: 100%;
}
.mp-picker-qty input { text-align: right; }
@media (max-width: 700px) {
    .mp-picker-row { grid-template-columns: 1fr; }
}

/* Click-to-select time picker — three dropdowns (hour / minute / AM-PM)
   instead of the browser-native <input type="time">. Drives a hidden
   entry_time field via JS. */
.mp-time-picker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mp-time-picker select {
    padding: 6px 8px;
}
.mp-time-sep {
    font-weight: 600;
    padding: 0 2px;
    color: var(--text-muted);
}

/* Date input on the meal-entry form — larger than the default so it
   reads as a primary action input. */
.mp-date-big {
    font-size: 16px;
    padding: 10px 12px;
    width: auto;
    min-width: 200px;
}

/* Day-view meal header (time + actions) */
.mp-day-meal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.mp-day-meal-time {
    font-size: 18px;
    margin: 0;
    color: var(--text);
}
.mp-day-meal-actions { display: flex; gap: 6px; }

/* Chart table — multi-row composition of foods with running totals */
.mp-chart-table { margin: 14px 0 18px 0; }
.mp-chart-table tfoot .mp-chart-totals {
    background: var(--panel);
    font-weight: 600;
}
.mp-chart-table .num-cell { text-align: right; white-space: nowrap; }
.mp-chart-table tbody td { vertical-align: middle; }

/* All meal-planner content lives inside .view-section (near-white panel
   bg), so colors here use the light-bg palette — dark text, light-grey
   borders, soft tinted highlights. NOT the dark-bg page palette. */

/* Today's entries list — compact row with time, label, nutrition, delete. */
.mp-today-list { list-style: none; padding: 0; margin: 0; }
.mp-today-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}
.mp-today-row:first-child { border-top: none; }
.mp-today-time { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.mp-today-label { font-weight: 500; color: var(--text); }
.mp-today-nutrition { white-space: nowrap; color: var(--text-muted); }

/* Month calendar — 7-column grid for Sun..Sat with day cells below. */
.mp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 10px;
}
.mp-calendar-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    padding: 6px 0;
}
.mp-calendar-cell {
    min-height: 130px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    /* Now a clickable <a> — keep the inherit-color text + add hover lift. */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.mp-calendar-cell:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(15, 107, 194, 0.15);
    transform: translateY(-1px);
}
.mp-cell-outside { opacity: 0.40; }
.mp-cell-today {
    background: rgba(15, 107, 194, 0.10);
    border-color: var(--primary);
    border-width: 2px;
}
.mp-cell-has-entries.mp-cell-past   { background: rgba(34, 197, 94, 0.10); }
.mp-cell-has-entries.mp-cell-future {
    background: #ffffff;
    border-style: dashed;
    border-color: var(--border-strong);
}
.mp-cell-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.mp-cell-totals {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Per-meal lines on each calendar cell — one line per meal-event with
   time + calorie tally. Day total sits below the list. */
.mp-cell-meals {
    list-style: none;
    padding: 0;
    margin: 2px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mp-cell-meal-line {
    font-size: 10px;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-cell-meal-time {
    color: var(--text-muted);
    margin-right: 3px;
}
.mp-cell-day-total {
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--text);
    line-height: 1.3;
}
.mp-cell-day-total strong { color: var(--primary-deep); }

/* Calendar control row — prev / month label / next nav.
   .cal-nav-buttons is the in-form variant (session builder mini-cal);
   .cal-nav-actions is the main /calendar page. */
.cal-nav-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Main /calendar page month label — flex-row member, big + readable.
   Override the duplicate definition higher up in this file via source
   order. */
.cal-header-section .cal-month-label {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    min-width: 0;
    text-align: left;
    flex: 1;
}

/* Meal builder — component grid (food picker + quantity + unit). */
.mp-component-grid {
    display: grid;
    grid-template-columns: 1fr 120px 80px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--border);
}
.mp-component-grid:first-of-type { border-top: none; }
.mp-component-grid-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    padding: 6px 0;
}

/* Saved meals list (Create Meal tab). */
.mp-meals-list { list-style: none; padding: 0; margin: 0; }
.mp-meals-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}
.mp-meals-row:first-child { border-top: none; }
.mp-meals-name {
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.mp-meals-name:hover { text-decoration: underline; }

/* Right-aligned numeric cells in the foods table. */
.data-table .num-cell { text-align: right; white-space: nowrap; }

/* ── Workouts Console 2-column gateway + Libraries card (2026-05-23) ──
   Top row: Sessions card (left) + Programs card (right) side by side.
   Bottom: single bordered Libraries card with Warmup + Exercise columns
   inside. Composes with feedback-collapse-ui-surfaces.md — the Console
   is the home page of the app; each card is a gateway, not a build
   surface. */
.console-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.console-row-2col .console-col,
.console-libraries-2col .console-col {
    margin: 0;
}
.console-row-2col .view-section { margin-bottom: 0; }

/* Combined Libraries card — its own bordered container with a header
   and two columns inside (Warmup Library + Exercise Library). */
.console-libraries-card {
    /* Inherits .view-section bordered card from base styles. */
}
.console-libraries-head {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.console-libraries-head h2 {
    margin: 0 0 4px 0;
}
.console-libraries-head p {
    margin: 0;
}
.console-libraries-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* Each library column inside the Libraries card gets its own visual
   container. Distinct treatment from .program-row-tile above:
   programs use a blue (primary) LEFT bar; libraries use an orange
   (accent) TOP bar so the two categories read as different families
   — composites vs atoms. Different geometry + different color.
   Composes with the orange page-header accent. */
.console-libraries-2col .console-col {
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: 6px;
}
.console-libraries-2col .console-col h3 {
    margin: 0;
}

/* Narrow viewports — stack the columns. */
@media (max-width: 900px) {
    .console-row-2col { grid-template-columns: 1fr; }
    .console-libraries-2col { grid-template-columns: 1fr; }
}

/* Compact program row-tile — sits inside .program-stack within the
   Programs card on the Console. 3 rows: logo+name / count / short
   description. Entire tile is the click target. No edit button. */
.program-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.program-row-tile {
    display: block;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.program-row-tile:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    text-decoration: none;
}
.program-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.program-row-logo {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.program-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.program-row-meta {
    margin-left: 38px; /* aligns under the program name (past the logo) */
    margin-bottom: 2px;
}
.program-row-desc {
    margin-left: 38px;
    line-height: 1.4;
}
.program-row-desc em { color: var(--text-faint); }

/* Sessions card Favorites list — horizontal rules above the first
   item and below the last so the list reads as a contained group.
   padding-top/bottom = 0 so the gap above the first row + below the
   last row matches the inter-row gap (each row has its own 8px
   vertical padding via .upcoming-row). */
.console-favorites-list {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 4px;
}


/* ── Role-tab strip (Phase 5 multi-user redesign) ──────────────
   Renders inside an app shell ONLY when the user has 2+ active
   roles in that app. Single-role users never see this row. #}
*/
.app-role-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--primary-soft, #f0f7ff);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.app-role-tab {
    padding: 6px 14px;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}
.app-role-tab:hover {
    background: white;
    border-color: var(--border);
}
.app-role-tab-active {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
}
.app-role-tab-default-marker {
    color: #f59e0b;
    margin-left: 4px;
}

/* ── Tabbed app header (2026-05-31, Lessons prototype) ───────────────────
   Browser-tab header where the role selector IS the page title/header.
   "My Lessons" / "Coaching Lessons" render as browser-style tabs; the
   active tab connects down into the orange-accented panel, which carries
   the in-app sub-tabs (left) + Help Guide link (right) on one toolbar row.
   Sits on the dark blue page bg → light-on-dark color treatment.
   Isolated to Lessons via app_shell_lessons.html; generalizes to every
   app in the big rollout, at which point legacy .page-header-shell +
   .app-role-tabs retire. */
.app-tabhead {
    /* Break out of .main-content's 40px side padding so the page container
       spans the full site-header width; the container re-pads 40px inside so
       the white .view-section boxes keep their previous column width. */
    margin: 0 -40px 18px;
}
.app-tabhead-tabs {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0;
    margin: 0;
}
.app-tabhead-tab {
    padding: 9px 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    /* Inactive (closed) tabs get a separating line along the page edge;
       the active tab overrides this to none so it merges into the page. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px 9px 0 0;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.app-tabhead-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
}
/* Active tab merges into the panel: orange top accent, panel-matching bg,
   and a -1px bottom overlap so the panel's top border breaks under it. */
.app-tabhead-tab-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.10);
    border-top: 3px solid var(--accent);
    border-bottom: none;       /* merge seamlessly into the page container */
    padding-top: 7px;          /* compensate the +2px top border so height matches inactive tabs */
    position: relative;
    z-index: 2;
}
/* The light-blue page container the active tab connects into — a Chrome-
   style page surface holding the toolbar + the whole page body. Slightly
   lighter than the dark-blue page background; no orange line on the
   container itself (only the active tab keeps its orange top cap). */
.app-tabpage {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0 0 12px 12px;
    padding: 10px 40px 32px;
}
.app-tabpage-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.app-tabhead-subtabs {
    display: flex;
    gap: 6px;
}
.app-tabhead-subtab {
    padding: 4px 13px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.app-tabhead-subtab:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.app-tabhead-subtab-active {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
    font-weight: 600;
}
.app-tabhead-subtab-ph {
    opacity: 0.5;
    border-style: dashed;
    cursor: default;
}
.app-help-link {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 4px 2px;
    white-space: nowrap;
}
.app-help-link:hover { color: #fff; }

/* Help Guide popup — native <dialog>. Lives on the near-white panel bg, so
   it uses the dark-text palette (light-bg trap, general-rules.md). */
.app-help-dialog {
    max-width: 560px;
    width: calc(100% - 32px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.app-help-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.app-help-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.app-help-dialog-head h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text);
}
.app-help-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}
.app-help-dialog-close:hover { background: #f1f5f9; }
.app-help-dialog-body {
    padding: 14px 18px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}
.app-help-dialog-body p { margin: 8px 0; }
.app-help-dialog-body p:first-child { margin-top: 0; }
.app-help-dialog-body p:last-child { margin-bottom: 0; }
.app-help-dialog-body code {
    background: #e2e8f0;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* ── Coaching Setup cards (Profile → Coach tab) ─────────────────────────
   Moved here from an inline <style> in profile.html's athlete-tab branch
   2026-05-31 (it never rendered on the Coach tab where the cards live).
   Each app toggle is a bordered card; the list tiles them in a grid. */
.coaching-setup-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 12px;
    align-items: stretch;
}
.coaching-setup-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    background: white;
    margin: 0;
}
.coaching-setup-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.coaching-setup-row-icon { font-size: 20px; }
.coaching-setup-row-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.coaching-setup-row .home-app-slider { margin-left: auto; }
.coaching-setup-row-blurb { margin: 0 0 0 30px; }
.coaching-setup-resume {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.coaching-setup-resume-h {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coaching-setup-resume p { margin: 0 0 10px 0; }

/* ── Profile "About" per-part visibility toggles (2026-05-31) ───────────
   Each part of the consolidated About section has a header row with the
   sub-title left + an iOS-style visibility toggle right. */
.about-part-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.about-always-visible {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
}
.vis-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.vis-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.vis-toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s ease;
    flex: 0 0 auto;
}
.vis-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.15s ease;
}
.vis-toggle input:checked + .vis-toggle-track { background: var(--primary); }
.vis-toggle input:checked + .vis-toggle-track::after { left: 18px; }
.vis-toggle input:focus-visible + .vis-toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Label live-switches with the toggle (pure CSS) — Private (off) ↔ Public (on). */
.vis-toggle-text { font-size: 12px; font-weight: 600; min-width: 48px; }
.vis-toggle .vis-on  { display: none; color: var(--primary); }
.vis-toggle .vis-off { display: inline; color: var(--text-muted); }
.vis-toggle input:checked ~ .vis-toggle-text .vis-on  { display: inline; }
.vis-toggle input:checked ~ .vis-toggle-text .vis-off { display: none; }

/* ── Coach's Corner condensed preview (Profile → Coach tab) ─────────────── */
.coach-corner-preview {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 12px;
}
.coach-corner-preview-pic,
.coach-corner-preview-pic-ph {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.coach-corner-preview-pic-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft, #f0f7ff);
    color: var(--primary);
    font-size: 30px;
    font-weight: 600;
    border: 1px solid var(--border);
}
.coach-corner-preview-text { flex: 1; min-width: 0; }
.coach-corner-preview-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.coach-corner-preview-bio {
    margin: 0 0 6px 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}
.coach-corner-preview-counts { margin-top: 2px; }

/* ── Phone Capture form: actual logging (2026-05-28, Req/15 Phase 2) ── */
.phone-ex-check {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #16a34a;
    background: #fff;
}
.phone-ex-check-done {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.phone-capture {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}
.phone-capture-rx {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.phone-capture-rx-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.phone-capture-rx-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.phone-capture-veered {
    font-size: 11px;
    font-weight: 600;
    color: #7a5a12;
    background: #fbf0d2;
    border-radius: 999px;
    padding: 1px 8px;
}
.phone-capture-weight-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.phone-capture-weight {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.phone-capture-fld-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.phone-capture-weight input {
    width: 110px;
    padding: 10px 12px;
    font-size: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.phone-capture-lasttime {
    font-size: 13px;
    color: var(--text-muted);
    padding-bottom: 10px;
}
.phone-capture-steppers {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.phone-stepper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.phone-stepper-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.phone-step-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #f1f5f9;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}
.phone-step-btn:active { background: #e2e8f0; }
.phone-step-input {
    width: 56px;
    text-align: center;
    padding: 9px 4px;
    font-size: 18px;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.phone-capture-done {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
}
.phone-capture-done:active { opacity: 0.85; }
.phone-capture-undo {
    background: #16a34a;
}
.phone-ex-cues {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 8px;
}

/* ── Structured prescription fields: sets × reps (2026-05-28, Req/15) ── */
.rx-num {
    width: 56px;
    text-align: center;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
}
.rx-fields {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.rx-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rx-field-grow { flex: 1 1 200px; }
.rx-field-grow input { width: 100%; box-sizing: border-box; }
.rx-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.rx-times {
    align-self: center;
    padding-bottom: 6px;
    color: var(--text-muted);
    font-weight: 700;
}
.sx-col-sets, .sx-col-reps { width: 50px; }

/* ── Workouts Console: Session building blocks (warmup + exercise libs
   moved inside the Sessions container 2026-05-28) ── */
.console-building-blocks {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.console-building-blocks-head {
    margin: 0 0 2px 0;
    font-size: 15px;
}
.console-blocks-sub {
    margin-top: 14px;
}
.console-blocks-sub h4 {
    margin: 0;
    font-size: 14px;
}

/* ── Program page: Exercise Library table + Course Picker (2026-05-28) ── */
.program-exercise-table {
    margin-top: 12px;
}
.program-exercise-row {
    cursor: pointer;
    transition: background 100ms ease;
}
.program-exercise-row:hover {
    background: var(--primary-soft, #f0f7ff);
}

.course-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.course-picker-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    text-decoration: none;
    color: var(--text);
    border-left: 4px solid var(--primary);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.course-picker-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    text-decoration: none;
}
.course-picker-card-active {
    background: var(--primary-soft, #f0f7ff);
    border-color: var(--primary);
}
.course-picker-name {
    font-weight: 700;
    font-size: 16px;
}
.course-picker-desc {
    line-height: 1.35;
}
.course-picker-meta {
    margin-top: 2px;
}

/* ── Profile tabs — Athlete/Coach split (2026-05-30, observation #6) ── */
.profile-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    padding: 0 4px;
}
.profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 120ms ease, border-color 120ms ease;
}
.profile-tab:hover {
    color: var(--text);
}
.profile-tab-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.profile-tab-badge {
    font-size: 12px;
    color: var(--primary);
}

/* ── iOS-style on/off slider — shared across surfaces (2026-05-30) ──
   Used by Home tile app toggles + Profile Coaching Setup. Moved out
   of home.html's inline <style> when Profile needed the same look. */
.home-app-slider {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #e5e7eb;
    padding: 0;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
    flex-shrink: 0;
}
.home-app-slider:hover {
    border-color: #9ca3af;
}
.home-app-slider-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: left 140ms ease;
}
.home-app-slider-on {
    background: var(--primary);
    border-color: var(--primary);
}
.home-app-slider-on:hover {
    background: var(--primary-deep, #0c5aa0);
    border-color: var(--primary-deep, #0c5aa0);
}
.home-app-slider-on .home-app-slider-thumb {
    left: 20px;
}

/* ── Bulk Event Upload (Schedule app, 2026-06-12) ──────────────────────────
   Lives inside .view-section containers → dark-text palette (light-bg
   trap, general-rules.md). Row grids: practice rows are 4 cells + delete;
   game rows are 5 cells + delete. */
.bulk-bp-grid {
    display: grid;
    grid-template-columns: 150px 150px 150px;
    gap: 0 16px;
}
.bulk-bp-hint { margin: 2px 0 10px; }
.bulk-cols,
.bulk-row {
    display: grid;
    gap: 8px;
    align-items: center;
}
.bulk-row-practice { grid-template-columns: 150px 110px 110px 110px 1fr 36px; }
.bulk-row-game { grid-template-columns: 150px 1fr 110px 110px 110px 1fr 36px; }
.bulk-cols {
    margin-top: 16px;
    padding: 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.bulk-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.bulk-row input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: white;
}
.bulk-row input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}
/* Build-by-placing: the add affordance is a dashed trailing row where the
   next row will appear. */
.bulk-add-row {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.bulk-add-row:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

/* ──────────────────────────────────────────────────────────────────────────
   PUBLIC LANDING PAGE (/)  —  the "front of house" face.

   Deliberately NOT the app's look. The authenticated app keeps its navy
   page + floating white panels; this is a conventional white website with
   navy chrome and gold accents, because it's talking to parents, players
   and visiting coaches rather than to someone doing work.

   Prefix: .lp-*   Standalone — landing.html extends no base template.
   ────────────────────────────────────────────────────────────────────────── */

body.lp-body {
    background: #ffffff;
    background-image: none;
    color: var(--text);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--primary);
    border-bottom: 3px solid var(--accent-bright);
}
.lp-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.lp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.lp-brand-mark {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: #ffffff0f;
    border: 2px solid var(--accent-bright);
    border-radius: 9px;
    color: var(--accent-bright);
    font-size: 24px; font-weight: 900; line-height: 1;
}
.lp-brand-mark-sm { width: 32px; height: 32px; font-size: 19px; }
.lp-brand-text { display: flex; flex-direction: column; }
.lp-brand-name { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: 0.2px; }
.lp-brand-sub  { color: #b9c6d8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.9px; }

.lp-nav { display: flex; align-items: center; gap: 22px; order: 2; }
.lp-nav a { color: #dce4ef; text-decoration: none; font-size: 14px; font-weight: 600; }
.lp-nav a:hover { color: var(--accent-bright); }
.lp-login-btn {
    order: 3;
    background: var(--accent-bright);
    color: var(--primary) !important;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 700 !important;
}
.lp-login-btn:hover { background: #ffd45c; }

/* No-JS burger (checkbox hack). Hidden on desktop. */
.lp-nav-toggle, .lp-nav-burger { display: none; }

.lp-hero {
    background: linear-gradient(160deg, #0c2340 0%, #143a63 100%);
    border-bottom: 1px solid #0a1d33;
}
.lp-hero-inner { max-width: 1120px; margin: 0 auto; padding: 72px 24px 80px; }
.lp-hero-eyebrow {
    margin: 0 0 10px; color: var(--accent-bright);
    font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
}
.lp-hero-title {
    margin: 0; color: #fff; font-size: 60px; font-weight: 900;
    line-height: 1.03; letter-spacing: -1.4px;
}
.lp-hero-tagline { margin: 18px 0 0; color: #c6d3e4; font-size: 20px; max-width: 42ch; }

.lp-main { max-width: 1120px; margin: 0 auto; padding: 8px 24px 64px; }

.lp-block { padding: 48px 0; border-bottom: 1px solid #e6eaf0; scroll-margin-top: 90px; }
.lp-block:last-of-type { border-bottom: none; }
.lp-block-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-block h2 {
    margin: 0; font-size: 30px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px;
}
.lp-block h2::after {
    content: ""; display: block; width: 52px; height: 4px;
    background: var(--accent-bright); border-radius: 2px; margin-top: 10px;
}
.lp-block p { margin: 0 0 14px; max-width: 70ch; color: #28313f; }
.lp-lede { font-size: 19px; font-weight: 600; color: var(--primary) !important; }
.lp-note {
    border-left: 4px solid var(--accent);
    background: #fbf0d2;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    font-size: 14.5px;
    color: #5f4a12 !important;
}

/* Status pills — honest labelling of what exists vs what's described. */
.lp-status {
    font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap; align-self: flex-start;
}
.lp-status-soon { background: #fbf0d2; color: #7a5a12; border: 1px solid #e3cf93; }
.lp-status-live { background: var(--primary); color: var(--accent-bright); }

.lp-placeholder-tag {
    font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #7a5a12 !important; margin: 0 0 10px !important;
}
.lp-coach-note {
    background: #f7f9fc;
    border: 1px solid #e6eaf0;
    border-left: 5px solid var(--accent-bright);
    border-radius: 0 10px 10px 0;
    padding: 24px 26px;
}
.lp-coach-note p:last-child { margin-bottom: 0; }

.lp-sched-preview { border: 1px solid #e6eaf0; border-radius: 8px; overflow: hidden; margin-top: 18px; }
.lp-sched-row { display: grid; grid-template-columns: 110px 1fr 90px 1fr; gap: 12px; padding: 11px 16px; font-size: 14px; }
.lp-sched-head { background: var(--primary); color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; }
.lp-sched-row:not(.lp-sched-head) { color: var(--text-faint); font-style: italic; }

.lp-block-cta { text-align: center; background: #f7f9fc; border: 1px solid #e6eaf0; border-radius: 12px; padding: 40px 24px; margin-top: 40px; }
.lp-block-cta h2 { font-size: 24px; }
.lp-block-cta h2::after { margin: 10px auto 0; }
.lp-block-cta p { margin-left: auto; margin-right: auto; }
.lp-cta-btn {
    display: inline-block; margin-top: 10px;
    background: var(--primary); color: var(--accent-bright);
    padding: 13px 30px; border-radius: 7px;
    font-weight: 800; text-decoration: none; font-size: 15px;
}
.lp-cta-btn:hover { background: var(--primary-hover); }

.lp-footer { background: var(--primary); border-top: 3px solid var(--accent-bright); }
.lp-footer-inner { max-width: 1120px; margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; gap: 14px; }
.lp-footer-name { margin: 0; color: #fff; font-weight: 700; font-size: 15px; }
.lp-footer-note { margin: 2px 0 0; color: #9fb0c6; font-size: 12.5px; }

@media (max-width: 860px) {
    /* Brand + Login + burger must all fit one row at 375px, so the
       mark, type and gaps all come down a notch on phones. */
    .lp-header-inner { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
    .lp-brand-sub { display: none; }
    .lp-brand { gap: 9px; }
    .lp-brand-mark { width: 34px; height: 34px; font-size: 20px; }
    .lp-brand-name { font-size: 14px; line-height: 1.25; }
    .lp-nav-burger { width: 38px; height: 34px; }
    .lp-nav-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 42px; height: 38px; padding: 0 9px; cursor: pointer;
        border: 1px solid #ffffff33; border-radius: 7px;
    }
    .lp-nav-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
    .lp-nav {
        display: none; width: 100%; flex-direction: column; align-items: stretch;
        gap: 0; padding-bottom: 6px; order: 4;
    }
    .lp-nav-toggle:checked ~ .lp-nav { display: flex; }
    .lp-nav a { padding: 12px 4px; border-top: 1px solid #ffffff1f; }
    /* Always visible beside the burger — never collapsed into the menu. */
    .lp-login-btn { order: 2; padding: 8px 14px; font-size: 14px; }
    .lp-nav-burger { order: 3; }

    .lp-hero-inner { padding: 48px 16px 52px; }
    .lp-hero-title { font-size: 38px; letter-spacing: -0.8px; }
    .lp-hero-tagline { font-size: 17px; }
    .lp-main { padding: 8px 16px 48px; }
    .lp-block { padding: 36px 0; }
    .lp-block h2 { font-size: 24px; }
    .lp-sched-row { grid-template-columns: 1fr 1fr; }
    .lp-footer-inner { padding: 22px 16px; }
}

/* ── Coach backend (2026-10-16) ──────────────────────────────────────── */
.pw-reveal { border-left: 5px solid var(--accent); background: #fbf0d2; }
.pw-reveal-code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px; font-weight: 700; letter-spacing: 1px;
    color: var(--primary);
    background: #fff; border: 1px dashed var(--border-strong);
    border-radius: 8px; padding: 14px 18px; display: inline-block;
    user-select: all;   /* click once, copy the whole thing */
}
.coach-staff-list { list-style: none; margin: 0 0 12px; padding: 0; }
.coach-staff-list li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.coach-staff-list li:last-child { border-bottom: none; }