/* ============================================================
   apple-ui.css
   Apple-style foundations for the web, implemented as tokens.
   Source of principles: references/apple-design-source.md

   HOW TO CUSTOMISE
   Only edit the "BRAND SEEDS" block below. Everything else
   derives from it via color-mix(). Change one value, the whole
   interface follows.
   ============================================================ */

/* ---------- 1. BRAND SEEDS（唯一需要改的地方） ---------- */
:root {
  --accent:        #0071e3;   /* 主色：按鈕、focus、選取狀態 */
  --accent-text:   #ffffff;   /* 主色上的文字 */
  --success:       #34c759;
  --warning:       #ff9f0a;
  --danger:        #ff3b30;

  --neutral:       #1d1d1f;   /* 中性色基底，決定灰階的冷暖 */
  --canvas:        #f5f5f7;   /* 頁面底色 */
  --surface:       #ffffff;   /* 卡片、輸入框底色 */

  --radius-scale:  1;         /* 全站圓角倍率，0.6 更方正，1.4 更圓潤 */
  --density:       1;         /* 全站間距倍率，0.85 更緊湊 */
}

/* ---------- 2. DERIVED TOKENS ---------- */
:root {
  color-scheme: light dark;

  /* 文字階層：用透明度做，自動適應任何底色 */
  --text-1: var(--neutral);
  --text-2: color-mix(in srgb, var(--neutral) 62%, transparent);
  --text-3: color-mix(in srgb, var(--neutral) 40%, transparent);
  --text-on-accent: var(--accent-text);

  /* 面與線 */
  --bg:          var(--canvas);
  --bg-elevated: var(--surface);
  --bg-sunken:   color-mix(in srgb, var(--neutral) 5%, var(--canvas));
  --separator:   color-mix(in srgb, var(--neutral) 12%, transparent);
  --separator-strong: color-mix(in srgb, var(--neutral) 22%, transparent);

  /* 控制項填色（Apple 的 fill 階層） */
  --fill-1: color-mix(in srgb, var(--neutral) 8%,  transparent);
  --fill-2: color-mix(in srgb, var(--neutral) 12%, transparent);
  --fill-3: color-mix(in srgb, var(--neutral) 18%, transparent);

  /* 主色衍生狀態 */
  --accent-hover:  color-mix(in srgb, var(--accent) 88%, var(--neutral));
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);

  /* 材質：半透明 + backdrop-filter */
  --material-thin:    color-mix(in srgb, var(--surface) 60%, transparent);
  --material-regular: color-mix(in srgb, var(--surface) 78%, transparent);
  --material-thick:   color-mix(in srgb, var(--surface) 92%, transparent);
  --material-edge:    color-mix(in srgb, #fff 45%, transparent);
  --blur-sm: 12px;
  --blur-md: 20px;
  --blur-lg: 32px;

  /* 字級（跟著使用者的文字大小設定縮放，全部用 rem） */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --size-caption: 0.75rem;
  --size-footnote: 0.8125rem;
  --size-body:    0.9375rem;
  --size-callout: 1.0625rem;
  --size-title-3: 1.25rem;
  --size-title-2: 1.5rem;
  --size-title-1: 2rem;
  --size-display: clamp(2.25rem, 5vw, 3.5rem);

  /* Tracking 隨字級變化，不是一個值套全部 */
  --track-display: -0.022em;
  --track-title:   -0.014em;
  --track-body:     0em;
  --track-caption:  0.008em;

  /* 間距 */
  --sp-1: calc(0.25rem * var(--density));
  --sp-2: calc(0.5rem  * var(--density));
  --sp-3: calc(0.75rem * var(--density));
  --sp-4: calc(1rem    * var(--density));
  --sp-5: calc(1.5rem  * var(--density));
  --sp-6: calc(2rem    * var(--density));
  --sp-7: calc(3rem    * var(--density));

  /* 圓角依元件大小分級，不是全站同一個值 */
  --r-xs: calc(5px  * var(--radius-scale));
  --r-sm: calc(8px  * var(--radius-scale));
  --r-md: calc(12px * var(--radius-scale));
  --r-lg: calc(18px * var(--radius-scale));
  --r-xl: calc(26px * var(--radius-scale));
  --r-pill: 999px;

  /* 陰影：面越大越厚 */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--neutral) 8%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, var(--neutral) 8%, transparent),
               0 8px 24px color-mix(in srgb, var(--neutral) 8%, transparent);
  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--neutral) 10%, transparent),
               0 24px 64px color-mix(in srgb, var(--neutral) 14%, transparent);

  /* 動態：短、貼手、可被打斷 */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);  /* 帶一點 overshoot */
  --dur-press: 100ms;
  --dur-fast:  180ms;
  --dur-base:  280ms;
  --dur-slow:  400ms;
}

