/* 看圖美化：present（_build/polish.py） */
body .s-present {
  --present-w: 880px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* ---------- 頂列 ---------- */
body .s-present__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: calc(var(--safe-top) + var(--sp-2)) calc(var(--page-x) + var(--safe-right)) var(--sp-2) calc(var(--page-x) + var(--safe-left));
}
body .s-present__bar .c-btn--ghost {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  margin-right: calc(var(--sp-3) * -1);
  color: var(--text-2);
}
body .s-present__counter {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-footnote);
  line-height: 1;
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  font-variant-numeric: var(--num-feature);
}

/* ---------- 診間：橫向卡片軌道 ---------- */
body .s-present--clinic .s-present__track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
}
body .s-present--clinic .s-present__track::-webkit-scrollbar { display: none; }
body .s-present--clinic .s-present__track:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
  border-radius: var(--r-card);
}

body .s-present--clinic .s-present__card {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--sp-4) var(--sp-8);
  padding-inline: max(calc(var(--page-x) + var(--safe-left)), calc((100% - var(--present-w)) / 2));
}
/* 內容垂直置中偏上；內容過長時自動改為由上而下可捲動 */
body .s-present--clinic .s-present__card::before,
body .s-present--clinic .s-present__card::after { content: ""; display: block; min-height: 0; }
body .s-present--clinic .s-present__card::before { flex: 1 1 0; }
body .s-present--clinic .s-present__card::after { flex: 1.6 1 0; }

/* ---------- 卡片通用文字層級 ---------- */
body .s-present__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-callout);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: var(--ls-caption);
  color: var(--primary);
}
body .s-present--clinic .s-present__title::before {
  content: "";
  flex: none;
  width: 20px;
  height: 3px;
  border-radius: var(--r-chip);
  background: var(--accent);
}
body .s-present__body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
body .s-present__big {
  margin: 0;
  font-size: var(--present-fs);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: var(--ls-title);
  color: var(--text);
  font-variant-numeric: var(--num-feature);
}
body .s-present__sub {
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.8vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-2);
}
body .s-present__note {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-callout);
  line-height: 1.55;
  color: var(--text-3);
  max-width: 44ch;
}
body .s-present__warn {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-input);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-footnote);
  line-height: 1.5;
}
body .s-present__subtitle {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-footnote);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: var(--ls-caption);
  color: var(--text-3);
}
body .s-present__inline-note { color: var(--text-3); font-size: 0.85em; }

/* 清單 */
body .s-present__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.8vw, 1.375rem);
  line-height: 1.45;
  color: var(--text);
}
body .s-present__list > li {
  padding: var(--sp-3) 0;
  overflow-wrap: anywhere;
}
body .s-present__list > li + li { border-top: 1px solid var(--divider); }
body .s-present__list--big {
  counter-reset: q;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 1.875rem);
  line-height: 1.4;
  font-weight: 600;
}
body .s-present__list--big > li {
  counter-increment: q;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}
body .s-present__list--big > li::before {
  content: counter(q);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75em;
  font-weight: 700;
  font-variant-numeric: var(--num-feature);
}

/* 趨勢與統計 */
body .s-present__chart { width: 100%; min-width: 0; }
body .s-present__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
}
body .s-present__stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--r-input);
  background: var(--surface-2);
  min-width: 0;
}
body .s-present__stats dt { font-size: var(--fs-caption); line-height: 1.3; color: var(--text-3); letter-spacing: var(--ls-caption); }
body .s-present__stats dd {
  margin: 0;
  font-size: var(--fs-title3);
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: var(--num-feature);
  overflow-wrap: anywhere;
}
body .s-present .c-share-select { margin-top: var(--sp-2); }
body .s-present .c-share-select__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-callout); line-height: 1.4; }

/* ---------- 底部導覽 ---------- */
body .s-present__nav {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) calc(var(--page-x) + var(--safe-right)) calc(var(--safe-bottom) + var(--sp-4)) calc(var(--page-x) + var(--safe-left));
}
body .s-present__nav .c-btn--icon { flex: none; width: 48px; height: 48px; min-height: 48px; }
body .s-present__nav .c-btn--icon[disabled] { opacity: .35; }
body .s-present__dots { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0; }
body .s-present__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-chip);
  background: var(--surface-3);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
