/* ==========================================================================
   app.css — SANNA Mobile App Prototype
   Shared styles for all screens
   Mobile-first, max-width 390px centered on desktop
   All values via design tokens — no hardcoded colors/spacing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base reset & body
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  /* Typography */
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  color: var(--neutral-color-xhigh);

  /* Desktop: show the phone frame centered on a gray bg */
  background: var(--neutral-color-low);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   App shell — phone-sized container
   -------------------------------------------------------------------------- */
.app-shell {
  width: 100%;
  max-width: 390px;
  min-height: 100dvh;
  background: var(--neutral-color-xlow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  box-shadow: var(--shadow-down-large);
}

/* --------------------------------------------------------------------------
   HOME header — green bar with hamburger / logo / bell
   -------------------------------------------------------------------------- */
.app-header {
  background: var(--color-brand-primary-medium);
  padding: var(--spacing-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
  flex-shrink: 0;
}

.app-header__icon-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-circular);
  transition: background var(--transition-base);
  flex-shrink: 0;
}

.app-header__icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.app-header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
}

.app-header__logo-img {
  height: 1.75rem;
  width: auto;
}

/* --------------------------------------------------------------------------
   FLOW header — white bar with back / title / close
   -------------------------------------------------------------------------- */
.flow-header {
  background: white;
  padding: var(--spacing-m);
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  border-bottom: 1px solid var(--neutral-color-low);
  flex-shrink: 0;
}

.flow-header__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary-medium);
  border-radius: var(--border-radius-circular);
  flex-shrink: 0;
  text-decoration: none;
  transition: background var(--transition-base);
}

.flow-header__btn:hover {
  background: var(--color-brand-primary-xlow);
}

.flow-header__title {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-xhigh);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Stepper — 5 numbered circles connected by lines
   -------------------------------------------------------------------------- */
.stepper {
  display: flex;
  align-items: center;
  padding: var(--spacing-m) var(--spacing-l);
  background: white;
  flex-shrink: 0;
}

.stepper__step {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  border: 2px solid var(--color-brand-primary-medium);
  color: var(--color-brand-primary-medium);
  background: white;
  transition: background var(--transition-base), color var(--transition-base);
}

.stepper__step--done,
.stepper__step--active {
  background: var(--color-brand-primary-medium);
  color: white;
  border-color: var(--color-brand-primary-medium);
}

.stepper__line {
  flex: 1;
  height: 2px;
  background: var(--neutral-color-low);
}

.stepper__line--done {
  background: var(--color-brand-primary-medium);
}

/* --------------------------------------------------------------------------
   Scrollable content area
   -------------------------------------------------------------------------- */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Step heading block (centered title + subtitle)
   -------------------------------------------------------------------------- */
.step-heading {
  text-align: center;
  padding: var(--spacing-l) var(--spacing-l) var(--spacing-m);
}

.step-heading h1 {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  line-height: var(--line-height-small);
  margin-bottom: var(--spacing-xs);
}

.step-heading p {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-xlarge);
}

/* --------------------------------------------------------------------------
   Info alert — light green card for informational messages
   -------------------------------------------------------------------------- */
.info-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  background: var(--color-brand-primary-xlow);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  color: var(--color-brand-primary-high);
  font-size: var(--font-size-s);
  line-height: var(--line-height-xlarge);
  margin: 0 var(--spacing-m);
}

.info-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-brand-primary-medium);
}

/* --------------------------------------------------------------------------
   Option cards — selectable (coverage, location)
   -------------------------------------------------------------------------- */
.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: 0 var(--spacing-m);
}

.option-card {
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  display: block;
  color: inherit;
}

.option-card h3 {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  margin-bottom: var(--spacing-2xs);
}

.option-card p {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
}

.option-card:hover {
  border-color: var(--color-brand-primary-low);
  box-shadow: var(--shadow-down-medium);
}

.option-card--selected {
  border-color: var(--color-brand-primary-medium);
}

