/* calm —— 深色是基礎，不是變體。
   跟 travel-money / price-check 剛好相反：那些是工具，白底高對比是對的；
   這是冥想 App，深夜打開一片白是刺眼的。

   淺色仍然完整維護（白天在桌機上用），但它是那個「變體」。 */

:root {
  --bg:        #0b1016;   /* 深藍灰地 */
  --surface:   #10161e;
  --raised:    #161e28;
  --text:      #e6edf3;
  --muted:     #8b9aa8;
  --faint:     #5a6a78;
  --line:      #1e2833;
  --line-soft: #161e27;

  --accent:      #4ec9b0;
  /* 青底上的字用地色，不用白 —— 白字壓 #4ec9b0 對比只有 1.9，差得很遠 */
  --accent-ink:  #06121a;
  --accent-weak: #0f2a26;

  --moon:   #dfe8f0;      /* 冥想模式唯一的亮色 */
  --danger: #e07a6a;

  --r: 14px;
  --tap: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* 所有轉場的預設時長。慢是刻意的 —— 這個 App 的每一個動作
     都不該給人「快一點」的感覺。 */
  --calm: 900ms;
  --quick: 220ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f4f6f7;
    --surface:   #ffffff;
    --raised:    #ffffff;
    --text:      #15202a;
    --muted:     #5d6b76;
    --faint:     #94a3ad;
    --line:      #dde3e7;
    --line-soft: #eaeef0;

    --accent:      #17806c;
    --accent-ink:  #ffffff;
    --accent-weak: #e2f2ee;

    --moon:   #15202a;
    --danger: #b3402c;
  }
}

/* 手動覆寫。兩個方向都要，不然在系統是淺色時選不了深色。 */
:root[data-theme="light"] {
  --bg: #f4f6f7; --surface: #ffffff; --raised: #ffffff;
  --text: #15202a; --muted: #5d6b76; --faint: #94a3ad;
  --line: #dde3e7; --line-soft: #eaeef0;
  --accent: #17806c; --accent-ink: #ffffff; --accent-weak: #e2f2ee;
  --moon: #15202a; --danger: #b3402c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body { overscroll-behavior-y: none; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

/* 減少動態偏好。
   注意呼吸圓不在這裡關掉 —— 它是內容不是裝飾，
   關掉它等於把功能拿走。呼吸圓自己在下面改成亮度變化。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- 版面 */

#app { min-height: 100dvh; display: flex; flex-direction: column; }

.screen {
  flex: 1;
  padding: calc(var(--safe-t) + 20px) 20px 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.screen.center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

h1 { font-size: 22px; font-weight: 600; letter-spacing: .02em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 28px 0 12px; letter-spacing: .04em; }
p  { margin: 0 0 12px; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.hint { color: var(--faint); font-size: 13px; line-height: 1.5; }

/* ---------------------------------------------------------------- 底部導覽 */

.tabbar {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  padding-bottom: var(--safe-b);
}

.tabbar button {
  min-height: var(--tap);
  padding: 10px 4px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--faint);
  font-size: 11px; letter-spacing: .05em;
  transition: color var(--quick);
}
.tabbar button .ico { font-size: 19px; line-height: 1; }
.tabbar button[aria-current="page"] { color: var(--accent); }

/* ---------------------------------------------------------------- 音景卡 */

.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.track {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  transition: border-color var(--quick), background var(--quick);
}
.track.on {
  border-color: var(--accent); background: var(--raised);
  /* 展開時佔滿整列 —— 兩欄格子裡的滑桿只有 81px 寬，調不準 */
  grid-column: 1 / -1;
}
.track.disabled { opacity: .38; }

.track-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--tap); text-align: left;
}
.track-head .ico { font-size: 20px; width: 26px; text-align: center; }
.track-head .name { flex: 1; font-size: 15px; }
.track-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: background var(--quick);
}
.track.on .track-head .dot { background: var(--accent); }

