/* 看圖美化：inject（_build/polish.py） */
body .c-demo-banner .c-btn { flex: none; white-space: nowrap; }

/* ============ 版面骨架 ============ */
body .s-inject { min-width: 0; }
body .s-inject__detail,
body .s-inject__main { min-width: 0; }
body .s-inject--split { align-items: start; column-gap: var(--sp-6); }

body .s-inject-overview,
body .s-inject-formwrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
body .s-inject-overview .c-card { display: flex; flex-direction: column; gap: var(--sp-2); }
body .s-inject-overview .c-card > h2,
body .s-inject-overview .c-card > p { margin: 0; }
body .s-inject-overview .c-card > p.u-text-2 { line-height: var(--lh-callout); }

/* ============ 清單 ============ */
body .s-inject-list,
body .s-inject__master {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
body .s-inject-list { padding-top: var(--sp-2); }
body .s-inject__master {
  position: sticky;
  top: var(--sp-4);
  align-self: start;
  max-height: calc(100dvh - var(--topbar-h) - var(--sp-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
body .s-inject-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: 0 var(--sp-1);
}
body .s-inject-list__head h2 { margin: 0; color: var(--text); }
body .s-inject-list__head .c-btn { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-callout); }

body .s-inject-rows {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
body .s-inject-row {
  display: grid;
  gap: 2px;
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}
body .s-inject-row + .s-inject-row { border-top: 1px solid var(--divider); }
body .s-inject-row__when {
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
body .s-inject-row__meta {
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
body .s-inject-row.is-selected {
  background: var(--primary-tint);
  box-shadow: inset 3px 0 0 var(--primary);
}
body .s-inject-row.is-selected .s-inject-row__when { color: var(--primary); }
body .s-inject-row:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  body .s-inject-row:not(.is-selected):hover { background: var(--surface-2); }
}
@container view (min-width: 560px) {
  body .s-inject__main .s-inject-row {
    grid-template-columns: minmax(180px, 14rem) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-4);
  }
}

/* ============ 回診備忘卡 ============ */
body .s-inject-memo .c-btn { align-self: flex-start; margin-top: var(--sp-2); }
body .s-inject-memo__count {
  width: fit-content;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-chip);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: var(--fs-callout);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@container view (min-width: 560px) {
  body .s-inject-memo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-5);
    row-gap: var(--sp-1);
    align-items: start;
  }
  body .s-inject-memo .c-btn {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
  }
}

/* ============ 部位輪替參考卡 ============ */
body .s-inject-suggest {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "map title" "map text" "map note";
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  align-items: start;
}
body .s-inject-suggest > h2 { grid-area: title; }
body .s-inject-suggest__map { grid-area: map; width: 96px; }
body .s-inject-suggest__text {
  grid-area: text;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--text);
  text-wrap: pretty;
}
body .s-inject-suggest > p:last-child {
  grid-area: note;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
}

/* ============ 劑量歷程 ============ */
body .s-inject-timeline {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body .s-inject-timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}
body .s-inject-timeline__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--surface-3);
}
body .s-inject-timeline__item:last-child { padding-bottom: 0; }
body .s-inject-timeline__item:last-child::before { display: none; }
body .s-inject-timeline__dot {
  position: relative;
  z-index: 1;
  flex: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--primary);
}
body .s-inject-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body .s-inject-timeline__body strong {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============ 表單 ============ */
body .s-inject-strip:empty { display: none; }
body .s-inject-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
body .s-inject-form [hidden] { display: none; }
body .s-inject-form > h2 { margin: 0; }
body .s-inject-form > h2 + p { margin: calc(var(--sp-3) * -1) 0 0; }
body .s-inject-form > .c-field,
body .s-inject-form > .c-field + .c-field { margin: 0; }
body .s-inject-form .c-field__hint { margin: 0; }
body .s-inject-form .s-inject-errors:empty { display: none; }
body .s-inject-form .s-inject-errors { display: flex; flex-direction: column; gap: var(--sp-2); }
body .s-inject-dose-note { margin: calc(var(--sp-2) * -1) 0 0; font-size: var(--fs-footnote); }
body .s-inject-dose-note:empty { display: none; }
body .s-inject-occ,
body .s-inject-linked p { display: flex; align-items: center; gap: var(--sp-2); }
body .s-inject-linked:empty { display: none; }
body .s-inject-linked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-input);
  background: var(--primary-tint);
}
body .s-inject-linked p { margin: 0; }

