/* 航線內容頁專用(2026-08-17)。legal.css 提供 hero/card/callout 的骨架,
   這裡只補資料表與長條圖 —— 全部走 tokens.css 的字級與間距階梯。 */
@import url("/tokens.css");

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

.dt { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.dt caption { caption-side: top; text-align: left; font-size: var(--fs-caption);
              color: var(--text-3); padding-bottom: var(--sp-3); line-height: var(--lh-body); }
.dt th, .dt td { padding: var(--sp-3) var(--sp-2); text-align: left;
                 border-bottom: 1px solid var(--border-1); vertical-align: baseline; }
.dt thead th { font-size: var(--fs-caption); font-weight: var(--fw-bold);
               color: var(--text-3); letter-spacing: .06em; white-space: nowrap; }
.dt tbody tr:last-child th, .dt tbody tr:last-child td { border-bottom: none; }
.dt tbody th { font-weight: var(--fw-semibold); color: var(--text-1); white-space: nowrap; }
.dt .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
           text-align: right; white-space: nowrap; }
.dt .dim { color: var(--text-3); font-size: var(--fs-compact); }
.dt .vd { font-weight: var(--fw-bold); }
/* 長條圖欄吃掉剩餘寬度,數字欄維持固定 —— 各列的長條才對得齊 */
.dt .barcell { width: 100%; padding-left: var(--sp-4); padding-right: var(--sp-4); }

.bar { display: block; height: 10px; border-radius: 999px;
       background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; }

.chip { display: inline-block; font-size: var(--fs-micro); font-weight: var(--fw-bold);
        color: #0a0a0b; background: var(--ac, #2ee59a); border-radius: var(--radius-sm);
        padding: 1px 6px; vertical-align: 2px; }

.statcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--sp-4); }
.stat { font-size: var(--fs-title-md); font-weight: var(--fw-bold); color: var(--text-1);
        font-variant-numeric: tabular-nums; }
.statlbl { font-size: var(--fs-caption); color: var(--text-3); margin-top: var(--sp-1); }

.cta { display: inline-flex; align-items: center; min-height: var(--control-h);
       padding: 0 var(--sp-5); border-radius: 999px; font-size: var(--fs-body);
       font-weight: var(--fw-bold); color: #0a0a0b; background: var(--ac, #2ee59a); }
.cta:hover { filter: brightness(1.08); }

@media (max-width: 680px) {
  /* 手機:長條圖那欄讓位。三欄硬塞會把價格擠到換行,而價格才是重點。 */
  .dt .barcell { display: none; }
  .dt th, .dt td { padding: var(--sp-3) var(--sp-1); }
  .statcard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statcard > div:nth-child(3) { grid-column: 1 / -1; }   /* 三格排兩欄末列會空半格 */
  .cta { width: 100%; justify-content: center; }
}

/* 航線互連清單。兩欄起跳 —— 一欄會拖得很長,三欄以上在手機會擠。 */
.peers { list-style: none; display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; }
.peers li { border-bottom: 1px solid var(--border-1); }
.peers a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-body);
           color: var(--text-1); min-height: var(--control-h); }
.peers a:hover { color: var(--ac, #2ee59a); }
/* legal.css 的 li::before 會在每一列左上角畫一個小圓點(法遵頁的條列樣式)。
   航線清單是連結列表不是條列說明,那個點只會變成雜訊 —— 關掉,並收回縮排。 */
.peers li::before { content: none; }
.peers li { padding-left: 0; }
/* 「看全部 N 條航線 →」是一般段落裡的連結,高度只有一行(手機實測 19px),
   低於 44px 觸控下限。視覺不變,只把可按範圍撐開。 */
#peers p a { display: inline-flex; align-items: center; min-height: var(--control-h); }