/* Scoped copy of the chart companion's app.css.
 *
 * Every selector is confined to .cc-scope, and the companion's :root
 * variables now sit on that element instead. Left global this repaints the
 * whole vault -- it carries its own body, theme and reset. Scoping is the
 * only edit; the declarations are the companion's, so the chart looks like
 * the companion's.
 *
 * Regenerate with scratchpad/scope_css.py after copying app.css again.
 */
/* Chart companion chrome, built on the vault's design tokens so the two
   windows read as one product. Values mirror dashboard/static/css/style.css. */
.cc-scope {
  --bg-primary: #0c0c0e;
  --bg-secondary: #131316;
  --bg-tertiary: #18181c;
  --border-color: #27272a;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent-blue: #4a9eff;
  --accent-green: #4ade80;
  --accent-red: #f87171;
  --accent-yellow: #eab308;
  --accent-purple: #a78bfa;
  --radius: 10px;
  --radius-sm: 8px;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Consolas, monospace;

  --hve: #ff8c1a;
  --hv1: #ffd24d;
}.cc-scope * { box-sizing: border-box; margin: 0; padding: 0; }.cc-scope, .cc-scope { height: 100%; }.cc-scope {
  color: var(--text-primary); overflow: hidden;
  font: 13px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  user-select: none;
  container: companion-chart / inline-size;
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse 100% 85% at 100% 0%, rgba(74,158,255,.10), transparent 72%),
    radial-gradient(ellipse 85% 70% at 0% 100%, rgba(74,158,255,.06), transparent 68%);
  background-repeat: no-repeat;
}/* Gutter, so the panel floats on the page the way the vault's do. */
.cc-scope #app { height: 100vh; padding: 10px; }.cc-scope .panel {
  display: flex; flex-direction: column; height: 100%;
  background: rgba(24,24,28,.72);
  backdrop-filter: blur(2px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}/* ---- section header ---- */
.cc-scope .panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-color);
  flex-shrink: 0; gap: 14px; flex-wrap: wrap;
}.cc-scope .panel-header h2 {
  font-family: var(--font-mono);
  font-size: 1rem; font-weight: 600; letter-spacing: 1px;
  color: var(--text-primary);
}/* ---- quote line ---- */
.cc-scope .quote-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border-color);
}.cc-scope #symbol {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 700; letter-spacing: .5px; color: var(--text-primary);
}.cc-scope #exchange {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted);
}.cc-scope .timeframe-select {
  display: none;
  min-width: 54px;
  padding: 3px 20px 3px 7px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--accent-blue);
  font: 600 11px var(--font-mono);
  cursor: pointer;
}.cc-scope #netchg, .cc-scope #pctchg {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}.cc-scope .up { color: var(--accent-green); }.cc-scope .down { color: var(--accent-red); }/* Muted label, coloured value — the vault's stat idiom, not filled pills. */
.cc-scope .stats { display: flex; align-items: baseline; gap: 0; margin-left: auto; min-width: 0; flex-wrap: wrap; }
/* A group is one question: how big, how much it moves, what is coming.
 *
 * Spreading these across the row was tried on the desk companion and was
 * worse -- evenly spaced pairs read as six scattered things and the last one
 * ended up stranded at the edge. They are one object: a block held to the
 * right, ruled into groups, so the gap after the ticker is deliberate space
 * rather than a lane of nothing. */
.cc-scope .stat-group { display: inline-flex; align-items: baseline; gap: 14px; padding: 0 14px; }
.cc-scope .stat-group:last-child { padding-right: 0; }
.cc-scope .stat-group + .stat-group { border-left: 1px solid var(--border-color); }
/* An icon in a row of words. Square, so it reads as a control rather than a
   very short verb, and sized to the text buttons it sits between. */
.cc-scope .cc-tools .tool-icon { width: 28px; padding: 0; font-size: 14px; line-height: 1; text-align: center; }.cc-scope .stat { display: inline-flex; align-items: baseline; gap: 6px; }.cc-scope .stat i {
  font-style: normal; font-size: 10px; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}.cc-scope .stat b {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}.cc-scope .v-blue { color: var(--accent-blue)   !important; }.cc-scope .v-yellow { color: var(--accent-yellow) !important; }/* ---- tabs + legend ---- */
.cc-scope .tab-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 0 12px; border-bottom: 1px solid var(--border-color);
}.cc-scope .timeframes { display: flex; }.cc-scope .timeframes button {
  padding: 7px 13px; background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary); cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 500;
  transition: color .2s, border-color .2s;
}.cc-scope .timeframes button:hover { color: var(--text-primary); }.cc-scope .timeframes button.active {
  color: var(--accent-blue); border-bottom-color: var(--accent-blue);
}@container companion-chart (max-width: 760px) {
  .cc-scope .quote-row > .timeframe-select { display: inline-block; }
  .cc-scope .tab-row > .timeframes { display: none; }
}.cc-scope .legend { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; padding: 4px 0; }.cc-scope .leg {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}.cc-scope .leg .swatch { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }.cc-scope .leg.off { opacity: .3; }.cc-scope .leg .val { color: var(--text-muted); }/* ---- tool buttons ---- */
.cc-scope .tools { display: flex; align-items: center; gap: 4px; }.cc-scope .tools button {
  background: transparent; color: var(--text-secondary); cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 5px 11px; font: inherit; font-size: 11px; font-weight: 500;
  transition: all .15s;
}.cc-scope .tools button:hover { color: var(--text-primary); border-color: #3a3a40; }.cc-scope .tools button.active {
  color: var(--accent-blue); border-color: var(--accent-blue);
  background: rgba(74,158,255,.12);
}.cc-scope .tools button.danger:hover {
  color: var(--accent-red); border-color: var(--accent-red);
  background: rgba(248,113,113,.10);
}.cc-scope .tool-sep { width: 1px; height: 16px; background: var(--border-color); margin: 0 4px; }/* ---- panes ---- *//* Backdrop lifted from the vault's body::before / ::after — a blue glow off
   the top-right and bottom-left over a fine dot grid. The chart canvas is
   transparent, so this shows through behind the candles.
   Dot alpha is pre-multiplied: the vault paints .04 dots on a layer set to
   opacity .35, which lands at roughly .015 here. */
.cc-scope .backdrop {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.015) 1px, transparent 0),
    radial-gradient(ellipse 100% 85% at 100% 0%, rgba(74,158,255,.10), transparent 72%),
    radial-gradient(ellipse 85% 70% at 0% 100%, rgba(74,158,255,.06), transparent 68%);
  background-size: 28px 28px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}.cc-scope #mainWrap {
  position: relative; flex: 1 1 auto; min-height: 0;
}.cc-scope #chart { position: absolute; inset: 0; z-index: 1; }.cc-scope #overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }.cc-scope #watermark {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
  color: #ffffff; opacity: .05; line-height: 1.2;
  font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  /* The stamp sizes against this pane, not the screen: vw units made a
     full-width workspace chart wear a 170px symbol plus four lines --
     most of the chart. Absolute with inset 0, so size containment costs
     nothing. */
  container-type: size;
}.cc-scope .wm-symbol { font-size: clamp(28px, 9cqw, 96px); font-weight: 300; letter-spacing: 6px; }.cc-scope .wm-name { font-size: clamp(12px, 2.2cqw, 24px); font-weight: 300; letter-spacing: 1px; }.cc-scope .wm-sector { font-size: clamp(10px, 1.7cqw, 18px); font-weight: 300; letter-spacing: .5px; }.cc-scope .wm-industry { font-size: clamp(10px, 1.7cqw, 18px); font-weight: 300; letter-spacing: .5px; }/* A shade smaller than the industry above it: the theme is the finer
   reading of the same fact, and reads as a sub-line rather than a peer. */
