/* ── 台股自選股的共用件:星號鈕、選股鈕＋星號那一列、toast(designer tw-watchlist spec A §3)。
   Terminal register,雙態走角色變數。自選股頁自己的版面在 twstock/watchlist.css。 ── */

/* 星號鈕 = Outlined control:30 高、熱區 44(透明 ::before),填滿與否表達狀態,墨色不變不用橘 */
.tw-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  flex: none;
  height: 30px;
  padding: 0 var(--space-12) 0 var(--space-8);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.tw-star::before { content: ""; position: absolute; inset: -7px -1px; }
.tw-star .ico { width: 16px; height: 16px; }
.tw-star .s-on,
.tw-star[data-on] .s-off { display: none; }
.tw-star[data-on] .s-on { display: inline-block; }
/* 兩段字疊在同一格:鈕寬取長的那個,切換時不跳 */
.tw-star .lab { display: inline-grid; }
.tw-star .lab > span { grid-area: 1 / 1; }
.tw-star .l-on,
.tw-star[data-on] .l-off { visibility: hidden; }
.tw-star[data-on] .l-on { visibility: visible; }
.tw-star[aria-busy="true"] { cursor: progress; }

/* 個股總覽／K 線:股名那一行,星號在 h1 外 */
.h1row { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.h1row h1 { min-width: 0; }

/* 每股頁工具列:選股鈕後面接星號,兩顆永遠同一列、同高(選股鈕桌機 32、≤768 44) */
.tw-stockrow { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.tw-stockrow .tw-star { height: 32px; }
.tw-stockrow .tw-star::before { inset: -6px -1px; }

@media (hover: hover) {
  .tw-star:hover { background: var(--surface-muted); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-star { transition: none; }
}

@media (max-width: 768px) {
  .tw-star { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .tw-star::before { inset: -4px -1px; }
  .tw-star .lab { display: none; }
  .tw-stockrow .tw-star { width: 44px; height: 44px; }
  .tw-stockrow .tw-star::before { inset: 0; }
  /* 工具列在手機是直排滿寬:選股鈕吃掉星號以外的寬度 */
  .tw-stockrow #btn_stock_select.ctrl.stock { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* toast:只給暫態(加入成功、沒存到);底部置中,6 秒收,滑鼠或焦點停著就等。
   容器常駐(role="status" 要一直在輔具樹裡):收合只用 opacity＋pointer-events,進場 motion-base、離場 70%。 */
.tw-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-24);
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  max-width: calc(100vw - 2 * var(--space-16));
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  box-shadow: var(--glass-shadow);
  color: var(--ink-2);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity calc(var(--motion-base) * 0.7) var(--ease-standard), transform calc(var(--motion-base) * 0.7) var(--ease-standard);
}
.tw-toast:empty { padding: 0; box-shadow: none; }
.tw-toast.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-duration: var(--motion-base);
}
.tw-toast a {
  position: relative;
  color: var(--link-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.tw-toast a::before { content: ""; position: absolute; inset: -12px -8px; }

@media (hover: hover) {
  .tw-toast a:hover { color: var(--link-quiet-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-toast,
  .tw-toast.is-open { transition: none; transform: translate(-50%, 0); }
}

@media (max-width: 768px) {
  .tw-toast { bottom: var(--space-16); }
}

/* 盤後摘要的自選股卡:表沿用同頁主力分點的 table.br,這裡只補缺值／持平與箭頭連結的熱區 */
.tw_home .wl-home[hidden] { display: none; }
.tw_home .wl-home table.br td.flat { color: var(--ink-2); }
.tw_home .wl-home table.br td.miss { color: var(--ink-disabled); }
.tw_home .wl-home .card-h a.link_arrow { position: relative; }
.tw_home .wl-home .card-h a.link_arrow::before { content: ""; position: absolute; inset: -13px -8px; }
/* 390 寬:三個數字欄收窄、藏代號,股名欄至少留 4.5 個字 */
@media (max-width: 768px) {
  .tw_home .wl-home table.br .v { width: 72px; }
  .tw_home .wl-home table.br th:first-child,
  .tw_home .wl-home table.br td:first-child { min-width: 4.5em; }
  .tw_home .wl-home a.sym .code { display: none; }
  /* 「全部 N 檔 →」留在標題同一行(首頁 ≤768 的 .r 預設滿寬是給分段鈕用的) */
  .tw_home .wl-home .card-h .r { margin-left: auto; width: auto; }
}
