/* VAMP Tracker — Carbon Design System (g100 dark theme).
   Tokens come from vendor/carbon-theme-g100.css (--cds-*); this file
   implements Carbon component recipes (UI shell header, data table,
   buttons, text inputs, toggle, tags, tiles, content switcher) on the
   existing markup — selector names are load-bearing for app.js.
   Carbon grammar: square corners on controls/tiles, pill-radius tags,
   IBM Plex Sans, 2px white focus, blue = interactive, green = success,
   red = EXCESSIVE only, orange = one-threshold-over, yellow = watch. */

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

:root {
  /* app.js writes SVG colors through these two — keep them aliased.
     --text paints the dashed company line: text-secondary on purpose,
     so the sum line reads as context and the per-MID series keep the
     visual foreground. */
  --text: var(--cds-text-secondary, #c6c6c6);
  --err: var(--cds-support-error, #fa4d56);
  /* category accents (Carbon 40-shades — readable text on g100) */
  --cat-core: #42be65;
  --cat-digital: #78a9ff;
  --cat-growth: #be95ff;
  --topbar-h: 48px;
  --maxw: 1584px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* author display rules beat the UA's [hidden] rule, so el.hidden = true
   silently did nothing on anything with an explicit display (the
   forecast floor-line legend chip). One guard, rather than per rule. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--cds-background, #161616);
  color: var(--cds-text-primary, #f4f4f4);
  font: 400 14px/1.43 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: .16px;               /* Carbon body-01 */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cds-link-primary, #78a9ff); text-decoration: none; }
a:hover { color: var(--cds-link-primary-hover, #a6c8ff); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
main { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px 80px; }
::selection { background: rgba(69, 137, 255, .35); }
.muted { color: var(--cds-text-helper, #a8a8a8); }
.mint { color: var(--cds-support-success, #42be65); }
.v-over { color: var(--cds-support-caution-major, #ff832b); }
.v-bad { color: var(--cds-support-error, #fa4d56); }
.count { font-size: 12px; letter-spacing: .32px; color: var(--cds-text-helper); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* slim loading bar */
.loadbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--cds-interactive, #4589ff);
  z-index: 100; opacity: 0; transition: width .25s ease, opacity .3s;
  pointer-events: none;
}
.loadbar.active { opacity: 1; }

.tbl-wrap, .chart-scroll { scrollbar-width: thin; scrollbar-color: var(--cds-border-strong-01, #6f6f6f) transparent; }
.tbl-wrap::-webkit-scrollbar, .chart-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
.tbl-wrap::-webkit-scrollbar-thumb, .chart-scroll::-webkit-scrollbar-thumb {
  background: var(--cds-border-subtle-02, #525252);
}
.tbl-wrap::-webkit-scrollbar-thumb:hover, .chart-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--cds-border-strong-01, #6f6f6f);
}
.tbl-wrap::-webkit-scrollbar-track, .chart-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── topbar — Carbon UI shell header ────────────────────────────── */
.topbar {
  border-bottom: 1px solid var(--cds-border-subtle-00, #393939);
  background: var(--cds-background, #161616);
  position: sticky; top: 0; z-index: 40;
}
/* Full-bleed like the Carbon shell. height is a literal on purpose:
   app.js writes the measured topbar height back into --topbar-h for
   sticky offsets, so deriving this row's height from the var would
   feed the measurement into itself. */
.topbar-inner {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 16px; height: 48px;
  padding: 0 16px;
}
.brand {
  display: flex; align-items: center; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: .16px;
  color: var(--cds-text-primary);
}
.brand span { font-weight: 400; margin-left: 5px; }
.brand:hover { color: var(--cds-text-primary); text-decoration: none; }
.topbar-right {
  display: flex; align-items: stretch; gap: 12px;
  min-width: 0; flex-wrap: nowrap;
}
.topbar-right > form { display: flex; align-items: stretch; }
/* header actions read as header items — flat gray text, hover layer,
   same voice as the nav links (blue ghost stays for in-page actions) */
.topbar .btn.ghost {
  align-self: stretch; height: auto; border: none; padding: 0 16px;
  font-size: 14px; letter-spacing: .16px; color: var(--cds-text-secondary, #c6c6c6);
}
.topbar .btn.ghost:hover {
  background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary);
}
.topnav { display: flex; align-items: stretch; gap: 0; }
/* Carbon header nav item — flat text, current page carries the
   interactive-blue bottom edge */
.navlink {
  display: flex; align-items: center; padding: 0 16px;
  font-size: 14px; letter-spacing: .16px; color: var(--cds-text-secondary, #c6c6c6);
  white-space: nowrap; transition: color .11s, background-color .11s;
}
.navlink:hover {
  color: var(--cds-text-primary); background: var(--cds-layer-hover-01, #333333);
  text-decoration: none;
}
/* Carbon pressed state — replaces the browser's tap flash */
.navlink:active, .mnav:active, .seg-btn:active, .lchip:active,
.chip-filter:active, .syncpill:active {
  background: var(--cds-layer-active-01, #525252);
}
.navlink.navactive {
  color: var(--cds-text-primary);
  box-shadow: inset 0 -3px 0 var(--cds-border-interactive, #4589ff);
}

/* ── mobile hamburger + slide-out side nav (Carbon UI shell) ─────
   Hidden ≥672px; the media block at the bottom switches them on. */
.nav-burger, .mobile-nav, .mobile-nav-scrim { display: none; }
.burger-icon { position: relative; display: block; }
.burger-icon, .burger-icon::before, .burger-icon::after {
  width: 18px; height: 2px; background: var(--cds-icon-primary, #f4f4f4);
  transition: transform .11s, background-color .11s;
}
.burger-icon::before, .burger-icon::after { content: ""; position: absolute; left: 0; }
.burger-icon::before { top: -6px; }
.burger-icon::after { top: 6px; }
/* open = Carbon close glyph */
.nav-burger.open .burger-icon { background: transparent; }
.nav-burger.open .burger-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-burger.open .burger-icon::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 60;
  width: 256px; max-width: 80vw;
  flex-direction: column; padding: 8px 0;
  background: var(--cds-layer-01, #262626);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .24s cubic-bezier(.2, 0, .38, .9), visibility .24s;
}
.mobile-nav.open { transform: none; visibility: visible; }
.mobile-nav-scrim {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(22, 22, 22, .7); opacity: 0; pointer-events: none;
  transition: opacity .24s;
}
.mobile-nav-scrim.open { opacity: 1; pointer-events: auto; }
.mobnav-item {
  display: flex; align-items: center; width: 100%; height: 44px; padding: 0 16px;
  border: none; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; letter-spacing: .16px;
  color: var(--cds-text-secondary, #c6c6c6);
}
.mobnav-item:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-text-primary); text-decoration: none; }
.mobnav-item:active { background: var(--cds-layer-active-01, #525252); }
.mobnav-item.current {
  color: var(--cds-text-primary);
  background: var(--cds-layer-selected-01, #393939);
  box-shadow: inset 3px 0 0 var(--cds-border-interactive, #4589ff);
}
.mobile-nav form { margin: 0; }
.mobnav-divider { display: block; height: 1px; margin: 8px 0; background: var(--cds-border-subtle-01, #393939); }
body.nav-locked { overflow: hidden; }

/* sync status — dot + "Synced X ago" trigger; events / countdown /
   Sync now live in the dropdown */
.syncmenu { position: relative; display: flex; align-items: stretch; min-width: 0; }
.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: 14px; letter-spacing: .16px;
  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 b { color: var(--cds-text-primary, #f4f4f4); font-weight: 600; }
.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 .syncpill b { color: var(--cds-text-error); }
.syncmenu.err .dot { background: var(--cds-support-error); }
.syncmenu.partial .dot { background: var(--cds-support-warning); }
/* never-synced: amber dot — a first sync is an admin chore, not health */
.syncmenu.never .dot { background: var(--cds-support-warning, #f1c21b); }
.syncpill .scanline { overflow: hidden; text-overflow: ellipsis; }
/* the running line replaces the resting line, same footprint */
.syncpill #syncCountdown { display: none; }
.syncmenu.running #syncLine { display: none; }
.syncmenu.running #syncCountdown { display: inline; color: var(--cds-support-success); }
.syncmenu.running .dot { animation: pulse 1.4s infinite; }
#syncCountdown { font-variant-numeric: tabular-nums; }
@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: 45;
  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);
}
.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 b.mint { color: var(--cds-support-success); }
.sync-row.muted-row { color: var(--cds-text-helper); font-size: 12px; letter-spacing: .32px; }
.sync-row.err-row { color: var(--cds-text-error); }
.syncmenu.running .row-next { display: none; }
.sync-panel form { margin: 0; }
.topbar .sync-panel .btn.ghost {
  width: 100%; height: 40px; padding: 0 16px; align-self: auto;
  color: var(--cds-link-primary, #78a9ff); font-size: 14px;
}
.topbar .sync-panel .btn.ghost:hover {
  background: var(--cds-layer-hover-01, #333333);
  color: var(--cds-link-primary-hover, #a6c8ff);
}

/* ── page head — title, state line, controls; no card chrome ────── */
.page-head { margin: 16px 0 8px; }
.ph-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ph-title { min-width: 0; }
/* Carbon heading-03 — productive page title */
.ph-title h1 { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 0; overflow-wrap: anywhere; }
.ph-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-meta { margin: 4px 0 0; font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary, #c6c6c6); }
.ph-meta b { color: var(--cds-text-primary); font-weight: 600; }
/* "data through" runs amber when the sync is 3+ days behind */
.ph-meta b.stale { color: var(--cds-support-warning, #f1c21b); cursor: help; }
.ph-mtd {
  display: inline-block; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 400; letter-spacing: .32px; line-height: 18px; vertical-align: 1px;
  background: #0043ce; color: #d0e2ff;    /* Carbon blue tag */
}
.ph-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}

/* month navigator: ‹ [select] › — ghost icon buttons + Carbon select */
.monthnav { display: flex; align-items: center; gap: 1px; }
.mnav {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--cds-icon-secondary, #c6c6c6);
  font-size: 16px; line-height: 1; text-decoration: none;
  transition: color .11s, background-color .11s;
}
.mnav:hover { background: var(--cds-layer-hover-01, #333333); color: var(--cds-icon-primary, #f4f4f4); text-decoration: none; }
.mnav.off { color: var(--cds-text-disabled); cursor: default; }
.mnav.off:hover { background: none; }
.month-select {
  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;
  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;
}
.month-select:hover { background-color: var(--cds-field-hover-01, #333333); }
.month-select:focus { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }

/* segmented control — Carbon content switcher (inverse selected) */
.seg {
  display: inline-flex; height: 32px;
  background: var(--cds-layer-01, #262626);
  border: 1px solid var(--cds-border-subtle-01, #393939);
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 14px;
  font-size: 14px; font-weight: 400; letter-spacing: .16px;
  color: var(--cds-text-secondary, #c6c6c6); white-space: nowrap;
  transition: color .11s, background-color .11s;
}
.seg-btn + .seg-btn { box-shadow: inset 1px 0 0 var(--cds-border-subtle-01, #393939); }
.seg-btn:hover { text-decoration: none; color: var(--cds-text-primary); background: var(--cds-layer-hover-01, #333333); }
.seg-btn.active, .seg-btn.active:hover {
  background: var(--cds-layer-selected-inverse, #f4f4f4);
  color: var(--cds-text-inverse, #161616);
  box-shadow: none;
}
.seg-btn.active + .seg-btn { box-shadow: none; }
/* business-line color keys ride as dots so the coding survives the
   high-contrast selected state */
.seg-btn.cat-core::before, .seg-btn.cat-digital::before, .seg-btn.cat-growth::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.seg-btn.cat-core::before    { background: var(--cat-core); }
.seg-btn.cat-digital::before { background: var(--cat-digital); }
.seg-btn.cat-growth::before  { background: var(--cat-growth); }
.seg-btn.cat-growth.active::before { background: #8a3ffc; }
.seg-btn.cat-digital.active::before { background: #0f62fe; }
.seg-btn.cat-core.active::before { background: #24a148; }

/* RDR toggle — Carbon toggle (sm) with inline state label */
.toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 32px;
  color: var(--cds-text-secondary, #c6c6c6); font-size: 12px; letter-spacing: .32px;
  cursor: pointer; transition: color .11s;
}
.toggle:hover { text-decoration: none; color: var(--cds-text-primary); }
.toggle .knob {
  width: 32px; height: 16px; border-radius: 999px; flex: none;
  background: var(--cds-toggle-off, #6f6f6f); position: relative;
  transition: background-color .11s;
}
.toggle .knob::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 10px; height: 10px; border-radius: 50%; background: #f4f4f4;
  transition: transform .11s;
}
.toggle.active { color: var(--cds-text-primary); }
.toggle.active .knob { background: var(--cds-support-success, #42be65); }
.toggle.active .knob::after { transform: translateX(16px); background: #ffffff; }

/* ── cards + sections — flat Carbon layer tiles ─────────────────── */
.card {
  background: var(--cds-layer-01, #262626);
  padding: 16px; margin-top: 16px;
}
/* analysis sections sit quieter — no layer fill */
.card.sub { background: transparent; padding: 16px 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0; }
h2 { font-size: 16px; line-height: 24px; }   /* Carbon heading-02 */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.sec-head h2 { line-height: 1.3; }
.card.sub .sec-head h2 { font-size: 14px; color: var(--cds-text-secondary); }
.sec-note { font-size: 12px; letter-spacing: .32px; color: var(--cds-text-helper); cursor: help; }
/* coverage/caveat line under a table — same voice as .sec-note but it
   carries its own text rather than a tooltip, so no help cursor */
.tbl-note { font-size: 12px; line-height: 1.45; letter-spacing: .32px;
            color: var(--cds-text-helper); margin: 10px 2px 0; max-width: 72ch; }

/* ── buttons — Carbon button set ────────────────────────────────── */
.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: border-color .11s, background-color .11s, color .11s;
}
.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); outline-offset: -2px; }
.btn.primary {
  background: #0f62fe; border-color: #0f62fe; color: #ffffff; font-weight: 400;
}
.btn.primary:hover { background: #0353e9; border-color: #0353e9; color: #ffffff; }
.btn.primary:active { background: #002d9c; }
/* ghost — Carbon's in-context action */
.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); }
/* Carbon sm button — same 32px control height, compact padding */
.btn.sm { height: 32px; padding: 0 12px; }
#syncBtn:disabled { color: var(--cds-support-success); cursor: default; }
#syncBtn:disabled { animation: pulse 1.4s infinite; }

/* text inputs — Carbon text input (field-01, bottom border) */
input[type="password"], input[type="search"], input[type="email"], input[type="text"] {
  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; padding: 0 16px; font-size: 14px; letter-spacing: .16px;
  font-family: inherit; color-scheme: dark;
  transition: background-color .11s;
}
input[type="password"]:hover, input[type="search"]:hover,
input[type="email"]:hover, input[type="text"]:hover {
  background: var(--cds-field-hover-01, #333333);
}
input[type="password"]:focus, input[type="search"]:focus,
input[type="email"]:focus, input[type="text"]:focus {
  outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px;
  background: var(--cds-field-01, #262626);
}
select.sel {
  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;
  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-01, #333333); }
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; }
input::placeholder { color: var(--cds-text-placeholder, rgba(244,244,244,.4)); }
/* Carbon layering: fields on a layer-01 card step up to field-02 */
.card input[type="password"], .card input[type="search"],
.card input[type="email"], .card input[type="text"], .card select.sel {
  background-color: var(--cds-field-02, #393939);
}
.card input[type="password"]:hover, .card input[type="search"]:hover,
.card input[type="email"]:hover, .card input[type="text"]:hover, .card select.sel:hover {
  background-color: var(--cds-field-hover-02, #474747);
}
.card input[type="password"]:focus, .card input[type="search"]:focus,
.card input[type="email"]:focus, .card input[type="text"]:focus {
  background-color: var(--cds-field-02, #393939);
}

/* ── login / invite ─────────────────────────────────────────────── */
.login-wrap { display: flex; justify-content: center; padding-top: 10vh; }
.login-card {
  width: 400px; max-width: 100%; margin-top: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px;
}
.login-head { margin-bottom: 4px; }
.login-card h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.login-card h1 span { font-weight: 400; }
.login-sub { margin: 4px 0 0; font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary); }
.login-card input { width: 100%; height: 40px; font-size: 14px; }
.login-card .btn.primary {
  width: 100%; height: 48px; font-size: 14px; margin-top: 8px;
  justify-content: flex-start;
}
/* inline error notification */
.login-card .error {
  margin: 0; padding: 10px 14px; font-size: 13px;
  color: var(--cds-text-primary); background: var(--cds-layer-02, #393939);
  border-left: 3px solid var(--cds-support-error, #fa4d56);
}
/* same notification, informational accent — session timeouts are
   routine, not a failure the user did something wrong to cause */
.login-card .notice {
  margin: 0; padding: 10px 14px; font-size: 13px;
  color: var(--cds-text-primary); background: var(--cds-layer-02, #393939);
  border-left: 3px solid var(--cds-support-info, #4589ff);
}
.invite-hint { margin: 0; font-size: 13px; color: var(--cds-text-secondary); }
.invite-hint b { color: var(--cds-text-primary); }

/* ── new-account banner — Carbon inline notification (warning) ──── */
.banner {
  display: grid; grid-template-columns: 20px 1fr; gap: 2px 12px;
  background: var(--cds-layer-01, #262626);
  border-left: 3px solid var(--cds-support-warning, #f1c21b);
  padding: 12px 16px; margin-top: 12px;
}
.banner::before {
  content: ""; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f1c21b' d='M16 2 30.6 28.5a1.6 1.6 0 0 1-1.4 2.4H2.8a1.6 1.6 0 0 1-1.4-2.4Z'/%3E%3Cpath fill='%23161616' d='M14.9 11h2.2v10h-2.2z'/%3E%3Ccircle fill='%23161616' cx='16' cy='25' r='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.banner-head { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--cds-text-primary); grid-column: 2; }
.banner-line { margin: 0; font-size: 13px; color: var(--cds-text-secondary); grid-column: 2; }
.banner-line b { color: var(--cds-text-primary); font-weight: 600; }

/* ── scorecard — one uniform row of Carbon stat tiles ───────────────
   Carbon tile hierarchy: label on top, big number under it (the markup
   stays value-then-label; column-reverse flips the paint order). The
   RDR tiles only render while the toggle reads "RDR excluded", and
   auto-fit re-flows the survivors to keep the row uniform. */
.kpi-row {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 16px;
}
.kpi-tile {
  display: flex; flex-direction: column-reverse; gap: 8px; min-width: 0;
  justify-content: flex-end;
  padding: 16px;
  background: var(--cds-layer-01, #262626);
}
.kpi-tile[title] { cursor: help; }
/* label row can carry a status tag on the right (company-ratio tile) —
   the big number below stays clean at every width */
.kpi-label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 0;
}
/* Carbon heading-05 scale for the number */
.kpi-value { font-size: 32px; font-weight: 400; line-height: 40px; letter-spacing: 0; white-space: nowrap; }
.kpi-value.kpi-zero { color: var(--cds-text-helper); }
.kpi-label {
  font-size: 12px; font-weight: 400; letter-spacing: .32px;
  color: var(--cds-text-secondary, #c6c6c6);
}
/* delta vs previous month — up = worse (red), down = better (green) */
.kpi-delta {
  font-size: 12px; letter-spacing: .32px; color: var(--cds-text-helper);
  font-variant-numeric: tabular-nums; cursor: help;
}
.kpi-delta.d-up { color: var(--cds-text-error, #ff8389); }
.kpi-delta.d-down { color: var(--cds-support-success, #42be65); }
td.d-up { color: var(--cds-text-error, #ff8389); }
td.d-down { color: var(--cds-support-success, #42be65); }

/* ── chart ──────────────────────────────────────────────────────── */
.chart-scroll { overflow-x: auto; margin: 0 -2px; }
.trend { width: 100%; height: auto; display: block; }
.gridline { stroke: var(--cds-border-subtle-01, #393939); stroke-width: 1; }
.threshline { stroke-width: 1; stroke-dasharray: 5 5; opacity: .55; }
.thresh-label { font-weight: 600; opacity: .95; }
.thresh-bg { fill: var(--cds-layer-01, #262626); stroke: none; }
.card.sub .thresh-bg { fill: var(--cds-background); }
.axis { fill: var(--cds-text-helper, #a8a8a8); font-size: 11px; letter-spacing: .32px; }
.line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.line.all { stroke-dasharray: 6 5; stroke-width: 1.5; opacity: .85; }
/* stacked daily-events bars (SVG rects — .bar is the HTML meter fill) */
.cbar { transform-box: fill-box; transform-origin: center bottom; }
/* dashboard segments link to their MID page */
svg.trend.seg-links .cbar { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s ease-out forwards; }
  .line.all { animation: none; stroke-dasharray: 6 5; stroke-dashoffset: 0; }
  .bar { transform-origin: left center; animation: growbar .45s cubic-bezier(.2, .7, .3, 1); }
  .cbar { animation: growbarY .45s cubic-bezier(.2, .7, .3, 1); }
}
/* re-renders (legend/mode toggles, resize) skip the draw-in animation */
svg.trend.no-anim .line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
svg.trend.no-anim .line.all { stroke-dasharray: 6 5; }
svg.trend.no-anim .cbar { animation: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes growbar { from { transform: scaleX(0); } }
@keyframes growbarY { from { transform: scaleY(0); } }
.focus-dot { fill: var(--cds-layer-01, #262626); stroke-width: 2; pointer-events: none; }
.hoverline { stroke: var(--cds-text-helper, #a8a8a8); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.chart-tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--cds-layer-02, #393939);
  padding: 8px 12px; font-size: 12px; letter-spacing: .32px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  max-width: 340px;
}
.tip-head {
  font-weight: 600; color: var(--cds-text-primary); padding-bottom: 5px; margin-bottom: 5px;
  border-bottom: 1px solid var(--cds-border-subtle-02, #525252);
}
.tip-rows { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.tip-name {
  display: flex; align-items: center; gap: 6px; color: var(--cds-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px;
}
.tip-val { color: var(--cds-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.tip-name.is-all, .tip-val.is-all { color: var(--cds-text-primary); font-weight: 600; }
.tip-note { grid-column: 1 / -1; color: var(--cds-text-helper); padding-top: 3px; }
.dotc { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dotc.dot-all { width: 12px; height: 0; border-radius: 0; border-top: 2px dashed var(--cds-text-secondary); }

/* ── legend — Carbon selectable-tag chips ───────────────────────── */
.legend-chips { margin-top: 12px; }
.lg-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
}
.lg-chips { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.lchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--cds-border-subtle-02, #525252);
  background: transparent; color: var(--cds-text-secondary);
  font-size: 12px; letter-spacing: .32px; cursor: pointer;
  font-family: inherit; max-width: 100%;
  transition: opacity .11s, border-color .11s, color .11s, background-color .11s;
}
.lchip .lname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
.lchip .n { color: var(--cds-text-helper); font-variant-numeric: tabular-nums; }
.lchip.off { opacity: .4; }
.lchip:hover { border-color: var(--cds-border-strong-01, #6f6f6f); color: var(--cds-text-primary); background: var(--cds-layer-hover-01, #333333); }
/* company line: distinct by weight + dashed swatch, not by size */
.lchip.all-chip { border-color: var(--cds-border-strong-01, #6f6f6f); font-weight: 600; color: var(--cds-text-primary); }
.lchip.all-chip .dotc {
  width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--cds-text-secondary);
}
.lg-ctl {
  margin-left: auto; height: 24px; padding: 0 11px; font-size: 12px; letter-spacing: .32px;
  border: none; background: transparent;
  color: var(--cds-link-primary, #78a9ff); cursor: pointer; font-family: inherit;
  transition: color .11s, background-color .11s;
}
.lg-ctl:hover { color: var(--cds-link-primary-hover); background: var(--cds-layer-hover-01, #333333); }
.lchip.more-chip { border-style: dashed; color: var(--cds-text-helper); background: transparent; }
.lchip.more-chip:hover { color: var(--cds-text-primary); }

/* ── status pills / tags — Carbon tag palette (g100) ────────────── */
.pill {
  display: inline-block; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 400; letter-spacing: .32px; line-height: 18px;
  white-space: nowrap;
}
.pill.ok { background: #0e6027; color: #a7f0ba; }          /* green tag */
.pill.pend { background: #684e00; color: #fddc69; }        /* yellow tag */
.pill.warn-o { background: #8a3800; color: #ffd9be; }      /* orange tag */
/* red caps is reserved for EXCESSIVE — both Visa conditions met */
.pill.bad { background: #a2191f; color: #ffd7d9; font-weight: 600; }
.pill.muted-pill { background: var(--cds-layer-02, #393939); color: var(--cds-text-secondary, #c6c6c6); }
.tag {
  display: inline-block; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 400; letter-spacing: .32px; line-height: 18px;
  white-space: nowrap;
}
.tag.cat-tag { text-decoration: none; }
.tag.cat-tag:hover { text-decoration: none; filter: brightness(1.25); }
.tag.cat-core    { background: #0e6027; color: #a7f0ba; }  /* green */
.tag.cat-digital { background: #0043ce; color: #d0e2ff; }  /* blue */
.tag.cat-growth  { background: #6929c4; color: #e8daff; }  /* purple */
.tag.type-tc40    { background: #a2191f; color: #ffd7d9; } /* red */
.tag.type-cb      { background: #0043ce; color: #d0e2ff; } /* blue */
.tag.type-cbfraud { background: var(--cds-layer-02, #393939); color: var(--cds-text-secondary); }
.tag.type-won     { background: #0e6027; color: #a7f0ba; }
.tag.type-lost    { background: #684e00; color: #fddc69; }

/* ── tables — Carbon data table (compact) ───────────────────────── */
.tbl-tools {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  flex-wrap: wrap; min-height: 32px;
}
.tbl-tools input[type="search"] { width: 288px; max-width: 100%; }
/* quick row-flag filters — Carbon selectable tags */
.chip-filter {
  height: 24px; padding: 0 12px; border: 1px solid var(--cds-border-strong-01, #6f6f6f);
  border-radius: 999px;
  background: transparent; color: var(--cds-text-primary); font-size: 12px; letter-spacing: .32px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: color .11s, border-color .11s, background-color .11s;
}
.chip-filter:hover { background: var(--cds-layer-hover-01, #333333); }
.chip-filter.active {
  background: var(--cds-layer-selected-inverse, #f4f4f4);
  border-color: var(--cds-layer-selected-inverse, #f4f4f4);
  color: var(--cds-text-inverse, #161616);
}
/* Tables run full length and the page does the scrolling — the header
   pins under the topbar instead of inside a nested scrollport. A wrap
   that scrolls sideways can't do that (an overflow box becomes the
   scrollport), so app.js measures each table and adds .x-fits when it
   doesn't need the sideways scroll, which is the desktop case. The
   overflow default stays on so a pre-JS or no-JS render still can't
   push the page sideways. */
.tbl-wrap { overflow-x: auto; }
.tbl-wrap.x-fits { overflow: visible; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-wrap .tbl { min-width: 900px; }
/* Carbon table header: layer-accent fill, semibold, sentence case */
.tbl th {
  position: sticky; top: var(--topbar-h); z-index: 2;
  background: var(--cds-layer-accent-01, #393939);
  text-align: left; color: var(--cds-text-primary); font-weight: 600;
  font-size: 13px; letter-spacing: .16px;
  padding: 8px 12px; white-space: nowrap;
}
.card.sub .tbl th { background: var(--cds-layer-01, #262626); }
.tbl td {
  padding: 7px 12px; border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
  vertical-align: middle; transition: background-color .11s;
}
.card.sub .tbl td { border-bottom-color: var(--cds-border-subtle-00, #393939); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--cds-layer-hover-01, #333333); }
.card.sub .tbl tbody tr:hover td { background: var(--cds-layer-01, #262626); }
th.num { text-align: right; }
th[title] { cursor: help; }
.agent-link { font-weight: 400; color: var(--cds-link-primary, #78a9ff); }
.agent-link:hover { color: var(--cds-link-primary-hover, #a6c8ff); }
/* 11px at full opacity keeps the rank readable (WCAG AA) — 10px at .7
   opacity sat around 3.4:1 on the layer background */
.rank { width: 24px; font-size: 11px; text-align: right; color: var(--cds-text-secondary, #c6c6c6); }
.pivot tbody tr { cursor: pointer; }
.pivot.static-rows tbody tr { cursor: default; }
/* country/descriptor rows that filter the events list on click */
.pivot.static-rows tbody tr.drill { cursor: pointer; }
/* dashboard country rows that set the issuer-country filter on click */
.pivot.static-rows tbody tr.pick { cursor: pointer; }
#eventsSec { scroll-margin-top: calc(var(--topbar-h) + 8px); }
.tbl td.stmt { max-width: 300px; overflow-wrap: anywhere; line-height: 1.4; }
.tbl td.reason { max-width: 340px; overflow-wrap: anywhere; line-height: 1.4; }
.psp {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--cds-text-secondary);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flags { display: flex; gap: 4px; flex-wrap: wrap; }
.ctry-flag { font-size: 14px; line-height: 1; margin-right: 7px; }

/* ── issuer-country filter ───────────────────────────────────────────
   The chip (toolbar) is a Carbon dismissible filter tag — high-contrast
   inverse so an active filter can't be missed; its whole surface is the
   remove link. The countries pivot doubles as the picker: while a
   country is selected the other rows dim but stay clickable (hover
   lifts them back up) so switching countries is one click. */
.ctry-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 6px 0 10px; border-radius: 999px;
  background: var(--cds-layer-selected-inverse, #f4f4f4);
  color: var(--cds-text-inverse, #161616);
  font-size: 12px; font-weight: 600; letter-spacing: .32px; white-space: nowrap;
}
.ctry-chip:hover { text-decoration: none; color: var(--cds-text-inverse, #161616); }
.ctry-chip .ctry-flag { margin-right: 0; }
.ctry-chip .chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 400;
  transition: background-color .11s;
}
.ctry-chip:hover .chip-x { background: rgba(22, 22, 22, .16); }
.ctry-hint { font-size: 12px; color: var(--cds-text-secondary, #c6c6c6); letter-spacing: .32px; }
tr.ctry-dim > td { opacity: .35; transition: opacity .11s; }
tr.ctry-dim:hover > td { opacity: .8; }
tr.ctry-sel > td.rank { box-shadow: inset 3px 0 0 var(--cds-interactive, #4589ff); }
.crumb { margin: 0 0 8px; font-size: 14px; letter-spacing: .16px; }  /* Carbon breadcrumb scale */

/* 3px severity stripe on the row's leading edge — status at a glance
   even before the Status column */
.pivot td.rank { box-shadow: inset 3px 0 0 transparent; }
tr.r-excessive > td.rank { box-shadow: inset 3px 0 0 var(--cds-support-error, #fa4d56); }
tr.r-over_ratio > td.rank, tr.r-over_count > td.rank { box-shadow: inset 3px 0 0 var(--cds-support-caution-major, #ff832b); }
tr.r-ok > td.rank { box-shadow: inset 3px 0 0 rgba(66, 190, 101, .45); }
tr.r-na > td.rank { box-shadow: inset 3px 0 0 var(--cds-border-subtle-02, #525252); }

/* collapsed long-tail rows (issuer countries) */
section:not(.rows-open):not(.is-filtering) tr.row-extra { display: none; }
.rows-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  height: 24px; padding: 0 11px; border: none;
  background: transparent; color: var(--cds-link-primary, #78a9ff);
  font-size: 12px; letter-spacing: .32px; cursor: pointer;
  font-family: inherit;
  transition: color .11s, background-color .11s;
}
.rows-toggle:hover { color: var(--cds-link-primary-hover); background: var(--cds-layer-hover-01, #333333); }

/* The MID column stays pinned while the pivot scrolls horizontally.
   Its edge shadow only appears once the table is actually scrolled
   sideways (app.js flags the wrap) — otherwise it reads as a stray
   rule down the middle of a table that fits. */
.pivot th:nth-child(2), .pivot td:nth-child(2) {
  position: sticky; left: 0; background: var(--cds-layer-01, #262626);
}
.pivot th:nth-child(2) { z-index: 3; background: var(--cds-layer-accent-01, #393939); }
.pivot td:nth-child(2) { z-index: 1; }
.scrolled-x .pivot td:nth-child(2) { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .65); }
.scrolled-x .pivot th:nth-child(2) { box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .65); }
/* tables whose second column isn't an identity (the events list, where
   it would pin "Type" while Date scrolls away) opt out of the pin */
.pivot.no-pin th:nth-child(2), .pivot.no-pin td:nth-child(2) {
  position: static; box-shadow: none !important;
}
/* Nothing to pin sideways when the table already fits — and left-sticky
   against the viewport would be a live tripwire if the page ever did
   scroll horizontally. Drop only the horizontal offset: clearing
   `position` here would also un-stick this one header cell vertically
   and leave it scrolling away while its ten neighbours pinned. */
.tbl-wrap.x-fits .pivot th:nth-child(2),
.tbl-wrap.x-fits .pivot td:nth-child(2) { left: auto; }
.card.sub .pivot th:nth-child(2) { background: var(--cds-layer-01, #262626); }
.card.sub .pivot td:nth-child(2) { background: var(--cds-background, #161616); }
.pivot tbody tr:hover td:nth-child(2) { background: var(--cds-layer-hover-01, #333333); }
.card.sub .pivot tbody tr:hover td:nth-child(2) { background: var(--cds-layer-01, #262626); }
/* selected issuer-country row — after the pinned-column rules so the
   highlight also covers the sticky country cell */
tr.ctry-sel > td,
.card.sub .pivot tbody tr.ctry-sel td:nth-child(2) { background: var(--cds-layer-selected-01, #393939); }
.card.sub .pivot tbody tr.ctry-sel:hover td:nth-child(2) { background: var(--cds-layer-selected-hover-01, #474747); }
.pivot tbody tr.ctry-sel:hover td { background: var(--cds-layer-selected-hover-01, #474747); }

/* sortable headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { content: "↕"; margin-left: 5px; color: var(--cds-text-helper); opacity: .5; font-size: 9px; }
th.sortable:hover { background: var(--cds-layer-accent-hover-01, #474747); }
.card.sub th.sortable:hover { background: var(--cds-layer-hover-01, #333333); }
th.sortable:hover::after { opacity: 1; }
th.sortable.sort-desc::after { content: "↓"; color: var(--cds-interactive, #4589ff); opacity: 1; font-size: 10px; }
th.sortable.sort-asc::after  { content: "↑"; color: var(--cds-interactive, #4589ff); opacity: 1; font-size: 10px; }

/* ── bars + dual threshold meter ────────────────────────────────── */
.barcell { width: 16%; min-width: 148px; vertical-align: middle; }
/* min-height keeps the empty track visible — a zero value renders no
   .bar child at all (see _macros.html), and the track alone reads as
   "zero" without the old 2px min-width sliver */
.bar-track { background: var(--cds-layer-accent-01, #393939); overflow: hidden; min-height: 6px; }
.card.sub .bar-track { background: var(--cds-layer-01, #262626); }
.bar {
  height: 6px; min-width: 2px;
  background: var(--cds-support-success, #42be65);
}
.bar.subtle { background: rgba(69, 137, 255, .55); }
/* dual threshold meter: a FULL bar = at Visa's limit (see _macros.html) */
.meter2 {
  display: grid; grid-template-columns: 38px 1fr;
  gap: 4px 8px; align-items: center; cursor: help;
}
.meter2 .mlabel { font-size: 10px; letter-spacing: .32px; line-height: 1; color: var(--cds-text-helper); text-align: right; }
.meter2 .bar { height: 6px; }
.bar-track.meter { position: relative; overflow: visible; }
.bar-track.meter > .bar { position: relative; z-index: 1; }
.bar.bad  { background: var(--cds-support-error, #fa4d56); }
.bar.lowvol { background: var(--cds-border-strong-01, #6f6f6f); }
.bar.cnt  { background: rgba(69, 137, 255, .55); }
.bar.over { background: var(--cds-support-caution-major, #ff832b); }
/* excessive line = the red end cap; count floor = the orange one */
.meter .limit {
  position: absolute; top: -2px; bottom: -2px; right: 0; width: 3px; z-index: 2;
  background: rgba(250, 77, 86, .65);
}
.meter .limit.cnt { background: rgba(255, 131, 43, .55); }

/* ── notes / footnotes ──────────────────────────────────────────── */
.note { margin-top: 16px; font-size: 12px; letter-spacing: .32px; }
.note > summary {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  height: 24px; padding: 0 11px;
  color: var(--cds-link-primary, #78a9ff); cursor: pointer; list-style: none;
  transition: color .11s, background-color .11s;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::after { content: "▾"; font-size: 9px; transition: transform .11s; }
.note[open] > summary::after { transform: rotate(180deg); }
.note > summary:hover { color: var(--cds-link-primary-hover); background: var(--cds-layer-hover-01, #333333); }
.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);
}
.card.sub .note-body { background: var(--cds-layer-01, #262626); }
.note-body p { margin: 0 0 8px; }
.note-body p:last-child { margin-bottom: 0; }
.note-body b { color: var(--cds-text-primary); }
.hint { margin: 12px 0 0; font-size: 12px; letter-spacing: .32px; color: var(--cds-text-helper); }
.inline-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-02, #393939);
  cursor: help;
}
.card.sub .inline-note { background: var(--cds-layer-01, #262626); }
.empty {
  margin: 0; padding: 12px 16px; font-size: 13px; color: var(--cds-text-helper);
  background: var(--cds-layer-02, #393939);
}
.card.sub .empty { background: var(--cds-layer-01, #262626); }

/* ── MID mapping (config) ───────────────────────────────────────── */
.cfg-stats {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
}
.cfg-stats .stat { font-size: 12px; letter-spacing: .32px; color: var(--cds-text-helper); white-space: nowrap; }
.cfg-stats .stat b {
  font-size: 16px; font-weight: 600; color: var(--cds-text-primary); margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.cfg-stats .stat-warn b { color: var(--cds-support-warning, #f1c21b); }
.cfg-stats .stat-core b { color: var(--cat-core); }
.cfg-stats .stat-digital b { color: var(--cat-digital); }
.cfg-stats .stat-growth b { color: var(--cat-growth); }
.cfg-stats .stat-sep { width: 1px; height: 16px; background: var(--cds-border-subtle-02, #525252); align-self: center; }
.cfg-tools {
  position: sticky; top: var(--topbar-h); z-index: 5;
  background: var(--cds-layer-01, #262626); padding: 12px 0;
  margin-top: -12px;
  border-bottom: 1px solid var(--cds-border-subtle-01, #393939);
}
/* the mapping table's header pins below the sticky tools row, not under
   it — app.js keeps --cfg-tools-h in step with the row's real height */
.config-tbl th { top: calc(var(--topbar-h) + var(--cfg-tools-h, 57px)); }
.cfg-tools .spacer { margin-left: auto; }
.savedmsg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; letter-spacing: .32px; color: var(--cds-support-success); white-space: nowrap;
}
.savedmsg::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; font-size: 10px;
  background: #0e6027; color: #a7f0ba;
}
.config-tbl td { height: 42px; }
.config-tbl td.midcell { overflow-wrap: anywhere; }
/* the Adyen display name, when it isn't just the MID again */
.acct-name { font-size: 12px; letter-spacing: .32px; margin-left: 2px; }
.config-tbl tr.row-unassigned td:first-child { box-shadow: inset 3px 0 0 var(--cds-support-warning, #f1c21b); }
/* per-row segmented assignment — real radios styled as a content
   switcher (inverse selected, like the business-line switcher) */
.assign-cell { width: 1%; }
.assign-seg {
  display: inline-flex;
  background: var(--cds-field-02, #393939);
}
.as-btn { position: relative; display: inline-flex; }
.as-btn input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.as-btn span {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  font-size: 12px; letter-spacing: .32px; color: var(--cds-text-secondary); white-space: nowrap;
  pointer-events: none;
  transition: color .11s, background-color .11s;
}
.as-btn + .as-btn span { box-shadow: inset 1px 0 0 var(--cds-border-subtle-02, #525252); }
.as-btn:hover span { color: var(--cds-text-primary); background: var(--cds-field-hover-02, #474747); }
/* Selected-segment paint. :has() covers modern browsers before script
   runs; the .is-picked twin (set by app.js) keeps browsers without
   :has() in step. Separate rules on purpose — one selector list would
   be thrown out whole where :has() is unknown. Selected = inverse,
   with the business line carried by tag-colored text. */
.as-btn.as-core:has(input:checked) span    { background: var(--cds-layer-selected-inverse, #f4f4f4); color: #0e6027; font-weight: 600; box-shadow: none; }
.as-btn.as-core.is-picked span             { background: var(--cds-layer-selected-inverse, #f4f4f4); color: #0e6027; font-weight: 600; box-shadow: none; }
.as-btn.as-digital:has(input:checked) span { background: var(--cds-layer-selected-inverse, #f4f4f4); color: #0043ce; font-weight: 600; box-shadow: none; }
.as-btn.as-digital.is-picked span          { background: var(--cds-layer-selected-inverse, #f4f4f4); color: #0043ce; font-weight: 600; box-shadow: none; }
.as-btn.as-growth:has(input:checked) span  { background: var(--cds-layer-selected-inverse, #f4f4f4); color: #6929c4; font-weight: 600; box-shadow: none; }
.as-btn.as-growth.is-picked span           { background: var(--cds-layer-selected-inverse, #f4f4f4); color: #6929c4; font-weight: 600; box-shadow: none; }
/* "Unassigned" checked is the resting state for 50+ rows — paint it
   neutrally and let the row's amber edge carry the "needs attention" */
.as-btn.as-none:has(input:checked) span    { background: var(--cds-layer-selected-02, #525252); color: var(--cds-text-primary); box-shadow: none; }
.as-btn.as-none.is-picked span             { background: var(--cds-layer-selected-02, #525252); color: var(--cds-text-primary); box-shadow: none; }
.as-btn:has(input:focus-visible) span { outline: 2px solid var(--cds-focus, #fff); outline-offset: -2px; }
.cfg-foot { margin-top: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

/* ── users ──────────────────────────────────────────────────────── */
.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 { height: 32px; }
.users-add input[type="email"] { width: 224px; }
.users-add input[type="text"] { width: 160px; }
.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;
}
/* Carbon checkbox — 16px, white border, white fill with dark check */
.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; }
.catpick.off { opacity: .35; }
.catpick.off label { cursor: default; }
.users-tbl td { height: 46px; }
.rolescope { min-width: 300px; }
.rolescope .catpick { margin-left: 12px; }
.users-actions { text-align: right; }
.users-actions .btn + .btn { margin-left: 4px; }
/* danger ghost — Carbon's destructive in-context action */
.btn.danger { color: var(--cds-text-error, #ff8389); }
.btn.danger:hover {
  background: var(--cds-support-error-inverse, #da1e28); color: #ffffff;
}
.flash {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 14px; font-size: 13px;
  background: var(--cds-layer-01, #262626);
  border-left: 3px solid var(--cds-support-success, #42be65);
  color: var(--cds-text-primary);
}
.flash::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; font-size: 10px; flex: none;
  background: #0e6027; color: #a7f0ba;
}
.flash.err {
  border-left-color: var(--cds-support-error, #fa4d56);
}
.flash.err::before {
  content: "!"; background: #a2191f; color: #ffd7d9;
}
.flash-msg { flex: 1 1 auto; min-width: 0; }
a.lastlogin:hover { color: var(--cds-text-primary); text-decoration: none; }
.tbl td.agent {
  max-width: 420px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--cds-text-helper); font-size: 12px; letter-spacing: .32px;
}

/* ── responsive ─────────────────────────────────────────────────── */
/* Carbon sm range (below the md breakpoint at 672px) — phone layout */
@media (max-width: 671px) {
  main { padding: 12px 12px 48px; }
  /* single-row Carbon shell: burger + brand left, sync status right;
     the nav links live in the slide-out panel. One 48px row, so the
     header can stay sticky even on short viewports. */
  .topbar-inner { padding: 0 12px; }
  .nav-burger {
    display: flex; align-items: center; justify-content: center;
    order: -1; width: 48px; height: 48px; margin-left: -12px; flex: none;
    border: none; background: none; cursor: pointer; padding: 0;
  }
  .nav-burger:hover { background: var(--cds-layer-hover-01, #333333); }
  .nav-burger:active { background: var(--cds-layer-active-01, #525252); }
  .topnav, .topbar-right > form.logout-form { display: none; }
  .topbar-inner { justify-content: flex-start; }
  .topbar-right { margin-left: auto; }
  .mobile-nav { display: flex; }
  .mobile-nav-scrim { display: block; }
  .sync-panel { max-width: calc(100vw - 16px); }
  .ph-controls { gap: 8px; }
  .ph-controls > .monthnav { flex: 1 1 100%; }
  .monthnav .month-select { flex: 1; }
  /* 40px touch targets for the page controls (Carbon mobile sizing) */
  .mnav { width: 40px; height: 40px; }
  .month-select, .seg, .toggle, select.sel,
  input[type="search"], input[type="email"],
  input[type="text"], input[type="password"] { height: 40px; }
  .btn.primary { height: 40px; }
  /* 16px input text — anything smaller makes iOS Safari zoom on focus */
  .month-select, select.sel,
  input[type="search"], input[type="email"],
  input[type="text"], input[type="password"] { font-size: 16px; }
  /* interactive chips grow to a comfortable tap size */
  .lchip { height: 32px; padding: 0 12px; }
  .chip-filter, .lg-ctl, .rows-toggle, .note > summary { height: 32px; }
  .kpi-row { gap: 1px; }
  .kpi-tile { padding: 12px 16px; }
  .card { padding: 12px; }
  .rolescope { min-width: 0; }
  /* the topbar wraps to two rows here — a stack of sticky bars would eat
     the viewport, so the tools row and table headers scroll away
     normally (both pages keep a second Save button at the foot) */
  .cfg-tools { position: static; }
  .tbl th, .config-tbl th { position: static; }
  /* the pinned MID header outranks the static rule above — keep its
     horizontal pin for the side-scrolling table but drop the vertical
     one, or it floats alone mid-table once the row scrolls away */
  .pivot th:nth-child(2) { top: auto; }
}
@media (max-width: 430px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: 24px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; }
  .seg-btn { padding: 0 10px; }
  .tbl-tools input[type="search"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ── print / save-as-PDF ────────────────────────────────────────────
   The Save PDF button just calls window.print(); these rules make the
   browser's own "Save as PDF" come out as a clean dark snapshot.
   Landscape because the pivot tables run ~850px wide; margin 0 so the
   dark background bleeds to the page edge (main carries the padding
   instead — printers only clip inside their hardware margin, and a
   saved PDF has none). */
.print-only { display: none; }
@page { size: landscape; margin: 0; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: var(--cds-background, #161616); }
  .print-only { display: revert; }
  .print-omit { display: none !important; }
  /* interactive chrome has no meaning on paper — the page-head's meta
     line restates the month / business line / RDR state and prints */
  .loadbar, .topbar-right, .ph-controls, .tbl-tools, .crumb,
  .lg-ctl, .lchip.more-chip, .hint, .note, .inline-note,
  .users-add, .users-actions, .flash, [data-copy-path],
  .chart-tip, .hoverline, .focus-dot, .banner { display: none !important; }
  /* the PDF carries the full data — no collapsed country rows */
  tr.row-extra { display: table-row !important; }
  /* Chromium's print viewport can land under the responsive
     breakpoints — pin the desktop layout back for paper */
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .topbar {
    position: static; border-bottom: 0; background: var(--cds-background, #161616);
  }
  .topbar-inner { max-width: none; height: auto; padding: 9mm 10mm 0; }
  .print-url { margin-left: auto; font-size: 11px; color: var(--cds-text-helper); align-self: center; }
  main { max-width: none; padding: 0 10mm 9mm; }
  .print-note { margin: 16px 0 0; font-size: 12px; color: var(--cds-text-helper); }
  /* pagination: keep the small cards and rows whole, let tables run
     across pages with their header row repeating (table-header-group) */
  .kpi-row, .chart-scroll, .legend-chips { break-inside: avoid; }
  tr, .kpi-tile { break-inside: avoid; }
  /* sticky was for scrolling — static on paper, and the page must not
     clip a nested scrollport */
  .tbl th { position: static; }
  .pivot th:nth-child(2), .pivot td:nth-child(2) { position: static; }
  .tbl-wrap, .chart-scroll { overflow: visible; }
  .tbl-wrap .tbl { min-width: 0; }
  a { text-decoration: none !important; }
}

/* ── Refresh toast (background sync finished with unsaved work) ────── */
.refresh-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  background: var(--cds-layer-02, #393939);
  border: 1px solid var(--cds-border-subtle-02, #525252);
  border-left: 3px solid var(--cds-support-info, #4589ff);
  color: var(--cds-text-primary, #f4f4f4);
  padding: 10px 12px; font-size: .8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.refresh-toast .rt-btn {
  background: var(--cds-interactive, #4589ff); color: #fff; border: 0;
  padding: 5px 12px; font-size: .75rem; cursor: pointer;
}
.refresh-toast .rt-btn:hover { filter: brightness(1.12); }
.refresh-toast .rt-x {
  background: none; border: 0; color: var(--cds-text-secondary, #c6c6c6);
  cursor: pointer; font-size: .8rem; padding: 2px 4px;
}
.refresh-toast .rt-x:hover { color: var(--cds-text-primary, #f4f4f4); }

/* tap-to-show title popover (touch devices — see initTouchTitles) */
.title-pop {
  position: fixed; z-index: 70;
  max-width: min(320px, calc(100vw - 16px));
  background: var(--cds-layer-02, #393939);
  color: var(--cds-text-secondary, #c6c6c6);
  padding: 8px 12px; font-size: 12px; letter-spacing: .32px; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* MTD-ratio mode disabled while country ratios are withheld */
.seg-btn.mode-off, .seg-btn.mode-off:hover {
  opacity: .4; cursor: not-allowed;
  background: none; color: var(--cds-text-secondary, #c6c6c6);
}

/* ── Fraud Tracker additions ──────────────────────────────────────── */
/* single-row fraud meter: a FULL bar = the high line (red cap); the
   warn cap marks the elevated line partway along (see _macros.html) */
.meter1 {
  display: grid; grid-template-columns: 1fr; align-items: center; cursor: help;
  min-width: 110px;
}
.meter1 .bar { height: 6px; }
.meter .limit.warn { right: auto; background: rgba(255, 131, 43, .55); }
.pill.warn-y { background: rgba(241, 194, 27, .18); color: var(--cds-support-warning, #f1c21b); }
.kpi-value.v-warn { color: var(--cds-support-caution-major, #ff832b); }
.src-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  font-size: 12px; color: var(--cds-text-secondary, #c6c6c6); text-decoration: none;
  border: 1px solid var(--cds-border-subtle-01, #393939); border-radius: 0;
}
.src-pill:hover { background: var(--cds-layer-hover-01, #333); color: var(--cds-text-primary, #f4f4f4); }
.src-pill b { font-weight: 500; color: var(--cds-text-primary, #f4f4f4); }
.src-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cds-support-success, #42be65); }
.src-pill.stale .dot { background: var(--cds-support-caution-major, #ff832b); }
.ctry-name { color: var(--cds-text-secondary, #c6c6c6); font-weight: 400; margin-left: 6px; }

/* three narrow breakdown tables side by side (country page) */
.split3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.split3 .tbl-wrap .tbl { min-width: 0; }
@media (max-width: 900px) { .split3 { grid-template-columns: 1fr; } }
/* row stripes for the fraud-rate ladder (high / elevated / low volume) */
tr.r-high > td.rank { box-shadow: inset 3px 0 0 var(--cds-support-error, #fa4d56); }
tr.r-elevated > td.rank { box-shadow: inset 3px 0 0 var(--cds-support-caution-major, #ff832b); }
tr.r-lowvol > td.rank { box-shadow: inset 3px 0 0 var(--cds-border-subtle-02, #525252); }
/* no-pin tables keep their header row vertically sticky — only the
   horizontal pin of column 2 is dropped (position:static on the th
   would scroll that one header away from its neighbours) */
.pivot.no-pin th:nth-child(2) { position: sticky; left: auto; }
/* one-line cells with a tooltip for the full text (notifications list) */
.tbl td.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
/* the three short breakdown tables: no sticky headers, no pinned column,
   no horizontal scroll container (sticky inside a narrow overflow box
   floats the headers off their rows) */
.split3 .tbl-wrap { overflow: visible; }
.split3 .tbl th, .split3 .tbl td { position: static !important; box-shadow: none !important; }