/*! © 2026 Skyfaring（Shot Ledger）. All rights reserved. 未經書面同意不得重製、改作或用於其他產品。https://shot-ledger.skyfaring.net/terms/ */
/* css/buttons.css —— v200（SPEC_M113）全站按鈕系統（方向 A）。在 app.css 後面載入，同權重時蓋過去。 */
/* ====================================================================== */
/* v200（SPEC_M113）：按鈕系統改成比稿方向 A——方角實心鈕＋左側線條圖示                         */
/* 放在檔尾一次蓋掉：所有按鈕同一個圓角語彙（手機 10、電腦 8，--btn-radius）、主鈕拿掉外圈淡環、     */
/* 主鈕寬度隨內容（要滿版的地方各自寫，見 SPEC_M113 §2 盤點表）、按鈕字一律不換行。               */
/* SHOT 圓鈕（.hero-shot 那一顆）不在這裡，不動。                                                 */
/* ====================================================================== */
.btn--primary,
.btn--secondary,
.btn--danger,
.home-tonal {
  border-radius: var(--btn-radius);
}

.btn--primary::after {
  content: none;
  display: none;
}

/* 按鈕字不換行（手機、電腦都一樣）：放不下時整顆換到下一列（並排列 flex-wrap）或縮短文字，不讓一個字掉到第二行 */
.btn,
.btn-tonal,
.btn-outline,
.btn-link,
.btn-danger,
.home-tonal,
.chip,
.segmented__btn,
.option-segmented__btn {
  white-space: nowrap;
}

/* 圖示＋字：主鈕／墨色鈕 20 px（電腦 18）、間距 8；有圖示時左內距少 4，字跟圖示看起來置中 */
.btn {
  gap: 8px;
}

:is(.btn--primary, .btn--secondary, .btn--danger) > .btn-icon {
  width: var(--btn-icon-lg);
  height: var(--btn-icon-lg);
}

:is(.btn--primary, .btn--secondary, .btn--danger, .home-tonal):has(> .btn-icon:first-child) {
  padding-left: 14px;
  padding-right: 18px;
}

.home-tonal {
  gap: 8px;
}

.home-tonal > .btn-icon {
  width: var(--btn-icon);
  height: var(--btn-icon);
}

body.is-desk {
  --btn-icon-lg: 18px;
}

/* 主鈕＋次鈕並排一列（SPEC_M113 §2 規則 R2）：次鈕在左、主鈕在右（拇指熱區）；
   放不下（字級放大、窄螢幕）時整顆換列，wrap-reverse 讓換下去的主鈕排在上面那一列 */
.btn-pair {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: var(--btn-gap) 10px;
}

.btn-pair--end {
  justify-content: flex-end;
}

.btn-pair--split {
  justify-content: space-between;
}

.btn-pair > * {
  flex: none;
}

/* 分段選擇器：軌道 10、格子 8（手機）；可帶圖示（手動記＝劃記、拍影片＝相機），選中的勾＋色塊照舊 */
.segmented {
  border-radius: var(--btn-radius);
}

.segmented__btn,
.segmented__thumb {
  border-radius: var(--btn-radius-in);
}

body.is-desk .segmented__thumb {
  border-radius: 7px;
}

.segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.segmented__btn > .btn-icon {
  width: 18px;
  height: 18px;
}

.segmented > .segmented__btn.is-active::before {
  margin-right: 0;
}

.option-segmented {
  border-radius: var(--btn-radius);
}

.option-segmented__btn {
  border-radius: var(--btn-radius-in);
}

.chip {
  border-radius: var(--btn-radius-in);
}

/* 多行說明字：最後一行不能只剩一個字（SPEC_M113 §4）。
   全站本來就是 keep-all（中文詞內不斷行）＋ p 的 text-wrap: pretty；按鈕旁邊、下面那種短說明再加 balance（每行差不多長）。
   詞組比一行還長、被硬斷剩一個字的，由 js/orphan.js 把上一行最後一個字一起拉下來（包成 .nobr） */
.nobr {
  white-space: nowrap;
}

.btn-note,
.variant-start__meta,
.rec-mode__meta,
.home-deskshare__note,
.vid-summary__note,
.train-first__sub {
  text-wrap: balance;
}

/* ---- v200 逐處：手機首頁（SPEC_M113 §2 H-1～H-3） ---- */
/* 首屏：「先看怎麼用｜開始練球」並排、寬度隨字（原本兩顆上下疊、滿版） */
.home-lp__start.btn-pair {
  flex-direction: row;
  align-items: center;
  margin-top: var(--space-5);
}

