/* ============================================================================
   Solway AV — design system
   Deep navy + warm amber. Manrope (display) / Inter (text). 4px spacing grid.
   Mobile-first. Layered on top of Bootstrap/Blazorise (used only by legacy
   modal components); all new staff screens use these classes directly.
   ========================================================================== */

:root {
    --navy-900: #081729;
    --navy-800: #0B1F3A;
    --navy-700: #12294A;
    --navy-600: #16335C;
    --navy-500: #1C3F70;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    --ink: #EAF0F8;
    --ink-dim: #C2D0E6;
    --muted: #8EA1C0;

    --amber: #E8A33D;
    --amber-600: #D08A22;
    --amber-soft: rgba(232, 163, 61, 0.14);

    --success: #34C77B;
    --success-bg: rgba(52, 199, 123, 0.14);
    --danger: #FF6B6B;
    --danger-bg: rgba(255, 107, 107, 0.14);
    --info: #5AA0FF;
    --info-bg: rgba(90, 160, 255, 0.14);
    --warn: var(--amber);

    --r-xs: 6px;
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    --shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.38);

    --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Manrope", var(--font-text);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    color: var(--ink);
    background: radial-gradient(1200px 600px at 80% -10%, var(--navy-600), var(--navy-800) 60%) fixed, var(--navy-800);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
a { color: var(--amber); text-decoration: none; }
.muted { color: var(--muted); }
.dim { color: var(--ink-dim); }

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

.app-bar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    background: rgba(8, 23, 41, 0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.app-nav { display: flex; gap: var(--sp-1); margin-left: var(--sp-5); flex-wrap: wrap; }
.app-nav a {
    color: var(--ink-dim); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    font-weight: 600; font-size: 0.95rem; transition: background .15s, color .15s;
}
.app-nav a:hover { background: var(--navy-600); color: var(--ink); }
.app-nav a.active { background: var(--amber-soft); color: var(--amber); }
.app-bar .spacer { flex: 1; }
.who { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: 0.9rem; }

.app-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); }

@media (max-width: 720px) {
    /* Phone shell: brand + account on row one, the nav becomes a single-row scroll rail
       underneath — no wrapping into a block of links that eats half the screen. */
    .app-bar { flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); row-gap: 0; }
    .brand { font-size: 1.02rem; }
    .brand .dot { width: 10px; height: 10px; }
    .who { font-size: 0.85rem; }
    .app-nav {
        margin-left: 0; order: 3; width: 100%;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: var(--sp-1) 0;
        /* fade the clipped edge so it's obviously scrollable */
        mask-image: linear-gradient(90deg, #000 92%, transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    }
    .app-nav::-webkit-scrollbar { display: none; }
    .app-nav a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }
    .app-main { padding: var(--sp-4) var(--sp-3); }
    .page-head { margin-bottom: var(--sp-4); }
}

