/* Web review v2 -- Command Center. Three-pane grid: rails left/right,
   stage + docked timeline center. IBM Plex Sans throughout; tabular
   figures keep timestamps and damage columns aligned without a mono. */

.cc-body {
    margin: 0;
    background: var(--app-backdrop, var(--bg));
    color: var(--text);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    overflow: hidden;
    /* site nav on top, workspace fills the rest */
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.cc-body nav { flex: none; }
.cc-body .hidden { display: none !important; }

/* ---------- gates ---------- */
.cc-gate {
    max-width: 420px;
    margin: 18vh auto 0;
    text-align: center;
    padding: 0 20px;
}
.cc-gate h1 { font-size: 26px; margin: 0 0 10px; }
.cc-gate .sub { color: var(--dim); margin: 0 0 22px; }
.cc-gate .btn.primary.big {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* ---------- grid ---------- */
.cc-grid {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr) 300px;
    flex: 1;
    min-height: 0;
}
/* live-streams entry (#live): just streams + the player -- none of the
   review furniture (nights, timeline, death feed) */
/* element+class so it outranks .cc-more's display:block later in the file */
a.live-only { display: none; }
.cc-grid.live-mode { grid-template-columns: 252px minmax(0, 1fr); }
.live-mode .cc-right,
.live-mode .cc-timeline-panel,
.live-mode #night-strip,
.live-mode .rv-only { display: none !important; }
.live-mode .live-only {
    display: block;
    text-align: center;
    text-decoration: none;
}
.live-mode #live-section { display: block !important; }
.cc-left, .cc-right {
    background: var(--glass-panel, var(--panel));
    display: flex;
    flex-direction: column;
    min-height: 0;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.cc-left { border-right: 1px solid var(--glass-edge, var(--edge)); }
.cc-right { border-left: 1px solid var(--glass-edge, var(--edge)); }
.cc-scroll {
    overflow-y: auto;
    min-height: 0;
    flex: 1;
    padding-bottom: 12px;
}
.cc-scroll::-webkit-scrollbar, #timeline::-webkit-scrollbar, .pick-list::-webkit-scrollbar { width: 8px; height: 8px; }
.cc-scroll::-webkit-scrollbar-thumb, #timeline::-webkit-scrollbar-thumb, .pick-list::-webkit-scrollbar-thumb {
    background: var(--edge); border-radius: 4px;
}

/* ---------- left rail ---------- */
.cc-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--edge);
}
.cc-logo {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: .02em;
}
.cc-logo span { color: var(--accent); }
.cc-crumbsep { color: var(--dim); font-size: 13px; }
.cc-crumb {
    color: var(--dim);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.cc-crumb:hover { color: var(--text); }
.cc-crumb-here { font-size: 13px; font-weight: 600; }
.cc-livebadge {
    margin-left: auto;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #ff5a5a;
    border: 1px solid rgba(255, 90, 90, .5);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: .08em;
    animation: cc-pulse 2s ease-in-out infinite;
}
@keyframes cc-pulse { 50% { opacity: .55; } }

.cc-label {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--dim);
    padding: 14px 16px 6px;
}
.cc-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 12px;
}
.cc-label-row .cc-label { padding-right: 0; }

