/* Atlas layout grid (loaded last).
   One spacing system for header, side panels, caption tools and footer so
   edges line up and every control in a row shares the same height.
   Desktop: 20 px gutter, 64 px header, 76 px footer, 12 px gaps.
   Mobile atlas (< 1100 px): 8 px gutter, 44 px rows, 48 px dock. */
:root {
  --gutter: 20px;
  --head-h: 64px;
  --foot-h: 76px;
  --gap: 12px;
  --ctl-h: 40px;
  --chip-h: 36px;
  --panel-w: 320px;
  --radius: 4px;
}

/* ---------------------------------------------------------------- shared */
.view-style {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0b1412;
  flex-shrink: 0;
}
.view-style .view-style-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0 !important;
  height: calc(var(--ctl-h) - 6px);
  padding: 0 10px;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent;
  color: var(--muted);
  font-size: 12px !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.view-style .view-style-option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.view-style .view-style-option[aria-pressed='true'] {
  background: var(--accent) !important;
  color: #05160e !important;
}
.pixel-size {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 12px 0 0;
  padding: 8px 10px 10px;
}
.pixel-size legend {
  padding: 0 4px;
  font-size: 11px;
  color: var(--muted);
}
.pixel-size-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pixel-size-row button {
  min-height: 34px !important;
  padding: 0 6px;
  font-size: 12px !important;
  border: 1px solid var(--border);
  background: #0b1a22;
}
.pixel-size-row button[aria-pressed='true'] {
  border-color: var(--accent) !important;
  color: var(--accent);
}
.pixel-size:disabled {
  opacity: 0.45;
}

/* ---------------------------------------------------------------- desktop */
body:not(.mobile-atlas) > header {
  height: var(--head-h);
  min-height: 0;
  padding: 0 var(--gutter);
  gap: var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body:not(.mobile-atlas) > header .brand {
  height: var(--ctl-h);
  align-items: center;
}
body:not(.mobile-atlas) > header .brandmark {
  font-size: 30px;
  line-height: 1;
}
body:not(.mobile-atlas) > header nav {
  height: calc(var(--ctl-h) + 8px);
  padding: 3px;
  gap: 2px;
  align-items: stretch;
  border-radius: var(--radius);
}
body:not(.mobile-atlas) > header nav .navbtn {
  min-height: 0 !important;
  height: 100%;
  padding: 0 14px;
  border-radius: 2px !important;
  display: inline-flex;
  align-items: center;
}
body:not(.mobile-atlas) .header-actions {
  gap: 8px;
  align-items: center;
}
body:not(.mobile-atlas) .header-actions > .navbtn,
body:not(.mobile-atlas) .header-actions > .iconbtn,
body:not(.mobile-atlas) .header-actions > #language {
  height: var(--ctl-h);
  min-height: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: #0b1412;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body:not(.mobile-atlas) .header-actions > .navbtn {
  padding: 0 12px !important;
  font-size: 12px !important;
  color: #cfe0d8;
  white-space: nowrap;
}
body:not(.mobile-atlas) .header-actions > .iconbtn {
  width: var(--ctl-h);
  padding: 0;
  font-size: 20px;
}
body:not(.mobile-atlas) .header-actions > #language {
  width: 68px;
  padding: 0 8px;
  font-size: 13px;
}
body:not(.mobile-atlas) .header-actions > .view-style {
  height: var(--ctl-h);
  box-sizing: border-box;
}
/* Header auto-fit (src/client/ui/header-fit.mjs): cumulative steps, applied
   only while the header would otherwise clip in the current language/view. */
