/* R-059 T1a — Cathedral Chart System per-feature CSS module
   Loaded via /styles/chart.css (existing routes.ts:2007 generic CSS serve).
   Pairs with public/chart.js. */

:root {
  /* Level-line semantics — chart-scoped aliases of Tier 0 PnL/state constants
     (S66 Phase D — operator-ratified universal RED/GREEN/BLUE/ORANGE alignment). */
  --cthd-chart-entry: var(--global-orange);   /* wtdAvg entry */
  --cthd-chart-sl:    var(--global-red);      /* stop loss */
  --cthd-chart-tp:    var(--global-green);    /* take profit */
  --cthd-chart-even:  var(--global-blue);     /* break-even */
}

/* Chart drawer sits BELOW the dashboard topbar (64px sticky) so cathedral
   logo + status dot ("Live" indicator) remain visible. S52 operator
   feedback: preserve navigability + brand awareness while chart is open. */
.cthd-chart-drawer {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--surface-base);
  z-index: 90;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-secondary);
}

.cthd-chart-drawer.cthd-open {
  opacity: 1;
}

.cthd-chart-symbol {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

/* Strategy badge in drawer header: inherits cathedral per-strategy color
   from .ct-strip-chip-strat[data-strat="…"] rules in toolbox.css. .cthd-chart-strat
   is kept on the element only as a drawer-specific anchor for future overrides. */

.cthd-chart-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.cthd-chart-close:hover {
  background: var(--surface-overlay);
  color: var(--text-primary);
}

.cthd-chart-chip {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid;
  background: var(--surface-elevated);
}

.cthd-chip-sl   { color: var(--cthd-chart-sl);   border-color: var(--cthd-chart-sl); }
.cthd-chip-even { color: var(--cthd-chart-even); border-color: var(--cthd-chart-even); }
.cthd-chip-tp   { color: var(--cthd-chart-tp);   border-color: var(--cthd-chart-tp); }

/* R-059 T1f iteration 2 — wrap around the chart canvas so the level chip
   overlay can position relative to the chart area without conflicting
   with lightweight-charts' absolute-positioned injected child. */
.cthd-chart-canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
}

.cthd-chart-canvas {
  position: absolute;
  inset: 0;
  background: var(--surface-base);
}

.cthd-chart-canvas > div {
  /* lightweight-charts injects an absolute-positioned child */
  position: absolute !important;
  inset: 0;
}

/* R-059 T1f iteration 2 — level chip overlay in chart canvas upper-right.
   Positioned to the LEFT of the lightweight-charts price scale (~80px wide
   at the right edge) so chips don't obscure the price labels. The chips
   carry the same .cthd-level-chip / .cthd-chip-* styling they had in the
   retired footer cell 1; only the container positioning changes here. */
.cthd-chart-levels-overlay {
  position: absolute;
  top: 14px;
  right: 130px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

/* R-059 T1d.1 — chart drawer footer (revised per S52 operator visual feedback).
   Outer container = full-width black bar; inner content = centered 4-column
   grid with a max-width so columns don't sprawl edge-to-edge. Cells use the
   dashboard's system sans-serif for labels/text; only numerical values + CA
   stay in the cathedral numeric font (var(--font-numeric)) per dashboard-wide
   convention.
   Column 1 = metadata band (T1d.1; live now). Columns 2-4 are placeholder
   cells reserved for T1d.2 close% / T1d.3 ADD SOL / T1d.4 LO management. */
.cthd-chart-footer {
  background: #000;
  border-top: 1px solid var(--border-default);
  min-height: 280px;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--text-primary);
}

.cthd-chart-footer-inner {
  max-width: none;
  margin: 0;
  display: block;
  /* S53 R-059 T1f iteration 3 — full-width card (was max-width 1320px).
     Matches the dashboard's Open Positions strip near-edge-to-edge layout. */
  height: 100%;
  min-height: 280px;
  padding: 16px 20px;
  box-sizing: border-box;
}

/* R-059 T1f iteration 2 — card host. Block layout (was flex column) and
   overflow visible (was overflow-y auto) so the trade card's natural
   height — including the expandable Intel drawer below the close
   buttons — renders without being clipped or scrolled. Footer expansion
   (cthd-footer-expanded → 70vh min-height) gives the room for the
   drawer to be visible naturally. */
.cthd-card-host {
  min-width: 0;
  overflow: visible;
}

.cthd-card-host .tc-card {
  margin-bottom: 0;
  width: 100%;
}

/* R-059 T1f — suppress the recursive chart-icon button on the rendered
   trade card when it's drawn INSIDE the chart drawer. Clicking it would
   attempt to open a chart drawer for a trade whose drawer is already open. */
