/* css/viewer.css — Braun redesign shared viewer + guest destination (v3.0).
   Imported into `components`. Authoritative values: rd-styles.css §"SHARE / GUEST VIEW"
   + "SHARED VIEWER CHROME". Rendered into #shared-view by js/shared-view.js. */

#shared-view { position: fixed; inset: 0; z-index: 45; background: var(--bg); }
#shared-view[hidden] { display: none; }

/* viewer chrome */
.viewer { position: absolute; inset: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--fg); }
.viewer__bar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.viewer__brand { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); flex-shrink: 0; }
.viewer__spacer { flex: 1; }
.viewer__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.viewer__live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }
.viewer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* guest destination */
.guest { flex: 1; min-height: 0; overflow-y: auto; background: radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in oklab, var(--amber) 8%, transparent), transparent 60%), var(--bg); }
.guest__wrap { max-width: 560px; margin: 0 auto; padding: 34px 22px 60px; display: flex; flex-direction: column; gap: 22px; }
.guest__hd { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.guest__badge { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-ink); } /* AUD-F8 */
.guest__title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.guest__date { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.guest__now { border: 1px solid color-mix(in oklab, var(--amber) 40%, transparent); border-radius: 16px; background: color-mix(in oklab, var(--amber) 9%, transparent); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.guest__nowrow { display: flex; align-items: center; gap: 14px; }
.guest__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-ink); width: 48px; flex-shrink: 0; } /* AUD-F8 */
.guest__nm { font-size: 21px; font-weight: 700; line-height: 1.1; }
.guest__nm small { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .04em; margin-top: 3px; text-transform: none; }
.guest__div { height: 1px; background: color-mix(in oklab, var(--amber) 22%, transparent); }
.guest__next .guest__nm { font-size: 17px; color: var(--muted); }
.guest__cta { display: flex; gap: 10px; }
.guest__cta .btn { flex: 1; min-width: 0; }
.guest__listhd { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.guest__list { display: flex; flex-direction: column; }
.grow { display: grid; grid-template-columns: 58px 11px 1fr auto; gap: 13px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.grow:last-child { border-bottom: 0; }
.grow .t { font-family: var(--mono); font-size: 14px; color: var(--fg); }
.grow .sq { width: 9px; height: 9px; border-radius: 2px; }
.grow .nm { font-weight: 600; font-size: 15px; }
.grow .ty { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.grow__clip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--amber-ink); /* AUD-F8 */ background: color-mix(in oklab, var(--amber) 10%, transparent); border: 1px solid color-mix(in oklab, var(--amber) 30%, transparent); border-radius: var(--r-chip); cursor: pointer; }
.grow__clip:hover { background: color-mix(in oklab, var(--amber) 18%, transparent); }
.grow.is-live { background: color-mix(in oklab, var(--amber) 8%, transparent); margin: 0 -8px; padding: 14px 12px; border-radius: 10px; border-bottom: 0; }
.grow.is-live .t { color: var(--amber-ink); } /* AUD-F8 */
.grow.is-past { opacity: .4; }
.guest__foot { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .04em; margin-top: 6px; }
.guest__foot .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 6px var(--green); }
.guest__note { font-size: 13.5px; color: var(--amber-soft); line-height: 1.5; background: color-mix(in oklab, var(--amber) 7%, transparent); border-radius: var(--r-chip); padding: 10px 13px; }

/* stale banner (retained from poll fallback) */
.sc-pub-stale { flex-shrink: 0; padding: 8px 16px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--warning-ink); /* AUD-F24 */ background: color-mix(in oklab, var(--warning) 12%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--warning) 30%, transparent); }
.sc-pub-stale[hidden] { display: none; }