.b27-live-state { display: grid; grid-template-columns: minmax(12rem, .42fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2.5rem, 5vw, 5rem) var(--b27-gutter); border-block-start: 1px solid var(--b27-line-dark); background: var(--b27-navy-950); color: var(--b27-ink); }
.b27-live-state[hidden], .b27-live-state [hidden] { display: none; }
.b27-live-state .b27-eyebrow { color: #c8d5d2; }
.b27-live-state__header h2 { max-width: 7ch; margin: 0; font-size: clamp(2rem, 4vw, 4.5rem); font-weight: 560; letter-spacing: -.045em; line-height: .94; }
.b27-live-state__connection { max-width: 28ch; margin-block: 1.25rem 0; padding-inline-start: .85rem; border-inline-start: 2px solid var(--b27-teal-500); color: #d2ddda; }
.b27-live-state__public, .b27-live-state__personal { align-self: start; }
.b27-live-state__public > h3, .b27-live-state__personal > h3 { margin: 0 0 1rem; color: #c8d5d2; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.b27-live-state__alerts, .b27-live-state__rooms { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.b27-live-alert, .b27-live-room { padding-block: 1.15rem; border-block-start: 1px solid var(--b27-line-dark); }
.b27-live-alert__severity { margin: 0 0 .5rem; color: #aebdbb; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.b27-live-alert--important, .b27-live-alert--critical { border-inline-start: 2px solid var(--b27-teal-500); padding-inline-start: .9rem; }
.b27-live-alert h3 { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 650; letter-spacing: -.015em; }
.b27-live-alert > p:not(.b27-live-alert__severity) { max-width: 50ch; margin: .45rem 0 0; color: #d2ddda; }
.b27-live-alert__actions { display: flex; flex-wrap: wrap; gap: .65rem 1rem; align-items: center; margin-block-start: .8rem; }
.b27-live-alert__actions button, .b27-live-state__action { display: inline-flex; min-height: 44px; align-items: center; padding: .45rem .7rem; border: 1px solid currentColor; border-radius: var(--b27-radius); background: transparent; color: var(--b27-ink); font-size: .875rem; font-weight: 600; }
.b27-live-alert__actions button { cursor: pointer; }
.b27-live-alert__actions button[aria-busy="true"] { cursor: wait; opacity: .7; }
.b27-live-alert__acknowledged { color: #c8d5d2; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.b27-live-room { display: grid; gap: .2rem; }
.b27-live-room strong { text-transform: capitalize; }
.b27-live-room span, .b27-live-state__next { color: #c8d5d2; }
.b27-live-state__next { margin-block: 0 1rem; }
.b27-live-state__next a { display: inline-flex; min-height: 44px; align-items: center; }

@media (max-width: 767px) {
  .b27-live-state { grid-template-columns: 1fr; gap: 2rem; }
  .b27-live-state__header h2 { font-size: clamp(2.5rem, 13vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .b27-live-state *, .b27-live-state *::before, .b27-live-state *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}