/* ── 台股自選股頁(designer tw-watchlist spec A §3)— Terminal register,雙態走角色變數。
   頁首、卡、picker、Outlined control 吃 twstock/cards.css 的 .tw_sum;星號與 toast 在 twstock/watch.css。
   工具列與新增框照加密觀察清單(#box_filter／#modal_add_targets)的 recipe,另寫在這裡:
   加密那份 overview.css 帶全域規則(#box_main 寬、.modal-body 內距),不能載進來。 ── */

#box_main {
  flex: 1;
  min-width: 0;
  min-height: 600px;
  padding-top: var(--space-16);
  padding-left: var(--space-16);
  max-width: 1340px;
}

.tw_wl .titlewrap .meta .seg { white-space: nowrap; }

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

/* ── 工具列:Black button 34 ＋ Outlined control 34×34(熱區 44) ── */
.tw_wl .toolbar { display: flex; align-items: center; gap: var(--space-8); }
.tw_wl .toolbar[hidden],
.tw_wl .toolbar > [hidden] { display: none; }
.tw_wl .btn-fill,
#modal_wl_add .btn-fill {
  position: relative;
  height: 34px;
  padding: 0 var(--space-16);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--control-fill);
  color: var(--control-fill-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.tw_wl .btn-fill::before,
#modal_wl_add .btn-fill::before { content: ""; position: absolute; inset: -5px 0; }
.tw_wl .btn-fill:disabled,
#modal_wl_add .btn-fill:disabled { background: var(--control-disabled-fill); color: var(--control-disabled-fill-text); cursor: default; }
.tw_wl .toolbar .btn-out { height: 34px; }
.tw_wl .toolbar .btn-out::before { inset: -5px -1px; }
.tw_wl .btn-out.sq { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; }
.tw_wl .btn-out.sq .ico { width: 16px; height: 16px; }

/* ── 表:表頭一條 greyDark ruler,列間 hairline,末列不畫 ── */
.tw_wl .card { min-height: 120px; }
.tw_wl .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw_wl .tbl-wrap[hidden] { display: none; }
.tw_wl table.wl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tw_wl table.wl th {
  height: 32px;
  padding: 0 var(--space-12) var(--space-4);
  border-bottom: 1px solid var(--color-greyDark);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-greyMedium);
  text-align: right;
  white-space: nowrap;
  vertical-align: bottom;
}
.tw_wl table.wl td {
  height: 36px;
  padding: 7px var(--space-12);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.tw_wl table.wl th:first-child,
.tw_wl table.wl td:first-child { padding-left: 0; text-align: left; }
.tw_wl table.wl th:last-child,
.tw_wl table.wl td:last-child { padding-right: 0; }
.tw_wl table.wl tbody tr:last-child td { border-bottom: none; }
/* 股名欄釘住、其餘橫捲(同選股器結果表);1024 寬就會橫捲,所以不只手機。沒溢出時 sticky 沒有副作用 */
.tw_wl table.wl th:first-child,
.tw_wl table.wl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-card); }
.tw_wl table.wl #wl_body tr { cursor: pointer; }
.tw_wl table.wl td.up { color: var(--color-greenText); }
.tw_wl table.wl td.dn { color: var(--color-redText); }
.tw_wl table.wl td.flat { color: var(--ink-2); }
.tw_wl table.wl td.miss { color: var(--ink-disabled); }

/* 股名格:表格代號連結(同墨色、無常駐底線);名字太長截掉,全名在 title */
.tw_wl table.wl td.stk { font-family: inherit; }
.tw_wl .nm { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.tw_wl .nm a {
  min-width: 0;
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.tw_wl .nm .code { font-size: 12px; color: var(--color-greyMedium); }
.tw_wl .nm .grip,
.tw_wl .nm .rm { display: none; }

/* 編輯態:名稱前出把手、名稱格右側一顆 28 的 ✕(熱區只撐到自己的列界) */
.tw_wl table.wl.editing #wl_body tr { cursor: default; }
.tw_wl table.wl.editing .nm { min-width: 180px; }
/* 把手:28 寬、高等於列高(負 margin 不撐高列),16 的圖示置中;觸控熱區見下方 ≤768／coarse */
.tw_wl table.wl.editing .nm .grip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 36px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-greyMedium);
  cursor: grab;
}
.tw_wl table.wl.editing .nm .grip:active { cursor: grabbing; }
.tw_wl table.wl.editing .nm .grip .ico { width: 16px; height: 16px; }
.tw_wl table.wl.editing .nm .rm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* 負的上下 margin:28 的鈕不把 36 的列撐高,編輯態與一般態同列高 */
  margin: -4px 0 -4px auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-greyMedium);
  cursor: pointer;
}
.tw_wl table.wl.editing .nm .rm::before { content: ""; position: absolute; inset: -4px; }
.tw_wl table.wl.editing .nm .rm .ico { width: 16px; height: 16px; }
.tw_wl #wl_body tr[aria-busy="true"] { cursor: progress; }
.tw_wl #wl_body tr.sortable-ghost td { background: var(--surface-muted); }

.tw_wl .empty[hidden] { display: none; }
.tw_wl .empty .picker { width: 320px; max-width: 100%; }