/* --------------------------------------------------------------------------
   Patient card
   -------------------------------------------------------------------------- */
.patient-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  border: 2px solid var(--color-brand-primary-medium);
  margin: 0 var(--spacing-m);
}

.patient-card__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--neutral-color-low);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-color-medium);
  flex-shrink: 0;
}

.patient-card__info h3 {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.patient-card__info p {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
}

/* --------------------------------------------------------------------------
   Add family button — green text link
   -------------------------------------------------------------------------- */
.btn-add-family {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  color: var(--color-brand-primary-medium);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--spacing-l) var(--spacing-m);
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  width: 100%;
}

.btn-add-family:hover {
  color: var(--color-brand-primary-high);
}

/* --------------------------------------------------------------------------
   Radio list items — checkup types
   -------------------------------------------------------------------------- */
.radio-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-m);
}

.radio-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-base);
}

.radio-item:hover {
  border-color: var(--color-brand-primary-low);
}

.radio-item__radio {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--neutral-color-medium);
  flex-shrink: 0;
  transition: border-color var(--transition-base), background var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item--selected .radio-item__radio {
  border-color: var(--color-brand-primary-medium);
  background: var(--color-brand-primary-medium);
  box-shadow: inset 0 0 0 3px white;
}

.radio-item--selected {
  border-color: var(--color-brand-primary-medium);
}

.radio-item__label {
  flex: 1;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-xhigh);
}

.radio-item__chevron {
  color: var(--neutral-color-medium);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Location cards — clinic selection
   -------------------------------------------------------------------------- */
.location-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: 0 var(--spacing-m);
}

.location-card {
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-base);
  text-decoration: none;
  display: block;
  color: inherit;
}

.location-card:hover {
  border-color: var(--color-brand-primary-low);
}

.location-card--selected {
  border-color: var(--color-brand-primary-medium);
}

.location-card h3 {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  margin-bottom: var(--spacing-xs);
}

.location-card__address {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
}

.location-card__address svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-brand-primary-medium);
}

/* --------------------------------------------------------------------------
   Filter pills — date range selection
   -------------------------------------------------------------------------- */
.filter-pills {
  display: flex;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-m);
  flex-wrap: wrap;
}

.filter-pill {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--border-radius-circular);
  border: 1px solid var(--neutral-color-low);
  background: white;
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.filter-pill:hover {
  border-color: var(--color-brand-primary-low);
}

.filter-pill--active {
  border-color: var(--color-brand-primary-medium);
  background: var(--color-brand-primary-xlow);
  color: var(--color-brand-primary-high);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Date list — schedule slots
   -------------------------------------------------------------------------- */
.date-list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--spacing-m);
}

.date-item {
  padding: var(--spacing-m) 0;
  border-bottom: 1px solid var(--neutral-color-low);
}

.date-item:last-child {
  border-bottom: none;
}

.date-item__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-xs);
}

.date-item__day {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-m);
  color: var(--neutral-color-xhigh);
}

.date-item__full {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
}

.date-item__slots {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.time-slot {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--border-radius-circular);
  border: 1px solid var(--neutral-color-low);
  background: white;
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  transition: border-color var(--transition-base);
}

.time-slot__radio {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--neutral-color-medium);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.time-slot--selected {
  border-color: var(--color-brand-primary-medium);
  color: var(--color-brand-primary-high);
  font-weight: var(--font-weight-medium);
}

.time-slot--selected .time-slot__radio {
  border-color: var(--color-brand-primary-medium);
  background: var(--color-brand-primary-medium);
  box-shadow: inset 0 0 0 3px white;
}

/* --------------------------------------------------------------------------
   Bottom action bar — sticky button area
   -------------------------------------------------------------------------- */
.bottom-action {
  padding: var(--spacing-m);
  background: white;
  border-top: 1px solid var(--neutral-color-low);
  flex-shrink: 0;
}

.btn-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-input);
  border-radius: var(--border-radius-circular);
  border: none;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-base), opacity var(--transition-base);
}

