/* The Fast list sell screen (0.31.0, docs/register-redesign/PLAN.md, stage 1), for Food, Retail and
   the one register. Loaded last on every register page, after the product's own CSS, so it decides
   how the sell screen looks. Colors only from the theme's tokens, so every look works (Night Rail is
   the first look; Ledger, Classic and the others too), light and dark.
   - The search / scan box comes first, across the top.
   - Items are rows: name, what it asks or its stock, the price, and + (adds it) or ⋯ (opens its
     options). Short sizes and colors are buttons on the row (one tap adds that one).
   - Categories run down a rail on the left on wide screens, chips above the list on narrower ones.
   - The order stays docked on the right (tablets) or folds into the bar at the bottom (phones). */

/* ---- The search / scan box ---- */
.register .scanbar { display: flex; gap: 8px; padding: 12px 12px 8px; padding-left: max(12px, env(safe-area-inset-left)); flex: none; }
.register .scanbar input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: var(--radius); border: 2px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 17px; box-shadow: none;
}
.register .scanbar input::placeholder { color: var(--muted); }
.register .scanbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.register .scanbar .scan-cam { min-height: 52px; border-radius: var(--radius); }

/* ---- The list ---- */
.register .grid {
  display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 12px; gap: 0;
  container: fastlist / inline-size;
}
.register .grid .item {
  position: relative; display: grid; width: 100%; min-height: 64px; margin: 0; gap: 2px 12px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto 48px; grid-template-areas: "name price add" "meta price add";
  padding: 8px 12px 8px 24px; padding-right: max(12px, env(safe-area-inset-right));
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text);
  text-align: left; box-shadow: none; transform: none; overflow: visible; align-content: center;
}
.register .grid .item::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--tint, var(--accent)); }
.register .grid .item::after { content: none; }
.register .grid .item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); border-color: var(--line); box-shadow: none; }
.register .grid .item:active { background: color-mix(in srgb, var(--accent) 12%, transparent); transform: none; }
.register .grid .item:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -3px; }
.register .grid .item-name { grid-area: name; font-size: 17px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; color: var(--text); text-shadow: none; }
.register .grid .item-meta { grid-area: meta; display: block; min-width: 0; margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); text-shadow: none; }
.register .grid .item-meta:empty { display: none; }
/* No second line: one row, so the name sits level with the price and + (not in the top half). */
.register .grid .item:has(> .item-meta:empty) { grid-template-areas: "name price add"; }
.register .grid .item.has-img:has(> .item-meta:empty) { grid-template-areas: "img name price add"; }
.register .grid .item-row > .item:has(> .item-meta:empty) { grid-template-areas: "name price"; }
.register .grid .item-row > .item.has-img:has(> .item-meta:empty) { grid-template-areas: "img name price"; }
.register .grid .item-hint, .register .grid .item-cal { color: var(--muted); font-size: 13px; font-weight: 500; }
.register .grid .item-hint + .item-cal { margin-left: 8px; }
.register .grid .item-price { grid-area: price; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: none; }
.register .grid .stock { text-shadow: none; }
.register .grid .stock.low { color: var(--warn); }
.register .grid .stock.out { color: var(--bad); }
/* + adds it now (the accent); ⋯ opens its options or sizes (quiet). */
.register .grid .item-add {
  grid-area: add; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-text); font-size: 26px; font-weight: 600; line-height: 1;
}
.register .grid .item.has-opts .item-add { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-size: 20px; }
.register .grid .item-add:empty { display: none; }
/* A photo: a small square at the start of the row (no more photo tiles). */
.register .grid .item.has-img { grid-template-columns: 48px minmax(0, 1fr) auto 48px; grid-template-areas: "img name price add" "img meta price add"; padding-left: 24px; background: transparent; color: var(--text); border-color: var(--line); }
.register .grid .item.has-img::before { content: ""; }
.register .grid .item.has-img .item-img { grid-area: img; position: static; inset: auto; width: 48px; height: 48px; border-radius: calc(var(--radius) - 2px); object-fit: cover; z-index: auto; }
.register .grid .item.has-img > span { position: static; z-index: auto; text-shadow: none; }
.register .grid .item.has-img :is(.item-price, .item-cal, .item-meta) { color: inherit; }
.register .grid .item.has-img .item-meta { color: var(--muted); }

