/* stop-layout.css -- avenue v2, build 2: the room-first stop (stop-layout.js).
   Immersive homepage, chapters II to VI. The card is a panel on the side away
   from the room (2026-10-15; it was a caption bar across the bottom), the
   wing a narrow capability rail shown with the drawer, and "Read the
   chapter" opens the card as a drawer beside the rail.
   Every rule carries html.room-first and names the overlay by id, so it
   outranks hud-panel.css's per-chapter geometry (which names overlays by id)
   by one class. No has or is pseudo-classes: an unsupported one drops the rule.
   Rooms: II, IV, VI on the left; III, V on the right. Bump ?v= on edit. */

/* .so-inner is a flex COLUMN (absolute, 116px from the top, 40px from the
   bottom): justify-content places the card vertically, align-items
   horizontally. --rf-hud clears the bottom HUD corners, which reach about
   270px in from each edge including the gutter (measured at 1440 by 900). */
html.room-first { --rf-gutter: 3.4vw; --rf-rail: min(250px, 20vw); --rf-hud: 280px; --rf-card: min(340px, 27vw); }

/* The room reads under the card: no scan dim at a room-first stop. */
html.room-first #scan-dim { opacity: 0 !important; }

/* The spacer supplies document height, not an input surface. Let open-room
   drags reach the canvas; wheel scrolling still uses the document. */
html.mode-immersive.room-first #scroll-spacer { pointer-events: none; }

/* Reading panels provide their own separation. A viewport-wide vignette at
   z96 also dimmed the technical drawing and its z35 labels underneath it. */
html.mode-immersive.room-first #overlay-1,
html.mode-immersive.room-first #overlay-2,
html.mode-immersive.room-first #overlay-3,
html.mode-immersive.room-first #overlay-4,
html.mode-immersive.room-first #overlay-5 { background: none; }

/* ── the room card (2026-10-15) ───────────────────────────────────
   Owner direction: the bar across the bottom stood in front of the room.
   The card is a panel on the side away from the room, so it alternates
   down the avenue: right at II, IV and VI (rooms on the left), left at III
   and V. Top-aligned under the header, so the hovered part's detail below
   the opening paragraph grows downward, never over the drawing; its
   callouts fan the other way, toward the room. */
html.mode-immersive.room-first #overlay-1 .so-inner,
html.mode-immersive.room-first #overlay-2 .so-inner,
html.mode-immersive.room-first #overlay-3 .so-inner,
html.mode-immersive.room-first #overlay-4 .so-inner,
html.mode-immersive.room-first #overlay-5 .so-inner {
  /* The full-window wrapper must not intercept drags on the room canvas. */
  pointer-events: none;
  justify-content: flex-start;
  padding-top: 52px;
}
html.mode-immersive.room-first #overlay-1 .so-inner,
html.mode-immersive.room-first #overlay-3 .so-inner,
html.mode-immersive.room-first #overlay-5 .so-inner { align-items: flex-end; padding-right: var(--rf-gutter); padding-left: 0; }
html.mode-immersive.room-first #overlay-2 .so-inner,
html.mode-immersive.room-first #overlay-4 .so-inner { align-items: flex-start; padding-left: var(--rf-gutter); padding-right: 0; }
html.mode-immersive.room-first #overlay-1:not(.is-drawer) .so-card,
html.mode-immersive.room-first #overlay-2:not(.is-drawer) .so-card,
html.mode-immersive.room-first #overlay-3:not(.is-drawer) .so-card,
html.mode-immersive.room-first #overlay-4:not(.is-drawer) .so-card,
html.mode-immersive.room-first #overlay-5:not(.is-drawer) .so-card {
  width: var(--rf-card);
  max-width: none;
  /* Clear of the bottom HUD corners; a long part detail scrolls inside. */
  max-height: calc(100% - 52px - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 16px 18px 18px;
}
/* Keep reading/scrolling/clicks on the card while the room around it remains
   available for guided inspection. Hidden inspection layers stay inactive. */
html.mode-immersive.room-first body:not(.cards-dismissed):not(.hud-inspecting) .section-overlay.visible .so-card {
  pointer-events: auto;
}

/* The card is a flex column: on a short screen its children must not be
   squeezed (the clamped paragraph collapsed to a few pixels at 1366 by 650);
   the card scrolls instead. */
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-card > * { flex-shrink: 0; }

/* On the card at rest: the chapter, its headline, the opening paragraph, a
   hovered part's detail and the actions. The rest stays in Read. */
