/* Decision Tree / Recommender Engine — structural styles.
 * ---------------------------------------------------------------------
 * EVERY visual decision routes through a --dt-* custom property with a
 * neutral fallback. Sites MUST override these (footprint rule — see
 * ADAPT.md). Never edit this file per site; skin via variables only.
 * --------------------------------------------------------------------- */

dt-recommender {
  display: block;
  font-family: var(--dt-font, inherit);
  color: var(--dt-ink, #222833);
}

/* SEO fallback: visible until JS upgrades, then sr-only for crawlers. */
dt-recommender.dt-enhanced .dt-fallback {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.dt-stage {
  border: var(--dt-border, 1px solid #d9dde4);
  border-radius: var(--dt-radius, 10px);
  background: var(--dt-bg, #fbfbfc);
  padding: var(--dt-pad, 1.25rem);
  max-width: var(--dt-max-width, 640px);
}

/* --- head / progress ------------------------------------------------------ */
.dt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .45rem;
}
.dt-progress-text {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--dt-muted, #6a7280);
}
.dt-restart {
  font: inherit; font-size: .78rem;
  color: var(--dt-muted, #6a7280);
  background: none; border: 0; padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dt-restart:hover { color: var(--dt-ink, #222833); }
.dt-restart:focus-visible { outline: 2px solid var(--dt-focus, #1a1a1a); outline-offset: 2px; }

.dt-bar {
  height: 6px;
  background: var(--dt-bar-bg, #e6e9ee);
  border-radius: 3px;
  overflow: hidden;
}
.dt-bar-fill {
  height: 100%;
  width: 0;
  background: var(--dt-bar-fill, #2c4a6e);
  border-radius: 3px;
  transition: width .3s ease;
}

/* --- question -------------------------------------------------------------- */
.dt-qtag {
  display: inline-block;
  margin-top: 1rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dt-accent, #2c4a6e);
}
.dt-question {
  margin: .7rem 0 .85rem;
  font-size: 1.12rem;
  line-height: 1.4;
}

/* --- answers --------------------------------------------------------------- */
.dt-answers { display: flex; flex-direction: column; gap: .5rem; }
.dt-answer {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font: inherit; font-size: .95rem;
  text-align: left;
  padding: .68rem .85rem;
  color: var(--dt-ink, #222833);
  background: var(--dt-answer-bg, #fff);
  border: var(--dt-answer-border, 1px solid #cfd4dc);
  border-radius: var(--dt-inner-radius, 8px);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .05s ease;
}
.dt-answer:hover {
  background: var(--dt-answer-bg-hover, #f2f4f7);
  border-color: var(--dt-answer-border-hover, #9aa4b2);
}
.dt-answer:active { transform: translateY(1px); }
.dt-answer:focus-visible { outline: 2px solid var(--dt-focus, #1a1a1a); outline-offset: 1px; }
.dt-answer-hint { font-size: .8rem; color: var(--dt-muted, #6a7280); }

/* --- nav ------------------------------------------------------------------- */
.dt-nav { margin-top: 1.1rem; }
.dt-btn {
  font: inherit; font-size: .92rem; font-weight: 600;
  padding: .5rem 1.1rem;
  color: var(--dt-ink, #222833);
  background: var(--dt-btn-bg, #eef0f4);
  border: 0;
  border-radius: var(--dt-inner-radius, 8px);
  cursor: pointer;
}
.dt-btn:hover:not(:disabled) { background: var(--dt-btn-bg-hover, #e2e6ec); }
.dt-btn:disabled { opacity: .45; cursor: default; }
.dt-btn:focus-visible { outline: 2px solid var(--dt-focus, #1a1a1a); outline-offset: 1px; }

/* --- result cards ----------------------------------------------------------- */
.dt-card {
  position: relative;
  padding: 1.1rem 1.2rem;
  background: var(--dt-card-bg, #fff);
  border: var(--dt-card-border, 1px solid #e2e5ea);
  border-radius: var(--dt-inner-radius, 8px);
  margin-bottom: .8rem;
}
.dt-card-winner {
  border: var(--dt-winner-border, 2px solid #2c4a6e);
  box-shadow: var(--dt-winner-shadow, 0 4px 18px rgba(20,24,32,.10));
}
.dt-card-badge {
  position: absolute;
  top: -.7rem; left: 1.1rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .6rem;
  color: var(--dt-badge-ink, #fff);
  background: var(--dt-badge-bg, #2c4a6e);
  border-radius: 99px;
}
.dt-card-name { margin: 0 0 .2rem; font-size: 1.2rem; }
.dt-card-winner .dt-card-name { font-size: 1.35rem; }
.dt-card-blurb { margin: 0 0 .5rem; font-size: .92rem; color: var(--dt-muted, #6a7280); }

.dt-reasons-title {
  display: block;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dt-muted, #6a7280);
  margin-bottom: .3rem;
}
.dt-reasons { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.dt-reason {
  font-size: .82rem;
  padding: .22rem .6rem;
  background: var(--dt-reason-bg, #eef3f8);
  color: var(--dt-reason-ink, #2c4a6e);
  border-radius: 99px;
}
.dt-reason::before { content: '✓ '; opacity: .7; }

.dt-cta {
  display: inline-block;
  margin-top: .35rem;
  padding: .5rem 1rem;
  font-size: .9rem; font-weight: 600;
  text-decoration: none;
  color: var(--dt-cta-ink, #fff);
  background: var(--dt-cta-bg, #2c4a6e);
  border-radius: var(--dt-inner-radius, 8px);
}
.dt-cta:hover { background: var(--dt-cta-bg-hover, #24405f); }

.dt-runners-title {
  margin: 1.1rem 0 .5rem;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dt-muted, #6a7280);
}
.dt-runners .dt-card { background: var(--dt-runner-bg, #f7f8fa); }
.dt-runners .dt-card-name { font-size: 1.05rem; }

.dt-nomatch { color: var(--dt-muted, #6a7280); font-size: .95rem; }
.dt-again { margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .dt-bar-fill, .dt-answer { transition: none; }
}