.cc-scope .wm-theme { font-size: clamp(9px, 1.5cqw, 16px); font-weight: 300; letter-spacing: .5px; }.cc-scope #volWrap {
  position: relative; height: 128px; flex: 0 0 auto;
  border-top: 1px solid var(--border-color);
}.cc-scope #volchart { position: absolute; inset: 0; }.cc-scope .pane-label {
  position: absolute; left: 10px; top: 5px; z-index: 3;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted); pointer-events: none; letter-spacing: .3px;
}.cc-scope .hve-key { color: var(--hve); font-weight: 700; }.cc-scope .hv1-key { color: var(--hv1); font-weight: 700; }/* ---- draggable price-scale margins ---- */
.cc-scope .scale-handle {
  position: absolute; z-index: 5; width: 16px; height: 16px;
  transform: translateY(-50%); cursor: ns-resize;
  display: flex; align-items: center; justify-content: flex-end;
  opacity: .5; transition: opacity .12s;
}.cc-scope .scale-handle::before {
  content: ''; width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid var(--text-muted);
}.cc-scope #mainWrap:hover .scale-handle { opacity: .9; }.cc-scope .scale-handle:hover::before, .cc-scope .scale-handle.dragging::before { border-right-color: var(--accent-blue); }.cc-scope .scale-handle.dragging { opacity: 1; }.cc-scope #marginTip {
  position: absolute; right: 6px; padding: 2px 7px; z-index: 6;
  background: var(--accent-blue); color: #fff; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%); display: none; pointer-events: none;
}.cc-scope #marginTip.show { display: block; }.cc-scope #hint {
  position: absolute; left: 12px; top: 10px; padding: 4px 9px; z-index: 6;
  background: rgba(74,158,255,.92); color: #fff; border-radius: var(--radius-sm);
  font-size: 11px; display: none;
}.cc-scope #hint.show { display: block; }/* ---- type-to-search ---- */
.cc-scope #searchBox {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  /* Wide enough for a symbol and the company name beside it, and no wider.
     This is a lookup, not a dialog. */
  z-index: 8; display: none; align-items: center; width: 290px;
  /* The suggestion list is a second row inside the box rather than a floating
     panel under it, so the whole thing stays one object on screen. */
  flex-wrap: wrap;
  padding: 7px 8px 5px; border-radius: var(--radius);
  background: rgba(19,19,22,.97); border: 1px solid var(--accent-blue);
  box-shadow: 0 12px 38px rgba(0,0,0,.72);
}.cc-scope #searchBox.show { display: flex; }.cc-scope #searchInput {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 5px 8px; width: 100%;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; outline: none;
}.cc-scope #searchInput:focus { border-color: var(--accent-blue); }.cc-scope #searchInput.notfound { border-color: var(--accent-red); color: var(--accent-red); }.cc-scope .search-hint {
  flex-basis: 100%; margin-top: 4px; text-align: right;
  font-size: 9px; color: var(--text-muted);
}/* ---- symbol suggestions ---- */
.cc-scope #searchResults {
  display: none; flex-basis: 100%; max-height: 320px; overflow-y: auto;
  margin-top: 5px; padding-top: 4px;
  border-top: 1px solid var(--border-color);
}.cc-scope #searchResults.show { display: block; }.cc-scope .sr-row {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 2px 4px; border-radius: var(--radius-sm);
}.cc-scope .sr-row b {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .5px; color: var(--text-primary);
  /* Every name starts at the same x, whatever the symbol's length. */
  flex: 0 0 46px;
}.cc-scope .sr-row i {
  font-style: normal; font-size: 10px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}/* Pushed to the right edge of the row, so a column of them is scannable. */
.cc-scope .sr-dead {
  margin-left: auto; padding-left: 8px; text-decoration: none;
  font-size: 9px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent-yellow); opacity: .75; white-space: nowrap;
}.cc-scope .sr-row.on { background: rgba(58,124,214,.22); }.cc-scope .sr-row.on b { color: var(--accent-blue); }.cc-scope .sr-row.on i { color: var(--text-secondary); }/* ---- horizontal scrollbar (left-drag on the plot is the measure tool) ---- */
.cc-scope #hscroll {
  position: relative; height: 14px; flex-shrink: 0; cursor: pointer;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}.cc-scope #hthumb {
  position: absolute; top: 3px; height: 8px; min-width: 24px;
  background: #3a3a42; border-radius: 4px; cursor: grab;
}.cc-scope #hthumb:hover { background: #4a4a55; }.cc-scope #hthumb.grabbing { background: var(--accent-blue); cursor: grabbing; }/* The status footer is gone; #readout and #updated survive it as hidden
   nodes, so they need no rules of their own. *//* ---- earnings callout ---- */
.cc-scope #earningsModal {
  position: absolute; z-index: 20; display: none;
  width: 430px; padding: 12px 14px;
  background: rgba(19,19,22,.985);
  border: 1px solid var(--border-color); border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(0,0,0,.75);
  user-select: text;
}.cc-scope #earningsModal.show { display: block; }.cc-scope .em-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }.cc-scope .em-ticker {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}.cc-scope .em-date { font-size: 11px; color: var(--text-muted); }.cc-scope .em-gap {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent-green);
}.cc-scope .em-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; line-height: 1; padding: 2px 4px;
}.cc-scope .em-close:hover { color: var(--text-primary); }.cc-scope .em-headline {
  font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
  margin-bottom: 10px;
}.cc-scope .em-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }.cc-scope .em-table th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); font-weight: 500; text-align: right;
  padding: 0 0 4px; border-bottom: 1px solid var(--border-color);
}.cc-scope .em-table th:first-child { text-align: left; }.cc-scope .em-table td {
  font-size: 11.5px; padding: 5px 0; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}.cc-scope .em-table td:first-child {
  text-align: left; color: var(--text-muted);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px;
}.cc-scope .em-table .beat { color: var(--accent-green); }.cc-scope .em-table .miss { color: var(--accent-red); }.cc-scope .em-transcript {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-color);
  font-size: 10.5px; line-height: 1.45; color: var(--text-muted);
  max-height: 108px; overflow-y: auto; white-space: pre-wrap;
}.cc-scope .em-transcript:empty { display: none; }.cc-scope .em-link {
  display: inline-block; margin-top: 10px;
  font-size: 11px; color: var(--accent-blue); text-decoration: none;
}.cc-scope .em-link:hover { text-decoration: underline; }/* Extended-hours price, shown only outside regular trading. */
.cc-scope #extchg {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 4px;
  background: rgba(74,158,255,.12); border: 1px solid rgba(74,158,255,.32);
}.cc-scope #extchg:empty { display: none; }.cc-scope #extchg .ext-tag {
  font-size: 9px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); margin-right: 5px;
}/* thinkorswim HVEHV1Bars readout, inline after the HVE/HV1 keys. Each half is
   tinted to match the volume bar it refers to. */
