/* ============================================
   new-page-tablet.css — New Post on an iPad (B11, Oct 2026)
   A touch screen wider than a phone gets the touch builder from the phone
   (index.js loadNewPage; new-page-mobile.css applies to pointer: coarse).
   This file sizes it for the bigger screen:
   - the page is as tall as the screen allows, next to the icon rail
   - Next sits under the page (no phone top bar here)
   - portrait: Stickers and Backgrounds come up from the bottom
   - landscape: they slide in from the right and the page moves left
     (mobile-panel.js _applyShrink)
   Loaded after the other New Post styles.
   ============================================ */

/* Phones keep Next in the top bar */
.np-tablet-next-slot { display: none; }

@media (min-width: 769px) and (pointer: coarse) {
  /* Room under the page for Next: 12px gap + 48px button */
  .np-canvas-area {
    --np-next-room: 60px;
  }

  .np-canvas {
    width: min(
      calc((100dvh - 48px - var(--np-next-room)) * 9 / 16),
      calc(100vw - 72px - 48px)
    );
  }

  .np-tablet-next-slot {
    display: block;
    height: 48px;
    margin-top: 12px;
  }

  .np-mobile-next-btn.np-mobile-next-btn--under {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
  }

  .np-mobile-next-bubble.np-mobile-next-bubble--above::before {
    top: auto;
    bottom: -5px;
  }

  /* The tool bar floats on the page, not on the Next button */
  .np-mobile-toolbar {
    bottom: calc(14px + var(--np-next-room));
  }
  .np-canvas-placeholder {
    bottom: var(--np-next-room);
  }

  /* Bigger tool bar buttons for a bigger screen */
  .np-mobile-toolbar-btn {
    font-size: 15px;
    padding: 10px 18px;
  }

  /* Portrait: the bottom panel starts beside the icon rail */
  .np-mobile-panel {
    left: 72px;
  }
}

@media (min-width: 769px) and (pointer: coarse) and (orientation: landscape) {
  .np-mobile-panel {
    left: auto;
    right: 0;
    top: 0;
    height: var(--sb-vvh, 100dvh);
    width: min(400px, 40vw);
    border-radius: 20px 0 0 20px;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.14);
    transform: translateX(100%);
  }
  .np-mobile-panel.open {
    transform: translateX(0);
  }
  /* The grab handle is for pulling down a bottom panel */
  .np-mobile-panel-handle-row {
    visibility: hidden;
    padding: 4px 0 0;
  }
}