@media (hover: hover) {
  .tw_wl .btn-fill:not(:disabled):hover,
  #modal_wl_add .btn-fill:not(:disabled):hover { opacity: 0.85; }
  .tw_wl table.wl #wl_body tr:hover td,
  .tw_wl table.wl #wl_body tr:hover td:first-child { background: var(--surface-row-hover); }
  .tw_wl table.wl.editing .nm .grip:hover { background: var(--surface-muted); color: var(--ink); }
  .tw_wl .nm a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
  .tw_wl table.wl.editing .nm .rm:hover { background: var(--surface-muted); color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .tw_wl .btn-fill,
  #modal_wl_add .btn-fill { transition: none; }
}

/* ── 新增框:寬 480;暗色頁跟著變暗(同加密新增框與升級框),main.css 釘回亮值的幾個變數在這裡還回去 ── */
#modal_wl_add .modal-dialog { max-width: 480px; }
#modal_wl_add .modal-content { width: 100%; padding: var(--space-24); background: var(--surface-card); color: var(--ink); }
body.dark-mode #modal_wl_add .modal-content {
  background: var(--color-darkCard);
  color: var(--color-darkText);
  --link-quiet: var(--color-darkText);
  --link-quiet-hover: var(--color-greyLightMedium);
  --color-greyMedium: inherit;
  --color-redBlack: inherit;
}
body.dark-mode #modal_wl_add .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
#modal_wl_add .modal-header { padding: 0; margin-bottom: var(--space-16); border: 0; }
#modal_wl_add .modal-header h5 { margin: 0; }
#modal_wl_add .modal-body { padding: 0; }
#modal_wl_add .field {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-12) 0 var(--space-32);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-md);
  background: var(--surface-field) url("/static/img/lucide/search.greyMedium.svg") no-repeat var(--space-12) center / 16px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
body.dark-mode #modal_wl_add .field { background-image: url("/static/img/lucide/search.greyMediumDark.svg"); }
#modal_wl_add .field::placeholder { color: var(--color-greyMedium); }
#modal_wl_add .ac { max-height: 240px; margin-top: var(--space-4); overflow-y: auto; }
#modal_wl_add .ac:empty { display: none; }
#modal_wl_add .ac .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
#modal_wl_add .ac .opt .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal_wl_add .ac .opt .mono { color: var(--color-greyMedium); }
#modal_wl_add .ac .opt .in { flex: none; font-size: 12px; color: var(--color-greyMedium); }
#modal_wl_add .ac .opt:disabled { color: var(--ink-disabled); cursor: default; }
#modal_wl_add .ac .none { margin: 0; padding: var(--space-12); font-size: 13px; color: var(--color-greyMedium); }
#modal_wl_add .sel { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-12); }
#modal_wl_add .sel:empty { display: none; }
#modal_wl_add .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 28px;
  padding: 0 0 0 var(--space-12);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  font-size: 13px;
}
#modal_wl_add .chip button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-greyMedium);
  cursor: pointer;
}
#modal_wl_add .chip button::before { content: ""; position: absolute; inset: -8px 0; }
#modal_wl_add .chip .ico { width: 14px; height: 14px; }
#modal_wl_add .over,
#modal_wl_add .err { margin: var(--space-12) 0 0; font-size: 13px; }
#modal_wl_add .over { color: var(--ink-2); }
#modal_wl_add .over a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#modal_wl_add .err { color: var(--color-redText); }
body.dark-mode #modal_wl_add .err { color: var(--color-redBlack); }
#modal_wl_add .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding: 0;
  border: 0;
}
#modal_wl_add .cnt { font-size: 13px; color: var(--color-greyMedium); }
#modal_wl_add .cnt.is-over { color: var(--color-redText); }
body.dark-mode #modal_wl_add .cnt.is-over { color: var(--color-redBlack); }

@media (hover: hover) {
  #modal_wl_add .ac .opt:not(:disabled):hover { background: var(--surface-muted); }
  #modal_wl_add .chip button:hover { color: var(--ink); }
  #modal_wl_add .over a:hover { color: var(--link-quiet-hover); }
}

/* ── 列內有控件的密集表:觸控或 ≤768 列高 44(熱區只到自己的列界) ── */
@media (max-width: 768px), (pointer: coarse) {
  .tw_wl table.wl td { height: 44px; }
  .tw_wl table.wl.editing .nm .rm::before { inset: -8px; }
  /* 把手熱區 44×44:股名格多 16 左內距,::before 往左伸進去(不越列界、不蓋右邊的股名連結;
     不往卡片內距伸,因為表在橫捲容器裡會被裁掉) */
  .tw_wl table.wl.editing th:first-child,
  .tw_wl table.wl.editing td:first-child { padding-left: var(--space-16); }
  .tw_wl table.wl.editing .nm .grip { height: 44px; margin: -11px 0; }
  .tw_wl table.wl.editing .nm .grip::before { content: ""; position: absolute; inset: 0 0 0 calc(-1 * var(--space-16)); }
}

@media (max-width: 1300px) {
  #box_main { padding-left: 0; }
  /* 側欄鈕已寫頁名;留 meta 那行 */
  .tw_wl .titlewrap h1 { display: none; }
}

@media (max-width: 768px) {
  .tw_wl .pagehead { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .tw_wl .toolbar { width: 100%; }
  .tw_wl .toolbar .btn-fill { flex: 1; }
  .tw_wl .btn-fill,
  #modal_wl_add .btn-fill { height: 44px; }
  .tw_wl .btn-fill::before,
  #modal_wl_add .btn-fill::before { inset: 0; }
  .tw_wl .toolbar .btn-out { height: 44px; }
  .tw_wl .toolbar .btn-out::before { inset: 0; }
  .tw_wl .btn-out.sq { width: 44px; }
  .tw_wl table.wl td:first-child { padding-right: var(--space-12); }
  .tw_wl .nm a { max-width: 6em; }
  .tw_wl .empty .picker { width: 100%; }
}