/* 申請頁專用的元件。吃 theme.css 的 :root（從 afl-cake 原封不動搬來），
 * 不另開任何代幣 —— 顏色、字級、間距、圓角一律引用 --lit / --t* / --sp* / --r*。
 * theme.css 保持跟 afl-cake 同一份，兩邊才改得同步；這個專案多出來的東西都在這裡。
 */

/* 只給讀屏念的字 */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 頁頭：標題站在暈裡，不進卡 ──────────────────────────────────── */
.intro { padding: var(--sp3) 0 var(--sp5); }
.intro .lede { max-width: 40ch; margin-bottom: 0; }
.step-h { margin: var(--sp5) 0 var(--sp4); }
.sub { margin: calc(var(--sp2) * -1) 0 var(--sp5); }

/* ── 步驟軌 ──────────────────────────────────────────────────────────
 * 一條玻璃軌（它是控制項：走過的格子按得下去），現在這格是白滑塊，
 * 跟分段控制 .ev-tabs 同一顆。換頁的東西瞬切，所以滑塊不滑。
 * 窄畫面只有現在這格顯示名稱，其他格只剩數字或勾（名稱留給讀屏）。 */
.steps {
  /* 黏在上緣：長的步驟（第 1 步手機上約 2300px）捲下去也看得到「還差幾步」 */
  position: sticky; top: var(--sp2); z-index: 20;
  display: flex; gap: 2px; margin: var(--sp2) 0 0; padding: var(--sp1);
  list-style: none; border-radius: var(--rp);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sh);
}
.steps li { flex: 1 1 0; min-width: 0; display: flex; }
.steps .st {
  flex: 1; min-width: 0; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
  padding: 0 var(--sp2); border: 0; border-radius: var(--rp); background: none;
  font: inherit; font-size: var(--t3); font-weight: var(--fw-med); line-height: var(--lh-ui);
  color: var(--muted); white-space: nowrap;
}
.steps .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: var(--rp);
  font-size: var(--t2); font-variant-numeric: tabular-nums;
  background: var(--fill); color: var(--muted);
}
.steps .n .ic { width: 16px; height: 16px; }
.steps .l { overflow: hidden; text-overflow: ellipsis; }
.steps button.st { color: var(--ink); cursor: pointer; transition: transform .12s var(--ease), background-color .15s; }
.steps button.st:hover { background: rgba(255, 255, 255, .7); }
.steps button.st:active { transform: scale(.97); }
.steps button.st .n { background: var(--pink-050); color: var(--lit); }
.steps .st.on {
  background: var(--white); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06);
}
/* 現在這步的數字：淡玫瑰底、--lit 字（玫瑰色的面一律 pink-050；整頁唯一的有色面留給「下一步」） */
.steps .st.on .n { background: var(--pink-050); color: var(--lit); box-shadow: inset 0 0 0 1.5px var(--lit); }
.steps .st:focus-visible { outline-offset: 0; border-radius: var(--rp); }