body:not(.mobile-atlas) > header.fit-1 nav .navbtn {
  padding: 0 10px;
}
body:not(.mobile-atlas) > header.fit-1 .header-actions {
  gap: 6px;
}
body:not(.mobile-atlas) > header.fit-1 .header-actions > .navbtn {
  padding: 0 9px !important;
}
body:not(.mobile-atlas) > header.fit-2 .view-style .view-style-option[aria-pressed='true'] span,
body:not(.mobile-atlas) > header.fit-3 .view-style .view-style-option span,
body:not(.mobile-atlas) > header.fit-5 .brand > span:not(.brandmark) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body:not(.mobile-atlas) > header.fit-2 .view-style .view-style-option[aria-pressed='true'],
body:not(.mobile-atlas) > header.fit-3 .view-style .view-style-option {
  padding: 0 9px;
}
body:not(.mobile-atlas) > header.fit-4 {
  gap: 8px;
}
body:not(.mobile-atlas) > header.fit-4 nav .navbtn {
  padding: 0 7px;
}
body:not(.mobile-atlas) > header.fit-4 .header-actions > .navbtn {
  padding: 0 7px !important;
}
body:not(.mobile-atlas) > header.fit-5 nav .navbtn {
  padding: 0 5px;
}

/* Side panels share one top edge and one bottom edge above the footer. */
body:not(.mobile-atlas) .panel.left,
body:not(.mobile-atlas) #catalog {
  top: calc(var(--head-h) + var(--gap));
  bottom: calc(var(--foot-h) + var(--gap));
  left: var(--gutter);
  width: var(--panel-w);
  padding: 16px;
}
body:not(.mobile-atlas) .detail {
  top: calc(var(--head-h) + var(--gap));
  right: var(--gutter);
  width: var(--panel-w);
  max-height: calc(100dvh - var(--head-h) - var(--foot-h) - 2 * var(--gap));
  padding: 16px;
}
body:not(.mobile-atlas) .panel:before {
  left: 16px;
}
body:not(.mobile-atlas) #catalog .panel-heading,
body:not(.mobile-atlas) .detail .panel-heading {
  min-height: 32px;
}
body:not(.mobile-atlas) #catalog .panel-heading .iconbtn,
body:not(.mobile-atlas) .detail .panel-heading .iconbtn {
  width: 32px;
  height: 32px;
  min-height: 0 !important;
  font-size: 20px;
}
body:not(.mobile-atlas) #catalog .searchbox {
  height: var(--ctl-h);
  margin: 12px 0;
  padding: 0 10px;
  box-sizing: border-box;
}
body:not(.mobile-atlas) #catalog .searchbox input {
  min-height: 0 !important;
  height: 100%;
}
body:not(.mobile-atlas) #catalog .searchbox > span {
  font-size: 18px;
}
body:not(.mobile-atlas) #catalog .tabs {
  margin-bottom: 12px;
}
body:not(.mobile-atlas) #catalog .tabs button {
  min-height: 36px !important;
  padding: 0 2px;
}
body:not(.mobile-atlas) #catalog select,
body:not(.mobile-atlas) #catalog .nearest button {
  height: var(--ctl-h);
  min-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}
body:not(.mobile-atlas) #explorePanel {
  gap: 8px;
}
body:not(.mobile-atlas) #explorePanel > select {
  width: 100%;
}
body:not(.mobile-atlas) .results-head {
  margin: 6px 0 2px;
}
body:not(.mobile-atlas) .detail-actions {
  gap: 8px;
}
body:not(.mobile-atlas) .detail > .primary,
body:not(.mobile-atlas) .detail > .secondary,
body:not(.mobile-atlas) .detail-actions button {
  min-height: var(--ctl-h) !important;
  margin-top: 8px;
}
body:not(.mobile-atlas) .detail-actions button {
  margin-top: 0;
}

