/* Quiet, precise chart chrome. Geometry and labels live at the host's native
   resolution; detailed gallery previews are never scaled full-size charts. */
:root,
[data-theme="dark"],
[data-app-theme="dark"] {
  --ac-dark: 1;
  --ac-text: #E3E6E8;
  --ac-muted: #A1A8AE;
  --ac-axis: #596168;
  --ac-grid: #353B40;
  --ac-surface: #191D21;
  --ac-elevated: #252B30;
  --ac-header: #23292E;
  --ac-border: #3B4248;
  --ac-row-border: #2D3338;
  --ac-row-hover: #242C32;
  --ac-focus: #44B599;
  --ac-positive: #7CB98C;
  --ac-negative: #D88790;
  --ac-cell-bar: rgba(69, 168, 196, .26);
  --ac-cell-negative: rgba(209, 125, 138, .28);
  --ac-font: Roboto, Helvetica, Arial, sans-serif;
  --ac-font-size: 12px;
  --ac-number-size: 48px;
  --ac-space-1: var(--space-1, 4px);
  --ac-space-2: var(--space-2, 8px);
  --ac-space-3: var(--space-3, 12px);
  --ac-space-4: var(--space-4, 16px);
}
[data-theme="light"],
[data-app-theme="light"],
[data-app-theme="og"] {
  --ac-dark: 0;
  --ac-text: #333333;
  --ac-muted: #626262;
  --ac-axis: #858585;
  --ac-grid: #E2E6E9;
  --ac-surface: #FFFFFF;
  --ac-elevated: #FFFFFF;
  --ac-header: #F1F3F4;
  --ac-border: #D8D8D8;
  --ac-row-border: #E8E8E8;
  --ac-row-hover: #F5F7F8;
  --ac-focus: #187F68;
  --ac-positive: #367445;
  --ac-negative: #AA4452;
  --ac-cell-bar: rgba(31, 168, 201, .18);
  --ac-cell-negative: rgba(177, 82, 101, .18);
}
.ac-host {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  color: var(--ac-text);
  font: 400 var(--ac-font-size)/1.4 var(--ac-font);
  font-variant-numeric: var(--num-variant, tabular-nums lining-nums);
  font-feature-settings: var(--num-features, "tnum" 1, "lnum" 1);
  --num-color: var(--ac-text);
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
}
.ac-host, .ac-host * { box-sizing: border-box; }
.ac-host canvas { max-width: none; }
.ac-host button,
.ac-host input,
.ac-host select { font: inherit; }
.ac-host :focus-visible {
  outline: 2px solid var(--ac-focus);
  outline-offset: 1px;
}
.ac-message {
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: var(--ac-space-2);
  padding: var(--ac-space-4);
  color: var(--ac-muted);
}
.ac-message strong { color: var(--ac-text); font-size: 14px; font-weight: 500; }
.ac-message span { max-width: 48ch; }
.ac-tooltip-title {
  color: var(--ac-text);
  font-weight: 500;
  margin-bottom: var(--ac-space-2);
  padding-bottom: var(--ac-space-2);
  border-bottom: 1px solid var(--ac-border);
}
.ac-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ac-space-4);
  align-items: baseline;
  padding: 3px 0;
  min-width: 180px;
  color: var(--ac-muted);
}
.ac-tooltip-row > span { white-space: normal; overflow-wrap: anywhere; max-width: 32ch; }
.ac-tooltip-row strong { color: var(--ac-text); font-weight: 500; white-space: nowrap; }
.ac-tooltip-dot { width: 7px; height: 7px; display: inline-block; margin-right: var(--ac-space-2); vertical-align: 1px; }
.ac-warning {
  position: absolute;
  bottom: 0;
  left: var(--ac-space-2);
  right: var(--ac-space-2);
  color: var(--ac-muted);
  background: var(--ac-surface);
  font-size: var(--ac-font-size);
  line-height: 1.4;
  max-height: 2.8em;
  overflow: auto;
  z-index: 1;
  /* This banner is absolutely positioned OVER the bottom of the plot with a
     solid background. Without this it swallows pointer events across that
     strip, so hovering the lowest series or the x-axis does nothing. */
  pointer-events: none;
}

/* Tooltips must never sit under the cursor they follow, or the pointer enters
   the tooltip, the chart fires mouseleave, the tooltip hides, the pointer
   re-enters the chart, and the whole thing flickers instead of tracking. */
