/* ============================================================
   Changing.ai · Components
   Buttons · Inputs · Tags · Cards · Modals · Toasts · Tooltips …
   Built on tokens from colors_and_type.css.
   Spec: reference/design-system.md (§A–§Z)
   ============================================================ */

/* ---------------- Reset essentials ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background: var(--color-surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.icon {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* =================================================
   §A  BUTTON
   ================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-instant) var(--ease-spring);
  user-select: none;
  position: relative;
}
.btn:active {
  transform: translateY(1px);
  transition-duration: var(--duration-instant);
}
.btn:focus-visible {
  outline: var(--focus-outline) solid var(--color-secondary-mid);
  outline-offset: var(--focus-offset);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm { min-height: 2rem;   padding-inline: var(--space-3); font-size: var(--text-xs); gap: var(--space-1); }
.btn-md { min-height: 2.5rem; padding-inline: var(--space-4); font-size: var(--text-sm); gap: var(--space-2); }
.btn-lg { min-height: 3rem;   padding-inline: var(--space-6); font-size: var(--text-base); gap: var(--space-3); }

.btn-cta { background: var(--color-cta-bg); color: #fff; border-color: var(--color-cta-bg); }
@media (hover: hover) { .btn-cta:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); } }

.btn-secondary {
  background: transparent;
  color: var(--color-secondary-mid);
  border-color: var(--color-secondary-mid);
}
@media (hover: hover) { .btn-secondary:hover { background: var(--color-secondary-pale); } }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
@media (hover: hover) { .btn-ghost:hover { background: var(--color-surface-warm); } }

.btn-link {
  background: transparent;
  color: var(--color-secondary-mid);
  min-height: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
}
.btn-link:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .btn-link:hover { color: var(--color-secondary-deep); } }

.btn-danger {
  background: var(--color-state-error-mid);
  color: #fff;
  border-color: var(--color-state-error-mid);
}
@media (hover: hover) { .btn-danger:hover { background: var(--color-state-error-deep); border-color: var(--color-state-error-deep); } }

.btn-icon { padding-inline: 0; aspect-ratio: 1; }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btnspin 600ms linear infinite;
  color: #fff;
}
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after,
.btn-link.is-loading::after { color: var(--color-secondary-mid); }
@keyframes btnspin { to { transform: rotate(360deg); } }

/* =================================================
   §B  INPUT / SELECT / TEXTAREA
   ================================================= */
.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-default); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--color-secondary-mid);
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--color-state-error-mid);
}
.input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--color-state-error-pale); }
.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly], .textarea[readonly] {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
.textarea { min-height: 6.5rem; resize: vertical; line-height: var(--leading-normal); }
.select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6270' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 12px; }

.input-sm, .select-sm, .textarea-sm { min-height: 2rem; padding-inline: var(--space-2); font-size: var(--text-sm); }
.input-lg, .select-lg, .textarea-lg { min-height: 3rem; padding-inline: var(--space-4); }

/* Field anatomy */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.field-required { color: var(--color-state-error-mid); font-weight: 700; margin-left: 2px; }
.field-optional { color: var(--color-text-muted); font-weight: 400; font-size: var(--text-xs); }
.field-meta { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); }
.field-hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.field-counter { color: var(--color-text-muted); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.field-error { color: var(--color-state-error-mid); font-size: var(--text-xs); font-weight: 500; }

.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { padding-left: 2.25rem; }
.input-group-icon-left {
  position: absolute;
  left: var(--space-3); top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: inline-flex;
}

/* Autofill reset */
.input:-webkit-autofill, .select:-webkit-autofill, .textarea:-webkit-autofill,
.input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-raised) inset;
  -webkit-text-fill-color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
  transition: background-color 5000s ease-in-out 0s;
}

/* =================================================
   §B.2  SELECTMENU — 單選下拉(listbox / dropdown)
   填補 §B 原生 <select>(展開選單吃不到 DS)與 §K 多選 combobox
   之間的空缺:單選、且連展開面板都全套 DS。沿用 §K 的 popover
   面板與選項視覺;鍵盤 ↑↓ / Enter / Esc、外點關閉、role="listbox"。
   ================================================= */
.selectmenu { position: relative; display: block; }

.selectmenu-trigger {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
  font-family: var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow    var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .selectmenu-trigger:hover { border-color: var(--color-border-default); } }
.selectmenu.is-open .selectmenu-trigger,
.selectmenu-trigger:focus-visible {
  outline: none;
  border-color: var(--color-secondary-mid);
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
}
.selectmenu-trigger[aria-invalid="true"] { border-color: var(--color-state-error-mid); }
.selectmenu-trigger[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--color-state-error-pale); }
.selectmenu-trigger:disabled,
.selectmenu-trigger[aria-disabled="true"] {
  background: var(--color-surface-sunken); color: var(--color-text-muted);
  cursor: not-allowed; pointer-events: none;
}

.selectmenu-leading { color: var(--color-text-muted); flex-shrink: 0; display: inline-flex; }
.selectmenu-leading svg { width: 16px; height: 16px; display: block; }

.selectmenu-value {
  flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--color-text-primary);
}
.selectmenu-trigger[data-empty="true"] .selectmenu-value {
  color: var(--color-text-subtle); font-weight: 400;
}

.selectmenu-caret {
  width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.selectmenu.is-open .selectmenu-caret { transform: rotate(180deg); }

.selectmenu-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dropdown);
  max-height: 18rem; display: none; flex-direction: column; overflow: hidden;
}
.selectmenu.is-open .selectmenu-panel { display: flex; }

.selectmenu-options {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent;
}

.selectmenu-group-title {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-num); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted);
  position: sticky; top: 0; background: var(--color-surface-raised);
  z-index: 1; /* 元件內部層疊，見 §6.5 例外 */
}

.selectmenu-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .selectmenu-option:hover { background: var(--color-surface-warm); } }
.selectmenu-option.is-active { background: var(--color-surface-warm); }
.selectmenu-option[aria-selected="true"] { background: var(--color-secondary-pale); }
.selectmenu-option:focus-visible { outline: 2px solid var(--color-secondary-mid); outline-offset: -2px; }

.selectmenu-option-text { flex: 1; min-width: 0; }
.selectmenu-option-label { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: 500; }
.selectmenu-option-meta  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }

.selectmenu-check {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--color-secondary-mid); opacity: 0;
}
.selectmenu-option[aria-selected="true"] .selectmenu-check { opacity: 1; }

.selectmenu-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center; font-size: var(--text-sm); color: var(--color-text-muted);
}

/* =================================================
   §C  STEPPER-FIELD
   ================================================= */
.stepper-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  min-height: 2.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: transparent;
}
.stepper-field:focus-within { border-color: var(--color-secondary-mid); box-shadow: 0 0 0 3px var(--color-secondary-pale); }
.stepper-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
}
.stepper-btn::before { content: ""; position: absolute; inset: -6px; }
.stepper-btn:disabled { color: var(--color-text-disabled); pointer-events: none; }
@media (hover: hover) { .stepper-btn:hover { background: var(--color-surface-warm); } }
.stepper-value {
  appearance: textfield;
  width: 2.5rem;
  border: 0; background: transparent;
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
}
.stepper-value:focus { outline: none; }

/* =================================================
   §D  CHECKBOX · RADIO · TOGGLE
   ================================================= */
.checkbox, .radio {
  appearance: none; -webkit-appearance: none;
  width: 1.125rem; height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--color-border-default);
  background: var(--color-surface-raised);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.checkbox { border-radius: 4px; }
.radio    { border-radius: 50%; }
.checkbox:checked, .radio:checked {
  border-color: var(--color-secondary-mid);
  background: var(--color-secondary-mid);
}
.checkbox:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox:indeterminate {
  border-color: var(--color-secondary-mid);
  background: var(--color-secondary-mid);
}
.checkbox:indeterminate::after {
  content: ""; width: 10px; height: 2px; background: #fff; transform: none; border: 0;
}
.radio:checked::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.checkbox:focus-visible, .radio:focus-visible {
  outline: none;
  border-color: var(--color-secondary-mid);
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
}

/* Toggle */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 36px; height: 20px;
  background: var(--color-surface-warm);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform var(--duration-base) var(--ease-out);
}
.toggle input:checked + .toggle-track { background: var(--color-secondary-mid); box-shadow: none; }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-track { box-shadow: inset 0 0 0 1px var(--color-border-default), 0 0 0 3px var(--color-secondary-pale); }
.toggle input:checked:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--color-secondary-pale); }

