/* legal-mobile.css — Phase 7 polish (v2): iOS-native feel for the Legal Desk.
 *
 * Design notes (mirroring iOS HIG):
 *   • Toolbar: translucent sticky blur, safe-area padding, horizontally
 *     scrolling nav row that snaps to pills.
 *   • Tap targets: ≥44pt (44px) minimum — Apple HIG.
 *   • Inputs: 16px min font-size on focus to suppress iOS auto-zoom.
 *   • Buttons: press-scale (.96) micro-anim; no hover side-effects.
 *   • Cards: 14pt radius, soft hairline, no harsh borders.
 *   • Bottom content pad: respects home-indicator.
 */

/* ───────────────────────────────────────────────────────────────────── */
/*  ≤ 480px phones — the important ones                                   */
/* ───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Toolbar — single sticky blur bar. 2 rows allowed; logo + pills on top,
   * links wrap or scroll horizontally underneath.                         */
  #legal-hdr {
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    gap: 4px;
    row-gap: 6px;
  }
  #legal-hdr .logo { font-size: 16px; padding: 0; }
  #legal-hdr .sep  { display: none; }
  #legal-hdr .stat-pill {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* On phones the 9 header links become a swipe-through row below the logo.
   * We target them directly since legal.html does not wrap them in a
   * container. Only links inside the header need this behavior.            */
  #legal-hdr .legal-btn {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 34px;
  }

  /* Context switcher from legal-context.js gets its own line.              */
  .legal-ctx-switcher {
    order: 99;
    flex: 1 1 100%;
    justify-content: space-between;
    margin: 4px 0 0;
    padding: 6px 10px;
    border-radius: 10px;
  }
  .legal-ctx-switcher select { flex: 1; min-width: 0; font-size: 13px; }

  /* Tabs — pills that swipe horizontally                                   */
  #legal-nav {
    padding: 6px 10px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #legal-nav::-webkit-scrollbar { display: none; }
  .legal-tab-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
  }

  /* Content area                                                           */
  #legal-content {
    padding: 14px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* Hero — center-aligned, smaller type                                    */
  .legal-hero       { padding: 18px 16px; border-radius: 14px; }
  .legal-hero h1    { font-size: 22px; letter-spacing: -.02em; }
  .legal-hero p     { font-size: 14px; line-height: 1.5; }

  /* Cards                                                                  */
  .legal-card       { padding: 14px; border-radius: 14px; }
  .legal-card-title { font-size: 13px; }

  /* Workflow tiles — one column on phones                                  */
  .workflow-grid  { grid-template-columns: 1fr; gap: 10px; }
  .workflow-card  { padding: 16px; border-radius: 14px; }
  .workflow-card .wf-emoji { font-size: 28px; }
  .workflow-card .wf-title { font-size: 15px; }
  .workflow-card .wf-desc  { font-size: 13px; }

  /* Splits collapse                                                        */
  .legal-split { grid-template-columns: 1fr; gap: 12px; }

  /* Form grids collapse                                                    */
  .form-grid { grid-template-columns: 1fr; }

  /* Team chat                                                              */
  #team-chat-card .chat-shell { height: 340px; min-height: 280px; }
  #team-chat-card .chat-input { font-size: 16px; }
  .chat-bubble               { max-width: 88%; font-size: 15px; }

  /* Inputs — bump to 16px on phones to suppress iOS auto-zoom on focus     */
  .legal-inp, .legal-sel, .legal-ta, .legal-input, .chat-input {
    font-size: 16px;
    padding: 12px 14px;
  }

  /* Buttons everywhere: big tap target                                     */
  .legal-btn           { min-height: 40px; padding: 10px 16px; font-size: 14px; }
  .legal-btn.primary   { padding: 12px 18px; }

  /* Template-browser filter bar stacks                                     */
  #tpl-search, #tpl-cat-filter, #tpl-juris-filter {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    margin-top: 4px;
  }
  #tpl-fav-only { margin-top: 4px; }

  /* Tables get horizontal scroll                                           */
  .legal-table { font-size: 13px; }
  .legal-table thead th,
  .legal-table tbody td { padding: 10px 6px; }
  .legal-card .legal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  /* Matter row collapses to two lines on narrow screens                    */
  .matter-row {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .matter-row .m-id   { grid-column: 1 / -1; font-size: 11px; opacity: .7; }
  .matter-row .m-type { font-size: 11px; }

  /* Modal takes most of the screen                                         */
  .legal-modal-backdrop { padding: 12px; align-items: flex-end; }
  .legal-modal          { width: 100%; border-radius: 20px 20px 14px 14px; padding: 18px; }
  .legal-modal h3       { font-size: 17px; }
  .legal-modal .m-body  { font-size: 14px; }

  /* Toast slides up from bottom on mobile (matches iOS alerts)             */
  .legal-toast-wrap {
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
    align-items: stretch;
  }
  .legal-toast { max-width: none; border-radius: 12px; }

  /* Disclaimer — tighter                                                   */
  .legal-disclaimer { font-size: 12px; padding: 10px 12px; border-radius: 12px; }
}

/* ───────────────────────────────────────────────────────────────────── */
/*  Tablets (481–780)                                                     */
/* ───────────────────────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 780px) {
  #legal-hdr { padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .workflow-grid  { grid-template-columns: repeat(2, 1fr); }
  .legal-split    { grid-template-columns: 1fr; }
  .form-grid      { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}

/* ───────────────────────────────────────────────────────────────────── */
/*  PWA install prompt card                                               */
/* ───────────────────────────────────────────────────────────────────── */
#legal-pwa-install {
  display: none;
  padding: 14px 16px;
  margin: 14px 0;
  border-radius: 14px;
  border: 1px solid var(--legal-border, rgba(178,140,255,.25));
  background: linear-gradient(135deg, rgba(178,140,255,.10), rgba(78,143,255,.04));
  color: var(--legal-text, #e8fff6);
  font-size: 13px;
  gap: 12px;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
#legal-pwa-install.show { display: flex; flex-wrap: wrap; }
#legal-pwa-install .pwa-icon  { font-size: 26px; }
#legal-pwa-install .pwa-body  { flex: 1; min-width: 160px; }
#legal-pwa-install .pwa-title { font-weight: 600; margin-bottom: 2px; letter-spacing: -0.01em; }
#legal-pwa-install .pwa-sub   { font-size: 12px; color: var(--legal-mute, #8a8ea4); }
#legal-pwa-install button {
  background: var(--legal-accent, #b28cff);
  border: none;
  color: #0a0a12;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-height: 40px;
  transition: transform .12s ease, background-color .18s ease;
}
#legal-pwa-install button:active { transform: scale(.96); }
#legal-pwa-install .pwa-dismiss {
  background: transparent;
  border: 1px solid var(--legal-border, rgba(178,140,255,.35));
  color: var(--legal-mute, #8a8ea4);
  font-weight: 500;
  padding: 10px 14px;
}

/* ───────────────────────────────────────────────────────────────────── */
/*  Dark-mode tokens already baked in, but ensure autofill stays readable */
/* ───────────────────────────────────────────────────────────────────── */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--legal-text, #e6e4ff);
  -webkit-box-shadow: 0 0 0 1000px var(--legal-bg3, #111a2e) inset;
  transition: background-color 9999s ease-out 0s;
}

/* ───────────────────────────────────────────────────────────────────── */
/*  Respect reduce-motion                                                 */
/* ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
}