/* ── twstock 選股器（designer spec-twstock-screener-2026-10-14, 版型 B）──
   Loads after fundamental/statements.css (pagehead, .card, table.tbl, .segment, .ctrl,
   .loader_wrap). Role vars only — twstock is a dual-theme surface. */

.scr .titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }
.scr .builder + .card,
.scr .builder + #studio_gate { margin-top: var(--space-16); }

/* Quiet link as a button (canon › 安靜連結) */
.scr .quiet,
.scr-pop .quiet {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--link-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.scr .quiet::after,
.scr-pop .quiet::after { content: ""; position: absolute; inset: -13px -4px; }
.scr .quiet:hover,
.scr-pop .quiet:hover { color: var(--link-quiet-hover); }

/* In-app function button (canon › In-app 功能動作鈕: neutral fill, not orange) */
.fbtn {
  position: relative;
  height: 36px;
  padding: 0 var(--space-16);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--control-fill);
  color: var(--control-fill-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.fbtn::before { content: ""; position: absolute; inset: -4px 0; }
.fbtn:hover:not(:disabled) { opacity: 0.85; }
.fbtn:disabled { background: var(--control-disabled-fill); color: var(--control-disabled-fill-text); }

/* ── Builder: tabs | list | selected conditions ── */
.builder {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: stretch;
}
.btabs { display: flex; flex-direction: column; gap: var(--space-8); }
.btab {
  height: 48px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.btab:hover { background: var(--surface-muted); }
.btab.on { border-color: var(--control-fill); background: var(--control-fill); color: var(--control-fill-text); font-weight: 600; }

.bl h6,
.bs h6 { margin: 0 0 var(--space-12); color: var(--ink); }
.bl .item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 40px;
  margin-bottom: var(--space-8);
  padding: 0 var(--space-4) 0 var(--space-12);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.bl .item .nm { min-width: 0; overflow-wrap: anywhere; }
/* the dotted tip line sits on the --surface-muted row: greyLightMedium would be ~1.1:1 there */
.bl .item .has-tip { border-bottom-color: var(--color-greyMedium); }
.bl .item .add {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-xs);
  background: var(--surface-field);
  color: var(--ink);
  cursor: pointer;
}
.bl .item .add::before { content: ""; position: absolute; inset: -7px -8px; }
.bl .item .add .ico { width: 16px; height: 16px; }
.bl .item .add:disabled { border-color: var(--field-disabled-border); background: var(--field-disabled-bg); color: var(--color-greyMedium); }

.bs { display: flex; flex-direction: column; }
.bs .crow {
  --ctl-h: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nm ed x";
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 13px;
}
.bs .crow:last-child { border-bottom: 0; }
.bs .crow .nm { grid-area: nm; display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; min-width: 0; color: var(--ink); font-weight: 600; }
.bs .crow .ed { grid-area: ed; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-6); min-width: 0; }
.bs .crow select,
.bs .crow input,
.bs .crow .val {
  height: var(--ctl-h);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-xs);
  background-color: var(--surface-field);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}
.bs .crow select {
  padding: 0 var(--space-24) 0 var(--space-6);
  appearance: none;
  background: var(--surface-field) var(--select-chevron) no-repeat calc(100% - 2px) center / 20px;
  cursor: pointer;
}
.bs .crow select.win { font-weight: 400; }
.bs .crow input { width: 72px; padding: 0 var(--space-6); font-family: var(--font-mono); text-align: right; }
.bs .crow input[aria-invalid="true"] { border-color: var(--color-red); }
.bs .crow .u { min-width: 14px; font-size: 12px; color: var(--color-greyMedium); }
/* industry / theme value = Select trigger (canon › Input › Select 觸發鈕), same look as the market select */
.bs .crow .val {
  display: block;
  max-width: 220px;
  padding: 0 var(--space-24) 0 var(--space-6);
  background: var(--surface-field) var(--select-chevron) no-repeat calc(100% - 2px) center / 20px;
  text-align: left;
  cursor: pointer;
}
.bs .crow .val:hover { background-color: var(--surface-muted); }
.bs .crow .val span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs .crow.solo { min-height: 45px; }
.bs .crow .x {
  grid-area: x;
  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;
}
.bs .crow .x::before { content: ""; position: absolute; inset: -8px; }
.bs .crow .x:hover { color: var(--ink); }
.bs .crow .x .ico { width: 16px; height: 16px; }

