/* Layout only: optical materials remain in the twenty-two era stylesheets.
   site-music.js marks the active dock/scope and measures the complete header.
   All content offsets use that measurement, including wrapped toolbars. */

[data-music-dock] {
  min-width: 0;
  overflow: visible;
}
[data-music-dock] > #zhubo-music {
  flex: 0 0 98px;
  width: 98px;
  min-height: 52px;
  padding: 0;
  margin-block: 0;
}

/* Curatorial home: the brand and navigation keep their own natural rows. */
.curatorial-home[data-music-scope="home"] .ch-header {
  /* Keep the settings popover above the later hero copy and content stars. */
  z-index: 30;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  gap: 10px 24px;
  overflow: visible;
}
.curatorial-home[data-music-scope="home"] .ch-brand-group {
  flex: 0 1 auto;
  min-width: 0;
}
html[data-glass-era] .curatorial-home .ch-header nav[data-music-dock="home"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  max-width: 100%;
  gap: 4px;
  overflow: visible;
}
.curatorial-home[data-music-scope="home"] .ch-hero-copy {
  top: max(36%, calc(var(--music-dock-bottom, 90px) + 24px));
}

/* Stellar overview / roaming: the same toolbar can grow without covering
   the directory or the region panel below it. */
#stellar-wave[data-music-scope="wave"] :is(.sw-header, .sw-top) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  gap: 8px 18px;
  overflow: visible;
}
html #stellar-wave#stellar-wave .sw-top-controls[data-music-dock="wave"] {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  max-width: 100%;
  margin-left: auto;
  overflow: visible;
}
#stellar-wave .sw-top-controls[data-music-dock="wave"] > :not(#zhubo-music) {
  flex: 0 0 auto;
}
#stellar-wave[data-music-scope="wave"] .sw-hero {
  top: max(17%, calc(var(--music-dock-bottom, 85px) + 20px));
}
#stellar-wave[data-music-scope="wave"] .sw-atlas[data-presentation="directory"] {
  top: max(94px, calc(var(--music-dock-bottom, 82px) + 12px));
}
#stellar-wave[data-music-scope="wave"]:not([data-region-level="overview"]) .sw-region-legend {
  top: calc(var(--music-dock-bottom, 90px) + 8px);
}
@media (min-width: 701px) {
  #stellar-wave[data-music-scope="wave"] .sw-region-panel {
    top: max(100px, calc(var(--music-dock-bottom, 88px) + 12px));
  }
}

/* Reader: the header is measured after wrapping; the reading canvas starts
   immediately below it rather than relying on the former 65/89px constants. */
#stellar-wave#stellar-wave .sw-reader-top[data-music-dock="reader"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  gap: 8px 12px;
  padding-block: 10px;
  overflow: visible;
}
#stellar-wave .sw-reader-top[data-music-dock="reader"] .sr-edition {
  flex: 1 1 150px;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
#stellar-wave .sw-reader-top[data-music-dock="reader"] > :is(button, #zhubo-music) {
  flex-shrink: 0;
}
#stellar-wave#stellar-wave .sw-reader[data-music-scope="reader"] > .sr-layout {
  top: calc(var(--music-dock-bottom, 88px) + 1px);
  bottom: 0;
}
/* Chapter navigation stays at its place in the reading flow. Two sticky
   rows used to cover each other and the text in short reading columns. */
#stellar-wave#stellar-wave .sw-reader[data-music-scope="reader"] .sw-reading :is(.sr-chapters,.sr-pagination) {
  position: relative;
  inset: auto;
  z-index: auto;
}
#stellar-wave .sw-reader[data-music-scope="reader"] .sw-reading {container-type:inline-size;container-name:reading-card}
@container reading-card (max-width:420px) {
  #stellar-wave#stellar-wave .sr-pagination .sr-next > span:nth-child(2) {display:none}
  #stellar-wave#stellar-wave .sr-pagination .sr-page-count {white-space:nowrap;flex-shrink:0}
}

/* Dialog headers stay in normal document flow, so their bodies follow all
   wrapped title/actions. Overflow is deliberately allowed on the toolbar. */
dialog[data-music-scope] > header[data-music-dock],
dialog[data-music-scope] .dialog-top[data-music-dock] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  flex: 0 0 auto;
  gap: 8px 12px;
  overflow: visible;
}
dialog[data-music-scope] > header[data-music-dock] > :not(button, #zhubo-music),
dialog[data-music-scope] .dialog-top[data-music-dock] > :not(button, #zhubo-music) {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
dialog[data-music-scope] :is(.ch-dialog-body, .dialog-scroll, .sw-atlas-results) {
  min-height: 0;
}
dialog[data-music-scope] [data-music-dock="dialog"] > #zhubo-music {order:1}
dialog[data-music-scope] [data-music-dock="dialog"] > button {order:2}
dialog[data-music-scope] [data-music-dock="dialog"] > #layerBack {order:-1}
/* Compact directory layouts previously placed search beside a hidden title.
   A real music dock needs that space, so search/filters return to normal flow. */
#stellar-wave .sw-atlas[data-presentation="directory"][data-music-scope] > header[data-music-dock] {
  display: flex;
  max-width: none;
}
#stellar-wave .sw-atlas[data-presentation="directory"][data-music-scope] :is(.sw-atlas-search, .sw-research-era, .sw-atlas-count) {
  position: relative;
  inset: auto;
  width: auto;
  max-width: none;
}
#stellar-wave .sw-atlas[data-presentation="directory"][data-music-scope] .sw-atlas-context {
  max-width: none;
  flex-wrap: wrap;
}