.btn-full--primary {
  background: var(--color-brand-primary-medium);
  color: white;
}

.btn-full--primary:hover {
  background: var(--color-brand-primary-high);
}

.btn-full--disabled {
  background: var(--neutral-color-low);
  color: var(--neutral-color-medium);
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Confirmation summary card
   -------------------------------------------------------------------------- */
.summary-card {
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  margin: 0 var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.summary-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-s);
  background: var(--color-brand-secondary-xlow);
  color: var(--color-brand-secondary-high);
  border-radius: var(--border-radius-circular);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  width: fit-content;
}

.summary-date-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

.summary-context {
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-xlarge);
}

.summary-service {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-medium);
}

.summary-address {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-xlarge);
}

.summary-patient-label {
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
  margin-bottom: var(--spacing-2xs);
}

.summary-patient-name {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

/* Success alert — green banner */
.success-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  background: var(--color-brand-primary-xlow);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  color: var(--color-brand-primary-high);
  font-size: var(--font-size-s);
  line-height: var(--line-height-xlarge);
  margin: 0 var(--spacing-m);
}

.success-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-brand-primary-medium);
}

/* Cost row */
.cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-m) var(--spacing-m);
  border-top: 1px solid var(--neutral-color-low);
  font-size: var(--font-size-m);
  color: var(--neutral-color-xhigh);
}

.cost-value {
  font-weight: var(--font-weight-bold);
}

/* Confirm CTA */
.confirm-cta {
  padding: var(--spacing-m);
  background: white;
  border-top: 1px solid var(--neutral-color-low);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   HOME SCREEN styles
   -------------------------------------------------------------------------- */

/* Greeting */
.home-greeting {
  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

/* Promo banner carousel */
.promo-wrapper {
  padding: 0 var(--spacing-m);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.promo-wrapper::-webkit-scrollbar {
  display: none;
}

.promo-track {
  display: flex;
  gap: var(--spacing-m);
}

.promo-banner {
  /* Promotional orange — partner brand color, not from design system */
  background: #E87722;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  min-width: 82%;
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  flex-shrink: 0;
}

.promo-banner__logo-wrap {
  background: white;
  border-radius: var(--border-radius-small);
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  flex-shrink: 0;
}

.promo-banner__logo-wrap img {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

.promo-banner__body {
  color: white;
}

.promo-banner__body p {
  font-size: var(--font-size-s);
  line-height: var(--line-height-large);
}

.promo-banner__body strong {
  display: block;
  font-weight: var(--font-weight-bold);
}

.promo-banner__link {
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-s);
  text-decoration: underline;
  cursor: pointer;
}

/* Dots indicator */
.banner-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
}

.banner-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--neutral-color-low);
}

.banner-dot--active {
  background: var(--color-brand-primary-medium);
  width: 1.25rem;
  border-radius: 3px;
}

/* Service grid 3×2 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-m);
  padding: var(--spacing-xs) var(--spacing-m);
}

.service-card {
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m) var(--spacing-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-s);
  text-decoration: none;
  color: var(--neutral-color-xhigh);
  box-shadow: var(--shadow-down-small);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  text-align: center;
  min-height: 5.5rem;
}

.service-card:hover {
  box-shadow: var(--shadow-down-medium);
  transform: translateY(-2px);
}

.service-card__icon {
  color: var(--color-brand-primary-medium);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--neutral-color-xhigh);
}

/* No appointments */
.no-appointments {
  text-align: center;
  padding: var(--spacing-l) var(--spacing-l);
  color: var(--neutral-color-medium);
  font-size: var(--font-size-s);
  line-height: var(--line-height-xlarge);
}

/* Ambulance CTA button */
.btn-ambulance {
  margin: var(--spacing-xs) var(--spacing-m) var(--spacing-m);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-s);
  height: var(--size-input);
  border-radius: var(--border-radius-circular);
  border: 2px solid var(--feedback-color-danger-medium);
  background: white;
  color: var(--feedback-color-danger-medium);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
}