.cfoot { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-16); }
.cfoot .l { display: flex; flex: none; align-items: center; gap: var(--space-16); }
/* one line on desktop: 清除 | 符合 N 檔 (last result) + 看結果 */
.cfoot .r { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-8); }
.cfoot .r > .count { margin-right: var(--space-16); }
.cfoot .r > .count,
.cfoot .r > .fbtn { flex: none; }
.count { display: flex; flex-direction: column; align-items: flex-end; color: var(--ink); white-space: nowrap; }
.count .main { font-size: 16px; font-weight: 600; }
/* past the 300-row cap: which 300 these are */
.count .cap { font-size: 12px; font-weight: 400; color: var(--color-greyMedium); }
.scr-hint { margin: var(--space-8) 0 0; font-size: 12px; color: var(--color-redText); text-align: right; }
.count .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Conditions card empty state: one line, no illustration (canon › Empty). The footer sits on the
   card's bottom edge with or without rows, so 看結果 never moves; display:flex overrides [hidden],
   hence the explicit rule */
.scr .bs .scr-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-24) 0;
  font-size: 13px;
  color: var(--color-greyMedium);
  text-align: center;
}
.scr .bs .scr-empty[hidden] { display: none; }
.bs .cfoot { margin-top: auto; padding-top: var(--space-16); }

/* ── Result ── (wait state via blaveWait: the spinner replaces the slot, the heading — and the fog,
   while it is there — stay) */
#box_result:not(.is-wait) #scr_loading,
#box_result.is-wait > :not(#scr_loading):not(.card-h):not(.scr-fog),
#box_result.is-wait .scr-fog-card > :not(#scr_loading) { display: none; }

/* Never-run preview (canon › Setup fog, Studio exception — spec-twstock-screener-initial §8): a fake
   table blurred under a solid mask, the slot card on top. Static: no shimmer, no transition. */
.scr-fog { position: relative; height: 328px; overflow: hidden; }
.scr-fog-base { position: absolute; inset: 0; filter: blur(var(--fog-blur)); pointer-events: none; user-select: none; }
.scr-fog-base::after { content: ""; position: absolute; inset: 0; background: var(--fog-mask); }
/* nothing scrolls in here: sticky cells would paint above the mask (z 1–3 in the filter's stacking
   context) and leave an L of lighter fog. Must stay in this file — it ties statements.css on weight
   and wins on load order. */