@media (max-width: 640px) {
  .steps li { flex: 0 0 auto; }
  .steps li:has(.on) { flex: 1 1 auto; }
  .steps .st { padding: 0 var(--sp3); min-width: 52px; }
  /* 還沒到的格子按不下去，不必佔 52px：讓出寬度給現在這格的名稱 */
  .steps span.st:not(.on) { min-width: 36px; padding: 0 var(--sp1); }
  .steps .st:not(.on) .l {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
}

/* ── 表單零件 ────────────────────────────────────────────────────── */
fieldset.field { border: 0; padding: 0; min-width: 0; }
/* 黏頂的步驟軌不能蓋住目標：從錯誤清單跳過來、或用 Tab 往回移到被捲上去的欄位都一樣 */
html:has(.steps) { scroll-padding-top: calc(60px + var(--sp5)); }
.field > legend.lbl {
  display: block; padding: 0; font-weight: var(--fw-med); color: var(--ink);
  margin-bottom: var(--sp2); font-size: var(--t4); line-height: var(--lh-ui);
}
/* 選填：不標星，標字 —— 長輩不一定知道「沒星號＝可以不填」 */
.opt { margin-left: var(--sp1); font-size: var(--t3); font-weight: 400; color: var(--muted); }

/* 兩行的選項：粗的是名稱，下面一行是說明 */
.choice.two { align-items: flex-start; padding-top: var(--sp4); padding-bottom: var(--sp4); }
.choice.two input { margin-top: 2px; }
.choice.two b { display: block; font-weight: var(--fw-med); color: var(--ink); }
.choice.two small { display: block; margin-top: var(--sp1); font-size: var(--t3); line-height: 1.6; color: var(--muted); }
.choice.on.two small { color: var(--body); }

/* iOS 分組清單的分隔線：theme.css:419 的 `.choice:has(+ .choice.on)::before` 藏錯了線
 * （藏到選中格「上一格」的上緣，選中格自己上緣那條反而留著）。afl-cake 同一個錯。
 * 在這裡蓋過去、不改 theme.css（它要跟 afl-cake 保持同一份）；afl-cake 修好後刪掉這段。
 * 規則：一條線屬於它下面那格（X::before），X 選中、或 X 的上一格選中，線就不畫。 */
.choice.choice:has(+ .choice.on)::before { background: var(--line); }
.choice.choice.choice.on::before,
.choice.on + .choice.choice.choice::before { background: transparent; }

/* 卡裡收起來的說明（見證人資格）：跟開始頁的告知事項同一塊淺凹槽 */
.sub-group .fold-notice { margin: 0 0 var(--sp5); }
.fold-notice .bullets { margin-bottom: var(--sp3); }

/* 卡裡的分段：一條髮絲線＋段標題（afl-cake 的 .fgroup 同一套，只是把欄位包進來） */
.sub-group { margin: var(--sp7) 0 0; padding-top: var(--sp5); border-top: 1px solid var(--line-2); }
.sub-group[hidden] { display: none; }
.sub-group > h2 { margin: 0 0 var(--sp5); font-size: var(--t6); }
.sub-group > h2 small { margin-left: var(--sp2); font-size: var(--t3); font-weight: 400; color: var(--muted); }
.card > .msg:first-child { margin-top: 0; }

/* 出生日期：民國 [  ] 年 [  ] 月 [  ] 日 */
.dob {
  display: grid; align-items: center; gap: var(--sp2); max-width: 24rem;   /* 桌機上三格不要拉成三個大輸入框 */
  grid-template-columns: auto minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  color: var(--ink);
}
.dob input { text-align: center; padding-left: var(--sp2); padding-right: var(--sp2); font-variant-numeric: tabular-nums; }
.dob label { font-weight: 400; }

/* 錯誤：在那一格說。紅字是 --bad-fg（白上 8.9:1），框是同色的內圈 */
.ferr {
  display: flex; align-items: flex-start; gap: var(--sp2);
  margin: 0 0 var(--sp2); font-size: var(--t3); font-weight: var(--fw-med); line-height: 1.6;
  color: var(--bad-fg);
}
.ferr .ic { width: 18px; height: 18px; margin-top: 3px; }
/* 只上色真的錯的那一格（[aria-invalid]）：生日三格裡只有月份錯，年和日不跟著變紅 */
.field.bad input:not([type=radio]):not([type=checkbox])[aria-invalid],
.field.bad select, .field.bad textarea, .field.bad .choice {
  background-color: var(--bad-bg);
}
.field.bad input:not([type=radio]):not([type=checkbox])[aria-invalid],
.field.bad select, .field.bad textarea { box-shadow: inset 0 0 0 1.5px var(--bad-fg); }
.field.bad input:focus, .field.bad select:focus, .field.bad textarea:focus { background-color: var(--white); }
.msg-error a { color: inherit; }
/* 錯誤清單在載入時被程式聚焦（讀屏會先念它），它本身不能按，不畫焦點框 */
#errs:focus { outline: none; }

/* 告知事項放在開始頁那張卡的最上面：不要 .consent 原本那條上緣線 */
.consent.consent-top { border-top: 0; padding-top: 0; }
.consent.bad .choice { background: var(--bad-bg); }

/* 上一步／下一步：下一步是整頁唯一的泡泡 */
.stepnav { display: flex; gap: var(--sp3); align-items: stretch; margin-top: var(--sp6); }
.stepnav .btn-block { flex: 1; width: auto; margin-top: 0; }
.stepnav .btn-quiet { flex: none; padding-left: var(--sp4); padding-right: var(--sp5); }
.btn .ic { width: 18px; height: 18px; }

/* ── 確認頁 ──────────────────────────────────────────────────────── */
.review-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); margin-bottom: var(--sp2); }
.review-h h2 { margin: 0; }
.facts .facts-sub { padding-top: var(--sp4); }
.facts .facts-sub .v b, .facts .v b { color: var(--ink); font-weight: var(--fw-med); }
.submit-row { margin: var(--sp6) 0 0; }
.submit-row .stepnav { margin-top: 0; }

/* 身分證：預設遮住，點開才顯示完整 */
.reveal > summary {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp3);
  min-height: 52px; margin: calc((52px - 1.6em) / -2) 0;   /* 點得到 52px，但不把這一列撐高 */
  cursor: pointer; list-style: none;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal .full, .reveal[open] .masked, .reveal .hide, .reveal[open] .show { display: none; }
.reveal[open] .full, .reveal[open] .hide { display: inline; }
.reveal .masked, .reveal .full { color: var(--ink); letter-spacing: .04em; }
/* 遮蔽用的 • 落在拉丁字面（--font 拉丁在前），跟數字一樣大，不會變成全形的大圓點 */
.reveal .linkbtn { font-size: var(--t3); }

