/* ==========================================================================
   QuickPass Passport Photo Maker — v2 Production Stylesheet
   Mobile-first • Government trust • Modern SaaS
   ========================================================================== */

/* Inter is loaded via <link rel="preconnect"> + <link rel="stylesheet"> in index.php.
   Do NOT re-add an @import here: it creates a blocking request chain (the font is only
   discovered after this stylesheet is parsed) and duplicates the <link> request.
   No italic face is used anywhere in this sheet, so the ital axis is not required. */

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  --blue-900: #0c1f4a;
  --blue-800: #12294D;
  --blue-700: #1B3A6B;
  --blue-600: #24487F;
  --blue-500: #3D6AA8;
  --blue-100: #DCE5F2;
  --blue-50:  #EEF3FA;

  --green-700: #15803d;
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;

  --amber-700: #b45309;
  --amber-100: #fef3c7;

  --red-700:   #b91c1c;
  --red-100:   #fee2e2;
  --red-50:    #fef2f2;

  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;

  --white: #ffffff;

  /* Semantic aliases */
  --color-primary:        var(--blue-700);
  --color-primary-hover:  var(--blue-800);
  --color-primary-light:  var(--blue-50);
  --color-success:        var(--green-600);
  --color-success-light:  var(--green-50);
  --color-warning:        var(--amber-700);
  --color-warning-light:  var(--amber-100);
  --color-error:          var(--red-700);
  --color-error-light:    var(--red-50);
  --color-surface:        var(--white);
  --color-bg:             var(--slate-50);
  --color-border:         var(--slate-200);
  --color-text:           var(--slate-900);
  --color-text-2:         var(--slate-700);
  --color-text-muted:     var(--slate-400);

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Spacing */
  --s1:  0.25rem;  --s2:  0.5rem;  --s3:  0.75rem; --s4:  1rem;
  --s5:  1.25rem; --s6:  1.5rem;  --s8:  2rem;    --s10: 2.5rem;
  --s12: 3rem;    --s16: 4rem;    --s20: 5rem;

  /* Radii */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 16px;
  --r-xl: 24px; --r-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,.1),  0 8px 10px -6px rgba(0,0,0,.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,.09);
  --shadow-btn:  0 1px 2px rgba(29,78,216,.25);
  --shadow-btn-hover: 0 4px 14px rgba(29,78,216,.35);

  /* Motion */
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --fast:  150ms;
  --base:  220ms;
  --slow:  350ms;

  /* Layout */
  --max-w: 1080px;
  --tool-w: 660px;
  --header-h: 60px;
}

/* --------------------------------------------------------------------------
   RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas { display: block; max-width: 100%; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--r-sm); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s5); }
.tool-container { width: 100%; max-width: var(--tool-w); margin: 0 auto; padding: 0 var(--s5); }

/* --------------------------------------------------------------------------
   Removed legacy header styles 
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  background: var(--white);
  position: relative; overflow: hidden;
  padding: var(--s6) 0 var(--s8);
  color: var(--color-text); text-align: center;
}

.hero::before {
  content: '';
  position: absolute; width: 700px; height: 700px;
  top: -300px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(249,115,22,.12), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-content { position: relative; z-index: 1; }

.hero-layout {
  display: grid; gap: var(--s12); align-items: center;
}
@media (min-width: 1024px) {
  .hero { text-align: left; }
  .hero-layout { grid-template-columns: 1.1fr 580px; gap: var(--s16); }
  .hero-subtitle { margin: 0 0 var(--s5); }
  .step-wizard { justify-content: flex-start; margin: 0; }
}


.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: 6px 14px; border-radius: var(--r-full); margin-bottom: var(--s4);
}
.hero-title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.15;
  margin-bottom: var(--s4); color: var(--slate-900);
}
.hero-subtitle {
  font-size: 1.05rem; font-weight: 400;
  color: var(--slate-600); max-width: 540px;
  margin: 0 auto var(--s5); line-height: 1.5;
}

.hero-trust {
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s6);
}
.trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 500; color: var(--slate-700);
}
.trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); flex-shrink: 0; }

.hero-visual-wrapper {
  display: flex; flex-direction: column; gap: var(--s2);
}
.hero-visual-header {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  padding: 0 0 10px; height: 110px;
}
.hero-visual-header img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.hero-visual-header .img-before {
  width: 90px; transform: rotate(-4deg);
}
.hero-visual-header .img-after {
  width: 110px; transform: rotate(2deg);
}
.hero-visual-arrow {
  flex-shrink: 0; width: 30px; height: auto;
}

/* --------------------------------------------------------------------------
   STEP WIZARD
   -------------------------------------------------------------------------- */
.step-wizard {
  display: flex; align-items: center;
  justify-content: center; gap: 0;
  max-width: 560px; width: 100%; margin: 0 auto;
}

.step-item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s2); flex: 1; position: relative;
}
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px; left: calc(50% + 18px);
  width: calc(100% - 36px); height: 2px;
  background: var(--slate-200);
  transition: background var(--base) var(--ease);
}
.step-item.completed:not(:last-child)::after { background: rgba(74,222,128,.4); }
.step-dot {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 700;
  background: var(--slate-100);
  border: 2px solid var(--slate-200);
  color: var(--slate-400);
  position: relative; z-index: 1;
  transition: all var(--base) var(--ease);
}
.step-item.active .step-dot {
  background: var(--blue-600); border-color: var(--blue-200);
  color: #fff; box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
.step-item.completed .step-dot {
  background: var(--green-600); border-color: #4ade80;
  color: #fff; font-size: .875rem;
}
.step-label {
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  color: var(--slate-400); white-space: nowrap;
  transition: color var(--base) var(--ease);
}
.step-item.active .step-label { color: var(--blue-700); }
.step-item.completed .step-label { color: var(--slate-600); }

/* --------------------------------------------------------------------------
   TOOL CARD
   -------------------------------------------------------------------------- */
.tool-lift {
  position: relative; z-index: 10;
}
.tool-card {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--slate-200);
  box-shadow: 0 15px 35px -5px rgba(0,0,0,0.08);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  /* Mobile: card grows freely with content — no height clamp, no internal scroll.
     Desktop (>=1024px): the max-height + overflow is restored via media query below. */
}

