/* ════════════════════════════════════════════════════════════════════════
   TW Market — 台股預期未來每日除息點數 / 正逆價差還原 (market/dividend_points).
   Shell recipes (pagehead/card/states/RWD) copied from the sibling
   market/*.css pages (txf.css/margin.css); new pieces are the hero equation
   (A + B = C), the month calendar grid + cell detail (desktop popover —
   hover previews, click pins; mobile tap opens the inline panel), and the
   legend/badge dots.
   ALL color / radius / shadow / motion via main.css tokens. Daily magnitude
   is a cell-bottom bar (.cal-cell .bar, --color-data-1) whose width JS sets
   inline — √ scale + 8% floor over a fixed 80-pt denominator (see the
   template's barW()); length is a self-explanatory magnitude encoding where
   the old heat-tint alpha ramp was not.
   ════════════════════════════════════════════════════════════════════════ */

#box_main {
  flex: 1;
  min-width: 0;
  min-height: 800px;
  padding-top: 14px;
  padding-left: 20px;
  max-width: 1160px;
}

/* ── 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: 4px; }
.titlewrap h1 { margin: 0; color: var(--color-black); }
body.dark-mode .titlewrap h1 { color: var(--color-darkText); }
.titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }

/* ── Card ── */
.card { background: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); margin-bottom: var(--space-24); }
body.dark-mode .card { background: var(--color-darkCard); box-shadow: none; }
body.dark-mode .is-wait .skel { background: var(--color-darkCard); } /* skel matches the dark card it covers (studio/base.css keeps the light default) */
.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, .card-h h2 { margin: 0; color: var(--color-black); } /* h2 = FAQ SEO 區段標題(視覺跳級尺寸在 studio/base.css) */
body.dark-mode .card-h h6, body.dark-mode .card-h h2 { color: var(--color-darkText); }
.card-h .meta { font-size: 12px; color: var(--color-greyMedium); }

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

/* ── HERO — 正逆價差還原, "A + B = C" equation, not a 3-column comparison.
   eq-part = input chip (light elevation); eq-focus = output chip (heavier,
   brand shadow — the one number this card exists to teach). ── */
.hero-eq { display: flex; align-items: stretch; gap: var(--space-16); flex-wrap: wrap; }
.eq-part { flex: 1 1 160px; min-width: 150px; background: var(--color-pureWhite); border-radius: var(--radius-md); padding: var(--space-12) var(--space-16); box-shadow: var(--shadow-sm); }
body.dark-mode .eq-part { background: var(--color-darkCard); border: 1px solid var(--color-darkBorder); box-shadow: none; }
.eq-part .lab { font-size: 12px; color: var(--color-greyMedium); margin-bottom: 4px; }
.eq-part .val { font-size: 22px; font-weight: 500; }
.eq-part .sub { font-size: 11px; color: var(--color-greyMedium); margin-top: 4px; }
.eq-op { display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 500; color: var(--color-greyLightMedium); padding: 0 4px; }
.eq-focus { flex: 1.4 1 220px; min-width: 200px; background: var(--color-pureWhite); border-radius: var(--radius-md); padding: var(--space-16); box-shadow: var(--shadow-brand); }
body.dark-mode .eq-focus { background: var(--color-darkBorder); box-shadow: none; }
.eq-focus .lab { font-size: 12px; color: var(--color-greyMedium); margin-bottom: 4px; }
.eq-focus .val { font-size: 34px; font-weight: 600; line-height: 1.1; }
.eq-focus .sub { font-size: 12px; color: var(--color-greyMedium); margin-top: 6px; }
.sample-note { font-size: 11px; color: var(--color-greyMedium); margin-top: var(--space-12); }

/* ── Integrity / honesty banner — resting (grey) and degraded (red) states.
   Used both under the hero (the window the hero equation itself quotes) and
   above the calendar (the currently viewed month). ── */
.integrity { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; font-size: 12.5px; color: var(--color-greyMedium); }
.integrity:not(:empty) { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--color-greyLight); }
body.dark-mode .integrity { border-top-color: var(--color-darkBorder); }
.integrity .cov { font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums; }
.integrity.degraded {
  background: var(--color-redLight); color: var(--color-redBlack); border: none; border-top: none;
  border-radius: var(--radius-sm); padding: var(--space-8) var(--space-12); margin-top: var(--space-8);
}
.integrity.degraded .cov { color: var(--color-redBlack); font-weight: 600; }