.btn-ambulance:hover {
  background: var(--feedback-color-danger-xlow);
}

/* --------------------------------------------------------------------------
   Utility — spacer between content sections
   -------------------------------------------------------------------------- */
.section-gap {
  height: var(--spacing-m);
}

/* --------------------------------------------------------------------------
   Confirmation hero — full-bleed celebration section
   Replaces the flow-header + stepper on final screens
   -------------------------------------------------------------------------- */
.confirm-hero {
  background: var(--color-brand-primary-medium);
  padding: var(--spacing-2xl) var(--spacing-l) var(--spacing-xl);
  text-align: center;
  color: white;
  flex-shrink: 0;
}

.confirm-hero--express {
  background: var(--color-brand-primary-high);
}

.confirm-hero__check {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-m);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  color: var(--color-brand-primary-medium);
}

.confirm-hero--express .confirm-hero__check {
  color: var(--color-brand-primary-high);
}

.confirm-hero__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  margin-bottom: var(--spacing-xs);
}

.confirm-hero__subtitle {
  font-size: var(--font-size-s);
  line-height: var(--line-height-xlarge);
  opacity: 0.9;
  margin-bottom: var(--spacing-l);
}

/* Frosted glass pill with appointment summary */
.confirm-hero__pill {
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: left;
}

.confirm-hero__pill-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
}

.confirm-hero__pill-row svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Pre-visit forms card — shown when chequeo includes medicina general
   -------------------------------------------------------------------------- */
.pre-visit-card {
  margin: var(--spacing-m) var(--spacing-m) 0;
  background: var(--color-brand-primary-xlow);
  border: 1.5px solid var(--color-brand-primary-low);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
}

.pre-visit-card__icon {
  width: var(--size-icon-feature);
  height: var(--size-icon-feature);
  border-radius: var(--border-radius-small);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-primary-medium);
  flex-shrink: 0;
  box-shadow: var(--shadow-down-small);
}

.pre-visit-card__text {
  flex: 1;
  min-width: 0;
}

.pre-visit-card__title {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary-high);
  margin-bottom: var(--spacing-2xs);
}

.pre-visit-card__sub {
  font-size: var(--font-size-xs);
  color: var(--color-brand-primary-medium);
  line-height: var(--line-height-large);
}

.pre-visit-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--border-radius-circular);
  background: var(--color-brand-primary-medium);
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.pre-visit-card__btn:hover {
  background: var(--color-brand-primary-high);
}

/* --------------------------------------------------------------------------
   Express results timeline card
   -------------------------------------------------------------------------- */
.results-card {
  margin: var(--spacing-m) var(--spacing-m) 0;
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
}

.results-card__title {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  margin-bottom: var(--spacing-m);
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-step {
  display: flex;
  gap: var(--spacing-s);
  position: relative;
}

/* Connecting line between steps */
.timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.6875rem; /* center of the 1.375rem dot */
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background: var(--color-brand-primary-low);
}

.timeline-step__dot {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--color-brand-primary-xlow);
  border: 2px solid var(--color-brand-primary-medium);
  color: var(--color-brand-primary-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  z-index: 1;
}

.timeline-step__content {
  padding-bottom: var(--spacing-m);
  flex: 1;
}

.timeline-step:last-child .timeline-step__content {
  padding-bottom: 0;
}

.timeline-step__label {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-xhigh);
  line-height: var(--line-height-large);
}

.timeline-step__note {
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Confirm bottom — home button area
   -------------------------------------------------------------------------- */
.confirm-action {
  padding: var(--spacing-m);
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Checkup type selector cards (step 3)
   CSS-only radio selection via input:checked + label pattern
   Button visibility controlled by :has() on .app-shell
   -------------------------------------------------------------------------- */

/* Visually hidden radio inputs */
.chk-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Card list container */
.checkup-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: 0 var(--spacing-m);
}

/* Card — label acts as the interactive element */
.checkup-card {
  display: block;
  background: white;
  border-radius: var(--border-radius-medium);
  border: 2px solid transparent;
  box-shadow: var(--shadow-down-small);
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  padding: var(--spacing-m);
}

.checkup-card:hover {
  border-color: var(--color-brand-primary-low);
  box-shadow: var(--shadow-down-medium);
}

/* Always-visible card header */
.checkup-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-m);
}