.tool-header {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--slate-50);
}
.tool-header-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.tool-header-doc {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary);
}
.tool-body { padding: var(--s6); }
/* Mobile: pane grows with content (no internal scroll — page itself scrolls) */
.state-pane {
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Upload pane needs a comfortable minimum height */
#paneUpload.state-pane {
  min-height: 320px;
}


/* --------------------------------------------------------------------------
   DOCUMENT SELECTOR (Phase 5)
   -------------------------------------------------------------------------- */
.doc-selector { display: flex; flex-direction: column; gap: var(--s5); }
.selector-row { display: flex; flex-direction: column; gap: var(--s2); }
.selector-label {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2);
  letter-spacing: -.01em;
}
.form-select {
  width: 100%; padding: 11px var(--s4);
  padding-right: var(--s10);
  font-family: var(--font); font-size: var(--text-base); font-weight: 500;
  color: var(--color-text); background: var(--color-bg);
  border: 1.5px solid var(--color-border); border-radius: var(--r-md);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.form-select:hover { border-color: var(--slate-300); }
.form-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }

/* Document type chips */
.doc-type-grid {
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.doc-chip {
  padding: 8px 14px;
  font-family: var(--font); font-size: var(--text-sm); font-weight: 600;
  color: var(--slate-600); background: var(--color-bg);
  border: 1.5px solid var(--color-border); border-radius: var(--r-full);
  cursor: pointer; transition: all var(--fast) var(--ease);
  white-space: nowrap;
}
.doc-chip:hover { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-50); }
.doc-chip.active {
  background: var(--blue-700); border-color: var(--blue-700);
  color: #fff; box-shadow: var(--shadow-btn);
}

/* Specs strip */
.specs-strip {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; padding: var(--s3) var(--s4);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
}
.specs-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600; color: var(--blue-800);
}
.specs-pill-icon { color: var(--blue-600); font-style: normal; }

/* Continue button */
.btn-continue {
  width: 100%; padding: 14px var(--s6);
  font-family: var(--font); font-size: var(--text-base); font-weight: 700;
  color: #fff; background: var(--blue-700);
  border: none; border-radius: var(--r-md);
  box-shadow: var(--shadow-btn);
  transition: all var(--fast) var(--ease);
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
}
.btn-continue:hover { background: var(--blue-800); box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }
.btn-continue:active { transform: translateY(0); box-shadow: var(--shadow-btn); }

/* --------------------------------------------------------------------------
   UPLOAD ZONE (Phase 2 – Step 2)
   -------------------------------------------------------------------------- */
.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s12) var(--s8);
  border: 2px dashed var(--color-border);
  border-radius: var(--r-lg); cursor: pointer;
  text-align: center; position: relative;
  background: var(--slate-50); min-height: 260px;
  transition: all var(--base) var(--ease);
}
.upload-zone:hover, .upload-zone.drag-active {
  border-color: var(--blue-500); background: var(--blue-50);
}
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon-ring {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  background: var(--blue-50); border: 2px solid var(--blue-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s5); font-size: 2rem;
  transition: transform var(--base) var(--ease), background var(--base) var(--ease);
}
.upload-zone:hover .upload-icon-ring { transform: translateY(-3px); background: var(--blue-100); }
.upload-zone.drag-active .upload-icon-ring { transform: scale(1.1); }
.upload-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--s2); letter-spacing: -.02em; }
.upload-sub   { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--s4); }
.upload-formats { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.format-tag {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate-600); background: var(--white);
  border: 1px solid var(--color-border); padding: 3px 8px; border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   EDITOR WORKSPACE (Phase 3 – Step 3)
   -------------------------------------------------------------------------- */
.editor-workspace { display: flex; flex-direction: column; gap: var(--s4); }
.canvas-shell {
  position: relative; width: 100%;
  background: var(--slate-100);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  /* Aspect ratio is set dynamically */
  min-height: 280px;
}
#photoCanvas { width: 100%; height: 100%; cursor: grab; touch-action: none; will-change: transform; }
#photoCanvas:active { cursor: grabbing; }
.guide-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .45; }
.canvas-badge {
  position: absolute; bottom: var(--s3); right: var(--s3);
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
}
.zoom-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--color-bg); border-radius: var(--r-md);
  border: 1px solid var(--color-border);
}
.zoom-icon { font-size: var(--text-sm); color: var(--color-text-muted); flex-shrink: 0; }
.slider {
  flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
  background: var(--color-border); border-radius: 3px; outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px;
  border-radius: var(--r-full); background: var(--blue-700);
  border: 3px solid var(--white); box-shadow: var(--shadow-md); cursor: pointer;
  transition: transform var(--fast) var(--ease);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--blue-700); border: 3px solid var(--white); cursor: pointer;
}
.drag-hint {
  font-size: var(--text-xs); color: var(--color-text-muted);
  text-align: center; line-height: 1.4;
}

/* --------------------------------------------------------------------------
   COMPLIANCE PANEL (Phase 6)
   -------------------------------------------------------------------------- */