/* Choice card */
.choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.choice-card:has(input:checked) { border-color: var(--color-secondary-mid); background: var(--color-secondary-pale); }
/* 控制項與「標題首行」光學置中對齊，而非貼齊內容頂端。
   卡片保持 flex-start，描述行加長時內容仍以頂端為錨點；
   只把控制項下推 (標題行高 − 控制項高)/2 ≈ 3.4px。 */
.choice-card > .checkbox,
.choice-card > .radio {
  margin-top: calc((1rem * var(--leading-normal) - 1.125rem) / 2);
}
.choice-card-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.choice-card-title { font-weight: 600; color: var(--color-text-primary); }
.choice-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.choice-card-price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-secondary-deep); }

/* =================================================
   §E  TAG · BADGE · CHIP
   ================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  color: #fff;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}
.badge-dot     { width: 8px; height: 8px; min-width: 0; padding: 0; }
.badge-brand   { background: var(--color-brand-primary); }
.badge-success { background: var(--color-state-success-mid); }
.badge-warn    { background: var(--color-state-warn-mid); }
.badge-error   { background: var(--color-state-error-mid); }
.badge-info    { background: var(--color-state-info-mid); }
/* 中性 / 零值 badge — 中空描邊,用於「0 項」等無作用計數 */
.badge-neutral { background: transparent; color: var(--color-text-subtle); box-shadow: inset 0 0 0 1px var(--color-border-default); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tag-pale    { background: var(--color-secondary-pale); color: var(--color-secondary-deep); }
.tag-solid   { background: var(--color-secondary-mid);  color: #fff; }
.tag-deep    { background: var(--color-secondary-deep); color: #fff; }
.tag-outline { background: transparent; color: var(--color-secondary-mid); box-shadow: inset 0 0 0 1px var(--color-secondary-mid); }
.tag-ghost   { background: transparent; color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border-soft); }
/* ghost tag 的深色面版本 — footer / inverse zone 上使用 */
.tag-ghost-on-dark { background: transparent; color: var(--color-text-on-dark-muted); box-shadow: inset 0 0 0 1px var(--color-hairline-on-dark); }
.tag-uppercase { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.tag-success { background: var(--color-state-success-pale); color: var(--color-state-success-deep); }
.tag-warn    { background: var(--color-state-warn-pale);    color: var(--color-state-warn-deep); }
.tag-error   { background: var(--color-state-error-pale);   color: var(--color-state-error-deep); }
.tag-info    { background: var(--color-state-info-pale);    color: var(--color-state-info-deep); }
.tag-brand   { background: var(--color-brand-primary-pale); color: var(--color-brand-primary-hover); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0 var(--space-3) 0 var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.chip::before { content: ""; position: absolute; inset: 0; min-height: 44px; transform: translateY(-50%); top: 50%; }
.chip[data-selected="true"] {
  background: var(--color-secondary-mid);
  border-color: var(--color-secondary-mid);
  color: #fff;
}
.chip:focus-visible {
  outline: 2px solid var(--color-secondary-mid);
  outline-offset: 2px;
}
.chip-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.chip-count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  background: var(--color-surface-warm);
  color: var(--color-text-muted);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

/* =================================================
   §E.6  BADGE STATUS — 數值旁的迷你狀態章(16px)
   方塊內為白色 mask icon(此處白色為色塊上的圖標填色,非深色面文字)。
   ================================================= */
.badge-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: var(--radius-xs);
  flex-shrink: 0; position: relative; vertical-align: middle;
}
.badge-status::before {
  content: ''; width: 70%; height: 70%; background-color: #FFF;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.badge-status-good { background: var(--color-state-success-mid); }
.badge-status-good::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.2 6 L5 8.8 L9.8 3.4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.2 6 L5 8.8 L9.8 3.4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
}
.badge-status-info { background: color-mix(in oklab, var(--color-state-success-mid) 55%, var(--color-secondary-mid)); }
.badge-status-info::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='3' r='1' fill='black'/><rect x='5.15' y='5' width='1.7' height='4.6' rx='0.6' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='3' r='1' fill='black'/><rect x='5.15' y='5' width='1.7' height='4.6' rx='0.6' fill='black'/></svg>");
}
.badge-status-warn { background: var(--color-state-warn-mid); }
.badge-status-warn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 2 L6 7' stroke='black' stroke-width='2' stroke-linecap='round'/><circle cx='6' cy='9.3' r='1.05' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 2 L6 7' stroke='black' stroke-width='2' stroke-linecap='round'/><circle cx='6' cy='9.3' r='1.05' fill='black'/></svg>");
}

/* =================================================
   §F  CARD
   ================================================= */
.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) { .card { padding: var(--space-6); } }
.card-cream   { background: var(--color-surface-warm); }
.card-sunken  { background: var(--color-surface-sunken); border-color: var(--color-border-default); }
.card-inverse { background: var(--color-surface-inverse); color: var(--color-text-on-dark); border-color: rgba(232,226,208,0.10); }
.card-featured { border-color: var(--color-brand-primary); position: relative; }
.card-featured::before {
  content: "推薦 · RECOMMENDED";
  position: absolute; top: 0; right: var(--space-6);
  transform: translateY(-50%);
  background: var(--color-brand-primary);
  color: #fff;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}
.card-interactive { cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
@media (hover: hover) { .card-interactive:hover { transform: translateY(-1px); border-color: var(--color-border-default); } }
.card-eyebrow {
  font-family: var(--font-num); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.card-title { font-size: var(--text-xl); font-weight: 600; color: var(--color-text-primary); line-height: var(--leading-snug); }
.card-title-em { font-family: var(--font-serif-em); font-style: italic; font-weight: 500; color: var(--color-secondary-mid); }
.card-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }
.card-body { font-size: var(--text-sm); color: var(--color-text-body); line-height: var(--leading-relaxed); }
.card-foot {
  margin: var(--space-2) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-warm);
  border-top: 1px solid var(--color-border-faint);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; justify-content: space-between; align-items: center;
}

/* =================================================
   §G  PRICE
   ================================================= */
.price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-text-primary);
}
.price-cur { font-size: 0.65em; color: var(--color-text-muted); font-weight: 500; }
.price-num { font-weight: 700; }
.price-dec, .price-unit { font-size: 0.5em; color: var(--color-text-muted); font-weight: 500; }

.price-display { font-size: 3.5rem; }
.price-card    { font-size: 1.75rem; }
.price-inline  { font-size: var(--text-base); }
.price-mini    { font-size: var(--text-sm); }

.price-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.price-old { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-text-subtle); text-decoration: line-through; }
.price-savings { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-state-success-mid); font-weight: 600; }

.price-meta { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.price-meta-sep { color: var(--color-text-subtle); }

/* =================================================
   §G.2  PRICE ANCHOR — 報價卡價格堆疊(可懸停明細)
   所有內層 class 一律 scoped 於 .price-anchor,不覆寫 §G 全域。
   ================================================= */
.price-anchor {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: help;
  transition: background var(--duration-fast) var(--ease-out);
}
@media (max-width: 767px) { .price-anchor { align-items: flex-start; } }
@media (hover: hover) { .price-anchor:hover { background: var(--color-surface-warm); } }
.price-anchor:focus-visible {
  outline: var(--focus-outline) solid var(--color-secondary-mid);
  outline-offset: var(--focus-offset);
}
.price-anchor .price-strike {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-subtle);
  text-decoration: line-through;
}
.price-anchor .price-strike[hidden] { display: none; }
.price-anchor .price-row {
  display: inline-flex; align-items: baseline; gap: var(--space-1);
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.price-anchor .price-cur {
  font-family: var(--font-num); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); letter-spacing: 0.04em;
}
.price-anchor .price-num {
  font-family: var(--font-num); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-text-primary); line-height: 1;
}
.price-anchor .price-dec {
  font-family: var(--font-num); font-size: var(--text-base); font-weight: 600;
  color: var(--color-text-muted); letter-spacing: -0.01em;
}
/* 全年 / 平均 模式的前綴與單位後綴 */
.price-anchor .price-prefix {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); align-self: baseline;
}
.price-anchor .price-unit {
  font-family: var(--font-num); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); letter-spacing: -0.01em; margin-left: 1px;
}
/* 價格下方優惠標籤 — 依 DS 放寬規則可用 acquisition orange 作文字 accent */
.price-anchor .price-meta {
  display: block; font-size: var(--text-xs); font-weight: 500;
  color: var(--color-brand-primary); letter-spacing: 0.02em;
  line-height: var(--leading-snug); margin-top: var(--space-1);
  max-width: 18rem; text-align: right;
}
@media (max-width: 767px) { .price-anchor .price-meta { text-align: left; } }
.price-anchor .price-meta-em { font-weight: 700; }
.price-anchor .price-meta-sep { color: var(--color-text-subtle); opacity: 0.7; font-weight: 400; margin: 0 0.1em; }
.price-anchor .info-marker { align-self: center; margin-left: var(--space-1); }
.price-anchor:hover .info-marker,
.price-anchor:focus-visible .info-marker {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-surface-raised);
}

