/* The bartender view (/bar, Jesse 2026-10-09; docs/bartender-plan.md): the bar tablet, 1180×820
   landscape first, a phone stacks the list above the tab. House neon: blue, purple and white on
   navy, amber only for food waiting. Touch targets 48px and up; type readable at arm's length. */

.bar {
  --bar-deep: #070a14; --bar-rail: #0a0f1f; --bar-panel: #0b1124; --bar-panel2: #0f1630; --bar-line: #22305a; --bar-line2: #2a3762; --bar-row: #18213f;
  --bar-blue: #53e0ff; --bar-blue-soft: #bff3ff; --bar-purple: #b48cff; --bar-violet: #8a5cff; --bar-white: #eef3ff; --bar-body: #c8d2f0; --bar-muted: #9aa6c8; --bar-dim: #7d89ad;
  --bar-amber: #ffbf3f; --bar-amber-soft: #ffd27a; --bar-pink: #ff9ab8; --bar-mint: #9ff0c0;
  --bar-pixel: 'Silkscreen', monospace; --bar-lcd: 'VT323', monospace; --bar-sign: 'Yellowtail', cursive;
  color: var(--bar-white); display: flex; flex-direction: column; font: 400 1.2rem/1.15 var(--bar-lcd); min-height: 100vh;
}
body.bar-page { background: radial-gradient(900px 400px at 80% -10%, rgba(138,92,255,.16), transparent 70%), #070a14; }
body.bar-page .loyalty-main { margin: 0; max-width: none; padding: 0; }
body.bar-page .notice, body.bar-page .alert { background: var(--bar-panel, #0b1124); border-left: 4px solid #53e0ff; color: #eef3ff; font: 400 1.15rem 'VT323', monospace; margin: 0; padding: .6rem 1rem; }
body.bar-page .alert { border-left-color: #ffbf3f; color: #ffd27a; }
.bar a { color: inherit; text-decoration: none; }
.bar :focus-visible { outline: 2px solid var(--bar-blue); outline-offset: 2px; }

/* header */
.bar-head { align-items: center; background: var(--bar-rail); border-bottom: 1px solid #1d2747; display: flex; flex-wrap: wrap; gap: .6rem .9rem; padding: .6rem 1rem; }
.bar .bar-sign { color: #f3f0ff; font: 400 2.2rem/1 var(--bar-sign); text-shadow: 0 0 10px var(--bar-violet); }
.bar-sections { display: flex; flex-wrap: wrap; gap: .35rem; }
.bar .bar-sections a { align-items: center; border-radius: 999px; color: var(--bar-body); display: flex; font: 400 .67rem var(--bar-pixel); letter-spacing: .1em; min-height: 48px; padding: 0 .9rem; }
.bar .bar-sections a[aria-current] { background: rgba(83,224,255,.14); box-shadow: inset 0 0 0 1.5px var(--bar-blue); color: #fff; }
.bar .bar-open { align-items: center; background: var(--bar-blue); border-radius: 999px; box-shadow: 0 0 16px rgba(83,224,255,.5); color: #04121a; display: flex; font: 400 .72rem var(--bar-pixel); letter-spacing: .1em; margin-left: auto; min-height: 52px; padding: 0 1.2rem; }
.bar-head .mode-switch { flex: none; }

/* the two columns */
.bar-main { display: grid; flex: 1; grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr); min-height: 0; }
.bar-list { border-right: 1px solid #1d2747; display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .7rem; }
.bar-find { align-items: center; background: var(--bar-panel); border: 1.5px solid var(--bar-line2); border-radius: 999px; color: var(--bar-muted); display: flex; gap: .5rem; min-height: 48px; padding: 0 .8rem; }
.bar-find svg { flex: none; height: 18px; width: 18px; }
.loyalty-main .bar .bar-find input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) { border-radius: 0; height: auto; background: none; border: 0; box-shadow: none; color: #fff; flex: 1; font: inherit; margin: 0; min-height: 0; min-width: 0; outline: none; padding: 0; }
.bar-tabs { display: flex; flex-direction: column; gap: .45rem; }
.bar .bar-tab { align-items: center; background: var(--bar-panel); border: 1.5px solid var(--bar-line); border-radius: 14px; display: grid; gap: .6rem; grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 64px; padding: .5rem .65rem; }
.bar .bar-tab[hidden] { display: none; }
.bar .bar-tab.is-on { background: rgba(83,224,255,.12); border-color: var(--bar-blue); }
.bar-face { background: #1b2a5a; border-radius: 50%; color: #fff; display: grid; flex: none; font-size: 1.5rem; height: 48px; object-fit: cover; place-items: center; width: 48px; }
img.bar-face { height: 48px; }
.bar-face.is-big { box-shadow: 0 0 0 2px var(--bar-blue), 0 0 16px rgba(83,224,255,.5); font-size: 2rem; height: 64px; width: 64px; }
img.bar-face.is-big { height: 64px; }
.bar-tab-who { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.bar-tab-who b { font-size: 1.35rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-tab-who span { color: var(--bar-muted); font-size: 1.05rem; }
.bar-food { color: var(--bar-dim); font: 400 .52rem var(--bar-pixel); letter-spacing: .1em; margin-top: .15rem; text-transform: uppercase; }
.bar-food.is-ready { color: var(--bar-mint); }
.bar-food.is-held { color: var(--bar-pink); }
.bar-food.is-cooking { color: var(--bar-amber-soft); }
.bar-food.is-new { color: var(--bar-blue-soft); }
.bar-tab-total { font-size: 1.5rem; font-weight: 400; }
.bar-empty { color: var(--bar-muted); margin: .3rem 0; }

/* the selected tab */
.bar-detail { display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: .8rem 1rem; }
.bar-who { align-items: center; display: flex; gap: .8rem; }
.bar-who h1 { color: #fff; font: 400 2rem/1 var(--bar-lcd); margin: 0; }
.bar-who span { color: var(--bar-muted); }
.bar-strip { display: flex; flex-direction: column; gap: .4rem; }
.bar-strip:empty { display: none; }
.bar-ticket { align-items: center; border: 1.5px solid var(--bar-line2); border-radius: 14px; display: flex; flex-wrap: wrap; gap: .3rem .8rem; padding: .55rem .8rem; }
.bar-ticket b { font-weight: 400; }
.bar-ticket span { color: var(--bar-body); }
.bar-ticket.is-cooking { background: rgba(255,191,63,.08); border-color: var(--bar-amber); }
.bar-ticket.is-cooking b { color: var(--bar-amber-soft); }
.bar-ticket.is-ready { background: rgba(159,240,192,.08); border-color: var(--bar-mint); }
.bar-ticket.is-ready b { color: var(--bar-mint); }
.bar-ticket.is-new b { color: var(--bar-blue-soft); }
.bar-lines { background: var(--bar-panel); border: 1px solid var(--bar-line); border-radius: 14px; display: flex; flex: 1; flex-direction: column; min-height: 0; padding: .3rem .8rem; }
.bar-line { align-items: center; border-bottom: 1px solid var(--bar-row); display: grid; gap: .7rem; grid-template-columns: 3rem minmax(0, 1fr) auto; min-height: 60px; }
.bar-qty { color: var(--bar-blue); font-size: 1.5rem; }
.bar-item { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.bar-item b { color: #fff; font-weight: 400; }
.bar-item span { color: var(--bar-muted); font-size: 1.05rem; }
.bar-price { color: #fff; font-size: 1.4rem; }
.bar-line.is-void .bar-item b, .bar-line.is-void .bar-price, .bar-line.is-void .bar-qty { color: var(--bar-dim); text-decoration: line-through; }
.bar-line form { margin: 0; }
.bar-totals { color: var(--bar-body); display: grid; gap: .1rem 1rem; grid-template-columns: 1fr auto; margin-top: auto; padding: .6rem 0 .3rem; }
.bar-totals span:nth-child(2n) { text-align: right; }
.bar-totals b { color: #fff; font-size: 1.8rem; font-weight: 400; }
.bar-totals b:last-child { text-align: right; }
.bar-actions { display: grid; gap: .6rem; grid-template-columns: 1.4fr 1fr 1fr; }
.bar .bar-act { align-items: center; border-radius: 16px; display: flex; font: 400 .7rem var(--bar-pixel); justify-content: center; letter-spacing: .1em; min-height: 64px; padding: .3rem .6rem; text-align: center; }
.bar .bar-act.is-primary { background: var(--bar-blue); box-shadow: 0 0 18px rgba(83,224,255,.5); color: #04121a; }
.bar .bar-act.is-coupon { background: rgba(180,140,255,.12); border: 1.5px solid var(--bar-purple); color: #e9ddff; }
.bar .bar-act.is-close { border: 1.5px solid #fff; color: #fff; }
.bar-none { align-items: flex-start; display: flex; flex-direction: column; gap: .8rem; padding: 2rem 0; }
.bar-none p { color: var(--bar-muted); font-size: 1.4rem; margin: 0; }
.bar-none .bar-open { margin-left: 0; }

/* OPEN A TAB */
.bar-sheet { background: linear-gradient(180deg, #0e1530, #0a0f22); border: 1.5px solid var(--bar-blue); border-radius: 22px; box-shadow: 0 0 30px rgba(83,224,255,.35); color: var(--bar-white); max-height: calc(100vh - 2rem); max-width: min(62rem, calc(100vw - 1.5rem)); padding: 1.1rem 1.3rem; width: 100%; }
.bar-sheet::backdrop { background: rgba(3,4,10,.72); }
.bar-sheet[open]:not(:modal) { inset: 1rem; margin: 0 auto; position: fixed; z-index: 70; overflow: auto; }
.loyalty-main .bar form.bar-sheet-form { display: flex; flex-direction: column; gap: .9rem; margin: 0; max-width: none; }
.bar-sheet-head { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.bar-sheet-head h2 { color: #fff; font: 400 1.1rem var(--bar-pixel); letter-spacing: .12em; margin: 0; }
.bar-sheet-head span { color: var(--bar-muted); }
.bar .bar-close { border: 1.5px solid #3a4778; border-radius: 50%; color: var(--bar-body); display: grid; font-size: 1.8rem; height: 52px; margin-left: auto; place-items: center; width: 52px; }
.bar-label, .bar-where legend { color: var(--bar-blue); font: 400 .6rem var(--bar-pixel); letter-spacing: .14em; }
.bar-where { align-items: center; border: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.bar-where legend { margin-bottom: .4rem; padding: 0; width: 100%; color: #8fa0cc; }
.bar-where label { cursor: pointer; position: relative; }
.loyalty-main .bar .bar-where input[type=radio] { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.bar-where label span { align-items: center; border: 1.5px solid var(--bar-line2); border-radius: 14px; color: var(--bar-body); display: flex; font: 400 .66rem var(--bar-pixel); letter-spacing: .08em; min-height: 52px; padding: 0 1.1rem; }
.bar-where input:checked + span { background: rgba(83,224,255,.12); border-color: var(--bar-blue); color: #fff; }
.bar-where input:focus-visible + span { outline: 2px solid var(--bar-blue); outline-offset: 2px; }
.loyalty-main .bar .bar-input { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-shadow: none; color: #fff; font: 400 1.25rem var(--bar-lcd); margin: 0; min-height: 52px; padding: 0 .9rem; width: 100%; box-sizing: border-box; }
.loyalty-main .bar .bar-input.is-table { max-width: 9rem; }
.bar-faces-block { display: flex; flex-direction: column; gap: .5rem; }
.bar-faces { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.loyalty-main .bar .bar-face-tile { align-items: center; background: var(--bar-panel); border: 1px solid var(--bar-line); border-radius: 16px; box-shadow: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; font: inherit; gap: .3rem; margin: 0; min-height: 0; padding: .7rem .4rem; text-shadow: none; text-transform: none; width: auto; }
.loyalty-main .bar .bar-face-tile:hover { border-color: var(--bar-blue); transform: none; }
.bar-face.is-tile { font-size: 2.2rem; height: 76px; width: 76px; }
img.bar-face.is-tile { height: 76px; }
.bar-face-tile.is-wifi .bar-face { box-shadow: 0 0 0 2px var(--bar-blue), 0 0 14px rgba(83,224,255,.5); }
.bar-face-tile.is-demo .bar-face { box-shadow: 0 0 0 2px var(--bar-purple), 0 0 14px rgba(180,140,255,.5); }
.bar-face-tile.is-tab .bar-face { box-shadow: 0 0 0 2px var(--bar-dim); }
.bar-face-tile b { font-size: 1.25rem; font-weight: 400; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-face-tile small { font: 400 .46rem var(--bar-pixel); letter-spacing: .1em; }
.bar-face-tile.is-wifi small { color: var(--bar-blue); }
.bar-face-tile.is-demo small { color: var(--bar-purple); }
.bar-face-tile.is-tab small { color: var(--bar-dim); }
.bar-sheet-split { border-top: 1px solid var(--bar-line); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: .8rem; }
.bar-guest { display: flex; flex-direction: column; gap: .5rem; }
.bar-guest .bar-label { color: #d9c6ff; }
.bar-pick .player-pick-label { color: var(--bar-blue); font: 400 .6rem var(--bar-pixel); letter-spacing: .14em; }
.loyalty-main .bar .bar-pick .player-pick-field input { min-height: 52px; font-size: 1.25rem; }
.loyalty-main .bar button.bar-submit { background: var(--bar-blue); border: 0; border-radius: 16px; box-shadow: 0 0 18px rgba(83,224,255,.5); color: #04121a; cursor: pointer; font: 400 .78rem var(--bar-pixel); letter-spacing: .1em; margin: 0; min-height: 60px; padding: 0 1rem; text-shadow: none; width: 100%; }
.bar-hint { color: #8fa0cc; font-size: 1.05rem; margin: 0; }

/* the selected tab, phases 3 and 4: a coupon waiting glows; a tab closed elsewhere says so; HISTORY */
.bar .bar-act.is-coupon.is-waiting { background: rgba(180,140,255,.24); box-shadow: 0 0 16px rgba(180,140,255,.45); color: #fff; }
.bar-gone { background: rgba(255,191,63,.1); border: 1.5px solid var(--bar-amber); border-radius: 12px; color: var(--bar-amber-soft); margin: 0; padding: .55rem .8rem; }
.bar-history { background: var(--bar-panel); border: 1px solid var(--bar-line); border-radius: 14px; }
.bar-history summary { align-items: center; color: var(--bar-blue); cursor: pointer; display: flex; font: 400 .66rem var(--bar-pixel); gap: .8rem; letter-spacing: .14em; list-style: none; min-height: 52px; padding: 0 1rem; }
.bar-history summary::-webkit-details-marker { display: none; }
.bar-history summary::before { content: "▸"; font: 400 1.3rem var(--bar-lcd); }
.bar-history[open] summary::before { content: "▾"; }
.bar-history summary span { color: var(--bar-muted); font: 400 1.1rem var(--bar-lcd); letter-spacing: 0; }
.bar-history ol { border-top: 1px solid var(--bar-line); list-style: none; margin: 0; max-height: 18rem; overflow-y: auto; padding: .3rem 1rem .6rem; }
.bar-history li { border-left: 3px solid var(--bar-line2); display: grid; gap: .8rem; grid-template-columns: 5.2rem minmax(0, 1fr); padding: .35rem 0 .35rem .7rem; }
.bar-history li + li { margin-top: .15rem; }
.bar-history time { color: var(--bar-muted); }
.bar-history li span { color: var(--bar-body); }
.bar-history li b { color: #fff; font-weight: 400; }
.bar-history li.is-open, .bar-history li.is-ring { border-left-color: var(--bar-blue); }
.bar-history li.is-send { border-left-color: var(--bar-blue-soft); }
.bar-history li.is-void { border-left-color: var(--bar-pink); }
.bar-history li.is-coupon { border-left-color: var(--bar-purple); }
.bar-history li.is-close { border-left-color: var(--bar-mint); }

/* phone: the list above the tab */
@media (max-width: 760px) {
  .bar-main { grid-template-columns: minmax(0, 1fr); }
  .bar-list { border-bottom: 1px solid #1d2747; border-right: 0; }
  .bar .bar-open { margin-left: 0; }
  .bar-head .mode-switch { margin-left: auto; }
  .bar-actions, .bar-sheet-split { grid-template-columns: minmax(0, 1fr); }
  .bar-line { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .bar-sections { order: 5; width: 100%; }
}

/* RING UP (/bar/tabs/<uuid>/ring, phase 2): the menu grid on the left, the draft on the right, the
   whole screen fits the tablet (1180×820 first; 1024×768 and 820×1180 too) and each side scrolls
   on its own. Phones stack the menu above the draft with the actions pinned at the bottom. */
.bar.ring { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.ring-main { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); min-height: 0; }
.loyalty-main .ring-main button, .loyalty-main .ring-sheet button { appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; font: inherit; letter-spacing: normal; margin: 0; min-height: 0; padding: 0; text-shadow: none; text-transform: none; transform: none; width: auto; }
.loyalty-main .ring-main button:disabled, .loyalty-main .ring-sheet button:disabled { cursor: default; opacity: .38; }
.loyalty-main .ring input.ring-input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-shadow: none; box-sizing: border-box; color: #fff; font: 400 1.35rem var(--bar-lcd); margin: 0; min-height: 52px; padding: 0 .9rem; width: 100%; }
.loyalty-main .ring .ring-find input.ring-input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { background: none; border: 0; border-radius: 0; flex: 1; min-height: 0; min-width: 0; outline: none; padding: 0; }
.ring input::-webkit-search-cancel-button { display: none; }

/* the menu side */
.ring-menu { display: flex; flex-direction: column; gap: .6rem; min-height: 0; min-width: 0; padding: .7rem .9rem 0; }
.ring-top { align-items: center; display: flex; gap: .6rem; }
.bar .ring-back { align-items: center; border: 1.5px solid #3a4778; border-radius: 999px; color: var(--bar-body); display: flex; flex: none; font: 400 .62rem var(--bar-pixel); letter-spacing: .08em; min-height: 52px; padding: 0 1rem; }
.ring-find { align-items: center; background: var(--bar-panel); border: 1.5px solid var(--bar-line2); border-radius: 999px; color: var(--bar-muted); display: flex; flex: 1; gap: .55rem; min-height: 52px; min-width: 0; padding: 0 .4rem 0 1rem; }
.ring-find:focus-within { border-color: var(--bar-blue); }
.ring-find svg { flex: none; height: 20px; width: 20px; }
.loyalty-main .ring-main button.ring-find-clear { border-radius: 50%; color: var(--bar-body); flex: none; font-size: 1.7rem; height: 44px; width: 44px; }
.loyalty-main .ring-main button.ring-find-clear[hidden] { display: none; }
.ring-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.loyalty-main .ring-main button.ring-chip { align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bar-line2); color: var(--bar-body); display: flex; font: 400 .62rem var(--bar-pixel); gap: .35rem; letter-spacing: .08em; min-height: 48px; padding: 0 .95rem; }
.loyalty-main .ring-main button.ring-chip[aria-pressed=true] { background: rgba(83,224,255,.14); box-shadow: inset 0 0 0 2px var(--bar-blue); color: #fff; }
.ring-chip em, .ring-sec em { color: var(--bar-amber-soft); font-style: normal; }
.ring-grid { align-content: start; display: grid; flex: 1; gap: .6rem; grid-auto-rows: max-content; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .1rem .1rem 1rem; scrollbar-color: #2a3762 transparent; }
.ring-sec { color: #8fa0cc; font: 400 .6rem var(--bar-pixel); grid-column: 1 / -1; letter-spacing: .14em; margin: .5rem 0 -.1rem; }
.ring-sec:first-child { margin-top: 0; }
.ring-grid [hidden] { display: none !important; }
.loyalty-main .ring-main button.ring-tile { background: linear-gradient(180deg, #0e1530, #0a0f22); border: 1.5px solid var(--bar-line); border-radius: 18px; color: #fff; display: flex; flex-direction: column; gap: .35rem; min-height: 140px; padding: .7rem .8rem .65rem; position: relative; text-align: left; touch-action: manipulation; }
.loyalty-main .ring-main button.ring-tile:active { background: rgba(83,224,255,.16); border-color: var(--bar-blue); transform: scale(.98); }
.loyalty-main .ring-main button.ring-tile.is-drink:active { background: rgba(180,140,255,.16); border-color: var(--bar-purple); }
.ring-icon { border-radius: 12px; display: block; flex: none; height: 64px; object-fit: contain; width: 64px; }
img.ring-icon { mix-blend-mode: screen; } /* the neon icons are drawn on black: screen drops the black square into the tile */
.ring-icon.is-blank, .ring-icon.is-price { align-items: center; border: 2px solid currentColor; box-sizing: border-box; display: flex; font: 400 2.4rem var(--bar-lcd); justify-content: center; }
.ring-tile.is-food .ring-icon.is-price, .ring-tile.is-food .ring-icon.is-blank { box-shadow: 0 0 12px rgba(83,224,255,.45), inset 0 0 10px rgba(83,224,255,.3); color: var(--bar-blue); }
.ring-tile.is-drink .ring-icon.is-price, .ring-tile.is-drink .ring-icon.is-blank { box-shadow: 0 0 12px rgba(180,140,255,.45), inset 0 0 10px rgba(180,140,255,.3); color: var(--bar-purple); }
.ring-tile b { font-size: 1.45rem; font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
.ring-tile-foot { align-items: center; display: flex; flex-wrap: wrap; gap: .2rem .4rem; justify-content: space-between; margin-top: auto; }
.ring-price { color: var(--bar-body); font-size: 1.35rem; }
.ring-tile small { border: 1px solid #3a4778; border-radius: 999px; color: #8fa0cc; font: 400 .45rem var(--bar-pixel); letter-spacing: .1em; padding: .25rem .45rem; }
.loyalty-main .ring-main button.ring-tile.is-open { border-style: dashed; }
.ring-nothing { color: var(--bar-muted); font-size: 1.3rem; grid-column: 1 / -1; margin: 1rem 0; }

/* the draft side */
.ring-draft { background: var(--bar-rail); border-left: 1px solid #1d2747; display: flex; flex-direction: column; gap: .55rem; min-height: 0; padding: .75rem .9rem .9rem; }
.ring-who { align-items: center; display: flex; gap: .7rem; }
.ring-who h1 { color: #fff; display: flex; flex-direction: column; font: 400 1.9rem/1 var(--bar-lcd); margin: 0; overflow: hidden; text-overflow: ellipsis; }
.ring-who h1 small { color: var(--bar-blue); font: 400 .58rem var(--bar-pixel); letter-spacing: .14em; margin-bottom: .2rem; }
.ring-who div { min-width: 0; }
.ring-who div > span { color: var(--bar-muted); font-size: 1.1rem; }
.ring-help { color: #8fa0cc; font-size: 1.1rem; margin: 0; }
.ring-help[hidden], .ring-empty[hidden] { display: none; }
.ring-lines { display: flex; flex: 1; flex-direction: column; gap: .45rem; list-style: none; margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; scrollbar-color: #2a3762 transparent; }
.ring-lines:empty { display: none; }
.ring-empty { align-items: center; border: 1.5px dashed var(--bar-line2); border-radius: 16px; color: var(--bar-muted); display: flex; flex: 1; font-size: 1.35rem; justify-content: center; margin: 0; padding: 1rem; text-align: center; }
.ring-line { align-items: center; background: var(--bar-panel2); border: 1.5px solid var(--bar-line); border-radius: 14px; display: grid; flex: none; gap: .45rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: .35rem .6rem .35rem .4rem; }
.ring-line.is-new { animation: ring-flash .7s ease-out; }
@keyframes ring-flash { from { border-color: var(--bar-blue); box-shadow: 0 0 16px rgba(83,224,255,.5); } }
.ring-step { align-items: center; display: flex; gap: .1rem; }
.loyalty-main .ring-main .ring-step button, .loyalty-main .ring-sheet .ring-step button { border: 1.5px solid #3a4778; border-radius: 50%; color: var(--bar-body); display: grid; font: 400 1.6rem/1 var(--bar-lcd); height: 48px; place-items: center; width: 48px; }
.loyalty-main .ring-main .ring-step button:active, .loyalty-main .ring-sheet .ring-step button:active { background: rgba(83,224,255,.18); border-color: var(--bar-blue); }
.ring-step b { font-size: 1.6rem; font-weight: 400; min-width: 1.6rem; text-align: center; }
.loyalty-main .ring-main button.ring-line-what { align-self: stretch; display: flex; flex-direction: column; justify-content: center; line-height: 1.05; min-height: 52px; min-width: 0; text-align: left; }
.ring-line-what b { color: #fff; font-size: 1.3rem; font-weight: 400; }
.ring-line-what span { color: var(--bar-muted); font-size: 1.05rem; }
.ring-line-what small { color: #6fb7cc; font: 400 .5rem var(--bar-pixel); letter-spacing: .12em; margin-top: .25rem; }
.ring-line-price { color: #fff; font-size: 1.35rem; }
.ring-sums { border-top: 1px solid var(--bar-line); color: var(--bar-body); display: grid; font-size: 1.2rem; gap: .1rem .8rem; grid-template-columns: 1fr auto; padding-top: .5rem; }
.ring-sums span:nth-child(2) { text-align: right; }
.ring-sums b { color: #fff; font-size: 1.7rem; font-weight: 400; text-align: right; }
.ring-error { background: rgba(255,191,63,.1); border: 1.5px solid var(--bar-amber); border-radius: 12px; color: var(--bar-amber-soft); font-size: 1.2rem; margin: 0; padding: .5rem .7rem; }
.ring-error[hidden] { display: none; }
.ring-actions { display: flex; flex-direction: column; gap: .5rem; }
.loyalty-main .ring-main button.ring-send { background: var(--bar-blue); border-radius: 16px; box-shadow: 0 0 18px rgba(83,224,255,.5); color: #04121a; font: 400 .74rem var(--bar-pixel); letter-spacing: .08em; min-height: 66px; padding: 0 .8rem; }
.loyalty-main .ring-main button.ring-send:disabled { box-shadow: none; opacity: .35; }
.loyalty-main .ring-main button.ring-hold { border: 1.5px solid var(--bar-purple); border-radius: 16px; color: #e9ddff; font: 400 .64rem var(--bar-pixel); letter-spacing: .08em; min-height: 54px; padding: 0 .8rem; }
.loyalty-main .ring-main button.ring-hold[hidden] { display: none; }
.bar .ring-cancel { align-items: center; color: var(--bar-muted); display: flex; font: 400 .6rem var(--bar-pixel); justify-content: center; letter-spacing: .1em; min-height: 48px; }

/* the option sheet and the keypad */
.ring-sheet { background: linear-gradient(180deg, #0f1633, #0a0f22); border: 1.5px solid var(--bar-blue); border-radius: 22px; box-shadow: 0 0 30px rgba(83,224,255,.35), 0 24px 60px rgba(0,0,0,.7); box-sizing: border-box; color: var(--bar-white); flex-direction: column; font: 400 1.2rem/1.15 var(--bar-lcd); max-height: calc(100dvh - 2rem); max-width: min(44rem, calc(100vw - 1.5rem)); overflow: hidden; padding: 0; width: 100%; }
.ring-sheet[open] { display: flex; }
.ring-sheet::backdrop { background: rgba(3,4,10,.72); }
.ring-sheet-head { align-items: center; border-bottom: 1px solid var(--bar-line); display: flex; flex-wrap: wrap; gap: .3rem .8rem; padding: .9rem 1rem .8rem 1.2rem; }
.ring-sheet-head h2 { color: #fff; font: 400 2rem/1 var(--bar-lcd); margin: 0; }
.ring-sheet-price { color: var(--bar-body); font-size: 1.3rem; }
.loyalty-main .ring-sheet button.ring-x { border: 1.5px solid #3a4778; border-radius: 50%; color: var(--bar-body); font-size: 1.8rem; height: 52px; margin-left: auto; width: 52px; }
.ring-sheet-body { display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.2rem; }
.ring-group { display: flex; flex-direction: column; gap: .5rem; }
.ring-group-label { color: #8fa0cc; font: 400 .58rem var(--bar-pixel); letter-spacing: .14em; }
.ring-group-label.is-needed { color: var(--bar-amber-soft); }
.ring-choices { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.loyalty-main .ring-sheet button.ring-choice { align-items: center; border: 1.5px solid var(--bar-line2); border-radius: 14px; color: var(--bar-body); display: flex; font-size: 1.35rem; gap: .55rem; min-height: 58px; padding: .3rem .75rem; text-align: left; }
.ring-choice small { color: var(--bar-muted); font-size: 1.15rem; margin-left: auto; }
.ring-choice-mark { border: 2px solid #4a5788; border-radius: 50%; box-sizing: border-box; flex: none; height: 22px; position: relative; width: 22px; }
.ring-choice.is-toggle .ring-choice-mark { border-radius: 6px; }
.loyalty-main .ring-sheet button.ring-choice.is-on { background: rgba(83,224,255,.14); border-color: var(--bar-blue); color: #fff; }
.ring-choice.is-on small { color: var(--bar-blue-soft); }
.ring-choice.is-on .ring-choice-mark { background: var(--bar-blue); border-color: var(--bar-blue); box-shadow: 0 0 10px rgba(83,224,255,.6); }
.ring-choice.is-on .ring-choice-mark::after { border: solid #04121a; border-width: 0 3px 3px 0; content: ""; height: 9px; left: 6px; position: absolute; top: 2px; transform: rotate(45deg); width: 4px; }
.ring-count { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.ring-count-words { color: var(--bar-body); font-size: 1.3rem; }
.ring-step.is-big { gap: .3rem; }
.loyalty-main .ring-sheet .ring-step.is-big button { font-size: 1.9rem; height: 56px; width: 56px; }
.ring-step.is-big b { font-size: 2.1rem; min-width: 2.6rem; }
.ring-note { display: flex; flex-direction: column; gap: .45rem; }
.ring-sheet-foot { align-items: center; border-top: 1px solid var(--bar-line); display: flex; gap: .7rem; padding: .8rem 1rem .9rem 1.2rem; }
.loyalty-main .ring-sheet button.ring-add { background: var(--bar-blue); border-radius: 16px; box-shadow: 0 0 18px rgba(83,224,255,.45); color: #04121a; flex: 1; font: 400 .72rem var(--bar-pixel); letter-spacing: .08em; min-height: 60px; padding: 0 .8rem; }
.loyalty-main .ring-sheet button.ring-add:disabled { background: #22305a; box-shadow: none; color: #c8d2f0; opacity: 1; }
.loyalty-main .ring-sheet button.ring-remove { border: 1.5px solid #6a4a66; border-radius: 16px; color: #f6cdd3; font: 400 .6rem var(--bar-pixel); letter-spacing: .08em; min-height: 60px; padding: 0 .9rem; }
.loyalty-main .ring-sheet button.ring-remove[hidden] { display: none; }
.ring-keypad-wrap { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ring-keypad-side { display: flex; flex-direction: column; gap: .55rem; }
.ring-amount { color: #fff; font: 400 3.4rem/1 var(--bar-lcd); text-shadow: 0 0 14px rgba(83,224,255,.55); }
.ring-keypad-hint { color: #8fa0cc; font-size: 1.05rem; }
.ring-keypad { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
.loyalty-main .ring-sheet button.ring-key { background: var(--bar-panel2); border: 1.5px solid var(--bar-line2); border-radius: 14px; color: #fff; font: 400 2rem var(--bar-lcd); min-height: 64px; }
.loyalty-main .ring-sheet button.ring-key:active { background: rgba(83,224,255,.18); border-color: var(--bar-blue); }
.loyalty-main .ring-sheet button.ring-key.is-back { color: var(--bar-pink); }
.ring-nojs { padding: 1rem; }

/* portrait tablet: a narrower draft, each line's name above its stepper and price; a tighter header */
@media (max-width: 900px) {
  .ring-main { grid-template-columns: minmax(0, 1fr) 330px; }
  .ring-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .bar .ring-back { padding: 0 .8rem; }
  .ring-line { grid-template-areas: "what what" "step price"; grid-template-columns: auto minmax(0, 1fr); padding: .45rem .6rem .4rem; row-gap: .2rem; }
  .loyalty-main .ring-main button.ring-line-what { grid-area: what; min-height: 0; padding: 0 .15rem; }
  .ring-line .ring-step { grid-area: step; }
  .ring-line-price { grid-area: price; text-align: right; }
  .bar-head { gap: .5rem .6rem; padding: .55rem .75rem; }
  .bar .bar-sections a { letter-spacing: .06em; padding: 0 .6rem; }
  .bar .bar-open { padding: 0 .9rem; }
}
/* phone fallback: the menu, then the draft; the page scrolls and the actions stay at the bottom */
@media (max-width: 700px) {
  .bar.ring { height: auto; overflow: visible; }
  .ring-main { display: flex; flex-direction: column; }
  .ring-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); overflow: visible; }
  .ring-draft { border-left: 0; border-top: 1px solid #1d2747; }
  .ring-lines { overflow: visible; }
  .ring-actions { background: var(--bar-rail); bottom: 0; padding: .4rem 0; position: sticky; }
  .ring-keypad-wrap { grid-template-columns: minmax(0, 1fr); }
}
.ring-who [data-ring-now].is-changed { color: var(--bar-amber-soft); }

/* CLOSE OUT · CASH and COUPONS (/bar/tabs/<uuid>/close, /coupons; phase 4): the tab summary on the
   left, the cash keypad or the coupons on the right; the whole screen fits the landscape tablet and
   each side scrolls on its own. Portrait tablets and phones stack them and the page scrolls. */
.bar.barx { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
/* A notice or alert line sits above the shell: the shell takes the rest of the screen, not more. */
body.bar-close-page .loyalty-main, body.bar-ring-page .loyalty-main { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body.bar-close-page .loyalty-main > .notice, body.bar-close-page .loyalty-main > .alert, body.bar-ring-page .loyalty-main > .notice, body.bar-ring-page .loyalty-main > .alert { flex: none; }
body.bar-close-page .bar.barx, body.bar-ring-page .bar.ring { flex: 1; height: auto; }
.loyalty-main .barx-pay > .bar-gone { flex: none; }
.barx-main { display: grid; flex: 1; grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr); min-height: 0; }
.loyalty-main .barx button { appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; font: inherit; letter-spacing: normal; margin: 0; min-height: 0; padding: 0; text-shadow: none; text-transform: none; transform: none; width: auto; }
.loyalty-main .barx button:disabled { cursor: default; }

/* the summary */
.barx-sum { border-right: 1px solid #1d2747; display: flex; flex-direction: column; gap: .6rem; min-height: 0; min-width: 0; padding: .7rem .9rem .9rem; }
.barx-steps { display: flex; flex-wrap: wrap; gap: .4rem; }
.bar .barx-steps a { align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bar-line2); color: var(--bar-body); display: flex; font: 400 .66rem var(--bar-pixel); gap: .45em; letter-spacing: .08em; min-height: 52px; padding: 0 1rem; }
.bar .barx-steps a[aria-current] { background: rgba(83,224,255,.14); box-shadow: inset 0 0 0 2px var(--bar-blue); color: #fff; }
.bar .barx-steps a.barx-back { box-shadow: inset 0 0 0 1.5px #3a4778; }
.barx-steps em { color: #e9ddff; font-style: normal; }
.barx-lines { background: var(--bar-panel); border: 1px solid var(--bar-line); border-radius: 14px; display: flex; flex: 0 1 auto; flex-direction: column; list-style: none; margin: 0; min-height: 4rem; overflow-y: auto; overscroll-behavior: contain; padding: .2rem .8rem; scrollbar-color: #2a3762 transparent; }
.barx-lines li { align-items: baseline; border-bottom: 1px solid var(--bar-row); display: grid; gap: .6rem; grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding: .45rem 0; }
.barx-lines li:last-child { border-bottom: 0; }
.barx-q { color: var(--bar-blue); font-size: 1.35rem; }
.barx-n { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.barx-n b { color: #fff; font-size: 1.3rem; font-weight: 400; }
.barx-n small { color: var(--bar-muted); font-size: 1.05rem; }
.barx-p { color: #fff; font-size: 1.35rem; }
.barx-lines li.is-void .barx-q, .barx-lines li.is-void .barx-n b, .barx-lines li.is-void .barx-p { color: var(--bar-dim); text-decoration: line-through; }
.barx-empty { color: var(--bar-muted); display: block !important; }
.barx-sums { display: flex; flex-direction: column; gap: .1rem; margin: auto 0 0; }
.barx-sums div { color: var(--bar-body); display: flex; font-size: 1.2rem; justify-content: space-between; gap: 1rem; }
.barx-sums dt, .barx-sums dd { margin: 0; }
.barx-sums .is-coupons { color: #e9ddff; }
.barx-total { align-items: baseline; border-top: 1px solid var(--bar-line); display: flex; justify-content: space-between; padding-top: .4rem; }
.barx-total span { color: var(--bar-blue); font: 400 .8rem var(--bar-pixel); letter-spacing: .16em; }
.barx-total b { color: #fff; font: 400 3.4rem/1 var(--bar-lcd); text-shadow: 0 0 16px rgba(83,224,255,.55); }

/* the cash side */
.barx-pay { display: flex; flex-direction: column; gap: .75rem; min-height: 0; min-width: 0; overflow-y: auto; padding: .8rem 1rem 1rem; }
.loyalty-main .bar form.barx-cash { display: flex; flex: 1; flex-direction: column; gap: .75rem; margin: 0; max-width: none; }
.barx-readouts { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.barx-readout { background: #050812; border: 1.5px solid var(--bar-line2); border-radius: 16px; display: flex; flex-direction: column; gap: .2rem; padding: .55rem .9rem .5rem; }
.barx-readout span { color: #8fa0cc; font: 400 .6rem var(--bar-pixel); letter-spacing: .14em; }
.barx-readout b { color: #fff; font: 400 3rem/1 var(--bar-lcd); text-shadow: 0 0 12px rgba(83,224,255,.45); white-space: nowrap; }
.barx-readout.is-change b { color: var(--bar-dim); font-size: 3.6rem; text-shadow: none; }
.barx-readout.is-change.is-ready { background: rgba(159,240,192,.07); border-color: var(--bar-mint); box-shadow: 0 0 18px rgba(159,240,192,.25); }
.barx-readout.is-change.is-ready span { color: var(--bar-mint); }
.barx-readout.is-change.is-ready b { color: #eafff2; text-shadow: 0 0 16px rgba(159,240,192,.7); }
.barx-readout.is-change.is-short { border-color: var(--bar-amber); }
.barx-readout.is-change.is-short span { color: var(--bar-amber-soft); }
.barx-entry { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.barx-entry[hidden] { display: none; }
.barx-keypad { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loyalty-main .barx button.barx-key { background: var(--bar-panel2); border: 1.5px solid var(--bar-line2); border-radius: 14px; color: #fff; font: 400 2.2rem/1 var(--bar-lcd); min-height: 64px; touch-action: manipulation; }
.loyalty-main .barx button.barx-key:active, .loyalty-main .barx button.barx-bill:active { background: rgba(83,224,255,.2); border-color: var(--bar-blue); }
.loyalty-main .barx button.barx-key.is-back { color: var(--bar-pink); }
.barx-quick { align-content: start; display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loyalty-main .barx button.barx-bill { align-items: center; border: 1.5px solid var(--bar-purple); border-radius: 14px; color: #f1e9ff; display: flex; flex-direction: column; font: 400 1.9rem/1 var(--bar-lcd); justify-content: center; min-height: 64px; touch-action: manipulation; }
.loyalty-main .barx button.barx-bill.is-exact { background: rgba(83,224,255,.1); border-color: var(--bar-blue); color: #fff; flex-direction: row; font: 400 .7rem var(--bar-pixel); gap: .7rem; grid-column: 1 / -1; letter-spacing: .1em; }
.barx-bill.is-exact small { font: 400 1.8rem/1 var(--bar-lcd); letter-spacing: 0; }
.loyalty-main .barx button.barx-bill.is-clear { border-color: #3a4778; color: var(--bar-body); font: 400 .62rem var(--bar-pixel); letter-spacing: .1em; }
.barx-quick .barx-bill.is-clear:nth-child(odd) { grid-column: 1 / -1; }
.barx-typed { color: #8fa0cc; display: flex; flex-direction: column; font: 400 .6rem var(--bar-pixel); gap: .4rem; letter-spacing: .14em; }
.barx-typed[hidden] { display: none; }
.loyalty-main .barx .barx-typed input, .loyalty-main .barx .barx-dollar input { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-shadow: none; box-sizing: border-box; color: #fff; font: 400 2rem var(--bar-lcd); margin: 0; min-height: 60px; padding: 0 .9rem; width: 100%; }
.barx-say { color: var(--bar-body); font-size: 1.35rem; margin: 0; min-height: 1.4em; }
.loyalty-main .barx button.barx-submit { background: var(--bar-blue); border-radius: 18px; box-shadow: 0 0 20px rgba(83,224,255,.55); color: #04121a; font: 400 .8rem var(--bar-pixel); letter-spacing: .1em; margin-top: auto; min-height: 76px; padding: 0 1rem; }
.loyalty-main .barx button.barx-submit:disabled { background: #1a2547; box-shadow: none; color: #7d89ad; }
.barx-fine { color: #8fa0cc; font-size: 1.05rem; margin: 0; }
.barx-blocked { align-items: flex-start; background: rgba(180,140,255,.08); border: 1.5px solid var(--bar-purple); border-radius: 18px; display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem 1.4rem; }
.bar .barx-blocked h2, .bar .barx-h { color: #fff; font: 400 1rem var(--bar-pixel); letter-spacing: .12em; margin: 0; }
.barx-blocked p { color: var(--bar-body); font-size: 1.45rem; margin: 0; }
.bar .barx-go { align-items: center; background: var(--bar-purple); border-radius: 16px; box-shadow: 0 0 16px rgba(180,140,255,.45); color: #120826; display: flex; font: 400 .72rem var(--bar-pixel); justify-content: center; letter-spacing: .1em; min-height: 60px; padding: 0 1.3rem; }
.bar .barx-go.is-quiet { background: none; border: 1.5px solid #3a4778; box-shadow: none; color: var(--bar-body); }

/* coupons */
.bar .barx-h.is-small { color: #8fa0cc; font-size: .7rem; margin-top: .4rem; }
.barx-none { border: 1.5px dashed var(--bar-line2); border-radius: 16px; color: var(--bar-muted); font-size: 1.35rem; margin: 0; padding: 1rem 1.1rem; }
.barx-coupon { background: linear-gradient(180deg, #120f2e, #0b0d22); border: 1.5px solid var(--bar-purple); border-radius: 18px; box-shadow: 0 0 18px rgba(180,140,255,.22); display: flex; flex-direction: column; gap: .7rem; padding: .9rem 1rem; }
.barx-coupon-top { align-items: center; display: flex; gap: .9rem; }
.barx-art { background: #070b18; border: 1px solid var(--bar-line2); border-radius: 14px; flex: none; height: 88px; object-fit: contain; width: 88px; }
.barx-art.is-blank { align-items: center; color: var(--bar-purple); display: flex; font: 400 2.6rem var(--bar-lcd); justify-content: center; }
.barx-coupon-what { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.barx-kicker { color: var(--bar-amber-soft); font: 400 .55rem var(--bar-pixel); letter-spacing: .12em; }
.barx-coupon-what b { color: #fff; font-size: 1.7rem; font-weight: 400; line-height: 1.05; }
.barx-coupon-what span:last-child { color: var(--bar-body); font-size: 1.2rem; }
.loyalty-main .bar form.barx-coupon-form { align-items: end; display: grid; gap: .6rem; grid-template-columns: minmax(9rem, 1fr) minmax(0, 1fr) minmax(0, .8fr); margin: 0; max-width: none; }
.barx-takes { color: #8fa0cc; display: flex; flex-direction: column; font: 400 .55rem var(--bar-pixel); gap: .35rem; letter-spacing: .12em; }
.barx-dollar { align-items: center; color: #fff; display: flex; font: 400 2rem var(--bar-lcd); gap: .3rem; letter-spacing: 0; }
.loyalty-main .barx button.barx-apply { background: var(--bar-blue); border-radius: 16px; box-shadow: 0 0 16px rgba(83,224,255,.45); color: #04121a; font: 400 .74rem var(--bar-pixel); letter-spacing: .1em; min-height: 60px; }
.loyalty-main .barx button.barx-deny { border: 1.5px solid #6a4a66; border-radius: 16px; color: #f6cdd3; font: 400 .66rem var(--bar-pixel); letter-spacing: .1em; min-height: 60px; }
.barx-settled { display: flex; flex-direction: column; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.barx-settled li { border-left: 3px solid var(--bar-purple); display: flex; flex-direction: column; padding: .2rem 0 .2rem .7rem; }
.barx-settled li.is-denied { border-left-color: var(--bar-dim); }
.barx-settled b { color: #fff; font-size: 1.25rem; font-weight: 400; }
.barx-settled span { color: var(--bar-muted); font-size: 1.1rem; }
.barx-next { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: auto; padding-top: .4rem; }

/* a shorter landscape tablet (1024×768): tighter keys */
@media (max-height: 790px) and (min-width: 901px) {
  .loyalty-main .barx button.barx-key, .loyalty-main .barx button.barx-bill { min-height: 58px; }
  .barx-readout b { font-size: 2.6rem; }
  .barx-readout.is-change b { font-size: 3.1rem; }
  .barx-total b { font-size: 3rem; }
}
/* portrait tablet and phone: the summary, then the cash; the page scrolls */
@media (max-width: 900px) {
  .bar.barx { height: auto; min-height: 100vh; overflow: visible; }
  body.bar-close-page .loyalty-main { height: auto; min-height: 100vh; }
  body.bar-close-page .bar.barx { flex: none; }
  .barx-main { display: flex; flex-direction: column; }
  .barx-sum { border-bottom: 1px solid #1d2747; border-right: 0; }
  .barx-lines { flex: none; max-height: 22rem; }
  .barx-pay { overflow: visible; }
}
@media (max-width: 560px) {
  .barx-entry { grid-template-columns: minmax(0, 1fr); }
  .barx-readout b { font-size: 2.3rem; }
  .barx-readout.is-change b { font-size: 2.6rem; }
  .loyalty-main .bar form.barx-coupon-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .barx-takes { grid-column: 1 / -1; }
}
/* phone ring-up: the page scrolls (see the 700px block above) */
@media (max-width: 700px) { body.bar-ring-page .loyalty-main { height: auto; min-height: 100vh; } }
/* the 820-high landscape tablet: taller keys and readouts (after the base rules, so it wins) */
@media (min-height: 800px) and (min-width: 901px) {
  .loyalty-main .barx button.barx-key, .loyalty-main .barx button.barx-bill { min-height: 74px; }
  .barx-readout { padding: .7rem 1rem .6rem; }
  .barx-say { font-size: 1.5rem; }
}
/* upright tablets: one header row (the switcher shows just its face; FOOD drops "in the kitchen") */
@media (min-width: 701px) and (max-width: 1000px) {
  .bar-head { flex-wrap: nowrap; }
  .bar-head .bar-long { display: none; }
  .bar-head .who-chip-words b { max-width: 6rem; }
}

/* Tonight's special (50¢ wings on a wing day) sits in APPS with a green border (Jesse, 2026-10-11). */
.bar .ring-tile.is-special { border-color: #5fe0b0; box-shadow: 0 0 0 1.5px #5fe0b0, 0 0 16px rgba(95,224,176,.35); }
.ring-tile .ring-today { color: #5fe0b0; font: 400 .55rem var(--bar-pixel); font-style: normal; letter-spacing: .1em; vertical-align: middle; }


/* ---------- The selected tab (Jesse, 2026-10-16) ----------
   The tab's actions in a column on the left and the ticket on the right, narrow (a name close to its
   price), the pair in the middle of the pane. The actions column stays pinned while a long ticket
   scrolls, so ADD / COUPONS / VOID / CLOSE OUT never sit below the fold. A pane too narrow for both
   (portrait, phone) pins the actions in a row on top (Jesse, 2026-10-14, on a Surface). */
.bar-detail { container: bar-detail / inline-size; }
.bar-desk { align-items: start; display: grid; gap: 1.2rem; grid-template-columns: minmax(12rem, 15rem) minmax(0, 34rem); justify-content: center; }
.bar-tabhead { align-self: start; display: flex; flex-direction: column; gap: .8rem; min-width: 0; position: sticky; top: .8rem; z-index: 6; }
.bar-tabhead .bar-who { align-items: center; display: grid; gap: .3rem .8rem; grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
.bar-tabhead .bar-face.is-big { font-size: 1.6rem; height: 56px; width: 56px; }
.bar-tabhead img.bar-face.is-big { height: 56px; }
.bar-who-words { min-width: 0; }
.bar-who-words h1 { font-size: 1.8rem; overflow-wrap: anywhere; }
.bar-who-words span { display: block; font-size: 1.05rem; line-height: 1.2; margin-top: .15rem; }
.bar-tabhead .bar-actions { display: flex; flex-direction: column; gap: .6rem; }
.bar .bar-tabhead .bar-act { line-height: 1.35; min-height: 64px; text-wrap: balance; }
.bar .bar-tabhead .bar-act.is-primary { min-height: 84px; }
.bar-tabhead .bar-history summary { min-height: 48px; }
.bar-info { color: var(--bar-muted); font-size: 1.05rem; margin: 0; padding: .5rem 1rem .4rem; border-top: 1px solid var(--bar-line); }
.bar-tabhead .bar-history ol { max-height: 16rem; }
@container bar-detail (max-width: 40rem) {
  .bar-desk { gap: .6rem; grid-template-columns: minmax(0, 1fr); }
  .bar-desk > .bar-lines { justify-self: center; max-width: 36rem; width: 100%; }
  .bar-tabhead { align-items: center; background: var(--bar-deep); border-bottom: 1px solid var(--bar-line); box-shadow: 0 6px 14px rgba(0,0,0,.45); display: grid; gap: .5rem .8rem; grid-template-columns: minmax(0, 1fr) auto; margin: -.8rem -1rem 0; padding: .6rem 1rem .7rem; top: 0; }
  .bar-tabhead .bar-actions { display: grid; gap: .5rem; grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .bar .bar-tabhead .bar-act, .bar .bar-tabhead .bar-act.is-primary { min-height: 56px; }
  .bar-tabhead .bar-history { grid-column: 2; grid-row: 1; }
  .bar-tabhead .bar-history[open] { grid-column: 1 / -1; grid-row: 3; }
  .bar-tabhead .bar-history ol { max-height: 40vh; }
}
@container bar-detail (max-width: 520px) {
  .bar-tabhead { padding: .55rem .75rem .6rem; }
  .bar-tabhead .bar-face.is-big { font-size: 1.4rem; height: 44px; width: 44px; }
  .bar-tabhead img.bar-face.is-big { height: 44px; }
  .bar-tabhead .bar-who-words h1 { font-size: 1.5rem; }
  .bar-tabhead .bar-who-words span { font-size: .95rem; }
  .bar .bar-tabhead .bar-act, .bar .bar-tabhead .bar-act.is-primary { font-size: .56rem; letter-spacing: .06em; min-height: 52px; padding: .3rem .4rem; }
  .bar-tabhead .bar-actions { gap: .4rem; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .bar-tabhead .bar-history summary { font-size: .56rem; padding: 0 .7rem; }
}

/* COUPONS (Jesse, 2026-10-14): CLOSE OUT's look when nothing waits; a coupon waiting on the bartender
   turns it green and blinks (steady under reduced motion). */
.bar .bar-tabhead .bar-act.is-coupon { background: none; border: 1.5px solid #fff; box-shadow: none; color: #fff; }
.bar .bar-tabhead .bar-act.is-coupon.is-waiting { background: rgba(159,240,192,.2); border-color: var(--bar-mint); box-shadow: 0 0 16px rgba(159,240,192,.55); color: #eafff2; }
@media (prefers-reduced-motion: no-preference) {
  .bar .bar-tabhead .bar-act.is-coupon.is-waiting { animation: bar-coupon-wait 1.1s ease-in-out infinite; }
}
@keyframes bar-coupon-wait { 50% { background: rgba(159,240,192,.45); box-shadow: 0 0 26px rgba(159,240,192,.9); } }

/* VOID (Jesse, 2026-10-14): one button beside the ticket, pink like a held ticket, and a popup
   (2026-10-16): big rows to pick, then a confirm with VOID IT and an equally big CANCEL. */
.bar .bar-tabhead .bar-act.is-void { background: none; border: 1.5px solid var(--bar-pink); color: #ffd0de; }
.barv-lead { color: var(--bar-body); font-size: 1.25rem; margin: 0; }
.bar .barv-group { border-bottom: 1px solid var(--bar-line2); color: var(--bar-purple); font: 400 .62rem var(--bar-pixel); letter-spacing: .14em; margin: .5rem 0 0; padding: 0 0 .45rem; }
.bar .barv-group.is-food { color: var(--bar-amber-soft); }
.barv-list { display: flex; flex-direction: column; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.bar a.barv-pick { align-items: center; background: var(--bar-panel); border: 1.5px solid var(--bar-line2); border-radius: 14px; color: #fff; display: grid; gap: .7rem; grid-template-columns: 40px minmax(0, 1fr) 2.4rem auto; min-height: 60px; padding: .4rem .9rem; text-decoration: none; }
.bar a.barv-pick:active, .bar a.barv-pick:hover { border-color: var(--bar-pink); }
.barv-qty { color: var(--bar-blue); font-size: 1.4rem; }
.barv-name { display: flex; flex-direction: column; min-width: 0; }
.barv-name b { font-size: 1.35rem; font-weight: 400; }
.barv-name small { color: var(--bar-muted); font-size: 1rem; }
.barv-price { font-size: 1.3rem; white-space: nowrap; }
.barv-confirm { background: rgba(255,154,184,.08); border: 1.5px solid var(--bar-pink); border-radius: 18px; display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1.1rem; }
.barv-place { color: #ffd0de; font: 400 .62rem var(--bar-pixel); letter-spacing: .12em; margin: 0; text-transform: uppercase; }
.barv-what { align-items: baseline; display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin: 0; }
.barv-what b { color: #fff; font-size: 2rem; font-weight: 400; }
.barv-what .barv-qty { font-size: 2rem; }
.barv-what .barv-price { margin-left: auto; font-size: 1.6rem; }
.barv-detail { color: var(--bar-body); font-size: 1.15rem; margin: 0; }
.barv-effect { color: var(--bar-body); font-size: 1.15rem; margin: .3rem 0 0; }
.loyalty-main .bar form.barv-actions { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; margin: 0; max-width: none; }
.bar a.barv-cancel, .loyalty-main .bar button.barv-yes { align-items: center; border-radius: 18px; display: flex; font: 400 .85rem var(--bar-pixel); justify-content: center; letter-spacing: .12em; min-height: 68px; text-decoration: none; }
.bar a.barv-cancel { border: 1.5px solid #fff; color: #fff; }
.bar a.barv-cancel.is-wide { margin-top: .6rem; }
.loyalty-main .bar button.barv-yes { background: var(--bar-pink); border: 0; box-shadow: 0 0 16px rgba(255,154,184,.45); color: #24060f; cursor: pointer; margin: 0; }
.bar a.barv-other { align-self: flex-start; color: var(--bar-blue-soft); font: 400 .6rem var(--bar-pixel); letter-spacing: .1em; min-height: 44px; display: flex; align-items: center; }

/* VOID and COUPONS as a popup (Jesse, 2026-10-16: "an exclusive dialog that contains the items
   available to be voided, nothing else"; the rest blacked out). The same panel stands alone on a
   dark page without JavaScript. */
.bar-pop { background: linear-gradient(180deg, #0f1633, #0a0f22); border: 1.5px solid var(--bar-pink); border-radius: 22px; box-shadow: 0 0 30px rgba(255,154,184,.3), 0 24px 60px rgba(0,0,0,.7); box-sizing: border-box; color: var(--bar-white); max-height: min(88vh, 54rem); padding: 0; width: min(36rem, calc(100vw - 1.5rem)); }
.bar-pop[open], .bar-pop:not(dialog) { display: flex; flex-direction: column; }
.bar-pop::backdrop { background: rgba(2,3,8,.94); }
.bar-pop[open]:not(:modal) { inset: 1rem; margin: auto; position: fixed; z-index: 70; }
.bar-pop > div { display: flex; flex-direction: column; min-height: 0; }
.bar-pop:has(.bar-pop-head.is-coupons), .bar-pop.is-coupons { border-color: var(--bar-purple); box-shadow: 0 0 30px rgba(180,140,255,.3), 0 24px 60px rgba(0,0,0,.7); }
.bar-pop-head { align-items: center; border-bottom: 1px solid var(--bar-line); display: flex; flex: none; gap: .8rem; padding: .8rem 1rem .7rem 1.2rem; }
.bar .bar-pop-head h2 { color: #fff; display: flex; flex-direction: column; font: 400 1rem var(--bar-pixel); letter-spacing: .12em; margin: 0; min-width: 0; }
.bar-pop-head h2 small { color: var(--bar-muted); font: 400 1.15rem var(--bar-lcd); letter-spacing: 0; margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-pop-body { display: flex; flex-direction: column; gap: .6rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1.1rem 1.1rem; }
.bar-pop-body > .barv-group:first-child, .bar-pop-body > .bar-pop-alert + .barv-group { margin-top: 0; }
.bar-pop-alert { border-left: 4px solid var(--bar-amber); color: var(--bar-amber-soft); font-size: 1.2rem; margin: 0; padding: .3rem .8rem; }
.bar-pop-alone { align-items: flex-start; background: #020308; display: flex; justify-content: center; min-height: 100vh; padding: 2rem .75rem; box-sizing: border-box; }
.bar-pop-alone .bar-pop { max-height: none; }
body.bar-pop-page { background: #020308; }
.barv-what .bar-icon.is-big { align-self: center; border-radius: 10px; height: 56px; width: 56px; }
.barv-what { align-items: center; }
.barv-what .barv-qty { margin-left: auto; }
.barv-what .barv-price { margin-left: 0; }

/* Round 2 (Jesse, 2026-10-16): the empty space left of the ticket holds the tab's info, readable
   and always open there; the actions are two rows of two. */
.bar-desk { grid-template-columns: minmax(18rem, 28rem) minmax(0, 34rem); }
.bar-tabhead { --bar-roomy: 1; max-height: calc(100vh - 1.6rem); max-height: calc(100dvh - 1.6rem); }
.bar-tabhead .bar-actions { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bar .bar-tabhead .bar-act, .bar .bar-tabhead .bar-act.is-primary { min-height: 72px; }
.bar-tabhead .bar-history { display: flex; flex-direction: column; min-height: 0; }
.bar-tabhead .bar-history summary { cursor: default; pointer-events: none; }
.bar-tabhead .bar-history summary::before { content: none; }
.bar-tabhead .bar-history[open] { flex: 1; }
.bar-tabhead .bar-history ol { flex: 1; max-height: none; min-height: 0; overflow-y: auto; }
.bar-tabhead .bar-info { color: var(--bar-body); font-size: 1.2rem; }
.bar-tabhead .bar-history li { font-size: 1.2rem; grid-template-columns: 5.6rem minmax(0, 1fr); line-height: 1.25; }
@container bar-detail (max-width: 40rem) {
  .bar-desk { grid-template-columns: minmax(0, 1fr); }
  .bar-tabhead { --bar-roomy: 0; max-height: none; }
  .bar-tabhead .bar-actions { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .bar .bar-tabhead .bar-act, .bar .bar-tabhead .bar-act.is-primary { min-height: 56px; }
  .bar-tabhead .bar-history summary { cursor: pointer; pointer-events: auto; }
  .bar-tabhead .bar-history summary::before { content: "▸"; }
  .bar-tabhead .bar-history[open] summary::before { content: "▾"; }
  .bar-tabhead .bar-history ol { flex: none; max-height: 40vh; }
}
@container bar-detail (max-width: 520px) {
  .bar .bar-tabhead .bar-act, .bar .bar-tabhead .bar-act.is-primary { min-height: 52px; }
  .bar-tabhead .bar-actions { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* The popup's bottom button: GO BACK under VOID's list, OKAY under COUPONS (Jesse, 2026-10-16). */
.bar-pop-foot { border-top: 1px solid var(--bar-line); flex: none; padding: .8rem 1.1rem 1rem; }
.bar-pop-foot .barv-cancel.is-wide { margin: 0; }
.bar .bar-pop-foot a.barv-cancel.is-ok { background: var(--bar-purple); border-color: var(--bar-purple); color: #160a2e; }
.bar-pop .barv-other { align-self: center; }

/* VOID's HOW MANY: − n + ALL, and what comes off. */
.barv-count { align-items: center; border-top: 1px solid rgba(255,154,184,.35); display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; padding-top: .7rem; }
.barv-count-label { color: #ffd0de; flex: 1 1 100%; font: 400 .6rem var(--bar-pixel); letter-spacing: .12em; }
.loyalty-main .bar button.barv-step { background: var(--bar-panel2); border: 1.5px solid var(--bar-pink); border-radius: 14px; color: #fff; cursor: pointer; font: 400 2rem/1 var(--bar-lcd); margin: 0; min-height: 56px; min-width: 56px; padding: 0 .6rem; touch-action: manipulation; }
.loyalty-main .bar button.barv-step.is-all { font: 400 .62rem var(--bar-pixel); letter-spacing: .08em; }
.loyalty-main .bar input.barv-count-n { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-sizing: border-box; color: #fff; font: 400 2rem var(--bar-lcd); height: 56px; margin: 0; text-align: center; width: 4.2rem; -moz-appearance: textfield; }
.barv-count-n::-webkit-inner-spin-button, .barv-count-n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.barv-off { color: #ffd0de; font-size: 1.6rem; margin-left: auto; }
.barv-off b { color: #fff; font-weight: 400; }

/* CLOSE OUT's cash, round 2 (Jesse, 2026-10-16): KEYPAD or CHIPS, the 10-key (or the chips)
   farthest right, EXACT / quick amounts / UNDO / CLEAR on the left. */
.barx-modes { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.barx-modes[hidden] { display: none; }
.loyalty-main .barx button.barx-mode { background: none; border: 1.5px solid var(--bar-line2); border-radius: 999px; color: var(--bar-body); font: 400 .66rem var(--bar-pixel); letter-spacing: .12em; margin: 0; min-height: 48px; }
.loyalty-main .barx button.barx-mode[aria-pressed="true"] { background: rgba(83,224,255,.14); border-color: var(--bar-blue); color: #fff; }
.barx-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.barx-side { align-content: start; display: grid; gap: .5rem; }
.barx-side .barx-only-keypad { display: grid; gap: .5rem; }
.loyalty-main .barx .barx-entry[data-mode="keypad"] .barx-only-chips, .loyalty-main .barx .barx-entry[data-mode="chips"] .barx-only-keypad { display: none; }
.loyalty-main .barx button.barx-bill.is-more { border-color: #3a4778; color: var(--bar-body); font: 400 .6rem var(--bar-pixel); letter-spacing: .1em; }
.loyalty-main .barx button.barx-bill.is-more[aria-expanded="true"] { border-color: var(--bar-purple); color: #fff; }
.barx-quick[hidden] { display: none; }
.loyalty-main .barx button.barx-bill:disabled { opacity: .4; }
.barx-chips { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loyalty-main .barx button.barx-chip { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #1b2550, #0c1230 70%); border: 3px dashed var(--bar-mint); border-radius: 50%; color: #fff; display: flex; font: 400 2rem/1 var(--bar-lcd); gap: .1rem; justify-content: center; margin: 0; max-height: 96px; justify-self: center; width: 100%; max-width: 96px; touch-action: manipulation; }
.loyalty-main .barx button.barx-chip small { color: var(--bar-mint); font-size: 1.3rem; }
.loyalty-main .barx button.barx-chip:active { background: rgba(159,240,192,.25); transform: scale(.96); }
.loyalty-main .barx button.barx-chip[data-cash-chip="10000"] { border-color: #b48cff; }
.loyalty-main .barx button.barx-chip[data-cash-chip="5000"] { border-color: #ff9ab8; }
.loyalty-main .barx button.barx-chip[data-cash-chip="2000"] { border-color: #53e0ff; }
.loyalty-main .barx button.barx-chip[data-cash-chip="25"] { border-color: #9aa6c8; font-size: 1.6rem; }

/* RING UP's sheets, one size (Jesse, 2026-10-16: "centered and same-size all the time … the button
   lands in the exact place each time"): every item, option and open-price sheet is the same box in
   the middle of the screen, so ADD is always under the same finger; a long option list scrolls
   inside it. */
.ring-sheet:not(.ring-pick) { height: min(40rem, calc(100dvh - 2rem)); inset: 0; margin: auto; max-width: none; position: fixed; width: min(46rem, calc(100vw - 1.5rem)); }
.ring-sheet:not(.ring-pick) .ring-sheet-body { flex: 1; }
.ring-sheet-head { flex: none; flex-wrap: nowrap; }
.ring-sheet-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring-sheet-foot { flex: none; }
.ring-keypad-wrap.is-item { align-items: start; }
.ring-sheet-icon .ring-icon { height: 72px; width: 72px; }
.ring-amount.is-own { color: var(--bar-amber-soft); text-shadow: 0 0 14px rgba(255,191,63,.5); }
.loyalty-main .ring-sheet button.ring-reset { align-self: flex-start; border: 1.5px solid var(--bar-line2); border-radius: 999px; color: var(--bar-body); font: 400 .58rem var(--bar-pixel); letter-spacing: .08em; min-height: 44px; padding: 0 .9rem; }
.loyalty-main .ring-sheet button.ring-reset[hidden] { display: none; }

/* The tab's buttons, round 3 (Jesse, 2026-10-16): + ADD ITEMS | VOID, COUPONS | CLOSE OUT (green),
   then TRANSFER TAB across. */
.bar .bar-tabhead .bar-act.is-close { border-color: var(--bar-mint); color: var(--bar-mint); }
.bar .bar-tabhead .bar-act.is-primary span { font: 400 1.5rem/1 var(--bar-lcd); margin-right: .35rem; }
.bar .bar-tabhead .bar-act.is-transfer { background: none; border: 1.5px dashed var(--bar-line2); color: var(--bar-body); grid-column: 1 / -1; min-height: 56px; }
@container bar-detail (max-width: 40rem) {
  .bar-tabhead .bar-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar .bar-tabhead .bar-act.is-transfer { grid-column: auto; min-height: 52px; }
}
@container bar-detail (max-width: 520px) {
  .bar-tabhead .bar-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* HOLD an item: the row fills while held, then its popup opens. */
.bar-line[data-bar-hold] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.bar-line.is-holding { background: linear-gradient(90deg, rgba(83,224,255,.22), rgba(83,224,255,.22)) no-repeat left / 0% 100%; animation: bar-hold .55s linear forwards; }
@keyframes bar-hold { to { background-size: 100% 100%; } }
.bar-hold-hint { color: var(--bar-dim); font: 400 .5rem var(--bar-pixel); letter-spacing: .12em; margin: .6rem 0 0; text-align: center; }

/* MOVE and TRANSFER's targets: the open tabs as big buttons, then any player. */
.bar-pop:has(.bar-pop-head.is-move), .bar-pop:has(.bar-pop-head.is-edit), .bar-pop.is-move, .bar-pop.is-edit { border-color: var(--bar-blue); box-shadow: 0 0 30px rgba(83,224,255,.3), 0 24px 60px rgba(0,0,0,.7); }
.loyalty-main .bar form.bar-pop-body { margin: 0; max-width: none; }
.bar-move-lead { color: var(--bar-body); font-size: 1.2rem; margin: 0; }
.bar-targets { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.loyalty-main .bar button.bar-target { align-items: flex-start; background: var(--bar-panel); border: 1.5px solid var(--bar-line2); border-radius: 14px; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; margin: 0; min-height: 64px; padding: .55rem .8rem; text-align: left; }
.loyalty-main .bar button.bar-target:active, .loyalty-main .bar button.bar-target:hover { border-color: var(--bar-blue); }
.bar-target b { font: 400 1.4rem/1.1 var(--bar-lcd); }
.bar-target span { color: var(--bar-muted); font: 400 1.05rem var(--bar-lcd); }
.bar-target-player { display: grid; gap: .6rem; }
.loyalty-main .bar button.bar-target-go { background: var(--bar-blue); border: 0; border-radius: 16px; color: #04121a; cursor: pointer; font: 400 .7rem var(--bar-pixel); letter-spacing: .1em; margin: 0; min-height: 60px; }

/* An item's price, keyed like the register; MOVE TO ANOTHER TAB under it. */
.bar-price-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.bar-price-side { display: flex; flex-direction: column; gap: .5rem; }
.bar-price-side .bar-icon.is-big { border-radius: 12px; height: 72px; width: 72px; }
.bar-price-box { display: flex; flex-direction: column; gap: .3rem; }
.loyalty-main .bar .bar-price-box input { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-shadow: none; box-sizing: border-box; color: #fff; font: 400 2.6rem var(--bar-lcd); margin: 0; min-height: 64px; padding: 0 .8rem; width: 100%; }
.bar-price-hint { color: #8fa0cc; font-size: 1.05rem; }
.bar-price-keys { display: grid; gap: .45rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bar-price-keys[hidden] { display: none; }
.loyalty-main .bar .bar-price-keys button.barx-key { background: var(--bar-panel2); border: 1.5px solid var(--bar-line2); border-radius: 14px; color: #fff; cursor: pointer; font: 400 2rem/1 var(--bar-lcd); margin: 0; min-height: 58px; }
.loyalty-main .bar .bar-price-keys button.barx-key.is-back { color: var(--bar-pink); }
.loyalty-main .bar button.bar-price-save { background: var(--bar-blue); border: 0; border-radius: 16px; box-shadow: 0 0 16px rgba(83,224,255,.45); color: #04121a; cursor: pointer; font: 400 .75rem var(--bar-pixel); letter-spacing: .1em; margin: 0; min-height: 64px; }
.loyalty-main .bar button.bar-price-save:disabled { background: #22305a; box-shadow: none; color: #c8d2f0; cursor: default; }
.bar-edit-foot { display: grid; gap: .6rem; grid-template-columns: 1fr 1.4fr; }
.bar .bar-edit-foot a.barv-cancel { min-height: 60px; }
.bar a.bar-edit-move { align-items: center; border: 1.5px solid var(--bar-blue); border-radius: 18px; color: var(--bar-blue-soft); display: flex; font: 400 .7rem var(--bar-pixel); justify-content: center; letter-spacing: .1em; min-height: 60px; text-align: center; }
.barv-count.is-move { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 560px) { .bar-price-grid { grid-template-columns: minmax(0, 1fr); } }
.loyalty-main .bar .bar-price-keys button.barx-key, .loyalty-main .bar button.bar-target, .loyalty-main .bar button.bar-target-go, .loyalty-main .bar button.bar-price-save { box-shadow: none; text-shadow: none; text-transform: none; transform: none; }
.loyalty-main .bar button.bar-price-save:not(:disabled), .loyalty-main .bar button.bar-target-go { box-shadow: 0 0 16px rgba(83,224,255,.4); }

/* Jesse, 2026-10-16: TRANSFER TAB and CLOSE OUT trade places; CLOSE OUT is the biggest, across. */
.bar .bar-tabhead .bar-act.is-transfer { grid-column: auto; min-height: 72px; }
.bar .bar-tabhead .bar-act.is-close { font-size: .8rem; grid-column: 1 / -1; min-height: 84px; }
.bar-tabhead .bar-history li { grid-template-columns: 7.2rem minmax(0, 1fr); }
.bar-history li.is-edit { border-left-color: var(--bar-amber); }
.bar-history li.is-move { border-left-color: var(--bar-blue-soft); }
@container bar-detail (max-width: 40rem) {
  .bar .bar-tabhead .bar-act.is-transfer { min-height: 52px; }
  .bar .bar-tabhead .bar-act.is-close { font-size: inherit; grid-column: span 2; min-height: 52px; }
}
/* TAB INFO stays inside its box (Jesse's screenshot, 2026-10-16: the last entries spilled out
   under it). A <details> body isn't a flex item, so it can't shrink to the pinned column; the list
   gets the screen's height less the tab's head and buttons, and scrolls inside. */
.bar-tabhead { max-height: none; }
.bar-tabhead .bar-history, .bar-tabhead .bar-history[open] { flex: none; }
.bar-tabhead .bar-history ol { flex: none; max-height: max(6rem, calc(100vh - 36rem)); max-height: max(6rem, calc(100dvh - 36rem)); }
@container bar-detail (max-width: 40rem) {
  .bar-tabhead .bar-history ol { max-height: 40vh; }
}

/* The bar's notices (Jesse, 2026-10-16: "a dismissable popup near the bottom", gone in 5 s): a card
   at the bottom middle with ×. A confirmation fades on its own after 5 s; an error waits for ×.
   bar.js adds the × and the timer; the URL drops ?notice= so a reload doesn't show it again. */
body.bar-page .loyalty-main > .notice, body.bar-page .loyalty-main > .alert { align-items: center; background: #0f1633; border: 1.5px solid #53e0ff; border-left-width: 1.5px; border-radius: 16px; bottom: 1.2rem; box-shadow: 0 0 22px rgba(83,224,255,.35), 0 18px 40px rgba(0,0,0,.6); box-sizing: border-box; display: flex; font: 400 1.25rem/1.25 'VT323', monospace; gap: .8rem; left: 50%; max-width: min(34rem, calc(100vw - 2rem)); min-height: 56px; padding: .6rem .6rem .6rem 1.1rem; position: fixed; transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease; width: max-content; z-index: 80; }
body.bar-page .loyalty-main > .alert { border-color: #ffbf3f; box-shadow: 0 0 22px rgba(255,191,63,.3), 0 18px 40px rgba(0,0,0,.6); color: #ffd27a; }
body.bar-page .loyalty-main > .notice.is-leaving, body.bar-page .loyalty-main > .alert.is-leaving { opacity: 0; transform: translate(-50%, 12px); }
body.bar-page .loyalty-main > .notice + .alert { bottom: 5.4rem; }
.loyalty-main button.bar-toast-x { align-items: center; background: none; border: 1.5px solid #3a4778; border-radius: 50%; box-shadow: none; color: #c8d2f0; cursor: pointer; display: flex; flex: none; font: 400 1.5rem/1 'VT323', monospace; height: 44px; justify-content: center; margin: 0 0 0 auto; padding: 0; width: 44px; }
@media (prefers-reduced-motion: no-preference) {
  body.bar-page .loyalty-main > .notice, body.bar-page .loyalty-main > .alert { animation: bar-toast-in .25s ease-out; }
}
@keyframes bar-toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }

/* The header's money (Jesse, 2026-10-16): THIS TAB and TONIGHT, right of the sections. */
.bar-head-money { align-items: stretch; display: flex; gap: .5rem; margin-left: auto; }
.bar-head-money span { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: .15rem .75rem; }
.bar-head-money small { color: #8fa0cc; font: 400 .48rem var(--bar-pixel); letter-spacing: .12em; }
.bar-head-money b { color: #fff; font: 400 1.6rem/1 var(--bar-lcd); white-space: nowrap; }
.bar-head-money .is-tonight b { color: var(--bar-mint); }
@media (min-width: 701px) and (max-width: 1000px) {
  .bar-head-money span { padding: .1rem .5rem; }
  .bar-head-money b { font-size: 1.35rem; }
}
@media (max-width: 760px) {
  .bar .bar-head .bar-head-money { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .bar .bar-head .bar-head-money span { flex: 1; }
}
.bar .bar-head .bar-head-money + .bar-open { margin-left: 0; }
@container bar-detail (max-width: 40rem) { .bar .bar-tabhead .bar-act.is-close { font-size: .7rem; } }
@container bar-detail (max-width: 520px) { .bar .bar-tabhead .bar-act.is-close { font-size: .56rem; } }

/* + OPEN A TAB beside "Find a tab", above the topmost tab (Jesse, 2026-10-16). */
.bar-list-top { align-items: stretch; display: flex; gap: .5rem; }
.bar-list-top .bar-find { flex: 1; min-width: 0; }
.bar .bar-list .bar-open.is-list { border-radius: 999px; flex: none; gap: .35rem; justify-content: center; margin: 0; min-height: 48px; padding: 0 1rem 0 .8rem; }
.bar .bar-list .bar-open.is-list svg { height: 22px; width: 22px; }
.bar .bar-list .bar-open.is-list span { font: 400 .62rem var(--bar-pixel); letter-spacing: .1em; }
/* The ticket keeps room to read on a 1180-wide tablet: the info column gives way first. */
.bar-desk { grid-template-columns: minmax(16rem, 26rem) minmax(26rem, 34rem); }
@container bar-detail (max-width: 40rem) { .bar-desk { grid-template-columns: minmax(0, 1fr); } }
.bar-tabhead .bar-history li { gap: .6rem; grid-template-columns: 6.4rem minmax(0, 1fr); }
.bar-tabhead .bar-history ol, .bar-pop-body { scrollbar-color: #2a3762 transparent; scrollbar-width: thin; }

/* The open-tabs list (Jesse, 2026-10-16): a little wider (a quarter of the screen), each tab one
   row: face, name, the food pill, total, nothing wrapping. */
.bar-main { grid-template-columns: minmax(19rem, 25%) minmax(0, 1fr); }
.bar .bar-tab { grid-template-columns: 40px minmax(0, 1fr) auto auto; min-height: 56px; padding: .4rem .65rem; }
.bar .bar-tab .bar-face { font-size: 1.3rem; height: 40px; width: 40px; }
.bar .bar-tab img.bar-face { height: 40px; }
.bar .bar-tab-link b { font-size: 1.35rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .bar-tab .bar-food { flex: none; margin: 0; white-space: nowrap; }
.bar .bar-tab .bar-food-pop { align-self: center; margin: 0; min-height: 32px; padding: 0 .55rem; }
.bar .bar-tab-pill:empty { display: none; }
.bar-tab-total { white-space: nowrap; }
@media (max-width: 760px) { .bar-main { grid-template-columns: minmax(0, 1fr); } }
.bar-main { grid-template-columns: minmax(20rem, 25%) minmax(0, 1fr); }
.bar .bar-tab { gap: .5rem; }
@media (max-width: 760px) { .bar-main { grid-template-columns: minmax(0, 1fr); } }

/* + SALE in the header (Jesse, 2026-10-16): pay as you go, straight to RING UP. */
.loyalty-main .bar form.bar-sale-form { margin: 0 0 0 auto; max-width: none; }
.loyalty-main .bar button.bar-sale { background: var(--bar-mint); border: 0; border-radius: 999px; box-shadow: 0 0 16px rgba(159,240,192,.45); color: #062014; cursor: pointer; font: 400 .7rem var(--bar-pixel); letter-spacing: .1em; margin: 0; min-height: 48px; padding: 0 1.1rem; text-shadow: none; }
.bar .bar-head .bar-sale-form + .bar-head-money { margin-left: 0; }
@media (max-width: 760px) { .bar .bar-head .bar-sale-form { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; } .loyalty-main .bar button.bar-sale { min-height: 44px; padding: 0 .8rem; } }
.loyalty-main .bar form.bar-act-form { display: contents; }
.loyalty-main .bar .bar-tabhead button.bar-act.is-cancel-sale { background: none; border: 1.5px solid var(--bar-pink); border-radius: 16px; color: #ffd0de; cursor: pointer; font: 400 .7rem var(--bar-pixel); grid-column: auto; letter-spacing: .1em; margin: 0; text-shadow: none; }
.bar a.bar-rename { color: var(--bar-blue-soft); font: 400 .5rem var(--bar-pixel); letter-spacing: .1em; text-decoration: underline; }
.bar-rename-box { display: flex; flex-direction: column; gap: .35rem; }
.loyalty-main .bar .bar-rename-box input { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-sizing: border-box; color: #fff; font: 400 1.8rem var(--bar-lcd); margin: 0; min-height: 60px; padding: 0 .8rem; width: 100%; }

/* MOVE / TRANSFER's confirm: pinned at the bottom of the popup's body. */
.bar-move-ask { background: #121a3a; border: 1.5px solid var(--bar-blue); border-radius: 16px; bottom: 0; box-shadow: 0 -10px 24px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: .6rem; padding: .8rem; position: sticky; }
.bar-move-ask[hidden] { display: none; }
.bar-move-ask p { color: #fff; font-size: 1.45rem; margin: 0; }
.bar-move-ask-buttons { display: grid; gap: .6rem; grid-template-columns: 1fr 1.6fr; }
.loyalty-main .bar .bar-move-ask button.barv-cancel { background: none; border: 1.5px solid #fff; border-radius: 16px; color: #fff; cursor: pointer; font: 400 .75rem var(--bar-pixel); letter-spacing: .12em; margin: 0; min-height: 60px; }

/* CLOSED (Jesse, 2026-10-16): tonight's finished tabs and sales; one of them read-only. */
.barc-main { display: flex; flex-direction: column; gap: .8rem; margin: 0 auto; max-width: 54rem; padding: 1rem; width: 100%; box-sizing: border-box; }
.loyalty-main .bar form.barc-find { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: 0; max-width: none; }
.barc-find .barx-h { margin-right: auto; }
.barc-find .bar-find { flex: 1 1 14rem; }
.barc-date { align-items: center; color: #8fa0cc; display: flex; font: 400 .55rem var(--bar-pixel); gap: .5rem; letter-spacing: .12em; }
.loyalty-main .bar .barc-date input { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 12px; color: #fff; font: 400 1.3rem var(--bar-lcd); margin: 0; min-height: 44px; padding: 0 .6rem; color-scheme: dark; }
.barc-sum { color: var(--bar-mint); font: 400 1.6rem var(--bar-lcd); white-space: nowrap; }
.barc-list { display: flex; flex-direction: column; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.bar a.barc-row { align-items: center; background: var(--bar-panel); border: 1.5px solid var(--bar-line); border-left-width: 5px; border-radius: 14px; color: #fff; display: grid; gap: .8rem; grid-template-columns: 5.6rem minmax(0, 1fr) auto auto; min-height: 56px; padding: 0 .9rem; }
.barc-row time { color: var(--bar-muted); }
.barc-row b { font-size: 1.35rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barc-row b small, .barc-side h1 small { border: 1px solid var(--bar-mint); border-radius: 999px; color: var(--bar-mint); font: 400 .45rem var(--bar-pixel); letter-spacing: .1em; padding: .15rem .4rem; vertical-align: middle; }
.barc-words { font: 400 .6rem var(--bar-pixel); letter-spacing: .1em; white-space: nowrap; }
.barc-by { color: var(--bar-muted); font-size: 1.05rem; white-space: nowrap; }
.barc-row.is-paid { border-left-color: var(--bar-mint); }
.barc-row.is-paid .barc-words { color: var(--bar-mint); }
.barc-row.is-cancelled, .barc-row.is-moved { border-left-color: var(--bar-line2); }
.barc-row.is-cancelled .barc-words, .barc-row.is-moved .barc-words { color: var(--bar-muted); }
.barc-row.is-voided { border-left-color: var(--bar-pink); }
.barc-row.is-voided .barc-words { color: var(--bar-pink); }
.barc-one { align-items: start; display: grid; gap: 1.2rem; grid-template-columns: minmax(16rem, 26rem) minmax(0, 34rem); justify-content: center; padding: 1rem; }
.barc-side { display: flex; flex-direction: column; gap: .8rem; }
.bar a.barc-back { align-self: flex-start; }
.barc-status { font: 400 .62rem var(--bar-pixel) !important; letter-spacing: .12em; }
.barc-status.is-closed { color: var(--bar-mint); }
.barc-status.is-voided { color: var(--bar-pink); }
.barc-cash { color: var(--bar-body); font-size: 1.2rem; margin: 0; }
.barc-buttons { display: flex; flex-direction: column; gap: .6rem; }
.loyalty-main .bar .barc-buttons form { margin: 0; max-width: none; }
.loyalty-main .bar button.barc-btn, .bar summary.barc-btn { align-items: center; background: none; border: 1.5px solid var(--bar-line2); border-radius: 16px; color: #fff; cursor: pointer; display: flex; font: 400 .7rem var(--bar-pixel); justify-content: center; letter-spacing: .1em; list-style: none; margin: 0; min-height: 56px; width: 100%; }
.bar summary.barc-btn::-webkit-details-marker { display: none; }
.bar summary.barc-btn.is-void { border-color: var(--bar-pink); color: #ffd0de; }
.barc-void form { display: flex; flex-direction: column; gap: .6rem; padding-top: .6rem; }
.barc-void p { color: var(--bar-body); font-size: 1.2rem; margin: 0; }
.barc-ticket .bar-line.is-ro { grid-template-columns: 40px minmax(0, 1fr) 2.4rem 5.4rem; }
.barc-side .bar-history ol { max-height: 50vh; }
@media (max-width: 760px) { .barc-one { grid-template-columns: minmax(0, 1fr); } .bar a.barc-row { grid-template-columns: 4.6rem minmax(0, 1fr) auto; } .barc-by { display: none; } }
.loyalty-main .bar .bar-head form.bar-sale-form { display: flex; flex: none; width: auto; }
.loyalty-main .bar .bar-head form.bar-sale-form button.bar-sale { width: auto; }

/* The site's button underline (house.css) doesn't belong on the bar; bar buttons that glow set
   their own. */
.loyalty-main .bar button, .loyalty-main .bar button:active { box-shadow: none; transform: none; }
/* The header stays one line on a tablet (SALE and the money joined it): the sections give way,
   and the WHO'S SERVING chip drops its "hold to add" under 1300px. */
@media (min-width: 761px) {
  .bar .bar-head { flex-wrap: nowrap; }
  .bar .bar-head .bar-sections { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .bar .bar-head .bar-sections a { flex: none; white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .bar .bar-head .who-chip-switch { display: none; }
  .bar .bar-head .bar-sections a { letter-spacing: .06em; padding: 0 .6rem; }
  .bar .bar-head .bar-long { display: none; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .bar .bar-head .bar-head-money span:not(.is-tonight) { display: none; }
  .bar .bar-head .who-chip-words small { display: none; }
  .loyalty-main .bar button.bar-sale { padding: 0 .8rem; }
}
/* Tax lines stay one line each (Jesse, 2026-10-16: they wrapped). */
.bar-totals span, .barx-sums dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Totals (Jesse, 2026-10-16): Subtotal, Tax (tap for each tax), Coupons, Total. */
.bar-totals .bar-tax { grid-column: 1 / -1; }
.bar-totals .bar-tax summary { cursor: pointer; display: flex; justify-content: space-between; list-style: none; }
.bar-totals .bar-tax summary::-webkit-details-marker { display: none; }
.bar-totals .bar-tax summary span:first-child::after { color: var(--bar-dim); content: " ▸"; }
.bar-totals .bar-tax[open] summary span:first-child::after { content: " ▾"; }
.bar-tax-rows { color: var(--bar-muted); display: grid; font-size: 1.05rem; gap: .05rem 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: .1rem 0 .2rem .9rem; }
.bar-tax-rows span:nth-child(2n) { text-align: right; }
.bar-tax-rows span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-totals .is-coupons { color: #e9ddff; }
.bar-totals span.is-coupons:nth-of-type(2n) { text-align: right; }
.barx-sums .bar-totals { padding: 0; }
.barx-sums .bar-totals > b { display: none; }
.barx-sums .bar-totals { display: grid; font-size: 1.2rem; gap: .1rem 1rem; grid-template-columns: minmax(0, 1fr) auto; }
.barx-sums .bar-totals .bar-tax-rows { display: grid; }