/* ============================================================================
   Solway AV — back-of-house TV wall (/wall)
   Full-screen 2x2 room monitor for the AV-cabinet display. Glanceable from
   across the room: big type, high contrast, live status colour. Reuses the
   Solway AV tokens from solway.css. Scales from 1080p to 4K via clamp().
   ========================================================================== */

.wall {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(10px, 1.1vh, 20px);
    padding: clamp(14px, 1.6vw, 34px);
    color: var(--ink);
    background:
        radial-gradient(1400px 700px at 85% -12%, rgba(28, 63, 112, 0.55), transparent 60%),
        radial-gradient(1100px 600px at 0% 110%, rgba(232, 163, 61, 0.10), transparent 55%),
        var(--navy-900);
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
}

/* ---- header ------------------------------------------------------------- */
.wall-head {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
}
.wall-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 1.9vw, 36px);
    letter-spacing: .01em;
}
.wall-brand .dot {
    width: clamp(12px, 0.9vw, 18px);
    height: clamp(12px, 0.9vw, 18px);
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 4px var(--amber-soft), 0 0 18px var(--amber);
    animation: wall-pulse 2.6s ease-in-out infinite;
}
.wall-brand small {
    color: var(--muted);
    font-weight: 600;
    font-family: var(--font-text);
    font-size: .5em;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-left: 4px;
}
.wall-stats {
    display: flex;
    gap: clamp(10px, 1vw, 22px);
    margin-left: auto;
}
.wall-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}
.wall-stat b {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 40px);
    font-weight: 800;
}
.wall-stat span {
    color: var(--muted);
    font-size: clamp(10px, 0.8vw, 15px);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.wall-stat.live b { color: var(--success); }
.wall-clock {
    text-align: right;
    padding-left: clamp(12px, 1.2vw, 28px);
    border-left: 1px solid var(--line);
    line-height: 1.0;
}
.wall-clock b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: clamp(28px, 3vw, 60px);
}
.wall-clock span {
    color: var(--ink-dim);
    font-size: clamp(11px, 1vw, 19px);
    letter-spacing: .04em;
}

/* ---- rooms grid --------------------------------------------------------- */
.wall-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(10px, 1.1vw, 22px);
    min-height: 0;
}

.wall-room {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 0.9vh, 16px);
    padding: clamp(12px, min(1.3vw, 2vh), 28px);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(18, 41, 74, 0.65), rgba(11, 31, 58, 0.55));
    box-shadow: var(--shadow);
    transition: border-color .3s, box-shadow .3s;
}
.wall-room::before {                 /* big room-number watermark */
    content: attr(data-room);
    position: absolute;
    right: clamp(8px, 1vw, 26px);
    bottom: clamp(-14px, -1vw, -6px);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(120px, 16vw, 320px);
    line-height: .8;
    color: rgba(255, 255, 255, 0.035);
    pointer-events: none;
    z-index: 0;
}
/* Children keep their natural height — NEVER flex-shrink. Squeezed children collapse to ~0 height
   while their text keeps painting, which is what smeared "No active booking" over the stat tiles.
   With shrink off, an over-tall card just clips cleanly at its bottom edge instead. */
.wall-room > * { position: relative; z-index: 1; flex-shrink: 0; }

.wall-room.is-live {
    border-color: rgba(232, 163, 61, 0.55);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(232, 163, 61, 0.25), 0 0 38px rgba(232, 163, 61, 0.10);
    background: linear-gradient(180deg, rgba(28, 63, 112, 0.72), rgba(13, 35, 64, 0.6));
}
.wall-room.is-idle { opacity: .82; }

.wr-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.wr-room {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(22px, min(2.3vw, 4.2vh), 46px);
    letter-spacing: .01em;
}
.wr-badge {
    flex: none;
    font-size: clamp(11px, 0.95vw, 18px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: clamp(4px, .4vh, 8px) clamp(10px, 1vw, 16px);
    border-radius: 999px;
}
.wr-badge.live { background: var(--amber-soft); color: var(--amber); }
.wr-badge.idle { background: rgba(255,255,255,0.06); color: var(--muted); }

.wr-event { min-height: 0; }
.wr-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(16px, min(1.7vw, 3.2vh), 34px);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-title.empty { color: var(--muted); font-weight: 600; padding: 0; text-align: left; } /* solway.css also
   defines a global .empty (big centered padding) — neutralise it here or the idle title overflows
   its slot and paints over the stat tiles below. */
.wr-meta {
    margin-top: 4px;
    color: var(--ink-dim);
    font-size: clamp(12px, 1.05vw, 21px);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: clamp(8px, 1vw, 20px);
    flex-wrap: wrap;
}
.wr-meta .sep { color: var(--muted); }

.wr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-chip {
    font-size: clamp(10px, 0.85vw, 16px);
    font-weight: 600;
    padding: clamp(3px, .35vh, 6px) clamp(8px, .7vw, 13px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-dim);
    border: 1px solid var(--line);
    white-space: nowrap;
}
.wr-chip.proj { background: var(--amber-soft); color: var(--amber); border-color: transparent; }

/* status tile grid */
.wr-stats {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(6px, min(0.7vw, 1.2vh), 12px);
}
.stat {
    display: flex;
    align-items: center;
    gap: clamp(8px, .8vw, 14px);
    padding: clamp(6px, .6vh, 12px) clamp(10px, 1vw, 18px);
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--line);
    min-width: 0;
}
.stat-dot {
    flex: none;
    width: clamp(10px, .9vw, 16px);
    height: clamp(10px, .9vw, 16px);
    border-radius: 50%;
    background: var(--muted);
}
/* One line per stat (label left, value right): four rows of these fit half a 1080p screen,
   where the old stacked label/value pairs overflowed the card and got clipped. */