/* Caption + one flowing row of equal-height tool chips. */
body:not(.mobile-atlas) .scene-caption {
  top: calc(var(--head-h) + var(--gap) + 4px);
  left: calc(var(--gutter) + var(--panel-w) + 24px);
  max-width: calc(100vw - 2 * (var(--gutter) + var(--panel-w) + 24px));
  max-height: calc(100dvh - var(--head-h) - var(--foot-h) - 3 * var(--gap));
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}
body:not(.mobile-atlas).catalog-closed .scene-caption {
  left: var(--gutter);
  max-width: calc(100vw - var(--gutter) - var(--panel-w) - 48px);
}
body:not(.mobile-atlas) .scene-caption > .eyebrow,
body:not(.mobile-atlas) .scene-caption > h1,
body:not(.mobile-atlas) .scene-caption > p {
  flex: 0 0 100%;
  margin: 0;
}
body:not(.mobile-atlas) .scene-caption > h1 {
  margin: 2px 0 0;
  line-height: 1.15;
}
body:not(.mobile-atlas) .scene-caption > p {
  margin-bottom: 8px;
}
body:not(.mobile-atlas) .scene-caption .scale-jumps,
body:not(.mobile-atlas) .scene-caption .atlas-secondary-actions {
  display: contents;
}
body:not(.mobile-atlas) .scene-caption .atlas-secondary-actions::after {
  display: none;
}
body:not(.mobile-atlas) .scene-caption .scale-jumps > button,
body:not(.mobile-atlas) .scene-caption .atlas-secondary-actions > button,
body:not(.mobile-atlas) .scene-caption .view-options > summary {
  box-sizing: border-box;
  height: var(--chip-h);
  min-height: 0 !important;
  margin: 0;
  padding: 0 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  background: #0b1a22e6;
  color: #bbdbe4;
  font-size: 12px !important;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}
body:not(.mobile-atlas) .scene-caption .view-options {
  order: 0;
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
body:not(.mobile-atlas) .scene-caption .view-options > summary {
  list-style: none;
  width: auto;
}
body:not(.mobile-atlas) .scene-caption .view-options > summary::-webkit-details-marker {
  display: none;
}
body:not(.mobile-atlas) .scene-caption .view-options > summary::after {
  content: '▾';
  font-size: 10px;
  opacity: 0.8;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] {
  flex-basis: 100%;
  max-width: 360px;
  padding: 0 0 12px;
  background: transparent;
  border: 0;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] > summary {
  margin-bottom: 8px;
  border-color: var(--accent);
  background: #0b1a22e6;
  padding: 0 12px !important;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] > :not(summary) {
  background: #091711f5;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] {
  display: flex;
  flex-direction: column;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] > label,
body:not(.mobile-atlas) .scene-caption .view-options[open] > p,
body:not(.mobile-atlas) .scene-caption .view-options[open] > fieldset,
body:not(.mobile-atlas) .scene-caption .view-options[open] > .view-grid {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-top: 0;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] > label:first-of-type {
  border-top: 1px solid var(--border);
}
body:not(.mobile-atlas) .scene-caption .view-options .pixel-size {
  border-radius: 0;
}
body:not(.mobile-atlas) .scene-caption .view-grid button {
  min-height: 34px !important;
}

/* Footer: three aligned columns on one baseline. */
body:not(.mobile-atlas) > footer {
  min-height: 0;
  height: var(--foot-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
}
body:not(.mobile-atlas) > footer .scale-info {
  justify-self: start;
  min-width: 0;
  gap: 2px;
}
body:not(.mobile-atlas) > footer .scale-info strong {
  font-size: 18px;
  line-height: 1.2;
}
body:not(.mobile-atlas) > footer #focusText {
  min-height: 0 !important;
  height: auto;
  font-size: 11px;
}
body:not(.mobile-atlas) .zoom-dock {
  box-sizing: border-box;
  height: 52px;
  width: min(440px, 40vw);
  max-width: none;
  padding: 0 8px;
  gap: 8px;
  border-radius: var(--radius);
}
body:not(.mobile-atlas) .zoom-dock > button {
  width: 36px;
  height: 36px;
  min-height: 0 !important;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 2px !important;
  font-size: 18px;
}
body:not(.mobile-atlas) .zoom-track > div {
  margin-top: 6px;
}
body:not(.mobile-atlas) > footer .gesture {
  justify-self: end;
  line-height: 1.5;
}
body:not(.mobile-atlas) .travel-status {
  bottom: calc(var(--foot-h) + var(--gap));
}
body:not(.mobile-atlas) #toast {
  bottom: calc(var(--foot-h) + 64px);
}

