/* CSS custom properties for theming. Override these to rebrand the app. */
:root {
    --color-primary: #154734;     /* Christ School dark forest green */
    --color-primary-dark: #0e3220;
    --color-accent: #106735;      /* medium green — CTAs, underlines, accents */
    --color-bg: #f5f5f3;
    --color-card: #ffffff;
    --color-text: #2d2d2d;
    --color-muted: #6b6b6b;
    --color-border: #e4e4e2;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --max-content-width: 900px;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    background: var(--color-primary);
    color: white;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
}

.app-header-inner {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.app-brand {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex-shrink: 0;
}

.app-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.app-tagline {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}

.app-main {
    flex: 1;
    padding: 1.25rem;
}

.app-footer {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 1rem;
    font-style: italic;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.app-version {
    font-style: normal;
    font-size: 0.72rem;
    opacity: 0.45;
    letter-spacing: 0.04em;
}

.page {
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.page h1 {
    color: var(--color-primary);
    margin-top: 0;
}

.lead {
    color: var(--color-muted);
    font-size: 1.05rem;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1.25rem;
    box-shadow: var(--shadow);
}

.card h2, .card h3 {
    color: var(--color-primary);
}

.card h3 {
    margin-top: 1.5rem;
}

.stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.stats li {
    background: var(--color-bg);
    padding: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.stats strong {
    color: var(--color-primary);
    font-size: 1.5rem;
    display: block;
    line-height: 1.1;
}

.req-icon {
    display: inline-block;
    width: 1.5em;
    text-align: center;
}

.bump-badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.weeks li {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--color-border);
}

.weeks small {
    color: var(--color-muted);
    margin-left: 0.25rem;
}

.weeks em {
    color: var(--color-muted);
    font-size: 0.92rem;
}

/* ── Banners ──────────────────────────────────────────────────────────────── */

.banner {
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.banner--bump {
    background: #fefce8;
    border: 1px solid #fde68a;
    color: #92400e;
}

.banner--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.banner--coach {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
}

.banner-back {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.banner-back:hover {
    text-decoration: underline;
}

.banner--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    text-decoration: none;
    display: inline-block;
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    border: none;
}

.btn-accent:hover {
    opacity: 0.88;
}

/* ── Help panel ───────────────────────────────────────────────────────────── */

.help-panel {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.help-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: left;
}

.help-toggle:hover {
    background: var(--color-bg);
}

.help-chevron {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.help-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.help-section {
    padding-top: 0.85rem;
    font-size: 0.88rem;
}

.help-section strong {
    display: block;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.help-section p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.55;
}

.help-section a {
    color: var(--color-accent);
}

.help-list {
    margin: 0.4rem 0 0 1rem;
    padding: 0;
    color: var(--color-muted);
    line-height: 1.8;
    font-size: 0.88rem;
}

.help-list strong {
    display: inline;
    color: var(--color-text);
}

/* ── Week page ────────────────────────────────────────────────────────────── */

/* ── Week navigation ──────────────────────────────────────────────────────── */

.week-nav-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.week-num-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
}

.btn-week-nav {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-primary);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.45rem;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.12s, border-color 0.12s;
}

.btn-week-nav:hover:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.btn-week-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ── Journal ──────────────────────────────────────────────────────────────── */

.journal-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.journal-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow);
}

.journal-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.journal-tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #e5e7eb;
    color: #374151;
}

