/*
 * 美國站唯一的覆寫檔（v3/27 R0，從 02-UI雛形/us/v4/us-overrides.css 搬來，拿掉樣張頁專用的段落）。
 * 只有美國載入：resources/views/us/partials/head-country.blade.php（layouts/site 在 tailwind.css 之後 include），台灣不會讀到。
 * 台灣的 CSS 原檔不複製、不修改。
 * 規則（使用者 2026-10-15）：顏色一律照台灣 site.css 的 token，**這份不定義任何顏色 token，D1 漲跌色除外**。
 *
 * D1～D5（使用者 2026-10-15 核准，02-UI雛形/us/research/台美特性對照.md §5）：
 *   D1 漲跌色：美國綠漲紅跌——台灣現有的紅、綠兩個色相互換；淺色的綠調深成 #147a4c（台灣 #178a55 對白底只有 4.37:1）
 *   D2 讀者反應：方塊正面兩個大寫字母（FO HO WI HA AN SA SC SH），翻面是台灣的臉；「想」＝笑臉＋加號（字在 #rx-cfg，見 v3/27 §3）
 *   D3 前三名獎章：照搬台灣（不用覆寫）
 *   D4 跑馬燈：照搬（台灣 CSS 已經 hover 暫停、prefers-reduced-motion 時不動）
 *   D5 Cookie 提示列：不放（us/partials/cookie-bar 是空的），頁尾保留 Cookie Settings
 */

/* ---------- 字型（使用者 2026-10-15：字型可以用美國的） ----------
 * 台灣內文是 Noto Sans TC；它把英文的彎引號 ’ “ ” 排成全形，Who’s 會變成「Who’ s」。
 * 美國內文改用 Noto Sans（Noto Sans TC 裡的同一套拉丁字形，標點是英文寬度）；數字字 Barlow Condensed、IBM Plex Mono 照台灣。
 * 自己放字型、不連 Google（跟台灣 fonts.css 同一個原則）：Google Fonts 的 latin、latin-ext 兩片可變字重 woff2（OFL 授權），
 * 2026-10-15 從 fonts.googleapis.com/css2?family=Noto+Sans:wght@400..900 下載，unicode-range 照 Google 原樣。 */
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/noto-sans-latin-wght.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/noto-sans-latinext-wght.woff2?v=1) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
body, .news-link, .ttl { font-family: "Noto Sans", "Noto Sans TC", system-ui, sans-serif; }
/* 互動元件（台灣 site-blocks.css 在這幾個元件上直接寫 Noto Sans TC）：英文的彎引號會排成全形，前面加 Noto Sans */
.rc-pop, .rc-panel, .rc-toast, .rc-dd, .rcg-seen, #rc-tools, .rc-modal, .rc-whobox, .bdc, #rx-layer, .rxm .toast, .rcm, .rxm { font-family: "Noto Sans", "Noto Sans TC", system-ui, sans-serif; }

/* ---------- D1：漲跌色（唯一可以改的顏色） ---------- */
:root {
  --up: #147a4c;
  --up-soft: #e2f3ea;
  --down: #d62839;
  --down-soft: #fbe7e9;
  --tape-up: #147a4c;
}
:root[data-mode="dark"] {
  --up: #3cc98a;
  --up-soft: #10291d;
  --down: #ff4d5e;
  --down-soft: #3a1419;
  --tape-up: #3cc98a;
}

