/* Narrow immersive composition fixes.
   These overrides stay separate from the exhibit's base stylesheet so the
   full-screen Three.js world and its 1.1 s spatial choreography remain the
   single source of motion. */

@media (max-width: 1180px) {
  /* Closing the chapter index is an interface action, not a world transition.
     Once JS marks the list inert, remove it immediately from the visual tree. */
  .chapter-nav:not(.is-open) #nav-list[aria-hidden="true"] {
    opacity: 0 !important;
    visibility: hidden;
    transform: translate(-50%, -8px) !important;
    transition: none !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* 04 — leave the folio inside the room, but give its visitor label a quiet
     night-colour reading field and a catalogue wide enough for real words. */
  #timeline .timeline-heading {
    width: min(300px, 40vw) !important;
    padding: 18px 36px 18px 0;
    background: radial-gradient(
      ellipse at 16% 46%,
      rgba(4, 20, 31, .88),
      rgba(4, 20, 31, .58) 61%,
      transparent 89%
    ) !important;
  }

  #timeline .timeline-heading h2 {
    max-width: 7.6ch;
    font-size: clamp(34px, 4.8vw, 39px);
  }

  #timeline .timeline-console {
    inset: auto 0 4vh auto !important;
    width: min(430px, 56vw) !important;
    padding: 14px 0 12px 18px;
    grid-template-columns: 74px minmax(0, 1fr) 94px;
    gap: 6px 12px;
    background: radial-gradient(
      ellipse at 80% 62%,
      rgba(5, 24, 36, .96),
      rgba(5, 24, 36, .76) 66%,
      transparent 94%
    ) !important;
  }

  #timeline .timeline-year strong { font-size: 30px; }
  #timeline .timeline-console h3 { font-size: 17px; line-height: 1.25; }
  #timeline .timeline-evidence { gap: 10px; }
  #timeline .timeline-evidence dd { font-size: 10px; line-height: 1.4; }

  /* 05 — the title, annual trace and discipline readout occupy three distinct
     edge zones. The instrument stays unobstructed through the central aisle. */
  #disciplines .data-copy {
    width: min(340px, 45vw) !important;
    padding: 18px 28px 18px 0;
    background: radial-gradient(
      ellipse at 14% 46%,
      rgba(244, 250, 249, .94),
      rgba(244, 250, 249, .64) 62%,
      transparent 91%
    ) !important;
  }

  #disciplines .data-copy h2 {
    max-width: none;
    font-size: clamp(37px, 5.1vw, 40px);
  }

  #disciplines .publication-trend {
    inset: auto auto 4vh 0 !important;
    width: min(260px, 34vw) !important;
    height: auto !important;
    padding: 10px 28px 8px 0 !important;
    background: radial-gradient(
      ellipse at 15% 52%,
      rgba(244, 250, 249, .92),
      rgba(244, 250, 249, .58) 64%,
      transparent 92%
    ) !important;
  }

  #disciplines .discipline-stack {
    inset: auto 0 4vh auto !important;
    width: min(360px, 47vw) !important;
    max-height: none;
    padding: 10px 0 8px 22px;
    overflow: visible;
    background: radial-gradient(
      ellipse at 84% 52%,
      rgba(244, 250, 249, .94),
      rgba(244, 250, 249, .66) 64%,
      transparent 94%
    ) !important;
  }

  #disciplines .discipline-row {
    min-height: 44px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 6px;
    line-height: 1.2;
  }

  #disciplines .discipline-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
  }

  #disciplines .discipline-row .discipline-bar { display: none; }

  /* 07 — two generous columns replace the squeezed six-slot rail. Chinese
     application names therefore read horizontally instead of as glyph stacks. */
  #applications .applications-heading {
    width: min(350px, 46vw) !important;
    padding-right: 38px;
    background: radial-gradient(
      ellipse at 14% 46%,
      rgba(244, 250, 249, .93),
      rgba(244, 250, 249, .60) 62%,
      transparent 91%
    ) !important;
  }

  #applications .application-tabs {
    inset: auto auto 4vh 0 !important;
    width: min(340px, 44vw) !important;
    padding: 8px 24px 8px 0 !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    background: radial-gradient(
      ellipse at 15% 52%,
      rgba(244, 250, 249, .92),
      rgba(244, 250, 249, .58) 65%,
      transparent 93%
    ) !important;
  }

  #applications .application-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 7px 5px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  #applications .application-tabs button b {
    display: block;
    margin: 0;
  }

  #applications .application-detail {
    inset: auto 0 4vh auto !important;
    width: min(330px, 43vw) !important;
    grid-template-columns: 104px minmax(0, 1fr);
    background: radial-gradient(
      ellipse at 84% 52%,
      rgba(244, 250, 249, .94),
      rgba(244, 250, 249, .66) 64%,
      transparent 94%
    ) !important;
  }

  /* 08 — retain every provenance field at tablet size, with line lengths that
     read as metadata rather than a column of single characters. */
  #evidence .evidence-heading {
    background: radial-gradient(
      ellipse at 14% 46%,
      rgba(244, 250, 249, .93),
      rgba(244, 250, 249, .60) 62%,
      transparent 91%
    ) !important;
  }

  #evidence .evidence-grid {
    inset: auto auto 4vh 0 !important;
    width: min(250px, 33vw) !important;
    padding: 8px 24px 8px 0 !important;
  }

  #evidence .evidence-detail {
    inset: auto 0 4vh auto !important;
    width: min(400px, 52vw) !important;
    padding: 16px 0 14px 18px;
    grid-template-columns: 112px minmax(0, 1fr);
    background: radial-gradient(
      ellipse at 84% 52%,
      rgba(244, 250, 249, .95),
      rgba(244, 250, 249, .70) 66%,
      transparent 95%
    ) !important;
  }

  #evidence .evidence-detail > dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }

  #evidence .evidence-detail dl > div,
  #evidence .evidence-detail dl > div:nth-child(n + 4) {
    display: block !important;
    min-width: 0;
  }

  #evidence .evidence-detail dd {
    font-size: 10.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 901px) {
  /* The laboratory controls are a compact instrument dock. Two deliberate
     rows keep every Chinese label horizontal without shrinking the type. */
  #gdy-lab .lab-controls {
    width: min(450px, 34vw) !important;
    padding: 14px 0 12px 18px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
    background: linear-gradient(
      90deg,
      rgba(244, 250, 249, .34),
      rgba(244, 250, 249, .88) 28%,
      rgba(244, 250, 249, .96)
    ) !important;
  }

  #gdy-lab .lab-controls > .control-group,
  #gdy-lab .lab-controls > .toggle-row,
  #gdy-lab .lab-controls > .secondary-button {
    min-width: 0;
    width: 100%;
    margin: 0;
  }

  #gdy-lab .lab-controls .control-group > span,
  #gdy-lab .lab-controls .toggle-row,
  #gdy-lab .lab-controls .secondary-button {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  #gdy-lab .lab-controls > .secondary-button {
    grid-column: 1 / -1;
  }

  /* A quiet, opaque reading rail separates the values from the portal frame.
     The spatial model remains visible around it, while the evidence itself is
     no longer diluted by the architecture behind the type. */
  #disciplines .discipline-stack {
    width: min(330px, 25vw) !important;
    padding: 14px 14px 12px 20px !important;
    background: linear-gradient(
      90deg,
      rgba(244, 250, 249, .90),
      rgba(244, 250, 249, .97) 24%,
      rgba(244, 250, 249, .94)
    ) !important;
    box-shadow: -18px 16px 42px rgba(9, 47, 59, .08);
  }

  #disciplines .discipline-stack__header h3 {
    color: #0b293a;
    font-weight: 680;
  }

  #disciplines .discipline-row {
    grid-template-columns: 28px minmax(96px, 1fr) minmax(52px, .72fr) 48px;
    gap: 7px;
  }

  #disciplines .discipline-row span {
    color: #163e4d;
    font-weight: 620;
  }

  #disciplines .discipline-row strong {
    color: #071f2c;
    font-weight: 720;
    opacity: 1;
  }

  #disciplines .discipline-bar {
    background: rgba(7, 42, 55, .13);
  }

  #disciplines .discipline-bar i {
    background: linear-gradient(90deg, #129e9d, #0f6f83);
    box-shadow: 0 0 10px rgba(18, 158, 157, .18);
  }

  /* The archive caption sits beneath the cabinet's structural beam. A wider
     one-line title also preserves English and Chinese word boundaries. */
  #evidence .evidence-detail {
    bottom: 9vh !important;
    width: min(460px, 34vw) !important;
    padding: 13px 0 11px 18px !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 6px 12px !important;
    background: linear-gradient(
      90deg,
      rgba(244, 250, 249, .88),
      rgba(244, 250, 249, .97) 24%,
      rgba(244, 250, 249, .94)
    ) !important;
  }

  #evidence .evidence-detail-title {
    min-width: 0;
    display: flex;
    align-items: center;
  }

  #evidence .evidence-detail-title h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.24;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  #evidence .evidence-detail > dl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 14px;
  }
}

