/* 看圖美化：help（_build/polish.py） */
body .s-help {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
body .s-help > * { margin: 0; }

/* 視覺順序：就醫提醒與 119 最先，其次是非即時監看聲明 */
body .s-help [aria-labelledby="help-flags"],
body .s-help > [aria-labelledby="help-flags"] { order: 1; }
body .s-help > [aria-labelledby="help-call"] { order: 2; }
body .s-help > [aria-labelledby="help-notice"] { order: 3; }
body .s-help > [aria-labelledby="help-care"] { order: 4; }
body .s-help > [aria-labelledby="help-usage"] { order: 5; }
body .s-help > [aria-labelledby="help-mood"] { order: 6; }
body .s-help > [aria-labelledby="help-questions"] { order: 7; }

/* ---------- 示範資料橫幅 ---------- */
body .c-demo-banner {
  justify-content: flex-start;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-footnote);
  line-height: 1.4;
}
body .c-demo-banner > svg { flex: none; }
body .c-demo-banner > :not(.c-btn):not(svg) {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
body .c-demo-banner .c-btn {
  flex: none;
  margin-left: auto;
  padding: 0 var(--sp-4);
  white-space: nowrap;
  border-color: var(--border);
}
@media (min-width: 600px) {
  body .c-demo-banner {
    border: 1px solid var(--border);
    border-radius: var(--r-input);
  }
}

/* ---------- 紅旗就醫提醒卡 ---------- */
body .c-redflag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
  min-width: 0;
}
body .c-redflag > .c-redflag__icon { flex: none; width: 24px; height: 24px; }
body .c-redflag > .c-redflag__title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-title3);
  line-height: 1.4;
  text-wrap: balance;
}
body .c-redflag > :not(.c-redflag__icon):not(.c-redflag__title) {
  flex: 1 1 100%;
  min-width: 0;
  writing-mode: horizontal-tb;
}
body .c-redflag__list {
  margin: 0;
  padding-left: var(--sp-5);
  list-style: disc;
  font-size: var(--fs-callout);
  line-height: 1.55;
  color: var(--text);
}
body .c-redflag__list li { padding-left: var(--sp-1); break-inside: avoid; }
body .c-redflag__list li + li { margin-top: var(--sp-2); }
body .c-redflag__list li::marker { color: var(--danger); }

/* 卡片底部「情況緊急請撥打 119」：由膠囊改為一般提示列，避免與下方大按鈕重複搶眼 */
body .c-redflag__foot,
body .c-redflag__call,
body .c-redflag__cta,
body .c-redflag__badge,
body .c-redflag__emergency {
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--danger);
  font-size: var(--fs-callout);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  writing-mode: horizontal-tb;
  letter-spacing: 0;
}
body .c-redflag__foot {
  padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}
body .c-redflag__foot .c-redflag__call { padding: 0; border: 0; }

/* ---------- 撥打 119 ---------- */
body .s-help__call .c-btn {
  min-height: 56px;
  font-size: var(--fs-title3);
  letter-spacing: .02em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--danger) 28%, transparent);
}

/* ---------- 非即時監看聲明：用偽元素色條，避免圓角卡片左框變成月牙形 ---------- */
body .s-help__notice {
  border-left: 1px solid var(--border);
  overflow: hidden;
}
body .s-help__notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
}
body .s-help__notice > .c-privacy-line { color: var(--text-3); }

/* ---------- 藥品使用說明：降一級，作為次要資訊 ---------- */
body .s-help__usage .s-help__notice-text {
  color: var(--text-2);
  font-size: var(--fs-footnote);
  line-height: 1.6;
}
body .s-help__usage .s-help__notice-row > svg { width: 20px; height: 20px; color: var(--text-3); }

/* ---------- 心情支持：按鈕在暖色底上改用白底，避免綠灰與杏色互相混濁 ---------- */
body .s-help__mood > .c-btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- 看診問題連結：低層級的外框按鈕 ---------- */
body .s-help [aria-labelledby="help-questions"] .c-btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--primary);
  border-color: var(--border);
}

/* ---------- 區段內卡片等高（供多欄使用） ---------- */
body .s-help__section > .c-card,
body .s-help__section > .c-redflag { flex: 1 1 auto; }

/* ---------- 平板：紅旗清單分兩欄，善用寬度 ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
  body .c-redflag__list {
    columns: 2;
    column-gap: var(--sp-8);
  }
  body .s-help [aria-labelledby="help-questions"] .c-btn {
    width: auto;
    align-self: flex-start;
    padding: 0 var(--sp-6);
  }
}

/* ---------- 桌面：兩欄格線，左側緊急資訊、右側說明與資源 ---------- */
@media (min-width: 1024px) and (min-height: 501px) {
  body { --help-w: min(1040px, calc(100vw - var(--nav-w) - 2 * var(--page-x))); }

  body .s-help,
  body .c-demo-banner {
    width: var(--help-w);
    max-width: none;
    margin-left: calc((100% - var(--help-w)) / 2);
    margin-right: calc((100% - var(--help-w)) / 2);
  }
  body .c-demo-banner { margin-bottom: var(--sp-4); }

  body .s-help {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
      "flags notice"
      "flags call"
      "care mood"
      "usage questions";
    gap: var(--sp-4) var(--sp-5);
    align-items: stretch;
  }
  body .s-help > [aria-labelledby="help-flags"] { grid-area: flags; }
  body .s-help > [aria-labelledby="help-notice"] { grid-area: notice; }
  body .s-help > [aria-labelledby="help-call"] { grid-area: call; }
  body .s-help > [aria-labelledby="help-care"] { grid-area: care; }
  body .s-help > [aria-labelledby="help-mood"] { grid-area: mood; }
  body .s-help > [aria-labelledby="help-usage"] { grid-area: usage; }
  body .s-help > [aria-labelledby="help-questions"] { grid-area: questions; align-self: start; }

  body .s-help__mood {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-4);
  }
  body .s-help__mood > .c-btn {
    align-self: stretch;
    width: auto;
    min-width: 0;
  }
  body .s-help__notice-text { max-width: none; }
  body .c-redflag__list { columns: 1; }
}

/* ---------- 手機橫式矮螢幕 ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  body .c-redflag { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  body .c-redflag__list { columns: 2; column-gap: var(--sp-6); }
  body .s-help { gap: var(--sp-3); }
  body .s-help__call .c-btn { min-height: var(--tap); }
}