/* ── twstock 個股 K 線圖分頁 — designer twstock-chart-tab spec (A). Loaded after
   cards.css + stock/main.css (same header, same `.tw_sum .tw_stock` scope); this file
   holds only the chart card: toolbar, panel, pane legends. ── */

.tw_chart .ch { position: relative; }
.tw_chart .ch .card-h { margin-bottom: var(--space-8); }

/* 設定指標 — Outlined control + Dropdown chevron. 32 visual, 44 hit. */
.tw_chart .ctrl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border-frame);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.tw_chart .ctrl::before { content: ""; position: absolute; inset: -7px -1px; }
.tw_chart .ctrl .caret {
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.tw_chart .ctrl[aria-expanded="true"] { background: var(--surface-muted); }
.tw_chart .ctrl[aria-expanded="true"] .caret { margin-top: 3px; transform: rotate(-135deg); }

/* Chart: main 360 + 96 per pane; the CSS height is the default two panes so the
   first paint doesn't jump, JS sets the real one from the saved panes. */
.tw_chart .ch-wrap { position: relative; }
.tw_chart #chart_container { position: relative; height: 552px; }
.tw_chart .ch-wrap .k-msg {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
}
.tw_chart .ch-wrap .k-msg[hidden] { display: none; }

/* 區間摘要 — scope line, then label + mono value pairs; reserves its rows so the chart
   below doesn't move when the numbers arrive. */
.tw_chart .ch-sum { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); min-height: 46px; margin: var(--space-4) 0 var(--space-12); font-size: 12px; }
.tw_chart .ch-sum .scope { flex-basis: 100%; color: var(--ink-3); }
.tw_chart .ch-sum .k { margin-right: var(--space-6); color: var(--ink-3); }
.tw_chart .ch-sum .v { font-size: 13px; color: var(--ink); white-space: nowrap; }
.tw_chart .ch-sum .v.up { color: var(--color-greenText); }
.tw_chart .ch-sum .v.dn { color: var(--color-redText); }
.tw_chart .ch-sum .v.na { color: var(--ink-3); }
.tw_chart .ch-sum .ph,
.tw_chart .ch-sum .v.ph-v { visibility: hidden; }
.tw_chart .ch-sum .since,
.tw_chart .ch-sum .ph { white-space: nowrap; }

/* Load-earlier pill — left edge of the main pane, vertically centred (JS sets top). */
.tw_chart .lpill {
  position: absolute;
  left: var(--space-8);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  max-width: calc(100% - 80px);
  min-height: 28px;
  transform: translateY(-50%);  /* centred on the main pane; long translations wrap to two lines */
  padding: var(--space-4) 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-overlay);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
  color: var(--ink-2);
}
.tw_chart .lpill[hidden] { display: none; }
/* main.css ring at 12px (border = 12 / 14 → the 2px floor); it keeps turning under reduced
   motion — canon › Loader: the rotation is the message */
.tw_chart .lpill .loader { width: 12px; height: 12px; border-width: 2px; margin: 0; }
.tw_chart .lpill button {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tw_chart .lpill button::before { content: ""; position: absolute; inset: -13px -10px; }

/* Time-window edge on a clamped pane: a dashed line at its first point, a link to the left. */
.tw_chart .cut { position: absolute; z-index: 2; width: 0; border-left: 1px dashed var(--chart-cutoff); pointer-events: none; }
.tw_chart .cutlink { position: absolute; z-index: 3; padding-right: 10px; transform: translate(-100%, -50%); font-size: 12px; white-space: nowrap; }
.tw_chart .cutlink.mid { padding-right: 0; transform: translate(-50%, -50%); }
.tw_chart .cutlink[hidden] { display: none; }
.tw_chart .cutlink button {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-greyLightMedium);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}
.tw_chart .cutlink button::before { content: ""; position: absolute; inset: -14px -8px; }