/* ---- Page header -------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head p { margin: var(--sp-1) 0 0; }

/* ---- Cards & surfaces --------------------------------------------------- */
.card {
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    color: var(--ink); /* override Bootstrap .card dark text */
}
.card.pad { padding: var(--sp-5); }
.grid { display: grid; gap: var(--sp-4); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    appearance: none; border: 1px solid transparent; cursor: pointer;
    font-family: var(--font-text); font-weight: 600; font-size: 0.95rem;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
    color: var(--ink); background: var(--navy-500);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    transition: transform .06s ease, filter .15s ease, background .15s ease;
    min-height: 44px;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.amber { background: var(--amber); color: #20140A; }
.btn.success { background: var(--success); color: #062012; }
.btn.danger { background: var(--danger); color: #2A0A0A; }
.btn.info { background: var(--info); color: #07172E; }
.btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-dim); }
.btn.block { width: 100%; }
.btn.lg { font-size: 1.05rem; padding: var(--sp-4) var(--sp-5); min-height: 56px; }

/* ---- Pills / filters / badges ------------------------------------------ */
.pills { display: inline-flex; gap: var(--sp-1); background: var(--navy-700); padding: var(--sp-1); border-radius: 999px; border: 1px solid var(--line); max-width: 100%; }
.pill { border: none; background: transparent; color: var(--muted); padding: var(--sp-2) var(--sp-4); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.9rem; min-height: 38px; flex: 0 0 auto; white-space: nowrap; }
.pill.active { background: var(--amber); color: #20140A; }
@media (max-width: 720px) {
    /* One thumb-scrollable rail — six filters never wrap into a pill heap. */
    .pills { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pills::-webkit-scrollbar { display: none; }
}

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: .02em; }
.badge.green { background: var(--success-bg); color: var(--success); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--danger-bg); color: var(--danger); }
.badge.blue { background: var(--info-bg); color: var(--info); }
.badge.grey { background: rgba(255,255,255,0.07); color: var(--muted); }
.badge.teal { background: rgba(45,212,191,0.13); color: #2dd4bf; }

/* ---- Table (desktop) ---------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; color: var(--ink); --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--line); }
.table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); }
.table td { padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.table td strong { color: #fff; }
.table tr:hover td { background: rgba(255,255,255,0.025); }
.table tr.today td { box-shadow: inset 3px 0 0 var(--amber); }
.table tr.tomorrow td { box-shadow: inset 3px 0 0 var(--info); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Booking cards (mobile) -------------------------------------------- */
.bcard { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.bcard .row { display: flex; justify-content: space-between; gap: var(--sp-3); }
.bcard .title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.bcard.today { border-left: 3px solid var(--amber); }
.bcard.tomorrow { border-left: 3px solid var(--info); }

/* ---- Room/AV tiles ------------------------------------------------------ */
/* align-content:start so a card whose neighbour has its drawer open keeps its own controls packed
   at the top instead of stretching them down the taller grid row. */
.room-card { padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; position: relative; overflow: hidden; }
.room-card .room-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.room-card .event { color: var(--ink-dim); }
.statedot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.statedot.on { background: var(--success); box-shadow: 0 0 10px var(--success); }
.statedot.off { background: var(--danger); }
.statedot.busy { background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

/* Everyday controls. Mobile-first: one control per row with its label above, so every target is
   full-width and thumb-sized. Each is a label + control pair, never a bare button whose meaning you
   have to infer from its state text. */
.essentials { display: grid; gap: var(--sp-3); }
.ctl { display: grid; gap: 6px; }
.ctl-label { color: var(--ink-dim); font-weight: 600; font-size: .85rem; }
.ctl > .btn, .ctl > .input { width: 100%; min-height: 48px; }
/* Music as a segmented control: equal columns, so it reads as one control with four positions. */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.seg .btn { min-height: 48px; padding-inline: 4px; }

/* The drawer handle. Understated on purpose — it must not compete with the controls above it. */
.more-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--r);
    color: var(--muted); font: inherit; font-size: .9rem; padding: 10px 14px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.more-toggle:hover { color: var(--ink); border-color: var(--amber); }
.more-chevron { transition: transform .15s ease; }
.more-toggle.open .more-chevron { transform: rotate(180deg); }
.room-more { display: grid; gap: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-4); }

@media (min-width: 620px) {
    /* Room enough to pair the controls up two-across; labels keep them unambiguous. */
    .essentials { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
}
@media (max-width: 620px) {
    .room-card { padding: var(--sp-4); }
    .room-card .btn-row .btn { flex: 1 1 auto; }
}

/* ---- Forms -------------------------------------------------------------- */
.field { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--ink-dim); }
.input, select.input, textarea.input {
    width: 100%; background: var(--navy-800); border: 1px solid var(--line-strong); color: var(--ink);
    border-radius: var(--r-sm); padding: var(--sp-3); font-family: var(--font-text); font-size: 1rem; min-height: 44px;
}
.input:focus { outline: none; border-color: var(--amber); }

/* ---- Misc --------------------------------------------------------------- */
.empty { text-align: center; color: var(--muted); padding: var(--sp-7) var(--sp-4); }
.spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--amber); border-radius: 50%; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
/* show/hide-mobile: don't fight the element's own display type — `display: initial` turned the
   dashboard's mobile card GRID into an inline element (initial = inline), which is why the phone
   card list rendered with no gaps/columns. Hide with !important, reveal by reverting. */
.show-mobile { display: none !important; }
@media (max-width: 720px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: revert !important; }
    .grid.show-mobile { display: grid !important; }
}

/* Wide admin tables (Settings, Players) scroll inside their card instead of blowing the page
   out past the viewport. Momentum scrolling on iOS; the table keeps a sane minimum width. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll > table { min-width: 640px; }

/* ---- Blazorise modals (white surface) — force dark, readable text -------- */
.modal-content { color: #14233b; background: #ffffff; }
.modal-content .modal-title { color: #0B1F3A; font-family: var(--font-display); font-weight: 800; }
.modal-content .modal-header, .modal-content .modal-footer { border-color: rgba(0,0,0,0.08); }

.wifi-info { color: #14233b; }
.wifi-info .row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 6px 0; }
.wifi-info .label { color: #5A6B85; font-weight: 600; }
.wifi-info .val { font-weight: 700; }
.wifi-info .qr { display: flex; justify-content: center; padding: var(--sp-4) 0; }
.wifi-info .qr img, .wifi-info .qr canvas { background: #fff; padding: 8px; border-radius: var(--r-sm); }
.wifi-info .hint { text-align: center; color: #5A6B85; margin: var(--sp-2) 0; }

/* ============================================================================
   In-room control deck (cinematic) — the /room page
   ========================================================================== */
.deck { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 78vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.deck-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); filter: saturate(1.05); }
.deck-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,23,41,0.55) 0%, rgba(8,23,41,0.82) 60%, var(--navy-900) 100%); }
.deck-inner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 4vw, 56px); }
.deck-clock { color: var(--ink-dim); font-weight: 600; letter-spacing: .04em; }
.deck-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; margin: 6px 0 4px; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.deck-sub { color: var(--ink-dim); font-size: 1.05rem; }
.deck-spacer { flex: 1; }

.deck-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.deck-locked { text-align: center; padding: clamp(24px, 5vh, 64px) 20px; }
.deck-locked-icon { font-size: clamp(48px, 8vw, 96px); line-height: 1; }
.deck-locked-text { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.4rem); margin-top: 16px; color: var(--ink); }
.deck-locked-sub { color: var(--ink-dim); font-size: clamp(1rem, 1.6vw, 1.3rem); margin-top: 8px; }
.deck-tile {
    appearance: none; cursor: pointer; text-align: left; color: var(--ink);
    background: rgba(18, 41, 74, 0.55); backdrop-filter: blur(10px);
    border: 1px solid var(--line-strong); border-radius: var(--r); padding: 20px;
    min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    transition: transform .08s ease, border-color .15s, background .15s; font: inherit;
}
.deck-tile:hover { transform: translateY(-2px); border-color: var(--amber); }
.deck-tile:active { transform: translateY(0); }
.deck-tile:disabled { opacity: .5; cursor: default; transform: none; }
.deck-tile .lbl { font-size: 1.05rem; font-weight: 700; }
.deck-tile .val { color: var(--ink-dim); font-size: .9rem; }
.deck-tile.on { background: rgba(46, 125, 50, 0.5); border-color: var(--success); }
.deck-tile.busy { background: rgba(232, 163, 61, 0.42); border-color: var(--amber); }
.deck-tile.alert { background: rgba(192, 57, 43, 0.5); border-color: var(--danger); }
.deck-tile .pip { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }
.deck-tile.on .pip { background: #b9ffcf; box-shadow: 0 0 12px #b9ffcf; }
.deck-tile.busy .pip { background: #fff; animation: pulse 1.1s infinite; }

/* full-screen overlays for music / video pickers */
.ov { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    background: rgba(4, 12, 24, 0.74); backdrop-filter: blur(6px); padding: 24px; }
.ov-card { background: var(--navy-800); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 920px; max-height: 88vh; overflow: auto; padding: clamp(20px, 3vw, 36px); }
.ov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ov-head h2 { font-family: var(--font-display); }
.ov-close { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-dim); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; font-size: 1.2rem; }

/* Callout consent. The overlay is narrower than the pickers — it is a read-then-agree, not a grid,
   and a short measure keeps the charging rules readable. Actions stack on a phone so the agree
   button is never a thin target next to Cancel. */
.ov-card.ov-narrow { max-width: 560px; }
.callout-intro { font-weight: 700; margin-bottom: 12px; }
.callout-terms { margin: 0 0 22px; padding-left: 20px; line-height: 1.65; color: var(--ink-dim); }
.callout-terms li + li { margin-top: 8px; }
.callout-actions { display: flex; flex-direction: column-reverse; gap: 12px; }
.callout-actions .btn { min-height: 54px; width: 100%; }
@media (min-width: 560px) {
    .callout-actions { flex-direction: row; justify-content: flex-end; }
    .callout-actions .btn { width: auto; min-width: 150px; }
}

.music-room { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.music-room.current { border-color: var(--amber); background: var(--amber-soft); }
.music-room .mr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; }
.music-room .mr-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.music-room .mr-btns .btn { min-height: 54px; }

.ndi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ndi-tile { cursor: pointer; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--navy-700); color: var(--ink); font: inherit; padding: 0; }
.ndi-tile:hover { border-color: var(--amber); }
.ndi-tile.current { border-color: var(--success); }
.ndi-tile .thumb { width: 100%; aspect-ratio: 16/9; background: #000 center/cover; display: block; }
.ndi-tile .cap { padding: 10px 12px; font-weight: 700; font-size: .95rem; }
.ndi-tile.current .cap { color: var(--success); }

/* ============================================================================
   Equipment board (EquipmentBoard.razor) — palette + room drop-zones.
   Used by the event-equipment editor and the New Event screen.
   ========================================================================== */
.editor-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) {
    .editor-grid { grid-template-columns: 1fr; }
    /* Phones: rooms first. The board (its "Add room" pills lead) stacks ABOVE the equipment palette,
       so you add the rooms you need right under the event details instead of scrolling past the whole
       equipment list to reach the add-room control and back. Desktop keeps palette-left, board-right. */
    .editor-grid > :nth-child(1) { order: 2; }
    .editor-grid > :nth-child(2) { order: 1; }
}

