/* mobile.css - the mobile shell (phase 12, mobile UX spec). Every rule is
 * scoped under body.mobile-shell, which shell-web/mobileshell.js applies
 * when PDeviceProfile classes the session mobile (and removes on a flip
 * back), so the desktop layout is untouched by this file existing.
 *
 * Spec measurements honored here, by name:
 *   - every touch surface >= 44x44px (segments, bottom bar, sheet rows,
 *     chevron hit areas, modal close)
 *   - tree indentation 12px per level
 *   - insight cards full-width with 16px horizontal padding
 *   - bottom sheet: 40% black scrim, 16px top corner radius, drag handle
 *     pill, 50vh default height (85vh expanded)
 *   - 320px minimum width
 *   - body.dark: pure black #000000 background, #1E1E1E surfaces
 */

/* the chrome (segmented bar, bottom bar, sheets) exists in the DOM from
 * boot but only shows inside the mobile shell */
.m-chrome { display: none; }

/* one source of truth for the fixed bars (p13-hotfix-mobile, audit
 * findings 8 and 9): both bars grow with the safe-area insets, so every
 * offset that must clear them derives from these instead of a hardcoded
 * pixel count that only matched inset-free devices.
 *   top:    44px segment + 6px + 6px padding + 1px border = 57px + inset
 *   bottom: 48px button + 6px + 6px padding + 1px border = 61px + inset,
 *           plus 15px breathing room = the pre-inset 76px clearance */
