/* ==========================================================================
   桃園市公車動態系統 — 元件樣式

   版本：v4.13
   相依：taoyuan-ibus-tokens.css v4.13
   （在 DevTools 檢查 --ty-tokens-version 應為 "v4.9"，
     版本不符時色階與對比度標註會對不上）

   ！載入順序：本檔必須排在 bootstrap.min.css 之後。
   目前專案順序為 base.css → tao.css → bootstrap.min.css，
   因此本檔加在 bootstrap.min.css 下一行。

   ！命名：全部以 .ty- 前綴，避開 Bootstrap 與專案既有 class。
   本檔不定義任何無前綴的通用 class（.card / .nav / .btn / .container
   / .input / .list / .select / .search 皆已被專案佔用）。

   本檔只在套上 .ty- class 的元素生效，未套用的地方畫面零變化。
   ========================================================================== */


/* --------------------------------------------------------------------------
   到站狀態標籤
   取代現況的 Bootstrap .bg-success / .bg-primary 與 .time-status
   -------------------------------------------------------------------------- */

.ty-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 76px;
  padding: 4px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

.ty-status--arriving  { background: var(--bus-arriving-bg);  color: var(--bus-arriving-text);
                        border-color: var(--bus-arriving-border); }
.ty-status--soon      { background: var(--bus-soon-bg);      color: var(--bus-soon-text);
                        border-color: var(--bus-soon-border); }
.ty-status--mid       { background: var(--bus-mid-bg);       color: var(--bus-mid-text);
                        border-color: var(--bus-mid-border); }
.ty-status--far       { background: var(--bus-far-bg);       color: var(--bus-far-text);
                        border-color: var(--bus-far-border);
                        font-weight: var(--weight-regular); }
.ty-status--scheduled { background: var(--bus-scheduled-bg); color: var(--bus-scheduled-text);
                        border-color: var(--bus-scheduled-border); }
.ty-status--ended     { background: var(--bus-ended-bg);     color: var(--bus-ended-text);
                        border-color: var(--bus-ended-border); }
.ty-status--inactive  { background: var(--bus-inactive-bg);  color: var(--bus-inactive-text);
                        border-color: var(--bus-inactive-border);
                        font-weight: var(--weight-regular); }

/* 非色彩線索：脈動點。色覺障礙者靠動態而非顏色辨識 */
.ty-status__pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* 脈動只給「進站中」。「即將進站」一次會出現五到十個，
     若同時脈動，動態量會比色塊更吵，而且動態失去「車就在眼前」的意義。 */
  .ty-status--arriving .ty-status__pulse {
    animation: ty-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes ty-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* 2026-09-09 依機關指示移除時刻表的時鐘圖示。
   ★ 原本它是**非色彩線索**：讓色覺障礙者不靠顏色也能分辨「這是表定時刻」
     與「這是即時預估」。移除後兩者只剩底色可區分
     （--bus-scheduled-bg vs --bus-mid-bg / --bus-far-bg）。
     螢幕閱讀器不受影響——那條資訊來自 aria-label（busStatusAria()
     會唸「時刻表預定 11 時 05 分發車」），與圖示無關。
   要恢復的話把下面這段解開即可。
.ty-status--scheduled::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
*/


/* --------------------------------------------------------------------------
   站牌列
   -------------------------------------------------------------------------- */

.ty-stops                     { background: var(--bg-surface); }
.ty-stops .ty-stop-row        { border-bottom: 1px solid var(--border-subtle); }
.ty-stops .ty-stop-row:last-child { border-bottom: none; }

.ty-stop-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
}

.ty-stop-row:hover { background: var(--bg-hover); }

.ty-stop-row__seq  { min-width: 24px; color: var(--text-muted);
                     font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ty-stop-row__name { flex: 1; color: var(--text-primary); font-size: var(--text-base); }

.ty-stop-row--current .ty-stop-row__name { font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   表格版站牌列

   現況站名貼在列的上緣、時間與愛心在中間，整列看起來是歪的。
   原因是 td 的 vertical-align 被覆寫，或站名外層元素帶有 margin。
   列高偏大（約 76px）本身不是主因 —— 文字置中之後同樣高度不會顯得空。
   -------------------------------------------------------------------------- */

.ty-stops table { width: 100%; border-collapse: collapse; }

.ty-stops th,
.ty-stops td {
  vertical-align: middle;          /* 關鍵修正 */
  padding: var(--space-2) var(--space-3);
}

/* 序號欄是 <th>，因此用 > * 而非 td。
   Bootstrap 的 .table>:not(caption)>*>* 已給所有 th/td 下框線，
   此處只是統一顏色；但最後一列的清除若只寫 td，
   會清不到左側那個 <th>，最後一列左邊會多出一截線。 */
.ty-stops tbody tr > * { border-bottom: 1px solid var(--border-subtle); }
.ty-stops tbody tr:last-child > * { border-bottom: none; }

/* 表頭：底色、較重的下框線、較小的字級，三個線索一起做。
   單靠底色不夠 —— gray-50 對白只有 1.09:1 的亮度差。
   sticky 是因為單一路線可達三十餘站，捲到中段時表頭已看不見。

   ！表頭必須是 <th scope="col">，不可用 <td>。
   除了本段樣式選不到之外，讀屏也是靠 th 把資料格關聯到欄位名的。

   ！不設 text-align。原本的 text-align:left 會蓋掉 Bootstrap 的
   .text-center / .text-start，讓圖示欄與資料列對不齊。對齊交給既有 utility。

   ！top 吃 --site-hdr（由 route_common.js 量測站台頁首高度後寫入）。
   .site-header 本身是 sticky top:0 z-index:100，留 0 會被壓在底下。
   z-index 取 90，低於頁首。
   此處刻意不寫 position —— 下方 ≤768px 會改回 static，
   static 時 top 不生效，兩邊不會打架。 */
.ty-stops thead th {
  position: sticky;
  top: var(--site-hdr, 0px);
  z-index: 90;
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: .02em;
  border-bottom: 2px solid var(--table-head-border);
}

/* sticky 只在桌機生效。
   若表格被包在 overflow-x: auto 的容器內，position: sticky 會相對該容器計算，
   而非視窗 —— 表頭會靜默失效，畫面看起來正常但表頭不會固定。
   窄螢幕多半需要橫向捲動，因此直接關閉，不製造「以為有卻沒有」的狀態。
   若站台有固定頁首，top 需改為該頁首高度，不可留 0。 */
@media (max-width: 768px) {
  .ty-stops thead th { position: static; }
}

/* 站名外層若為 p / h4 等帶預設 margin 的元素，一律歸零 */
.ty-stops td > p,
.ty-stops td > h1, .ty-stops td > h2, .ty-stops td > h3,
.ty-stops td > h4, .ty-stops td > h5, .ty-stops td > h6 {
  margin: 0;
  line-height: 1.4;
}

/* 列高：44px 是可點擊下限，56px 是舒適值。
   76px 在手機上會少掉一到兩個站牌，掃描成本變高 */
.ty-stops tbody tr { height: 56px; }

/* 序號與站名 */
.ty-stops__seq  { width: 40px; text-align: center; color: var(--text-muted);
                  font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ty-stops__name { color: var(--text-primary); font-size: var(--text-base); }

/* 車牌欄（保留，機關決定）
   多數列為空值。空儲存格不留白，補一個置中的破折號並標示為無資料，
   避免讀屏使用者聽到一個沒有內容的儲存格。 */
.ty-stops__plate {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ty-stops__plate:empty::before {
  content: "—";
  color: var(--text-muted);
}

/* 表頭圖示一律單色，不使用彩色圖示 */
.ty-stops thead .ti { color: var(--text-secondary); }


/* 過渡期用：尚未替換 Bootstrap utility class 前，
   可先把這段套在到站表格外層容器，取得視覺效果而不動每一個模板。
   替換完成後整段刪除。 */
.ty-stops .bg-success,
.ty-stops .bg-primary {
  background-color: var(--bus-mid-bg) !important;
  color: var(--bus-mid-text) !important;
}


/* 密度緩解（選用）
   當一條路線同時有多台車、畫面出現大量實心色塊時，
   把這個 class 加在到站表格外層，實心 pill 會收窄並降低圓角，
   減輕整條直排色塊的壓迫感，但不改變任何狀態的語意或顏色。
   不得用降級狀態的方式解決密度問題 —— 每個狀態都是一台真實的車。 */
.ty-stops--dense .ty-status {
  min-width: 0;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--text-xs);
}


/* --------------------------------------------------------------------------
   首頁 Hero（v4.13 定案）

   結構取自 CI 手冊的章節分隔頁：整片粉紅色場，
   左半為純色平面、右半圖樣浮現，文字為白色。
   粉紅不刷淡成白色 —— 消失的是圖樣，不是底色。

   ！底色為 #D42D80，不是官方橫幅原色 #E65195。
   原色配白字只有 3.51:1，未達一般文字的 4.5:1。
   色相與飽和度未動，只降明度，白字提升到 4.68:1。
   簡報不受無障礙規範約束，網站要過標章則不行。

   ！文字必須落在左側純色平面內。
   圖樣區的淺色筆畫白字僅約 3.65:1，壓上去會不合格。
   -------------------------------------------------------------------------- */

.ty-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--hero-bg);          /* 圖檔未覆蓋處的銜接色，避免接縫 */
  background-image: url("../images/taoyuan-hero-flat-aa.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.ty-hero__inner {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  text-align: left;
}

/* 內容不得越過純色平面 */
.ty-hero__inner > * { max-width: 50%; }

/* 沿用 CI 原稿的小方塊裝飾 */
.ty-hero__marks {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.ty-hero__marks i {
  width: 8px;
  height: 8px;
  background: var(--tao-gray-0);
  display: block;
}
.ty-hero__marks i:nth-child(2) { margin-top: 8px; }
.ty-hero__marks i:nth-child(3) { margin-top: 16px; }

.ty-hero__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: .05em;
  color: var(--hero-text);
}

.ty-hero__lede {
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--hero-lede);
  max-width: 30ch;
}

/* 搜尋列：白底，內部文字用一般文字色，CTA 用 action */
.ty-hero__search {
  display: flex;
  max-width: 420px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}
.ty-hero__search input {
  flex: 1;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.ty-hero__search input::placeholder { color: var(--text-muted); }
.ty-hero__search button {
  min-height: var(--touch-target);
  padding: 0 var(--space-4);
  border: none;
  background: var(--action-bg);
  color: var(--action-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
}
.ty-hero__search button:hover { background: var(--action-bg-hover); }

/* 手機：把圖釘在左緣，讓整個視窗都落在純色平面上。
   不可用 center —— 那會把圖樣推到畫面中央，白字壓上去只剩 3.65:1。 */
@media (max-width: 768px) {
  .ty-hero { background-position: left center; }
  .ty-hero__inner > * { max-width: 100%; }
  .ty-hero__search { max-width: 100%; }
}

@media print {
  .ty-hero { background-image: none; background-color: transparent; }
  .ty-hero__title, .ty-hero__lede { color: var(--text-primary); }
  .ty-hero__marks { display: none; }
}


/* --------------------------------------------------------------------------
   首頁功能卡（定案）

   保留現有插畫，四個象限色也保留 —— 它們正好對應 CI 的
   魅力桃園／智慧科技／環保永續／婦幼友善，配色本身沒有問題。

   真正的問題是顏色沒有落腳點：四個小圖示浮在大片白卡片裡，
   讀起來是四顆散落的色點而不是一套系統。
   墊一塊該象限的極淡底色，顏色有了容器就會變成系統。

   ！卡片不加彩色頂邊。hero 已經是一整片粉紅色場，
   再加四條飽和頂邊會讓整頁失衡。
   -------------------------------------------------------------------------- */

.ty-feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;          /* 與 hero 共用同一條左軸線 */
}

.ty-feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.ty-feature-card--bus   .ty-feature-card__icon { background: var(--tao-pink-50);   color: var(--tao-pink-500); }
.ty-feature-card--news  .ty-feature-card__icon { background: var(--tao-blue-50);   color: var(--tao-blue-700); }
.ty-feature-card--fav   .ty-feature-card__icon { background: var(--tao-green-50);  color: var(--tao-green-700); }
.ty-feature-card--near  .ty-feature-card__icon { background: var(--tao-yellow-50); color: var(--tao-yellow-700); }

.ty-feature-card__title { margin: 0 0 var(--space-1); font-size: var(--text-base);
                          font-weight: var(--weight-medium); color: var(--text-primary); }
.ty-feature-card__body  { margin: 0; font-size: var(--text-sm);
                          line-height: var(--leading-base); color: var(--text-secondary); }


/* --------------------------------------------------------------------------
   我的最愛
   -------------------------------------------------------------------------- */

.ty-fav {
  width: var(--touch-target);
  height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fav-off);
  transition: color var(--dur-fast) var(--ease);
}

.ty-fav[aria-pressed="true"] { color: var(--fav-on); }
.ty-fav:hover                { color: var(--tao-pink-300); }


/* --------------------------------------------------------------------------
   分頁（依路線搜尋 / 路線清單 / 依景點搜尋）
   -------------------------------------------------------------------------- */

.ty-tab {
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-lg);
  cursor: pointer;
}

.ty-tab[aria-selected="true"] {
  color: var(--text-brand);
  border-bottom-color: var(--action-bg);
  font-weight: var(--weight-medium);
}


/* --------------------------------------------------------------------------
   路線標頭
   -------------------------------------------------------------------------- */

.ty-route-header {
  padding: var(--space-3) var(--space-4);
  background: var(--tao-gray-700);
  color: var(--tao-gray-0);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}


/* --------------------------------------------------------------------------
   路線類型標記
   國道客運、公路客運、市區公車、免費市民公車。
   描邊不實心，避免與到站狀態的實心色塊搶視覺。
   -------------------------------------------------------------------------- */

.ty-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.ty-tag--city    { color: var(--tao-pink-600); }
.ty-tag--freeway { color: var(--tao-blue-700); }
.ty-tag--highway { color: var(--tao-green-700); }
.ty-tag--free    { color: var(--tao-yellow-700); }


/* --------------------------------------------------------------------------
   搜尋框清除鈕
   取代現況的深色實心方塊按鈕
   -------------------------------------------------------------------------- */

.ty-search        { position: relative; }
.ty-search input  { padding-right: 44px; }

.ty-search__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.ty-search__clear:hover { color: var(--text-primary); background: var(--bg-hover); }


/* --------------------------------------------------------------------------
   載入 / 空 / 錯誤
   -------------------------------------------------------------------------- */

.ty-state        { padding: var(--space-6) var(--space-4); text-align: center;
                   color: var(--text-secondary); }
.ty-state__icon  { font-size: 32px; color: var(--text-muted); }
.ty-state__title { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-lg);
                   color: var(--text-primary); font-weight: var(--weight-medium); }
.ty-state__body  { margin: 0 0 var(--space-4); font-size: var(--text-sm); }

.ty-skeleton { background: var(--bg-subtle); border-radius: var(--radius-sm); height: 1em; }

@media (prefers-reduced-motion: no-preference) {
  .ty-skeleton { animation: ty-skeleton 1.4s ease-in-out infinite; }
}
@keyframes ty-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }


/* --------------------------------------------------------------------------
   跳至主要內容
   -------------------------------------------------------------------------- */

.ty-skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 2000;
  padding: var(--space-3) var(--space-4);
  background: var(--action-bg);
  color: var(--action-text);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease);
}
.ty-skip-link:focus { top: 0; color: var(--action-text); }


/* --------------------------------------------------------------------------
   焦點
   只作用於本次改版元件，避免動到全站既有焦點樣式
   -------------------------------------------------------------------------- */

.ty-status:focus-visible,
.ty-fav:focus-visible,
.ty-tab:focus-visible,
.ty-search__clear:focus-visible,
.ty-skip-link:focus-visible,
.ty-stop-row:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   列印（時刻表與票價頁）
   -------------------------------------------------------------------------- */

@media print {
  .ty-search__clear, .ty-fav, .ty-skip-link { display: none; }
  .ty-status {
    border: 1px solid #333;
    background: none !important;
    color: #000 !important;
  }
  .ty-status__pulse { display: none; }
}