/* mtrflow — 港鐵指示牌風（SPEC-1 §7、§8、§9；設計 §7.1、§7.6）
 *
 * 一屏一站，固定 1024×600，四列加起來剛好 600px：
 *   紅橫帶 86px + 站 tab 34px + 主體 462px + footer 18px。
 *
 * renderStation() 產生 .station-head（紅帶）、.station-lines（主體）、
 * .board-foot（footer）；.board-main 與 .station 只是分組，用 display: contents
 * 把三塊交給 .board 的 grid 排位，令站 tab 可以夾在紅帶與主體之間。
 *
 * 行高與字級由 render.js 的 density() 以 inline style 帶入（該站方向行數決定），
 * 這份 CSS 只負責排列、顏色、字型與「每個倒數佔固定闊度」——數字由 3 變 10
 * 都不會推走左邊文字（AC-2、AC-7）。
 */

:root {
  --mtr-red: #C8102E;
  --ink: #191919;
  --grey: #6B6B6B;
  --light-grey: #9A9A9A;
  --hairline: #E2E2E2;
  --paper: #FFFFFF;
  --serif: "Noto Serif CJK HK", "Source Han Serif TC", "Songti TC", serif;
  --sans: "Noto Sans CJK HK", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #E9E9E9;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* 四列骨幹：86 + 34 + 462 + 18 = 600（設計 §7.6；AC-11 的 462px 可用高）。 */
.board {
  width: 1024px;
  height: 600px;
  display: grid;
  grid-template-rows: 86px 34px 462px 18px;
  grid-template-areas:
    "band"
    "tabs"
    "lines"
    "foot";
  overflow: hidden;
  background: var(--paper);
}

.board-main,
.station {
  display: contents;
}

/* --- 紅橫帶：站名（宋體 34px）+ 英文 17px；右側時鐘由 index.html 帶入 ---------- */

.station-head {
  grid-area: band;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 320px 0 32px; /* 右側留位給 .board-clock，兩者不重疊 */
  background: var(--mtr-red);
  color: #FFFFFF;
  overflow: hidden;
}

.station-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.04em;
}

.station-en {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.board-clock {
  grid-area: band;
  align-self: center;
  justify-self: end;
  margin-right: 24px;
  text-align: right;
  color: #FFFFFF;
  white-space: nowrap;
}

.clock-time {
  display: block;
  min-height: 30px; /* 未載入時不塌陷，紅帶高度不跳 */
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.clock-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

/* --- 站 tab：宋體 18px；當前站紅底白字（設計 §7.1） ----------------------------- */

.station-tabs {
  grid-area: tabs;
  display: flex;
  align-items: stretch;
  height: 34px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.tab {
  appearance: none;
  margin: 0;
  padding: 0 32px;
  min-width: 148px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 33px; /* 34px 減 1px 底線 */
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
}

.tab:hover {
  background: #F2F2F2;
}

.tab:focus-visible {
  outline: 2px solid var(--mtr-red);
  outline-offset: -4px;
}

.tab.is-active,
.tab[aria-current="true"] {
  background: var(--mtr-red);
  color: #FFFFFF;
}

.tab.is-active:hover,
.tab[aria-current="true"]:hover {
  background: var(--mtr-red);
}

/* --- 主體：每綫一組（6px 路綫色直條跨組高）＋ 方向行 ----------------------------- */

.station-lines {
  grid-area: lines;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  background: var(--paper);
  overflow: hidden;
}

.line-block {
  position: relative;
  flex: 0 0 auto;
  padding-left: 18px;
}

/* 直條在 .line-head 之內，但絕對定位於整個 .line-block，跨足綫名列與所有方向行。 */
.line-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--hairline);
}

.line-head {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.line-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px; /* fallback；density() 以 inline style 給 26/24/22 */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 綫名英文小字（設計 §7.1）：緊隨中文名之後、細而安靜；可以收縮省略，不撐爆該行。 */
.line-en {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--grey);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip {
  display: inline-block;
  padding: 1px 6px 2px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.chip-delay {
  border-radius: 2px;
  background: var(--mtr-red);
  color: #FFFFFF;
}

.line-rows {
  display: block;
}

/* 一個方向一行：月台號 → 往 目的地 → 右側班次數字；行高由 density() inline 帶入。 */
.row {
  display: flex;
  align-items: center;
  gap: 0 22px;
  width: 100%;
  padding: 0 8px 0 0;
  border-top: 1px solid var(--hairline);
  line-height: 1;
  white-space: nowrap;
}

.plat {
  flex: 0 0 auto;
  min-width: 72px;
  color: var(--grey);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.dest-group {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 0 10px;
  min-width: 0;
}

.dest {
  margin-right: auto;
  font-family: var(--serif);
  font-size: 26px; /* fallback；density() 以 inline style 給 26/24/21 */
  line-height: inherit;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* 固定闊度：min-width 以 ch（"0" 的闊度）計，1–2 位數字都佔同一格，數字變闊
 * 不會推走左邊的「往 目的地」。首班最大最深，之後縮細變淡（大小由 inline 帶入）。 */
.num {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 2.2ch;
  text-align: right;
  font-family: var(--sans);
  font-size: 26px; /* fallback；density() inline：首班 firstFs，其餘 destFs */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
  opacity: 0.62;
  white-space: nowrap;
}

.num-first {
  font-weight: 700;
  opacity: 1;
}

/* 每班確實到站時間（HH:MM）：跟在倒數旁邊，細、淡、固定闊度——倒數與時間都不會推走
 * 左邊文字（AC-2、AC-7）。字級由 render.js 依密度階梯 inline 帶入（~0.42 × destFs）。 */
.num-time {
  flex: 0 0 5.4ch;
  text-align: right;
  color: var(--light-grey);
  font-family: var(--sans);
  font-size: 11px; /* fallback；density() inline 帶入 */
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.empty {
  color: var(--light-grey);
  font-family: var(--serif);
  font-size: 22px; /* fallback；density() 以 inline style 給 destFs */
  letter-spacing: 0.06em;
}

/* 整綫狀態：status 0 的官方 message／暫無預測／未能連接港鐵資料（Task 5）。 */
.line-note {
  margin: 0;
  padding: 4px 0 6px;
  color: var(--grey);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/* --- footer：最後更新 · 12 秒後更新／已暫停（文案由 app.js 決定） ---------------- */

.board-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-top: 1px solid var(--hairline);
  color: var(--light-grey);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-foot.is-stale {
  color: var(--grey);
}

.board-foot.is-paused {
  color: var(--light-grey);
}