/* CouVibe site guide — launcher, panel and tour bubbles.

   Deliberately self-contained rather than folded into styles.css: the guide
   also runs on start.html, couvibe.html and configurement.html, which carry
   their own inline styling and never load styles.css. Everything here is
   scoped under .cv-guide* / .cv-tour* and sets its own colours and fonts, so
   the guide looks like CouVibe on the shared pages and still looks right on
   the standalone ones.

   Layering, to sit correctly against what is already on the page:
     site-header   50      (styles.css)
     sticky CTA    999     (styles.css)
     launcher      1100
     promo popups  1200    (styles.css)
     tour          1250
     guide panel   1500 */

.cv-guide-launcher,
.cv-guide-panel,
.cv-tour {
  --cvg-ink: #1c1814;
  --cvg-bone: #f5f0e8;
  --cvg-ivory: #faf7f2;
  --cvg-gold: #c8a96a;
  --cvg-doll: #c45c6a;
  --cvg-rose: #b85c68;
  --cvg-dim: #5a5248;
  --cvg-line: rgba(28, 24, 20, 0.14);
  --cvg-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --cvg-body: 'DM Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================
   Launcher
   ============================================================ */

.cv-guide-launcher {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 19px 11px 13px;
  border: 1px solid rgba(250, 247, 242, 0.24);
  border-radius: 999px;
  background: var(--cvg-ink);
  color: var(--cvg-ivory);
  font-family: var(--cvg-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(28, 24, 20, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cv-guide-launcher:hover {
  background: #2a2520;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(28, 24, 20, 0.36);
}

.cv-guide-launcher-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--cvg-gold);
  color: var(--cvg-ink);
  font-family: var(--cvg-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/* A single quiet pulse for a visitor who has not opened the guide yet, and
   again the moment the tour finishes so they know where it went. */
.cv-guide-launcher.has-hint .cv-guide-launcher-mark,
.cv-guide-launcher.just-finished .cv-guide-launcher-mark {
  animation: cv-guide-pulse 2.6s ease-out 3;
}

@keyframes cv-guide-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 106, 0.6); }
  40% { box-shadow: 0 0 0 9px rgba(200, 169, 106, 0); }
}

.cv-guide-launcher.just-finished {
  background: var(--cvg-rose);
}

/* Clear the full-width sticky CTA that styles.css pins to the bottom of
   narrow screens. */
@media (max-width: 650px) {
  .cv-guide-launcher { right: 12px; bottom: 82px; padding: 9px 15px 9px 10px; font-size: 0.76rem; }
  .cv-guide-launcher-mark { width: 22px; height: 22px; font-size: 0.9rem; }
}

html.cv-guide-locked,
html.cv-guide-locked body { overflow: hidden; }
html.cv-guide-locked .sticky-mobile-cta,
html.cv-tour-active .sticky-mobile-cta { display: none; }
html.cv-guide-locked .cv-guide-launcher,
html.cv-tour-active .cv-guide-launcher.is-hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   Panel
   ============================================================ */

.cv-guide-panel {
  position: fixed;
  inset: 0;
  z-index: 1500;
  font-family: var(--cvg-body);
}

.cv-guide-panel[hidden] { display: none; }

.cv-guide-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 14, 0.52);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.cv-guide-panel.is-open .cv-guide-scrim { opacity: 1; }

.cv-guide-sheet {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  height: 100%;
  background: var(--cvg-ivory);
  color: var(--cvg-ink);
  box-shadow: -24px 0 60px rgba(20, 17, 14, 0.24);
  transform: translateX(26px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.cv-guide-panel.is-open .cv-guide-sheet { transform: none; opacity: 1; }

.cv-guide-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--cvg-line);
  background: var(--cvg-bone);
}

.cv-guide-eyebrow {
  margin: 0 0 6px;
  color: var(--cvg-rose);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cv-guide-heading {
  margin: 0;
  font-family: var(--cvg-display);
  font-size: 1.44rem;
  font-weight: 500;
  line-height: 1.2;
}

.cv-guide-close {
  margin-left: auto;
  padding: 0;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--cvg-line);
  border-radius: 50%;
  background: transparent;
  color: var(--cvg-dim);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.cv-guide-close:hover { color: var(--cvg-rose); border-color: var(--cvg-rose); }

.cv-guide-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 22px 0;
  background: var(--cvg-bone);
  border-bottom: 1px solid var(--cvg-line);
}

.cv-guide-tab {
  padding: 9px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--cvg-dim);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}

.cv-guide-tab.is-active { color: var(--cvg-ink); border-bottom-color: var(--cvg-rose); }

.cv-guide-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 22px 26px;
}

.cv-guide-label {
  display: block;
  margin: 0 0 8px;
  color: var(--cvg-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cv-guide-field { display: flex; gap: 8px; margin: 0; }

.cv-guide-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--cvg-line);
  border-radius: 4px;
  background: #fff;
  color: var(--cvg-ink);
  font-family: inherit;
  font-size: 0.94rem;
}

.cv-guide-input::placeholder { color: rgba(90, 82, 72, 0.6); }
.cv-guide-input:focus { border-color: var(--cvg-gold); outline: 2px solid rgba(200, 169, 106, 0.35); outline-offset: 1px; }

