/* Angstrom Signage player: screen layouts, slides, announcements and widgets. Colours and fonts come from the shared
   Brand Kit 2.0 tokens (/cc/tokens/tokens.css, /cc/css/brand.css). Sizes follow the screen (vw / vh / vmin). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; cursor: none; font-family: var(--font); -webkit-font-smoothing: antialiased; }
body.pointer { cursor: default; }

/* ---------------------------------------------------------------- layouts */
.sg-root { position: fixed; inset: 0; display: grid; grid-template: "main" 1fr "ticker" auto / 1fr; background: var(--ang-night, #06090D); }
.sg-root[data-layout="side"] { grid-template: "main panel" 1fr "ticker ticker" auto / 1fr 24vw; }
.sg-root[data-layout="bottom"] { grid-template: "main" 1fr "panel" auto "ticker" auto / 1fr; }
.sg-root.preview-frame { position: absolute; }
.sg-main { grid-area: main; position: relative; overflow: hidden; background: #000; }
.sg-panel { grid-area: panel; display: flex; flex-direction: column; justify-content: center; gap: 4vh; padding: 3vh 2vw; background: linear-gradient(180deg, var(--ang-midnight, #131B26), var(--ang-night, #06090D)); border-left: 0.3vw solid var(--ang-red, #C00000); }
.sg-panel[hidden], .sg-ticker[hidden] { display: none; }
.sg-root[data-layout="bottom"] .sg-panel { flex-direction: row; align-items: center; justify-content: space-around; gap: 4vw; padding: 1.6vh 3vw; border-left: 0; border-top: 0.4vh solid var(--ang-red, #C00000); }
.sg-ticker { grid-area: ticker; overflow: hidden; white-space: nowrap; background: var(--ang-red, #C00000); color: #fff; font: 600 3.2vh/1 var(--font); padding: 1.6vh 0; }
.sg-ticker-track { display: inline-block; padding-left: 100%; animation: sg-scroll 30s linear infinite; }
.sg-ticker-track.still { padding-left: 2vw; animation: none; }
.sg-ticker-item { margin-right: 6vw; }
.sg-ticker-item::before { content: ""; display: inline-block; width: 0.5vh; height: 2.6vh; margin-right: 2vw; background: #fff; transform: skewX(-24.5deg); vertical-align: -0.3vh; opacity: .75; }
@keyframes sg-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------------------------------------------------------------- slides */
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 600ms cubic-bezier(.2,.7,.1,1), transform 600ms cubic-bezier(.2,.7,.1,1); }
.slide.on { opacity: 1; }
.sg-root[data-transition="none"] .slide { transition: none; }
.sg-root[data-transition="slide"] .slide { transform: translateX(6%); }
.sg-root[data-transition="slide"] .slide.on { transform: none; }
.slide img, .slide video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.slide.fit-cover img, .slide.fit-cover video { object-fit: cover; }
.slide iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.idle { flex-direction: column; gap: 4vh; background: radial-gradient(ellipse at 70% 30%, var(--ang-midnight, #131B26), var(--ang-night, #06090D) 70%); }
.idle-logo { width: 34vw; max-width: 900px; height: auto; }
.idle-time { font: 600 6vh/1 var(--brand-font); letter-spacing: .04em; color: var(--ang-silver, #C3C8CE); }

/* ---------------------------------------------------------------- widgets */
.w-clock .w-time, .bc-time { font: 700 7vh/1 var(--brand-font); letter-spacing: .02em; }
.w-date, .bc-date { font: 600 3vh/1.2 var(--label-font); text-transform: uppercase; letter-spacing: .12em; color: var(--ang-sky, #98B8D9); }
.w-weather { display: grid; gap: .6vh; }
.w-place { font: 600 2.4vh/1.1 var(--label-font); text-transform: uppercase; letter-spacing: .14em; color: var(--ang-silver, #C3C8CE); }
.w-temp { font: 700 5vh/1 var(--brand-font); }
.w-cond { font: 500 2.6vh/1.2 var(--font); color: var(--ang-silver, #C3C8CE); }
.w-fc { display: grid; gap: .8vh; margin-top: 1.4vh; }
.w-fc-day { display: grid; grid-template-columns: 1fr auto; column-gap: 1vw; font: 500 2.2vh/1.25 var(--font); }
.w-fc-name { color: var(--ang-sky, #98B8D9); }
.w-fc-text { grid-column: 1 / -1; color: var(--ang-silver, #C3C8CE); font-size: 1.9vh; }
.w-attr, .w-muted { font: 400 1.5vh/1.2 var(--font); color: var(--ang-alloy, #7D8590); }
.sg-root[data-layout="bottom"] .w-weather { grid-auto-flow: column; align-items: baseline; column-gap: 1.4vw; }
.big-clock, .big-weather { display: flex; flex-direction: column; align-items: center; gap: 3vh; text-align: center; }
.big-clock .bc-time { font-size: 22vh; }
.big-clock .bc-date { font-size: 5vh; }
.big-weather .w-temp { font-size: 16vh; }
.big-weather .w-place { font-size: 4vh; }
.big-weather .w-cond { font-size: 5vh; }
.big-weather .w-fc { grid-auto-flow: column; gap: 4vw; margin-top: 4vh; }
.big-weather .w-fc-day { font-size: 3.4vh; }
.big-weather .w-fc-text { font-size: 2.6vh; }
.k-clock, .k-weather { background: radial-gradient(ellipse at 70% 30%, var(--ang-midnight, #131B26), var(--ang-night, #06090D) 70%); }

/* ---------------------------------------------------------------- branded announcements */
.ann { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 6vh 6vw 5vh; gap: 3vh; }
.ann.th-night { background: radial-gradient(ellipse at 80% 10%, var(--ang-midnight, #131B26), var(--ang-night, #06090D) 65%); color: #fff; }
.ann.th-paper { background: var(--ang-paper, #F4F6F8); color: var(--ang-night, #06090D); }
.ann.th-red { background: var(--ang-red, #C00000); color: #fff; }
.ann-logo { height: 6vh; width: auto; }
.ann-content { display: grid; grid-template-columns: 1fr auto; gap: 5vw; align-items: center; min-height: 0; }
.ann-text { min-width: 0; }
.ann-kicker { font-size: 2.6vh; margin-bottom: 2.4vh; }
.ann.th-red .ann-kicker, .ann.th-red .ang-kicker::before { color: #fff; }
.ann-head { font: 700 9vh/1.02 var(--brand-font); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 3vh; overflow-wrap: anywhere; }
.ann-body { font: 400 3.6vh/1.4 var(--font); max-width: 60vw; }
.ann.th-night .ann-body { color: var(--ang-silver, #C3C8CE); }
.ann.th-paper .ann-body { color: var(--ang-slate, #2C3847); }
.ann-body p { margin: 0 0 1.6vh; }
.ann-side { display: flex; flex-direction: column; align-items: center; gap: 3vh; }
.ann-img { max-width: 34vw; max-height: 52vh; border-radius: 1.2vh; object-fit: cover; }
.ann-qr { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; }
.ann-qr .qr { width: 22vh; height: 22vh; border-radius: .8vh; }
.ann-qr-label { font: 600 2.2vh/1.2 var(--label-font); text-transform: uppercase; letter-spacing: .12em; text-align: center; max-width: 26vh; }
.ann-rule { height: .6vh; width: 14vw; background: var(--ang-red, #C00000); transform: skewX(-24.5deg); }
.ann.th-red .ann-rule { background: #fff; }
.ann.t-safety.th-night .ann-head, .ann.t-safety.th-paper .ann-head { color: var(--ang-red, #C00000); }
.ann.t-safety.th-night .ann-head { color: var(--ang-glint, #F04545); }
.ann.t-welcome .ann-content { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.ann.t-welcome .ann-head { font-size: 12vh; }
.ann.t-welcome .ann-body { max-width: 70vw; }
.ann.t-welcome .ann-rule { justify-self: center; }
.ann.t-notice { padding-left: 10vw; }
.ann.t-notice::before { content: ""; position: absolute; left: 4vw; top: 6vh; bottom: 6vh; width: 1.2vw; background: currentColor; opacity: .9; transform: skewX(-24.5deg); }

/* ---------------------------------------------------------------- pairing and messages */
.pair-screen { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 75% 20%, var(--ang-midnight, #131B26), var(--ang-night, #06090D) 70%); color: #fff; }
.pair-card { display: grid; grid-template-columns: auto auto; gap: 6vw; align-items: center; padding: 6vh 6vw; }
.pair-logo { height: 6vh; width: auto; margin-bottom: 5vh; }
.pair-label { font: 600 2.6vh/1 var(--label-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ang-sky, #98B8D9); }
.pair-code { font: 700 13vh/1 var(--mono); letter-spacing: .06em; margin: 2.4vh 0 3vh; }
.pair-help { font: 400 2.6vh/1.5 var(--font); color: var(--ang-silver, #C3C8CE); max-width: 48vw; margin: 0 0 1.4vh; }
.pair-help strong { color: #fff; font-weight: 600; }
.pair-qr .qr { width: 32vh; height: 32vh; border-radius: 1vh; }
.pair-note { font: 400 2vh/1.4 var(--font); color: var(--ang-alloy, #7D8590); margin-top: 2vh; }
.pair-warn { font: 500 2.2vh/1.4 var(--font); color: #F0A64A; margin-top: 2vh; max-width: 48vw; }
.status-dot { position: fixed; right: 1vw; bottom: 1vh; width: 1.2vh; height: 1.2vh; border-radius: 50%; background: transparent; z-index: 10; }
.status-dot.offline { background: #F0A64A; }
.toast-msg { position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); padding: 1.4vh 2.4vw; border-radius: 1vh; background: rgba(6,9,13,.9); color: #fff; font: 500 2.2vh/1.3 var(--font); z-index: 20; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } .sg-ticker-track { animation: none; padding-left: 2vw; } }