/* EnsureLoc document scanner — frontend only. No backend/API changes.
   2026-09-09 consolidation: single mobile-first source of truth.
   Replaces six stacked max-width override blocks (640px/390px repeated
   across five separate 2026-09-08 patches) that were fighting each other
   for scan-dialog row heights, canvas min-height and button sizing.
   Same class names/IDs as before — markup and document-scanner.js untouched. */

/* ---------- Modal shell (mobile-first: full-screen) ---------- */
.scan-modal[hidden]{display:none!important}
.scan-modal{
  position:fixed;inset:0;z-index:10000;
  background:#fff;
  display:flex;overscroll-behavior:contain;
}
.scan-dialog{
  width:100%;
  height:100dvh;
  display:grid;
  /* head / canvas(grows) / tools / mode / pages / actions */
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto;
  gap:5px;
  padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
          calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  overflow:hidden;
  background:#fff;
}

/* ---------- Header ---------- */
.scan-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px}
.scan-head>div{display:flex;flex-direction:column;min-width:0}
.scan-head strong{font-size:1rem;line-height:1.15}
.scan-head span{font-size:.78rem;color:#667085}
.scan-close{
  border:0;background:transparent;color:#344054;font-size:1.6rem;line-height:1;
  cursor:pointer;padding:0 8px;min-width:44px;min-height:44px;flex:0 0 auto;
}

/* ---------- Help text: overlay so it does not consume viewport height ---------- */
.scan-help{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:2;
  margin:0;max-width:92%;padding:5px 10px;border-radius:999px;
  color:#fff;background:rgba(16,24,40,.72);font-size:.76rem;line-height:1.2;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}

/* ---------- Document viewport — the primary interface, gets the space ---------- */
.scan-canvas-wrap{
  background:#101828;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  min-height:0;overflow:hidden;touch-action:none;position:relative;
  user-select:none;-webkit-user-select:none;
}
.scan-canvas-wrap canvas{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;touch-action:none;cursor:default;
}

/* ---------- Review tools: Rotate / Retake ---------- */
.scan-review-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.scan-review-tools .btn{
  width:100%;min-width:0;min-height:36px;height:36px;
  padding:5px 6px;font-size:.8rem;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Scan style (mode) picker ---------- */
.scan-mode-group{display:grid;grid-template-columns:1fr;gap:4px}
.scan-mode-label{font-weight:700;color:#344054;font-size:.76rem}
.scan-mode-buttons{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #cfd6df;border-radius:9px;overflow:hidden;background:#f8fafc;
}
.scan-mode-btn{
  appearance:none;border:0;border-right:1px solid #cfd6df;background:#f8fafc;color:#344054;
  min-height:34px;padding:4px 4px;font:inherit;font-size:.78rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.scan-mode-btn:last-child{border-right:0}
.scan-mode-btn.is-active{background:#0f766e;color:#fff}
.scan-mode-btn:focus-visible{outline:3px solid rgba(15,118,110,.25);outline-offset:-3px;position:relative;z-index:1}
.scan-mode-select{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

/* ---------- Multi-page thumbnail strip ---------- */
.scan-preview-row{
  display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  min-height:0;max-height:46px;padding:1px 0;
}
.scan-preview-row:empty{display:none}
.scan-page-chip{
  position:relative;display:flex;align-items:center;gap:5px;
  border:1px solid #d0d5dd;border-radius:8px;padding:3px 6px;
  font-size:.72rem;background:#f9fafb;flex:0 0 auto;
}
.scan-page-chip img{width:28px;height:36px;object-fit:cover;border-radius:4px;display:block}
.scan-page-controls{display:inline-flex;align-items:center;gap:2px;margin-left:2px}
.scan-page-controls button{
  appearance:none;border:1px solid #d0d5dd;background:#fff;color:#344054;border-radius:6px;
  min-width:26px;width:26px;height:26px;padding:0;font-size:.9rem;line-height:1;cursor:pointer;
}
.scan-page-controls button:disabled{opacity:.35;cursor:default}
.scan-page-controls button[data-page-delete]{color:#b42318}

/* ---------- Primary actions ---------- */
.scan-actions,.scan-review-actions{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;
}
.scan-actions .btn,.scan-review-actions .btn{
  width:100%;min-width:0;min-height:44px;height:44px;
  padding:6px 8px;font-size:.86rem;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Corner magnifier (loupe) ---------- */
.scan-crop-loupe{
  position:fixed;z-index:10040;width:180px;height:180px;border-radius:50%;
  border:3px solid #fff;box-shadow:0 4px 20px rgba(0,0,0,.38),0 0 0 2px #0aa47d;
  background:#fff;display:none;pointer-events:none;
}
.scan-crop-loupe.is-visible{display:block}

/* ---------- Camera capture overlay (built by document-scanner.js) ---------- */
.scan-camera{
  position:fixed;inset:0;z-index:10020;background:#050b14;color:#fff;
  display:flex;align-items:center;justify-content:center;overscroll-behavior:contain;
}
.scan-camera-shell{
  width:100%;height:100dvh;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:#08111e;overflow:hidden;
}
.scan-camera-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;font-size:1rem;
}
.scan-camera-close{
  appearance:none;border:0;background:transparent;color:#fff;font-size:1.7rem;line-height:1;
  min-width:44px;min-height:44px;cursor:pointer;
}
.scan-camera-stage{
  position:relative;min-height:0;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;
}
.scan-camera-stage video{width:100%;height:100%;object-fit:cover;display:block}
.scan-camera-guide{
  position:absolute;inset:6% 5%;border:2px solid rgba(255,255,255,.72);border-radius:12px;
  box-shadow:0 0 0 999px rgba(0,0,0,.15);pointer-events:none;
}
.scan-camera-status{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:90%;
  padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.62);
  font-size:.82rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scan-camera-controls{
  display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#08111e;
}
.scan-camera-controls .btn{
  min-width:0;min-height:44px;color:#fff;border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);font-size:.8rem;padding-left:6px;padding-right:6px;
}
.scan-shutter{
  justify-self:center;width:62px;height:62px;border-radius:50%;border:4px solid #fff;
  background:transparent;padding:5px;cursor:pointer;
}
.scan-shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#fff}

/* ---------- Fallback for older iOS without dynamic viewport units ---------- */
@supports not (height:100dvh){
  .scan-dialog{height:100vh}
  .scan-camera-shell{height:100vh}
}


/* ---------- Phone review: document is the dominant control ---------- */
@media(max-width:640px){
  .scan-dialog{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:calc(6px + env(safe-area-inset-bottom));}
  .scan-head{min-height:32px}
  .scan-head strong{font-size:.96rem}
  .scan-close{min-width:40px;min-height:40px}
  .scan-mode-group{gap:2px}
  .scan-mode-label{display:none}
  .scan-review-tools{gap:5px}
  .scan-actions,.scan-review-actions{gap:6px}
}

/* ---------- Small phones: trim, don't restructure ---------- */
@media(max-width:390px){
  .scan-dialog{padding-left:8px;padding-right:8px;gap:5px}
  .scan-help{font-size:.72rem;top:6px;max-width:94%}
  .scan-review-tools .btn{font-size:.76rem;padding-left:4px;padding-right:4px}
  .scan-mode-btn{font-size:.73rem;padding-left:3px;padding-right:3px}
  .scan-actions .btn,.scan-review-actions .btn{font-size:.8rem}
  .scan-camera-guide{inset:5% 4%}
  .scan-camera-controls{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
  .scan-shutter{width:56px;height:56px}
}

/* ---------- Tablet and up: centered card instead of full-bleed ---------- */
@media(min-width:641px){
  .scan-modal{align-items:center;justify-content:center;background:rgba(7,18,34,.86);padding:16px}
  .scan-dialog{
    width:min(94vw,760px);height:min(92dvh,860px);
    border-radius:16px;padding:18px;gap:10px;
    box-shadow:0 24px 80px rgba(0,0,0,.35);
  }
  .scan-head strong{font-size:1.2rem}
  .scan-head span{font-size:.86rem}
  .scan-help{font-size:.84rem;top:10px}
  .scan-review-tools .btn{min-height:44px;height:44px;font-size:.9rem}
  .scan-mode-btn{min-height:42px;font-size:.86rem}
  .scan-preview-row{max-height:64px}
  .scan-page-chip img{width:38px;height:48px}
  .scan-actions .btn,.scan-review-actions .btn{min-height:48px;height:48px;font-size:.94rem}
  .scan-camera-shell{width:min(100vw,760px);height:min(100dvh,860px);border-radius:16px}
}