@opendata-ai/openchart-react 6.3.0 → 6.5.0

package/dist/styles.css

@@ -1,764 +1 @@
-/**
- * @opendata-ai/core styles
- *
- * Plain CSS with viz- prefix for all class names.
- * CSS custom properties for theme overrides.
- * Dark mode via .viz-dark class on the container.
- */
-
-/* For optimal typography, load Inter: https://fonts.google.com/specimen/Inter */
-
-/* ---------------------------------------------------------------------------
- * Custom properties (light mode defaults)
- * --------------------------------------------------------------------------- */
-
-.viz-root,
-.viz-chart-root,
-.viz-table-wrapper,
-.viz-table-root,
-.viz-graph-wrapper,
-.viz-graph-root {
-  --viz-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --viz-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
-  --viz-title-size: 22px;
-  --viz-title-weight: 700;
-  --viz-title-tracking: -0.02em;
-  --viz-subtitle-size: 14px;
-  --viz-subtitle-weight: 400;
-  --viz-source-size: 12px;
-  --viz-source-weight: 400;
-  --viz-body-size: 13px;
-  --viz-bg: #ffffff;
-  --viz-text: #1d1d1d;
-  --viz-text-secondary: #5c5c5c;
-  --viz-text-muted: #999999;
-  --viz-gridline: #e8e8e8;
-  --viz-axis: #888888;
-  --viz-border: #e2e2e2;
-  --viz-border-radius: 4px;
-  --viz-focus: #3b82f6;
-  --viz-hover-bg: rgba(0, 0, 0, 0.025);
-  --viz-tooltip-bg: rgba(255, 255, 255, 0.88);
-  --viz-tooltip-border: rgba(0, 0, 0, 0.08);
-  --viz-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
-  --viz-tooltip-text: #1d1d1d;
-  --viz-legend-text: #555555;
-}
-
-/* ---------------------------------------------------------------------------
- * Dark mode overrides
- * --------------------------------------------------------------------------- */
-
-.viz-dark {
-  --viz-bg: #1a1a2e;
-  --viz-text: #e0e0e0;
-  --viz-text-secondary: #b0b0b0;
-  --viz-text-muted: #808080;
-  --viz-gridline: #333355;
-  --viz-axis: #999999;
-  --viz-border: #444466;
-  --viz-focus: #60a5fa;
-  --viz-hover-bg: rgba(255, 255, 255, 0.05);
-  --viz-tooltip-bg: rgba(30, 30, 50, 0.85);
-  --viz-tooltip-border: rgba(255, 255, 255, 0.08);
-  --viz-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.4);
-  --viz-tooltip-text: #e0e0e0;
-  --viz-legend-text: #b0b0b0;
-}
-
-/* ---------------------------------------------------------------------------
- * Chrome (title, subtitle, source, footer)
- * --------------------------------------------------------------------------- */
-
-.viz-chrome {
-  font-family: var(--viz-font-family);
-}
-
-.viz-title {
-  font-size: var(--viz-title-size);
-  font-weight: var(--viz-title-weight);
-  letter-spacing: var(--viz-title-tracking);
-  fill: var(--viz-text);
-}
-
-.viz-subtitle {
-  font-size: var(--viz-subtitle-size);
-  font-weight: var(--viz-subtitle-weight);
-  fill: var(--viz-text-secondary);
-}
-
-.viz-source,
-.viz-byline,
-.viz-footer {
-  font-size: var(--viz-source-size);
-  font-weight: var(--viz-source-weight);
-  fill: var(--viz-text-muted);
-}
-
-/* ---------------------------------------------------------------------------
- * Table footer chrome
- * --------------------------------------------------------------------------- */
-
-.viz-chrome-footer {
-  padding-top: 16px;
-}
-
-/* ---------------------------------------------------------------------------
- * Tooltip
- * --------------------------------------------------------------------------- */
-
-.viz-tooltip {
-  position: absolute;
-  display: none;
-  pointer-events: none;
-  z-index: 1000;
-  background: var(--viz-tooltip-bg);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--viz-tooltip-border);
-  border-radius: 8px;
-  box-shadow: var(--viz-tooltip-shadow);
-  color: var(--viz-tooltip-text);
-  font-family: var(--viz-font-family);
-  font-size: 12px;
-  padding: 0;
-  max-width: 260px;
-  min-width: 140px;
-  line-height: 1.4;
-  animation: viz-tooltip-in 120ms ease-out;
-}
-
-@keyframes viz-tooltip-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.viz-tooltip-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px 6px;
-}
-
-.viz-tooltip-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.viz-tooltip-title {
-  font-weight: 600;
-  font-size: 12px;
-  letter-spacing: -0.01em;
-  color: var(--viz-tooltip-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.viz-tooltip-body {
-  padding: 4px 12px 8px;
-  border-top: 1px solid var(--viz-tooltip-border);
-}
-
-/* Only add separator when header is present */
-.viz-tooltip-header + .viz-tooltip-body {
-  padding-top: 6px;
-}
-
-/* No separator when body is the only child */
-.viz-tooltip-body:first-child {
-  border-top: none;
-  padding-top: 8px;
-}
-
-.viz-tooltip-row {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 1px 0;
-}
-
-.viz-tooltip-label {
-  color: var(--viz-text-muted);
-  font-size: 11px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.viz-tooltip-value {
-  font-weight: 500;
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ---------------------------------------------------------------------------
- * Legend
- * --------------------------------------------------------------------------- */
-
-.viz-legend {
-  font-family: var(--viz-font-family);
-  font-size: var(--viz-body-size);
-}
-
-.viz-legend-entry {
-  cursor: default;
-}
-
-.viz-legend text {
-  fill: var(--viz-legend-text);
-}
-
-/* ---------------------------------------------------------------------------
- * React wrapper roots
- * --------------------------------------------------------------------------- */
-
-.viz-chart-root {
-  width: 100%;
-}
-
-.viz-table-root,
-.viz-graph-root {
-  width: 100%;
-  height: 100%;
-}
-
-.viz-table-root {
-  overflow: auto;
-}
-
-/* ---------------------------------------------------------------------------
- * Chart container
- * --------------------------------------------------------------------------- */
-
-.viz-chart {
-  font-family: var(--viz-font-family);
-  display: block;
-  width: 100%;
-}
-
-/* ---------------------------------------------------------------------------
- * Screen reader only utility
- * --------------------------------------------------------------------------- */
-
-.viz-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* ---------------------------------------------------------------------------
- * Table base
- * --------------------------------------------------------------------------- */
-
-.viz-table-wrapper {
-  font-family: var(--viz-font-family);
-  color: var(--viz-text);
-  background: var(--viz-bg);
-}
-
-.viz-table-wrapper > .viz-chrome {
-  margin-bottom: 16px;
-}
-
-.viz-table-title {
-  margin-bottom: 4px;
-  font-size: var(--viz-title-computed-size, var(--viz-title-size));
-  font-weight: var(--viz-title-computed-weight, var(--viz-title-weight));
-  color: var(--viz-title-computed-color, var(--viz-text));
-}
-
-.viz-table-subtitle {
-  margin-bottom: 8px;
-  font-size: var(--viz-subtitle-computed-size, var(--viz-subtitle-size));
-  font-weight: var(--viz-subtitle-computed-weight, var(--viz-subtitle-weight));
-  color: var(--viz-subtitle-computed-color, var(--viz-text-secondary));
-}
-
-.viz-table-source {
-  font-size: var(--viz-source-computed-size, var(--viz-source-size));
-  color: var(--viz-source-computed-color, var(--viz-text-muted));
-}
-
-.viz-table-footer-text {
-  font-size: var(--viz-footer-computed-size, var(--viz-source-size));
-  color: var(--viz-footer-computed-color, var(--viz-text-muted));
-}
-
-.viz-table-scroll {
-  overflow-x: auto;
-}
-
-.viz-table-wrapper table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.viz-table-wrapper th,
-.viz-table-wrapper td {
-  padding: 10px 16px;
-  text-align: left;
-  border-bottom: 1px solid var(--viz-border);
-}
-
-.viz-table-wrapper th {
-  font-weight: 600;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--viz-text-secondary);
-  white-space: nowrap;
-}
-
-.viz-table-wrapper thead {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: var(--viz-bg);
-}
-
-.viz-table-wrapper thead th {
-  border-bottom-width: 2px;
-}
-
-.viz-table-wrapper td {
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-}
-
-/* ---------------------------------------------------------------------------
- * Sticky first column
- * --------------------------------------------------------------------------- */
-
-.viz-table--sticky th:first-child,
-.viz-table--sticky td:first-child {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  background: var(--viz-bg);
-}
-
-/* ---------------------------------------------------------------------------
- * Sort controls
- * --------------------------------------------------------------------------- */
-
-.viz-table-sort-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px;
-  margin-left: 6px;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  vertical-align: middle;
-  gap: 2px;
-}
-
-.viz-table-sort-btn::before,
-.viz-table-sort-btn::after {
-  content: "";
-  display: block;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  transition:
-    opacity 0.15s,
-    border-color 0.15s;
-}
-
-.viz-table-sort-btn::before {
-  border-bottom: 4.5px solid var(--viz-text-secondary);
-  opacity: 0.45;
-}
-
-.viz-table-sort-btn::after {
-  border-top: 4.5px solid var(--viz-text-secondary);
-  opacity: 0.45;
-}
-
-.viz-table-sort-btn:hover::before,
-.viz-table-sort-btn:hover::after {
-  opacity: 0.75;
-}
-
-th[aria-sort="ascending"] .viz-table-sort-btn::before {
-  opacity: 1;
-  border-bottom-color: var(--viz-text);
-}
-
-th[aria-sort="ascending"] .viz-table-sort-btn::after {
-  opacity: 0.15;
-}
-
-th[aria-sort="descending"] .viz-table-sort-btn::after {
-  opacity: 1;
-  border-top-color: var(--viz-text);
-}
-
-th[aria-sort="descending"] .viz-table-sort-btn::before {
-  opacity: 0.15;
-}
-
-/* ---------------------------------------------------------------------------
- * Search
- * --------------------------------------------------------------------------- */
-
-.viz-table-search {
-  padding: 8px 0;
-}
-
-.viz-table-search input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--viz-border);
-  border-radius: 6px;
-  font-size: 13px;
-  font-family: inherit;
-  background: var(--viz-bg);
-  color: var(--viz-text);
-  box-sizing: border-box;
-  transition: border-color 0.15s;
-}
-
-.viz-table-search input::placeholder {
-  color: var(--viz-text-muted);
-  font-size: 13px;
-}
-
-.viz-table-search input:focus {
-  outline: none;
-  border-color: var(--viz-focus);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-/* ---------------------------------------------------------------------------
- * Pagination
- * --------------------------------------------------------------------------- */
-
-.viz-table-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 0 4px;
-  font-size: 13px;
-  color: var(--viz-text-secondary);
-}
-
-.viz-table-pagination-info {
-  font-variant-numeric: tabular-nums;
-}
-
-.viz-table-pagination-btns {
-  display: flex;
-  gap: 8px;
-}
-
-.viz-table-pagination button {
-  padding: 6px 14px;
-  border: 1px solid var(--viz-border);
-  border-radius: 6px;
-  background: var(--viz-bg);
-  color: var(--viz-text);
-  cursor: pointer;
-  font-size: 13px;
-  font-family: inherit;
-  transition:
-    background 0.15s,
-    border-color 0.15s;
-}
-
-.viz-table-pagination button:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-.viz-table-pagination button:hover:not(:disabled) {
-  background: var(--viz-hover-bg);
-  border-color: var(--viz-axis);
-}
-
-.viz-table-pagination button:focus-visible {
-  outline: 2px solid var(--viz-focus);
-  outline-offset: 1px;
-}
-
-/* ---------------------------------------------------------------------------
- * Bar cells
- * --------------------------------------------------------------------------- */
-
-.viz-table-bar {
-  position: relative;
-}
-
-.viz-table-bar-fill {
-  position: absolute;
-  top: 6px;
-  left: 0;
-  bottom: 6px;
-  border-radius: 2px;
-  opacity: 0.15;
-  pointer-events: none;
-}
-
-.viz-table-bar-value {
-  position: relative;
-  z-index: 1;
-}
-
-/* ---------------------------------------------------------------------------
- * Sparkline cells
- * --------------------------------------------------------------------------- */
-
-.viz-table-sparkline {
-  display: block;
-  width: 100%;
-  position: relative;
-}
-
-.viz-table-sparkline svg {
-  display: block;
-  width: 100%;
-  overflow: visible;
-}
-
-.viz-table-sparkline-dot {
-  position: absolute;
-  border-radius: 50%;
-  width: 5px;
-  height: 5px;
-}
-
-.viz-table-sparkline-labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-  line-height: 1;
-}
-
-/* ---------------------------------------------------------------------------
- * Image cells
- * --------------------------------------------------------------------------- */
-
-.viz-table-image {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.viz-table-image img {
-  object-fit: cover;
-}
-
-.viz-table-image-rounded img {
-  border-radius: 50%;
-}
-
-/* ---------------------------------------------------------------------------
- * Flag cells
- * --------------------------------------------------------------------------- */
-
-.viz-table-flag {
-  font-size: 1.2em;
-}
-
-/* ---------------------------------------------------------------------------
- * Compact mode
- * --------------------------------------------------------------------------- */
-
-.viz-table--compact th,
-.viz-table--compact td {
-  padding: 4px 8px;
-  font-size: 13px;
-}
-
-.viz-table--compact th {
-  font-size: 11px;
-}
-
-/* ---------------------------------------------------------------------------
- * Row hover (when onRowClick is set)
- * --------------------------------------------------------------------------- */
-
-.viz-table--clickable tbody tr {
-  cursor: pointer;
-}
-
-.viz-table--clickable tbody tr:hover {
-  background: var(--viz-hover-bg);
-}
-
-/* ---------------------------------------------------------------------------
- * Table header keyboard focus
- * --------------------------------------------------------------------------- */
-
-.viz-table-wrapper th:focus {
-  outline: 2px solid var(--viz-focus);
-  outline-offset: -2px;
-}
-
-/* ---------------------------------------------------------------------------
- * Keyboard cell focus indicator
- * --------------------------------------------------------------------------- */
-
-.viz-table-cell-focus {
-  outline: 2px solid var(--viz-focus);
-  outline-offset: -2px;
-}
-
-/* ---------------------------------------------------------------------------
- * Table body focus (for keyboard navigation entry)
- * --------------------------------------------------------------------------- */
-
-.viz-table-wrapper tbody:focus {
-  outline: none;
-}
-
-/* ---------------------------------------------------------------------------
- * Empty state
- * --------------------------------------------------------------------------- */
-
-.viz-table-empty {
-  padding: 32px 16px;
-  text-align: center;
-  color: var(--viz-text-secondary);
-  font-size: 14px;
-  font-style: italic;
-}
-
-/* ---------------------------------------------------------------------------
- * Reduced motion
- * --------------------------------------------------------------------------- */
-
-@media (prefers-reduced-motion: reduce) {
-  .viz-table-sort-btn::before,
-  .viz-table-sort-btn::after,
-  .viz-table-search input,
-  .viz-table-pagination button {
-    transition: none;
-  }
-}
-
-/* ---------------------------------------------------------------------------
- * Graph
- * --------------------------------------------------------------------------- */
-
-.viz-graph-wrapper {
-  position: relative;
-  overflow: hidden;
-  background: var(--viz-bg);
-  font-family: var(--viz-font-family);
-  width: 100%;
-  height: 100%;
-}
-
-.viz-graph-canvas {
-  display: block;
-  cursor: grab;
-}
-
-.viz-graph-canvas--dragging {
-  cursor: grabbing;
-}
-
-.viz-graph-chrome {
-  padding: 16px 16px 8px;
-}
-
-.viz-graph-chrome .viz-title {
-  font-size: var(--viz-title-size);
-  font-weight: var(--viz-title-weight);
-  letter-spacing: var(--viz-title-tracking);
-  color: var(--viz-text);
-  margin: 0 0 4px;
-}
-
-.viz-graph-chrome .viz-subtitle {
-  font-size: var(--viz-subtitle-size);
-  color: var(--viz-text-secondary);
-  margin: 0;
-}
-
-.viz-graph-legend {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: var(--viz-bg);
-  border: 1px solid var(--viz-border);
-  border-radius: var(--viz-border-radius);
-  padding: 8px 12px;
-  font-size: 12px;
-  color: var(--viz-text-secondary);
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.viz-graph-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 0;
-}
-
-.viz-graph-legend-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.viz-graph-search {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-}
-
-.viz-graph-search input {
-  font-family: var(--viz-font-family);
-  font-size: var(--viz-body-size);
-  padding: 6px 10px;
-  border: 1px solid var(--viz-border);
-  border-radius: var(--viz-border-radius);
-  background: var(--viz-bg);
-  color: var(--viz-text);
-  outline: none;
-}
-
-.viz-graph-search input:focus {
-  border-color: var(--viz-focus);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
-}
-
-/* Dark mode graph overrides (darker bg for canvas-based rendering) */
-.viz-dark .viz-graph-wrapper,
-.viz-graph-wrapper.viz-dark {
-  --viz-bg: #0d1117;
-}
-
-.viz-dark .viz-graph-legend,
-.viz-dark.viz-graph-wrapper .viz-graph-legend {
-  background: rgba(13, 17, 23, 0.85);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.viz-dark .viz-graph-search input {
-  background: rgba(13, 17, 23, 0.85);
-  border-color: rgba(255, 255, 255, 0.1);
-}
+.oc-root,.oc-chart-root,.oc-table-wrapper,.oc-table-root,.oc-graph-wrapper,.oc-graph-root{--oc-font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--oc-font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--oc-ease-smooth:linear(0, .157, .438, .64, .766, .85, .906, .941, .964, .978, .988, .994, .998, 1);--oc-ease-snappy:linear(0, .012, .048, .108, .194, .302, .426, .559, .69, .808, .905, .973, 1.013, 1.028, 1.023, 1.006, .984, .966, .957, .957, .964, .975, .986, .995, 1, 1.003, 1.002, 1, .998, .998, .999, 1);--oc-animation-duration:.5s;--oc-animation-stagger:80ms;--oc-annotation-delay:.2s;--oc-title-size:22px;--oc-title-weight:700;--oc-title-tracking:-.02em;--oc-subtitle-size:14px;--oc-subtitle-weight:400;--oc-source-size:12px;--oc-source-weight:400;--oc-body-size:13px;--oc-bg:#fff;--oc-text:#1d1d1d;--oc-text-secondary:#5c5c5c;--oc-text-muted:#999;--oc-gridline:#e8e8e8;--oc-axis:#888;--oc-border:#e2e2e2;--oc-border-radius:4px;--oc-focus:#3b82f6;--oc-hover-bg:rgba(0,0,0,.024);--oc-tooltip-bg:rgba(255,255,255,.88);--oc-tooltip-border:rgba(0,0,0,.08);--oc-tooltip-shadow:0 2px 8px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.12);--oc-tooltip-text:#1d1d1d;--oc-legend-text:#555}.oc-dark{--oc-bg:#1a1a2e;--oc-text:#e0e0e0;--oc-text-secondary:#b0b0b0;--oc-text-muted:gray;--oc-gridline:#335;--oc-axis:#999;--oc-border:#446;--oc-focus:#60a5fa;--oc-hover-bg:rgba(255,255,255,.05);--oc-tooltip-bg:rgba(30,30,50,.85);--oc-tooltip-border:rgba(255,255,255,.08);--oc-tooltip-shadow:0 2px 8px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.4);--oc-tooltip-text:#e0e0e0;--oc-legend-text:#b0b0b0}.oc-chart-root{width:100%}.oc-table-root,.oc-graph-root{width:100%;height:100%}.oc-table-root{overflow:auto}.oc-chart{font-family:var(--oc-font-family);width:100%;display:block}.oc-sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.oc-editable-hover{outline-offset:2px;border-radius:2px;outline:1.5px solid rgba(79,70,229,.35)}.oc-chrome{font-family:var(--oc-font-family)}.oc-title{font-size:var(--oc-title-size);font-weight:var(--oc-title-weight);letter-spacing:var(--oc-title-tracking);fill:var(--oc-text)}.oc-subtitle{font-size:var(--oc-subtitle-size);font-weight:var(--oc-subtitle-weight);fill:var(--oc-text-secondary)}.oc-source,.oc-byline,.oc-footer{font-size:var(--oc-source-size);font-weight:var(--oc-source-weight);fill:var(--oc-text-muted)}.oc-chrome-footer{padding-top:16px}.oc-tooltip{pointer-events:none;z-index:1000;background:var(--oc-tooltip-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--oc-tooltip-border);box-shadow:var(--oc-tooltip-shadow);color:var(--oc-tooltip-text);font-family:var(--oc-font-family);border-radius:8px;min-width:140px;max-width:260px;padding:0;font-size:12px;line-height:1.4;animation:.12s ease-out oc-tooltip-in;display:none;position:absolute}.oc-tooltip .oc-tooltip-header{align-items:center;gap:6px;padding:8px 12px 6px;display:flex}.oc-tooltip .oc-tooltip-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.oc-tooltip .oc-tooltip-title{letter-spacing:-.01em;color:var(--oc-tooltip-text);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.oc-tooltip .oc-tooltip-body{border-top:1px solid var(--oc-tooltip-border);padding:4px 12px 8px}.oc-tooltip .oc-tooltip-header+.oc-tooltip-body{padding-top:6px}.oc-tooltip .oc-tooltip-body:first-child{border-top:none;padding-top:8px}.oc-tooltip .oc-tooltip-row{justify-content:space-between;align-items:baseline;gap:12px;padding:1px 0;display:flex}.oc-tooltip .oc-tooltip-label{color:var(--oc-text-muted);white-space:nowrap;flex-shrink:0;font-size:11px}.oc-tooltip .oc-tooltip-value{font-variant-numeric:tabular-nums;text-align:right;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;overflow:hidden}.oc-legend{font-family:var(--oc-font-family);font-size:var(--oc-body-size)}.oc-legend-entry{cursor:default}.oc-legend text{fill:var(--oc-legend-text)}.oc-table-wrapper{font-family:var(--oc-font-family);color:var(--oc-text);background:var(--oc-bg)}.oc-table-wrapper>.oc-chrome{margin-bottom:16px}.oc-table-wrapper table{border-collapse:collapse;width:100%}.oc-table-wrapper th{text-align:left;border-bottom:1px solid var(--oc-border);padding:10px 16px}.oc-table-wrapper td{text-align:left;border-bottom:1px solid var(--oc-border);padding:10px 16px}.oc-table-wrapper th{text-transform:uppercase;letter-spacing:.05em;color:var(--oc-text-secondary);white-space:nowrap;font-size:12px;font-weight:600}.oc-table-wrapper thead{z-index:2;background:var(--oc-bg);position:sticky;top:0}.oc-table-wrapper thead th{border-bottom-width:2px}.oc-table-wrapper td{font-variant-numeric:tabular-nums;font-size:14px}.oc-table-wrapper th:focus{outline:2px solid var(--oc-focus);outline-offset:-2px}.oc-table-wrapper tbody:focus{outline:none}.oc-table-title{font-size:var(--oc-title-computed-size,var(--oc-title-size));font-weight:var(--oc-title-computed-weight,var(--oc-title-weight));color:var(--oc-title-computed-color,var(--oc-text));margin-bottom:4px}.oc-table-subtitle{font-size:var(--oc-subtitle-computed-size,var(--oc-subtitle-size));font-weight:var(--oc-subtitle-computed-weight,var(--oc-subtitle-weight));color:var(--oc-subtitle-computed-color,var(--oc-text-secondary));margin-bottom:8px}.oc-table-source{font-size:var(--oc-source-computed-size,var(--oc-source-size));color:var(--oc-source-computed-color,var(--oc-text-muted))}.oc-table-footer-text{font-size:var(--oc-footer-computed-size,var(--oc-source-size));color:var(--oc-footer-computed-color,var(--oc-text-muted))}.oc-table-scroll{overflow-x:auto}.oc-table--sticky th:first-child{z-index:1;background:var(--oc-bg);position:sticky;left:0}.oc-table--sticky td:first-child{z-index:1;background:var(--oc-bg);position:sticky;left:0}.oc-table-sort-btn{cursor:pointer;vertical-align:middle;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;margin-left:6px;padding:2px;display:inline-flex}.oc-table-sort-btn:before{content:"";border-left:5px solid transparent;border-right:5px solid transparent;width:0;height:0;transition:opacity .15s,border-color .15s;display:block}.oc-table-sort-btn:after{content:"";border-left:5px solid transparent;border-right:5px solid transparent;width:0;height:0;transition:opacity .15s,border-color .15s;display:block}.oc-table-sort-btn:before{border-bottom:4.5px solid var(--oc-text-secondary);opacity:.45}.oc-table-sort-btn:after{border-top:4.5px solid var(--oc-text-secondary);opacity:.45}.oc-table-sort-btn:hover:before{opacity:.75}.oc-table-sort-btn:hover:after{opacity:.75}th[aria-sort=ascending] .oc-table-sort-btn:before{opacity:1;border-bottom-color:var(--oc-text)}th[aria-sort=ascending] .oc-table-sort-btn:after{opacity:.15}th[aria-sort=descending] .oc-table-sort-btn:after{opacity:1;border-top-color:var(--oc-text)}th[aria-sort=descending] .oc-table-sort-btn:before{opacity:.15}.oc-table-search{padding:8px 0}.oc-table-search input{border:1px solid var(--oc-border);background:var(--oc-bg);width:100%;color:var(--oc-text);box-sizing:border-box;border-radius:6px;padding:8px 12px;font-family:inherit;font-size:13px;transition:border-color .15s}.oc-table-search input::-ms-input-placeholder{color:var(--oc-text-muted);font-size:13px}.oc-table-search input::placeholder{color:var(--oc-text-muted);font-size:13px}.oc-table-search input:focus{border-color:var(--oc-focus);outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.oc-table-pagination{color:var(--oc-text-secondary);justify-content:space-between;align-items:center;padding:12px 0 4px;font-size:13px;display:flex}.oc-table-pagination button{border:1px solid var(--oc-border);background:var(--oc-bg);color:var(--oc-text);cursor:pointer;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:13px;transition:background .15s,border-color .15s}.oc-table-pagination button:disabled{opacity:.35;cursor:not-allowed}.oc-table-pagination button:hover:not(:disabled){background:var(--oc-hover-bg);border-color:var(--oc-axis)}.oc-table-pagination button:focus-visible{outline:2px solid var(--oc-focus);outline-offset:1px}.oc-table-pagination-info{font-variant-numeric:tabular-nums}.oc-table-pagination-btns{gap:8px;display:flex}.oc-table-bar{position:relative}.oc-table-bar-fill{opacity:.15;pointer-events:none;border-radius:2px;position:absolute;top:6px;bottom:6px;left:0}.oc-table-bar-value{z-index:1;position:relative}.oc-table-sparkline{width:100%;display:block;position:relative}.oc-table-sparkline svg{width:100%;display:block;overflow:visible}.oc-table-sparkline-dot{border-radius:50%;width:5px;height:5px;position:absolute}.oc-table-sparkline-labels{justify-content:space-between;font-size:11px;line-height:1;display:flex}.oc-table-image{vertical-align:middle;display:inline-block}.oc-table-image img{object-fit:cover}.oc-table-image-rounded img{border-radius:50%}.oc-table-flag{font-size:1.2em}.oc-table--compact th{padding:4px 8px;font-size:13px}.oc-table--compact td{padding:4px 8px;font-size:13px}.oc-table--compact th{font-size:11px}.oc-table--clickable tbody tr{cursor:pointer}.oc-table--clickable tbody tr:hover{background:var(--oc-hover-bg)}.oc-table-cell-focus{outline:2px solid var(--oc-focus);outline-offset:-2px}.oc-table-empty{text-align:center;color:var(--oc-text-secondary);padding:32px 16px;font-size:14px;font-style:italic}.oc-table-wrapper.oc-animate>.oc-chrome{animation:oc-enter-fade calc(var(--oc-animation-duration) * .6) var(--oc-animation-ease,var(--oc-ease-smooth)) both}.oc-table-wrapper.oc-animate thead{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .4) var(--oc-animation-ease,var(--oc-ease-smooth)) both}.oc-table-wrapper.oc-animate tbody tr{animation:oc-table-enter-row var(--oc-animation-duration) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0))}.oc-table-wrapper.oc-animate tbody td{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .5) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0))}.oc-table-wrapper.oc-animate td.oc-table-heatmap{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .7) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0) + var(--oc-animation-duration) * .3)}.oc-table-wrapper.oc-animate td.oc-table-category{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .7) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0) + var(--oc-animation-duration) * .3)}.oc-table-wrapper.oc-animate .oc-table-bar-fill{animation:oc-table-enter-bar-fill calc(var(--oc-animation-duration) * .8) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0) + var(--oc-animation-duration) * .3)}.oc-table-wrapper.oc-animate .oc-table-sparkline>svg{animation:oc-enter-line calc(var(--oc-animation-duration) * .8) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0) + var(--oc-animation-duration) * .4)}.oc-table-wrapper.oc-animate .oc-table-sparkline-dot{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .3) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0) + var(--oc-animation-duration) * .8)}.oc-table-wrapper.oc-animate .oc-table-sparkline-labels{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .3) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-row-index,0) + var(--oc-animation-duration) * .8)}.oc-table-wrapper.oc-animate .oc-table-search{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .5) var(--oc-animation-ease,var(--oc-ease-smooth)) both}.oc-table-wrapper.oc-animate .oc-table-pagination{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .5) var(--oc-animation-ease,var(--oc-ease-smooth)) both}.oc-graph-wrapper{background:var(--oc-bg);font-family:var(--oc-font-family);width:100%;height:100%;position:relative;overflow:hidden}.oc-graph-canvas{cursor:grab;display:block}.oc-graph-canvas--dragging{cursor:grabbing}.oc-graph-chrome{padding:16px 16px 8px}.oc-graph-chrome .oc-title{font-size:var(--oc-title-size);font-weight:var(--oc-title-weight);letter-spacing:var(--oc-title-tracking);color:var(--oc-text);margin:0 0 4px}.oc-graph-chrome .oc-subtitle{font-size:var(--oc-subtitle-size);color:var(--oc-text-secondary);margin:0}.oc-graph-legend{background:var(--oc-bg);border:1px solid var(--oc-border);border-radius:var(--oc-border-radius);color:var(--oc-text-secondary);max-height:200px;padding:8px 12px;font-size:12px;position:absolute;top:8px;right:8px;overflow-y:auto}.oc-graph-legend-item{align-items:center;gap:6px;padding:2px 0;display:flex}.oc-graph-legend-swatch{border-radius:50%;flex-shrink:0;width:10px;height:10px}.oc-graph-search{position:absolute;top:8px;left:8px}.oc-graph-search input{font-family:var(--oc-font-family);font-size:var(--oc-body-size);border:1px solid var(--oc-border);border-radius:var(--oc-border-radius);background:var(--oc-bg);color:var(--oc-text);outline:none;padding:6px 10px}.oc-graph-search input:focus{border-color:var(--oc-focus);box-shadow:0 0 0 2px rgba(59,130,246,.25)}.oc-dark .oc-graph-wrapper,.oc-graph-wrapper.oc-dark{--oc-bg:#0d1117}.oc-dark .oc-graph-legend,.oc-dark.oc-graph-wrapper .oc-graph-legend,.oc-dark .oc-graph-search input{background:rgba(13,17,23,.85);border-color:rgba(255,255,255,.1)}@keyframes oc-enter-bar{0%{clip-path:inset(100% 0 0);opacity:0}75%{opacity:1}to{clip-path:inset(0);opacity:1}}@keyframes oc-enter-bar-h{0%{clip-path:inset(0 100% 0 0);opacity:0}75%{opacity:1}to{clip-path:inset(0);opacity:1}}@keyframes oc-enter-line{0%{clip-path:inset(0 100% 0 0);opacity:0}15%{opacity:1}to{clip-path:inset(0);opacity:1}}@keyframes oc-enter-point{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes oc-enter-fade-only{0%{opacity:0}to{opacity:1}}@keyframes oc-enter-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes oc-table-enter-row{0%{transform:translateY(6px)}to{transform:translateY(0)}}@keyframes oc-table-enter-bar-fill{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes oc-tooltip-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.oc-animate .oc-mark-rect rect{animation:oc-enter-bar var(--oc-animation-duration) var(--oc-ease-smooth) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-bar rect{animation:oc-enter-bar var(--oc-animation-duration) var(--oc-ease-smooth) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-rect[data-orient=horizontal] rect{animation-name:oc-enter-bar-h}.oc-animate .oc-mark-bar[data-orient=horizontal] rect{animation-name:oc-enter-bar-h}.oc-animate .oc-mark-rect[data-stack-pos] rect{animation-duration:var(--oc-stack-segment-duration,.15s);animation-timing-function:linear;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0) + var(--oc-stack-pos,0) * var(--oc-stack-segment-duration,.15s))}.oc-animate .oc-mark-line{animation:oc-enter-line var(--oc-animation-duration) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-area{animation:oc-enter-line var(--oc-animation-duration) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-arc{animation:oc-enter-fade-only var(--oc-animation-duration) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate circle.oc-mark-point{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .4) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate circle.oc-mark-circle{animation:oc-enter-fade-only calc(var(--oc-animation-duration) * .4) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-line~circle.oc-mark-point{animation-delay:calc(var(--oc-animation-duration) * .35 + var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-area~circle.oc-mark-point{animation-delay:calc(var(--oc-animation-duration) * .35 + var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-text text{animation:oc-enter-fade calc(var(--oc-animation-duration) * .6) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-rule line{animation:oc-enter-fade calc(var(--oc-animation-duration) * .5) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-tick line{animation:oc-enter-fade calc(var(--oc-animation-duration) * .5) var(--oc-animation-ease,var(--oc-ease-smooth)) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0))}.oc-animate .oc-mark-label{animation:oc-enter-fade .3s var(--oc-ease-smooth) both;animation-delay:calc(var(--oc-animation-stagger) * var(--oc-mark-index,0) + var(--oc-animation-duration) * .7)}.oc-animate .oc-annotation{animation:oc-enter-fade .4s var(--oc-ease-smooth) both;animation-delay:calc(var(--oc-animation-duration) + var(--oc-annotation-delay,.2s))}@media (prefers-reduced-motion:reduce){.oc-table-sort-btn:before,.oc-table-sort-btn:after,.oc-table-search input,.oc-table-pagination button{transition:none}.oc-animate .oc-mark-rect rect,.oc-animate .oc-mark-bar rect,.oc-animate .oc-mark-arc,.oc-animate .oc-mark-line,.oc-animate .oc-mark-area,.oc-animate circle.oc-mark-point,.oc-animate circle.oc-mark-circle,.oc-animate .oc-mark-text text,.oc-animate .oc-mark-rule line,.oc-animate .oc-mark-tick line,.oc-animate .oc-mark-label,.oc-animate .oc-annotation,.oc-table-wrapper.oc-animate>.oc-chrome,.oc-table-wrapper.oc-animate thead,.oc-table-wrapper.oc-animate tbody tr,.oc-table-wrapper.oc-animate tbody td,.oc-table-wrapper.oc-animate td.oc-table-heatmap,.oc-table-wrapper.oc-animate td.oc-table-category,.oc-table-wrapper.oc-animate .oc-table-bar-fill,.oc-table-wrapper.oc-animate .oc-table-sparkline>svg,.oc-table-wrapper.oc-animate .oc-table-sparkline-dot,.oc-table-wrapper.oc-animate .oc-table-sparkline-labels,.oc-table-wrapper.oc-animate .oc-table-search,.oc-table-wrapper.oc-animate .oc-table-pagination{animation:none}}