/* patients.css — For Patients page, "Did Carrie call you?" (Figma frame 254:1709)

   Static desktop layout only; responsive and interactivity passes to follow.
   Values marked "FLAG: no token" come straight from the Figma frame and have
   no matching design token in tokens.css yet. */

/* Figma pads every section 173px left/right at 1440 wide, which leaves a
   1094px content column; centered here so wider screens don't left-align.
   FLAG: no token (1094px). */
.patients-container {
  max-width: 1094px;
  margin: 0 auto;
}

/* Hero ------------------------------------------------------------------ */

/* Two 315px layers from Figma: the lavender gradient, and a fade to white
   that starts 55% of the way down. FLAG: no token (#e6e0ec border; 72/64px
   padding; 136deg angle; 35%/70%/55% stops; 315px layer height). */
.patients-hero {
  border-top: 1px solid #e6e0ec;
  padding: 72px 0 64px;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 55%, var(--color-white) 100%) top / 100% 315px no-repeat,
    linear-gradient(136deg, var(--color-white) 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%) top / 100% 315px no-repeat;
  overflow: hidden;
}

/* FLAG: no token (12px gap). */
.patients-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Figma "Caption" text style — same treatment as the legal pages' label.
   FLAG: no token (line-height 1.8, letter-spacing 4%). */
.patients-hero__label {
  margin: 0;
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-caption-size);
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent1-500);
}

/* FLAG: no token (820px max-width, 12px gap). */
.patients-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

/* FLAG: no token (#151515 heading color — not in the Neutral ramp; nearest
   is --color-neutral-900 #18191b; 780px max-width). */
.patients-hero__title {
  max-width: 780px;
  margin: 0;
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  color: #151515;
}

.patients-hero__accent {
  color: var(--color-primary-500);
}

/* 660px max-width. */
.patients-hero__intro {
  max-width: 660px;
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-900);
}

/* Information sections --------------------------------------------------- */

/* FLAG: no token (80px vertical padding). */
.patients-info {
  padding: 80px 0;
  background: var(--color-white);
}

/* FLAG: no token (48px between info items; between --space-lg and --space-xl). */
.patients-info__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* FLAG: no token (6px heading-to-body gap). */
.patients-info__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* FLAG: no token (#151515 heading color). */
.patients-info__title {
  margin: 0;
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: #151515;
}

/* 600px max-width on single-paragraph items. */
.patients-info__text {
  max-width: 600px;
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-900);
}

/* "What is Carrie?" runs full width and spans several paragraphs. */
.patients-info__text--wide {
  max-width: none;
}

.patients-info__text p {
  margin: 0;
}

/* Figma separates these paragraphs with an empty line; one body line-height. */
.patients-info__text .is-spaced {
  margin-top: calc(var(--font-body-regular-line-height) * 1em);
}

.patients-info__text strong {
  font-weight: var(--font-weight-bold);
}

/* Figma styles "care plan" as bold, underlined Primary/600 — but it has no
   link destination in the frame (flagged). */
.patients-info__highlight {
  color: var(--color-primary-600);
  text-decoration: underline;
}

/* Subtitle under "Hear what a call sounds like" — Figma "Body Medium" (2%
   tracking), in Neutral/500 rather than the section's Neutral/900. */
.patients-info__subtitle {
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  letter-spacing: var(--font-nav-letter-spacing);
  color: var(--color-neutral-500);
}

/* Audio sample (Figma "Component 16") ------------------------------------
   Markup and behavior copied from the Home page player (index.html +
   js/pages/index.js → js/pages/patients.js); sized here to this Figma frame
   (48px button, 36px waveform). State styles below mirror css/pages/index.css. */

/* Figma places a 1140px component in the 1094px column (it overflows right
   by 46px; flagged). FLAG: no token (1140px width, 24/40px padding, 16px
   radius, 12px gap). */
.patients-audio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 1140px;
  padding: 24px 40px;
  background: var(--color-white);
  border-radius: 16px;
}

