/* Doctor Arrange — product-specific presentation */

.arrange-hero {
  background:
    radial-gradient(circle at 84% 24%, rgba(49, 132, 246, .12), transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, var(--ds-surface-soft) 100%);
}

/* Keep the workflow disclaimer visually separated from the step descriptions. */
.arrange-page .detail-workflow .detail-disclaimer { margin-top: 48px; }

@media (max-width: 820px) {
  .arrange-page .detail-workflow .detail-disclaimer { margin-top: 30px; }
}

.arrange-hero-media,
.arrange-briefing-evidence,
.arrange-record-visual,
.arrange-board-visual {
  min-width: 0;
  margin: 0;
}

/* Simulated product UI below intentionally keeps its compact fixed type scale. */
/* Hero product flow */
.arrange-night-visual {
  min-height: 500px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--ds-radius-card);
  color: var(--ds-white);
  background:
    radial-gradient(circle at 88% 6%, rgba(49, 132, 246, .25), transparent 32%),
    #191f28;
}

.arrange-night-heading {
  padding-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.arrange-night-heading div { display: grid; gap: 5px; }
.arrange-night-heading span { color: #8ebcff; font-size: 13px; line-height: 20px; font-weight: var(--type-weight-bold); letter-spacing: .05em; }
.arrange-night-heading strong { color: var(--ds-white); font-size: 40px; line-height: 48px; letter-spacing: -.04em; }
.arrange-night-heading p { margin: 0; color: #c8d0da; font-size: 15px; line-height: 24px; }

.arrange-night-steps {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.arrange-night-steps li {
  min-height: 76px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
}

.arrange-night-steps li > span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #aeb7c1;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--type-weight-bold);
}

.arrange-night-steps li div { min-width: 0; display: grid; gap: 3px; }
.arrange-night-steps li strong { color: var(--ds-white); font-size: 15px; line-height: 23px; }
.arrange-night-steps li p { margin: 0; color: #aeb7c1; font-size: 13px; line-height: 20px; }
.arrange-night-steps li > i { color: #8f99a4; font-size: 12px; line-height: 20px; font-style: normal; }
.arrange-night-steps li.is-complete > span { color: #a7c9ff; background: rgba(49, 132, 246, .18); }
.arrange-night-steps li.is-complete > i { color: #8ebcff; }
.arrange-night-steps li.is-current { border-color: rgba(49, 132, 246, .55); background: rgba(49, 132, 246, .12); }
.arrange-night-steps li.is-current > span { color: var(--ds-white); background: var(--ds-blue); }
.arrange-night-steps li.is-current > i { color: #8ebcff; font-weight: var(--type-weight-bold); }

.arrange-night-summary {
  margin-top: 20px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.arrange-night-summary span { color: #aeb7c1; font-size: 13px; line-height: 20px; }
.arrange-night-summary strong { color: #8ebcff; font-size: 14px; line-height: 22px; text-align: right; }

/* Patient briefing evidence */
.arrange-briefing-evidence { width: 100%; }

.arrange-briefing-evidence__grid {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  border: 1px solid #e1e6ec;
  border-radius: var(--ds-radius-card);
  background: #eef2f6;
  box-shadow: 0 18px 38px rgba(25, 31, 40, .08);
}

.arrange-evidence-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e6eb;
  border-radius: 16px;
  background: var(--ds-white);
  box-shadow: 0 7px 18px rgba(25, 31, 40, .05);
}

.arrange-evidence-card__heading {
  min-height: 24px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.arrange-evidence-card__heading span {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ds-blue);
  background: rgba(49, 132, 246, .1);
  font-size: 10px;
  line-height: 1;
  font-weight: var(--type-weight-bold);
}

.arrange-evidence-card__heading h3 { margin: 0; color: var(--ds-ink); font-size: 13px; line-height: 20px; }

.arrange-evidence-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #f7f8fa;
}

.arrange-evidence-card--overview { grid-column: 1; }
.arrange-evidence-card--overview .arrange-evidence-card__media {
  height: 380px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f8fa;
}
.arrange-evidence-card--overview img { height: 100%; object-fit: cover; object-position: top; }

.arrange-briefing-evidence__stack {
  grid-column: 2;
  min-width: 0;
  display: grid;
  gap: 14px;
}

.arrange-evidence-card--note { grid-column: 1 / -1; }


/* Patient flow board */
.arrange-board-visual { margin-top: 64px; }
.arrange-board-visual > div { background: var(--ds-white); }

.arrange-board-toolbar {
  min-height: 76px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--ds-line);
}

.arrange-board-toolbar strong { color: var(--ds-ink); font-size: 18px; line-height: 27px; }
.arrange-board-toolbar div { display: flex; flex-wrap: wrap; gap: 8px; }
.arrange-board-toolbar span { padding: 7px 10px; border-radius: 999px; color: var(--ds-muted); background: var(--ds-surface); font-size: 12px; line-height: 18px; }
.arrange-board-toolbar span:first-child { color: var(--ds-white); background: var(--ds-blue); }

.arrange-board-columns {
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.arrange-board-columns section {
  min-height: 330px;
  padding: 18px 14px;
  border: 1px solid #e6e9ed;
  border-radius: 16px;
  background: var(--ds-surface-soft);
}

.arrange-board-columns h3 { margin: 0 4px 14px; color: var(--ds-body); font-size: 14px; line-height: 22px; }
.arrange-board-columns article { margin-top: 10px; padding: 14px; display: grid; gap: 5px; border: 1px solid #e2e6ea; border-radius: 12px; background: var(--ds-white); }
.arrange-board-columns article b { color: var(--ds-ink); font-size: 14px; line-height: 22px; }
.arrange-board-columns article span { color: var(--ds-blue); font-size: 12px; line-height: 18px; font-weight: var(--type-weight-bold); }
.arrange-board-columns article small { color: var(--ds-muted); font-size: 12px; line-height: 19px; }
.arrange-board-columns article.is-alert { border-color: rgba(225, 53, 53, .28); background: #fff7f7; }
.arrange-board-columns article.is-alert span { color: var(--ds-danger); }

.arrange-board-points {
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.arrange-board-points li { padding-top: 20px; border-top: 2px solid var(--ds-blue); }
.arrange-board-points strong { display: block; color: var(--ds-ink); font-size: var(--detail-body-1); line-height: var(--detail-line-body-1); font-weight: var(--type-weight-bold); }
.arrange-board-points span { display: block; margin-top: 8px; color: var(--ds-muted); font-size: var(--detail-body-2); line-height: var(--detail-line-body-2); }

/* Consultation record */
.arrange-record-visual > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.arrange-record-visual section {
  min-height: 430px;
  padding: 28px 24px;
  border: 1px solid var(--ds-line);
  border-radius: 20px;
}

.arrange-record-today { background: var(--ds-white); }
.arrange-record-next { background: #f4f8ff; }
.arrange-record-visual section > span { color: var(--ds-blue); font-size: 13px; line-height: 20px; font-weight: var(--type-weight-bold); }
.arrange-record-visual section > strong { display: block; margin-top: 18px; color: var(--ds-ink); font-size: 19px; line-height: 29px; }
.arrange-record-today dl { margin: 32px 0 0; display: grid; gap: 0; }
.arrange-record-today dl div { padding: 17px 0; border-top: 1px solid var(--ds-line); }
.arrange-record-today dt { color: var(--ds-muted); font-size: 12px; line-height: 19px; }
.arrange-record-today dd { margin: 6px 0 0; color: var(--ds-body); font-size: 14px; line-height: 22px; font-weight: var(--type-weight-semibold); }
.arrange-record-next ol { margin: 32px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.arrange-record-next li { min-height: 54px; padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 12px; color: var(--ds-body); background: rgba(255, 255, 255, .82); font-size: 13px; line-height: 20px; font-weight: var(--type-weight-semibold); }
.arrange-record-next li b { width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ds-blue); background: rgba(49, 132, 246, .1); font-size: 11px; }

/* Final CTA */
.arrange-contact {
  background:
    radial-gradient(circle at 82% 18%, rgba(49, 132, 246, .32), transparent 34%),
    linear-gradient(135deg, #11181f 0%, #1d2b3a 100%);
}

.arrange-contact::after { background: linear-gradient(90deg, rgba(17, 24, 31, .22), transparent 72%); }

.arrange-page .detail-contact .detail-button--secondary {
  color: var(--ds-white);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
}

.arrange-page .detail-contact .detail-button--secondary:hover {
  color: var(--ds-white);
  background: rgba(255, 255, 255, .16);
  border-color: var(--ds-white);
}

@media (max-width: 1040px) {
  .arrange-hero-media { max-width: 720px; }
  .arrange-night-visual { min-height: 460px; }
  .arrange-briefing-evidence,
  .arrange-record-visual { max-width: 720px; }
}

@media (min-width: 821px) {
  .arrange-briefing-evidence { max-width: 500px; justify-self: center; }
  .arrange-briefing-evidence__grid {
    position: relative;
    min-height: 540px;
    padding: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .arrange-evidence-card { position: absolute; }
  .arrange-evidence-card--overview {
    top: 0;
    left: 0;
    width: 42%;
    z-index: 3;
    grid-column: auto;
  }
  .arrange-evidence-card--overview .arrange-evidence-card__media { height: 320px; }
  .arrange-briefing-evidence__stack {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    display: block;
    grid-column: auto;
  }
  .arrange-briefing-evidence__stack .arrange-evidence-card { position: relative; width: 100%; }
  .arrange-briefing-evidence__stack .arrange-evidence-card + .arrange-evidence-card {
    width: 76%;
    margin: -75px 0 0 auto;
    position: relative;
    z-index: 2;
  }
  .arrange-evidence-card--note {
    left: 0;
    bottom: 0;
    width: 50%;
    z-index: 4;
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  .arrange-briefing-evidence__grid { grid-template-columns: 1fr; }
  .arrange-evidence-card--overview,
  .arrange-briefing-evidence__stack,
  .arrange-evidence-card--note { grid-column: auto; }
  .arrange-evidence-card--overview { width: min(100%, 360px); justify-self: center; }
  .arrange-board-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrange-board-columns section { min-height: 280px; }
  .arrange-board-points { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .arrange-night-visual { min-height: 0; padding: 24px 20px; border-radius: 20px; }
  .arrange-night-heading { align-items: flex-start; }
  .arrange-night-heading strong { font-size: 34px; line-height: 42px; }
  .arrange-night-heading p { padding-top: 3px; text-align: right; }
  .arrange-night-steps li { min-height: 0; grid-template-columns: 32px minmax(0, 1fr); }
  .arrange-night-steps li > i { display: none; }
  .arrange-night-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .arrange-night-summary strong { text-align: left; }
  .arrange-briefing-evidence__grid,
  .arrange-record-visual > div { grid-template-columns: 1fr; }
  .arrange-briefing-evidence__grid { padding: 10px; gap: 12px; }
  .arrange-evidence-card { padding: 8px; border-radius: 14px; }
  .arrange-evidence-card--overview,
  .arrange-briefing-evidence__stack,
  .arrange-evidence-card--note { grid-column: auto; }
  .arrange-evidence-card--overview { width: min(100%, 340px); justify-self: center; }
  .arrange-evidence-card--overview .arrange-evidence-card__media { height: auto; }
  .arrange-evidence-card--overview img { height: auto; object-fit: contain; }
  .arrange-briefing-evidence__stack { gap: 12px; }
  .arrange-record-visual section { padding: 22px 20px; border-radius: 16px; }
  .arrange-record-visual section { min-height: 330px; }
  .arrange-board-visual { margin-top: 44px; }
  .arrange-board-toolbar { align-items: flex-start; flex-direction: column; }
  .arrange-board-columns { padding: 14px; grid-template-columns: 1fr; }
  .arrange-board-columns section { min-height: 0; }
  .arrange-board-points { margin-top: 32px; }
}