/* Hallmark · design-system: AeroPacer · shared tokens（四頁共用正本）
 * 顏色/字體只在這裡定義；頁面 CSS 一律引用 var(--token)，不得硬編。 */
:root{
  --ground:#0D0F0F; --surface:#141817; --surface2:#1A1F1E; --line:#26302E;
  --ink:#E6ECEA; --muted:#93A09B;  /* muted 2026-09-01 調亮一階：說明文字對比 */
  --accent:#35E1CE; --accent-ink:#35E1CE; --accent-bright:#6FEDDE;
  --accent-dark:#1FA396; --accent-dim:rgba(53,225,206,.07);
  --cta-ink:#0B1513;
  --speed:#B7C2BF; --bad:#E07B7B;
  --ok:#6BBE8F; --warn:#C9A23F; --danger:#C25757;  /* 狀態語意色（爬坡檢查等） */
  --delta-plus:#D97A6B; --delta-minus:#6BBE8F; --delta-flat:#9AA6A2; --actual:#F2F5F4;
  --coast:#54718C; --recover:#4F8A70; --steady:#C9A23F;
  --push:#C97845; --dig:#C25757; --steep:#B565A0;
  --font-body:"Noto Sans TC","PingFang TC",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
  --font-mono-tc:"IBM Plex Mono","Noto Sans TC",monospace;
  --font-display:"Rajdhani","Noto Sans TC",sans-serif;
  --font-serif:"Noto Serif TC","Noto Sans TC",serif;
  --edge:inset 0 1px 0 rgba(255,255,255,.05);
  /* 字級階梯（八階，禁自創中間值） */
  --fs-0:13.5px; --fs-1:14.5px; --fs-2:15.5px; --fs-3:16px;
  --fs-4:18px; --fs-5:21px; --fs-6:24px; --fs-7:34px;
  /* 間距階梯（4pt 基底） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  /* 圓角階梯：小元件 8、面板 12、大面板/色帶 20、藥丸 99 */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:99px;
  /* 動效：一種 easing、兩種時長；焦點環永遠即時 */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-1:150ms; --dur-2:350ms;
}
/* 鍵盤焦點環：立即出現、不動畫 */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* 多語系（2026-09-03）：各語言字體。日韓簡中＝對應 Noto。
 * 拉丁語系（2026-09-04 改）＝Space Grotesk，內文與標題同一家族，比 IBM Plex Sans 有科技感；
 * 中日韓的標題仍是 Rajdhani（只有拉丁字元，CJK 落到各自的 Noto）。
 * 拉丁文字 1.7–1.8 的行高偏鬆，統一收到 1.6。 */
html[lang="en"],html[lang="de"],html[lang="fr"],html[lang="es"],html[lang="it"],html[lang="pt"],html[lang="nl"]{
  --font-body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-mono-tc:"IBM Plex Mono",monospace;
  --font-display:"Space Grotesk",system-ui,-apple-system,sans-serif}
html[lang="en"] body,html[lang="de"] body,html[lang="fr"] body,html[lang="es"] body,html[lang="it"] body,
html[lang="pt"] body,html[lang="nl"] body{line-height:1.6}
html[lang="ja"]{--font-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --font-mono-tc:"IBM Plex Mono","Noto Sans JP",monospace;--font-serif:"Noto Serif JP","Noto Sans JP",serif;
  --font-display:"Rajdhani","Noto Sans JP",sans-serif}
html[lang="ko"]{--font-body:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --font-mono-tc:"IBM Plex Mono","Noto Sans KR",monospace;--font-serif:"Noto Serif KR","Noto Sans KR",serif;
  --font-display:"Rajdhani","Noto Sans KR",sans-serif}
html[lang="zh-Hans"]{--font-body:"Noto Sans SC","PingFang SC",sans-serif;
  --font-mono-tc:"IBM Plex Mono","Noto Sans SC",monospace;--font-serif:"Noto Serif SC","Noto Sans SC",serif;
  --font-display:"Rajdhani","Noto Sans SC",sans-serif}
.langsel{color:var(--muted);font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;
  cursor:pointer;max-width:130px}
.langsel:hover,.langsel:focus{color:var(--ink);border-color:var(--accent);outline:none}
.langsel option{background:var(--surface);color:var(--ink)}

/* ── 多語系版式修正（2026-09-04）──
 * 譯文比中文長 2–4 倍，原本靠 flex 壓縮＋自動換行硬擠，桌機就會折成兩行。
 * 這裡集中處理三類：導覽列不折行、數字磚縮字級、SVG 標籤跟著語言換字體。 */

/* 導覽列：logo 與 nav 之間一定要留白（原本 space-between 沒有 gap，
 * 英/法的第一個連結會直接貼到 AEROPACER 上）；標籤與 CTA 一律單行，
 * 真的放不下時交給既有的漢堡選單，而不是把藥丸鈕撐成兩行。 */
html[lang] header.topbar{gap:24px}
html[lang] .topnav .nl,html[lang] .topnav .cta-s{white-space:nowrap}
/* app 頁（主控台／教練台／路線／CdA）的頂欄 nav 同理 */
html[lang] .topbar nav a,html[lang] .topbar nav button{white-space:nowrap}

/* 首頁數字磚：中文是「6 級」「3 種」，拉丁語系會變成「6 levels」「3 formats」，
 * 40px 等寬字在 190px 的格子裡一定折行。拉丁語系改成隨容器縮放且不折行。 */
html:is([lang="en"],[lang="de"],[lang="fr"],[lang="es"],[lang="it"],[lang="pt"],[lang="nl"]) .num .v{
  font-size:clamp(22px,2.4vw,32px);white-space:nowrap}

/* 方案卡的 CTA 藥丸鈕只有約 204px：中文「開始累積我的 CdA →」放得下，
 * 英文「Start building my CdA history →」16px 要 245px，會折成兩行、四張卡高度不齊。 */
html:is([lang="en"],[lang="de"],[lang="fr"],[lang="es"],[lang="it"],[lang="pt"],[lang="nl"]) .plan .go{
  font-size:14.5px}

/* SVG 內的 <text> 是硬寫 font-family 的（presentation attribute，優先權 0），
 * 日／韓／簡中會掉到系統 fallback、和頁面其他字不同套。這裡改回語言 token。 */
svg text[font-family^="IBM Plex Mono"]{font-family:var(--font-mono-tc)}
svg text[font-family^="Noto Sans TC"]{font-family:var(--font-body)}

/* ── 語言建議橫幅（2026-09-04）──
 * 別人把 /en/ 連結分享到德國論壇時，德文瀏覽器的訪客會在頂端看到一條德文提示。
 * 只建議、不強制轉址：手機設英文的人想看的就是英文。按下切換或關閉都會寫 langpick
 * cookie，之後永遠不再出現。文字用「被建議的那個語言」寫，所以整條 lang 屬性也跟著換。 */
.langsug{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:9px 20px;background:var(--surface);border-bottom:1px solid var(--line);
  font-family:var(--font-body);font-size:14.5px;line-height:1.4}
.langsug a{text-decoration:none}
.langsug-go{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:500}
.langsug-go:hover{color:var(--accent-bright)}
.langsug-go svg{width:16px;height:16px;flex:none}
.langsug-x{color:var(--muted);font-size:15px;line-height:1;padding:3px 7px;border-radius:var(--r-sm)}
.langsug-x:hover{color:var(--ink);background:var(--surface2)}