.compliance-panel { border-radius: var(--r-lg); overflow: hidden; }
.compliance-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.compliance-header-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text-2);
  display: flex; align-items: center; gap: var(--s2);
}
.compliance-badge-pass {
  font-size: var(--text-xs); font-weight: 700;
  color: var(--green-700); background: var(--green-100);
  padding: 3px 10px; border-radius: var(--r-full); border: 1px solid #bbf7d0;
}
.compliance-badge-warn { color: var(--amber-700); background: var(--amber-100); }
.compliance-badge-fail { color: var(--red-700); background: var(--red-100); }
.compliance-body {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--r-md) var(--r-md);
  padding: var(--s4) var(--s5);
}
.compliance-check {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--slate-100);
}
.compliance-check:last-child { border-bottom: none; }
.check-icon {
  width: 24px; height: 24px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .75rem; font-weight: 700;
}
.check-icon.pass { background: var(--green-100); color: var(--green-700); }
.check-icon.fail { background: var(--red-100); color: var(--red-700); }
.check-icon.warn { background: var(--amber-100); color: var(--amber-700); }
.check-icon.pending { background: var(--slate-100); color: var(--slate-400); }
.check-text { flex: 1; min-width: 0; }
.check-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); line-height: 1.3; }
.check-detail { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }
.check-action {
  display: inline-block; margin-top: var(--s1);
  font-size: var(--text-xs); font-weight: 700;
  color: var(--blue-700); background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: 2px 8px; border-radius: var(--r-sm);
}

/* Processing overlay (Phase 7) */
.processing-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s5); padding: var(--s8);
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.processing-spinner {
  width: 48px; height: 48px; border-radius: var(--r-full);
  border: 3px solid var(--blue-100); border-top-color: var(--blue-700);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing-title { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.processing-checklist { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.pcheck {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--text-sm); font-weight: 500; color: var(--slate-400);
  transition: color var(--base) var(--ease);
}
.pcheck.done { color: var(--color-text); }
.pcheck-icon { width: 20px; height: 20px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.pcheck-icon.pending-icon { background: var(--slate-100); color: transparent; }
.pcheck-icon.spin-icon { background: var(--blue-50); color: transparent; position: relative; }
.pcheck-icon.spin-icon::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--blue-200); border-top-color: var(--blue-700); animation: spin .7s linear infinite; }
.pcheck-icon.done-icon { background: var(--green-100); color: var(--green-700); }

/* --------------------------------------------------------------------------
   EXPORT / DOWNLOAD STATE (Phase 8)
   -------------------------------------------------------------------------- */
.export-panel { padding: var(--s6); }
.export-ready {
  text-align: center; padding: var(--s4) 0 var(--s2);
}
.export-tick {
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--green-50); border: 2px solid #86efac;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s3); font-size: 1.4rem;
}
.export-headline { font-size: var(--text-lg); font-weight: 800; color: var(--color-text); letter-spacing: -.02em; margin-bottom: 4px; }
.export-subline  { font-size: var(--text-xs); color: var(--color-text-muted); }
.export-preview {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s3); margin: var(--s3) 0;
}
.preview-block { text-align: center; }
.preview-thumb {
  width: 100%; aspect-ratio: 4/3;
  background: var(--slate-100); border-radius: var(--r-md);
  border: 1px solid var(--color-border); overflow: hidden;
  margin-bottom: var(--s2); display: flex; align-items: center; justify-content: center;
}
.preview-thumb img, .preview-thumb canvas { width: 100%; height: 100%; object-fit: cover; }
.preview-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.export-actions { display: flex; flex-direction: column; gap: var(--s2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 13px var(--s6);
  font-family: var(--font); font-size: var(--text-base); font-weight: 700;
  border-radius: var(--r-md); border: none; text-decoration: none;
  white-space: nowrap; line-height: 1.4; cursor: pointer;
  transition: all var(--fast) var(--ease); position: relative;
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-w { width: 100%; }
.btn-primary { background: var(--blue-700); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover:not(:disabled) { background: var(--blue-800); box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-outline { background: var(--white); color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn-outline:hover:not(:disabled) { border-color: var(--slate-300); background: var(--slate-50); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.btn-ghost:hover { color: var(--color-text); background: var(--slate-100); }
.btn-icon-l { font-size: 1.1em; }

/* --------------------------------------------------------------------------
   TRUST SECTION (Phase 9)
   -------------------------------------------------------------------------- */
.trust-section { padding: var(--s12) 0; }
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
}
.trust-card {
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease);
}
.trust-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.trust-card-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.trust-card-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.trust-card-desc  { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   SECTION SCAFFOLD
   -------------------------------------------------------------------------- */
.page-section { padding: var(--s12) 0; }
.page-section + .page-section { padding-top: 0; }
.section-head { text-align: center; margin-bottom: var(--s8); }
.section-title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 800; color: var(--color-text); letter-spacing: -.03em; line-height: 1.2;
  margin-bottom: var(--s2);
}
.section-sub { font-size: var(--text-base); color: var(--color-text-muted); max-width: 560px; margin: 0 auto; }

/* Specs Table */
.specs-table-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: var(--s4) var(--s5); text-align: left; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }
.specs-table th { font-weight: 600; color: var(--color-text-muted); background: var(--slate-50); width: 40%; }
.specs-table td { font-weight: 500; color: var(--color-text); }

/* How-To */
.howto-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.howto-card {
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--s5);
  display: flex; gap: var(--s4); box-shadow: var(--shadow-card);
  transition: all var(--base) var(--ease);
}
.howto-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.howto-num {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: var(--r-md); background: var(--blue-50);
  color: var(--blue-700); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); font-weight: 800;
}
.howto-card h3 { font-size: var(--text-base); font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.howto-card p  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }

/* FAQ Accordion */
.accordion { display: flex; flex-direction: column; gap: var(--s3); }
.accordion-item {
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color var(--fast) var(--ease);
}
.accordion-item:hover { border-color: var(--slate-300); }
.accordion-item.active { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-100), var(--shadow-md); }
.accordion-header {
  padding: var(--s4) var(--s5); cursor: pointer;
  font-size: var(--text-base); font-weight: 600; color: var(--color-text);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  user-select: none; margin: 0; transition: background var(--fast) var(--ease);
}
.accordion-header:hover { background: var(--slate-50); }
.accordion-header::after {
  content: '+'; font-size: var(--text-xl); font-weight: 400;
  color: var(--color-text-muted); flex-shrink: 0; transition: transform var(--base) var(--ease);
}
.accordion-item.active .accordion-header::after { content: '−'; color: var(--blue-700); transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--slow) var(--ease); }
.accordion-item.active .accordion-content { max-height: 400px; }
.accordion-body { padding: 0 var(--s5) var(--s5); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; }

