/* ===========================================================================
 * GL TMS — Document Scanner: SKIN  (Team SKIN)
 * File: web/scan/scan.css
 * ---------------------------------------------------------------------------
 * The "GL SCANNER HUD" stylesheet: a cyberpunk terminal scanner overlay,
 * neon-green on near-black, glowing. Full-screen on a phone with safe-area
 * insets. Styles ONLY the LOCKED class names (the WIRE team applies them to
 * the DOM that pages.js builds). No JS, no markup here.
 *
 * LOCKED CLASS CONTRACT:
 *   .gl-scan  .gl-scan-head  .gl-badge  .gl-title  .gl-pwr  .gl-pwr-dot
 *   .gl-view  .gl-video  .gl-corner (.tl .tr .bl .br)  .gl-crosshair  .gl-idle
 *   .gl-statusbar  .gl-status  .gl-status-dot  .gl-status-label  .gl-status-val
 *   .gl-frames-label  .gl-frames-val  .gl-signal  .gl-signal-bar
 *   .gl-controls  .gl-btn  .gl-btn-start  .gl-btn-stop  .gl-btn-done
 *   .gl-strip  .gl-thumb  .gl-thumb-img  .gl-thumb-ctl  .gl-thumb-move .gl-thumb-del
 * STATE: .is-live  .is-busy on .gl-scan ; [disabled] on buttons.
 * ===========================================================================*/

.gl-scan {
  /* palette */
  --gl-bg:        #050806;
  --gl-grid:      rgba(40, 140, 80, 0.10);
  --gl-neon:      #27e06a;
  --gl-neon-2:    #2ee46f;
  --gl-neon-3:    #1eb854;
  --gl-value:     #dfffe9;
  --gl-title:     #eafff1;
  --gl-muted:     #5f8169;
  --gl-red:       #ff4b4b;
  --gl-glow:      0 0 24px rgba(39, 224, 106, 0.45);
  --gl-glow-soft: 0 0 14px rgba(39, 224, 106, 0.30);
  --gl-line:      rgba(39, 224, 106, 0.25);

  /* fonts */
  --gl-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gl-sans: system-ui, "Segoe UI", Arial, sans-serif;

  /* layout */
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  padding: 22px;
  padding-top:    calc(22px + env(safe-area-inset-top, 0px));
  padding-right:  calc(22px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  padding-left:   calc(22px + env(safe-area-inset-left, 0px));

  color: var(--gl-value);
  font-family: var(--gl-mono);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;

  /* near-black bg with a faint green grid (~28px) */
  background-color: var(--gl-bg);
  background-image:
    linear-gradient(var(--gl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gl-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;

  /* device frame: rounded neon border with outer + inset glow */
  border: 1.5px solid var(--gl-neon);
  border-radius: 28px;
  box-shadow:
    var(--gl-glow),
    inset 0 0 28px rgba(39, 224, 106, 0.10);
}

.gl-scan *,
.gl-scan *::before,
.gl-scan *::after { box-sizing: border-box; }

/* ===========================================================================
 * 1) HEADER
 * ========================================================================= */
.gl-scan-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gl-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gl-neon);
  color: #04130a;
  font-family: var(--gl-sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: var(--gl-glow-soft);
}

.gl-title {
  font-family: var(--gl-sans);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--gl-title);
  text-shadow: 0 0 16px rgba(39, 224, 106, 0.35);
  margin: 0;
}

.gl-pwr {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--gl-mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gl-muted);
  text-transform: uppercase;
}

.gl-pwr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gl-neon);
  opacity: 0.35;          /* dim when idle */
  box-shadow: none;
  transition: opacity .2s ease, box-shadow .2s ease;
}

.gl-scan.is-live .gl-pwr-dot {
  opacity: 1;             /* bright/glow when camera live */
  box-shadow: 0 0 10px rgba(39, 224, 106, 0.9);
  animation: gl-pulse 1.6s ease-in-out infinite;
}