.cv-guide-submit {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--cvg-ink);
  color: var(--cvg-ivory);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.cv-guide-submit:hover { background: var(--cvg-rose); }

.cv-guide-help {
  margin: 9px 0 0;
  color: var(--cvg-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.cv-guide-help a { color: var(--cvg-rose); text-decoration: underline; }

.cv-guide-out { margin-top: 18px; }

/* Chips — suggested and related questions */

.cv-guide-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.cv-guide-chips-label {
  flex: 0 0 100%;
  color: var(--cvg-dim);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cv-guide-chip {
  padding: 7px 13px;
  border: 1px solid var(--cvg-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cvg-ink);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.cv-guide-chip:hover { border-color: var(--cvg-rose); background: #fff8f8; }

/* Answers */

.cv-guide-answer {
  padding: 18px 18px 14px;
  border: 1px solid var(--cvg-line);
  border-left: 3px solid var(--cvg-gold);
  border-radius: 4px;
  background: #fff;
}

.cv-guide-answer-q {
  margin: 0 0 10px;
  font-family: var(--cvg-display);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.25;
}

.cv-guide-answer-a p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.62; color: #2c2620; }
.cv-guide-answer-a p:last-child { margin-bottom: 0; }
.cv-guide-answer-a strong { font-weight: 600; color: var(--cvg-ink); }
.cv-guide-answer-a em { font-style: italic; }

.cv-guide-answer-a ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.cv-guide-answer-a li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 18px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: #2c2620;
}

.cv-guide-answer-a li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cvg-gold);
}

.cv-guide-answer-a a { color: var(--cvg-rose); text-decoration: underline; }

.cv-guide-sources {
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--cvg-line);
  font-size: 0.75rem;
  line-height: 1.9;
}

.cv-guide-sources span {
  margin-right: 7px;
  color: var(--cvg-dim);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.64rem;
}

.cv-guide-sources a {
  margin-right: 12px;
  color: var(--cvg-rose);
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

.cv-guide-note {
  padding: 15px 17px;
  border: 1px dashed var(--cvg-line);
  border-radius: 4px;
  background: var(--cvg-bone);
}

.cv-guide-note p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: #2c2620; }
.cv-guide-note a { color: var(--cvg-rose); text-decoration: underline; }

/* Search results */

.cv-guide-results { margin: 0; padding: 0; list-style: none; }

.cv-guide-result { margin-bottom: 8px; }

.cv-guide-result > a,
.cv-guide-result > button {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--cvg-line);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cv-guide-result > a:hover,
.cv-guide-result > button:hover { border-color: var(--cvg-rose); transform: translateX(2px); }

.cv-guide-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 169, 106, 0.2);
  color: #7a6330;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cv-guide-tag--answer { background: rgba(184, 92, 104, 0.14); color: #8e404b; }

.cv-guide-result-title {
  display: block;
  font-family: var(--cvg-display);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.3;
}

.cv-guide-result-blurb {
  display: block;
  margin-top: 4px;
  color: var(--cvg-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Browse */

.cv-guide-topics { display: block; }

.cv-guide-topic {
  border-bottom: 1px solid var(--cvg-line);
  padding: 4px 0;
}

.cv-guide-topic > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  font-family: var(--cvg-display);
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
}

.cv-guide-topic > summary::-webkit-details-marker { display: none; }

.cv-guide-topic > summary small {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(200, 169, 106, 0.22);
  color: #7a6330;
  font-family: var(--cvg-body);
  font-size: 0.68rem;
  font-weight: 600;
}

.cv-guide-topic-blurb {
  margin: 0 0 4px;
  color: var(--cvg-dim);
  font-size: 0.81rem;
  line-height: 1.55;
}

.cv-guide-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--cvg-line);
  background: var(--cvg-bone);
}

.cv-guide-ghost {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cvg-rose);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.cv-guide-ghost:hover { color: #8e404b; }

@media (max-width: 520px) {
  .cv-guide-sheet { width: 100%; }
  .cv-guide-sheet-head { padding: 18px 16px 14px; }
  .cv-guide-heading { font-size: 1.28rem; }
  .cv-guide-tabs { padding: 10px 16px 0; }
  .cv-guide-tab { padding: 8px 10px; font-size: 0.75rem; }
  .cv-guide-body { padding: 16px 16px 22px; }
  .cv-guide-sheet-foot { padding: 12px 16px; }
}

/* ============================================================
   Tour bubbles
   ============================================================ */

.cv-tour {
  position: fixed;
  inset: 0;
  z-index: 1250;
  font-family: var(--cvg-body);
}

.cv-tour[hidden] { display: none; }

/* The spotlight. The dimming is the ring's own huge outer shadow, so one
   element both frames the target and darkens everything around it. */
.cv-tour-ring {
  position: absolute;
  border-radius: 10px;
  border: 2px solid var(--cvg-gold);
  box-shadow: 0 0 0 9999px rgba(20, 17, 14, 0.62), 0 0 22px rgba(200, 169, 106, 0.5);
  pointer-events: none;
  transition: all 0.3s ease;
}

/* A centred bubble (the welcome step) has no target, so the whole screen
   dims behind it instead. */
.cv-tour-bubble.is-centred::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(20, 17, 14, 0.62);
}