/* 深色模式：只翻轉種子，衍生 token 自動跟上 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --neutral: #f5f5f7;
    --canvas:  #000000;
    --surface: #1c1c1e;
    --accent:  #0a84ff;
    --material-edge: color-mix(in srgb, #fff 12%, transparent);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.5), 0 24px 64px rgb(0 0 0 / 0.55);
  }
}
[data-theme="dark"] {
  --neutral: #f5f5f7;
  --canvas:  #000000;
  --surface: #1c1c1e;
  --accent:  #0a84ff;
  --material-edge: color-mix(in srgb, #fff 12%, transparent);
}

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 中文不吃負 tracking，單獨修正 */
:lang(zh) { letter-spacing: 0; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) .display { letter-spacing: -0.01em; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 600; }
h1 { font-size: var(--size-title-1); line-height: 1.15; letter-spacing: var(--track-title); }
h2 { font-size: var(--size-title-2); line-height: 1.22; letter-spacing: var(--track-title); }
h3 { font-size: var(--size-title-3); line-height: 1.3; }
p  { margin: 0 0 var(--sp-4); max-width: 68ch; }

.display {
  font-size: var(--size-display);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  font-weight: 650;
  font-optical-sizing: auto;
}
.caption { font-size: var(--size-caption); letter-spacing: var(--track-caption); color: var(--text-2); }
.muted   { color: var(--text-2); }
.mono    { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--separator); margin: var(--sp-5) 0; }

/* Focus：鍵盤可見、滑鼠不干擾 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
::selection { background: var(--accent-soft); }

/* ---------- 4. LAYOUT ---------- */
.container { width: min(100% - var(--sp-5) * 2, 72rem); margin-inline: auto; }
.container--narrow { width: min(100% - var(--sp-5) * 2, 44rem); margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1; }

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ---------- 5. SURFACES ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); border-color: transparent; }

/* 玻璃材質：內容從下面滑過，不佔固定條 */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--material-regular);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border-bottom: 1px solid var(--separator);
}
.toolbar::after {   /* 捲動邊緣漸層，取代硬分隔線 */
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: var(--sp-3);
  background: linear-gradient(var(--material-thin), transparent);
  pointer-events: none;
}

/* ---------- 6. FORMS ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.label {
  font-size: var(--size-footnote);
  font-weight: 550;
  color: var(--text-1);
}
.label .req { color: var(--danger); margin-inline-start: 2px; }

.hint { font-size: var(--size-caption); color: var(--text-2); }

.error-text {
  font-size: var(--size-caption);
  color: var(--danger);
  display: none;
}
.field[data-invalid] .error-text { display: block; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"],
input[type="date"], input[type="time"], input[type="datetime-local"],
textarea, select {
  width: 100%;
  font: inherit;
  color: var(--text-1);
  background: var(--bg-elevated);
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-3);
  min-height: 2.75rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }

input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--neutral) 32%, transparent);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}

input:disabled, textarea:disabled, select:disabled {
  background: var(--fill-1);
  color: var(--text-3);
  cursor: not-allowed;
}

::placeholder { color: var(--text-3); }

.field[data-invalid] input,
.field[data-invalid] textarea,
.field[data-invalid] select {
  border-color: var(--danger);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--danger) 14%, transparent);
}

select {
  appearance: none;
  padding-inline-end: var(--sp-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position:
    calc(100% - var(--sp-4) - 4px) calc(50% - 2px),
    calc(100% - var(--sp-4)) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Checkbox / Radio */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  margin: 0;
  border: 1.5px solid var(--separator-strong);
  background: var(--bg-elevated);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out),
              border-color var(--dur-press) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
input[type="checkbox"] { border-radius: var(--r-xs); }
input[type="radio"]    { border-radius: var(--r-pill); }

input[type="checkbox"]::before {
  content: "";
  width: 0.7rem; height: 0.4rem;
  border-inline-start: 2px solid var(--text-on-accent);
  border-block-end: 2px solid var(--text-on-accent);
  transform: rotate(-45deg) translate(1px, -1px) scale(0.5);
  opacity: 0;
  transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
input[type="radio"]::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--text-on-accent);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-spring);
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(0.9); }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  cursor: pointer;
  line-height: 1.45;
}
.choice input { margin-top: 0.1rem; }

