/* The page layout (viewer/layout.js): resizable and foldable panels on desktops and laptops, drawers on
   tablets, bottom sheets on phones, the header's page menu, safe-area insets. Loaded after the page's
   CSS. layout.js sets html[data-lay] to desk, tab or phone (its MEDIA, the one definition of the
   breakpoints) and the panel sizes as custom properties on <main>. */
body { height: 100vh; height: 100dvh; }
header { position: relative; flex-wrap: nowrap; min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top)); }
header h1 { white-space: nowrap; flex: none; }
main.lay { gap: 0; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }

/* ---- desktop and laptop: list | handle | view | handle | fact sheet, and film | handle | set */
body.gallery main.lay { grid-template-columns: var(--lay-list, 240px) var(--lay-hl, 8px) minmax(0, 1fr) var(--lay-hr, 8px) var(--lay-info, 340px);
  grid-template-rows: minmax(0, 1fr); }
main.lay > #list { grid-column: 1; }
main.lay > .lay-h-left { grid-column: 2; }
main.lay > #stage { grid-column: 3; }
main.lay > .lay-h-right { grid-column: 4; }
main.lay > #info { grid-column: 5; }
main.lay-split { grid-template-columns: minmax(0, calc((100% - var(--lay-hl, 8px)) * var(--lay-film, 0.5))) var(--lay-hl, 8px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); }
main.lay-split > :first-child { grid-column: 1; grid-row: 1; }
main.lay-split > .lay-h { grid-column: 2; grid-row: 1; }
main.lay-split > .pane + .lay-h + .pane, main.lay-split > .lay-h + .pane { grid-column: 3; grid-row: 1; }
main.lay-split.lay-rows { grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, calc((100% - var(--lay-hl, 8px)) * var(--lay-film, 0.5))) var(--lay-hl, 8px) minmax(0, 1fr); }
main.lay-split.lay-rows > :first-child { grid-column: 1; grid-row: 1; }
main.lay-split.lay-rows > .lay-h { grid-column: 1; grid-row: 2; }
main.lay-split.lay-rows > .lay-h + .pane { grid-column: 1; grid-row: 3; }
main.lay > .lay-folded, body.lay-focus:not(.explorer) main.lay > aside, body.focus-hide-panels main.lay > aside, body.lay-focus main.lay-split > :first-child,
body.lay-focus:not(.explorer) main.lay > .lay-h, body.focus-hide-panels main.lay > .lay-h { display: none; }

/* the handles: a line that lights on hover, focus and drag; a fold button; a rail when folded */
.lay-h { position: relative; cursor: col-resize; touch-action: none; outline: none; z-index: 5; min-width: 0; min-height: 0;
  -webkit-user-select: none; user-select: none; }
.lay-h::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; background: transparent; }
.lay-h::after { content: ''; position: absolute; inset: 0 -4px; }                  /* a wider grip than it looks */
.lay-h:hover::before, .lay-h.lay-drag::before { background: var(--line); width: 2px; margin-left: -1px; }
.lay-h:focus-visible::before, .lay-h.lay-drag::before { background: var(--accent); width: 2px; margin-left: -1px; }
.lay-rows .lay-h { cursor: row-resize; }
.lay-rows .lay-h::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; margin: -0.5px 0 0; }
.lay-rows .lay-h:hover::before, .lay-rows .lay-h:focus-visible::before, .lay-rows .lay-h.lay-drag::before { height: 2px; width: auto; margin: -1px 0 0; }
.lay-rows .lay-h::after { inset: -4px 0; }
.lay-fold { position: absolute; z-index: 1; top: 6px; left: 50%; width: 18px; height: 30px; margin-left: -9px; padding: 0;
  background: var(--panel); color: var(--dim); border: 1px solid var(--line); cursor: pointer; font: 13px/1 system-ui, sans-serif;
  opacity: 0.55; transition: opacity 0.15s; }
.lay-rows .lay-fold { top: 50%; left: auto; right: 8px; width: 30px; height: 18px; margin: -9px 0 0; }
.lay-h:hover .lay-fold, .lay-h:focus-visible .lay-fold, .lay-fold:focus-visible, .lay-h.lay-c .lay-fold { opacity: 1; }
.lay-fold:hover { color: var(--accent); border-color: var(--accent); }
.lay-h.lay-c { background: var(--panel); border: 1px solid var(--line); cursor: e-resize; }
.lay-h-right.lay-c { cursor: w-resize; }
.lay-rows .lay-h.lay-c { cursor: s-resize; }
.lay-h.lay-c::before { display: none; }
body.lay-dragging, body.lay-dragging * { cursor: col-resize !important; -webkit-user-select: none; user-select: none; }
body.lay-dragging:has(.lay-rows), body.lay-dragging:has(.lay-rows) * { cursor: row-resize !important; }
body.lay-dragging main .pane { pointer-events: none; }         /* the view's controls don't see the drag */

/* ---- the header's layout buttons and page menu */
.lay-bar { margin-left: auto; display: flex; gap: 4px; flex: none; }
.lay-bar button { background: none; color: var(--dim); border: 1px solid var(--line); padding: 4px 9px; cursor: pointer; font: inherit;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.lay-bar button:hover { color: var(--text); }
.lay-bar button.on { color: var(--accent); border-color: var(--accent); }
.lay-bar .lay-menubtn { display: none; }
.lay-bar .lay-menubtn[aria-expanded=true] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
header.lay-compact .lay-menubtn { display: block; order: -1; }
header.lay-measure { overflow: hidden; }
header.lay-measure > nav { flex-wrap: nowrap; flex: none; }
header.lay-measure > nav > * { white-space: nowrap; }
.lay-menu { display: none; position: absolute; z-index: 60; top: 100%; right: max(8px, env(safe-area-inset-right)); width: min(560px, calc(100vw - 16px));
  max-height: min(70vh, 70dvh); overflow-y: auto; padding: 10px; background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); flex-direction: column; gap: 10px; }
