/* 回報頁（js/report.js）。class 用 rp- 開頭。顏色、字體、元件都用 design-system 的 token 與 class。 */

/* dsh-btn 等元件自己有 display，hidden 屬性要強制蓋過去 */
.rp-scroll [hidden] { display: none !important; }
.rp-scroll .dsh-btn { text-decoration: none; box-sizing: border-box; }
/* 捲動區是直排 flex，內容太長時區塊預設會被壓扁（檢查清單的分隔線會切過文字），一律不壓縮 */
.rp-scroll > * { flex: none; }
.rp-scroll .tp-h { margin: 0; }
.rp-center { text-align: center; }

/* 步驟 1 → 2 → 3 */
.rp-steps { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rp-steps li {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-1) 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text-muted);
  border-bottom: var(--stroke-ui) solid var(--line);
}
.rp-steps li span {
  width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: var(--stroke-fine) solid var(--outline); background: var(--surface-raised); font-size: 12px; color: var(--text);
}
.rp-steps li.is-done { color: var(--brand-text); border-bottom-color: var(--brand); }
.rp-steps li.is-done span { background: var(--green-100); }
.rp-steps li[aria-current="step"] { color: var(--text); border-bottom-color: var(--outline); }
.rp-steps li[aria-current="step"] span { background: var(--brand); color: var(--ink-50); }

/* 取景框：寬度跟著可視高度縮，快門和「先不拍照」不用捲動就看得到。
   380px 約等於標題列＋步驟＋標題＋快門＋文字按鈕的高度；dvh 會扣掉手機瀏覽器的網址列和工具列 */
.rp-finder {
  position: relative; flex: none; aspect-ratio: 3 / 4; overflow: hidden; align-self: center; box-sizing: border-box;
  width: min(100%, max(180px, calc((100vh - 380px) * 3 / 4)));
  width: min(100%, max(180px, calc((100dvh - 380px) * 3 / 4)));
  background: var(--outline); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md);
}
.rp-video, .rp-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-frame { position: absolute; inset: 10% 12% 16%; border: 3px dashed var(--ink-50); border-radius: var(--radius-sm); pointer-events: none; }
.rp-finder__hint {
  position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); margin: 0; white-space: nowrap;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--outline); color: var(--ink-50); font-size: 14px; line-height: 20px; font-weight: 700;
}
.rp-nocam {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6); background: var(--surface-sunken); text-align: center; font-size: 15px; line-height: 22px;
}
.rp-nocam p { margin: 0; }
/* 有照片或沒相機時，框和提示字就不用了 */
.rp-finder:has(~ .rp-controls:not([data-mode="live"])) .rp-frame,
.rp-finder:has(~ .rp-controls:not([data-mode="live"])) .rp-finder__hint { display: none; }

.rp-controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.rp-controls > .dsh-btn--block { width: 100%; }
/* 快門：米白圓鈕＋墨框＋內圈 */
.rp-shutter {
  width: 76px; height: 76px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--surface-raised); border: var(--stroke-ui) solid var(--outline);
  box-shadow: inset 0 0 0 6px var(--surface-raised), inset 0 0 0 9px var(--outline);
}
.rp-shutter:active { background: var(--surface-sunken); }
.rp-shutter:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.rp-file { position: relative; }
.rp-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rp-file:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.rp-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.rp-grow { flex: 1; }

/* 步驟 2：健康檢查 */
.rp-thumbrow { display: flex; align-items: center; gap: var(--space-3); }
.rp-thumb { width: 72px; height: 96px; object-fit: cover; border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-sm); }
.rp-lead { margin: 0; padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 22px; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.rp-note { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.rp-note textarea {
  font: inherit; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text);
  padding: var(--space-2) var(--space-3); resize: vertical;
  background: var(--surface); border: var(--stroke-fine) solid var(--outline); border-radius: var(--radius-sm);
}
.rp-note textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rp-note small { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--text-muted); }

/* 步驟 3：完成 */
.rp-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.rp-done__art { height: 180px; width: auto; }
.rp-done__art--tree { height: 96px; }
.rp-done .tp-p { margin: 0; }
.rp-todo b { display: block; font-size: 15px; }
.rp-todo ul { margin: var(--space-1) 0 var(--space-2); padding-left: 1.2em; font-weight: 700; }

/* 電腦版（1024px 以上、滑鼠操作）：不開相機，改成選照片上傳＋拍攝日期 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .rp-finder { width: min(100%, 270px); max-height: none; align-self: center; }
  .rp-date { width: 100%; max-width: var(--desk-btn-max); }
  .rp-controls .tp-small { margin: 0; text-align: center; }
}