/*
 * Detailed breakdown popup on /result (templates/result_breakdown/,
 * static/js/resultBreakdown.js). Same look as the result page itself: a light
 * grey page, white cards with the page's soft shadow, Bootstrap blue. Phones
 * first: below 576px wide the popup is full screen; wider screens get a
 * phone-sized sheet in the middle. Everything is scoped to .bd-modal, or to
 * .bd-inline for the same cards shown in the page (see the end of this file).
 */

.bd-modal,
.bd-inline {
  --bd-text: #212529;
  --bd-muted: #6c757d;
  --bd-line: #e9ecef;
  --bd-page: #f8f9fa;
  --bd-blue: #0d6efd;
  --bd-shadow: 0 8px 30px rgba(13, 42, 80, 0.09);
  color: var(--bd-text);
  -webkit-tap-highlight-color: transparent;
}

/* The site's sticky footer ad is fixed to the bottom of the screen above
   everything, this popup included. resultBreakdown.js measures whatever
   covers the bottom of the screen into --bd-bottom-gap, and the popup ends
   above it, so the ad stays visible and the controls stay usable. */
.bd-modal .bd-dialog {
  padding-bottom: var(--bd-bottom-gap, 0px);
}

/* ── Sheet ─────────────────────────────────────────────────────────────── */

.bd-modal .bd-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 0;
  background: var(--bd-page);
}

@media (min-width: 576px) {
  .bd-modal .bd-dialog {
    max-width: 440px;
  }
  .bd-modal .bd-sheet {
    height: min(820px, calc(100vh - 3.5rem - var(--bd-bottom-gap, 0px)));
    border-radius: 1rem;
  }
}

.bd-modal .bd-header {
  flex: none;
  background: #fff;
}

.bd-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.bd-view.bd-enter {
  animation: bdFadeIn 0.3s ease both;
}

@keyframes bdFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Loading ───────────────────────────────────────────────────────────── */

.bd-loading {
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 24px 32px;
  overflow-y: auto;
  text-align: center;
}

/* Framed like the photo on the result page. */
.bd-scan {
  --scan: min(56vw, 30vh, 220px);
  position: relative;
  flex: none;
  width: var(--scan);
  height: var(--scan);
  overflow: hidden;
  border: 3px solid rgba(13, 110, 253, 0.15);
  border-radius: 1rem;
  background: var(--bd-line);
  box-shadow: 0 6px 20px rgba(13, 42, 80, 0.14);
}

/* The whole photo, smaller where it is not square: nothing says where the
   face is yet, and it must never be cut at the forehead or chin. */
.bd-scan-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bd-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0) 0%, rgba(13, 110, 253, 0.14) 100%);
  border-bottom: 2px solid rgba(13, 110, 253, 0.75);
  animation: bdScan 2s ease-in-out infinite;
}

@keyframes bdScan {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(340%);
  }
}

.bd-loading-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.bd-info {
  max-width: 320px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--bd-muted);
}

/* ── Error ─────────────────────────────────────────────────────────────── */

.bd-error {
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px 40px;
  text-align: center;
}

.bd-error-icon {
  font-size: 2.6rem;
  line-height: 1;
  color: #f59f00;
}

.bd-error-text {
  max-width: 320px;
  margin: 0 0 6px;
  line-height: 1.5;
  color: var(--bd-muted);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

/* Native scroll snapping: momentum swiping on phones, one card per stop. The
   next card peeks in at the edge, so it is clear there is more. The side
   room comes from spacer pseudo-elements rather than padding, which some
   browsers leave out of the scrollable area at the end of a flex row (the
   last card could then not be centred). */
.bd-track {
  --bd-gutter: 16px;
  --bd-gap: 8px;
  position: relative;
  display: flex;
  gap: var(--bd-gap);
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bd-track::-webkit-scrollbar {
  display: none;
}

.bd-track::before,
.bd-track::after {
  content: "";
  flex: 0 0 calc(var(--bd-gutter) - var(--bd-gap));
}

.bd-slide {
  display: flex;
  flex: 0 0 calc(100% - 2 * var(--bd-gutter));
  min-height: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.bd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--bd-shadow);
}

.bd-card-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 16px 28px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bd-card-body::-webkit-scrollbar {
  display: none;
}

/* On a short screen a card scrolls; the fade at its foot says so. */
.bd-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  pointer-events: none;
}

