/* MDReasoning brand tokens (Version B). Every component imports this file so the
   variables exist inside each component's shadow root (Webflow renders code components
   in a Shadow DOM, so page styles cannot restyle them). Change brand values here. */
:host,
.mdr-root {
  --mdr-font: "Figtree", system-ui, -apple-system, sans-serif;
  --mdr-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --mdr-ink: #161514;
  --mdr-ink-ui: #262626;
  --mdr-muted: #586164;
  --mdr-muted-warm: #6b665f;
  --mdr-placeholder: #586164;

  --mdr-surface: #ffffff;
  --mdr-warm: #f4f0ea;
  --mdr-warm-2: #eae3da;
  --mdr-paper: #fcfaf7;
  --mdr-bubble: #f1ece5;
  --mdr-bubble-cool: #eff5f7;
  --mdr-line: #e6dfd5;
  --mdr-line-cool: #dee6e9;

  --mdr-teal: #0c806d;
  --mdr-teal-dark: #145847;
  --mdr-mint: #97ddca;
  --mdr-mint-50: #dcf7ef;
  --mdr-pine: #004441;
  --mdr-pine-50: #e2f5f1;

  --mdr-amber-50: #fbf0dc;
  --mdr-amber: #8a5a06;
  --mdr-amber-dot: #e0a33c;
  --mdr-rust-50: #fbe8e4;
  --mdr-rust: #a13223;

  --mdr-shadow-card: 0 28px 56px -14px rgba(0, 0, 0, 0.28);
  --mdr-shadow-window: 0 24px 56px -8px rgba(0, 69, 65, 0.08), 0 1px 2px rgba(38, 38, 38, 0.05);
  --mdr-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

.mdr-root {
  font-family: var(--mdr-font);
  color: var(--mdr-ink);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.mdr-root *,
.mdr-root *::before,
.mdr-root *::after {
  box-sizing: border-box;
}

/* Typing reveal: width is measured in JS and animated linearly. */
.mdr-type {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.mdr-type__clip {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.mdr-type__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  background: var(--mdr-teal);
  opacity: 0;
  transition: opacity 160ms linear;
}
.mdr-type--caret .mdr-type__caret {
  opacity: 1;
  animation: mdr-blink 1s steps(1) infinite;
}
@keyframes mdr-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdr-root *,
  .mdr-root *::before,
  .mdr-root *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Wrapping typing reveal (narrow containers). Ghost copy reserves the final height. */
.mdr-type-wrap {
  position: relative;
  display: block;
}
.mdr-type-wrap__ghost {
  visibility: hidden;
}
.mdr-type-wrap__live {
  position: absolute;
  inset: 0;
}
.mdr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mdr-hero {
  width: 420px;
  max-width: 100%;
  background: var(--mdr-surface);
  border-radius: 22px;
  box-shadow: var(--mdr-shadow-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 14px;
  line-height: 20px;
}
.mdr-hero[data-variant="immunizations"] {
  padding: 16px 18px;
  gap: 12px;
}

/* Patient header (immunizations) */
.mdr-hero__patient {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mdr-line);
}
.mdr-hero__initials {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--mdr-pine-50);
  color: var(--mdr-teal-dark);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.mdr-hero__patient-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 12px;
  line-height: 16px;
  color: var(--mdr-muted-warm);
}
.mdr-hero__patient-text strong {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--mdr-ink);
}
.mdr-hero__today {
  font-size: 12px;
  color: var(--mdr-muted-warm);
}

/* Question */
.mdr-hero__question {
  display: flex;
  justify-content: flex-end;
}
.mdr-hero__bubble {
  background: var(--mdr-bubble);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 85%;
}
.mdr-hero[data-variant="immunizations"] .mdr-hero__bubble {
  padding: 8px 14px;
}

/* Answer */
.mdr-hero__answer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--mdr-ease), transform 400ms var(--mdr-ease);
}
.mdr-hero__answer[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.mdr-hero__avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--mdr-pine);
  display: grid;
  place-items: center;
}
.mdr-hero__answer-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mdr-hero[data-variant="immunizations"] .mdr-hero__answer-col {
  gap: 8px;
}
.mdr-hero__answer-text {
  margin: 0;
  color: var(--mdr-ink);
  transition: color 300ms linear;
}
.mdr-hero__answer-text[data-muted="true"] {
  color: var(--mdr-muted-warm);
}

/* A1c chart */
.mdr-hero__chart {
  border: 1px solid var(--mdr-line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 400ms var(--mdr-ease);
}
.mdr-hero__chart[data-visible="true"] {
  opacity: 1;
}
.mdr-hero__plot {
  width: 100%;
  height: auto;
  overflow: visible;
}
.mdr-hero__grid {
  stroke: var(--mdr-line);
  stroke-width: 1;
}
.mdr-hero__line {
  fill: none;
  stroke: var(--mdr-teal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1400ms linear;
}
.mdr-hero[data-step="3"] .mdr-hero__line,
.mdr-hero[data-step="4"] .mdr-hero__line {
  stroke-dashoffset: 0;
}
.mdr-hero__end {
  fill: var(--mdr-surface);
  stroke: var(--mdr-teal);
  stroke-width: 2.4;
  opacity: 0;
  transition: opacity 300ms linear;
}
.mdr-hero[data-step="4"] .mdr-hero__end {
  opacity: 1;
}
.mdr-hero__years {
  display: flex;
  justify-content: space-between;
  font-family: var(--mdr-font-mono);
  font-size: 10px;
  line-height: 14px;
  color: var(--mdr-muted-warm);
}

/* Immunizations list */
.mdr-hero__vaccines {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mdr-line);
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 400ms var(--mdr-ease);
}
.mdr-hero__vaccines[data-visible="true"] {
  opacity: 1;
}
.mdr-hero__vaccine {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 18px;
  transition: background-color 400ms var(--mdr-ease);
}
.mdr-hero__vaccine + .mdr-hero__vaccine {
  border-top: 1px solid var(--mdr-line);
}
.mdr-hero__vaccine[data-flag="true"] {
  background: rgba(251, 240, 220, 0.6);
}
.mdr-hero__vaccine-name {
  flex: 1;
}
.mdr-hero__vaccine-name strong {
  font-weight: 500;
}
.mdr-hero__vaccine-name span {
  font-size: 12px;
  color: var(--mdr-muted-warm);
  margin-left: 4px;
}
.mdr-hero__vaccine-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mdr-hero__due {
  background: var(--mdr-amber-50);
  color: var(--mdr-amber);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  opacity: 0;
  transition: opacity 300ms linear;
}
.mdr-hero__vaccine[data-flag="true"] .mdr-hero__due {
  opacity: 1;
}

.mdr-hero__source {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--mdr-muted-warm);
  opacity: 0;
  transition: opacity 400ms linear;
}
.mdr-hero__source[data-visible="true"] {
  opacity: 1;
}