/* mobile-kit.css — mobile + tablet additions to the ShowHelm token system
 *
 * Layered on top of colors_and_type.css. Adds:
 *   - safe-area handling for iOS notch / Android gesture bar
 *   - 44/48px minimum touch targets (Apple HIG / Material)
 *   - mobile rhythm (denser, edge-to-edge cards)
 *   - dedicated tablet/desktop breakpoints
 *
 * Surfaces use the existing --bg-body / --text-* tokens, so a Light/Dim/Dark
 * swap via <theme-toggle> works without changes here.
 */

:root {
  /* Touch + safe-area */
  --touch-min: 44px;        /* iOS minimum */
  --touch-rec: 48px;        /* recommended primary actions */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Mobile-specific rhythm */
  --m-pad: 16px;
  --m-pad-sm: 12px;
  --m-pad-lg: 20px;
  --m-gap: 12px;
  --m-radius: 14px;
  --m-radius-lg: 18px;

  /* Mobile elevations */
  --m-shadow-sheet: 0 -8px 24px rgba(15, 25, 35, .12);
  --m-shadow-fab:   0 6px 16px rgba(15, 25, 35, .18);

  /* Layout heights */
  --m-topbar: 52px;
  --m-tabbar: 60px;
  --m-rail:   72px;  /* tablet */
}

[data-theme="dim"], [data-theme="dark"] {
  --m-shadow-sheet: 0 -8px 24px rgba(0, 0, 0, .45);
  --m-shadow-fab:   0 6px 16px rgba(0, 0, 0, .55);
}

/* Breakpoint custom-properties (read in JS via getComputedStyle) */
:root {
  --bp-mobile:  640px;
  --bp-tablet:  1024px;
}

/* ─── Generic mobile surface helpers ─────────────────────────────── */
.m-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-body);
  color: var(--text-body);
  font-family: var(--font-body);
}

.m-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Hit-target floor for any clickable inside a mobile screen */
.m-screen button,
.m-screen [role="button"],
.m-screen a[role="link"] {
  min-height: var(--touch-min);
}

/* Tablet rail-nav width helper */
.t-shell { display: grid; grid-template-columns: var(--m-rail) 1fr; height: 100%; }
.t-shell--two-pane { grid-template-columns: var(--m-rail) 320px 1fr; }