/* Chart card and the floating tools over the chart canvas (DESIGN.md section 7 for the canvas; the
 * series colours themselves are drawn by JS and deliberately unchanged, per Rod 2026-10-13). */

.chart-card { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; outline: none; }
.chart-card__head { display: flex; align-items: center; min-width: 0; }
.chart-card__status { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; min-height: 32px; }
.chart-card__status .status { flex: 1 1 auto; }
/* The Live chip is the feed switch and carries the feed dot, so the status text drops its own. */
.chart-card__status .status::before { display: none; }

/* Live switch as a chip: a real checkbox (role=switch) inside the label keeps keyboard,
   plan locks (closest('label')) and websocket.js's .checked writes working unchanged. */
.live-chip {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); flex-shrink: 0;
  min-height: 32px; padding: var(--space-xxs) var(--space-md) var(--space-xxs) var(--space-sm);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  color: var(--text-secondary); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg);
  cursor: pointer; user-select: none;
}
.live-chip:hover { background: var(--hover-wash); color: var(--text); }
.live-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.live-chip__dot { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; border: 1px solid currentColor; flex-shrink: 0; }
.live-chip:has(input:checked) { border-color: var(--primary); color: var(--text); }
.live-chip:has(input:checked) .live-chip__dot { background: var(--primary); border-color: var(--primary); animation: ts-pulse 1.8s ease-in-out infinite; }
.live-chip:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--primary); outline-offset: var(--focus-ring-gap); }

/* Feed / data status (dashboard.js writes textContent + "status connecting|connected|disconnected"). */
.status {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; max-width: 100%;
  font-size: var(--fs-body-sm); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.status::before {
  content: ""; width: var(--space-sm); height: var(--space-sm); border-radius: 50%; flex-shrink: 0;
  background: var(--text-secondary);
}
.status.connecting::before { background: var(--warning); animation: ts-pulse 1.4s ease-in-out infinite; }
.status.connected::before { background: var(--primary); }
.status.disconnected { color: var(--error); }
.status.disconnected::before { background: var(--error); }

#chart-container {
  position: relative; width: 100%; height: var(--chart-canvas-height);
  border-radius: var(--radius-sm); background: var(--chart-bg); overflow: hidden;
}


/* Loading chips over the chart (dashboard.js toggles style.display). */
.chart-loading-chip {
  position: absolute; left: var(--space-sm); z-index: var(--z-chart-overlay);
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--surface-float); color: var(--text-secondary);
  font-size: var(--fs-label-md); pointer-events: none; white-space: nowrap;
}
.chart-loading-chip--bars { top: var(--space-sm); }
.chart-loading-chip--indicators { bottom: var(--space-xl); }

/* Empty / error state over the chart canvas. */
.chart-state {
  position: absolute; inset: 0; z-index: var(--z-chart-overlay);
  background: var(--chart-bg); gap: var(--space-sm);
}
.chart-state__title { font-size: var(--fs-body-lg); color: var(--text); }

/* ---- Floating pill toolbar ---- */
.chart-toolbar-pill {
  position: absolute; right: 72px; top: var(--space-sm); z-index: var(--z-chart-overlay);
  display: flex; align-items: center; overflow: hidden; max-width: calc(100% - 80px);
  background: var(--surface-float); border: 1px solid var(--outline); border-radius: var(--radius-pill);
  user-select: none; white-space: nowrap;
}
.chart-btn-group { display: flex; align-items: center; flex-shrink: 0; }
.chart-pill-sep { width: 1px; height: 18px; background: var(--outline); flex-shrink: 0; }
.chart-pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xxs); flex-shrink: 0;
  /* Shares --toolbar-btn-pad-* with .dt-btn so both floating toolbars match in size; the mobile
     values are the touch-reliable ones (CLAUDE.md dead-hit-target gotcha). */
  padding: var(--toolbar-btn-pad-v) var(--toolbar-btn-pad-h);
  background: transparent; color: var(--text-secondary); border: 0; line-height: 0; cursor: pointer;
  transition: color var(--motion-fast) var(--ease-emphasized), background-color var(--motion-fast) var(--ease-emphasized);
}
.chart-pill-btn:first-child { padding-left: calc(var(--toolbar-btn-pad-h) + var(--toolbar-btn-edge-bonus)); }
.chart-pill-btn:last-child { padding-right: calc(var(--toolbar-btn-pad-h) + var(--toolbar-btn-edge-bonus)); }
.chart-pill-btn:hover { color: var(--text); background: var(--hover-wash); }
.chart-pill-btn:focus-visible { outline-offset: -3px; }
.chart-pill-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.chart-pill-chevron { width: 5px !important; height: 8px !important; opacity: 0.6; transition: transform var(--motion-normal) var(--ease-emphasized); }
.chart-btn-group.is-expanded > .chart-pill-group-btn { color: var(--primary); }
.chart-btn-group.is-expanded > .chart-pill-group-btn .chart-pill-chevron { transform: rotate(180deg); opacity: 1; }
.chart-pill-group-items {
  display: flex; align-items: center; overflow: hidden; max-width: 0;
  transition: max-width var(--motion-normal) var(--ease-emphasized);
}
.chart-btn-group.is-expanded .chart-pill-group-items {
  /* Measured from the row's own scrollWidth by chart.js before expanding; 480px is only a fallback. */
  max-width: var(--group-items-max-width, 480px);
}
.chart-pill-group-items > .chart-pill-btn:first-child { border-left: 1px solid var(--outline-variant); padding-left: var(--toolbar-btn-pad-h); }
/* Off and plan-locked tools still do something when tapped, so they stay at >= 3:1 against the card
   (0.7 of --text-secondary over --surface is about 3.2:1); the lock glyph marks a locked one. */
