/* Chart adapted from the saved 8 October 2026 dataset. */
.chart-breadcrumb .post-breadcrumb { max-width: var(--content-width); }
.chart-page-header { margin: 0 0 1.75rem; }
.chart-page-header p { margin: 0.5rem 0 0; color: var(--site-muted); font-size: 1rem; }
.chart-page .post-body > h2 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.125rem; }
.chart-page .post-body > p { font-size: 0.9375rem; line-height: 1.65; }
.chart-page .chart-notes { margin-block: 1.25rem; font-size: 0.9375rem; }
.chart-page .chart-notes summary { cursor: pointer; color: var(--site-muted); }
.chart-page .chart-credits { font-size: 0.875rem; color: var(--site-muted); }
.chart-page .chart-credits a { font-weight: 400; }

#real-intelligence-cost {
  --background: var(--site-panel);
  --foreground: var(--site-ink);
  --border: var(--site-border);
  --secondary: var(--site-surface);
  --muted-foreground: var(--site-muted);
  --popover: var(--site-panel);
  --popover-foreground: var(--site-ink);
  --viz-series-1: var(--site-blue);
  --viz-series-2: var(--site-amber);
  position: relative;
  width: 100%;
  max-width: none;
  margin-block: 0 2rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--foreground);
  background: var(--background);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: normal;
}
#real-intelligence-cost *, #real-intelligence-cost *::before, #real-intelligence-cost *::after { box-sizing: border-box; }
#real-intelligence-cost [hidden] { display: none !important; }
#real-intelligence-cost .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#real-intelligence-cost .text-small { font-size: 0.8125rem; }
#real-intelligence-cost .text-muted { color: var(--muted-foreground); }
#real-intelligence-cost .tabular-nums { font-variant-numeric: tabular-nums; }
#real-intelligence-cost :focus-visible { outline: 2px solid var(--viz-series-1); outline-offset: 3px; }
#real-intelligence-cost button, #real-intelligence-cost summary { cursor: pointer; }
#real-intelligence-cost button { appearance: none; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; line-height: 1.25; }
#real-intelligence-cost button:active { transform: scale(0.97); }
#real-intelligence-cost select, #real-intelligence-cost input { max-width: 100%; min-width: 0; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--background); color: inherit; font: inherit; }

/* Primary controls stay in one toolbar; the plan cap opens on demand. */
#real-intelligence-cost .chart-toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
#real-intelligence-cost .company-controls { flex: 1; min-width: 10rem; }
#real-intelligence-cost .company-controls select { width: 100%; max-width: 16rem; }
#real-intelligence-cost .scale-buttons { display: flex; padding: 0.1875rem; border-radius: 0.5rem; background: var(--secondary); }
#real-intelligence-cost .scale-buttons button { padding: 0.375rem 0.75rem; color: var(--muted-foreground); }
#real-intelligence-cost .scale-buttons button[aria-pressed="true"] { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px #18181b08; }
#real-intelligence-cost .legend { display: flex; gap: 0.375rem; }
#real-intelligence-cost .legend button { display: inline-flex; align-items: center; gap: 0.5rem; border-color: var(--border); }
#real-intelligence-cost .legend button[aria-pressed="false"] { opacity: 0.4; border-color: transparent; }
#real-intelligence-cost .swatch { width: 0.625rem; height: 0.625rem; flex: none; }
#real-intelligence-cost .api-swatch { border-radius: 50%; background: var(--viz-series-1); }
#real-intelligence-cost .sub-swatch { border: 1.5px solid var(--viz-series-2); border-radius: 0.125rem; }
#real-intelligence-cost .chart-options > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: 0.375rem; list-style: none; }
#real-intelligence-cost .chart-options > summary::-webkit-details-marker { display: none; }
#real-intelligence-cost .chart-options[open] > summary { background: var(--secondary); }
#real-intelligence-cost .chart-options[open] > summary svg { transform: rotate(180deg); }
#real-intelligence-cost .commit-filter { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 4; width: 18rem; max-width: 100%; padding: 1rem; border: 1px solid var(--border); border-radius: 0.625rem; background: var(--background); box-shadow: 0 6px 24px #18181b14; }
#real-intelligence-cost .commit-filter label { display: block; font-weight: 500; margin-bottom: 0.625rem; }
#real-intelligence-cost .commit-value { display: flex; align-items: center; gap: 0.5rem; }
#real-intelligence-cost .commit-value input { width: 7rem; }
#real-intelligence-cost .commit-presets { display: flex; gap: 0.25rem; margin-top: 0.75rem; }
#real-intelligence-cost .commit-presets button { flex: 1; padding-inline: 0.375rem; border-color: var(--border); }
#real-intelligence-cost .commit-presets button[aria-pressed="true"] { background: var(--secondary); border-color: #a1a1aa; }
#real-intelligence-cost .reset-chart { color: var(--muted-foreground); }

