@font-face {
  font-family: "Share Tech Mono";
  src: url("./assets/fonts/share-tech-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The left broadcast control surface and the right ship terminal. */
.lounge-console {
  --display-line: #86e6ea3c;
  --display-cyan: #a3e6e8;
  --display-muted: #a2bfc5;
  --lounge-top: clamp(96px, 22dvh, 174px);
  --lounge-controls-top: 59dvh;
  --lounge-controls-offset: max(0px, calc(var(--lounge-controls-top) - var(--lounge-top)));
  position: fixed;
  inset: var(--lounge-top) clamp(24px, 4vw, 68px) clamp(74px, 12dvh, 108px);
  z-index: 3;
  display: grid;
  grid-template-columns: min(38vw, 444px) min(34vw, 450px);
  grid-template-rows: [lounge-top] var(--lounge-controls-offset) [lounge-controls] minmax(0, 1fr) [lounge-bottom];
  align-items: start;
  justify-content: space-between;
  pointer-events: none;
}

.news-display { grid-column: 1; grid-row: lounge-controls / lounge-bottom; }
.status-display { grid-column: 2; grid-row: lounge-top / lounge-bottom; }

.lounge-display {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #102c35f7, #07151ef7 76%);
  border: 1px solid #9fe9ed80;
  border-radius: 3px;
  box-shadow: 0 0 20px #44cbd224, inset 0 0 35px #43d2de0a;
  color: #e1eef2;
  pointer-events: auto;
}

.lounge-display-header {
  flex: none;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--display-line);
}

.status-display {
  --terminal-numeric: "Share Tech Mono", "Cascadia Mono", Consolas, monospace;
  --terminal-interface: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --terminal-heading: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
  --display-cyan: #a3ecf1;
  --display-muted: #abc1c6;
  inline-size: 100%;
  min-block-size: min(100%, 360px);
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: url("./assets/lounge-console/oratio-status-frame.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  font-family: var(--terminal-interface);
}

.lounge-terminal-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  padding: clamp(28px, 4.4dvh, 44px) 13% clamp(42px, 6.7dvh, 55px);
}

.lounge-broadcast-header {
  position: relative;
  flex: none;
  padding: 8px 10px 6px;
}

.lounge-readable-program {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lounge-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  max-inline-size: 80%;
  margin: 0 0 7px;
  padding-inline-start: 6px;
  color: #d6e5e8;
  font: 400 12px/1.35 var(--terminal-numeric);
  letter-spacing: .1em;
  white-space: nowrap;
}

.lounge-kicker strong { color: var(--display-cyan); font-weight: 400; }
.lounge-kicker span { color: #6b99a3; }
.lounge-kicker::after { content: ""; flex: 1; min-width: 8px; height: 1px; margin-inline-start: 4px; background: #85dce868; }
.lounge-display h2 { margin: 0; font-size: 22px; line-height: 1.4; letter-spacing: .06em; }
.status-display h2 { color: #eef7f5; font-family: var(--terminal-heading); font-size: clamp(30px, 3vw, 39px); font-weight: 600; line-height: 1.16; letter-spacing: .11em; }
#lounge-news-title:focus { outline: none; }

.lounge-date-control {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  gap: 7px;
  font-size: 13px;
}

.lounge-date-control label { flex: none; color: var(--display-muted); }
.lounge-date-control select {
  min-width: 0;
  max-width: 100%;
  flex: 1;
  min-height: 44px;
  padding: 7px 10px;
  color: #def4f4;
  background: #0b202a;
  border: 1px solid var(--display-line);
  border-radius: 3px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.lounge-playback { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
#lounge-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 11px;
  border: 1px solid #89d6db76;
  border-radius: 3px;
  background: #193e46;
  color: #e7fcfc;
  font-size: 13px;
  white-space: nowrap;
}

#lounge-play:hover:not(:disabled), .lounge-links button:hover, .lounge-secondary-action:hover:not(:disabled) { background: #25515a; }
#lounge-play-icon { color: var(--display-cyan); font-size: 12px; }
.lounge-secondary-action { min-height: 44px; padding: 5px 9px; border: 1px solid var(--display-line); border-radius: 3px; color: #c1eaed; font-size: 13px; }
.lounge-secondary-action[aria-pressed="true"], .lounge-secondary-action[aria-expanded="true"] { background: #193e46; }
.lounge-broadcast-settings { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lounge-console[data-selection-mode="scheduled"] .lounge-broadcast-settings { flex-wrap: wrap; row-gap: 3px; }
.lounge-console[data-selection-mode="scheduled"] .lounge-date-control { flex-basis: 300px; }
.lounge-console[data-selection-mode="scheduled"] .lounge-volume { margin-inline-start: auto; }
.lounge-volume { display: flex; align-items: center; gap: 5px; color: var(--display-muted); font-size: 12px; white-space: nowrap; }
.lounge-volume input { width: clamp(62px, 8vw, 96px); margin: 0; min-height: 44px; accent-color: var(--display-cyan); }
.lounge-audio-status { margin: 4px 0 0; min-height: 1.35em; color: var(--display-cyan); font-size: 12px; }

.lounge-ad {
  flex: none;
  margin-block: 30px 0;
  padding: 8px 6px 10px;
  border-top: 1px solid var(--display-line);
  background: #09151e;
  color: #a2bfc5;
  text-align: center;
}
.lounge-ad-label { margin: 0 0 5px; font-size: 11px; line-height: 1.35; }
.lounge-ad-preview { display: grid; place-items: center; border: 1px dashed #4a6671; font-size: 11px; }
@media (min-width: 761px) and (min-aspect-ratio: 29 / 25) {
  .news-display:has(.lounge-ad:not([hidden])) {
    max-height: calc(100dvh - var(--lounge-controls-top) - max(28px, env(safe-area-inset-bottom)));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .news-display:has(.lounge-ad:not([hidden])) .lounge-news-scroll {
    flex: none;
    overflow: visible;
  }
}

.lounge-news-scroll, .lounge-status-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4d848d #0b2028;
}

.lounge-news-scroll { padding: 0 18px 12px; border-top: 1px solid var(--display-line); }
.lounge-reading-heading { margin: 13px 0 0; color: var(--display-cyan); font-size: 16px; }
.lounge-article { padding: 12px 0 13px; border-bottom: 1px solid var(--display-line); }
.lounge-article-time { color: var(--display-cyan); font: 13px/1.4 Arial, sans-serif; font-variant-numeric: tabular-nums; }
.lounge-article h3 { margin: 3px 0 5px; font-size: 17px; line-height: 1.48; letter-spacing: .02em; }
.lounge-article-body, .lounge-placeholder { margin: 0; color: #d8e9eb; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.lounge-article-source { margin: 4px 0 0; color: var(--display-muted); font-size: 12px; line-height: 1.45; }
.lounge-placeholder { margin-block: 12px; }
.lounge-transcript summary { display: list-item; min-height: 44px; padding-block: 12px; color: var(--display-cyan); cursor: pointer; }
#lounge-transcript-text { margin: 0 0 6px; white-space: pre-line; font-size: 14px; line-height: 1.65; }

.lounge-status-date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: var(--display-muted); font-size: 12px; }
.lounge-status-date time { color: var(--display-cyan); font: 400 20px/1.15 var(--terminal-numeric); letter-spacing: .06em; }
.lounge-status-content { flex: 1 1 auto; padding-inline-end: 2px; }
.lounge-status-content > .lounge-placeholder { padding-block: 9px; font-size: 13px; }
.lounge-status-values { margin: 0; }
.lounge-status-values > div {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 11px;
  padding-block: 10px;
  border-bottom: 1px solid var(--display-line);
}

.lounge-status-values dt { color: var(--display-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.lounge-status-values dd { min-width: 0; margin: 0; color: #e2f3f4; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.lounge-status-row--reserve dd { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px; }
.lounge-reserve-amounts { white-space: nowrap; font: 400 14px/1 var(--terminal-numeric); }
.lounge-reserve-current { color: var(--display-cyan); font-size: clamp(23px, 2.1vw, 30px); }
.lounge-reserve-divider { color: #7f9fa8; }
.lounge-reserve-limit { color: #d5e8eb; }
.lounge-status-row--attention dd { color: #f2c483; }
.lounge-gauge { display: block; min-width: 0; height: 6px; background: repeating-linear-gradient(to right, #24424c 0 3px, #091c25 3px 5px); overflow: hidden; }
.lounge-gauge span { display: block; height: 100%; background: repeating-linear-gradient(to right, #a3ecf1 0 3px, #091c25 3px 5px); }
.lounge-links { display: grid; grid-template-columns: minmax(44px, .72fr) minmax(0, 1fr) minmax(0, 1.55fr); padding-top: 6px; }
.lounge-links button { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 44px; min-height: 44px; padding: 4px 6px; color: #e1f3f4; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.lounge-links button + button { border-inline-start: 1px solid var(--display-line); }
.lounge-links button:hover { background: #a3ecf11c; color: #fff; }
.lounge-links span { flex: none; color: var(--display-cyan); font-size: 16px; }
.lounge-display :is(select, summary, .lounge-news-scroll):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lounge-display button:focus-visible { outline-offset: -2px; }

.is-interior .voyage-telemetry { display: none; }
.is-interior .voyage-footer { justify-content: flex-end; }

@media (max-width: 760px), (max-aspect-ratio: 29 / 25) {
  .lounge-console {
    inset: 43dvh 0 max(69px, calc(env(safe-area-inset-bottom) + 55px));
    display: block;
    padding: 0 max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #4d848d #0b2028;
    pointer-events: auto;
  }
  .lounge-display { max-height: none; }
  .status-display { min-block-size: 350px; max-inline-size: 450px; margin: 13px auto 0; }
  .lounge-news-scroll, .lounge-status-content { overflow: visible; }
  .lounge-volume input { width: 76px; }
}

@media (max-width: 440px) {
  .lounge-terminal-body { padding-block: 26px 42px; }
  .lounge-display-header { padding-block-end: 7px; }
  .lounge-kicker { margin-block-end: 4px; }
  .lounge-status-date { margin-block-start: 4px; }
  .lounge-status-values > div { padding-block: 6px; gap: 8px; }
  .lounge-status-row--reserve dd { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lounge-links { padding-top: 4px; }
  .lounge-links button { padding-inline: 4px; font-size: 11px; }
}

@media (max-height: 520px) and (min-width: 761px) {
  .lounge-console { --lounge-top: 60px; inset-block-end: 60px; }
  .lounge-display { overflow: auto; }
  .lounge-news-scroll, .lounge-status-content { overflow: visible; }
}