/* Node 42 - player chrome.
   Deliberately restrained: this is a utility surface, and the venue-screen
   context (chunk 1D) means it has to read from across a room. */

.n42 {
    --n42-ink: #e8e6df;
    --n42-ground: #0d0f10;
    --n42-line: rgba(232, 230, 223, 0.18);
    --n42-accent: #4ade80;
    max-width: 100%;
    margin: 0 auto 1.25rem;
    background: var(--n42-ground);
    color: var(--n42-ink);
    border-radius: 6px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.n42-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* these are 1940s prints; pillarboxing them would be a lie */
    background: #000;
}

.n42-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.n42-hold {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.5rem;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.035) 0px,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 3px
        ),
        #0a0c0d;
}

.n42-hold[hidden] { display: none !important; }

.n42-hold-mark {
    font-size: clamp(1.5rem, 5vw, 3rem);
    letter-spacing: 0.28em;
    font-weight: 700;
    color: var(--n42-accent);
}

.n42-hold-msg {
    font-size: clamp(0.8rem, 2vw, 1rem);
    color: var(--n42-ink);
    opacity: 0.75;
    max-width: 32ch;
    line-height: 1.5;
}

.n42-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--n42-line);
    font-size: 0.8rem;
}

.n42-ident {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.n42-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--n42-accent);
    letter-spacing: 0.06em;
}

.n42-tag {
    opacity: 0.6;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.n42-now {
    flex: 1 1 12ch;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
}

.n42-sound {
    flex: 0 0 auto;
    background: transparent;
    color: var(--n42-ink);
    border: 1px solid var(--n42-line);
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    letter-spacing: 0.04em;
}

.n42-sound:hover,
.n42-sound:focus-visible {
    border-color: var(--n42-accent);
    color: var(--n42-accent);
}

.n42-debug {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--n42-line);
    background: #07090a;
    color: #86efac;
    font-size: 0.68rem;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
}

/* Kiosk / venue screen (chunk 1D leans on this): hide the chrome entirely. */
.n42.n42-kiosk .n42-bar,
.n42.n42-kiosk .n42-debug { display: none; }
.n42.n42-kiosk { border-radius: 0; margin: 0; }

/* ---------------------------------------------------------------------------
   Hub screen (page 512, the logged-in home): the player COVERS the map slot.
   The map underneath is never hidden or resized, which is what keeps Leaflet
   out of its wrong-size-after-re-show failure mode.
   --------------------------------------------------------------------------- */

.n42-hub-overlay {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    /* ROW, not column. Corrected 2026-09-14.
       This rule predates the cabinet art (added 2026-09-01) and was written for the
       markup of the time, where .n42-screen and .n42-bar were DIRECT flex children
       stacked vertically. The cabinet wrapped them in .n42-set + .n42-panel, which
       are laid out side by side — so a column here stacked the television on top of
       its own side panel. Nobody updated this skin when that skin landed.
       Row + the base .n42-set / .n42-panel rules reproduce the cabinet layout
       exactly, which is deliberate: the sizing algebra on .n42-panel is already
       proven on the public page, and inventing a second one for the hub would be a
       second implementation that can only drift. */
    flex-direction: row;
    /* The composite cabinet is 1 / ((1 - 0.16382) / 1.7768) = 2.125:1 and the map
       slot is roughly 1.94:1, so at full slot width the artwork is SHORTER than the
       slot. Centre it and let the difference fall as black above and below, rather
       than stretching art that was measured from an alpha channel. */
    align-items: center;
    gap: clamp(4px, 0.8vw, 14px);
    background: #000;
    /* MUST exceed Leaflet's own stacking: .leaflet-top / .leaflet-bottom are
       z-index 1000, so an overlay at a lower value sits UNDER the Holons
       ON/OFF control and the zoom buttons. */
    z-index: 1200;
}

.n42-hub-overlay[hidden] { display: none !important; }

