/* ── twstock 財務比率 · 比率總表＋點列看走勢 ──
   Loads after fundamental/statements.css (page head, toolbar, cards, .tbl base)
   and only adds what that sheet lacks. */

.toolbar .segment .btn_period:disabled,
.toolbar .segment .btn_period:disabled:hover {
  background: var(--field-disabled-bg);
  color: var(--color-greyMedium);
  font-weight: 400;
}
.toolbar .pro_note { font-size: 12px; padding: var(--space-8) 0; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; position: relative; }
.toolbar .pro_note:hover { color: var(--link-quiet-hover); }
.toolbar .pro_note::after { content: ""; position: absolute; inset: -5px 0; } /* 34 → 44 熱區,視覺不變 */

.xref { font-size: 12px; color: var(--color-greyMedium); margin: -4px 0 var(--space-12); }
.xref a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.xref a:hover { color: var(--link-quiet-hover); }

.legend { font-size: 12px; color: var(--color-greyMedium); display: flex; gap: var(--space-12); flex-wrap: wrap; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: var(--space-4); }
.legend i.box { width: 8px; height: 8px; }
.legend .sw-data { background: var(--color-data-1); }
.legend .sw-pos { background: var(--color-green); }
.legend .sw-neg { background: var(--color-red); margin-left: calc(-1 * var(--space-2)); }
.legend .sw-price { background: var(--chart-price); }

/* ── Matrix: rows = ratios, columns = quarters (newest left) ── */
/* No inner vertical scroll: a second scroller inside the page is the thing
   this layout avoids; the group labels stand in for a sticky header. */
#card_table .tbl-wrap { max-height: none; }
.is-wait #card_table .tbl-wrap { min-height: 1090px; }
table.mx thead th { cursor: default; }
table.mx tbody th {
  /* labels wrap: es / pt / vi names run past the 168 column and would slide under the first quarter */
  padding: 7px var(--space-12); text-align: left; white-space: normal; font-weight: 400; color: var(--ink-2);
  border-bottom: 1px solid var(--border-hairline); position: sticky; left: 0; z-index: 1; background: var(--surface-card);
  min-width: 168px; max-width: 168px;
}
table.mx thead th:first-child { min-width: 168px; }
/* statements.css treats the first td as the sticky label column; here that is the th */
table.mx tbody td:first-child { text-align: right; font-family: "Roboto Mono", monospace; color: var(--ink); position: static; background: transparent; }
table.mx tbody td.pos { color: var(--color-greenText); }
table.mx tbody td.neg { color: var(--color-redText); }
table.mx tbody td.na { color: var(--color-greyMedium); }
body.dark-mode table.mx tbody td.na { color: var(--color-greyDark); }
table.mx tbody tr:hover th { background: var(--surface-row-hover); }

table.mx tbody tr.grp th { padding: var(--space-24) var(--space-12) var(--space-8); }
table.mx tbody tr.grp:first-child th { padding-top: var(--space-8); }
table.mx tbody tr.grp:hover th,
table.mx tbody tr.grp:hover td { background: var(--surface-card); }

.unit { font-size: 11px; font-weight: 400; color: var(--color-greyMedium); margin-left: var(--space-4); }
.endval { font-size: 11px; font-weight: 400; color: var(--color-greyMedium); margin-left: var(--space-6); }

.rowbtn { all: unset; cursor: pointer; display: block; width: 100%; text-align: left; }
/* keyboard focus: the ring sits on the sticky label cell's inner edge (the scroll
   container would clip an outer ring), and the whole row takes the hover fill.
   outline:none here is only allowed because the th rule below replaces it. */
.rowbtn:focus-visible { outline: none !important; }
table.mx tbody th:has(.rowbtn:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
table.mx tbody tr:has(.rowbtn:focus-visible) th,
table.mx tbody tr:has(.rowbtn:focus-visible) td { background: var(--surface-row-hover); }
/* the global button:lang() rule pins 500; the label takes the row's weight (400, selected 600) */
table.mx .rowbtn { font-weight: inherit; }
.rowbtn .lab { display: grid; }
.rowbtn .lab > span { grid-area: 1 / 1; }
.rowbtn .lab-b { visibility: hidden; font-weight: 600; }
.rowbtn .has-tip { cursor: pointer; }
/* the whole row is the click target (the button stays for keyboard / AT) */
table.mx tbody tr:not(.grp) { cursor: pointer; }
table.mx tbody tr.sel { cursor: default; }
table.mx tbody tr.sel .rowbtn,
table.mx tbody tr.sel .rowbtn .has-tip { cursor: default; }
table.mx tbody tr.sel th { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--active-line); }
table.mx tbody tr.sel th,
table.mx tbody tr.sel td { background: var(--surface-row-hover); }

.tbl-foot { font-size: 12px; color: var(--color-greyMedium); margin: var(--space-12) 0 0; line-height: 1.6; }
.tbl-foot a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.tbl-foot a:hover { color: var(--link-quiet-hover); }

@media (max-width: 1300px) {
  /* one column: the empty / error message goes in the flow above the side cards
     instead of stacking on a cell they now occupy */
  .hydra.is-flat > * { grid-area: auto; }
  .hydra.is-flat > .hydra-layer { order: -1; }
}
@media (max-width: 768px) {
  .toolbar .pro_note { align-self: flex-start; padding: var(--space-4) 0; }
  .is-wait #card_table .tbl-wrap { min-height: 910px; }
  table.mx tbody th { padding: var(--space-4) var(--space-8); }
  table.mx tbody th,
  table.mx thead th:first-child { min-width: 124px; max-width: 124px; }
  table.mx tbody tr.grp th { padding: var(--space-16) var(--space-8) var(--space-4); }
}