/* ── Calendar legend ── */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--color-greyMedium); margin-top: var(--space-4); }
.legend .item { display: flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; }
.dot.d-tx { background: var(--color-data-2); }
.dot.d-wk { background: var(--color-data-3); }
.dot.d-sg { background: var(--color-data-4); }

/* ── Month nav ── */
.cal-nav { display: flex; align-items: center; gap: var(--space-8); }
.cal-nav button {
  width: 30px; height: 30px; border: 1px solid var(--color-greyLight); background: transparent;
  border-radius: var(--radius-xs); cursor: pointer; color: var(--color-greyDark); font-size: 14px;
  transition: background var(--motion-fast) var(--ease-standard);
}
body.dark-mode .cal-nav button { border-color: var(--color-darkBorder); color: var(--color-greyLightMedium); }
.cal-nav button:hover { background: var(--color-greyLight); }
body.dark-mode .cal-nav button:hover { background: var(--color-darkBorder); }
.cal-nav .ym { font-size: 14px; font-weight: 600; min-width: 88px; text-align: center; }

/* ── Month grid — Editorial-Terminal dense data zone (static high-density
   grid of daily figures): 1px flat-depth borders, not a shadow card, per
   canon. ── */
.cal-grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--color-greyLight); border-radius: var(--radius-xs); overflow: hidden; min-height: 300px; }
body.dark-mode .cal-grid { border-color: var(--color-darkBorder); }
.cal-dow { background: var(--color-surface); font-size: 11px; color: var(--color-greyMedium); text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--color-greyLight); font-weight: 600; }
body.dark-mode .cal-dow { background: var(--color-darkCard); border-color: var(--color-darkBorder); }
.cal-cell { position: relative; min-height: 104px; padding: 6px 8px; border-right: 1px solid var(--color-greyLight); border-bottom: 1px solid var(--color-greyLight); background: var(--color-pureWhite); }
body.dark-mode .cal-cell { background: var(--color-darkCard); border-color: var(--color-darkBorder); }
.cal-cell.out { background: var(--color-white); } /* one ramp step below in-month pureWhite — bg carries the in/out distinction */
body.dark-mode .cal-cell.out { background: var(--color-darkBody); }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--color-black); }
body.dark-mode .cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--color-darkText); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--color-black); }
body.dark-mode .cal-cell.selected { box-shadow: inset 0 0 0 2px var(--color-darkText); }
.cal-cell.clickable { cursor: pointer; }
.cal-cell .d { font-size: 12px; color: var(--color-greyMedium); }
.cal-cell .pts { font-size: 15px; font-weight: 500; margin-top: 4px; color: var(--color-black); }
body.dark-mode .cal-cell .pts { color: var(--color-darkText); }
.cal-cell .pts.est { border-bottom: 1px dotted var(--color-greyLightMedium); cursor: help; display: inline-block; }
body.dark-mode .cal-cell .pts.est { border-bottom-color: var(--color-darkBorder); }
.cal-cell .cum { font-size: 10.5px; color: var(--color-greyMedium); margin-top: 2px; }
.cal-cell .badges { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 3px; }
/* Cell-bottom magnitude bar — width (∝ daily points) set inline by JS. Adjacent
   bars read as a histogram embedded in the month grid. */
.cal-cell .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--color-data-1); }

/* ── Desktop detail popover — hover = transient preview, click = pinned
   (mobile uses the inline panel below instead). ── */
.cal-pop { position: absolute; z-index: 20; background: var(--color-pureWhite); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: var(--space-12); width: 220px; font-size: 12.5px; color: var(--color-greyDark); display: none; }
body.dark-mode .cal-pop { background: var(--color-darkBorder); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); color: var(--color-greyLightMedium); }
.cal-pop.open { display: block; }
.cal-pop .t { font-weight: 600; color: var(--color-black); margin-bottom: 6px; }
body.dark-mode .cal-pop .t { color: var(--color-darkText); }
.cal-pop .r { display: flex; justify-content: space-between; padding: 3px 0; }
.cal-pop .tag { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); margin-top: 6px; }
.cal-pop .tag.est { background: var(--color-greyLight); color: var(--color-greyDark); }
body.dark-mode .cal-pop .tag.est { background: var(--color-darkCard); color: var(--color-greyLightMedium); }
.cal-pop .tag.act { background: var(--color-greenLight); color: var(--color-greenBlack); }