html.mode-immersive.room-first #overlay-1:not(.is-drawer) .so-card > :not(.so-eyebrow):not(.so-title):not(.so-lede):not(.so-hover):not(.so-stop):not(.so-parts),
html.mode-immersive.room-first #overlay-2:not(.is-drawer) .so-card > :not(.so-eyebrow):not(.so-title):not(.so-lede):not(.so-hover):not(.so-stop):not(.so-parts),
html.mode-immersive.room-first #overlay-3:not(.is-drawer) .so-card > :not(.so-eyebrow):not(.so-title):not(.so-lede):not(.so-hover):not(.so-stop):not(.so-parts),
html.mode-immersive.room-first #overlay-4:not(.is-drawer) .so-card > :not(.so-eyebrow):not(.so-title):not(.so-lede):not(.so-hover):not(.so-stop):not(.so-parts),
html.mode-immersive.room-first #overlay-5:not(.is-drawer) .so-card > :not(.so-eyebrow):not(.so-title):not(.so-lede):not(.so-hover):not(.so-stop):not(.so-parts) {
  display: none !important;
}
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-card > .so-title { font-size: 19px; line-height: 1.35; margin: 4px 0 0; max-width: none; }
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-card > .so-lede {
  margin: 10px 0 0 !important; font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
@media (max-height: 820px) {
  html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-card > .so-title { font-size: 17px; }
  html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-card > .so-lede { -webkit-line-clamp: 3; font-size: 13.5px; }
}
.so-stop { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* The card's actions read down the panel: the quiet links, then Next stop. */
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-stop { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; }
html.mode-immersive.room-first .section-overlay.is-drawer .so-stop { order: -1; margin: 0 0 14px; }

/* ── the hovered part (2026-10-15): its detail expands on the card ──
   Unhurried on purpose, the same 9% slower than before as the drawing's
   hover (scene-assemblies.js HOVER_SLOW): it should invite, not flash. */
.so-hover { display: none; }
html.mode-immersive.room-first .section-overlay:not(.is-drawer):not(.is-pinned) .so-hover {
  display: block; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  border-top: 1px solid transparent;
  transition: max-height .6s cubic-bezier(.22, .61, .36, 1), opacity .49s ease, margin-top .6s ease, padding-top .6s ease, border-color .49s ease;
}
html.mode-immersive.room-first .section-overlay.is-hovering:not(.is-drawer):not(.is-pinned) .so-hover {
  max-height: 340px; opacity: 1; margin-top: 12px; padding-top: 10px; border-top-color: rgba(255, 207, 122, 0.28);
}
.so-hover-code {
  display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .26em; color: var(--gold, #d4a04a);
}
.so-hover .so-part-name { margin-top: 3px; }
.so-hover .so-part-text { -webkit-line-clamp: 5; }
@media (max-height: 820px) { .so-hover .so-part-text { -webkit-line-clamp: 3; } }
html.mode-immersive.room-first .so-hover-more {
  padding: 4px 2px; background: transparent; border-color: transparent; box-shadow: none;
  color: #ffd98f; text-decoration: underline; text-decoration-color: rgba(255, 207, 122, .45); text-underline-offset: 4px;
}
html.mode-immersive.room-first .so-hover-more:hover,
html.mode-immersive.room-first .so-hover-more:focus-visible { color: #fff; text-decoration-color: #ffcf7a; }
html.mode-immersive.room-first .so-hover-more:focus-visible { outline: 2px solid #ffcf7a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html.mode-immersive.room-first .section-overlay .so-hover { transition: none; }
}

/* ── the drawer: the full card beside the rail, away from the room ── */
html.mode-immersive.room-first #overlay-1.is-drawer .so-inner,
html.mode-immersive.room-first #overlay-3.is-drawer .so-inner,
html.mode-immersive.room-first #overlay-5.is-drawer .so-inner {
  justify-content: center; align-items: flex-end;
  padding: 0 calc(var(--rf-gutter) + var(--rf-rail) + 28px) 0 0;
}
html.mode-immersive.room-first #overlay-2.is-drawer .so-inner,
html.mode-immersive.room-first #overlay-4.is-drawer .so-inner {
  justify-content: center; align-items: flex-start;
  padding: 0 0 0 calc(var(--rf-gutter) + var(--rf-rail) + 28px);
}
html.mode-immersive.room-first #overlay-1.is-drawer .so-card,
html.mode-immersive.room-first #overlay-2.is-drawer .so-card,
html.mode-immersive.room-first #overlay-3.is-drawer .so-card,
html.mode-immersive.room-first #overlay-4.is-drawer .so-card,
html.mode-immersive.room-first #overlay-5.is-drawer .so-card {
  max-width: min(520px, calc(100vw - 2 * var(--rf-gutter) - var(--rf-rail) - 28px - 36vw));
  max-height: 100%;
  overflow-y: auto;
}

/* ── the rail: the wing, narrower, on the side away from the room ── */
html.mode-immersive.room-first #overlay-1 .so-wing,
html.mode-immersive.room-first #overlay-3 .so-wing,
html.mode-immersive.room-first #overlay-5 .so-wing {
  left: auto; right: var(--rf-gutter); width: var(--rf-rail);
}
html.mode-immersive.room-first #overlay-2 .so-wing,
html.mode-immersive.room-first #overlay-4 .so-wing {
  width: var(--rf-rail);
}