.palette-head { margin-bottom: var(--sp-4); }
.palette-list { display: grid; gap: var(--sp-2); max-height: 72vh; overflow: auto; padding-right: 4px; }

.eq-tile { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sp-3); align-items: center;
    padding: var(--sp-2) var(--sp-3); background: var(--navy-700); border: 1px solid var(--line);
    border-radius: var(--r-sm); cursor: grab; user-select: none; color: var(--ink); }
.eq-tile:hover { border-color: var(--amber); }
.eq-tile:active { cursor: grabbing; }
.eq-tile.armed { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); background: var(--navy-600); }
.eq-tile img, .eq-tile .noimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #fff; }
.eq-tile .noimg { background: var(--navy-500); }
.eq-tile:focus-visible, .dropzone:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.eq-name { font-size: .9rem; font-weight: 600; line-height: 1.2; min-width: 0;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.eq-days-wrap { display: flex; align-items: center; gap: 4px; }
.eq-days { width: 56px; min-height: 40px; background: var(--navy-800); border: 1px solid var(--line-strong); color: var(--ink);
    border-radius: var(--r-xs); padding: 6px; font: inherit; font-size: .85rem; text-align: center; }
.eq-unit { font-size: .72rem; color: var(--muted); width: 22px; }

.addroom-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.addroom-label { font-size: .85rem; }
.addroom-pill { background: var(--navy-700); border: 1px dashed var(--line-strong); color: var(--ink-dim);
    border-radius: 999px; padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 600; font-size: .85rem; min-height: 36px; }
.addroom-pill:hover { border-color: var(--amber); color: var(--amber); }
.addroom-pill:disabled { opacity: .5; cursor: default; }

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--sp-4); }
.board-grid.dragging .placed { pointer-events: none; }   /* during a drag, dragenter fires only at zone edges, not per chip */

