/* ═══════════════════════════════════════════════════════════════════════════
   Implied Lens — price chart chrome
   Quiet frame, loud data. The readout carries the numbers so the plot itself
   can stay almost bare.
   ═══════════════════════════════════════════════════════════════════════════ */

.il-chart-slot {
  position: relative;
  min-height: 520px !important;
  height: clamp(520px, 58vh, 720px) !important;
}

.il-chart-host {
  position: absolute;
  inset: 0;
  border-radius: var(--il-radius, 14px);
  overflow: hidden;
}

/* The canvas stays in the DOM purely so the report export can read a frame
   out of it with toDataURL. It is never shown. */
canvas.il-chart-mirror {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
}

/* ── Scrub readout ─────────────────────────────────────────────────────── */
/* A static strip above the plot rather than a floating card on top of it.
   The overlay version permanently covered the top-left corner of the series. */
.il-chart-readout {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 8px;
  padding: 8px 14px;
  border-radius: var(--il-radius-sm, 10px);
  border: 1px solid var(--il-line, rgba(255, 255, 255, .075));
  background: color-mix(in srgb, var(--il-surface, #101319) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  pointer-events: none;
  transition: opacity .18s ease;
}

.il-chart-readout .ilr-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
}

.il-chart-readout .ilr-date { margin-left: auto; }

.il-chart-readout .ilr-price {
  font-family: var(--il-mono, "DM Mono", monospace);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--il-ink, #F2F0EB);
  font-variant-numeric: tabular-nums;
}

.il-chart-readout .ilr-chg {
  font-family: var(--il-mono, "DM Mono", monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.il-chart-readout .ilr-chg.pos { color: var(--market-up-strong, #4EE3A2); }
.il-chart-readout .ilr-chg.neg { color: var(--market-down-strong, #FF7480); }

.il-chart-readout .ilr-ohlc {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 0;
}

@media (max-width: 640px) {
  /* Two tight rows, not four wrapped ones — the strip was eating 109px of a
     460px chart. Row one is price + change, row two scrolls the OHLC. */
  .il-chart-readout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-bottom: 6px;
    padding: 6px 10px;
  }
  .il-chart-readout .ilr-main { margin: 0; gap: 8px; }
  .il-chart-readout .ilr-price { font-size: 15px; }
  .il-chart-readout .ilr-chg { font-size: 11px; }
  .il-chart-readout .ilr-ohlc {
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .il-chart-readout .ilr-ohlc::-webkit-scrollbar { display: none; }
  .il-chart-readout .ilr-ohlc span { flex: 0 0 auto; }
  /* The date is already on the crosshair label; it does not need a third row. */
  .il-chart-readout .ilr-date { display: none; }
}

.il-chart-readout .ilr-ohlc span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.il-chart-readout .ilr-ohlc i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--il-faint, #8E8A82);
}

.il-chart-readout .ilr-ohlc b {
  font-family: var(--il-mono, "DM Mono", monospace);
  font-size: 11px;
  font-weight: 400;
  color: var(--il-ink-2, #D2CFC8);
  font-variant-numeric: tabular-nums;
}

.il-chart-readout .ilr-date {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--il-faint, #8E8A82);
}

/* While the pointer is off the plot the readout is showing the latest bar —
   recede so it reads as context rather than a live measurement. */
.il-chart-readout.live { opacity: .82; }
.il-chart-slot:hover .il-chart-readout { opacity: 1; }

/* ── Expanded modal instance ───────────────────────────────────────────── */
.il-chart-host-expanded {
  position: relative;
  width: 100%;
  height: min(72vh, 760px);
  border-radius: var(--il-radius-lg, 20px);
  overflow: hidden;
}

.il-chart-host-expanded + .il-chart-readout,
.cex-workspace .il-chart-readout { top: 16px; left: 20px; }

/* ── Toolbar keys for the added overlays ───────────────────────────────── */
.chart-key.key-ema { background: var(--il-brass-bright, #EDCB84) !important; }
.chart-key.key-vwap { background: #7ED9C8 !important; }

html:not([data-theme="dark"]) .chart-key.key-vwap { background: #127C6C !important; }

/* Lightweight Charts injects its own attribution link; the brand line already
   credits sources in the data-source row beneath the chart. */
.il-chart-host #tv-attr-logo,
.il-chart-host a[href*="tradingview"] { opacity: .35; }

@media (max-width: 768px) {
  .il-chart-slot {
    min-height: 380px !important;
    height: clamp(380px, 54vh, 480px) !important;
  }

  .il-chart-readout {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 8px 10px;
    gap: 2px;
  }

  .il-chart-readout .ilr-price { font-size: 18px; }
  .il-chart-readout .ilr-ohlc { gap: 9px; }
  .il-chart-readout .ilr-ohlc b { font-size: 10px; }
  .il-chart-readout .ilr-date { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Technical read — collapsed to one line until asked for
   ═══════════════════════════════════════════════════════════════════════════ */

.il-analysis {
  position: relative;
  margin-top: 10px;
  border-top: 1px solid var(--il-line, rgba(255, 255, 255, .075));
}

.il-analysis .ilan-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 40px 12px 2px;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  color: var(--il-muted, #9A968D) !important;
  transition: color .16s ease;
}

.il-analysis .ilan-bar:hover { color: var(--il-ink, #F2F0EB) !important; }

.il-analysis .ilan-eyebrow {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--il-brass, #D6AC64);
}

.il-analysis .ilan-headline {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--il-mono, "DM Mono", monospace);
  font-size: 11px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.il-analysis .ilan-chev {
  flex: 0 0 auto;
  font-size: 10px;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.il-analysis.open .ilan-chev { transform: rotate(180deg); }

.il-analysis .ilan-dismiss {
  position: absolute;
  top: 8px;
  right: 0;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--il-faint, #8E8A82) !important;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease;
}

.il-analysis:hover .ilan-dismiss,
.il-analysis .ilan-dismiss:focus-visible { opacity: 1; }

.il-analysis .ilan-dismiss:hover {
  color: var(--il-ink, #F2F0EB) !important;
  border-color: var(--il-line-strong, rgba(255, 255, 255, .14)) !important;
}

.il-analysis .ilan-body { padding: 4px 0 16px; }

.il-analysis .ilan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.il-analysis .ilan-sig {
  padding: 13px 15px;
  border: 1px solid var(--il-line, rgba(255, 255, 255, .075));
  border-radius: var(--il-radius-sm, 10px);
  background: var(--il-surface-2, #14181F);
}

.il-analysis .ilan-sig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.il-analysis .ilan-sig-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--il-faint, #8E8A82);
}

.il-analysis .ilan-sig-state {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--il-brass, #D6AC64);
  text-transform: lowercase;
}

.il-analysis .ilan-sig-value {
  font-family: var(--il-mono, "DM Mono", monospace);
  font-size: 13px;
  color: var(--il-ink, #F2F0EB);
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}

.il-analysis .ilan-sig-detail {
  font-size: 11px;
  line-height: 1.55;
  color: var(--il-muted, #9A968D);
}

.il-analysis .ilan-invalidation {
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--il-line-gold, rgba(214, 172, 100, .22));
  border-left: 3px solid var(--il-brass, #D6AC64);
  border-radius: var(--il-radius-sm, 10px);
  background: var(--il-brass-softer, rgba(214, 172, 100, .05));
}

.il-analysis .ilan-inv-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--il-brass, #D6AC64);
  margin-bottom: 5px;
}

.il-analysis .ilan-invalidation p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--il-ink-2, #D2CFC8);
}

.il-analysis .ilan-summary p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--il-ink-2, #D2CFC8);
}

.il-analysis .ilan-source,
.il-analysis .ilan-foot {
  font-size: 10px;
  line-height: 1.55;
  color: var(--il-faint, #8E8A82);
}

.il-analysis .ilan-foot {
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--il-line, rgba(255, 255, 255, .075));
}

.il-analysis .ilan-loading,
.il-analysis .ilan-empty {
  padding: 18px 2px;
  font-size: 12px;
  color: var(--il-muted, #9A968D);
}

.il-analysis .ilan-loading::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--il-brass, #D6AC64);
  animation: ilanPulse 1.1s ease-in-out infinite;
}

@keyframes ilanPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (max-width: 640px) {
  .il-analysis .ilan-grid { grid-template-columns: 1fr; }
  .il-analysis .ilan-headline { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero — a real chart, not an illustration of one
   ═══════════════════════════════════════════════════════════════════════════ */

#landing-page .ihm-chart {
  position: relative;
  min-height: 232px;
  padding: 0 !important;
  display: block !important;
}

#landing-page .ihm-live {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
}

#landing-page .ihm-quote {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px 9px;
  flex-wrap: wrap;
}

#landing-page .ihm-quote-sym {
  font-family: var(--il-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--il-brass, #D6AC64);
}

#landing-page .ihm-quote-price {
  font-family: var(--il-mono, "JetBrains Mono", monospace);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--il-ink, #F2F0EB);
  font-variant-numeric: tabular-nums;
}

#landing-page .ihm-quote-chg {
  font-family: var(--il-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#landing-page .ihm-quote-chg.pos { color: var(--market-up-strong, #4EE3A2); }
#landing-page .ihm-quote-chg.neg { color: var(--market-down-strong, #FF7480); }

#landing-page .ihm-quote-meta {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--il-faint, #8E8A82);
}

/* The chip row duplicated controls the real chart already shows */
#landing-page .ihm-chart-chips { display: none !important; }

#landing-page .ihm-pill {
  font-family: var(--il-sans, sans-serif) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--il-faint, #8E8A82) !important;
}

/* Side panels: tighter, less lorem-ipsum, aligned to the plot */
#landing-page .ihm-side .ihm-card { padding: 11px 13px !important; }
#landing-page .ihm-side .ihm-line { font-size: 11px !important; line-height: 1.5 !important; }
#landing-page .ihm-side .ihm-sub { font-size: 10px !important; }

/* The mock's main column is a row flex by default; the quote line must stack
   above the plot rather than sit beside it. */
#landing-page .ihm-body { align-items: stretch !important; }

#landing-page .ihm-main {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#landing-page .ihm-quote { flex: 0 0 auto !important; width: 100% !important; }

#landing-page .ihm-chart {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Attribution stays, but scaled to the mock rather than dominating it */
#landing-page .ihm-live #tv-attr-logo,
#landing-page .ihm-live a[href*="tradingview"] {
  transform: scale(.62);
  transform-origin: bottom left;
  opacity: .28 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-SCREEN CHART — engine-owned modal
   ═══════════════════════════════════════════════════════════════════════════
   When the Lightweight-Charts engine owns the expanded chart, the legacy
   Chart.js canvases and the markup toolbar that draws onto them are dead
   weight: they still occupied layout inside .cex-workspace and pushed the real
   host hundreds of pixels down, which is why full screen rendered blank.
   ═════════════════════════════════════════════════════════════════════════ */
#chart-expand-modal.il-lwc #chart-expanded,
#chart-expand-modal.il-lwc #chart-markup,
#chart-expand-modal.il-lwc .cex-toolbar { display: none !important; }

#chart-expand-modal.il-lwc .cex-workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

#chart-expand-modal.il-lwc .cex-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
}

.il-chart-host-expanded {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
}

/* control strip -------------------------------------------------------- */
.il-cex-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--il-line, rgba(255, 255, 255, .08));
  background: color-mix(in srgb, var(--il-surface, #101319) 55%, transparent);
}

.il-cex-controls .ilcx-group {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--il-line, rgba(255, 255, 255, .07));
  background: color-mix(in srgb, var(--il-bg, #0B0D12) 45%, transparent);
}

.il-cex-controls .ilcx-chip {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--il-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--il-ink-2, rgba(242, 240, 235, .62));
  background: transparent;
  transition: background .16s ease, color .16s ease;
}

.il-cex-controls .ilcx-chip:hover {
  color: var(--il-ink, #F2F0EB);
  background: color-mix(in srgb, var(--il-ink, #F2F0EB) 8%, transparent);
}

.il-cex-controls .ilcx-chip.on {
  color: var(--il-bg, #0B0D12);
  background: var(--il-gold, #D6AC64);
}

.il-cex-controls .ilcx-chip:focus-visible {
  outline: 2px solid var(--il-gold, #D6AC64);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .il-cex-controls {
    gap: 6px 8px;
    padding: 8px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .il-cex-controls::-webkit-scrollbar { display: none; }
  .il-cex-controls .ilcx-group { flex: 0 0 auto; }
  .il-cex-controls .ilcx-chip { padding: 5px 9px; font-size: 11px; }
}

/* the modal's own readout strip should not eat plot height */
#chart-expand-modal.il-lwc .il-chart-readout {
  margin: 10px 16px 6px;
  flex: 0 0 auto;
}

/* Full-screen chart on a phone: the plot host was running edge to edge, past
   the modal's own rounded box, and the readout strip did not line up with it. */
@media (max-width: 760px) {
  #chart-expand-modal.il-lwc .cex-body { padding: 0 10px 10px !important; }
  #chart-expand-modal.il-lwc .il-chart-readout { margin: 8px 0 6px; }
  .il-chart-host-expanded { min-height: 260px; }
}