/* Shared viewer design. On-air pages deliberately do not import this file. */
:root {
  color-scheme:dark;
  --bg:#101418;
  --panel:#181e24;
  --raise:#222a32;
  --line:#3b4651;
  --line-hi:#687786;
  --text:#e7ebef;
  --dim:#b6bec8;
  --faint:#a2adba;
  --accent:#b9d69a;
  --accent-dim:#263321;
  --bad:#ff968c;
  --measure:76rem;
  --ink:var(--text);
  --paper:var(--bg);
  --rule:var(--line);
  --muted:var(--dim);
  --accent-soft:var(--panel);
  --shell:var(--panel);
  --card:var(--panel);
  --edge:var(--line);
  --edge2:var(--line-hi);
  --fg:var(--text);
  --ok:var(--accent);
  --amber:var(--raise);
  --amber-ink:var(--text);
  --moss:var(--accent-dim);
  --moss-ink:var(--text);
  --warn:#e6c17a
}

* {
  box-sizing:border-box
}

html {
  -webkit-text-size-adjust:100%;
  background:var(--bg)
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 monospace;
  padding:0 0 48px
}

button,input,select,textarea {
  font:inherit
}

a {
  color:var(--accent);
  text-decoration:none
}

a:hover {
  text-decoration:underline
}

button,a,input,textarea,select {
  touch-action:manipulation
}

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}

[hidden] {
  display:none!important
}

.site-head {
  max-width:calc(var(--measure) + 48px);
  margin:auto;
  padding:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

.brand {
  color:var(--text);
  font-size:26px;
  letter-spacing:-1.5px;
  font-weight:700;
  white-space:nowrap
}

.brand:hover {
  text-decoration:none
}

.brand-mark {
  display:inline-grid;
  place-content:center;
  background:var(--accent);
  color:var(--bg);
  width:34px;
  height:34px;
  margin-right:10px;
  font-size:23px;
  letter-spacing:-4px;
  padding-right:4px;
  vertical-align:middle
}

.site-nav {
  display:flex;
  gap:24px;
  align-items:center
}

.site-nav a {
  color:var(--dim);
  font-size:12px
}

.site-nav a[aria-current=page] {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:6px
}

.site-nav .operator-link {
  border-left:1px solid var(--line-hi);
  padding-left:24px
}

.wrap {
  max-width:var(--measure);
  margin:0 auto;
  padding:28px 24px 0
}

.wrap.narrow {
  max-width:48rem
}

.head,.masthead {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:20px 0;
  border-top:3px solid var(--text);
  border-bottom:1px solid var(--line-hi);
  margin-bottom:32px
}

h1 {
  font-size:clamp(26px,4vw,44px);
  font-weight:400;
  letter-spacing:-1.8px;
  line-height:1.1;
  margin:0
}

h2 {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 16px
}

h3 {
  font-size:15px;
  font-weight:700;
  margin:0 0 6px
}

p {
  margin:0 0 16px
}

code {
  font:inherit;
  color:var(--text);
  overflow-wrap:anywhere
}

.two {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);
  gap:48px;
  align-items:start
}

.two>* {
  min-width:0
}

.stack>*+* {
  margin-top:18px
}

label {
  display:block;
  font-size:12px;
  color:var(--dim);
  margin-bottom:6px
}

input,textarea,select {
  width:100%;
  padding:12px;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line-hi);
  border-radius:0
}

input::placeholder,textarea::placeholder {
  color:var(--faint)
}

input:focus,textarea:focus,select:focus {
  outline:2px solid var(--accent);
  outline-offset:1px
}

textarea {
  resize:vertical;
  line-height:1.6
}

select {
  appearance:auto
}

button,.btn {
  font:inherit;
  font-size:13px;
  cursor:pointer;
  padding:11px 16px;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--text);
  border-radius:0;
  display:inline-block;
  text-decoration:none;
  transition:background .12s,color .12s
}

button:hover,.btn:hover {
  background:var(--text);
  color:var(--raise);
  text-decoration:none
}

button.primary,.btn.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg)
}

button.primary:hover,.btn.primary:hover {
  background:#d0e4bb
}

button.danger {
  color:var(--bad);
  border-color:var(--bad)
}

button.danger:hover {
  background:var(--bad);
  color:var(--bg)
}

button:disabled {
  opacity:.45;
  cursor:default
}

button.wide {
  width:100%
}

.row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center
}

.drop {
  display:grid;
  place-items:center;
  gap:8px;
  text-align:center;
  min-height:190px;
  padding:24px;
  background:var(--panel);
  border:1px dashed var(--line-hi);
  cursor:pointer;
  color:var(--dim)
}