body .s-present__dot.is-active { width: 22px; background: var(--primary); }
body .s-present__hint { display: none; }

@media (min-width: 600px) {
  body .s-present__nav { justify-content: center; gap: var(--sp-5); }
  body .s-present__dots { flex: none; }
  body .s-present__nav .c-btn--icon { width: 52px; height: 52px; min-height: 52px; }
}
@media (min-width: 1024px) {
  body .s-present__hint {
    display: block;
    position: absolute;
    right: calc(var(--page-x) + var(--safe-right));
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-footnote);
    color: var(--text-3);
    white-space: nowrap;
  }
}

/* ---------- 家屬模式 ---------- */
body .s-present--family .s-present__bar { max-width: calc(var(--content-max) + 2 * var(--page-x)); width: 100%; margin-inline: auto; }
body .s-family__body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-x));
  margin-inline: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-2) calc(var(--page-x) + var(--safe-right)) calc(var(--safe-bottom) + var(--sp-8)) calc(var(--page-x) + var(--safe-left));
}
body .s-present--family .s-present__card {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
body .s-present--family .s-present__card:empty { display: none; }
body .s-present--family .s-present__title { margin-bottom: var(--sp-3); }
body .s-present--family .s-present__big { font-size: var(--fs-display); margin-bottom: var(--sp-3); }
body .s-present--family .s-present__sub { font-size: var(--fs-callout); }
body .s-present--family .s-present__list { font-size: var(--fs-body); }
body .s-present--family .s-present__note { margin-top: 0; }
body .s-present--family .c-review-days { margin-top: var(--sp-2); }
body .s-present--family .c-review-days__day {
  padding: var(--sp-2) 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-footnote);
  font-weight: 600;
}
body .s-present--family .c-review-days__day.is-active { background: var(--primary); color: var(--text-on-primary); }

/* 分享圖片 */
body .s-family__layout { display: flex; flex-direction: column; gap: var(--sp-5); }
body .s-family__layout .c-share-preview { position: relative; max-width: 300px; }
body .s-present .c-share-preview .s-present__sub {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-size: var(--fs-callout);
  text-align: center;
}
body .s-present .c-share-preview .s-present__sub:empty { display: none; }
body .s-family__options { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
body .s-family__options .c-check-list { gap: var(--sp-1); }
body .s-family__options .c-check-list__title {
  padding: 0 0 var(--sp-2);
  font-size: var(--fs-footnote);
  font-weight: 700;
  letter-spacing: var(--ls-caption);
  color: var(--text-3);
}
body .s-family__options .c-share-select { margin-top: 0; }
body .s-family__options .c-btn--block { min-height: var(--btn-h); }
body .s-family__result:empty { display: none; }

@media (min-width: 1024px) {
  body .s-present--family .s-present__bar,
  body .s-family__body { max-width: calc(var(--content-max-wide) + 2 * var(--page-x)); }
  body .s-family__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: var(--sp-5);
  }
  body .s-family__body > .s-present__note,
  body .s-family__body > .s-present__sub,
  body .s-family__body > .c-share-select,
  body .s-family__body > .s-family__layout,
  body .s-family__body > .s-present__card:last-child { grid-column: 1 / -1; }
  body .s-family__layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
  }
  body .s-family__layout .c-share-preview { position: sticky; top: 0; max-width: 380px; width: 100%; }
}

/* ---------- 手機橫式／矮螢幕 ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  body .s-present__bar { min-height: 44px; padding-block: var(--sp-1); }
  body .s-present__nav { padding-block: var(--sp-1) calc(var(--safe-bottom) + var(--sp-2)); }
  body .s-present__nav .c-btn--icon { width: 44px; height: 44px; min-height: 44px; }
  body .s-present--clinic .s-present__card { padding-block: var(--sp-2) var(--sp-4); }
  body .s-present__title { margin-bottom: var(--sp-2); }
  body .s-present__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .s-present__dot { transition-duration: 0.01ms; }
}