/* Country Links Grid */
.countries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); list-style: none; }
.countries-grid a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); background: var(--white);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text);
  transition: all var(--fast) var(--ease); box-shadow: var(--shadow-sm);
}
.countries-grid a::before { content: '→'; color: var(--color-text-muted); transition: color var(--fast) var(--ease); }
.countries-grid a:hover { border-color: var(--blue-500); color: var(--blue-700); background: var(--blue-50); }
.countries-grid a:hover::before { color: var(--blue-700); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--s8) 0; text-align: center;
  border-top: 1px solid var(--color-border); background: var(--white);
}
.footer-text { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   STATE CONTAINERS
   -------------------------------------------------------------------------- */
.state-pane { display: none; }
.state-pane.active-state { display: block; animation: fadeUp var(--slow) var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */
.app-toast {
  position: fixed; top: var(--s5); left: 50%; transform: translateX(-50%);
  background: var(--slate-800); color: #fff;
  padding: 12px var(--s6); border-radius: var(--r-md);
  font-family: var(--font); font-weight: 500; font-size: var(--text-sm);
  z-index: 9999; box-shadow: var(--shadow-xl);
  animation: toastIn var(--base) var(--ease);
  white-space: nowrap; max-width: calc(100vw - 40px);
}
.app-toast.error { background: #dc2626; }
.app-toast.success { background: var(--green-600); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* --------------------------------------------------------------------------
   RESPONSIVE — TABLET+
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .howto-grid { grid-template-columns: repeat(2, 1fr); }
  .export-preview { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .tool-body { padding: var(--s8); }
  .hero { padding: var(--s16) 0 calc(var(--s20) + 60px); }
  .canvas-shell { min-height: 280px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop: restore the viewport-fitted card with internal scroll */
@media (min-width: 1024px) {
  .tool-card {
    min-height: 560px;
    max-height: calc(100dvh - var(--sticky-header-h, 80px) - 24px);
  }
  .state-pane {
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 480px;
  }
  #paneUpload.state-pane {
    min-height: 520px;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — MOBILE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  :root {
    --s8:  1.5rem; --s10: 2rem;
    --s12: 2.5rem; --s16: 3rem; --s20: 4rem;
  }
  

  
  .hero { padding: var(--s8) 0 calc(var(--s12) + 50px); }
.hero-title { font-size: var(--text-2xl); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-trust { gap: var(--s3); }
  .trust-item { font-size: var(--text-xs); }
  .step-label { font-size: 9px; }
  .step-dot { width: 28px; height: 28px; font-size: var(--text-xs); }
  .tool-body { padding: var(--s5); }
  .tool-card { border-radius: var(--r-lg); }
  .upload-zone { padding: var(--s8) var(--s5); min-height: 220px; }
  .upload-icon-ring { width: 56px; height: 56px; }
  .canvas-shell { min-height: 240px; }
  .export-preview { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .howto-card { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .hero, .tool-lift, .site-footer { display: none; }
}


.pp-guides {
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
  padding: 64px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1f2937;
  contain: layout style;
}

.pp-guides__container {
  max-width: 1200px;
  margin: 0 auto;
}

.pp-guides__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.pp-guides__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ea580c;
  background: #fff1e6;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.pp-guides__title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.pp-guides__intro {
  font-size: 16px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

.pp-guides__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.pp-card {
  display: flex;
  min-height: 100%;
}

.pp-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #f1e6da;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
  isolation: isolate;
}

.pp-card__link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #f97316, #ea580c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 1;
}

.pp-card__link:hover,
.pp-card__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.12);
  border-color: #fed7aa;
}

.pp-card__link:hover::before,
.pp-card__link:focus-visible::before {
  transform: scaleX(1);
}

.pp-card__link:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 3px;
}

.pp-card__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 24px;
  background: #fff7ed;
  border-radius: 10px;
  margin-bottom: 16px;
  line-height: 1;
}

.pp-card__title {
  font-size: 17px;
  font-weight: 650;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.35;
}

.pp-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
  margin: 0 0 20px;
  flex-grow: 1;
}

.pp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #ea580c;
  margin-top: auto;
}

.pp-card__cta span {
  transition: transform 0.2s ease;
  display: inline-block;
}

.pp-card__link:hover .pp-card__cta span,
.pp-card__link:focus-visible .pp-card__cta span {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .pp-guides {
    padding: 48px 16px;
  }

  .pp-guides__header {
    margin-bottom: 32px;
  }

  .pp-guides__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pp-card__link {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-card__link,
  .pp-card__link::before,
  .pp-card__cta span {
    transition: none;
  }

  .pp-card__link:hover,
  .pp-card__link:focus-visible {
    transform: none;
  }
}


.country-hub-section {
    padding: 80px 20px;
    background: #f8fafc;
}

.country-hub-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 2rem;
    margin-bottom: 12px;
    color: #111827;
}

.section-header p {
    color: #6b7280;
    max-width: 700px;
    margin: 0 auto;
}

.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 20px;
}

