/* Short / wide geometry. Portrait rules stay in the page sheets.
   Drawer: width < 860 or height < 560 (app.css + app.js)
   Short chrome: height < 560
   Wide-short panes: width ≥ 700 and height ≤ 820
   Spec: docs/architecture/36-landscape.md */

/* ── short chrome: stats in the topbar ── */
@media (max-height: 560px) {
  :root {
    --topbar-h: 2.85rem;
    --stats-h: 0px;
  }
  .chrome { position: relative; }
  .topbar {
    padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
  }
  .icon-btn {
    width: 2.15rem;
    height: 2.15rem;
  }
  .statsbar {
    position: absolute;
    left: 50%;
    top: var(--safe-t);
    height: var(--topbar-h);
    transform: translateX(-50%);
    z-index: 21;
    gap: 0.55rem;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }
  .statsbar::after { display: none; }
  .statsbar .stat { pointer-events: auto; }
  .stat span { font-size: 0.72rem; }
  .canvas { padding: 0.65rem 0.85rem 1rem; }
  .composer {
    gap: 0.2rem;
    padding: 0.28rem 0.7rem calc(0.28rem + var(--safe-b));
  }
  .composer-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-height: 0;
    scrollbar-width: none;
  }
  .composer-tools::-webkit-scrollbar { display: none; }
  .composer-well {
    min-height: 2.15rem;
    padding: 0.4rem 0.7rem;
  }
  .send-orb {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
  }
}

@media (max-height: 560px) and (max-width: 719px) {
  :root { --stats-h: 1.65rem; }
  .statsbar {
    position: static;
    transform: none;
    height: var(--stats-h);
    pointer-events: auto;
    background: color-mix(in srgb, var(--skin-surface) 94%, var(--skin-bg));
  }
}

/* ── wide + short: side by side ── */
@media (min-width: 700px) and (max-height: 820px) {
  .look-pick {
    flex-direction: row;
    align-items: stretch;
    gap: 0.55rem;
    min-height: 0;
  }
  .look-pick .pills {
    flex: 0 0 3.6rem;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    max-width: none;
    padding: 0 0.1rem 0 0;
    touch-action: pan-y;
  }
  .look-pick .pill {
    min-width: 0;
    width: 100%;
  }
  .look-pick .look-stage {
    flex: 1;
    min-width: 0;
  }
  .look-pick .look-chips {
    max-width: none;
  }

  .cs-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(52rem, calc(100vw - 1.5rem));
    max-height: min(92dvh, calc(100dvh - 1rem));
    transform: translate(-50%, -50%);
    border-radius: 1.2rem;
    display: grid;
    grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .cs-hero {
    grid-column: 1;
    grid-row: 1 / 3;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .cs-id { grid-column: 2; grid-row: 1; }
  .cs-body {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
  }
  .cs-actions {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .tcg-stats {
    top: 0.55rem;
    left: auto;
    right: 0.7rem;
  }
  body[data-admin="1"] .tcg-stats { top: 0.55rem; }
  .pack-board {
    width: min(38vw, calc(min(78dvh, 22rem) * 802 / 1464));
  }
  .pack-stage { max-height: min(78dvh, 22rem); }
  .pull-stage:not([hidden]) {
    --card-w: min(36vw, 16rem, calc(82dvh * 1152 / 1712));
  }
  .tcg-peek {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    gap: 1rem;
  }
  .tcg-peek-scene {
    width: auto;
    height: min(86dvh, 28rem);
    max-height: min(86dvh, 28rem);
    aspect-ratio: 1152 / 1712;
  }
  .tcg-peek-ui {
    flex: 0 0 auto;
    max-width: 14rem;
  }
  .tcg-peek-ui.is-haul { max-width: 16rem; }
  .cs-sheet.is-photo {
    display: flex;
    flex-direction: column;
  }
  .cs-sheet.is-photo .cs-hero,
  .cs-sheet.is-photo .cs-id,
  .cs-sheet.is-photo .cs-body,
  .cs-sheet.is-photo .cs-actions {
    grid-column: auto;
    grid-row: auto;
  }
}