/* dm-pad.css 1.0 (2026-10-10) — Drink Maps on an iPad, full screen.
   On a tablet the phone frame used to float in the middle of a dark room.
   Now: a rail of tabs down the left, the content column across the rest, and
   anything that used to slide up from the bottom (a venue, a conversation,
   the games lobby, Meet) slides in from the right as a panel — so the map and
   the night stay on screen beside it. Same DOM, same JS; `html.dm-pad` is set
   in index.html for touch screens 700px and up (or ?pad=1), and every rule
   here is also behind a min-width so a split-view iPad falls back to the
   phone layout on its own. */
@media (min-width: 700px) {
  html.dm-pad { --gut: 28px; --pad-rail: 96px; --pad-panel: min(540px, 46vw); }
  html.dm-pad body { padding: 0 !important; display: block !important; background: var(--ink) !important; }
  html.dm-pad .frame {
    width: 100% !important; height: 100vh !important; height: 100dvh !important; height: var(--appvh, 100dvh) !important;
    border-radius: 0 !important; box-shadow: none !important;
    display: grid !important; grid-template-columns: var(--pad-rail) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  }
  html.dm-pad .frame > .hdr { grid-column: 2; grid-row: 1; padding-inline: var(--gut); }
  html.dm-pad .frame > .body { grid-column: 2; grid-row: 2; padding-inline: var(--gut); }
  html.dm-pad .frame > :not(.hdr):not(.body):not(.tabbar) { grid-column: 2; }
  html.dm-pad .frame > .toast, html.dm-pad .frame > #toast { grid-column: 1 / -1; }

  /* ── the rail ── */
  html.dm-pad .frame > .tabbar {
    grid-column: 1; grid-row: 1 / 3; margin: 0; position: relative; bottom: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    padding: calc(22px + var(--sat)) 12px calc(18px + var(--sab));
    border-top: 0; border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(var(--glassrgb), .35), var(--ink) 30%);
  }
  html.dm-pad .tabbar::before {
    content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 22px;
    background: url("../brand/dm-mark.png") center / contain no-repeat;
  }
  html.dm-pad .tab { flex: 0 0 auto; min-height: 68px; padding: 9px 0 7px !important; gap: 5px; border-radius: 18px; }
  html.dm-pad .tab.on { background: rgba(255, 39, 64, .12); }
  html.dm-pad .tab .em { width: 28px; height: 28px; }
  html.dm-pad .tab .em .ico { width: 25px; height: 25px; }
  html.dm-pad .trailmode .frame > .tabbar { display: none; }
  html.dm-pad .trailmode .frame { grid-template-columns: 0 1fr; }

  /* ── the column: wider room, bigger moves ── */
  html.dm-pad .body > * { max-width: 1040px; margin-left: auto !important; margin-right: auto !important; }
  html.dm-pad .body > .scroll-x { max-width: none; margin-left: calc(-1 * var(--gut)) !important; margin-right: calc(-1 * var(--gut)) !important; padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  html.dm-pad .hh-hero { min-height: 280px; }
  html.dm-pad .hot, html.dm-pad .today-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  html.dm-pad .greet { font-size: 26px; }
  html.dm-pad .map-viewport { border-radius: 22px; margin-block: 6px 10px; }

  /* ── what used to rise from the bottom now comes in from the right ── */
  @keyframes padIn { from { transform: translateX(100%); } to { transform: none; } }
  html.dm-pad .overlay { align-items: stretch; justify-content: flex-end; }
  html.dm-pad .overlay .sheet {
    width: var(--pad-panel); height: 100%; max-height: 100% !important; border-radius: 0; border-top: 0;
    border-left: 1px solid var(--line-2); box-shadow: -24px 0 70px rgba(0, 0, 0, .6); animation: padIn .32s var(--drawer);
  }
  /* small sheets (the wheel, share, sign-in) stay dialogs, centred */
  html.dm-pad .overlay:not(:has(.vsheet)) { align-items: center; justify-content: center; }
  html.dm-pad .overlay:not(:has(.vsheet)) .sheet { width: min(540px, 92%); height: auto; max-height: 88% !important; border-radius: 28px; border: 1px solid var(--line-2); animation: up .28s var(--drawer); }

  html.dm-pad .dmsoc-ov { justify-content: flex-end !important; align-items: stretch !important; }
  html.dm-pad .dmsoc-ov .dmsoc-sheet {
    width: var(--pad-panel) !important; max-width: none !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important;
    border-radius: 0 !important; border-left: 1px solid rgba(255, 255, 255, .1); transform: translateX(100%) !important; transition: transform .32s cubic-bezier(.23, 1, .32, 1) !important;
    padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box;
  }
  html.dm-pad .dmsoc-ov.on .dmsoc-sheet { transform: none !important; }

  html.dm-pad .dmc-drawer {
    left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--pad-panel) !important;
    max-height: none !important; border-radius: 0 !important; border-left: 1px solid rgba(255, 255, 255, .1);
    transform: translateX(100%) !important; transition: transform .32s cubic-bezier(.23, 1, .32, 1) !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  html.dm-pad .dmc-drawer.in { transform: none !important; }

  /* the public page keeps its column; the room around it is the night */
  html.dm-pad .ms-view .ms-page { max-width: 620px; }

  /* the game: the chat beside the table, not over it */
  html.dm-pad .pong-view .pong-chatsheet { width: min(440px, 40vw); left: auto; right: 0; }
}
@media (min-width: 700px) and (orientation: portrait) {
  html.dm-pad { --pad-panel: min(520px, 62vw); }
  html.dm-pad .hot, html.dm-pad .today-sec { grid-template-columns: 1fr; }
}