/* layout.css - frame, safe areas, HUD corners, paged tray (docs/mobile-spec.md 2-4). Owner: L6.
 * Properties --safe-*, --keep-*, --hud-corner, --tray-* are layout properties, not tokens.
 * Mirrors js/platform/geometry.js; keep both in step. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --keep-t: max(var(--edge-keepout), calc(var(--safe-t) + 8px));
  --keep-r: max(var(--edge-keepout), calc(var(--safe-r) + 8px));
  --keep-b: max(var(--edge-keepout), calc(var(--safe-b) + 8px));
  --keep-l: max(var(--edge-keepout), calc(var(--safe-l) + 8px));
  --hud-corner: 76px;
  --tray-cell: 72px;
  --tray-rows: 1;
  --tray-pad-t: 12px;
  --tray-row-gap: 12px;
  --tray-cols: 4;                 /* written by tray.js; trayLayout() in geometry.js */
  --tray-h: calc(var(--tray-pad-t) + var(--tray-rows) * var(--tray-cell)
                 + (var(--tray-rows) - 1) * var(--tray-row-gap) + var(--keep-b));
  --size-tray-item: var(--tray-cell);
}

@media (orientation: portrait) { :root { --tray-rows: 2; } }
@media (min-width: 600px) and (min-height: 600px) { :root { --tray-cell: 88px; } }
@media (orientation: landscape) and (max-height: 479px) { :root { --tray-pad-t: 8px; } }

/* ---- frame ---- */
.app {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--c-paper);
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--tray-h);
  overflow: hidden;
  isolation: isolate;
  z-index: var(--z-stage);
}

/* ---- HUD: transparent layer over the stage; only its children take pointers ---- */
.hud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hold {
  position: absolute;
  top: var(--keep-t);
  width: var(--size-hold);
  height: var(--size-hold);
  border-radius: var(--radius-round);
  display: grid;
  place-items: center;
}
.hold-home { right: var(--keep-r); }
.hold-clear { left: var(--keep-l); }
.hud[data-hand="left"] .hold-home { right: auto; left: var(--keep-l); }
.hud[data-hand="left"] .hold-clear { left: auto; right: var(--keep-r); }

/* ---- tray: paged grid, full width, to the physical bottom ---- */
.tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tray-h);
  background: var(--c-paper);
  box-shadow: inset 0 var(--stroke-ui) 0 var(--c-line);   /* top border inside the band */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  contain: layout paint;
}

.tray-strip {
  position: absolute;
  top: var(--tray-pad-t);
  left: var(--keep-l);
  right: var(--keep-r);
  display: grid;
  grid-template-columns: repeat(var(--tray-cols), var(--tray-cell));
  grid-auto-rows: var(--tray-cell);
  justify-content: space-between;     /* extra room becomes gaps; JS keeps cols so gaps stay 12..24 */
  column-gap: 12px;
  row-gap: var(--tray-row-gap);
  direction: rtl;                      /* data-hand=right: first item at the right (mobile-spec 4.3) */
}
.hud[data-hand="left"] .tray-strip { direction: ltr; }
.tray[data-ordered="true"] .tray-strip { direction: ltr; }   /* ordered tray (ABC): reading order A to Z left to right, whatever the hand */
.tray-strip > * { direction: ltr; }

.tile, .tray-arrow {
  width: var(--tray-cell);
  height: var(--tray-cell);
  display: grid;
  place-items: center;
}
.tray-arrow > * { width: var(--size-tray-arrow); height: var(--size-tray-arrow); }

/* ---- phone landscape: the tray is a 2-column side column on the dominant-hand edge (mobile-spec 4.5) ----
 * Same band as geometry.js traySide(): landscape and not large (height < 600). The stage gets the full height. */
@media (orientation: landscape) and (max-height: 599.98px) {
  .app {
    --tray-side-cols: 2;
    --tray-edge: var(--keep-r);
    --tray-w: calc(12px + var(--tray-side-cols) * var(--tray-cell) + (var(--tray-side-cols) - 1) * 12px + var(--tray-edge));
  }
  .app[data-hand="left"] { --tray-edge: var(--keep-l); }

  .stage { bottom: 0; right: var(--tray-w); }
  .app[data-hand="left"] .stage { right: 0; left: var(--tray-w); }

  .tray {
    top: 0;
    left: auto;
    width: var(--tray-w);
    height: auto;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: inset var(--stroke-ui) 0 0 var(--c-line);     /* stage-side border inside the column */
  }
  .app[data-hand="left"] .tray {
    left: 0;
    right: auto;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    box-shadow: inset calc(-1 * var(--stroke-ui)) 0 0 var(--c-line);
  }
  .app .hud .tray.is-drop { box-shadow: inset var(--stroke-ui) 0 0 var(--c-line), inset 0 0 0 6px var(--c-glow); }

  .tray-strip {
    top: var(--keep-t);
    bottom: var(--keep-b);
    left: 12px;
    right: var(--tray-edge);
    grid-template-columns: repeat(var(--tray-side-cols), var(--tray-cell));
    grid-template-rows: var(--tray-cell) 0;   /* Home row, then a zero-height divider track: the Home row is parted from the toys by two gaps */
    align-content: space-between;     /* extra height becomes row gaps */
  }
  .tray-sep { grid-row: 2; grid-column: 1 / -1; height: 0; position: relative; }
  .tray-sep::before { content: ''; position: absolute; left: 4px; right: 4px; top: -1.5px; height: 3px; border-radius: 2px; background: var(--c-line); opacity: 0.5; }
  .app[data-hand="left"] .tray-strip { left: var(--tray-edge); right: 12px; }

  /* Home: centred in the column's first cell (top, outer edge = the viewport corner, as the Home-screen gear); tray.js keeps
   * that cell empty on every page. Clear keeps the far top corner of the stage. */
  .app .hud .hold-home { top: calc(var(--keep-t) + (var(--tray-cell) - var(--size-hold)) / 2); right: calc(var(--tray-edge) + (var(--tray-cell) - var(--size-hold)) / 2); left: auto; z-index: 1; }
  .app[data-hand="left"] .hud .hold-home { left: calc(var(--tray-edge) + (var(--tray-cell) - var(--size-hold)) / 2); right: auto; }

  /* paging arrows top (Back) and bottom (Next): chevrons point up / down, where the new toys slide in from */
  .app .hud .tray-arrow.tray-next svg { transform: rotate(90deg); }
  .app .hud .tray-arrow.tray-back svg { transform: rotate(-90deg); }
}

/* short landscape: gate in two columns (mobile-spec 8.3) */
.gate { max-width: calc(100vw - var(--keep-l) - var(--keep-r)); }
@media (orientation: landscape) and (max-height: 479px) {
  .gate { display: grid; grid-template-columns: 1fr auto; align-items: center; }
}

/* grown-ups corner: the head with "Back to play" stays at the top while the settings scroll (mobile-spec 8.4).
 * The dialog is the scroll box; the head reaches over the column's top padding so nothing shows above it. */
.settings-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: calc(-16px - var(--safe-t)) -16px 0;
  padding: calc(16px + var(--safe-t)) 16px 12px;
  background: var(--c-adult-bg);
  box-shadow: 0 1px 0 var(--c-adult-border);
}
/* focus not obscured by the sticky head: a focused control scrolls in below it (head = title row + button row when wrapped) */
.settings :focus { scroll-margin-top: calc(16px + var(--safe-t) + 2 * 64px + 12px + 24px); }

@media (prefers-reduced-motion: reduce) {
  .tray-strip { transition: none; }
}