/* ── 送出之後 ────────────────────────────────────────────────────── */
/* 接下來：順序本身就是資訊，所以有編號 */
.next { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.next li {
  position: relative; counter-increment: n;
  padding: 0 0 var(--sp5) calc(32px + var(--sp4)); color: var(--body);
}
.next li:last-child { padding-bottom: 0; }
.next li::before {
  content: counter(n); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--rp);
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-050); color: var(--lit);
  font-size: var(--t3); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.next b { display: block; padding-top: 3px; margin-bottom: var(--sp1); color: var(--ink); font-weight: var(--fw-med); line-height: var(--lh-ui); }

/* 進度：一條直的時間線。完成的點是實心勾，現在的點是一圈 --lit */
.track { list-style: none; margin: var(--sp5) 0 0; padding: 0; }
.track li {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 var(--sp3);
  padding: 0 0 var(--sp5) calc(28px + var(--sp4)); line-height: var(--lh-ui);
}
.track li:last-child { padding-bottom: 0; }
.track li::after {   /* 點與點之間的線 */
  content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--line);
}
.track li:last-child::after { display: none; }
.track .dot {
  position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: var(--rp);
  display: flex; align-items: center; justify-content: center; background: var(--fill);
}
.track .dot .ic { width: 16px; height: 16px; }
.track .done .dot { background: var(--pink-050); color: var(--lit); }
.track .now .dot { background: var(--pink-050); box-shadow: inset 0 0 0 2px var(--lit); }
.track b { color: var(--ink); font-weight: var(--fw-med); }
.track .todo b { color: var(--muted); font-weight: 400; }
.track .when { font-size: var(--t3); color: var(--muted); white-space: nowrap; }
.track .now .when { color: var(--lit); font-weight: var(--fw-med); }
.track .note { grid-column: 1 / -1; margin-top: var(--sp1); font-size: var(--t3); color: var(--body); }

/* 頁尾的外連小圖示（填表頁的「個人資料與您的權利」開新分頁）：註腳大小，跟後台的外連圖示同一級 */
.site-foot .ic { width: 14px; height: 14px; margin-left: 2px; opacity: .55; vertical-align: -2px; }

/* 還沒定的值：看得出是待補，不假裝是真的 */
.tbd {
  display: inline; padding: 0 var(--sp1); border-radius: var(--r0);
  background: var(--warn-bg); color: var(--warn-fg); font-weight: var(--fw-med);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── 院所登入 ─────────────────────────────────────────────────────
   LINE 登入鈕照 LINE 官方規定（developers.line.biz「LINE Login button」）：底色 #06C755、白色官方圖示、
   圖示右邊一條 8% 黑、跟按鈕一樣高的分隔線、白字；滑過疊 10% 黑、按下疊 30% 黑。這是全站唯一不是玫瑰漸層的主按鈕，
   因為顏色是 LINE 規定的，不是我們選的。白字在 LINE 綠上約 2.3:1，低於大字 3:1，是照 LINE 規範接受的例外（DESIGN.md 覆寫段）。
   高度跟 .btn-block 同一級（64px），長者手指好按。 */
.btn-line {
  display: flex; align-items: stretch; width: 100%; min-height: 64px;
  border-radius: var(--r1); overflow: hidden;
  background: #06C755; color: #fff; text-decoration: none;
  font-weight: var(--fw-bold); font-size: var(--t5); letter-spacing: .02em;
}
.btn-line > .ico { flex: none; display: flex; align-items: center; padding: 0 14px; border-right: 1px solid rgba(0, 0, 0, .08); }
.btn-line > .ico img { display: block; width: 36px; height: 36px; }
.btn-line > .t { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 var(--sp4); }
.btn-line:hover { color: #fff; background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), #06C755; }
.btn-line:active { background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), #06C755; }
.btn-line:focus-visible { outline: 3px solid var(--lit); outline-offset: 3px; }

/* 開通碼輸入：打小寫也顯示大寫、字距拉開，對照紙上的碼比較好認 */
.code-in { text-transform: uppercase; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.code-in::placeholder { text-transform: none; letter-spacing: 0; }
/* 登入卡片置中，但錯誤訊息是一段話，靠左讀；裡面的電話是連結，跟著訊息的顏色 */
.login-card .msg { text-align: left; }
.msg-error a[href^="tel:"] { font-weight: var(--fw-med); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .stepnav .btn-quiet { padding-left: var(--sp3); padding-right: var(--sp4); }
  .dob { gap: var(--sp1); }
  /* 進度：日期換到標題下一行，「已送到臺北榮民總醫院」才不會被日期擠成兩行 */
  .track li { grid-template-columns: minmax(0, 1fr); }
}

/* 降低透明度：玻璃退成實白（theme.css 檔尾那條清單的延伸） */
@media (prefers-reduced-transparency: reduce) {
  .steps { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}