/* Scan-IT to Office for the product hero (Pages/Shared/Sections/HeroApps/_ScanWindow.cshtml): the phone app's input
   form (dark, orange accents, laid out like the real app) in front of the spreadsheet it fills. Builds on
   app-window.css (typing, keyframes); loaded only by the partial. No Tailwind, no site tokens.
   The figure is a composition, not one window: it drops the shared frame's background, shadow and clipping. */

.tec-appwin--scan {
  --sc-orange: #f7941d;
  --sc-grid: #e1e1e1;

  position: relative;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.tec-appwin--scan i, .tec-appwin--scan b { font-style: normal; }

/* ---- the spreadsheet ---- */
.tec-appwin__sc-sheet {
  position: absolute;
  left: 0;
  top: 44px;
  right: 150px;
  bottom: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 40px 90px -30px rgba(40, 0, 30, .65);
}
.tec-appwin__sc-sheet-title { height: 30px; display: flex; align-items: center; justify-content: center; border-bottom: 2px solid #217346; background: #f3f3f3; font-size: 11.5px; color: #444; }
.tec-appwin__sc-grid { display: grid; grid-template-columns: 28px 36% 20% repeat(calc(var(--cols) - 2), minmax(0, 1fr)); grid-template-rows: 20px; grid-auto-rows: 38px; }
.tec-appwin__sc-hd { display: flex; align-items: center; justify-content: center; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; background: #f7f7f7; font-size: 10.5px; color: #666; }
.tec-appwin__sc-cell { display: flex; align-items: center; padding: 0 8px; border-right: 1px solid var(--sc-grid); border-bottom: 1px solid var(--sc-grid); font: 400 24px/1 "Segoe UI", Arial, sans-serif; color: #111; white-space: nowrap; overflow: hidden; }
.tec-appwin__sc-cell.is-head { font-weight: 700; }
.tec-appwin__sc-cell.is-num { justify-content: flex-end; }
.tec-appwin__sc-cell.is-selected { box-shadow: inset 0 0 0 2px #217346; }

/* ---- the phone ---- */
.tec-appwin__sc-phone {
  position: absolute;
  right: 0;
  top: 0;
  width: 236px;
  height: 500px;
  padding: 9px;
  border-radius: 40px;
  background: #111;
  box-shadow: 0 0 0 1.5px #3a3a3c, 0 40px 80px -24px rgba(20, 0, 20, .7);
}
.tec-appwin__sc-screen { position: relative; height: 100%; overflow: hidden; border-radius: 32px; background: #000; color: #fff; }
.tec-appwin__sc-status { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 4px 22px 0; font-size: 11px; font-weight: 600; }
.tec-appwin__sc-island { width: 70px; height: 20px; border-radius: 12px; background: #111; box-shadow: 0 0 0 1px #222; }
.tec-appwin__sc-icons { display: flex; gap: 4px; align-items: center; }
.tec-appwin__sc-icons i { width: 12px; height: 8px; background: linear-gradient(90deg, #fff 20%, transparent 20% 30%, #fff 30% 50%, transparent 50% 60%, #fff 60% 80%, transparent 80% 90%, #fff 90%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.tec-appwin__sc-icons b { width: 17px; height: 8px; border-radius: 2px; background: #fff; }
.tec-appwin__sc-formtitle { padding: 6px 0 10px; text-align: center; font-size: 14px; font-weight: 700; }
.tec-appwin__sc-field { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: #1c1c1e; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--sc-orange); }
.tec-appwin__sc-field svg { width: 12px; height: 12px; flex: none; }
.tec-appwin__sc-trash { width: 10px !important; height: 12px !important; }
.tec-appwin__sc-code { position: relative; margin: 10px 30px 4px; padding: 6px 8px 4px; border-radius: 3px; background: #fff; }
.tec-appwin__sc-code img { display: block; width: 100%; height: auto; }
.tec-appwin__sc-laser { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: #ff2d2d; box-shadow: 0 0 6px #ff2d2d; opacity: 0; }
.tec-appwin__sc-codeinfo { text-align: center; font-size: 9.5px; line-height: 1.3; color: var(--sc-orange); }
.tec-appwin__sc-codeinfo b { font-weight: 600; }
.tec-appwin__sc-input { display: block; margin: 8px 10px 10px; padding: 7px 9px; border-radius: 3px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.tec-appwin__sc-input--item { background: #48484a; color: #e5e5ea; }
.tec-appwin__sc-qty { display: flex; gap: 5px; align-items: center; padding-right: 10px; }
.tec-appwin__sc-qty .tec-appwin__sc-input { flex: 1; min-width: 0; margin-right: 0; }
.tec-appwin__sc-input--qty { background: #fff; color: #000; }
.tec-appwin__sc-qty b { display: grid; place-items: center; width: 26px; height: 30px; border: 1.5px solid var(--sc-orange); border-radius: 4px; font-size: 15px; color: var(--sc-orange); }
.tec-appwin__sc-send { position: absolute; right: 14px; bottom: 74px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sc-orange); box-shadow: 0 6px 16px rgba(247, 148, 29, .45); }
.tec-appwin__sc-send svg { width: 22px; height: 22px; }

/* ---- narrow: smaller phone ---- */
@container (max-width: 520px) {
  .tec-appwin__sc-sheet { right: 110px; top: 40px; }
  .tec-appwin__sc-phone { width: 190px; height: 400px; padding: 7px; border-radius: 32px; }
  .tec-appwin__sc-screen { border-radius: 26px; }
  .tec-appwin__sc-cell { font-size: 17px; padding: 0 5px; }
  .tec-appwin__sc-grid { grid-auto-rows: 30px; }
  .tec-appwin__sc-send { bottom: 40px; width: 40px; height: 40px; }
  .tec-appwin__sc-status { padding: 3px 16px 0; font-size: 10px; }
  .tec-appwin__sc-island { width: 52px; height: 15px; }
}

/* ---- animation: scan, the item types in, Send, the row appears in the sheet ---- */
.tec-appwin__sc-laser { animation: tec-appwin-scanline .7s ease-in-out calc(var(--aw-start) - .5s) 1 both; }
.tec-appwin__sc-send { animation: tec-appwin-scpress .4s ease-out calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .35s) both; }
.tec-appwin__sc-cell.is-sent { animation: tec-appwin-show .35s ease-out calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .8s) both; }
@keyframes tec-appwin-scanline { 0% { opacity: 0; top: 15%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: 85%; } }
@keyframes tec-appwin-scpress { 40% { transform: scale(.88); background: #d97a0c; } }