/* Crossroads Insurance Agency — signature portal styles.
   Tokens from the Crossroads design system (crossroads-insurance-design-system). */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

@font-face {
  font-family: 'Diam';
  src: url('assets/fonts/dDiam.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand core */
  --blue-700: #2e3192;
  --gray-brand: #818285;
  --blue-900: #191b52; --blue-800: #232670; --blue-600: #3d41a6; --blue-500: #5a5ec0;
  --blue-300: #a9abde; --blue-100: #e3e4f4; --blue-50: #f2f2fa;
  --n-900: #212329; --n-700: #43454c; --n-500: #6d6f75; --n-400: #a7a9ac;
  --n-300: #d5d6d9; --n-200: #e8e9eb; --n-100: #f4f5f6; --n-0: #ffffff;
  --green-600: #2f7d4a; --green-50: #edf7f0;
  --amber-600: #9d6b14; --amber-50: #fdf6e7;
  --red-600: #bb3a34; --red-50: #fbeeed;

  --font-display: 'Diam', Arial, sans-serif;
  --font-body: 'Source Sans 3', Arial, sans-serif;
  --tracking-eyebrow: 0.28em;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-card: 0 1px 3px rgba(25,27,82,.08), 0 4px 14px rgba(25,27,82,.06);
  --shadow-raised: 0 6px 24px rgba(25,27,82,.14);
  --focus-ring: 0 0 0 3px var(--blue-100);
  --transition-fast: 120ms ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--n-700);
  background: var(--n-100);
}

a { color: var(--blue-600); }
a:hover { color: var(--blue-800); }

/* ---------- Header ---------- */
.site-header {
  background: var(--blue-700);
  color: var(--n-0);
  padding: 40px 24px 36px;
}
.site-header .inner {
  max-width: 1140px;
  margin: 0 auto;
  border: 2px dashed rgba(255,255,255,.45); /* road center-line motif */
  border-radius: var(--radius-md);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-header img.mark { width: 64px; height: auto; display: block; background: var(--n-0); border-radius: var(--radius-sm); padding: 6px; }
.site-header .eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-100);
  margin: 0 0 4px;
}
.site-header h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
  color: var(--n-0);
  letter-spacing: 0.02em;
}
.site-header p.sub { margin: 6px 0 0; color: var(--blue-100); font-size: 15px; max-width: 640px; }

/* ---------- Layout ---------- */
.page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}
.builder {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px) {
  .builder { grid-template-columns: 1fr; }
  .preview-col { position: static; }
}
.preview-col { position: sticky; top: 20px; }

/* ---------- Cards ---------- */
.card {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-700);
  margin: 0 0 16px;
}
.step-num {
  background: var(--blue-700);
  color: var(--n-0);
  font-size: 12px;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---------- Form ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n-700);
  margin-bottom: 4px;
}
.field .hint { font-weight: 400; color: var(--n-500); font-size: 12.5px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--n-900);
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field textarea { resize: vertical; min-height: 74px; line-height: 1.45; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--focus-ring);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--n-700);
  cursor: pointer;
}
.toggle input { width: 16px; height: 16px; accent-color: var(--blue-700); cursor: pointer; }

/* ---------- Photo step ---------- */
.photo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photo-thumb {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid var(--n-300);
  background: var(--blue-50);
  object-fit: cover;
  display: block;
}
.photo-actions { display: flex; flex-direction: column; gap: 8px; }
.photo-note { font-size: 12.5px; color: var(--n-500); flex-basis: 100%; margin: 4px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--blue-700); color: var(--n-0); }
.btn-primary:hover { background: var(--blue-800); }
.btn-primary:active { background: var(--blue-900); }
.btn-secondary {
  background: var(--n-0);
  color: var(--blue-700);
  border-color: var(--blue-700);
}
.btn-secondary:hover { background: var(--blue-50); color: var(--blue-800); }
.btn-ghost { background: transparent; color: var(--blue-700); padding: 8px 10px; }
.btn-ghost:hover { background: var(--blue-50); }
.btn-lg { font-size: 16.5px; padding: 13px 24px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Preview ---------- */
.preview-card .sig-frame {
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
  padding: 20px;
  overflow-x: auto;
  background: var(--n-0);
}
.preview-meta { font-size: 12.5px; color: var(--n-500); margin: 10px 0 0; }
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.copy-feedback { font-size: 14px; font-weight: 600; color: var(--green-600); }

.notice {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  margin-top: 14px;
  display: none;
}
.notice.show { display: block; }
.notice.warn { background: var(--amber-50); color: var(--amber-600); }
.notice.info { background: var(--blue-50); color: var(--blue-800); }
.notice.error { background: var(--red-50); color: var(--red-600); }

/* ---------- Install section ---------- */
.install-section { margin-top: 36px; }
.install-section > .eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-brand);
  margin: 0 0 6px;
}
.install-section > h2 {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--blue-700);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.platform-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--n-700);
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.chip:hover { border-color: var(--blue-600); color: var(--blue-700); }
.chip.active { background: var(--blue-700); border-color: var(--blue-700); color: var(--n-0); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.guide-steps { margin: 0 0 18px; padding-left: 24px; }
.guide-steps li { margin-bottom: 9px; font-size: 15.5px; }
.guide-block h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-700);
  margin: 18px 0 8px;
}
.guide-list { margin: 0; padding-left: 22px; }
.guide-list li { margin-bottom: 7px; font-size: 14px; color: var(--n-500); }
.guide-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 2px 9px;
  margin-left: 10px;
  vertical-align: middle;
}
.guide-badge.copy { background: var(--green-50); color: var(--green-600); }
.guide-badge.other { background: var(--amber-50); color: var(--amber-600); }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25,27,82,.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--n-0);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  max-width: 460px;
  width: 100%;
  padding: 26px 28px;
  max-height: 92vh;
  overflow-y: auto;
}
.modal h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-700);
  margin: 0 0 14px;
}
.modal .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* Cropper */
.crop-stage {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--n-200);
  cursor: grab;
  touch-action: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
/* The crop guide (veil + keep-line ring) is drawn on the canvas itself in
   app.js so it always uses the exact crop geometry — no CSS overlay. */
.crop-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--blue-50);
  border-radius: var(--radius-sm);
}
.crop-preview-row img {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.crop-preview-row span { font-size: 13px; color: var(--n-700); }
.crop-zoom { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.crop-zoom input[type="range"] { flex: 1; accent-color: var(--blue-700); }

/* QR modal */
.qr-box { display: flex; justify-content: center; margin: 8px 0 14px; }
.qr-box svg { width: 240px; height: 240px; }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { flex: 1; font-size: 13px; padding: 8px 10px; border: 1px solid var(--n-300); border-radius: var(--radius-sm); color: var(--n-700); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--n-300);
  padding: 22px 24px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--n-500);
  background: var(--n-0);
}