/* 概念股主題 — designer spec-twstock-themes-2026-10-13 (A 版) + its mockup.
   Loaded by three pages: the 概念股主題 tab (`.th-hub`, on top of
   sector_rotation.css), the per-theme page (`.th-page`, on top of
   fundamental/statements.css) and the 產業類股 tab (theme tags in the
   constituents drilldown only). */

/* The hub and the theme pages are search entry points: their H1 stays at every
   width (spec §1). The sector tab keeps hiding its own. */
@media (max-width: 1300px) {
  .th-hub .titlewrap h1,
  .th-page .titlewrap h1 { display: block; }
}

/* ── drilldown: 也在 / 概念股主題 tag column ── */
.constituents .ttl { display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.constituents .ttl a {
  position: relative;
  color: var(--link-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.constituents .ttl a::before { content: ""; position: absolute; inset: -12px -4px; }
.constituents .ttl a:hover { color: var(--link-quiet-hover); }
.constituents th.l { text-align: left; }
.constituents td.tags { text-align: left; font-family: var(--font-sans); white-space: nowrap; }
.mini_tag + .mini_tag { margin-left: var(--space-4); }
/* drilldown rows are 27px: rows carrying theme tags grow to 36 so the tags' hit area fits */
.constituents table.has-tags td { height: 36px; }
.constituents td.tags a.mini_tag,
.th-tbl td.tags a.mini_tag { position: relative; }
.constituents td.tags a.mini_tag::before { content: ""; position: absolute; inset: -10px -2px; }
.th-tbl td.tags a.mini_tag::before { content: ""; position: absolute; inset: -4px -2px -16px; }
/* the scroll wrapper clips below the last row, so that row's tags grow upward instead */
.th-tbl tbody tr:last-child td.tags a.mini_tag::before { inset: -16px -2px -4px; }

/* ── hub ── */
.ssr-summary .ssr-stat .val.sans { font-family: var(--font-sans); font-size: 16px; }
.ssr-cons .card-h h2 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink); }
/* theme / count / stocks in three shared columns, so every row's stock list starts on one edge */
.th-hub .ssr-cons .cons-list { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: var(--space-12); }
.th-hub .ssr-cons .cons-nav-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; font-size: 13px; padding: var(--space-8) 0; }
.th-hub .ssr-cons .cons-nav-row .stk { display: flex; flex-wrap: wrap; column-gap: var(--space-12); row-gap: 2px; }
.ssr-cons .cons-nav-row a.sec { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ssr-cons .cons-nav-row .ct { font-size: 12px; color: var(--color-greyMedium); }

#box_main p.th-src { margin: var(--space-24) 0 0; font-size: 12px; color: var(--color-greyMedium); }

/* ── theme page ── */
.th-crumb {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8);
  margin-bottom: var(--space-16); font-size: 12px; color: var(--color-greyMedium);
}
.th-crumb a { position: relative; color: var(--ink-2); text-decoration: none; }
.th-crumb a::before { content: ""; position: absolute; inset: -13px -4px; }
.th-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.th-stack { display: flex; flex-direction: column; gap: var(--space-16); }
.th-page .card-h h2 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.th-page .ssr-stat .val.sans { font-family: var(--font-sans); font-size: 16px; }
.th-page .ssr-stat .sub { font-size: 12px; color: var(--color-greyMedium); min-height: 16px; }
.th-page .ssr-stat .sub .ex { display: block; }
.th-page .ssr-summary { margin-bottom: 0; }
/* the definition sentence is api prose with spaces around Latin terms; keep-all
   (studio/base.css) breaks it only at those spaces and leaves ragged lines */
.th-page .ssr-summary .ssr-lead:lang(zh) { word-break: normal; }
.th-page .nw { white-space: nowrap; }