.home-lp__start .btn.home-cta {
  width: auto;
  min-height: 48px;
  padding: 0 18px 0 14px;
  font-size: var(--text-md);
}

.home-lp__start .home-lp__how.home-tonal {
  width: auto;
  min-height: 48px;
  margin-top: 0;
  padding: 0 18px 0 14px;
  color: #fff;
  font-size: 15px;
}

/* 「用電腦分析影片」「看同步教學」：寬度隨字、靠左（原本滿版） */
.home-deskshare .home-deskshare__btn {
  width: auto;
  align-self: flex-start;
  padding: 0 18px 0 14px;
}

/* ---- v200 逐處：練球頁（SPEC_M113 §2 T-1、T-2） ---- */
/* T-1「上次」卡（借比稿 C）：取代滿版「再來一次」條。白卡＋細邊（跟下面「自由練習｜綜合巡迴」小卡同一套，不新增色塊），
   右邊一塊實心橘方鈕（A 語彙：圓角 10、圖示 22）。整張是同一顆按鈕 */
.last-card.quick-restart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 78px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.last-card.quick-restart:active {
  transform: scale(0.985);
  background: var(--color-surface-sunken);
}

.last-card.quick-restart:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.last-card__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.last-card__kick {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-accent-text);
  line-height: 1.3;
}

.last-card__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.last-card__score {
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.last-card__go {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--btn-radius);
  background: var(--color-fill-accent);
  color: var(--color-on-fill);
}

.last-card__go .btn-icon {
  width: 22px;
  height: 22px;
}

.last-card.quick-restart:active .last-card__go {
  background: var(--color-accent-dark);
}

@media (hover: hover) {
  .last-card.quick-restart:hover {
    background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface));
  }
}

/* T-2 第一次來：A 語彙的實心主鈕（相機＋字、寬度隨字），說明兩行在右邊；放不下（字級放大）就整段換到下面 */
.train-first {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 14px;
}

.train-first__btn {
  flex: none;
  min-height: 48px;
}