.cc-rows {
    list-style: none;
    margin: 0;
    padding: 0 8px;
}
.cc-rows li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.3;
}
.cc-rows li:hover { background: var(--panel-2); }
.cc-rows li.active { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.cc-rows li.cc-empty { cursor: default; color: var(--dim); font-size: 12px; }
.cc-rows li.cc-empty:hover { background: none; }
.cc-name {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-rmeta {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    color: var(--dim);
    flex: none;
}
.vod-dl {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: none;
    color: var(--dim);
    cursor: pointer;
    border-radius: 5px;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.cc-rows li:hover .vod-dl { opacity: 1; }
.vod-dl:hover { color: var(--text); background: var(--panel); }
.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff5a5a;
    flex: none;
    animation: cc-pulse 2s ease-in-out infinite;
}
.cc-povstrip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-top: 1px solid var(--glass-edge, var(--edge));
    background: var(--glass-panel, var(--panel));
    flex-wrap: wrap;
}
.cc-povstrip .cc-label { padding: 0; }
.cc-povpill { padding: 4px 10px; }
.cc-spark {
    flex-basis: 100%;
    display: flex;
    gap: 2px;
    padding-left: 0;
    min-height: 0;
}
.cc-spark span {
    width: 5px; height: 10px;
    border-radius: 1px;
    flex: none;
}
.cc-boss-row {
    margin-left: 14px;
    padding: 6px 8px !important;
}
.cc-boss-row .cc-name { font-size: 12.5px; }
.cc-bossbars { padding-left: 20px; }
.cc-bossbars span { height: 6px; width: 9px; border-radius: 1px; }
.cc-killtime { color: var(--ok); }
.cc-pull-row {
    margin-left: 30px;
    padding: 4px 8px !important;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    flex-wrap: nowrap;
}
.cc-pullnum { color: var(--dim); flex: 0 0 14px; }
.cc-pullgrade { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-more {
    display: block;
    margin: 8px 16px 0;
    width: calc(100% - 32px);
}
.cc-bestpct {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    flex: none;
    width: 34px;
    text-align: right;
}

/* raid-nights calendar popover */
.cal-pop { padding: 8px 12px 4px; user-select: none; }
.cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; font-size: 13px; font-weight: 600;
}
.cal-head .cc-mini { padding: 2px 8px; font-size: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-size: 9px; color: var(--dim); text-align: center; padding-bottom: 2px; }
.cal-cell {
    text-align: center; padding: 4px 0; border-radius: 5px; font-size: 11px;
    color: var(--dim); cursor: pointer; border: 1px solid transparent;
}
.cal-cell:hover { border-color: var(--edge); }
.cal-cell.today { font-weight: 700; color: var(--text); }
.cal-cell.has { color: var(--text); background: var(--panel-2); border-color: var(--accent); }
.cal-cell.has:hover { background: rgba(var(--accent-rgb), .25); }
.cal-cell.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.cc-paste {
    display: flex;
    gap: 6px;
    padding: 12px 12px 0;
}
.cc-paste input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 8px;
}
.cc-paste input:focus { outline: none; border-color: var(--accent); }

.cc-mini {
    background: var(--panel-2);
    border: 1px solid var(--edge);
    border-radius: 6px;
    color: var(--dim);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    padding: 4px 9px;
    cursor: pointer;
}
.cc-mini:hover { color: var(--text); border-color: var(--edge); }
.cc-mini.spinning { opacity: .55; pointer-events: none; }
/* the timeline's control cluster reads at a larger size */
.cc-timeline-head .cc-mini { font-size: 13px; padding: 5px 11px; }

.cc-railmsg { color: #ff8a8a; font-size: 12px; padding: 8px 16px; }
.cc-deathcount { font-weight: 700; color: #ef4444; }

/* ---------- center ---------- */
.cc-center {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.cc-nightstrip {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 9px 16px 0;
    flex-wrap: wrap;
}
.cc-headline {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.cc-nightstats {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    color: var(--dim);
}
.cc-stagehead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--edge);
    min-height: 30px;
    flex-wrap: wrap;
}
.cc-flex { flex: 1; }
.cc-boss { font-size: 16px; font-weight: 600; white-space: nowrap; }
.cc-grade {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.cc-meta {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
}
/* auto-play preference toggle in the review stage head */
.autoplay-toggle { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; margin-bottom: 0; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; flex: none; }
.autoplay-toggle input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; margin: 0; }
.cc-pull-label {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    white-space: nowrap;
}
.cc-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-chip {
    background: var(--panel-2);
    border: 1px solid var(--edge);
    border-radius: 4px;
    color: var(--text); /* buttons don't inherit; UA default is near-black */
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    cursor: pointer;
}
.cc-chip:hover { border-color: var(--edge); }
.cc-chip.active { border-color: var(--accent); background: var(--panel-2); }
.cc-povpill { font-size: 12.5px; }
.cc-povpill.active { color: var(--text); background: rgba(var(--accent-rgb), .25); }

/* stage (shell + chrome, ported from the app player) */
/* centred over the stage while a VOD chunk fetch is in flight */
.vc-loading {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 2;
    font: 600 16px "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .04em;
    color: #fff; background: rgba(0, 0, 0, .55);
    padding: 9px 20px; border-radius: 999px;
}
.video-shell {
    position: relative;
    background: #000;
    flex: 1;
    min-height: 180px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}
.video-shell video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.cc-stage-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dim);
    font-size: 13px;
    padding: 0 40px;
    text-align: center;
    background: #0b0d11;
}
.vbar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 12px 8px;
    background: linear-gradient(transparent, rgba(4, 6, 10, .88) 45%);
    opacity: 0;
    transition: opacity .15s;
    z-index: 3;
}
.video-shell:hover .vbar,
.video-shell.paused .vbar,
.vbar.scrubbing,
.vbar:focus-within { opacity: 1; }
/* Fullscreen: a few idle seconds hide the bar and the cursor; any pointer or
   key activity brings both back (the shell's .idle class, wireIdleHide in
   review.js). Paused wins: the bar is the way back to play. */