.cc-scope #hvLabel { margin-left: 10px; font-weight: 600; }.cc-scope #hvLabel:empty { display: none; }.cc-scope #hvLabel .hv-e { color: var(--hve); }.cc-scope #hvLabel .hv-1 { color: var(--hv1); }.cc-scope #hvLabel .hv-sep { color: var(--border-color); margin: 0 7px; }/* Gap study grid: R by entry method and EMA exit, MFE per exit below. */
.cc-scope .em-stats {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border-color);
}.cc-scope .em-stats.hidden { display: none; }.cc-scope .es-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }.cc-scope .es-table th {
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 500; text-align: right;
  padding: 0 0 4px 12px; border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}.cc-scope .es-table th:first-child { text-align: left; padding-left: 0; }.cc-scope .es-table td {
  font-size: 11px; padding: 4px 0 4px 12px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  white-space: nowrap;
}.cc-scope .es-table td:first-child {
  text-align: left; padding-left: 0; color: var(--text-secondary);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 10.5px;
  white-space: nowrap;   /* "1M ORB" was wrapping onto two lines */
}.cc-scope .es-table td.lvl { color: var(--text-muted); }.cc-scope .es-table td.win { color: var(--accent-green); }.cc-scope .es-table td.loss { color: var(--accent-red); }.cc-scope .es-foot td {
  border-top: 1px solid var(--border-color); padding: 5px 0 0 12px;
  color: var(--text-muted); font-size: 10.5px;
}.cc-scope .es-foot .mfe-pct { color: var(--accent-green); }.cc-scope .es-foot .mfe-pct.down { color: var(--accent-red); }.cc-scope .es-foot .mfe-days { color: var(--text-muted); font-size: 9.5px; }/* Event kind badge: earnings report vs any other gap catalyst. */
.cc-scope .em-kind {
  font-size: 9px; letter-spacing: .7px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}.cc-scope .em-kind:empty { display: none; }.cc-scope .em-kind.is-e { color: var(--accent-purple); background: rgba(167,139,250,.14); }.cc-scope .em-kind.is-g { color: var(--text-muted); background: rgba(113,113,122,.16); }/* Data provider + Schwab sign-in countdown, in the status bar. */
.cc-scope #provider {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted); white-space: nowrap;
}.cc-scope #provider:empty { display: none; }.cc-scope #provider.warn {
  color: var(--accent-yellow); font-weight: 600;
}/* Live bid / ask. Only meaningful while streaming, so it hides otherwise. */
.cc-scope #bidask {
  font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--text-muted);
  white-space: nowrap;
}.cc-scope #bidask:empty { display: none; }.cc-scope #bidask .ba-bid { color: var(--accent-red); }.cc-scope #bidask .ba-ask { color: var(--accent-green); }.cc-scope #bidask .ba-sep { color: #3a3a42; margin: 0 3px; }/* A wide spread is a cost worth noticing on a thin name. */
.cc-scope #bidask .ba-spread { margin-left: 6px; color: var(--text-muted); }.cc-scope #bidask .ba-spread.wide { color: var(--accent-yellow); font-weight: 600; }/* Text annotations are editable, so they need a real input. */
.cc-scope #textEntry {
  position: absolute; z-index: 10; display: none;
  background: rgba(19,19,22,.98); border: 1px solid var(--accent-blue);
  border-radius: var(--radius-sm); padding: 6px 8px;
}.cc-scope #textEntry.show { display: block; }.cc-scope #textEntry input {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 4px;
  padding: 4px 8px; width: 190px; font: inherit; font-size: 12px; outline: none;
}/* Guidance has a period rather than an estimate/actual pair, so its label
   spans those two columns instead of leaving them blank. */
.cc-scope .em-table .em-guide-period { text-align: center; color: var(--text-secondary); }.cc-scope .em-table .em-row-guide.hidden { display: none; }/* Premarket and after-hours shading. Sits between the backdrop and the chart
   so the bands tint the background rather than washing over the candles. */
.cc-scope #sessions { position: absolute; inset: 0; pointer-events: none; z-index: 0; }/* Crosshair readout. Parked top-left like TC2000's, and out of the way of the
   pointer entirely — it reports on the bar you are holding, it is not a
   tooltip that needs to chase the cursor. */
.cc-scope #databox {
  position: absolute; top: 6px; left: 6px; z-index: 7; display: none;
  min-width: 176px; padding: 5px 0 4px;
  background: rgba(10,10,12,.93);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.45;
  color: var(--text-primary); pointer-events: none;
  box-shadow: 0 8px 26px rgba(0,0,0,.55);
}.cc-scope #databox.show { display: block; }.cc-scope #databox .db-row {
  display: flex; justify-content: space-between; gap: 14px; padding: 0 8px;
}.cc-scope #databox .db-row .k { color: var(--text-secondary); white-space: nowrap; }.cc-scope #databox .db-row .v { font-variant-numeric: tabular-nums; white-space: nowrap; }.cc-scope #databox .db-head {
  padding: 0 8px 3px; color: var(--accent-blue);
  border-bottom: 1px solid var(--border-color); margin-bottom: 3px;
}.cc-scope #databox .db-sep { border-top: 1px solid var(--border-color); margin: 4px 0 3px; }.cc-scope #databox .db-indent .k { padding-left: 10px; }.cc-scope #databox .db-sym .k { color: var(--text-primary); }.cc-scope #databox .up { color: var(--accent-green); }.cc-scope #databox .down { color: var(--accent-red); }/* Share / dollar switch, sized to sit inside the volume pane's label rather
   than beside it — the pane header is already a single line of small type. */
.cc-scope #volModeToggle {
  /* .pane-label is click-through so it never blocks panning the chart beneath
     it. This is the one thing in there that has to be clickable. */
  pointer-events: auto;
  margin-right: 8px; padding: 0 6px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; line-height: 17px;
}.cc-scope #volModeToggle:hover { color: var(--accent-blue); border-color: var(--accent-blue); }.cc-scope #volModeToggle .on { color: var(--accent-blue); }/* ---- watchlists ---- *//* A pane rather than a modal: the point is to sit alongside the chart and be
   walked with the keyboard, not to be opened and dismissed. */
