/* ============ 命書 paid.css — 交付頁(生成進度 → 線上報告) ============
 * 手機優先:單欄、大行距、零水平捲動;桌機只是把同一欄放寬置中。
 * 進度動畫=玄墨鎏金語彙:墨暈(呼吸的暈染)+鎏金環(緩慢一圈)+印章字,
 * 不是轉圈 spinner(那是通用 SaaS 臉)。動畫只做裝飾層,狀態文字才是事實來源。
 * 疊在 foundation → direction-tianji → components → site.css 之上。 */

.pbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 12px calc(var(--page-pad) + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--border); }
.pbar-brand { display: flex; align-items: center; gap: var(--space-3);
  color: var(--ink); font-weight: 600; letter-spacing: 0.2em; }
.pbar-link { color: var(--muted); font-size: var(--fs-small); letter-spacing: 0.14em;
  transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .pbar-link:hover { color: var(--ink); } }
.pbar-link:active { color: var(--ink); }

.pwrap { max-width: 760px; margin-inline: auto;
  padding: clamp(28px, 7vw, 64px) var(--page-pad)
           calc(clamp(40px, 9vw, 96px) + env(safe-area-inset-bottom, 0px)); }
.pad-top { margin-top: var(--space-8); }

/* —— ⑤ 等待繳費(ATM 虛擬帳號 / 超商代碼)——
   這是客人要照著去繳錢的憑據:數字必須大、可長按選取、等寬字型不會看錯 0 與 O。 */
.paybox { display: flex; flex-direction: column; gap: var(--space-4);
  margin: var(--space-8) auto 0; max-width: 30rem; text-align: left;
  border: 1px solid var(--border-strong); padding: var(--space-6); }
.paybox div { display: flex; flex-direction: column; gap: var(--space-1); }
.paybox dt { font-size: var(--fs-caption); color: var(--muted); letter-spacing: 0.14em; }
.paybox dd { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(1.15rem, 5vw, 1.5rem); color: var(--accent);
  letter-spacing: 0.08em; word-break: break-all; user-select: all; }

/* —— ① 生成中 —— */
.stage-view { text-align: center; }
.stage-view[hidden], .report-view[hidden], .mine[hidden] { display: none; }
.stage-view .lead { margin: var(--space-4) auto 0; max-width: 40ch; }
.stage-view .note { margin-top: var(--space-6); line-height: 1.9; }
.stage-view .seal-lg { margin-bottom: var(--space-6); }

.inkwell { position: relative; width: 132px; height: 132px; margin: 0 auto var(--space-8);
  display: grid; place-items: center; }
.ink-blot { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(201,163,92,0.26), rgba(201,163,92,0.06) 46%, transparent 70%);
  filter: blur(2px); animation: blot 5.2s var(--ease-inout) infinite; }
/* 鎏金環:conic 漸層畫一段弧,再用 radial mask 挖成細環(mask 半徑必須小於元素半徑,
   否則整片被挖光只剩四角 —— 132px 容器 inset 6px = 半徑 60px,環身取 54→60px)。 */
.ink-ring { position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(201,163,92,0.06) 0deg 250deg, rgba(201,163,92,0.9) 340deg, rgba(201,163,92,0.06) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 54px, #000 55px);
  mask: radial-gradient(circle, transparent 54px, #000 55px);
  animation: ringspin 3.6s linear infinite; }
.ink-seal { position: relative; width: 54px; height: 54px; border-radius: 10px;
  display: grid; place-items: center; background: var(--seal); color: #f4ecda;
  font-size: 1.55rem; font-weight: 600; line-height: 1; }
@keyframes blot { 0%, 100% { transform: scale(0.94); opacity: 0.75; }
                  50% { transform: scale(1.06); opacity: 1; } }
@keyframes ringspin { to { transform: rotate(360deg); } }

.steps { list-style: none; margin: var(--space-12) auto 0; padding: 0;
  max-width: 420px; text-align: left; }
.steps li { position: relative; display: grid;
  grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: var(--space-4); padding: var(--space-4) 0; }
.steps li + li::before { content: ""; position: absolute; left: 12px; top: -14px;
  width: 1px; height: 28px; background: var(--border); }
.steps li.is-done + li::before, .steps li.is-live::before { background: var(--primary); }
.steps .dot { grid-row: 1 / span 2; align-self: start; margin-top: 5px;
  width: 9px; height: 9px; margin-left: 8px; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out); }
.steps .lb { font-size: var(--fs-body); color: var(--muted); letter-spacing: 0.16em;
  transition: color var(--dur-base) var(--ease-out); }
.steps .ds { grid-column: 2; font-size: var(--fs-caption); color: var(--muted);
  opacity: 0.72; letter-spacing: 0.02em; }
.steps li.is-live .dot { background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
  animation: pulse 1.8s var(--ease-inout) infinite; }
.steps li.is-live .lb { color: var(--ink); }
.steps li.is-done .dot { background: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.steps li.is-done .lb { color: var(--text); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; }
                   50% { transform: scale(1.5); opacity: 0.55; } }
/* 排隊位置:鎏金印記式的一行小字,克制到不像儀表板——不嚇人是設計要求的一部分 */
.queue { margin-top: var(--space-8); font-size: var(--fs-caption); color: var(--muted);
  letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.queue .qn { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; }
.queue + .tick { margin-top: var(--space-4); }
.tick { margin-top: var(--space-8); font-size: var(--fs-caption);
  letter-spacing: 0.14em; font-variant-numeric: tabular-nums; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .ink-blot, .ink-ring, .steps li.is-live .dot { animation: none; }
}

/* —— ② 報告 —— */
.rpt-bar { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border); }
.rpt-bar-t .note { margin-top: 6px; }
.rpt-acts { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
/* site.css 在 ≤560px 讓 .btn-pai 撐滿(下單表單需要);報告列的按鈕要維持原尺寸 */
.rpt-acts .btn-pai { margin-left: 0; flex: 0 0 auto; }
.stage-view .btn-pai { margin-left: auto; margin-right: auto; flex: 0 0 auto; }
.btn-quiet-link { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: var(--fs-small); letter-spacing: 0.14em;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
  transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .btn-quiet-link:hover { color: var(--ink); } }
.btn-quiet-link:active { color: var(--ink); }

.rpt-host { margin-top: var(--space-12); }
.rpt-host .rpt { animation: rise var(--dur-slow) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .rpt-host .rpt { animation: none; } }

.rpt-foot { margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--border); display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-4); flex-wrap: wrap;
  color: var(--muted); font-size: var(--fs-small); }
@media (hover: hover) { .rpt-foot a:hover { color: var(--ink); } }

/* 列印:只留報告本體(REPORT_CSS 的 @media print 會自己切成宣紙淺色) */
@media print {
  .pbar, .rpt-bar, .rpt-foot { display: none; }
  .pwrap { padding: 0; max-width: none; }
  .rpt-host { margin-top: 0; }
}

/* —— ④ 我的報告 —— */
.mine { text-align: left; }
.mine .lead { margin-top: var(--space-4); }
.mine-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.mine-list li { border-top: 1px solid var(--border); }
.mine-list li:last-child { border-bottom: 1px solid var(--border); }
.mine-list a { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-6) 2px; color: var(--text);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out); }
.mine-list .mt { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; }
.mine-list .md { color: var(--muted); font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums; }
@media (hover: hover) { .mine-list a:hover { color: var(--ink); padding-left: 8px; } }
.mine-list a:active { color: var(--ink); padding-left: 8px; }