.video-shell:fullscreen.idle:not(.paused),
.video-shell:fullscreen.idle:not(.paused) .split-tile { cursor: none; }
.video-shell:fullscreen.idle:not(.paused) .vbar:not(.scrubbing) { opacity: 0; pointer-events: none; }
/* Centre flash on every play / pause toggle: the glyph of the action just
   taken, gone in half a second, never a permanent overlay. Under reduced
   motion it fades without the scale (the guard at the end of this file). */
.vc-flash {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 76px;
    margin: -38px 0 0 -38px; border-radius: 50%;
    background: rgba(4, 6, 10, .62); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; z-index: 4;
}
.vc-flash svg { width: 38px; height: 38px; display: block; }
.vc-flash.show { animation: vc-flash .55s ease-out forwards; }
@keyframes vc-flash {
    0% { opacity: .92; transform: scale(.82); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes vc-flash-still {
    0% { opacity: .92; }
    100% { opacity: 0; }
}
.vbar input[type=range] {
    flex: 1;
    min-width: 0;
    accent-color: var(--accent);
    height: 4px;
    cursor: pointer;
}
/* [type=range] carries class-level specificity, so the override must
   restate it or the volume slider inherits flex:1 and fills the bar. */
.vbar input[type=range].vc-vol { flex: 0 0 64px; width: 64px; }
.vc-scrubwrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.vc-marks {
    position: absolute;
    left: 8px; right: 8px;
    top: 50%;
    height: 0;
    pointer-events: none;
}
.vc-marks span {
    position: absolute;
    top: -5px;
    width: 3px;
    height: 10px;
    margin-left: -1px;
    border-radius: 1px;
    background: #ff5a5a;
    box-shadow: 0 0 3px rgba(0, 0, 0, .6);
}
.vbar span {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    color: var(--text);
    white-space: nowrap;
}
.vc-btn {
    background: none;
    border: none;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}
.vc-btn:hover { color: var(--text); }
.vc-speed-wrap { position: relative; display: inline-flex; }
.vc-speed {
    flex: 0 0 auto; border: 0; background: none; color: var(--text);
    font: 600 11px "IBM Plex Sans", system-ui, sans-serif; cursor: pointer;
    padding: 2px 6px; border-radius: 4px; min-width: 30px;
}
.vc-speed:hover { background: rgba(255, 255, 255, .12); }
/* Solid, no blur: the menu floats over the playing video (same rule as the
   ability picker). Positioned inside the bar so it survives fullscreen. */
.vc-speed-menu {
    position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 2px; min-width: 70px;
    background: var(--panel); border: 1px solid var(--glass-edge, var(--edge));
    border-radius: 10px; padding: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.vc-speed-menu.hidden { display: none; }
.vc-speed-menu button {
    background: none; border: 0; color: var(--text);
    font: 600 11.5px "IBM Plex Sans", system-ui, sans-serif; text-align: left;
    padding: 6px 12px; border-radius: 7px; cursor: pointer;
}
.vc-speed-menu button:hover { background: var(--panel-2); }
.vc-speed-menu button.active { background: var(--accent); color: var(--accent-ink); }
#dvr-live {
    background: none;
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    cursor: pointer;
    letter-spacing: .04em;
    white-space: nowrap;
}
#dvr-live:hover { background: var(--accent); color: var(--accent-ink); }
#dvr-live.at-edge { background: #ef4444; border-color: #ef4444; color: #fff; }

/* docked timeline */
.cc-timeline-panel {
    /* Deliberately SOLID: sticky lane labels must match their ground
       (review find 2026-08-31). */
    border-top: 1px solid var(--glass-edge, var(--edge));
    background: var(--panel);
    flex: none;
    display: flex;
    flex-direction: column;
    max-height: 38vh;
    position: relative;
}
.cc-timeline-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
}
#timeline {
    overflow: auto;
    min-height: 60px;
    padding: 0 16px 12px;
    cursor: grab;
}
#timeline.panning { cursor: grabbing; user-select: none; }
.tl-empty { color: var(--dim); font-size: 12px; padding: 8px 0; }
.tl-row { display: flex; align-items: center; min-height: 24px; }
.tl-label {
    flex: 0 0 150px;
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
    position: sticky;
    left: 0;
    background: var(--panel);
    z-index: 2;
    padding-right: 8px;
}
.tl-label.death-label { color: #ff5a5a; font-weight: 600; }
.tl-icon { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.tl-lane {
    position: relative;
    height: 16px;
    background: var(--panel-2);
    border-radius: 3px;
    flex: none;
}
.tl-dot {
    position: absolute;
    top: 3px;
    width: 8px; height: 10px;
    margin-left: -4px;
    border-radius: 2px;
    background: var(--accent);
    cursor: pointer;
}
.tl-dot:hover { background: var(--accent-2); }
.tl-dot.death { background: #ff5a5a; }
.tl-dot.death:hover { background: #ff8a8a; }
.tl-dot.friendly { background: var(--ok); }
.tl-dot.friendly:hover { background: var(--ok); }
/* channel bars: anchored at cast start, width = channel length */
.tl-dot.chan { margin-left: 0; border-radius: 3px; opacity: .9; }
.tl-ruler {
    position: relative;
    height: 16px;
    flex: none;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 9.5px;
    color: var(--dim);
}
.tl-ruler span { position: absolute; top: 2px; }

/* ability picker -- opens upward-left from the abilities button, over the
   stage, so it never buries the timeline it's editing */
.subpanel {
    position: absolute;
    right: 12px;
    bottom: calc(100% + 6px);
    width: 500px;
    max-width: calc(100vw - 24px);
    /* also capped by the room actually above the timeline panel, so short
       windows don't push the panel past the viewport top */
    max-height: max(200px, min(64vh, 600px, calc(100vh - 380px)));
    /* Solid and unblurred: floats over the playing stage (review find
       2026-08-31). */
    background: var(--panel);
    border: 1px solid var(--glass-edge, var(--edge));
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    z-index: 20;
    overflow: hidden;
}
.pick-search {
    margin: 8px;
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 8px;
}
.pick-search:focus { outline: none; border-color: var(--accent); }
.pick-list {
    overflow-y: auto;
    min-height: 0;
    padding: 0 8px 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    /* explicit row height: items with overflow:hidden have a zero minimum,
       and the browser squeezes implicit rows to slivers on long lists */
    grid-auto-rows: minmax(28px, auto);
    column-gap: 10px;
    align-content: start;
}
.pick-head, .pick-note { grid-column: 1 / -1; }
.pick-head {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--dim);
    padding: 9px 4px 4px;
}
.pick-note { color: var(--dim); font-size: 12px; padding: 4px; }
.pick-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 4px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.pick-list label:hover { background: var(--panel-2); }
.pick-icon { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.pick-foot {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--edge);
}
.pick-foot button {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--edge);
    border-radius: 6px;
    color: var(--dim);
    font-size: 11px;
    padding: 4px 0;
    cursor: pointer;
}
.pick-foot button:hover { color: var(--text); }

/* WoW class colors (WCL subType names) -- tooltip names ride on classes
   because the page CSP blocks inline style attributes in innerHTML. */
.wcls-DeathKnight { color: #c41e3a; }
.wcls-DemonHunter { color: #a330c9; }
.wcls-Druid { color: #ff7c0a; }
.wcls-Evoker { color: #33937f; }
.wcls-Hunter { color: #aad372; }
.wcls-Mage { color: #3fc7eb; }
.wcls-Monk { color: #00ff98; }
.wcls-Paladin { color: #f48cba; }
.wcls-Priest { color: #ffffff; }
.wcls-Rogue { color: #fff468; }
.wcls-Shaman { color: #0070dd; }
.wcls-Warlock { color: #8788ee; }
.wcls-Warrior { color: #c69b6d; }

/* tooltip */
#tl-tip {
    position: fixed;
    z-index: 50;
    max-width: 340px;
    background: var(--glass-panel, var(--panel));
    border: 1px solid var(--glass-edge, var(--edge));
    border-radius: 10px;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    padding: 9px 11px;
    font-size: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    pointer-events: none;
}
.tip-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.tip-head .t { color: var(--dim); font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 400; }
.tip-death { color: #ff5a5a; }
.tip-kb { margin: 2px 0 4px; }
.tip-kb.dim, .dim { color: var(--dim); font-weight: 400; }
.tip-icon { width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 3px; }
.tip-rows { border-top: 1px solid var(--edge); margin-top: 5px; padding-top: 5px; }
.tip-row { display: flex; gap: 8px; color: var(--text); font-size: 11.5px; line-height: 1.5; }
.tip-row .dt { flex: 0 0 34px; color: var(--dim); font-family: "IBM Plex Sans", system-ui, sans-serif; }
.tip-row .sp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-row .amt { font-family: "IBM Plex Sans", system-ui, sans-serif; }

/* ---------- right rail ---------- */
.cc-rlabel { padding: 14px 16px 8px; }
.cc-rscroll { padding: 0 12px 12px; }
.cc-rlabel-in { padding: 14px 4px 6px; }
.cc-story {
    margin: 0 12px;
    background: var(--glass-panel-2, var(--panel));
    border: 1px solid var(--edge);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
}
.cc-deaths { display: flex; flex-direction: column; gap: 8px; }
.cc-death {
    background: var(--glass-panel-2, var(--panel));
    border: 1px solid var(--edge);
    border-left: 3px solid #ff5a5a;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
}
.cc-death:hover { border-color: var(--edge); border-left-color: #ff8a8a; }
.cc-death-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    font-size: 13px;
}
.cc-death-kb {
    color: var(--text);
    font-size: 12px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cc-kb-icon { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.cc-spec-icon { width: 16px; height: 16px; border-radius: 3px; flex: none; margin-right: 3px; }
.cc-death-rows {
    color: var(--dim);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.5;
}
.cc-death-row { display: flex; align-items: center; gap: 5px; }
.cc-row-icon { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.cc-right .cc-empty { color: var(--dim); font-size: 12px; }

/* ---------- narrow screens: stack, rails become sections ---------- */
@media (max-width: 1080px) {
    .cc-body { overflow: auto; }
    .cc-grid {
        grid-template-columns: 1fr;
        /* content-sized; the nav owns the top of the viewport */
        min-height: 0;
    }
    .cc-left { order: 1; border-right: none; border-bottom: 1px solid var(--glass-edge, var(--edge)); }
    .cc-center { order: 0; }
    .cc-right { order: 2; border-left: none; border-top: 1px solid var(--glass-edge, var(--edge)); }
    .cc-scroll { overflow: visible; }
    .video-shell { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
    .cc-timeline-panel { max-height: none; }
}

/* --- timeline crosshair, pin, right-click menu, picker close --- */
#timeline { position: relative; }
.tl-cursor {
    position: absolute; top: 0; width: 1px;
    background: var(--dim); opacity: .5;
    pointer-events: none; z-index: 6;
}
/* The pin is deliberately fixed brand green (user-directed), independent
   of the accent, so it reads the same on every raider's theme. */
.tl-pinline {
    position: absolute; top: 0; width: 2px;
    background: #10b981; opacity: .95;
    pointer-events: none; z-index: 6;
}
.vc-marks span.pin { background: #10b981; width: 3px; }
.tl-menu {
    position: fixed; z-index: 400; min-width: 210px;
    background: var(--glass-panel, var(--panel)); border: 1px solid var(--glass-edge, var(--edge));
    border-radius: 12px; padding: 4px;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.tl-menu-item {
    padding: 7px 10px; border-radius: 5px; cursor: pointer;
    color: var(--text); font-size: 12px; user-select: none;
}
.tl-menu-item:hover { background: var(--panel-2); }
#ability-picker { position: relative; }
.pick-close {
    position: absolute; top: 8px; right: 8px;
    width: 24px; height: 24px; line-height: 24px; text-align: center;
    border-radius: 6px; color: var(--dim); cursor: pointer; font-size: 12px;
}
.pick-close:hover { color: var(--text); background: var(--panel-2); }
/* The X floats above the search, never over it (field screenshot). */
#ability-picker .pick-search { margin-top: 30px; }

/* --- Mica Glass motion (0.5.0) --- */
.cc-mini, .cc-chip, .cc-povpill, .vc-btn, .vc-speed, .tl-menu-item, .cc-rows li {
    transition: background-color .13s ease, border-color .13s ease,
                color .13s ease, box-shadow .13s ease; }
.vc-btn svg { width: 16px; height: 16px; display: block; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; }
.cc-mini svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Timeline lanes are click-to-seek (0.5.0). */
.tl-lane { cursor: crosshair; }

/* Share-moment button (0.5.0): sits at the right of the POV strip. */
.cc-share { margin-left: auto; }
.cc-share.copied { border-color: var(--accent); color: var(--accent-text); }

/* Saved clips (0.5.0): make-clip dialog + clip rows. */
.clip-dialog {
    position: fixed; z-index: 500; width: 320px; max-width: calc(100vw - 24px);
    background: var(--panel); border: 1px solid var(--glass-edge, var(--edge));
    border-radius: 12px; padding: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: 10px;
}
.clip-dialog h4 { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.clip-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); }
.clip-dialog input {
    background: var(--panel-2); border: 1px solid var(--edge); border-radius: 8px;
    color: var(--text); font: 13px "IBM Plex Sans", system-ui, sans-serif; padding: 7px 9px;
}
.clip-dialog input:focus { outline: none; border-color: var(--accent); }
.clip-range { display: flex; gap: 8px; }
.clip-range label { flex: 1; }
.clip-dialog-actions { display: flex; gap: 8px; margin-top: 2px; }
.clip-dialog-actions .cc-mini { flex: 1; text-align: center; }
.clip-dialog-actions .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.clip-dialog-msg { font-size: 11.5px; color: var(--dim); min-height: 14px; }
.clip-dialog-msg.err { color: var(--rec, #f87171); }
.clip-dialog-msg.ok { color: var(--ok); }
/* viewer presence: eye+count on stream rows and the stage head */
.watch-count {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: var(--accent); flex: none;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/* clip-generation progress bar (browser handles download progress natively) */
.dl-progress { display: flex; align-items: center; gap: 8px; }
.dl-bar { flex: 1; height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.dl-bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .1s linear; }
.dl-pct { font-size: 11px; color: var(--dim); min-width: 56px; text-align: right; white-space: nowrap; }
.dl-progress.indet .dl-bar > i { width: 40%; transition: none; animation: dl-indet 1.1s ease-in-out infinite; }
@keyframes dl-indet { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.clip-row { flex-wrap: nowrap !important; }
.clip-row .cc-name { font-size: 12.5px; }
.clip-row .clip-x { flex: none; color: var(--dim); cursor: pointer; padding: 0 4px; border-radius: 4px; }
.clip-row .clip-x:hover { color: var(--rec, #f87171); }
.clip-public { flex-direction: row !important; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; }
.clip-public input { width: 14px; height: 14px; accent-color: var(--accent); }
.clip-tag { flex: none; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; margin-left: auto; }
.clip-tag.pub { color: var(--accent-text); border: 1px solid var(--accent); }
.clip-tag.priv { color: var(--dim); border: 1px solid var(--edge); }
.clip-row .clip-x { margin-left: 4px; }

.clip-range { align-items: flex-end; }
.clip-range label { flex: none; }
.clip-range input { width: 76px; }

/* 4-way split view */
.split-grid {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 2px; background: #000;
}
/* Two viewpoints: side by side, the two spare tiles out of the flow. */
.split-grid.two { grid-template-rows: 1fr; }
.split-grid.two .split-tile:nth-child(n+3) { display: none; }
.split-tile { position: relative; background: #000; cursor: pointer; overflow: hidden; }
.split-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-grid.fit .split-tile video { object-fit: contain; }
.split-tile.audio .split-label { background: var(--accent); color: var(--accent-ink); }
.split-tile.empty { cursor: default; }
.split-tile.audio { outline: 2px solid var(--accent); outline-offset: -2px; }
.split-label {
    position: absolute; left: 8px; top: 6px;
    font-size: 11px; font-weight: 600; color: #fff;
    background: rgba(0,0,0,.55); border-radius: 4px; padding: 2px 7px;
    pointer-events: none;
}
.vc-hint { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
#cc-split-btn.active, #split-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* timeline playhead: where the VOD is right now */
.tl-playhead {
    position: absolute; top: 0; width: 2px; margin-left: -1px;
    background: var(--accent);
    box-shadow: 0 0 6px rgba(var(--accent-rgb, 16, 185, 129), .8);
    pointer-events: none; z-index: 8;
}
.tl-playhead::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 9px; height: 9px; margin-left: -4.5px;
    background: var(--accent); border-radius: 50%;
}

/* ability markers firing as the playhead sweeps past them */
/* Animate filter + shadow only: the dots carry their own centering transform
   (and channel bars a width), so animating transform here shifted every dot
   and ballooned the bars. */
@keyframes tl-fire {
    0%   { filter: brightness(1);   box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 16, 185, 129), .0); }
    18%  { filter: brightness(2.4); box-shadow: 0 0 12px 4px rgba(var(--accent-rgb, 16, 185, 129), .95); }
    100% { filter: brightness(1);   box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 16, 185, 129), .0); }
}
.tl-dot.firing { animation: tl-fire .9s ease-out; z-index: 7; }
/* a channel keeps a steady glow for as long as it is going off */
.tl-dot.chan.casting {
    box-shadow: 0 0 9px 2px rgba(var(--accent-rgb, 16, 185, 129), .7);
    filter: brightness(1.5);
}
.tl-label.firing {
    color: var(--text);
    text-shadow: 0 0 8px rgba(var(--accent-rgb, 16, 185, 129), .9);
    transition: none;
}
.tl-label.firing img { filter: brightness(1.6) drop-shadow(0 0 5px rgba(var(--accent-rgb, 16, 185, 129), .9)); }

/* a night assembled from more than one raider's log */
.night-logs {
    flex: none; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 4px;
    background: var(--accent-soft, rgba(16, 185, 129, .14));
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Night rows: the date must never be what gets clipped. Let the zone name
   take the slack and truncate instead, and keep the row on one line. */
li[data-key^="night-"] { flex-wrap: nowrap; }
li[data-key^="night-"] .cc-name { flex: 0 0 auto; overflow: visible; }
li[data-key^="night-"] .cc-rmeta {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Raid / Mythic+ switch under the calendar: the rail lists one kind of
   session at a time, since a night of keys is not a night of raid. */
.night-mode { display: flex; gap: 4px; padding: 0 12px 8px; }
.night-mode button {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--edge);
    border-radius: 999px;
    color: var(--dim);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 5px 8px;
    cursor: pointer;
}
.night-mode button:hover { color: var(--text); }
.night-mode button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* ---------- collapsible panels ----------

Three panels fold away: the two rails horizontally (the grid column itself
animates) and the timeline vertically. The timeline uses the 1fr -> 0fr
grid-rows trick rather than a max-height guess, which cannot ease correctly
without knowing the content height.

A collapsed rail keeps a 26px strip rather than going to zero, so the arrow
that brings it back is always somewhere to aim at.
*/
.cc-grid {
    transition: grid-template-columns .28s cubic-bezier(.4, 0, .2, 1);
}
.cc-grid.left-collapsed  { grid-template-columns: 26px minmax(0, 1fr) 300px; }
.cc-grid.right-collapsed { grid-template-columns: 252px minmax(0, 1fr) 26px; }
.cc-grid.left-collapsed.right-collapsed { grid-template-columns: 26px minmax(0, 1fr) 26px; }
/* Live mode is a TWO column grid (the right rail is display:none), and the
   three rules above sit later in the file than .cc-grid.live-mode at equal
   specificity, so without these they would re-introduce a third track and
   leave a dead 26px column on /live. */
.cc-grid.live-mode.left-collapsed  { grid-template-columns: 26px minmax(0, 1fr); }
.cc-grid.live-mode.right-collapsed { grid-template-columns: 252px minmax(0, 1fr); }
.cc-grid.live-mode.left-collapsed.right-collapsed { grid-template-columns: 26px minmax(0, 1fr); }

.cc-left, .cc-right { position: relative; overflow: hidden; }
.cc-left  > *:not(.panel-toggle),
.cc-right > *:not(.panel-toggle) {
    transition: opacity .16s ease, visibility .16s ease;
}
.cc-grid.left-collapsed  .cc-left  > *:not(.panel-toggle),
.cc-grid.right-collapsed .cc-right > *:not(.panel-toggle) {
    opacity: 0;
    pointer-events: none;
    /* Without this the hidden controls keep their place in the tab order and in
       the accessibility tree: invisible things a keyboard still walks through. */
    visibility: hidden;
}

.panel-toggle {
    position: absolute; z-index: 8; top: 50%;
    width: 22px; height: 58px; padding: 0;
    display: grid; place-items: center;
    background: var(--panel-2);
    /* A border on ALL FOUR sides. Dropping one to fuse the pill to the panel
       edge shifted the content box by half a border, which put the chevron
       0.4px off centre: small, and visible. */
    border: 1px solid var(--edge);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .34);
    /* Nearly out of the way at rest, full strength the moment the pointer is
       actually on it (user-directed). Ink stays full-strength so the little
       opacity it does have still reads as an arrow rather than a smudge. */
    color: var(--text);
    cursor: pointer;
    opacity: .16;
    transform: translateY(-50%);
    transition: opacity .18s ease, background-color .18s ease,
                border-color .18s ease, color .18s ease,
                box-shadow .18s ease;
}
/* Only the arrow itself brings it up (user-directed). Hovering anywhere on the
   panel used to light it, which left three arrows glowing whenever the pointer
   crossed the workspace. */
.panel-toggle:hover {
    opacity: 1;
    background: rgba(var(--accent-rgb), .2);
    border-color: var(--accent);
    color: var(--accent-text, var(--text));
    box-shadow: 0 3px 14px rgba(var(--accent-rgb), .3);
}
/* Inset, because the rails are overflow: hidden and would clip an outset ring. */
.panel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; opacity: 1; }
/* A collapsed panel is nothing BUT its arrow, so that one is never faint. */
.cc-grid.left-collapsed  .pt-left,
.cc-grid.right-collapsed .pt-right,
.cc-timeline-panel.collapsed .pt-down { opacity: 1; }

/* Inset from the rail edge so the pill reads as a floating control rather
   than a tab welded to the side. 2px keeps it inside the collapsed rail. */
.pt-left  { right: 2px; }
.pt-right { left: 2px; }
/* Centred in the bar rather than parked at the end: on a full-width fold the
   middle is where the eye goes, and when the panel is collapsed the control
   row is gone, so the arrow is the only thing out there. Absolute so it is a
   true centre, not a centre between whatever happens to sit either side. */
.cc-timeline-head { position: relative; }
.pt-down {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 24px;
    border-radius: 999px;
    z-index: 9;
}

/* One chevron asset, rotated. The rotation IS the open/close animation. */
.pt-chev { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.pt-right .pt-chev { transform: rotate(180deg); }
.pt-down  .pt-chev { transform: rotate(-90deg); }
.cc-grid.left-collapsed  .pt-left  .pt-chev { transform: rotate(180deg); }
.cc-grid.right-collapsed .pt-right .pt-chev { transform: rotate(0deg); }
.cc-timeline-panel.collapsed .pt-down .pt-chev { transform: rotate(90deg); }

.tl-collapse {
    display: grid;
    grid-template-rows: 1fr;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1);
}
.tl-collapse > * { min-height: 0; }
.cc-timeline-panel.collapsed .tl-collapse { grid-template-rows: 0fr; }
/* A 0fr track still floors at the item's min-content height, so the lane area
   has to give up BOTH its min-height and its vertical padding. Without the
   padding the fold stopped 12px short and left a sliver under the header. */
#timeline { transition: padding .28s cubic-bezier(.4, 0, .2, 1); }
.cc-timeline-panel.collapsed #timeline { min-height: 0; padding-top: 0; padding-bottom: 0; }

/* Collapsed means HIDDEN, not "header still sitting there": the control row
   folds away with the lanes and only the title and its arrow remain, so the
   stage gets the panel's whole height back. The cc-flex spacer stays, which
   keeps the arrow at the same x it had while open instead of jumping left. */
.cc-timeline-head { transition: padding .28s cubic-bezier(.4, 0, .2, 1); }
.cc-timeline-panel.collapsed .cc-timeline-head { padding-top: 4px; padding-bottom: 4px; }
.cc-timeline-panel.collapsed .cc-timeline-head .cc-mini { display: none; }
/* The picker floats over the stage from a sibling of the head, so folding
   the panel would leave it open with its only close button hidden. */
.cc-timeline-panel.collapsed .subpanel { display: none; }
/* The title carries its own generous padding for the open layout, which would
   otherwise keep the collapsed bar taller than the arrow inside it. */
.cc-timeline-head .cc-label {
    transition: padding .28s cubic-bezier(.4, 0, .2, 1);
    /* The arrow is centred, so the title must stop short of the middle. Measured:
       "TIMELINE - THE LOST EXPLORERS (12:34)" reached it at 1120px without this. */
    min-width: 0;
    max-width: calc(50% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-timeline-panel.collapsed .cc-timeline-head .cc-label {
    padding-top: 0; padding-bottom: 0; opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    /* Selectors must match the ones being cancelled: `.cc-left > *` is a point
       LESS specific than `.cc-left > *:not(.panel-toggle)` and lost to it. */
    .cc-grid, .tl-collapse, .pt-chev, #timeline, .panel-toggle,
    .cc-timeline-head, .cc-timeline-head .cc-label,
    .cc-left > *:not(.panel-toggle),
    .cc-right > *:not(.panel-toggle) { transition: none; }
    .vc-flash.show { animation-name: vc-flash-still; }
}

/* Single-column layout: the rails stack under the stage, so there is no
   column to collapse and the edge arrows would point at nothing. */
@media (max-width: 1080px) {
    /* PRE-EXISTING, found while testing the collapse (2026-09-01): .cc-grid
       .live-mode (0,2,0) outranks the plain .cc-grid single-column rule above
       (0,1,0), so /live never stacked on a phone. The stage landed in the 252px
       track because .cc-center has order 0, giving a 252px video and a 648px
       rail at 900px wide. */
    .cc-grid.live-mode,
    .cc-grid.left-collapsed,
    .cc-grid.right-collapsed,
    .cc-grid.left-collapsed.right-collapsed,
    .cc-grid.live-mode.left-collapsed,
    .cc-grid.live-mode.right-collapsed,
    .cc-grid.live-mode.left-collapsed.right-collapsed { grid-template-columns: 1fr; }
    .cc-grid.left-collapsed  .cc-left  > *:not(.panel-toggle),
    .cc-grid.right-collapsed .cc-right > *:not(.panel-toggle) { opacity: 1; pointer-events: auto; }
    .panel-toggle.pt-left, .panel-toggle.pt-right { display: none; }
}


/* The Review page no longer lists who is live (user-directed 2026-09-01): the
   LIVE badge keeps the count. /live is the streams page and MUST keep the list,
   so this is scoped to the review grid; the live-mode rule above already
   forces the section visible there with !important. */
.cc-grid:not(.live-mode) #live-section { display: none; }

/* Death cards that lead to the dead raider's own footage carry a POV tag
   (0.5.28); the others seek the current angle and say so in their title. */
.cc-death.has-pov .cc-death-head::after {
    content: 'POV'; font-size: 9px; font-weight: 700; letter-spacing: .08em;
    color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
    padding: 1px 5px; line-height: 1.2; opacity: .75; align-self: center;
}
.cc-death.has-pov:hover .cc-death-head::after { opacity: 1; }