/* ============================================================
   AetherCode — mobile.css
   Shared responsive layer, loaded by every page AFTER the
   page's own inline CSS. Desktop-first pages degrade gracefully
   to thumb-friendly layouts at 900/640/400px.
   Principles: fluid-first, ≥44px tap targets, tables→cards,
   inputs ≥16px (no iOS zoom), no horizontal scroll.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

/* ── nav (every page) ─────────────────────────────────────── */
nav {
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem .8rem !important;
}
nav .navlink, nav a[class*="nav"], nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-left: .8rem !important;
}

/* ── BIG TOUCH TARGETS — thumb-first (mobile only) ─────────── */
@media (max-width: 900px) {
  /* every interactive control gets a ≥48px target */
  .btn, button, [role="button"], a.btn, a[class*="btn"], .kkey, .chip,
  .navstrip a, .faq summary, .sess-row button, .modal-actions a {
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,.12);
    -webkit-user-select: none;
    user-select: none;
  }
  .btn { padding: .85rem 1.1rem !important; font-size: .95rem !important; }
  .btn-sm { min-height: 46px; padding: .6rem .9rem !important; }
  .btn.small { min-height: 44px; }
  .btn:active { transform: translateY(1px) scale(.98); }
  /* icon-only buttons get square thumb targets */
  .btn-ghost.btn-sm, .icon-btn, #bellBtn, #installBtn, button[title],
  button[aria-label] { min-width: 48px; }
  /* workspace card actions: fat 2-col grid instead of inline row */
  .ws-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    width: 100%;
    margin-top: .6rem;
  }
  .ws-item { flex-direction: column !important; align-items: stretch !important; gap: .4rem; }
  .ws-item > div:last-child { flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; }
  .ws-item .status { align-self: flex-start; }
  .ws-actions .btn, .ws-actions a.btn {
    width: 100%;
    margin: 0 !important;
    justify-content: center;
    min-height: 50px;
  }
  /* modal actions stack full-width */
  #workspaceModal .card { padding: 1.2rem !important; }
  #workspaceModal .card > div:last-child { flex-direction: column !important; gap: .5rem !important; }
  #workspaceModal .card .btn:not(.btn-sm) { width: 100%; min-height: 52px; margin: 0 !important; }
  /* primary CTAs go full-width for thumb reach */
  .plan .btn, .plan a.btn, .btn-primary:not(.btn-sm), .cta {
    width: 100%;
  }
}

/* ── containers flow full width (mobile only) ─────────────── */
@media (max-width: 900px) {
  main, .wrap, .card, .pkcard, .dashboard {
    max-width: 100% !important;
  }
  main { padding: 1.2rem .8rem 4rem !important; }
  main, .wrap { padding-left: .9rem !important; padding-right: .9rem !important; }

  /* ── chips & grids wrap (mobile only) ──────────────────── */
  .modelgrid, .grid, .feats {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: .45rem !important;
  }
  .mchip, .chip { min-height: 44px; padding: .5rem .6rem !important; }
}

/* ── inputs: 16px minimum (kills iOS auto-zoom, mobile only) ─ */
@media (max-width: 900px) {
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  /* charts/wide canvases must not overflow the phone */
  canvas { max-width: 100% !important; height: auto !important; }
}

/* ── engine / quota rows stack ────────────────────────────── */
.engine-row, .quota-row, .history-row {
  flex-wrap: wrap;
  padding: .7rem 0 !important;
}
.engine-select { min-height: 44px; }

/* ── tables become cards below 640px ──────────────────────── */
@media (max-width: 640px) {
  table { display: block; }
  table thead { display: none; }
  table tbody { display: block; }
  table tr {
    display: block;
    border: 2px solid #000;
    border-bottom: 3px solid #000;
    margin-bottom: .7rem;
    padding: .4rem .5rem;
  }
  table td, table th {
    display: block;
    border: none !important;
    padding: .35rem .2rem !important;
    text-align: left !important;
  }
  /* label cells via data-label when present */
  table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .05em;
    margin-right: .3rem;
  }
  .score { font-size: 15px; }
}

/* ── breakpoint: tablet / small laptop ────────────────────── */
@media (max-width: 900px) {
  .sechead { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .sechead h1, .sechead h2 { font-size: 20px !important; }
  .quota-name { width: 80px; }
  .quota-num { width: auto; }
  .clisnip, pre { max-height: 260px; }
}

/* ── breakpoint: phones ───────────────────────────────────── */
@media (max-width: 640px) {
  .pixel, h1, h2 { word-break: break-word; }
  .btn { width: 100%; text-align: center; justify-content: center; }
  .btn.small { width: auto; }
  .hero { padding: 1.2rem .4rem !important; }
  .codewin { font-size: 11px !important; overflow-x: auto; }
  .faq { padding: 0 !important; }
  .price { font-size: 30px !important; }
  .chart-box { min-height: 160px; }
  .form-row { flex-direction: column; }
  .form-group { width: 100% !important; }
  .engine-select { width: 100%; }
  .toggle { transform: scale(1.15); }
  .toast { left: .8rem; right: .8rem; text-align: center; }
  /* login / verify cards fill the screen */
  .card { padding: 1.4rem !important; }
  .status, .msg { font-size: 14px; }
  /* billing: kill the desktop body padding/margins */
  body { padding: 0 !important; }
  .wrap { margin: 0 !important; width: 100% !important; }
  /* dashboard stat strip */
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat { padding: .5rem; }
  /* dashboard main grid stacks to one column */
  .dashboard, .dash-grid, [class*="dashgrid"] { grid-template-columns: 1fr !important; }
  .chart-box { width: 100% !important; min-width: 0 !important; }
  /* keys page: stack the add-form rows */
  .addform { flex-direction: column; align-items: stretch !important; }
  .addform input { width: 100% !important; margin: .3rem 0; }
  /* history rows */
  .history-row { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* ── tiny screens ─────────────────────────────────────────── */
@media (max-width: 400px) {
  nav a { font-size: 11px; margin-left: .5rem !important; }
  .num, .dim { font-size: 11px; }
  .modelgrid { grid-template-columns: 1fr 1fr !important; }
}

/* ── long-content containment (kills horizontal scroll) ───── */
.pcard, .card, .pkcard, .krow, .mchip, .chip {
  min-width: 0 !important;
}
.wrap, main, .dashboard, .card, .pkcard, .pcard, .grid, article {
  box-sizing: border-box !important;
}
.kmeta, .krow, .grid > * { max-width: 100%; overflow-wrap: break-word; }
.kmeta { width: 100%; }
.kmeta span { overflow-wrap: anywhere; word-break: break-all; }
.krow .kmeta { flex-wrap: wrap; }
.chip { white-space: normal; word-break: break-word; }
code, pre, .clisnip { max-width: 100%; overflow-x: auto; }
.num { overflow-wrap: break-word; }

/* ── mobile-friendly scrollbars / overscroll ──────────────── */
* { -webkit-overflow-scrolling: touch; }

/* ── safe-area (notch) padding for standalone PWA ─────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  nav { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)) !important; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}