/* =================================================
   §G.3  INFO MARKER — serif italic 圓形 i / ? 標記
   DS icon 規則的明文例外:刻意以襯線斜體字符承載品牌味,不走 Lucide。
   ================================================= */
.info-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-serif-em); font-style: italic; font-weight: 600;
  font-size: var(--text-xs); line-height: 1; padding-bottom: 1px;
  color: var(--color-text-muted);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

/* =================================================
   §H  BREADCRUMB · STEPS · TABS
   ================================================= */
.breadcrumb { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.breadcrumb-item { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb-item-current { color: var(--color-text-primary); font-weight: 600; }
.breadcrumb-sep { width: 12px; height: 12px; color: var(--color-text-subtle); }
/* H.1 窄螢幕收合(mobile-first)— 首頁 + 當前頁恆顯;中間層級 < 40rem 收成單一「…」(.breadcrumb-ellipsis),
   展開項(.breadcrumb-collapse)退隱;當前頁過長則截斷。½ 4 頁共用，不在頁面自寫。 */
.breadcrumb-ellipsis { display: inline-flex; align-items: center; }
.breadcrumb-collapse { display: none; }
.breadcrumb .breadcrumb-item-current { max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 40rem) {
  .breadcrumb-ellipsis { display: none; }
  .breadcrumb-collapse { display: inline-flex; align-items: center; }
  .breadcrumb .breadcrumb-item-current { max-width: none; }
}

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); align-items: flex-start; }
.steps-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; text-align: center; }
.steps-item + .steps-item::before {
  content: "";
  position: absolute;
  left: -50%; right: 50%; top: 16px;
  height: 1px;
  background: var(--color-border-default);
}
.steps-item.steps-item-complete + .steps-item::before,
.steps-item.steps-item-complete::before { background: var(--color-commitment-mid); }
.steps-dot {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-canvas);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: var(--text-sm); font-weight: 600;
  position: relative; z-index: 1;
}
.steps-item-current .steps-dot {
  border-width: 2px;
  border-color: var(--color-commitment-mid);
  color: var(--color-commitment-mid);
}
.steps-item-current .steps-label { font-weight: 700; color: var(--color-text-primary); }
.steps-item-complete .steps-dot {
  background: var(--color-commitment-mid);
  border-color: var(--color-commitment-mid);
  color: #fff;
}
.steps-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); }
.steps-desc { font-size: var(--text-xs); color: var(--color-text-muted); }

/* 手機端 — 收窄間距:dot 縮小、gap 收緊、label 縮一級、desc 收起,連接線隨 dot 半徑重新置中 */
@media (max-width: 480px) {
  .steps { gap: var(--space-1); }
  .steps-item { gap: var(--space-1); }
  .steps-item + .steps-item::before { top: 13px; }
  .steps-dot { width: 26px; height: 26px; font-size: var(--text-xs); }
  .steps-item-current .steps-dot { border-width: 2px; }
  .steps-label { font-size: var(--text-xs); line-height: 1.25; }
  .steps-desc { display: none; }
}

/* Pill Segment */
.pill-segment {
  display: inline-flex;
  padding: 3px;
  background: var(--color-surface-warm);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  border-radius: var(--radius-pill);
  gap: 0;
}
.pill-segment-item {
  background: transparent;
  border: 0;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 36px;
}
.pill-segment-item-active { background: var(--color-secondary-mid); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.pill-segment-item:focus-visible { outline: 2px solid var(--color-secondary-mid); outline-offset: 2px; }

/* Inline 變體 — 放進 .field / 表單流時用。降到欄位半徑語彙(radius-md),
   與相鄰 .input / .select / .daterange-trigger 邊角對齊,避免膠囊混進方角欄位群。
   獨立工具列的 view 切換仍用預設膠囊。 */
.pill-segment--inline { border-radius: var(--radius-md); }
.pill-segment--inline .pill-segment-item { border-radius: var(--radius-sm); }

/* Underline tabs */
.tabs-underline { display: inline-flex; gap: var(--space-6); border-bottom: 1px solid var(--color-border-faint); }
.tabs-underline-item {
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  padding: var(--space-3) 0;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.tabs-underline-item-active { color: var(--color-text-primary); font-weight: 600; border-bottom-color: var(--color-brand-primary); }
.tabs-underline-item-count {
  background: var(--color-brand-primary-pale); color: var(--color-brand-primary-hover);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-pill);
}

/* =================================================
   §I  PROSE (long-form content container)
   For FAQ answers, terms, articles, rendered markdown.
   Native <details>/<summary> for disclosure.
   ================================================= */
.prose {
  color: var(--color-text-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.prose > * + * { margin-top: var(--space-3); }
.prose h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xl);  line-height: var(--leading-snug); color: var(--color-text-primary); }
.prose h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg);  line-height: var(--leading-snug); color: var(--color-text-primary); }
.prose h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); line-height: var(--leading-snug); color: var(--color-text-primary); }
.prose h4 {
  font-family: var(--font-num); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-muted);
}
.prose h1 + *, .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-2); }
.prose * + h1, .prose * + h2, .prose * + h3, .prose * + h4 { margin-top: var(--space-5); }
.prose em {
  font-family: var(--font-serif-em); font-style: italic; color: var(--color-secondary-mid);
  font-variant-numeric: lining-nums; /* 等高數字 — 避免襯線舊體數字看似下標 */
}
.prose strong { font-weight: 600; color: var(--color-text-primary); }
.prose a {
  color: var(--color-secondary-mid); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
@media (hover: hover) { .prose a:hover { color: var(--color-secondary-deep); } }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-1); }
.prose blockquote {
  border-left: 3px solid var(--color-secondary-mid);
  padding-left: var(--space-4); color: var(--color-text-muted);
}
.prose blockquote p { color: var(--color-text-muted); }
.prose blockquote footer {
  margin-top: var(--space-2);
  font-family: var(--font-serif-em); font-style: italic; font-weight: 500;
  font-size: var(--text-sm); color: var(--color-secondary-deep);
  font-variant-numeric: lining-nums;
}
.prose code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--color-prose-fill);
  padding: 0.1em 0.35em; border-radius: var(--radius-xs);
}
.prose hr { border: 0; border-top: 1px solid var(--color-border-faint); }
/* <mark> — semantic emphasis as accent wavy underline. NOT ::selection. */
.prose mark {
  background: transparent;
  color: var(--color-accent-deep);
  font-weight: 700;
  text-decoration: underline wavy;
  text-decoration-color: var(--color-accent-mid);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  padding: 0;
  border-radius: 0;
}

/* §I.1.1 — <details>/<summary> disclosure (FAQ)
   自帶 raised 表面:連續的 details 組成一張白色圓角面板,彼此以 hairline 分隔。 */