.country-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.country-card:hover {
    transform: translateY(-4px);
    border-color: #24487F;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.country-card h3 {
    color: #111827;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.country-card span {
    color: #24487F;
    font-weight: 600;
}

.country-hub-cta {
    text-align: center;
    margin-top: 35px;
}

.view-all-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #24487F;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: .25s;
}

.view-all-btn:hover {
    background: #1B3A6B;
}

@media (max-width:768px) {
    .country-hub-section {
        padding: 60px 16px;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }

    .country-grid {
        grid-template-columns: 1fr;
    }
}





/* ==========================================================================
   SPRINT 1A — DESKTOP WORKSPACE LAYOUT
   Layout & information hierarchy only. No engine / export / validator changes.
   Goal: photo + compliance summary + download CTA visible together on desktop;
   detailed metrics collapsed by default; page becomes shorter, not taller.
   ========================================================================== */

/* Two-column workspace. Mobile-first: single column.
   Desktop (>=1024px): photo editor (left) + compliance & download rail (right). */
.workspace-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: start;
}
.ws-stage { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.ws-rail  { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }

@media (min-width: 1024px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); }
  /* Keep summary + CTA beside the photo as the stage grows. */
  .ws-rail { position: sticky; top: var(--s4); }
}

/* --------------------------------------------------------------------------
   COMPLIANCE CARD (compact, status-driven)
   -------------------------------------------------------------------------- */
.compliance-card {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.compliance-card__icon {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: var(--text-lg); font-weight: 800; color: #fff;
  background: var(--slate-400);
}
.compliance-card__body  { min-width: 0; }
.compliance-card__title { font-size: var(--text-base); font-weight: 800; line-height: 1.2; color: var(--color-text); }
.compliance-card__meta  { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-top: 2px; }

.compliance-card.is-pass   { background: var(--green-50);  border-color: var(--green-100); }
.compliance-card.is-pass   .compliance-card__icon  { background: var(--green-600); }
.compliance-card.is-pass   .compliance-card__title { color: var(--green-700); }

.compliance-card.is-adjust { background: var(--amber-100); border-color: var(--amber-100); }
.compliance-card.is-adjust .compliance-card__icon  { background: var(--amber-700); }
.compliance-card.is-adjust .compliance-card__title { color: var(--amber-700); }

.compliance-card.is-fail   { background: var(--red-50);    border-color: var(--red-100); }
.compliance-card.is-fail   .compliance-card__icon  { background: var(--red-700); }
.compliance-card.is-fail   .compliance-card__title { color: var(--red-700); }

/* --------------------------------------------------------------------------
   SUMMARY CHECKS (compact 5-row hierarchy; replaces the verbose metric block)
   -------------------------------------------------------------------------- */
.summary-checks {
  display: flex; flex-direction: column;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.summary-check {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.summary-check:last-child { border-bottom: 0; }
.summary-check__label { flex: 1 1 auto; min-width: 0; }
.summary-check__glyph {
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: 800; color: #fff;
  background: var(--slate-400);
}
.summary-check.ok   .summary-check__glyph { background: var(--green-600); }
.summary-check.warn .summary-check__glyph { background: var(--amber-700); }
.summary-check.bad  .summary-check__glyph { background: var(--red-700); }
.summary-check.bad  { color: var(--red-700); }

/* --------------------------------------------------------------------------
   DETAILED ANALYSIS (collapsed by default — costs zero height until opened)
   -------------------------------------------------------------------------- */
.detail-accordion__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font); font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text-2); cursor: pointer;
}
.detail-accordion__toggle:hover { background: var(--slate-50); }
.detail-accordion__chevron { transition: transform .2s ease; }
.detail-accordion.is-open .detail-accordion__chevron { transform: rotate(180deg); }
.detail-accordion__panel { display: none; margin-top: var(--s3); }
.detail-accordion.is-open .detail-accordion__panel { display: block; }

/* --------------------------------------------------------------------------
   DOWNLOAD CTA STACK (inline in the rail; gated by compliance via [disabled])
   -------------------------------------------------------------------------- */
.cta-stack { display: flex; flex-direction: column; gap: var(--s3); }
.cta-stack .btn:disabled,
.cta-stack .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.cta-hint {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  text-align: center; margin-top: calc(-1 * var(--s1));
}

/* --------------------------------------------------------------------------
   RESPONSIVE — DESKTOP RESULT SCREEN (dedicated 2-column workspace, >=1024px)
   Additive + desktop-scoped: everything is inside this media query, so the
   mobile layout (<1024px) is unchanged. No compliance/crop/export logic touched.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Only the active result/verify pane breaks out of the 660px tool cap, so the
     preview can render large; other panes keep their narrow single column. */
  .tool-container:has(#paneEditor.active-state) { max-width: min(1280px, 94vw); }

  /* Result section -> 2 columns: preview 45% (never below 400px) / actions+analysis 55%. */
  .workspace-grid {
    display: grid;
    grid-template-columns: minmax(400px, 45fr) 55fr;
    gap: var(--s6);
    align-items: start;
  }
  .ws-stage { width: auto; min-width: 0; }

  /* Right column: stacked actions/analysis, kept above the fold while it scrolls. */
  .ws-rail {
    width: auto; min-width: 0;
    display: flex; flex-direction: column; gap: var(--s4);
    position: sticky; top: calc(var(--header-h) + var(--s4));
  }

  /* Preview fills its 45% track (~520-530px at a 1280px pane) and visually dominates. */
  .ws-stage .canvas-shell { width: 100%; }

  /* Reclaim whitespace now that content sits side-by-side. */
  #paneEditor.tool-body { padding: var(--s5); }
  .workspace-grid .editor-workspace { gap: var(--s3); }
}