/* ===========================================================================
 * 2) VIEWFINDER
 * ========================================================================= */
.gl-view {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  /* slightly lighter inset panel + faint inner grid */
  background-color: rgba(12, 24, 16, 0.55);
  background-image:
    linear-gradient(rgba(40, 140, 80, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 140, 80, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  border: 1px solid var(--gl-line);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;          /* hidden until live */
  background: #000;
}
.gl-scan.is-live .gl-video { display: block; }

/* any <canvas> overlay pages.js mounts in the view (live edge draw) */
.gl-view canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* 4 L-shaped corner brackets (overlaid, stay during live) */
.gl-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 4;
  pointer-events: none;
}
.gl-corner::before,
.gl-corner::after {
  content: "";
  position: absolute;
  background: var(--gl-neon);
  box-shadow: var(--gl-glow-soft);
}
/* arm thicknesses: 2px */
.gl-corner::before { width: 34px; height: 2px; }   /* horizontal arm */
.gl-corner::after  { width: 2px;  height: 34px; }  /* vertical arm */

.gl-corner.tl { top: 14px;    left: 14px; }
.gl-corner.tl::before { top: 0; left: 0; }
.gl-corner.tl::after  { top: 0; left: 0; }

.gl-corner.tr { top: 14px;    right: 14px; }
.gl-corner.tr::before { top: 0; right: 0; }
.gl-corner.tr::after  { top: 0; right: 0; }

.gl-corner.bl { bottom: 14px; left: 14px; }
.gl-corner.bl::before { bottom: 0; left: 0; }
.gl-corner.bl::after  { bottom: 0; left: 0; }

.gl-corner.br { bottom: 14px; right: 14px; }
.gl-corner.br::before { bottom: 0; right: 0; }
.gl-corner.br::after  { bottom: 0; right: 0; }

/* center crosshair (idle only) */
.gl-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 64px;
  transform: translate(-50%, -50%);
  background: rgba(39, 224, 106, 0.55);
  box-shadow: var(--gl-glow-soft);
  z-index: 2;
}

.gl-idle {
  position: relative;
  z-index: 2;
  font-family: var(--gl-mono);
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--gl-muted);
  text-transform: uppercase;
}

/* when live: hide idle crosshair + IDLE word; video + brackets remain */
.gl-scan.is-live .gl-crosshair,
.gl-scan.is-live .gl-idle { display: none; }

/* ===========================================================================
 * 3) STATUS BAR
 * ========================================================================= */
.gl-statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(10, 20, 14, 0.80);
  border: 1px solid var(--gl-line);
}

.gl-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gl-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gl-red);
  box-shadow: 0 0 8px rgba(255, 75, 75, 0.7);
  flex: 0 0 auto;
}

.gl-status-label,
.gl-frames-label {
  font-family: var(--gl-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gl-muted);
  text-transform: uppercase;
}

.gl-status-val,
.gl-frames-val {
  font-family: var(--gl-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gl-value);
  text-shadow: 0 0 10px rgba(39, 224, 106, 0.30);
}

/* middle group nudged toward center */
.gl-statusbar .gl-frames-label { margin-left: auto; }

/* signal bars (4-5 ascending) pinned right */
.gl-signal {
  margin-left: auto;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.gl-signal-bar {
  width: 4px;
  background: var(--gl-neon);
  border-radius: 1px;
  opacity: 0.45;
  box-shadow: 0 0 6px rgba(39, 224, 106, 0.35);
}
.gl-signal-bar:nth-child(1) { height: 5px; }
.gl-signal-bar:nth-child(2) { height: 9px; }
.gl-signal-bar:nth-child(3) { height: 13px; }
.gl-signal-bar:nth-child(4) { height: 16px; }
.gl-signal-bar:nth-child(5) { height: 18px; }

.gl-scan.is-live .gl-signal-bar { opacity: 1; }

/* ===========================================================================
 * THUMBNAIL STRIP (above the buttons when pages exist)
 * ========================================================================= */
.gl-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gl-line) transparent;
}
.gl-strip::-webkit-scrollbar { height: 6px; }
.gl-strip::-webkit-scrollbar-thumb {
  background: var(--gl-line);
  border-radius: 3px;
}
.gl-strip:empty { display: none; }