.drop:hover,.drop.over {
  border-color:var(--accent);
  background:var(--accent-dim)
}

.drop .hint {
  font-size:11px
}

.drop input[type=file] {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  opacity:0
}

.drop:focus-within {
  outline:2px solid var(--accent)
}

.drop.chosen {
  color:var(--accent);
  border-style:solid
}

.live {
  border-left:1px solid var(--line-hi);
  padding-left:24px
}

.live+.live {
  margin-top:26px
}

.now {
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden
}

.now img,.now video {
  display:block;
  width:100%;
  background:#000
}

.now .cap {
  padding:12px;
  font-size:13px;
  overflow-wrap:anywhere
}

.count {
  font-variant-numeric:tabular-nums
}

.meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--dim);
  padding:12px 0;
  border-bottom:1px solid var(--line)
}

.meta b {
  font-weight:400;
  color:var(--text)
}

.empty {
  font-size:12px;
  color:var(--faint);
  padding:12px 0
}

ul.plain {
  list-style:none;
  padding:0;
  margin:0
}

ul.plain li {
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  overflow-wrap:anywhere
}

ul.plain .sub {
  display:block;
  font-size:12px;
  color:var(--dim);
  margin-top:4px
}

.msg {
  min-height:20px;
  font-size:13px;
  margin:0
}

.msg.bad,.bad {
  color:var(--bad)
}

.msg.ok,.ok {
  color:var(--accent)
}

.dim,small,.sub {
  color:var(--dim)
}

small {
  font-size:12px
}

.links {
  margin-top:32px;
  font-size:12px
}

.links a {
  margin-right:16px
}

.panel {
  background:var(--panel);
  border:1px solid var(--line-hi);
  padding:20px;
  margin:16px 0
}

.panel.quiet {
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  padding:18px 0 0
}

.status {
  min-height:20px;
  font-size:13px;
  margin-top:12px
}

.eyebrow {
  font-size:11px;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 8px
}

.lede {
  color:var(--dim);
  margin:8px 0 0
}

.rule {
  border:0;
  border-top:1px solid var(--line);
  margin:26px 0
}

.wordmark {
  font-weight:700;
  color:var(--text)
}

.grid {
  display:grid;
  gap:0
}

dialog {
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--text);
  border-radius:0
}

dialog::backdrop {
  background:#20231f99
}

/* The stream is the first and largest thing on the page. */
.watch-wrap {
  max-width:var(--measure);
  margin:auto;
  padding:0 24px
}

.broadcast-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:3px solid var(--text);
  padding:14px 0
}

.broadcast-head h1 {
  font-size:14px;
  letter-spacing:0;
  font-weight:400
}

.broadcast-head .eyebrow {
  margin:0
}

.signal-square {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  margin-right:8px
}

.broadcast-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  border:1px solid var(--text)
}

.broadcast-main {
  min-width:0;
  background:#171916;
  color:#e8e8e3
}

.player {
  aspect-ratio:16/9;
  background:#10120f;
  position:relative
}

.player iframe {
  position:absolute;
  width:100%;
  height:100%;
  border:0
}

.player-bar {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:14px 18px;
  font-size:11px;
  border-top:1px solid #43463e;
  color:#b4b9ad
}

.player-bar a {
  color:#d1d8fc
}

.audio-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #43463e
}

.audio-shortcut {
  color:inherit;
  background:transparent;
  border:0;
  text-align:left;
  padding:22px 18px;
  min-width:0
}

.audio-shortcut+ .audio-shortcut {
  border-left:1px solid #43463e
}

.audio-shortcut .eyebrow {
  color:#b4b9ad;
  display:block
}

.audio-shortcut code {
  color:#e3ef9e;
  font-size:clamp(15px,1.5vw,20px)
}

.audio-shortcut .arrow {
  float:right;
  color:#e3ef9e
}

.interact {
  background:var(--panel);
  border-left:1px solid var(--text);
  min-width:0;
  display:flex;
  flex-direction:column
}

.rail-head {
  padding:16px;
  border-bottom:1px solid var(--line-hi);
  display:flex;
  justify-content:space-between;
  font-size:12px
}

.rail-head span:last-child {
  color:var(--dim)
}

.rail-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--text)
}

.rail-tabs button {
  padding:10px 0;
  border:0;
  font-size:11px;
  background:transparent
}

.rail-tabs button[aria-selected=true] {
  background:var(--text);
  color:var(--raise)
}

.rail-tabs button:hover {
  color:var(--accent);
  background:var(--accent-dim)
}

.rail-content {
  padding:20px 16px;
  flex:1;
  min-height:340px
}

.rail-content h2 {
  margin-bottom:20px
}

.rail-content label {
  margin-top:16px
}