.prose details, details.disclosure {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  padding: var(--space-3) var(--space-4);
}
.prose details + details,
details.disclosure + details.disclosure { margin-top: 0; border-top: 0; }
.prose details:first-of-type,
details.disclosure:first-of-type { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.prose details:last-of-type,
details.disclosure:last-of-type { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.prose details:only-of-type,
details.disclosure:only-of-type { border-radius: var(--radius-md); }
.prose details > summary, details.disclosure > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  font-weight: 600; color: var(--color-text-primary);
  margin: 0;
}
.prose details > summary::-webkit-details-marker,
details.disclosure > summary::-webkit-details-marker { display: none; }
.prose details > summary::marker,
details.disclosure > summary::marker { content: ''; }
.details-icon {
  width: 1rem; height: 1rem; flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out);
}
details[open] > summary .details-icon { transform: rotate(45deg); }
.prose details > summary:focus-visible,
details.disclosure > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
  border-radius: var(--radius-sm);
}
.details-body {
  margin-top: var(--space-2);
  color: var(--color-text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
@media (prefers-reduced-motion: reduce) {
  .details-icon { transition: none; }
}

/* §I.5 — inline extras: sup / sub / kbd */
.prose sup, .prose sub { font-size: 0.72em; line-height: 0; }
.prose sup { vertical-align: super; }
.prose sub { vertical-align: sub; }
.prose kbd {
  font-family: var(--font-mono); font-size: 0.8em;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em; color: var(--color-text-primary);
}

/* §I.6 — nested lists (DS-native markers, stepped style) */
.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol { margin-top: var(--space-1); }
.prose ul { list-style: disc; }
.prose ul ul { list-style: circle; }
.prose ul ul ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose ol ol { list-style: lower-alpha; }
.prose li::marker { color: var(--color-secondary-mid); }
.prose ol > li::marker { color: var(--color-secondary-mid); font-weight: 600; font-variant-numeric: tabular-nums; }

/* §I.7 — code block <pre> + syntax tokens (.tk-*) */
.prose pre {
  background: var(--color-prose-fill);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  font-size: var(--text-sm); line-height: var(--leading-normal);
}
.prose pre code {
  font-family: var(--font-mono);
  background: none; padding: 0; border-radius: 0;
  font-size: inherit; color: var(--color-text-secondary);
}
.tk-key  { color: var(--color-secondary-deep); font-weight: 500; }  /* keyword */
.tk-str  { color: var(--color-state-success-deep); }                /* string */
.tk-num  { color: var(--color-state-warn-deep); }                   /* number */
.tk-com  { color: var(--color-text-subtle); font-style: italic; }   /* comment */
.tk-prop { color: var(--color-state-info-deep); }                   /* property / attr */
.tk-fn,
.tk-var  { color: var(--color-brand-primary-hover); }               /* function / variable */
.tk-punc { color: var(--color-text-muted); }                        /* punctuation */

/* §I.8 — table (with horizontal-scroll wrapper for small screens) */
.md-table-wrapper {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.prose table {
  width: 100%; min-width: 30rem;
  border-collapse: collapse; font-size: var(--text-sm);
  background: var(--color-surface-raised);
}
.prose thead th {
  text-align: left; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-prose-fill);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
}
/* §I.8.1 — prose 放在 sunken 表面時,表頭 / code 底色上提至 warm,避免與容器同色糊掉。 */
[data-surface="sunken"] .prose,
.card-sunken .prose {
  --color-prose-fill: var(--color-surface-warm);
}
.prose tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-faint);
  color: var(--color-text-body); vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: none; }

/* §I.9 — callout (note / tip / warning / important) */
.prose .callout {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid; border-left-width: 3px;
  border-radius: var(--radius-md);
}
.prose .callout > * { margin: 0; }
.callout-header { display: flex; align-items: center; gap: var(--space-2); }
.callout-icon { width: 16px; height: 16px; flex-shrink: 0; }
.callout-label {
  font-family: var(--font-num); font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.callout-note {
  background: var(--color-state-info-pale);
  border-color: color-mix(in oklab, var(--color-state-info-mid) 32%, transparent);
  border-left-color: var(--color-state-info-mid);
}
.callout-note .callout-icon, .callout-note .callout-label { color: var(--color-state-info-deep); }
.callout-tip {
  background: var(--color-state-success-pale);
  border-color: color-mix(in oklab, var(--color-state-success-mid) 32%, transparent);
  border-left-color: var(--color-state-success-mid);
}
.callout-tip .callout-icon, .callout-tip .callout-label { color: var(--color-state-success-deep); }
.callout-warning {
  background: var(--color-state-warn-pale);
  border-color: color-mix(in oklab, var(--color-state-warn-mid) 32%, transparent);
  border-left-color: var(--color-state-warn-mid);
}
.callout-warning .callout-icon, .callout-warning .callout-label { color: var(--color-state-warn-deep); }
.callout-important {
  background: var(--color-state-error-pale);
  border-color: color-mix(in oklab, var(--color-state-error-mid) 32%, transparent);
  border-left-color: var(--color-state-error-mid);
}
.callout-important .callout-icon, .callout-important .callout-label { color: var(--color-state-error-deep); }

/* §I.10 — figure / figcaption */
.prose figure { margin: 0; }
.prose figure img, .prose figure svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
}
.prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted);
  text-align: center; text-wrap: pretty;
}

/* §I.2 — nested prose steps down one heading level */
.card .prose h1, .panel-body .prose h1 { font-size: var(--text-lg); }
.card .prose h2, .panel-body .prose h2 { font-size: var(--text-base); }
.card .prose h3, .panel-body .prose h3 { font-size: var(--text-sm); }

/* =================================================
   §J  SLIDER · RANGE
   Native <input type="range"> underneath — keyboard /
   SR / form submission all free.
   ================================================= */
.slider {
  /* md (default) — track 4px, thumb 22px */
  --slider-track-h: 4px;
  --slider-thumb: 22px;
  --slider-bubble-space: 0px;
  position: relative;
  display: block;
  padding-top: var(--slider-bubble-space);
}
.slider-sm { --slider-track-h: 3px; --slider-thumb: 18px; }
.slider-lg { --slider-track-h: 6px; --slider-thumb: 26px; }
/* When bubbles are present, reserve space above the rail */
.slider:has(.slider-bubble) { --slider-bubble-space: 2rem; }

/* Visible rail (rest of track) */
.slider-track {
  position: relative;
  height: var(--slider-track-h);
  margin: calc((var(--slider-thumb) - var(--slider-track-h)) / 2) 0;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
}
/* Filled portion — left/right set inline (or by JS) */
.slider-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--color-secondary-mid);
  border-radius: var(--radius-pill);
}

/* Native range input(s), overlaid on the rail */
.slider-input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0; right: 0;
  top: var(--slider-bubble-space);
  width: 100%;
  height: var(--slider-thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.slider-input:focus { outline: none; }

/* — WebKit track + thumb — */
.slider-input::-webkit-slider-runnable-track {
  height: var(--slider-thumb);
  background: transparent;
  border: none;
}
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  border: 2px solid var(--color-secondary-mid);
  box-shadow: 0 1px 3px rgba(35, 69, 85, 0.2);
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
/* 4px focus ring — round target needs a wider ring than form fields */
.slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(35, 69, 85, 0.2), 0 0 0 4px var(--color-secondary-pale);
}
@media (hover: hover) {
  .slider-input:hover::-webkit-slider-thumb { border-color: var(--color-secondary-deep); }
}

/* — Firefox track + thumb — */
.slider-input::-moz-range-track {
  height: var(--slider-thumb);
  background: transparent;
  border: none;
}
.slider-input::-moz-range-thumb {
  width: var(--slider-thumb);
  height: var(--slider-thumb);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  border: 2px solid var(--color-secondary-mid);
  box-shadow: 0 1px 3px rgba(35, 69, 85, 0.2);
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.slider-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(35, 69, 85, 0.2), 0 0 0 4px var(--color-secondary-pale);
}

/* Range mode — two overlaid inputs; only the thumbs are grabbable
   so each handle stays independently draggable (JS enforces minGap). */
.slider[data-range] .slider-input { pointer-events: none; }
.slider[data-range] .slider-input::-webkit-slider-thumb { pointer-events: auto; }
.slider[data-range] .slider-input::-moz-range-thumb { pointer-events: auto; }

/* Value bubble — left set inline as % */
.slider-bubble {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 2px var(--space-2);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-secondary-deep);
  background: var(--color-secondary-pale);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
}

/* Min / max axis labels */
.slider-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Stepped marks (variant) — discrete ticks under the rail */
.slider-ticks {
  position: relative;
  height: var(--space-2);
  margin-top: calc(var(--space-1) * -1);
}
.slider-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: var(--space-2);
  background: var(--color-border-default);
  transform: translateX(-50%);
}

/* Histogram range (variant) — distribution bars above the rail */
.slider-histogram {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 2.5rem;
  margin-bottom: var(--space-2);
}
.slider-histogram-bar {
  flex: 1;
  background: var(--color-border-soft);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.slider-histogram-bar.is-active { background: var(--color-secondary-mid); }

/* Range + linked numeric inputs (variant) */
.slider-linked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.slider-linked .input { text-align: right; }
.slider-linked-sep { color: var(--color-text-subtle); flex-shrink: 0; }

/* Disabled */
.slider.is-disabled { opacity: 0.5; pointer-events: none; }

/* =================================================
   §K  MULTICOMBOBOX (Multi-select combobox)
   ================================================= */
.combobox { position: relative; }

.combobox-trigger {
  display: flex; align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer; gap: var(--space-2); width: 100%; text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow    var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .combobox-trigger:hover { border-color: var(--color-border-default); } }
.combobox.is-open .combobox-trigger {
  border-color: var(--color-secondary-mid);
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
}

.combobox-trigger-inner {
  flex: 1; display: flex; flex-wrap: wrap;
  gap: var(--space-1); align-items: center; min-width: 0;
}

.combobox-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 4px 0 var(--space-2);
  background: var(--color-secondary-pale);
  color: var(--color-secondary-deep);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; line-height: 1;
}
.combobox-chip-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 0; background: transparent;
  border-radius: 50%; color: var(--color-secondary-deep); cursor: pointer; padding: 0;
}
@media (hover: hover) {
  .combobox-chip-close:hover { background: rgba(61,111,133,0.18); }
}
.combobox-chip-close svg { width: 10px; height: 10px; }

