/*
 * KyleDev mobile-375 standard v1.
 * Five fixes so every screen works at 375px (iPhone SE / 13 mini width).
 * Source of truth: E:\Projects\_standards\mobile-375. Do not edit a project's copy; edit the source and re-run apply.mjs.
 *
 * 1. Tables turn into cards under 640px   (needs mobile-375.js, or add data-cards + data-label yourself; opt out with data-keep)
 * 2. Big numbers stay on one line, capped (.num / .kpi-value / [data-kpi])
 * 3. Inputs are 16px on touch (iOS zooms below 16px); keyboard hints come from mobile-375.js
 * 4. 44px touch targets on touch devices only (pointer: coarse); mouse layouts stay dense
 * 5. Fixed bottom bars clear the home indicator and leave room below the content (needs viewport-fit=cover)
 */

:root { --tap: 44px; --num-max: 30px; }

/* 3. Inputs. !important on purpose: below 16px iOS zooms the whole page, and a
   plain element selector loses to any class (Tailwind text-sm, .form-field select). Touch only. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* 4. Touch targets */
@media (pointer: coarse) {
  :where(button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, select,
         input[type="button"], input[type="submit"], input[type="reset"],
         input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"])) {
    min-height: var(--tap);
  }
  /* icon-only buttons: square, not a 44px-tall sliver */
  :where(button, [role="button"])[aria-label]:where(:empty, :has(> svg:only-child), :has(> img:only-child)) {
    min-width: var(--tap);
  }
}

/* 2. Big numbers */
.num, .kpi-value, [data-kpi] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: min(var(--num-size, var(--num-max)), 8.5vw);
  line-height: 1.1;
}
@media (min-width: 640px) {
  .num, .kpi-value, [data-kpi] { font-size: var(--num-size, var(--num-max)); }
}
:where(td, th, output, time) { font-variant-numeric: tabular-nums; }
/* common KPI markup (value inside a kpi/stat/metric card) never wraps */
[class*="kpi"] :is(strong, b, output), [class*="stat"] :is(strong, b, output), [class*="metric"] :is(strong, b, output) {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* 5. Bottom bars */
.safe-bottom,
.fixed.bottom-0:not([class*=" pb-"], [class^="pb-"], [class*=" py-"], [class^="py-"], [class*=" p-"], [class^="p-"]),
[data-bottom-bar] {
  padding-bottom: env(safe-area-inset-bottom);
}
/* content a bottom bar would cover: <main class="bar-room" style="--bar-h:56px"> */
.bar-room { padding-bottom: calc(var(--bar-h, 64px) + env(safe-area-inset-bottom) + 8px); }

/* 1. Tables to cards under 640px */
@media (max-width: 639px) {
  table[data-cards], table[data-cards] tbody, table[data-cards] tr, table[data-cards] td { display: block; width: 100%; }
  table[data-cards] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table[data-cards] tr {
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 10px; padding: 8px 12px; margin: 0 0 10px;
  }
  table[data-cards] td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 5px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere;
  }
  table[data-cards] td[data-label]::before {
    content: attr(data-label); flex: none; text-align: left; opacity: 0.62; font-size: 0.85em;
  }
  table[data-cards] td:empty { display: none; }
}