.cthd-chart-drawer .cthd-card-chart-btn {
  display: none !important;
}

/* R-059 T1f — dynamic footer height when the Intel drawer (inside the
   rendered trade card) is expanded. Chart canvas (flex:1 above) shrinks
   to accommodate. Smooth transition so the resize doesn't snap-jump. */
.cthd-chart-footer {
  transition: min-height 0.25s ease-out;
}

.cthd-chart-drawer.cthd-footer-expanded .cthd-chart-footer {
  min-height: 70vh;
}

.cthd-chart-drawer.cthd-footer-expanded .cthd-chart-footer-inner {
  min-height: calc(70vh - 32px);
}

/* S52 polish — each footer cell is its own encapsulated box (1px subtle gray
   border + slight inner contrast). Replaces the prior column-divider pattern.
   Padding standardized across all cells. */
.cthd-footer-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
  min-width: 0;
  box-sizing: border-box;
}

.cthd-footer-cell-placeholder {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  opacity: 0.42;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.6;
}

/* S52 polish — metadata cell rebuilt around the trade-card pattern. Top:
   horizontal flowing header (ticker + strategy badge + wallet + CA) that uses
   the full cell width so nothing truncates. Below: tight horizontal data strip
   (MC · Vol · Age · Value · PnL). Replaces the prior 2-col × 4-row grid that
   forced truncation under the old column width. */
.cthd-footer-cell-metadata {
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
}

.cthd-meta-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cthd-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.cthd-meta-strip > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
  line-height: 1.2;
}

/* Token name (mirrors trade-card .tc-token-name treatment) */
.cthd-meta-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cthd-meta-ca {
  font-family: var(--font-numeric);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
}

.cthd-meta-ca:hover {
  color: #ffffff;
}

.cthd-meta-ca .cthd-meta-ca-copy {
  margin-left: 8px;
  opacity: 0.55;
  font-size: 12px;
}

.cthd-meta-ca:hover .cthd-meta-ca-copy {
  opacity: 1;
}

