/* The counter has a docked sale. Phones open the same sale as a drawer. */
.pos-body { --bg: #181c1f; --surface: #22282c; --surface-2: #293136; --edge: #343d43; --edge-strong: #48545c; --ink: #f0f3f2; --ink-muted: #b1bcc2; --ink-faint: #9cabb3; }
.pos-sale-dialog { position: static; margin: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; color: var(--ink); background: var(--surface); overflow: hidden; }
.pos-sale-dialog[open] { display: flex; flex-direction: column; }
.pos-sale-dialog .pos-panel { flex: 1; min-height: 0; }
.pos-sale-heading, .pos-sale-dock, .pos-mobile-signout { display: none; }
.pos-menu-title { font-size: 1.75rem; font-style: normal; line-height: 1.1; margin: 0 0 18px; }
.pos-rail-staff { background: none; color: var(--ink); font: 500 .8125rem var(--font-text); letter-spacing: 0; text-transform: none; }
.pos-rail-item { font-size: .75rem; }
.pos-tiles { gap: 10px; }
.pos-tile { min-height: 120px; padding: 14px; background: var(--surface); border-color: var(--edge); border-top-width: 2px; }
.pos-tile-name { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.pos-tile-sub { font-size: .8125rem; margin-top: 5px; }
.pos-tile-free { font-size: .8125rem; color: var(--ink-muted); }
.pos-tile-price { font-size: 1.25rem; }
.pos-chip { border-color: var(--edge-strong); background: var(--surface); border-radius: 4px; }
.pos-chip.is-on { border-color: var(--accent-deep); }
.pos-note.is-good { border: 0; background: none; color: var(--ink-muted); padding: .3rem 0; }
@media (max-width: 760px) {
  .pos-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) auto; }
  .pos-rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--edge); overflow: hidden; }
  .pos-rail-who { display: none; }
  .pos-rail-menus { display: flex; overflow-x: auto; overflow-y: hidden; }
  .pos-rail-item { flex: none; width: 76px; min-height: 64px; padding: 6px; font-size: .6875rem; }
  .pos-rail-foot { display: flex; flex: none; border-top: 0; border-left: 1px solid var(--edge); }
  .pos-rail-foot .pos-rail-item { width: 60px; }
  .pos-rail-foot form:has(.pos-rail-out) { display: none; }
  .pos-mobile-signout { display: inline-flex; }
  .pos-topbar { padding: 10px; gap: 8px; }
  .pos-daypick .field { width: 8.2rem; padding-inline: .4rem; }
  .pos-find-box { font-size: 16px; }
  .pos-menu-body { padding: 14px 12px; }
  .pos-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .pos-strip form { flex: none; }
  .pos-menu-title { margin-bottom: 14px; font-size: 1.5rem; }
  .pos-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-tile { min-height: 132px; padding: 12px; }
  .pos-sale-dock { display: block; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--edge); }
  .pos-sale-dock .btn { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; }
  .pos-sale-dock [data-pos-cart-target="summary"] { font-weight: 400; }
  .pos-sale-dialog { position: fixed; inset: 0; width: 100%; height: 100dvh; }
  .pos-sale-dialog::backdrop { background: #080c0fa6; }
  .pos-sale-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--edge); }
  .pos-sale-heading h2 { font: 600 1.4rem var(--font-display); }
  .pos-sale-dialog .pos-panel { border: 0; }
}