/* ──────────────────────────────────────────────────────────────────────────
   Total Athlete — 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: #0f6bc2;               /* solid accent used in hover/row backgrounds */
    --bg-gradient: linear-gradient(180deg, #0f6bc2 0%, #052a4f 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: #1e3a8a;          /* dark navy — buttons, active, links */
    --primary-hover: #172554;    /* deeper navy */
    --primary-soft: #dbeafe;     /* very light blue — backgrounds for done/active */
    --primary-deep: #1e3a8a;     /* text color on primary-soft */
    --danger: #b91c1c;
    --danger-hover: #991b1b;
    --accent: #e07b2e;           /* orange — kept for secondary accent if needed */
    --success: #1e3a8a;          /* blue 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: #ffedd5; color: #9a3412; }   /* soft orange — 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: #dbeafe; color: #1e3a8a; }   /* soft blue — part of the canon */
.badge-private  { background: #fce7f3; color: #9d174d; }   /* soft pink — owned by a user */

/* 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;
}
.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 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="number"],
.form-row select,
.form-row textarea {
    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-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; }

/* ── 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; }

/* 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-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: #dbeafe; color: #1e40af; }
.pill-scheduling-adhoc   { background: #ffe4e6; color: #9f1239; }

/* Session status badges */
.badge-session-scheduled   { background: #e5e7eb; color: #374151; }
.badge-session-in_progress { background: #dbeafe; 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: #dbeafe; 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;
}
.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-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: var(--text-muted);
    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: #dbeafe;
}
.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;
}

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

.login-body {
    background: linear-gradient(135deg, #0f6bc2 0%, #1e3a8a 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: #ffedd5; color: #9a3412; }
.sidebar-role-athlete { background: #e5e7eb; color: #374151; }   /* slate — visible on white */

/* 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; }
.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 {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0;
}
.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 tab strip (personal-lens only) ─────────────────────────── */
.console-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
    /* No bottom border — sits inside the top-header's dark-blue row 2,
       which already has its own border with the page content below. */
}
.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-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;
}
/* Push a tab to the far right of the main menu — 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;
}

.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); }
.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); }


/* 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 #f97316;
    border-radius: 8px;
    margin: 14px 0 20px 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.program-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: white;
}
.program-card-title { font-weight: 600; font-size: 15px; }
.program-card-progress .badge { font-size: 12px; }
.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;
}
/* 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 #f97316;
    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). */
.course-block {
    margin: 14px 0 22px 0;
    padding-left: 12px;
    border-left: 3px solid var(--primary-deep);
}
.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; }

/* 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. */
.cal-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}
.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 {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cal-month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    min-width: 150px;
    text-align: center;
}

/* 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; }