@media (max-width: 600px) {
  /* Visitor introductions either finish naturally or advertise truncation.
     The two densest opening compositions retain two lines with a real
     ellipsis; the remaining chapters are allowed their complete third line. */
  #family .copy-panel > p:not(.eyebrow),
  #gdy-lab .lab-heading > p:last-child,
  #regions .globe-heading > p:not(.eyebrow),
  #applications .applications-heading > p:last-child,
  #evidence .evidence-heading > p:last-child {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset;
  }

  #origin .lead,
  #disciplines .data-copy > p:not(.eyebrow) {
    display: -webkit-box !important;
    max-height: 3em !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #family .family-switcher {
    margin-top: 4px;
  }

  #gdy-lab .atom-inspector {
    top: 33svh !important;
    bottom: auto !important;
  }

  /* The mobile process rail is still part of the same room, but its text must
     remain opaque enough when the instrument passes behind the lower dock. */
  #applications .application-detail {
    background: linear-gradient(
      90deg,
      rgba(244, 250, 249, .96),
      rgba(244, 250, 249, .87) 72%,
      rgba(244, 250, 249, .72)
    ) !important;
    backdrop-filter: blur(3px) !important;
  }
}

/* Ink-wash responsive seal. Spatial coordinates above stay authoritative;
   this layer only makes their visitor labels part of the paper-and-ink world. */
