/* ============================================================
   Autolab Sign-Off 換膚層｜check.autolab.cloud（AI 工作診斷）
   2026-10-11。規範：logo-signoff/02-品牌核心.md；同 tool-site-theme 的色票。
   index.html 與 examples.html 共用。拿掉 </head> 前那行 link 就回到舊樣子。
   橘 #FF6B35 每頁只有一處：
     index＝「寄完整版給我」表單送出鈕；examples＝結尾「開始診斷」鈕。
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  --so-teal: #00708A; --so-teal-dk: #005A6F; --so-teal-lt: #E8F4F6;
  --so-ink: #1C1C1E; --so-sub: #636366; --so-mist: #F5F5F7; --so-line: #E5E5EA;
  --so-mango: #FFC233; --so-mango-lt: #FFF1D6; --so-orchid: #9C2A6B; --so-orchid-lt: #F6E6F0;
  --so-orange: #FF6B35;

  /* 接管站內變數：舊主色 #0099BB 在白底不過 AA，改主色青 */
  --brand: var(--so-teal);
  --brand-soft: var(--so-teal-lt);
  --orange: var(--so-mango);          /* 陷阱框改淺芒果，不再用橘 */
  --orange-soft: var(--so-mango-lt);
  --danger: var(--so-orchid);         /* 紅線框改蘭花洋紅 */
  --danger-soft: var(--so-orchid-lt);
  --r-md: 4px; --r-lg: 4px; --r-xl: 4px; --r-pill: 4px;
}
html body { color: var(--so-ink); background: #FFFFFF; }
html body h1, html body h2, html body h3,
html body .verdict .big { font-family: 'Inter Tight', 'Noto Sans TC', sans-serif; }
html body h1 { font-weight: 900; }
html body h2 { font-weight: 800; }

/* ---------- Hero：白底＋底部簽名線＋章壓線 ---------- */
html body > header { position: relative; border-bottom: 0; padding-bottom: 88px; }
html body > header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 36px;
  height: 3px; background: var(--so-ink); pointer-events: none;
}
html body > header::after {
  content: ""; position: absolute; right: max(20px, calc((100% - 760px) / 2 + 20px));
  bottom: 37.5px; width: 64px; height: 64px; transform: translateY(50%);
  background: #FFFFFF url("/assets/autolab-icon-64.svg") center / contain no-repeat;
  border-radius: 50%; pointer-events: none;
}
html body .eyebrow {
  color: var(--so-ink); background: var(--so-mango); border-radius: 2px;
  font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; font-weight: 700; padding: 4px 12px;
}
html body .step {
  display: inline-block; color: var(--so-ink); background: var(--so-mist);
  border-left: 4px solid var(--so-teal); padding: 2px 10px; border-radius: 2px;
  font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; font-weight: 700;
}
html body section + section .step { border-left-color: var(--so-mango); }
html body #secResult .step { border-left-color: var(--so-orchid); }

/* ---------- 選項 ---------- */
html body .role { border-radius: 4px; border-top: 3px solid var(--so-line); }
html body .role:nth-child(4n+1) { border-top-color: var(--so-teal); }
html body .role:nth-child(4n+2) { border-top-color: var(--so-mango); }
html body .role:nth-child(4n+3) { border-top-color: var(--so-orchid); }
html body .role:nth-child(4n) { border-top-color: var(--so-ink); }
html body .role .ic { color: var(--so-teal); }
html body .role[aria-pressed="true"] { border-color: var(--so-teal); box-shadow: inset 0 0 0 1px var(--so-teal); }
html body .sizes button[aria-pressed="true"] { background: var(--so-ink); border-color: var(--so-ink); }
html body .sizes button:hover { border-color: var(--so-teal); color: var(--so-teal); }
html body .task input[type=checkbox] { accent-color: var(--so-teal); }

/* ---------- 按鈕 ---------- */
html body .btn { border-radius: 4px; }
html body .btn:hover { filter: none; background: var(--so-teal-dk); }
html body .btn-ghost { background: #FFFFFF; color: var(--so-ink); border: 2px solid var(--so-ink); }
html body .btn-ghost:hover { background: #FFFFFF; color: var(--so-teal); border-color: var(--so-teal); }
html body .btn:disabled { background: var(--so-line); }
/* 唯一的橘：表單送出（index）／開始診斷（examples）。實心、墨字、無光暈 */
html body #capForm button[type=submit],
html body .cta .btn {
  background: var(--so-orange); color: var(--so-ink); font-weight: 700;
}
html body #capForm button[type=submit]:hover,
html body .cta .btn:hover { background: var(--so-orange); filter: brightness(1.04); }

/* ---------- 結果 ---------- */
html body .verdict { border-left-width: 4px; }
html body .verdict .big em { color: var(--so-teal); }
html body .play { border-radius: 4px; }
html body .play .rank, html body .rank { border-radius: 2px; background: var(--so-ink); font-family: 'JetBrains Mono', monospace; }
html body .play .save, html body .save { border-radius: 2px; background: var(--so-mango-lt); color: var(--so-ink); font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; font-weight: 700; }
html body .note.trap { border-left-width: 4px; }
html body .note.trap b { color: var(--so-ink); }
html body .note.red b { color: var(--so-orchid); }
html body .capture { border-radius: 4px; }
html body .capture input:focus, html body .capture select:focus { outline: none; border-color: var(--so-teal); box-shadow: 0 0 0 3px rgba(0,112,138,.15); }

/* examples 頁的錨點列 */
html body nav a { border-radius: 4px; }
html body nav a:hover { border-color: var(--so-teal); background: var(--so-teal-lt); color: var(--so-teal); }
html body h3.sec { font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; color: var(--so-sub); }

/* ---------- 頁尾：章 ---------- */
html body footer .wrap::before {
  content: ""; display: block; width: 32px; height: 32px; margin: 0 auto 12px;
  background: url("/assets/autolab-icon-32.svg") center / contain no-repeat;
}

@media (max-width: 760px) {
  html body > header { padding-bottom: 76px; }
  html body > header::before { bottom: 30px; }
  html body > header::after { width: 48px; height: 48px; right: 16px; bottom: 31.5px; }
}

/* examples 頁寫死的圓角 */
html body .verdict, html body .play, html body .note { border-radius: 4px; }