/* ── project-manuals：共用設計系統 ─────────────────────────
   色系「廚房鋼架規格卡」：冷灰底 + 圖章橘 accent，字體 Noto Serif TC(標題)
   + Noto Sans TC(內文) + JetBrains Mono(欄位/程式碼/數字)。 */

:root{
  --bg:#eef0ea;
  --surface:#ffffff;
  --surface-2:#e2e5dc;
  --ink:#1c201b;
  --muted:#5b6058;
  --line:#d2d6c9;
  --accent:#c1440e;
  --accent-ink:#ffffff;
  --accent-soft:#f6e1cf;
  --ok:#2f7a4d;
  --ok-soft:#e0f0e5;
  --warn:#8a6200;
  --warn-soft:#f7ecc9;
  --code-bg:#e7e9df;
  --shadow: 0 1px 2px rgba(28,32,27,.06), 0 8px 20px -12px rgba(28,32,27,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181b17; --surface:#20241f; --surface-2:#272c25;
    --ink:#eceee7; --muted:#a3a99b; --line:#343a30;
    --accent:#e2703a; --accent-ink:#1c1200; --accent-soft:#3a2a1c;
    --ok:#6fbf8b; --ok-soft:#1e2f22; --warn:#e0b73d; --warn-soft:#3a3316;
    --code-bg:#2a2f26;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#181b17; --surface:#20241f; --surface-2:#272c25;
  --ink:#eceee7; --muted:#a3a99b; --line:#343a30;
  --accent:#e2703a; --accent-ink:#1c1200; --accent-soft:#3a2a1c;
  --ok:#6fbf8b; --ok-soft:#1e2f22; --warn:#e0b73d; --warn-soft:#3a3316;
  --code-bg:#2a2f26;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}

*{box-sizing:border-box}
[hidden]{ display:none !important; }
html,body{ margin:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:15.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-soft); }
a{ color:inherit; }
h1,h2,h3{
  font-family:"Noto Serif TC","Noto Sans TC",serif;
  font-weight:900;
  color:var(--ink);
  text-wrap:balance;
  letter-spacing:.01em;
}
code, .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric: tabular-nums; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-inline:20px;
  padding-block: max(20px, env(safe-area-inset-top, 0px)) 64px;
}

/* ── 頂列：全站共用 ─────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.topbar .stamp{
  width:30px;height:30px;flex:none;
  border-radius:50%;
  border:2px solid var(--accent);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif TC",serif; font-weight:900; font-size:11px;
  transform:rotate(-8deg);
}
.topbar a.home{ text-decoration:none; font-weight:700; font-size:14.5px; color:var(--ink); }
.topbar .crumb{ color:var(--muted); font-size:13px; margin-left:2px; }
.topbar .crumb .sep{ margin:0 6px; }

/* ── Masthead（首頁/手冊頁共用）───────────────────────────── */
.masthead{
  display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; align-items:flex-end;
  padding-bottom:26px; margin-bottom:30px;
  border-bottom:2px solid var(--ink);
}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em;
  color:var(--muted); text-transform:uppercase; margin:0 0 6px;
}
.masthead h1{ font-size:clamp(26px,4vw,38px); margin:0; line-height:1.2; }
.meta-block{ text-align:right; font-size:12.5px; color:var(--muted); line-height:1.9; }
.meta-block .v{ font-family:"JetBrains Mono",monospace; color:var(--ink); font-weight:600; }

.role-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.role-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:6px 13px 6px 10px; font-size:12.5px;
  box-shadow:var(--shadow);
}
.role-chip .who{ color:var(--accent); font-weight:700; }

/* ── Hub：專案卡片 ─────────────────────────────────────── */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.project-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.project-card .card-head{ display:flex; gap:12px; align-items:flex-start; }
.project-card .icon{
  width:42px; height:42px; border-radius:10px; flex:none;
  object-fit:cover; border:1px solid var(--line); background:var(--surface-2);
}
.project-card .icon-fallback{
  width:42px; height:42px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
  font-family:"Noto Serif TC",serif; font-weight:900; font-size:15px;
  border:1px solid var(--line);
}
.project-card .card-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.project-card h2{ font-size:17px; margin:0; }
.project-card .proj-code{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--accent); }
.project-card .stack{ font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.project-card ul{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.project-card li a{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; font-size:14px; color:var(--ink);
  padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2);
  transition:border-color .15s, background .15s;
}
.project-card li a:hover{ border-color:var(--accent); background:var(--accent-soft); }
.project-card li a .ver{
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted);
  background:var(--code-bg); border-radius:4px; padding:1px 6px; margin-left:auto;
}
.project-card li a:hover .ver{ background:var(--surface); }
.project-card li a .arrow{ color:var(--muted); }
.project-card .empty{
  font-size:13px; color:var(--muted); font-style:italic;
  padding:8px 10px; border:1px dashed var(--line); border-radius:8px;
}

/* ── 手冊頁：目錄 rail + 內容 ─────────────────────────────── */
.layout{ display:grid; grid-template-columns:176px 1fr; gap:44px; align-items:start; }
.rail{ position:sticky; top:max(20px, env(safe-area-inset-top,0px)); display:flex; flex-direction:column; gap:2px; }
.rail a{
  text-decoration:none; font-size:13.5px; color:var(--muted);
  padding:8px 10px; border-left:2px solid var(--line);
  transition:color .15s, border-color .15s;
}
.rail a:hover{ color:var(--ink); border-color:var(--muted); }
.rail a.now{ color:var(--accent); border-color:var(--accent); font-weight:700; }
.rail .rail-title{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:0 10px 8px;
}

main{ min-width:0; }
section{ margin-bottom:56px; scroll-margin-top:20px; }
section > p.lead{ max-width:66ch; color:var(--muted); font-size:15.5px; }

