/* Path: /wp-content/plugins/jct-typhoon-airport-signal/assets/css/front.css
 * Version: 4.5.0
 * 颱風機場紅綠燈 — 前台樣式
 *
 * 三組控制項（期間、字級、配色）完全由 CSS 驅動，不使用 JavaScript。
 * 狀態放在藏起來的 radio 上，再用 :has() 讀取選取狀態。
 * 舊瀏覽器不支援 :has() 時會退化成「顯示第一頁、大字級、跟隨系統配色」，
 * 表格內容仍然完整可讀。
 *
 * 全部變數都掛在 .jct-tas-front 底下，不污染佈景主題。
 */

.jct-tas-front {
	/* 字型與原型一致：Roboto Condensed 這套窄體負責數字與英文，
	   它不含中文字符，中文會自然落到 Noto Sans TC。
	   數字對齊靠 tabular-nums，不需要等寬字型。 */
	--jct-tas-font: "Roboto Condensed", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

	--jct-tas-surface: #fff;
	--jct-tas-surface-2: #f5f7f9;
	--jct-tas-ink-1: #111519;
	--jct-tas-ink-2: #454b54;
	--jct-tas-ink-3: #757c86;
	--jct-tas-border: rgba(17, 21, 25, .13);
	--jct-tas-border-2: rgba(17, 21, 25, .08);
	--jct-tas-axis: #d3d8de;
	--jct-tas-past-band: #f5f6f7;
	--jct-tas-past-ink: #646a73;
	--jct-tas-gust: #eb6834;
	--jct-tas-good: #0ca30c;
	--jct-tas-warn: #f0a413;
	--jct-tas-warn-line: #9a6800;
	--jct-tas-crit: #d03b3b;
	--jct-tas-crit-ink: #a02020;
	/* 資料來源那一列的兩塊底色。
	 *
	 * 刻意壓得比其他色帶深：它是整張表唯一標示「這段資料從哪裡來」的地方，
	 * 淡淡的一條容易被當成背景略過。
	 *
	 * 文字改用近黑，兩塊底在近黑字下都有 7:1 以上（AAA），
	 * 而且彼此的明度差只有 0.94，看起來是同一組的兩半而不是一深一淺。
	 * 原本的藍字在這個深度只剩 2.48:1，已不適用。 */
	--jct-tas-taf-band: #7da4d0;
	--jct-tas-taf-ink: #1e5fa8;
	--jct-tas-mod-band: #a1a6af;

	/* 「已過去」灰帶維持原本的淺色——它的角色是退到背景，
	   跟上面兩塊要突出的底色目的相反，不能共用。 */
	--jct-tas-past-strip: #e4e6e9;
	--jct-tas-muted-band: repeating-linear-gradient(45deg, #f2f3f5, #f2f3f5 3px, #fafbfc 3px, #fafbfc 6px);
	--jct-tas-shadow: 0 1px 2px rgba(17, 21, 25, .04), 0 10px 28px -14px rgba(17, 21, 25, .2);

	/* 字級預設為「大」。
	 *
	 * 資料欄的左右 padding 是 0，欄寬完全由內容決定：
	 * 取「圖示尺寸」與「數字寬度」兩者的大者，再加 1px 框線。
	 * 因此要調窄欄位，就得同時把 --jct-tas-icon 與 --jct-tas-fs-num 一起調，
	 * 只改 --jct-tas-colw 會讓圖示或數字被 overflow:hidden 裁掉。
	 *
	 * 首欄寬度則是被最長的那個標籤「飛機起降限制（側風）」鎖住的：
	 * 10 個全形字 × --jct-tas-fs-lbl ＋ 左右 padding ＋ 框線。
	 */
	--jct-tas-colw: 23px;
	--jct-tas-railw: 136px;
	/* 一個機場區塊大約多高。只用在 contain-intrinsic-size，
	   量出來的實際值是 267（燈號）／273（時間帶），取中間。 */
	--jct-tas-ih: 270px;
	--jct-tas-pad-y: 4px;
	--jct-tas-fs-num: 14px;
	--jct-tas-fs-lbl: 13.5px;
	--jct-tas-fs-day: 15px;
	--jct-tas-fs-hour: 12.5px;
	--jct-tas-icon: 15px;

	font-family: var(--jct-tas-font);
	font-variant-numeric: tabular-nums;
	margin: 1.5em 0;

	/* 元件自己帶背景與文字色。
	 *
	 * 只有淺色一種配色。深色切換移除了——三個選項要維護兩套調色盤，
	 * 而這張表靠顏色分辨燈號，兩套色階都得各自驗一次對比度，
	 * 不值得為了一個少用的開關扛這個成本。
	 *
	 * background 仍然不能拿掉：文字是深色的，
	 * 萬一被放進深色版面的容器裡，需要這層淺底墊著才讀得到。
	 *
	 * 外框、圓角、陰影與 padding 則已移除：
	 * 表格本身已經有一層框（.jct-tas-scroller），再包一層是重複的，
	 * 而那層 padding 左右各 16px 會直接吃掉表格 32px 的可視寬度。 */
	color: var(--jct-tas-ink-1);
	background: var(--jct-tas-surface);

	/* 放在別人的容器裡也不要撐破版面 */
	max-width: 100%;
	box-sizing: border-box;
}

/* 佈景主題常對 table / th / td / label / input 下通用樣式，
   在這裡一次擋掉，避免版面被外部規則帶偏。 */
.jct-tas-front *,
.jct-tas-front *::before,
.jct-tas-front *::after { box-sizing: border-box; }

/* 把表格從「站台全域表格樣式」手上搶回來。
 *
 * 很多佈景與站台 CSS 會為了手機橫向捲動，把所有表格改成：
 *
 *     table { display: block; overflow-x: auto; width: 100%; }
 *
 * 這兩個宣告對本元件是致命的：
 *
 * 一、overflow-x 讓 <table> 自己變成捲動容器。position: sticky 是相對
 *     「最近的捲動祖先」定位的，凍結欄因此改以表格為參考——而表格
 *     跟內容一樣寬，等於沒有可停靠的邊，首欄就跟著捲走了。
 *
 * 二、display: block 破壞表格格式化脈絡，<colgroup> 的欄寬與
 *     table-layout: fixed 一併失效，欄位會對不齊。
 *
 * 本元件自己已經有 .jct-tas-scroller 負責橫向捲動，不需要也不能讓
 * 表格再捲一次。
 *
 * 這裡用 !important 是必要的：那類規則在手機斷點通常也帶 !important。
 * 作用範圍嚴格限定在 .jct-tas-front 之內，不影響站台其他表格。 */
.jct-tas-front table {
	display: table !important;
	overflow: visible !important;
	width: max-content !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0;
	border: 0;
	background: none;
	font-size: inherit;
}

/* 中和佈景主題用 JavaScript 插進來的「響應式表格」包裝層。
 *
 * 很多佈景（Jannah 就是）會在載入後把每個 <table> 包進一層
 * <div class="table-is-responsive">，並給它 overflow: auto，
 * 好讓表格在手機上能橫向捲動。
 *
 * 那一層夾在表格與 .jct-tas-scroller 之間，於是它才是凍結欄
 * 「最近的捲動祖先」——而它跟表格一樣寬，永遠不會捲，
 * 凍結欄綁在一個不動的容器上，就跟著整體捲走了。
 *
 * 這裡刻意不寫死類別名稱：每套佈景的包裝層叫法都不一樣。
 * 本元件在捲動容器裡自己只有 .jct-tas-stack 與 .jct-tas-aptblock
 * 兩種 div，其餘任何冒出來的中間層一律不准成為捲動容器。
 *
 * 純 CSS 就能解決，不需要用 JavaScript 去跟佈景主題搶 DOM。 */
.jct-tas-scroller div:not(.jct-tas-stack):not(.jct-tas-aptblock) {
	display: block !important;
	overflow: visible !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* 包裝層通常也會附帶一條提示文字。 */
.jct-tas-scroller div:not(.jct-tas-stack):not(.jct-tas-aptblock)::before,
.jct-tas-scroller div:not(.jct-tas-stack):not(.jct-tas-aptblock)::after {
	content: none !important;
	display: none !important;
}

/* 同一類 CSS 常在表格上方用 ::before 生成「左右滑動」提示橫幅。
   本元件的捲動由自己的容器處理，不需要那條橫幅——
   而且它會出現在每一個機場表格上面，把版面切得很碎。 */
.jct-tas-front table::before,
.jct-tas-front table::after {
	content: none !important;
	display: none !important;
}

.jct-tas-front th,
.jct-tas-front td {
	background-image: none;
	text-transform: none;
	letter-spacing: normal;
	vertical-align: middle;
}

.jct-tas-front label {
	display: inline-flex;
	margin: 0;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* 控制項的 radio 只負責承載狀態，不需要被看見，
   但必須留在無障礙樹裡才能用鍵盤操作——因此不用 display:none。
   也刻意不使用 hidden 屬性：那只是 UA 樣式，很容易被主題的
   input { display: ... } 這類規則蓋掉。 */
.jct-tas-front .jct-tas-ctl {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	appearance: none;
}

/* ── 字級 ─────────────────────────────────────── */

.jct-tas-front:has(.jct-tas-sz-m:checked) {
	--jct-tas-colw: 19px;
	--jct-tas-railw: 118px;
	--jct-tas-ih: 225px;
	--jct-tas-pad-y: 3px;
	--jct-tas-fs-num: 12px;
	--jct-tas-fs-lbl: 11.5px;
	--jct-tas-fs-day: 13px;
	--jct-tas-fs-hour: 11px;
	--jct-tas-icon: 13px;
}

.jct-tas-front:has(.jct-tas-sz-xl:checked) {
	--jct-tas-colw: 28px;
	--jct-tas-railw: 163px;
	--jct-tas-ih: 326px;
	--jct-tas-pad-y: 5px;
	--jct-tas-fs-num: 17px;
	--jct-tas-fs-lbl: 16.5px;
	--jct-tas-fs-day: 18px;
	--jct-tas-fs-hour: 14.5px;
	--jct-tas-icon: 19px;
}

/* ── 標頭與控制項 ─────────────────────────────── */

.jct-tas-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 12px;
}

.jct-tas-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.jct-tas-title {
	margin: 0;
	font-family: var(--jct-tas-font);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
}

.jct-tas-cycle,
.jct-tas-by {
	font-size: .84em;
	color: var(--jct-tas-ink-3);
	padding-left: 10px;
	border-left: 1px solid var(--jct-tas-border);
}

.jct-tas-updated {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: .8em;
	color: var(--jct-tas-ink-3);
	padding: 3px 12px;
	border-radius: 999px;
	border: 1px solid var(--jct-tas-border);
	background: var(--jct-tas-surface);
}

.jct-tas-updated b {
	font-weight: 400;
	color: var(--jct-tas-ink-1);
}

.jct-tas-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.jct-tas-tgroup {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .84em;
	color: var(--jct-tas-ink-2);
}

.jct-tas-lbl { color: var(--jct-tas-ink-3); }

.jct-tas-seg {
	display: inline-flex;
	border: 1px solid var(--jct-tas-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--jct-tas-surface);
}

.jct-tas-segbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	padding: 5px 13px;
	color: var(--jct-tas-ink-2);
	cursor: pointer;
	border-right: 1px solid var(--jct-tas-border-2);
	margin: 0;
	user-select: none;
	white-space: nowrap;
}

.jct-tas-segbtn:last-child { border-right: 0; }
.jct-tas-segbtn:hover { color: var(--jct-tas-ink-1); }

/* 選中的按鈕反白。:has() 在這裡是區域性的，不影響其他元素。 */
.jct-tas-segbtn:has(input:checked) {
	background: var(--jct-tas-ink-1);
	color: var(--jct-tas-surface);
	font-weight: 500;
}

/* 鍵盤操作時也要看得出焦點在哪 */
.jct-tas-segbtn:focus-within {
	outline: 2px solid var(--jct-tas-taf-ink);
	outline-offset: -2px;
}

/* ── 表格 ─────────────────────────────────────── */

/* 首欄凍結（Excel 凍結窗格）的捲動容器。
 *
 * 凍結靠的是 .jct-tas-rh 上的 position: sticky，而 sticky 是相對於
 * 「最近的捲動祖先」定位的——那就是這一層。因此這條鏈上不能出現
 * 其他 overflow / filter / transform，否則 sticky 會失去參考點。
 *
 * 刻意不寫 -webkit-overflow-scrolling: touch：
 * 它在 iOS 13 之後已被忽略（慣性捲動本來就是預設），
 * 而在更早的 iOS 上它會建立獨立的捲動合成層，
 * 裡面的 position: sticky 反而會失效——正好會弄壞凍結欄。 */
.jct-tas-scroller {
	overflow-x: auto;
	background: var(--jct-tas-surface);
	border: 1px solid var(--jct-tas-border);
	border-radius: 10px;
}

.jct-tas-stack {
	width: max-content;
	min-width: 100%;
}

/* 畫面外的機場區塊不參與版面計算。
 *
 * 一份表格有二十幾個機場、上萬個節點，但首屏只看得到一兩個。
 * 實測（Pixel 9 與桌機 Edge）重排一次整份表格要 **30 毫秒**——掉兩個影格；
 * 加上這一段之後是 **0.6 毫秒**。
 *
 * 兩個軸都要給值，這是踩過才知道的：
 *
 * contain-intrinsic-size 只寫一個長度時，**寬和高都會套用那個值**。
 * 只給高度的話，畫面外的區塊會被當成兩百多 px 寬（真實一千五百多），
 * .jct-tas-stack 跟著塌，**橫向捲動空間直接歸零**——而橫向捲動正是
 * 看第四、五天的方式，凍結欄也因此沒有東西可以釘。
 *
 * 寬度用算的而不是寫死：表格的自然寬度就是 railw + 格數 × colw，
 * 三種字級與兩個斷點實測全部吻合（1516／1314／1843／1258 一個不差）。
 * 格數由 PHP 以行內變數傳進來，因為它隨天數 3／4／5 變動。
 *
 * 高度用估的：它是七列各自字級與 padding 的總和，寫成 calc 又長又脆。
 * auto 這個關鍵字的意思是「畫過一次之後改用真實高度」，
 * 所以估值只影響還沒被捲到的部分。實測誤差 0.14%～0.24%。 */
.jct-tas-aptblock {
	content-visibility: auto;
	contain-intrinsic-size:
		auto calc(var(--jct-tas-railw) + var(--jct-tas-slots, 48) * var(--jct-tas-colw))
		auto var(--jct-tas-ih, 270px);
}

/* 列印時要整份畫出來。
 *
 * content-visibility: auto 的內容在「與使用者無關」時會被跳過，
 * 瀏覽器對搜尋與列印通常會強制渲染，但那是實作行為不是保證——
 * 而列印少印十幾個機場是不會有人當場發現的那種錯。 */
@media print {
	.jct-tas-aptblock { content-visibility: visible; }
}

.jct-tas-aptblock { border-top: 1px solid var(--jct-tas-border); }
.jct-tas-aptblock:first-child { border-top: 0; }

table.jct-tas-grid {
	border-collapse: separate;
	border-spacing: 0;
	width: max-content;
	table-layout: fixed;
	margin: 0;
	font-family: var(--jct-tas-font);
}

table.jct-tas-grid th,
table.jct-tas-grid td {
	/* 欄位窄，數字微收字距，讓破百的三位數陣風也塞得下 */
	letter-spacing: -.02em;
	border-right: 1px solid var(--jct-tas-border-2);
	border-bottom: 1px solid var(--jct-tas-border-2);
	padding: var(--jct-tas-pad-y) 0;
	text-align: center;
	overflow: hidden;
	line-height: 1.25;
	font-size: var(--jct-tas-fs-num);
	font-weight: 400;
	color: var(--jct-tas-ink-1);
}

/* colgroup 帶明確寬度，欄寬才不會被任何儲存格內容撐開 */
table.jct-tas-grid col { width: var(--jct-tas-colw); }
table.jct-tas-grid col.jct-tas-rail { width: var(--jct-tas-railw); }

table.jct-tas-grid th.jct-tas-rh,
table.jct-tas-grid td.jct-tas-rh {
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--jct-tas-surface);
	text-align: left;
	padding-left: 6px;
	padding-right: 4px;

	/* 全形標點改用實際墨寬。
	 *
	 * 「飛機起降限制（側風）」的兩個全形括號各佔一個 em 框，
	 * 但墨跡只在框的一半，右側那截空白看起來就像多留了間距。
	 * palt 讓標點依實際字面寬度排版，這一列因此省下約 1 em。
	 *
	 * 萬一字型不支援 palt（我們載入的 Noto Sans TC 支援），
	 * 溢出的正好是括號那半格空白，被裁掉也看不出來。 */
	font-feature-settings: "palt";
	font-kerning: normal;
	border-right: 1px solid var(--jct-tas-border);
	font-size: var(--jct-tas-fs-lbl);
	font-weight: 400;
	color: var(--jct-tas-ink-2);
	white-space: nowrap;
}

