/* ════════════════════════════════════════════════════════════════════════
   TW Market — 三大法人台指期持倉成本 (market/futures_carrying_cost/<identity>)
   Same analysis-page shell as futures_retail_long_short_ratio.css, written on the
   semantic role vars (main.css) so dark mode needs no per-rule override. Underline
   tabs come from studio/base.css (.module_tabs); the hero shell (.ssr-summary /
   .ssr-stats) and the hydration stack (.hydra) from studio/base.css too.
   ════════════════════════════════════════════════════════════════════════ */

#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 h1 { margin: 0; color: var(--ink); }

.toolbar { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
/* overflow stays visible: the ::before hit layers below would be clipped. */
.segment { display: inline-flex; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); }
.segment button {
  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-hairline);
  transition: background var(--motion-fast) var(--ease-standard); position: relative; white-space: nowrap;
}
.segment button::before { content: ""; position: absolute; inset: -6px 0; }
.segment button:first-child { border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px); }
.segment button:last-child { border-right: none; border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; }
.segment button:hover { background: var(--surface-muted); }
.segment button.active { background: var(--surface-control-on); color: var(--ink); font-weight: 600; }
.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::after { content: ""; position: absolute; inset: -5px 0; }
.toolbar .pro_note:hover { color: var(--link-quiet-hover); }

/* canon › 底線分頁 › 間距: title → tabs 16, tabs → content 24. studio/base.css only
   spaces the tabs after `.box_title`. */
.pagehead + .module_tabs { margin-bottom: var(--space-12); }

/* 口徑 line: what the numbers are built from, before any number is read. */
#box_main .basis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12);
  font-size: 12px; color: var(--chart-caption); margin: 0 0 var(--space-16);
}
.basis .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: inline-block; }
.qlink { position: relative; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.qlink::after { content: ""; position: absolute; inset: -14px -4px; }
.qlink:hover { color: var(--link-quiet-hover); }

/* ── Card ── */
.card { background: var(--surface-card); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); }
.is-wait .skel { background: var(--surface-card); }
.ssr-stat + .ssr-stat { border-left-color: var(--border-hairline); }
.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 .right { display: flex; gap: var(--space-8); align-items: center; }
.chart_box { position: relative; }
.chart_note { font-size: 12px; color: var(--chart-caption); margin-top: var(--space-8); line-height: 1.6; }

.pos { color: var(--color-greenText); }
.neg { color: var(--color-redText); }

/* ── Hero ── */
.hero-main {
  display: flex; align-items: flex-end; gap: var(--space-8) var(--space-16); flex-wrap: wrap;
  padding-bottom: var(--space-16); margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--border-hairline);
}
.hero-num { font-family: "Roboto Mono", monospace; font-weight: 600; font-size: 40px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-delta { font-size: 13px; color: var(--chart-caption); padding-bottom: var(--space-6); }
.hero-delta .mono { font-weight: 600; color: var(--ink); }
/* Out-ranks studio/base.css `body.dark-mode .ssr-stat .val` so the sign colour survives dark. */
.ssr-summary .ssr-stat .val.pos { color: var(--color-greenText); }
.ssr-summary .ssr-stat .val.neg { color: var(--color-redText); }
.ssr-stat .sub { font-size: 12px; color: var(--chart-caption); white-space: nowrap; }

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

/* ── Legend ── */
.leg { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
.leg-item { display: inline-flex; align-items: center; gap: var(--space-6); font-size: 12px; color: var(--chart-caption); }
.swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.swatch-line { width: 12px; height: 2px; border-radius: 1px; display: inline-block; background: var(--chart-price); }
.swatch-dash { width: 12px; height: 0; border-bottom: 1px dashed var(--chart-cutoff); display: inline-block; }

/* Net-position pane under the cost chart: one chart read as two panes. */
.pane-h {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-12);
  font-size: 12px; color: var(--chart-caption);
  margin: var(--space-16) 0 var(--space-4); padding-top: var(--space-12); border-top: 1px solid var(--border-hairline);
}

/* ── 自動解讀 — same tagged-line recipe as the other market/* pages ── */
.read { display: flex; flex-direction: column; gap: var(--space-8); }
.read .line {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-12);
  font-size: 13px; line-height: 1.45; display: flex; gap: var(--space-8); align-items: flex-start; color: var(--ink-2);
}
.read .tag {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; line-height: 1;
  border-radius: var(--radius-micro); margin-top: 1px;
}
.tag-pos { background: var(--color-greenLight); color: var(--color-greenBlack); }
.tag-neg { background: var(--color-redLight); color: var(--color-redBlack); }
.tag-neu { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); }

/* ── Explain cards (what it is / how it is computed) ── */
/* Card shell + h2 rule come from main.css `.seo-explain`; body copy runs on ink-2
   (mockup), one step darker than the global greyMedium. */
.seo-explain h3 { font-size: 13px; font-weight: 600; margin: var(--space-16) 0 var(--space-4); color: var(--ink); }
.seo-explain p, .seo-explain li { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.seo-explain ul { margin: 0; padding-left: 18px; }
.seo-explain li + li { margin-top: var(--space-4); }
.scope { margin-top: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
.scope .cap { font-size: 12px; color: var(--chart-caption); }

/* ── Outlined control (export) ── */
.ctrl {
  height: 28px; display: inline-flex; align-items: center; padding: 0 var(--space-12);
  border: 1px solid var(--border-hairline); background: transparent; color: var(--ink);
  border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; cursor: pointer; position: relative;
  transition: background var(--motion-fast) var(--ease-standard);
}
.ctrl::before { content: ""; position: absolute; inset: -9px 0; }
.ctrl:hover { background: var(--surface-muted); }

/* ── Daily table ── */
#card_table { margin-top: var(--space-16); }
.tbl-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 420px; }
.is-wait .tbl-wrap { min-height: 420px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tbl thead th {
  position: sticky; top: 0; background: var(--surface-card); color: var(--chart-caption);
  font-weight: 600; font-size: 12px; padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--border-hairline);
  text-align: right; white-space: nowrap;
}
table.tbl thead th:first-child { text-align: left; }
table.tbl thead th .u { font-weight: 400; }
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 td.pos { color: var(--color-greenText); }
table.tbl tbody td.neg { color: var(--color-redText); }
table.tbl tbody tr:hover td { background: var(--surface-row-hover); }
table.tbl td .mini_tag { margin-left: var(--space-6); vertical-align: 1px; }

.source { font-size: 12px; color: var(--chart-caption); line-height: 1.6; margin: var(--space-24) 0 0; padding-top: var(--space-16); border-top: 1px solid var(--border-hairline); }

/* ── States ── */
.loader_wrap { display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; align-items: center; padding: var(--space-32) 0; color: var(--chart-caption); font-size: 13px; }
.loader_wrap .msg.error { color: var(--color-redText); }

/* ── RWD ── */
@media (max-width: 1300px) {
  #box_main { padding-left: 0; }
  /* RWD offcanvas button names the section */
  .titlewrap h1 { display: none; }
}
@media (max-width: 1000px) {
  .analysis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pagehead { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; flex-direction: column; align-items: stretch; }
  .toolbar .segment { width: 100%; }
  .toolbar .segment button { flex: 1; }
  .toolbar .pro_note { align-self: flex-start; }
  .hero-num { font-size: 32px; }
  table.tbl thead th { padding: var(--space-4) var(--space-8); }
  table.tbl tbody td { padding: var(--space-4) var(--space-8); }
}