/* New workspace (owner beta) — phone layout, ≤ 900 px, and coarse-pointer tablets up to 1400 px (touch-layout.css; phones, and tablets in portrait — at 768 px the classic grid leaves the canvas 90 px wide). Scoped under html.nw so the classic app is untouched.
 * Owner: "usable at 390 px: panels become sheets, time row wraps to two lines".
 *   · the glyph rail becomes a fixed bottom bar (safe-area padded), scrolling sideways inside itself;
 *   · #app is one column: header / the shell's time row / the Direction Lab drop-down / canvas — the canvas gets the
 *     full width; the header and the time row lay themselves out (workspace-shell.css: two lines each at ≤ 700 px);
 *   · #sidebar (wheel cards + cast) and #right-panel become bottom sheets, opened by the time row's panel toggles
 *     (◀▮ / ▮▶ at both ends); one sheet at a time and both start closed (workspace-phone.js), the scrim / handle
 *     closes them; the page itself never scrolls sideways. */

@media (max-width: 900px), (pointer: coarse) and (max-width: 1400px) {
  html.nw { --nwp-bar: 52px; --nwp-safe: env(safe-area-inset-bottom, 0px); --nwp-bottom: calc(var(--nwp-bar) + var(--nwp-safe)); }
  html.nw, html.nw body { overflow: hidden; overscroll-behavior: none; }

  /* ── Rail → bottom bar ─────────────────────────────────────────────────────────────── */
  html.nw #icon-sidebar,
  html.nw body.rail-labeled #icon-sidebar {
    top: auto; right: 0; bottom: 0; left: 0; width: auto; height: var(--nwp-bottom);
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 2px;
    padding: 0 6px var(--nwp-safe); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    border-right: 0; border-top: 1px solid var(--bd); scrollbar-width: none;
  }
  html.nw #icon-sidebar::-webkit-scrollbar { display: none; }
  html.nw #icon-sidebar .icon-sb-item,
  html.nw body.rail-labeled #icon-sidebar .icon-sb-item { width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; }
  html.nw #icon-sidebar .icon-sb-item svg { width: 23px; height: 23px; }
  html.nw #icon-sidebar .icon-sb-label { display: none; }
  html.nw #icon-sidebar .icon-sb-item.active::before { left: 50%; top: auto; bottom: -4px; transform: translateX(-50%); width: 18px; height: 3px; }
  html.nw #icon-sidebar .icon-sb-divider { width: 1px; height: 24px; margin: 0 4px; }

  /* ── One-column app grid; the canvas row takes what is left above the bottom bar ───── */
  html.nw #app,
  html.nw body.rail-labeled #app,
  html.nw #app.sb-collapsed,
  html.nw #app.rp-collapsed,
  html.nw #app.sb-collapsed.rp-collapsed,
  html.nw #app.nav-enabled,
  html.nw #app.nav-enabled.sb-collapsed,
  html.nw #app.nav-enabled.rp-collapsed,
  html.nw #app.nav-enabled.sb-collapsed.rp-collapsed {
    padding-left: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; padding-bottom: var(--nwp-bottom); box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "hd" "tr" "nv" "cv";
  }
  html.nw #app > * { min-width: 0; max-width: 100vw; }
  html.nw #center { grid-area: cv; min-height: 0; }

  /* ── Header + time row: laid out by workspace-shell.css; the panel toggles stay above the sheet scrim ── */
  html.nw #header { padding: 4px 6px; }
  html.nw #ws-timerow { z-index: 1160; }

  /* ── The Direction Lab, once on, takes full lines of its own below the time row ─────── */
  html.nw #sphere-direction-lab-v2 { width: auto !important; min-width: 0; }
  html.nw #sphere-direction-lab-v2 .dlab-presets { flex-wrap: wrap; gap: 4px; padding: 0; }

  /* ── Panels → bottom sheets ───────────────────────────────────────────────────────── */
  html.nw #app #sidebar,
  html.nw #app #right-panel {
    position: fixed; left: 0; right: 0; bottom: calc(var(--nwp-bottom) / var(--osiris-text-zoom, 1)); z-index: 1200;
    /* Text Size puts a CSS zoom on the sheet, which scales vh and px alike: divide it back so the sheet keeps its viewport
     * height and sits on the bottom bar (at 110 % it grew 10 % and covered the panel toggles in the time row). */
    width: auto !important; max-width: none; height: calc(min(72vh, 100dvh - var(--nwp-bottom) - 56px) / var(--osiris-text-zoom, 1)); max-height: none;
    margin: 0; padding-top: 22px; border: 1px solid var(--bd-hi, var(--bd)); border-bottom: 0;
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .55);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  @starting-style {
    html.nw #app #sidebar,
    html.nw #app #right-panel { transform: translateY(100%); }
  }
  html.nw #app #sidebar { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; }
  /* Drag handle look (workspace-phone.js: tap or drag it down to close) */
  html.nw #app #sidebar::before,
  html.nw #app #right-panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 3px; background: var(--td); opacity: .55; z-index: 5; pointer-events: none;
  }
  html.nw #app #sidebar.nwp-dragging,
  html.nw #app #right-panel.nwp-dragging { transition: none; }
  html.nw #app #sidebar .resize-handle,
  html.nw #app #right-panel .resize-handle { display: none; }
  html.nw #app #sidebar #ident-card { max-height: none; }
  html.nw #app.sb-collapsed #sidebar,
  html.nw #app.rp-collapsed #right-panel { display: none !important; }

  /* Scrim behind an open sheet (element added by workspace-phone.js) */
  html.nw #nwp-scrim { position: fixed; left: 0; right: 0; top: 0; bottom: var(--nwp-bottom); z-index: 1150; background: rgba(4, 5, 10, .45); display: none; }
  html.nw #app:is(:not(.sb-collapsed), :not(.rp-collapsed)) ~ #nwp-scrim { display: block; }

  /* The left sheet scrolls as one page: a sticky head (wheel cards + tabs) would cover the Library below it. */
  html.nw #app #sidebar #console-head { position: static; }

  /* The cone view's DMO table folds to a chip over the canvas (workspace-phone.js nwCanvas.foldDmo). */
  html.nw #nwp-dmo-chip { position: absolute; top: 6px; right: 8px; z-index: 2; }

  /* The sphere's Directions timeline header wraps instead of clipping its last controls. */
  html.nw .sphere-workspace-timeline .swt-header { flex-wrap: wrap; row-gap: 4px; overflow: visible; }

  /* ── Floating windows fit the phone ─────────────────────────────────────────────────── */
  html.nw #rail-flyout { min-width: 0; width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--nwp-bottom) - 16px); overflow: auto; }
  html.nw #rail-flyout[data-key="chartdata"] { min-width: 0; max-width: calc(100vw - 16px); }
  html.nw :is(#nw-tools-menu, #data-menu) { max-width: calc(100vw - 16px); }
}