/**
 * 報名頁 / 完成頁自帶樣式（plan-demo-video-shell-20261015 第三段 C ①；定稿 docs/design/demo-shell-20261015/03-frontend.html ③）。
 *
 * 不吃主題：每條規則都鎖在 `.hz-enroll-page` 底下（⛔ 動主題全域），並用 `:root body .hz-enroll-page` 提高特異性
 * 壓過主題對 h2 / input / button 的樣式（同 blocksy-theme-reset-systemic 的做法）。主題深色 / 淺色都長一樣。
 *
 * 顏色變數：值抄殼 token —— **主人是 nexus/assets/admin/src/styles/tailwind.css 的 --hz-shell-***（殼 CSS 帶 Tailwind
 * 全域重設，不能在前台頁載入，所以這裡抄一份）。tests/js/enrollPageCss.test.js 讀兩個檔比對，漂移就紅；改色請改殼那份再同步。
 * EnrollmentPageService::render() 只在有短碼的頁 enqueue（handle hz-enroll-page）。
 */
.hz-enroll-page {
  --hz-shell-page-bg: 45 20% 96.1%;
  --hz-shell-surface: 0 0% 100%;
  --hz-shell-ink: 0 0% 8.2%;
  --hz-shell-ink-soft: 43 3.9% 35.1%;
  --hz-shell-muted: 44 5.2% 58.2%;
  --hz-shell-line: 45 16.7% 90.6%;
  --hz-shell-line-strong: 44 14.7% 85.3%;
  --hz-shell-accent: 22 72.2% 56.3%;
  --hz-shell-accent-ink: 23 66% 41.6%;
  --hz-shell-accent-tint: 28 68% 95.1%;
  --hz-shell-accent-tint-line: 25 65% 84.3%;
  --hz-shell-good: 154 64.3% 32.9%;
  --hz-shell-good-soft: 146 38.9% 92.9%;
  --hz-shell-font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
  --hz-shell-radius-xl: 1.25rem;
  --hz-shell-radius-lg: 1rem;
  --hz-shell-radius-md: 0.625rem;
  --hz-shell-shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04), 0 1px 1px rgba(20, 20, 20, 0.03);
  --hz-shell-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 12px 32px -16px rgba(20, 20, 20, 0.18);
  /* 字級（定稿 §8 質感規則：頁標題 26 / 卡標題 14.5 / 內文 15 / 說明 12–13；殼用 Tailwind class 沒有對應 token，在這裡定義一次） */
  --hz-ep-text-title: 1.625rem;
  --hz-ep-text-card: 0.90625rem;
  --hz-ep-text-body: 0.9375rem;
  --hz-ep-text-note: 0.8125rem;
  --hz-ep-text-tag: 0.75rem;
  --hz-ep-text-icon: 1.375rem;
  /* 間距 */
  --hz-ep-space-page: 1.5rem;
  --hz-ep-space-card-y: 1.25rem;
  --hz-ep-space-card: 1.375rem;
  --hz-ep-space-section: 1rem;
  --hz-ep-space-field: 0.875rem;
  --hz-ep-space-row: 0.5rem;
  --hz-ep-space-gap: 0.75rem;
  --hz-ep-space-label: 0.375rem;
  --hz-ep-space-xs: 0.125rem;
  --hz-ep-space-sm: 0.25rem;
  /* 控制項內距（按鈕 / 欄位 / 膠囊 / 提示框本身的內部 padding） */
  --hz-ep-pad-btn-y: 0.75rem;
  --hz-ep-pad-btn-x: 1.125rem;
  --hz-ep-pad-input-y: 0.625rem;
  --hz-ep-pad-input-x: 0.75rem;
  --hz-ep-pad-tag-x: 0.625rem;
  --hz-ep-pad-notice-x: 1rem;
  /* 尺寸 / 線 */
  --hz-ep-max-width: 40rem;
  --hz-ep-day-label-width: 3.5rem;
  --hz-ep-check-size: 3rem;
  --hz-ep-hairline: 1px;
  --hz-ep-focus-ring: 2px;
  --hz-ep-radius-pill: 999px;
}

:root body .hz-enroll-page {
  box-sizing: border-box;
  max-width: var(--hz-ep-max-width);
  margin: 0 auto;
  padding: var(--hz-ep-space-page);
  border-radius: var(--hz-shell-radius-xl);
  background: hsl(var(--hz-shell-page-bg));
  color: hsl(var(--hz-shell-ink));
  font-family: var(--hz-shell-font-family);
  font-size: var(--hz-ep-text-body);
  line-height: 1.6;
  text-align: left;
}

:root body .hz-enroll-page *,
:root body .hz-enroll-page *::before,
:root body .hz-enroll-page *::after {
  box-sizing: border-box;
}

:root body .hz-enroll-page .hz-ep-card {
  margin: 0 0 var(--hz-ep-space-section);
  padding: var(--hz-ep-space-card-y) var(--hz-ep-space-card);
  border: 0;
  border-radius: var(--hz-shell-radius-lg);
  background: hsl(var(--hz-shell-surface));
  box-shadow: var(--hz-shell-shadow);
  color: hsl(var(--hz-shell-ink));
}

:root body .hz-enroll-page .hz-ep-eyebrow {
  display: inline-block;
  margin: 0 0 var(--hz-ep-space-row);
  padding: var(--hz-ep-space-xs) var(--hz-ep-pad-tag-x);
  border-radius: var(--hz-ep-radius-pill);
  background: hsl(var(--hz-shell-accent-tint));
  color: hsl(var(--hz-shell-accent-ink));
  font-size: var(--hz-ep-text-tag);
  font-weight: 600;
}