.cc-scope #watchlists {
  flex: 0 0 var(--wl-height, 260px); min-height: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-mono); font-size: 11px;
  /* Its own surface. The dock behind it is 98% opaque, which is enough to read
     candles through a row of small text. */
  background: var(--bg-primary);
}.cc-scope .wl-head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-bottom: 1px solid var(--border-color);
}.cc-scope .wl-title {
  flex: 1; color: var(--text-muted); letter-spacing: .4px; font-size: 10px;
  text-transform: uppercase;
}.cc-scope .wl-head button {
  background: transparent; border: none; cursor: pointer; padding: 0 4px;
  color: var(--text-secondary); font-size: 12px; line-height: 1;
}.cc-scope .wl-head button:hover { color: var(--accent-blue); }.cc-scope #wlBody { flex: 1; overflow-y: auto; padding: 4px 0 10px; }.cc-scope .wl-list { margin-bottom: 6px; }.cc-scope .wl-name {
  display: flex; align-items: center; gap: 5px; padding: 4px 8px;
  color: var(--text-secondary); font-size: 10px; letter-spacing: .3px;
  text-transform: uppercase; cursor: pointer;
}.cc-scope .wl-name:hover { color: var(--text-primary); }.cc-scope .wl-name .wl-count { color: var(--text-muted); }.cc-scope .wl-name .wl-del { margin-left: auto; opacity: 0; color: var(--accent-red); }.cc-scope .wl-name:hover .wl-del { opacity: .7; }/* Rows read as a table rather than a stack of links -- the terminal's
   watchlist treatment, brought over: a hairline under each row, the symbol
   carrying the weight, and a hover quiet enough that the selected row is still
   the one that stands out. The blue was doing both jobs before, so hovering
   anywhere made two rows look chosen. */
.cc-scope .wl-ticker {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 8px 3px 16px; cursor: pointer;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.045);
}.cc-scope .wl-list .wl-ticker:last-of-type { border-bottom: 0; }/* Fixed width, so the figures start at the same x on every row. The cells are
   pushed along by the symbol rather than placed, so W's numbers were sitting a
   character-width left of PRCH's. */
.cc-scope .wl-ticker > span:first-child {
  font-weight: 600; letter-spacing: .02em;
  min-width: 54px; flex: 0 0 auto;
}.cc-scope .wl-ticker:hover { background: rgba(255,255,255,.04); }.cc-scope .wl-ticker.active { background: rgba(74,158,255,.12); }.cc-scope .wl-ticker.active > span:first-child { color: var(--accent-blue); }.cc-scope .wl-ticker .wl-note { color: var(--text-muted); font-size: 10px; }.cc-scope .wl-ticker .wl-x { margin-left: auto; opacity: 0; color: var(--text-muted); }.cc-scope .wl-ticker:hover .wl-x { opacity: 1; }.cc-scope .wl-ticker .wl-x:hover { color: var(--accent-red); }.cc-scope .wl-add-row { padding: 3px 8px 3px 16px; }.cc-scope .wl-add-row input {
  width: 100%; background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 2px 5px; font: inherit; font-size: 10px; outline: none;
}.cc-scope .wl-add-row input:focus { border-color: var(--accent-blue); }/* Tab out of the way when the pane is hidden. */
.cc-scope #wlShow {
  position: absolute; top: 8px; left: 0; z-index: 8;
  background: rgba(19,19,22,.9); color: var(--text-muted);
  border: 1px solid var(--border-color); border-left: none;
  border-radius: 0 4px 4px 0; cursor: pointer;
  padding: 5px 4px; font-size: 11px; line-height: 1;
}.cc-scope #wlShow:hover { color: var(--accent-blue); }.cc-scope #wlShow.hidden { display: none; }/* Widens itself once there are columns to show -- a symbol list needs 190px,
   a table of figures does not fit in it. */
.cc-scope #watchlists.has-columns { width: 420px; }.cc-scope .wl-ticker .wl-cells {
  margin-left: auto; display: flex; gap: 10px;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}.cc-scope .wl-ticker .wl-cell { min-width: 58px; text-align: right; }.cc-scope .wl-ticker .wl-cell.stale { color: var(--accent-red); opacity: .65; }.cc-scope .wl-colhead {
  display: flex; padding: 2px 8px 3px 16px;
  color: var(--text-muted); font-size: 9px; text-transform: uppercase;
  letter-spacing: .3px; border-bottom: 1px solid var(--border-color);
}.cc-scope .wl-colhead .wl-cells { margin-left: auto; display: flex; gap: 10px; }.cc-scope .wl-colhead .wl-cell {
  min-width: 58px; text-align: right; cursor: pointer;
}.cc-scope .wl-colhead .wl-cell:hover { color: var(--accent-blue); }.cc-scope .wl-colhead .wl-cell.sorted { color: var(--accent-blue); }.cc-scope #wlColEditor {
  display: none; padding: 8px; gap: 5px;
  border-top: 1px solid var(--border-color); background: rgba(12,12,14,.9);
}.cc-scope #wlColEditor.show { display: block; }.cc-scope .wlc-row { margin-bottom: 5px; }.cc-scope .wlc-row input {
  width: 100%; background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 3px 6px; font: inherit; font-size: 10px; outline: none;
}.cc-scope .wlc-row input:focus { border-color: var(--accent-blue); }.cc-scope .wlc-msg { font-size: 9px; min-height: 12px; color: var(--accent-red); }.cc-scope .wlc-msg.ok { color: var(--accent-green); }.cc-scope .wlc-actions { display: flex; gap: 5px; }.cc-scope .wlc-actions button {
  background: transparent; color: var(--text-secondary); cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 3px 8px; font: inherit; font-size: 10px;
}.cc-scope .wlc-actions button:hover { color: var(--accent-blue); border-color: var(--accent-blue); }.cc-scope #wlcList { margin-top: 7px; }.cc-scope .wlc-item {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 9px; color: var(--text-muted); padding: 2px 0;
}.cc-scope .wlc-item b { color: var(--text-secondary); font-weight: 600; }.cc-scope .wlc-item code { color: var(--accent-blue); font-size: 9px; }.cc-scope .wlc-item .wlc-x { margin-left: auto; cursor: pointer; color: var(--accent-red); opacity: .6; }.cc-scope .wlc-item .wlc-x:hover { opacity: 1; }/* ---- scans ---- *//* Wide and central rather than a side pane: a result set is a table, and a
   table of a hundred rows needs the room. */
.cc-scope #scanPane {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  font-family: var(--font-mono); font-size: 11px;
}.cc-scope .sp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--border-color);
}.cc-scope .sp-title {
  flex: 1; color: var(--text-muted); font-size: 10px;
  text-transform: uppercase; letter-spacing: .5px;
}.cc-scope .sp-head input[type="date"] {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 3px 6px; font: inherit; font-size: 10px;
}.cc-scope .sp-head button, .cc-scope .sp-editor button {
  background: transparent; color: var(--text-secondary); cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 3px 10px; font: inherit; font-size: 10px;
}.cc-scope .sp-head button:hover, .cc-scope .sp-editor button:hover {
  color: var(--accent-blue); border-color: var(--accent-blue);
}.cc-scope #spRun { color: var(--accent-blue); border-color: var(--accent-blue); }.cc-scope .sp-editor {
  display: flex; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid var(--border-color);
}.cc-scope .sp-editor input {
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 4px 8px; font: inherit; font-size: 11px; outline: none;
}.cc-scope #spName { width: 150px; }.cc-scope #spFormula { flex: 1; }.cc-scope .sp-editor input:focus { border-color: var(--accent-blue); }.cc-scope .sp-saved {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 7px 12px;
  border-bottom: 1px solid var(--border-color);
}.cc-scope .sp-saved .sp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 2px 7px; cursor: pointer; color: var(--text-secondary);
  font-size: 10px;
}.cc-scope .sp-saved .sp-chip:hover { color: var(--accent-blue); border-color: var(--accent-blue); }.cc-scope .sp-saved .sp-chip .sp-x { color: var(--accent-red); opacity: .5; }.cc-scope .sp-saved .sp-chip .sp-x:hover { opacity: 1; }.cc-scope .sp-msg { padding: 6px 12px; font-size: 10px; color: var(--text-muted); min-height: 14px; }.cc-scope .sp-msg.error { color: var(--accent-red); }/* A scan against a past date is the exception and has to look like one. It
   read the same as a live scan before, so one left in the date box quietly
   answered every question afterwards about last Tuesday. */
