/* Discharge Summary AI — /solutions/discharge-summary-ai/
   Page-only styles. Builds on style.css tokens and components. */

/* Hero: clinical notes -> WhatsApp summary --------------------------------- */
.ds-collage {
  position: relative;
  width: min(100%, 548px);
  height: 612px;
  margin-inline: auto;
}

.ds-notes { position: absolute; top: 64px; left: 0; width: 272px; }
.ds-notes__body {
  padding: 14px 14px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.ds-notes__body p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ds-notes__body b { font-weight: 600; color: var(--ink); }
.ds-notes__rx { margin-top: 4px; font-weight: 600; color: var(--ink); }
.ds-notes mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--warn-tint);
  color: var(--ink);
}
.ds-notes__sign {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.ds-notes__sign .icon { width: 14px; height: 14px; color: var(--brand-strong); }

.ds-arrow {
  position: absolute;
  top: 214px;
  left: 252px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: var(--ink);
  color: var(--mint);
}
.ds-arrow .icon { width: 18px; height: 18px; }

.ds-phone { position: absolute; top: 0; right: 0; z-index: 2; }
.ds-summary { display: grid; gap: 7px; padding: 12px 10px; }
.ds-summary .bubble { max-width: 100%; font-size: 12px; }

.ds-meds, .ds-watch { display: grid; gap: 5px; }
.ds-meds__title,
.ds-watch__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
}
.ds-meds__title .icon { width: 14px; height: 14px; color: var(--brand-strong); }
.ds-watch__title .icon { width: 14px; height: 14px; color: var(--danger); }
.ds-meds__row {
  display: grid;
  line-height: 1.35;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}
.ds-meds__row b { font-size: 12px; color: var(--ink); }
.ds-meds__row span { font-size: 11.5px; color: var(--muted); }
.ds-watch { border-left: 3px solid var(--danger); }
.ds-watch ul { display: grid; gap: 1px; font-size: 11.5px; color: var(--ink-2); }
.ds-watch li::before { content: "• "; color: var(--danger); }
.ds-follow { display: flex; align-items: flex-start; gap: 6px; }
.ds-follow .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--brand-strong); }

.ds-chip-ai { position: absolute; top: 408px; left: 0; z-index: 3; }
.ds-chip-ok { position: absolute; bottom: 0; left: 120px; z-index: 3; }

/* Shorthand decoder --------------------------------------------------------- */
.ds-decode { display: grid; gap: 12px; }
.ds-decode__head { display: none; }
.ds-decode__row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.ds-decode__note {
  justify-self: start;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.ds-decode__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--mint);
  transform: rotate(90deg);
}
.ds-decode__arrow .icon { width: 16px; height: 16px; }
.ds-decode__plain { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* Night: guardrails ----------------------------------------------------------- */
.ds-guard { display: grid; gap: 16px; }
.ds-guard__card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--night-line);
  border-radius: var(--r-lg);
  background: var(--night-2);
}
.ds-guard__card h3 { font-size: 19px; }
.ds-guard__card .check-list { margin-top: 20px; }
.ds-guard__card--never .check-list .icon { background: rgba(255, 255, 255, .08); color: var(--night-text); }
.ds-metrics { margin-top: 16px; }

@media (min-width: 760px) {
  .ds-guard { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .ds-decode__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.25fr);
    gap: 24px;
    padding: 0 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ds-decode__head span:last-child { grid-column: 3; }
  .ds-decode__row { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.25fr); gap: 24px; padding: 18px 24px; }
  .ds-decode__arrow { transform: none; }
}

@media (max-width: 639px) {
  .ds-collage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: auto;
  }
  .ds-notes,
  .ds-arrow,
  .ds-phone,
  .ds-chip-ai,
  .ds-chip-ok { position: relative; inset: auto; }
  .ds-notes { width: min(100%, 320px); }
  .ds-arrow { transform: rotate(90deg); }
}

/* 1024–1263px: the hero column is narrower than the mockup, so scale the stage as a unit
   (values leave room for a desktop scrollbar). */
@media (min-width: 1024px) and (max-width: 1099px) { .ds-stage { zoom: .78; } }
@media (min-width: 1100px) and (max-width: 1179px) { .ds-stage { zoom: .85; } }
@media (min-width: 1180px) and (max-width: 1263px) { .ds-stage { zoom: .92; } }