/* Custom radio dot */
.checkup-card__radio-dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--neutral-color-medium);
  flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.checkup-card__info {
  flex: 1;
  min-width: 0;
}

.checkup-card__title-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2xs);
}

.checkup-card__name {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

.checkup-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-2xs);
}

.checkup-card__subtitle {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
}

/* Tags on checkup type cards */
.checkup-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem var(--spacing-xs);
  border-radius: var(--border-radius-circular);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.checkup-tag svg {
  flex-shrink: 0;
  /* Tags always use stroke-width 2.5 for legibility at 10px */
}

.checkup-tag--presencial {
  background: var(--color-brand-secondary-xlow);
  color: var(--color-brand-secondary-high);
}

.checkup-tag--domicilio {
  background: var(--feedback-color-info-xlow);
  color: var(--feedback-color-info-high);
}

.checkup-tag--duration {
  background: var(--neutral-color-low);
  color: var(--neutral-color-high);
}

/* Expanded details — hidden by default, revealed on :checked */
.checkup-card__details {
  display: none;
  margin-top: var(--spacing-m);
  padding-top: var(--spacing-m);
  border-top: 1px solid var(--neutral-color-low);
}

/* input:checked + label — selected card visual state */
.chk-radio:checked + .checkup-card {
  border-color: var(--color-brand-primary-medium);
}

.chk-radio:checked + .checkup-card .checkup-card__radio-dot {
  border-color: var(--color-brand-primary-medium);
  background: var(--color-brand-primary-medium);
  box-shadow: inset 0 0 0 3px white;
}

.chk-radio:checked + .checkup-card .checkup-card__details {
  display: block;
}

/* --------------------------------------------------------------------------
   Exam groups — inside expanded checkup cards and personaliza page
   -------------------------------------------------------------------------- */
.exam-section {
  margin-bottom: var(--spacing-l);
}

.exam-section:last-child {
  margin-bottom: 0;
}

.exam-section__title {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  margin-bottom: var(--spacing-2xs);
}

.exam-section__note {
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
  margin-bottom: var(--spacing-xs);
}

/* Bullet list for Chequeo Completo read-only view */
.exam-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.exam-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-large);
}

.exam-bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary-medium);
  flex-shrink: 0;
  margin-top: 0.45rem;
}

/* Checkbox list for Personaliza page */
.exam-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  margin-top: var(--spacing-xs);
}

.exam-check-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

.exam-check-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  /* Explicit box sizing so width/height are predictable */
  box-sizing: content-box;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  flex-shrink: 0;
  align-self: center;
  border: 2px solid var(--neutral-color-medium);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all var(--transition-base);
  /* position:relative required so ::after is relative to the box */
  position: relative;
  margin: 0;
  background: white;
  display: block;
}

.exam-check-item input[type="checkbox"]:checked {
  background: var(--color-brand-primary-medium);
  border-color: var(--color-brand-primary-medium);
}

/* Checkmark — centered inside the box using translate */
.exam-check-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: translate(-50%, -62%) rotate(45deg);
}

.exam-check-item input[type="checkbox"]:disabled {
  background: var(--color-brand-primary-xlow);
  border-color: var(--color-brand-primary-low);
  cursor: not-allowed;
}

.exam-check-item input[type="checkbox"]:disabled:checked::after {
  border-color: var(--color-brand-primary-high);
}

.exam-check-item label {
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  cursor: pointer;
  line-height: var(--line-height-large);
  flex: 1;
}