.bd-card-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bd-text);
}

.bd-face {
  position: relative;
  height: clamp(170px, 28vh, 260px);
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--bd-line);
}

.bd-face-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.bd-warning {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  padding: 8px 10px;
  border: 1px solid #ffecb5;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #664d03;
  background: #fff3cd;
}

.bd-warning .bi {
  flex: none;
  margin-top: 1px;
}

.bd-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.bd-result-value {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--bd-blue);
}

.bd-result-unit {
  margin-left: 2px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bd-muted);
}

.bd-result-label {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--bd-muted);
}

.bd-status {
  display: inline-block;
  padding: 0.35em 0.85em;
  border-radius: 50rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: #495057;
  background: var(--bd-line);
}

.bd-status:empty {
  display: none;
}

.bd-status[data-status="perfect"] {
  color: #fff;
  background: #198754;
}

.bd-status[data-status="optimal"] {
  color: #0f5132;
  background: #d1e7dd;
}

.bd-status[data-status="out_of_range"] {
  color: #664d03;
  background: #fff3cd;
}

.bd-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--bd-muted);
}

.bd-subtitle {
  margin: 16px 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bd-text);
}

.bd-regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-regions li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.9rem;
  color: #495057;
}

.bd-region-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bd-text);
}

.bd-regions-single {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 12px;
}

/* Cards 1 to 5: the reference range as a bar, the optimal zone shaded and a
   dot for this face. On cards 1 and 2 (lower is better) the optimal zone
   starts at the best end, with the perfect zone darker inside it; on cards 3
   to 5 it sits inside the range. */
.bd-range {
  position: relative;
  height: 10px;
  margin-top: 14px;
  border-radius: 5px;
  background: var(--bd-line);
}

/* Card 1 prints a score where higher is better above its bar, so the bar is
   mirrored: its best end, where the zones start, is on the right. */
.bd-range-reversed {
  transform: scaleX(-1);
}

.bd-range-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from, 0%);
  width: var(--size, 0%);
  border-radius: 5px;
  background: #b9e2c9;
}

.bd-range-zone-perfect {
  background: #7fc79e;
}

.bd-range-dot {
  position: absolute;
  top: 50%;
  left: var(--at, 0%);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--bd-blue);
  box-shadow: 0 1px 4px rgba(13, 42, 80, 0.3);
  transition: left 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bd-unavailable {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--bd-muted);
  background: var(--bd-page);
}

/* Card 2: the five widths side by side, each as wide as its share. */
.bd-split {
  display: flex;
  gap: 4px;
  height: 48px;
  margin-top: 14px;
}

.bd-split-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: var(--grow, 20) 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f1f3f5;
  transition: flex-grow 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bd-split-seg:nth-child(2),
.bd-split-seg:nth-child(4) {
  background: #e7f1ff;
}

.bd-split-value {
  font-size: clamp(0.7rem, 3vw, 0.85rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bd-text);
}

.bd-split-name {
  max-width: 100%;
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--bd-muted);
}

/* ── Card 7: our app ───────────────────────────────────────────────────── */

.bd-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* Centred in the card when it fits; auto margins (unlike centring the flex
   column) fall back to the top when it does not, so nothing is cut off. */
.bd-app > :first-child {
  margin-top: auto;
}

.bd-app > :last-child {
  margin-bottom: auto;
}

.bd-app .bd-card-title {
  margin-bottom: 0;
  max-width: 18em;
  text-wrap: balance;
}