.cc-scope .sp-msg.historical { color: var(--accent-yellow); font-weight: 600; }/* Toggled from JS -- a date input's value attribute does not follow what was
   typed into it, so there is no selector that can see this. */
.cc-scope #spDate.dated { border-color: var(--accent-yellow); color: var(--accent-yellow); }.cc-scope .sp-results { flex: 1; overflow: auto; padding: 0 12px 12px; }.cc-scope .sp-results table { width: 100%; border-collapse: collapse; }.cc-scope .sp-results th {
  position: sticky; top: 0; background: rgba(12,12,14,.98);
  text-align: right; padding: 5px 8px; font-size: 9px; font-weight: 500;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--border-color); cursor: pointer;
}.cc-scope .sp-results th:first-child, .cc-scope .sp-results td:first-child { text-align: left; }.cc-scope .sp-results th.sorted { color: var(--accent-blue); }.cc-scope .sp-results td {
  padding: 3px 8px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--text-primary); border-bottom: 1px solid rgba(39,39,42,.4);
}.cc-scope .sp-results tr { cursor: pointer; }.cc-scope .sp-results tr:hover td { background: rgba(74,158,255,.10); }.cc-scope .sp-results tr.active td { background: rgba(74,158,255,.20); color: var(--accent-blue); }.cc-scope #spShow {
  position: absolute; top: 40px; left: 0; z-index: 8;
  background: rgba(19,19,22,.9); color: var(--text-muted);
  border: 1px solid var(--border-color); border-left: none;
  border-radius: 0 4px 4px 0; cursor: pointer;
  padding: 4px 5px; font-size: 9px; line-height: 1;
  font-family: var(--font-mono);
}.cc-scope #spShow:hover { color: var(--accent-blue); }/* ---- value colouring ---- *//* Same tiers and the same palette as the vault's cell classes, so a float or
   a market cap carries one meaning across both apps. Applied to scan results,
   watchlist columns and the canvas header alike (the header reads the colours
   straight out of cells.js rather than these rules). */
.cc-scope .cell-positive { color: var(--accent-green, #4ade80); }.cc-scope .cell-warning { color: var(--accent-yellow, #eab308); }.cc-scope .cell-negative { color: var(--accent-red, #f87171); }.cc-scope .cell-dim { color: var(--text-muted, #71717a); }.cc-scope .cell-ticker { color: var(--accent-blue, #4a9eff); }/* Staleness outranks the value colour, so it has to win the cascade. */
.cc-scope .wl-cell.stale, .cc-scope .wl-cell.stale.cell-positive, .cc-scope .wl-cell.stale.cell-warning, .cc-scope .wl-cell.stale.cell-negative {
  color: var(--text-muted, #71717a);
}/* The header stats are `.stat b`, which is more specific than a bare .cell-*
   class and would quietly win. Spelled out so the tier actually shows.
   v-blue / v-yellow are gone from the markup: a stat that is always the same
   colour reads like a judgement it isn't making. */
.cc-scope .stat b.cell-positive { color: var(--accent-green, #4ade80); }.cc-scope .stat b.cell-warning { color: var(--accent-yellow, #eab308); }.cc-scope .stat b.cell-negative { color: var(--accent-red, #f87171); }.cc-scope .stat b.cell-dim { color: var(--text-muted, #71717a); }/* Outside RTH the quote itself is the extended print, so it wears the pill
   that #extchg wears the rest of the time -- one box, around the numbers it
   describes, rather than an empty badge floating beside them. */
.cc-scope #quotePill { display: inline-flex; align-items: baseline; gap: 6px; }.cc-scope #quotePill.ext {
  padding: 1px 8px; border-radius: 4px;
  background: rgba(74,158,255,.12); border: 1px solid rgba(74,158,255,.32);
}.cc-scope #quotePill .ext-tag {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted);
}.cc-scope #sesstag:empty { display: none; }/* ---- clock ---- *//* Sits between the title and the tools, pushed to the right of the title so
   it reads as status rather than as another control. */
.cc-scope #clock {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  letter-spacing: .5px;
}.cc-scope #clock .clock-zone {
  font-size: 9px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); margin-left: 5px;
}/* The last five minutes before the open. Red plus a slow pulse, because the
   point is to catch the eye of someone looking at the chart, not the clock. */
.cc-scope #clock.imminent { color: var(--accent-red, #f87171); }.cc-scope #clock.imminent .clock-zone { color: var(--accent-red, #f87171); opacity: .75; }.cc-scope #clock.imminent { animation: clock-pulse 1s ease-in-out infinite; }@keyframes clock-pulse {50% { opacity: .45; } }@media (prefers-reduced-motion: reduce) {.cc-scope #clock.imminent { animation: none; }
}/* A refresh that goes to the vault takes about a second; say so. */
.cc-scope #tools button.busy { opacity: .55; pointer-events: none; }/* The scan tab sits below the watchlist tab on the same edge. */
.cc-scope #spShow.hidden { display: none; }/* ---- scan tabs ---- */
.cc-scope .sp-saved { align-items: center; }.cc-scope .sp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; cursor: pointer; user-select: none;
  color: var(--text-secondary); font-size: 10px;
  border: 1px solid var(--border-color); border-bottom: none;
  border-radius: 4px 4px 0 0; background: rgba(255,255,255,.02);
}.cc-scope .sp-tab:hover { color: var(--accent-blue); }.cc-scope .sp-tab.active {
  color: var(--accent-blue); border-color: var(--accent-blue);
  background: rgba(74,158,255,.12);
}.cc-scope .sp-tab.dragging { opacity: .4; }/* Where it would land, marked on the tab being hovered rather than with a
   separate insertion bar -- fewer moving parts, same information. */
.cc-scope .sp-tab.drop { border-left: 2px solid var(--accent-blue); }.cc-scope .sp-tab .sp-x { color: var(--accent-red); opacity: .45; font-size: 11px; }.cc-scope .sp-tab .sp-x:hover { opacity: 1; }/* Reads as an action rather than another saved scan: no close button, and it
   stays quiet until pointed at. */
.cc-scope .sp-tab.sp-new {
  color: var(--text-muted);
  font-weight: 600;
  padding-inline: 10px;
}.cc-scope .sp-tab.sp-new:hover { color: var(--accent-blue); }.cc-scope .sp-undo {
  background: none; border: none; padding: 0;
  color: var(--accent-blue); font: inherit; cursor: pointer;
  text-decoration: underline;
}/* "within last x bars" sits with the formula it qualifies. */
.cc-scope #spWithin {
  width: 46px; text-align: center;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 3px;
  padding: 4px 4px; font: inherit; font-size: 11px; outline: none;
}.cc-scope #spWithin:focus { border-color: var(--accent-blue); }/* ---- left dock ---- *//* Screeners and watchlists in one column. Both used to be absolutely
   positioned on this edge, so opening one had to close the other; the split
   is a drag rather than a toggle. */