/* Legacy archive pages have fixed headers and panels. Grow the header, then
   reserve its measured bottom for every existing top-anchored panel. */
html[data-site-runtime="archive"] body.single-universe .app[data-music-scope="archive"] .header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  height: auto;
  min-height: 100px;
  padding-block: 12px;
  gap: 8px 22px;
  overflow: visible;
}
html[data-site-runtime="archive"] .header .cosmic-primary[data-music-dock="archive"] {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 6px 12px;
  margin-left: auto;
  overflow: visible;
}
html[data-site-runtime="archive"] body.single-universe .app[data-music-scope="archive"] #civilization-deep-cosmos#civilization-deep-cosmos .cu-panel {
  top: calc(var(--music-dock-bottom, 100px) + 12px);
  max-height: calc(100dvh - var(--music-dock-bottom, 100px) - 28px);
}

@media (max-width: 800px) {
  html[data-site-runtime="archive"] body.single-universe .app[data-music-scope="archive"] .header {
    min-height: 78px;
    padding-block: 8px;
    gap: 8px 12px;
  }
}
@media (max-width: 760px) {
  .curatorial-home[data-music-scope="home"] .ch-header {
    align-items: center;
    gap: 10px 12px;
  }
  html[data-glass-era] .curatorial-home .ch-header nav[data-music-dock="home"] {
    flex: 1 1 100%;
    gap: 2px;
    justify-content: space-between;
  }
  .curatorial-home[data-music-scope="home"] .ch-hero {
    padding-top: max(132px, calc(var(--music-dock-bottom, 112px) + 20px));
  }
  .curatorial-home[data-music-scope="home"] .ch-hero-copy {
    top: auto;
  }
}
@media (max-width: 700px) {
  #stellar-wave[data-music-scope="wave"] :is(.sw-header, .sw-top) {
    align-items: flex-start;
    gap: 6px 8px;
  }
  html #stellar-wave#stellar-wave .sw-top-controls[data-music-dock="wave"] {
    flex: 1 1 220px;
    gap: 4px;
  }
  html #stellar-wave#stellar-wave .sw-top-controls[data-music-dock="wave"] > button {
    min-height: 44px;
    padding: 6px 8px;
  }
  #stellar-wave[data-music-scope="wave"] .sw-atlas[data-presentation="directory"] {
    top: max(86px, calc(var(--music-dock-bottom, 74px) + 12px));
  }
  #stellar-wave[data-music-scope="wave"] .sw-region-panel {
    max-height: min(45dvh, calc(100dvh - var(--music-dock-bottom, 90px) - 207px - env(safe-area-inset-bottom, 0px)));
  }
}
@media (max-width: 600px) {
  #stellar-wave#stellar-wave .sw-reader-top[data-music-dock="reader"] {
    min-height: 64px;
    flex-wrap: nowrap;
    gap: 6px 8px;
    padding-block: 8px;
  }
  #stellar-wave .sw-reader-top[data-music-dock="reader"] .sr-edition {
    display: none;
    flex-basis: 110px;
    font-size: 10px;
    letter-spacing: .08em;
  }
  #stellar-wave .sw-reader-top[data-music-dock="reader"] .sr-motion {
    margin-left: auto;
  }
  dialog[data-music-scope] > header[data-music-dock],
  dialog[data-music-scope] .dialog-top[data-music-dock] {
    gap: 6px 8px;
  }
}
@media (max-width: 420px) {
  html[data-glass-era] .curatorial-home .ch-header nav[data-music-dock="home"] > :not(#zhubo-music) {
    padding-inline: 9px;
  }
  html[data-site-runtime="archive"] body.single-universe .app[data-music-scope="archive"] .header {
    padding-inline: 16px;
    column-gap: 8px;
  }
  html[data-site-runtime="archive"] .header .cosmic-primary[data-music-dock="archive"] {
    gap: 4px 6px;
  }
}
@media (max-height: 500px) and (min-width: 500px) {
  #stellar-wave[data-music-scope="wave"] :is(.sw-header, .sw-top) {
    top: 8px;
    gap: 4px 10px;
  }
  html #stellar-wave#stellar-wave .sw-top-controls[data-music-dock="wave"] {
    flex-basis: auto;
    gap: 2px 6px;
  }
  #stellar-wave[data-music-scope="wave"] .sw-atlas[data-presentation="directory"],
  #stellar-wave[data-music-scope="wave"] .sw-region-panel {
    top: calc(var(--music-dock-bottom, 62px) + 8px);
  }
  #stellar-wave[data-music-scope="wave"] .sw-region-panel {
    max-height: calc(100dvh - var(--music-dock-bottom, 62px) - 82px);
  }
  #stellar-wave#stellar-wave .sw-reader-top[data-music-dock="reader"] {
    min-height: 58px;
    padding-block: 3px;
    gap: 4px 8px;
  }
  html[data-site-runtime="archive"] body.single-universe .app[data-music-scope="archive"] .header {
    min-height: 62px;
    padding-block: 4px;
    gap: 4px 12px;
  }
}

