/* The till's shapes for the shop's screens (owner, 2026-11-07).
 *
 * "My computer resolution is 1366x768 ... can you make this setting adjustable in the admin screen, so
 * the system adjusts itself?" The admin picks a size on Ajustes > Pantalla (`screen.py`); `base.html`
 * resolves it before the first paint into `<html data-screen-fit>`: `compact`, `standard` or `large`
 * (with "auto", from this window's own size, kept in step as it is resized). `standard` is the till as
 * designed and needs nothing here.
 *
 * Only the sales screen changes shape, because it is the one screen that has to fit everything at once;
 * the other pages already flow. The type scale is narrowed or widened *inside* `.till` (custom
 * properties inherit, so nothing outside the till moves), and a handful of measures follow it. Like
 * `contrast.css`, this sheet sets tokens of its own and is not one of the design system's consumers.
 * The phone layout (under 900 px) is untouched: every rule is inside the same breakpoint as the till's
 * two columns.
 */

@media (min-width: 900px) {
  /* ---------------------------------------------------------------- compact: a 1366x768 laptop
   * The cart keeps half the column instead of 60 %, which gives the products a whole extra row; tiles,
   * cart rows and the totals are a step tighter; the text is one pixel smaller, never under 11 px. */
  html[data-screen-fit="compact"] .till {
    --fs-2xs: 11px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-base: 14px;
    --fs-lg: 16px;
  }
  html[data-screen-fit="compact"] .till > .left-side > .customer-cart { flex-basis: 50%; min-height: 200px; }
  html[data-screen-fit="compact"] .till > .left-side .product-picker .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 6px 8px;
  }
  html[data-screen-fit="compact"] .till .left-side .product-grid .product-tile { padding: 7px 10px; }
  html[data-screen-fit="compact"] .till > .left-side .cart-line.is-flat { padding: 2px var(--space-3); }
  html[data-screen-fit="compact"] .till > .left-side .cart-line.is-flat .qty button,
  html[data-screen-fit="compact"] .till > .left-side .cart-line.is-flat .qty input,
  html[data-screen-fit="compact"] .till > .left-side .cart-line.is-flat .cl-price-input { height: 30px; }
  html[data-screen-fit="compact"] .till .cart-foot .row { padding-top: 1px; padding-bottom: 1px; }

  /* ---------------------------------------------------------------- large: a big monitor or a touch screen
   * Two pixels more text, wider tiles and taller cart rows: the same layout, read from further away and
   * touched with a finger. */
  html[data-screen-fit="large"] .till {
    --fs-2xs: 13px;
    --fs-xs: 14px;
    --fs-sm: 15px;
    --fs-md: 16px;
    --fs-base: 17px;
    --fs-lg: 20px;
    --fs-xl: 24px;
  }
  html[data-screen-fit="large"] .till > .left-side .product-picker .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
  }
  html[data-screen-fit="large"] .till .left-side .product-grid .product-tile { padding: 12px 14px; }
  html[data-screen-fit="large"] .till > .left-side .cart-line.is-flat { padding: 6px var(--space-4); }
  html[data-screen-fit="large"] .till > .left-side .cart-line.is-flat .qty button,
  html[data-screen-fit="large"] .till > .left-side .cart-line.is-flat .qty input,
  html[data-screen-fit="large"] .till > .left-side .cart-line.is-flat .cl-price-input { height: 42px; }
  html[data-screen-fit="large"] .till > .left-side .cart-line.is-flat .qty button { width: 42px; }
}