.bd-app-text {
  max-width: 21em;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--bd-muted);
}

.bd-app-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.bd-store {
  display: inline-block;
  border-radius: 10px;
}

.bd-store img {
  display: block;
  width: auto;
  height: 44px;
}

/* The app card's face scan (see 7_app.html): the visitor's photo with the
   mesh resultBreakdown.js draws on it, and labels with the app's
   feature scores hidden behind "?". The script places the labels next to
   the points they name and fades them in. Where the card is short (a small
   phone, the sticky ad), the photo gives up height first, down to
   min-height, so the store badges stay on screen without scrolling. */
.bd-mesh {
  position: relative;
  flex: 0 1 clamp(220px, 46vh, 400px);
  align-self: stretch;
  min-height: 170px;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--bd-line);
}

.bd-mesh-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(13, 42, 80, 0.25);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bd-text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.bd-mesh-score {
  position: relative;
  overflow: hidden;
  min-width: 2.4em;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
  background: var(--bd-blue);
}

/* Once the scan is done, a light sweeps over the hidden scores, a few
   times, one label after the other. */
.bd-mesh-score::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-120%);
}

.bd-mesh.is-done .bd-mesh-score::after {
  animation: bd-mesh-shine 2.8s ease-in-out calc(0.2s + var(--i, 0) * 0.12s) 3;
}

@keyframes bd-mesh-shine {
  0% {
    transform: translateX(-120%);
  }
  40%,
  100% {
    transform: translateX(120%);
  }
}

/* "Free" and "Private & Secure" above the store badges: plain pills in
   Bootstrap's subtle green and blue. */
.bd-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.bd-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.bd-perk-free {
  border-color: #a3cfbb;
  color: #0a3622;
  background: #d1e7dd;
}

.bd-perk-private {
  border-color: #9ec5fe;
  color: #052c65;
  background: #cfe2ff;
}

/* ── Controls: back, dots, next ────────────────────────────────────────── */

.bd-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  flex: none;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--bd-line);
  background: #fff;
}

.bd-modal .bd-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
}

.bd-modal .bd-prev:disabled {
  visibility: hidden;
}

.bd-next {
  justify-self: end;
}

.bd-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

/* A large tap target around a small dot; the current one is a short pill. */
.bd-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
}

.bd-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ced4da;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.bd-dot[aria-current="true"]::before {
  width: 20px;
  background: var(--bd-blue);
}

/* ── Short screens (small or landscape phones) ─────────────────────────── */

@media (max-height: 700px) {
  .bd-face {
    height: clamp(150px, 26vh, 220px);
  }
  .bd-result-value {
    font-size: 1.9rem;
  }
  .bd-mesh {
    flex-basis: clamp(180px, 38vh, 300px);
  }
  .bd-mesh-label {
    font-size: 0.7rem;
  }
}

/* ── In the page: the example results ──────────────────────────────────── */

/* /result/demo_result_woman and /result/demo_result_men
   (templates/demo_result.html) show the cards in the page itself, under the
   score: one below the other, two side by side on wide screens, each as tall
   as its content (nothing scrolls inside a card). */
.bd-inline .bd-track {
  display: grid;
  gap: 16px;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.bd-inline .bd-track::before,
.bd-inline .bd-track::after {
  content: none;
}

@media (min-width: 992px) {
  .bd-inline .bd-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* An odd card at the end sits in the middle of its row. */
  .bd-inline .bd-slide:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

.bd-inline .bd-card-body {
  padding-bottom: 20px;
  overflow: visible;
}

.bd-inline .bd-card::after {
  content: none;
}

.bd-inline .bd-face {
  height: 260px;
}

/* ── Less motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bd-modal *,
  .bd-modal *::before,
  .bd-modal *::after,
  .bd-inline *,
  .bd-inline *::before,
  .bd-inline *::after {
    animation: none !important;
    transition: none !important;
  }
}