/* CUBE: block. The phone layer (ARD399).

   The rest of the codebase is intrinsically sized for a 7" tablet: a 216px
   sticky rail beside a 100dvh screen that scrolls internally, a 1fr + 25rem
   till, three-up tiles and five-column tables. None of that survives a 390px
   viewport, and no intrinsic primitive rescues it: the rail and the cart have
   to change kind, not size. So this file is the one sanctioned exception to
   both "no @media for layout" and "no block styles another block's selector"
   (docs/css-rules.md). It may only contain rules inside the max-width query,
   and it must be linked last so it wins on equal specificity.

   Markup it expects, all inside the "nav" template block of layouts/base.html
   so pages that opt out of the nav (login) get none of it:
     .mobile-bar     top app bar: menu button, screen title, status, avatar
     .mobile-tabs    bottom tab bar, role-swapped like the rail
     .mobile-scrim   drawer backdrop
   Behaviour lives in static/js/mobile.js. */

:root {
  --mobile-bar-h:  52px;
  --mobile-tabs-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Phone-only chrome is inert on tablet. */
.mobile-bar,
.mobile-tabs,
.mobile-scrim,
.sale__cart-toggle { display: none; }

@media (max-width: 640px) {

  /* ---- 1. Shell ----------------------------------------------------
     The rail stops being a column of the shell and becomes an overlay
     drawer, so the page owns the full width and scrolls as one document
     (ARD400). Nothing sits on top of the content, nothing is clipped by
     a 100dvh box. */

  body.app-shell { display: block; min-block-size: 100dvh; }

  .app-main {
    min-inline-size: 0;
    overflow-x: clip;
    padding-block-end: var(--safe-b);
  }
  /* Reserve the tab bar only where one is actually rendered: site-nav.js
     reveals the tabs after auth, and login never ships them at all. */
  body:has(.mobile-tabs:not([hidden])) .app-main {
    padding-block-end: calc(var(--mobile-tabs-h) + var(--safe-b));
  }

  .mobile-bar:not([hidden]) {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    block-size: var(--mobile-bar-h);
    padding-inline: var(--space-2xs) var(--space-s);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
  }
  .mobile-bar__menu {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
    padding: 0;
    background: transparent;
    color: var(--color-fg);
    border: 0;
    box-shadow: none;
  }
  .mobile-bar__menu:hover:not(:disabled) { background: var(--color-hover-soft); }
  .mobile-bar__title {
    flex: 1;
    min-inline-size: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    block-size: var(--icon-btn-sm);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-border-subtle);
    color: var(--color-fg);
    font-size: var(--fs-xs);
    font-weight: 500;
  }
  .mobile-bar__dot {
    inline-size: var(--dot);
    block-size: var(--dot);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
  }
  .mobile-bar__chip[data-online="false"] .mobile-bar__dot { background: var(--color-warn); }
  .mobile-bar__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--icon-btn);
    block-size: var(--icon-btn);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-ink);
    font-size: var(--fs-2xs);
    font-weight: 600;
  }

  /* ---- 2. Rail as drawer ------------------------------------------ */

  .side-rail,
  .side-rail[data-role="cashier"] {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(17.5rem, 84vw);
    block-size: 100dvh;
    align-items: stretch;
    transform: translateX(-101%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-md);
    z-index: var(--z-overlay);
  }
  [data-drawer="open"] .side-rail { transform: none; }

  /* The cashier rail is icon-only at 64px; in a drawer it has room for the
     labels, so it reverts to the admin presentation. */
  .side-rail[data-role="cashier"] .side-rail__name,
  .side-rail[data-role="cashier"] .side-rail__chip-label { display: inline; }
  .side-rail[data-role="cashier"] .side-rail__brand {
    justify-content: flex-start;
    block-size: var(--rail-head-h);
    padding: 0 var(--space-s);
    border-block-end: 1px solid var(--color-border-subtle);
  }
  .side-rail[data-role="cashier"] .side-rail__logo {
    inline-size: var(--brand-mark);
    block-size: var(--brand-mark);
    border-radius: var(--radius-s);
    font-size: var(--fs-xs);
  }
  .side-rail[data-role="cashier"] .side-rail__nav {
    align-items: stretch;
    padding: var(--space-xs);
    gap: var(--space-s);
  }
  .side-rail[data-role="cashier"] .side-rail__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-xs);
    inline-size: auto;
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-xs);
    border-radius: var(--radius-s);
    color: var(--color-fg);
    font-size: var(--fs-sm);
  }
  .side-rail[data-role="cashier"] .side-rail__foot { align-items: stretch; }
  .side-rail[data-role="cashier"] .side-rail__utility { flex-direction: row; }
  .side-rail[data-role="cashier"] .side-rail__user-menu {
    inset-block-end: calc(100% + var(--space-2xs));
    inset-inline-start: 0;
  }

  /* Rows are the primary hit targets in a drawer: 38px is under the 44px
     minimum once a thumb is involved. */
  .side-rail__item,
  .side-rail__till {
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }

  .mobile-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
    z-index: var(--z-menu);
  }
  [data-drawer="open"] .mobile-scrim { opacity: 1; pointer-events: auto; }

  /* ---- 3. Bottom tabs ---------------------------------------------- */

  .mobile-tabs:not([hidden]) {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    block-size: calc(var(--mobile-tabs-h) + var(--safe-b));
    padding-block-end: var(--safe-b);
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
  }
  /* Same role swap as the rail (side-rail.css), driven by the data-role
     site-nav.js stamps on both. */
  .mobile-tabs[data-role="admin"] .mobile-tabs__item--cashier,
  .mobile-tabs[data-role="cashier"] .mobile-tabs__item--admin { display: none; }
  .mobile-tabs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    min-block-size: var(--tap-min);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--color-muted);
    font-size: var(--fs-3xs);
    font-weight: 500;
    text-decoration: none;
  }
  .mobile-tabs__item > .icon { inline-size: 22px; block-size: 22px; }
  .mobile-tabs__item:hover { background: var(--color-surface-muted); }
  .mobile-tabs__item[aria-current] { color: var(--color-primary-ink); }

  /* ---- 4. Screens scroll with the page ---------------------------- */

  .screen {
    block-size: auto;
    min-block-size: 0;
  }
  .screen__body { overflow: visible; }

  /* ---- 5. Page head + toolbar ------------------------------------- */

  .page-head {
    flex-wrap: wrap;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-m) var(--space-xs);
  }
  .page-head__group { flex-basis: 100%; }
  .page-head__title { font-size: var(--fs-2xl); }
  .page-head__actions {
    inline-size: 100%;
    flex-wrap: wrap;
  }
  .page-head__actions > button {
    flex: 1 1 8rem;
    block-size: var(--control-h-lg);
    min-block-size: var(--control-h-lg);
  }
  .page-head__back { flex: 0 0 auto; inline-size: var(--control-h-lg); }

  .toolbar {
    padding: 0 var(--space-m) var(--space-s);
    gap: var(--space-xs);
  }
  .toolbar__search {
    flex-basis: 100%;
    max-inline-size: none;
    block-size: var(--control-h-lg);
  }
  .toolbar__chip {
    flex: 1 1 auto;
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }
  .toolbar > select,
  .toolbar > input[type="date"] { flex: 1 1 9rem; min-inline-size: 0; }

  /* 16px is the threshold under which iOS zooms the whole page on focus,
     which is the single most common "the layout jumped" report (ARD403). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    block-size: var(--control-h-lg);
    min-block-size: var(--control-h-lg);
    font-size: 16px;
  }
  .toolbar__search-input,
  .sale__search-input { block-size: auto; min-block-size: 0; font-size: 16px; }

  /* ---- 6. Tables become card lists -------------------------------- */
  /* Five columns cannot be read at 390px, and a horizontal scroller hides
     the actions. Each row becomes a two-column card; the label comes from
     the matching <th>, stamped onto the cell by mobile.js (ARD401). */

  .table-card {
    margin: 0 var(--space-m) var(--space-m);
    overflow: visible;
  }
  .table-card__scroll { overflow: visible; }
  .table-card table,
  .table-card tbody,
  .table-card tr,
  .table-card td { display: block; }
  .table-card thead { display: none; }

  .table-card tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs) var(--space-s);
    padding: var(--space-s) var(--space-m);
    border-block-end: 1px solid var(--color-border-subtle);
  }
  .table-card tbody tr:hover { background: transparent; }
  .table-card td {
    padding: 0;
    border: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .table-card td.u-text-end { text-align: start; }
  .table-card td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: var(--space-3xs);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  /* The headline leads the card whatever column it came from: mobile.js picks
     the most identifying one (name over sku), which is rarely column one. */
  .table-card td[data-primary] {
    order: -1;
    grid-column: 1 / -1;
    font-size: var(--fs-md);
    font-weight: 600;
  }
  .table-card td[data-primary]::before { content: none; }
  .table-card td:has(.row-actions),
  .table-card td:has(> input[type="checkbox"]) { grid-column: 1 / -1; }
  .table-card td:has(.row-actions)::before,
  .table-card td:has(> input[type="checkbox"])::before { content: none; }
  .table-card td:has(.row-actions) {
    margin-block-start: var(--space-3xs);
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--color-border-subtle);
  }
  .table-card .row-actions {
    justify-content: flex-start;
    gap: var(--space-2xs);
  }
  .table-card .row-actions__btn {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }
  /* The checkbox stays a checkbox; the whole cell is the hit area. */
  .table-card td:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--tap-min);
    padding-block: var(--space-2xs);
  }
  .table-card td > input[type="checkbox"] { inline-size: 24px; block-size: 24px; }

  .table-card__foot {
    block-size: auto;
    padding: var(--space-xs) var(--space-s);
    gap: var(--space-s);
  }
  .table-card__page-btn {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }

  .bulk-bar {
    block-size: auto;
    flex-wrap: wrap;
    margin-inline: var(--space-m);
    padding: var(--space-xs) var(--space-s);
  }
  .bulk-bar__btn { block-size: var(--tap-min); min-block-size: var(--tap-min); }
  .bulk-bar__close {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }
  .bulk-bar__sep { display: none; }

  /* ---- 7. The till ------------------------------------------------- */

  .sale {
    display: flex;
    flex-direction: column;
    block-size: auto;
  }
  .sale__catalogue { border-inline-end: 0; }

  .sale__search-bar {
    position: sticky;
    inset-block-start: var(--mobile-bar-h);
    z-index: var(--z-raised);
    flex-wrap: wrap;
    padding: var(--space-s) var(--space-m);
    background: var(--color-surface);
  }
  .sale__search { flex-basis: 100%; }
  .sale__scan { flex: 1 1 8rem; }

  .sale__results {
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    padding: var(--space-xs) var(--space-m) 0;
  }
  .sale__tile-media { block-size: 7.5rem; }

  /* Cart as a bottom sheet (ARD402). Collapsed it peeks the total and
     Charge; the head is the toggle. The catalogue reserves the collapsed
     height so the last row of tiles stays reachable rather than sitting
     under the sheet. */
  .sale__catalogue { padding-block-end: 15rem; }

  .sale__cart {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    max-block-size: 86dvh;
    padding-block-end: var(--safe-b);
    border-block-start: 1px solid var(--color-border);
    border-start-start-radius: var(--radius-l);
    border-start-end-radius: var(--radius-l);
    box-shadow: var(--shadow-md);
  }
  body:has(.mobile-tabs:not([hidden])) .sale__cart {
    inset-block-end: calc(var(--mobile-tabs-h) + var(--safe-b));
  }

  .sale__cart-head {
    block-size: var(--tap-min);
    padding-inline: var(--space-m);
  }
  .sale__cart-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-s);
    background: transparent;
    color: var(--color-muted);
    border: 0;
    box-shadow: none;
    font-size: var(--fs-xs);
    font-weight: 600;
  }
  .sale__cart-toggle > .icon { transform: rotate(-90deg); transition: transform var(--dur-fast) var(--ease-out); }
  [data-cart-state="open"] .sale__cart-toggle > .icon { transform: rotate(90deg); }

  .sale__cart-list { display: none; max-block-size: 46dvh; }
  [data-cart-state="open"] .sale__cart-list { display: block; }

  .sale__step { inline-size: var(--tap-min); block-size: var(--tap-min); min-block-size: var(--tap-min); }
  .sale__line-tool,
  .sale__cart-tool,
  .sale__grand-discount {
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }

  .sale__totals { padding: var(--space-s) var(--space-m) var(--space-m); }
  .sale__actions > button { block-size: var(--control-h-lg); }

  /* ---- 8. Dialogs, toast, login ----------------------------------- */

  dialog.dialog {
    max-inline-size: 100%;
    inline-size: 100%;
    margin: auto auto 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-block-end: var(--safe-b);
  }
  .dialog__header,
  .dialog__body,
  .dialog__actions { padding-inline: var(--space-m); }
  .dialog__body { max-block-size: 56dvh; }
  .dialog__actions { flex-direction: column-reverse; }
  .dialog__actions > button {
    inline-size: 100%;
    block-size: var(--control-h-lg);
    min-block-size: var(--control-h-lg);
  }

  .toast {
    inset-block-end: calc(var(--space-s) + var(--safe-b));
    inline-size: calc(100% - var(--space-m) * 2);
    max-inline-size: none;
  }
  body:has(.mobile-tabs:not([hidden])) .toast {
    inset-block-end: calc(var(--mobile-tabs-h) + var(--safe-b) + var(--space-xs));
  }

  .login { padding: var(--space-m); }
  .login__card { padding: var(--space-l); }

  .empty-state { padding: var(--space-xl) var(--space-m); }
}