.th-chart { height: 300px; }
.th-chart canvas[hidden] { display: none; }
.th-chart-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--color-redText);
}
.th-chart-gate {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-12); text-align: center; background: var(--surface-card);
}
.th-chart-msg[hidden], .th-chart-gate[hidden] { display: none; }
.th-chart-gate p { margin: 0; font-size: 13px; color: var(--ink-2); }
.th-chart-gate .primary_btn { border-radius: var(--radius-md); font-size: 14px; }
.th-chart-gate a { position: relative; padding: var(--space-8) 0; font-size: 13px; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.th-chart-gate a::before { content: ""; position: absolute; inset: -5px 0; }
.th-chart-gate a:hover { color: var(--link-quiet-hover); }

.th-leg { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); margin-top: var(--space-8); font-size: 12px; color: var(--color-greyMedium); }
.th-leg span[hidden] { display: none; }
.th-leg .ln { display: inline-block; width: 16px; height: 0; margin-right: var(--space-4); vertical-align: middle; border-top: 2px solid; }
.th-leg .ln.live { border-top-color: var(--color-data-1); }
.th-leg .ln.backfill { border-top: 2px dashed var(--color-greyMedium); }
.th-leg .ln.taiex { border-top: 1px solid var(--color-data-2); }
.th-leg .ln.tpex { border-top: 1.5px solid var(--color-data-3); }

/* the list is the page's content, not a scroll pane: no height cap */
.th-tbl.tbl-wrap { max-height: none; overflow-y: visible; }
.th-tbl table.tbl thead th { position: static; cursor: default; vertical-align: bottom; }
.th-tbl table.tbl thead th:first-child { position: sticky; left: 0; z-index: 2; }
.th-tbl table.tbl thead th.l { text-align: left; }
.th-tbl table.tbl tbody td { vertical-align: top; }
.th-tbl table.tbl tbody td.l { text-align: left; font-family: var(--font-sans); color: var(--ink-2); }
.th-tbl td.why { white-space: normal; min-width: 200px; max-width: 280px; line-height: 1.5; }
.th-tbl td.stk a { position: relative; color: var(--ink); font-weight: 500; text-decoration: none; }
/* grows downward only: the row above (sticky cells) paints over anything reaching up */
.th-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 */
.th-tbl table.tbl tbody td.pos { color: var(--color-greenText); }
.th-tbl table.tbl tbody td.neg { color: var(--color-redText); }
.th-tbl td.stk a:hover { text-decoration: underline; text-underline-offset: 3px; }
.th-tbl td.stk .code { margin-right: var(--space-6); font-family: var(--font-mono); font-weight: 400; color: var(--color-greyMedium); }
.th-tbl td.stk .mini_tag { margin-left: var(--space-6); }
.th-tbl .m-sec { display: none; margin-top: 2px; font-size: 12px; color: var(--color-greyMedium); }
.th-tbl td.src { white-space: normal; min-width: 240px; max-width: 320px; }
.th-tbl td.src a { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-2); text-decoration: none; }
.th-tbl td.src a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.th-tbl tr.delisted td { color: var(--color-greyMedium); }
.th-tbl .lg[hidden] { display: none; }

/* semantic fill款 (canon › Mini tag): 處置中 is a regulatory flag, red tint */
.mini_tag.disposal { background-color: var(--color-redLight); color: var(--color-redBlack); }

.th-page #studio_gate { margin-bottom: 0; }
#th_gate_slot:empty { display: none; } /* logged in: no gate, no extra gap in the stack */

.th-method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.th-method h2 { margin: 0 0 6px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.th-method p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }

.th-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-24); font-size: 13px; }
.th-rel a { position: relative; padding: 6px 0; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.th-rel a::before { content: ""; position: absolute; inset: -8px -4px; }
.th-rel a:hover { color: var(--link-quiet-hover); }
.th-rel .ct { margin-left: var(--space-4); font-size: 12px; color: var(--color-greyMedium); }

.th-empty p { margin: 0; font-size: 14px; color: var(--ink-2); }
.th-empty a { display: inline-block; margin-top: var(--space-4); padding: var(--space-12) 0; font-size: 13px; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .constituents table.has-tags td { height: 44px; }
  .constituents td.tags a.mini_tag::before { inset: -14px -2px; }
  /* phone: name + count share a line, the stock links take the full width below */
  .th-hub .ssr-cons .cons-list { grid-template-columns: max-content minmax(0, 1fr); }
  .th-hub .ssr-cons .cons-nav-row .stk { grid-column: 1 / -1; margin-top: var(--space-4); }
  .th-chart { height: 240px; }
  .th-method { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .th-tbl td.why { min-width: 180px; }
  .th-tbl .sec-col { display: none; }
  .th-tbl .m-sec { display: block; }
  .th-tbl td.tags a.mini_tag::before { inset: -4px -2px -24px; }
  .th-tbl tbody tr:last-child td.tags a.mini_tag::before { inset: -24px -2px -4px; }
  .th-tbl td.stk a::before { inset: -4px -4px -24px; }
}