.rail-content .primary {
  width:100%;
  margin-top:16px
}

.rail-content code {
  font-size:12px
}

.rail-content .msg {
  font-size:11px;
  margin-top:12px
}

.rail-note {
  font-size:11px;
  color:var(--dim);
  margin-top:16px
}

.rail-frame {
  width:100%;
  height:540px;
  border:0;
  display:block
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:28px;
  border-top:1px solid var(--text);
  border-bottom:1px solid var(--text)
}

.feature-link {
  padding:22px 18px 22px 0;
  color:var(--text);
  min-width:0
}

.feature-link+.feature-link {
  border-left:1px solid var(--line-hi);
  padding-left:20px
}

.feature-link:hover {
  text-decoration:none;
  background:var(--panel)
}

.feature-link .feature-number {
  display:block;
  font-size:10px;
  color:var(--dim);
  margin-bottom:18px
}

.feature-link strong {
  font-size:17px;
  font-weight:400;
  letter-spacing:-.5px;
  display:flex;
  justify-content:space-between;
  gap:8px
}

.feature-link small {
  display:block;
  font-size:11px;
  margin-top:6px
}

.embedded .site-head,.embedded .head {
  display:none
}

.embedded body {
  padding-bottom:16px
}

.embedded .wrap {
  padding:16px;
  max-width:none
}

.embedded .two {
  grid-template-columns:1fr;
  gap:22px
}

.embedded .live {
  border-left:0;
  border-top:1px solid var(--line);
  padding:20px 0 0
}

.embedded .drop {
  min-height:110px
}

@media(min-width:1500px) {
  :root {
    --measure:88rem
  }

  .broadcast-grid {
    grid-template-columns:minmax(0,1fr) 350px
  }

}

@media(max-width:900px) {
  .broadcast-grid {
    grid-template-columns:minmax(0,1fr) 290px
  }

  .site-nav {
    gap:16px
  }

  .site-head {
    padding:20px 24px
  }

  .audio-strip {
    grid-template-columns:1fr
  }

  .audio-shortcut {
    padding:14px 18px
  }

  .audio-shortcut+.audio-shortcut {
    border-left:0;
    border-top:1px solid #43463e
  }

  .audio-shortcut .eyebrow {
    display:inline;
    margin-right:10px
  }

  .audio-shortcut code {
    font-size:14px
  }

  .two {
    gap:24px
  }

}

@media(max-width:700px) {
  .site-head {
    padding:18px 16px;
    gap:12px;
    flex-wrap:wrap
  }

  .brand {
    font-size:23px
  }

  .brand-mark {
    width:28px;
    height:28px;
    font-size:20px
  }

  .site-nav {
    gap:16px
  }

  .site-nav .operator-link {
    padding-left:16px
  }

  .watch-wrap {
    padding:0 16px
  }

  .broadcast-grid {
    grid-template-columns:1fr
  }

  .broadcast-head .eyebrow {
    font-size:10px
  }

  .interact {
    border-left:0;
    border-top:1px solid var(--text)
  }

  .rail-tabs {
    grid-template-columns:repeat(4,1fr)
  }

  .rail-content {
    min-height:0
  }

  .rail-frame {
    height:540px
  }

  .feature-grid {
    grid-template-columns:1fr 1fr;
    margin-top:20px
  }

  .feature-link {
    padding:18px 12px!important
  }

  .feature-link:nth-child(3) {
    border-left:0
  }

  .feature-link:nth-child(n+3) {
    border-top:1px solid var(--line-hi)
  }

  .feature-link .feature-number {
    margin-bottom:10px
  }

  .feature-link strong {
    font-size:15px
  }

  .wrap {
    padding:16px
  }

  .two {
    grid-template-columns:1fr;
    gap:28px
  }

  .live {
    border-left:0;
    border-top:1px solid var(--line);
    padding:22px 0 0
  }

  .head {
    margin-bottom:24px
  }

  .player-bar {
    padding:12px;
    font-size:10px
  }

  .audio-strip {
    grid-template-columns:1fr 1fr
  }

  .audio-shortcut {
    padding:14px 12px
  }

  .audio-shortcut+.audio-shortcut {
    border-top:0;
    border-left:1px solid #43463e
  }

  .audio-shortcut .eyebrow {
    display:block;
    margin-bottom:4px;
    font-size:10px
  }

  .audio-shortcut code {
    font-size:12px
  }

  .audio-shortcut .arrow {
    display:none
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }

}

/* A box that does not serve the viewer extras has nothing to put in the rail. */
.interact:not(:has([role=tab])),
.feature-grid:not(:has(a)) {
  display:none
}

.broadcast-grid:not(:has(.interact [role=tab])) {
  grid-template-columns:1fr
}