/* ══════════════════════════════════════════════════════════════════
   SCREEN OVERLAY (DOM-165)
   A registered screen opened over the map: its own tab element moves
   into this sheet (openOverlay in js/ui.js). Built on the bottom-sheet
   geometry the Clout log uses — OVERLAYS.md: radius 24 24 0 0,
   --border-gold with no bottom edge, translateY .26s.
   ══════════════════════════════════════════════════════════════════ */

#screen-overlay { align-items: flex-end; z-index: 58; }

.screen-sheet {
  width: 100%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  background: var(--overlay-fill);
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--modal-shadow);
  transform: translateY(100%);
  transition: transform .26s;
}
#screen-overlay.open .screen-sheet { transform: translateY(0); }

.screen-sheet-head {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid var(--track);
}
.screen-sheet-title {
  flex: 1; min-width: 0;
  font-family: var(--display); font-size: 17px; letter-spacing: 2px; color: var(--text);
}
.screen-sheet-close {
  flex: none; width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-mid);
  font-size: 13px;
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
.screen-sheet-close:hover { color: var(--text); border-color: var(--border-gold); }

/* The scroll body's own padding, since the screen is no longer inside it. */
.screen-sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 28px;
  scrollbar-width: none;
}
.screen-sheet-body::-webkit-scrollbar { width: 0; height: 0; }

/* A tab in the sheet is showing, so it is .active — but it is not the map's
   full-height flex column (.app.is-map .tab.active), just a block of content. */
.app .screen-sheet .tab.in-sheet.active { display: block; flex: none; }