/* Tablet-landscape proportion for the studio.
 *
 * Owner review on an iPad, 2026-09-22: the rail should give the right side more
 * room, the template chips should fold to two rows so Celestial Vows sits beside
 * Burgundy Heirloom, the device and page tabs want slightly larger type, and the
 * demo -- the thing that hits the eye first -- should be bigger.
 *
 * Scoped to the landscape band below desktop so the laptop layout the owner
 * already approved is untouched. Chip height stays 44px: this is a touch screen.
 */
@media (min-width: 960px) and (max-width: 1439px) {
  /* Red: the bubble is right, only narrower, so the stage gains 44px. */
  /* Set the rail's track rather than the grid, so a closed rail still travels
     to zero here. styles.css owns the shape; this owns the measurement. */
  .dash-app {
    --dash-nav-track: 208px;
    --dash-nav-gap: 16px;
  }
  .dash-nav { padding: 16px 12px 12px; }
  /* The narrower rail leaves the studio label short of a line, so it tightens
     rather than breaking "WEDDING STUDIO" across two rows. */
  .dash-brand-copy small {
    white-space: nowrap;
    letter-spacing: 0.12em;
  }

  /* Yellow: smaller chips and a tighter panel fold thirteen templates into two
     rows from 1080px up. A 1024px iPad still needs three; shrinking far enough
     to fix that would leave the labels cramped. */
  .ws-invitation-surfaces {
    padding: 14px 16px;
    margin-bottom: 18px;
  }
  .ws-surface-options { gap: 6px; }
  .ws-surface-options .btn {
    padding: 0 12px;
    font-size: 13.5px;
  }

  /* Pink: the tabs keep their shape and take slightly more confident type. */
  .ed-devices button,
  .ed-tabs button { font-size: 14.5px; }

  /* Blue: the editor column gives up 44px so the demo can have it. Together with
     the rail the preview grows by about a quarter at every iPad landscape size. */
  .ed-split-flow { grid-template-columns: minmax(280px, 336px) minmax(0, 1fr); }
}

/* A short or small screen: the studio as one scrolling column.
 *
 * Owner, 2026-09-29: the studio opens on every screen, held any way, with no
 * "turn your device" cover. A phone on its side (844x390) or a small window
 * (700x700) then showed the editor's header in a 180px box and the design
 * below the screen with nothing to scroll to. Here, as on a phone upright
 * (wedding-phone.css), the design comes first, the fields follow at their own
 * height, and the dashboard's main area scrolls. A phone upright keeps its own
 * sheet; wide screens are untouched.
 */
@media (max-height: 559px), (max-width: 759px) {
  html:not([data-desk-device="phone"]) .dash-pane.dash-editor {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  html:not([data-desk-device="phone"]) .dash-pane.dash-editor[hidden] { display: none !important; }
  html:not([data-desk-device="phone"]) .dash-editor :is(.ed-split, .ed-split-flow) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    grid-template-rows: none;
  }
  html:not([data-desk-device="phone"]) .dash-editor .ed-split-flow > * { flex-shrink: 0; }
  html:not([data-desk-device="phone"]) .dash-editor .ed-split-flow > .ed-preview {
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  /* The canvases are sized by id on the desk (100% of their grid row). On a
     short screen the design and its bar fill the first screen; the desk's fit
     code scales the artboard into whatever box this gives it. */
  html:not([data-desk-device="phone"]) .dash-editor .ed-canvas,
  html:not([data-desk-device="phone"]) :is(#wsLetterCanvas, #wsSiteCanvas, #wsCardCanvas, #wsRsvpCanvas) {
    position: relative;
    flex: none;
    width: 100%;
    height: clamp(240px, calc(100svh - 150px), 560px);
    min-height: 240px;
  }
  html:not([data-desk-device="phone"]) .dash-editor .ed-split-flow > .ed-panel {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  html:not([data-desk-device="phone"]) .dash-editor .ed-panel-scroll {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}