/* ==========================================================================
   DESKTOP RESULT SCREEN — AUTHORITATIVE OVERRIDE (>=1024px)
   Appended last on purpose: with equal selector specificity, the later rule
   wins, so THIS block is the single source of truth for the desktop result
   layout and supersedes any earlier @media (min-width:1024px) workspace rules.
   CSS ONLY — no HTML / JS / export / crop / validation / detection / background
   logic is touched. Mobile (<1024px) is unaffected (all rules are inside the
   media query; the mobile base .workspace-grid { grid-template-columns: 1fr }
   still applies below 1024px).
   ========================================================================== */
@media (min-width: 1024px) {

  /* Break ONLY the active result/verify pane out of the 660px tool cap. */
  .tool-container:has(#paneEditor.active-state) { max-width: min(1600px, 94vw); }

  /* 60 / 40 grid — photo is the hero, always wider than the rail, never < 440px. */
  .workspace-grid {
    display: grid;
    grid-template-columns: minmax(440px, 60fr) 40fr;
    gap: var(--s6);
    align-items: start;
  }
  .ws-stage { width: auto; min-width: 0; }

  /* Sticky rail — status + download stay in view while scrolling. */
  .ws-rail {
    width: auto; min-width: 0;
    display: flex; flex-direction: column;
    position: sticky;
    top: calc(var(--header-h) + var(--s4));
    gap: var(--s3);
  }

  /* PHOTO HERO — dominant visual element: stronger radius + elevation. */
  .ws-stage .canvas-shell {
    width: 100%;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
  }

  /* RAIL RE-ORDER (visual only via flex `order`; DOM order unchanged, so mobile
     still stacks Status -> Summary -> Detail -> Download):
     Status -> Download -> Summary -> Detailed analysis. */
  .ws-rail > #complianceCard { order: 1; }
  .ws-rail > #ctaContainer   { order: 2; }
  .ws-rail > #summaryChecks  { order: 3; }
  .ws-rail > #detailAnalysis { order: 4; }

  /* COMPACT COMPLIANCE — keep Download above the fold (scoped to .ws-rail). */
  .ws-rail .compliance-card       { padding: var(--s3) var(--s4); }
  .ws-rail .compliance-card__icon { width: 2rem; height: 2rem; font-size: var(--text-base); }
  .ws-rail .summary-checks        { padding: var(--s1) var(--s4); }
  .ws-rail .summary-check         { padding: var(--s2) 0; }

  /* Reclaim whitespace now that content sits side-by-side. */
  #paneEditor.tool-body             { padding: var(--s5); }
  .workspace-grid .editor-workspace { gap: var(--s3); }
}


/* ==========================================================================
   DESKTOP = MOBILE FLOW RESTORE (>=1024px) — presentation only, appended last.
   Collapses the desktop result/verify screen back to the mobile single-column
   wizard: ONE column, capped canvas, NO early/rail download CTA, and the
   "Continue to Download" button restored so the user reaches the dedicated
   Download screen (step 5) with Before/After + approval + checklist + actions.
   CSS ONLY — no JS / engine / validation / crop / export changes. Appended last
   so it wins the cascade over the earlier desktop blocks. Mobile (<1024px) is
   untouched (every rule is inside this media query).
   ========================================================================== */
@media (min-width: 1024px) {

  /* Center a comfortable single column instead of the 1600px "hero" pane. */
  .tool-container,
  .tool-container:has(#paneEditor.active-state) { max-width: 740px; }

  /* Single column, exactly like mobile: undo the 60/40 grid, sticky rail, reorder. */
  .workspace-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .ws-stage { width: 100%; }
  .ws-rail  { position: static; top: auto; width: 100%; }
  .ws-rail > #complianceCard,
  .ws-rail > #summaryChecks,
  .ws-rail > #detailAnalysis,
  .ws-rail > #ctaContainer { order: 0; }

  /* Canvas: capped at 700px, centered, proportional, never taller than viewport.
     #canvasWrapper (id) outranks the earlier .ws-stage .canvas-shell rules. */
  #canvasWrapper {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    max-height: calc(100svh - var(--header-h) - var(--s10));
  }

  /* Downloads belong ONLY on step 5 — remove the early/mock rail CTA on desktop. */
  #paneEditor #ctaContainer { display: none !important; }

  /* Restore the "Continue to Download" button the desktop one-click JS hides
     (its inline display:none loses to this !important stylesheet rule). */
  #paneEditor #btnCropConfirm { display: flex !important; }

  /* Comfortable single-column padding (was reduced for the 2-column layout). */
  #paneEditor.tool-body { padding: var(--s6); }
}


/* ==========================================================================
   DESKTOP CANVAS HEIGHT FIX (>=1024px) — presentation only, appended last.
   Keeps the WHOLE photo frame inside the viewport so guides + compliance +
   Continue are reachable without the canvas eating the screen. The canvas
   scales to fit BOTH max-width:650px AND max-height:70vh at its true bitmap
   aspect ratio, so the SVG guide overlay stays aligned and pointer (drag/zoom)
   mapping is unchanged (gestures use clientX/Y deltas, not the canvas rect).
   object-fit is intentionally NOT used (it would letterbox + misalign guides).
   CSS ONLY — canvas-editor.js, crop, MediaPipe and compliance math are
   untouched (they read the canvas BITMAP, not its CSS size). Mobile unaffected.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Wrapper shrink-wraps + centers the canvas; capped width, no tall min. */
  #canvasWrapper {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 650px;
    min-height: 0;
    margin-inline: auto;
    align-self: center;
  }

  /* Canvas fits within BOTH caps, preserving aspect (overlay stays aligned,
     full photo always visible, never taller than 70vh of the viewport). */
  #canvasWrapper #photoCanvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 650px;
    max-height: 70vh;
  }
}