.cv-tour-bubble {
  position: absolute;
  width: min(330px, calc(100vw - 28px));
  padding: 20px 22px 16px;
  border-radius: 6px;
  background: var(--cvg-ivory);
  color: var(--cvg-ink);
  box-shadow: 0 24px 60px rgba(20, 17, 14, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.cv-tour-bubble.is-in { opacity: 1; transform: none; }

.cv-tour-bubble.is-centred {
  left: 50%;
  top: 50%;
  width: min(380px, calc(100vw - 32px));
  transform: translate(-50%, -46%);
}

.cv-tour-bubble.is-centred.is-in { transform: translate(-50%, -50%); }

.cv-tour-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--cvg-ivory);
  transform: translateX(-50%) rotate(45deg);
}

.cv-tour-arrow.points-up { top: -6px; }
.cv-tour-arrow.points-down { bottom: -6px; }

.cv-tour-count {
  margin: 0 0 7px;
  color: var(--cvg-dim);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cv-tour-title {
  margin: 0 0 8px;
  font-family: var(--cvg-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.22;
}

.cv-tour-body {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #2c2620;
}

.cv-tour-actions { display: flex; gap: 9px; align-items: center; }

.cv-tour-back,
.cv-tour-next {
  padding: 10px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.cv-tour-back {
  border: 1px solid var(--cvg-line);
  background: transparent;
  color: var(--cvg-dim);
}

.cv-tour-back:hover:not([disabled]) { border-color: var(--cvg-ink); color: var(--cvg-ink); }
.cv-tour-back[disabled] { opacity: 0.4; cursor: default; }

.cv-tour-next {
  margin-left: auto;
  border: 0;
  background: var(--cvg-ink);
  color: var(--cvg-ivory);
}

.cv-tour-next:hover { background: var(--cvg-rose); }

.cv-tour-outs {
  display: flex;
  gap: 16px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--cvg-line);
}

.cv-tour-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cvg-rose);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.cv-tour-link--quiet { margin-left: auto; color: var(--cvg-dim); font-weight: 400; }
.cv-tour-link:hover { color: #8e404b; }

.cv-tour-bubble a:focus-visible,
.cv-tour-bubble button:focus-visible,
.cv-guide-sheet a:focus-visible,
.cv-guide-sheet button:focus-visible,
.cv-guide-sheet input:focus-visible,
.cv-guide-launcher:focus-visible {
  outline: 3px solid var(--cvg-gold);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .cv-tour-bubble { width: calc(100vw - 28px); }
  .cv-tour-title { font-size: 1.16rem; }
  .cv-tour-outs { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-guide-launcher,
  .cv-guide-scrim,
  .cv-guide-sheet,
  .cv-tour-ring,
  .cv-tour-bubble,
  .cv-guide-result > a,
  .cv-guide-result > button { transition: none; }
  .cv-guide-launcher.has-hint .cv-guide-launcher-mark,
  .cv-guide-launcher.just-finished .cv-guide-launcher-mark { animation: none; }
  .cv-tour-bubble { transform: none; }
  .cv-tour-bubble.is-centred,
  .cv-tour-bubble.is-centred.is-in { transform: translate(-50%, -50%); }
}

/* ============================================================
   guide.html — the page that renders the same search, ask and
   browse in full width. Only loaded there; harmless elsewhere.
   ============================================================ */

.guide-page-section { padding: 0 0 10px; }

.guide-tool {
  max-width: 760px;
  padding: 26px 28px 30px;
  border: 1px solid var(--cvg-line, rgba(28, 24, 20, 0.14));
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(28, 24, 20, 0.07);
}

.guide-tool .cv-guide-input { font-size: 1rem; padding: 14px 16px; }
.guide-tool .cv-guide-submit { padding: 14px 26px; }
.guide-tool .cv-guide-out { margin-top: 22px; }

.guide-topic-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: 26px;
}

.guide-topic-card {
  padding: 22px 22px 18px;
  border: 1px solid rgba(28, 24, 20, 0.14);
  border-radius: 6px;
  background: #fff;
}

.guide-topic-card h3 {
  margin: 0 0 7px;
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.2;
}

.guide-topic-card > p {
  margin: 0;
  color: #5a5248;
  font-size: 0.85rem;
  line-height: 1.6;
}

.guide-tour-restart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  max-width: 760px;
  margin-top: 8px;
  padding: 20px 24px;
  border: 1px dashed rgba(28, 24, 20, 0.22);
  border-radius: 6px;
  background: rgba(200, 169, 106, 0.09);
}

.guide-tour-restart p { margin: 0; flex: 1 1 260px; font-size: 0.86rem; line-height: 1.6; color: #2c2620; }

@media (max-width: 620px) {
  .guide-tool { padding: 20px 18px 22px; }
  .guide-tool .cv-guide-field { flex-wrap: wrap; }
  .guide-tool .cv-guide-submit { width: 100%; }
}