.scr-fog-base table.tbl thead th,
.scr-fog-base table.tbl tbody td { position: static; }
.scr-fog-card {
  position: absolute;
  top: var(--space-48);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - var(--space-32));
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.scr-fog-card .scr-fog-msg,
.scr-fog-card .scr-msg { margin: 0; font-size: 14px; color: var(--ink); text-wrap: balance; }
.scr-msg a.quiet_link { font-size: inherit; }
.scr-fog-card .scr-msg + .ctrl { margin-top: var(--space-12); }
/* the loader's own 48 padding is for a bare card; here the fog card already pads it */
.scr-fog-card .loader_wrap { padding: 0; }
@media (prefers-reduced-transparency: reduce) {
  .scr-fog-base { filter: none; opacity: 0.12; }
  .scr-fog-base::after { content: none; }
}
.scr-msg { margin: 0; font-size: 13px; color: var(--color-greyMedium); }
.scr-msg + .ctrl { align-self: flex-start; margin-top: var(--space-12); }
/* clip edge = card content edge: with padding here, scrolled cells show through the gap left of the sticky column */
.scr .tbl-wrap { max-height: none; overflow-y: visible; }
.scr .tbl-wrap table.scr-tbl thead th { padding-top: 9px; padding-bottom: 9px; }
.scr-tbl thead th.l { text-align: left; cursor: default; }
.scr-tbl thead th .act { color: var(--ink); font-weight: 600; }
.scr-tbl tbody td.l { text-align: left; font-family: inherit; color: var(--ink-2); }
.scr-tbl td.stk { max-width: 240px; white-space: nowrap; }
.scr-tbl td.stk a { position: relative; color: var(--ink); font-weight: 500; text-decoration: none; }
.scr-tbl td.stk a::before { content: ""; position: absolute; inset: -4px -4px -16px; }
/* statements.css paints every body cell ink (0,1,2); the signed columns keep their colour */
table.scr-tbl tbody td.pos { color: var(--color-greenText); }
table.scr-tbl tbody td.neg { color: var(--color-redText); }
.scr-tbl td.stk a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.scr-tbl td.stk .code { margin-right: var(--space-8); font-family: var(--font-mono); font-weight: 400; color: var(--color-greyMedium); }
.scr-tbl td.stk .nm { display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.scr-tbl td.stk .mini_tag { margin-left: var(--space-6); vertical-align: 1px; }
.scr-tbl .m-sec { display: none; margin-top: 2px; overflow: hidden; font-size: 12px; color: var(--color-greyMedium); text-overflow: ellipsis; }
.mini_tag.warn { background-color: var(--color-redLight); color: var(--color-redBlack); }

/* Upgrade modal: the shared partial carries the crypto screener GIF; this page sets no image. */
#modal_warning_upgrade .modal-body img:not([src]) { display: none; }

/* ── Industry / theme picker (Dropdown panel; ≤768 bottom sheet) ── */
.scr-pop {
  position: absolute;
  z-index: 1030;
  width: 300px;
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.scr-pop[hidden],
.scr-scrim[hidden] { display: none; }
.scr-pop h6 { margin: 0 0 var(--space-4); color: var(--ink); }
.scr-pop .def { margin: 0 0 var(--space-12); font-size: 12px; color: var(--color-greyMedium); }
.scr-pop .segment { margin-bottom: var(--space-8); }
.scr-pop .list { max-height: 240px; margin: 0 calc(-1 * var(--space-4)); overflow-y: auto; }
.scr-pop .list label {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.scr-pop .list label:hover { background: var(--surface-row-hover); }
.scr-pop .list .form-check-input { display: block; margin: 0; }
.scr-pop .acts { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-16); }

/* ── RWD ── */
/* ≤1300 the page column is the 588 container: tabs become a scrolling row above the
   two cards, and a condition row puts its controls under its name */
@media (max-width: 1300px) {
  .builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .btabs { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .btab { flex: none; height: 44px; }
  /* stacked row: name | × on top, controls below from the name's edge; a row without
     controls stays one line */
  .bs .crow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm x" "ed ed"; }
  .bs .crow.solo { grid-template-areas: "nm x"; }
  .bs .crow .ed { justify-content: flex-start; }
  /* the × sits on the name line: 8 above keeps its 44 hit area inside its own row */
  .bs .crow:not(.solo) { padding-top: var(--space-8); }
}

/* ≤1300 the card is ~290 wide: two lines, 清除 over 檔數 | 看結果 */
@media (max-width: 1300px) {
  .cfoot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "clear clear" "count run";
    gap: var(--space-12) var(--space-16);
  }
  .cfoot .l,
  .cfoot .r { display: contents; }
  #scr_clear { grid-area: clear; justify-self: start; }
  .cfoot .count { grid-area: count; justify-self: start; align-items: flex-start; }
  .cfoot .fbtn { grid-area: run; justify-self: end; }
  .cfoot:has(#scr_clear[hidden]) { grid-template-areas: "count run"; }
}

@media (pointer: coarse), (max-width: 768px) {
  .bs .crow { --ctl-h: 44px; }
}

@media (max-width: 768px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .scr-fog { height: 240px; }
  .scr-fog-card { top: var(--space-32); }
  .btabs { margin: 0 calc(-1 * var(--space-16)); padding: 0 var(--space-16); }
  .fbtn { height: 44px; }
  .fbtn::before { inset: 0; }
  .scr-hint { text-align: left; }
  .bs .crow .val { max-width: none; flex: 1; text-align: left; }
  .scr .tbl-wrap table.scr-tbl thead th { padding-top: 13px; padding-bottom: 13px; }
  .scr-tbl .sec-col { display: none; }
  .scr-tbl .m-sec { display: block; }
  .scr-tbl td.stk { max-width: 160px; }
  .scr-tbl td.stk .nm { max-width: 6em; }
  .scr-tbl td.stk a::before { inset: -4px -4px -24px; }
  .scr-tbl td.stk .code { margin-right: var(--space-6); font-size: 12px; }
  .scr-pop {
    position: fixed;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0 !important;
    width: auto;
    padding: var(--space-24) var(--space-24) var(--space-32);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .scr-scrim { position: fixed; inset: 0; z-index: 1029; background: var(--color-scrim); }
}