/* ── Mobile inline detail panel — replaces the floating popover on ≤768.
   Appears under the grid on tap: keeps the calendar's spatial layout while
   deferring the 4-field detail instead of cramming it into a 46px cell. ── */
.mobile-detail { display: none; }
.mobile-detail.open { display: block; margin-top: var(--space-12); padding: var(--space-12); background: var(--color-pureWhite); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
body.dark-mode .mobile-detail.open { background: var(--color-darkBorder); box-shadow: none; }
.mobile-detail .t { font-weight: 600; font-size: 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.mobile-detail .t .close { font-size: 12px; color: var(--color-greyMedium); cursor: pointer; padding: 4px 8px; }
.mobile-detail .r { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-top: 1px solid var(--color-greyLight); }
body.dark-mode .mobile-detail .r { border-top-color: var(--color-darkBorder); }
.mobile-detail .r:first-of-type { border-top: none; }
.mobile-detail .tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); margin-top: 8px; }
.mobile-detail .tag.est { background: var(--color-greyLight); color: var(--color-greyDark); }
body.dark-mode .mobile-detail .tag.est { background: var(--color-darkCard); color: var(--color-greyLightMedium); }
.mobile-detail .tag.act { background: var(--color-greenLight); color: var(--color-greenBlack); }

/* ── Detail table — same sortable table.tbl recipe as the sibling
   market/*.css pages (arrow CSS itself is main.css's shared recipe; never
   re-declared here). ── */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tbl thead th { background: var(--color-surface); color: var(--color-greyMedium); font-weight: 600; font-size: 12px; padding: var(--space-8); border-bottom: 1px solid var(--color-greyLight); text-align: right; white-space: nowrap; }
table.tbl thead th:first-child { text-align: left; }
body.dark-mode table.tbl thead th { background: var(--color-darkCard); border-bottom-color: var(--color-darkBorder); }
table.tbl tbody td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--color-greyLight); font-family: "Roboto Mono", monospace; color: var(--color-black); white-space: nowrap; }
table.tbl tbody td:first-child { text-align: left; }
body.dark-mode table.tbl tbody td { color: var(--color-darkText); border-bottom-color: var(--color-darkBorder); }
table.tbl tbody tr:hover td { background: var(--color-white); }
body.dark-mode table.tbl tbody tr:hover td { background: var(--color-darkBorder); }
.badge-sm { font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); display: inline-block; white-space: nowrap; }
.badge-sm.est { background: var(--color-greyLight); color: var(--color-greyDark); }
body.dark-mode .badge-sm.est { background: var(--color-darkBorder); color: var(--color-greyLightMedium); }
.badge-sm.act { background: var(--color-greenLight); color: var(--color-greenBlack); }

/* ── FAQ — canon Accordion(手風琴)・Terminal metrics,嵌在頁面卡內
   (手風琴自身無卡 chrome;hairline 待在卡 padding 內)。Bootstrap collapse
   驅動 a11y;其預設 caret 圖示/藍色 focus・active chrome/未 token 化的
   高度動畫時長依 canon 全數覆寫。── */
.faq { margin-top: var(--space-32); }
.faq .accordion,
.faq .accordion-item,
.faq .accordion-header,
.faq .accordion-collapse { background: transparent; border: 0; }
.faq .accordion-item { border-top: 1px solid var(--color-greyLight); }
.faq .accordion-item:first-child { border-top: 0; } /* 卡內首項不畫外框 hairline */
body.dark-mode .faq .accordion-item { border-top-color: var(--color-darkBorder); }

.faq .accordion-header { margin: 0; }
.faq .accordion-button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px;
  padding: var(--space-12) 0;
  background: transparent; border: 0; box-shadow: none;
  color: var(--color-black);
  font-size: 13px; font-weight: 600; line-height: 1.5;
  text-align: left; cursor: pointer;
}
body.dark-mode .faq .accordion-button { color: var(--color-darkText); }
.faq .accordion-button:hover { color: var(--color-greyDark); }
body.dark-mode .faq .accordion-button:hover { color: var(--color-greyLightMedium); }
.faq .accordion-button::after { display: none; } /* Bootstrap 預設 caret 圖示 */
.faq .accordion-button:not(.collapsed) { background: transparent; color: var(--color-black); box-shadow: none; }
body.dark-mode .faq .accordion-button:not(.collapsed) { color: var(--color-darkText); }
.faq .accordion-button:focus { box-shadow: none; } /* 壓掉 Bootstrap 藍 ring;鍵盤 focus 走 main.css 全域 :focus-visible */

/* Canon CSS chevron(Dropdown spec:7px 盒/1.6px 邊)——greyMedium 在 dark
   由 main.css 墨階重映射,不需另寫。 */
.faq .faq_chevron {
  flex-shrink: 0; width: 7px; height: 7px; margin-left: var(--space-16);
  border-right: 1.6px solid var(--color-greyMedium);
  border-bottom: 1.6px solid var(--color-greyMedium);
  transform: rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.faq .accordion-button:not(.collapsed) .faq_chevron { transform: rotate(-135deg); }

.faq .accordion-body { padding: 0 0 var(--space-12); font-size: 13px; line-height: 1.7; color: var(--color-greyDark); }
body.dark-mode .faq .accordion-body { color: var(--color-greyLightMedium); }

/* Bootstrap 出廠的 collapse 高度動畫時長是寫死的——token 化(canon Motion) */
.faq .accordion-collapse.collapsing { transition: height var(--motion-base) var(--ease-standard); }

@media (prefers-reduced-motion: reduce) {
  .faq .accordion-collapse.collapsing,
  .faq .faq_chevron { transition: none; }
}

/* ── Related pages ── */
.linklist { display: flex; flex-direction: column; }
.linklist a { display: block; padding: 10px 0; font-size: 13px; color: var(--color-black); text-decoration: none; border-bottom: 1px solid var(--color-greyLight); }
.linklist a:last-child { border-bottom: none; padding-bottom: 0; }
.linklist a:hover { text-decoration: underline; }
body.dark-mode .linklist a { color: var(--color-darkText); border-bottom-color: var(--color-darkBorder); }

/* ── 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(--color-greyMedium); font-size: 13px; }
.loader_wrap .msg.error { color: var(--color-redText); }
.retry { height: 30px; padding: 0 14px; border: 1px solid var(--color-greyLight); background: transparent; border-radius: var(--radius-sm); font: 500 12px "Roboto Mono", monospace; color: var(--color-greyDark); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard); }
body.dark-mode .retry { border-color: var(--color-darkBorder); color: var(--color-darkText); }
.retry:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── RWD ── */
@media (max-width: 1300px) {
  #box_container { padding-top: 60px !important; }
  #box_main { padding-left: 0; }
  /* RWD offcanvas button names the section — drop the page title */
  .titlewrap h1 { display: none; }
}
@media (max-width: 768px) {
  .pagehead { flex-direction: column; align-items: stretch; }
  .hero-eq { flex-direction: column; }
  .eq-part { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
  .eq-part .lab { margin-bottom: 0; }
  .eq-part .sub { margin-top: 0; }
  .eq-op { align-self: center; padding: 4px 0; font-size: 20px; }
  .eq-focus { order: 99; flex: 0 0 auto; }
  table.tbl { min-width: 560px; }

  /* ── Compact grid: date + magnitude bar + tiny settlement dots only — no
     inline point value, no cumulative caption (those move into the
     tap-opened .mobile-detail panel). The bar is the single (self-evident)
     magnitude cue here, and doubles as the has-points marker; the grid stays
     the visual anchor (bar clustering, month nav) instead of collapsing to a
     list. ── */
  .cal-grid { min-height: 0; }
  .cal-cell { min-height: 46px; padding: 4px 4px 3px; }
  /* .pts.est repeated at matching specificity — the base `.pts.est { display:
     inline-block }` rule (3 classes) otherwise outranks a plain `.pts` hide
     here regardless of media query, since specificity beats source order. */
  .cal-cell .pts, .cal-cell .pts.est, .cal-cell .cum { display: none; }
  .cal-cell .badges { right: 3px; bottom: 7px; gap: 2px; } /* bottom clears the bar's 4px edge */
  .cal-cell .badges .dot { width: 5px; height: 5px; }
  .cal-cell .bar { height: 4px; }
  .cal-pop { display: none !important; } /* mobile uses the inline panel, never the floating popover */
}