/* Lagos Life: bottom sheet (owner 5d). Spec: site/cards-sheets.html#sheet
   Two kinds:
   - place sheet: floats over the live world, glass panel, three stops, never traps focus (N1, N3);
   - covering sheet: Today's Hustle, gem hunt, Sim panel, person; a modal <dialog>, traps focus, Esc closes. */
.ll-sheet {
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-overlay);
  font: var(--type-body);
  overflow: hidden;
}
.ll-sheet__head { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--pad-sheet) var(--space-4); }
.ll-sheet__emoji {
  flex: none; display: inline-grid; place-items: center; width: var(--avatar-md); height: var(--avatar-md); border-radius: 50%;
  background: var(--mist); font-family: var(--font-emoji); font-size: var(--icon-md); line-height: 1;
}
.ll-sheet__titles { min-width: 0; }
.ll-sheet__title { margin: 0; font: var(--type-title); color: var(--ink); overflow-wrap: anywhere; }
.ll-sheet__sub { margin: 0; font: var(--type-body-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ll-sheet__body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--pad-sheet) calc(var(--pad-sheet) + var(--bottom));
  display: flex; flex-direction: column; gap: var(--space-4);
}

/* Covering sheet: a modal <dialog>. Max 85% of the viewport; body scrolls inside. */
dialog.ll-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; padding: 0; border: 0;
  width: 100%; max-width: 100%;
  max-height: calc(100% * var(--sheet-cover-max));
  z-index: var(--z-sheet);
}
dialog.ll-sheet:not([open]) { display: none; }
dialog.ll-sheet::backdrop { background: var(--scrim-sheet); }
dialog.ll-sheet[open] { animation: ll-sheet-up var(--duration-sheet) var(--ease-sheet) both; }
dialog.ll-sheet[open]::backdrop { animation: ll-enter var(--duration-sheet) var(--ease-scrim) both; }

/* Place sheet: a floating glass panel above the tab bar, inside the 12px gutters.
   Stops (N1) are defined by content, capped by tokens:
   bar  = header only (70px with a one-line name, --sheet-stop-bar);
   peek = header + chat + chips (178px with a one-line name, --sheet-stop-peek); .ll-sheet__more is hidden;
   full = everything, height min(--sheet-stop-full, --zone-sheet-max when inside the HUD); the body scrolls. */
.ll-sheet--place {
  border-radius: var(--radius-panel);
  background: var(--surface-glass-panel);
  box-shadow: var(--shadow-glass);
  outline: 1px solid var(--border-glass); outline-offset: -1px;
  interpolate-size: allow-keywords;
  transition: height var(--duration-sheet) var(--ease-sheet);
  height: auto; min-height: var(--sheet-stop-bar);
  max-height: var(--sheet-stop-full);
}
.ll-sheet--place[data-stop="bar"] .ll-sheet__body,
.ll-sheet--place[data-stop="peek"] .ll-sheet__more { display: none; }
.ll-sheet--place[data-stop="full"] { height: var(--sheet-stop-full); }
.ll-hud .ll-sheet--place { max-height: min(var(--sheet-stop-full), var(--zone-sheet-max)); }
.ll-sheet__more { display: flex; flex-direction: column; gap: var(--space-2); }
.ll-sheet--place .ll-sheet__body { padding: 0 var(--space-3) var(--space-3); gap: var(--space-2); }
.ll-sheet--place .ll-sheet-handle { height: var(--space-4); }
.ll-sheet--place .ll-sheet-handle::after { height: var(--tap-min); }
.ll-sheet--place > .ll-place-header { padding-bottom: var(--space-3); }
@supports (backdrop-filter: blur(1px)) {
  @media (pointer: fine) {
    .ll-sheet--place { -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-sheet--place { transition: none; }
  dialog.ll-sheet[open], dialog.ll-sheet[open]::backdrop { animation: none; }
}