/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { appearance: none; margin: 0; width: 3.25rem; height: 1.95rem; border: 0; border-radius: var(--r-pill);
  background: var(--fill-3); transition: background-color var(--dur-base) var(--ease-out); }
.switch input::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 1.55rem; height: 1.55rem;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked { background: var(--success); }
.switch input:checked::before { transform: translateX(1.3rem); }

/* Segmented control */
.segmented {
  display: inline-flex;
  background: var(--fill-1);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
}
.segmented label {
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  border-radius: calc(var(--r-sm) - 2px);
  font-size: var(--size-footnote);
  font-weight: 550;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + span,
.segmented label:has(input:checked) { color: var(--text-1); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }

/* 表單分區 */
.fieldset {
  border: 0;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
.fieldset > legend {
  padding: 0;
  margin-bottom: var(--sp-4);
  font-size: var(--size-callout);
  font-weight: 600;
  letter-spacing: var(--track-title);
}

/* ---------- 7. BUTTONS ---------- */
.btn {
  --btn-bg: var(--fill-2);
  --btn-fg: var(--text-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font: inherit;
  font-weight: 550;
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
/* 回饋發生在按下的當下，不是放開才給 */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:hover:not(:disabled)  { background: color-mix(in srgb, var(--btn-bg) 82%, var(--neutral)); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--text-on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--accent); }
.btn--ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn--danger  { --btn-bg: var(--danger); --btn-fg: #fff; }
.btn--sm { padding: var(--sp-2) var(--sp-4); min-height: 2.15rem; font-size: var(--size-footnote); }
.btn--block { display: flex; width: 100%; }

/* ---------- 8. FEEDBACK ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  font-size: var(--size-caption);
  font-weight: 550;
  background: var(--fill-1);
  color: var(--text-2);
}
.badge--ok   { background: color-mix(in srgb, var(--success) 15%, transparent); color: color-mix(in srgb, var(--success) 78%, var(--neutral)); }
.badge--warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: color-mix(in srgb, var(--warning) 72%, var(--neutral)); }
.badge--err  { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: color-mix(in srgb, var(--danger) 82%, var(--neutral)); }

.note {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--fill-1);
  border-inline-start: 3px solid var(--separator-strong);
  font-size: var(--size-footnote);
}
.note--info { background: var(--accent-soft); border-color: var(--accent); }
.note--warn { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: var(--warning); }
.note--err  { background: color-mix(in srgb, var(--danger) 10%, transparent);  border-color: var(--danger); }

/* ---------- 9. TABLE ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--size-footnote); }
th, td { padding: var(--sp-3); text-align: start; border-bottom: 1px solid var(--separator); }
th { font-weight: 600; color: var(--text-2); font-size: var(--size-caption); }
tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--separator); border-radius: var(--r-md); }

/* ---------- 10. SHEET / MODAL ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, #000 35%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.scrim[data-open] { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 101;
  left: 50%; bottom: 0;
  width: min(100%, 34rem);
  max-height: 88dvh;
  overflow: auto;
  padding: var(--sp-5);
  background: var(--material-thick);
  backdrop-filter: blur(var(--blur-lg)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
  border: 1px solid var(--material-edge);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  /* 進出走同一條路徑 */
  transform: translate(-50%, 100%);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.sheet[data-open] { transform: translate(-50%, 0); }
.sheet::before {  /* grabber */
  content: "";
  display: block;
  width: 2.25rem; height: 5px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--fill-3);
}

/* ---------- 11. 無障礙與使用者偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sheet { transform: translate(-50%, 0) !important; transition: opacity var(--dur-fast) ease; opacity: 0; }
  .sheet[data-open] { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .toolbar, .sheet {
    background: var(--bg-elevated);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --separator: color-mix(in srgb, var(--neutral) 40%, transparent);
    --separator-strong: var(--neutral);
    --text-2: color-mix(in srgb, var(--neutral) 82%, transparent);
  }
  .toolbar, .sheet { background: var(--bg-elevated); backdrop-filter: none; }
  .btn { border: 1px solid var(--separator-strong); }
}

@media print {
  .toolbar, .btn, .scrim, .sheet { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; }
}