@media (min-width: 601px) and (max-width: 900px) {
  #timeline .timeline-heading {
    top: calc(var(--header-h) + 2.5vh) !important;
    right: 0;
    left: auto;
    width: min(270px, 35vw) !important;
    padding: 14px 0 14px 24px;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--line-strong);
    background: var(--label-right) !important;
  }

  #timeline .timeline-heading h2 {
    max-width: 7.8ch;
    font-size: clamp(31px, 4.4vw, 35px);
  }

  #timeline .timeline-heading > p:last-child { display: none; }

  #timeline .timeline-heading,
  #disciplines .data-copy,
  #applications .applications-heading,
  #evidence .evidence-heading {
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--line-strong);
    background: var(--label-left) !important;
    backdrop-filter: none !important;
  }

  #timeline .timeline-heading {
    padding-inline-start: 24px;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--line-strong);
    background: var(--label-right) !important;
  }

  #timeline .timeline-console,
  #disciplines .discipline-stack,
  #applications .application-detail,
  #evidence .evidence-detail {
    border: 0 !important;
    border-block: 1px solid var(--line-strong) !important;
    background: var(--label-right) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #disciplines .publication-trend,
  #applications .application-tabs,
  #evidence .evidence-grid {
    border: 0 !important;
    border-block: 1px solid var(--line-strong) !important;
    background: var(--label-left) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #timeline .timeline-heading :is(h2, .eyebrow, p),
  #timeline .timeline-console :is(h3, dd, a, strong) { color: var(--ink); }
  #timeline .timeline-console :is(p, dt, small, span) { color: var(--muted); }
  #timeline .timeline-heading h2 em { color: var(--accent); }

  #timeline .timeline-console {
    background: linear-gradient(
      270deg,
      rgba(247, 243, 230, .97) 0%,
      rgba(247, 243, 230, .89) 74%,
      rgba(247, 243, 230, .64) 100%
    ) !important;
  }

  #disciplines .discipline-row,
  #applications .application-tabs button,
  #evidence .evidence-card {
    min-height: 44px;
    border-radius: 0;
    background: rgba(247, 243, 230, .62) !important;
  }
}

