/* The one pull-up sheet (job UXB20; the UX audit, research/ux-audit/result.md, section 17).
   A small thing you tap (a map square's card, a resource, a lot, a skill box) rises from the foot of
   the screen, above the tab bar, instead of taking you to another page; Close puts it away. The map
   uses this look on its own #cards (web/templates/map.html); sheet.js builds the one for the rest.
   The 3D view draws its place card in the same look inside its own frame (web/static/town/index.html,
   #card), as a frame cannot share this file: change a colour here, change it there. */
.sheet { position:fixed; left:0; right:0; bottom:var(--tabs, calc(61px + env(safe-area-inset-bottom))); z-index:20;   /* --tabs: the tab bar's real height, set by sheet.js */
         max-height:55vh; max-height:55svh; overflow-y:auto; overscroll-behavior:contain;
         background:#2a1d35; color:#EAD8B6; border-top:1px solid rgba(143,227,214,.45);
         border-radius:16px 16px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.45); padding:0 16px 8px;
         box-sizing:border-box; }
.sheet:not(.up) { display:none; }
.sheet-close { display:block; position:sticky; top:0; margin:0 0 0 auto; padding:6px 12px; min-height:36px;
               font:14px system-ui, sans-serif; z-index:1; }
.sheet h1 { font-size:1.3rem; margin:.2rem 0 .3rem; }
.sheet .sheet-body > section > h1:first-child, .sheet .sheet-body h2:first-child { margin-top:0; }
.sheet .tree-box { list-style:none; }
/* A computer's screen: the sheet is a card at the foot of the page's middle, not the whole width. */
@media (min-width: 1000px) {
  .sheet { left:50%; right:auto; width:560px; margin-left:-280px; bottom:16px; border-radius:16px;
           border:1px solid rgba(143,227,214,.45); }
}