/* App mode (operator, 2026-07-10): installed-PWA feel. Three pieces:
 *
 * 1. VIEW TRANSITIONS — navigating between screens animates like a pane
 *    lighting up (cross-document View Transitions; browsers without them
 *    just navigate — this is decoration, never a dependency).
 * 2. THE SCREEN IS A PANE — each /app screen wears the lamp's glass:
 *    milky ground, iron edge, bronze bead, the active face's light
 *    breathing inside it (role vars come from 03-domain-face.css).
 * 3. STANDALONE CHROME — when running installed (display-mode:
 *    standalone) the furniture shrinks and the screen gets the room:
 *    dateline yields, masthead tightens, the pill row stays reachable.
 */

/* ---- 1. screen-to-screen: the next pane lights up ---- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: screen-out 150ms ease both;
}

::view-transition-new(root) {
  animation: screen-in 230ms ease both;
}

@keyframes screen-out {
  to { opacity: 0; }
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: scale(.985);
    filter: brightness(1.16);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---- 2. the screen is a pane of the lamp's glass ---- */
.screen-pane {
  --face-r: 214;
  --face-g: 162;
  --face-b: 58;   /* amber fallback; domain-face-* classes override */
  padding: 14px 12px;
  /* night repaint: the pane is OPAQUE lit milk-glass — the one light
   * surface hanging on the dark wall, spilling its face's glow onto it */
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--face-r), var(--face-g), var(--face-b), .13), transparent 24rem),
    linear-gradient(180deg, var(--pane-hi), var(--pane-lo));
  border: 1px solid rgba(8, 10, 16, .9);              /* iron edge */
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(195, 154, 70, .40),          /* bronze bead */
    inset 0 0 36px rgba(var(--face-r), var(--face-g), var(--face-b), .10),
    0 18px 44px rgba(8, 10, 16, .45),
    0 0 70px rgba(var(--face-r), var(--face-g), var(--face-b), .15);
}

/* the pane replaces the grid's bare top gap */
main.house-grid.screen-pane {
  margin-top: 14px;
  padding-top: 14px;
}

/* ---- 3. installed: the screen gets the room ---- */
@media (display-mode: standalone) {
  .house-date {
    display: none;                 /* the folio yields to the work */
  }

  .house-masthead {
    padding: 9px 14px 8px;
  }

  .brand-lantern {
    width: 34px;
    height: 34px;
  }

  .brand-title {
    font-size: 1.05rem;
  }

  .house-shell {
    padding-bottom: 18px;
  }

  /* the pill row keeps every room one thumb away while scrolling */
  .app-tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -12px;
    padding-inline: 12px;
    background:
      linear-gradient(180deg, var(--ground, #C8BFA8) 82%, transparent);
    border-bottom: none;
  }

  .domain-face-header {
    margin-top: 8px;
    padding: 10px 12px;
  }
}