/* ---------------------------------------------------------------- mobile atlas */
body.mobile-atlas > header {
  align-items: center;
  row-gap: 6px;
}
body.mobile-atlas > header .header-actions {
  align-items: center;
  gap: 6px;
}
body.mobile-atlas > header .header-actions > .navbtn,
body.mobile-atlas > header .header-actions > .iconbtn,
body.mobile-atlas > header .header-actions > #language,
body.mobile-atlas > header .header-actions > .view-style {
  height: 40px;
  min-height: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: #0b1412;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.mobile-atlas > header .header-actions > .navbtn {
  padding: 0 10px !important;
  font-size: 12px !important;
}
body.mobile-atlas > header .header-actions > .iconbtn {
  width: 40px;
}
body.mobile-atlas .view-style {
  padding: 2px;
}
body.mobile-atlas .view-style .view-style-option {
  height: 34px;
  padding: 0 8px;
}
body.mobile-atlas .view-style .view-style-option span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
body.mobile-atlas > header nav {
  height: 44px;
  padding: 2px;
  border-radius: var(--radius);
}
body.mobile-atlas > header nav button {
  min-height: 0 !important;
  height: 100%;
  border-radius: 2px !important;
}
body.mobile-atlas .zoom-dock {
  height: 52px;
  padding: 4px;
  border-radius: var(--radius);
}
body.mobile-atlas .zoom-dock > button {
  width: 44px;
  height: 44px;
  min-height: 0 !important;
  border-radius: 2px !important;
}
body.mobile-atlas .mobile-dock {
  border-radius: var(--radius);
  gap: 4px;
  /* Columns follow the label length, so "Tools" lends room to "Herramientas". */
  grid-template-columns: repeat(4, auto);
}
body.mobile-atlas .mobile-dock button {
  border-radius: 2px !important;
  min-height: 48px !important;
}
/* Dock auto-fit (fitDock in src/client/ui/header-fit.mjs): long labels first
   wrap onto two lines, then the type steps down. */
body.mobile-atlas .mobile-dock.fit-1 button {
  white-space: normal !important;
  line-height: 1.1;
  overflow-wrap: normal;
}
body.mobile-atlas .mobile-dock.fit-2 button {
  font-size: 11px !important;
}
body.mobile-atlas .mobile-dock.fit-3 button {
  font-size: 10px !important;
}
body.mobile-atlas.mobile-tools-open .scene-caption .scale-jumps button,
body.mobile-atlas.mobile-tools-open .scene-caption .atlas-secondary-actions > button,
body.mobile-atlas.mobile-tools-open .scene-caption .view-options > summary {
  min-height: 44px !important;
  margin: 0;
  border-radius: 2px !important;
  font-size: 12px !important;
  text-align: center;
  justify-content: center;
}

/* Catalog column: fixed-size controls, the result list takes the rest. */
body:not(.mobile-atlas) #catalog > * {
  flex-shrink: 0;
}
body:not(.mobile-atlas) #catalog > #explorePanel,
body:not(.mobile-atlas) #catalog > #layersPanel {
  flex: 1 1 auto;
  min-height: 0;
}
body:not(.mobile-atlas) #explorePanel > *:not(#results) {
  flex-shrink: 0;
}
body:not(.mobile-atlas) #explorePanel #results {
  flex: 1 1 auto;
  min-height: 96px;
}
body:not(.mobile-atlas) > header nav {
  height: var(--ctl-h);
  padding: 2px;
}
.related-objects button {
  background: #0b1a22;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  min-height: 44px;
}