.journal-tag--camp         { background: #fef9c3; color: #78350f; }
.journal-tag--recovery     { background: #fee2e2; color: #991b1b; }
.journal-tag--extrawork    { background: #dcfce7; color: #166534; }
.journal-tag--noteforcoach { background: #ede9fe; color: #4c1d95; }
.journal-tag--other        { background: #e5e7eb; color: #374151; }

.journal-date {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-left: auto;
}

.group-reminder-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--color-text);
    white-space: nowrap;
}

.group-reminder-toggle:hover {
    border-color: var(--color-muted);
}

.journal-del-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
}

.journal-del-btn:hover {
    color: #b91c1c;
}

.journal-del-confirm {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b91c1c;
}

.journal-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
}

.journal-add-btn {
    margin-top: 0.25rem;
}

.journal-form {
    margin-top: 0.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}

.journal-form-row {
    margin-bottom: 0.5rem;
}

.form-select {
    appearance: auto;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.week-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.week-title {
    color: var(--color-primary);
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
}

.week-dates {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.week-quote {
    flex: 1;
    min-width: 200px;
    margin: 0;
    padding: 0.6rem 1rem;
    border-left: 3px solid var(--color-accent);
    background: var(--color-card);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.week-quote cite {
    display: block;
    margin-top: 0.25rem;
    font-weight: 600;
    font-style: normal;
    color: var(--color-primary);
    font-size: 0.85rem;
}

.week-section {
    margin-bottom: 2rem;
}

.week-section h2 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.35rem;
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.section-sub {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-muted);
    margin-left: 0.5rem;
}

/* ── Lift cards ───────────────────────────────────────────────────────────── */

.lift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.lift-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lift-card--done {
    border-color: #86efac;
    background: #f0fdf4;
    opacity: 0.85;
}

.lift-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lift-day-num {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lift-day-theme {
    font-size: 1rem;
    font-weight: 600;
}

.badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--drills {
    background: #e0e7ff;
    color: #3730a3;
}

.badge--done {
    background: #dcfce7;
    color: #166534;
}

.badge--hill {
    background: #fef9c3;
    color: #78350f;
}

.lift-exercises {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.exercise-name {
    font-weight: 600;
    color: var(--color-text);
}

.exercise-sets {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 0.75rem;
}

.set-chip {
    display: block;
    color: var(--color-muted);
}

.set-chip strong {
    color: var(--color-primary);
}

.pct-only {
    color: #6b7280;
    font-size: 0.85em;
}

.set-note {
    color: var(--color-muted);
    font-size: 0.85em;
}

.exercise-notes {
    padding-left: 0.75rem;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-style: italic;
}

.btn-log {
    align-self: flex-start;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.15s;
    margin-top: auto;
}

.btn-log:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.btn-log:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-log--sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
}

.btn-undo {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-family: var(--font-sans);
    padding: 0 0.25rem;
    text-decoration: underline;
    line-height: 1;
}

.btn-undo:hover:not(:disabled) {
    color: var(--color-text);
}

.btn-undo:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Conditioning cards ────────────────────────────────────────────────────── */

.cond-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cond-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cond-card--done {
    border-color: #86efac;
    background: #f0fdf4;
    opacity: 0.85;
}

.cond-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cond-type {
    font-weight: 700;
    color: var(--color-primary);
}

.cond-desc {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-muted);
}

.cond-prescription {
    margin: 0.1rem 0 0;
    font-size: 0.88rem;
}

/* ── Requirement cards ────────────────────────────────────────────────────── */

.req-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.req-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow);
}

.req-card-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.req-icon-lg {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.req-details {
    flex: 1;
    font-size: 0.9rem;
}

.req-desc-text {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0.1rem 0;
}

.req-progress {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 0.2rem;
}

.req-target {
    font-weight: 400;
    color: var(--color-muted);
}

.req-log-form {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.req-log-inputs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.req-log-inputs .form-group {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0.5rem;
}

.form-input--sm {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

.req-log-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Set maxes page ───────────────────────────────────────────────────────── */

.maxes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.maxes-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.muted {
    color: var(--color-muted);
    font-weight: 400;
}

/* ── Header user strip ────────────────────────────────────────────────────── */

.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-username {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.header-logout {
    color: var(--color-accent);
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid var(--color-accent);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.header-logout:hover {
    background: var(--color-accent);
    color: var(--color-primary-dark);
}

/* ── Landing page ─────────────────────────────────────────────────────────── */

.landing-page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.landing-section {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    width: 100%;
    max-width: 560px;
}

.landing-section-title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--color-primary);
}

/* ── Schedule rows (landing + schedule admin) ─────────────────────────────── */

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.schedule-row:last-child {
    border-bottom: none;
}

.schedule-row--inactive {
    opacity: 0.45;
}

.schedule-day {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 6.5rem;
}

.schedule-time {
    color: var(--color-muted);
    white-space: nowrap;
}

.schedule-title {
    flex: 1;
    min-width: 8rem;
}

.schedule-loc {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.schedule-actions {
    margin-left: auto;
    white-space: nowrap;
}

/* ── Game-day countdown ───────────────────────────────────────────────────── */

.countdown-game {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.countdown-grid {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

.countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.25rem;
}

.countdown-num {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.countdown-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.countdown-live {
    display: block;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-accent);
}

.landing-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2.5rem;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.landing-title {
    color: var(--color-primary);
    margin: 0 0 0.1rem;
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.landing-tagline {
    color: var(--color-accent);
    font-weight: 600;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.landing-sub {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin: 0 0 1.75rem;
    line-height: 1.6;
}

.landing-signin {
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
}

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

.login-page {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.login-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 2.25rem;
    width: 100%;
    max-width: 420px;
}

.login-title {
    color: var(--color-primary);
    margin: 0 0 0.1rem;
    font-size: 1.6rem;
}

.login-tagline {
    color: var(--color-accent);
    font-weight: 600;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.login-banner {
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.login-banner--error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
}

.login-sent {
    text-align: center;
}

.login-sent-msg {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.login-hint {
    color: var(--color-muted);
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--color-text);
}

.form-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 61, 46, 0.12);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.15s;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-block {
    width: 100%;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    padding: 0;
    font-family: var(--font-sans);
}

.btn-outline {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius);
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    background: none;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
}

.btn-outline:hover {
    background: var(--color-primary);
    color: white;
}

/* ── Coach header action group ───────────────────────────────────────────── */
.coach-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Admin page ──────────────────────────────────────────────────────────── */
/* Same 44px floor as the player pages' back link — the admin header's back button is
   a .btn-sm, which is ~30px tall on its own. */
.admin-page-header .btn-sm {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.admin-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.admin-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: var(--color-muted);
    font-family: var(--font-sans);
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.admin-tab:hover { color: var(--color-primary); }

.admin-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ── Group selector bar ──────────────────────────────────────────────────── */
.admin-group-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
}

.admin-group-btn {
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1.5px solid var(--color-border);
    border-radius: 99px;
    background: var(--color-card);
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.admin-group-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admin-group-btn--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.admin-section { margin-bottom: 2rem; }

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.admin-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.admin-section-sub {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: -0.5rem 0 0.75rem;
}

/* The import preview's summary line. NOT .admin-section-sub: that class carries a -0.5rem top
   margin because it always sits under a heading, and here it follows the Preview/Cancel row —
   which pulled the text up into the buttons on a 375px screen. */
.import-summary {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0.9rem 0 0.5rem;
}

/* Explanatory text BELOW a form's action row.
   ☠️ Not .admin-section-sub: that class carries a -0.5rem top margin because it always sits
   under a heading, and following a row of buttons it pulls the text up into them. That has now
   caused the same visual fault twice (import preview, play editor), both times invisible at
   desktop width and obvious at 375px. */
.form-note {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0.9rem 0 0;
}

/* A button that reads as a link, for a secondary action sitting inside a line of meta text. */
.gr-linkbtn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-accent, #1b4332);
    text-decoration: underline;
    cursor: pointer;
}

.gr-linkbtn:disabled {
    color: var(--color-muted);
    cursor: default;
}

/* The spot picker on a by-play row. Sized to the meta line it sits in, not to a form field —
   it is a label that happens to be editable, and it must not pull the eye off the marks. */
.gr-pos {
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--color-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.15rem 0.3rem;
}

/* "moved" marks the rep where he changed spots — the others inherit it. */
.gr-moved {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.25rem;
}

/* By-play grading: the play sits above the room, and Next has to be reachable at both ends
   because six linemen are taller than a phone screen. */
.gr-play-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}

.gr-play-nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.gr-play-nav--foot {
    justify-content: space-between;
    margin: 1rem 0 2rem;
}

/* Long calls would otherwise stretch the jump list past the viewport on a phone. */
.gr-play-jump {
    max-width: 14rem;
}

.gr-play-progress {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0 0 0.75rem;
}

/* ── Form card ───────────────────────────────────────────────────────────── */
.admin-form-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem 1rem;
    margin-bottom: 1rem;
}

.admin-form-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.9rem;
    color: var(--color-primary);
}

.form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 160px;
    min-width: 0;
}

.form-field--sm { flex: 0 1 130px; }
.form-field--xs { flex: 0 1 90px; }

.form-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=number],
.form-field input[type=date],
.form-field select,
.form-field textarea {
    padding: 0.4rem 0.65rem;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    border: 1.5px solid var(--color-border);
    border-radius: calc(var(--radius) - 2px);
    background: #fff;
    color: var(--color-text);
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-accent);
}

.form-field textarea { resize: vertical; }

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.form-error {
    color: #c0392b;
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}

/* ── List ────────────────────────────────────────────────────────────────── */
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.9rem;
}

