/* CLEAR / CONTINUARIUM shared mobile-room template — THE single mobile geometry.
 *
 * R10: every mobile face (CLEAR Lightroom, CLEAR Darkroom, CONTINUARIUM Lighthall,
 * CONTINUARIUM Darkhall, and the CLEAR blank page) shares the geometry below.
 * Light/Dark and CLEAR/CONTINUARIUM are SKINS applied over it — never geometry forks.
 *
 * Separately versioned by FILENAME so a legacy offline cache cannot silently restore
 * an older layout.
 *
 * Identity layers that legitimately re-anchor their own art box — clear-website-launcher.css
 * for the Hall models, continuarium-starluster.css for the Starluster word art — load AFTER
 * this file and override only their art. They CONSUME the tokens declared here instead of
 * restating the arithmetic, so the lockup has one place to change.
 */

@media (max-width: 620px), (orientation: portrait) and (max-width: 820px) {
  /* ------------------------------------------------ shared geometry tokens
     Declared on :root so every face inherits them, including the blank page,
     whose search strip is not a descendant of .room__scene. An identity layer
     may re-declare a token on .room__scene to re-anchor its own lockup. */
  :root {
    --clear-mobile-title-top: 24%;
    --clear-mobile-title-width: min(78vw, 420px);
    --clear-mobile-title-height: clamp(48px, 17.55vw, 95px);
    --clear-mobile-subtitle-gap: clamp(20px, 2.7vh, 26px);
    --clear-mobile-search-gap: clamp(58px, 7vh, 88px);
    --clear-mobile-gutter: 4%;
    /* One action-track width for the search strip. It must be >= the 44px
       min-width every .search-strip button carries (clear-room.css:157).
       A 34px track made each button overhang its own column by 10px, so the
       three actions overlapped and the last one was clipped at 320px. */
    --clear-mobile-action: 44px;
  }

  .room__scene {
    background-size: auto 100%;
    /* The approved light and dark artworks place their architectural axes at
       slightly different source coordinates. These measured focal positions
       put each beam on the portrait viewport's exact horizontal center. */
    background-position: 78% center;
  }

  body[data-room="lightroom"] .room__scene { background-position: 79% center; }
  body[data-room="darkroom"] .room__scene { background-position: 78% center; }

  /* The baked desktop wordmark cannot survive a portrait crop. Re-use the
     governed transparent lettering instead of synthesizing a substitute font. */
  .room__scene::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: var(--clear-mobile-title-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--clear-mobile-title-width);
    aspect-ratio: 1600 / 360;
    background: center / contain no-repeat url("/wordart/clear-approved-title.png");
    opacity: 1;
    filter: contrast(1.16) saturate(1.08) brightness(1.03)
      drop-shadow(0 2px 3px rgba(0, 0, 0, .72))
      drop-shadow(0 0 8px rgba(231, 198, 110, .16));
    pointer-events: none;
  }

  body[data-room="lightroom"] .room__scene::before {
    filter: contrast(1.18) saturate(1.04) brightness(.58)
      drop-shadow(0 1px 0 rgba(255, 248, 220, .38))
      drop-shadow(0 2px 2px rgba(64, 42, 8, .55));
  }

  .room__ethos {
    top: calc(var(--clear-mobile-title-top) + var(--clear-mobile-title-height) + var(--clear-mobile-subtitle-gap));
    left: var(--clear-mobile-gutter);
    width: calc(100% - (var(--clear-mobile-gutter) * 2));
    text-align: center;
    /* clear-room.css:101 sets white-space:nowrap and :86 sets overflow:hidden.
       At 320px the CONTINUARIUM subtitle measures ~341px against its ~288px box,
       so the single nowrap line was silently truncated. Wrapping keeps the whole
       string: two lines at 11px/1.25 is 27.5px, inside the 38px window between
       --clear-mobile-subtitle-gap and --clear-mobile-search-gap. */
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .room__search {
    top: calc(var(--clear-mobile-title-top) + var(--clear-mobile-title-height) + var(--clear-mobile-search-gap));
    left: var(--clear-mobile-gutter);
    width: calc(100% - (var(--clear-mobile-gutter) * 2));
    max-width: calc(100% - (var(--clear-mobile-gutter) * 2));
  }

  .search-strip {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) repeat(3, var(--clear-mobile-action)) !important;
    overflow: hidden;
  }

  .claire {
    width: 100%;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.35;
  }

  .room__tm {
    display: block;
    top: calc(var(--clear-mobile-title-top) + clamp(1px, .4vw, 4px));
    left: calc(50% + min(39vw, 210px) - clamp(4px, 1vw, 9px));
    font-size: clamp(10px, 2.5vw, 16px);
  }

  /* clear-room.css:312 caps the status pill at calc(100vw - 160px), which is
     160px on a 320px viewport — narrower than its own 10px monospace copy. */
  .room-status {
    max-width: min(680px, calc(100vw - 24px));
  }

  .room-footer__legal span {
    letter-spacing: 0.05em;
  }

  /* Pre-mount / JS-off guard ONLY. clear-titlebar-mount.js rebuilds this footer
     as .clear-global-footer, which carries its own scroll-snap slider, so the
     guard is scoped off that class and cannot disturb the mounted footer.
     Static content measures ~366px against a 288px box at 320px; trimming the
     gutters and letting the copyright ellipsise keeps every approved control
     on the rail instead of spilling past the right edge. */
  .room-footer:not(.clear-global-footer) {
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
  }

  .room-footer:not(.clear-global-footer) .room-footer__links {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 8px;
    padding-left: 8px;
    gap: 6px;
  }
}

/* Tap-target floor. The footer that carries these targets has no vertical
   padding (clear-room-v0.1.2.css:47), so a 44px target fits inside the approved
   38px/48px rail instead of bleeding through it. */
@media (pointer: coarse) {
  .room-footer__legal,
  .room-footer__links a {
    min-height: 44px;
  }
}