/* 日期與時間 */
body .s-inject-when {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
body .s-inject-when > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body .s-inject-when .c-toggle { justify-content: flex-start; gap: var(--sp-3); }
body .s-inject-when .c-field + .c-field { margin-top: var(--sp-3); }

/* 劑量備註的 textarea */
body .s-inject-form textarea.c-field__input {
  min-height: 96px;
  padding: var(--sp-3) var(--sp-4);
  resize: vertical;
  line-height: var(--lh-body);
}

/* 部位區 */
body .s-inject-form .c-field:has(> .s-inject-map) { gap: var(--sp-3); }
body .s-inject-map { width: 100%; max-width: 260px; margin-inline: auto; }
body .s-inject-map .c-body-map { width: 100%; }
body .s-inject-map .c-body-map__selected { display: none; }
body .s-inject-map .c-body-map__legend {
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: var(--sp-1);
}
body .s-inject-site {
  margin: 0;
  width: fit-content;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-callout);
  font-weight: 600;
}
body .s-inject-form .c-field:has(> .s-inject-map) > .c-btn { align-self: flex-start; min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-callout); }

/* 按鈕統一 */
body .s-inject-form > .c-btn--block { margin: 0; }
body .s-inject-form .c-btn--ghost.c-btn--block { --btn-bg: var(--surface-2); --btn-fg: var(--text-2); }
body .s-inject-form .c-btn--danger {
  --btn-bg: var(--danger-soft);
  --btn-fg: var(--danger);
  margin-top: var(--sp-2);
}
@media (hover: hover) and (pointer: fine) {
  body .s-inject-form .c-btn--danger:hover {
    background: color-mix(in srgb, var(--danger) 18%, var(--surface));
    opacity: 1;
  }
  body .s-inject-form .c-btn--ghost.c-btn--block:hover { background: var(--surface-3); }
}

/* ============ 確認條 ============ */
body .s-inject-strip .c-confirm-strip {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--sp-3);
}
body .s-inject-strip .c-confirm-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--primary);
}
body .s-inject-strip .c-confirm-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--divider);
}
body .s-inject-strip .c-confirm-strip__text { margin: 0; flex: 1 1 220px; }
body .s-inject-strip .c-confirm-strip__actions { flex-wrap: wrap; }

/* ============ 寬版（平板／桌面）表單善用寬度 ============ */
@container view (min-width: 640px) {
  body .s-inject-form { padding: var(--sp-6); gap: var(--sp-5); grid-auto-flow: row; }
  body .s-inject-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: var(--sp-5);
    row-gap: var(--sp-5);
    align-items: start;
  }
  body .s-inject-form > * { grid-column: 1 / -1; }
  body .s-inject-form > .c-field:has(#inj-dose),
  body .s-inject-form > .c-field:has(#inj-vol) { grid-column: auto; }
  body .s-inject-dose-note { margin-top: calc(var(--sp-3) * -1); }

  body .s-inject-when > :not(legend):has(> .c-field) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
    row-gap: var(--sp-2);
    align-items: start;
  }
  body .s-inject-when .c-field + .c-field { margin-top: 0; }
  body .s-inject-when .c-toggle { grid-column: 1 / -1; }

  body .s-inject-form .c-field:has(> .s-inject-map) {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    column-gap: var(--sp-6);
    row-gap: var(--sp-3);
    align-items: start;
    align-content: start;
  }
  body .s-inject-form .c-field:has(> .s-inject-map) > .c-field__label { grid-column: 1 / -1; }
  body .s-inject-form .c-field:has(> .s-inject-map) > .s-inject-map {
    grid-column: 1;
    grid-row: 2 / span 6;
    max-width: none;
    margin: 0;
  }
  body .s-inject-form .c-field:has(> .s-inject-map) > :not(.c-field__label):not(.s-inject-map) { grid-column: 2; }

  body .s-inject-form > .c-btn--primary,
  body .s-inject-form > .c-btn--ghost,
  body .s-inject-form > .c-btn--danger {
    justify-self: stretch;
  }
}

/* 桌面：表單按鈕不要過度拉長 */
@container view (min-width: 900px) {
  body .s-inject-form > .c-btn--block { max-width: 420px; justify-self: start; width: 100%; }
}