.step-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.step-no{
  font-family:"Noto Serif TC",serif; font-weight:900; font-size:14px;
  color:var(--accent-ink); background:var(--accent);
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center; flex:none;
}
h2{ font-size:23px; margin:0; }
h3{ font-size:16.5px; margin:0 0 10px; }

.path{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"JetBrains Mono",monospace; font-size:13px;
  background:var(--code-bg); border:1px solid var(--line); border-radius:8px;
  padding:6px 11px; margin:14px 0 22px;
}
.path .seg{ color:var(--ink); }
.path .sep{ color:var(--muted); }
.path .btn-quote{ background:var(--accent-soft); color:var(--ink); border-radius:4px; padding:1px 6px; }

figure.screenshot{
  margin:0 0 18px; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow); background:var(--surface);
}
figure.screenshot img{ display:block; width:100%; height:auto; }
figure.screenshot figcaption{
  padding:9px 16px; font-size:12px; color:var(--muted);
  background:var(--surface-2); border-top:1px solid var(--line);
  display:flex; align-items:center; gap:6px;
}
figure.screenshot figcaption .dot{ width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none; }

.spec-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;
}
.spec-card > header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.spec-card > header .tab-tag{ font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.spec-card > header h3{ margin:0; }
.spec-card figure.screenshot{ margin:0; border:none; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line); }

.field-table{ width:100%; border-collapse:collapse; font-size:14px; }
.field-table th, .field-table td{ text-align:left; padding:11px 20px; border-bottom:1px solid var(--line); vertical-align:top; }
.field-table tr:last-child td{ border-bottom:none; }
.field-table th{ width:150px; font-weight:700; color:var(--ink); background:transparent; }
.field-table td{ color:var(--muted); }
.field-table td .example{
  display:inline-block; margin-top:4px; font-family:"JetBrains Mono",monospace; font-size:12.5px;
  color:var(--ink); background:var(--code-bg); border-radius:5px; padding:1px 7px;
}
.field-table td b{ color:var(--ink); font-weight:600; }
.req{ color:var(--accent); font-weight:700; }

.callout{ border-radius:12px; padding:14px 18px; font-size:14px; margin:16px 0; border:1px solid transparent; display:flex; gap:12px; }
.callout .mark{ flex:none; font-weight:900; font-family:"Noto Serif TC",serif; }
.callout.warn{ background:var(--warn-soft); color:var(--ink); border-color:color-mix(in srgb, var(--warn) 35%, transparent); }
.callout.warn .mark{ color:var(--warn); }
.callout.ok{ background:var(--ok-soft); color:var(--ink); border-color:color-mix(in srgb, var(--ok) 35%, transparent); }
.callout.ok .mark{ color:var(--ok); }
.callout.note{ background:var(--surface-2); border-color:var(--line); }
.callout.note .mark{ color:var(--muted); }
.callout p{ margin:0; }
.callout strong{ color:var(--ink); }

.bom-table{
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); font-size:14px;
}
.bom-table caption{ text-align:left; padding:14px 20px; background:var(--surface-2); border-bottom:1px solid var(--line); font-weight:700; caption-side:top; }
.bom-table th, .bom-table td{ padding:11px 20px; border-bottom:1px solid var(--line); text-align:left; }
.bom-table th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; background:transparent; }
.bom-table tr:last-child td{ border-bottom:none; }
.bom-table td.qty{ font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.bom-table td.mat{ font-weight:600; }

.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item h3{ display:flex; gap:10px; align-items:baseline; font-size:15.5px; margin-bottom:8px; }
.faq-item h3 .q{ font-family:"Noto Serif TC",serif; color:var(--accent); font-weight:900; }
.faq-item p{ margin:0; color:var(--muted); max-width:70ch; }
.faq-item p b{ color:var(--ink); }

footer{
  margin-top:60px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12.5px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

@media (max-width: 760px){
  .layout{ grid-template-columns:1fr; }
  .rail{
    position:static; flex-direction:row; overflow-x:auto; gap:8px;
    padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid var(--line);
  }
  .rail .rail-title{ display:none; }
  .rail a{ white-space:nowrap; border-left:none; border-bottom:2px solid var(--line); padding:6px 4px; }
  .rail a.now{ border-color:var(--accent); }
  .field-table th{ width:110px; }
  .meta-block{ text-align:left; }
  .masthead{ align-items:flex-start; }
}

/* ── 密碼關卡（assets/gate.js 用）─────────────────────────── */
#pm-gate{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
#pm-gate .box{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:32px 30px; width:100%; max-width:340px;
  text-align:center;
}
#pm-gate .stamp{
  width:44px;height:44px;margin:0 auto 14px;
  border-radius:50%; border:2px solid var(--accent); color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif TC",serif; font-weight:900; font-size:14px;
  transform:rotate(-8deg);
}
#pm-gate h2{ font-size:17px; margin:0 0 6px; }
#pm-gate p{ font-size:13px; color:var(--muted); margin:0 0 18px; }
#pm-gate input{
  width:100%; font-size:15px; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--surface-2); color:var(--ink);
  text-align:center; letter-spacing:.1em;
  font-family:"JetBrains Mono",monospace;
}
#pm-gate input:focus{ outline:none; border-color:var(--accent); }
#pm-gate button{
  width:100%; margin-top:10px; padding:10px 12px;
  border:none; border-radius:9px; background:var(--accent); color:var(--accent-ink);
  font-size:14px; font-weight:700; cursor:pointer;
}
#pm-gate button:hover{ opacity:.9; }
#pm-gate .err{ color:var(--accent); font-size:12.5px; margin-top:10px; min-height:1.2em; }