.lay-menu.on { display: flex; }
.lay-menu nav { flex-wrap: wrap; }
.lay-menu nav .tab, .lay-menu nav button { flex: 1 1 auto; text-align: center; }

/* the drawer heads, scrim (tablets and phones) */
.lay-dhead { display: none; }
.lay-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.lay-scrim.on { opacity: 1; pointer-events: auto; }

/* ---- tablets and phones: the view takes the page; the panels slide over it */
[data-lay=tab] body.gallery main.lay, [data-lay=phone] body.gallery main.lay { grid-template-columns: minmax(0, 1fr); }
[data-lay=tab] main.lay > #stage, [data-lay=phone] main.lay > #stage { grid-column: 1; }
[data-lay=tab] body.gallery main.lay > .lay-h, [data-lay=phone] body.gallery main.lay > .lay-h { display: none; }
[data-lay=tab] body.gallery main.lay > aside, [data-lay=phone] body.gallery main.lay > aside {
  display: block; position: fixed; z-index: 40; top: 0; bottom: 0; width: min(380px, 86vw); padding: 0 12px 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); overscroll-behavior: contain; outline: none;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.6); visibility: hidden; transition: transform 0.22s ease, visibility 0s 0.22s; }
[data-lay=tab] main.lay > #list { left: 0; transform: translateX(-105%); padding-left: max(12px, env(safe-area-inset-left)); }
[data-lay=tab] main.lay > #info { right: 0; transform: translateX(105%); padding-right: max(12px, env(safe-area-inset-right)); }
[data-lay] main.lay > #list.lay-open, [data-lay] main.lay > #info.lay-open { transform: none; visibility: visible; transition: transform 0.22s ease; }
main.lay > aside.lay-swiping { transition: none !important; }
[data-lay=tab] .lay-dhead, [data-lay=phone] .lay-dhead { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  position: sticky; top: 0; z-index: 2; margin: 0 -12px 6px; padding: max(6px, env(safe-area-inset-top)) 6px 6px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); color: var(--dim); text-transform: uppercase; letter-spacing: 0.15em; }
main.lay > aside .lay-dhead .lay-close { display: block; width: auto; flex: none; padding: 0; text-align: center; }
.lay-close { min-width: 44px; min-height: 44px; background: none; border: 1px solid transparent; color: var(--text); font: 22px/1 system-ui, sans-serif; cursor: pointer; }
.lay-close:hover { color: var(--accent); }

/* phones: bottom sheets, a grip on the head */
[data-lay=phone] body.gallery main.lay > aside { top: auto; left: 0; right: 0; width: auto; max-height: 82vh; max-height: 82dvh;
  border-radius: 12px 12px 0 0; transform: translateY(105%);
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
[data-lay=phone] main.lay > #list { height: 70vh; height: 70dvh; }
[data-lay=phone] .lay-dhead { padding-top: 16px; touch-action: none; border-radius: 12px 12px 0 0; }
[data-lay=phone] .lay-dhead::before { content: ''; position: absolute; top: 6px; left: 50%; width: 44px; height: 4px; margin-left: -22px;
  border-radius: 2px; background: var(--line); }
[data-lay=phone] header { gap: 10px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
[data-lay=phone] header h1 { font-size: 14px; letter-spacing: 0.12em; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
[data-lay=phone] main.lay { padding-top: 4px; padding-bottom: 4px; }

/* phones: the view's bar is one row that scrolls sideways; the name and HUD sit under it */
[data-lay=phone] .camerabar { right: 6px; left: 6px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
  scrollbar-width: none; pointer-events: auto; }
[data-lay=phone] .camerabar::-webkit-scrollbar { display: none; }
[data-lay=phone] .camerabar > * { flex: none; }
[data-lay=phone] .pane > .label { top: 54px; }
[data-lay=phone] #phud { top: 74px; }
[data-lay=phone] .help { top: 52px; right: 6px; max-width: calc(100% - 12px); }
[data-lay=phone] .lay-bar button { padding: 4px 7px; }

/* the view's bar wraps to a second row, right-aligned, when the view is narrow (a wide fact sheet, a tablet) */
.camerabar { left: 8px; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; pointer-events: none; }
.camerabar > * { pointer-events: auto; }
.camerabar .seg button { white-space: nowrap; }

/* touch targets of at least 40 px */
[data-lay=tab] .seg button, [data-lay=phone] .seg button,
[data-lay=tab] .lay-bar button, [data-lay=phone] .lay-bar button, [data-lay=tab] nav .tab, [data-lay=phone] nav .tab,
[data-lay=tab] nav button, [data-lay=phone] nav button, [data-lay=tab] .camerabar select, [data-lay=phone] .camerabar select,
[data-lay=tab] .camerabar input, [data-lay=phone] .camerabar input { min-height: 40px; }
[data-lay=tab] .seg button, [data-lay=phone] .seg button { min-width: 40px; }
[data-lay=tab] nav .tab, [data-lay=phone] nav .tab { display: inline-flex; align-items: center; justify-content: center; }
[data-lay=tab] #list button, [data-lay=phone] #list button { min-height: 40px; }
[data-lay=tab] input[type=range], [data-lay=phone] input[type=range] { height: 40px; }
@media (pointer: coarse) {
  .lay-h::after { inset: 0 -10px; }
  .lay-rows .lay-h::after { inset: -10px 0; }
  .lay-fold { width: 28px; height: 44px; margin-left: -14px; opacity: 1; }
  .lay-rows .lay-fold { width: 44px; height: 28px; margin-top: -14px; }
}