.combobox-input {
  flex: 1 1 80px; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-sm);
  color: var(--color-text-primary); outline: none; min-width: 60px; padding: 0;
}
.combobox-input::placeholder { color: var(--color-text-subtle); }

.combobox-caret {
  width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.combobox.is-open .combobox-caret { transform: rotate(180deg); }

.combobox-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dropdown);
  max-height: 22rem; display: none; flex-direction: column; overflow: hidden;
}
.combobox.is-open .combobox-panel { display: flex; }

.combobox-search {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-faint);
  display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
}
.combobox-search svg { width: 14px; height: 14px; color: var(--color-text-subtle); flex-shrink: 0; }
.combobox-search-input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-sm);
  color: var(--color-text-primary); outline: none; padding: 0;
}
.combobox-search-input::placeholder { color: var(--color-text-subtle); }

.combobox-options {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent;
}

.combobox-group-title {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-num); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted);
  position: sticky; top: 0; background: var(--color-surface-raised);
  z-index: 1; /* 元件內部層疊，見 §6.5 例外 */
}
/* Collapsible group header — render the title as a <button> to make the
   whole group foldable. Larger/normal-case label (not the eyebrow style),
   disclosure caret pinned to the trailing edge so it never aligns with the
   leading checkbox column of the options below it. */
button.combobox-group-title {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; border: 0; cursor: pointer; text-align: left;
  min-height: 40px; padding-top: var(--space-3); padding-bottom: var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { button.combobox-group-title:hover { color: var(--color-text-body); } }
button.combobox-group-title:focus-visible {
  outline: 2px solid var(--color-secondary-mid); outline-offset: -2px; border-radius: var(--radius-xs);
}
.combobox-group-caret {
  width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--color-text-subtle);
  transition: transform var(--duration-fast) var(--ease-out);
}
.combobox-group-title[aria-expanded="false"] .combobox-group-caret { transform: rotate(-90deg); }

.combobox-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .combobox-option:hover { background: var(--color-surface-warm); } }
.combobox-option.is-active { background: var(--color-secondary-pale); }
.combobox-option:focus-visible {
  outline: 2px solid var(--color-secondary-mid); outline-offset: -2px;
}

.combobox-opt-icon { width: 16px; height: 16px; flex-shrink: 0; }
.combobox-option-label {
  font-size: var(--text-sm); color: var(--color-text-primary); font-weight: 500;
}
.combobox-option-meta {
  font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px;
}
.combobox-option-text { flex: 1; min-width: 0; }

.combobox-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center; font-size: var(--text-sm); color: var(--color-text-muted);
}

.combobox-footer {
  border-top: 1px solid var(--color-border-faint);
  padding: var(--space-2) var(--space-3);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-xs); color: var(--color-text-muted);
  flex-shrink: 0; background: var(--color-surface-warm);
}
.combobox-footer-count { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.combobox-footer-count strong { color: var(--color-secondary-mid); font-weight: 700; }
.combobox-footer-clear {
  background: transparent; border: 0; padding: 0;
  font-family: var(--font-sans); font-size: var(--text-xs);
  color: var(--color-text-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
@media (hover: hover) { .combobox-footer-clear:hover { color: var(--color-state-error-mid); } }

/* =================================================
   §L  DATERANGEPICKER (Date range selector)
   ================================================= */
.daterange { position: relative; display: block; }

.daterange-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-sans); text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow    var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .daterange-trigger:hover { border-color: var(--color-border-default); } }
.daterange.is-open .daterange-trigger {
  border-color: var(--color-secondary-mid);
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
}
.daterange-trigger:focus-visible {
  outline: none;
  border-color: var(--color-secondary-mid);
  box-shadow: 0 0 0 3px var(--color-secondary-pale);
}

.daterange-trig-icon { color: var(--color-text-muted); flex-shrink: 0; }
.daterange-trig-icon svg { width: 16px; height: 16px; display: block; }
.daterange-placeholder { font-size: var(--text-sm); color: var(--color-text-subtle); flex: 1; }
.daterange-dates {
  display: inline-flex; align-items: center;
  gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-primary); flex: 1;
}
.daterange-arrow { color: var(--color-text-subtle); font-size: var(--text-xs); }
.daterange-ph-end { color: var(--color-text-subtle); }
.daterange-nights {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); font-weight: 600;
  padding: 2px var(--space-2);
  background: var(--color-secondary-pale); color: var(--color-secondary-deep);
  border-radius: var(--radius-pill); flex-shrink: 0;
}
.daterange-trig-caret {
  color: var(--color-text-muted); flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.daterange-trig-caret svg { width: 16px; height: 16px; display: block; }
.daterange.is-open .daterange-trig-caret { transform: rotate(180deg); }

.daterange-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-popover);
  display: none; min-width: 20rem;
}
.daterange.is-open .daterange-panel { display: block; }

.daterange-cals { display: flex; }

.daterange-cal { flex: 1; padding: var(--space-4); min-width: 0; }
.daterange-cal + .daterange-cal { border-left: 1px solid var(--color-border-faint); }

.daterange-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.daterange-nav {
  width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; background: transparent; border: 0;
  border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer;
  padding: 0; position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
.daterange-nav::before { content: ''; position: absolute; inset: -6px; }
@media (hover: hover) {
  .daterange-nav:hover { background: var(--color-surface-warm); color: var(--color-text-primary); }
}
.daterange-nav:focus-visible { outline: 2px solid var(--color-secondary-mid); outline-offset: 2px; }
.daterange-nav svg { width: 16px; height: 16px; }
.daterange-cal-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }

.daterange-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-1);
}
.daterange-wd {
  text-align: center; font-family: var(--font-num); font-size: var(--text-xs);
  font-weight: 600; color: var(--color-text-muted); padding: var(--space-1) 0;
}

.daterange-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.daterange-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: var(--text-sm); color: var(--color-text-body);
  cursor: pointer; background: transparent; border: 0; border-radius: 0;
  padding: 0; min-height: 34px;
  transition: background var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .daterange-day:not(.in-range):not(.range-start):not(.range-end):not(.range-single):not(:disabled):hover {
    background: var(--color-surface-warm); border-radius: var(--radius-xs);
  }
}
.daterange-day:focus-visible {
  outline: 2px solid var(--color-secondary-mid); outline-offset: -2px;
  border-radius: var(--radius-xs); z-index: 1; /* 元件內部層疊，見 §6.5 例外 */
}
.daterange-day.other-month { color: var(--color-text-subtle); }
.daterange-day.today       { font-weight: 700; color: var(--color-brand-primary); }
.daterange-day.past        { color: var(--color-text-disabled); cursor: not-allowed; }
.daterange-day.in-range {
  background: var(--color-secondary-pale);
  color: var(--color-secondary-deep);
  border-radius: 0;
}
.daterange-day.range-start {
  background: var(--color-secondary-mid); color: #fff; font-weight: 700;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.daterange-day.range-end {
  background: var(--color-secondary-mid); color: #fff; font-weight: 700;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.daterange-day.range-single {
  background: var(--color-secondary-mid); color: #fff;
  border-radius: var(--radius-sm);
}

.daterange-panel-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-faint);
  background: var(--color-surface-warm);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.daterange-panel-hint {
  font-size: var(--text-xs); color: var(--color-text-muted);
}

@media (max-width: 719px) {
  .daterange-panel {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    min-width: 0; max-height: 88vh; overflow-y: auto; display: none;
    z-index: var(--z-modal);
  }
  .daterange.is-open .daterange-panel { display: block; }
  .daterange-cals { flex-direction: column; }
  .daterange-cal + .daterange-cal {
    border-left: 0; border-top: 1px solid var(--color-border-faint);
  }
}

.daterange-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(21,23,28,0.45);
  z-index: var(--z-overlay);
}
.daterange.is-open .daterange-backdrop { display: block; }
@media (min-width: 720px) {
  .daterange-backdrop { display: none !important; }
}

.daterange-handle {
  width: 2.5rem; height: 4px;
  background: var(--color-border-default); border-radius: var(--radius-pill);
  margin: var(--space-3) auto var(--space-1);
}