/* Compact catalog column: filters side by side, one-line data status. */
body:not(.mobile-atlas) #explorePanel:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(96px, 1fr) auto;
  gap: 8px;
  min-height: 0;
}
body:not(.mobile-atlas) #explorePanel > select {
  width: 100%;
  min-width: 0;
  font-size: 13px;
}
body:not(.mobile-atlas) #explorePanel > .results-head,
body:not(.mobile-atlas) #explorePanel > #results,
body:not(.mobile-atlas) #explorePanel > .nearest,
body:not(.mobile-atlas) #explorePanel > .catalog-search-status {
  grid-column: 1 / -1;
}
body:not(.mobile-atlas) #explorePanel > .results-head {
  margin: 4px 0 0;
}
body:not(.mobile-atlas) #explorePanel > #results {
  min-height: 0;
  overflow: auto;
}
body:not(.mobile-atlas) #explorePanel > .nearest {
  margin: 0;
  padding-top: 10px;
}
body:not(.mobile-atlas) .nearest h3 {
  margin: 0 0 8px;
}
body:not(.mobile-atlas) .nearest-row {
  gap: 8px;
}
body:not(.mobile-atlas) .catalog-footer {
  margin-top: 10px;
  padding-top: 8px;
  gap: 4px 8px;
  align-items: center;
  font-size: 11px;
}
body:not(.mobile-atlas) .catalog-footer #catalogStatus {
  flex: 1 1 100%;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.mobile-atlas) .catalog-footer #retryCatalog {
  min-height: 0 !important;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  background: #0b1a22;
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  color: inherit;
}
body:not(.mobile-atlas) #explorePanel > select {
  margin: 0;
  align-self: stretch;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] > * {
  flex-shrink: 0;
}
body:not(.mobile-atlas) .scene-caption .view-options[open] {
  max-height: calc(100dvh - var(--head-h) - var(--foot-h) - 140px);
  overflow: auto;
}

/* Mobile tools sheet: one two-column grid for every tool, options full width. */
body.mobile-atlas.mobile-tools-open .scene-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-content: start;
}
body.mobile-atlas.mobile-tools-open .scene-caption > .eyebrow,
body.mobile-atlas.mobile-tools-open .scene-caption > h1,
body.mobile-atlas.mobile-tools-open .scene-caption > p {
  grid-column: 1 / -1;
  margin: 0;
}
body.mobile-atlas.mobile-tools-open .scene-caption > h1 {
  margin-bottom: 4px;
}
body.mobile-atlas.mobile-tools-open .scene-caption .scale-jumps,
body.mobile-atlas.mobile-tools-open .scene-caption .atlas-secondary-actions {
  display: contents;
}
body.mobile-atlas.mobile-tools-open .scene-caption .atlas-secondary-actions::after {
  display: none;
}
body.mobile-atlas.mobile-tools-open .scene-caption .scale-jumps > button,
body.mobile-atlas.mobile-tools-open .scene-caption .atlas-secondary-actions > button {
  width: 100%;
  min-height: 48px !important;
  padding: 4px 8px !important;
  line-height: 1.25;
}
body.mobile-atlas.mobile-tools-open .scene-caption .view-options {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
body.mobile-atlas.mobile-tools-open .scene-caption .view-options > summary {
  width: 100%;
  min-height: 48px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--border);
  list-style: none;
}
body.mobile-atlas.mobile-tools-open .scene-caption .view-options {
  max-width: none;
}