@media (min-width: 901px) {
  #gdy-lab .lab-controls,
  #disciplines .discipline-stack,
  #evidence .evidence-detail {
    border: 0 !important;
    border-block: 1px solid var(--line-strong) !important;
    background: var(--label-right) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #disciplines .discipline-stack__header h3,
  #disciplines .discipline-row span,
  #disciplines .discipline-row strong { color: var(--ink); }

  #disciplines .discipline-bar { background: rgba(36, 44, 39, .12); }
  #disciplines .discipline-bar i {
    background: linear-gradient(90deg, rgba(158, 63, 46, .76), rgba(52, 62, 55, .78));
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  #applications .application-detail {
    border: 0 !important;
    border-block: 1px solid var(--line-strong) !important;
    background: var(--label-up) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  #timeline .timeline-heading,
  #timeline .timeline-console,
  #disciplines .data-copy,
  #disciplines .discipline-stack,
  #applications .applications-heading,
  #applications .application-tabs,
  #applications .application-detail,
  #evidence .evidence-heading,
  #evidence .evidence-grid,
  #evidence .evidence-detail {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
}

/* Final audit geometry — keep interpretation in the margins and preserve
   measurable gutters between every independent visitor control. */
@media (min-width: 601px) and (max-width: 900px) {
  /* 03 — two edge docks with a real centre gutter. The phase key occupies
     the otherwise quiet upper-right paper margin instead of the specimen. */
  #gdy-lab .atom-inspector {
    inset: auto auto 4vh 0 !important;
    width: min(316px, 41vw) !important;
    padding: 10px 20px 10px 0 !important;
  }

  #gdy-lab .lab-controls {
    inset: auto 0 4vh auto !important;
    width: min(360px, 47vw) !important;
    padding: 12px 0 10px 16px !important;
  }

  #gdy-lab .structure-legend {
    position: absolute !important;
    inset: calc(var(--header-h) + 4vh) 0 auto auto !important;
    width: min(300px, 39vw) !important;
    min-height: 44px;
    margin: 0;
    padding: 8px 0 8px 16px;
    border-block: 1px solid var(--line-strong);
    background: var(--label-right);
    color: var(--ink);
    font-family: var(--kai);
    font-size: 10.5px;
    line-height: 1.42;
    backdrop-filter: none;
  }

  #gdy-lab .structure-legend span { display: none; }
  #gdy-lab .structure-legend span:last-child {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  #gdy-lab .structure-legend i.pi {
    width: 16px;
    height: 12px;
    margin-top: 1px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: linear-gradient(90deg, #171a18 0 49%, #747872 49% 100%);
    box-shadow: none;
  }

  /* 05 — the ranking is a shallow, horizontally browsable catalogue rail.
     Its top edge now sits safely below even the four shortest columns. */
  #disciplines .discipline-stack {
    inset: auto 0 4vh auto !important;
    width: min(416px, 54vw) !important;
    max-height: 116px;
    padding: 7px 0 7px 14px !important;
    display: block;
    overflow: hidden;
  }

  #disciplines .discipline-stack__header {
    min-height: 30px;
    padding: 0 0 5px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 0;
  }

  #disciplines .discipline-stack__header > div { min-width: 0; }
  #disciplines .discipline-stack__header h3 { margin: 0; font-size: 15px; }
  #disciplines .discipline-stack__header p,
  #disciplines .discipline-meta { display: none; }

  #disciplines .discipline-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-line) transparent;
  }

  #disciplines .discipline-row,
  #disciplines .discipline-row:nth-child(n) {
    display: grid !important;
    flex: 0 0 132px;
    min-height: 44px;
    padding: 5px 7px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 5px;
    scroll-snap-align: start;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(247, 243, 230, .72) !important;
  }

  #disciplines .discipline-row small,
  #disciplines .discipline-row .discipline-bar { display: none; }
  #disciplines .discipline-row span,
  #disciplines .discipline-row strong { font-size: 10px; }

  /* 06 — controls and selected-country label share a bottom baseline with a
     16px gutter, both wholly beneath the projection plate. */
  #regions .globe-controls {
    position: absolute !important;
    inset: auto auto 4vh 0 !important;
    width: min(330px, 43vw) !important;
    padding: 7px 14px 6px 0 !important;
    border-block: 1px solid var(--line-strong);
    background: var(--label-left) !important;
    backdrop-filter: none;
  }

  #regions .country-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-line) transparent;
  }

  #regions .country-list button,
  #regions .country-list button:nth-child(n) {
    display: grid !important;
    visibility: visible;
    flex: 0 0 104px;
    min-height: 44px;
    padding: 5px 7px;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    scroll-snap-align: start;
  }

  #regions .country-list button em {
    display: block;
    visibility: visible;
    grid-column: 2;
    color: var(--ink);
    font-size: 10px;
    line-height: 1;
  }

  #regions .globe-controls > p.source-caveat {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #regions .globe-controls > details.source-caveat { display: none; }

  #regions .country-hud {
    position: absolute !important;
    inset: auto 0 4vh auto !important;
    width: min(346px, 45vw) !important;
    height: 80px;
    min-height: 0;
    padding: 6px 0 6px 14px !important;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
  }

  #regions .country-hud .panel-index {
    display: none;
  }

  #regions .country-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  #regions .country-title h3 { font-size: 22px; }

  #regions .country-hud dl {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
  }

  #regions .country-hud dl > div {
    padding: 5px 0;
    border: 0;
    border-top: 1px solid var(--line);
  }

  #regions .country-hud dl > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #regions .country-hud dd {
    margin-top: 2px;
    font-size: 10.5px !important;
    white-space: nowrap;
  }
}

