/* AppKit 共用樣式：介面色、對話框、提示（toast）、清單、提示列。
   顏色一律取自 css/brand-tokens.css：頁面的 html 掛 data-climbio-theme="indoor"（深底綠：岩點貓、找點貓）或 "outdoor"（白底深海藍：編點貓、紅點貓），
   這裡把品牌 token 對到 App 用的介面變數（--bg、--surface、--text、--accent…），App 的樣式只用這些變數，不另寫色碼。
   按鈕、輸入框沿用 App 自己的 .btn（.primary、.danger-fill）、.field：手機和電腦的尺寸不同。
   English: AppKit shared styles: interface variables from brand tokens, dialog, toast, list, hint bar. */
[data-climbio-theme] {
  --bg: var(--brand-bg); --surface: var(--brand-surface); --surface-2: var(--brand-surface-2); --hover: var(--brand-surface-hover);
  --line: var(--brand-line); --line-strong: var(--brand-line-strong); --control: var(--brand-control);
  --text: var(--brand-text); --muted: var(--brand-text-muted);
  --accent: var(--brand-action); --accent-hover: var(--brand-action-hover); --on-accent: var(--brand-on-action); --accent-soft: var(--brand-action-soft);
  --danger: var(--brand-danger); --on-danger: var(--brand-on-danger); --overlay: var(--brand-overlay); --shadow: var(--brand-shadow);
}
/* 室內的次要文字比品牌的 text-muted 暗一階（介面上大量使用，不搶岩點） */
[data-climbio-theme="indoor"] { --muted: var(--brand-text-dim); }

/* 對話框：整頁一層（原生 <dialog>，在最上層），中間一張卡片；只佔鍵盤以外看得到的範圍（App 有設 --vv-top／--vv-h 時） */
.ak-dialog { position: fixed; inset: 0; top: var(--vv-top, 0px); width: 100%; height: var(--vv-h, 100%); max-width: none; max-height: none; margin: 0;
  padding: 16px; border: 0; border-radius: 0; box-shadow: none; background: var(--overlay); color: var(--text); place-items: center; }
.ak-dialog[open] { display: grid; }
.ak-dialog::backdrop { background: transparent; }
.ak-card { width: min(100%, 380px); max-height: 100%; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 20px);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 50px var(--shadow); }
.ak-title { font-size: 17px; font-weight: 700; }
.ak-dialog .ak-text { margin: 0; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.55; white-space: pre-line; }
.ak-dialog .ak-title + .ak-text { margin-top: -6px; font-size: 15px; font-weight: 400; color: var(--muted); line-height: 1.7; }
.ak-dialog .ak-field { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.ak-dialog .ak-field .field { color: var(--text); font-size: 15px; }
.ak-actions { display: flex; gap: 10px; }
.ak-actions .btn { flex: 1; }

/* 清單：一組圓角面板，一列一個按鈕（對話框的選項、選單） */
.ak-list { display: flex; flex-direction: column; background: var(--surface-2); border-radius: var(--radius-sm, 14px); overflow: hidden; }
.ak-list > button, .ak-list > a { padding: 14px 16px; text-align: left; font-weight: 600; color: var(--text); text-decoration: none; }
.ak-list > button + button, .ak-list > a + a { border-top: 1px solid var(--line); }
.ak-list > button:hover, .ak-list > a:hover { background: var(--hover, var(--line)); }
.ak-list > .danger { color: var(--danger); }

/* 提示（toast）：畫面下方置中的一行；位置用 --ak-toast-bottom 調（例如避開底部的按鈕） */
.ak-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--ak-toast-bottom, calc(24px + env(safe-area-inset-bottom, 0px))); z-index: 40;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; box-shadow: 0 10px 30px var(--shadow); transition: opacity .25s; }
.ak-toast.fade { opacity: 0; pointer-events: none; }
.ak-toast-act { margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13px; }
.ak-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ak-spin .8s linear infinite; flex: none; }
.ak-toast-act[hidden], .ak-spin[hidden] { display: none; }
@keyframes ak-spin { to { transform: rotate(360deg); } }

/* 提示列：一列膠囊，左邊圖示和文字按鈕、右邊關閉（例如「加到主畫面」）；擺在哪裡由 App 決定 */
.ak-hint { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 16px; border-radius: 999px; background: var(--surface); box-shadow: 0 10px 30px var(--shadow); }
.ak-hint[hidden] { display: none; }
.ak-hint-go { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text); font-weight: 700; text-align: left; }
.ak-hint-go svg, .ak-hint-go img { width: 22px; height: 22px; color: var(--accent); flex: none; }
.ak-hint-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }

/* 手機介紹頁（landing.js）：電腦版工具在手機上只顯示 .ak-landing，App 的畫面整個藏起來（提示照常顯示）；室內深底綠、戶外白底深海藍跟著頁面的主題 */
.ak-landing { display: none; }
html.ak-phone, html.ak-phone body { height: auto; min-height: 100%; overflow: auto; display: block; }
html.ak-phone body > :not(.ak-landing):not(.ak-toast) { display: none !important; }
html.ak-phone .ak-landing { display: flex; flex-direction: column; gap: 22px; max-width: 480px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif; }
.ak-ld-bar img { display: block; width: 116px; height: auto; }
.ak-ld-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ak-ld-hero img { width: 132px; height: 132px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 12px 18px var(--shadow)); }
.ak-ld-hero h1 { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.2; letter-spacing: -.5px; }
.ak-ld-tag { padding: 3px 12px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 13px; font-weight: 700; }
.ak-ld-hero p { margin: 6px 0 0; max-width: 330px; text-wrap: balance; color: var(--muted); font-size: 15px; }
.ak-ld-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ak-ld-feats li { position: relative; padding: 14px 16px 14px 50px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
.ak-ld-feats li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.ak-ld-feats li::after { content: ""; position: absolute; left: 23px; top: 20px; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ak-ld-feats b { display: block; font-size: 16px; }
.ak-ld-feats span { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.ak-ld-open { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 18px; border-radius: 20px; background: var(--surface-2); text-align: center; }
.ak-ld-open b { font-size: 19px; }
.ak-ld-open > span { color: var(--muted); font-size: 13.5px; }
.ak-ld-open code { max-width: 100%; margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: var(--bg); font: 13px/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ak-ld-copy { width: 100%; min-height: 48px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.ak-ld-copy:active { transform: scale(.98); }