.cc-scope #leftDock {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 9;
  width: var(--dock-width, 470px);
  display: flex; flex-direction: column;
  background: rgba(12,12,14,.98);
  border-right: 1px solid var(--border-color);
  box-shadow: 6px 0 24px rgba(0,0,0,.45);
  transition: transform .14s ease;
}.cc-scope #leftDock.collapsed { transform: translateX(-100%); }.cc-scope #dockSplit {
  flex: 0 0 6px; cursor: row-resize; background: transparent;
  border-top: 1px solid var(--border-color);
}.cc-scope #dockSplit:hover, .cc-scope #dockSplit.dragging { background: rgba(74,158,255,.35); }.cc-scope #dockShow {
  position: absolute; top: 8px; left: 0; z-index: 8;
  background: rgba(19,19,22,.9); color: var(--text-muted);
  border: 1px solid var(--border-color); border-left: none;
  border-radius: 0 4px 4px 0; cursor: pointer;
  padding: 5px 4px; font-size: 11px; line-height: 1;
}.cc-scope #dockShow:hover { color: var(--accent-blue); }.cc-scope #dockShow.hidden { display: none; }/* ---- watchlist tabs ---- *//* Same shape as the scan tabs, for the same reason: a list is somewhere you
   go back to. One list shows at a time instead of all of them stacked. */
.cc-scope .wl-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  padding: 6px 8px 0; border-bottom: 1px solid var(--border-color);
}.cc-scope .wl-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; cursor: pointer; user-select: none;
  color: var(--text-secondary); font-size: 10px;
  border: 1px solid var(--border-color); border-bottom: none;
  border-radius: 4px 4px 0 0; background: rgba(255,255,255,.02);
}.cc-scope .wl-tab:hover { color: var(--accent-blue); }.cc-scope .wl-tab.active {
  color: var(--accent-blue); border-color: var(--accent-blue);
  background: rgba(74,158,255,.12);
}.cc-scope .wl-tab.dragging { opacity: .4; }.cc-scope .wl-tab.drop { border-left: 2px solid var(--accent-blue); }.cc-scope .wl-tab .wl-x { color: var(--accent-red); opacity: .45; font-size: 11px; }.cc-scope .wl-tab .wl-x:hover { opacity: 1; }.cc-scope #wlBody { flex: 1 1 auto; min-height: 0; overflow: auto; }/* Signals and highlights read off the release, shown when a news card opens.
   Negatives are coloured against positives on purpose: an offering beside a
   gap up is the one that changes a decision. */
.cc-scope .em-insights:empty { display: none; }.cc-scope .em-sig-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}.cc-scope .em-sig {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: help;
}.cc-scope .em-sig.is-good {
  background: rgba(38, 166, 154, 0.16);
  color: #26a69a;
  border: 1px solid rgba(38, 166, 154, 0.35);
}.cc-scope .em-sig.is-bad {
  background: rgba(239, 83, 80, 0.16);
  color: #ef5350;
  border: 1px solid rgba(239, 83, 80, 0.35);
}.cc-scope .em-highlights {
  margin: 4px 0 6px;
  padding-left: 15px;
  font-size: 10.5px;
  line-height: 1.4;
  opacity: 0.9;
}.cc-scope .em-highlights li { margin-bottom: 2px; }/* Setup preview: the method whose entry and stop are drawn on the chart. */
.cc-scope #setupMethod, .cc-scope #setupRisk {
  background: var(--input-bg, #0b0e11);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10.5px;
  padding: 2px 4px;
  margin-left: 4px;
  cursor: pointer;
}.cc-scope #setupMethod:focus, .cc-scope #setupRisk:focus { outline: 1px solid var(--accent-blue); }.cc-scope .setup-info {
  margin-left: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}/* News markers on the price pane. Buttons rather than shapes painted on the
   overlay canvas: a triangle cannot carry a cursor or a hover state, so
   nothing about it said it would open anything. The colour is the screener's
   row highlight, passed in as --marker-color, so a marker reads the way the
   row it came from did. */
.cc-scope .news-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 4;
  min-width: 20px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  border-radius: 3px;
  cursor: pointer;
  color: var(--marker-color, #8b8b93);
  background: color-mix(in srgb, var(--marker-color, #8b8b93) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--marker-color, #8b8b93) 45%, transparent);
  transition: background .12s, border-color .12s, transform .12s;
}.cc-scope .news-marker:hover {
  transform: translate(-50%, -100%) translateY(-1px);
  background: color-mix(in srgb, var(--marker-color, #8b8b93) 32%, transparent);
  border-color: var(--marker-color, #8b8b93);
}.cc-scope .news-marker:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}/* Replay controls. Only visible while a session is loaded; the chart is an
   ordinary live chart the rest of the time, so nothing here should occupy
   space or catch a click when replay is off. */
.cc-scope #replayBar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 44px;
  z-index: 12;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  /* Deliberately see-through: the candles under the bar still matter, and this
     sits in the middle of the chart. The blur is what keeps the labels legible
     over a busy background rather than more opacity. */
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
  font-size: 12px;
}.cc-scope body.replaying #replayBar { display: flex; }.cc-scope #replayBar .rp-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text);
}.cc-scope #replayBar .rp-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }/* The clock is the thing being read while stepping, so it gets the weight. */
.cc-scope #replayBar .rp-clock { font-weight: 700; min-width: 46px; text-align: center; }.cc-scope #replayBar .rp-progress { color: var(--text-muted); min-width: 82px; }.cc-scope #replayBar .rp-speed {
  font-family: var(--font-mono);
  font-size: 11px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 4px;
}.cc-scope #replayBar .rp-reveal { border-color: color-mix(in srgb, var(--accent-blue) 55%, transparent); }/* ---- chart grading ---- *//* Top-right of the plot, clear of the price scale. Only while a session is
   being replayed: a grade with no session is not a grade of anything. */
.cc-scope #gradeBox {
  position: absolute; top: 10px; right: 66px; z-index: 12; display: none;
  flex-direction: column; gap: 5px; width: 198px; padding: 8px 9px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  font-family: var(--font-mono); font-size: 11px;
}.cc-scope body.replaying #gradeBox { display: flex; }/* Graded ones get a quiet edge, so walking a list shows at a glance whether
   this one has been done. */
