/*
 * Show Orchestrator HUD — styles for Meta Ray-Ban Display.
 *
 * Hard constraints (from Meta Wearables Web App display guidelines):
 *   - 600×600 fixed viewport, top-anchored.
 *   - #000000 black is TRANSPARENT on the additive waveguide. Backgrounds
 *     use #1C1E21 (dark gray) so the HUD is visually grounded; transient
 *     elements fade to black when dismissed to vanish from view.
 *   - 4.5:1 contrast minimum. Text is #FFFFFF or #E4E6EB; muted #B0B3B8.
 *   - No touch input. D-pad (Neural Band → arrow keys) only.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 600px;
    height: 600px;
    background: #1C1E21;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.screen-root {
    position: relative;
    width: 600px;
    height: 600px;
}

.screen {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.hidden { display: none !important; }

/* ---------- Connecting / error screens ---------- */

.centered-block {
    margin: auto;
    text-align: center;
    max-width: 480px;
}

.logo-mark {
    display: inline-block;
    width: 96px;
    height: 96px;
    line-height: 96px;
    border-radius: 50%;
    border: 4px solid #4FC3F7;
    font-size: 36px;
    font-weight: 700;
    color: #4FC3F7;
    margin-bottom: 28px;
}

.status-text {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.status-sub {
    font-size: 16px;
    color: #B0B3B8;
}

.error-icon {
    font-size: 48px;
    color: #FF5252;
    margin-bottom: 16px;
}

/* ---------- HUD ---------- */

.hud-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2C2E31;
}

.hud-tc {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

.hud-state-chip {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.state-idle { background: #3C3F44; color: #B0B3B8; }
.state-live { background: #2E7D32; color: #FFFFFF; }
.state-paused { background: #F9A825; color: #1C1E21; }
.state-outside-songs { background: #5C6BC0; color: #FFFFFF; }

.hud-stale {
    margin-left: auto;
    font-size: 14px;
    color: #FF5252;
    font-weight: 600;
}

.hud-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
}

.hud-song {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #B0B3B8;
}
.hud-song-label { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.hud-song-name { font-size: 18px; color: #E4E6EB; font-weight: 600; }

.hud-cue {
    background: #25282C;
    border-left: 4px solid #4FC3F7;
    padding: 14px 16px;
    border-radius: 6px;
}
.hud-cue-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #B0B3B8;
    margin-bottom: 6px;
}
.hud-cue-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.hud-cue-dept {
    font-size: 16px;
    font-weight: 700;
    color: #4FC3F7;
    text-transform: uppercase;
}
.hud-cue-name {
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hud-cue-countdown {
    font-size: 48px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
}

.hud-cue-secondary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 16px;
    color: #B0B3B8;
}
.hud-cue-label-inline { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.hud-cue-countdown-inline {
    margin-left: auto;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: #E4E6EB;
}

/* Caller-cue state coloring — overrides the default cue border + countdown
 * tint. Matches the dashboard / canvas overlay highlight palette so the
 * wearer's HUD agrees with what the operator's eye sees on every surface. */
.caller-late-warn { border-left-color: #FFA726; }
.caller-late-warn .hud-cue-countdown { color: #FFA726; }
.caller-standby { border-left-color: #FFEB3B; background: #2D2C1F; }
.caller-standby .hud-cue-label::after { content: "  •  STANDBY"; color: #FFEB3B; }
.caller-go { border-left-color: #66BB6A; background: #1F2F1F; }
.caller-go .hud-cue-label::after { content: "  •  GO!"; color: #66BB6A; }
.caller-skipped { border-left-color: #EF5350; background: #2F1F1F; opacity: 0.7; }
.caller-skipped .hud-cue-label::after { content: "  •  SKIPPED"; color: #EF5350; }

/* GO flash banner — overlays the HUD for ~1.5 s on cue fire */
.hud-go-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2E7D32;
    color: #FFFFFF;
    padding: 18px 24px;
    text-align: center;
    box-shadow: 0 -2px 20px rgba(46, 125, 50, 0.6);
    animation: hud-go-pulse 1.5s ease-out forwards;
}
.hud-go-text { font-size: 28px; font-weight: 700; letter-spacing: 1.5px; }
.hud-go-name { font-size: 18px; margin-top: 4px; opacity: 0.9; }
@keyframes hud-go-pulse {
    0%   { opacity: 0; transform: translateY(20px); }
    10%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(0); }
}

.hud-footer {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 12px;
    color: #6A6D72;
}
.hud-wearer { letter-spacing: 0.4px; }