tr.jct-tas-hdr th {
	background: var(--jct-tas-surface-2);
	border-bottom: 1px solid var(--jct-tas-border);
	padding-top: calc(var(--jct-tas-pad-y) + 3px);
	padding-bottom: calc(var(--jct-tas-pad-y) + 3px);
}

tr.jct-tas-hdr th.jct-tas-rh {
	background: var(--jct-tas-surface-2);
	font-weight: 700;
	color: var(--jct-tas-ink-1);
	font-size: calc(var(--jct-tas-fs-lbl) + 2px);
}

.jct-tas-code {
	font-size: calc(var(--jct-tas-fs-lbl) - 1px);
	color: var(--jct-tas-ink-3);
	letter-spacing: .08em;
	font-weight: 400;
	margin-left: 7px;
}

tr.jct-tas-hdr th.jct-tas-dh {
	text-align: left;
	padding-left: 10px;
	font-size: var(--jct-tas-fs-day);
	font-weight: 700;
	color: var(--jct-tas-ink-1);
	border-left: 1px solid var(--jct-tas-axis);
}

tr.jct-tas-hours th {
	font-size: var(--jct-tas-fs-hour);
	color: var(--jct-tas-ink-2);
	font-weight: 400;
	background: var(--jct-tas-surface-2);
	border-bottom: 1px solid var(--jct-tas-border);
}