.cc-scope #gradeBox.graded { border-color: color-mix(in srgb, var(--accent-green) 45%, transparent); }.cc-scope .gr-head { display: flex; align-items: baseline; gap: 6px; }.cc-scope .gr-title {
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-muted);
}.cc-scope .gr-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }/* The position doubles as the way to a position: click it and type. */
.cc-scope .gr-count.jumpable { cursor: pointer; }.cc-scope .gr-count.jumpable:hover { color: var(--text-primary); text-decoration: underline; }.cc-scope .gr-jump {
  width: 66px; padding: 0 4px;
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--accent-blue); border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
}.cc-scope .gr-jump:focus { outline: none; }.cc-scope .gr-export {
  margin-left: auto; color: var(--text-muted); text-decoration: none;
  font-size: 10px; border: 1px solid var(--border-color);
  border-radius: 4px; padding: 1px 5px;
}.cc-scope .gr-export:hover { color: var(--accent-blue); border-color: var(--accent-blue); }.cc-scope .gr-row { display: flex; align-items: center; gap: 4px; }.cc-scope .gr-row i {
  font-style: normal; width: 34px; flex: 0 0 34px;
  font-size: 10px; color: var(--text-muted);
}.cc-scope .gr-row button {
  flex: 1; padding: 3px 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: 4px;
}.cc-scope .gr-row button:hover { color: var(--text-primary); border-color: #3a3a40; }.cc-scope .gr-row button.on {
  color: var(--bg-primary); font-weight: 700;
  background: var(--accent-blue); border-color: var(--accent-blue);
}.cc-scope .gr-note {
  width: 100%; padding: 3px 5px; font-family: inherit; font-size: 10px;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 4px; outline: none;
}.cc-scope .gr-note:focus { border-color: var(--accent-blue); }.cc-scope .gr-hint { font-size: 9px; color: var(--text-muted); }/* A loaded list shows the bar on its own. Walking a list is a thing you do
   before a replay is running -- and an entry whose session has no minute data
   never starts one, so a bar that needed `replaying` left the counter moving
   somewhere invisible. */
.cc-scope body.has-list #replayBar { display: flex; }.cc-scope body.has-list:not(.replaying) #replayBar > :not(.rp-list) { display: none; }/* Its own separator goes too, or it divides the list segment from nothing. */
.cc-scope body.has-list:not(.replaying) #replayBar .rp-list .tool-sep { display: none; }/* The playlist segment. Hidden until a list is loaded; paintList shows it. */
.cc-scope #replayBar .rp-list { display: none; align-items: center; gap: 6px; }.cc-scope #replayBar .rp-entry {
  font-weight: 700; color: var(--accent-blue);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}/* Nothing to replay on this one. Red rather than absent, because a hole in the
   list is information -- it is how you find out the session was never
   recorded. */
.cc-scope #replayBar .rp-entry.missing { color: var(--accent-red); }/* It reopens the entry, so it has to look like something to press. */
.cc-scope #replayBar .rp-entry { cursor: pointer; }.cc-scope #replayBar .rp-entry:hover { text-decoration: underline; }/* Tabular figures and a fixed width, so stepping the list doesn't shuffle the
   buttons either side of the count. */
.cc-scope #replayBar .rp-count {
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: center;
  /* "5 of 6 · no data" wrapped onto two lines and pushed the bar taller. */
  white-space: nowrap; flex: 0 0 auto;
}.cc-scope #replayBar .rp-eject { color: var(--text-muted); padding: 3px 7px; }.cc-scope #replayBar .rp-eject:hover { border-color: var(--accent-red); color: var(--accent-red); }/* Somewhere to drop a list. The whole window accepts one, so the whole window
   says so rather than a target appearing that has to be aimed at. */
.cc-scope body.file-over .panel {
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 45%, transparent);
}.cc-scope #replayVerdict {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 86px;
  z-index: 12;
  display: none;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
}.cc-scope body:not(.replaying) #replayVerdict { display: none !important; }/* Right-click on the chart: jump straight into replaying the day under the
   cursor, instead of reading the date off the axis and typing it into a
   prompt. Fixed rather than absolute, because it is positioned from clientX/Y
   and must not move when the page behind it scrolls. */
/* The menu is attached to <body>, outside .cc-scope: scoped alone, it went
   unstyled -- an ordinary block appended to the page, 22px of height that
   brought up a scrollbar, narrowed the chart and shifted it a bar on every
   right click. Kyle, 2026-10-05: "right-clicking moves the chart forward a day". */
.cc-scope .chart-menu, body > .chart-menu {
  position: fixed;
  z-index: 3000;
  min-width: 210px;
  padding: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}.cc-scope .chart-menu-item, body > .chart-menu .chart-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}.cc-scope .chart-menu-item:hover, body > .chart-menu .chart-menu-item:hover { background: var(--bg-tertiary); color: var(--accent-blue); }/* Arith/Log sits in the corner where the price axis meets the date axis, which
   is otherwise dead space on every chart. Width is set from JS to match the
   axis, so it stays flush when a wider price pushes the scale out. Styled to
   read as part of the axis rather than as a button floating over the plot. */
.cc-scope #scaleToggle {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 26px;                 /* AXIS_BOTTOM_PX */
  z-index: 4;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  letter-spacing: .4px;
  cursor: pointer;
  transition: color .15s, background .15s;
}.cc-scope #scaleToggle:hover { color: var(--accent-blue); background: var(--bg-tertiary); }/* Tight-stop review. Bottom-left, clear of replay's centre bar, because the
   two run together: the card asks the question and the replay answers it. *//* Both review cards. The base queue reuses this chrome wholesale -- it is the
   same job, a person judging what a threshold cannot -- and only the container
   was pinned to an id, which left the second card unpositioned in the document
   flow behind the chart, where its buttons could not be clicked. */
.cc-scope #reviewCard, .cc-scope #baseCard {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  width: 290px;
  background: rgba(19,19,22,.96);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  font-size: 11px;
}.cc-scope .rv-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border-color);
}.cc-scope .rv-title {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted);
}.cc-scope .rv-progress { margin-left: auto; font-size: 10px; color: var(--text-muted); }.cc-scope .rv-close {
  background: none; border: 0; color: var(--text-muted);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}.cc-scope .rv-close:hover { color: var(--accent-red); }.cc-scope .rv-body { padding: 9px 10px; }.cc-scope .rv-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }.cc-scope .rv-ticker {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--text-primary); letter-spacing: .5px;
}.cc-scope .rv-meta { font-size: 10px; color: var(--text-muted); }.cc-scope .rv-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  font-variant-numeric: tabular-nums;
}.cc-scope .rv-grid span { color: var(--text-muted); }.cc-scope .rv-grid b { color: var(--text-primary); font-weight: 600; text-align: right; }/* The two numbers that put the trade in this queue in the first place. */
.cc-scope .rv-grid b.rv-warn { color: var(--accent-yellow); }.cc-scope .rv-prior { margin-top: 7px; color: var(--accent-blue); font-size: 10px; }.cc-scope .rv-done { padding: 10px 0; color: var(--text-muted); text-align: center; }.cc-scope .rv-note {
  width: calc(100% - 20px); margin: 0 10px 8px;
  padding: 5px 7px; font: inherit; font-size: 11px;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 4px;
}.cc-scope .rv-actions {
  display: flex; gap: 5px; padding: 0 10px 10px;
}.cc-scope .rv-actions button {
  flex: 1; padding: 6px 0; font: inherit; font-size: 11px; font-weight: 600;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 5px;
  transition: all .12s;
}.cc-scope .rv-actions .rv-back, .cc-scope .rv-actions .rv-skip { flex: 0 0 34px; font-weight: 400; }.cc-scope .rv-actions button:hover { color: var(--text-primary); border-color: #3a3a40; }.cc-scope .rv-actions .rv-keep:hover {
  color: var(--accent-green); border-color: var(--accent-green);
  background: rgba(74,222,128,.10);
}.cc-scope .rv-actions .rv-reject:hover {
  color: var(--accent-red); border-color: var(--accent-red);
  background: rgba(248,113,113,.10);
}.cc-scope .rv-actions .rv-s1:hover, .cc-scope .rv-actions .rv-s2:hover {
  color: var(--accent-green); border-color: var(--accent-green);
  background: rgba(74,222,128,.10);
}.cc-scope .rv-actions .rv-good:hover {
  color: var(--accent-green); border-color: var(--accent-green);
  background: rgba(74,222,128,.10);
}.cc-scope .rv-actions .rv-bad:hover {
  color: var(--accent-red); border-color: var(--accent-red);
  background: rgba(248,113,113,.10);
}/* Good and Bad are the answer; Skip and Back are not, and should not compete
   for the eye at the same width. */