/* DELETED 2026-09-14: `.n42-hub-overlay .n42-screen { aspect-ratio:auto; flex:1 1
   auto; min-height:0 }` and `.n42-hub-overlay .n42-bar { flex:0 0 auto }`.
   Both were dead code, and dead code that READS as load-bearing is worse than none.
   .n42-screen is position:absolute inside .n42-set, so flex properties on it have
   never applied, and it carries no aspect-ratio of its own for `auto` to override —
   .n42-set does. The bar rule governed markup that does not render at all while the
   panel art exists (player_markup emits the panel OR the bar, never both). */

/* The debug pane and the degraded no-art bar are taken OUT of the flex row rather
   than allowed to join it — a <pre> or a control strip sitting beside the
   television would squeeze the artwork it is supposed to sit under. Both are
   conditional markup (debug only on shortcode debug=1; the bar only when the panel
   attachment is missing), so neither should be able to disturb the normal case. */
.n42-hub-overlay .n42-debug,
.n42-hub-overlay .n42-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.n42-hub-overlay .n42-debug {
    max-height: 8.5rem;
    overflow: auto;
}

.n42-exit { border-color: rgba(251, 191, 36, 0.55) !important; }
.n42-exit:hover { border-color: #fbbf24 !important; color: #fbbf24 !important; }

/* ------------------------------------------------------------------ *
   Attribution on screen — pre-roll slate and late-joiner credit bug.

   Both sit INSIDE .n42-screen, over the video, below the hub overlay
   (z-index 1200) so "leave the venue" is never covered by a credit.

   COLOURS ARE FORCED. This site carries an inline BuddyPress stylesheet
   with `color:#ffffff !important` plus `-webkit-text-fill-color` on form
   fields, and it already cost two wrong fixes on two plausible
   specificity theories before cropping a screenshot showed the real
   cause (2026-09-01). A credit that renders white-on-white discharges
   no obligation at all, so it does not get to depend on the cascade.

   [hidden] is forced too: the player toggles el.hidden, and any theme
   rule setting `display` on these classes would defeat it silently.
 * ------------------------------------------------------------------ */

.n42-slate {
    position: absolute;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    padding: 6% 8%;
    background: rgba(6, 8, 9, 0.9) !important;
    color: var(--n42-ink) !important;
    -webkit-text-fill-color: var(--n42-ink) !important;
    text-align: left;
}
.n42-slate[hidden] { display: none !important; }

.n42-slate-kicker {
    font-size: clamp(0.62rem, 1.5vw, 0.78rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--n42-accent) !important;
    -webkit-text-fill-color: var(--n42-accent) !important;
}

.n42-slate-title {
    font-size: clamp(1rem, 3.4vw, 1.9rem);
    line-height: 1.15;
    color: var(--n42-ink) !important;
    -webkit-text-fill-color: var(--n42-ink) !important;
}

.n42-slate-credit {
    font-size: clamp(0.72rem, 1.9vw, 0.95rem);
    line-height: 1.45;
    opacity: 0.92;
    color: var(--n42-ink) !important;
    -webkit-text-fill-color: var(--n42-ink) !important;
}

.n42-slate-licence {
    font-size: clamp(0.62rem, 1.5vw, 0.8rem);
    word-break: break-all;      /* a licence URL must never widen the screen box */
    opacity: 0.7;
    color: var(--n42-ink) !important;
    -webkit-text-fill-color: var(--n42-ink) !important;
}
.n42-slate-licence[hidden] { display: none !important; }

/* Lower third. One line, clipped rather than wrapped: a growing credit bug
   would push its own box over the picture it is crediting. */
.n42-bug {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(to top, rgba(6, 8, 9, 0.92), rgba(6, 8, 9, 0));
    color: var(--n42-ink) !important;
    -webkit-text-fill-color: var(--n42-ink) !important;
}
.n42-bug[hidden] { display: none !important; }

.n42-bug-text {
    display: block;
    font-size: clamp(0.62rem, 1.6vw, 0.82rem);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--n42-ink) !important;
    -webkit-text-fill-color: var(--n42-ink) !important;
}