/* Touch layouts (lane ux-touch, UX audit P1-P4, F2). Loaded after workspace-phone.css. Scoped under html.nw.
 *   1. Coarse pointers (phones AND tablets, any width): every control has a 44 px hit box, text is at least 12 px,
 *      form fields are 16 px (no iOS focus zoom). Desktop mouse devices never match (pointer: fine).
 *   2. Tablet landscape (coarse, 901-1400 px): the phone shell (bottom bar, panels as sheets) so the chart stays large;
 *      the sheets are side drawers there. workspace-phone.css/.js carry the same media query.
 *   3. Phone landscape (coarse, height <= 500): chart first - the header and time row fold behind one toggle.
 *   4. Cast / Library dock in the phone bar; ring cards fold to a compact list inside the left sheet.
 * Colours come from the existing tokens only. */

@media (pointer: coarse) {
  html.nw:not(#_) :is(#header, #ws-timerow, #sphere-transport, #display-bar, #sidebar, #right-panel, #sphere-direction-lab-v2, #rail-flyout, #nwp-dock, #nwp-chrome-toggle, .direction-lab-shell, .report-bar)
    :is(button, summary, select, [role=button], [role=tab], [role=menuitem], .o-pill, .seg > *, .icon-sb-item) {
    min-height: 44px !important; min-width: 44px; box-sizing: border-box;
  }
  html.nw:not(#_) :is(#header, #ws-timerow, #sidebar, #right-panel, #sphere-direction-lab-v2, #rail-flyout, .direction-lab-shell, .report-bar)
    input:not([type=range], [type=checkbox], [type=radio], [type=color], [type=hidden]) {
    min-height: 44px; box-sizing: border-box; font-size: 16px;
  }
  html.nw:not(#_) :is(#sidebar, #right-panel, #rail-flyout, .direction-lab-shell) :is(select, textarea) { min-height: 44px; font-size: 16px; }
  html.nw:not(#_) :is(#sidebar, #right-panel, #rail-flyout, .direction-lab-shell) :is(input[type=checkbox], input[type=radio]) { width: 24px; height: 24px; margin: 10px; }
  html.nw:not(#_) #icon-sidebar .icon-sb-item { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  /* menus, popovers, flyouts opened from those controls */
  html.nw:not(#_) :is(.o-menu, #data-menu, #nw-tools-menu, .sph-nav-scale-menu, .ws-tray-inner) :is(button, [role=menuitem], [role=menuitemradio], [role=menuitemcheckbox], label, .o-menu-item) { min-height: 44px; box-sizing: border-box; }
  html.nw:not(#_) :is(.o-menu, #data-menu, #nw-tools-menu, .sph-nav-scale-menu, .ws-tray-inner) input:not([type=range], [type=checkbox], [type=radio]) { min-height: 44px; font-size: 16px; }
  html.nw:not(#_) :is(.o-menu, #data-menu, #nw-tools-menu) :is(input[type=checkbox], input[type=radio]) { width: 24px; height: 24px; margin: 10px; }
  /* the canvas zoom slider keeps its look; its thumb track gets a tall hit area instead of a taller control */
  html.nw:not(#_) input[type=range] { min-height: 44px; }
}

/* ── 2. The phone shell on coarse tablets (workspace-phone.css carries the same query) ─────────────────────────────── */
#nwp-dock, #nwp-chrome-toggle, #nwp-cards-toggle { display: none; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1400px) {
  html.nw:not(#_) { --nwp-bar: 56px; --nwp-edge-l: env(safe-area-inset-left, 0px); --nwp-edge-r: env(safe-area-inset-right, 0px); --nwp-dock-w: 120px; }
  html.nw:not(#_) #icon-sidebar { padding-left: calc(var(--nwp-dock-w) + var(--nwp-edge-l)); padding-right: max(6px, var(--nwp-edge-r)); gap: 4px; }
  html.nw:not(#_) #icon-sidebar .icon-sb-item { flex: none; }
  html.nw:not(#_) #app { padding-left: var(--nwp-edge-l); padding-right: var(--nwp-edge-r); }
  html.nw:not(#_) #globe-overlay, html.nw:not(#_) body.rail-labeled #globe-overlay { left: 0; bottom: var(--nwp-bottom, 56px); }

  /* Cast / Library: first-class entries in the bar, pinned at its left edge, one tap to the form or the list */
  #nwp-dock { display: flex; position: fixed; left: 0; bottom: 0; height: var(--nwp-bottom); z-index: 1250; box-sizing: border-box;
    align-items: center; gap: 4px; padding: 0 6px 0 max(6px, var(--nwp-edge-l)); padding-bottom: var(--nwp-safe, 0px);
    background: var(--pn, var(--bg)); border-top: 1px solid var(--bd); border-right: 1px solid var(--bd); }
  #nwp-dock button { min-width: 52px; min-height: 44px; padding: 0 8px; border: 1px solid var(--bd); border-radius: 10px; background: transparent;
    color: var(--tx, inherit); font: 600 12px/1 var(--o-font, system-ui, sans-serif); cursor: pointer; }
  #nwp-dock button[aria-pressed="true"] { background: var(--ac); color: var(--bg); border-color: var(--ac); }

  /* Ring cards fold to one line each; Rings (n) opens them (workspace-phone.js adds the toggle) */
  #nwp-cards-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0 0 6px; padding: 0 12px;
    border: 1px solid var(--bd); border-radius: 10px; background: transparent; color: var(--tx, inherit); font: 600 12px/1 var(--o-font, system-ui, sans-serif); }
  html.nw:not(#_) #sidebar:not(.nwp-cards-open) #ident-card { gap: 4px; padding: 4px; }
  html.nw:not(#_) #sidebar:not(.nwp-cards-open) #ident-card .wc-card > :not(.wc-head) { display: none !important; }
  html.nw:not(#_) #sidebar:not(.nwp-cards-open) #ident-card .wc-actions { display: none !important; }
  html.nw:not(#_) #sidebar:not(.nwp-cards-open) #ident-card .wc-list { gap: 4px; }
  html.nw:not(#_) #sidebar:not(.nwp-cards-open) #ident-card .wc-card { padding: 4px 6px; }
  html.nw:not(#_) #sidebar { scroll-padding-bottom: 72px; overscroll-behavior: contain; touch-action: pan-y; }
  html.nw:not(#_) #right-panel { overscroll-behavior: contain; touch-action: pan-y; }
  /* the canvas owns every touch on it (drag, pinch, two-finger time); the sheets above scroll on their own */
  html.nw:not(#_) #center canvas { touch-action: none; }
}

/* Tablet / phone landscape: the sheets are side drawers over the chart (the chart keeps the whole canvas cell) */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1400px) {
  html.nw:not(#_) { --nwp-drawer: 1; }
  html.nw:not(#_) #app #sidebar, html.nw:not(#_) #app #right-panel {
    top: 0; bottom: var(--nwp-bottom); height: auto; width: min(420px, 48vw) !important; padding-top: 8px; border-radius: 0; border-top: 0; transition-property: transform;
  }
  html.nw:not(#_) #app #sidebar { right: auto; left: 0; padding-left: max(8px, var(--nwp-edge-l)); border-left: 0; border-radius: 0 16px 0 0; box-shadow: 10px 0 40px rgba(0, 0, 0, .55); }
  html.nw:not(#_) #app #right-panel { left: auto; right: 0; padding-right: var(--nwp-edge-r); border-right: 0; border-radius: 16px 0 0 0; box-shadow: -10px 0 40px rgba(0, 0, 0, .55); }
  html.nw:not(#_) #app #sidebar::before, html.nw:not(#_) #app #right-panel::before { display: none; }
  html.nw:not(#_) #nwp-scrim { top: 0; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-width: 1400px) {
  @starting-style {
    html.nw:not(#_) #app #sidebar { transform: translateX(-100%); }
    html.nw:not(#_) #app #right-panel { transform: translateX(100%); }
  }
}

/* ── 3. Phone landscape: chart first. Header + time row fold behind one toggle ───────────────────────────────────── */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html.nw:not(#_) { --nwp-bar: 52px; }
  html.nw:not(#_):not(.nwp-chrome-open) #header, html.nw:not(#_):not(.nwp-chrome-open) #ws-timerow { display: none !important; }
  #nwp-chrome-toggle { display: flex; align-items: center; justify-content: center; position: fixed; top: 6px; left: max(6px, var(--nwp-edge-l)); z-index: 1100;
    min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--pn, var(--bg)); color: var(--tx, inherit);
    font: 600 12px/1 var(--o-font, system-ui, sans-serif); opacity: .92; }
  html.nw.nwp-chrome-open:not(#_) #nwp-chrome-toggle { position: fixed; top: auto; bottom: calc(var(--nwp-bottom) + 6px); left: auto; right: max(6px, var(--nwp-edge-r)); }
}

/* Text floor: 12 px on touch (the audit's list: 9-11 px captions, carets, tab labels, table heads) */
@media (pointer: coarse) {
  html.nw:not(#_) :is(.ws-date-k, .o-caret, #zoom-label, .wc-tag, .ab-card, .o-tab, .pr-kicker, .rp-btn, .pr-caret, .pr-sec-title, .pr-sec-pair,
      .pr-count, .pr-col-side, .pr-name, .pr-orb, .pr-h, .sec-sub, .startup-note, .cast-t, .wc-k, .o-label, .cap, summary, th, .ws-group-label, .ws-tray-inner button, .lsr-btn, .gl, .rp-btn) { font-size: max(12px, 1em) !important; }
  html.nw:not(#_) :is(#sidebar, #right-panel, #rail-flyout, #header, #ws-timerow, .ws-tray-inner, .o-menu) :is(button, span, div, label, small, a, p, td, th, li, summary, em, b, i):not(.gl, .ws-glyph) { font-size: max(12px, 1em) !important; }
  html.nw:not(#_) :is(.ws-dc, .ws-seg, #ws-timerow .seg) button { font-size: 12px; }
  /* Display family (the one home of view settings): headings and field labels reach the text floor, fields the target size */
  html.nw:not(#_) #right-panel .rb-display-title, html.nw:not(#_) #right-panel .rb-box-title, html.nw:not(#_) #right-panel .rb-box-subhead, html.nw:not(#_) #right-panel .rb-box-sub, html.nw:not(#_) #right-panel .rb-display-label, html.nw:not(#_) #right-panel .rb-display-field, html.nw:not(#_) #right-panel .rb-display-setlabel { font-size: 12px !important; }
  html.nw:not(#_) #right-panel .rb-display-field :is(input, select) { min-height: 44px !important; box-sizing: border-box; }
  html.nw:not(#_) :is(.o-tab.rb-family, .o-tab.rb-sub) { height: auto !important; min-height: 44px !important; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  html.nw:not(#_) .lsr-btn { min-height: 44px !important; }
  html.nw:not(#_) #zoom-reset { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 16px; }
  html.nw:not(#_) #nwp-dmo-chip { min-height: 44px; font-size: 12px; }
  html.nw:not(#_) #ws-wheels { min-width: 44px; }
}