/* ===== Passport Rules Hub Section ===== */

.rules-hub-section{
    padding:60px 0;
    background:#f8fafc;
    border-top:1px solid #e5e7eb;
}

.rules-hub-section .section-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 40px;
}

.rules-hub-section .section-label{
    display:inline-block;
    padding:6px 14px;
    margin-bottom:14px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#24487F;
    background:#DCE5F2;
    border-radius:50px;
}

.rules-hub-section h2{
    margin:0 0 15px;
    font-size:34px;
    line-height:1.2;
    color:#0f172a;
}

.rules-hub-section p{
    margin:0;
    color:#475569;
    font-size:16px;
    line-height:1.8;
}

.rules-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-top:35px;
}

.rules-grid a{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:16px 18px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    color:#0f172a;
    text-decoration:none;
    font-weight:600;
    transition:.25s ease;
}

.rules-grid a:hover{
    background:#0f172a;
    color:#ffffff;
    border-color:#0f172a;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(15,23,42,.12);
}

.rules-footer{
    text-align:center;
    margin-top:35px;
}

.rules-footer .view-all-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    background:#0f172a;
    color:#ffffff;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
    transition:.25s ease;
}

.rules-footer .view-all-btn:hover{
    background:#1e293b;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(15,23,42,.18);
}

@media (max-width:768px){

    .rules-hub-section{
        padding:45px 0;
    }

    .rules-hub-section h2{
        font-size:28px;
    }

    .rules-grid{
        grid-template-columns:1fr;
    }

}

/* ==========================================================================
   ACCESSIBILITY, MEDIA CONTAINMENT & PRINT
   Appended section — additive only. Every rule below either overrides an
   earlier declaration through normal cascade order or targets markup that
   already exists in index.php. No selector here changes the default desktop
   appearance of the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MEDIA CONTAINMENT — prevents distortion and layout shift
   The base reset sets `img, svg, canvas { max-width: 100% }` but not
   `height: auto`. Any image carrying intrinsic width/height attributes is
   therefore scaled on one axis only and renders squashed. This restores the
   aspect ratio while keeping the attributes doing their CLS-reservation job.
   -------------------------------------------------------------------------- */
img, svg, video {
  height: auto;
}

/* Canvas and preview thumbnails are sized explicitly by the editor — exempt. */
#photoCanvas,
.preview-thumb img,
.preview-thumb canvas,
.guide-overlay {
  height: 100%;
}

/* Figures used for spec diagrams and charts */
figure { margin: 0; }
figcaption {
  font-size: var(--text-xs);
  color: var(--slate-600);
  line-height: 1.55;
}

/* Lazy-loaded images: hold a neutral tint until decode so the section does
   not flash white-on-white while the file streams in. */
img[loading="lazy"] {
  background-color: var(--slate-50);
}

/* --------------------------------------------------------------------------
   WIDE TABLE CONTAINMENT
   `.specs-table-card` uses `overflow: hidden` to clip its rounded corners,
   which also clips any table wider than the card. Multi-column spec and
   comparison tables are unreadable on narrow viewports as a result. Switch
   the clip to a horizontal scroll below the tablet breakpoint and expose the
   scroller to the keyboard so it is reachable without a pointer.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .specs-table-card {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .specs-table {
    min-width: 480px;
  }
}

.specs-table-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   IN-PAGE ANCHOR OFFSET
   `.site-header` is sticky at var(--header-h). Without a scroll margin every
   in-page jump target lands underneath it, hiding the heading the user just
   clicked. Applies to the section ids in index.php (#quick-answer, #visual,
   #specs, #comparison, #child, #printing, #rejections, #faq, #sizes,
   #guides, #sources) and to any future target.
   -------------------------------------------------------------------------- */
:target {
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}
[id] {
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}

/* --------------------------------------------------------------------------
   FOCUS VISIBILITY
   Two controls suppress the focus ring with `outline: none`: the zoom slider
   (no replacement indicator at all) and the country select (replaced by a
   box-shadow that is dropped in forced-colors mode). Restore a real ring for
   keyboard users without altering the mouse-hover appearance.
   -------------------------------------------------------------------------- */
.slider:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--r-full);
}
.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .28), var(--shadow-md);
}
.form-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.upload-zone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-color: var(--blue-500);
  background: var(--blue-50);
}
.doc-chip:focus-visible,
.btn:focus-visible,
.btn-continue:focus-visible,
.accordion-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The file input inside the dropzone is visually transparent and covers the
   whole zone; move its focus ring to the zone itself rather than the invisible
   input, which would otherwise draw a ring with no perceivable owner. */