.exam-check-item--mandatory label {
  color: var(--neutral-color-medium);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Patient radio cards (step 1)
   Same input:checked + label pattern as step 3 checkup cards
   -------------------------------------------------------------------------- */
.patient-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Override the static selected border — make it selection-driven */
label.patient-card {
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  margin: 0 var(--spacing-m);
}

label.patient-card:hover {
  border-color: var(--color-brand-primary-low);
}

.patient-radio:checked + label.patient-card {
  border-color: var(--color-brand-primary-medium);
}

/* --------------------------------------------------------------------------
   Gender filter — segmented pill control (step3-personaliza)
   -------------------------------------------------------------------------- */
.gender-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gender-filter {
  display: flex;
  background: var(--neutral-color-low);
  border-radius: var(--border-radius-circular);
  padding: 3px;
  margin: 0 var(--spacing-m) var(--spacing-m);
}

.gender-pill {
  flex: 1;
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--border-radius-circular);
  font-size: var(--font-size-s);
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--neutral-color-medium);
  font-family: 'Roboto', sans-serif;
  user-select: none;
}

/* Risk condition items on express check screen */
.risk-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: 0 var(--spacing-m);
}

.risk-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-m);
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  line-height: var(--line-height-large);
}

.risk-item__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--feedback-color-warning-medium);
  flex-shrink: 0;
  margin-top: 0.35rem;
}

/* Express warning alert */
.warning-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  background: var(--feedback-color-warning-xlow);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  color: var(--feedback-color-warning-xhigh);
  font-size: var(--font-size-s);
  line-height: var(--line-height-xlarge);
  margin: 0 var(--spacing-m);
}

.warning-alert svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--feedback-color-warning-medium);
}

/* Secondary link button below primary CTA */
.btn-secondary-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary-medium);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Roboto', sans-serif;
  width: 100%;
}

.btn-secondary-link:hover {
  color: var(--color-brand-primary-high);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Personaliza intro — path-choice cards (test vs manual)
   Uses input:checked + label like checkup cards
   -------------------------------------------------------------------------- */
.path-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: 0 var(--spacing-m);
}

.path-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.path-card {
  display: block;
  background: white;
  border-radius: var(--border-radius-medium);
  border: 2px solid transparent;
  box-shadow: var(--shadow-down-small);
  cursor: pointer;
  padding: var(--spacing-m);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.path-card:hover {
  border-color: var(--color-brand-primary-low);
  box-shadow: var(--shadow-down-medium);
}

.path-radio:checked + .path-card {
  border-color: var(--color-brand-primary-medium);
  box-shadow: var(--shadow-down-medium);
}

.path-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-s);
}

.path-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--border-radius-small);
  background: var(--color-brand-primary-xlow);
  color: var(--color-brand-primary-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.path-radio:checked + .path-card .path-card__icon {
  background: var(--color-brand-primary-medium);
  color: white;
}

.path-card__meta {
  flex: 1;
}

.path-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-2xs);
}

.path-card__name {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

.path-card__desc {
  font-size: var(--font-size-s);
  color: var(--neutral-color-medium);
  line-height: var(--line-height-large);
}

.path-card__radio-dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--neutral-color-medium);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all var(--transition-base);
}

.path-radio:checked + .path-card .path-card__radio-dot {
  border-color: var(--color-brand-primary-medium);
  background: var(--color-brand-primary-medium);
  box-shadow: inset 0 0 0 3px white;
}

/* Hidden continue btn until a path is chosen */
.btn-path { display: none; }
.app-shell:has(.path-radio:checked) .btn-path { display: flex; }

/* --------------------------------------------------------------------------
   Quiz — question blocks and radio options
   -------------------------------------------------------------------------- */
.quiz-question {
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  margin: 0 var(--spacing-m);
}

.quiz-question + .quiz-question {
  margin-top: var(--spacing-s);
}

.quiz-question__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
  line-height: var(--line-height-large);
  margin-bottom: var(--spacing-s);
}

.quiz-question__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-brand-primary-xlow);
  color: var(--color-brand-primary-high);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Visually-hidden radio input — adjacent sibling controls label style */