/* ---------- 是「標記」不是漲跌的地方：維持台灣原本的紅（台灣 --up 的原值，不是新顏色） ---------- */
/* 「爆發／Spike」標籤代表熱度、不代表方向 */
.bg-up.rounded.font-bold[class*="text-[10px]"], .hr-boom { background: #d62839; }
:root[data-mode="dark"] .bg-up.rounded.font-bold[class*="text-[10px]"], :root[data-mode="dark"] .hr-boom { background: #ff4d5e; }
/* NEW 標籤：「新上榜」（主 session v4-1 審查第 3 點） */
.us-new { background: #d62839 !important; color: #fff !important; }
:root[data-mode="dark"] .us-new { background: #ff4d5e !important; }
/* 「今日重點」前面的小圓點 */
.hl-card .size-1\.5.rounded-full.bg-up { background: #d62839; }
:root[data-mode="dark"] .hl-card .size-1\.5.rounded-full.bg-up { background: #ff4d5e; }
/* 事件頁時間軸主線：它是「熱度」不是漲跌 */
.ev-chart .us-line { stroke: #d62839; } .ev-chart .us-area { fill: #d62839; } .ev-chart .us-dot { stroke: #d62839; } .us-key { background: #d62839; }
:root[data-mode="dark"] .ev-chart .us-line, :root[data-mode="dark"] .ev-chart .us-dot { stroke: #ff4d5e; }
:root[data-mode="dark"] .ev-chart .us-area, :root[data-mode="dark"] .us-key { fill: #ff4d5e; background: #ff4d5e; }
/* 「各家媒體怎麼報」的 First 標籤 */
.us-fastest { background: #d62839 !important; }
:root[data-mode="dark"] .us-fastest { background: #ff4d5e !important; }
/* 分享對話框「Embed on your site」旁的「New」：「新功能」標記 */
#share-tabs .bg-up-soft { background: #fbe7e9 !important; color: #d62839 !important; }
:root[data-mode="dark"] #share-tabs .bg-up-soft { background: #3a1419 !important; color: #ff4d5e !important; }
/* 封存（A2，主 session 2026-10-15）：最忙那天的外框與 Busiest 標章、月曆格的事件標籤、Busiest days 的數字、月卡的 This month
   都是標記不是漲跌 → 台灣紅（〈vs. last month〉的 ▲▼ 才是漲跌，照 D1） */
.acal .day.max { box-shadow: inset 0 0 0 2px #d62839; }
.acal .badge.bg-up { background: #d62839; }
.acal .evtag.bg-up-soft { background: #fbe7e9; color: #b91c2c; }   /* 字 #b91c2c（5.4:1）：使用者核准的無障礙例外（A10） */
.us-mark { color: #d62839 !important; }
:root[data-mode="dark"] .acal .day.max { box-shadow: inset 0 0 0 2px #ff4d5e; }
:root[data-mode="dark"] .acal .badge.bg-up { background: #ff4d5e; }
:root[data-mode="dark"] .acal .evtag.bg-up-soft { background: #3a1419; color: #ff4d5e; }
:root[data-mode="dark"] .us-mark { color: #ff4d5e !important; }

/* ---------- 台灣 CSS 裡 content: 寫死中文的地方（只有預言家表格，美國不做預言家；照列並覆寫成英文） ----------
 * site-tail.css:158  .mbm table.pred td:nth-child(2)::before { content: "你猜 "; }
 * site-tail.css:159  .mbm table.pred td:nth-child(3)::before { content: "答案 "; }
 */
.mbm table.pred td:nth-child(2)::before { content: "Your guess "; }
.mbm table.pred td:nth-child(3)::before { content: "Answer "; }

/* ---------- 只改排法（不改顏色） ---------- */
/* 美國有 27 家媒體（台灣 21 家）：幾家在報的格子一排 14 格，兩排排完 */
.cov-boxes { grid-template-columns: repeat(14, 6px); }
@media (max-width: 400px) { .cov-boxes { grid-template-columns: repeat(14, 5px); } }
/* 320 寬：英文「Sign in」比「登入」寬，頁首差 1px 溢出；頁首第一列間距從 24px 收成 12px */
@media (max-width: 359px) { #site-header > div:first-child { gap: 12px; } }
@media (max-width: 359px) { #mb-user .login { padding: 0 8px; } }
/* Latest：台灣這一欄放名次（2.25～2.5rem），美國放時間「2:40 PM」，加寬到 4.25rem 一行放完 */
#feed ol > li > .grid { grid-template-columns: 4.25rem minmax(0, 1fr) auto; }
@media (min-width: 768px) { #feed ol > li > .grid { grid-template-columns: 4.25rem minmax(0, 1fr) 12rem auto; } }
#feed ol > li > .grid > .num:first-child { white-space: nowrap; }
/* 事件頁「各家媒體怎麼報」：台灣第一篇標題欄 max-w-[320px]；英文標題比中文長，放寬讓它吃掉剩下的寬度；媒體名可以換行 */
.ev-media td:last-child { max-width: none; }
.ev-media td:first-child > span { white-space: normal; } .ev-media td:first-child { width: 10.5rem; }
/* 推薦榜「Pinned by Sam’s rocket」：暱稱包在句子中間，不留台灣 .rc-pinby 的右邊距（字序設定見 v3/27 §3 ⑦） */
.rc-pinby.rc-pinby-in { margin-right: 0 !important; padding-right: 0 !important; }
/* 補的分享鈕（台灣這幾張卡沒有分享鈕）：320 寬時 Shorts 卡的兩組分頁＋分享放不下，只留圖示 */
@media (max-width: 359px) { [data-share="mostread"] > span, [data-share^="yt-"] > span { display: none; } }
@media (max-width: 359px) { #ytshorts-ranking > div:first-child > .flex.shrink-0 { flex-wrap: wrap; flex-shrink: 1; } }
/* 封存日的提示帶（台灣 partials/archive-banner，bg-up-soft）：是提示不是漲跌，D1 之後照台灣維持紅底（台灣 --up-soft／--up 的原值）；
   英文比中文長，窄螢幕兩個連結換到下一行（只改排法） */
#archive-banner { background: #fbe7e9; border-color: rgb(214 40 57 / .4); }
:root[data-mode="dark"] #archive-banner { background: #3a1419; border-color: rgb(255 77 94 / .4); }
@media (max-width: 639px) { #archive-banner { flex-wrap: wrap; } #archive-banner > span { flex-shrink: 1; } }
/* Daily top stories（us/partials/follow-card）：通知被瀏覽器封鎖時那顆按鈕的英文句子很長、台灣 .fbtn 不換行，
   320 寬會撐破卡片 → 窄的時候欄寬鎖住、那顆封鎖狀態的按鈕可以換行（只改排法） */
@container (max-width: 699px) { #follow-card .follow { grid-template-columns: minmax(0, 1fr); } }
#follow-card .fbtn.pushbtn.dis { white-space: normal; height: auto; min-height: 44px; padding: 8px 14px; text-align: center; }
/* 減少動態（v3/27 U8、R4）：台灣 site.css 讓讀者反應、推薦動畫、徽章慶祝在「減少動態」時照樣播（10 文件的原則）；
   美國照系統設定只播最後一格——JS 那半在 site-reactions.js（reduceMotion:'respect'，Web Animations 直接 finish），這裡管 CSS 動畫：
   同一組例外的動畫一律 1ms、只播一次（無限循環的光點也停） */
@media (prefers-reduced-motion: reduce) {
  :is(.rxm, .rxm *, .bdc-bg, .bdc-bg *, .mbm, .mbm *, .rcm, .rcm *, .rc-lm, .rc-lm *, .rc-spark) { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* /privacy#cookies（頁尾 Cookie settings 視窗的「Read our Privacy Policy」）：標題不要被固定頁首蓋住；
   首頁區塊用的也是 140px（site-tail.css 的 #home-view section[id]） */
#event-view h3[id] { scroll-margin-top: 140px; }
/* 週報〈每天發稿〉最忙那天的長條：標記 → 台灣紅（A3） */
.us-wk-hot { background: #d62839 !important; }
:root[data-mode="dark"] .us-wk-hot { background: #ff4d5e !important; }

/* ---------- 無障礙對比（A10，axe WCAG 2.1 AA；只改美國） ---------- */
/* 有字的小標章（YouTube 的 NEW、媒體頁的 First）是標記 → 台灣紅；深色也用 #d62839：白字配 #ff4d5e 只有 3.2:1 */
.yb-new { background: #d62839 !important; }
:root[data-mode="dark"] .us-fastest, :root[data-mode="dark"] .us-new { background: #d62839 !important; }
/* 熱門榜「New on the list」：#1a6fd1 配淺藍底 4.39:1 → 加深 */
.hr-new { color: #1559a8; }
/* 深色的暱稱：#4b5563 配深底 2.4:1 */
:root[data-mode="dark"] .rxm .nick:not(.gold):not(.anon) { color: #a3a9b3; }
/* 熱門榜的媒體按鈕：淡色（/50）的那幾顆還是可以按，對比照一般字 */
[data-hro].text-muted-foreground\/50 { color: var(--muted-foreground); }
/* 單日頁上方的封存橫幅（粉底）：連結用主文字色 */
#archive-month-link, #back-today { color: var(--foreground); }
/* /levels 的推薦說明（.rc-lvhowto）在深色模式：說明列、注意事項寫死淺底，字又跟著深色變淺 → 看不見（1.08:1） */
:root[data-mode="dark"] .rc-lvhowto .rc-howto li, :root[data-mode="dark"] .rc-lvhowto .rc-howto .notes { background: var(--muted); }
:root[data-mode="dark"] .rc-lvhowto .rc-howto h4 small, :root[data-mode="dark"] .rc-lvhowto .rc-howto .where,
:root[data-mode="dark"] .rc-lvhowto .rc-howto .fx small, :root[data-mode="dark"] .rc-lvhowto .rc-howto .lead { color: var(--muted-foreground); }
:root[data-mode="dark"] .rc-lvhowto .rc-howto .lead b { color: var(--foreground); }
/* 深色模式的紫／橘字與白字標章（A10） */
:root[data-mode="dark"] .rc-lvhowto .rc-howto .pt, :root[data-mode="dark"] .rc-week > a { color: #a78bfa; }
:root[data-mode="dark"] .rc-week > b { color: #fb923c; }
:root[data-mode="dark"] .lvc .lv:not(.l1):not(.l3) { background: #7c3aed; }   /* 只有 Lv2 是紫底白字；Lv1、Lv3 有自己的底色 */
/* Spike 等白字小標記（.bg-up.rounded.font-bold 10px，上面「標記」那一段）：深色也用 #d62839，白字配 #ff4d5e 只有 3.2:1 */
:root[data-mode="dark"] .bg-up.rounded.font-bold[class*="text-[10px]"] { background: #d62839; }
:root[data-mode="dark"] #age-msg { color: #ff7b88 !important; }
/* ---------- 使用者核准的無障礙例外（2026-10-15，A10）：台灣色票同色系加深，只在美國、只有淺色模式 ----------
   第 2 名橘 #e4570f→#c2410c（白底 5.2:1）、第 3 名金 #c98a00→#a16207（4.9:1）。
   深色模式的 --rank2 #ff8a3d、--rank3 #ffc247 本來就 ≥7:1，不動（深色的選擇器 :root[data-mode="dark"] 比這裡具體，不會被蓋）。
   事件標籤紅字見上面 .acal .evtag；Bluesky 分享鈕 #0a6ad6 在 ShareCard::snsLinks；LINE 綠是品牌規範，保留（按鈕有 aria-label） */
:root { --rank2: #c2410c; --rank3: #a16207; }

/* /levels 推薦表（主 session 2026-10-16 審查 C）：英文名稱比中文長（Super rocket、AI race car＋Lv3），台灣的 6.8em 名稱欄會擠成兩行 → 加寬、不換行。
   手機（≤560）台灣已改成彈性欄，不動 */
@media (min-width: 561px) {
  .rcm .rc-howto li { grid-template-columns: 38px 10.5em 4.4em minmax(0, 1fr); }
  .rcm .rc-howto .nm { white-space: nowrap; }
}

/* 首頁沒有頭條的日子（us/pages/home.blade.php）：左欄疊 Top stories＋Surging；窄螢幕一欄時照原本順序，Today in numbers 在前 */
@media (max-width: 1023px) { #home-view .us-nolead-left { order: 2; } }

/* 徽章分享視窗（site-badges.js）：美國多 X、Bluesky 共 7 顆，排成兩排四欄（台灣 5 顆一排不變） */
.bdc .sh.more { grid-template-columns: repeat(4, 1fr); }

/* 小鈴鐺的未讀數：提醒標記不是漲跌，用台灣原值的紅（美國 --up 是綠；主 session 2026-10-16，照 NEW 標章的規則深色也同色） */
#mb-user .bell .dot { background: #d62839; }

/* 反應小方塊（標題後的 FO HO AN 3、事件頁的總數）：台灣是表情圖示、故意 -4px 疊在一起；美國是兩個英文字母的方塊，
   疊起來會黏成一個字（「FOHO」，主 session 2026-10-16）→ 方塊之間留 3px，不疊 */
.rxn-sum .em > span, .rxm .rsum .em > span { margin-left: 3px; }
.rxn-sum .em > span:first-child, .rxm .rsum .em > span:first-child { margin-left: 0; }

/* popup 被擋的提示（A-03，site-member.js holdGo）：「Continue」按鈕，在深色 toast 上用白框、在登入視窗裡用 --primary 外框 */
.mb-go { flex: none; margin-left: 4px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .5); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.mb-go:hover { background: rgb(255 255 255 / .12); }
.mb-modal .msg .mb-go { border-color: var(--primary); color: var(--primary); padding: 2px 10px; }
.mb-modal .msg .mb-go:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }