/* ============================================================
   Presentation Mode (roadmap §9 "Draft Presentation Mode 📺")
   Full-screen board for in-person drafts on a TV/projector.
   ALL hide/show is CSS-driven from body.jt-presentation-mode —
   PresentationMode (presentation_mode_v4.js) only toggles the
   class; no JS hide/show loops.
   ============================================================ */

/* ── Hidden chrome ──
   Header row 1 keeps the league identity (.header-left) and drops
   everything operable: tabs, boards menu, playoff, and the whole
   right cluster (search, quick actions, Reports, help, bell mount,
   account menu). */
body.jt-presentation-mode .header-row-main .view-tabs,
body.jt-presentation-mode .header-row-main .boards-menu,
body.jt-presentation-mode .header-row-main .playoff-btn,
body.jt-presentation-mode .header-row-main .header-right,
body.jt-presentation-mode #toastHistoryBtn,
body.jt-presentation-mode #desktopLeagueSwitcher,
/* Context bar: keep #draftStatusCompact (round · picks · status ·
   clock · nomination strip); drop every control group. */
body.jt-presentation-mode #contextDraft .ctx-group,
body.jt-presentation-mode #contextDraft .context-btn-sep,
body.jt-presentation-mode #contextDraft .context-reports-group,
body.jt-presentation-mode #contextDraft .refresh-split,
body.jt-presentation-mode #contextDraft .draft-type-toggle,
body.jt-presentation-mode #contextDraft .unit-selector-slot,
/* Commissioner/prep surfaces stay off the projector. */
body.jt-presentation-mode #perspectiveBanner,
body.jt-presentation-mode .di-strip,
body.jt-presentation-mode .di-panel,
body.jt-presentation-mode .wpl-floating-window,
body.jt-presentation-mode .mobile-toolbar-container,
body.jt-presentation-mode .notif-feed,
/* LiveDraftModal in PV: the pick picker stays; Jerry's advice
   (premium section + banner) never hits the shared screen. The
   picker (.ldm-basic-picker) then takes the freed width. */
body.jt-presentation-mode .ldm-premium-section,
body.jt-presentation-mode .ldm-jerry-banner-section,
/* Corner column-order switch is a control, not board data. */
body.jt-presentation-mode .draft-colorder-toggle {
    display: none !important;
}

/* With tabs and actions gone the header has room — let the league name
   breathe instead of ellipsizing at its normal 280px clamp. */
body.jt-presentation-mode #leagueName {
    max-width: none;
}

/* ── Enlarged board (~1.4×, 10-foot readability) ──
   Overrides the *-base tokens every cell rule already multiplies by
   --font-scale, so this scales exactly like the font slider does.
   Fit-to-window mode wins over these (its --ftw-* rules are
   !important) — there FTW already sizes the board to the screen,
   which is the PV goal anyway. */
body.jt-presentation-mode {
    --player-name-base: 1.15rem;
    --player-details-base: 0.95rem;
    --salary-info-base: 0.9rem;
    --position-badge-base: 0.85rem;
    --nfl-team-base: 0.85rem;
    --bye-week-base: 0.85rem;
    --team-header-base: 1.2rem;
    --round-number-base: 1.1rem;
    --inline-position-base: 0.9rem;
    --status-compact-base: 1.15rem;
    --league-name-base: 1.4rem;
}

/* Draft clock: the room's main countdown — biggest thing in the bar. */
body.jt-presentation-mode .draft-timer-status {
    font-size: 1.5rem;
}
body.jt-presentation-mode .draft-timer-status .timer-icon {
    width: 20px;
    height: 20px;
}

/* ── Controls cluster (chyron / sound toggles + exit) ──
   Invisible until the mouse moves (JS adds .jt-pv-visible on
   mousemove, drops it 2.5s later). Focus keeps it visible for
   keyboard users. */
#jtPvControls {
    position: fixed;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 10000;
    display: none;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
body.jt-presentation-mode #jtPvControls {
    display: flex;
}
#jtPvControls.jt-pv-visible,
#jtPvControls:focus-within {
    opacity: 1;
}
#jtPvControls button {
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    color: var(--jt-text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Font stepper: A− 100% A+ as one grouped control */
.jt-pv-fontctl {
    display: inline-flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.jt-pv-fontctl button {
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.7rem;
}
#jtPvFontPct {
    padding: 0 0.35rem;
    font-size: 0.85rem;
    color: var(--jt-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
    text-align: center;
}

/* Soundboard popover: grade row 1 (awful) → 9 (fantastic) + say-it line */
#jtPvSoundboard {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
#jtPvSoundboard[hidden] {
    display: none;
}
.jt-pv-sb-grades {
    display: flex;
    gap: 0.25rem;
}
.jt-pv-sb-grades button {
    width: 2.1rem;
    padding: 0.45rem 0;
    text-align: center;
    font-weight: 700;
}
.jt-pv-sb-say {
    display: flex;
    gap: 0.25rem;
}
#jtPvSayInput {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    background: var(--jt-bg-secondary);
    color: var(--jt-text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
}
#jtPvSayInput::placeholder {
    color: var(--jt-text-muted);
}

/* ── Jerry chyron (lower-third ticker) ──
   Fixed bar at the bottom; the board clears it via margin so no row
   hides behind it. Toggle = body.jt-pv-chyron-off (CSS-only). */
#jtPvChyron {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: stretch;
    height: 46px;
    background: var(--table-header-dark);
    border-top: 2px solid var(--jt-accent-purple, #7c3aed);
}
body.jt-presentation-mode:not(.jt-pv-chyron-off) #jtPvChyron {
    display: flex;
}
body.jt-presentation-mode:not(.jt-pv-chyron-off) #draftBoard {
    margin-bottom: 46px;
}
.jt-pv-chyron-tag {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: var(--jt-accent-purple, #7c3aed);
    /* fixed white on the fixed purple — text-inverse flips with theme */
    color: var(--jt-on-dark-text-bright, #fff);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex: 0 0 auto;
}
.jt-pv-chyron-track {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.jt-pv-chyron-reel {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}
.jt-pv-half {
    display: inline-flex;
    align-items: center;
}
.jt-pv-seg {
    color: var(--jt-text-primary);
    font-size: 1.05rem;
    padding: 0 0.75rem;
}
.jt-pv-seg b {
    color: var(--jt-accent-amber, #f59e0b);
    font-weight: 700;
}
.jt-pv-sep {
    color: var(--jt-text-muted);
    font-size: 1.05rem;
}
@keyframes jtPvTicker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .jt-pv-chyron-reel { animation: none !important; }
}

/* Desktop-only feature: the menu entry never shows on small screens
   (same breakpoint that already hides .jt-user-name). */
@media (max-width: 768px) {
    #jtPresentationViewLink {
        display: none !important;
    }
}