.stat-text { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: clamp(8px, .8vw, 14px); line-height: 1.15; }
.stat-label {
    color: var(--muted);
    font-size: clamp(9px, min(.72vw, 1.6vh), 14px);
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
}
.stat-val {
    margin-left: auto;
    font-weight: 700;
    font-size: clamp(12px, min(1.05vw, 2.1vh), 21px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat.wide { grid-column: 1 / -1; }

/* state colours */
.ok   .stat-dot, .stat-dot.ok   { background: var(--success); box-shadow: 0 0 12px rgba(52,199,123,.6); }
.warn .stat-dot, .stat-dot.warn { background: var(--amber);   box-shadow: 0 0 12px rgba(232,163,61,.6); animation: wall-pulse 1.4s ease-in-out infinite; }
.bad  .stat-dot, .stat-dot.bad  { background: var(--danger);  box-shadow: 0 0 12px rgba(255,107,107,.6); }
.info .stat-dot, .stat-dot.info { background: var(--info);    box-shadow: 0 0 12px rgba(90,160,255,.6); }
.ok   .stat-val { color: var(--success); }
.warn .stat-val { color: var(--amber); }
.bad  .stat-val { color: var(--danger); }
.info .stat-val { color: var(--info); }
.dim  .stat-val { color: var(--muted); }

/* wireless-mic pills inside a wide stat */
.mics { display: flex; gap: clamp(5px, .5vw, 9px); margin-left: auto; }
.mic {
    font-size: clamp(10px, .82vw, 16px);
    font-weight: 700;
    padding: clamp(2px, .3vh, 5px) clamp(7px, .6vw, 11px);
    border-radius: var(--r-xs);
    background: rgba(255,255,255,0.06);
    color: var(--muted);
    border: 1px solid var(--line);
}
.mic.on { background: var(--info-bg); color: var(--info); border-color: transparent; }

.wr-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, .8vh, 14px) clamp(12px, 1vw, 18px);
    border-radius: var(--r-sm);
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 800;
    letter-spacing: .04em;
    font-size: clamp(13px, 1.1vw, 22px);
    animation: wall-pulse 1.1s ease-in-out infinite;
}

/* ---- footer: upcoming --------------------------------------------------- */
.wall-foot {
    display: flex;
    align-items: stretch;
    gap: clamp(12px, 1.2vw, 24px);
    min-height: 0;
}
.wf-title {
    flex: none;
    align-self: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(14px, 1.2vw, 24px);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 6px 0;
    border-right: 1px solid var(--line);
}
.wf-list {
    display: flex;
    gap: clamp(10px, 1vw, 20px);
    overflow: hidden;
    flex: 1;
}
.wf-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: clamp(8px, .9vh, 16px) clamp(12px, 1.1vw, 20px);
    border-radius: var(--r-sm);
    background: rgba(18, 41, 74, 0.5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
}
.wf-when {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: clamp(13px, 1.1vw, 22px);
    color: var(--amber);
}
.wf-when small { color: var(--muted); font-weight: 600; margin-left: 6px; }
.wf-subj {
    font-weight: 700;
    font-size: clamp(13px, 1.05vw, 21px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-rooms {
    color: var(--ink-dim);
    font-size: clamp(11px, .9vw, 17px);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-proj { color: var(--amber); font-weight: 700; }
.wf-empty { color: var(--muted); align-self: center; font-size: clamp(13px, 1.1vw, 22px); }

@keyframes wall-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}


/* ---- phones: stacked, scrolling wall ------------------------------------ */
@media (max-width: 900px) {
    .wall { position: static; height: auto; min-height: 100vh; overflow: visible; display: block; padding: 14px; }
    .wall-head { flex-wrap: wrap; row-gap: 8px; margin-bottom: 14px; }
    .wall-clock { border-left: none; padding-left: 0; }
    .wall-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; margin-bottom: 16px; }
    .wall-room { min-height: 0; }
    .wall-foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .wf-title { writing-mode: horizontal-tb; transform: none; border-right: none; align-self: flex-start; }
    .wf-list { flex-direction: column; overflow: visible; }
}