/* orange skin（實驗外觀，只在 ?design=map-orange；spec 2026-10-13-orange-skin-map）。
   冷灰黑白為底、橘色只有一個意思：「你正在看的／可以按的重點」。每條規則都必須以 [data-skin="orange"] 開頭
   （functions/web/skin-orange-scope.test.mjs 擋）。橘色不當一般文字色、不進分數色階。 */
[data-skin="orange"]:not([data-theme="dark"]):root {   /* 權重 0,3,0：蓋過 style.css／saved.css 的主題 token，與載入順序無關 */
  --bg: #F4F5F7; --card: #FFFFFF; --ink: #16181D; --muted: #666C75; --hair: #E3E6EA;
  --brand: #16181D; --brand2: #16181D; --accent: #16181D; --grad: #16181D;
  --brand-deep: #000000; --brand-tint: #ECEEF1; --media: #ECEEF1; --media-ink: #666C75;
  --orange: #FF5B14;
  --orange-text: #EB4E0C;   /* 橘色大字專用：--orange 在 #F4F5F7 上只有 2.85:1，這個 3.42:1（≥18px 粗體／大字 3:1） */
  /* 城市導覽（cityguide.css 的 --ink 是城市代表色；使用者 2026-10-13：全部改墨黑）與收藏分類（使用者 2026-10-13：想去橘、住過墨黑、去過冷灰藍） */
  --paper: #FFFFFF; --paper2: #F4F5F7; --text: #16181D; --rule: #16181D;
  --sv-cat-lived: #16181D; --sv-cat-visited: #6A819E; --sv-cat-want_to_live: var(--orange);
  /* 純文字頁（方法、資料、隱私、排行榜）與城市導覽系列頁的頂欄 token */
  --brand-mark: #16181D; --link: #16181D;
  --nav-bg: #F4F5F7; --nav-card: #FFFFFF; --nav-ink: #16181D; --nav-muted: #666C75; --nav-hair: #E3E6EA; --nav-grad: #16181D;
}
[data-skin="orange"][data-theme="dark"]:root {
  --bg: #0E1013; --card: #171A1F; --ink: #EEF0F3; --muted: #9097A1; --hair: #262A31;
  --brand: #EEF0F3; --brand2: #EEF0F3; --accent: #EEF0F3; --grad: #EEF0F3;
  --brand-deep: #FFFFFF; --brand-tint: #1E2228; --media: #1E2228; --media-ink: #9097A1;
  --orange: #FF6A2B;
  --orange-text: var(--orange);   /* 深色底上 6.67:1 */
  --paper: #171A1F; --paper2: #0E1013; --text: #EEF0F3; --rule: #EEF0F3;
  --sv-cat-lived: #EEF0F3; --sv-cat-visited: #8FA6BF; --sv-cat-want_to_live: var(--orange);
  --brand-mark: #EEF0F3; --link: #EEF0F3;
  --nav-bg: #0E1013; --nav-card: #171A1F; --nav-ink: #EEF0F3; --nav-muted: #9097A1; --nav-hair: #262A31; --nav-grad: #EEF0F3;
}
/* 選取／hover 中的格子：白框 → 橘框（格子本身仍是分數色） */
[data-skin="orange"] .pop-sq { border-color: var(--orange); }
/* 鍵盤焦點框 */
[data-skin="orange"] :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* POI 圖釘：類別靠圖案形狀辨識，底色統一墨黑（深色模式淺灰）；focus／hover 外圈橘 */
[data-skin="orange"] .poi-school .poi-pin,
[data-skin="orange"] .poi-hospital .poi-pin,
[data-skin="orange"] .poi-park .poi-pin,
[data-skin="orange"] .poi-mall .poi-pin,
[data-skin="orange"] .poi-landmark .poi-pin,
[data-skin="orange"] .poi-junior .poi-pin,
[data-skin="orange"] .poi-higher .poi-pin,
[data-skin="orange"] .poi-station .poi-dot { background-color: #2B2F36; }
[data-skin="orange"][data-theme="dark"] .poi-school .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-hospital .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-park .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-mall .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-landmark .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-junior .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-higher .poi-pin,
[data-skin="orange"][data-theme="dark"] .poi-station .poi-dot { background-color: #5A616C; }
[data-skin="orange"] .poi-icon:hover .poi-pin,
[data-skin="orange"] .poi-focus .poi-pin { box-shadow: 0 0 0 3px var(--orange), 0 3px 8px rgba(0,0,0,.35); }
/* 開關（街格評分點、軌道）：按鈕本體維持卡片色＋墨黑字，只有開啟中的小軌道是橘（橘不配文字） */
[data-skin="orange"] .tb2-switch[aria-checked="true"] .sw { background: var(--orange); }
/* 收藏元件自帶 --sv-* token：品牌藍 → 墨黑（收藏分類色「去過／住過／想去」保留，靠圖示也能辨識） */
[data-skin="orange"]:not([data-theme="dark"]):root {   /* 權重 0,3,0：蓋過 style.css／saved.css 的主題 token，與載入順序無關 */
  --sv-bg: #F4F5F7; --sv-ink: #16181D; --sv-muted: #666C75; --sv-hair: #E3E6EA;
  --sv-brand: #16181D; --sv-brand-ink: #FFFFFF; --sv-tint: #ECEEF1;
}
[data-skin="orange"][data-theme="dark"]:root {
  --sv-card: #171A1F; --sv-bg: #0E1013; --sv-ink: #EEF0F3; --sv-muted: #9097A1; --sv-hair: #262A31;
  --sv-brand: #EEF0F3; --sv-brand-ink: #0E1013; --sv-tint: #1E2228;
}
/* 地圖上的「已選生活圈｜名稱｜✕」標籤：藍 → 墨黑（深色模式 var(--ink) 自動變淺） */
[data-skin="orange"] #area-chip .ac-sub { color: var(--ink); border-color: var(--ink); }
[data-skin="orange"] #area-chip .ac-name { color: var(--card); background: var(--ink); border-color: var(--ink); }
[data-skin="orange"] #area-chip .ac-x { color: var(--ink); border-color: var(--ink); }
[data-skin="orange"] #area-chip .ac-x:hover { color: var(--card); background: var(--ink); }
/* 內文連結：墨色＋底線（不靠藍色辨識是連結） */
:where([data-skin="orange"]) a:where(:not([class])) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }   /* 權重 0,0,1：只蓋「完全沒樣式」的連結，元件自己的 .x a 規則照常生效（審查 2026-10-13） */
/* 主色底（--grad／--brand／--ink 在深色模式是近白）＋原本寫死白字的元件：字改 var(--card)（審查 2026-10-13；skin-orange-scope.test 自動比對）*/
[data-skin="orange"] #cityswitch button.active,
[data-skin="orange"] .intro-steps li::before,
[data-skin="orange"] .intro-start,
[data-skin="orange"] .cmt-form .cmt-primary,
[data-skin="orange"] .sp-unlock,
[data-skin="orange"] .sp-cities button.active,
[data-skin="orange"] .cid-pop-body button,
[data-skin="orange"] .rep-send,
[data-skin="orange"] .pa-btn.primary,
[data-skin="orange"] .share-actions .sa-primary,
[data-skin="orange"] .pc-cta,
[data-skin="orange"] .rr-submit,
[data-skin="orange"] .sp-panel .sp-presets button[aria-pressed="true"],
[data-skin="orange"] .mc .sp-presets button[aria-pressed="true"],
[data-skin="orange"] .tb2 .sp-presets button[aria-pressed="true"],
[data-skin="orange"] .sp-panel .sp-show-all,
[data-skin="orange"] .mc .sp-show-all,
[data-skin="orange"] .tb2 .sp-show-all,
[data-skin="orange"] .chips.chips-big button.on,
[data-skin="orange"] .cg-maplink,
[data-skin="orange"] .cg-randcmp:hover,
[data-skin="orange"] .sv-pin { color: var(--card); }
/* 橘色焦點（使用者 2026-10-13：1 主要行動按鈕、2 排行榜第一名分數、6 已收藏；3 選取圈外框在 app.js areaHlInk）。
   每個畫面只留一兩個橘色焦點；橘底一律配墨黑字（白字在橘上只有 3:1）。 */
[data-skin="orange"] .intro-start,
[data-skin="orange"] .cmt-form .cmt-primary,
[data-skin="orange"] .sp-unlock,
[data-skin="orange"] .cid-pop-body button,
[data-skin="orange"] .rep-send,
[data-skin="orange"] .pa-btn.primary,
[data-skin="orange"] .share-actions .sa-primary,
[data-skin="orange"] .pc-cta,
[data-skin="orange"] .rr-submit,
[data-skin="orange"] .cg-maplink,
[data-skin="orange"] .sv-cta,
[data-skin="orange"] .sharebar button { background: var(--orange); color: #16181D; border-color: var(--orange); }
[data-skin="orange"] .intro-start:hover,
[data-skin="orange"] .cmt-form .cmt-primary:hover,
[data-skin="orange"] .sp-unlock:hover,
[data-skin="orange"] .cid-pop-body button:hover,
[data-skin="orange"] .rep-send:hover,
[data-skin="orange"] .pa-btn.primary:hover,
[data-skin="orange"] .share-actions .sa-primary:hover,
[data-skin="orange"] .pc-cta:hover,
[data-skin="orange"] .rr-submit:hover,
[data-skin="orange"] .cg-maplink:hover,
[data-skin="orange"] .sv-cta:hover,
[data-skin="orange"] .sharebar button:hover { background: #E84E0C; color: #16181D; }
[data-skin="orange"] .top1 .sc { color: var(--orange-text); }
[data-skin="orange"] .sv-toggle[aria-pressed="true"] { border-color: var(--orange); }
[data-skin="orange"] .sv-toggle[aria-pressed="true"] .sv-ico { color: var(--orange); }
/* 地圖側欄（使用者 2026-10-13）：標語只點一個字＋指南連結的箭頭 */
[data-skin="orange"] .ob-accent { color: var(--orange-text); }
[data-skin="orange"] .ob-guide-cta .ob-arrow { color: var(--orange-text); }
/* 格子卡「位於生活圈」小地圖上的位置點：橘，呼應地圖上選中格的橘框（使用者 2026-10-13）。權重 0,3,0 蓋過 style.css 的 .pc-comm-map .ol-dot（0,2,0） */
[data-skin="orange"] .pc-comm-map .ol-dot { fill: var(--orange); }
/* 首頁標語的強調字（使用者 2026-10-13：同地圖側欄，只點「生活圈」一個字） */
[data-skin="orange"] .home-h1 .home-accent { color: var(--orange-text); }