.ac-tooltip,
.ac-tooltip-title,
.ac-tooltip-row {
  pointer-events: none;
}
.ac-data-frame { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ac-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ac-axis) transparent; }
.ac-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  font-size: var(--ac-font-size);
  line-height: 1.4;
  color: var(--ac-text);
}
.ac-table th,
.ac-table td {
  height: 34px;
  padding: 7px var(--ac-space-3);
  border: 0;
  border-bottom: 1px solid var(--ac-row-border);
  border-right: 0;
  text-align: left;
  white-space: nowrap;
  max-width: 320px;
}
.ac-table th:last-child,
.ac-table td:last-child { border-right: 0; }
.ac-table thead { position: sticky; top: 0; z-index: 2; }
.ac-table th {
  background: var(--ac-header);
  color: var(--ac-text);
  font-weight: 500;
  vertical-align: bottom;
  border-bottom-color: var(--ac-border);
}
.ac-table th button {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-2);
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
  white-space: nowrap;
}
.ac-sort { color: var(--ac-muted); width: 10px; flex-shrink: 0; font-size: 12px; opacity: .65; }
.ac-table th[aria-sort="ascending"] .ac-sort,
.ac-table th[aria-sort="descending"] .ac-sort { color: var(--ac-focus); opacity: 1; }
.ac-table th button:hover { color: var(--ac-focus); }
.ac-table td { position: relative; overflow: hidden; text-overflow: ellipsis; }
.ac-table .ac-num {
  text-align: right;
  font-variant-numeric: var(--num-variant, tabular-nums lining-nums);
  font-feature-settings: var(--num-features, "tnum" 1, "lnum" 1);
  font-weight: var(--num-weight-table, 500);
}
.ac-table .ac-null { color: var(--ac-muted); }
.ac-table .ac-index {
  width: 34px;
  min-width: 34px;
  text-align: right;
  color: var(--ac-muted);
  background: var(--ac-elevated);
  border-right: 1px solid var(--ac-border);
}
.ac-table tbody tr:hover td { background-color: var(--ac-row-hover); }
.ac-table .ac-cell-text { position: relative; z-index: 1; }
.ac-cell-bar {
  position: absolute;
  height: 3px;
  bottom: 1px;
  right: 0;
  background: var(--ac-cell-bar);
  pointer-events: none;
}
.ac-cell-negative { background: var(--ac-cell-negative); }
.ac-table tfoot td,
.ac-table .ac-subtotal td {
  background: var(--ac-elevated);
  color: var(--ac-text);
  font-weight: 500;
  border-top: 1px solid var(--ac-border);
}
.ac-table-toolbar,
.ac-table-footer {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  flex: 0 0 auto;
  color: var(--ac-muted);
}
.ac-table-toolbar { padding: 0 0 var(--ac-space-2); }
.ac-table-footer { padding: var(--ac-space-2) var(--ac-space-1) 0; min-height: 34px; flex-wrap: wrap; }
.ac-table-toolbar input {
  min-width: 80px;
  width: 180px;
  height: 30px;
  background: var(--ac-surface);
  color: var(--ac-text);
  padding: var(--ac-space-1) var(--ac-space-2);
  border: 1px solid var(--ac-border);
  border-radius: 4px;
}
.ac-table-toolbar input::placeholder { color: var(--ac-muted); }
.ac-table-toolbar select,
.ac-table-footer button {
  border: 1px solid var(--ac-border);
  background: var(--ac-surface);
  color: var(--ac-text);
  border-radius: 3px;
  padding: var(--ac-space-1) var(--ac-space-2);
  height: 28px;
}
.ac-table-footer button { cursor: pointer; }
.ac-table-footer button:disabled { color: var(--ac-muted); cursor: default; opacity: .5; }
.ac-table-footer .ac-pagination { margin-left: auto; display: flex; gap: var(--ac-space-1); align-items: center; }
.ac-pivot .ac-row-label { min-width: 150px; max-width: none; border-right: 1px solid var(--ac-border); }
.ac-pivot th { border-right: 1px solid var(--ac-row-border); }
.ac-pivot thead tr:first-child th:not(:first-child) { text-align: center; border-bottom-color: var(--ac-border); }
.ac-pivot-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-1);
  border: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.ac-pivot-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--ac-muted);
  margin: 0 var(--ac-space-1) 0 1px;
}
.ac-pivot-toggle[aria-expanded="true"] .ac-pivot-caret { transform: rotate(90deg); }
.ac-kpi {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--ac-space-4) 24px;
  overflow: auto;
}
.ac-kpi-value {
  font-size: var(--ac-number-size);
  font-weight: var(--num-weight-kpi, 600);
  color: var(--num-color, var(--ac-text));
  line-height: 1.2;
  letter-spacing: var(--num-tracking, -0.02em);
  font-variant-numeric: var(--num-variant, tabular-nums lining-nums);
  font-feature-settings: var(--num-features, "tnum" 1, "lnum" 1);
  white-space: nowrap;
  margin-top: var(--ac-space-2);
}
.ac-kpi-label { color: var(--ac-muted); overflow-wrap: anywhere; font-weight: 500; }
.ac-kpi-period { color: var(--ac-muted); margin-top: var(--ac-space-1); }
.ac-kpi-comparison { color: var(--ac-muted); margin-top: var(--ac-space-2); }
.ac-kpi-comparison strong { color: var(--ac-text); font-weight: 500; }
/* Direction is encoded in color as well as the sign; the sign stays in the text
   so the reading does not depend on color perception alone. */