tr.jct-tas-hours th.jct-tas-rh {
	background: var(--jct-tas-surface-2);
	color: var(--jct-tas-ink-3);
	font-size: calc(var(--jct-tas-fs-lbl) - 2px);
}

/* 關注時段色帶 */
/* 關注時段與燈號列同高。
 *
 * 各列的高度其實是被首欄標籤撐起來的（fs-lbl × line-height ＋ padding），
 * 這一列先前把 padding 歸零又壓了一個固定高度，才變成一條細帶。
 * 拿掉那兩個覆寫，改用跟其他列相同的 padding，高度就自然對齊了；
 * height 再明寫一次圖示尺寸，確保沒有標籤時也不會塌下去。
 *
 * border-right 仍然保持 0——連續的關注時段要串成一整條色帶，
 * 中間不該被格線切斷。 */
tr.jct-tas-focus td {
	padding: var(--jct-tas-pad-y) 0;
	height: var(--jct-tas-icon);
	border-right: 0;
	border-bottom: 1px solid var(--jct-tas-border);
}

tr.jct-tas-focus td.jct-tas-rh {
	border-right: 1px solid var(--jct-tas-border);
}

td.jct-tas-fc-crit { background: var(--jct-tas-crit); }
td.jct-tas-fc-warn { background: var(--jct-tas-warn); }