/* Inset shadow = Figma's inside stroke, so the 1px edge doesn't add to the
   88px box height. FLAG: no token (22px gap, 20/22px padding, 16px radius). */
.audio-player {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 22px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-neutral-200);
  border-radius: 16px;
}

.audio-player__audio {
  display: none;
}

/* FLAG: no token (48px button). */
.audio-player__play {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-primary-500);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.audio-player__play:hover {
  background-color: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
}

.audio-player__play:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 4px;
}

/* 11x14 Primary/600 triangle at Figma's exact offset inside the circle —
   same shape the home page player draws, so no separate icon asset. */
.audio-player__play-glyph {
  position: absolute;
  left: 17.5px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 11px solid var(--color-primary-600);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* Pause glyph while playing (JS toggles .is-playing): two 3px bars, 4px
   apart — the bar plus its box-shadow copy — centered in the circle. */
.audio-player__play.is-playing .audio-player__play-glyph {
  left: 18px;
  width: 3px;
  height: 14px;
  border: none;
  background: var(--color-primary-600);
  box-shadow: 7px 0 0 var(--color-primary-600);
}

/* FLAG: no token (36px waveform height). */
.audio-player__waveform {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 36px;
  cursor: pointer;
  touch-action: none; /* required, or mobile scroll steals the seek drag */
}

.audio-player__waveform:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 4px;
}

.audio-player__waveform-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--color-neutral-200) 6%, var(--color-neutral-200) 94%, transparent 100%);
}

.audio-player__waveform-bars {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
  width: 100%;
  height: 100%;
}

/* Bars are built by patients.js from the peaks JSON, with width/height set
   inline; JS also paints the played portion Primary/600. */
.audio-player__waveform-bars span {
  flex: none;
  min-height: 3px;
  border-radius: 999px;
  background: var(--color-neutral-200);
}

/* FLAG: no token (13px). */
.audio-player__time {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-medium);
  font-size: 13px;
  font-variant-numeric: tabular-nums; /* stops elapsed-time digits jittering */
  color: var(--color-neutral-900);
  white-space: nowrap;
}

.audio-player__time .audio-player__time-sep {
  color: var(--color-neutral-350);
}

.audio-player__time .audio-player__time-total {
  color: var(--color-neutral-600);
}

@media (prefers-reduced-motion: reduce) {
  .audio-player__play {
    transition: none;
  }
}

/* FLAG: no token (16px line-height). */
.patients-audio__note {
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-0);
  line-height: 16px;
  color: var(--color-neutral-500);
}

.transcript {
  margin: 0;
}

/* FLAG: no token (16px line-height). */
.transcript__toggle {
  display: block;
  width: fit-content;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-0);
  line-height: 16px;
  color: var(--color-primary-600);
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.transcript__toggle::-webkit-details-marker {
  display: none;
}

.transcript__body {
  margin-top: 16px;
  padding: 16px 20px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-neutral-200);
  border-radius: 12px;
  background: var(--color-neutral-25);
}

.transcript__body p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0 0 8px;
  padding: 3px 8px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.transcript__body p:last-child {
  margin-bottom: 0;
}

.transcript__body p strong {
  font-weight: var(--font-body-bold-weight);
  color: var(--color-neutral-900);
}

/* Line currently being spoken (JS toggles .is-active during playback). */
.transcript__body p.is-active {
  background: var(--color-primary-100);
  color: var(--color-neutral-900);
}

/* Emergency guidance ----------------------------------------------------- */

/* FLAG: no token (#fae6e7 background; fixed 173px height; 57px top padding).
   Not in the Accent2 ramp or the status colors. */
.patients-emergency {
  height: 173px;
  padding-top: 57px;
  background: #fae6e7;
}

.patients-emergency__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* FLAG: no token (#b43636 — nearest is --color-status-critical #b91c1c). */
.patients-emergency__title {
  margin: 0;
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: #b43636;
}

.patients-emergency__text {
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-900);
}