/* 17:30 · the till you can play (till.js). The page is at dusk; the scene
   is the scanner's camera view. Without JS it is a still of one finished
   scan: 00105 added, "1 piece · € 180.00". */

.till .till-text { padding-bottom: 48px; }
.till-scene { padding-inline: 16px; }

.viewfinder {
  position: relative; max-width: 1320px; margin: 0 auto;
  height: clamp(580px, 82vh, 740px);
  border-radius: 36px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 25%, #26363F 0%, #141C21 62%, #0D1316 100%);
  color: #E6E0D9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 90px -40px rgba(0,0,0,.7);
  --scan: #4FB3B1; --ok: #57B98A; --flag: #D2A054;
  --frost: rgba(27,38,45,.84);
}

/* The app's chrome over the camera: glass, no solid bars. */
.vf-top { position: absolute; z-index: 6; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.vf-top .brandchip {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 10px; border-radius: 999px;
  background: rgba(27,38,45,.6); border: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-word); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.vf-top .lockup-tile { position: relative; width: 24px; height: 24px; border-radius: 6px; }
.vf-top .lockup-logo { color: #FFFFFF; filter: drop-shadow(0 0 2px rgba(255,255,255,.55)) drop-shadow(0 0 5px rgba(255,255,255,.18)); }
.vf-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(27,38,45,.6); border: 1px solid rgba(255,255,255,.08); }
.vf-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* The rail in the camera's view. */
.till-rail { position: absolute; z-index: 2; top: 96px; left: 7%; right: 7%; height: 380px; --tag-w: 128px; }
.till-rail .rail-bar { background: rgba(230,224,217,.55); height: 5px; opacity: 1; }
.till-rail .string { background: rgba(230,224,217,.45); }
.till-rail .hang[data-no="00105"] { --x: 12%; }
.till-rail .hang[data-no="00107"] { --x: 37%; }
.till-rail .hang[data-no="00102"] { --x: 63%; }
.till-rail .hang[data-no="00098"] { --x: 88%; }
.till-rail .tag-face { box-shadow: 0 20px 34px -18px rgba(0,0,0,.8); }
.till-rail button.tag[aria-disabled="true"] { cursor: default; }
.till-rail .tag-hole { background: #1A242A; }

.aim-pill {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 214px; width: max-content; margin: 0 auto;
  padding: 7px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(27,38,45,.6); border: 1px solid rgba(255,255,255,.08);
}

/* The scanner's brackets: in the corners at rest, closing on a barcode. */
.brackets { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.corner { position: absolute; width: 46px; height: 46px; border: 3px solid var(--scan); transition: border-color .2s; }
.corner.tl { left: 28px; top: 80px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.corner.tr { right: 28px; top: 80px; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.corner.bl { left: 28px; bottom: 112px; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.corner.br { right: 28px; bottom: 112px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.brackets.ok .corner { border-color: var(--ok); }
.brackets.flag .corner { border-color: var(--flag); }

.scan-chip {
  position: absolute; z-index: 5; left: 0; top: 0;
  padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--ok); color: #07201F; opacity: 0; pointer-events: none;
}
.scan-chip.flag { background: var(--flag); color: #261700; }

/* The last scan, risen above the sheet. */
.last-scan {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 100px;
  width: min(480px, calc(100% - 32px)); margin: 0 auto;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 12px 14px; border-radius: 20px;
  background: var(--frost); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.last-scan[hidden] { display: none; }
.ls-thumb { width: 52px; border-radius: 10px; background-color: #2A3A43; background-size: 64%; }
.ls-text { display: flex; flex-direction: column; min-width: 0; }
.ls-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-meta { font-size: 12px; color: #B3BFC6; }
.ls-meta s { color: #96A4AC; }
.ls-status { font-size: 13px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.last-scan[data-kind="sold"] .ls-status, .last-scan[data-kind="duplicate"] .ls-status, .last-scan[data-kind="notfound"] .ls-status { color: var(--flag); }
.ls-chips { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.last-scan:not([data-kind="added"]):not([data-kind="duplicate"]) .ls-chips { display: none; }
.ls-chips button {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: transparent; color: #E6E0D9;
  font-family: var(--font-mono); font-size: 14px;
}
.ls-chips button[aria-pressed="true"] { background: #183B3A; border-color: transparent; color: var(--scan); }

/* The frosted sheet docked at the bottom: this sale. */
.till-sheet {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px; height: 84px; padding: 0 22px;
  border-radius: 26px 26px 0 0; background: var(--frost); border-top: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}
.ts-glyph svg { width: 26px; height: 26px; fill: none; stroke: #96A4AC; stroke-width: 1.6; }
.ts-text { display: flex; flex-direction: column; }
.ts-label { font-size: 11px; letter-spacing: .14em; color: #96A4AC; }
#sale-summary { font-size: 17px; font-weight: 600; }
.ts-done, .pay-buttons button, .rec-new {
  min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--scan); color: #07201F; font-size: 16px; font-weight: 600;
}
.ts-done { margin-left: auto; }
.ts-done:disabled { opacity: .35; cursor: default; }

/* Paying, and the recorded sale: sheets over the bottom of the view. */
.pay, .recorded {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 22px 24px; border-radius: 26px 26px 0 0;
  background: var(--frost); border-top: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}
.pay[hidden], .recorded[hidden] { display: none; }
.pay-summary { font-size: 18px; font-weight: 600; }
.pay-buttons { display: flex; gap: 10px; }
.pay-buttons button { min-width: 140px; }
.pay-back { min-height: 44px; border: 0; background: none; color: #B3BFC6; font-size: 15px; }
.rec-check { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #183B3A; }
.rec-check svg { width: 26px; height: 26px; fill: none; stroke: var(--scan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rec-text { font-family: var(--font-mono); font-size: 16px; font-weight: 600; text-align: center; }

.viewfinder :focus-visible { outline: 2px solid var(--scan); outline-offset: 3px; }

@media (max-width: 767px) {
  .till-scene { padding-inline: 8px; }
  .viewfinder { height: 640px; border-radius: 28px; }
  .till-rail { top: 84px; left: 3%; right: 3%; height: 300px; --tag-w: 74px; }
  .aim-pill { bottom: 248px; }
  .corner.tl, .corner.tr { top: 72px; }
  .corner.bl, .corner.br { bottom: 100px; }
  .last-scan { bottom: 94px; grid-template-columns: 44px minmax(0, 1fr); }
  .ls-thumb { width: 44px; }
  .ls-status { grid-column: 2; }
  .ls-chips button { flex: 1; padding: 0 8px; }
  .till-sheet { padding: 0 16px; }
  .pay-buttons button { min-width: 0; flex: 1; }
}