/* 自動補樣式：js/app.js（_build/style.py） */
/* ==========================================================================
   body 狀態類別：is-paused、is-pro
   兩者都由 js/app.js 掛在 <body> 上。
   - is-paused：profile.treatmentStatus 為 paused（暫停療程，繼續記錄生活）
   - is-pro：entitlement 'pro' 已啟用
   只使用 tokens.css 的變數，淺色與深色模式自動切換。
   ========================================================================== */

/* --------------------------------------------------------------------------
   is-paused：暫停療程
   語氣中性、安靜，不用警示色，不暗示流失。
   -------------------------------------------------------------------------- */

/* 頂部列底緣加一條柔和的虛線，提示目前為暫停模式，不干擾版面 */
body.is-paused .l-topbar {
  position: sticky;
}

body.is-paused .l-topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-bottom: 2px dashed var(--accent);
  opacity: .7;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}

/* 捲動後頂部列已有實線邊框，虛線退為較淡，避免兩條線疊在一起 */
body.is-paused .l-topbar.is-scrolled::after {
  opacity: .35;
}

/* 側欄與 rail：品牌圓形旁加一枚小點，表示暫停中（純裝飾，不傳達唯一資訊） */
body.is-paused .l-tabbar__brand {
  position: relative;
}

body.is-paused .l-tabbar__brand::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  pointer-events: none;
}

@media (min-width: 1024px) and (min-height: 501px), (min-width: 1024px) and (orientation: portrait) {
  /* lg 側欄的品牌是文字字標，小點移到字標右上角 */
  body.is-paused .l-tabbar__brand::after {
    top: 10px;
    right: auto;
    left: 0;
    transform: translate(-2px, -2px);
    display: none;
  }
}

/* 暫停期間：與用藥記錄提醒有關的卡片收起，只留生活記錄
   （畫面已依狀態不渲染時，這裡是保險；不影響其他卡片） */
body.is-paused .c-occurrence-prompt,
body.is-paused .c-confirm-strip,
body.is-paused [data-treatment='active-only'] {
  display: none !important;
}

/* 暫停期間：推薦 Pro 的卡片不出現（不出現挽留或推銷） */
body.is-paused .c-pro-reco,
body.is-paused [data-pro-reco] {
  display: none !important;
}

/* 暫停期間：用藥相關的入口卡視覺降階，但仍可點擊與編輯（資料照常顯示） */
body.is-paused [data-treatment='medication'] {
  opacity: .72;
}

body.is-paused [data-treatment='medication']:focus-within,
body.is-paused [data-treatment='medication']:active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   is-pro：Pro 已啟用
   -------------------------------------------------------------------------- */

/* 已解鎖的功能不再顯示「Pro」小標籤；徽章列的鎖定提示也一併隱藏
   例外：付費頁本身的標籤與頁面內明示的狀態標籤（.c-pro-tag--status）保留 */
body.is-pro .c-pro-tag:not(.c-pro-tag--status) {
  display: none;
}

/* 預覽型鎖定：若畫面尚未重繪，也立即還原為清楚可讀並移除覆蓋卡 */
body.is-pro .c-pro-gate__preview {
  filter: none;
  pointer-events: auto;
  user-select: auto;
}

body.is-pro .c-pro-gate__card {
  display: none;
}

/* 主題色票：Pro 已啟用時，色票不再需要標籤，選取環維持清楚 */
body.is-pro .c-swatch .c-pro-tag {
  display: none;
}

/* 主題色切換時，常見大面積元素平順過渡（減少動態模式由下方歸零） */
body.is-pro .c-btn--primary,
body.is-pro .c-chip,
body.is-pro .c-seg__thumb,
body.is-pro .c-bar__fill,
body.is-pro .l-tabbar__item {
  transition-property: background-color, color, border-color, box-shadow, transform;
  transition-duration: var(--dur-2);
  transition-timing-function: var(--ease);
}

/* lg 側欄底部的 Pro 狀態卡：已啟用時以主色淡底、主色左緣標示 */
body.is-pro .l-tabbar__pro > * {
  background: var(--primary-tint);
  color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--primary);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
}

/* 未達成的 Pro 徽章在 Pro 啟用後不再灰階鎖定外觀（達成與否仍由 is-locked 之外的狀態決定） */
body.is-pro .c-badge.is-locked[data-tier='pro'] {
  filter: none;
  opacity: .45;
}

body.is-pro .c-badge.is-locked[data-tier='pro'].is-achieved {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   減少動態
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.is-paused .l-topbar::after,
  body.is-pro .c-btn--primary,
  body.is-pro .c-chip,
  body.is-pro .c-seg__thumb,
  body.is-pro .c-bar__fill,
  body.is-pro .l-tabbar__item {
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   列印：狀態裝飾不進入報告
   -------------------------------------------------------------------------- */
@media print {
  body.is-paused .l-topbar::after,
  body.is-paused .l-tabbar__brand::after {
    display: none;
  }
}