.chart-pill-btn--off { opacity: 0.7; }
.chart-pill-btn--off:hover { opacity: 0.9; }
/* Active tool: lime, the "on" colour of the language. */
.chart-pill-btn--active, .chart-pill-btn--active:hover { color: var(--primary); opacity: 1; background: var(--hover-wash); }
.magnet-badge { font-size: 8px; font-weight: 700; line-height: 1; color: var(--primary); margin-left: -2px; align-self: flex-end; margin-bottom: 1px; }
.chart-pill-groups {
  display: flex; align-items: center; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  /* Measured by chart.js to fit the content exactly; 600px is only a fallback. */
  max-width: var(--groups-max-width, 600px);
  transition: max-width var(--motion-normal) var(--ease-emphasized);
}
.chart-pill-groups::-webkit-scrollbar { display: none; }
.chart-toolbar-pill.is-collapsed .chart-pill-groups { max-width: 0; }
.chart-pill-collapse-sep { transition: opacity var(--motion-fast) ease, max-width var(--motion-normal) var(--ease-emphasized); }
.chart-toolbar-pill.is-collapsed .chart-pill-collapse-sep { max-width: 0; opacity: 0; }
.chart-pill-btn.chart-pill-collapse-btn { padding-left: calc(var(--space-sm) + var(--space-xxs)); padding-right: calc(var(--space-sm) + var(--space-xxs)); }
.chart-pill-collapse-icon { width: 8px !important; height: 13px !important; transition: transform var(--motion-normal) var(--ease-emphasized); }
.chart-toolbar-pill.is-collapsed .chart-pill-collapse-icon { transform: rotate(180deg); }

/* Plan-locked controls (free tier) */
.chart-pill-btn--locked { opacity: 0.7; position: relative; }
.chart-pill-btn--locked::after { content: "\1F512"; position: absolute; right: 1px; bottom: 0; font-size: 8px; line-height: 1; }
.plan-locked-control { opacity: 0.7; }
/* The Live chip's text is already secondary grey; dimming it further fails contrast (axe), so a
   locked chip keeps full opacity and a dashed outline, and the lock glyph says why. */
.live-chip.plan-locked-control { opacity: 1; border-style: dashed; }
.plan-locked-control::after { content: " \1F512"; font-size: 0.8em; }

/* ---- Drawing mode ---- */
#chart-container.chart-drawing-active, #chart-container.chart-measuring { cursor: crosshair; }
.chart-drawing-hint {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 11; pointer-events: none;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--surface-float); border: 1px solid var(--outline);
  font-size: var(--fs-label-md); color: var(--text); white-space: nowrap;
  transition: opacity var(--motion-fast) ease;
}
.chart-drawing-hint.hidden { opacity: 0; pointer-events: none; }
#chart-group-draw .chart-pill-group-btn { position: relative; }
#chart-group-draw .chart-pill-group-btn::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--warning); display: none; pointer-events: none;
}
#chart-group-draw .chart-pill-group-btn[data-drawings-hidden="true"]::after,
#chart-group-draw .chart-pill-group-btn[data-drawings-locked="true"]::after { display: block; }

/* ---- Drawing selection toolbar ---- */
.drawing-toolbar {
  position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-chart-overlay);
  flex-direction: column; align-items: center;
  background: var(--surface-float); border: 1px solid var(--outline); border-radius: 22px; user-select: none;
}
.dt-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  /* Sized from --toolbar-btn-pad-*: every px here is real touch-target margin (CLAUDE.md). */
  padding: var(--toolbar-btn-pad-v) var(--toolbar-btn-pad-h);
  background: transparent; color: var(--text-secondary); border: 0; line-height: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) var(--ease-emphasized), background-color var(--motion-fast) var(--ease-emphasized);
}
/* The edge buttons round their own outer corners to match the toolbar's cap (the toolbar can't clip:
   the width/style popouts intentionally render outside its box). */
