/* hervie.css —— HERVIE 設計系統，對齊 aboveLot（Apple 調性）
   tokens 出處：abovelot-site site.css（ink #1d1d1f / blue #0071e3 / surface #f5f5f7）
   深色版對應 apple.com 深色調性；頁面自己的特殊樣式留在各頁 <style>。 */

:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink2:#6e6e73;
  --ink3:#aeaeb2;
  --sep:rgba(0,0,0,.08);
  --accent:#0071e3;
  --ok:#34c759;
  --bad:#ff3b30;
  --warn:#ff9500;
  --chip-bg:rgba(0,0,0,.05);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --card:#1c1c1e;
    --ink:#f5f5f7;
    --ink2:#a1a1a6;
    --ink3:#6e6e73;
    --sep:rgba(255,255,255,.12);
    --accent:#2997ff;
    --warn:#ff9f0a;
    --chip-bg:rgba(255,255,255,.08);
    --shadow:none;
  }
}

*{box-sizing:border-box; margin:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  font-size:17px; line-height:1.5; color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}

.app{max-width:480px; margin:0 auto; min-height:100dvh; padding-bottom:48px}

/* ── 頁首 ── */
.navbar{
  padding:calc(14px + env(safe-area-inset-top)) 20px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.navbar h2{font-size:24px; font-weight:700; letter-spacing:-.02em}
.back{
  font:inherit; font-size:15px; font-weight:500; color:var(--accent);
  background:none; border:none; cursor:pointer; text-decoration:none; padding:4px 0;
}
.sub{font-size:13px; color:var(--ink2); margin-top:2px}

/* ── 卡片群組（iOS 分組表改成 Apple 網站的浮卡） ── */
.grp{background:var(--card); border-radius:18px; margin:16px 16px 0; box-shadow:var(--shadow)}
.grp-title{
  font-size:12px; font-weight:600; color:var(--ink2); text-transform:uppercase;
  letter-spacing:.08em; padding:0 34px; margin:22px 0 -8px;
}
.hint{font-size:13px; color:var(--ink2); padding:10px 22px 0; line-height:1.6}
.empty{padding:18px; font-size:14px; color:var(--ink2); line-height:1.6}

/* ── 列（人員列、選項列） ── */
.urow{
  display:flex; align-items:center; gap:12px; padding:15px 18px; position:relative;
  width:100%; border:none; background:none; font:inherit; color:var(--ink);
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.urow:focus-visible{outline:2px solid var(--accent); border-radius:10px}
.urow + .urow::before{
  content:""; position:absolute; top:0; left:18px; right:0; height:1px;
  background:var(--sep); transform:scaleY(.5);
}
.uinfo{flex:1; min-width:0}
.uname{font-size:16px; font-weight:600; letter-spacing:-.01em}
.umeta{font-size:13px; color:var(--ink2); margin-top:2px}
.cnt{
  font-size:12px; font-weight:600; color:var(--ink2);
  background:var(--chip-bg); border-radius:999px; padding:3px 10px;
}
.chev{color:var(--ink3); font-size:16px}

/* ── 按鈕（Apple 藥丸） ── */
.btn{
  display:block; width:calc(100% - 32px); margin:20px 16px 0;
  background:var(--accent); color:#fff; border:none; border-radius:980px;
  padding:14px; font:inherit; font-size:17px; font-weight:500; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{opacity:.75}
.btn:disabled{opacity:.4}
.btn-quiet{
  display:block; width:calc(100% - 32px); margin:12px 16px 0;
  background:var(--chip-bg); color:var(--accent); border:none; border-radius:980px;
  padding:14px; font:inherit; font-size:17px; font-weight:500; cursor:pointer; text-align:center;
}

/* ── 表單列 ── */
.frow{padding:12px 18px; position:relative}
.frow + .frow::before{
  content:""; position:absolute; top:0; left:18px; right:0; height:1px;
  background:var(--sep); transform:scaleY(.5);
}
.frow label{
  display:block; font-size:12px; font-weight:600; color:var(--ink2);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px;
}
.frow input{
  width:100%; border:none; background:none; font:inherit; font-size:17px;
  color:var(--ink); padding:4px 0; outline:none;
}
.frow input::placeholder{color:var(--ink3)}

/* ── 人頭選單（iOS 實機驗證過的 pointerdown 寫法，勿改回 document click） ── */
.iconbtn{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--chip-bg); color:var(--ink); display:flex;
  align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
.iconbtn:active{opacity:.7}
.iconbtn svg{display:block}
.menupop{
  position:absolute; top:calc(54px + env(safe-area-inset-top)); right:16px; z-index:50;
  background:var(--card); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  min-width:210px; padding:6px 0; display:none;
}
.menupop.on{display:block}
.menupop a, .menupop button{
  display:block; width:100%; text-align:left; padding:12px 18px;
  font:inherit; font-size:16px; font-weight:500; color:var(--ink);
  background:none; border:none; cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.menupop a[hidden], .menupop button[hidden]{display:none}
.menupop a:active, .menupop button:active{background:var(--chip-bg)}
.menupop .who{
  padding:10px 18px 8px; font-size:13px; color:var(--ink2);
  border-bottom:1px solid var(--sep); margin-bottom:4px;
}
.menupop .signout{color:var(--bad)}

/* ── 提示浮條 ── */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:var(--bg); border-radius:980px;
  padding:11px 22px; font-size:15px; font-weight:500; opacity:0;
  transition:all .3s ease; z-index:99; white-space:nowrap;
}
.toast.on{transform:translateX(-50%); opacity:1}