.admin-list-item--block { display: block; padding: 0.75rem 0.9rem; }

.admin-list-item--inactive { opacity: 0.5; }

.admin-item-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.admin-item-icon { font-size: 1.1rem; flex-shrink: 0; }

.admin-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-text);
}

.admin-item-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: 0.1rem;
}

.admin-item-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ── Hamburger button ────────────────────────────────────────────────────── */
/* 44px, not 36 — this is the only way to the drawer from any page, and it sits in a
   header bar where a miss hits nothing at all. */
.btn-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-hamburger:hover { background: rgba(255,255,255,0.12); }

.hbg-line {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
    transform-origin: center;
}

/* Animate to X when open */
.btn-hamburger--open .hbg-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburger--open .hbg-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.btn-hamburger--open .hbg-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Nav drawer ──────────────────────────────────────────────────────────── */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 500;
    pointer-events: none;
}

.nav-drawer--open {
    pointer-events: auto;
}

/* Backdrop */
.nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.25s ease;
}

.nav-drawer--open .nav-drawer-backdrop {
    background: rgba(0, 0, 0, 0.45);
}

/* Panel */
.nav-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.nav-drawer--open .nav-drawer-panel {
    transform: translateX(0);
}

/* Drawer header */
.nav-drawer-header {
    background: var(--color-primary);
    color: #fff;
    padding: 1.1rem 1.1rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-drawer-user {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.nav-drawer-username {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.nav-drawer-role-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.9);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    width: fit-content;
}

.nav-drawer-close {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.nav-drawer-close:hover { background: rgba(255,255,255,0.25); }

/* Drawer body */
.nav-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0.75rem 1.25rem 0.3rem;
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.nav-link:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.nav-link--active {
    border-left-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.nav-link-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Drawer footer */
.nav-drawer-footer {
    border-top: 1px solid var(--color-border);
    padding: 0.5rem 0;
    flex-shrink: 0;
}

.nav-drawer-logout {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.nav-drawer-logout:hover {
    background: var(--color-bg);
    color: #c0392b;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.12s;
}
.btn-icon:hover { background: var(--color-border); }

.admin-empty {
    font-size: 0.88rem;
    color: var(--color-muted);
    margin: 0.5rem 0 0.75rem;
}

.admin-static {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
    padding: 0.4rem 0;
    display: block;
}

.admin-week-form { width: 100%; }

/* HeadCoach badge */
.badge--head {
    background: #154734;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 0.35rem;
}

/* ── Coach Dashboard ──────────────────────────────────────────────────────── */

.coach-summary {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.coach-stat {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex: 1;
    min-width: 90px;
}

.coach-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.coach-stat-label {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.coach-player-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.group-section-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0 0.25rem;
    border-bottom: 2px solid var(--color-primary);
    margin-top: 0.75rem;
}

.group-section-header:first-child {
    margin-top: 0;
}

.group-section-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}

.group-section-stats {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.player-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.player-card--expanded {
    border-color: var(--color-accent);
}

.player-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    cursor: pointer;
    user-select: none;
}

.player-card-header:hover {
    background: var(--color-bg);
}

.player-name-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
}

.badge--warn {
    background: #fef9c3;
    color: #92400e;
}

.player-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-journal-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #ede9fe;
    color: #4c1d95;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.player-expand-chevron {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.player-progress {
    padding: 0.6rem 1rem 0.8rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
}

.progress-label {
    color: var(--color-muted);
    width: 115px;
    flex-shrink: 0;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-dots {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot--on  { background: var(--color-primary); }
.dot--off { background: var(--color-border); border: 1px solid #ccc; }

.progress-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.progress-req-val {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-left: auto;
}

.progress-req-val--met {
    color: var(--color-accent);
}

.player-journal-entries {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.journal-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
}

/* ── Season progress page ────────────────────────────────────────────────── */

.season-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.season-week {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.season-week--current {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.season-week--future {
    opacity: 0.45;
}

.season-week-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.season-week-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.season-week-num {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-primary);
    white-space: nowrap;
}

.season-week-dates {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
}

.season-week-dots {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.season-dot-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.season-dot-label {
    font-size: 0.72rem;
    color: var(--color-muted);
    width: 26px;
    flex-shrink: 0;
}

.season-score {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
    min-width: 2.2rem;
    text-align: right;
    flex-shrink: 0;
}

.season-score--perfect { color: var(--color-accent); }
.season-score--zero    { color: var(--color-muted); }
.season-score--future  { color: var(--color-muted); font-weight: 400; }

.badge--current {
    background: var(--color-accent);
    color: #fff;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   OL MANUAL
   Content is a derived, player-safe subset of the vault note
   Efforts/Football/OL Manual.md — see wwwroot/manual/.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Contents ─────────────────────────────────────────────────────────────── */
.manual-page {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.manual-contents-head h1 {
    margin: 0 0 0.25rem;
}

.manual-contents-sub {
    color: var(--color-muted);
    margin: 0 0 1.5rem;
}

.manual-section-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Whole row is the target — not just the title. */
.manual-section-btn {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 72px;
    padding: 0.9rem 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.manual-section-btn:hover,
.manual-section-btn:focus-visible {
    background: #fbfbfa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.manual-section-btn:active {
    transform: translateY(1px);
}

.manual-section-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
}

.manual-section-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.manual-section-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.manual-section-sub {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.manual-section-chevron {
    color: var(--color-muted);
    font-size: 1.6rem;
    flex: 0 0 auto;
}

.manual-contents-foot {
    margin-top: 2rem;
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Section body (rendered markdown) ─────────────────────────────────────── */
/* The back link sticks to the top of a long read. A manual section runs 4,157px — five phone
   screens — and the only other way out was the pager at the very bottom (review #14). Sticky
   costs nothing and means "get me out of here" is always one tap away, which is the same rule
   the card viewer's Close button follows. */
.manual-page .manual-back,
.manual-page .page-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg);
}

/* The topbar is a flex row; keep the sticky background covering its full width and give it a
   little breathing room so text does not scroll flush against it. */
.manual-page .page-topbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    box-shadow: 0 1px 0 var(--color-border);
}

.manual-back {
    /* The one control on the page whose whole job is "get me out of here", used on a
       sideline. It rendered ~32px tall as an inline-block line of text; 44px is the
       same rule the playbook and drills admin rows already follow. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.2rem;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.manual-back:hover { text-decoration: underline; }

/* Film links sit between the section heading and its text — after you know what you are
   reading, before you start reading it. */
.manual-film-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.manual-film-links .btn-sm {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.manual-body {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.25rem 1.75rem;
    line-height: 1.6;
}

.manual-body h1 {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-accent);
    color: var(--color-primary);
}

.manual-body h2 {
    margin: 2rem 0 0.6rem;
    color: var(--color-primary);
    font-size: 1.3rem;
}

.manual-body h3 {
    margin: 1.5rem 0 0.4rem;
    font-size: 1.08rem;
}

.manual-body p { margin: 0 0 0.9rem; }

.manual-body ul,
.manual-body ol { margin: 0 0 1rem; padding-left: 1.3rem; }

.manual-body li { margin-bottom: 0.35rem; }

/* Blockquote doubles as the "three words" callout — big and unmissable. */
.manual-body blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    background: #f0f5f2;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* The motto renders as h3 / h1 / h3 inside a blockquote — all three centre,
   and the h1 drops the section-title underline it would otherwise inherit. */
.manual-body blockquote > h1,
.manual-body blockquote > h2,
.manual-body blockquote > h3 {
    margin: 0;
    text-align: center;
    letter-spacing: 0.04em;
    border-bottom: none;
    padding-bottom: 0;
    color: var(--color-primary);
}

.manual-body blockquote > h1 {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.05;
    margin: 0.1rem 0;
}

.manual-body blockquote p:last-child { margin-bottom: 0; }

/* Tables carry most of the manual's content — they must survive a phone. */
.manual-table-wrap,
.manual-body > table { display: block; }

.manual-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: 0.93rem;
    overflow-x: auto;
}

.manual-body th,
.manual-body td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.manual-body th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.manual-body tbody tr:nth-child(even) { background: #fafafa; }

/* Diagrams from the vault. Line drawings on white — they need a light card so
   they don't float on the page, and they must never exceed the column. */
.manual-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.25rem auto;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    /* Tappable: it opens in the in-app viewer. There is no <a> around it any more --
       the anchor navigated to the raw .png and stranded iPhone readers there -- so the
       affordance has to come from the cursor and the hover, not from link styling. */
    cursor: zoom-in;
}

.manual-body img:hover {
    border-color: var(--color-accent, #1e6b45);
}

/* A diagram that enlarges has to look like it will. There is no hover on a phone, so the
   affordance is permanent: a slightly stronger frame plus the zoom cursor where there is a
   pointer. Measured problem behind this: a 1920px rule sheet renders 274px wide at 375px, and
   until 2026-08-20 there was no way to see it any bigger. */
.manual-img--zoomable {
    cursor: zoom-in;
    border-color: var(--color-accent);
}

.manual-img--zoomable:hover,
.manual-img--zoomable:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    outline: none;
}

.manual-body code {
    background: #eef2f0;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.manual-body pre {
    background: #22282a;
    color: #eaeaea;
    padding: 0.9rem;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 0.85rem;
}

.manual-body pre code { background: none; color: inherit; padding: 0; }

.manual-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.75rem 0;
}

.manual-error {
    background: #fdf3f3;
    border-left: 4px solid #b03030;
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Prev / next pager ────────────────────────────────────────────────────── */
.manual-pager {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.manual-pager-btn {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 0;
    min-height: 60px;
    padding: 0.7rem 0.9rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
}

.manual-pager-btn--next { text-align: right; align-items: flex-end; }

.manual-pager-btn:hover { background: #fbfbfa; }

.manual-pager-dir {
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.manual-pager-title { font-weight: 600; font-size: 0.95rem; }

@media (max-width: 480px) {
    .manual-body { padding: 1rem 0.85rem 1.5rem; }
    .manual-body table { font-size: 0.85rem; }
    .manual-body th, .manual-body td { padding: 0.4rem 0.45rem; }
    .manual-splash-motto .motto-lg { font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPLASH  (/)  ·  HUB  (/hub)
   ══════════════════════════════════════════════════════════════════════════ */

.splash {
    max-width: 460px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    text-align: center;
}

/* ── Splash artwork ───────────────────────────────────────────────────────────
   Height is capped in vh, not px: the candidate art is portrait (~2:3), and at
   full width it pushes the Enter button below the fold on a phone. Capping the
   height keeps the primary action reachable without a scroll on every device. */
.splash-art {
    display: block;
    width: auto;
    max-width: 300px;
    max-height: 42vh;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ── Motto ────────────────────────────────────────────────────────────────── */
.splash-motto {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin: 1.25rem 0 0.25rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.splash-motto .motto-sm { font-size: 1.15rem; font-weight: 600; }

.splash-motto .motto-lg {
    font-size: 2.6rem;
    font-weight: 800;
    margin: 0.12rem 0;
    letter-spacing: 0.04em;
}

.splash-title {
    font-size: 1.6rem;
    margin: 1.5rem 0 0.15rem;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

.splash-sub { color: var(--color-muted); margin: 0 0 1.75rem; }

.splash-enter {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    text-align: center;
}

.splash-tag {
    margin-top: 2.25rem;
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Hub ──────────────────────────────────────────────────────────────────── */
.hub {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.hub-title { text-align: center; margin: 0 0 0.15rem; }

.hub-sub {
    text-align: center;
    color: var(--color-muted);
    margin: 0 0 1.75rem;
}

.hub-grid { display: flex; flex-direction: column; gap: 0.85rem; }

.hub-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 88px;
    padding: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease;
}

/* The manual is the point of this page right now — make it read that way. */
.hub-btn--primary {
    border-left-color: var(--color-accent);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8f6 100%);
}

.hub-btn:hover,
.hub-btn:focus-visible { background: #fbfbfa; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }

.hub-btn:active { transform: translateY(1px); }

.hub-btn-icon { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }

.hub-btn-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.hub-btn-title { font-weight: 700; font-size: 1.15rem; }

.hub-btn-sub { color: var(--color-muted); font-size: 0.85rem; margin-top: 0.15rem; }

.hub-btn-chevron { color: var(--color-muted); font-size: 1.7rem; flex: 0 0 auto; }

.hub-tag {
    margin-top: 2rem;
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .splash-motto .motto-lg { font-size: 2.15rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOK
   Play cards by game week. Week rows reuse .manual-section-btn so the two
   content pages feel like one app; only the card grid is new.
   ══════════════════════════════════════════════════════════════════════════ */

/* Group heading above a run of week rows — "This week", "Coming up". */
.pb-group-label {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.pb-group-label:first-of-type { margin-top: 0; }

.manual-section-list + .pb-group-label { margin-top: 1.5rem; }

/* Week rows stack like the manual's section list even without its wrapper. */
.manual-section-btn + .manual-section-btn,
.pb-group-label + .manual-section-btn { margin-top: 0.75rem; }

/* The current week — a distinct look, not just its position on the page. */
.pb-week--now {
    border-left-color: var(--color-primary);
    background: #f7fbf8;
}

.pb-week-notes {
    margin: -1rem 0 1.5rem;
    color: var(--color-text);
    font-weight: 600;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
/* One per row: a play card is a wide diagram and shrinking two side by side on
   a phone makes both unreadable. Tapping opens the raw file, where the phone's
   own pinch-zoom takes over. */
.pb-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pb-card {
    margin: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pb-card img {
    display: block;
    width: 100%;
    height: auto;
    background: #fafafa;
}

.pb-card-caption {
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}

/* A PDF has no thumbnail to show, so it gets a row that says what it is and what
   tapping it does. Same height and target as everything else on the page. */
/* A <button> since 2026-08-20, not a link — it opens the in-app viewer. Reset the
   button chrome so the tile looks exactly as it did. */
.pb-card-pdf {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 72px;
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: var(--color-text);
}

.pb-card-pdf:hover,
.pb-card-pdf:focus-visible { background: #fbfbfa; }

.pb-card-pdf-icon { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }

.pb-card-pdf-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.pb-card-pdf-title {
    font-weight: 700;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.pb-card-pdf-sub { color: var(--color-muted); font-size: 0.85rem; margin-top: 0.15rem; }

.pb-card-pdf-chevron { color: var(--color-muted); font-size: 1.6rem; flex: 0 0 auto; }

/* ── Admin ────────────────────────────────────────────────────────────────── */
.pb-admin-week {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}

.pb-admin-week-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pb-admin-week-title {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 1.15rem;
    color: var(--color-primary);
}

.pb-pill {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.pb-pill--muted { background: var(--color-muted); }

.pb-grow { flex: 1 1 14rem; }

.pb-add-custom {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.pb-upload { margin: 0.75rem 0 0.5rem; }

.pb-upload-hint { margin: 0.35rem 0 0; font-size: 0.8rem; }

.pb-admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.pb-admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* Also a <button> now, same reason as .pb-card-pdf. */
.pb-admin-thumb {
    padding: 0;
    font: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid var(--color-border);
}

.pb-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PDFs have no preview to show — the slot becomes a labelled marker instead, so the
   row still scans at a glance as "this one is a document". */
.pb-admin-thumb--pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--color-muted);
}

.pb-admin-thumb-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pb-admin-row-main { flex: 1 1 12rem; min-width: 0; }

.pb-admin-meta { font-size: 0.75rem; margin-top: 0.25rem; }

/* Reorder targets stay finger-sized — this gets used on a phone, standing up. */
.pb-admin-row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.pb-admin-row-actions .btn-sm,
.pb-admin-row-actions .journal-del-btn {
    min-width: 44px;
    min-height: 44px;
}

/* .journal-del-btn is 24px where it comes from; the destructive control in a row of
   44px targets is the last one that should be the hardest to hit. Scoped here so the
   journal's own delete button is untouched. */
.pb-admin-row-actions .journal-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pb-admin-row-confirm { flex: 1 1 100%; }

.page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Edit sits opposite the back link, and is deliberately the quieter of the two —
   players never see it, and the coach who needs it knows what it is. */
.page-topbar-edit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.75rem;
}

/* ── Card viewer ──────────────────────────────────────────────────────────────
   Replaces target="_blank" on image cards. Opening the raw file left the app with
   no way back on an iPhone — the fix is to never leave. Scrolls rather than
   scaling to fit: a call sheet is read close up, and a card shrunk into the
   viewport is a card nobody can read. */
.media-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.92);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 3rem;
}

/* The bar rides with the content rather than floating over it — a Close button that
   sits on top of the play is a Close button that hides the thing you came to see. */
.media-viewer-bar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0, 0, 0, 0.75);
}

/* Names what you are looking at — on a board of a dozen cards, an image alone does
   not always say which play it is. */
.media-viewer-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Yields to the buttons — the label is context, they are the controls. */
    flex: 0 1 auto;
    min-width: 0;
}

.media-viewer-close {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    cursor: pointer;
}

.media-viewer-close:hover { background: rgba(255, 255, 255, 0.28); }

.media-viewer-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Actual size: the whole reason the viewer exists for diagrams. Width is released so the
   overlay scrolls in both directions rather than squeezing a 1920px rule sheet into a phone. */
.media-viewer-img--actual {
    width: auto;
    max-width: none;
    cursor: zoom-out;
}

.media-viewer-zoom {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.9rem;
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.media-viewer-zoom:hover { background: rgba(255, 255, 255, 0.16); }

/* pdf.js renders each page into its own canvas and they stack here. Height is the
   content's, not the viewport's — the overlay scrolls through the pages. */
.media-viewer-pdf {
    display: block;
    width: 100%;
}

.media-viewer-pdf-page {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    margin-bottom: 0.5rem;
}

.media-viewer-pdf-num,
.media-viewer-pdf-status {
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 0.85rem;
}

.media-viewer-pdf-status { padding: 2rem 1rem; font-size: 1rem; }

/* The card tile is a button now, not a link. Strip the button chrome so it still
   reads as the image it always was. */
.pb-card-open {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.pb-card-open img { display: block; width: 100%; height: auto; }

/* ── Film shelf tabs ──────────────────────────────────────────────────────────
   Peer sections, so they read as tabs rather than as another filter row. Visually
   distinct from the play-type chips below them on purpose: these change *what list
   you are looking at*, the chips narrow the list you are already in. Two controls
   that look identical but do different things is how a filter gets mistaken for
   navigation. */
.film-shelves {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border);
}

.film-shelf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.75rem;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}

.film-shelf:hover { color: var(--color-primary); }

.film-shelf--on {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

.film-shelf-icon { font-size: 1rem; }

/* Three tabs fit 375px only just; the icons go rather than the words, because the words
   are what identify the shelf. */
@media (max-width: 380px) {
    .film-shelf-icon { display: none; }
    .film-shelf { padding: 0 0.5rem; }
}

/* ── Film filters ─────────────────────────────────────────────────────────────
   Chips rather than a <select>: every option and its count is visible at once, the
   selected one is obvious, and each is a finger-sized target. They are links, not
   buttons, because the filter lives in the URL — so Back works and a filtered list
   can be sent to a player. */
.film-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;

    /* One line that scrolls sideways, not a block that wraps. Wrapping put 10 chips into 257px
       and pushed the first clip to 70% of a phone screen (measured 2026-08-20) — the filters
       were bigger than the thing being filtered. Scrolling keeps the row one row however long
       the tag vocabulary gets. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edge so a half-visible chip signals "there is more this way". */
    padding-bottom: 0.15rem;
}

.film-filters::-webkit-scrollbar { display: none; }

/* Chips must not squeeze to fit a nowrap row. */
.film-filters .film-chip { flex: 0 0 auto; }

.film-filters-label { flex: 0 0 auto; }

.film-filters--tags {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.film-filters-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted, #6b7280);
}

.film-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.film-chip:hover { border-color: var(--color-accent); }

/* Selected state has to survive a glance on a bright sideline, so it is a filled chip
   rather than a subtle outline. */
.film-chip--on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* An empty category stays visible and tappable — "no Pass Pro clips yet" is information,
   and a category that vanishes reads as a bug. */
.film-chip--empty { opacity: 0.55; }

.film-chip--unfiled { border-style: dashed; }

.film-chip-n {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.75;
}

/* ── Film clip meta ───────────────────────────────────────────────────────── */

.dr-clip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
}

.film-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
}

/* The play type is the one piece of meta people scan for, so it is the one that carries
   colour; dates and FilmRoom tags stay quiet. */
.film-tag--play {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.film-tag--date { font-weight: 700; }

/* ── Film admin ───────────────────────────────────────────────────────────── */

.film-admin-nag {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg);
}

/* Batch defaults sit above the file picker, laid out like the per-clip fields below so the
   relationship reads without a label explaining it. */
.film-batch {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.film-batch-tags { flex: 1 1 18rem; min-width: 0; }

/* The collapsed row: one scannable line that is also the expand control. */
.film-row-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 1 1 16rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.25rem 0;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.film-row-caret {
    flex: 0 0 auto;
    width: 1rem;
    color: var(--color-muted, #6b7280);
}

.film-row-main { min-width: 0; }

/* The filing state at a glance — the question a coach scans this list to answer. */
.film-row-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Play type and date side by side on a desk, stacked on a phone. */
.film-admin-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.film-admin-play { flex: 1 1 12rem; min-width: 0; }
.film-admin-date { flex: 0 1 12rem; min-width: 0; }

/* The section tabs carry a count each, and tabs are targets like everything else. */
.admin-tabs .admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DRILLS
   Reference clips — drills and technique. Clips are cut and exported in the
   FilmRoom desktop app; this app only stores and plays the finished MP4.
   ══════════════════════════════════════════════════════════════════════════ */

.dr-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dr-clip {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Black behind the video, not the card colour: letterboxing on a portrait clip should
   read as part of the picture rather than as a broken layout. 16/9 is reserved up front
   so the page doesn't jump when metadata arrives and the real ratio is known. */
.dr-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.dr-clip-body {
    padding: 0.85rem 1rem 1rem;
}

.dr-clip-title {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* pre-wrap: the coaching points are typed as lines, and lines are the whole format. */
.dr-clip-desc {
    margin: 0.5rem 0 0;
    white-space: pre-wrap;
    color: var(--color-text);
    line-height: 1.5;
}

/* ── Admin ────────────────────────────────────────────────────────────────── */

/* Finger-sized targets, same rule the playbook admin applies to its row controls.
   The library gets written at a desk but checked on a sideline, and ▲/▼ are the two
   smallest labels on the page — without this they render 38x30. */
.dr-admin-actions .btn-sm {
    min-height: 44px;
}

.dr-admin-actions .btn-sm[title^="Move"] {
    min-width: 44px;
}

/* Clip beside its fields on a desktop, stacked on a phone — the points get written
   at a desk, but the library gets checked on a sideline. */
.dr-admin-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}

.dr-admin-video {
    flex: 1 1 20rem;
    min-width: 0;
    max-width: 30rem;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
}

.dr-admin-fields { flex: 1 1 18rem; min-width: 0; }

.dr-admin-desc {
    resize: vertical;
    min-height: 6rem;
    font-family: inherit;
    line-height: 1.45;
}

/* ── Upload progress ──────────────────────────────────────────────────────── */
/* A clip is large enough that a silent wait reads as a hang. */
.dr-progress { margin: 0.75rem 0 0.25rem; }

.dr-progress-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.dr-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.dr-progress-bar {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.15s linear;
}

/* ── Film grading ──────────────────────────────────────────────────────────
   The grade sheet is used beside a Hudl window (Hudl cannot be embedded — it
   sends X-Frame-Options) or on a phone with Hudl on the TV. So it must be fully
   usable at ~600px: one rep per card, big targets, no horizontal scroll ever. */

.gr-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-bg);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.9rem;
}

.gr-sticky-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
}

.gr-progress {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-muted);
}

.gr-rep {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.6rem;
}

.gr-rep--graded { border-left: 4px solid var(--color-accent); }
.gr-rep--na     { opacity: 0.55; }

.gr-rep-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.gr-rep-title { font-weight: 700; }
.gr-rep-meta  { font-size: 0.8rem; color: var(--color-muted); }

/* Tap to SET, never tap to cycle. Cycling costs four taps to reach X and shows
   none of the options — bad with a thumb, worse with gloves. */
.gr-marks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
}

.gr-mark {
    min-height: 46px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-muted);
    cursor: pointer;
}

.gr-mark:hover:not(:disabled) { border-color: var(--color-accent); }
.gr-mark:disabled             { cursor: default; opacity: 0.5; }

.gr-mark--on-2 { background: #1f6f4a; border-color: #1f6f4a; color: #fff; }
.gr-mark--on-1 { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.gr-mark--on-0 { background: #9e2a2a; border-color: #9e2a2a; color: #fff; }
.gr-mark--on-x { background: #6d1414; border-color: #6d1414; color: #fff; }
.gr-mark--on-na{ background: var(--color-muted); border-color: var(--color-muted); color: #fff; }

.gr-sub {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.gr-chip {
    min-height: 38px;
    padding: 0 0.7rem;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
}

.gr-chip--on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.gr-chip:disabled { cursor: default; opacity: 0.5; }

.gr-note {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.9rem;
}

.gr-note:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.gr-revised {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c8901a;
}

.gr-banner {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}

.gr-saved {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-right: 0.6rem;
}

/* Diff strip — the other side's mark on the same rep. Only ever rendered when the
   service has already decided both sides submitted. */
.gr-diff {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.gr-diff--off { border-top-color: #c8901a; }

.gr-diff-side strong { color: var(--color-text); }

.gr-diff-flag {
    font-weight: 800;
    color: #c8901a;
    font-size: 1rem;
}

.gr-diff-note { font-style: italic; overflow-wrap: anywhere; }

/* ── Grading dashboard ─────────────────────────────────────────────────────
   Single-hue sequential throughout. The app's green and the "bad" red fail
   colour-vision separation as a pair (ΔE 4.1 deutan), so no chart here puts two
   series side by side in colour — periods are compared as small multiples. */

.gr-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.7rem;
}

.gr-tile {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.8rem 0.9rem;
}

.gr-tile-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gr-tile-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0.2rem;
}

.gr-tile-sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.15rem;
}

.gr-good  { color: var(--color-accent); }
.gr-short { color: #9e2a2a; }
.gr-muted { color: var(--color-muted); }

.gr-chart {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.6rem;
    overflow-x: auto;
}

.gr-chart svg { width: 100%; height: auto; min-width: 460px; display: block; }

.gr-chart-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.gr-multiples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.gr-bars {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
}

.gr-bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 9rem) 1fr 3rem;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
}

.gr-bar-label {
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gr-bar-track {
    position: relative;
    display: block;
    height: 14px;
    background: var(--color-bg);
    border-radius: 3px;
    overflow: hidden;
}

.gr-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-accent);
    /* 4px rounded data-end, anchored to the baseline at left */
    border-radius: 0 4px 4px 0;
    min-width: 2px;
}

.gr-bar-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-muted);
    opacity: 0.55;
}

.gr-bar-value {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gr-table-wrap { overflow-x: auto; }

.gr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--color-card);
}

.gr-table th,
.gr-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.gr-table th { font-size: 0.78rem; color: var(--color-muted); }
.gr-num { text-align: right !important; font-variant-numeric: tabular-nums; }

.gr-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    color: var(--color-muted);
    cursor: pointer;
}

.gr-sort--on { color: var(--color-text); font-weight: 700; }

/* ── Shareable player report ───────────────────────────────────────────────
   Coach-only, printed to PDF and sent by hand. There is no public URL for this
   on purpose — see the note at the top of GradePlayerReport.razor. */

.rp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.rp-hint { font-size: 0.8rem; color: var(--color-muted); }

.rp-sheet {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.6rem 1.8rem;
    max-width: 860px;
}

.rp-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.8rem;
}

.rp-name { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--color-primary); }
.rp-sub  { font-size: 0.85rem; color: var(--color-muted); }
.rp-org        { text-align: right; }
.rp-org-name   { font-weight: 700; }

.rp-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.2rem 0;
}

.rp-big   { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--color-primary); }
.rp-label { font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; }

.rp-method {
    font-size: 0.82rem;
    color: var(--color-muted);
    border-left: 3px solid var(--color-border);
    padding-left: 0.8rem;
    margin: 0 0 1.2rem;
}

.rp-h2 { font-size: 1rem; margin: 1.2rem 0 0.5rem; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.rp-table th,
.rp-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.rp-table th { font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; }
.rp-table tfoot td { border-top: 2px solid var(--color-primary); border-bottom: 0; }

.rp-foot { margin-top: 1.4rem; font-size: 0.75rem; color: var(--color-muted); }

@media print {
    /* The page chrome is not part of the document he is sending. */
    .app-header, .app-nav, .rp-actions, .hub-tag { display: none !important; }
    body, .page { background: #fff; margin: 0; padding: 0; }
    .rp-sheet { border: 0; border-radius: 0; padding: 0; max-width: none; }
    .rp-table { page-break-inside: auto; }
    .rp-table tr { page-break-inside: avoid; }
}