/* ─────────────────────── Onboarding V2 styles ────────────────────────────
   Two-layer branding:
   - .amphi-bg / .btn-amphi  → lime green (Amphi-owned screens)
   - .client-bg / .btn-client → client primary colour (learner-facing)
   Both colours come from CSS variables injected by index.html.
   ───────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1f2937;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  background: #f3f4f6;
  min-height: 100vh;
}

#app { min-height: 100vh; }

/* ── Screens ──
   Only the .active screen is shown. JS toggles the class. */
.screen {
  display: none;
  min-height: 100vh;
  padding: 24px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.screen.active { display: flex; }

/* Amphi landing screens: try the background image first; fall back to a
   lime-green tinted gradient if /amphi_background 404s. The translucent
   lime-green overlay mirrors amphisa.co.za's photo treatment so the card
   stays readable on top. */
.amphi-bg {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--amphi) 55%, transparent),
      color-mix(in srgb, var(--amphi) 35%, transparent)),
    url('/amphi_background') center/cover no-repeat,
    var(--amphi);
  color: #1a2e05;
}
/* ── .client-bg (post-login) — Canva brochure look ──
   Layers (bottom → top):
     1. Off-white warm base #FAFAF7  — calm canvas if image fails to load
     2. Soft white veil — 70% opacity so the brochure photo reads as a
        subtle backdrop rather than competing with the app card text
     3. Brochure image  — full-bleed, centred, fixed (no scroll), cover
     4. Hair-thin lime line across the very top — Amphi brand cap
   Cards float above this and stay perfectly readable. */