.cthd-meta-stratwallet {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Data strip items (MC · Vol · Age · Value · PnL). Labels small + sans;
   values mono per cathedral-wide convention. */
.cthd-meta-mc,
.cthd-meta-vol,
.cthd-meta-age,
.cthd-meta-sol,
.cthd-meta-pnl {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* S52 scope expansion — PnL color coding (green positive / red negative). */
.cthd-meta-pnl .cthd-meta-value.cthd-meta-pnl-positive {
  color: var(--global-green);
}
.cthd-meta-pnl .cthd-meta-value.cthd-meta-pnl-negative {
  color: var(--global-red);
}

.cthd-meta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cthd-meta-value {
  font-family: var(--font-numeric);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.cthd-meta-vol.cthd-meta-vol-placeholder .cthd-meta-value {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* S52 polish — ADD SOL + Close 2×2 grid merged into a single ACTIONS cell.
   ADD SOL sits on top at full cell width; Close 10/25 + Close 50/100 form a
   2×2 grid directly beneath, also at full cell width. All four close buttons
   inherit `.btn` `.btn-danger` `.btn-sm` from index.html with a chart-drawer
   override on radius to match dashboard-standard medium radius. */
.cthd-footer-cell-actions {
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}

.cthd-footer-cell-actions .cthd-add-sol-btn {
  width: 100%;
  border-radius: var(--radius-md) !important;
  white-space: nowrap;
}

.cthd-close-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
}

.cthd-close-buttons .btn {
  white-space: nowrap;
  width: 100%;
}

.cthd-close-buttons .btn-danger {
  border-radius: var(--radius-md);
}

/* T1d.4 / S52 polish — LO management cell. Layout: "+ Add Limit Order"
   button on top (matches ADD SOL family — same `.btn` + `.btn-add` + `.btn-sm`
   classes), then "PENDING LIMIT ORDERS" header label, then empty state or
   the LO table. The add button is always visible while the trade is active,
   regardless of whether any LOs are currently pending. */
.cthd-footer-cell-lo {
  align-items: stretch;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
  gap: 8px;
}

.cthd-lo-add-btn {
  width: 100%;
  border-radius: var(--radius-md) !important;
  white-space: nowrap;
}

.cthd-lo-header {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.cthd-lo-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cthd-lo-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
  text-align: center;
  opacity: 0.7;
}

.cthd-lo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cthd-lo-table .cthd-lo-th {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 4px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cthd-lo-row td {
  padding: 4px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.cthd-lo-row:last-child td {
  border-bottom: none;
}

.cthd-lo-cell-seq {
  font-family: var(--font-numeric);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  width: 24px;
}

.cthd-lo-cell-price,
.cthd-lo-cell-sol,
.cthd-lo-cell-dd {
  font-family: var(--font-numeric);
  font-size: 11px;
  color: #ffffff;
  font-weight: 500;
}

.cthd-lo-cell-cancel {
  text-align: right;
  width: 56px;
}

.cthd-lo-cancel {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cthd-chart-sl);
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid rgba(204, 43, 43, 0.35);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.cthd-lo-cancel:hover {
  color: #ffffff;
  background: rgba(204, 43, 43, 0.15);
  border-color: rgba(204, 43, 43, 0.7);
}

.cthd-lo-cancel-none {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Trade ID hidden visually in T1d.1. */
.cthd-chart-tradeid {
  display: none;
}

/* ===========================================================================
   S52 REVISION (post-T1d.2 visual feedback)
   ─────────────────────────────────────────────────────────────────────────
   • Top header + horizontal chip row REMOVED from rendered DOM at S52;
     CSS rules removed from this file at S59 per D-180 cleanup.
   • Floating × close button replaces in-header close.
   • SL/EVEN/TP chips relocated to vertical stack in footer's new leftmost
     cell (.cthd-footer-cell-levels). Order top→bottom: TP / EVEN / SL —
     naturally follows price direction.
   • Strategy badge moves from top header into footer metadata band
     (`.cthd-meta-strat-badge` replaces plain "RUNNER" text).
   • Footer grid: 5 columns now (LEVELS | METADATA | ADD SOL | CLOSE % | LO).
     Column order per operator-ratified workflow: ADD before CLOSE.
   =========================================================================== */

/* S52 polish — × close button moved out of the chart band (was overprinting
   right-edge price labels) into the upper-right of the FOOTER section. Anchor
   element changed from drawer root to .cthd-chart-footer (see position:relative
   on the footer container below). */
.cthd-chart-footer {
  position: relative;
}

.cthd-chart-close-float {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 20;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

.cthd-chart-close-float:hover {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.40);
  color: #ffffff;
}

/* Level-chip stack cell — vertical 3-chip stack on the left rail of footer.
   S52 polish — chips restructured to stacked label/value layout (label on top,
   value below) so chips become squarer + establish a clear visual hierarchy
   (descriptor smaller, value prominent). */
.cthd-footer-cell-levels {
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 6px;
}

.cthd-level-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 50px;
  padding: 4px 6px;
  gap: 1px;
  border: 1px solid;
  border-radius: var(--radius-md);
  background: #000000;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.cthd-level-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.78;
  line-height: 1;
}

.cthd-level-value {
  font-family: var(--font-numeric);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.15;
}

/* Color inheritance for level chips — reuses .cthd-chip-{sl,even,tp} color
   rules from the legacy chip row; explicit selector wins specificity for
   the new .cthd-level-chip layer. */
.cthd-level-chip.cthd-chip-tp   { color: var(--cthd-chart-tp);   border-color: var(--cthd-chart-tp); }
.cthd-level-chip.cthd-chip-even { color: var(--cthd-chart-even); border-color: var(--cthd-chart-even); }
.cthd-level-chip.cthd-chip-sl   { color: var(--cthd-chart-sl);   border-color: var(--cthd-chart-sl); }

/* Strategy badge inside metadata band (replaces plain "RUNNER" text).
   Reuses .ct-strip-chip-strat[data-strat="…"] color rules from toolbox.css;
   layout-only overrides here. */
.cthd-meta-stratwallet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.cthd-meta-strat-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.45);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cthd-meta-wallet-name {
  color: var(--text-secondary);
}

/* Make Open Positions strip chips look clickable */
.ct-strip-chip[data-trade-id] {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ct-strip-chip[data-trade-id]:hover {
  border-color: var(--accent);
}

/* Trade card chart trigger icon button — simple monochrome SVG, matches copy ⧉ glyph treatment */
.cthd-card-chart-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 6px;
  color: var(--text-primary);
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.cthd-card-chart-btn:hover {
  opacity: 0.7;
}

/* ===========================================================================
   S53 R-059 T1d POLISH — footer 4→6 cell restructure
   ─────────────────────────────────────────────────────────────────────────
   Container 2 (metadata) split into three new containers:
     2. .cthd-footer-cell-header — inline horizontal: name + wallet badge
        + strategy badge + green CA + ⧉ copy icon
     3. .cthd-footer-cell-stats  — vertical stack: MC / Vol / Age
     4. .cthd-footer-cell-money  — vertical stack: Value / PnL / Deployed
   Footer min-height bumped 25% (190 → 240). Inner max-width bumped 1180 →
   1440. Grid template now 6 columns (see .cthd-chart-footer-inner above).
   Legacy .cthd-footer-cell-metadata / .cthd-meta-header / .cthd-meta-strip
   rules retained inert (Phase D audit cleanup per D-180 precedent).
   =========================================================================== */

.cthd-footer-cell-header {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 14px 14px;
  overflow: hidden;
  min-width: 0;
}

.cthd-meta-header-row1 {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cthd-meta-header-row2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.cthd-footer-cell-header .cthd-meta-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

.cthd-meta-wallet-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.cthd-footer-cell-header .cthd-meta-strat-badge {
  flex-shrink: 0;
}

.cthd-footer-cell-header .cthd-meta-ca {
  color: var(--global-green);
  flex-shrink: 0;
}

.cthd-footer-cell-header .cthd-meta-ca:hover {
  color: #ffffff;
}

.cthd-footer-cell-stats,
.cthd-footer-cell-money {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 6px;
  padding: 14px 14px;
}

.cthd-meta-stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  line-height: 1.2;
}

.cthd-meta-deployed .cthd-meta-value {
  color: var(--global-green);
}

/* ===========================================================================
   S54 R-059 T1e.3 + T1e.4 — TIMEFRAME TOGGLE BAR + MODE-CYCLE BUTTON
   ─────────────────────────────────────────────────────────────────────────
   T1e.3: thin band above chart canvas hosting 8 timeframe buttons centered.
   T1e.4: mode-cycle button at the far right of the same bar. Layout = 3-col
   grid: [ left spacer | centered timeframe cluster | right mode-cycle ].
   Mode-cycle button always-filled (label is the current mode); preserves
   the semantic-color reserve (red/green/blue/orange for level lines).
   =========================================================================== */
.cthd-chart-timeframe-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex: 0 0 36px;
  padding: 4px 12px;
  background: transparent;
  box-sizing: border-box;
}

.cthd-chart-timeframe-spacer {
  /* Empty left column — balances the right-column mode-cycle so the center
     timeframe cluster sits at the geometric center of the bar. */
}

.cthd-chart-timeframe-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cthd-chart-mode-cycle-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cthd-chart-timeframe-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0;
  min-width: 38px;
  height: 26px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.cthd-chart-timeframe-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
}

.cthd-chart-timeframe-btn.is-active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.cthd-chart-timeframe-btn.is-active:hover {
  background: rgba(255, 255, 255, 0.20);
}

/* T1e.4 mode-cycle button — matches active timeframe button styling per
   Q-2 (always-filled; label IS the current mode). Slightly wider to
   accommodate `MC $` / `Px $` / `Px ◎` labels. */
.cthd-chart-mode-cycle {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 8px;
  min-width: 46px;
  height: 26px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.cthd-chart-mode-cycle:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.36);
}

/* T1e.4 stale-rate banner — Q-6: visible only when Mode 3 active + rate
   >5min old (or rate unavailable). Positioned upper-left of canvas-wrap,
   floating over the chart canvas. Muted amber styling using the cathedral's
   ENTRY orange (--cthd-chart-entry) at low alpha for the background. */
.cthd-chart-rate-stale-banner {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 12;
  display: none;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(245, 125, 39, 0.55);
  border-radius: var(--radius-sm);
  background: rgba(245, 125, 39, 0.12);
  color: var(--cthd-chart-entry);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  pointer-events: none;
}

.cthd-chart-rate-stale-banner.is-visible {
  display: flex;
}

/* R-059 T1e.5 — external history four-state UX (Q-7).
   Single DOM element occupies the upper-left slot (just below the
   rate-stale-banner at top:42px). State class swaps content + styling:
     • state-loading   — subtle pulsing dot + "Loading history…"
     • state-error     — amber (matches rate-stale-banner) + retry ETA
     • state-too-new   — amber + cathedral observation start time
     • state-exhausted — quiet, persistent "← oldest available history" */
.cthd-chart-history-status {
  position: absolute;
  top: 42px;
  left: 14px;
  z-index: 12;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  pointer-events: none;
  max-width: 60%;
}
.cthd-chart-history-status.state-loading {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}
.cthd-chart-history-status.state-loading::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: cthd-chart-history-pulse 1.1s ease-in-out infinite;
}
.cthd-chart-history-status.state-error,
.cthd-chart-history-status.state-too-new {
  display: flex;
  border: 1px solid rgba(245, 125, 39, 0.55);
  background: rgba(245, 125, 39, 0.12);
  color: var(--cthd-chart-entry);
}
.cthd-chart-history-status.state-exhausted {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.4px;
}
@keyframes cthd-chart-history-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 0.9;  transform: scale(1.0); }
}