/* ── twstock 個股市值 · 分析頁版型（與 valuation/pe_band 同一家族）── */

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

/* ── Page head ── */
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.titlewrap { display: flex; flex-direction: column; gap: var(--space-2); }
.titlewrap h1 { margin: 0; color: var(--ink); }
.titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }

.toolbar { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.ctrl {
  height: 32px; display: inline-flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-12);
  border: 1px solid var(--border-frame); background: transparent; color: var(--ink);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background var(--motion-fast) ease;
}
.ctrl:hover { background: var(--surface-muted); }
.ctrl.stock { font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl .caret {
  width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 2px;
}
/* Override modal_stock.css's #btn_stock_select (ID wins over .ctrl) — same
   reason as pe_band.css: keep the toolbar button a fixed 32px .ctrl with one
   .caret instead of its own 44px height + background-image arrow. */
#btn_stock_select.ctrl.stock {
  height: 32px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13px;
  flex: none;
}
/* overflow 不能 hidden:它會把下面撐熱區的 pseudo 裁掉,量到的可點高度只剩視覺高;圓角改由頭尾兩顆自己畫(外框 1px,所以內半徑要減 1)。 */
.segment { display: inline-flex; border: 1px solid var(--border-frame); border-radius: var(--radius-sm); }
.segment .btn_range {
  height: 32px; padding: 0 var(--space-12); border: none; background: transparent; color: var(--color-greyMedium);
  font-size: 12px; font-family: inherit; cursor: pointer; border-right: 1px solid var(--border-frame);
  transition: background var(--motion-fast) ease; position: relative;
}
.segment .btn_range::before { content: ""; position: absolute; inset: -6px 0; }
.segment .btn_range:first-child { border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px); }
.segment .btn_range:last-child { border-right: none; border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; }
.segment .btn_range:hover { background: var(--surface-muted); }
.segment .btn_range.active { background: var(--surface-control-on); color: var(--ink); font-weight: 600; }

/* ── Layout grid ── */
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); align-items: start; }
.hydra { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); }
.hydra > .analysis { grid-column: 1 / -1; }
.col-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: var(--space-16); position: sticky; top: var(--space-16); }

/* ── Card ── */
.card { background: var(--surface-card); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); }
.card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.card-h h6 { margin: 0; color: var(--ink); }
.card-h .meta { font-size: 12px; color: var(--color-greyMedium); }
.chart_box { position: relative; }

/* studio/base.css (shared with crypto) paints these with base tokens; re-declare
   them on role vars so they follow this page's card in both themes. */
.is-wait .skel { background: var(--surface-card); }
.ssr-stat + .ssr-stat { border-left-color: var(--border-hairline); }
/* 標籤折行不該把它的數字擠出整列的基線:一列裡的數字是一組,共用一條邊
   (ja / vi / es / pt 的「佔上市市值（不含 ETF）」標籤折兩行,其他兩格沒折,
   數字就會差一個行高)。格子本來就被 grid 撐滿列高,內容靠下即可。
   刻意留在本頁而不是搬進 studio/base.css:那支被 21 個表面共用,其中
   crypto 清算地圖 / OI 失衡的 .ssr-stat 在值下面還有 .unit、台股板塊輪動
   有 .sub,靠下對齊會把「沒有第三行」那一格的數字往下推 20px——量過:
   holder_concentration / liquidation map / oi_imbalance / market/sector_rotation(ja)
   四處都會從對齊變成不對齊。本頁的統計格只有 lab + val,才適用。 */
.ssr-stats .ssr-stat { justify-content: flex-end; }

.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: "Roboto Mono", monospace; }
.pos { color: var(--color-greenText); }
.neg { color: var(--color-redText); }

/* ── Auto interpretation ── */
.read { display: flex; flex-direction: column; gap: var(--space-8); }
.read .line {
  border: 1px solid var(--border-frame); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-12);
  font-size: 13px; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2);
}
.read .tag {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; line-height: 1;
  border-radius: var(--radius-micro); margin-top: 1px;
}
.tag-neu { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); }

/* ── Detail table ── */
/* No max-height: the scale card's table is three fixed rows, so a nested
   scroller would only add a second scrollbar on mobile. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tbl thead th {
  background: var(--surface-card); color: var(--color-greyMedium);
  font-weight: 600; font-size: 12px; padding: var(--space-8); border-bottom: 1px solid var(--border-hairline);
  text-align: right; white-space: nowrap; user-select: none;
}
table.tbl thead th:first-child { text-align: left; }
table.tbl tbody td { padding: 7px var(--space-12); text-align: right; border-bottom: 1px solid var(--border-hairline); font-family: "Roboto Mono", monospace; color: var(--ink); white-space: nowrap; }
table.tbl tbody td:first-child { text-align: left; font-family: inherit; color: var(--ink-2); }
table.tbl tbody tr:hover td { background: var(--surface-row-hover); }

/* ── States ── */
.loader_wrap { display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; align-items: center; padding: var(--space-48) 0; color: var(--color-greyMedium); font-size: 14px; }

/* ── Market-value specifics ── */
.chart_note { font-size: 12px; color: var(--color-greyMedium); margin: -4px 0 var(--space-12); line-height: 1.4; }
/* Sits under the stat strip rather than under the card header, so it needs the
   space above instead of the negative pull. */
.universe_note { margin: var(--space-12) 0 var(--space-4); }

#box_content { display: flex; flex-direction: column; gap: var(--space-16); }

/* ── RWD ── */
@media (max-width: 1300px) {
  .analysis, .hydra { grid-template-columns: 1fr; }
  .col-side { position: static; }
  #box_main { padding-left: 0; }
  /* The offcanvas nav button already names the section — keep only the date
     meta line, which the button doesn't show (web/CLAUDE.md › Frontend UI). */
  .titlewrap h1 { display: none; }
}
@media (max-width: 768px) {
  .pagehead { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; flex-direction: column; align-items: stretch; }
  .ctrl.stock { max-width: none; width: 100%; justify-content: space-between; }
  .segment { width: 100%; }
  .segment .btn_range { flex: 1; }
  table.tbl thead th { padding: var(--space-4); }
  table.tbl tbody td { padding: var(--space-4); }
}