/* ===================================================================
   DLG Labs - room-mobile-b.css
   Mobile treatment "B - Immersive glass backdrop".

   Loaded AFTER room.css, so these rules override room.css's current
   <=900px block by both higher specificity (scoped under .room) and
   source order. DESKTOP (>900px) IS NEVER TOUCHED: every rule lives
   inside a max-width media query.

   Idea: on phones the animated diagram is promoted to a FIXED,
   full-viewport backdrop (subdued), and the whole briefing rides over
   it inside a translucent dark "glass" sheet with a blurred backdrop,
   a rounded top and a top margin so the diagram peeks before you
   scroll. This keeps the desktop "diagram behind glass" immersion on a
   phone while staying WCAG AA legible.

   Stacking model (deliberate, do not "simplify" without re-checking):
     .room                -> single stacking context (isolation)
       [1] .room bg (--bg-room)
       [.] .room-metaphor : position:fixed; z-index:0  (above bg,
                            below content) -> the subdued backdrop
       [.] content .brief-panel / .ir-urgent / .contact : z-index:1
     footer.site (root sibling) -> z-index:1 so the fixed backdrop
                            cannot bleed over it.
   =================================================================== */

@media (max-width: 900px) {

  /* --- make .room the ONE stacking context for the room subtree so the
         fixed metaphor can sit just above the room background yet behind
         all briefing content. Its opaque --bg-room is preserved. -------- */
  .room { isolation: isolate; }

  /* stage stops clipping/containing and drops ITS stacking context, so the
     metaphor's z-index resolves against .room (not the stage) and the stage
     does not paint atomically over the sections below it. */
  .room .room-stage {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    isolation: auto;
    border-bottom: 0;
  }

  /* the diagram: FIXED full-viewport backdrop, visibly present but subdued.
     Canvas is transparent (clearRect) so --bg-room shows through beneath it.
     z-index:0 => above the room background, below the z-index:1 content. */
  .room .room-metaphor {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    opacity: .55;
    pointer-events: none;
    border-bottom: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .room .room-metaphor canvas {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* the desktop bloom scrim and the ghost code mark add noise over a full
     backdrop; the glass sheet carries contrast instead. */
  .room .room-stage__scrim,
  .room .room-mark { display: none; }

  /* ---------------- the glass sheet ----------------
     The whole briefing panel becomes a translucent dark pane that scrolls
     over the fixed diagram. margin-top lets the diagram peek above it. */
  .room .brief-panel {
    position: relative;
    z-index: 1;
    width: auto;
    margin: clamp(120px, 30vh, 260px) clamp(8px, 2.5vw, 16px) 0;
    padding: 0;                                  /* inset moved to children */
    background: color-mix(in oklab, var(--bg-room) 38%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(118%);
            backdrop-filter: blur(26px) saturate(118%);
    border: 1px solid var(--line);
    border-top: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line));
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 50px -28px rgba(0, 0, 0, .85);
    animation: none;                             /* no slide-in on the sheet */
  }

  /* header (kicker / h1 / tagline) sits ON the glass */
  .room .brief-panel__hd {
    padding: clamp(24px, 7vw, 36px) clamp(20px, 6vw, 32px) 0;
  }
  .room .brief-panel__hd h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .room .room-tag { color: var(--muted); max-width: none; }

  /* tab bar: sticky under the nav, still horizontally scrollable. Its own,
     slightly more opaque glass keeps pinned labels readable as sections
     scroll beneath it. Spans the full sheet width (panel padding is 0). */
  .room .brief-tabs {
    position: sticky;
    top: var(--nav-h, 76px);
    z-index: 15;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 22px;
    margin: clamp(16px, 4vw, 22px) 0 0;
    padding: 4px clamp(20px, 6vw, 32px) 0;
    background: color-mix(in oklab, var(--bg-room) 68%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .room .brief-tabs::-webkit-scrollbar { display: none; }
  .room .brief-tabs a {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 12px 0 15px;                        /* >=40px tap target */
  }

  /* sections scroll within the page (over the fixed diagram), on the glass */
  .room .brief-body {
    overflow: visible;
    min-height: 0;
    display: grid;
    gap: clamp(28px, 6vw, 36px);
    padding: clamp(24px, 6vw, 34px) clamp(20px, 6vw, 32px) clamp(30px, 9vw, 44px);
  }

  /* section labels lifted from --dim to --muted for comfortable AA over the
     translucent sheet (diagram bleed can nibble contrast on --dim). */
  .room .ex-sec { scroll-margin-top: calc(var(--nav-h, 76px) + 66px); }
  .room .ex-sec > h2 { color: var(--muted); }
  .room .ex-sec p { font-size: 1rem; }

  /* body copy sizes bumped for legible reading on a phone */
  .room .step p,
  .room .deliv li,
  .room .brief-cta p { font-size: 1rem; }
  .room .mitre__tech { font-size: .95rem; }

  /* single-column MITRE strip: no chance of horizontal overflow on narrow
     viewports (min-width tracks removed for mobile). */
  .room .mitre { grid-template-columns: 1fr; }

  /* content below the stage must stay ABOVE the fixed backdrop. .contact is
     opaque (--bg2) so the diagram never touches the form; .ir-urgent's own
     opaque box stays crisp while the diagram peeks through its margins. */
  .room .ir-urgent,
  .room .contact { position: relative; z-index: 1; }

  /* footer is a root sibling of .room (a z-auto stacking context here), so
     without this the fixed backdrop would paint over it. */
  footer.site { position: relative; z-index: 1; }
}

/* ---------------- <=520px refinement ---------------- */
@media (max-width: 520px) {
  /* --nav-h is already 56px here (tokens/site), so sticky offsets follow. */
  .room .brief-panel {
    margin: clamp(90px, 24vh, 190px) clamp(6px, 2vw, 12px) 0;
    border-radius: 14px 14px 0 0;
  }
  .room .brief-panel__hd { padding-left: clamp(16px, 5vw, 22px); padding-right: clamp(16px, 5vw, 22px); }
  .room .brief-tabs { padding-left: clamp(16px, 5vw, 22px); padding-right: clamp(16px, 5vw, 22px); }
  .room .brief-body { padding-left: clamp(16px, 5vw, 22px); padding-right: clamp(16px, 5vw, 22px); }
}