@media (min-width: 901px) {
  /* The switcher was only 6.5px outside a 900px viewport. Tightening the
     editorial pause preserves the composition and keeps every button inside. */
  #family .family-switcher { margin-top: 14px; }
}

@media (max-width: 600px) {
  /* Give the structural formula the widest cell; it must read as one formula,
     never as colliding fragments. */
  #origin .hero-metrics {
    grid-template-columns: minmax(76px, .85fr) minmax(132px, 1.45fr) minmax(82px, .9fr);
  }

  #origin .hero-metrics > div { padding-inline: 5px !important; }
  #origin .hero-metrics > div:first-child { padding-inline-start: 0 !important; }
  #origin .hero-metrics > div:nth-child(2) strong {
    font-size: 8px;
    letter-spacing: 0;
    text-align: center;
  }

  /* Clear the heading by a deliberate gap, then keep the phase key directly
     above the control dock as a single readable strip. */
  #gdy-lab .atom-inspector { top: 35svh !important; }

  #gdy-lab .structure-legend {
    position: absolute !important;
    inset: auto 0 calc(2vh + 198px) 0 !important;
    width: auto !important;
    min-height: 44px;
    margin: 0;
    padding: 7px 10px;
    display: block !important;
    border-block: 1px solid var(--line-strong);
    background: var(--label-up);
    color: var(--ink);
    font-family: var(--kai);
    font-size: 10px;
    line-height: 1.4;
    backdrop-filter: none;
  }

  #gdy-lab .structure-legend span { display: none; }
  #gdy-lab .structure-legend span:last-child {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  #gdy-lab .structure-legend i.pi {
    width: 16px;
    height: 12px;
    margin-top: 1px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: linear-gradient(90deg, #171a18 0 49%, #747872 49% 100%);
    box-shadow: none;
  }
}

/* The atom readout floats over the full-viewport interaction plane. Its
   explanatory paper must not steal drag, pinch, or atom-picking gestures;
   the only actionable descendant keeps its own hit target. */
#gdy-lab .atom-inspector { pointer-events: none; }
#gdy-lab .atom-inspector button { pointer-events: auto; }

@media (forced-colors: active) {
  #gdy-lab .structure-legend {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
}