.gl-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: rgba(8, 16, 11, 0.85);
  border: 1px solid var(--gl-line);
  border-radius: 8px;
}

.gl-thumb-img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  background: #000;
  border: 1px solid rgba(39, 224, 106, 0.18);
}

.gl-thumb-ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.gl-thumb-move,
.gl-thumb-del {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--gl-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--gl-neon);
  background: rgba(39, 224, 106, 0.08);
  border: 1px solid var(--gl-line);
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gl-thumb-del { color: var(--gl-red); border-color: rgba(255, 75, 75, 0.30); }

.gl-thumb-move:active,
.gl-thumb-del:active { transform: scale(0.92); }

.gl-thumb-move[disabled],
.gl-thumb-del[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* ===========================================================================
 * 4-6) CONTROLS — START / STOP / DONE
 * ========================================================================= */
.gl-controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gl-btn {
  width: 100%;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  font-family: var(--gl-sans);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
  user-select: none;
}
.gl-btn:active { transform: translateY(2px) scale(0.99); }

/* START (primary) — also the live CAPTURE shutter */
.gl-btn-start {
  background: linear-gradient(180deg, var(--gl-neon-2) 0%, var(--gl-neon-3) 100%);
  color: #04130a;
  box-shadow: var(--gl-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gl-btn-start:hover { filter: brightness(1.05); }

/* STOP — dark desaturated red-brown; looks idle/disabled when nothing to stop */
.gl-btn-stop {
  background: #2a1411;
  color: #a85d54;
  border: 1px solid #5e2a25;
  box-shadow: none;
}
.gl-scan.is-live .gl-btn-stop {
  color: #ff7a6e;
  border-color: #7a352e;
  box-shadow: 0 0 14px rgba(255, 75, 75, 0.20);
}

/* DONE — START shape, outline/secondary green style */
.gl-btn-done {
  background: rgba(39, 224, 106, 0.06);
  color: var(--gl-neon);
  border: 1.5px solid var(--gl-neon);
  box-shadow: var(--gl-glow-soft);
}
.gl-btn-done:hover { background: rgba(39, 224, 106, 0.12); }

/* disabled: dimmed, no glow, no press */
.gl-btn[disabled] {
  opacity: 0.4;
  filter: saturate(0.5);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* busy state: lock the whole overlay from input + soften primary */
.gl-scan.is-busy .gl-controls { pointer-events: none; }
.gl-scan.is-busy .gl-btn-start { filter: brightness(0.85) saturate(0.8); }
.gl-scan.is-busy .gl-pwr-dot { animation-duration: 0.7s; }

/* ===========================================================================
 * Animations
 * ========================================================================= */
@keyframes gl-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px rgba(39, 224, 106, 0.9); }
  50%      { opacity: 0.5; box-shadow: 0 0 4px  rgba(39, 224, 106, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .gl-scan .gl-pwr-dot { animation: none !important; }
}

/* ===========================================================================
 * Small phones: tighten spacing + scale the big type so 64px buttons + the
 * viewfinder always fit without scrolling the overlay.
 * ========================================================================= */
@media (max-height: 680px) {
  .gl-scan { gap: 10px; padding: 16px;
    padding-top:    calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .gl-title { font-size: 24px; letter-spacing: 3px; }
  .gl-btn { height: 56px; font-size: 17px; }
  .gl-controls { gap: 9px; }
  .gl-statusbar { padding: 11px 13px; }
}

@media (max-width: 360px) {
  .gl-title { font-size: 22px; letter-spacing: 2px; }
  .gl-status-label, .gl-frames-label { letter-spacing: 1px; }
}

/* ---------------------------------------------------------------------------
 * Helper classes (gl- namespace) used by pages.js outside the locked set.
 * Added post-build for visual polish; safe, additive. */
.gl-pwr-label { font: 600 12px ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:2px; color:#5f8169; }
.gl-scan.is-live .gl-pwr-label { color:#27e06a; }
.gl-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.gl-hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  font:600 12px ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:1px; color:#dfffe9;
  background:rgba(8,16,11,.78); border:1px solid rgba(39,224,106,.30); border-radius:8px;
  padding:6px 12px; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; }
.gl-flash { position:absolute; inset:0; z-index:5; background:#dfffe9; opacity:0; pointer-events:none; }
.gl-flash.is-on { animation:glFlash .28s ease-out; }
@keyframes glFlash { 0%{opacity:.85;} 100%{opacity:0;} }

/* ===========================================================================
 * "?" HELP BUTTON (header) + dismissible "How to scan" overlay (Team WEB-POLISH).
 * Matches the HUD: neon-green on near-black, mono labels, glow. Additive only.
 * ========================================================================= */
.gl-help-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gl-sans);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  color: var(--gl-neon);
  background: rgba(39, 224, 106, 0.08);
  border: 1.5px solid var(--gl-neon);
  border-radius: 50%;
  box-shadow: var(--gl-glow-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gl-help-btn:active { transform: scale(0.92); }

/* full-overlay dim backdrop, centered card */
.gl-help {
  position: absolute;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 6, 4, 0.78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.gl-help-card {
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px 20px 18px;
  background: rgba(8, 16, 11, 0.96);
  border: 1.5px solid var(--gl-neon);
  border-radius: 16px;
  box-shadow: var(--gl-glow), inset 0 0 24px rgba(39, 224, 106, 0.08);
}

.gl-help-title {
  font-family: var(--gl-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gl-title);
  text-shadow: 0 0 14px rgba(39, 224, 106, 0.35);
  margin: 0 0 14px;
}

.gl-help-steps {
  list-style: none;
  counter-reset: gl-help;
  margin: 0 0 18px;
  padding: 0;
}

.gl-help-step {
  counter-increment: gl-help;
  position: relative;
  padding: 9px 0 9px 40px;
  min-height: 28px;
  font-family: var(--gl-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--gl-value);
  border-bottom: 1px solid rgba(39, 224, 106, 0.14);
}
.gl-help-step:last-child { border-bottom: 0; }

.gl-help-step::before {
  content: counter(gl-help);
  position: absolute;
  left: 0;
  top: 7px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gl-mono);
  font-weight: 700;
  font-size: 14px;
  color: #04130a;
  background: var(--gl-neon);
  border-radius: 50%;
  box-shadow: var(--gl-glow-soft);
}

.gl-help-ok {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  font-family: var(--gl-sans);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 2px;
  color: #04130a;
  background: linear-gradient(180deg, var(--gl-neon-2) 0%, var(--gl-neon-3) 100%);
  box-shadow: var(--gl-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gl-help-ok:active { transform: translateY(2px) scale(0.99); }

/* ===========================================================================
 * OPEN-LOAD ACTION BUTTONS (Team MARKUP)
 * Big, high-contrast, dyslexia-friendly GREEN "Start" / RED "Submit" hit
 * targets on the open-load screen (web/index.html #bolCard / #podCard).
 * These are NOT inside the HUD overlay — they live on the normal card screen
 * — but they intentionally borrow the GL SCANNER button proportions
 * (full-width, 72px tall, 800 weight) for visual consistency.
 * Additive only: no existing class is touched.
 * ========================================================================= */
.btn-start,
.btn-submit {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 22px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 14px;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .08s ease, filter .15s ease, opacity .15s ease;
}
.btn-start:active,
.btn-submit:active { transform: translateY(2px) scale(0.99); }

/* GREEN START — opens the scanner straight into the live camera */
.btn-start {
  background: #2ee46f;
  color: #04130a;
  box-shadow: 0 0 18px rgba(39, 224, 106, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn-start:hover { filter: brightness(1.04); }

/* RED SUBMIT — finalizes (build PDF + upload) and auto-advances status */
.btn-submit {
  background: #e4322e;
  color: #fff;
  box-shadow: 0 0 18px rgba(228, 50, 46, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-submit:hover { filter: brightness(1.05); }

/* hidden until at least one page exists; disabled = dimmed + non-interactive */
.btn-submit[hidden] { display: none; }
.btn-start[disabled],
.btn-submit[disabled],
.btn-start.is-disabled,
.btn-submit.is-disabled {
  opacity: 0.4;
  filter: saturate(0.5);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* last button in a card shouldn't add trailing gap before the thumb strip */
#bolCard .btn-submit,
#podCard .btn-submit { margin-bottom: 14px; }

/* ===========================================================================
 * SECONDARY de-emphasis: mini done-indicators, collapsed POD details,
 * smaller signature card. Keeps everything functional but visually quiet.
 * ========================================================================= */
.checklist-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.82rem;
  opacity: 0.85;
}

.pod-details {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}
.pod-details > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
  list-style: revert;
  padding: 4px 0;
}
.pod-details[open] > summary { margin-bottom: 6px; }

/* Signature card pulled down in visual weight (smaller heading + pad). */
.sig-card-secondary > h3 {
  font-size: 1rem;
  opacity: 0.85;
}

/* ===========================================================================
 * SIMPLE SCANNER (gl2-*)  ·  added 2026-06-27
 * The pared-down CamScanner-style flow: photo -> square -> whiten -> PDF ->
 * label (BOL/POD/MISC). Big, bold, high-contrast for older / dyslexic drivers.
 * Self-contained; does NOT touch the legacy .gl-* HUD classes above.
 * ========================================================================= */
.gl2-scan{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column;
  background:#0d1512; color:#e8f1ec;
  font-family:inherit;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.gl2-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #1f2c25;
}
.gl2-title{ font-size:20px; font-weight:800; letter-spacing:.2px; }
.gl2-close{
  appearance:none; border:0; background:#1a241f; color:#cfe5da;
  width:42px; height:42px; border-radius:12px; font-size:20px; line-height:1;
}
.gl2-close:active{ background:#243029; }

.gl2-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.gl2-hint{ font-size:16px; color:#9fb6aa; margin:2px 0 16px; line-height:1.4; }

/* --- three views (capture / shape / review) 2026-06-27 --- */
.gl2-view-capture, .gl2-view-shape, .gl2-view-review{
  flex:1; min-height:0; display:flex; flex-direction:column; padding:18px;
}
.gl2-view-review{ overflow-y:auto; }
.gl2-view-capture{ align-items:center; justify-content:center; gap:22px; text-align:center; }
.gl2-shoot{ width:100%; max-width:420px; }
/* shape stage: the photo + draggable corner handles */
.gl2-shape-stage{ flex:1; min-height:0; position:relative; margin:6px 0 12px; touch-action:none; }
.gl2-shape-photo{ position:absolute; }
.gl2-shape-lines{ position:absolute; touch-action:none; }
.gl2-handle{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  background:rgba(39,224,106,0.92); border:3px solid #fff; box-shadow:0 1px 7px rgba(0,0,0,.55);
  touch-action:none; z-index:3;
}
.gl2-shape-btns{ display:flex; gap:12px; }
.gl2-shape-btns .gl2-btn{ flex:1; }

.gl2-strip{ display:flex; flex-wrap:wrap; gap:12px; }
.gl2-thumb{
  position:relative; width:108px; height:140px; border-radius:12px; overflow:hidden;
  background:#10181400; border:2px solid #27e06a; box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.gl2-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; background:#fff; }
.gl2-thumb-num{
  position:absolute; left:6px; top:6px; min-width:22px; height:22px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  background:#27e06a; color:#06140c; font-weight:800; font-size:13px; border-radius:11px;
}
.gl2-thumb-del{
  position:absolute; right:6px; top:6px; width:28px; height:28px; border:0; border-radius:14px;
  background:rgba(8,12,10,.82); color:#fff; font-size:15px; line-height:1;
}

.gl2-foot{ padding:14px 18px calc(14px + env(safe-area-inset-bottom,0)); border-top:1px solid #1f2c25; }
.gl2-caprow{ display:flex; flex-direction:column; gap:12px; }

.gl2-btn{
  appearance:none; border:0; border-radius:16px; font-size:19px; font-weight:800;
  padding:18px 16px; width:100%; color:#06140c; background:#27e06a;
}
.gl2-btn:active{ transform:translateY(1px); }
.gl2-btn-primary{ background:#27e06a; }
.gl2-btn-add{ background:#1c2a22; color:#bfe9cf; border:2px solid #2f4a3a; }
.gl2-btn-done{ background:#ffffff; color:#06140c; }
.gl2-btn-back{ background:transparent; color:#9fb6aa; font-weight:700; padding:14px; }

/* Label step */
.gl2-labels{ display:flex; flex-direction:column; gap:14px; }
.gl2-label-lede{ font-size:18px; font-weight:700; text-align:center; color:#e8f1ec; }
.gl2-label-row{ display:flex; gap:12px; }
.gl2-label-btn{
  flex:1; appearance:none; border:0; border-radius:16px; padding:26px 8px;
  font-size:22px; font-weight:900; letter-spacing:.5px; color:#06140c;
}
.gl2-label-btn:active{ transform:translateY(1px); }
.gl2-bol{ background:#27e06a; }     /* pickup / loading */
.gl2-pod{ background:#4fc3f7; }     /* delivery */
.gl2-misc{ background:#ffd24a; }    /* anything else */

/* Busy veil */
.gl2-busy{
  position:absolute; inset:0; display:none; flex-direction:column; gap:16px;
  align-items:center; justify-content:center; background:rgba(8,12,10,.82); z-index:5;
}
.gl2-busy.show{ display:flex; }
.gl2-busy-txt{ font-size:18px; font-weight:800; color:#e8f1ec; }
/* progress bar (replaces the spinner) — a moving bar reads as "almost done" */
.gl2-prog{ width:78%; max-width:360px; height:12px; border-radius:7px; background:#1c2a22; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.gl2-prog-fill{ height:100%; width:8%; border-radius:7px; background:linear-gradient(90deg,#27e06a,#6cf09a); transition:width .35s ease-out; }
.gl2-spin{
  width:46px; height:46px; border-radius:50%;
  border:5px solid #1f2c25; border-top-color:#27e06a; animation:gl2spin .8s linear infinite;
}
@keyframes gl2spin{ to{ transform:rotate(360deg); } }

/* --- merged one-screen flow (2026-06-27): guessed label + add-page tile --- */
/* The auto-guessed label gets a bright ring + slight lift so the driver sees the
   suggestion at a glance; tapping any label still sends it. */
.gl2-label-btn.is-picked{
  box-shadow:0 0 0 3px #0d1512, 0 0 0 6px #ffffff;
  transform:translateY(-2px) scale(1.03);
}
/* "＋ add page" tile sits at the end of the thumbnail strip — same size as a thumb. */
.gl2-add-tile{
  display:flex; align-items:center; justify-content:center;
  font-size:46px; font-weight:300; color:#27e06a;
  background:#10181433; border:2px dashed #2f4a3a; box-shadow:none;
}
.gl2-add-tile:active{ background:#162019; }