.client-bg {
  background-color: #FAFAF7;
  background-image:
    linear-gradient(180deg,
      var(--amphi, #b0bb5b) 0,
      var(--amphi, #b0bb5b) 3px,
      transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.85)),
    url('/static/img/amphi_brochure_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center top, center top, center center;
}

/* ── Cards ── */
.amphi-card,
.client-card {
  background: white;
  width: 100%;
  max-width: 560px;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 12px 36px -16px rgba(0, 0, 0, 0.25);
  margin: 16px 0 auto;
}
.client-card.narrow { max-width: 440px; }
.client-card.wide   { max-width: 720px; }
/* Amphi cards sit on the lime-tinted background photo — give them a
   semi-translucent surface with a slight blur so the text stays readable
   without losing the photo behind. Solid fallback for browsers without
   backdrop-filter. */
.amphi-card {
  margin-top: 64px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.35);
}
.center-text { text-align: center; }

/* ── Amphi visual identity ── */
.amphi-mark {
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.16em;
  color: var(--amphi);
  text-align: center;
  margin-bottom: 18px;
}
.amphi-mark.big { font-size: 42px; margin: 12px 0 24px; }
/* When the JS swaps the text placeholder for an <img>, size it big on
   landing screens. ~2× the previous 64px max-height — clamps stop it
   from getting silly on tiny phones or huge desktops. */
.amphi-mark img {
  max-width: clamp(220px, 60vw, 400px) !important;
  max-height: clamp(120px, 24vw, 180px) !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}
.amphi-mark.big img {
  max-width: clamp(260px, 70vw, 440px) !important;
  max-height: clamp(140px, 28vw, 200px) !important;
}
.amphi-title { font-size: 28px; margin: 0 0 6px; text-align: center; color: #1f2937; }
.amphi-sub   { color: #6b7280; margin: 0 0 18px; text-align: center; }
.amphi-body  { color: #1f2937; line-height: 1.55; }
.amphi-footer, .powered {
  margin-top: auto;
  padding-top: 24px;
  color: rgba(31, 41, 55, 0.72);
  font-size: 13px;
  letter-spacing: 0.04em;
  /* Centre the whole footer block (logo + text) horizontally. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.amphi-footer { color: #1a2e05; }
/* Inject the Amphi logo above "Powered by Amphi" on every screen that uses
   one of these footer classes. Pseudo-element avoids touching the 28 HTML
   instances. */
.amphi-footer::before, .powered::before {
  content: "";
  display: block;
  width: 72px;
  height: 28px;
  background: url('/amphi_logo') center/contain no-repeat;
  opacity: 0.9;
}

/* ── Client visual identity ── */
.client-logo {
  display: block;
  /* Roughly 2× previous size, with responsive clamps so phones don't blow
     up. Was max-width:160 / max-height:80. */
  max-width: clamp(220px, 55vw, 360px);
  max-height: clamp(120px, 28vw, 200px);
  width: auto;
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
}
.client-name {
  text-align: center;
  margin: 0 0 18px;
  font-size: 24px;
  color: var(--client);
}

.welcome-lines {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  line-height: 1.55;
  font-size: 15px;
}
.welcome-lines p { margin: 0 0 8px; }
.welcome-lines p:last-child { margin-bottom: 0; }

/* ── Buttons ── */
.btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 12px;
  min-height: 50px;
  transition: transform 0.05s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-amphi  { background: var(--amphi);  color: #1a2e05; }
.btn-client { background: var(--client); color: white; }
.btn-ghost  { background: white; color: var(--client); border: 1.5px solid currentColor; }
.btn-danger { background: #b91c1c; color: white; }
.btn-back   {
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  margin-top: 24px;
  font-weight: 500;
}
/* Long-text legal buttons (Contract Preview) — allow wrapping to 2-3
   lines without breaking the layout. Slightly smaller line-height keeps
   them from getting unreasonably tall. */
.btn-legal {
  white-space: normal;
  line-height: 1.3;
  font-size: 15px;
  padding: 14px 16px;
  text-align: center;
  min-height: 0;
}

.link-btn {
  background: none; border: none; color: var(--client);
  font-weight: 600; padding: 4px 8px; cursor: pointer; font-family: inherit;
}

/* ── Forms ── */
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-stack label,
.info-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}
.form-stack input,
.form-stack textarea,
.info-group input,
.info-group textarea {
  width: 100%;
  padding: 12px 14px;
  margin-top: 4px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 16px;       /* 16px stops iOS zooming the input on focus */
  font-family: inherit;
  background: white;
}
.form-stack input:focus,
.info-group input:focus,
.form-stack textarea:focus,
.info-group textarea:focus {
  outline: none;
  border-color: var(--client);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--client) 22%, transparent);
}

.big-input {
  font-size: 32px !important;
  text-align: center;
  letter-spacing: 0.18em;
  padding: 18px 24px !important;
  margin: 14px 0 !important;
  /* Sized so 3-4 digit learner numbers (legit range 1-999) sit
     comfortably inside the box with no horizontal overflow. */
  width: 100%;
  max-width: 360px;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 64px;
  font-weight: 600;
}

/* Radio + checkbox groups */
.radio-group {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px 4px;
  margin: 4px 0;
}
.radio-group legend {
  font-size: 13px; color: #6b7280; padding: 0 6px;
  font-weight: 500;
}
.radio, .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  color: #1f2937;
}
.radio input, .checkbox input { width: 20px; height: 20px; accent-color: var(--client); }

/* Info-group sections */
.info-group {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 16px 8px;
  margin: 14px 0;
  background: #fafafa;
}
.info-group > legend {
  font-size: 15px;
  font-weight: 700;
  color: var(--client);
  padding: 0 8px;
}
.info-group .form-stack > * { margin: 4px 0; }

/* Conditional reveal: [data-show-when="key=val"] - JS toggles .show */
[data-show-when] { display: none; }
[data-show-when].show { display: block; }

/* ── Confirm rows on Confirm-Details ── */
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #f3f4f6;
  padding: 14px 0;
  font-size: 16px;
}
.confirm-row span { color: #6b7280; }
.confirm-row b { color: #1f2937; font-size: 18px; }

/* ── Document tiles ── */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.doc-tile {
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
}
.doc-tile.done { border-color: var(--client); background: color-mix(in srgb, var(--client) 6%, white); }
.doc-tile h4 { margin: 0; font-size: 17px; }
.doc-tile .req-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-tile .req-tag.req { color: #b91c1c; }
.doc-tile .req-tag.opt { color: #6b7280; }
.doc-tile .thumb {
  display: block;
  margin: 6px 0;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
.doc-tile .actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.doc-tile .actions .btn {
  margin: 0; padding: 8px 10px; font-size: 13px; min-height: 38px; flex: 1 1 auto;
}
.doc-tile .check { color: var(--client); font-weight: 700; font-size: 14px; }
.doc-tile select {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

/* Per-side rows for the Smart Card ID tile (Front / Back). */
.id-side-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.id-side-row:last-child { border-bottom: none; }
.id-side-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.id-side-na {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

/* ── Contract preview ── */
.tabs { display: flex; gap: 8px; margin: 12px 0; }
.tabs button {
  flex: 1; padding: 10px; border-radius: 10px;
  border: 1.5px solid #e5e7eb; background: white; color: #6b7280;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.tabs button.active { background: var(--client); color: white; border-color: var(--client); }

.contract-pager {
  position: relative;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.contract-pager img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  box-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.3);
}
.pager-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: 1px solid #d1d5db;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#pager-prev { left: 6px; }
#pager-next { right: 6px; }
.center { text-align: center; }

/* ── Signature pads ── */
.tip {
  background: color-mix(in srgb, var(--client) 8%, white);
  border: 1px solid color-mix(in srgb, var(--client) 25%, white);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 16px;
  font-size: 14px;
  color: #374151;
}
.sig-block { margin: 12px 0; }
.sig-header {
  display: flex; justify-content: space-between; align-items: center;
}
.sig-header h3 { margin: 0; font-size: 16px; color: #374151; }
.canvas-wrap {
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  background: white;
  overflow: hidden;
  width: 100%;
}
.canvas-wrap canvas {
  width: 100%;
  display: block;
  touch-action: none;
}

/* ── Outstanding-items screen ── */
.outstanding-section {
  margin: 18px 0 4px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 12px;
}
.outstanding-section h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.outstanding-list {
  margin: 4px 0 0;
  padding-left: 20px;
  color: #1f2937;
  font-size: 15px;
  line-height: 1.6;
}
.outstanding-list li { padding: 2px 0; }
/* Documents section: list items contain a label+textarea instead of
   plain text, so unset the bullet padding and give each item room. */
.outstanding-list li.outstanding-item {
  list-style: none;
  margin-left: -20px;   /* counteract padding-left on the ul */
  padding: 6px 0 10px;
}
.outstanding-doc-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
  margin: 0;
}
.outstanding-doc-textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1.5px solid #fde68a;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: white;
  resize: vertical;
  min-height: 72px;
}
.outstanding-doc-textarea:focus {
  outline: none;
  border-color: var(--client);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--client) 22%, transparent);
}
.outstanding-explain {
  display: block;
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}
.outstanding-explain textarea {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  background: white;
  resize: vertical;
  min-height: 96px;
}
.outstanding-explain textarea:focus {
  outline: none;
  border-color: var(--client);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--client) 22%, transparent);
}
#outstanding-char-hint { margin-top: 4px; }

/* Flag banner shown on the Info screen's CV section when the learner
   says "Yes — submitting CV" but didn't capture one at the doc step. */
.cv-flag-banner {
  margin: 8px 0 4px;
  padding: 8px 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Spinner ── */
.spinner {
  width: 56px; height: 56px;
  border: 5px solid rgba(26, 46, 5, 0.18);
  border-top-color: #1a2e05;
  border-radius: 50%;
  margin: 24px auto;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Banners ── */
.error-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}
.muted { color: #6b7280; }
.small { font-size: 13px; }

/* ── Modal ── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  z-index: 50;
  overflow-y: auto;
}
.modal.open { display: flex; }
.modal-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 640px;
  margin-top: 24px;
}
.modal-card.narrow { max-width: 420px; }
.modal-card h3 { margin: 0 0 10px; }
.modal-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cam-stage {
  background: #1f2937;       /* dark grey backdrop (not pitch-black) */
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0;
  display: block;            /* block, not flex, so the inner fills 100% */
  /* 4:3 aspect ratio container — matches typical ID-card capture and
     prevents the black pillar bars that happened with object-fit:contain
     on a wide-source camera. The video/canvas now fill the box and any
     overflow is cropped (object-fit: cover below). */
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
}
.cam-stage video,
.cam-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* cover, not contain: stretch+crop so the frame is always fully filled.
     This is what eliminates the side black bars Morne hit on wide-source
     cameras (e.g. Mac FaceTime camera at 1920×1080 in a 4:3 frame). */
  object-fit: cover;
  object-position: center;
}

/* Camera-picker dropdown (shown only when 3+ cameras are detected). */
.cam-picker {
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cam-picker label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}
.cam-picker select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  background: white;
  font-family: inherit;
}

/* ── Responsive niceties ── */
@media (min-width: 800px) {
  .screen { padding: 48px 24px; }
  .modal-actions { flex-direction: row-reverse; }
  .modal-actions .btn { flex: 1; margin: 0; }
}


/* ── Login password show/hide toggle (fix round 4) ── */
:root { --required-red: #c0392b; }
.password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.password-wrap input {
  flex: 1;
  padding-right: 52px;     /* leave room for the eye glyph */
}
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
}
.password-toggle:hover { color: var(--client); }
.password-toggle:focus { outline: 2px solid var(--client); outline-offset: 2px; border-radius: 8px; }

/* ── Welcome screen list styling (fix round 4) ── */
.welcome-heading {
  margin: 14px 0 4px;
  font-weight: 700;
  color: var(--client);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
}
.welcome-list {
  margin: 0 0 8px;
  padding-left: 22px;
  line-height: 1.55;
}
.welcome-list li { margin: 2px 0; }

/* ── Documents screen: red 'Required' word in intro (fix round 4) ── */
.required-tag {
  color: var(--required-red);
  font-weight: 700;
}

/* ── Documents screen: orange tile for required + N/A (fix round 4) ── */
.doc-tile.na-required,
.doc-tile.tile-na {
  background: #fff4e0;
  border-color: #ffb84d;
}
.doc-tile.na-required.done,
.doc-tile.tile-na.done {
  background: #fff4e0;
  border-color: #ffb84d;
}
.doc-tile.na-required .check,
.doc-tile.tile-na .check { color: #b45309; }

/* ── Info-form section colour coding (fix round 4) ──
   Three states per section, applied by recomputeSectionStates() in JS. */
.info-section.section-complete {
  background: #e8f5e9;
  border-color: #a5d6a7;
}
.info-section.section-complete > legend { color: #2e7d32; }
.info-section.section-partial {
  background: #fff8e1;
  border-color: #ffd54f;
}
.info-section.section-partial > legend { color: #b07a00; }
.info-section.section-blank {
  background: #ffebee;
  border-color: #ef9a9a;
}
.info-section.section-blank > legend { color: #b71c1c; }

/* ── Login footer link to amphisa.co.za (fix round 5) ──
   Replaces the old "Powered by Amphi" footer line on the login screen
   only. Other screens still show the plain "Powered by Amphi" text. */
.amphi-footer-link { padding-top: 18px; }
.amphi-link {
  color: #1a2e05;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.amphi-link:hover, .amphi-link:focus { opacity: 1; }

/* ── Welcome screen: client-name sub-line under the page H1 (fix round 5) ── */
.client-sub {
  text-align: center;
  margin: -8px 0 18px;
  font-size: 16px;
  color: #6b7280;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.welcome-hello {
  font-size: 18px;
  font-weight: 700;
  color: var(--client);
  margin: 0 0 8px;
}
.welcome-list-ordered {
  padding-left: 24px;
  margin: 8px 0 12px;
}
.welcome-req {
  color: var(--required-red);
  font-weight: 700;
  font-size: 13px;
}
.welcome-opt {
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
}


/* ── Cloud-receipt panel (success screen) ─────────────────────────── */
.receipt-panel {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 18px auto 22px;
  max-width: 420px;
  text-align: left;
}
.receipt-panel.bad {
  background: #fef2f2;
  border-color: #fecaca;
}
.receipt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #166534;
  margin-bottom: 10px;
}
.receipt-row-bad { color: #991b1b; }
.receipt-row-ok  { color: #166534; }
.receipt-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
.receipt-meta > div { display: flex; flex-direction: column; }
.receipt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 2px;
}
.receipt-code {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: #0f172a;
  font-weight: 600;
}
@media (max-width: 480px) {
  .receipt-meta { grid-template-columns: 1fr 1fr; }
  .receipt-meta > div:nth-child(3) { grid-column: 1 / -1; }
}


/* Secondary outline-style of the client button. Used where a button is
   still important enough to look like the brand but should sit below a
   primary CTA (e.g. lookup-number button below the Walk-in shortcut). */
.btn-client-outline {
  background: white;
  color: var(--client);
  border: 1.5px solid var(--client);
}
.btn-client-outline:hover { background: rgba(0,0,0,0.02); }


/* Green "go-forward" confirm button. Used where a positive confirm CTA
   needs to be visually distinct from the maroon brand colour AND from
   the red "danger" cancel/disagree button (e.g. on the Contract Preview
   screen and Outstanding Items screen). */
.btn-success {
  background: #16a34a;       /* tailwind green-600 */
  color: white;
  border: none;
}
.btn-success:hover  { background: #15803d; }   /* green-700 */
.btn-success:active { background: #166534; }   /* green-800 */


/* School province (and similar) — larger dropdown on its own line under
   the label, easier to tap on a tablet. */
.stacked-label .lbl-text { display: block; margin-bottom: 6px; font-weight: 500; }
.big-select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: white;
}


/* ── Document tile colour states (Nutrifeeds polish) ──
   Applied by JS refreshTile():
     .blank-required → RED border + soft-red wash (must do)
     .blank-optional → ORANGE border + soft-orange wash (should do)
     .done           → GREEN (already coloured by the rule above)
     .na-required    → ORANGE (acknowledged, still outstanding)
*/
.doc-tile.blank-required {
  background: #fef2f2;
  border-color: #dc2626;
}
.doc-tile.blank-required .req-tag.req { color: #b91c1c; }

.doc-tile.blank-optional {
  background: #fff7ed;
  border-color: #f59e0b;
}
.doc-tile.blank-optional .req-tag.opt { color: #9a3412; }

/* Captured state wins over blank state */
.doc-tile.done.blank-required,
.doc-tile.done.blank-optional {
  background: color-mix(in srgb, var(--client) 6%, white);
  border-color: var(--client);
}


/* ── Multi-page capture: thumbnail strip + counter ─────────────────────── */
.doc-tile .pages-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 6px 0;
}
.doc-tile .pages-row img {
  max-height: 60px;
  max-width: 64px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  object-fit: cover;
}
.doc-tile .page-counter {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-top: 4px;
}
/* Camera modal: page-of-N caption */
.cam-page-label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  margin: 4px 0 8px 0;
  text-align: center;
}


/* explicit doc-tile.done override — captured documents should ALWAYS be
   green, regardless of the client primary colour (which could be maroon,
   maroon-mixed-with-white reads as pink and confuses operators). Matches
   the GREEN used by .info-section.section-complete. */
/* .done = green ONLY when not also marked NA. The :not() guards stop
   a stale .done from beating .tile-na's amber. */
.doc-tile.done:not(.na-required):not(.tile-na) {
  background: #e8f5e9 !important;
  border-color: #a5d6a7 !important;
}
.doc-tile.done:not(.na-required):not(.tile-na) .check { color: #166534; }


/* Brief visual flash to draw the learner's attention to the first
   missing required field after a failed Submit. */
.flash-missing {
  animation: flash-missing-anim 2.2s ease-out;
  outline: 2px solid #dc2626;
  outline-offset: 4px;
  border-radius: 6px;
}
@keyframes flash-missing-anim {
  0%   { background: #fee2e2; }
  60%  { background: #fee2e2; }
  100% { background: transparent; }
}


/* ── V3 Hub screen ───────────────────────────────────────────────────── */
.hub-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 16px;
}
.hub-btn {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 20px !important;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
}
.hub-btn-title {
  font-size: 17px;
  font-weight: 700;
}
.hub-btn-sub {
  font-size: 13px;
  opacity: 0.92;
  font-weight: 400;
}

/* ── V3 Employer Details form sections ───────────────────────────────── */
.form-section {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
}
.form-section > legend {
  font-weight: 700;
  padding: 0 8px;
  font-size: 14px;
}
.emp-bg-employer { background: #f5f7ea; border-left: 4px solid #b0bb5b; }
.emp-bg-rep      { background: #eef2f7; border-left: 4px solid #6b7da8; }
.emp-bg-lead     { background: #fff4e0; border-left: 4px solid #ffb84d; }
.emp-bg-witness  { background: #f7eef7; border-left: 4px solid #8b6ba8; }


.section-actions {
  display: flex;
  justify-content: flex-end;
  margin: -10px 0 6px;
}
.section-actions .link-btn {
  font-size: 12px;
  color: #6b7280;
}
.section-actions .link-btn:hover {
  color: #111827;
  text-decoration: underline;
}

/* ── .learner-bg — used on every post-supervisor-gate screen.
   Same structure as .client-bg but uses the Learner portal photo. ── */
.learner-bg {
  background-color: #FAFAF7;
  background-image:
    linear-gradient(180deg,
      var(--amphi, #b0bb5b) 0,
      var(--amphi, #b0bb5b) 3px,
      transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.85)),
    url('/static/img/learner_portal_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center top, center top, center center;
}

/* ── .employer-bg — used on every post-employer-gate screen. ── */
.employer-bg {
  background-color: #FAFAF7;
  background-image:
    linear-gradient(180deg,
      var(--amphi, #b0bb5b) 0,
      var(--amphi, #b0bb5b) 3px,
      transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.85)),
    url('/static/img/employer_portal_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center top, center top, center center;
}