/* ============================================================
   mobile-vault.css — Horizon Vault mobile polish pass.
   Same pattern as mobile-qc.css / mobile-faq.css. Load AFTER vault.css.
   All rules are .hv-* scoped and gated to small screens; desktop untouched.

   HONEST SCOPE NOTE
   The Vault dashboard is already substantially mobile-designed: vault.css's
   @media (max-width:720px) block single-columns the card grid, stacks the
   welcome band, full-widths search, enforces ~44px touch targets, single-
   columns the modal field grid, and pins the compare tray. This file only
   closes the gaps that block left open — it does not re-do that work.

   No JSX scope hook needed: the page already renders .hv-page / .hv-db and
   every selector here is a real vault class.

   ════════════════════════════════════════════════════════════
   1 — COMPARE VIEW (/vault/compare) — the one surface still "adapted".
   The table is min-width:640px inside .hv-cmpwrap{overflow-x:auto}, with a
   180px row-label column. On a phone that leaves almost no room for the
   route columns before you must side-scroll. CSS can't transpose a grid
   table (rows are separate elements), so this makes the horizontal scroll
   genuinely usable: a slimmer sticky label column, tighter cells, and a
   min-width sized so the label + one full route column are always visible.
   The real fix (stacked one-card-per-route) is a component change — see the
   handoff. Everything here is palliative and safe.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .hv-cmptable { min-width: 520px; }
  .hv-cmpr { grid-template-columns: 128px repeat(var(--hv-cols, 3), minmax(120px, 1fr)); }
  .hv-cmpr > div { padding: 12px 13px; }

  /* Keep the metric-label column in view while the route columns scroll. */
  .hv-cmpr .rl,
  .hv-cmpr.h .rl {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cream-elevated, #FFFCF3);
  }
  .hv-cmpr.h .rl { background: var(--ivory, #F2ECDD); }

  /* Scroll affordance so it's obvious the table pans sideways. */
  .hv-cmpwrap {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    background:
      linear-gradient(90deg, var(--cream) 30%, rgba(250,245,232,0)) left / 24px 100% no-repeat,
      linear-gradient(90deg, rgba(250,245,232,0), var(--cream) 70%) right / 24px 100% no-repeat;
  }
  .hv-cmp h2 { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════
   2 — NEW-ROUTE CHOOSER — the 2-col .hv-newgrid gets cramped inside the
   modal on a narrow phone (four ~150px options). Stack to one column so
   each Lite/Pro option is a comfortable full-width tap target.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hv-newgrid { grid-template-columns: 1fr; }
  .hv-newopt { padding: 14px 16px; }
}

/* ════════════════════════════════════════════════════════════
   3 — DASHBOARD MICRO-POLISH — the shipped 720px block wraps the toolbar
   actions with flex-wrap, which can leave the sort select, Compare, and
   New in a ragged 1.5-row arrangement. Lay them out as a tidy row of three
   equal controls under the full-width search, and give the "⋯" card menu a
   real touch target (it inherits only min-height from .hv-act).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .hv-toolbar__acts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hv-toolbar__acts .hv-search { width: 100%; }
  .hv-toolbar__acts .hv-sortsel,
  .hv-toolbar__acts .hv-cmpbtn,
  .hv-toolbar__acts .hv-newbtn {
    grid-row: 2;
    min-height: 44px;
  }
  .hv-toolbar__acts .hv-search { grid-row: 1; }
  /* place the three controls across row 2 */
  .hv-toolbar__acts { grid-template-columns: 1.4fr 1fr 1fr; }
  .hv-toolbar__acts .hv-search { grid-column: 1 / -1; }

  .hv-act--ic { min-width: 44px; min-height: 44px; }
}