/* 「已過去」灰帶。這一列因此同時是時間軸：灰色到哪裡，現在就在哪裡。
   標籤直接寫在帶子上——圖例已經移除，它得自己說明自己。 */
td.jct-tas-fc-past {
	background: var(--jct-tas-past-strip);
	padding: 0 8px;
	text-align: right;
	border-right: 1px solid var(--jct-tas-border);
}

td.jct-tas-fc-past span {
	font-size: calc(var(--jct-tas-fs-lbl) - 2px);

	/* 這個標籤是坐在灰帶上而不是白底上，用 --jct-tas-past-ink（為白底挑的）
	   只有 4.36:1，差一點就到 AA。這裡單獨壓深一階。 */
	color: #555b63;
	white-space: nowrap;
	letter-spacing: .02em;
}

/* 直線只留兩種，而且分層：
 *
 * 日界線是「結構性格線」——細而淡，讀起來是背景的刻度；
 * 來源分界線是「唯一的語意線」——粗而藍，標示 TAF 與模式的真正分界。
 *
 * 原本的現在線已移除：關注時段那列的灰帶邊緣就是那條界線，
 * 少一個要解讀的符號，整張表更乾淨。 */
.jct-tas-dstart { border-left: 1px solid var(--jct-tas-axis); }
.jct-tas-srcedge { box-shadow: inset 2px 0 0 var(--jct-tas-taf-ink); }

