/*
 * apple-touch.css — global responsive + Apple HIG layer
 *
 * Goal: the main app (app.senshin.io / dojo) renders cleanly on every
 * touch device — iPhone, iPad, Capacitor iOS build — without bespoke
 * per-page tweaks. Sits ABOVE sprint12-mobile.css in the cascade so
 * its broader rules override page-specific defaults on touch devices.
 *
 * Anchored to Apple Human Interface Guidelines:
 *   - 44pt minimum touch target everywhere on coarse pointer
 *   - Generous spacing (Apple uses 16-24pt around content, not 8-12pt)
 *   - 17pt body font on iOS (= 16-17px CSS) to prevent auto-zoom on inputs
 *   - Safe-area insets respected at every page container
 *   - Modals become bottom sheets on phone, centred on tablet
 *   - Hover effects suppressed on touch (no hover state to feel sluggish)
 *   - Restrained motion (already enforced by prefers-reduced-motion elsewhere)
 *
 * Loaded after sprint12-mobile.css in app-shell-vnext.html.
 */

/* ── Touch-mode global overrides ──────────────────────────────────────────
   pointer: coarse fires on real touch devices (iPhone, iPad, Capacitor).
   Desktops with mouse stay on the compact design.
   ───────────────────────────────────────────────────────────────────────── */

@media (pointer: coarse) {

  /* Buttons grow to 44pt min on touch — Apple HIG floor.
     Keeps the compact look on desktop, adds breathing room on phone. */
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .ss-btn,
  .bt-btn,
  .pd-btn,
  .md-btn,
  .cs-btn,
  .demo__btn {
    min-height: 44px;
    min-width: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Inline icon buttons (gear, plus, refresh, ↻) — still 44pt hit area
     but visually 28-32px via padding-only growth. */
  .bt-icon,
  .ss-icon-btn,
  .pd-icon-btn,
  [class*="icon-btn"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Anchor tags that act like buttons (cards, list rows, nav items) */
  a[role="button"],
  a.btn,
  a.ss-btn,
  a.budo-nav__leaf {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Form inputs — 16px body font prevents iOS auto-zoom on focus.
     Also 44pt min height for comfortable tapping. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }

  /* Checkboxes + radios — larger hit area without resizing the dot */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    margin-right: 8px;
  }

  /* List rows — Apple uses 56-72pt for primary list cells */
  .bt-row,
  .ss-row,
  .pd-row,
  tr {
    min-height: 56px;
  }

  /* Compact table rows opt-out — use .compact class to keep small */
  .table-compact tr,
  tr.compact {
    min-height: 0;
  }

  /* Suppress hover effects on touch — they feel sluggish (200ms timeout) */
  *:hover {
    background-color: inherit;
    color: inherit;
  }
  /* Preserve hover on .keep-hover for cases we genuinely want */
  .keep-hover:hover { background-color: revert; color: revert; }
}

/* ── Phone breakpoint (≤480px) — Apple iPhone Pro Max width ─────────────── */

@media (max-width: 480px) {
  /* Page wrappers — generous gutters + safe-area on all four sides */
  .ss-page,
  .pd-page,
  .bt-page,
  .md-page,
  .cs-page,
  [class$="-page"] {
    padding-left:  max(16px, env(safe-area-inset-left,  16px));
    padding-right: max(16px, env(safe-area-inset-right, 16px));
    padding-top:   max(16px, env(safe-area-inset-top,   16px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }

  /* Headings scale down gracefully */
  h1 { font-size: 22px; line-height: 1.2; }
  h2 { font-size: 18px; line-height: 1.25; }
  h3 { font-size: 16px; line-height: 1.3; }

  /* Body text stays readable */
  body, p, li, td {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Cards stack full-width with generous padding */
  .ss-card,
  .pd-card,
  .bt-card,
  .demo,
  [class$="-card"] {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  /* Tables — let them scroll horizontally rather than crush content */
  .ss-table,
  .pd-table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  /* Modals become bottom sheets — slide up from bottom on phone */
  .ss-modal,
  .pd-modal,
  .bt-modal {
    align-items: flex-end;
    padding: 0;
  }
  .ss-modal__box,
  .pd-modal__box,
  .bt-modal__box {
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom, 20px));
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Hide non-essential meta on tight screens */
  .hide-on-phone { display: none !important; }
}

/* ── Tablet breakpoint (481-1024px) — iPad portrait/landscape ────────────── */

@media (min-width: 481px) and (max-width: 1024px) {
  /* Tablet keeps desktop layout but with bigger touch targets via
     the pointer:coarse block above. Add extra horizontal gutters. */
  .ss-page,
  .pd-page,
  .bt-page,
  [class$="-page"] {
    padding-left:  max(24px, env(safe-area-inset-left,  24px));
    padding-right: max(24px, env(safe-area-inset-right, 24px));
  }

  /* Modals are centred but with safe-area bottom inset */
  .ss-modal__box,
  .pd-modal__box,
  .bt-modal__box {
    margin-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  }
}

/* ── Capacitor / iOS standalone web app — extra safe-area handling ──────── */

@media (display-mode: standalone) {
  /* Reserve a strip at the very top for the status bar (iPhone notch) */
  body {
    padding-top: max(0px, env(safe-area-inset-top, 0px));
  }
}

/* ── Restrained motion — Apple favours short, calm transitions ──────────── */

@media (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  /* On touch devices, cap all transitions at 250ms so tapping feels
     instant. Apple Spring would be ideal but CSS doesn't expose it. */
  * {
    transition-duration: min(var(--transition-duration, 200ms), 250ms);
  }
}

/* ── Focus rings — keyboard-only, never on tap ──────────────────────────── */

@media (pointer: coarse) {
  /* Hide focus rings triggered by touch (they linger awkwardly) */
  :focus:not(:focus-visible) {
    outline: none;
  }
  /* Keep them for keyboard users on the same device (rare but real) */
  :focus-visible {
    outline: 2px solid var(--brand-primary, #1B4F72);
    outline-offset: 2px;
  }
}