.quiz-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  background: var(--neutral-color-low);
  border-radius: var(--border-radius-small);
  border: 2px solid transparent;
  padding: var(--spacing-s) var(--spacing-m);
  cursor: pointer;
  font-size: var(--font-size-s);
  color: var(--neutral-color-high);
  font-family: 'Roboto', sans-serif;
  line-height: var(--line-height-large);
  transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

/* Pseudo radio dot inside label */
.quiz-option::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--neutral-color-medium);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.quiz-radio:checked + .quiz-option {
  background: var(--color-brand-primary-xlow);
  border-color: var(--color-brand-primary-medium);
  color: var(--color-brand-primary-high);
  font-weight: var(--font-weight-medium);
}

.quiz-radio:checked + .quiz-option::before {
  border-color: var(--color-brand-primary-medium);
  background: var(--color-brand-primary-medium);
  box-shadow: inset 0 0 0 3px white;
}

/* CTA hidden until all 4 questions are answered */
.btn-quiz-result { display: none; }
.app-shell:has(#q1a:checked, #q1b:checked, #q1c:checked):has(#q2a:checked, #q2b:checked, #q2c:checked):has(#q3a:checked, #q3b:checked, #q3c:checked):has(#q4a:checked, #q4b:checked, #q4c:checked) .btn-quiz-result { display: flex; }

/* --------------------------------------------------------------------------
   Recommendation badge — shown on pre-selected exam items
   -------------------------------------------------------------------------- */
.rec-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border-radius: var(--border-radius-circular);
  background: var(--color-brand-secondary-xlow);
  color: var(--color-brand-secondary-high);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: var(--spacing-2xs);
  vertical-align: middle;
  flex-shrink: 0;
}

/* Recommendation plan banner */
.rec-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  background: var(--color-brand-secondary-xlow);
  border: 1px solid var(--color-brand-secondary-low);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  color: var(--color-brand-secondary-high);
  font-size: var(--font-size-s);
  line-height: var(--line-height-xlarge);
  margin: 0 var(--spacing-m);
}

.rec-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-brand-secondary-medium);
}

/* --------------------------------------------------------------------------
   Exam section card — white card container for personaliza pages
   -------------------------------------------------------------------------- */
.exam-section-card {
  background: white;
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-m);
  box-shadow: var(--shadow-down-small);
  margin: 0 var(--spacing-m);
}

.exam-section-card + .exam-section-card {
  margin-top: var(--spacing-s);
}

/* Remove flex gap inside personaliza cards; border separator handles spacing */
.exam-section-card .exam-check-list {
  gap: 0;
  margin-top: var(--spacing-s);
}

.exam-section-card .exam-check-item + .exam-check-item {
  padding-top: var(--spacing-s);
  margin-top: var(--spacing-s);
  border-top: 1px solid var(--neutral-color-low);
}

/* Mandatory exam badge */
.mandatory-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--spacing-xs);
  border-radius: var(--border-radius-circular);
  background: var(--color-brand-primary-xlow);
  color: var(--color-brand-primary-high);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-left: var(--spacing-xs);
  vertical-align: middle;
}

/* Selection hint at bottom of personaliza pages */
.selection-summary {
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-m);
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
}

/* --------------------------------------------------------------------------
   Exam section header — icon + title block on personaliza pages
   -------------------------------------------------------------------------- */
.exam-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-s);
}

.exam-section__icon-box {
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.exam-section__icon-box--aplica {
  background: var(--color-brand-primary-xlow);
  color: var(--color-brand-primary-medium);
}

.exam-section__icon-box--imagen {
  background: var(--feedback-color-info-xlow);
  color: var(--feedback-color-info-high);
}

.exam-section__icon-box--prev {
  background: var(--feedback-color-success-xlow);
  color: var(--feedback-color-success-high);
}

.exam-section__icon-box--clinica {
  background: var(--color-brand-secondary-xlow);
  color: var(--color-brand-secondary-high);
}

.exam-section__header-text {
  flex: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Bottom sheet — CSS-only slide-up panel
   Triggered by <input type="checkbox" id="quiz-sheet" class="sheet-toggle">
   Open:  .app-shell:has(#quiz-sheet:checked)
   Close: uncheck the input via a <label for="quiz-sheet">
   -------------------------------------------------------------------------- */
.sheet-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

.bottom-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 19, 20, 0);
  transition: background var(--transition-slow);
  cursor: pointer;
  display: block;
}

.bottom-sheet__panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(102%);
  width: 100%;
  max-width: 390px;
  background: white;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-slow);
  box-shadow: var(--shadow-up-large);
}