/* ── 顯示方式：燈號 / 文字 ────────────────────── */

/* 兩種列都在 HTML 裡，切換只是顯示與隱藏。
 *
 * 兩者互斥：選了時間帶就換掉燈號列，不是疊在一起。
 * 同一件事只用一種方式呈現，讀的人不必分心比對兩列。
 *
 * colspan 在 table-layout: fixed 下仍然依 colgroup 決定寬度，
 * 因此時間帶的長度會精準對齊它涵蓋的時段。 */
tr.jct-tas-barrow { display: none; }

.jct-tas-front:has(.jct-tas-md-bar:checked) tr.jct-tas-iconrow { display: none; }
.jct-tas-front:has(.jct-tas-md-bar:checked) tr.jct-tas-barrow { display: table-row; }

td.jct-tas-barcell {
	padding: 2px 1px;
	border-right: 0;
}

.jct-tas-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 100%;
	min-height: var(--jct-tas-icon);
	padding: 1px 4px;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: calc(var(--jct-tas-fs-lbl) - 1px);
	line-height: 1.2;

	/* 塞不下就裁掉，不換行也不撐開欄寬。
	   完整內容在 title，游標停留就看得到。 */
	overflow: hidden;
	white-space: nowrap;
}

.jct-tas-barword { font-weight: 700; }