/* A row with size or color buttons: the item on top, its buttons under it (beside it when wide). */
.register .grid .item-row { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.register .grid .item-row > .item { border-bottom: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "meta price"; }
.register .grid .item-row > .item.has-img { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "img name price" "img meta price"; }
.register .grid .item-vars { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px 24px; padding-right: max(12px, env(safe-area-inset-right)); }
@container fastlist (min-width: 600px) {
  .register .grid .item-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .register .grid .item-vars { flex-wrap: nowrap; padding: 8px 12px 8px 0; padding-right: max(12px, env(safe-area-inset-right)); }
}
.register .var-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 52px; min-height: 48px; padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.15; cursor: pointer;
}
.register .var-btn small { font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.register .var-btn small.stock.low { color: var(--warn); font-weight: 700; }
.register .var-btn small.stock.out { color: var(--bad); font-weight: 700; }
.register .var-btn.dim { opacity: .6; }
.register .var-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.register .var-btn:active { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); transform: scale(.97); }
.register .var-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.register .grid .empty { padding: 24px 16px; text-align: center; overflow-wrap: anywhere; }
.register .grid .grid-more { padding: 14px 12px 20px; }

/* ---- Categories: a rail on the left (wide screens) ---- */
@media (min-width: 1024px) and (min-height: 521px) {
  .register .menu-pane { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .register .menu-pane > .scanbar { grid-column: 1 / -1; grid-row: 1; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .register .menu-pane > .cats {
    grid-column: 1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; gap: 4px; max-height: none; min-height: 0; overflow-y: auto;
    padding: 10px 8px 10px max(10px, env(safe-area-inset-left)); border-right: 1px solid var(--line); background: var(--panel-2);
  }
  .register .menu-pane > .grid { grid-column: 2; grid-row: 2; }
  .register .cats .cat {
    display: flex; align-items: center; flex: none; width: 100%; max-width: none; min-height: 52px; padding: 8px 12px;
    border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text);
    font-size: 16px; font-weight: 650; text-align: left; box-shadow: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
  }
  .register .cats .cat::before { flex: none; }
  .register .cats .cat:hover:not(.on) { background: color-mix(in srgb, var(--text) 5%, transparent); border-color: transparent; }
  .register .cats .cat.on { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: inset 4px 0 0 var(--tint, var(--accent)); }
  .register .cats .cat.on::before { background: var(--tint, var(--accent)); opacity: 1; }
}

/* ---- Narrower than the rail: categories in one row that slides sideways, so the list keeps the
   screen (an iPad held upright had four rows of them). ---- */
@media (max-width: 1023px), (max-height: 520px) {
  .register .cats { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; gap: 6px; padding-top: 4px; padding-bottom: 10px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none;
    padding-left: max(12px, env(safe-area-inset-left)); padding-right: 12px; scroll-padding-inline: 12px; }
  .register .cats::-webkit-scrollbar { display: none; }
  .register .cats .cat { flex: none; max-width: 70vw; scroll-snap-align: start; }
}

/* ---- Phones: a touch tighter; the order stays in the bar at the bottom ---- */
@media (max-width: 760px) {
  .register .scanbar { padding: 8px 10px 4px; }
  .register .scanbar input { min-height: 48px; font-size: 16px; }
  .register .scanbar .scan-cam { min-height: 48px; }
  .register .grid .item { min-height: 60px; padding: 8px 10px 8px 20px; gap: 2px 10px; }
  .register .grid .item::before { left: 8px; }
  .register .grid .item.has-img { padding-left: 20px; }
  .register .grid .item-vars { padding: 0 10px 10px 20px; }
  .register .grid .item-name, .register .grid .item-price { font-size: 16px; }
}
@media (max-width: 360px) {
  .register .grid .item { grid-template-columns: minmax(0, 1fr) auto 44px; padding-left: 18px; }
  .register .grid .item-add { width: 44px; height: 48px; }
  .register .var-btn { min-width: 48px; padding: 4px 8px; }
}

/* ---- Looks with their own Pay and numbers ---- */
/* Night Rail: Pay in the one bright accent; prices and totals in a fixed-width face. */
:root[data-theme="night-rail"] .ticket-actions .pay,
:root[data-theme="ledger"] .ticket-actions .pay { background: var(--accent); color: var(--accent-text); box-shadow: none; }
:root[data-theme="night-rail"] .ticket-actions .pay:hover:not(:disabled),
:root[data-theme="ledger"] .ticket-actions .pay:hover:not(:disabled) { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-theme="night-rail"] :is(.register .item-price, .lprice, .ticket .totals, .tb-total, .order-no, .ticket-actions .pay) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:root[data-theme="night-rail"] .register .grid .item-name { letter-spacing: -.01em; }
:root[data-theme="night-rail"] .ticket .totals .grand { font-size: 24px; }
/* Ledger: quiet, numbers lined up. */
:root[data-theme="ledger"] :is(.register .item-price, .lprice, .ticket .totals, .tb-total) { font-variant-numeric: tabular-nums; }
:root[data-theme="ledger"] .register .grid .item-name { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .register .var-btn:active { transform: none; } }