/* =================================================
   §M  HEADER · NAV · FOOTER
   ================================================= */
.app-header {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-soft);
  /* 全站 header 不釘頂(隨頁捲走);釘頂角色交給桌機查價條 / 手機搜尋條 */
  position: relative; z-index: var(--z-sticky);
}
.app-header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  height: 4.25rem;
  display: flex; align-items: center; gap: var(--space-6);
}
@media (min-width: 768px) { .app-header-inner { padding-inline: var(--container-pad-tablet); } }

.app-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: var(--color-text-primary);
  font-weight: 700;
}
.app-brand-logo {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-serif-em);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 600;
}
.app-brand-name { font-size: var(--text-base); font-weight: 700; }
.app-brand-name-em { font-family: var(--font-serif-em); font-style: italic; font-weight: 500; color: var(--color-brand-primary); }

.app-nav { display: none; flex: 1; gap: var(--space-1); }
@media (min-width: 992px) { .app-nav { display: inline-flex; } }
.app-nav-item {
  display: inline-flex; align-items: center;
  padding: 22px var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
}
.app-nav-item:hover { color: var(--color-text-primary); }
.app-nav-item-active { font-weight: 600; color: var(--color-text-primary); }
.app-nav-item-active::after {
  content: "";
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 2px; background: var(--color-brand-primary);
}

.app-header-actions { margin-left: auto; display: inline-flex; gap: var(--space-2); align-items: center; }

/* Footer */
.app-footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-on-dark);
  padding-block: var(--space-16) var(--space-8);
}
.app-footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px) { .app-footer-inner { padding-inline: var(--container-pad-tablet); } }
.app-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) { .app-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .app-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.app-footer-col-head {
  font-family: var(--font-num);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-3);
}
.app-footer-link { display: block; padding: var(--space-1) 0; color: var(--color-text-on-dark); text-decoration: none; font-size: var(--text-sm); }
.app-footer-link:hover { color: #fff; }
.app-footer-brand { font-family: var(--font-serif-em); font-style: italic; font-size: var(--text-xl); }
.app-footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(232,226,208,0.08);
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
/* Footer 聯絡資訊 + WhatsApp */
.app-footer-contact {
  margin-top: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 22rem;
}
.app-footer-contact-item {
  display: flex; align-items: flex-start; gap: var(--space-2-5, 0.625rem);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark-muted);
}
.app-footer-contact-item svg {
  flex: none; width: 1rem; height: 1rem; margin-top: 0.1875rem;
  color: var(--color-text-on-dark-faint, var(--color-text-on-dark-muted));
}
a.app-footer-contact-item { text-decoration: none; }
a.app-footer-contact-item:hover { color: #fff; }
a.app-footer-contact-item:hover svg { color: #fff; }
.app-footer-wa {
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2-5, 0.625rem) var(--space-4);
  background: #25D366; color: #053d24;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  width: fit-content;
  transition: background var(--dur-fast, 120ms) var(--ease-standard, ease), transform var(--dur-fast, 120ms) var(--ease-standard, ease);
}
.app-footer-wa svg { flex: none; width: 1.25rem; height: 1.25rem; }
.app-footer-wa:hover { background: #1fbb59; }
.app-footer-wa:active { transform: translateY(1px); }

/* =================================================
   §N  MODAL
   ================================================= */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(21,23,28,0.45);
  z-index: var(--z-overlay);
}
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  max-width: 32rem;
  max-height: 85vh;
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
}
.modal-sm { max-width: 22rem; }
.modal-lg { max-width: 44rem; }
.modal-xl { max-width: 60rem; }
.modal-header {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-faint);
}
.modal-header-text { flex: 1; }
.modal-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-primary); }
.modal-title-em { font-family: var(--font-serif-em); font-style: italic; color: var(--color-secondary-mid); font-weight: 500; }
.modal-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.modal-body { padding: var(--space-5) var(--space-6); overflow-y: auto; flex: 1; font-size: var(--text-sm); color: var(--color-text-body); line-height: var(--leading-relaxed); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-warm);
  border-top: 1px solid var(--color-border-faint);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; justify-content: flex-end; gap: var(--space-2);
}
.close-btn {
  background: transparent; border: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.close-btn:hover { background: var(--color-surface-warm); color: var(--color-text-primary); }
.modal-confirm .modal-header { flex-direction: column; align-items: center; text-align: center; }
.modal-confirm-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-confirm-icon-warn    { background: var(--color-state-warn-pale);    color: var(--color-state-warn-mid); }
.modal-confirm-icon-error   { background: var(--color-state-error-pale);   color: var(--color-state-error-mid); }
.modal-confirm-icon-success { background: var(--color-state-success-pale); color: var(--color-state-success-mid); }
.modal-confirm-icon-info    { background: var(--color-state-info-pale);    color: var(--color-state-info-mid); }
.modal-confirm .modal-footer { justify-content: center; }

/* =================================================
   §O  DRAWER (side sheet)
   Cream canvas surface (same as page). Slides in from the right;
   warm footer one step deeper for a quiet division.
   ================================================= */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(21,23,28,0.45);
  z-index: var(--z-overlay);
}
.drawer {
  position: fixed; top: 0; right: 0;
  width: 28rem; /* md = 448px */
  max-width: calc(100% - 2rem);
  height: 100vh;
  background: var(--color-surface-canvas); /* 跟頁面同一張紙;backdrop + shadow 負責分離 */
  box-shadow: var(--shadow-drawer);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out);
}
.drawer-sm { width: 20rem; }  /* 320px */
.drawer-lg { width: 36rem; }  /* 576px */
.drawer-header {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-faint);
}
.drawer-header-text { flex: 1; min-width: 0; }
.drawer-eyebrow {
  font-family: var(--font-num); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.drawer-eyebrow-accent { color: var(--color-secondary-mid); }
.drawer-title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-xl); line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
.drawer-title-em { font-family: var(--font-serif-em); font-style: italic; font-weight: 500; color: var(--color-secondary-mid); }
.drawer-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.drawer-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-6);
  font-size: var(--text-sm); color: var(--color-text-body);
  line-height: var(--leading-relaxed);
}
.drawer-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-warm); /* 比 drawer(canvas)深一階,與 modal/card footer 一致 */
  border-top: 1px solid var(--color-border-faint);
}

/* §O.3 — bottom-sheet on mobile */
.drawer-bottom {
  top: auto; bottom: 0; left: 0; right: 0;
  width: 100%; height: auto; max-height: 75vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.drawer-handle {
  width: 2.5rem; height: 4px;
  background: var(--color-border-default); border-radius: var(--radius-pill);
  margin: var(--space-3) auto 0;
  flex-shrink: 0;
}

/* §O.4 — slide-in / out (toggle data-state on the element) */
.drawer[data-state="closed"] { transform: translateX(100%); }
.drawer-bottom[data-state="closed"] { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

/* =================================================
   §P  TOAST
   ================================================= */
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  width: 22rem;
  max-width: calc(100% - 2rem);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-toast);
}
.toast-icon { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-body { flex: 1; }
.toast-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.toast-desc  { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.toast-close { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 4px; }

.toast-info    { border-left-color: var(--color-state-info-mid); }
.toast-info    .toast-icon { background: var(--color-state-info-pale); color: var(--color-state-info-deep); }
.toast-success { border-left-color: var(--color-state-success-mid); }
.toast-success .toast-icon { background: var(--color-state-success-pale); color: var(--color-state-success-deep); }
.toast-warn    { border-left-color: var(--color-state-warn-mid); }
.toast-warn    .toast-icon { background: var(--color-state-warn-pale); color: var(--color-state-warn-deep); }
.toast-error   { border-left-color: var(--color-state-error-mid); }
.toast-error   .toast-icon { background: var(--color-state-error-pale); color: var(--color-state-error-deep); }

/* =================================================
   §Q  TOOLTIP
   ================================================= */
.tooltip {
  display: inline-block;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-dark);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  box-shadow: var(--shadow-tooltip);
  position: relative;
  max-width: 16rem;
}
.tooltip-arrow::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 9px; clip-path: path("M0 0 Q7 0 10 9 Q13 0 20 0 Z");
  background: var(--color-surface-inverse);
}
/* 全站深色說明浮層單一規格:殼(內距/圓角/字級/行高/字重)與標題由這組 token 決定,
   .tooltip-lg 與 .tooltip-cov 共用;各元件只准改「位置與寬度」,不准再改字級與內距。 */