/* Pane legends — DOM over the canvas; only the tag and ✕ take the pointer. */
.tw_chart .lg {
  position: absolute;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: calc(100% - 72px);
  height: 24px;
  padding-left: var(--space-4);
  font-size: 12px;
  pointer-events: none;
}
/* name and tag never truncate (legend names are short forms; ≤768 tags too) */
.tw_chart .lg .nm { flex: none; color: var(--ink-2); white-space: nowrap; }
.tw_chart .lg .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); white-space: nowrap; }
.tw_chart .lg .ohlc .grp { white-space: nowrap; }
.tw_chart .lg .ohlc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tw_chart .lg .ohlc .mono { color: var(--ink); }
.tw_chart .lg .x,
.tw_chart .lg .since-btn { pointer-events: auto; }
/* the pane's 起日 as the upgrade-box link when the pane has no room for the edge link (phones) */
.tw_chart .lg .since-btn {
  position: relative;
  display: inline;  /* a global button rule makes it flex (block-level), which drops it to its own line */
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink-2);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-greyLightMedium);
  text-underline-offset: 3px;
  cursor: pointer;
}
/* 44 tall (18 + 13 + 13), 8 wider each side; the slot's 20 margin keeps it clear of the ✕'s 40-wide hit */
.tw_chart .lg .since-btn::before { content: ""; position: absolute; inset: -13px -8px; }
.tw_chart .lg .slot { margin-left: var(--space-16); }
.tw_chart .lg .slot:empty { display: none; }
.tw_chart .lg .x {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-micro);
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
/* 40×44 hit; reaches ~10px over the separator above, where nothing else is clickable */
.tw_chart .lg .x::before { content: ""; position: absolute; inset: -12px -10px; }
/* 觸控 44×44(canon › Fitts;圖例 ✕ 不是表格列內控件,不適用 36 放寬) */
@media (max-width: 768px), (pointer: coarse) {
  .tw_chart .lg .x::before { inset: -12px; }
}
.tw_chart .pane-msg {
  position: absolute;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-3);
  pointer-events: none;
}
.tw_chart .pane-msg[hidden] { display: none; }

/* 設定指標 panel — Dropdown › Panel + Inline switch rows (Terminal metrics). */
.tw_chart .ch-panel {
  position: absolute;
  z-index: 20;
  width: 280px;
  max-height: min(480px, 70vh);
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.tw_chart .ch-panel[hidden] { display: none; }
.tw_chart .ch-panel .group-label { margin: 0; padding: var(--space-8) 10px var(--space-4); }
.tw_chart .ch-panel .div { margin: var(--space-6) 0; border-top: 1px solid var(--border-hairline); }
.tw_chart .ch-panel .it {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 36px;
  margin: 0;
  padding: var(--space-6) 10px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.tw_chart .ch-panel .it.gated { cursor: default; }
.tw_chart .ch-panel .it .quiet_link { position: relative; font-size: 12px; }
.tw_chart .ch-panel .it .quiet_link::before { content: ""; position: absolute; inset: -12px -8px; }
/* undo .form-check's float/offset only — the switch itself is main.css's recipe */
.tw_chart .ch-panel .form-switch { display: flex; min-height: 0; margin: 0; padding: 0; }
.tw_chart .ch-panel .form-switch .form-check-input { float: none; margin: 0; }
.tw_chart .ch-panel .reset {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: var(--space-6) 10px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .tw_chart .ctrl:hover { background: var(--surface-muted); }
  .tw_chart .cutlink button:hover,
  .tw_chart .lg .since-btn:hover { color: var(--ink); text-decoration-color: var(--ink); }
  .tw_chart .lg .x:hover { background: var(--surface-muted); color: var(--ink); }
  .tw_chart .ch-panel label.it:hover,
  .tw_chart .ch-panel .reset:hover { background: var(--surface-muted); color: var(--ink); }
}

@media (pointer: coarse) {
  .tw_chart .ch-panel .it,
  .tw_chart .ch-panel .reset { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .tw_chart .ctrl,
  .tw_chart .ctrl .caret,
  .tw_chart .lg .x,
  .tw_chart .cutlink button { transition: none; }
}

@media (max-width: 768px) {
  .tw_chart .ch .card-h { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .tw_chart .ctrl { align-self: flex-start; height: 36px; }
  .tw_chart .ctrl::before { inset: -5px -1px; }
  .tw_chart #chart_container { height: 420px; }
  .tw_chart .ch-panel { width: auto; }
  .tw_chart .ch-sum { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-16); min-height: 96px; }
  .tw_chart .ch-sum .scope { grid-column: 1 / -1; }
  /* main-pane OHLC readout wraps instead of cutting the close (es / pt labels are long);
     JS caps its width at the plot area */
  .tw_chart .lg { flex-wrap: wrap; height: auto; min-height: 24px; }
  .tw_chart .lg.lg-k .ohlc { white-space: normal; }
  /* the crosshair value takes its own line, so the name row never has to give way */
  /* not clipped here: it holds the 起日 link button, whose 44 hit area would be cut */
  .tw_chart .lg .val { flex-basis: 100%; overflow: visible; }
  /* a definite width for the 100% line (shrink-to-fit would size it from the name row and wrap
     the total); the legend doesn't take the pointer, so the width blocks nothing */
  .tw_chart .lg:not(.lg-k) { width: calc(100% - 72px); }
  .tw_chart .lg .val:empty { display: none; }
  .tw_chart .ch-panel .it,
  .tw_chart .ch-panel .reset { min-height: 44px; }
}