.jct-tas-bar-good {
	background: color-mix(in oklab, var(--jct-tas-good) 10%, var(--jct-tas-surface));
	border-color: color-mix(in oklab, var(--jct-tas-good) 30%, transparent);
	color: color-mix(in oklab, var(--jct-tas-good) 75%, #000);
}

.jct-tas-bar-warn {
	background: color-mix(in oklab, var(--jct-tas-warn) 24%, var(--jct-tas-surface));
	border-color: color-mix(in oklab, var(--jct-tas-warn) 55%, transparent);
	color: var(--jct-tas-warn-line);
}

/* 超限用實心紅底反白，是這張表唯一需要一眼跳出來的狀態 */
.jct-tas-bar-crit {
	background: var(--jct-tas-crit);
	border-color: var(--jct-tas-crit);
	color: #fff;
}


.jct-tas-bar-past {
	background: var(--jct-tas-surface-2);
	border-color: var(--jct-tas-border-2);
	color: var(--jct-tas-ink-3);
}

.jct-tas-bar-none {
	background: var(--jct-tas-muted-band);
	border-color: var(--jct-tas-border-2);
	color: var(--jct-tas-ink-3);
}


/* ── 燈號圖示 ─────────────────────────────────── */

/* 圖示是畫出來的，不是寫在 HTML 裡的。
 *
 * 先前每一格內嵌一個 <svg>＋一個形狀＝兩個 DOM 節點、約 135 bytes。
 * 一份 21 機場的表格有三千多個，佔掉整份 HTML 的一半、DOM 節點的四成四。
 * 那個 svg 是 aria-hidden 的純裝飾，無障礙名稱來自格子的 title 屬性——
 * 所以移到 CSS 不會少掉任何資訊，只少掉節點。
 *
 * 用 mask 而不是 background-image：形狀放在遮罩裡、顏色仍然由
 * background-color 決定，於是顏色可以繼續用 --jct-tas-good 這些變數，
 * 不必把色碼烤進 data URI（烤進去就會變成同一個顏色有兩個出處）。
 *
 * print-color-adjust 是必要的：瀏覽器預設不列印背景，
 * 沒有這一行的話圖示在列印時會整片消失。 */
.jct-tas-icon::before,
.jct-tas-bar::before {
	content: "";
	display: block;
	width: var(--jct-tas-icon);
	height: var(--jct-tas-icon);
	margin: 0 auto;
	background-color: var(--jct-tas-ic-ink, currentColor);
	opacity: var(--jct-tas-ic-fade, 1);
	-webkit-mask: var(--jct-tas-ic-shape) center / contain no-repeat;
	mask: var(--jct-tas-ic-shape) center / contain no-repeat;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.jct-tas-s-good,
.jct-tas-bar-good {
	--jct-tas-ic-ink: var(--jct-tas-good);
	--jct-tas-ic-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='29'/%3E%3C/svg%3E");
}

/* 警戒是唯一的兩色圖示：橘色實心三角形＋深橘外框。
 *
 * 一個遮罩只能有一個顏色，所以外框由 ::after 疊上去。
 * 疊而不是併成單色，是因為那圈深色外框是為了在淺色底上撐出對比，
 * 併掉之後在白底上會糊掉。 */
.jct-tas-s-warn,
.jct-tas-bar-warn {
	--jct-tas-ic-ink: var(--jct-tas-warn);
	--jct-tas-ic-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,12 92,85 8,85'/%3E%3C/svg%3E");
	position: relative;
}

.jct-tas-s-warn::after,
.jct-tas-bar-warn::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--jct-tas-icon);
	height: var(--jct-tas-icon);
	background-color: var(--jct-tas-warn-line);
	-webkit-mask: var(--jct-tas-ic-outline) center / contain no-repeat;
	mask: var(--jct-tas-ic-outline) center / contain no-repeat;
	--jct-tas-ic-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,12 92,85 8,85' fill='none' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	pointer-events: none;
}