.train-first__sub {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.train-first__sub > span {
  white-space: nowrap;
}

.page--home > .train-first + :is(.video-entry, .secondary-list) {
  margin-top: calc(var(--space-4) - var(--space-5));
}

/* ---- v200 逐處：開始面板（SPEC_M113 §2 P-1、P-2） ---- */
/* 底列只有主鈕一顆時靠右（拇指熱區） */
.btn-pair--split:has(> :only-child) {
  justify-content: flex-end;
}

.sheet-foot {
  margin-top: var(--space-1);
}

.sheet-foot .variant-start {
  width: auto;
  min-height: 48px;
  font-size: var(--text-md);
}

.sheet-foot .makes-goal-cta {
  align-self: auto;
  min-height: 48px;
}

/* 挑戰的「約 60 分・12 輪・120 球」在主鈕左邊同一列：靠左、不置中 */
.sheet-foot .variant-start__meta {
  margin: 0;
  flex: 1 1 auto;
  text-align: left;
}

/* 自由練習「這次練習會算進總成績，設定可以改」：在底列上面、靠左（原本在開始鈕下面置中） */
.sheet > .variant-start__meta {
  margin-top: 0;
  text-align: left;
}

/* ---- v200 逐處：結算頁（SPEC_M113 §2 S-1） ---- */
.summary__actions.btn-pair {
  flex-direction: row;
  gap: var(--btn-gap) 10px;
}

.summary__actions.btn-pair .summary__actions-share {
  width: auto;
}

.summary__actions.btn-pair .summary__actions-row .btn {
  flex: none;
}

/* ---- v200：等寬並排的那幾列（SPEC_M113 §2 規則 R5）：字不換行之後，放不下的整顆換到下一列，不擠出按鈕 ---- */
:is(.confirm-actions, .active-footer, .backup-nudge__actions, .settings-actions, .forecast-banner__actions, .goal-banner__actions,
  .pace-ask__actions, .share-sheet__row, .vid-exit-row, .btn-row, .summary__actions-row, .danger-pair__confirm, .danger-pair,
  .done-ask__btns, .rec-alt, .rec-confirm, .vid-clip__controls, .ctb__acts, .desk-actions, .vid-block__mini, .sync-pend__acts,
  .desk-dv__acts, .round-log__actions) {
  flex-wrap: wrap;
}

:is(.confirm-actions, .backup-nudge__actions, .forecast-banner__actions, .goal-banner__actions, .pace-ask__actions, .share-sheet__row,
  .vid-exit-row, .btn-row, .danger-pair--block .danger-pair__confirm, .danger-pair--block, .active-footer) > * {
  min-width: auto;
}

/* grid 的兩欄／三欄（完成第二步、錄完面板、短片播放列）改成可換列的 flex：每顆等寬、放不下才換 */
.done-ask__btns:not(.album-ask__btns),
.rec-alt,
.rec-confirm,
.vid-clip__controls {
  display: flex;
  gap: var(--btn-gap);
}

.done-ask__btns:not(.album-ask__btns) > *,
.rec-alt > *,
.rec-confirm > *,
.vid-clip__controls > * {
  flex: 1 1 0;
  min-width: max-content;
  width: auto;
}

/* ====================================================================== */
/* v202（SPEC_M114）：練球中的快門鈕、照順序引導（當前步驟框＋完成摘要列）、首頁兩鈕等寬          */
/* ====================================================================== */
:root {
  --rec-red: #E5402F;
}

:root[data-theme="dark"] {
  --rec-red: #F0503D;
}

/* §2 首頁首屏「先看怎麼用｜開始練球」：等寬兩欄、滿版（左右邊對齊上方說明字），次左主右；
   字級放大放不下時整顆換列（wrap-reverse：主鈕在上面那列），字不換行 */
.home-lp__start.btn-pair {
  align-self: stretch;
  width: 100%;
}

.home-lp__start.btn-pair > :is(.home-cta, .home-lp__how) {
  flex: 1 1 0;
  min-width: max-content;
  justify-content: center;
}

/* 練習中「已完成」標題列：字級放大時「第一次大約幾分鐘｜分析第 N 輪」整組換到下一列、靠右（v202 走查 150% 溢出） */
.completed-rounds__head {
  flex-wrap: wrap;
}

.completed-rounds__act {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* §1 快門（比稿方向 C）：白圈＋紅色實心點、字在圓外下方；整顆（圓＋字）是一顆鈕，可點範圍 76×94 */
.round-input__head--shutter {
  align-items: center;
}

.round-input__chips--left {
  align-items: flex-start;
  margin-top: var(--space-2);
}

.shutter-btn {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 76px;
  min-height: 44px;
  padding: 2px 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3.5px solid currentColor;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}

.shutter::after {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--rec-red);
  transition: transform var(--transition-fast);
}

.shutter-btn:active:not(.is-off):not(:disabled) .shutter::after {
  transform: scale(0.9);
}

.shutter-btn__label {
  white-space: nowrap;
  line-height: 1.2;
}

/* 還沒選點（灰、aria-disabled：照樣能按，按了捲回球場閃一下）／讀取影片中（disabled） */
.shutter-btn.is-off,
.shutter-btn:disabled {
  color: var(--color-text-faint);
}

.shutter-btn.is-off .shutter,
.shutter-btn:disabled .shutter {
  border-color: var(--color-border-strong);
}

.shutter-btn.is-off .shutter::after,
.shutter-btn:disabled .shutter::after {
  background: var(--color-border-strong);
}

.shutter-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 錄好回來：「記這一輪」實心主鈕靠右（有「存到相簿」時次左主右） */
.vid-block__acts {
  justify-content: flex-end;
}

.vid-block__acts:has(> :nth-child(2)) {
  justify-content: space-between;
}

.vid-block--ready .vid-block__acts .vid-block__score {
  width: auto;
  min-height: 48px;
}

/* §3 當前步驟：1.5 px 細品牌橘框＋很淡的外光（低調版只留框）。不用色塊、不用箭頭 */
.guide-cur {
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 70%, var(--color-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 12%, transparent);
  scroll-margin-top: var(--space-4);
}

.guide-cur--quiet {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  box-shadow: none;
}

/* 換到這一步時淡淡亮一下（減少動態不亮，js 也不加 class） */
.guide-flash {
  animation: guide-flash 1.2s ease-out;
}

@keyframes guide-flash {
  from {
    background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  }
  to {
    background-color: var(--color-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-flash {
    animation: none;
  }
}

.guide-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.guide-tag__no {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-accent-text);
  white-space: nowrap;
}

.guide-tag__no::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.guide-tag__what {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.4;
}

.guide-hint {
  margin: calc(-1 * var(--space-2)) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* 做完的步驟收成一行：「✓ 位置　禁區近筐　改」 */
.guide-done {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  font-size: 15px;
}

.guide-done + .guide-done,
.guide-done + .round-input {
  margin-top: calc(var(--space-2) - var(--space-5));
}

.guide-done__ok {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-success);
}

.guide-done__k {
  flex: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.guide-done__v {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.guide-done__btn {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--btn-radius-in);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.guide-done__btn:active {
  background: var(--color-surface-sunken);
}

.guide-done__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .guide-done__btn:hover {
    color: var(--color-text);
  }
}

/* ====================================================================== */
/* v203（SPEC_M115）：拿掉超長型按鈕——全站主／次鈕寬度隨字、主鈕靠右（拇指熱區）、                */
/* 跟同一件事的次鈕同一列（次左主右）。例外（等寬兩欄、選項清單、選單）見 SPEC_M115 §3。            */
/* 單顆靠右的寫法：width: fit-content＋margin-left: auto＋align-self: flex-end（block 流、flex 直排都成立） */
/* ====================================================================== */

/* §2.1 逐球記：「進 N 顆」在左、主鈕在右同一列（練習中「完成本輪／先記下｜現在分析」、修改第 N 輪「儲存」）；
   放不下時按鈕組整組換到下一列、靠右 */
.seq-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.seq-foot > .seq-summary {
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

.seq-foot > :is(.btn, .btn-pair) {
  flex: none;
  margin-left: auto;
}

.seq-foot .btn--primary {
  min-height: 48px;
}

.seq-foot .seq-actions {
  display: flex;
  flex-direction: row;
}

.seq-foot .seq-actions > .btn-tonal {
  margin-top: 0;
}

/* 時間說明在按鈕列下面一行、靠右（說的是「現在分析」） */
.round-input > .seq-est {
  margin-top: calc(-1 * var(--space-1));
  text-align: right;
}

/* §2.2 錄完面板（逐球）：「記不得了｜這輪不要了」在左、「下一步」在右 */
.rec-foot.btn-pair .rec-alt--links {
  justify-content: flex-start;
  gap: var(--space-3);
}

.rec-foot .rec-next {
  width: auto;
  min-height: 48px;
}

/* §2.3 練習中頁底：「放棄」在左、「結束練習」在右，兩顆都寬度隨字（以前「結束練習」撐滿剩下的寬）。
   只剩「放棄」一顆時（挑戰每輪都記完，上面已有「結束並結算」）照舊靠左 */
.active-footer:has(> [data-action="discard-ask"]) {
  justify-content: space-between;
}

.active-footer > [data-action="discard-ask"],
.active-footer > [data-action="end-session"] {
  flex: none;
}

/* §2.4 單顆主鈕／次鈕：寬度隨字、靠右 */
.completion-panel__finish,
.sheet > .btn,
.sheet > .btn-block,
.sheet > .sheet__cancel,
.makes-goal .makes-goal__cancel,
.done-ask__btns > :only-child,
.rp__foot > .rp__send,
.sync-bulk__btn,
.round-log__send-btn,
.round-log__an-btn {
  flex: none;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  align-self: flex-end;
  justify-self: end;
}

.completion-panel__finish,
.sheet > .btn--primary {
  min-height: 48px;
}

/* 結算頁影片卡「下載並分析第 N 輪」「清單傳到雲端」：照 v202 整條（例外，SPEC_M115 §3）——
   兩顆是不同的事、各帶一行說明，整條才看得出說明是哪一顆的（使用者 10-23 看截圖後定） */

/* 置中的卡（過關慶祝、回報送出了）：卡裡的字都置中，按鈕寬度隨字、置中 */
.celebration__view,
.rp--done > .rp-done__ok {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.rp--done > .rp-done__ok {
  align-self: center;
}

/* §2.5 直排的按鈕組改成一列：DOM 第一顆是主鈕 → row-reverse 讓它排在最右、其他往左排；放不下就換列（主鈕那列在上）。
   按鈕下面的小字（.btn-note、訊息）自己一整列、在按鈕下面、靠右。電腦右欄（.desk-pane）有自己的一列規則，不動 */
body:not(.is-desk) .vid-actions:not(:has(> .vid-decide)),
.vid-leave__actions,
.sync-actions,
.album-ask .done-ask__btns {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--btn-gap) 10px;
}

body:not(.is-desk) .vid-actions:not(:has(> .vid-decide)) > :is(.btn, .btn-block, .btn-outline, .btn-tonal, .btn-danger),
.vid-leave__actions > :is(.btn, .btn-block, .btn-outline, .btn-tonal),
.sync-actions > :is(.btn, .btn-block, .btn-outline, .btn-tonal),
.album-ask .done-ask__btns > * {
  flex: none;
  width: auto;
}

/* 手機 48 高；電腦照 SPEC_M43 的 40（同一列主次鈕要一樣高） */
body:not(.is-desk) :is(.vid-actions, .vid-leave__actions, .sync-actions, .album-ask .done-ask__btns, .share-sheet__acts) :is(.btn, .btn-outline, .btn-tonal, .btn-danger) {
  min-height: 48px;
}

body.is-desk :is(.sync-actions, .share-sheet__acts) :is(.btn, .btn-outline, .btn-tonal) {
  min-height: 40px;
}

body:not(.is-desk) .vid-actions:not(:has(> .vid-decide)) > :not(button, a),
.vid-leave__actions > :not(button, a),
.sync-actions > :not(button, a) {
  flex-basis: 100%;
  order: 2;
  margin: 0;
  text-align: right;
}

/* 相簿問話的「取消」是文字鈕：排在最左 */
.album-ask .done-ask__btns > .album-ask__cancel {
  justify-self: auto;
}

/* §2.6 分享面板（成績卡、軌跡卡）：「關閉｜下載｜分享」同一列、寬度隨字、主鈕在最右（兩列 display: contents 併成一列） */
.share-sheet__acts {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2) 10px;
}

.share-sheet__acts > .share-sheet__row {
  display: contents;
}

.share-sheet__acts :is(.share-sheet__full, .share-sheet__half) {
  flex: none;
  width: auto;
  min-width: 0;
}

.share-sheet__acts [data-action="close-share"],
.share-sheet__acts [data-arc="close"] {
  order: 0;
}

.share-sheet__acts .share-sheet__half:not([data-action="close-share"], [data-arc="close"]) {
  order: 1;
}

.share-sheet__acts .share-sheet__full {
  order: 2;
}

/* §2.7 繼續上次練習？：「捨棄這一節｜繼續」「繼續｜看成績」一列（.btn-pair），不再撐滿 */
.confirm-actions--stack > .confirm-actions__row {
  align-self: stretch;
}

.confirm-actions--stack .confirm-actions__row .btn--primary {
  width: auto;
  min-height: 48px;
}

.confirm-actions__row > .confirm-actions__drop {
  min-height: 44px;
}

/* 捨棄的確認段：「取消｜確定捨棄」一列、寬度隨字（會丟掉什麼那行小字在下面、靠右） */
.confirm-actions--stack.confirm-actions--ask {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--btn-gap) 10px;
}

.confirm-actions--stack.confirm-actions--ask > :is(.btn-danger, .btn-outline) {
  flex: none;
  width: auto;
}

.confirm-actions--stack.confirm-actions--ask > .btn-note {
  flex-basis: 100%;
  order: 2;
  margin: 0;
  text-align: right;
}

/* §2.8 錄影頁（iPhone 網站內錄影）面板：一列置中、次左主右 */
.rec-ui__acts {
  justify-content: center;
}

.rec-ui__acts > * {
  min-height: 48px;
}


/* ===================================================================================================
   v210（SPEC_M118 #8）：可點範圍補到 44×44——外觀不變大，用透明邊框／padding＋負 margin 撐命中區
   （以前多半用 ::after 撐，點得到但元素本身量起來不到 44，自動檢查與輔助工具看到的是小的那個）
   =================================================================================================== */

/* 錄完面板「上一步」：看得到的淡底塊照舊 36 高，上下各 4 px 透明邊框算進按鈕（共 44）；拿掉往外撐的 ::after（字溢出就是它） */
.rec-sheet__back {
  box-sizing: border-box;
  height: 44px;
  border: 4px solid transparent;
  border-inline-width: 0;
  background-clip: padding-box;
  white-space: nowrap;
}

.rec-sheet__back::after {
  content: none;
}

/* 「這一節都這樣」：整行（44 高）就是勾選框；原生小方塊藏起來（還在、鍵盤與報讀照舊），方塊畫在字前面 */
.rec-remember {
  position: relative;
}

.rec-remember input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rec-remember > span::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-right: var(--space-2);
  border: 2px solid var(--color-text-muted);
  border-radius: 4px;
  vertical-align: -5px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 16px;
  color: var(--color-on-fill, #fff);
}

.rec-remember:has(input:checked) > span::before {
  content: '✓';
  content: '✓' / '';
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.rec-remember:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 回報面板「換一個」：字的位置不動，padding 撐到 44、負 margin 抵掉 */
.rp-swap {
  padding: 12px 8px;
  margin: -12px -8px;
}

.rp-swap::after {
  content: none;
}

/* 行內的小連結（回報面板「會一起送出什麼」裡的「完整說明」、結算頁貢獻卡「條款」）：
   行內元素的上下 padding 不改行高，左右 padding 用負 margin 抵掉——字的位置不動，命中區 ≥ 44 */
.rp-what p a,
.ctb__terms {
  padding: 13px 9px;
  margin: 0 -9px;
}