:root body .hz-enroll-page .hz-ep-title {
  margin: 0 0 var(--hz-ep-space-gap);
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--hz-shell-ink));
  font-family: var(--hz-shell-font-family);
  font-size: var(--hz-ep-text-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

:root body .hz-enroll-page .hz-ep-days {
  margin: 0 0 var(--hz-ep-space-gap);
  padding: 0;
  border-top: var(--hz-ep-hairline) solid hsl(var(--hz-shell-line));
  list-style: none;
}

:root body .hz-enroll-page .hz-ep-days li {
  display: flex;
  gap: var(--hz-ep-space-gap);
  margin: 0;
  padding: var(--hz-ep-space-row) 0;
  border-bottom: var(--hz-ep-hairline) solid hsl(var(--hz-shell-line));
  color: hsl(var(--hz-shell-ink));
  font-variant-numeric: tabular-nums;
}

:root body .hz-enroll-page .hz-ep-day-label {
  min-width: var(--hz-ep-day-label-width);
  color: hsl(var(--hz-shell-muted));
}

:root body .hz-enroll-page .hz-ep-meta,
:root body .hz-enroll-page .hz-ep-lead {
  margin: 0 0 var(--hz-ep-space-row);
  color: hsl(var(--hz-shell-ink-soft));
  font-size: var(--hz-ep-text-note);
}

:root body .hz-enroll-page .hz-ep-form p {
  margin: 0 0 var(--hz-ep-space-field);
}

:root body .hz-enroll-page .hz-ep-form label {
  display: block;
  color: hsl(var(--hz-shell-ink-soft));
  font-size: var(--hz-ep-text-note);
  font-weight: 600;
}

:root body .hz-enroll-page .hz-ep-form input,
:root body .hz-enroll-page .hz-ep-form select,
:root body .hz-enroll-page .hz-ep-form textarea {
  display: block;
  width: 100%;
  margin: var(--hz-ep-space-label) 0 0;
  padding: var(--hz-ep-pad-input-y) var(--hz-ep-pad-input-x);
  border: var(--hz-ep-hairline) solid hsl(var(--hz-shell-line-strong));
  border-radius: var(--hz-shell-radius-md);
  background: hsl(var(--hz-shell-surface));
  box-shadow: none;
  color: hsl(var(--hz-shell-ink));
  font-family: var(--hz-shell-font-family);
  font-size: var(--hz-ep-text-body);
  font-weight: 400;
}

:root body .hz-enroll-page .hz-ep-form input:focus,
:root body .hz-enroll-page .hz-ep-form select:focus,
:root body .hz-enroll-page .hz-ep-form textarea:focus {
  border-color: hsl(var(--hz-shell-accent));
  outline: var(--hz-ep-focus-ring) solid hsl(var(--hz-shell-accent-tint-line));
  outline-offset: 0;
}

:root body .hz-enroll-page .hz-ep-submit {
  margin: var(--hz-ep-space-card-y) 0 0;
}

:root body .hz-enroll-page .hz-ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: var(--hz-ep-pad-btn-y) var(--hz-ep-pad-btn-x);
  border: var(--hz-ep-hairline) solid hsl(var(--hz-shell-accent));
  border-radius: var(--hz-shell-radius-md);
  background: hsl(var(--hz-shell-accent));
  box-shadow: var(--hz-shell-shadow-sm);
  color: hsl(var(--hz-shell-surface));
  font-family: var(--hz-shell-font-family);
  font-size: var(--hz-ep-text-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

:root body .hz-enroll-page .hz-ep-btn:hover,
:root body .hz-enroll-page .hz-ep-btn:focus-visible {
  filter: brightness(0.95);
  color: hsl(var(--hz-shell-surface));
}

:root body .hz-enroll-page .hz-ep-notice {
  margin: 0 0 var(--hz-ep-space-section);
  padding: var(--hz-ep-pad-btn-y) var(--hz-ep-pad-notice-x);
  border: var(--hz-ep-hairline) solid hsl(var(--hz-shell-accent-tint-line));
  border-radius: var(--hz-shell-radius-md);
  background: hsl(var(--hz-shell-accent-tint));
  color: hsl(var(--hz-shell-accent-ink));
  font-size: var(--hz-ep-text-note);
}

:root body .hz-enroll-page .hz-ep-notice a {
  color: hsl(var(--hz-shell-accent-ink));
  font-weight: 600;
  text-decoration: underline;
}

:root body .hz-enroll-page .hz-ep-done {
  text-align: center;
}

:root body .hz-enroll-page .hz-ep-check {
  display: grid;
  place-items: center;
  width: var(--hz-ep-check-size);
  height: var(--hz-ep-check-size);
  margin: var(--hz-ep-space-sm) auto var(--hz-ep-space-gap);
  border-radius: var(--hz-ep-radius-pill);
  background: hsl(var(--hz-shell-good-soft));
  color: hsl(var(--hz-shell-good));
  font-size: var(--hz-ep-text-icon);
  font-weight: 700;
}

:root body .hz-enroll-page .hz-ep-info {
  margin: var(--hz-ep-space-section) 0;
  padding: var(--hz-ep-space-section) var(--hz-ep-pad-btn-x);
  border-radius: var(--hz-shell-radius-md);
  background: hsl(var(--hz-shell-page-bg));
  text-align: left;
}

:root body .hz-enroll-page .hz-ep-info-title {
  margin: 0 0 var(--hz-ep-space-row);
  color: hsl(var(--hz-shell-ink));
  font-size: var(--hz-ep-text-card);
  font-weight: 600;
}

:root body .hz-enroll-page .hz-ep-actions {
  margin: 0;
}