.jct-tas-bar-warn::after {
	width: calc(var(--jct-tas-icon) * .72);
	height: calc(var(--jct-tas-icon) * .72);
	inset: 0 auto 0 0;
}

.jct-tas-s-crit,
.jct-tas-bar-crit {
	--jct-tas-ic-ink: var(--jct-tas-crit);
	--jct-tas-ic-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 24 L76 76 M76 24 L24 76' fill='none' stroke='%23000' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 已過去：灰色橫線。刻意不用綠色系，避免被誤讀成「沒問題」 */
.jct-tas-s-past,
.jct-tas-bar-past {
	--jct-tas-ic-ink: var(--jct-tas-ink-3);
	--jct-tas-ic-fade: .55;
	--jct-tas-ic-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M26 50 L74 50' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 無資料：虛線空心圓，表示「不知道」 */
.jct-tas-s-none,
.jct-tas-bar-none {
	--jct-tas-ic-ink: var(--jct-tas-ink-3);
	--jct-tas-ic-fade: .45;
	--jct-tas-ic-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='24' fill='none' stroke='%23000' stroke-width='8' stroke-dasharray='6 7'/%3E%3C/svg%3E");
}

/* 以下兩段必須排在上面所有狀態定義之後。
 *
 * 它們是覆寫，權重又相同——排在前面的話會被後面的通則蓋掉，
 * 而且症狀很安靜：長條裡的圖示變成格子版的大小、紅底上的叉叉是紅的看不見。 */

/* 條裡的圖示比格子版小一點，讓文字當主角。
 *
 * margin 必須歸零：格子版為了置中而帶了 margin: 0 auto，
 * 但在 flex 容器裡 auto 邊界會吸收掉所有剩餘空間——
 * 圖示被推到中間、文字被推到最右，兩者中間空一大段。 */
.jct-tas-bar::before {
	width: calc(var(--jct-tas-icon) * .72);
	height: calc(var(--jct-tas-icon) * .72);
	margin: 0;
	flex: none;
}

/* 紅底長條上的叉叉要反白才看得見。 */
.jct-tas-bar-crit { --jct-tas-ic-ink: #fff; }

/* ── 資料列 ───────────────────────────────────── */

td.jct-tas-over { font-weight: 700; color: var(--jct-tas-crit-ink); }
td.jct-tas-modelval { color: var(--jct-tas-ink-3); font-weight: 400; }
/* 未來但沒有資料 → 斜紋，表示「不知道」。
   已經過去而沒有資料 → 不鋪斜紋，讓整欄的灰底透出來就好，
   否則過去那一段會被兩種紋理切得很碎。 */
td.jct-tas-none { background: var(--jct-tas-muted-band); }

/* 已過去的時段——用「背景退後」而不是「前景淡化」。
 *
 * 先前是 opacity: .42，那條路走不通：實測一般文字只剩 2.72:1，
 * 遠低於 WCAG AA 的 4.5:1；而要靠透明度達標得拉到 .60，
 * 那時又幾乎看不出淡化了。透明度會同時削弱「想讓它退後的東西」
 * 和「仍然需要讀的東西」，兩個目標卡在同一個旋鈕上。
 *
 * 改成：整欄鋪淺灰底（見 col.jct-tas-past-col），前景給明確的灰色。
 * #646a73 對白底 5.45:1，過 AA；而灰底只有 4% 濃度，
 * 文字在它上面仍有 17:1，讀起來毫無代價。 */
.jct-tas-elapsed { color: var(--jct-tas-past-ink); }

/* 圖示去彩而不降透明度——✕ ● ▲ 靠形狀就分得出來，
   不需要靠顏色，因此可以整組轉灰，與現在的紅黃綠徹底分開。 */
.jct-tas-elapsed::before,
.jct-tas-elapsed .jct-tas-bar::before { filter: grayscale(1); opacity: .75; }

/* 過去的欄位：一整片連續的灰，邊界一眼可見。
   優先於警示底色——已經過去的警示不再是決策依據。 */
col.jct-tas-past-col { background: var(--jct-tas-past-band); }

col.jct-tas-hz-crit { background: color-mix(in oklab, var(--jct-tas-crit) 8%, transparent); }
col.jct-tas-hz-warn { background: color-mix(in oklab, var(--jct-tas-warn) 14%, transparent); }

tr.jct-tas-src td {
	padding: var(--jct-tas-pad-y) 9px;
	font-size: calc(var(--jct-tas-fs-lbl) - 1px);
	white-space: nowrap;
}

td.jct-tas-src-taf { background: var(--jct-tas-taf-band); color: var(--jct-tas-ink-1); text-align: right; }
td.jct-tas-src-mod { background: var(--jct-tas-mod-band); color: var(--jct-tas-ink-1); text-align: left; }
tr.jct-tas-src td.jct-tas-full,
tr.jct-tas-src td.jct-tas-rh { text-align: left; }

/* ── 其餘機場目前正常 ─────────────────────────── */

/* 表格結尾那一行。它是背景資訊，不該與燈號搶注意力——
   小字、灰色、不加框，讀的人掃過去找到自己的三碼就夠了。

   刻意放在 .jct-tas-scroller 外面：橫向捲動表格時它不該跟著跑掉，
   而且它本來就不需要跟著表格的欄寬。 */
.jct-tas-normal {
	margin: 10px 2px 0;
	font-family: var(--jct-tas-font);
	font-size: 12px;
	line-height: 1.9;
	color: var(--jct-tas-ink-3, #8a9099);
}

/* 三碼用等寬數字與稍寬的字距，一長串才不會黏成一團。 */
.jct-tas-normal-codes {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	word-spacing: 0.15em;
}

/* 版本標記。刻意比機場代號更淡、更小——
   它是給除錯看的，不該跟正文搶注意力。 */
.jct-tas-ver {
	margin-left: .7em;
	font-size: .85em;
	opacity: .55;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* ── 空狀態與錯誤 ─────────────────────────────── */

.jct-tas-front-empty,
.jct-tas-front-error {
	padding: 16px 18px;
	border: 1px solid var(--jct-tas-border);
	border-radius: 10px;
	background: var(--jct-tas-surface-2);
	color: var(--jct-tas-ink-2);
}

.jct-tas-front-error { border-left: 4px solid var(--jct-tas-crit); }

.jct-tas-front-empty p:last-child,
.jct-tas-front-error p:last-child { margin-bottom: 0; }

/* ── 小螢幕 ───────────────────────────────────── */

@media (max-width: 782px) {
	.jct-tas-front {
		--jct-tas-colw: 20px;
		--jct-tas-railw: 114px;
		/* 只有預設字級會被這個斷點改到——「中」與「特大」有自己的
		   :has() 規則，權重比這裡高，兩個斷點的高度因此相同。
		   實測也是如此（中 223／特大 324，桌機手機一致）。 */
		--jct-tas-ih: 242px;
		--jct-tas-fs-num: 12px;
		--jct-tas-fs-lbl: 11px;
		--jct-tas-fs-day: 13px;
		--jct-tas-fs-hour: 10.5px;
		--jct-tas-icon: 13px;
	}

	.jct-tas-masthead { gap: 8px 12px; }
	.jct-tas-controls { width: 100%; }
}