:root { --tip-pad: var(--space-3) var(--space-4); --tip-radius: var(--radius-md); --tip-font: var(--text-sm); --tip-leading: var(--leading-relaxed); --tip-weight: 400; }
.tooltip-lg { padding: var(--tip-pad); border-radius: var(--tip-radius); max-width: 22rem; font-size: var(--tip-font); line-height: var(--tip-leading); font-weight: var(--tip-weight); }

/* =================================================
   §R  INLINE ALERT
   ================================================= */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-state-info-pale);
  border: 1px solid color-mix(in oklab, var(--color-state-info-mid) 20%, transparent);
  border-radius: var(--radius-md);
}
.alert-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-state-info-mid); display: inline-flex; }
.alert-body { flex: 1; }
.alert-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-state-info-deep); }
.alert-desc { font-size: var(--text-sm); color: var(--color-text-body); margin-top: 2px; }
.alert-actions { margin-top: var(--space-2); display: flex; gap: var(--space-3); }
.alert-action-btn { background: transparent; border: 0; padding: 0; font-family: inherit; font-size: var(--text-sm); cursor: pointer; }
.alert-action-btn-primary { color: var(--color-state-info-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.alert-action-btn-secondary { color: var(--color-text-muted); }
.alert-close { background: transparent; border: 0; cursor: pointer; color: var(--color-text-muted); }
.alert-info    { background: var(--color-state-info-pale); }
.alert-success { background: var(--color-state-success-pale); border-color: color-mix(in oklab, var(--color-state-success-mid) 20%, transparent); }
.alert-success .alert-icon { color: var(--color-state-success-mid); }
.alert-success .alert-title { color: var(--color-state-success-deep); }
.alert-warn    { background: var(--color-state-warn-pale); border-color: color-mix(in oklab, var(--color-state-warn-mid) 20%, transparent); }
.alert-warn    .alert-icon { color: var(--color-state-warn-mid); }
.alert-warn    .alert-title { color: var(--color-state-warn-deep); }
.alert-error   { background: var(--color-state-error-pale); border-color: color-mix(in oklab, var(--color-state-error-mid) 20%, transparent); }
.alert-error   .alert-icon { color: var(--color-state-error-mid); }
.alert-error   .alert-title { color: var(--color-state-error-deep); }

/* =================================================
   §U  DATA STATES — SKELETON · SPINNER · PROGRESS · EMPTY
   ================================================= */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--color-surface-sunken) 0%, var(--color-surface-warm) 50%, var(--color-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: skel 1.5s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes skel { to { background-position: -200% 0; } }
.skeleton-text { display: block; height: 0.875em; border-radius: var(--radius-xs); }
.skeleton-line { display: block; height: 0.875em; margin-bottom: var(--space-2); border-radius: var(--radius-xs); }
.skeleton-circle { border-radius: 50%; }
.skeleton-rect { display: block; border-radius: var(--radius-sm); }

.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border-soft);
  border-top-color: var(--color-secondary-mid);
  animation: btnspin 600ms linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 32px; height: 32px; border-width: 2.5px; }
.spinner-xl { width: 48px; height: 48px; border-width: 3px; }

.progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar { height: 100%; background: var(--color-secondary-mid); border-radius: var(--radius-pill); transition: width var(--duration-base) var(--ease-out); }

/* Empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-secondary);
}
.empty-icon { color: var(--color-text-subtle); margin-bottom: var(--space-4); }
.empty-icon-error { color: var(--color-state-error-mid); }
.empty-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-2); }
.empty-title-em { font-family: var(--font-serif-em); font-style: italic; color: var(--color-secondary-mid); font-weight: 500; }
.empty-desc { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 28rem; line-height: var(--leading-relaxed); margin: 0 0 var(--space-4); }
.empty-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* =================================================
   §V  TABLE
   ================================================= */
.table-frame { background: var(--color-surface-raised); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.table-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-border-faint);
  flex-wrap: wrap;
}
.table-toolbar-search { flex: 1 1 auto; max-width: 22rem; min-width: 0; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface-raised); font-size: var(--text-sm); color: var(--color-text-body); }
.table thead { background: var(--color-surface-warm); }
.table th { text-align: left; font-family: var(--font-num); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.table th, .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-faint); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: var(--color-secondary-pale); }
.table-hover tbody tr { transition: background var(--duration-fast) var(--ease-out); }
@media (hover: hover) { .table-hover tbody tr:hover { background: var(--color-surface-warm); } }
.table-cell-primary { font-weight: 600; color: var(--color-text-primary); }
.table-cell-numeric, .table-cell-currency { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.table-cell-currency { font-weight: 600; color: var(--color-text-primary); }
.table-cell-date { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
.table-cell-actions { text-align: right; white-space: nowrap; width: 1%; }

/* =================================================
   §W  PAGINATION
   ================================================= */
.pagination { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pagination-summary { font-size: var(--text-sm); color: var(--color-text-muted); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pagination-summary strong { color: var(--color-text-primary); font-weight: 600; }
.pagination-controls { display: flex; align-items: center; gap: var(--space-1); }
.pagination-btn {
  min-width: 2rem; height: 2rem;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-num);
  font-size: var(--text-sm); font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
}
@media (hover: hover) { .pagination-btn:hover { background: var(--color-surface-warm); color: var(--color-text-primary); } }
.pagination-btn.is-active { background: var(--color-secondary-mid); color: #fff; font-weight: 600; cursor: default; }
.pagination-btn:disabled, .pagination-btn[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.pagination-ellipsis { min-width: 2rem; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); }

/* =================================================
   §T  FORM LAYOUT (section heads)
   ================================================= */
.form-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-faint);
  margin-bottom: var(--space-6);
}
.form-section-head-text { flex: 1 1 auto; min-width: 0; }
.form-section-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-primary); margin: 0; }
.form-section-desc  { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* =================================================
   §Y  COVERAGE ROW — 方案保障橫向比較列(招牌元件)
   橫向 scroll 的保障格 + 直書「詳情」軌條。
   ================================================= */
.cov-row {
  display: flex; align-items: stretch; min-width: 0;
  background: var(--color-surface-warm);
  border-top: 1px solid var(--color-border-faint);
}
.cov-cells {
  display: flex; align-items: stretch; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  scroll-padding-left: var(--space-5);
}
.cov-cells::-webkit-scrollbar { height: 6px; }
.cov-cells::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: var(--radius-pill); }
.cov-cells::-webkit-scrollbar-track { background: transparent; }
.cov-cell {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-right: var(--space-4); margin-right: var(--space-4);
  border-right: 1px solid var(--color-border-faint); min-width: 6.5rem;
}
.cov-cell:last-of-type { border-right: 0; padding-right: var(--space-5); margin-right: 0; }
.cov-cell-key {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); white-space: nowrap;
}
.cov-cell[data-selected="true"] .cov-cell-key { color: var(--color-text-primary); font-weight: 600; }
.cov-cell-pin { width: 10px; height: 10px; color: var(--color-text-muted); flex-shrink: 0; }
.cov-cell[data-selected="true"] .cov-cell-pin { color: var(--color-secondary-mid); }
.cov-cell-val {
  display: inline-flex; align-items: baseline; gap: var(--space-1);
  font-family: var(--font-num); font-size: var(--text-base); font-weight: 700;
  color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.cov-cell-val[data-type="text"] { font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; }
.cov-cell-val sup, .cov-cell-sub sup {
  font-family: var(--font-num); font-size: 0.6em; font-weight: 600; color: var(--color-text-muted);
  letter-spacing: 0.04em; position: relative; top: -0.5em; margin-right: 0.14em;
}
.cov-cell-sub { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); margin-top: 2px; letter-spacing: 0.02em; }
.cov-rail {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem;
  background: var(--color-surface-sunken); border-left: 1px solid var(--color-border-soft);
  color: var(--color-text-primary); min-height: var(--touch-min);
  transition: background var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .cov-rail:hover { background: color-mix(in srgb, var(--color-surface-sunken) 86%, var(--color-text-muted)); } }