.drawing-toolbar > .dt-btn:first-child { padding-top: calc(var(--toolbar-btn-pad-v) + var(--toolbar-btn-edge-bonus)); border-radius: 22px 22px 0 0; }
.drawing-toolbar > .dt-btn:last-child { padding-bottom: calc(var(--toolbar-btn-pad-v) + var(--toolbar-btn-edge-bonus)); border-radius: 0 0 22px 22px; }
.dt-btn:hover { color: var(--text); background: var(--hover-wash); }
.dt-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
/* Same specificity as :hover so a stuck touch-hover can't mask the active state (CLAUDE.md). */
.dt-btn--active, .dt-btn--active:hover { color: var(--primary); background: var(--hover-wash); }
.dt-btn--danger { color: var(--error); }
.dt-btn--danger:hover { color: var(--error); background: var(--hover-wash); }
.dt-group { position: relative; display: flex; align-items: center; }
.dt-group-items {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%) translateX(-6px); z-index: 1;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: var(--surface-float); border: 1px solid var(--outline); border-radius: 22px;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.dt-group.is-expanded .dt-group-items { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.dt-group-items > .dt-btn:first-child { padding-left: calc(var(--toolbar-btn-pad-h) + var(--toolbar-btn-edge-bonus)); }
.dt-group-items > .dt-btn:last-child { padding-right: calc(var(--toolbar-btn-pad-h) + var(--toolbar-btn-edge-bonus)); }
.dt-group.is-expanded > .dt-group-btn { color: var(--text); }
.dt-sep { width: 100%; height: 1px; background: var(--outline); flex-shrink: 0; }

/* Colour trigger in the drawing toolbar: the button fills the whole slot (no dead margin, CLAUDE.md);
   the visible swatch is a small dot via ::before. */
#dt-color { padding: 0; width: 42px; height: 38px; }
#dt-color.dt-color--leading { height: 42px; border-radius: 22px 22px 0 0; }

/* ---- Ghost corner buttons ---- */
#fullscreen-btn, #go-to-realtime-btn {
  position: absolute; bottom: 6px; z-index: var(--z-chart-overlay);
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  background: var(--surface-float); border: 1px solid var(--outline); color: var(--text-secondary);
  align-items: center; justify-content: center; cursor: pointer;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
/* Fullscreen sits just above the time axis (about 28 px tall) so it never covers the first date label. */
#fullscreen-btn { left: var(--space-sm); bottom: 36px; display: flex; }
#go-to-realtime-btn { right: var(--space-sm); display: none; }
#fullscreen-btn:hover, #go-to-realtime-btn:hover { color: var(--text); border-color: var(--text-secondary); }
#fullscreen-btn svg, #go-to-realtime-btn svg { width: 14px; height: 14px; display: block; }

/* Chart tab switcher in full screen (ui/fullscreen-tabs.js): bottom left, beside the exit-full-screen button,
   and its list opens upwards. The top rows belong to the toolbar pill and the drawing toolbar, which can
   reach nearly the whole width when expanded (a landscape phone), so nothing of this sits up there. */
.fs-tabs { position: absolute; bottom: 36px; left: 52px; z-index: var(--z-chart-overlay); max-width: calc(100% - 64px); }
.fs-tabs__chip {
  display: inline-flex; align-items: center; gap: var(--space-xs); max-width: 100%; min-height: 36px;
  padding: 0 var(--space-md); background: var(--surface-float); color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--radius-pill);
  font: inherit; font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); cursor: pointer;
}
.fs-tabs__chip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-secondary); }
.fs-tabs__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-tabs__list { position: absolute; left: 0; bottom: calc(100% + var(--space-xs)); min-width: 220px; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.fs-tabs__row { display: flex; align-items: center; }
.fs-tabs__pick { flex: 1 1 auto; min-width: 0; }
.fs-tabs__pick[aria-checked="true"] .menu__label { font-weight: var(--fw-label-lg); color: var(--text); }
.fs-tabs__pick .menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-tabs__close {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--touch-target); height: var(--touch-target); background: none; border: 0; color: var(--text-secondary); cursor: pointer;
}
.fs-tabs__close svg { width: 14px; height: 14px; }
.fs-tabs__close:hover { background: var(--hover-wash); color: var(--text); }

/* Fullscreen: the chart container fills the screen on the canvas colour. */
#chart-container:fullscreen { border-radius: 0; background: var(--chart-bg); }

/* Portrait: push the drawing toolbar below the top pill so they don't overlap. */
@media (orientation: portrait) {
  .drawing-toolbar { top: 56px; }
}
@media (max-width: 767px) {
  #chart-container { height: var(--chart-canvas-height-mobile); }
}
/* Short landscape screens (a phone on its side, the Hermes iframe): the chart fits the viewport below the
   sticky top bar (--topbar-offset is its measured height, ui/topbar.js), with a 280 px floor. */
@media (orientation: landscape) and (max-height: 560px) {
  #chart-container { height: max(280px, calc(100dvh - var(--topbar-offset) - var(--space-md))); }
}