/* watchtower-shell.css — locked-design integrated dispatch shell. * Ports tokens + .wt-shell grid + .wt-strip + .wt-ticker + .wt-rail * + .wt-main + .console-root / .console-head verbatim from * design_handoff_watchtower_2026/reference/Watchtower (standalone bundle, * file 09 + template inline CSS). Page-internal styles * (watchtower-incidents.css, watchtower-comms.css, watchtower-ops.css, * watchtower-identity.css) are unchanged and continue to use --wt-* * tokens; this file augments rather than replaces. */ :root { /* shell sizing — locked */ --rail-w: 64px; --rail-w-x: 220px; --strip-h: 64px; --ticker-h: 34px; /* brand mark — Apple Fest amber */ --brand: #ffd23f; --brand-d: #c8a32e; /* tier colors (mirror existing --t1/2/3 but locked names too) */ --t1: #4dc8ff; --t2: #ffb020; --t3: #ff3b3b; --info: #4dc8ff; --warn: #ffb020; } /* Activation accent driven by (set in boot.js). */ html[data-activation="GREEN"] { --act: var(--ok, #5fb976); } html[data-activation="YELLOW"] { --act: var(--warn); } html[data-activation="ORANGE"] { --act: #ff7a1a; } html[data-activation="RED"] { --act: var(--crit, #e63946); } :root { --act: var(--warn); } /* default before resolution */ /* ---------- Shell grid ---------- */ html, body { height: 100%; margin: 0; } body { background: var(--bg-0, #05080d); } .wt-shell { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: var(--strip-h) var(--ticker-h) 1fr; grid-template-areas: "strip strip" "ticker ticker" "rail main"; height: 100vh; background: var(--bg-0, #05080d); } .wt-shell.rail-expanded { grid-template-columns: var(--rail-w-x) 1fr; } .wt-shell.no-ticker { grid-template-rows: var(--strip-h) 1fr; grid-template-areas: "strip strip" "rail main"; } /* ---------- Top strip ---------- */ .wt-strip { grid-area: strip; display: flex; align-items: stretch; background: var(--bg-1, #0a0e14); border-bottom: 1px solid var(--l-2, #263141); min-width: 0; position: relative; z-index: 50; height: var(--strip-h); } .wt-strip > * { min-width: 0; } /* brand cell — left edge ID */ .wt-strip .wt-brand-cell { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; border-right: 1px solid var(--l-2, #263141); background: linear-gradient(180deg, var(--bg-0, #05080d) 0%, var(--bg-1, #0a0e14) 100%); position: relative; } .wt-strip .wt-brand-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); box-shadow: 0 0 12px color-mix(in oklab, var(--brand) 60%, transparent); } .wt-strip .wt-brand-cell .wt-brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .wt-strip .wt-brand-cell .wm { font: 800 14px/1 var(--mono); letter-spacing: 0.18em; color: var(--brand); text-transform: uppercase; } .wt-strip .wt-brand-cell .sub { font: 500 9.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--t-2, #7e8999); text-transform: uppercase; } /* level block — full-height activation color bar */ .wt-strip .level-block { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: color-mix(in oklab, var(--act) 18%, var(--bg-1, #0a0e14)); border-right: 1px solid var(--l-2, #263141); border-left: 4px solid var(--act); flex: 0 0 auto; cursor: default; } .wt-strip .level-block .lvl { font: 700 26px/1 var(--mono); color: var(--act); letter-spacing: 0.08em; } .wt-strip .level-block .since { font: 600 9px/1.25 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-2, #7e8999); border-left: 1px solid var(--l-2, #263141); padding-left: 12px; } .wt-strip .level-block .since .t { font-size: 11px; color: var(--t-0, #e6edf5); font-weight: 700; display: block; } html[data-activation="RED"] .wt-strip .level-block .lvl { animation: wt-pulse 1.2s ease-in-out infinite; } @keyframes wt-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } /* generic cell */ .wt-strip .cell { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid var(--l-2, #263141); flex: 0 0 auto; white-space: nowrap; } .wt-strip .cell:last-child { border-right: 0; } .wt-strip .cell .kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .wt-strip .grow { flex: 1 1 auto; min-width: 0; } .wt-strip .k { font: 600 10px/1 var(--mono); letter-spacing: 0.14em; color: var(--t-2, #7e8999); text-transform: uppercase; } .wt-strip .v { font: 700 18px/1 var(--mono); color: var(--t-0, #e6edf5); font-variant-numeric: tabular-nums; } .wt-strip .v .dim { color: var(--t-3, #525c6a); font-weight: 500; } .wt-strip .v .sub { color: var(--t-3, #525c6a); font-size: 11px; font-weight: 500; margin-left: 2px; } /* incident counts (T3/T2/T1 trio) */ .wt-strip .inc-counts { display: flex; align-items: stretch; height: 100%; } .wt-strip .inc-counts .t { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--l-2, #263141); gap: 3px; min-width: 48px; padding: 0 6px; } .wt-strip .inc-counts .t:last-child { border-right: 0; } .wt-strip .inc-counts .n { font: 800 20px/1 var(--mono); font-variant-numeric: tabular-nums; } .wt-strip .inc-counts .l { font: 600 9.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--t-2, #7e8999); } .wt-strip .inc-counts .t.t1 .n { color: var(--t1); } .wt-strip .inc-counts .t.t2 .n { color: var(--t2); } .wt-strip .inc-counts .t.t3 .n { color: var(--t3); } /* radio cell flexes */ .wt-strip .cell.radio { flex: 1 1 180px; min-width: 0; max-width: 520px; } .wt-strip .cell.radio .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; } .wt-strip .cell.radio .v .acc { color: var(--acc, #4dc8ff); font-weight: 700; margin-right: 4px; } /* on-duty operator dots */ .wt-strip .ops { display: flex; gap: 6px; align-items: center; } .wt-strip .ops .dot { display: inline-flex; align-items: center; justify-content: center; font: 700 10.5px/1 var(--mono); padding: 3px 7px; border-radius: 3px; border: 1px solid var(--l-2, #263141); color: var(--t-1, #b3bdcc); } .wt-strip .ops .dot.you { background: color-mix(in oklab, var(--acc, #4dc8ff) 22%, transparent); border-color: var(--acc, #4dc8ff); color: var(--acc, #4dc8ff); } /* operator cell (right side, identity card) */ .wt-strip .op-cell { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-right: 1px solid var(--l-2, #263141); } .wt-strip .op-cell .av { width: 32px; height: 32px; border: 1px solid var(--l-2, #263141); display: grid; place-items: center; font: 700 12px/1 var(--mono); color: var(--t-1, #b3bdcc); } .wt-strip .op-cell .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wt-strip .op-cell .nm { font: 600 13px/1 var(--sans); color: var(--t-0, #e6edf5); } .wt-strip .op-cell .role { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--t-2, #7e8999); text-transform: uppercase; } /* right-side action chips */ .wt-strip .strip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-2, #0f141c); border: 1px solid var(--l-2, #263141); color: var(--t-1, #b3bdcc); font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .wt-strip .strip-btn:hover { background: var(--bg-3, #151c26); color: var(--t-0, #e6edf5); } .wt-strip .strip-btn.amber { border-color: var(--brand); color: var(--brand); } .wt-strip .strip-btn.amber:hover { background: var(--brand); color: var(--bg-0, #05080d); } .wt-strip .audit-chip { background: transparent; border: 1px solid var(--l-2, #263141); padding: 4px 9px; cursor: pointer; font: 700 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--t-1, #b3bdcc); text-transform: uppercase; } .wt-strip .audit-chip:hover { color: var(--t-0, #e6edf5); border-color: var(--l-3, #384357); } .wt-strip .ago-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font: 600 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--ok, #5fb976); text-transform: uppercase; } .wt-strip .ago-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #5fb976); } /* progressive collapse (locked breakpoints) */ @media (max-width: 1500px) { .wt-strip .cell.collapse-lg { display: none; } } @media (max-width: 1280px) { .wt-strip .cell.collapse-md { display: none; } } @media (max-width: 1100px) { .wt-strip .cell.collapse-sm { display: none; } .wt-strip .level-block .since { display: none; } } @media (max-width: 900px) { .wt-strip .level-block .lvl { font-size: 20px; } .wt-strip .level-block { padding: 0 12px; } .wt-strip .wt-brand-cell .wt-brand-text { display: none; } } /* ---------- Ticker ---------- */ .wt-ticker { grid-area: ticker; background: var(--bg-2, #0f141c); border-bottom: 1px solid var(--l-2, #263141); overflow: hidden; display: flex; align-items: center; height: var(--ticker-h); } .wt-ticker .label { flex: 0 0 auto; padding: 0 14px; font: 700 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--bg-0, #05080d); background: var(--warn); height: 100%; display: flex; align-items: center; text-transform: uppercase; white-space: nowrap; } .wt-ticker.crit .label { background: var(--crit, #e63946); color: #fff; } .wt-ticker .scroller { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; height: 100%; } .wt-ticker .scroller .run { display: flex; align-items: center; gap: 40px; white-space: nowrap; animation: wt-scroll 60s linear infinite; padding-left: 20px; font: 12px/1 var(--mono); color: var(--t-1, #b3bdcc); } .wt-ticker .scroller .run .n { color: var(--acc, #4dc8ff); font-weight: 600; margin-right: 6px; } .wt-ticker .scroller .run .sep { color: var(--t-3, #525c6a); } @keyframes wt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Left rail ---------- */ .wt-rail { grid-area: rail; background: var(--bg-1, #0a0e14); border-right: 1px solid var(--l-2, #263141); display: flex; flex-direction: column; overflow: hidden; } .wt-rail .brand { display: grid; grid-template-columns: var(--rail-w) 1fr; align-items: center; height: 52px; border-bottom: 1px solid var(--l-2, #263141); cursor: pointer; user-select: none; background: var(--bg-0, #05080d); } .wt-rail .brand .logo { display: grid; place-items: center; height: 100%; } .wt-rail .brand .brand-wm { font: 700 13px/1 var(--sans); letter-spacing: 0.18em; color: var(--t-0, #e6edf5); padding-right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wt-rail .brand:hover { background: var(--bg-1, #0a0e14); } .wt-rail .nav-item { display: grid; grid-template-columns: var(--rail-w) 1fr auto; align-items: center; height: 52px; color: var(--t-2, #7e8999); cursor: pointer; border-left: 3px solid transparent; border-bottom: 1px solid var(--l-1, #1b2430); user-select: none; } .wt-rail .nav-item .ico { display: grid; place-items: center; height: 100%; color: var(--t-2, #7e8999); } .wt-rail .nav-item .ico svg { display: block; } .wt-rail .nav-item .lbl { font-size: 12px; letter-spacing: 0.02em; color: var(--t-1, #b3bdcc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .wt-rail .nav-item .kbd { font: 9px/1 var(--mono); color: var(--t-3, #525c6a); padding-right: 12px; } .wt-rail .nav-item .badge { position: absolute; margin-left: 36px; margin-top: -22px; background: var(--crit, #e63946); color: #fff; font: 700 9px/1 var(--mono); padding: 2px 5px; border-radius: 8px; min-width: 14px; text-align: center; } .wt-rail .nav-item:hover { background: var(--bg-2, #0f141c); color: var(--t-0, #e6edf5); } .wt-rail .nav-item:hover .ico, .wt-rail .nav-item:hover .lbl { color: var(--t-0, #e6edf5); } .wt-rail .nav-item.active { background: var(--bg-2, #0f141c); border-left-color: var(--acc, #4dc8ff); color: var(--t-0, #e6edf5); } .wt-rail .nav-item.active .ico { color: var(--acc, #4dc8ff); } .wt-rail .nav-item.disabled { opacity: 0.4; cursor: not-allowed; } .wt-rail .nav-item.disabled:hover { background: transparent; } .wt-rail .rail-spacer { flex: 1; } .wt-rail .rail-foot { border-top: 1px solid var(--l-2, #263141); } .wt-rail .rail-foot .util { display: grid; grid-template-columns: var(--rail-w) 1fr; align-items: center; height: 40px; color: var(--t-2, #7e8999); cursor: pointer; user-select: none; } .wt-rail .rail-foot .util .ico { display: grid; place-items: center; font: 600 11px/1 var(--mono); } .wt-rail .rail-foot .util .lbl { font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; } .wt-rail .rail-foot .util:hover { background: var(--bg-2, #0f141c); color: var(--t-0, #e6edf5); } /* ---------- Main workspace ---------- */ .wt-main { grid-area: main; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* ---------- Console (page frame) ---------- */ .console-root { flex: 1; min-height: 0; min-width: 0; background: var(--bg-0, #05080d); display: flex; flex-direction: column; } .console-head { height: 44px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-1, #0a0e14); border-bottom: 1px solid var(--l-2, #263141); } .console-head .title { font: 600 13px/1 var(--mono); color: var(--t-0, #e6edf5); letter-spacing: 0.08em; text-transform: uppercase; } .console-head .sep { color: var(--t-3, #525c6a); } .console-head .path { font: 12px/1 var(--mono); color: var(--t-2, #7e8999); } .console-head .right { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* shared button — local to console for tab/action buttons */ .console-head .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-2, #0f141c); border: 1px solid var(--l-2, #263141); color: var(--t-1, #b3bdcc); font: 12px/1 var(--sans); cursor: pointer; border-radius: 0; } .console-head .btn.sm { padding: 3px 9px; font-size: 11px; } .console-head .btn:hover { background: var(--bg-3, #151c26); border-color: var(--l-3, #384357); color: var(--t-0, #e6edf5); } .console-head .btn.primary { background: var(--acc, #4dc8ff); border-color: var(--acc, #4dc8ff); color: var(--bg-0, #05080d); font-weight: 600; } .console-body { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 14px; } .console-body.dense { padding: 0; } /* ---------- Foundation/identity overlay routes (login/picker/lock) ---------- */ /* When mounted as a full-screen overlay (no shell), they render directly * into the page background. The pre-shell route doesn't use .wt-shell. */ .wt-pre-shell { min-height: 100vh; background: var(--bg-0, #05080d); display: flex; flex-direction: column; } /* ---------- Banners (paper backup + WAN-degraded) ---------- */ /* Per AUDIO_VISUAL_SPEC §"Paper backup banner" — sticky banner under * the top strip. Banner row sits between the strip and the ticker in * the shell layout (banners area is implicit; not a grid track). */ .wt-banners { display: flex; flex-direction: column; gap: 0; flex: 0 0 auto; z-index: 40; } .wt-banner { display: flex; align-items: center; gap: 14px; padding: 9px 16px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.04em; border-bottom: 1px solid rgba(0,0,0,0.4); } .wt-banner-text { flex: 1 1 auto; } .wt-banner-action { background: transparent; border: 1px solid currentColor; color: inherit; padding: 5px 12px; font: 700 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .wt-banner-action:hover { background: rgba(255,255,255,0.08); } /* ---------- Edge pulse (AUDIO_VISUAL_SPEC §"Edge pulse") ---------- */ .wt-edge-pulse { position: fixed; inset: 0; border: 8px solid transparent; box-shadow: inset 0 0 0 8px var(--crit, #e63946); animation: wt-edge-pulse 1.1s ease-in-out infinite; mix-blend-mode: screen; pointer-events: none; z-index: 9999; } @keyframes wt-edge-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.35; } } /* ---------- Drill stripes (AUDIO_VISUAL_SPEC §"Drill stripes") ---------- */ /* Top-of-viewport hazard stripe + .chip.drill stripe pattern. * Body class set by dispatchShell on drill_mode + drill:change. */ body.drill::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 135deg, var(--warn, #ffb020) 0 12px, #1b1b1b 12px 24px ); z-index: 9998; pointer-events: none; } .chip.drill, .wt-strip .chip.drill { background: repeating-linear-gradient( 135deg, var(--warn, #ffb020) 0 6px, #1b1b1b 6px 12px ); color: #1b1b1b; border-color: var(--warn, #ffb020); text-shadow: 0 1px 0 rgba(255,255,255,0.4); } /* ---------- Master mute chip (AUDIO_VISUAL_SPEC §"Mute + unlock") ---------- */ .wt-strip .mute-chip { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; background: transparent; border: 1px solid var(--l-2, #263141); color: var(--t-1, #b3bdcc); font: 600 14px/1 var(--mono); cursor: pointer; } .wt-strip .mute-chip:hover { color: var(--t-0, #e6edf5); border-color: var(--l-3, #384357); } .wt-strip .mute-chip.muted { color: var(--crit, #e63946); border-color: var(--crit, #e63946); background: color-mix(in oklab, var(--crit, #e63946) 10%, transparent); } /* ---------- Freshness chip color states (AUDIO_VISUAL_SPEC §"Freshness chip") ---------- */ .wt-strip .ago-chip.fresh-ok { color: var(--ok, #5fb976); } .wt-strip .ago-chip.fresh-ok::before { background: var(--ok, #5fb976); } .wt-strip .ago-chip.fresh-warn { color: var(--warn, #ffb020); } .wt-strip .ago-chip.fresh-warn::before { background: var(--warn, #ffb020); } .wt-strip .ago-chip.fresh-crit { color: var(--crit, #e63946); font-weight: 800; letter-spacing: 0.14em; } .wt-strip .ago-chip.fresh-crit::before { background: var(--crit, #e63946); animation: wt-pulse 1s ease-in-out infinite; } /* ---------- Audio nag (AUDIO_VISUAL_SPEC §"Audio nag") ---------- */ /* Bottom-right floating card; pulses left border between yellow and * white at 2.4s cadence. Tap anywhere on the card to arm audio. */ .wt-audio-nag { position: fixed; right: 16px; bottom: 16px; z-index: 9000; } .wt-audio-nag-card { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--bg-1, #0a0e14); color: var(--t-0, #e6edf5); border: 1px solid var(--l-2, #263141); border-left: 4px solid var(--warn, #ffb020); box-shadow: 0 6px 18px rgba(0,0,0,0.5); cursor: pointer; font: 13px/1.4 var(--sans); user-select: none; animation: wt-nag-pulse 2.4s ease-in-out infinite; } .wt-audio-nag-card:hover { background: var(--bg-2, #0f141c); } .wt-audio-nag-mark { font: 700 18px/1 var(--mono); color: var(--warn, #ffb020); } .wt-audio-nag-text { display: flex; flex-direction: column; gap: 2px; } .wt-audio-nag-text strong { font: 700 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--warn, #ffb020); } .wt-audio-nag-text span { font-size: 12px; color: var(--t-1, #b3bdcc); } @keyframes wt-nag-pulse { 0%, 100% { border-left-color: var(--warn, #ffb020); } 50% { border-left-color: #ffffff; } } /* Paper backup — sustained crit tone (sends suppressed) softens to * warn after clear (banner persists until reconciled). */ .wt-banner-paper { background: color-mix(in oklab, var(--crit, #e63946) 22%, var(--bg-1, #0a0e14)); color: #ffe7eb; border-top: 2px solid var(--crit, #e63946); } .wt-banner-wan-down { background: color-mix(in oklab, var(--warn, #ffb020) 26%, var(--bg-1, #0a0e14)); color: #fff5d8; border-top: 2px solid var(--warn, #ffb020); } .wt-banner-wan-degraded { background: color-mix(in oklab, var(--warn, #ffb020) 14%, var(--bg-1, #0a0e14)); color: #fff; border-top: 1px solid color-mix(in oklab, var(--warn, #ffb020) 60%, transparent); } /* ---------- prefers-reduced-motion (AUDIO_VISUAL_SPEC §"Motion") ---------- */ /* "Respect prefers-reduced-motion: replace pulses with steady high- * contrast borders + swap animated chimes for a single longer tone." * Audio swap happens in shell/sound.js via the engine's reducedMotion * snapshot; CSS handles the visual pulse → steady border swap. */ @media (prefers-reduced-motion: reduce) { .wt-edge-pulse, .wt-audio-nag-card, .wt-strip .ago-chip.fresh-crit::before { animation: none !important; } .wt-edge-pulse { opacity: 0.85; box-shadow: inset 0 0 0 8px var(--crit, #e63946); } .wt-audio-nag-card { border-left-color: var(--warn, #ffb020); } }