/* --------------------------------------------- Theory Lab launcher (Pro) */
/* Same look as the production theory layer (theory-entry.css). */
.theory-launch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-color: #6fb7a078 !important;
  background: linear-gradient(110deg, #142d29aa, #192038cc) !important;
}
.theory-launch svg {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  color: #adf4dd;
}
.theory-launch small {
  font-size: 9px;
  letter-spacing: 1px;
  color: #b7eada;
  border: 1px solid #81bea652;
  border-radius: 4px;
  padding: 3px 5px;
}
.theory-launch:hover {
  border-color: #abf0d9 !important;
  box-shadow: 0 0 24px #81e3bf22;
}
#theoryDialog {
  inset: 0;
  width: 100vw;
  max-width: 100vw !important;
  height: 100dvh;
  max-height: 100dvh !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #050a10;
  overflow: hidden;
  color: #d3e9e0;
}
#theoryDialog[open] {
  display: flex;
  flex-direction: column;
}
#theoryDialog::backdrop {
  background: #02070b;
}
.theory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 18px;
  border-bottom: 1px solid #a0caba22;
  font: 11px monospace;
  letter-spacing: 1.5px;
  min-height: 43px;
  box-sizing: border-box;
}
.theory-toolbar button {
  font: 12px monospace;
  color: #ade0cc;
  border: 1px solid #9cb9ae50;
  border-radius: 5px;
  background: #12201b;
  padding: 7px 12px;
  cursor: pointer;
}
.theory-host {
  position: relative;
  flex: 1;
  min-height: 0;
}
.theory-host iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.theory-loading {
  position: absolute;
  inset: 25% 16px auto;
  text-align: center;
  color: #b5d5cc;
  font: 15px/1.7 system-ui;
}
.theory-loading button {
  background: #123329;
  color: #cdf2e5;
  border: 1px solid #638f80;
  border-radius: 6px;
  margin-top: 16px;
  padding: 12px 20px;
}
body:has(#theoryDialog[open]) {
  overflow: hidden;
}
@media (max-width: 600px) {
  .theory-toolbar {
    padding: 8px;
    font-size: 9px;
    letter-spacing: 0.4px;
  }
  .theory-launch {
    max-width: 100%;
    white-space: normal;
  }
}

/* ------------------------------------------------ Pulsar radio chip */
.pulsar-radio {
  position: fixed;
  left: 50%;
  bottom: calc(var(--foot-h) + 14px);
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--chip-h);
  padding: 6px 14px 6px 10px;
  border: 1px solid #5ff2ff66;
  border-radius: var(--radius);
  background: #06141bd9;
  color: #c9f6ff;
  font: 12px/1.2 'IBM Plex Mono', monospace;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.pulsar-radio[hidden] {
  display: none;
}
.pulsar-radio .pulsar-radio-text {
  display: grid;
  text-align: left;
}
.pulsar-radio b {
  font-weight: 600;
}
.pulsar-radio small {
  color: #8ccfdc;
  font-size: 10px;
}
/* Audio held back by the browser until a click: the chip invites one. */
.pulsar-radio.blocked {
  border-color: #ffd36bcc;
}
.pulsar-radio.blocked small {
  color: #ffd36b;
}
.pulsar-radio-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.pulsar-radio-bars i {
  width: 3px;
  height: calc(3px + 13px * var(--radio-level, 0));
  background: #5ff2ff;
  animation: pulsar-radio-tick var(--radio-period, 1s) steps(2, jump-none) infinite;
}
.pulsar-radio-bars i:nth-child(2) {
  animation-delay: calc(var(--radio-period, 1s) * -0.25);
}
.pulsar-radio-bars i:nth-child(3) {
  animation-delay: calc(var(--radio-period, 1s) * -0.5);
}
.pulsar-radio-bars i:nth-child(4) {
  animation-delay: calc(var(--radio-period, 1s) * -0.75);
}
.pulsar-radio.muted {
  border-color: #6b7f8a66;
  color: #9fb2bb;
}
.pulsar-radio.muted .pulsar-radio-bars i {
  background: #6b7f8a;
  height: 3px;
  animation: none;
}
@keyframes pulsar-radio-tick {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-radio-bars i {
    animation: none;
  }
}
body.mobile-atlas .pulsar-radio {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
  max-width: calc(100vw - 16px);
}