/* On portrait-sized screens the utility pair sits beside the brand; the
   browsing controls occupy their own full-width row below it. */
@media (max-width: 700px) {
  #stellar-wave[data-music-scope="wave"] .sw-header {gap:6px 8px}
  #stellar-wave[data-music-scope="wave"] .sw-header > .sw-brand {height:52px;min-height:52px;padding-block:0}
  html #stellar-wave#stellar-wave .sw-top-controls[data-music-dock="wave"] {position:relative;flex:0 0 100%;width:100%;margin-left:0;justify-content:space-between;gap:4px}
  #stellar-wave .sw-top-controls[data-music-dock="wave"] > #zhubo-music {position:absolute;top:-58px;right:0}
  #stellar-wave #zhubo-music[data-dock="wave"] .zm-bar {background:var(--eg-light-surface);border-color:var(--eg-border);box-shadow:var(--eg-inner),0 8px 24px #0003;backdrop-filter:blur(var(--g-blur)) saturate(var(--g-saturate));-webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-saturate))}
}

/* Keep chronology controls whole. A narrow viewport can scroll the panel
   vertically rather than hiding filters beyond an unmarked horizontal edge. */
@media (max-width: 900px) {
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono.cu-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px 24px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-tools {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-content {
    flex: 1 0 380px;
    min-height: 380px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono :is(.cu-chrono-views,.cu-hzoom) {
    flex: 1 1 auto;
    max-width: 100%;
    justify-content: center;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-filters {
    order: 3;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    flex: 1 0 100%;
    min-width: 0;
    width: 100%;
    gap: 6px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono :is(.cu-chrono-views,.cu-chrono-filters,.cu-hzoom) button {
    min-height: 44px;
    min-width: 44px;
    flex: 1 1 auto;
    padding-inline: 10px;
    white-space: normal;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono label.cu-chrono-era {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono label.cu-chrono-era select {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
  }
}

/* The chart's era rows, regime lanes, event tags and cursor need a real
   minimum height on short desktop windows too. Scroll the containing panel. */
html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono.cu-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-content {
  flex: 1 0 380px;
  min-height: 380px;
}
html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-scroll-hint {
  bottom: 2px;
  max-width: 100%;
}
html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hreadout {
  bottom: 28px;
}
@media (min-width: 901px) and (max-height: 820px) {
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono.cu-panel {
    top: 72px !important; bottom: 12px !important; max-height: none !important; padding: 12px 26px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-result-header h2 {
    font-size: 28px; margin-block: 6px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-sub {
    max-width: none; font-size: 12px; line-height: 1.6;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-tools {
    margin-top: 10px; gap: 6px 12px; padding-bottom: 8px;
  }
}
@media (max-width: 480px) {
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-chrono-filters {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* Reserve a clear inset for the era picker indicator without changing the native menu. */
html[data-site-era] #stellar-wave#stellar-wave .sh-era-picker select {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
}
html[data-site-era] #stellar-wave#stellar-wave .sh-era-picker::after {
  content: ""; position: absolute; right: 16px; bottom: 19px;
  width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none;
}
@media (forced-colors: active) {
  html[data-site-era] #stellar-wave#stellar-wave .sh-era-picker select { appearance: auto; }
  html[data-site-era] #stellar-wave#stellar-wave .sh-era-picker::after { display: none; }
}

/* The chronology panel itself scrolls on compact screens: keep its header
   opaque enough to separate it from passing controls, and retain full dates. */
@media (max-width: 900px) {
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono > .cu-result-header {
    top: -16px; z-index: 8; margin-inline: -16px; padding: 12px 16px 10px;
    background: var(--g-sheen), rgb(var(--g-tint)) !important; border-bottom: 1px solid var(--eg-border);
    backdrop-filter: blur(var(--g-blur)); -webkit-backdrop-filter: blur(var(--g-blur));
  }
}
@media (max-width: 480px) {
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hreadout {
    flex-direction: column; align-items: center; gap: 3px; width: calc(100% - 20px);
    white-space: normal; text-align: center; border-radius: 18px;
  }
  html[data-site-runtime="archive"] body.single-universe #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hreadout span {
    overflow: visible; text-overflow: clip; white-space: normal; letter-spacing: .06em;
  }
}