/* RESPONSIVE — one set of rules so every screen works on phones, tablets, laptops and desktops.
   Breakpoints (see tokens.css): phone 640px, tablet 820px, laptop 980px. Touch devices get larger targets whatever their width. */

/* ---- phone and tablet navigation: a tab bar at the bottom, a More sheet for the rest ---- */
.tabbar { display: none; }
.check-text { display: none; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-menu { display: flex; flex-direction: column; margin-top: var(--space-md); }
.sheet-menu a { display: flex; align-items: center; gap: var(--space-md); min-height: var(--tap-min); padding: var(--space-sm) var(--space-xs); border-bottom: var(--border-default); color: var(--color-text); font-weight: var(--weight-medium); }
.sheet-menu a:hover { text-decoration: none; background: var(--color-wash); }
.sheet-menu a.active { color: var(--color-primary); }
.sheet-menu .icon { width: var(--icon-size); height: var(--icon-size); flex: none; opacity: var(--opacity-icon); }

@media (max-width: 820px) {
  .side { display: none; }
  .tabbar {
    position: fixed; z-index: var(--z-side); left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around;
    padding: var(--space-xs) calc(var(--space-xs) + env(safe-area-inset-right)) calc(var(--space-xs) + env(safe-area-inset-bottom)) calc(var(--space-xs) + env(safe-area-inset-left));
    background: var(--color-nav-mobile); backdrop-filter: saturate(var(--saturate)) blur(var(--blur-md)); -webkit-backdrop-filter: saturate(var(--saturate)) blur(var(--blur-md)); border-top: var(--border-default);
  }
  .tabbar a, .tabbar button {
    flex: 1; min-width: var(--tap-min); min-height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3xs);
    border: 0; background: none; font: inherit; font-size: var(--text-micro); font-weight: var(--weight-medium); color: var(--color-text-faint); border-radius: var(--radius-md); cursor: pointer; text-decoration: none;
  }
  .tabbar .icon { width: var(--tabbar-icon); height: var(--tabbar-icon); }
  .tabbar .active { color: var(--color-primary); }
  .shell { padding-bottom: calc(var(--tabbar-h) + var(--space-6xl) + env(safe-area-inset-bottom)); padding-left: calc(var(--space-md) + env(safe-area-inset-left)); padding-right: calc(var(--space-md) + env(safe-area-inset-right)); }
  .menu-pop { right: var(--space-md); }
  .topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(var(--space-md) + env(safe-area-inset-right)) 0 calc(var(--space-md) + env(safe-area-inset-left)); gap: var(--space-sm); }
  .version-badge { bottom: calc(var(--tabbar-h) + var(--space-md) + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(var(--tabbar-h) + var(--space-3xl) + env(safe-area-inset-bottom)); }
}

/* ---- Quick sale: the total and the Complete sale button stay in view while the form scrolls ---- */
@media (max-width: 820px) {
  .sell-done { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-sm)); background: var(--color-surface); padding-top: var(--space-xs); }
}

/* ---- phones: smaller top bar, tables become cards, sheets rise from the bottom ---- */
@media (max-width: 640px) {
  .menu-btn { max-width: var(--width-xs); }
  .menu-scrim { display: block; position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-scrim); backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm)); animation: fade-in var(--dur-med) var(--ease); }
  .menu-pop { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: var(--sheet-max-h-phone); border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: rise-in var(--dur-med) var(--ease); }
  .menu-body { padding: var(--space-sm) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom)); }
  .page-head { margin-bottom: var(--space-lg); }
  .card { padding: var(--space-lg); }
  .tablewrap { margin: 0; padding: 0; overflow: visible; }
  table, tbody { display: block; }
  thead { display: none; }
  tr { display: grid; gap: var(--space-2xs); padding: var(--space-md) 0; border-bottom: var(--border-default); }
  tr:last-child { border-bottom: 0; }
  td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--color-text-faint); font-size: var(--text-xs); font-weight: var(--weight-medium); }
  td[data-label=""]::before { content: none; }
  td:first-child { justify-content: flex-start; text-align: left; font-weight: var(--weight-medium); }
  td[data-label=""]:not(:first-child) { justify-content: flex-end; }
  td::before { font-family: var(--font-sans); }
  .row { flex-wrap: wrap; }
  td:empty { display: none; }
  tr.click:hover td { background: none; }
  .seg { max-width: 100%; }
  .check-head { display: none; }
  .check-row, .war-row, .cat-row, .step-row, .pay-row, .stock-row, .buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
  .check-row > :first-child, .war-row > :first-child, .cat-row > :first-child, .step-row > :first-child, .pay-row > :first-child, .stock-row > :first-child, .buy-row > :first-child { flex: 1 1 100%; min-width: 0; }
  .reordering .check-row > :first-child, .reordering .war-row > :first-child, .reordering .step-row > :first-child, .reordering .pay-row > :first-child { flex-basis: calc(100% - var(--tap-min) - var(--space-sm)); }   /* Reorder on: the handle sits beside the name, not alone on a line */
  .reordering .grip { order: 1; }
  .reordering .check-row > :not(:first-child):not(.grip), .reordering .war-row > :not(:first-child):not(.grip), .reordering .step-row > :not(:first-child):not(.grip), .reordering .pay-row > :not(:first-child):not(.grip) { order: 2; }
  .check-row .check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap-min); }
  .check-text { display: inline; font-size: var(--text-sm); color: var(--color-text-muted); }
  .card .row > input.grow { flex: 1 1 100%; }
  .cart-line { grid-template-columns: minmax(0, 1fr) var(--width-xs) var(--tap-min); }
  .cart-line > div:first-child { grid-column: 1 / -1; }
  .scrim { place-items: end center; padding: 0; }
  .sheet { width: 100%; max-height: var(--sheet-max-h-phone); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .sheet-body { padding-bottom: calc(var(--sheet-padding) + env(safe-area-inset-bottom)); }
  .sheet .actions .btn { flex: 1; }
}

/* ---- touch: every control is at least 44px, and fields are 16px so iPhones do not zoom in ---- */
@media (pointer: coarse), (max-width: 820px) {
  .btn, .btn.small, .btn.block { min-height: var(--tap-min); }
  .seg button, .filter { min-height: var(--tap-min); }
  .pick-list li { min-height: var(--tap-min); }
  .icon-btn { width: var(--tap-min); height: var(--tap-min); }
  .select-btn, input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=search], textarea { min-height: var(--tap-min); font-size: var(--text-input-touch); }
  button.chip { min-height: var(--tap-min); padding: 0 var(--space-lg); }
  .linkish { min-height: var(--tap-min); padding: var(--space-sm) var(--space-xs); font-size: var(--text-sm); }
  .switch { min-height: var(--tap-min); }
}

/* ---- landscape phones are short: keep the bars slim ---- */
@media (max-height: 500px) and (orientation: landscape) {
  .tabbar a, .tabbar button { min-height: var(--tap-min); flex-direction: row; justify-content: center; gap: var(--space-sm); }
  .shell { padding-bottom: calc(var(--tap-min) + var(--space-4xl)); }
}

@media (max-width: 640px) { .feed { max-height: none; overflow-y: visible; } }   /* phones: the page scrolls, not a box inside it */

@media (max-width: 640px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts dd { margin-bottom: var(--space-sm); } }   /* phones: a fact's label sits above its value */