body.mobile-shell {
  --m-topbar-height: calc(57px + env(safe-area-inset-top, 0px));
  --m-bottombar-clearance: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* ---- single-column stack (spec section 1: rejected side-by-side) ------ */

body.mobile-shell .app {
  display: block;
  min-width: 320px;
  height: auto;
  padding: 0 0 var(--m-bottombar-clearance) 0; /* room for the bottom app bar, inset included */
  gap: 0;
}
body.mobile-shell .panel {
  height: auto;
  min-height: calc(100vh - 140px);
  border-radius: 0;
  border-left: none;
  border-right: none;
}
/* desktop header rows are replaced by the segmented bar + bottom bar;
 * their buttons stay reachable through the palette sheet */
body.mobile-shell .topbar,
body.mobile-shell .panel-header,
body.mobile-shell .search-bar:not(#rendered-bar),
body.mobile-shell #minimap { display: none; }

/* exactly one context on screen, driven by data-mview (segmented control) */
body.mobile-shell:not([data-mview="source"]) .panel-source { display: none; }
body.mobile-shell[data-mview="source"] .panel-rendered { display: none; }
body.mobile-shell[data-mview="source"] .panel-source { display: flex; }

body.mobile-shell #input {
  min-height: 55vh;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
}

/* ---- segmented view control (sticky under the safe-area inset) -------- */

body.mobile-shell .m-segments {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px;
  gap: 4px;
  background: var(--bg, #ffffff);
  border-bottom: 1px solid var(--border, #d8d8d8);
}
body.mobile-shell .m-segment {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--border, #d8d8d8);
  border-radius: 10px;
  background: transparent;
  color: var(--text, #222222);
  font-size: 13px;
}
body.mobile-shell .m-segment[aria-selected="true"] {
  background: var(--user-bg, #e8f0fe);
  border-color: var(--user-accent, #3367d6);
  font-weight: 600;
}

/* ---- bottom app bar --------------------------------------------------- */

body.mobile-shell .m-bottombar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  gap: 4px;
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: var(--bg, #ffffff);
  border-top: 1px solid var(--border, #d8d8d8);
}
body.mobile-shell .m-bottombar button {
  flex: 1 1 0;
  min-height: 48px;
  min-width: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #222222);
  font-size: 12px;
}
body.mobile-shell .m-bottombar button[aria-pressed="true"] { background: var(--user-bg, #e8f0fe); }
body.mobile-shell .m-bottombar .m-parse { background: var(--user-accent, #3367d6); color: #ffffff; font-weight: 600; }

/* ---- bottom sheet (spec screen D) ------------------------------------- */

body.mobile-shell .m-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.4); /* spec: 40% opacity black scrim */
}
body.mobile-shell .m-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  height: 50vh; /* default; drag expands */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg, #ffffff);
  border-radius: 16px 16px 0 0; /* spec: 16px top corners */
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}
body.mobile-shell .m-sheet.m-sheet-tall { height: 85vh; }
body.mobile-shell .m-sheet-handle {
  min-height: 44px; /* spec: 44px touch surface; the strip is transparent, the pill stays 36x4 */
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
body.mobile-shell .m-sheet-handle::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong, #9a9a9a); /* the gray pill */
}
body.mobile-shell .m-sheet-title {
  padding: 2px 16px 8px;
  font-weight: 600;
  font-size: 14px;
}
body.mobile-shell .m-sheet-body { overflow-y: auto; flex: 1 1 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
body.mobile-shell .m-sheet-group {
  padding: 10px 16px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint, #888888);
}
body.mobile-shell .m-sheet-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 44px; /* spec: 44px list rows */
  padding: 4px 16px;
  border: none;
  border-bottom: 1px solid var(--surface-sunken, #f0f0f0);
  background: transparent;
  color: var(--text, #222222);
  text-align: start; /* logical: RTL sheet rows align right */
  font-size: 14px;
}
body.mobile-shell .m-sheet-row .m-row-hint {
  font-size: 11.5px;
  color: var(--text-faint, #888888);
}

/* ---- peek-to-source modal --------------------------------------------- */

body.mobile-shell .m-peek {
  position: fixed;
  inset: 8vh 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 62;
  display: flex;
  flex-direction: column;
  background: var(--bg, #ffffff);
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}
body.mobile-shell .m-peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  padding-inline-start: 16px;
  border-bottom: 1px solid var(--border, #d8d8d8);
  font-size: 13px;
  font-weight: 600;
}
body.mobile-shell .m-peek-close { min-width: 44px; min-height: 44px; border: none; background: transparent; color: var(--text, #222222); font-size: 18px; }
body.mobile-shell .m-peek pre {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- tree ergonomics (spec section 2) --------------------------------- */

/* 12px per level, wrap instead of horizontal overflow. Logical properties
 * throughout (padding-inline-start, not padding-left): RTL content keeps
 * its indentation and guide rail on the inline-start side, so the visual
 * parent-child hierarchy survives Arabic/Hebrew keys. The physical values
 * inherited from styles.css are zeroed first so they cannot reappear on
 * the wrong side under direction: rtl. */
body.mobile-shell .rail {
  border-left: none;
  border-inline-start: 2px solid var(--border, #d8d8d8);
  padding-left: 0;
  padding-inline-start: 12px;
  margin: 4px 0;
  margin-inline-start: 2px;
}
body.mobile-shell .rail-json { border-inline-start-color: var(--rail-json); }
body.mobile-shell .rail-xml { border-inline-start-color: var(--rail-xml); }
body.mobile-shell .rail-embed { border-inline-start-color: var(--rail-embed); }
body.mobile-shell #output { overflow-x: hidden; }
body.mobile-shell #output .json-string,
body.mobile-shell #output .kv-val { word-break: break-word; overflow-wrap: anywhere; }

/* the chevron gets a 44x44 hit area of its own: mobileshell.js only lets
 * taps inside this zone toggle the details; the rest of the summary row is
 * selection, never collapse */
body.mobile-shell summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-inline-start: 44px;
  position: relative;
  flex-wrap: wrap;
}
body.mobile-shell summary::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* hover affordances are desktop-only by spec: no hover styling, and the
 * hover-following action bar is suppressed (long-press owns node actions) */
body.mobile-shell summary:hover { background: transparent; }
body.mobile-shell .node-actions { display: none; }

/* KV view: strict one-column key-over-value stack */
body.mobile-shell .kv-row { flex-direction: column; align-items: flex-start; min-height: 44px; padding: 6px 12px; }
body.mobile-shell .kv-row .kv-path { max-width: 100%; }
body.mobile-shell .kv-row .kv-eq { display: none; }
body.mobile-shell .chunk-more { min-height: 44px; min-width: 44px; }
body.mobile-shell .clip-toggle { min-height: 44px; min-width: 44px; }

/* insight/triage cards: full-width, 16px horizontal padding */
body.mobile-shell #dashboard { grid-template-columns: 1fr; display: block; }
body.mobile-shell #dashboard .insight-section { width: 100%; margin: 0 0 10px; padding: 10px 16px; }

/* ---- atlas: one column per screen, swipe + breadcrumb ----------------- */

body.mobile-shell .atlas-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* the right-to-left slide when navigating deeper */
}
body.mobile-shell .atlas-columns { display: flex; }
body.mobile-shell .atlas-col {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
}
body.mobile-shell .atlas-links { display: none; } /* connectors are meaningless one column at a time */
body.mobile-shell .atlas-crumbs {
  position: sticky;
  top: var(--m-topbar-height); /* below the segmented bar, safe-area inset included */
  z-index: 30;
  background: var(--bg, #ffffff);
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px 8px;
}
body.mobile-shell .atlas-crumb { min-height: 44px; min-width: 44px; }
body.mobile-shell .atlas-chip { min-height: 44px; }

/* reduced motion: the sheet/scroll animations are conveniences only */
@media (prefers-reduced-motion: reduce) {
  body.mobile-shell .atlas-scroll { scroll-behavior: auto; }
}

/* ---- body.dark (spec screens A-D: #000000 canvas, #1E1E1E surfaces) --- */

body.dark.mobile-shell { background: #000000; }
body.dark.mobile-shell .app,
body.dark.mobile-shell .panel { background: #000000; }
body.dark.mobile-shell .m-segments,
body.dark.mobile-shell .m-bottombar { background: #000000; border-color: #333333; }
body.dark.mobile-shell .m-segment { border-color: #333333; color: #dddddd; }
body.dark.mobile-shell .m-segment[aria-selected="true"] { background: #1E1E1E; border-color: #7ab8ff; }
body.dark.mobile-shell .m-bottombar button { color: #dddddd; }
body.dark.mobile-shell .m-bottombar button[aria-pressed="true"] { background: #1E1E1E; }
body.dark.mobile-shell .m-sheet,
body.dark.mobile-shell .m-peek { background: #1E1E1E; }
body.dark.mobile-shell .m-sheet-row { color: #dddddd; border-bottom-color: #2a2a2a; }
body.dark.mobile-shell .m-sheet-handle::before { background: #555555; }
body.dark.mobile-shell .m-peek-close { color: #dddddd; }
body.dark.mobile-shell .atlas-crumbs { background: #000000; }
body.dark.mobile-shell #input { background: #1E1E1E; }