.cov-rail:focus-visible { outline: var(--focus-outline) solid var(--color-secondary-mid); outline-offset: -2px; }
.cov-rail-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.cov-rail-label {
  font-weight: 700; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap;
  letter-spacing: 0.18em; font-size: var(--text-xs); color: var(--color-text-primary);
}
.cov-rail-chev { width: 14px; height: 14px; color: var(--color-text-primary); }
/* coverage tooltip(dark)— 強調字一律走 on-dark token,不用純白 */
.cov-cell-tip { position: relative; display: inline-flex; cursor: help; }
.cov-cell-tip:focus-visible { outline: var(--focus-outline) solid var(--color-secondary-mid); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.tooltip-cov {
  position: absolute; display: flex; flex-direction: column; gap: 3px;
  bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%);
  background: var(--color-surface-inverse); color: var(--color-text-on-dark);
  padding: var(--tip-pad); border-radius: var(--tip-radius);
  font-family: var(--font-sans); font-size: var(--tip-font); line-height: var(--tip-leading); font-weight: var(--tip-weight);
  box-shadow: var(--shadow-tooltip); width: max-content; max-width: 15rem;
  white-space: normal; text-align: left; z-index: var(--z-tooltip);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
  pointer-events: none;
}
.cov-cell-tip:hover .tooltip-cov, .cov-cell-tip:focus-visible .tooltip-cov { opacity: 1; visibility: visible; }
/* 箭頭:寬底尖角、兩側內凹弧線(纖細優雅款)。預設朝下;朝上用 .tip-below / 各元件 top 變體 */
.tooltip-cov-arrow { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 20px; height: 9px; background: var(--color-surface-inverse); clip-path: path("M0 0 Q7 0 10 9 Q13 0 20 0 Z"); }
.tip-below .tooltip-cov-arrow, .price-anchor .tooltip-cov-arrow, .dtag .tooltip-cov-arrow { bottom: auto; top: -8px; clip-path: path("M0 9 Q7 9 10 0 Q13 9 20 9 Z"); }
.tooltip-cov-strong { color: var(--color-text-on-dark-strong); font-weight: 700; }
.tooltip-cov-good   { color: var(--color-state-success-on-dark); font-weight: 700; }
.tooltip-cov-warn   { color: var(--color-state-warn-on-dark); font-weight: 700; }
.tooltip-cov-info   { color: color-mix(in oklab, var(--color-state-success-on-dark) 55%, var(--color-state-info-on-dark)); font-weight: 700; }
/* accent 標題變體 — 走可換的 --tooltip-title-color(預設品牌橘);供價格明細 tooltip 等使用。
   全站共用(原本散在 plan-card.css / compare-table.css,現收歸此處與其他 -cov 變體並列)。 */
.tooltip-cov-accent, .tooltip-title { color: var(--tooltip-title-color, color-mix(in oklab, var(--color-brand-primary) 68%, var(--color-text-on-dark-strong) 32%)); font-weight: 700; }
/* CoverageItem calloutType 第三態 mixed + calloutText 多段 Markdown tooltip */
/* calloutType 三態 good / warn / mixed(無 info)。mixed = 同格有好有壞或僅中性說明,
   沿用 DS info 的綠×次色混色,圖示換成 ±。 */
.badge-status-mixed { background: color-mix(in oklab, var(--color-state-success-mid) 55%, var(--color-secondary-mid)); }
.badge-status-mixed::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1.6v4.4M3.8 3.8h4.4M3.8 9.6h4.4' stroke='black' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1.6v4.4M3.8 3.8h4.4M3.8 9.6h4.4' stroke='black' stroke-width='1.8' stroke-linecap='round' fill='none'/></svg>");
}
/* 標註 = 多段 Markdown(1–3 段,最長 344 字;粗體小標/清單/逐行)。無標題列。 */
.tooltip-cov.tooltip-cov-md { gap: var(--space-2); width: max-content; max-width: min(22rem, calc(100vw - 2rem)); }
.tooltip-cov-md .md-p { display: flex; flex-direction: column; }
.tooltip-cov-md .md-l { display: block; }
.tooltip-cov-md strong { color: var(--color-text-on-dark-strong); font-weight: 700; }
.tooltip-cov-md .md-ul { margin: 2px 0 0; padding-left: 1.1em; list-style: disc; display: flex; flex-direction: column; gap: 2px; }
.tooltip-cov-md .md-ul li::marker { color: var(--color-text-on-dark); }


/* =================================================
   §Z.2  ATTENTION NUDGE — 受認可的「持續提示」動效例外
   幅度 ≤ 6px · 受 prefers-reduced-motion 保護 · hover 時停止。
   nudge 為點動後停頓;slide / float / pulse 為來回循環。
   ================================================= */
.attention-nudge {
  --nudge-dist: 4px;
  animation: attention-nudge 1.8s var(--ease-out) infinite;
}
@keyframes attention-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  75% { transform: translateX(calc(var(--nudge-dist) * -1)); }
  88% { transform: translateX(calc(var(--nudge-dist) * -0.25)); }
}
@keyframes attention-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(calc(var(--nudge-dist) * -1)); }
}
@keyframes attention-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.7; }
  50% { transform: translate(calc(var(--nudge-dist) * -1), calc(var(--nudge-dist) * -0.35)); opacity: 1; }
}
@keyframes attention-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(calc(var(--nudge-dist) * -1)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .attention-nudge { animation: none; } }

/* =================================================
   §X  POPOVER — anchored click-popover(浮層面板 + 箭頭)
   -------------------------------------------------
   回補背景:DS 原有 §Q Tooltip(hover、純文字)與 §O Drawer(全幅 overlay),
   但缺「點擊觸發、錨定在觸發元素旁、帶箭頭、可放任意內容」的 popover。
   本節補上這個缺口。行為由 components.js 的 Popover class 提供
   (toggle / 外點關閉 / Esc / aria-expanded 同步)。

   結構:
     <span class="popover-host" data-popover>
       <button class="popover-trigger" data-popover-trigger aria-expanded="false">
         觸發 <svg class="popover-trigger-chev">…</svg>
       </button>
       <div class="popover" role="dialog">
         <span class="popover-arrow" aria-hidden="true"></span>
         <div class="popover-head"><span class="popover-title">標題</span></div>
         <div class="popover-body"> … 任意內容 … </div>
       </div>
     </span>

   位置:預設面板在觸發列「下方」(箭頭在上緣)。
     data-placement="top"  → 面板在上方(箭頭在下緣)
     data-align="end"      → 面板右對齊(箭頭靠右)
   寬度由實例自訂(min-width 16rem;可在 .popover 上加 inline width 或工具類)。
   視窗翻轉(flip)刻意不內建,維持 primitive 輕量;需要時在 app 端加。
   ================================================= */
.popover-host { position: relative; display: inline-flex; min-width: 0; }

/* 通用觸發列(可選 — 任何帶 aria-expanded 的可聚焦元素皆可當觸發) */
.popover-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  background: transparent; border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--color-text-secondary);
  text-align: left; min-width: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .popover-trigger:hover { background: var(--color-surface-warm); } }
.popover-trigger[aria-expanded="true"] { background: var(--color-surface-warm); }
.popover-trigger:focus-visible { outline: var(--focus-outline) solid var(--color-secondary-mid); outline-offset: var(--focus-offset); }

.popover-trigger-chev {
  width: 12px; height: 12px; color: var(--color-text-muted); flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.popover-trigger[aria-expanded="true"] .popover-trigger-chev { transform: rotate(180deg); color: var(--color-text-primary); }

/* 浮層面板 */
.popover {
  position: absolute; z-index: var(--z-popover);
  min-width: 16rem; max-width: calc(100vw - 2.5rem);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.popover.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* 位置:預設 = 觸發列下方 */
.popover { top: calc(100% + var(--space-2)); left: 0; }
.popover[data-align="end"] { left: auto; right: 0; }
.popover[data-placement="top"] { top: auto; bottom: calc(100% + var(--space-2)); transform: translateY(-4px); }
.popover[data-placement="top"].is-open { transform: translateY(0); }

/* 箭頭(45° 方塊,只描兩條邊,貼合面板邊框) */
.popover-arrow {
  position: absolute; width: 10px; height: 10px;
  background: var(--color-surface-raised); transform: rotate(45deg);
  left: var(--space-5);
}
.popover[data-align="end"] .popover-arrow { left: auto; right: var(--space-5); }
.popover:not([data-placement="top"]) .popover-arrow {
  top: -5px; border-left: 1px solid var(--color-border-soft); border-top: 1px solid var(--color-border-soft);
}
.popover[data-placement="top"] .popover-arrow {
  bottom: -5px; border-right: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft);
}

/* 結構分區 */
.popover-head {
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border-faint);
}
.popover-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); }
.popover-body {
  padding: var(--space-4); max-height: 64vh; overflow-y: auto;
  font-size: var(--text-sm); color: var(--color-text-body); line-height: var(--leading-relaxed);
}
.popover-head + .popover-body { padding-top: var(--space-3); }

/* =================================================
   Utilities
   ================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px) { .container { padding-inline: var(--container-pad-tablet); } }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row   { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }