/* Ethiqs onboarding tour — driver.js skin, exact brand tokens.
 * Loaded after driver.css. 'Hedvig Letters Serif' and 'Instrument Sans' are already
 * @font-faced by ethiqs-theme.css; we only add the Condensed face used for step titles.
 * Contrast: all small text uses --brand (#244B55 on --cream #F5F0E8 = ~8.4:1, AA pass).
 * --brand-light (#3D7D90 = ~4.08:1 on cream) is NEVER used for small text — fills only.
 * Accent (#4ECDC4) appears ONLY as thick/large marks: 3px border, node dot, arrow, rings.
 */

:root {
  --brand: #244B55;
  --brand-light: #3D7D90;
  --accent: #4ECDC4;
  --cream: #F5F0E8;
  --dark: #0C1A1F;
  --white: #FFFFFF;
  --text: #1A2A2F;
}

/* Step titles are Instrument Sans Condensed, ALL CAPS. Drop InstrumentSansCondensed.ttf
   into brand/fonts/ to get the true condensed cut; otherwise it degrades to Instrument Sans. */
@font-face {
  font-family: 'Instrument Sans Condensed';
  src: url('/assets/fonts/InstrumentSansCondensed.ttf') format('truetype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---- Popover shell ---------------------------------------------------------- */
.driver-popover.ethiqs-tour {
  background: var(--cream);
  color: var(--text);
  border: 1px solid rgba(36, 75, 85, 0.14);   /* hairline in brand */
  border-top: 3px solid var(--accent);         /* signal ring — accent as a thick mark */
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(12, 26, 31, 0.22);
  padding: 20px 20px 16px;
  max-width: 320px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

/* The node (dot) of the dot + line + ring motif, top-left of every popover. */
.driver-popover.ethiqs-tour::before {
  content: "";
  position: absolute;
  top: 15px; left: 20px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.18); /* concentric signal ring */
}

/* Step title — Instrument Sans Condensed, uppercased in CSS (natural case in DOM for SR). */
.driver-popover.ethiqs-tour .driver-popover-title {
  font-family: 'Instrument Sans Condensed', 'Instrument Sans', ui-sans-serif, sans-serif;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--brand);
  margin: 6px 0 8px 20px;   /* clear the node dot */
}

/* Welcome H1 — Hedvig Letters Serif, mixed case, no uppercase. */
.driver-popover.ethiqs-welcome .driver-popover-title {
  font-family: 'Hedvig Letters Serif', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 22px;
  color: var(--dark);
}

.driver-popover.ethiqs-tour .driver-popover-description {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

/* ---- Footer: progress + buttons -------------------------------------------- */
.driver-popover.ethiqs-tour .driver-popover-footer {
  margin-top: 14px;
  gap: 8px;
  align-items: center;
}

/* Small text — MUST be --brand for AA on cream, never --brand-light. */
.driver-popover.ethiqs-tour .driver-popover-progress-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  opacity: 1;
}

/* Primary (Next / Start / Done): brand fill, cream label — ~8.4:1. */
.driver-popover.ethiqs-tour .driver-popover-next-btn {
  background: var(--brand);
  color: var(--cream);
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  text-shadow: none;
}
.driver-popover.ethiqs-tour .driver-popover-next-btn:hover {
  background: var(--brand-light);              /* --brand-light as a FILL under white text — fine */
  border-color: var(--brand-light);
}

/* Secondary (Back): brand outline, brand label on cream — AA pass. */
.driver-popover.ethiqs-tour .driver-popover-prev-btn {
  background: transparent;
  color: var(--brand);
  border: 1px solid rgba(36, 75, 85, 0.35);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  text-shadow: none;
}
.driver-popover.ethiqs-tour .driver-popover-prev-btn:hover {
  background: rgba(36, 75, 85, 0.06);
}

/* Skip / close (X) — always visible, brand-coloured for AA. */
.driver-popover.ethiqs-tour .driver-popover-close-btn {
  color: var(--brand);
  opacity: 0.85;
  font-size: 18px;
}
.driver-popover.ethiqs-tour .driver-popover-close-btn:hover { opacity: 1; }

/* ---- Arrow: the "line (connection)" of node -> line -> ring, in accent ------ */
.driver-popover.ethiqs-tour .driver-popover-arrow-side-top    { border-top-color: var(--accent); }
.driver-popover.ethiqs-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--accent); }
.driver-popover.ethiqs-tour .driver-popover-arrow-side-left   { border-left-color: var(--accent); }
.driver-popover.ethiqs-tour .driver-popover-arrow-side-right  { border-right-color: var(--accent); }

/* ---- Highlighted target: concentric signal rings --------------------------- */
.driver-active-element {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(78, 205, 196, 0.18);
  border-radius: 8px;
}

/* ---- Guide pill (replay) — dot + label, sober, bottom-left ------------------ */
.ethiqs-guide-pill {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cream);
  color: var(--brand);
  border: 1px solid rgba(36, 75, 85, 0.35);   /* hairline */
  border-radius: 999px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(12, 26, 31, 0.18);
  cursor: pointer;
}
.ethiqs-guide-pill:hover { border-color: var(--brand); }
.ethiqs-guide-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ethiqs-guide-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
}

/* ---- Accessibility: honour reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .driver-popover.ethiqs-tour, .driver-active-element { transition: none !important; }
  .driver-popover.ethiqs-tour::before, .ethiqs-guide-dot { box-shadow: none; }
}