/* Plot, axes, and series symbols. */
#real-intelligence-cost .plot-area { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #a1a1aa var(--background); }
#real-intelligence-cost .plot-area::-webkit-scrollbar { height: 8px; }
#real-intelligence-cost .plot-area::-webkit-scrollbar-thumb { background: #a1a1aa; border-radius: 4px; }
#real-intelligence-cost .chart-canvas { position: relative; width: 100%; }
#real-intelligence-cost .y-axis-overlay { position: sticky; left: 0; width: 44px; height: 0; z-index: 2; pointer-events: none; }
#real-intelligence-cost .y-axis-overlay svg { display: block; background: var(--background); overflow: visible; }
#real-intelligence-cost .y-axis-overlay text { fill: var(--foreground); font-size: 12px; }
#real-intelligence-cost .scatter { display: block; width: 100%; overflow: visible; }
#real-intelligence-cost .scatter text { fill: var(--foreground); font-size: 12px; font-weight: 400; }
#real-intelligence-cost .scatter .tick line, #real-intelligence-cost .scatter .domain { stroke: var(--border); }
#real-intelligence-cost .scatter .grid line { stroke: var(--border); stroke-opacity: 0.6; }
#real-intelligence-cost .scatter .grid .domain { display: none; }
#real-intelligence-cost .model-point use { pointer-events: none; }
#real-intelligence-cost .lab-symbols { position: absolute; overflow: hidden; }

/* Secondary controls and notes stay collapsed until needed. */
#real-intelligence-cost .chart-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; }
#real-intelligence-cost .linear-view-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; flex-basis: 100%; }
#real-intelligence-cost .linear-view-controls button { padding: 0.25rem 0.5rem; }
#real-intelligence-cost .linear-view-controls button[aria-pressed="true"] { background: var(--secondary); }
#real-intelligence-cost .chart-extras { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-top: 0.875rem; margin-top: 0.875rem; border-top: 1px solid var(--border); font-size: 0.8125rem; }
#real-intelligence-cost .chart-extras > details { max-width: 100%; }
#real-intelligence-cost .chart-extras > details[open] { flex-basis: 100%; }
#real-intelligence-cost .chart-extras summary { color: var(--site-muted); }
#real-intelligence-cost .model-controls { margin-top: 0.625rem; }
#real-intelligence-cost .model-controls select { width: 100%; }
#real-intelligence-cost .lab-key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0.625rem 1rem; margin-top: 0.75rem; }
#real-intelligence-cost .lab-key-item { display: flex; align-items: center; gap: 0.5rem; }
#real-intelligence-cost .lab-key-item svg { flex: none; fill: currentColor; }
#real-intelligence-cost .frontier-key-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-top: 0.75rem; }
#real-intelligence-cost .frontier-key-heading { font-weight: 500; margin-bottom: 0.375rem; }
#real-intelligence-cost .frontier-key-model { display: flex; gap: 0.625rem; width: 100%; text-align: left; padding: 0.25rem 0; }
#real-intelligence-cost .frontier-key-model span:first-child { flex: 0 0 1.5rem; }
#real-intelligence-cost .frontier-key-model .context-badge { flex: none; align-self: center; padding: 2px 3px; border: 1px solid currentColor; border-radius: 3px; font-size: 9px; line-height: 1; }
#real-intelligence-cost .scatter .context-badge text { font-family: Arial, sans-serif; font-size: 8px; font-weight: 600; }

/* Selected model information only appears after a selection. */
#real-intelligence-cost .selected { margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 0.5rem; background: var(--secondary); border: 1px solid var(--border); }
#real-intelligence-cost .selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#real-intelligence-cost .clear-selection { font-size: 1.125rem; line-height: 1; padding: 0.25rem 0.5rem; color: var(--muted-foreground); }
#real-intelligence-cost .selection-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
#real-intelligence-cost .selection-channel { margin: 0.5rem 0 0; font-size: 0.8125rem; }
#real-intelligence-cost .selected details { margin-top: 0.75rem; font-size: 0.8125rem; }
#real-intelligence-cost .selected details p { margin: 0.5rem 0 0; }
#real-intelligence-cost .tooltip { display: none; position: absolute; pointer-events: none; max-width: min(285px, 100%); padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--popover); color: var(--popover-foreground); box-shadow: 0 4px 20px #18181b1a; z-index: 5; font-size: 0.8125rem; }
#real-intelligence-cost .tip-title { font-weight: 600; margin-bottom: 0.375rem; }
#real-intelligence-cost .tip-row { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; }
#real-intelligence-cost .tip-note { margin-top: 0.5rem; line-height: 1.4; }

@media (hover: hover) and (pointer: fine) {
  #real-intelligence-cost button:hover, #real-intelligence-cost .chart-options > summary:hover { background: var(--secondary); }
}
@media (max-width: 599px) {
  #real-intelligence-cost { padding: 0.75rem 0.5rem; border-radius: 0.75rem; }
  #real-intelligence-cost .chart-toolbar { gap: 0.5rem; }
  #real-intelligence-cost .company-controls { min-width: 8rem; }
  #real-intelligence-cost .company-controls select { max-width: none; }
  #real-intelligence-cost .legend { margin-right: auto; }
  #real-intelligence-cost .chart-extras { gap: 0.5rem 1rem; }
  #real-intelligence-cost .chart-status { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  #real-intelligence-cost button:active { transform: none; }
}