.ac-kpi-comparison strong.ac-kpi-up { color: var(--ac-positive, #46C79A); }
.ac-kpi-comparison strong.ac-kpi-down { color: var(--ac-negative, #E5798F); }
.ac-kpi-context { color: var(--ac-muted); margin-top: 20px; line-height: 1.6; }
.ac-kpi-context span { display: block; }
.ac-kpi .ac-spark { width: 100%; flex: 1 1 60px; min-height: 36px; max-height: 130px; margin-top: var(--ac-space-3); }
.ac-thumb .ac-kpi { padding: var(--ac-space-1) var(--ac-space-2); }
.ac-thumb .ac-kpi-value { font-size: 28px; }
.ac-thumb .ac-kpi-label { font-size: 12px; }
.ac-thumb .ac-spark { min-height: 24px; margin-top: var(--ac-space-1); }
.ac-thumb .ac-table th,
.ac-thumb .ac-table td { height: 20px; padding: 2px var(--ac-space-1); max-width: 90px; }
.ac-thumb .ac-table-scroll { overflow: hidden; pointer-events: none; }
.ac-thumb:not(.ac-detail) .ac-table-footer { display: none; }

/* Complete gallery previews: native 12px labels, deliberate column/row
   budgets, concise period context. The public renderer supplies the numbers. */
.ac-detail .ac-kpi { padding: var(--ac-space-3); overflow: hidden; }
.ac-detail .ac-kpi-value { font-size: 36px; margin-top: var(--ac-space-1); }
.ac-detail .ac-kpi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-detail .ac-kpi-context { margin-top: var(--ac-space-3); }
.ac-detail .ac-kpi-trend { justify-content: flex-start; }
.ac-detail .ac-kpi-trend .ac-kpi-value { font-size: 32px; }
.ac-detail .ac-kpi-period { margin-top: 0; }
.ac-detail .ac-kpi-comparison { margin-top: var(--ac-space-1); line-height: 1.3; }
.ac-detail .ac-spark { min-height: 22px; max-height: none; margin-top: var(--ac-space-1); }
.ac-detail .ac-data-frame { padding: var(--ac-space-1); }
.ac-detail .ac-table { table-layout: fixed; width: 100%; }
.ac-detail .ac-table th,
.ac-detail .ac-table td {
  height: 24px;
  padding: 3px 6px;
  min-width: 0;
  max-width: none;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 17px;
}
.ac-detail .ac-table th > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.ac-detail .ac-table .ac-index { width: 25px; }
.ac-detail .ac-table-footer { min-height: 22px; padding: var(--ac-space-1) 2px 0; font-size: 12px; white-space: nowrap; flex-wrap: nowrap; }
.ac-detail .ac-pivot .ac-row-label { width: 36%; min-width: 0; }
.ac-detail .ac-message { padding: var(--ac-space-2); gap: var(--ac-space-1); }
.ac-detail .ac-message strong { font-size: 12px; }
@container (max-width: 200px) {
  .ac-detail .ac-kpi { padding: var(--ac-space-2); }
  .ac-detail .ac-kpi-value,
  .ac-detail .ac-kpi-trend .ac-kpi-value { font-size: 27px; }
  .ac-detail .ac-kpi-context { margin-top: var(--ac-space-2); }
  .ac-detail .ac-table th,
  .ac-detail .ac-table td { padding-inline: 3px; }
  .ac-detail .ac-table-footer { font-size: 12px; white-space: normal; line-height: 14px; }
}
.ac-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}