/* 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%}
/* iOS 長按連結會彈出網頁 preview 選單（Open / Copy Link…），App 裡關掉。
   只關 <a> 的 callout：照片還能長按存圖，文字還能長按選字複製 */
a{-webkit-touch-callout:none}
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}

/* position:relative 必須有：.menupop 這類 popover 是 absolute 定位，
   少了它會改貼視窗右緣，電腦寬螢幕上選單就飄離按鈕（2026-08-05 Henry 發現） */
.app{max-width:480px; margin:0 auto; min-height:100dvh; padding-bottom:48px; position:relative}

/* ── 頁首 ── */
.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}

/* ═══════════════════════════════════════════════════════════════════════
   桌面版（2026-09-16 起）：手機版一行不動，1024px 以上加這一層。
   規矩照 Apple DESIGN.md（awesome-design-md/apple）：只有一個藍、卡片不用陰影
   改 1px 髮線、圓角 8／18／藥丸三檔、標題 600 不用 700、按下縮 0.97。
   側欄 .hside 由 hervie.js 長出來（/login 與 /design 沒有）。
   ═══════════════════════════════════════════════════════════════════════ */
.deskonly{display:none}
.hside{display:none}          /* 手機版：側欄元素在 DOM 裡但不畫 */
@media (min-width:1024px){
  :root{ --shadow:none; --sidew:232px; --gutter:32px }
  .deskonly{display:inline-flex}
  .mobonly{display:none !important}
  body{font-size:15px}

  /* 側欄：白卡＋右側髮線，寬 232。內容頁往右讓位 */
  .hside{
    position:fixed; top:0; left:0; bottom:0; width:var(--sidew); z-index:60;
    background:var(--card); border-right:1px solid var(--sep);
    display:flex; flex-direction:column; padding:22px 14px 14px;
  }
  .hs-brand{
    display:flex; align-items:center; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
    text-decoration:none; padding:2px 10px 0; white-space:nowrap;
  }
  .hs-logo{display:none; width:30px; height:30px; border-radius:8px; background:url(/icons/icon-180.png) center/cover}
  .hs-new{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin:18px 0 10px; padding:10px 16px; border-radius:980px; white-space:nowrap;
    background:var(--accent); color:#fff; font-size:14px; font-weight:600; text-decoration:none;
  }
  .hs-new:active{transform:scale(.97)}
  .hs-sec{display:flex; flex-direction:column; gap:2px; margin-top:8px}
  .hs-sec[hidden]{display:none}
  .hs-cap{
    font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink3); padding:14px 12px 6px;
  }
  .hs-sec a{
    display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
    font-size:14px; font-weight:500; color:var(--ink); text-decoration:none;
  }
  .hs-sec a svg{flex:none; color:var(--ink2)}
  .hs-sec a:hover{background:var(--chip-bg)}
  .hs-sec a.on{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent)}
  .hs-sec a.on svg{color:var(--accent)}
  .hs-user{
    margin-top:auto; position:relative;
  }
  .hs-me{
    display:flex; align-items:center; gap:10px; width:100%; padding:10px 10px; border-radius:12px;
    border:none; background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer;
  }
  .hs-me:hover{background:var(--chip-bg)}
  .hs-av{
    flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
    font-size:13px; font-weight:700; letter-spacing:.02em;
  }
  .hs-nm{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hs-rl{font-size:12px; color:var(--ink2); margin-top:1px}
  .hs-pop{
    position:absolute; left:0; right:0; bottom:calc(100% + 6px); background:var(--card);
    border:1px solid var(--sep); border-radius:14px; padding:6px 0; display:none;
    box-shadow:0 12px 40px rgba(0,0,0,.14);
  }
  .hs-pop.on{display:block}
  .hs-pop a, .hs-pop button{
    display:block; width:100%; text-align:left; padding:10px 16px; font:inherit; font-size:14px;
    font-weight:500; color:var(--ink); background:none; border:none; cursor:pointer; text-decoration:none;
  }
  .hs-pop a:hover, .hs-pop button:hover{background:var(--chip-bg)}
  .hs-pop .signout{color:var(--bad)}

  /* 側欄圖示列（2026-09-24，Khai 的 1280 寬 Listing 欄被擠成零）：
     1600 以下側欄縮成 72px 只留圖示，滑鼠移上去才展開成 232 蓋在內容上（內容不動）；
     省下的 160px 讓清單頁 1440 起就放得下常駐右欄。1600 以上恢復全寬。 */
  @media (max-width:1599px){
    :root{ --sidew:72px }
    .hside{ transition:width .15s ease; overflow:hidden; padding:18px 10px 12px }
    .hside:hover{ width:232px; padding:22px 14px 14px; box-shadow:12px 0 40px rgba(0,0,0,.12) }
    .hside:not(:hover) .hs-word, .hside:not(:hover) .hs-sec a span,
    .hside:not(:hover) .hs-nm, .hside:not(:hover) .hs-rl{ display:none }
    .hside:not(:hover) .hs-brand{ padding:0; justify-content:center }
    .hside:not(:hover) .hs-logo{ display:block }
    .hside:not(:hover) .hs-new{ width:40px; height:40px; padding:0; margin:16px auto 8px; font-size:20px; font-weight:500 }
    .hside:not(:hover) .hs-sec a{ justify-content:center; padding:10px 0 }
    .hside:not(:hover) .hs-cap{ font-size:0; padding:0; height:1px; margin:10px 10px 8px; background:var(--sep) }
    .hside:not(:hover) .hs-me{ justify-content:center; padding:8px 0 }
  }

  /* 內容區：一般頁一欄 760 寬靠左；清單頁自己在 list.html 覆寫成兩欄。
     用 body > .app 壓過各頁自己寫的 .app{max-width:480px; margin:0 auto} */
  body > .app{
    max-width:760px; margin:0 0 0 var(--sidew); padding:8px var(--gutter) 72px;
    min-height:100vh;
  }
  .navbar{padding:26px 0 10px}
  .navbar h2{font-size:28px; font-weight:600; letter-spacing:-.02em}
  .navbar .back{display:none}
  .navbar > span[style]{display:none}     /* 手機版對稱用的 44px 空位 */
  .iconbtn, .menupop{display:none !important}

  /* 卡片：陰影拿掉改髮線，邊距歸零（欄寬由 .app 決定） */
  .grp{margin:16px 0 0; border:1px solid var(--sep); border-radius:18px}
  .grp-title{padding:0 18px; margin-top:24px}
  .hint{padding-left:4px; padding-right:4px}
  .btn, .btn-quiet{width:auto; min-width:220px; margin-left:0; margin-right:0; padding:11px 24px; font-size:15px}
  .btn:active, .btn-quiet:active{transform:scale(.97); opacity:1}
  .urow{padding:13px 18px}
}