.upload-zone input[type="file"]:focus-visible {
  outline: none;
}
.upload-zone:has(input[type="file"]:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   TOUCH TARGET SIZE (WCAG 2.5.8)
   `.doc-chip` renders around 33px tall, below the 24x24 minimum with comfortable
   spacing and well below the 44px recommendation. Raise it on coarse pointers
   only, so the desktop chip row keeps its current density.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .doc-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-ghost {
    min-height: 44px;
  }
  .zoom-row {
    padding: var(--s4);
  }
  .slider {
    height: 10px;
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   The sheet animates the processing spinner, the inline step spinner, pane
   transitions (fadeUp), the toast (toastIn), smooth scrolling, and a large
   number of hover transforms. Only `.pp-card__link` was previously guarded.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* The spinners communicate "work in progress"; keep them turning, just slower,
     rather than freezing them into a meaningless partial ring. */
  .processing-spinner,
  .pcheck-icon.spin-icon::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
  .state-pane.active-state {
    animation: none;
  }
  .trust-card:hover,
  .howto-card:hover,
  .btn-primary:hover:not(:disabled),
  .btn-outline:hover:not(:disabled),
  .btn-continue:hover,
  .upload-zone:hover .upload-icon-ring,
  .rules-grid a:hover,
  .rules-footer .view-all-btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   FORCED COLORS / HIGH CONTRAST
   Selection state, compliance status and step progress are all signalled by
   background colour alone. Windows High Contrast Mode discards those
   backgrounds, leaving an active chip indistinguishable from an inactive one
   and a failed check indistinguishable from a passed one. Add a non-colour
   channel — border weight and outline — so state survives.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .doc-chip {
    border: 1px solid ButtonBorder;
  }
  .doc-chip.active {
    border: 3px solid Highlight;
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .step-item.active .step-dot,
  .step-item.completed .step-dot {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
  .check-icon,
  .compliance-badge-pass,
  .compliance-badge-warn,
  .compliance-badge-fail {
    border: 1px solid CanvasText;
  }
  .check-icon.fail {
    outline: 2px solid CanvasText;
    outline-offset: 1px;
  }
  .specs-table th,
  .specs-table td {
    border-bottom: 1px solid CanvasText;
  }
  .trust-card,
  .howto-card,
  .accordion-item,
  .specs-table-card,
  .upload-zone {
    border: 1px solid CanvasText;
  }
  .btn,
  .btn-continue {
    border: 1px solid ButtonBorder;
  }
  .btn:disabled {
    color: GrayText;
    border-color: GrayText;
  }
  .guide-overlay {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   INCREASED CONTRAST PREFERENCE
   `--color-text-muted` resolves to #94a3b8, which measures roughly 2.6:1 on
   the white surface and does not meet WCAG AA for body text. It is used for
   section subtitles, card descriptions, check details, accordion bodies and
   upload hints. Darkening it by default would change the look of most of the
   page, so it is corrected here for users who have asked for more contrast.
   Promoting this to the default token is a design decision, not a CSS one.
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--slate-600);
  }
  .hero-subtitle {
    color: rgba(255, 255, 255, .92);
  }
  .trust-item {
    color: rgba(255, 255, 255, .85);
  }
  .step-label {
    color: rgba(255, 255, 255, .8);
  }
  .canvas-badge {
    background: rgba(0, 0, 0, .85);
  }
  .guide-overlay {
    opacity: .75;
  }
}

/* --------------------------------------------------------------------------
   PRINT
   Extends the earlier print block rather than replacing it. The tool itself is
   interactive and already hidden; what remains is the reference content —
   requirements table, how-it-works, rejection reasons and FAQ — which users
   do print and take to an appointment. Three problems to solve: the FAQ is
   collapsed by max-height and would print empty, muted grey text is close to
   invisible on paper, and link destinations are lost.
   -------------------------------------------------------------------------- */
@media print {
  /* Ink and legibility */
  :root {
    --color-text: #000;
    --color-text-2: #1a1a1a;
    --color-text-muted: #3a3a3a;
    --color-bg: #fff;
    --color-surface: #fff;
    --color-border: #999;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Drop interactive and decorative chrome that carries no print value */
  .upload-zone,
  .export-actions,
  .cta-stack,
  .country-hub-cta,
  .rules-footer,
  .btn,
  .btn-continue,
  .app-toast,
  .processing-state,
  .processing-spinner,
  .zoom-row,
  .drag-hint,
  .step-wizard {
    display: none !important;
  }

  /* Expose every FAQ answer. `.accordion-content` is clipped to max-height 0
     when closed and 400px when open; neither is correct on paper. */
  .accordion-content,
  .accordion-item.active .accordion-content {
    max-height: none !important;
    overflow: visible !important;
  }
  .accordion-header {
    cursor: default;
    font-weight: 700;
    padding-bottom: var(--s2);
  }
  .accordion-header::after,
  .accordion-item.active .accordion-header::after {
    content: '' !important;
  }
  .accordion-body {
    padding-top: 0;
  }

  /* Flatten cards so nothing relies on shadow or fill to read correctly */
  .trust-card,
  .howto-card,
  .accordion-item,
  .specs-table-card,
  .country-card,
  .pp-card,
  .pp-card__link {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    transform: none !important;
  }

  /* Tables must not be clipped or split mid-row */
  .specs-table-card {
    overflow: visible !important;
  }
  .specs-table {
    min-width: 0 !important;
    page-break-inside: auto;
    break-inside: auto;
  }
  .specs-table tr,
  .compliance-check,
  .howto-card,
  .trust-card,
  .accordion-item,
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .specs-table th {
    background: #f0f0f0 !important;
    color: #000 !important;
  }

  /* Keep headings with the content that follows them */
  h1, h2, h3, h4,
  .section-title,
  .section-head {
    page-break-after: avoid;
    break-after: avoid;
    color: #000 !important;
  }

  /* Grids collapse to a single readable column */
  .trust-grid,
  .howto-grid,
  .country-grid,
  .rules-grid,
  .pp-guides__grid,
  .export-preview {
    display: block !important;
  }

  /* Reveal link destinations, but only for external and cross-page targets —
     printing the URL after every in-page anchor would be noise. */
  a[href^="http"]::after,
  a[href^="/passport-photo-maker"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #333;
    word-break: break-all;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Images print at a sane width and keep their ratio */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Restore sections the base print block hides only for screen layout reasons */
  .page-section,
  .trust-section,
  .pp-guides,
  .country-hub-section,
  .rules-hub-section {
    padding: 0 0 12pt 0 !important;
    background: #fff !important;
    border: none !important;
  }
  .container {
    max-width: none;
    padding: 0;
  }

  @page {
    margin: 14mm;
  }
}