/* ============================================================
   Cowork UI Kit — MOBILE tokens
   Touch-first overrides + safe-area + iOS no-zoom + scroll
   Apply BEFORE archetype CSS. Class: .is-mobile (or always-on)
   v0.1 — 2026-05-20
   ============================================================ */

/* -----------------------------------------------------------
   Safe-area inset variables — read from notch/home indicator
   ----------------------------------------------------------- */
:root {
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);

  /* Touch target minimums — Apple HIG 44pt, Material 48dp */
  --touch-min:     44px;
  --touch-comfy:   48px;
  --touch-large:   56px;

  /* Mobile-specific spacing scale (denser than desktop) */
  --m-gap-xs: 4px;
  --m-gap-sm: 8px;
  --m-gap-md: 12px;
  --m-gap-lg: 16px;
  --m-gap-xl: 24px;
  --m-gap-2xl: 32px;

  /* Phone container widths */
  --phone-sm: 360px;  /* Android median */
  --phone-md: 390px;  /* iPhone 14 */
  --phone-lg: 430px;  /* iPhone 14 Pro Max */

  /* Mobile typography — 16px min for inputs to prevent iOS zoom */
  --m-font-input-min: 16px;
  --m-font-body:      15px;
  --m-font-label:     13px;
  --m-font-caption:   12px;
  --m-font-display:   28px;
  --m-line-tight:     1.2;
  --m-line-normal:    1.45;
  --m-line-reading:   1.65;
}

/* -----------------------------------------------------------
   Safe-area utility classes
   ----------------------------------------------------------- */
.sa-top    { padding-top:    var(--sa-top); }
.sa-bottom { padding-bottom: var(--sa-bottom); }
.sa-left   { padding-left:   var(--sa-left); }
.sa-right  { padding-right:  var(--sa-right); }
.sa-all {
  padding-top:    var(--sa-top);
  padding-right:  var(--sa-right);
  padding-bottom: var(--sa-bottom);
  padding-left:   var(--sa-left);
}

/* Sticky bottom that respects home indicator */
.sticky-bottom {
  position: sticky;
  bottom: 0;
  padding-bottom: calc(var(--m-gap-md) + var(--sa-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 40;
}

/* Fixed bottom tab nav respecting home indicator */
.tab-bar-fixed {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding-bottom: var(--sa-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 50;
}

/* -----------------------------------------------------------
   Touch target utilities
   ----------------------------------------------------------- */
.touch {
  min-width:  var(--touch-min);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Larger hit area for small visual elements */
  position: relative;
}
.touch.comfy { min-width: var(--touch-comfy); min-height: var(--touch-comfy); }
.touch.large { min-width: var(--touch-large); min-height: var(--touch-large); }

/* Invisible expanded hit area without changing visual size */
.touch-expand::after {
  content: '';
  position: absolute;
  inset: -8px;
  /* Capture tap outside visible bounds */
}

/* -----------------------------------------------------------
   Input fixes — iOS no-zoom, momentum scroll, tap highlight
   ----------------------------------------------------------- */
input, textarea, select {
  font-size: max(var(--m-font-input-min), 1em);
  /* iOS Safari refuses to zoom if font-size >= 16px */
}

@media (hover: none) and (pointer: coarse) {
  /* Touch-only: kill hover states that stay stuck */
  *:hover { transition: none; }
}

/* Smooth momentum scroll on iOS */
.scroll-smooth-touch {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Horizontal scroll-snap (for rails, week strips, segmented) */
.snap-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.snap-x::-webkit-scrollbar { display: none; }
.snap-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Remove tap highlight blue flash */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* -----------------------------------------------------------
   Viewport-driven units (with iOS Safari URL bar fix)
   ----------------------------------------------------------- */
:root {
  --vh-full: 100vh;
  /* Override with JS for accurate iOS Safari height */
}
@supports (height: 100dvh) {
  :root { --vh-full: 100dvh; }
}

.h-screen-safe {
  min-height: var(--vh-full);
  min-height: -webkit-fill-available;
}

/* -----------------------------------------------------------
   Touch-first focus states (visible without keyboard)
   ----------------------------------------------------------- */
.focusable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* -----------------------------------------------------------
   Disable text selection on UI chrome (tabs, buttons)
   Keep enabled on content
   ----------------------------------------------------------- */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* -----------------------------------------------------------
   Anti-bug bake-ins
   ----------------------------------------------------------- */
/* Prevent body bounce on iOS when content fits */
html.no-bounce, html.no-bounce body {
  overscroll-behavior-y: none;
  position: fixed;
  width: 100%;
}

/* Address bar offset for full-bleed sticky elements */
.fixed-top-safe {
  position: fixed;
  top: var(--sa-top);
  left: 0; right: 0;
  z-index: 50;
}