.dropzone { padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r); min-height: 132px;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); transition: border-color .15s, background .15s, box-shadow .15s; }
.dropzone.armed-target { cursor: pointer; border-color: var(--amber); }
.dropzone.dragover { border-style: solid; border-color: var(--success); background: var(--success-bg); box-shadow: inset 0 0 0 2px var(--success-bg); }
.dropzone.unassigned { opacity: .9; }
.dropzone .zone-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-3); font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.dropzone .zone-empty { text-align: center; color: var(--muted); font-size: .85rem; padding: var(--sp-4) var(--sp-2); }

.placed { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
    background: var(--navy-600); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3); margin-bottom: 6px; }
.placed.pending { opacity: .6; }
.placed .placed-name { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placed .rm { appearance: none; border: none; background: var(--danger-bg); color: var(--danger);
    width: 32px; height: 32px; min-width: 32px; border-radius: 50%; cursor: pointer; font-size: .8rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.placed .rm:hover { filter: brightness(1.15); }
.placed .rm:disabled { opacity: .4; cursor: default; }

.cue-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--sp-5); z-index: 60;
    display: flex; align-items: center; gap: var(--sp-3); background: var(--amber); color: #20140A;
    border-radius: 999px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5); box-shadow: var(--shadow-lg);
    max-width: calc(100vw - 32px); }
.cue-bar .cue-text { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cue-bar .cue-cancel { appearance: none; border: none; background: #20140A; color: var(--amber);
    border-radius: 999px; padding: var(--sp-2) var(--sp-4); font-weight: 700; cursor: pointer; min-height: 36px; white-space: nowrap; }

/* .eq-toast (NOT .toast — Bootstrap's global .toast:not(.show){display:none} would hide it) */
.eq-toast { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 70; display: flex; align-items: center; gap: var(--sp-3);
    background: var(--success); color: #062012; border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-lg); font-weight: 600; max-width: 360px; }
.eq-toast.error { background: var(--danger); color: #2A0A0A; }
.eq-toast .toast-x { appearance: none; border: none; background: rgba(0,0,0,.18); color: inherit; width: 24px; height: 24px;
    border-radius: 50%; cursor: pointer; font-size: .75rem; flex-shrink: 0; }