.track-body { margin-top: 10px; display: grid; gap: 10px; }
.track-body[hidden] { display: none; }

/* 滑桿。
   刻意做大：這是這個 App 最常被觸碰的東西，而且常常是在昏暗的房間裡。 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--tap); background: transparent; margin: 0;
  display: block;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--line);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px;   /* (22 − 4) / 2 */
  border-radius: 50%; background: var(--accent);
  border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0;
  border-radius: 50%; background: var(--accent);
}

.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row label { font-size: 12px; color: var(--muted); width: 42px; flex: none; }

/* ---------------------------------------------------------------- 按鈕 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 22px;
  border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line);
  font-size: 15px;
  transition: background var(--quick), border-color var(--quick), opacity var(--quick);
}
.btn:disabled { opacity: .4; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.ghost { background: none; }
.btn.danger { color: var(--danger); }
.btn.block { width: 100%; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row.tight { gap: 6px; }

.chip {
  min-height: var(--tap); padding: 0 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
  transition: all var(--quick);
}
.chip[aria-pressed="true"] { background: var(--accent-weak); border-color: var(--accent); color: var(--text); }

/* ---------------------------------------------------------------- 計時 */

.timer-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; text-align: center; flex: 1;
  padding: calc(var(--safe-t) + 24px) 20px 32px;
}

/* 進行中的暗場。螢幕既然亮著，就要亮得最少。 */
.timer-screen.dim { background: #05080b; }
.timer-screen.dim .clock { color: var(--moon); }
.timer-screen.dim .sub, .timer-screen.dim .hint { color: #4a5560; }

.clock {
  font-size: clamp(56px, 20vw, 96px);
  font-weight: 200; letter-spacing: .01em;
  line-height: 1;
  transition: color var(--calm);
}

.ring { display: block; width: min(72vw, 280px); height: auto; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .bg { stroke: var(--line); }
.ring .fg { stroke: var(--accent); transition: stroke-dashoffset 1s linear; }

/* 呼吸圓。
   用 CSS transition 驅動，每個呼吸階段邊界由排程器重設一次 ——
   跑在 compositor 上，主執行緒忙碌時也不會卡頓。
   絕對不要改成每幀用 JS 改 SVG 的 r 屬性，那會每幀重新光柵化。 */
.orb {
  width: min(60vw, 220px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent) 70%);
  transform: scale(var(--orb-scale, .55));
  transition: transform var(--phase-dur, 4s) cubic-bezier(.37, 0, .63, 1),
              opacity var(--phase-dur, 4s) ease;
}
@media (prefers-reduced-motion: reduce) {
  /* 圓不縮放了，改成亮度呼吸 —— 功能保留，前庭刺激拿掉 */
  .orb { transform: none !important; opacity: var(--orb-scale, .55); }
}

/* ---------------------------------------------------------------- 列表 */

.list { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--r); overflow: hidden; }
.item {
  background: var(--surface); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; min-height: var(--tap);
}
.item .grow { flex: 1; min-width: 0; }
.item .t { font-size: 15px; }
.item .s { font-size: 13px; color: var(--muted); }
.item .v { font-size: 15px; color: var(--muted); }

.empty { color: var(--faint); text-align: center; padding: 48px 20px; font-size: 14px; }

/* ---------------------------------------------------------------- 提示 */

.toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 20px;
  font-size: 14px; max-width: 88vw;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 50;
  animation: rise var(--quick) ease;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

.banner {
  background: var(--accent-weak); border: 1px solid var(--accent);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px;
  font-size: 14px;
}

/* 表格式的設定列 */
.setting { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.setting .grow { flex: 1; }
.setting .k { font-size: 15px; }
.setting .d { font-size: 13px; color: var(--muted); }

input[type="password"], input[type="text"], input[type="number"] {
  width: 100%; min-height: var(--tap);
  padding: 0 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }