/* ── 台股每股頁共用頁首(twstock/stock/_head.html;canon › navigation › 台股每股頁的頁首)──
   總覽、K 線圖與每股模組頁同一份:左邊是誰(股名、代號,模組頁再接模組名)與收盤報價,右邊是選股框＋星號,
   模組頁在它們下面多一列資料日＋區間鈕。全部掛在 .tw-head 底下,各頁 CSS 的 .pagehead／.titlewrap／.toolbar
   舊規則壓不過來。報價只由 SSR 畫,這裡的高度都跟資料無關。 */
.pagehead.tw-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.tw-head .titlewrap { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.tw-head .h1row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-12); row-gap: var(--space-2); min-width: 0; }
/* flex 列:模板裡三段之間的空白是給讀屏與爬蟲的,不佔寬 */
.tw-head .titlewrap h1 { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-12); margin: 0; min-width: 0; color: var(--ink); }
.tw-head h1 .who { display: inline-flex; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.tw-head h1 .code { margin-left: var(--space-6); font-weight: 500; color: var(--ink-3); }
.tw-head .px { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-12); row-gap: var(--space-2); margin-top: var(--space-6); min-height: 35px; }   /* 28 × 1.25:沒抓到價格時列高照留 */
.tw-head .px .last { font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.tw-head .px .last.na { color: var(--ink-disabled); }
.tw-head .px .chg { font-size: 15px; color: var(--ink-2); }
.tw-head .px .chg.up { color: var(--trend-up-text); }
.tw-head .px .chg.dn { color: var(--trend-down-text); }
.tw-head .px .stamp { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.tw-head .headtools { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-8); min-width: 0; }

/* Select trigger (canon › Input › Select 觸發鈕):外觀 36,熱區 44(邊框在 pseudo 的 padding box 外) */
.tw-head .picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 36px;
  width: 280px;
  padding: 0 var(--space-12) 0 var(--space-32);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-xs);
  background: var(--surface-field) url("/static/img/lucide/search.greyMedium.svg") no-repeat var(--space-12) center / 16px;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.tw-head .picker::before { content: ""; position: absolute; inset: -5px -1px; }
.tw-head .picker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark-mode .tw-head .picker { background-image: url("/static/img/lucide/search.greyMediumDark.svg"); }
/* 星號跟選股框同高 36,熱區補到 44(1px 邊框不在 padding box 裡:34 + 10) */
.tw-head .tw-stockrow .tw-star { height: 36px; }
.tw-head .tw-stockrow .tw-star::before { inset: -5px -1px; }

.tw-head .toolrow { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-8) var(--space-12); min-width: 0; }
.tw-head #head_meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.tw-head #head_meta:empty { display: none; }

@media (hover: hover) {
  .tw-head .picker:hover { border-color: var(--ink-3); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-head .picker { transition: none; }
}

/* ≥1301 兩組並排:左組吃剩下的寬、長模組名在 h1 裡折行,工具組固定留右側;左組靠上,
   換到沒有區間鈕的頁(總覽、K 線、新聞)股名與價格的位置不跳 */
@media (min-width: 1301px) {
  .tw-head .titlewrap { flex: 1 1 0; min-width: 0; align-self: flex-start; }
  .tw-head > .headtools,
  .tw-head > .tw-stockrow { flex: none; }
}

/* ≤1300 側欄收成頁名鈕,模組名由它講;H1 留股名與代號,不整個藏 */
@media (max-width: 1300px) {
  /* 視覺隱藏、留在無障礙樹與大綱裡(canon:H1＝股名＋代號＋模組名);寫法同 .tw_wall_sr／.rt-live */
  .tw-head h1 .mod { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* 內容欄 588:工具組一定掉到報價下面那一列,整組靠左 */
  .tw-head .headtools { align-items: flex-start; }
  .tw-head .toolrow { justify-content: flex-start; }
}

@media (max-width: 768px) {
  .pagehead.tw-head { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .tw-head .headtools { align-items: stretch; }
  /* 滿寬一列;有星號時靠 flex shrink 讓出寬度(button 的 width: auto 是縮到內容,所以寫 100%) */
  .tw-head .picker { width: 100%; min-width: 0; height: 44px; }
  .tw-head .picker::before { display: none; }
  .tw-head .tw-stockrow .tw-star { width: 44px; height: 44px; }
  .tw-head .tw-stockrow .tw-star::before { inset: 0; }
  .tw-head .toolrow { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-8); width: 100%; }
  .tw-head #head_meta { white-space: normal; }
  /* 資料日要等登入後的資料才有的頁:先留一行,寫進來時下面不位移 */
  .tw-head #head_meta[data-hold]:empty { display: block; min-height: 18px; }
  .tw-head .segment { width: 100%; }
  .tw-head .segment > button { flex: 1; }
}