/* Replay map in Review: the frame around the canvas map-view.js draws on.
   Shared by the app and the web review; the two copies stay byte-identical.
   The map surface is a fixed dark colour on every theme (the canvas paints
   the same colour), so only the head row follows the page's variables.
   In the app, the generic button rule in styles.css needs :not(.map-tog)
   or it restyles the toggles. */
.map-wrap { flex: none; }
/* the head's padding and label type come from the page's own label classes */
.map-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }   /* a narrow rail: the buttons wrap, never clip */
.map-time { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text, #e7e9f0); }
.map-box {
    position: relative; aspect-ratio: 1; max-height: 60vh;
    margin: 0 12px 10px; border-radius: 8px; overflow: hidden; background: #0b0d10;
}
.map-box canvas { display: block; width: 100%; height: 100%; }
.map-msg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 16px; text-align: center; font-size: 13px; line-height: 1.4;
    /* fixed like the surface: the app's Light theme sets --dim dark (review 2026-10-08) */
    color: #8b90a3; background: rgba(11, 13, 16, .78);
}
.map-tog {
    font: inherit; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--edge, #232838); background: transparent; color: var(--dim, #8b90a3); cursor: pointer;
}
.map-tog:hover { color: var(--text, #e7e9f0); }
.map-tog[aria-pressed="true"] {
    color: var(--text, #e7e9f0); border-color: var(--accent, #10b981);
    background: rgba(var(--accent-rgb, 16, 185, 129), .16);
}
.map-tog:focus-visible { outline: 2px solid var(--accent, #10b981); outline-offset: 1px; }
/* Zoomed in, a drag pans the map. */
/* touch pans too while zoomed; at the whole pull a touch scrolls the panel */
.map-box.map-zoomed canvas { cursor: grab; touch-action: none; }
.map-box.map-panning canvas { cursor: grabbing; }
/* Expanded: the map over the whole window. The glue moves the frame to the
   page itself while it is open (a glass panel's backdrop-filter would hold a
   fixed box inside the panel). --map-full-top keeps the app's title bar in
   view (0 on the web). Below the hover card (z-index 50 web, 100 app). */
.map-wrap.map-full:not(.hidden) {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--map-full-top, 0px); z-index: 45;
    /* the side column holds the docked stage: wide enough for its own control
       bar (play, scrubber, time, sound, speed, Clip, fullscreen; review 2026-10-09) */
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 32vw, 560px); grid-template-rows: auto minmax(0, 1fr);
    background: var(--bg, #0b0d10);
}
.map-full .map-head { grid-column: 1 / -1; }
.map-full .map-box { grid-column: 1; grid-row: 2; min-height: 0; aspect-ratio: auto; max-height: none; margin: 0 12px 16px 16px; }
/* Expanded, a side panel (owner 2026-10-09): the stage docks over the slot
   (the glue fixes the stage's own shell there), then the pull's events and its
   raiders, each list scrolling on its own. The lists keep the map's fixed dark
   surface on every theme: names are drawn in class colours. */
.map-side { display: none; }
.map-full .map-side { display: flex; flex-direction: column; gap: 6px; grid-column: 2; grid-row: 2; min-height: 0; margin: 0 16px 16px 0; }
.map-slot { flex: none; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; }
.map-side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.map-ev-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.map-side-hint { margin-left: auto; font-size: 11px; color: var(--dim, #8b90a3); }
.map-events, .map-raiders {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid #232838; border-radius: 8px; background: #0b0d10;
}
.map-events { flex: 3 1 0; }
.map-raiders { flex: 2 1 0; }
.map-ev, .map-raider {
    display: flex; align-items: baseline; gap: 6px; padding: 4px 8px 4px 6px;
    font-size: 12px; line-height: 1.35; color: #e7e9f0; cursor: pointer; border-left: 2px solid transparent;
}
.map-ev:hover, .map-raider:hover { background: rgba(255, 255, 255, .05); }
.map-ev:focus-visible, .map-raider:focus-visible { outline: 2px solid #10b981; outline-offset: -2px; }
.map-ev.bad { border-left-color: #ff4d4d; }
.map-ev.now { background: rgba(16, 185, 129, .18); }
.map-ev-time { flex: none; width: 3.2em; font-variant-numeric: tabular-nums; color: #8b90a3; }
.map-ev-who { flex: none; font-weight: 600; }
.map-ev-what { flex: 0 1 auto; }
.map-ev-detail { flex: 1 1 auto; min-width: 0; text-align: right; color: #8b90a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-ev-empty { padding: 10px; font-size: 12px; color: #8b90a3; }
/* A row's Link (owner 2026-10-09): shown on hover or focus, always where
   there is no hover (touch); green while it says Copied. */
.map-ev-link {
    flex: none; margin-left: auto; padding: 0 4px; border-radius: 4px; font-size: 11px; color: #8b90a3;
    opacity: 0; cursor: pointer;
}
.map-ev:hover .map-ev-link, .map-ev:focus-within .map-ev-link, .map-ev-link.copied, .map-ev-link.failed { opacity: 1; }
.map-ev-link:hover { color: #e7e9f0; background: rgba(255, 255, 255, .08); }
.map-ev-link:focus-visible { outline: 2px solid #10b981; outline-offset: -1px; }
.map-ev-link.copied { color: #10b981; }
.map-ev-link.failed { color: #ff6b6b; }
/* touch: no hover to reveal it (a touch laptop's touchpad reports hover, so any coarse pointer) */
@media (hover: none), (any-pointer: coarse) { .map-ev-link { opacity: 1; } }
.map-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-raider { align-items: center; }
.map-raider.on { background: rgba(16, 185, 129, .18); border-left-color: #10b981; }
.map-raider .cc-roleicon { flex: none; width: 14px; height: 14px; }
.map-raider-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-raider-meta { flex: none; font-size: 11px; color: #8b90a3; }
/* The panel's modes (this pull, or the night) and the pull's half, which
   shares the column the way the panel did before it had modes. */
.map-side-modes { display: flex; gap: 4px; }
/* The PoV picker above the docked video, at its left (owner 2026-10-09).
   Fixed dark like the lists; set in full so the app's generic select rule
   (radius, padding, font) does not restyle it. */
.map-side-pov { display: flex; align-items: center; gap: 6px; min-width: 0; }
.map-side-pov .cc-label { padding: 0; margin: 0; }   /* the app's label rule adds a bottom margin */
.map-pov {
    flex: 0 1 auto; min-width: 0; max-width: 100%;
    font: 12px system-ui, "Segoe UI", sans-serif; color: #e7e9f0; background: #0b0d10;
    border: 1px solid #232838; border-radius: 6px; box-shadow: none; padding: 3px 6px; cursor: pointer;
}
.map-pov:focus { box-shadow: none; }   /* over the app's select:focus ring */
.map-pov:focus-visible { outline: 2px solid #10b981; outline-offset: 1px; }
.map-side-pull { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-height: 0; }
/* The night: one list that scrolls as a whole, the column heads held at its
   top; a row opens its moments under it. Same fixed dark surface. */
.map-night {
    flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scroll-padding-top: 26px;   /* a focused row never sits under the column heads */
    border: 1px solid #232838; border-radius: 8px; background: #0b0d10; color: #e7e9f0; font-size: 12px;
}
.map-night-status { padding: 6px 8px; font-size: 11px; color: #8b90a3; }
.map-night-raid { padding: 4px 8px 4px 6px; line-height: 1.35; cursor: pointer; border-left: 2px solid #ff4d4d; }
.map-night-row {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 42px); align-items: center; gap: 4px;   /* px: the heads' smaller type keeps the columns */
    padding: 4px 8px 4px 6px; line-height: 1.35; cursor: pointer; border-left: 2px solid transparent;
}
.map-night-head { position: sticky; top: 0; z-index: 1; background: #0b0d10; color: #8b90a3; font-size: 11px; cursor: default; }
.map-night-row:not(.map-night-head):hover, .map-night-raid:hover { background: rgba(255, 255, 255, .05); }
.map-night-row:focus-visible, .map-night-raid:focus-visible { outline: 2px solid #10b981; outline-offset: -2px; }
.map-night-row.on, .map-night-raid.on { background: rgba(16, 185, 129, .18); border-left-color: #10b981; }
.map-night-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.map-night-name .cc-roleicon { flex: none; width: 14px; height: 14px; }
.map-night-who { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-night-n { text-align: right; font-variant-numeric: tabular-nums; }
.map-night-n.bad { color: #ff6b6b; font-weight: 600; }
.map-night-moments { padding: 0 0 4px 10px; background: rgba(255, 255, 255, .03); }
.map-night-pull { flex: none; display: inline-flex; gap: 3px; max-width: 11em; min-width: 0; color: #8b90a3; white-space: nowrap; }
.map-night-boss { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.map-night-k { flex: none; font-variant-numeric: tabular-nums; }
/* Raider history (owner 2026-10-09): raiders down, the team's last nights
   across, a cell the metric's rate per pull, coloured green to yellow to red
   against the table's highest (set per cell). The night list's surface; each
   row's columns set from the night
   count (shrinking under 40 px on a phone). */
.map-side-hist { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-height: 0; }
.map-hist-row { display: grid; align-items: center; gap: 3px; padding: 4px 8px 4px 6px; line-height: 1.35; border-left: 2px solid transparent; }
.map-hist-n { min-width: 0; padding: 1px 0; border-radius: 4px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.map-hist-n.unknown { color: #8b90a3; }
.map-night-head .map-hist-n { font-size: 10px; }   /* "Sep 30" in a 32 px night */
.map-history { overflow-x: auto; }
/* The boss picked (owner 2026-10-09), and a raider's drilldown under their
   row: a night's abilities, then its moments (watch here, or open on the
   website for another night). */
.map-boss { max-width: 15em; }
.map-hist-who { cursor: pointer; border-radius: 3px; }
.map-hist-who:focus-visible { outline: 2px solid #10b981; outline-offset: 1px; }
.map-hist-row.on { background: rgba(16, 185, 129, .12); border-left-color: #10b981; }
.map-hist-drill-in { padding: 2px 4px 6px 12px; background: rgba(255, 255, 255, .03); }
.map-hist-night { padding: 5px 4px 1px; font-size: 11px; color: #8b90a3; }
.map-hist-go { flex: none; margin-left: auto; font-size: 11px; color: #10b981; }
/* History's Raiders | Mechanics switch, and a mechanic's kind under its name */
.map-hist-views { display: flex; gap: 4px; }
.map-mech-kind { flex: none; font-size: 11px; color: #8b90a3; }
/* A narrow window (a phone): the panel under the map, nothing scrolls the frame
   (the docked stage follows the slot only while the frame stays put). */
@media (max-width: 760px) {
    .map-wrap.map-full:not(.hidden) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.4fr); }
    .map-full .map-box { grid-column: 1; grid-row: 2; margin: 0 12px 8px; }
    .map-full .map-side { grid-column: 1; grid-row: 3; margin: 0 12px 12px; }
    .map-night-row { grid-template-columns: minmax(0, 1fr) repeat(5, 36px); gap: 2px; }   /* names keep room on a phone */
}