/* Performance — layout on top of Carbon g100 tokens (carbon-theme-g100.css).
   Components style themselves via shadow DOM; this file only handles
   page layout, tiles, the pivot table, and IBM Plex loading. */

@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/static/vendor/plex/IBMPlexSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/vendor/plex/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/vendor/plex/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/vendor/plex/IBMPlexSans-SemiBold.woff2') format('woff2');
}

* { box-sizing: border-box; }
/* author display rules below beat the UA's [hidden] rule, so
   el.hidden = true silently did nothing on anything with an
   explicit display (the gateway rail's search filter, the glance
   heat legend). One guard, rather than remembering per rule. */
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--cds-background, #161616);
  color: var(--cds-text-primary, #f4f4f4);
  font: 14px/1.45 'IBM Plex Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--cds-link-primary, #78a9ff); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--cds-text-helper, #8d8d8d); font-weight: 400; }
.tbl-wrap { overflow-x: auto; }

main { max-width: 1584px; margin: 0 auto; padding: 64px 16px 80px; }
main:focus { outline: none; }
/* skip link: off-screen until focused, then over the header */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 9000; padding: 8px 12px;
  background: var(--cds-background-brand, #0f62fe); color: #fff; font-size: 13px; }
.skip-link:focus { top: 8px; outline: 2px solid var(--cds-focus, #fff); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

cds-header { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; }
/* nav labels never break onto two lines (they did between ~1056 and
   1200px: "At a / glance", "Bank / responses", "Log / out") */
cds-header-nav-item, .hdr-ghost, .cur-btn, cds-header-name { white-space: nowrap; }
@media (max-width: 1240px) { cds-header-name { display: none; } }

/* header extras (light-dom bits inside cds-header) */
.hdr-right { margin-left: auto; display: flex; align-items: stretch; gap: 4px;
  padding-right: 8px; height: 47px; }
.hdr-logout { margin: 0; display: flex; align-items: stretch; }
/* header ghost action — flat text, full header height, layer hover
   (Carbon ui-shell idiom; same as the sync trigger) */
.hdr-ghost {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; letter-spacing: .16px; padding: 0 16px;
  color: var(--cds-text-secondary, #c6c6c6);
  transition: color .11s, background-color .11s;
}
.hdr-ghost:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary); }
.hdr-ghost:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
/* display-currency pair — flat buttons, active carries the Carbon
   interactive bottom edge like the nav's current page */
.cur-toggle { display: flex; align-items: stretch; }
/* account switcher sits left of the currency pair — a hairline keeps
   the two button groups from reading as one */
.acct-toggle { border-right: 1px solid var(--cds-border-subtle-01, #393939);
  padding-right: 4px; margin-right: 4px; }
.cur-btn {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; letter-spacing: .32px; padding: 0 12px;
  color: var(--cds-text-secondary, #c6c6c6);
  transition: color .11s, background-color .11s;
}
.cur-btn:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary); }
.cur-btn:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
.cur-btn.on {
  color: var(--cds-text-primary);
  box-shadow: inset 0 -3px 0 var(--cds-border-interactive, #4589ff);
}
/* sync status — dot + "Synced X ago" trigger; txns count, detail,
   countdown and Sync now live in the dropdown (vamp-tracker pattern) */
.syncmenu { position: relative; display: flex; align-items: stretch; min-width: 0; height: 47px; }
.syncpill {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; min-width: 0;
  border: none; background: none; padding: 0 12px; cursor: pointer;
  font: inherit; font-size: 12px;
  color: var(--cds-text-secondary, #c6c6c6);
  white-space: nowrap; overflow: hidden;
  transition: color .11s, background-color .11s;
}
.syncpill:hover, .syncmenu.open .syncpill {
  background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary);
}
.syncpill .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cds-support-success, #42be65);
}
.syncmenu.err .syncpill { color: var(--cds-text-error, #ff8389); }
.syncmenu.err .dot { background: var(--cds-support-error, #fa4d56); }
.syncmenu.partial .dot, .syncmenu.stale .dot { background: var(--cds-support-warning, #f1c21b); }
.syncmenu.running .dot { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* the dropdown — Carbon menu panel, right-aligned under the trigger */
.sync-panel {
  position: absolute; top: 100%; right: 0; z-index: 8001;
  min-width: 264px; display: none;
  background: var(--cds-layer-01, #262626);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.syncmenu.open .sync-panel { display: block; }
.sync-row {
  margin: 0; padding: 10px 16px; font-size: 13px;
  color: var(--cds-text-secondary);
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
  white-space: nowrap;
}
.sync-row:last-child { border-bottom: none; }
.sync-row b { color: var(--cds-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.sync-row.muted-row { color: var(--cds-text-helper); font-size: 12px; letter-spacing: .32px; }
.sync-row.err-row { color: var(--cds-text-error); white-space: normal; }
.sync-act {
  width: 100%; height: 40px; padding: 0 16px; text-align: left;
  border: none; background: none; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--cds-link-primary, #78a9ff);
}
.sync-act:hover {
  background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-link-primary-hover, #a6c8ff);
}
.sync-act:disabled { color: var(--cds-text-helper); cursor: default; background: none; }

.page-head { margin: 24px 0 16px; }
.page-head h1 { font-size: 20px; font-weight: 500; margin: 0; }
.page-sub { color: var(--cds-text-secondary); margin: 4px 0 0; font-size: 13px; max-width: 720px; }

/* filter bar */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--cds-layer-01, #262626);
}
.filter { display: flex; flex-direction: column; gap: 4px; }
.filter-lbl { font-size: 12px; color: var(--cds-text-secondary);
  display: flex; align-items: center; gap: 6px; min-height: 16px; line-height: 16px; }
.filter-grid .fld-num { width: 100%; box-sizing: border-box; }
/* a one-route merchant account: the group header already names it,
   so the lone card under it drops its duplicate title line */
.gw-group.single .cc-head, .gw-group.single .cc-sub { display: none; }

/* the mode filter bar (approvals, responses) as a 4-column grid: Window
   across two columns with Granularity and Segment beside it, the four
   charge filters on one row, Test cards opening the last row. Every
   label, control edge and 32px control height sits on the grid; the
   segmented controls fill their cells with evenly sized options. Two
   columns under 1024px, one under 640px, Window always spanning the
   width (and wrapping into two even rows of four on a phone — eight
   options never fit one row there without clipping "Yesterday"). The
   4→2 step is at 1120px, not 1024: below that the Segment cell is too
   narrow for its four labels at the shared chip padding. The
   conditional controls (custom range under Window, recycle attempt
   under Recycles) sit inside their parent's cell, so the row grows
   with that cell and nothing else moves. */
.filter-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 24px; align-items: start;
}
.filter-grid .filter { min-width: 0; gap: 6px; }
.filter-grid .filter.win { grid-column: span 2; }
/* Carbon's switcher host is inline and sized to its chips; stretch the
   host to the cell and share it between the items: zero basis + equal
   grow = equal widths while the cell can afford them, and the
   max-content floor means a label that would not fit its equal share
   ("Yesterday", "Rebill 2+") keeps its text and the others share what
   is left — never a clipped option. inline-size: auto undoes Carbon's
   :host { inline-size: 100% }, which would make the floor the whole
   cell. The chip padding is halved in the item's shadow root by app.js
   fitGridSwitchers. */
.filter-grid cds-content-switcher { display: flex; width: 100%; }
.filter-grid cds-content-switcher-item { flex: 1 1 0; min-width: max-content; inline-size: auto; }
.filter-grid .filter-sub { margin-top: 2px; }
.filter-grid .filter-sub .filter-lbl { display: block; margin-bottom: 4px; }
.filter-grid .filter-sub cds-multi-select { width: 100%; }
@media (max-width: 1120px) {
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .filter-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-grid .filter.win { grid-column: span 1; }
  /* block-size: auto undoes Carbon's fixed 2rem host height, which
     would let the second row overflow onto the control beneath */
  .filter-grid .filter.win cds-content-switcher { flex-wrap: wrap; block-size: auto; height: auto; }
  .filter-grid .filter.win cds-content-switcher-item { flex: 1 1 25%; min-width: 0; }
}

/* ── Carbon contextual tokens ──────────────────────────────────────
   The vendored theme (@carbon/themes) emits only the SUFFIXED tokens
   (--cds-layer-01 …). Carbon web components style their shadow DOM
   with the CONTEXTUAL ones (--cds-layer, --cds-field, …) and several
   have no baked-in fallback — without these aliases the multi-select
   menu renders transparent and field fills/heights collapse. Layer 1
   is the page default; surfaces that already sit on layer-01 promote
   their controls to the 02 set (Carbon's layering model — matches the
   explicit --cds-field-02 the plain selects always used). */
:root {
  color-scheme: dark;   /* native scrollbars, spinners and search-cancel render dark too */
  --cds-layer: var(--cds-layer-01);
  --cds-layer-hover: var(--cds-layer-hover-01);
  --cds-layer-active: var(--cds-layer-active-01);
  --cds-layer-selected: var(--cds-layer-selected-01);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
  --cds-layer-accent: var(--cds-layer-accent-01);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-01);
  --cds-layer-accent-active: var(--cds-layer-accent-active-01);
  --cds-layer-background: var(--cds-layer-background-01);
  --cds-field: var(--cds-field-01);
  /* g100 ships ~3:1 placeholder ink — gray-50 clears 4.5:1 on field-02 */
  --cds-text-placeholder: #a8a8a8;
  --cds-field-hover: var(--cds-field-hover-01);
  --cds-border-subtle: var(--cds-border-subtle-01);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
  --cds-border-strong: var(--cds-border-strong-01);
  --cds-border-tile: var(--cds-border-tile-01);
  /* Carbon v11 layout scale — referenced without fallbacks in a few
     component style paths (sizing went inconsistent while undefined) */
  --cds-layout-size-height-xs: 1.5rem;
  --cds-layout-size-height-sm: 2rem;
  --cds-layout-size-height-md: 2.5rem;
  --cds-layout-size-height-lg: 3rem;
  --cds-layout-size-height-xl: 4rem;
  --cds-layout-size-height-2xl: 5rem;
  --cds-layout-size-height-min: 1.5rem;
  --cds-layout-size-height-max: 5rem;
  --cds-layout-density-padding-inline-min: 0.5rem;
  --cds-layout-density-padding-inline-normal: 1rem;
  --cds-layout-density-padding-inline-max: 1rem;
}
/* chart palette — single source for the legend swatches, sparklines and
   heat cells below; app.js's C object mirrors these values for the SVG
   renderers (SVG attrs can't read custom properties from strings) */
:root {
  --chart-line: #42be65;   /* approval % — support-success */
  --chart-bar: #4589ff;    /* volume — border-interactive */
  --chart-ink: #a8a8a8;    /* sparkline / axis ink */
  --heat-cell: #2f2f2f;    /* neutral heat/matrix cell */
}

.filter-bar, .card, .kpi-tile, .chart-card, .pivot-panel, .mid-rail,
.bins-panel {
  --cds-layer: var(--cds-layer-02);
  --cds-layer-hover: var(--cds-layer-hover-02);
  --cds-layer-active: var(--cds-layer-active-02);
  --cds-layer-selected: var(--cds-layer-selected-02);
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02);
  --cds-layer-accent: var(--cds-layer-accent-02);
  --cds-layer-accent-hover: var(--cds-layer-accent-hover-02);
  --cds-layer-accent-active: var(--cds-layer-accent-active-02);
  --cds-field: var(--cds-field-02);
  --cds-field-hover: var(--cds-field-hover-02);
  --cds-border-subtle: var(--cds-border-subtle-02);
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-02);
  --cds-border-strong: var(--cds-border-strong-02);
}

/* ── dimension filters (all three data pages): a 3-column grid ──────
   Row 1 Legal entity · Merchant account · Gateway (routing hierarchy)
   Row 2 Brand · Campaign · Traffic source
   Row 3 Payment method · Country · Source
   Three columns while each cell can hold a long route name plus the
   count tag (≈280px — 960px of page), two below that, one below 640px
   (the mode bar's phone step); the reading order never changes. The
   column gap matches the mode bar above, so the two bars read as one
   block: 8px between them, set on the bar above rather than pulled up
   with a negative margin. */
.dim-filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px; align-items: start;
}
.filter-bar.filter-grid:has(+ .dim-filters) { margin-bottom: 8px; }
.dim-filters .filter { min-width: 0; gap: 6px; }
.dim-filters .filter-lbl {
  display: flex; align-items: center; gap: 6px; min-height: 16px; line-height: 16px;
}
.dim-filters cds-multi-select { width: 100%; }
/* a tick waits for its menu to close: the hint sits on the label line,
   where the open menu cannot cover it and the grid never reflows */
.pending-hint {
  margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .16px;
  color: var(--cds-support-info, #4589ff); white-space: nowrap;
}
/* info toggletip beside a label (keyboard-reachable, unlike a title) */
.lbl-tip { display: inline-flex; vertical-align: middle; }
.lbl-tip p { margin: 0; font-size: 12px; line-height: 16px; }
.lbl-tip code { font: inherit; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; }
/* 3→2 at the same step as the mode bar's 4→2 (1120px), so the two
   bars' column edges agree — between 960 and 1120 they used not to */
@media (max-width: 1120px) {
  .dim-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dim-filters { grid-template-columns: minmax(0, 1fr); }
}
/* the recycle-attempt menu sits in the mode bar: a short list of
   numbers, narrower than the entity menus */
#pf-recycle { width: 200px; }
/* attempted-volume tag on each option: options come volume-sorted from
   /api/entities and app.js kills the component's alphabetical resort,
   so the number explains the order. Rendered as a host pseudo-element
   from data-vol — not slotted text — so the type-ahead filter and the
   selection value can't see it. The label column stops 84px short of
   the row edge and truncates with an ellipsis (the sheets app.js volTag
   adopts into the item's shadow roots), so name and number never
   overlap; the full name rides the row's title. */
cds-multi-select-item { position: relative; }
cds-multi-select-item[data-vol]::after {
  content: attr(data-vol);
  position: absolute; right: 0; top: 0; bottom: 0; width: 84px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px; box-sizing: border-box;
  font-size: 12px; color: var(--cds-text-helper, #8d8d8d);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
/* a pinned value with no attempts in this window */
cds-multi-select-item[data-vol="—"]::after { color: var(--cds-text-placeholder, #6f6f6f); }

/* failed data fetch — injected by app.js loadErr(); same idiom as
   coverage-note but error-red, since the numbers on screen may be stale */
.load-err {
  margin: 0 0 12px; padding: 6px 12px; font-size: 12px; letter-spacing: .32px;
  color: var(--cds-text-primary);
  border-left: 3px solid var(--cds-support-error, #fa4d56);
  background: var(--cds-layer-01, #262626);
}

/* incomplete-history warning (backfill in progress / window pre-dates data) */
.coverage-note {
  margin: 0 0 12px; padding: 6px 12px; font-size: 12px; letter-spacing: .32px;
  color: var(--cds-text-secondary);
  border-left: 3px solid var(--cds-support-warning, #f1c21b);
  background: var(--cds-layer-01, #262626);
}
.pivot-hd-sub.warn { color: var(--cds-support-warning, #f1c21b); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 24px; }
.kpi-tile { background: var(--cds-layer-01); padding: 16px; }
.kpi-k { font-size: 12px; color: var(--cds-text-secondary); }
.kpi-v { font-size: 28px; font-weight: 400; margin-top: 4px; letter-spacing: 0; }
.kpi-d { font-size: 12px; margin-top: 2px; color: var(--cds-text-helper); min-height: 16px; }
.kpi-d.up { color: var(--cds-support-success); }
.kpi-d.down { color: var(--cds-support-error); }

/* pinned entity filters (Carbon dismissible-tag look) */
.pin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; border: none; cursor: pointer;
  background: var(--cds-tag-background-blue, #0043ce);
  color: var(--cds-tag-color-blue, #d0e2ff);
  border-radius: 24px; padding: 3px 8px 3px 12px;
  font: inherit; font-size: 12px; letter-spacing: .16px;
}
.chip .chip-k { opacity: .7; }
.chip .chip-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 340px; }
.chip .chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: 13px;
}
.chip:hover .chip-x { background: rgba(255, 255, 255, .2); }
.chip:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: 1px; }
/* mode-filter chips (segment/recycles/window/… differing from their
   defaults) — gray, so blue stays the entity-pin color */
.chip.mode { background: var(--cds-layer-02, #393939);
  color: var(--cds-text-secondary, #c6c6c6); }
.chip.mode .chip-v { color: var(--cds-text-primary, #f4f4f4); }
/* action chips at the end of the row: clear the nine dimension
   filters only, or reset everything */
.chip.reset, .chip.clear-dims { background: transparent; padding: 3px 12px;
  border: 1px solid var(--cds-border-strong-01, #6f6f6f);
  color: var(--cds-text-secondary, #c6c6c6); }
.chip.reset:hover, .chip.clear-dims:hover { background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-text-primary); }
/* the deferred-apply note under the chips (app.js setPending) */
.pending-note { border-left-color: var(--cds-support-info, #4589ff); }
/* the grid's "no results for this selection" panel */
.empty-state {
  grid-column: 1 / -1; padding: 24px; background: var(--cds-layer-01, #262626);
  color: var(--cds-text-secondary);
}
.empty-state h2 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--cds-text-primary); }
.empty-state p { margin: 0 0 12px; font-size: 13px; }
.empty-state .pin-chips { margin: 0; }

/* "comparison hidden" explainer under the KPI tiles */
.kpi-note { font-size: 12px; color: var(--cds-text-helper, #8d8d8d);
  margin: 4px 0 12px; }

/* per-card shortcut into Bank responses for that entity */
.chart-card .cc-sub { display: flex; align-items: baseline; gap: 12px; }
.cc-sub-t { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cc-resp { margin-left: auto; flex: none; font-size: 12px; white-space: nowrap; }
.gwg-head .cc-resp { margin-left: 0; }

/* saved-views menu (page head) */
.ph-top { display: flex; align-items: center; gap: 12px; }
.views-menu { position: relative; display: inline-flex; }
.views-panel {
  position: absolute; top: 100%; left: 0; z-index: 6000;
  min-width: 300px; max-width: 380px;
  background: var(--cds-layer-01, #262626);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.views-save {
  width: 100%; height: 40px; padding: 0 16px; text-align: left;
  border: none; background: none; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--cds-link-primary, #78a9ff);
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
}
.views-save:hover { background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-link-primary-hover, #a6c8ff); }
.views-row { display: flex; align-items: stretch;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.views-row:last-child { border-bottom: none; }
.views-open {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px;
  border: none; background: none; cursor: pointer; font: inherit;
  padding: 9px 0 9px 16px; text-align: left;
  color: var(--cds-text-primary);
}
.views-open:hover { background: var(--cds-layer-hover-01, #333333); }
.views-name { font-size: 13px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.views-page { margin-left: auto; flex: none; font-size: 11px;
  color: var(--cds-text-helper, #8d8d8d); letter-spacing: .32px; }
.views-del { border: none; background: none; cursor: pointer; font: inherit;
  padding: 0 14px; color: var(--cds-text-helper, #8d8d8d); }
.views-del:hover { background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-text-error, #ff8389); }
.views-note { padding: 10px 16px; font-size: 12px;
  color: var(--cds-text-helper, #8d8d8d); }

/* reason search in the pivot header */
.pv-rq { width: 170px; height: 32px; }

/* mobile filters disclosure — hidden on desktop, the bars show as-is */
.filters-toggle { display: none; }

/* incomplete custom-range helper */
.range-hint { font-size: 12px; color: var(--cds-support-warning, #f1c21b);
  padding-bottom: 8px; }

/* chart-grid legend + actions row */
.grid-meta { display: flex; align-items: center; gap: 16px; margin: 0 0 12px;
  flex-wrap: wrap; }
.grid-meta .dim-note { margin-left: auto; }
.legend { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--cds-text-helper, #8d8d8d); white-space: nowrap; }
.legend .lg { display: inline-block; flex: none; margin-left: 10px; }
.legend .lg:first-child { margin-left: 0; }
.legend .lg-line { width: 16px; height: 0; border-top: 2px solid var(--chart-line); }
.legend .lg-bar { width: 9px; height: 12px; background: var(--chart-bar);
  border-radius: 1px; }
.legend .lg-bar-ghost { width: 9px; height: 12px; background: var(--chart-bar);
  opacity: .25; border-radius: 1px; }
.legend .lg-trend { width: 16px; height: 0; border-top: 2px dashed var(--chart-line);
  opacity: .6; }

/* in-flight fetch: dim the stale data instead of leaving it looking live */
.is-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }

/* ── slices toolbar: two rows ──────────────────────────────────────
   Row A: "Slice by" + the eight chips (content-sized and first, so
   nothing that appears in Row B can move or resize it) or, when the
   chips do not fit beside the label, the same list as a dropdown
   (app.js fitSliceSwitcher measures). Row B: Sort by + direction
   button · common display toggles · divider · slice-specific toggles
   · the chart-name search at the far end. */
.slice-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.tb-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-height: 32px; }
.tb-lbl { font-size: 12px; color: var(--cds-text-secondary); white-space: nowrap; }
.slice-switch { flex: 0 0 auto; min-width: 0; }
.slice-switch cds-content-switcher { display: inline-flex; width: auto; inline-size: auto; }
.slice-switch cds-content-switcher-item { inline-size: auto; flex: 0 0 auto; }
.slice-dd { width: 220px; max-width: 100%; }
.tb-group { display: inline-flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tb-sep { width: 1px; height: 20px; background: var(--cds-border-subtle-01, #393939); flex: none; }
.tb-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
/* the sort chips keep a floor width so "Approval rate" ↔ "AOV" never
   shifts their neighbours */
#f-sort { display: inline-flex; width: auto; inline-size: auto; }
#f-sort cds-content-switcher-item { inline-size: auto; min-width: 7em; }
.sort-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border: 0; border-radius: 0;
  background: transparent; color: var(--cds-text-primary); cursor: pointer; font: inherit;
}
.sort-dir:hover { background: var(--cds-layer-hover-01, #333333); }
.sort-dir:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
.sort-dir svg { transition: transform .15s; }
.sort-dir[data-dir="asc"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sort-dir svg { transition: none; } }
.display-row .grid-filter { margin-left: auto; }
.display-row .fld-search { width: 180px; }
.dim-note { font-size: 12px; color: var(--cds-text-helper); margin-left: auto; }
.grid-filter { display: inline-flex; align-items: center; gap: 8px; }
.grid-filter .dim-note { margin-left: 0; white-space: nowrap; }
/* Carbon search-style input for the chart filter */
.fld-search {
  background: var(--cds-field-01, #262626);
  border: none; border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
  color: var(--cds-text-primary); border-radius: 0;
  height: 32px; width: 200px; padding: 0 12px 0 32px;
  font: inherit; font-size: 13px; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M14.7 13.3 11 9.6a5.5 5.5 0 1 0-1.4 1.4l3.7 3.7zM2.5 6.5a4 4 0 1 1 4 4 4 4 0 0 1-4-4z' fill='%238d8d8d'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center;
  transition: background-color .11s;
}
.fld-search:hover { background-color: var(--cds-field-hover-01, #333333); }
.fld-search:focus { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
.fld-search::placeholder { color: var(--cds-text-placeholder, #a8a8a8); }
.fld-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* chart grid */
.chart-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px;
}
/* min-width: 0 at every level — otherwise the nowrap titles set the
   grid items' min-content width and blow out narrow viewports */
.chart-card { background: var(--cds-layer-01); padding: 16px 16px 8px;
  min-height: 300px; min-width: 0; }
.chart-card .cc-head { display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 2px; min-width: 0; }
.chart-card .cc-title {
  font-size: 14px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  background: none; border: none; padding: 0; color: inherit; font-family: inherit;
  cursor: pointer; text-align: left;
}
.chart-card .cc-title:hover { color: var(--cds-link-primary, #78a9ff);
  text-decoration: underline; }
.chart-card .cc-title:focus-visible { outline: 2px solid var(--cds-focus, #fff);
  outline-offset: 1px; }
.chart-card .cc-title.pinned { color: var(--cds-link-primary, #78a9ff); }
/* top-N fold control at the end of the grid */
.grid-more { grid-column: 1 / -1; }
.grid-more .btn { width: 100%; justify-content: center; height: 40px; }
/* per-card approval metric — Carbon data-tile idiom: neutral light-weight
   value + label-01 caption. In AOV mode the value is the order value and
   the approval rate rides beside it as helper text (.cc-rate-2) */
.chart-card .cc-rate { margin-left: auto; display: inline-flex;
  align-items: baseline; gap: 8px; white-space: nowrap; }
.chart-card .cc-rate-2 { font-size: 12px; letter-spacing: .32px;
  color: var(--cds-text-helper); }
.chart-card .cc-rate-k { font-size: 12px; letter-spacing: .32px;
  color: var(--cds-text-secondary); }
.chart-card .cc-rate-v { font-size: 20px; font-weight: 300;
  color: var(--cds-text-primary); }
/* current-month Visa VAMP badge (ratio · event count) on the grouped
   merchant-account rows — vamp-tracker's status tiers as quiet
   outline tags: green = ok, orange = one Visa condition met, red =
   EXCESSIVE (both) */
.vamp-badge {
  display: inline-block; flex: none; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 400; letter-spacing: .32px; line-height: 15px;
  white-space: nowrap; cursor: default; border: 1px solid currentColor;
  align-self: center;
}
.vamp-badge.vb-ok { color: #6fdc8c; }
.vamp-badge.vb-over { color: #ff832b; }
.vamp-badge.vb-bad { color: #fa4d56; font-weight: 600; }
.chart-card .cc-sub { font-size: 12px; color: var(--cds-text-helper); margin-bottom: 4px; }
.chart-card .cc-holder { height: 220px; }
.empty-note { color: var(--cds-text-helper); padding: 32px; grid-column: 1 / -1; }
/* where ranking stops (Rate/Trend sorts): everything past this line is
   too thin to rank and sits in volume order — without the marker the
   first card below it reads as a broken sort */
.rank-break {
  grid-column: 1 / -1; margin: 8px 0 0; padding-top: 12px;
  border-top: 1px dashed var(--cds-border-subtle-01, #393939);
  color: var(--cds-text-helper); font-size: 12px; letter-spacing: .32px;
}
.chart-grid.grouped .rank-break { margin: 0 0 16px; }

/* grouped-by-merchant-account view (approvals, gateway dimension) */
.chart-grid.grouped { display: block; }
.gw-group { border: 1px solid var(--cds-border-subtle-01, #393939);
  padding: 12px; margin-bottom: 16px; min-width: 0; }
.gwg-head { display: flex; align-items: baseline; gap: 8px 16px;
  flex-wrap: wrap; margin-bottom: 12px; }
.gwg-title { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--cds-text-primary); font-family: inherit; font-size: 16px;
  font-weight: 600; letter-spacing: .16px; }
.gwg-title:hover, .gwg-title.pinned { color: var(--cds-link-primary, #78a9ff); }
.gwg-title:focus-visible { outline: 2px solid var(--cds-focus, #fff);
  outline-offset: 2px; }
.gwg-ent { font-size: 12px; letter-spacing: .32px; padding: 1px 8px;
  color: var(--cds-text-secondary); align-self: center;
  border: 1px solid var(--cds-border-subtle-01, #393939); border-radius: 12px;
  white-space: nowrap; }
.gwg-stats { font-size: 12px; color: var(--cds-text-secondary); }
.gwg-stats b { font-weight: 600; color: var(--cds-text-primary); }
/* the MID facts box — thin outline, right-aligned on wide screens */
.gwg-info { margin-left: auto; font-size: 12px; letter-spacing: .32px;
  color: var(--cds-text-secondary); padding: 3px 10px;
  border: 1px solid var(--cds-border-subtle-01, #393939); }
.gwg-sep { margin: 0 6px; color: var(--cds-text-helper); }
.gwg-row { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gwg-row .chart-card { min-height: 0; }

/* campaign → gateways drill-down (approvals, campaign dimension,
   gws=1): one bordered group per campaign — the campaign's own chart
   on the left, the gateways that carried it on the right as a
   two-level table (merchant account rows, their routes beneath). Same
   skeleton as .gw-group above. */
.cp-group { border: 1px solid var(--cds-border-subtle-01, #393939);
  padding: 12px; margin-bottom: 16px; min-width: 0; }
.cpg-head { display: flex; align-items: baseline; gap: 8px 16px;
  flex-wrap: wrap; margin-bottom: 12px; }
.cp-group.closed .cpg-head { margin-bottom: 0; }
.cp-group.closed .cpg-body { display: none; }
.cpg-title { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--cds-text-primary); font-family: inherit; font-size: 16px;
  font-weight: 600; letter-spacing: .16px; }
.cpg-title:hover, .cpg-title.pinned { color: var(--cds-link-primary, #78a9ff); }
.cpg-title:focus-visible { outline: 2px solid var(--cds-focus, #fff);
  outline-offset: 2px; }
.cpg-stats { font-size: 12px; color: var(--cds-text-secondary); }
.cpg-stats b { font-weight: 600; color: var(--cds-text-primary); }
.cpg-head .cc-resp { margin-left: 0; }
/* collapse chevron (campaign header + account rows) */
.chev { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--cds-text-secondary); width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center; margin-right: -6px; }
.chev svg { width: 16px; height: 16px; fill: currentColor; transition: transform .12s; }
.chev:hover { color: var(--cds-text-primary); }
.chev:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: 1px; }
.chev.closed svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .chev svg { transition: none; } }
/* share of the campaign's attempted volume per merchant account —
   one segment per account in rank order, the tail merged into grey */
.cpg-share { margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary); }
.share-bar { display: flex; gap: 1px; width: 240px; height: 8px;
  background: var(--cds-background, #161616); }
.share-bar i { display: block; background: var(--chart-bar); min-width: 1px; cursor: default; }
.share-bar i.rest { background: var(--cds-border-strong-01, #6f6f6f); }
.share-bar i:hover { outline: 1px solid var(--cds-text-primary); outline-offset: 1px; }
.cpg-body { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
  gap: 12px; align-items: start; }
.cpg-body .chart-card { min-height: 0; }
@media (max-width: 1100px) { .cpg-body { grid-template-columns: 1fr; } }
/* the gateway table */
.gwl { background: var(--cds-layer-01); padding: 12px 16px 8px; min-width: 0;
  display: flex; flex-direction: column; }
.gwl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.gwl-head .t { font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary);
  text-transform: uppercase; }
.gwl-head .n { font-size: 12px; color: var(--cds-text-helper); }
.gwl-wrap { overflow-x: auto; }
.gwl table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; }
.gwl th { text-align: right; font-weight: 400; color: var(--cds-text-secondary);
  letter-spacing: .32px; padding: 4px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.gwl th:first-child, .gwl td:first-child { text-align: left; padding-left: 0; }
.gwl th:last-child, .gwl td:last-child { padding-right: 0; }
.gwl td { text-align: right; padding: 5px 8px; white-space: nowrap;
  color: var(--cds-text-primary);
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.gwl tr:last-child td { border-bottom: 0; }
.gwl tbody tr:hover td, .gwl tr.hl td { background: var(--cds-layer-hover-01, #333333); }
.gwl tr.acc td { padding-top: 7px; padding-bottom: 7px; }
.gwl tr.acc td:first-child { font-weight: 500; }
.gwl .acc-name { display: inline-flex; align-items: center; gap: 8px; }
.gwl .acc-n { font-weight: 400; color: var(--cds-text-helper); }
.gwl tr.rt td { color: var(--cds-text-secondary); }
.gwl tr.rt td:first-child { padding-left: 34px; }
.gwl .gw-name { background: none; border: 0; padding: 0; color: inherit; font: inherit;
  cursor: pointer; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left; }
.gwl .gw-name:hover, .gwl .gw-name.pinned { color: var(--cds-link-primary, #78a9ff);
  text-decoration: underline; }
.gwl .gw-name:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: 1px; }
.gwl .chev { width: 16px; height: 16px; margin: 0; align-self: auto; }
.gwl .chev svg { width: 14px; height: 14px; }
.gwl .rate, .gwl .share { display: inline-flex; align-items: center; gap: 8px;
  justify-content: flex-end; }
.gwl .rate b { font-weight: 500; min-width: 44px; text-align: right; }
.gwl .rate .bar { width: 56px; height: 4px; position: relative;
  background: var(--cds-border-subtle-01, #393939); }
.gwl .rate .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-line); }
.gwl .rate.low b { color: var(--cds-text-helper); }
.gwl .rate.low .bar i { opacity: .45; }
.gwl .share .bar { width: 72px; height: 4px; position: relative;
  background: var(--cds-border-subtle-01, #393939); }
.gwl .share .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-bar); }
.gwl td.spark svg { display: block; margin-left: auto; }
.gwl .dim { color: var(--cds-text-helper); }
/* per-row Bank responses shortcut — revealed on hover so the table
   stays quiet; keyboard focus reveals it too */
.gwl td.resp { width: 1px; }
.gwl td.resp a { font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .1s; }
.gwl tr:hover td.resp a, .gwl td.resp a:focus-visible { opacity: 1; }
.gwl .cg-more { margin-top: auto; padding-top: 6px; }
.gwl .cg-more .btn { width: 100%; justify-content: center; height: 32px; }

/* chart hover tooltip (Carbon tooltip look) */
.chart-tip {
  position: fixed; z-index: 7000; display: none; pointer-events: none;
  background: var(--cds-background-inverse, #f4f4f4);
  color: var(--cds-text-inverse, #161616);
  font-size: 12px; line-height: 1.4; padding: 8px 12px; max-width: 280px;
  border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.chart-tip .tt-t { font-weight: 600; margin-bottom: 2px; }
.chart-tip .tt-r { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-tip .tt-r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tip b { font-weight: 600; }

/* pivot cells with an orders drill */
.pivot td.co { cursor: pointer; }
.pivot td.co:hover { outline: 1px solid var(--cds-focus, #ffffff);
  outline-offset: -1px; }

/* orders modal (light-DOM, Carbon-token styled) */
.modal-scrim { position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, .55); display: flex;
  align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.modal { background: var(--cds-layer-01, #262626); width: 640px;
  max-width: 100%; max-height: 78vh; display: flex; flex-direction: column;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.modal-hd { display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.modal-hd b { font-size: 14px; font-weight: 600; }
.modal-sub { font-size: 12px; color: var(--cds-text-helper, #8d8d8d);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-x { margin-left: auto; flex: none; }
.modal-body { overflow-y: auto; padding: 0 16px 16px; }
.om-note { color: var(--cds-text-helper, #8d8d8d); padding: 24px 0; }
.om-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.om-tbl th { text-align: left; font-weight: 600; padding: 10px 12px 6px 0;
  color: var(--cds-text-secondary, #c6c6c6); position: sticky; top: 0;
  background: var(--cds-layer-01, #262626); }
.om-tbl td { padding: 5px 12px 5px 0;
  border-top: 1px solid var(--cds-border-subtle-01, #393939); white-space: nowrap; }
.om-tbl th.num, .om-tbl td.num { text-align: right; }
.om-tbl td.om-gw { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ── bank responses ── */
.resp-split { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.mid-rail, .pivot-panel { min-width: 0; }
.mid-rail { background: var(--cds-layer-01); }
.mid-rail-hd {
  padding: 12px 16px; font-size: 12px; color: var(--cds-text-secondary);
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 10px;
}
/* the rail's By-dropdown: a Carbon dropdown sized to its longest item
   ("By payment method") so the menu never clips inside the 300px rail */
.mid-rail-hd cds-dropdown.rail-switch { width: 212px; }
.mid-search { padding: 8px 12px;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.mid-search .fld-search { width: 100%; }
.mid-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
  padding: 10px 16px 12px 13px; color: var(--cds-text-primary);
  font: inherit;
}
.mid-item:hover { background: var(--cds-layer-hover-01, #333333); }
/* pinned combined view at the top of the rail */
.mid-item.mi-all { border-bottom-width: 2px; }
.mid-item.mi-all .mi-mid { color: var(--cds-text-primary); }
.mid-item.on {
  background: var(--cds-layer-selected-01, #393939);
  border-left-color: var(--cds-border-interactive, #4589ff);
}
.mid-item .mi-top { display: flex; justify-content: space-between; gap: 8px; }
.mid-item .mi-mid { font-weight: 500; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mid-item .mi-usd { color: var(--cds-text-secondary); font-size: 12px; white-space: nowrap; }
.mid-item .mi-gw { display: block; font-size: 11px; color: var(--cds-text-helper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.mid-item .mi-meter { height: 3px; background: var(--cds-layer-02, #393939);
  margin-top: 8px; }
.mid-item .mi-meter i { display: block; height: 100%;
  background: var(--cds-border-interactive, #4589ff); }

.pivot-panel { background: var(--cds-layer-01); min-height: 400px; }
.pivot-hd { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); flex-wrap: wrap; }
.pivot-hd b, .pivot-hd .pv-title { font-size: 14px; font-weight: 600; margin: 0; }
.pivot-hd-sub { font-size: 12px; color: var(--cds-text-helper); }
.pivot-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.drill-note { margin: 8px 0 0; }
/* garden's soft / hard / unclassified reading of a reason, tagged on the row */
.kind-tag { display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 10px;
  line-height: 16px; border-radius: 8px; vertical-align: 1px; letter-spacing: .03em;
  text-transform: uppercase; font-weight: 600;
  color: var(--cds-text-secondary, #c6c6c6); background: var(--cds-layer-02, #393939); }
.kind-tag.soft { color: var(--cds-support-success, #42be65); background: rgba(66, 190, 101, .16); }
.kind-tag.hard { color: var(--cds-support-error, #ff8389); background: rgba(250, 77, 86, .18); }
/* the label cell truncates with an ellipsis (max-width 320px) — the tag
   sits pinned at the cell's right edge so a long reason never hides it
   (the cell is position: sticky, so it is the containing block) */
.pivot td.rl.tagged { padding-right: 112px; }
.pivot td.rl .kind-tag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  margin-left: 0; }
/* decline-reason drill-through */
.pivot .rl.drillable { cursor: pointer; }
.pivot .rl.drillable:hover { color: var(--cds-link-primary, #78a9ff);
  text-decoration: underline; }
.pivot tr.drill-row > td { background: var(--cds-layer-02, #393939);
  padding: 0; text-align: left; }
.drill { padding: 10px 16px 12px; font-size: 12px; }
.drill .drill-hd { color: var(--cds-text-helper); margin-bottom: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center;
  justify-content: space-between; }
/* the split-axis switcher inside the drill row */
.drill-axes { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.drill-axes-lbl { margin-right: 4px; }
.drill-axis { font: inherit; font-size: 11px; line-height: 16px; padding: 1px 9px;
  border: 1px solid var(--cds-border-subtle-01, #393939); border-radius: 12px;
  background: none; color: var(--cds-text-secondary, #c6c6c6); cursor: pointer; }
.drill-axis:hover { color: var(--cds-text-primary, #f4f4f4);
  border-color: var(--cds-border-strong-01, #6f6f6f); }
.drill-axis.on { background: var(--cds-layer-selected-01, #525252);
  color: var(--cds-text-primary, #f4f4f4); border-color: transparent; cursor: default; }
.drill-axis:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: 1px; }
.drill table { border-collapse: collapse; }
.drill td { padding: 3px 16px 3px 0; border: none; white-space: nowrap;
  text-align: left; background: none; }
.drill td.num { text-align: right; font-variant-numeric: tabular-nums; }
.drill .drill-gw { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.drill .drill-meter { width: 140px; }
.drill .drill-meter i { display: block; height: 3px;
  background: var(--cds-border-interactive, #4589ff); }
.pivot-scroll { overflow: auto; max-height: calc(100vh - 260px); }
table.pivot { border-collapse: collapse; width: 100%; font-size: 13px; }
.pivot th, .pivot td { padding: 7px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.pivot thead th { position: sticky; top: 0; z-index: 2;
  background: var(--cds-layer-02, #393939); color: var(--cds-text-secondary);
  font-weight: 500; font-size: 12px; }
.pivot .rl { text-align: left; position: sticky; left: 0; z-index: 1;
  background: var(--cds-layer-01); max-width: 320px; overflow: hidden;
  text-overflow: ellipsis; }
.pivot thead .rl { background: var(--cds-layer-02); z-index: 3; }
.pivot td.win { font-weight: 600; border-left: 1px solid var(--cds-border-subtle-01); }
.pivot tr.tot td { color: var(--cds-text-helper); font-size: 12px; }
.pivot tbody tr:hover td { filter: brightness(1.15); }

/* success row in the pivot */
.pivot tr.apprrow td { border-bottom: 1px solid var(--cds-border-subtle-01); }
.pivot tr.apprrow .rl { color: var(--cds-support-success); font-weight: 600; }

/* approval rates by BIN (/bins) — one flat sortable table. It reuses
   the pivot's header bar and scroll idiom, but not the pivot itself:
   its columns are fixed and its rows are entities, not time buckets. */
.bins-panel { background: var(--cds-layer-01); min-height: 400px; }
.bins-scroll { overflow: auto; max-height: calc(100vh - 300px); }
table.bins { border-collapse: collapse; width: 100%; font-size: 13px; }
.bins th, .bins td { padding: 7px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.bins th.num, .bins td.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.bins thead th { position: sticky; top: 0; z-index: 2; cursor: pointer;
  background: var(--cds-layer-02, #393939); color: var(--cds-text-secondary);
  font-weight: 500; font-size: 12px; user-select: none; }
.bins thead th:hover { color: var(--cds-text-primary); }
.bins thead th:focus-visible { outline: 2px solid var(--cds-focus, #fff);
  outline-offset: -2px; }
.bins thead th.sorted { color: var(--cds-text-primary); }
.bins .rl { position: sticky; left: 0; z-index: 1;
  background: var(--cds-layer-01); max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; }
.bins thead .rl { background: var(--cds-layer-02); z-index: 3; }
.bins tbody tr:hover td { filter: brightness(1.15); }
.bins td.dim { color: var(--cds-text-helper); }
/* the attempt count rides its own rate cell — the rate is the reading,
   the n is how much to trust it */
.bins .bn-n { display: block; font-size: 11px; color: var(--cds-text-helper);
  font-weight: 400; }
/* funding type: a small closed vocabulary, so it reads as a tag rather
   than as prose — narrow, uppercase, letter-spaced. When a row mixes
   types (a bank, or a window the refetch has only half filled) the
   dominant share rides underneath in the .bn-n slot. */
.bins td.bn-fund { font-size: 11px; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; }
.bins td.bn-ctry { font-size: 11px; letter-spacing: 0.04em; }
/* the drill's month strip sits under the per-BIN breakdown, same table idiom */
.bn-dmonths { margin-top: 10px; }
.bn-dmonths th { text-align: left; color: var(--cds-text-helper); font-weight: 400;
  padding: 3px 16px 3px 0; }
.bn-dmonths th.num { text-align: right; }
.bins td.pos { color: var(--cds-support-success, #42be65); }
.bins td.neg { color: var(--cds-support-error, #fa4d56); }
/* the totals row: pinned to the bottom of the scroll box so the sum is
   in view whichever page of banks is, opaque so nothing bleeds through */
.bins tfoot td { position: sticky; bottom: 0; z-index: 2; font-weight: 600;
  background: var(--cds-layer-02, #393939);
  border-top: 2px solid var(--cds-border-strong-01, #6f6f6f); border-bottom: 0; }
.bins tfoot .rl { z-index: 3; background: var(--cds-layer-02, #393939); }
.bins tfoot td.dim { font-weight: 400; }
.bins td.bn-empty { white-space: normal; padding: 24px 16px;
  color: var(--cds-text-secondary); max-width: none; }
.bins-panel .dim-note { margin: 8px 16px 12px 16px; white-space: normal; }
/* partial-coverage banner: Carbon's warning notification idiom, above
   the table rather than a footnote under it — the numbers below it are
   real but answer a narrower window than the one that was asked for */
.bn-cover { margin: 0; padding: 12px 16px; font-size: 13px; line-height: 1.4;
  background: var(--cds-notification-background-warning, #393939);
  border-left: 3px solid var(--cds-support-warning, #f1c21b);
  color: var(--cds-text-primary); }
/* the funding-coverage banner stacks UNDER the BIN one and says
   something narrower, so it is toned down a step — same idiom, less
   shout, and a hairline between them when both are showing */
.bn-cover-f { border-top: 1px solid var(--cds-border-subtle-01, #393939);
  color: var(--cds-text-secondary); }
.bins-panel .drill-note { margin-top: 0; }
/* decline-reason drill: three segment columns under the clicked row,
   reusing the responses page's .drill typography */
.bins tr.bn-row { cursor: pointer; }
.bins tr.bn-row:focus-visible { outline: 2px solid var(--cds-focus, #fff);
  outline-offset: -2px; }
.bins tr.bn-row.open .rl { color: var(--cds-link-primary, #78a9ff); }
.bins tr.bn-drill > td { background: var(--cds-layer-02, #393939);
  padding: 0; text-align: left; }
.bn-dhd { font-weight: 600; color: var(--cds-text-primary); }
.bn-dcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 8px; }
.bn-dcol { min-width: 0; }
.bn-dcol table { width: 100%; }
.bn-dcol .drill-gw { max-width: 200px; }
.bn-dcol .dim { color: var(--cds-text-helper); }
.bn-dcol .drill-meter { width: 60px; }
/* bank drill: the per-BIN breakdown under the reason columns. Amex
   spans hundreds of BINs, so the list scrolls inside the drill rather
   than making the row a page tall; the header stays put while it does
   (sticky needs border-spacing, not collapse, to not detach). */
.bn-dbins { margin-top: 14px; max-height: 340px; overflow-y: auto; }
.bn-dbins table { border-collapse: separate; border-spacing: 0; }
/* headers inherit the main table's cell padding so columns line up;
   they are labels, not sort buttons, hence the cursor override */
.bn-dbins thead th { cursor: default; font-weight: 600;
  color: var(--cds-text-helper);
  background: var(--cds-layer-02, #393939); }
.bn-dbins .dim { color: var(--cds-text-helper); }
.bn-q { width: 220px; }
/* minimum-attempts floor — a plain number field in the Carbon field idiom */
.fld-num {
  background: var(--cds-field-01, #262626);
  border: none; border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
  color: var(--cds-text-primary); border-radius: 0;
  height: 32px; width: 84px; padding: 0 8px;
  font: inherit; font-size: 13px; outline: none;
  transition: background-color .11s;
}
.fld-num:hover { background-color: var(--cds-field-hover-01, #333333); }
.fld-num:focus { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }

/* custom date range — two single Carbon date pickers (From → To), the
   Today shortcut and the "pick both dates" hint on ONE row, 32px tall
   like the switchers beside it. The input host is a flex column that
   reserves label/helper rows even when they are empty (44px), which is
   what used to lift the block above its neighbours — pin the host to
   the field height and let the empty rows overflow invisibly. */
.date-pair { display: flex; align-items: center; gap: 6px; }
.date-filter cds-date-picker-input { max-width: 128px; }
.date-filter cds-date-picker, .date-filter cds-date-picker-input { height: 32px; }
.date-filter cds-date-picker-input { justify-content: flex-start; overflow: visible; }
.date-sep { color: var(--cds-text-helper, #8d8d8d); font-size: 13px; }

/* scope notice (viewer without account scope) */
.scope-note { max-width: 480px; margin: 96px auto; text-align: center; }
.scope-note h1 { font-size: 18px; font-weight: 500; }
.scope-note p { color: var(--cds-text-secondary); }

/* ── users admin (vamp-tracker patterns on Carbon g100) ── */
.ph-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.flash { padding: 10px 16px; margin: 0 0 12px; font-size: 13px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--cds-layer-01); border-left: 3px solid var(--cds-support-success); }
.flash.err { border-left-color: var(--cds-support-error); }
.card { background: var(--cds-layer-01, #262626); padding: 16px; }

/* ── settings page ── */
.settings-form { margin-bottom: 8px; }
.set-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.set-row + .set-row { margin-top: 20px; }
/* wide enough for the longest label so every row's control column aligns */
.set-lbl { font-size: 13px; color: var(--cds-text-secondary); min-width: 160px; }
.set-ctl { display: flex; align-items: center; gap: 8px; }
.set-ctl select.sel { min-width: 280px; }

/* Carbon button set — secondary-outline base, primary, ghost, sm, danger */
.btn {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cds-border-strong-01, #6f6f6f); background: transparent;
  color: var(--cds-text-primary);
  height: 32px; padding: 0 15px; border-radius: 0;
  cursor: pointer; font-size: 14px; letter-spacing: .16px;
  font-family: inherit; white-space: nowrap;
  transition: background-color .11s, color .11s, border-color .11s;
  text-decoration: none;
}
.btn:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary); text-decoration: none; }
.btn:active { background: var(--cds-layer-active-01, #525252); }
.btn:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
.btn:disabled { color: var(--cds-text-disabled, #6f6f6f); border-color: var(--cds-border-disabled, #525252);
  cursor: default; background: transparent; }
.btn.primary { background: var(--cds-button-primary, #0f62fe); border-color: var(--cds-button-primary, #0f62fe); color: #fff; }
.btn.primary:hover { background: var(--cds-button-primary-hover, #0353e9); border-color: var(--cds-button-primary-hover, #0353e9); }
.btn.primary:active { background: var(--cds-button-primary-active, #002d9c); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--cds-link-primary, #78a9ff); }
.btn.ghost:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-link-primary-hover, #a6c8ff); }
.btn.ghost:disabled { color: var(--cds-text-disabled); background: transparent; border-color: transparent; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.danger { color: var(--cds-text-error, #ff8389); }
.btn.danger:hover { background: var(--cds-support-error-inverse, #da1e28); color: #fff; }
.btn.danger:disabled { color: var(--cds-text-disabled); background: transparent; }
.users-actions .btn + .btn { margin-left: 4px; }

/* Carbon select — field, bottom border, chevron */
select.sel {
  background: var(--cds-field-02, #393939);
  border: none; border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
  color: var(--cds-text-primary); border-radius: 0;
  padding: 0 32px 0 16px; font-size: 14px; letter-spacing: .16px;
  font-family: inherit; height: 32px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f4f4f4' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  color-scheme: dark; transition: background-color .11s;
}
select.sel:hover { background-color: var(--cds-field-hover-02, #474747); }
select.sel:focus { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
select.sel:disabled { color: var(--cds-text-disabled); cursor: default; border-bottom-color: transparent; }

/* add-user row — Carbon text inputs on the card (field-02) */
.users-add {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
}
.users-add input[type="email"], .users-add input[type="text"] {
  background: var(--cds-field-02, #393939);
  border: none; border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
  color: var(--cds-text-primary); border-radius: 0;
  height: 32px; padding: 0 16px; font: inherit; font-size: 14px; outline: none;
  transition: background-color .11s;
}
.users-add input[type="email"] { width: 224px; }
.users-add input[type="text"] { width: 160px; }
.users-add input:hover { background: var(--cds-field-hover-02, #474747); }
.users-add input:focus { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
.users-add input::placeholder { color: var(--cds-text-placeholder, #a8a8a8); }

/* scope checkboxes — Carbon checkbox (16px, white fill, dark check) */
.catpick { display: inline-flex; align-items: center; gap: 12px; }
.catpick label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary);
  cursor: pointer; white-space: nowrap;
}
.catpick input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex: none;
  border: 1px solid var(--cds-icon-primary, #f4f4f4); border-radius: 1px;
  background: transparent; cursor: pointer; position: relative;
  transition: background-color .11s, border-color .11s;
}
.catpick input[type="checkbox"]:checked {
  background: var(--cds-icon-primary, #f4f4f4);
  border-color: var(--cds-icon-primary, #f4f4f4);
}
.catpick input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--cds-icon-inverse, #161616);
  border-bottom: 2px solid var(--cds-icon-inverse, #161616);
  transform: translateY(-50%) rotate(-45deg); transform-origin: center;
}
.catpick input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cds-focus, #fff); outline-offset: 1px;
}
.catpick input[type="checkbox"]:disabled { cursor: default; opacity: .5; }
.catpick.off { opacity: .35; }
.catpick.off label { cursor: default; }

/* left-aligned data table (users, login history) — the numeric .pivot
   styling is wrong for these */
table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 12px; text-align: left;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939); }
.tbl thead th { background: var(--cds-layer-02, #393939); color: var(--cds-text-secondary);
  font-weight: 500; font-size: 12px; letter-spacing: .32px; }
.tbl tbody tr:hover td { background: var(--cds-layer-hover-01, #333333); }
.tbl .nowrap { white-space: nowrap; }
.users-tbl td { height: 46px; }
.users-tbl .rolescope { min-width: 300px; }
.users-tbl .rolescope .catpick { margin-left: 12px; }
.users-actions { white-space: nowrap; }
a.lastlogin { text-decoration: none; }
a.lastlogin:hover { color: var(--cds-text-primary); }

/* collapsed footnote */
details.note { margin-top: 12px; }
details.note summary {
  cursor: pointer; font-size: 12px; letter-spacing: .32px;
  color: var(--cds-text-helper);
}
details.note summary:hover { color: var(--cds-text-primary); }
.note-body {
  margin: 8px 0 0; padding: 12px 16px;
  color: var(--cds-text-secondary); line-height: 1.6; max-width: 82ch;
  background: var(--cds-layer-02, #393939); font-size: 13px;
}
.note-body p { margin: 0 0 8px; }
.note-body p:last-child { margin-bottom: 0; }
.note-body b { color: var(--cds-text-primary); }

.agent-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
/* Users › Usage */
.usage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.usage-h2 { font-size: 16px; font-weight: 400; margin: 0 0 8px; }
.usage-h2 .usage-range { font-size: 12px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.usage-windows { display: inline-flex; gap: 4px; }
.usage-empty { margin: 0; }
.usage-tbl th { white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .nowrap { font-variant-numeric: tabular-nums; }
.tbl tr.quiet td { color: var(--cds-text-helper, #8d8d8d); }
.pages-cell { min-width: 260px; }
.page-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 12px;
  font-size: 12px; background: var(--cds-layer-02, #393939); white-space: nowrap; }
.page-chip b { font-weight: 600; color: var(--cds-text-secondary); }
.kind { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 12px;
  background: var(--cds-layer-02, #393939); }
.kind-password, .kind-invite { color: var(--cds-support-success, #42be65); }
.kind-logout { color: var(--cds-text-secondary); }
.kind-idle, .kind-expired { color: var(--cds-text-helper, #8d8d8d); }
/* day × hour heatmap (one user selected): newest day under the hour
   axis, a second axis under the per-hour bars so a 90-day grid never
   loses its hours off the top */
.hm-wrap { overflow-x: auto; }
.hm { display: grid; grid-template-columns: 92px repeat(24, minmax(18px, 1fr)) 44px;
  grid-auto-rows: 18px; gap: 2px; min-width: 640px; font-size: 11px; align-items: stretch; }
.hm.dense { grid-auto-rows: 14px; gap: 1px 2px; }
.hm-corner, .hm-hour, .hm-day, .hm-total { color: var(--cds-text-helper, #8d8d8d);
  display: flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-hour { justify-content: center; }
.hm-day { padding-right: 6px; gap: 5px; color: var(--cds-text-secondary); }
.hm-day span { color: var(--cds-text-helper, #8d8d8d); }
.hm-day.wk, .hm-day.wk span { color: var(--cds-text-placeholder, #6f6f6f); }
.hm-day.today, .hm-day.today span { color: var(--cds-text-primary); }
.hm-total { justify-content: flex-end; color: var(--cds-text-secondary); }
.hm-total-h, .hm-foot { justify-content: flex-end; }
.hm-cell { background: rgba(69, 137, 255, var(--a, 0)); border-radius: 2px; }
.hm-cell.z { background: var(--heat-cell, #2f2f2f); }
.hm.dense .hm-cell { border-radius: 1px; }
.hm-cell:hover { outline: 1px solid var(--cds-text-primary); outline-offset: -1px; }
.hm-bar { display: flex; align-items: flex-end; grid-row: span 2; margin-top: 6px; }
.hm-bar i { display: block; width: 100%; background: var(--chart-bar, #4589ff); opacity: .7; border-radius: 2px 2px 0 0; }
.hm-foot { grid-row: span 2; align-items: flex-end; padding-bottom: 2px; }
.login-hint { font-size: 13px; color: var(--cds-text-secondary); margin: 0; }

/* native submit button in Carbon primary style — cds-button doesn't
   form-associate in this build, so real forms use this instead */
.btn-primary {
  background: var(--cds-button-primary, #0f62fe);
  color: var(--cds-text-on-color, #fff);
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 14px; text-align: left;
  padding: 14px 60px 14px 16px; min-height: 48px;
}
.btn-primary:hover { background: var(--cds-button-primary-hover, #0353e9); }
.btn-primary:active { background: var(--cds-button-primary-active, #002d9c); }
.btn-primary:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: -3px; }

/* ── login ── */
.login-body { display: grid; place-items: center; min-height: 100vh; margin: 0;
  background: var(--cds-background, #161616); color: var(--cds-text-primary);
  font: 14px/1.45 'IBM Plex Sans', system-ui, sans-serif; }
.login-card { width: min(340px, calc(100vw - 32px));
  background: var(--cds-layer-01); padding: 32px;
  display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 500; }
.login-err { color: var(--cds-support-error); font-size: 13px; margin: 0; }
.fld-label { font-size: 12px; color: var(--cds-text-secondary); }
/* every .fld in the app sits on a layer-01 surface (login card, users
   bar, filter bar) — Carbon layering wants field-02 there, field-01
   would blend invisibly into the card */
.fld { background: var(--cds-field-02, #393939); border: none;
  border-bottom: 1px solid var(--cds-border-strong-01, #6f6f6f);
  color: var(--cds-text-primary); padding: 11px 16px; font: inherit; outline: none; }
.fld::placeholder { color: var(--cds-text-placeholder, #a8a8a8); }
.fld:focus { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .resp-split { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
}

/* phones: the filter bar's content-switchers do the same — natural chip
   widths, scrolling sideways in their wrapper instead of squeezing
   (clipped labels) or blowing out the layout viewport */
@media (max-width: 760px) {
  .filter, .grid-filter { max-width: 100%; }
  /* only switcher-holding filters may scroll sideways — an overflow-x
     container also clips vertical overflow, which would cut off the
     entity multi-select popup menus */
  .filter:has(cds-content-switcher) {
    overflow-x: auto; scrollbar-width: none;
  }
  .filter:has(cds-content-switcher)::-webkit-scrollbar { display: none; }
  .filter cds-content-switcher { min-width: max-content; }
  .filter-grid .filter:has(cds-content-switcher) { overflow: visible; }
  .filter-grid .filter cds-content-switcher { min-width: 0; }
  .filter-grid.filter-bar { gap: 12px 16px; }
  /* the slices toolbar: dropdown, sort row and search span the width;
     the sort label takes its own line so the three chips plus the
     direction button share the row (equal shares, a label that would
     not fit its share keeps its text — the mode bar's rule) */
  .tb-sep { display: none; }
  .tb-row { gap: 12px 16px; }
  /* the chart legend wraps instead of pushing the page sideways */
  .legend { white-space: normal; flex-wrap: wrap; row-gap: 4px; }
  .slice-dd, .display-row .grid-filter, .display-row .fld-search { width: 100%; margin-left: 0; }
  .tb-toggle { min-height: 44px; }
  .sort-dir { width: 44px; height: 44px; }
  #tb-sort { width: 100%; }
  #sort-lbl { flex: 0 0 100%; }
  #f-sort { flex: 1 1 auto; min-width: 0; display: flex; }
  #f-sort cds-content-switcher-item { flex: 1 1 0; min-width: max-content; }
  .fld-search { width: 100%; }
  main { padding-left: 12px; padding-right: 12px; }
  .filter-bar { padding: 10px 12px; gap: 10px 16px; }
  .page-head { margin: 16px 0 12px; }
  /* comfortable touch targets (Carbon mobile guidance ≥44px) */
  .btn, .btn.sm, select.sel, .users-add input[type="email"],
  .users-add input[type="text"], .fld-search { height: 44px; }
  /* dismissible pin chips join the same floor (radius keeps the pill) */
  .chip { min-height: 44px; padding-left: 16px; }
  .chip .chip-x { width: 24px; height: 24px; }
  /* saved-views rows and the sync action too */
  .views-save, .views-open, .views-del, .sync-act { min-height: 44px; }
  .kpi-tile { padding: 12px; }
  .kpi-v { font-size: 24px; }
  /* the gateway rail caps its height so the pivot stays reachable */
  .mid-rail { max-height: 302px; overflow-y: auto; }
  .mid-rail-hd { position: sticky; top: 0; z-index: 1;
    background: var(--cds-layer-01, #262626); }
  .pivot-scroll { max-height: 70vh; }
  .bins-scroll { max-height: 70vh; }
  .bn-dcols { grid-template-columns: 1fr; gap: 12px; }
  .bn-q { width: 140px; }
  /* both filter bars collapse behind the Filters disclosure row; the
     chips row stays visible as the collapsed summary */
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-bottom: 12px; padding: 12px;
    border: none; cursor: pointer; font: inherit; font-size: 13px;
    background: var(--cds-layer-01, #262626);
    color: var(--cds-text-primary, #f4f4f4);
  }
  .filters-toggle::after { content: "▾"; color: var(--cds-text-helper, #8d8d8d); }
  body.filters-open .filters-toggle::after { content: "▴"; }
  .filters-toggle:focus-visible { outline: 2px solid var(--cds-focus, #fff);
    outline-offset: -2px; }
  body:not(.filters-open) .filter-bar { display: none; }
  .pv-rq { width: 100%; }
  /* a switcher row that scrolls sideways fades out at whichever edge
     still hides chips — app.js toggles .sx-more / .sx-less from the
     real scroll metrics, so a row that fits shows no fade */
  .filter.sx-more { --sx-r: transparent; }
  .filter.sx-less { --sx-l: transparent; }
  .filter.sx-more, .filter.sx-less {
    -webkit-mask-image: linear-gradient(90deg, var(--sx-l, #000) 0, #000 36px,
      #000 calc(100% - 36px), var(--sx-r, #000) 100%);
    mask-image: linear-gradient(90deg, var(--sx-l, #000) 0, #000 36px,
      #000 calc(100% - 36px), var(--sx-r, #000) 100%);
  }
}

/* Carbon responsive shell: below 1056px the header nav hides natively
   and the hamburger + this drawer take over (Carbon side-nav look,
   light-DOM) */
.side-drawer {
  position: fixed; top: 47px; left: 0; bottom: 0; z-index: 7999;
  width: 256px; padding: 8px 0; overflow-y: auto;
  background: var(--cds-layer-01, #262626);
  box-shadow: 2px 0 6px rgba(0, 0, 0, .5);
  transform: translateX(-105%); visibility: hidden;
  transition: transform .15s, visibility .15s;
}
.side-drawer.open { transform: translateX(0); visibility: visible; }
.sd-link {
  display: flex; align-items: center; height: 44px; padding: 0 16px;
  border-left: 3px solid transparent;
  color: var(--cds-text-secondary, #c6c6c6); font-size: 14px;
  text-decoration: none;
}
.sd-link:hover { background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-text-primary); text-decoration: none; }
.sd-link.on {
  background: var(--cds-layer-selected-01, #393939);
  border-left-color: var(--cds-border-interactive, #4589ff);
  color: var(--cds-text-primary); font-weight: 600;
}
@media (min-width: 1056px) {
  .side-drawer { display: none; }
}
@media (max-width: 700px) {
  /* keep sync status glanceable on phones: dot-only trigger, panel
     drops in full-width under the header */
  .syncpill #sync-line { display: none; }
  .syncpill { padding: 0 18px; }
  .sync-panel {
    position: fixed; top: 47px; left: 12px; right: 12px; min-width: 0;
  }
  .sync-row { white-space: normal; }
  /* saved-views panel: anchor to the title row, not the trigger — a
     300px panel opening at the trigger's x overflows small screens */
  .ph-top { position: relative; }
  .views-menu { position: static; }
  .views-panel { left: 0; right: 0; min-width: 0; max-width: none; }
}
@media (max-width: 480px) {
  .hdr-ghost, .cur-btn { padding: 0 8px; min-width: 44px; }
  .hdr-right { gap: 0; padding-right: 4px; }
}

/* ── at-a-glance page ──────────────────────────────────────────── */
.gl-updated { font-size: 12px; color: var(--cds-text-helper, #8d8d8d); }
#gl-kpis { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { #gl-kpis { grid-template-columns: repeat(2, 1fr); } }
.gl-stale {
  padding: 10px 16px; margin-bottom: 16px; font-size: 13px;
  background: var(--cds-layer-01, #262626);
  border-left: 3px solid var(--cds-support-warning, #f1c21b);
}
#gk-lost.gl-lost { color: var(--cds-support-error, #fa4d56); }
.gl-sec { margin-bottom: 36px; }
/* real h2s (page outline) styled down to the section-label size */
.gl-sec-hd {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 14px; font-weight: 600; margin: 0 0 10px;
}
.gl-hd-count { font-size: 12px; font-weight: 400;
  color: var(--cds-text-secondary); }

/* movers: one card per event, echoes folded behind a toggle */
.gl-list { display: flex; flex-direction: column; gap: 10px; }
.gl-group { background: var(--cds-layer-01, #262626); }
.gl-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 175px 110px 84px 16px;
  gap: 2px 14px; align-items: center; padding: 11px 16px;
  font-size: 13px; color: var(--cds-text-primary); text-decoration: none;
  cursor: pointer;
}
.gl-row:hover { background: var(--cds-layer-hover-01, #333333);
  text-decoration: none; }
.gl-row:focus-visible { outline: 2px solid var(--cds-focus, #ffffff);
  outline-offset: -2px; }
.gl-row.closed { opacity: 0.8; }   /* .65 dropped the 11px helper text under 3.3:1 */
.gl-chev { justify-self: end; color: var(--cds-text-helper, #8d8d8d);
  font-size: 11px; transition: transform 0.15s; }
.gl-row.open .gl-chev { transform: rotate(90deg); }
/* evidence panel: the why-flagged math as text + hourly 72h chart */
.gl-detail { padding: 2px 16px 14px 114px; font-size: 12px;
  border-top: 1px dashed var(--cds-border-subtle-01, #393939); }
.gl-detail-stats { display: flex; flex-direction: column; gap: 3px;
  margin: 8px 0 10px; color: var(--cds-text-secondary); }
.gl-detail-stats i { font-style: normal; display: inline-block;
  min-width: 168px; color: var(--cds-text-helper, #8d8d8d); }
.gl-hourly { display: block; width: 100%; max-width: 620px; height: 64px;
  color: var(--chart-ink); }
.gl-detail-cap { font-size: 11px; color: var(--cds-text-helper, #8d8d8d);
  margin: 4px 0 10px; }
.gl-detail-link { font-size: 12px; }
.gl-echo-rows .gl-row { padding-top: 7px; padding-bottom: 7px;
  border-top: 1px solid var(--cds-border-subtle-01, #393939); opacity: 0.85; }
.gl-echo-toggle {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-top: 1px solid var(--cds-border-subtle-01, #393939);
  color: var(--cds-text-helper, #8d8d8d); font: inherit; font-size: 12px;
  padding: 7px 16px 7px 114px; cursor: pointer;
}
.gl-echo-toggle:hover { background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-text-secondary); }
.gl-caret { display: inline-block; width: 14px; }
.gl-tag {
  font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 9px;
  justify-self: start; white-space: nowrap;
}
.gl-tag-gateway    { background: rgba(69, 137, 255, 0.18); color: #78a9ff; }
.gl-tag-pay_method { background: rgba(255, 131, 43, 0.16); color: #ffb784; }
.gl-tag-campaign   { background: rgba(66, 190, 101, 0.16); color: #6fdc8c; }
.gl-tag-traffic    { background: rgba(209, 39, 113, 0.18); color: #ff7eb6; }
.gl-tag-country    { background: rgba(165, 110, 255, 0.16); color: #be95ff; }
.gl-tag-source     { background: rgba(8, 189, 186, 0.16); color: #3ddbd9; }
.gl-tag-segment    { background: rgba(244, 244, 244, 0.14); color: #f4f4f4; }
.gl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.gl-segc { font-style: normal; font-weight: 400; font-size: 11px;
  color: var(--cds-text-helper, #8d8d8d); margin-left: 6px; }
.gl-ctx { font-size: 11px; color: var(--cds-text-helper, #8d8d8d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-move { justify-self: end; text-align: right; white-space: nowrap;
  color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.gl-move .bad { color: var(--cds-support-error, #fa4d56); font-weight: 600; }
.gl-move .good { color: var(--cds-support-success, #42be65); font-weight: 600; }
.gl-spark { justify-self: end; color: var(--chart-ink); }
.gl-spark-base { stroke: var(--cds-border-strong-01, #6f6f6f); stroke-width: 1; stroke-dasharray: 2 3; }
.gl-spark-fill { fill: currentColor; opacity: 0.12; }
.gl-impact { justify-self: end; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.gl-impact.loss { color: var(--cds-support-error, #fa4d56); }
.gl-impact.gain { color: var(--cds-support-success, #42be65); }
.gl-empty { padding: 20px 16px; margin: 0; font-size: 13px;
  color: var(--cds-text-secondary); }
.gl-rec-toggle { margin-top: 10px; }
.gl-recovered { margin-top: 10px; }
/* minor-tier fold sits between groups, not inside one — give it its own
   card face so it reads as a collapsed drawer */
.gl-minor-toggle { background: var(--cds-layer-01, #262626);
  border-top: 0; padding-left: 16px; }
.gl-minor-toggle + .gl-echo-rows { background: var(--cds-layer-01, #262626); }

/* heat grid card */
.gl-heat-card { background: var(--cds-layer-01, #262626); padding: 16px; }
.gl-heat-scroll { overflow-x: auto; }
#gl-heat { min-width: 680px; }
.gl-heat-row { display: flex; align-items: center; gap: 3px;
  margin-bottom: 3px; }
.gl-heat-row:last-child { margin-bottom: 0; }
.gl-heat-hdr { margin-bottom: 6px; }
.gl-cell-hd { flex: 1; min-width: 0; text-align: center; font-size: 11px;
  color: var(--cds-text-helper, #8d8d8d); }
.gl-gw {
  flex: none; width: 215px; padding-right: 10px; font-size: 12px;
  display: flex; align-items: center; gap: 6px; overflow: hidden;
}
.gl-gw-name { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.gl-cell { flex: 1; min-width: 0; height: 24px; border-radius: 2px;
  background: var(--heat-cell); }
.gl-cell:hover { outline: 1px solid var(--cds-text-secondary, #c6c6c6); }
/* "no traffic" cells draw their dash with an INSET OUTLINE, never a
   border: a border is laid out (even under box-sizing:border-box a
   flex-basis of 0 is floored at the border box), so it stole 2px from
   every empty cell's share of the row and shoved the rest of that
   row out of step with the day headers above it. Outlines don't
   participate in layout, so an all-dashed row now lines up exactly. */
.gl-cell.empty { background: none;
  outline: 1px dashed var(--cds-border-subtle-01, #444); outline-offset: -1px; }
/* segment matrix cells — same shading, value printed inside */
#gl-matrix { min-width: 560px; }
#gl-matrix .gl-gw { width: 240px; }
#gl-matrix .gl-gw-name { max-width: 100%; }
.gl-mcell-hd { flex: 1; min-width: 0; text-align: center; font-size: 11px;
  color: var(--cds-text-helper, #8d8d8d); }
.gl-mcell {
  flex: 1; min-width: 0; height: 30px; border-radius: 2px; background: var(--heat-cell);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cds-text-primary, #f4f4f4); text-decoration: none;
}
.gl-mcell:hover { outline: 1px solid var(--cds-border-strong-01, #6f6f6f);
  text-decoration: none; color: var(--cds-text-primary, #f4f4f4); }
.gl-mcell.empty { background: none;
  outline: 1px dashed var(--cds-border-subtle-01, #444); outline-offset: -1px; }
/* nowrap + room for "14d avg": the column is sized for the values, and
   before the webfont swapped in the fallback measured wider and broke
   the header label onto two lines, bloating the header row */
.gl-rate-col { flex: none; width: 60px; text-align: right; font-size: 11px;
  white-space: nowrap; color: var(--cds-text-secondary);
  font-variant-numeric: tabular-nums; }
.gl-heat-hdr .gl-rate-col { color: var(--cds-text-helper, #8d8d8d); }
.gl-legend { margin-top: 12px; font-size: 11px;
  color: var(--cds-text-helper, #8d8d8d); display: flex; gap: 16px;
  flex-wrap: wrap; align-items: center; }
.gl-legend .sw { display: inline-block; width: 12px; height: 12px;
  border-radius: 2px; background: var(--heat-cell); margin-right: 5px;
  vertical-align: -2px; }
.gl-legend .sw-good { background: rgb(57, 126, 77); }
.gl-legend .sw-bad { background: rgb(220, 73, 80); }
.gl-legend .sw-empty { background: none;
  border: 1px dashed var(--cds-border-subtle-01, #444); }

@media (max-width: 700px) {
  .gl-row { grid-template-columns: 70px minmax(0, 1fr) 76px; }
  .gl-move, .gl-spark, .gl-chev { display: none; }
  .gl-echo-toggle { padding-left: 16px; }
  .gl-detail { padding-left: 16px; }
  .gl-detail-stats i { display: block; min-width: 0; }
  .gl-gw { width: 130px; }
  #gl-matrix .gl-gw { width: 170px; }
}

/* reduced motion — the sync pulse and the drawer slide are the only
   real motion; both states stay named without them ("Syncing…" text,
   the drawer's visibility), so a plain cut loses nothing */
@media (prefers-reduced-motion: reduce) {
  .syncmenu.running .dot { animation: none; }
  .side-drawer, .gl-chev, .is-loading { transition: none; }
}

/* ── PDF export (print sheet) ──────────────────────────────────────
   "Export PDF" is the browser's own print-to-PDF. The charts are
   hand-built SVG, so the browser's printer keeps them vector and
   identical to the screen — no PDF renderer to vendor and nothing
   extra in the image. Everything below is print-only; the cover block
   is hidden on screen. */
.print-sheet { display: none; }

@media print {
  /* g100 is baked into the chart SVGs at render time (axis greys,
     green line, blue bars are literal attributes), so the sheet has to
     print dark — on white those strokes would be near-invisible.
     print-color-adjust inherits, so html carries it for the page. */
  html { background: #161616; -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
  body { background: #161616; }
  /* No `size` here on purpose: naming an orientation overrides the
     print dialog's own Layout control, so the sheet would come out
     rotated with no way to say otherwise. Portrait is the browser
     default and the layout below fits either way. */
  @page { margin: 10mm; }

  /* navigation, controls and anything clickable: not paper. The
     coverage/stale-data notices deliberately stay — a shared file has
     to carry its own caveats. */
  cds-header, .side-drawer, .filters-toggle, .filter-bar, .pin-chips,
  .slice-toolbar, .views-menu, .views-panel, .page-head, .chart-tip,
  .grid-more, .grid-meta .dim-note, .cc-resp, .pivot-actions,
  .drill-note, .drill-axes, #export-csv, #export-pdf, #export-bins { display: none !important; }

  main { max-width: none; padding: 0; }
  .print-sheet { display: block; margin: 0 0 12px; }
  .ps-head { border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
    padding-bottom: 6px; margin-bottom: 8px; }
  .ps-brand { font-size: 10px; letter-spacing: .32px; text-transform: uppercase;
    color: var(--cds-text-helper, #8d8d8d); }
  .ps-title { font-size: 18px; font-weight: 600; margin: 2px 0; }
  .ps-sub { font-size: 12px; margin: 0; color: var(--cds-text-secondary, #c6c6c6); }
  /* the filter block is the point of the export — four columns so a
     dozen-odd rows stay on the first page above the charts */
  .ps-filters { display: grid; margin: 0 0 8px; font-size: 11px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0 20px; }
  .ps-f { display: flex; gap: 8px; padding: 2px 0; break-inside: avoid;
    border-bottom: 1px solid var(--cds-layer-01, #262626); }
  .ps-f dt { flex: none; min-width: 92px; color: var(--cds-text-helper, #8d8d8d); }
  .ps-f dd { margin: 0; min-width: 0; overflow-wrap: anywhere;
    font-weight: 600; color: var(--cds-text-primary, #f4f4f4); }
  /* at its default = context, not news */
  .ps-f.is-dflt dd { font-weight: 400; color: var(--cds-text-helper, #8d8d8d); }
  .ps-scope, .ps-foot { font-size: 11px; margin: 0 0 6px;
    color: var(--cds-text-helper, #8d8d8d); }

  .kpis { break-inside: avoid; margin-bottom: 12px; }
  .grid-meta { margin-bottom: 8px; }
  .coverage-note, .bn-cover, .load-err { break-inside: avoid; }

  /* Portrait A4/Letter leaves ~718px of content, landscape ~1032px —
     this gives 2 columns of ~349px and 3 of ~337px respectively, both
     within a few percent of the PRINT_CHART_W the charts are redrawn
     at (see initPrint's reflow in app.js). */
  .chart-grid, .gwg-row {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
  .chart-card, .gw-group, .rank-break { break-inside: avoid; }
  /* campaign drill-down: chart above its table, no hover-only chrome.
     A collapsed group prints expanded: on screen its body is NOT built
     (renderCampaignGrid skips closed groups until they are expanded),
     it is the beforeprint reflow in initPrint (renderGrid with printW
     set) that builds every body, and this rule then un-hides it — so
     the reflow must keep running before this sheet applies. The
     per-group account fold (.cg-more) is not undone: those rows are
     left out, and the sheet's scope note says so */
  .cp-group { break-inside: avoid; }
  .cpg-body { grid-template-columns: 1fr; }
  .cp-group.closed .cpg-body { display: grid; }
  .chev, .gwl .cg-more, .gwl td.resp, .gwl th:last-child { display: none !important; }
  .gwl table { min-width: 0; }
  .gwl th, .gwl td { padding: 3px 6px; font-size: 10px; }
  .chart-card { min-height: 0; padding: 10px 10px 4px; }
  .chart-card .cc-title { cursor: auto; }
  /* the SVG carries width="100%" height="220": when the print column
     is narrower than the screen card was, preserveAspectRatio
     letterboxes the drawing inside that fixed height. Handing height
     back to the viewBox ratio scales it properly instead. */
  .chart-card .cc-holder, .chart-card .cc-holder svg { height: auto; }

  /* Bank responses: the pivot alone, whole and full-width — the rail
     is navigation, and the print sheet names the gateway scope */
  .resp-split { display: block; }
  .mid-rail, #orders-modal { display: none !important; }
  .pivot-panel { min-height: 0; }
  .pivot-scroll { overflow: visible; max-height: none; }
  .pivot thead { display: table-header-group; }
  .pivot th, .pivot td { position: static; padding: 4px 6px; font-size: 10px; }
  .pivot .rl { white-space: normal; }
  .pivot tbody tr { break-inside: avoid; }
  .pivot .rl.drillable, .pivot td.co { cursor: auto; }

  /* BIN table: the whole thing, not one viewport of it */
  .bins-panel { min-height: 0; }
  .bins-scroll { overflow: visible; max-height: none; }
  .bins thead { display: table-header-group; }   /* repeat on every page */
  .bins thead th, .bins .rl, .bins tfoot td { position: static; }
  .bins tbody tr, .bins tfoot tr { break-inside: avoid; }
  .bins tr.bn-row { cursor: auto; }
  /* eight nowrap columns do not fit 718px on their screen metrics, and
     an overflowing table is CLIPPED at the page edge rather than
     scrolled — tighten the cells and let the one free-text column wrap */
  .bins th, .bins td { padding: 5px 8px; font-size: 11px; }
  .bins .rl { white-space: normal; }
}

/* header: between the lg breakpoint (1056, where the nav collapses into
   the burger) and ~1200px the right-hand controls need a little less
   room — last in the file so it outranks the base paddings above */
@media (max-width: 1200px) {
  .cur-btn { padding: 0 8px; } .hdr-ghost { padding: 0 10px; }
  .acct-toggle { padding-right: 2px; margin-right: 2px; }
  .syncpill { padding-left: 8px; padding-right: 8px; }
}

/* ── Garden Performance additions (on top of performance's sheet) ───── */
.login-note { color: var(--cds-text-secondary); font-size: 13px; margin: 0; }