.cc-scope .rv-actions .rv-good, .cc-scope .rv-actions .rv-bad { flex: 1; }.cc-scope .rv-session { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }.cc-scope .rv-tag { margin-left: auto; font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); }/* ---------------------------------------------------------------------------
   List view chooser.

   Two ways to open an entry, and they are opposites: replay hides what happened
   after the open, jump exists to show it. That is a decision about the walk you
   are starting, so it is asked once when the list loads rather than buried in a
   settings pane -- and the blurbs carry it, because the labels alone do not say
   which one withholds the future.
   --------------------------------------------------------------------------- */
.cc-scope .lv-modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}.cc-scope .lv-box {
  width: min(430px, 92vw);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
}.cc-scope .lv-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-secondary); margin-bottom: 3px;
}.cc-scope .lv-opt {
  text-align: left; cursor: pointer;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text-primary);
  transition: border-color 0.12s ease;
}.cc-scope .lv-opt:hover { border-color: var(--text-muted); }.cc-scope .lv-opt.on { border-color: var(--accent-blue); background: rgba(74, 158, 255, 0.10); }.cc-scope .lv-opt.on .lv-opt-label { color: var(--accent-blue); }.cc-scope .lv-opt:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }.cc-scope .lv-opt-label { font-size: 0.92rem; font-weight: 600; }.cc-scope .lv-opt-blurb { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; }.cc-scope .lv-foot { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }/* Scoring: a setting on the walk rather than an answer to the modal's
   question, so it reads as a row of ticks and not as another big option. */
.cc-scope .lv-sec {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); margin-top: 6px;
  border-top: 1px solid var(--border-color); padding-top: 10px;
}.cc-scope .lv-chk {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 9px;
  align-items: baseline; cursor: pointer; padding: 4px 2px;
}.cc-scope .lv-chk input { grid-row: span 2; width: 14px; height: 14px;
                accent-color: var(--accent-blue); cursor: pointer; }.cc-scope .lv-chk-label { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); }.cc-scope .lv-chk-blurb { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }/* The grade box outside replay: a list walked in Jump view is still a walk,
   and scoring it is the whole point of the Scoring section. */
.cc-scope body.list-scoring #gradeBox { display: flex; }.cc-scope body:not(.score-chart) #gradeBox .gr-row[data-scale="chart"] { display: none; }.cc-scope body:not(.score-base) #gradeBox .gr-row[data-scale="base"] { display: none; }/* Nothing to keep means nothing to show, even mid-replay. */
.cc-scope body:not(.score-chart):not(.score-base) #gradeBox { display: none; }/* The current mode, readable at a glance on the bar without opening anything. */
.cc-scope #replayBar .rp-view {
  width: auto; padding: 0 9px; font-size: 0.72rem;
  color: var(--text-secondary); white-space: nowrap;
}.cc-scope #replayBar .rp-view:hover { color: var(--text-primary); }/* ============ themes (mirrors the vault's Style menu) ============ *//* Same token names the vault overrides, so a palette is one block here.
   The chart canvas is transparent and inherits the page ground; its axis
   text stays the fixed neutral gray, which reads on every dark theme. */
.cc-scope [data-theme="instrument"] {
  --bg-primary:#0c1014;--bg-secondary:#141a20;--bg-tertiary:#1b222a;
  --border-color:#242d36;--text-primary:#e8edf2;--text-secondary:#a6b1bd;
  --text-muted:#6f7c88;--accent-blue:#57d4ce;--accent-green:#3987e5;
  --accent-red:#e66767;--accent-yellow:#e3b565;--accent-purple:#93abe9}.cc-scope [data-theme="bloomberg"] {
  --bg-primary:#000000;--bg-secondary:#0a0b0d;--bg-tertiary:#14171a;
  --border-color:#2b333c;--text-primary:#ffffff;--text-secondary:#ff9e18;
  --text-muted:#96703a;--accent-blue:#404244;--accent-green:#2fbf3f;
  --accent-red:#f5333f;--accent-yellow:#ffd400;--accent-purple:#c77dff}.cc-scope [data-theme="gray"] {
  --bg-primary:#000;--bg-secondary:#0d0d0d;--bg-tertiary:#1a1a1a;
  --border-color:#2a2a2a;--text-primary:#e8e8e8;--text-secondary:#aaa;
  --text-muted:#555;--accent-blue:#4499ff;--accent-green:#00cc00;
  --accent-red:#ff2200;--accent-yellow:#ffcc00;--accent-purple:#cc44ff}.cc-scope [data-theme="matrix"] {
  --bg-primary:#000;--bg-secondary:#080808;--bg-tertiary:#111;
  --border-color:#1a2a1a;--text-primary:#b0d0b0;--text-secondary:#80b080;
  --text-muted:#3a5a3a;--accent-blue:#50c878;--accent-green:#50c878;
  --accent-red:#e04040;--accent-yellow:#a0c860;--accent-purple:#60b090}.cc-scope [data-theme="terminal"] {
  --bg-primary:#0b0f14;--bg-secondary:#10161d;--bg-tertiary:#0e1319;
  --border-color:#1c2530;--text-primary:#d7dee6;--text-secondary:#9aa5b1;
  --text-muted:#7d8894;--accent-blue:#3fd1c0;--accent-green:#4ade80;
  --accent-red:#f87171;--accent-yellow:#e3b565;--accent-purple:#93abe9}/* The ambient gradients are the default palette's blue; on a themed page
   they would tint the wrong hue, so they go flat. */
.cc-scope [data-theme] body {background-image:none}/* The panel glass is a literal rgba of the default tertiary; themed, it
   takes the theme's panel color instead. */
.cc-scope [data-theme] .panel {background:var(--bg-secondary)}.cc-scope #themeSel {
  background:var(--bg-tertiary);border:1px solid var(--border-color);
  color:var(--text-secondary);border-radius:6px;padding:3px 6px;
  font:inherit;font-size:11.5px;cursor:pointer}.cc-scope #themeSel:hover {color:var(--text-primary)}

/* ---- an indicator with a pane of its own ----
   Stacked under the volume pane, each a fixed height so the price chart keeps
   the rest. Shorter than volume: an oscillator is read for its shape and
   where it sits against a line, not for detail. */
.cc-scope .osc-wrap {
  position: relative; height: 96px; flex: 0 0 auto;
  border-top: 1px solid var(--border-color);
}
.cc-scope .osc-chart { position: absolute; inset: 0; }