/* ── Open state ── */
.app-shell:has(#quiz-sheet:checked) ~ .bottom-sheet,
.app-shell:has(#quiz-sheet:checked) .bottom-sheet {
  pointer-events: auto;
}

.app-shell:has(#quiz-sheet:checked) ~ .bottom-sheet .bottom-sheet__backdrop,
.app-shell:has(#quiz-sheet:checked) .bottom-sheet__backdrop {
  background: rgba(18, 19, 20, 0.48);
}

.app-shell:has(#quiz-sheet:checked) ~ .bottom-sheet .bottom-sheet__panel,
.app-shell:has(#quiz-sheet:checked) .bottom-sheet__panel {
  transform: translateX(-50%) translateY(0);
}

/* Drag handle indicator */
.bottom-sheet__handle {
  width: 2.5rem;
  height: 0.25rem;
  background: var(--neutral-color-low);
  border-radius: var(--border-radius-circular);
  margin: var(--spacing-s) auto var(--spacing-xs);
  flex-shrink: 0;
}

/* Sheet header */
.bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-m) var(--spacing-s);
  flex-shrink: 0;
}

.bottom-sheet__title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: var(--neutral-color-xhigh);
}

/* Close button — <label for="quiz-sheet"> */
.bottom-sheet__close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--neutral-color-low);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-color-medium);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base);
  font-size: var(--font-size-s);
  line-height: 1;
}

.bottom-sheet__close:hover {
  background: var(--neutral-color-medium);
  color: white;
}

/* Sheet content scroll area */
.bottom-sheet__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  overscroll-behavior: contain;
}

/* Sheet progress bar */
.sheet-progress {
  padding: var(--spacing-xs) var(--spacing-m);
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  flex-shrink: 0;
}

.sheet-progress__track {
  flex: 1;
  height: 4px;
  background: var(--neutral-color-low);
  border-radius: var(--border-radius-circular);
  overflow: hidden;
}

.sheet-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-brand-primary-medium);
  border-radius: var(--border-radius-circular);
  transition: width var(--transition-slow);
}

.sheet-progress__label {
  font-size: var(--font-size-xs);
  color: var(--neutral-color-medium);
  white-space: nowrap;
  min-width: 4rem;
  text-align: right;
}

/* Progress bar animation as questions are answered */
.app-shell:has(#q1a:checked, #q1b:checked, #q1c:checked)
  .sheet-progress__bar { width: 25%; }

.app-shell:has(#q1a:checked, #q1b:checked, #q1c:checked):has(#q2a:checked, #q2b:checked, #q2c:checked)
  .sheet-progress__bar { width: 50%; }

.app-shell:has(#q1a:checked, #q1b:checked, #q1c:checked):has(#q2a:checked, #q2b:checked, #q2c:checked):has(#q3a:checked, #q3b:checked, #q3c:checked)
  .sheet-progress__bar { width: 75%; }

.app-shell:has(#q1a:checked, #q1b:checked, #q1c:checked):has(#q2a:checked, #q2b:checked, #q2c:checked):has(#q3a:checked, #q3b:checked, #q3c:checked):has(#q4a:checked, #q4b:checked, #q4c:checked)
  .sheet-progress__bar { width: 100%; }

/* Sheet footer with CTA */
.bottom-sheet__footer {
  padding: var(--spacing-m);
  border-top: 1px solid var(--neutral-color-low);
  flex-shrink: 0;
  background: white;
}