/* ── the pinned drawing: Choose a part (build 3) ──────────────────── */
/* Only while a drawing is pinned, and only in the bar: the parts list
   takes the place of the summary and the two actions. */
.so-parts { display: none; }
html.mode-immersive.room-first .section-overlay.is-pinned:not(.is-drawer) .so-parts { display: block; margin-top: 8px; align-self: stretch; width: 100%; }
html.mode-immersive.room-first .section-overlay.is-pinned:not(.is-drawer) .so-card > p.so-body:first-of-type,
html.mode-immersive.room-first .section-overlay.is-pinned:not(.is-drawer) .so-card > .so-title,
html.mode-immersive.room-first .section-overlay.is-pinned:not(.is-drawer) .so-card > .so-stop,
html.mode-immersive.room-first .section-overlay.is-pinned:not(.is-drawer) .so-card > .so-close { display: none !important; }
.so-parts-head { display: flex; align-items: baseline; gap: 12px; }
.so-parts-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold, #d4a04a);
}
.so-parts-name { flex: 1; font-size: 16px; letter-spacing: .04em; color: #e8dfd0; }
.so-parts-close {
  background: none; border: 1px solid rgba(0, 229, 255, 0.35); color: #9fefff;
  width: 28px; height: 28px; line-height: 24px; font-size: 18px; cursor: pointer;
}
.so-parts-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.so-part {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em;
  background: rgba(3, 6, 11, 0.55); color: #cfe9ee; border: 1px solid rgba(0, 229, 255, 0.28);
  padding: 7px 10px; cursor: pointer;
}
.so-part:hover, .so-part[aria-pressed="true"] { border-color: #ffcf7a; color: #fff1c4; box-shadow: 0 0 10px rgba(255, 207, 122, 0.25); }
.so-part:focus-visible, .so-parts-close:focus-visible { outline: 2px solid #ffcf7a; outline-offset: 2px; }
.so-part-detail:empty { display: none; }
.so-part-detail { margin-top: 12px; border-top: 1px solid rgba(0, 229, 255, 0.18); padding-top: 10px; }
.so-part-name { display: block; font-size: 15px; color: #fff1c4; }
.so-part-sub { display: block; font-size: 12px; color: rgba(207, 233, 238, 0.75); margin-top: 2px; }
.so-part-text {
  margin: 8px 0 10px; font-size: 13.5px; line-height: 1.5; color: #d9d2c4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* The rail row that names the chosen part lights. */
html.mode-immersive.room-first .so-wing-line.is-part { box-shadow: inset 3px 0 0 #ffcf7a; background: rgba(255, 207, 122, 0.08); }
@media (max-height: 820px) { .so-part-text { -webkit-line-clamp: 2; } }

/* ── the route marker ────────────────────────────────────────────── */
.stop-route {
  position: fixed; top: 112px; left: 50%; transform: translateX(-50%); z-index: 95;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .24em;
  color: var(--gold, #d4a04a); background: rgba(3, 6, 11, 0.62); border: 1px solid rgba(212, 160, 74, 0.35);
  padding: 4px 10px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .25s linear;
}
.stop-route.is-on { opacity: 1; }
body.cards-dismissed .stop-route { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .stop-route { transition: none; } }


/* ── room focus calm state ─────────────────────────────────────────
   Once the visitor is settled on a room, the 3D drawing is the focal point.
   Secondary telemetry recedes instead of competing with the room; controls
   return to full strength on hover/focus. The active chapter remains clear. */
html.mode-immersive.room-first body.room-object-focus .hud-tr,
html.mode-immersive.room-first body.room-object-focus .hud-br,
html.mode-immersive.room-first body.room-object-focus:not(.room-has-mission) .hud-bl,
html.mode-immersive.room-first body.room-object-focus .hud-tl #hud-roman,
html.mode-immersive.room-first body.room-object-focus .hud-tl #hud-section-name {
  display: none !important;
}
html.mode-immersive.room-first body.room-object-focus .hud-tl {
  opacity: .7 !important;
  animation: none !important;
}
/* Keep a chosen mission and its reset control; omit decorative readings. */
html.mode-immersive.room-first body.room-object-focus .hud-bl > :not(.hud-mission-row):not(#hud-mission) {
  display: none !important;
}
html.mode-immersive.room-first body.room-object-focus .hud-bl {
  opacity: 1 !important;
  animation: none !important;
}
/* Without a mission the caption/nav already name the chapter. */
html.mode-immersive.room-first body.room-object-focus:not(.room-has-mission) .stop-route {
  visibility: hidden;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail .nav-dot:not(.active) {
  opacity: .68;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail .nav-dot:not(.active) .desc {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail .nav-dot.active {
  opacity: 1;
}
html.mode-immersive.room-first body.room-object-focus .so-wing {
  opacity: .80;
  transition: opacity .18s ease;
}
html.mode-immersive.room-first body.room-object-focus .so-wing:hover,
html.mode-immersive.room-first body.room-object-focus .so-wing:focus-within {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html.mode-immersive.room-first body.room-object-focus .hud-corner,
  html.mode-immersive.room-first body.room-object-focus .so-wing {
    transition: none;
  }
}


/* ── room focal hierarchy: object first, controls second ───────────
   At rest the room is a display space, not a dashboard. Detailed capability
   controls return when the chapter drawer or the drawing itself is engaged. */
html.mode-immersive.room-first body.room-object-focus
  .section-overlay.visible:not(.is-drawer) .so-wing {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-drawing,
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-read {
  padding: 7px 2px;
  background: transparent;
  border-color: transparent;
  color: rgba(220, 235, 242, .82);
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: rgba(99, 230, 255, .28);
  text-underline-offset: 4px;
}
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-drawing:hover,
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-drawing:focus-visible,
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-read:hover,
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-read:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #fff;
  box-shadow: none;
  text-decoration-color: #63e6ff;
}
html.mode-immersive.room-first .section-overlay:not(.is-drawer) .so-nextstop {
  margin: 10px 0 0 !important;
}
/* The room's full page: the bar's gold link (2026-10-14). */
html.mode-immersive.room-first .section-overlay .so-page {
  padding: 7px 2px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #ffd98f;
  text-decoration: underline;
  text-decoration-color: rgba(255, 207, 122, .45);
  text-underline-offset: 4px;
}
html.mode-immersive.room-first .section-overlay .so-page:hover,
html.mode-immersive.room-first .section-overlay .so-page:focus-visible {
  color: #fff;
  text-decoration-color: #ffcf7a;
}
html.mode-immersive.room-first .so-drawing:disabled { opacity: .45; cursor: progress; }
html.mode-immersive.room-first body.room-object-focus .nav-rail .nav-dot:not(.active) .label {
  opacity: .38;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail:hover .nav-dot .label,
html.mode-immersive.room-first body.room-object-focus .nav-rail:focus-within .nav-dot .label {
  opacity: 1;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail .nav-dot:not(.active) .roman {
  opacity: .68;
}

html.mode-immersive.room-first .so-read:focus-visible,
html.mode-immersive.room-first .so-drawing:focus-visible,
html.mode-immersive.room-first .so-page:focus-visible,
html.mode-immersive.room-first .so-nextstop:focus-visible {
  outline: 2px solid #ffcf7a;
  outline-offset: 3px;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail:hover .nav-dot,
html.mode-immersive.room-first body.room-object-focus .nav-rail:focus-within .nav-dot,
html.mode-immersive.room-first body.room-object-focus .nav-rail:hover .nav-dot .roman,
html.mode-immersive.room-first body.room-object-focus .nav-rail:focus-within .nav-dot .roman {
  opacity: 1;
}
html.mode-immersive.room-first body.room-object-focus .nav-rail:hover .nav-dot .desc,
html.mode-immersive.room-first body.room-object-focus .nav-rail:focus-within .nav-dot .desc {
  opacity: 1;
  max-height: 40px;
}