/* FMCG Gurus style guide. Generated: edit packages/tokens and packages/css/src instead. */
/* Inter for the interface, Fraunces for page-level statements. Kept in its own file because @import must come first. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

:root {
  --fmcg-color-navy: #1B3A6B;
  --fmcg-color-navy-deep: #142C52;
  --fmcg-color-cyan: #29A8E0;
  --fmcg-color-cyan-ink: #0C5A8C;
  --fmcg-color-cyan-link: #0A6FA3;
  --fmcg-color-cyan-soft: #EEF7FD;
  --fmcg-color-cyan-line: #A9D6F0;
  --fmcg-color-teal: #00A39C;
  --fmcg-color-teal-ink: #0B6B66;
  --fmcg-color-teal-soft: #F4FCFB;
  --fmcg-color-teal-chip: #E8F7F6;
  --fmcg-color-teal-line: #C9ECEA;
  --fmcg-color-ink: #1A1F30;
  --fmcg-color-ink-secondary: #4A5268;
  --fmcg-color-ink-faint: #8A93A8;
  --fmcg-color-canvas: #F7F8FA;
  --fmcg-color-surface: #FFFFFF;
  --fmcg-color-surface-soft: #FAFBFD;
  --fmcg-color-line: #EBEEF3;
  --fmcg-color-line-strong: #D9DFE9;
  --fmcg-color-locked: #F2F3F5;
  --fmcg-color-success: #17703C;
  --fmcg-color-success-soft: #E6F6EC;
  --fmcg-color-success-muted: #5FAE7E;
  --fmcg-color-warning: #8A6D1D;
  --fmcg-color-warning-soft: #FDF6E3;
  --fmcg-color-warning-line: #F2E3B3;
  --fmcg-color-danger: #9B2C2C;
  --fmcg-color-danger-strong: #7A2222;
  --fmcg-color-danger-soft: #FBEDED;
  --fmcg-color-danger-muted: #D98E8E;
  --fmcg-color-bar-muted: #8FB4D9;
  --fmcg-color-bar-total: #3D5C8F;
  --fmcg-color-band-mid: #3D6FA8;
  --fmcg-color-band-light: #9DBBD9;
  --fmcg-color-scale-neutral: #D7DCE5;
  --fmcg-color-track: #F3F5F8;
  --fmcg-color-bg: var(--fmcg-color-canvas);
  --fmcg-color-bg-raised: var(--fmcg-color-surface);
  --fmcg-color-bg-hover: var(--fmcg-color-surface-soft);
  --fmcg-color-bg-locked: var(--fmcg-color-locked);
  --fmcg-color-bg-inverse: var(--fmcg-color-navy);
  --fmcg-color-bg-inverse-raised: rgba(255, 255, 255, 0.14);
  --fmcg-color-text: var(--fmcg-color-ink);
  --fmcg-color-text-muted: var(--fmcg-color-ink-secondary);
  --fmcg-color-text-subtle: var(--fmcg-color-ink-faint);
  --fmcg-color-text-on-accent: #FFFFFF;
  --fmcg-color-text-inverse: #FFFFFF;
  --fmcg-color-text-inverse-muted: rgba(255, 255, 255, 0.72);
  --fmcg-color-text-on-selected: var(--fmcg-color-navy-deep);
  --fmcg-color-heading: var(--fmcg-color-navy);
  --fmcg-color-border: var(--fmcg-color-line);
  --fmcg-color-border-strong: var(--fmcg-color-line-strong);
  --fmcg-color-accent: var(--fmcg-color-navy);
  --fmcg-color-accent-hover: var(--fmcg-color-navy-deep);
  --fmcg-color-accent-soft: var(--fmcg-color-cyan-soft);
  --fmcg-color-accent-line: var(--fmcg-color-cyan-line);
  --fmcg-color-accent-ink: var(--fmcg-color-cyan-ink);
  --fmcg-color-link: var(--fmcg-color-cyan-link);
  --fmcg-color-focus: var(--fmcg-color-cyan);
  --fmcg-color-selected: var(--fmcg-color-cyan);
  --fmcg-color-overlay: rgba(15, 25, 50, 0.18);
  --fmcg-color-positive: var(--fmcg-color-success);
  --fmcg-color-positive-soft: var(--fmcg-color-success-soft);
  --fmcg-color-negative: var(--fmcg-color-danger);
  --fmcg-color-negative-strong: var(--fmcg-color-danger-strong);
  --fmcg-color-negative-soft: var(--fmcg-color-danger-soft);
  --fmcg-color-caution: var(--fmcg-color-warning);
  --fmcg-color-caution-soft: var(--fmcg-color-warning-soft);
  --fmcg-color-caution-line: var(--fmcg-color-warning-line);
  --fmcg-color-info: var(--fmcg-color-cyan-ink);
  --fmcg-color-info-soft: var(--fmcg-color-cyan-soft);
  --fmcg-color-sensia: var(--fmcg-color-teal);
  --fmcg-color-sensia-text: var(--fmcg-color-teal-ink);
  --fmcg-color-sensia-soft: var(--fmcg-color-teal-soft);
  --fmcg-color-sensia-chip: var(--fmcg-color-teal-chip);
  --fmcg-color-sensia-border: var(--fmcg-color-teal-line);
  --fmcg-color-chart-primary: var(--fmcg-color-navy);
  --fmcg-color-chart-highlight: var(--fmcg-color-cyan);
  --fmcg-color-chart-on-highlight: var(--fmcg-color-navy-deep);
  --fmcg-color-chart-muted: var(--fmcg-color-bar-muted);
  --fmcg-color-chart-total: var(--fmcg-color-bar-total);
  --fmcg-color-chart-track: var(--fmcg-color-track);
  --fmcg-color-chart-series-1: var(--fmcg-color-navy);
  --fmcg-color-chart-series-2: var(--fmcg-color-band-mid);
  --fmcg-color-chart-series-3: var(--fmcg-color-band-light);
  --fmcg-color-chart-scale-1: var(--fmcg-color-success);
  --fmcg-color-chart-scale-2: var(--fmcg-color-success-muted);
  --fmcg-color-chart-scale-3: var(--fmcg-color-scale-neutral);
  --fmcg-color-chart-scale-4: var(--fmcg-color-danger-muted);
  --fmcg-color-chart-scale-5: var(--fmcg-color-danger);
  --fmcg-color-heat-low: var(--fmcg-color-danger-soft);
  --fmcg-color-heat-mid: var(--fmcg-color-warning-soft);
  --fmcg-color-heat-high: var(--fmcg-color-success-soft);
  --fmcg-font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fmcg-font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fmcg-font-family-display: "Fraunces", Georgia, serif;
  --fmcg-font-family-mono: ui-monospace, Consolas, monospace;
  --fmcg-font-size-xs: 0.75rem;
  --fmcg-font-size-sm: 0.875rem;
  --fmcg-font-size-md: 1rem;
  --fmcg-font-size-lg: 1.125rem;
  --fmcg-font-size-xl: 1.5rem;
  --fmcg-font-size-2xl: 1.875rem;
  --fmcg-font-size-3xl: 2.125rem;
  --fmcg-font-line-height: 1.6;
  --fmcg-space-1: 0.25rem;
  --fmcg-space-2: 0.5rem;
  --fmcg-space-3: 0.75rem;
  --fmcg-space-4: 1rem;
  --fmcg-space-5: 1.5rem;
  --fmcg-space-6: 2rem;
  --fmcg-space-8: 3rem;
  --fmcg-radius-sm: 6px;
  --fmcg-radius-md: 9px;
  --fmcg-radius-lg: 14px;
  --fmcg-radius-pill: 999px;
  --fmcg-shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.04), 0 1px 1px rgba(20, 30, 60, 0.03);
  --fmcg-shadow-md: 0 2px 6px rgba(20, 30, 60, 0.06), 0 8px 24px rgba(20, 30, 60, 0.05);
  --fmcg-shadow-lg: 0 12px 32px rgba(20, 30, 60, 0.14), 0 32px 80px rgba(20, 30, 60, 0.12);
  --fmcg-motion-fast: 150ms;
  --fmcg-motion-base: 250ms;
  --fmcg-z-sticky: 10;
  --fmcg-z-header: 20;
  --fmcg-z-popover: 30;
  --fmcg-z-dropdown: 40;
  --fmcg-z-dialog: 50;
  --fmcg-z-toast: 60;
  --fmcg-layout-content-width: 70rem;
  --fmcg-layout-header-height: 3.625rem;
  --fmcg-layout-drawer-width: 23rem;
  --fmcg-layout-gutter: 2rem;
  --fmcg-layout-gutter-mobile: 1.25rem;
}

/* ==========================================================================
   FMCG Gurus style guide.
   Plain CSS on top of the token custom properties (see packages/tokens). Every stack loads this one file.
   Rules only ever reference semantic tokens (--fmcg-color-bg, --fmcg-color-text, --fmcg-color-accent...),
   never palette values, so a re-skin is a token change. Visual rules: web/DESIGN.md.
   Class names are BEM-ish: .fmcg-block, .fmcg-block__element, .fmcg-block--modifier.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--fmcg-color-bg);
  color: var(--fmcg-color-text);
  font-family: var(--fmcg-font-family-body);
  font-size: var(--fmcg-font-size-md);
  line-height: var(--fmcg-font-line-height);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fmcg-font-family-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fmcg-color-heading);
  margin: 0 0 var(--fmcg-space-4);
  text-wrap: balance;
}
/* Fraunces is reserved for page-level statements, so only the page's h1 uses it by default. */
h1 { font-family: var(--fmcg-font-family-display); font-size: var(--fmcg-font-size-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fmcg-font-size-xl); }
h3 { font-size: var(--fmcg-font-size-lg); }

p { margin: 0 0 var(--fmcg-space-4); }
a { color: var(--fmcg-color-link); }
a:hover { color: var(--fmcg-color-accent); }
code, pre { font-family: var(--fmcg-font-family-mono); font-size: 0.9em; }
code {
  background: var(--fmcg-color-bg-raised);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-sm);
  padding: 0.1em 0.35em;
}
hr { border: 0; border-top: 1px solid var(--fmcg-color-border); margin: var(--fmcg-space-5) 0; }

:focus-visible { outline: 2px solid var(--fmcg-color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.fmcg-lede { font-size: var(--fmcg-font-size-lg); color: var(--fmcg-color-text-muted); max-width: 60ch; }
.fmcg-muted { color: var(--fmcg-color-text-muted); font-size: var(--fmcg-font-size-sm); }
.fmcg-eyebrow {
  font-family: var(--fmcg-font-family-body);
  font-size: var(--fmcg-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fmcg-color-text-muted);
  margin: 0 0 var(--fmcg-space-3);
}
.fmcg-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fmcg-icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

/* ---------- Page frame (rendered by PageWrapper / <fmcg-page-wrapper>) ---------- */
fmcg-page-wrapper, fmcg-navigation { display: block; }

.fmcg-page { min-height: 100vh; display: flex; flex-direction: column; }

.fmcg-header {
  position: sticky;
  top: 0;
  z-index: var(--fmcg-z-header);
  min-height: var(--fmcg-layout-header-height);
  background: var(--fmcg-color-bg-inverse);
}

.fmcg-main {
  width: 100%;
  max-width: calc(var(--fmcg-layout-content-width) + 2 * var(--fmcg-layout-gutter));
  margin: 0 auto;
  padding: var(--fmcg-space-6) var(--fmcg-layout-gutter) var(--fmcg-space-8);
  flex: 1;
}

/* ---------- Navigation (navy bar; links move into a menu at 640px and below) ---------- */
.fmcg-nav {
  max-width: calc(var(--fmcg-layout-content-width) + 2 * var(--fmcg-layout-gutter));
  height: var(--fmcg-layout-header-height);
  margin: 0 auto;
  padding: 0 var(--fmcg-layout-gutter);
  display: flex;
  align-items: center;
  gap: var(--fmcg-space-6);
}

.fmcg-nav__brand {
  font-weight: 600;
  font-size: var(--fmcg-font-size-md);
  color: var(--fmcg-color-text-inverse);
  text-decoration: none;
  white-space: nowrap;
}
.fmcg-nav__brand:hover { color: var(--fmcg-color-text-inverse); }
.fmcg-nav__brand-accent { color: var(--fmcg-color-selected); }

.fmcg-nav__items { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--fmcg-space-5); flex: 1; min-width: 0; overflow-x: auto; }

.fmcg-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fmcg-space-2);
  padding: var(--fmcg-space-1) 0;
  border-bottom: 2px solid transparent;
  color: var(--fmcg-color-text-inverse-muted);
  text-decoration: none;
  font-size: var(--fmcg-font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--fmcg-motion-fast), border-color var(--fmcg-motion-fast);
}
.fmcg-nav__link:hover { color: var(--fmcg-color-text-inverse); }
.fmcg-nav__link--active { color: var(--fmcg-color-text-inverse); font-weight: 600; border-bottom-color: var(--fmcg-color-selected); }
.fmcg-nav__status {
  padding: 0 var(--fmcg-space-2);
  border-radius: var(--fmcg-radius-pill);
  background: var(--fmcg-color-bg-inverse-raised);
  color: var(--fmcg-color-text-inverse);
  font-size: var(--fmcg-font-size-xs);
  font-weight: 600;
}

.fmcg-nav__user { display: flex; align-items: center; gap: var(--fmcg-space-4); margin-left: auto; white-space: nowrap; }
.fmcg-nav__user form { margin: 0; }
.fmcg-nav__support { color: var(--fmcg-color-text-inverse-muted); font-size: var(--fmcg-font-size-sm); text-decoration: none; }
.fmcg-nav__support:hover { color: var(--fmcg-color-text-inverse); }

.fmcg-nav__user-button, .fmcg-nav__menu-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fmcg-space-1);
  padding: 0;
  border: 0;
  border-radius: var(--fmcg-radius-md);
  background: transparent;
  color: var(--fmcg-color-text-inverse-muted);
  font: inherit;
  cursor: pointer;
}
.fmcg-nav__user-button:hover, .fmcg-nav__user-button[data-state="open"] { color: var(--fmcg-color-text-inverse); }
.fmcg-nav__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fmcg-space-6); height: var(--fmcg-space-6);
  border-radius: 50%;
  background: var(--fmcg-color-selected);
  color: var(--fmcg-color-text-on-selected);
  font-size: var(--fmcg-font-size-xs);
  font-weight: 700;
}
.fmcg-nav__user-button[data-state="open"] .fmcg-nav__avatar { outline: 2px solid var(--fmcg-color-text-inverse); outline-offset: 2px; }
.fmcg-nav__menu-button { display: none; width: 2.75rem; height: 2.75rem; color: var(--fmcg-color-text-inverse); font-size: var(--fmcg-font-size-lg); }
.fmcg-nav__menu-button:hover, .fmcg-nav__menu-button[data-state="open"] { background: var(--fmcg-color-bg-inverse-raised); }

@media (max-width: 40rem) {
  .fmcg-nav { gap: var(--fmcg-space-3); padding: 0 var(--fmcg-layout-gutter-mobile); }
  .fmcg-nav__items, .fmcg-nav__support { display: none; }
  .fmcg-nav__menu-button { display: inline-flex; }
  .fmcg-main { padding-left: var(--fmcg-layout-gutter-mobile); padding-right: var(--fmcg-layout-gutter-mobile); }
}

/* ---------- Buttons ---------- */
.fmcg-button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fmcg-space-2);
  padding: var(--fmcg-space-2) var(--fmcg-space-4);
  border: 1px solid var(--fmcg-color-accent);
  border-radius: var(--fmcg-radius-md);
  background: var(--fmcg-color-accent);
  color: var(--fmcg-color-text-on-accent);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fmcg-motion-fast), border-color var(--fmcg-motion-fast), color var(--fmcg-motion-fast);
}
.fmcg-button:hover, .btn:hover {
  background: var(--fmcg-color-accent-hover);
  border-color: var(--fmcg-color-accent-hover);
  color: var(--fmcg-color-text-on-accent);
}
.fmcg-button:active:not(:disabled) { transform: translateY(1px); }
.fmcg-button:disabled, .fmcg-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.fmcg-button--loading { cursor: progress; }

.fmcg-button--quiet, .btn-link, .btn-secondary {
  background: var(--fmcg-color-bg-raised);
  color: var(--fmcg-color-accent);
  border-color: var(--fmcg-color-border-strong);
}
.fmcg-button--quiet:hover, .btn-link:hover, .btn-secondary:hover {
  background: var(--fmcg-color-bg-raised);
  border-color: var(--fmcg-color-accent);
  color: var(--fmcg-color-accent);
}

.fmcg-button--text {
  background: transparent;
  border-color: transparent;
  color: var(--fmcg-color-link);
  padding-left: var(--fmcg-space-1);
  padding-right: var(--fmcg-space-1);
}
.fmcg-button--text:hover { background: transparent; border-color: transparent; color: var(--fmcg-color-accent); text-decoration: underline; }

.fmcg-button--danger { background: var(--fmcg-color-negative); border-color: var(--fmcg-color-negative); }
.fmcg-button--danger:hover { background: var(--fmcg-color-negative-strong); border-color: var(--fmcg-color-negative-strong); }

/* Sensia actions carry the teal identity; standard actions stay navy. */
.fmcg-button--sensia { background: var(--fmcg-color-bg-raised); border-color: var(--fmcg-color-sensia-border); color: var(--fmcg-color-sensia-text); }
.fmcg-button--sensia:hover { background: var(--fmcg-color-sensia-chip); border-color: var(--fmcg-color-sensia); color: var(--fmcg-color-sensia-text); }

.fmcg-button--sm { padding: var(--fmcg-space-1) var(--fmcg-space-3); font-size: var(--fmcg-font-size-sm); }

.fmcg-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fmcg-space-6); height: var(--fmcg-space-6);
  padding: 0;
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-md);
  background: var(--fmcg-color-bg-raised);
  color: var(--fmcg-color-text-muted);
  cursor: pointer;
  transition: border-color var(--fmcg-motion-fast), color var(--fmcg-motion-fast);
}
.fmcg-icon-button:hover { border-color: var(--fmcg-color-accent); color: var(--fmcg-color-accent); }
.fmcg-icon-button:disabled { opacity: 0.45; cursor: not-allowed; }

.fmcg-toggle[data-state="on"] { background: var(--fmcg-color-accent-soft); border-color: var(--fmcg-color-accent-line); color: var(--fmcg-color-accent-ink); }

/* Touch screens: every control gets at least a 44px target. */
@media (pointer: coarse) {
  .fmcg-button, .fmcg-tabs__trigger, .fmcg-segmented__item, .fmcg-nav__user-button { min-height: 2.75rem; }
  .fmcg-icon-button, .fmcg-filter-chip__remove { min-width: 2.75rem; min-height: 2.75rem; }
}

/* ---------- Page header ---------- */
.fmcg-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fmcg-space-5);
  flex-wrap: wrap;
  margin: 0 0 var(--fmcg-space-6);
}
.fmcg-page-header h1 { margin-bottom: 0; }
.fmcg-page-header__description { margin: var(--fmcg-space-2) 0 0; color: var(--fmcg-color-text-muted); font-size: var(--fmcg-font-size-sm); max-width: 60ch; }
.fmcg-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fmcg-space-2); }

/* ---------- Cards ---------- */
.fmcg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--fmcg-space-5); }

.fmcg-card {
  display: flex; flex-direction: column; gap: var(--fmcg-space-2);
  padding: var(--fmcg-space-5);
  background: var(--fmcg-color-bg-raised);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-lg);
  box-shadow: var(--fmcg-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fmcg-motion-fast), transform var(--fmcg-motion-fast), box-shadow var(--fmcg-motion-fast);
}
a.fmcg-card:hover, .fmcg-card--interactive:hover { border-color: var(--fmcg-color-accent-line); box-shadow: var(--fmcg-shadow-md); transform: translateY(-1px); color: inherit; }
/* Locked and coming-soon stay full contrast: the badge says why, the card is not faded. */
.fmcg-card--locked, .fmcg-card--coming-soon { background: var(--fmcg-color-bg-locked); }
.fmcg-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--fmcg-space-3); }
.fmcg-card__header-actions { display: flex; align-items: center; gap: var(--fmcg-space-2); }
.fmcg-card__title { font-size: var(--fmcg-font-size-md); font-weight: 600; line-height: 1.35; color: var(--fmcg-color-heading); }
.fmcg-card__description { color: var(--fmcg-color-text-muted); font-size: var(--fmcg-font-size-sm); }
.fmcg-card__body { flex: 1; }
.fmcg-card__footer { display: flex; gap: var(--fmcg-space-2); align-items: center; padding-top: var(--fmcg-space-3); border-top: 1px solid var(--fmcg-color-border); }

/* ---------- Badges and chips ---------- */
.fmcg-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 0 var(--fmcg-space-2);
  border: 1px solid var(--fmcg-color-caution-line);
  border-radius: var(--fmcg-radius-sm);
  background: var(--fmcg-color-caution-soft);
  color: var(--fmcg-color-caution);
  font-size: var(--fmcg-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}
.fmcg-badge--neutral { background: var(--fmcg-color-bg); border-color: transparent; color: var(--fmcg-color-text-muted); }
.fmcg-badge--info { background: var(--fmcg-color-info-soft); border-color: transparent; color: var(--fmcg-color-info); }
.fmcg-badge--success { background: var(--fmcg-color-positive-soft); border-color: transparent; border-radius: var(--fmcg-radius-pill); color: var(--fmcg-color-positive); }
.fmcg-badge--warning { background: var(--fmcg-color-caution-soft); border-color: var(--fmcg-color-caution-line); color: var(--fmcg-color-caution); }
/* A red dot flagging something that needs attention; its label is the accessible name and tooltip. */
.fmcg-notice-dot {
  display: inline-block;
  flex: none;
  width: var(--fmcg-space-2);
  height: var(--fmcg-space-2);
  margin-inline: var(--fmcg-space-1);
  border-radius: var(--fmcg-radius-pill);
  background: var(--fmcg-color-negative);
  vertical-align: middle;
}
.fmcg-badge--sensia { background: var(--fmcg-color-sensia-chip); border-color: transparent; color: var(--fmcg-color-sensia-text); }

.fmcg-chip {
  display: inline-flex; align-items: center; gap: var(--fmcg-space-1);
  padding: var(--fmcg-space-1) var(--fmcg-space-3);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-pill);
  background: var(--fmcg-color-bg);
  color: var(--fmcg-color-text-muted);
  font: inherit; font-size: var(--fmcg-font-size-sm); line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}
.fmcg-chip b, .fmcg-chip strong { color: var(--fmcg-color-heading); font-weight: 600; }
.fmcg-chip--selected { background: var(--fmcg-color-accent-soft); border-color: var(--fmcg-color-accent-line); color: var(--fmcg-color-accent-ink); }
.fmcg-chip--interactive {
  padding: var(--fmcg-space-2) var(--fmcg-space-4);
  background: var(--fmcg-color-bg-raised);
  color: var(--fmcg-color-heading);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fmcg-motion-fast);
}
.fmcg-chip--interactive:hover { border-color: var(--fmcg-color-selected); color: var(--fmcg-color-heading); }

/* ---------- Filter chips and bar ---------- */
.fmcg-filter-chip { padding-inline-end: var(--fmcg-space-1); }
.fmcg-filter-chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fmcg-space-5); height: var(--fmcg-space-5);
  padding: 0;
  border: 0;
  border-radius: var(--fmcg-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--fmcg-motion-fast);
}
.fmcg-filter-chip__remove:hover { background: var(--fmcg-color-bg-raised); }
.fmcg-filter-chip__remove svg { width: var(--fmcg-space-3); height: var(--fmcg-space-3); }
.fmcg-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fmcg-space-2); }

/* ---------- Metric and delta ---------- */
.fmcg-delta { display: inline-flex; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fmcg-color-text-muted); white-space: nowrap; }
.fmcg-delta--up { color: var(--fmcg-color-positive); }
.fmcg-delta--down { color: var(--fmcg-color-negative); }
.fmcg-delta__marker { width: 0.7em; height: 0.7em; margin-left: 0.2em; }

.fmcg-metric__value { margin: 0; font-size: var(--fmcg-font-size-xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--fmcg-color-heading); }
.fmcg-metric--lg .fmcg-metric__value { font-size: var(--fmcg-font-size-3xl); }
.fmcg-metric__unit { font-size: var(--fmcg-font-size-sm); font-weight: 700; letter-spacing: 0; color: var(--fmcg-color-text-muted); }
.fmcg-metric__change { margin-left: var(--fmcg-space-2); font-size: var(--fmcg-font-size-sm); }
.fmcg-metric__description { margin: var(--fmcg-space-1) 0 0; font-size: var(--fmcg-font-size-sm); color: var(--fmcg-color-text-muted); }

/* ---------- Empty, error and loading states ---------- */
.fmcg-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--fmcg-space-2);
  padding: var(--fmcg-space-8) var(--fmcg-space-5);
  border: 1px dashed var(--fmcg-color-border-strong);
  border-radius: var(--fmcg-radius-lg);
  background: var(--fmcg-color-bg-raised);
}
.fmcg-empty__icon { color: var(--fmcg-color-text-muted); margin-bottom: var(--fmcg-space-2); }
.fmcg-empty__icon svg { width: 2.5rem; height: 2.5rem; }
.fmcg-empty__title { font-weight: 600; font-size: var(--fmcg-font-size-lg); color: var(--fmcg-color-heading); margin: 0; }
.fmcg-empty__description { color: var(--fmcg-color-text-muted); max-width: 44ch; margin: 0; }
.fmcg-empty__action { margin-top: var(--fmcg-space-3); }
.fmcg-empty--error { border-style: solid; border-color: var(--fmcg-color-negative); }
.fmcg-empty--error .fmcg-empty__title { color: var(--fmcg-color-negative); }

.fmcg-loading { display: flex; align-items: center; justify-content: center; gap: var(--fmcg-space-3); padding: var(--fmcg-space-8) var(--fmcg-space-5); color: var(--fmcg-color-text-muted); }
.fmcg-loading__spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--fmcg-color-border);
  border-top-color: var(--fmcg-color-selected);
  border-radius: 50%;
  animation: fmcg-spin 800ms linear infinite;
}

/* ---------- Tables ---------- */
.fmcg-table { width: 100%; border-collapse: collapse; background: var(--fmcg-color-bg-raised); font-size: var(--fmcg-font-size-sm); margin: 0 0 var(--fmcg-space-5); }
.fmcg-table th, .fmcg-table td { text-align: left; padding: var(--fmcg-space-3) var(--fmcg-space-4); border-bottom: 1px solid var(--fmcg-color-border); vertical-align: top; }
.fmcg-table thead th {
  background: var(--fmcg-color-bg-hover);
  border-bottom: 2px solid var(--fmcg-color-border);
  font-size: var(--fmcg-font-size-xs);
  font-weight: 700;
  color: var(--fmcg-color-text-muted);
  white-space: nowrap;
}
.fmcg-table tbody th { font-weight: 500; color: var(--fmcg-color-text); }
.fmcg-table td { font-variant-numeric: tabular-nums; color: var(--fmcg-color-text); }
.fmcg-table tbody tr:hover > * { background: var(--fmcg-color-bg-hover); }
.fmcg-table tbody tr:last-child > * { border-bottom: 0; }
.fmcg-table-wrap { overflow-x: auto; }
.fmcg-table--numeric th:not(:first-child), .fmcg-table--numeric td:not(:first-child) { text-align: right; }
.fmcg-table__subhead { display: block; font-size: var(--fmcg-font-size-xs); font-weight: 400; color: var(--fmcg-color-text-muted); }
.fmcg-table .fmcg-table__row--total > * { background: var(--fmcg-color-accent-soft); font-weight: 700; color: var(--fmcg-color-heading); border-top: 2px solid var(--fmcg-color-accent-line); }
.fmcg-table .fmcg-table__cell--heat-low { background: var(--fmcg-color-heat-low); }
.fmcg-table .fmcg-table__cell--heat-mid { background: var(--fmcg-color-heat-mid); }
.fmcg-table .fmcg-table__cell--heat-high { background: var(--fmcg-color-heat-high); }
.fmcg-table__cell-button {
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit;
  text-decoration: underline dotted var(--fmcg-color-border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.fmcg-table__cell-button:hover { color: var(--fmcg-color-link); }

/* ---------- Dialog (Radix Dialog) ---------- */
.fmcg-dialog__overlay {
  position: fixed; inset: 0;
  background: var(--fmcg-color-overlay);
  z-index: var(--fmcg-z-dialog);
  animation: fmcg-fade-in var(--fmcg-motion-base) ease-out;
}
.fmcg-dialog {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(32rem, calc(100vw - 2 * var(--fmcg-space-5)));
  max-height: calc(100vh - 2 * var(--fmcg-space-5));
  overflow: auto;
  padding: var(--fmcg-space-5);
  background: var(--fmcg-color-bg-raised);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-lg);
  box-shadow: var(--fmcg-shadow-lg);
  z-index: var(--fmcg-z-dialog);
  animation: fmcg-pop-in var(--fmcg-motion-base) ease-out;
}
.fmcg-dialog__title { font-weight: 600; font-size: var(--fmcg-font-size-xl); margin: 0 0 var(--fmcg-space-2); }
.fmcg-dialog__description { color: var(--fmcg-color-text-muted); margin: 0 0 var(--fmcg-space-4); }
.fmcg-dialog__body { margin: 0 0 var(--fmcg-space-4); }
.fmcg-dialog__body > :last-child { margin-bottom: 0; }
.fmcg-dialog__actions { display: flex; justify-content: flex-end; gap: var(--fmcg-space-2); }

/* ---------- Drawer (Radix Dialog as a side sheet) ---------- */
.fmcg-drawer__overlay { position: fixed; inset: 0; background: var(--fmcg-color-overlay); z-index: var(--fmcg-z-dialog); animation: fmcg-fade-in var(--fmcg-motion-base) ease-out; }
.fmcg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(var(--fmcg-layout-drawer-width), 100vw);
  display: flex; flex-direction: column;
  background: var(--fmcg-color-bg-raised);
  border-left: 1px solid var(--fmcg-color-border);
  box-shadow: var(--fmcg-shadow-lg);
  z-index: var(--fmcg-z-dialog);
  animation: fmcg-slide-in var(--fmcg-motion-base) ease-out;
}
.fmcg-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--fmcg-space-3); padding: var(--fmcg-space-4) var(--fmcg-space-5); border-bottom: 1px solid var(--fmcg-color-border); }
.fmcg-drawer__title { margin: 0; font-size: var(--fmcg-font-size-md); font-weight: 700; }
.fmcg-drawer__description { margin: 0; padding: var(--fmcg-space-3) var(--fmcg-space-5) 0; font-size: var(--fmcg-font-size-sm); color: var(--fmcg-color-text-muted); }
.fmcg-drawer__body { flex: 1; overflow-y: auto; padding: var(--fmcg-space-4) var(--fmcg-space-5) var(--fmcg-space-6); }

/* ---------- Menu (Radix DropdownMenu) ---------- */
.fmcg-menu {
  min-width: 12rem;
  padding: var(--fmcg-space-1);
  background: var(--fmcg-color-bg-raised);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-md);
  box-shadow: var(--fmcg-shadow-lg);
  z-index: var(--fmcg-z-dropdown);
  animation: fmcg-fade-in var(--fmcg-motion-fast) ease-out;
}
.fmcg-menu__item {
  display: flex; align-items: center; gap: var(--fmcg-space-2);
  padding: var(--fmcg-space-2) var(--fmcg-space-3);
  border-radius: var(--fmcg-radius-sm);
  font-size: var(--fmcg-font-size-sm);
  color: var(--fmcg-color-text);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.fmcg-menu__item[data-highlighted] { background: var(--fmcg-color-accent-soft); color: var(--fmcg-color-accent); }
.fmcg-menu__item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
.fmcg-menu__item[aria-current="page"] { font-weight: 600; color: var(--fmcg-color-heading); }
.fmcg-menu__item--danger { color: var(--fmcg-color-negative); }
.fmcg-menu__item--danger[data-highlighted] { background: var(--fmcg-color-negative-soft); color: var(--fmcg-color-negative-strong); }
.fmcg-menu__hint { margin-left: auto; font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-menu__label { padding: var(--fmcg-space-2) var(--fmcg-space-3) var(--fmcg-space-1); font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-menu__separator { height: 1px; margin: var(--fmcg-space-1) 0; background: var(--fmcg-color-border); }

/* ---------- Tabs (Radix Tabs) ---------- */
/* The rule under the tabs is an inset shadow, not a border: a border would need the triggers to pull
   themselves 1px over it, and that negative margin overflows the scroll container set up by overflow-x. */
.fmcg-tabs__list { display: flex; gap: var(--fmcg-space-6); box-shadow: inset 0 -1px 0 var(--fmcg-color-border); margin: 0 0 var(--fmcg-space-5); overflow-x: auto; }
.fmcg-tabs__trigger {
  padding: var(--fmcg-space-1) 2px var(--fmcg-space-3);
  border: 0; border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fmcg-color-text-muted);
  font: inherit; font-size: var(--fmcg-font-size-sm); font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fmcg-motion-fast), border-color var(--fmcg-motion-fast);
}
.fmcg-tabs__trigger:hover { color: var(--fmcg-color-heading); }
.fmcg-tabs__trigger[data-state="active"] { color: var(--fmcg-color-heading); border-bottom-color: var(--fmcg-color-selected); }
.fmcg-tabs__panel { outline: none; }

/* ---------- Forms (also covers the Identity UI pages, which use Bootstrap class names) ---------- */
label, .form-label { display: block; font-size: var(--fmcg-font-size-sm); font-weight: 500; margin-bottom: var(--fmcg-space-1); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea, .form-control {
  display: block; width: 100%; max-width: 28rem;
  padding: var(--fmcg-space-2) var(--fmcg-space-3);
  font: inherit;
  border: 1px solid var(--fmcg-color-border-strong);
  border-radius: var(--fmcg-radius-md);
  background: var(--fmcg-color-bg-raised);
  color: inherit;
  transition: border-color var(--fmcg-motion-fast);
}
:is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea, .form-control):hover { border-color: var(--fmcg-color-accent-line); }
:is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea, .form-control):focus { border-color: var(--fmcg-color-selected); }
.fmcg-field { margin-bottom: var(--fmcg-space-4); }
.fmcg-field__hint { font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); margin-top: var(--fmcg-space-1); }
.fmcg-field__error, .text-danger, .validation-summary-errors { color: var(--fmcg-color-negative); font-size: var(--fmcg-font-size-sm); }
.form-floating { display: flex; flex-direction: column; margin-bottom: var(--fmcg-space-4); }
.form-floating label { order: -1; }
.checkbox, .form-check { margin: var(--fmcg-space-3) 0; }
.form-check-input { margin-right: var(--fmcg-space-2); }
.w-100 { width: auto; }
.row { display: flex; flex-wrap: wrap; gap: var(--fmcg-space-6); }
.col-md-4, .col-md-6 { flex: 1 1 20rem; }

.fmcg-switch { display: inline-flex; align-items: center; gap: var(--fmcg-space-2); }
.fmcg-switch--spread { display: flex; justify-content: space-between; width: 100%; }
.fmcg-switch__label { margin: 0; font-size: var(--fmcg-font-size-sm); font-weight: 600; color: var(--fmcg-color-text-muted); cursor: pointer; }
.fmcg-switch--spread .fmcg-switch__label { font-weight: 400; }
.fmcg-switch:has([data-state="checked"]) .fmcg-switch__label { color: var(--fmcg-color-heading); }
.fmcg-switch__control {
  position: relative; flex-shrink: 0;
  width: 2.125rem; height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: var(--fmcg-radius-pill);
  background: var(--fmcg-color-border-strong);
  cursor: pointer;
  transition: background var(--fmcg-motion-fast);
}
.fmcg-switch__control[data-state="checked"] { background: var(--fmcg-color-accent); }
.fmcg-switch__control:disabled { opacity: 0.5; cursor: not-allowed; }
.fmcg-switch__thumb {
  display: block; width: 0.95rem; height: 0.95rem;
  border-radius: 50%;
  background: var(--fmcg-color-bg-raised);
  box-shadow: var(--fmcg-shadow-sm);
  transform: translateX(0.125rem);
  transition: transform var(--fmcg-motion-fast);
}
.fmcg-switch__thumb[data-state="checked"] { transform: translateX(1.05rem); }

.fmcg-checkbox { display: flex; align-items: flex-start; gap: var(--fmcg-space-2); padding: var(--fmcg-space-1) 0; }
.fmcg-checkbox__input { width: 1rem; height: 1rem; margin: 0.25em 0 0; flex-shrink: 0; accent-color: var(--fmcg-color-accent); cursor: pointer; }
.fmcg-checkbox__label { margin: 0; font-size: var(--fmcg-font-size-sm); font-weight: 400; color: var(--fmcg-color-text-muted); cursor: pointer; }
.fmcg-checkbox__hint { font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-checkbox__input:disabled, .fmcg-checkbox__input:disabled + .fmcg-checkbox__label { cursor: not-allowed; }

.fmcg-select--stacked .fmcg-select__label { font-size: var(--fmcg-font-size-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fmcg-color-text-muted); }
.fmcg-select--stacked .fmcg-select__control { min-width: 12rem; background: var(--fmcg-color-bg); }
.fmcg-select--inline {
  display: inline-flex; align-items: center; gap: var(--fmcg-space-1);
  padding: 0 var(--fmcg-space-1) 0 var(--fmcg-space-3);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-pill);
  background: var(--fmcg-color-bg);
}
.fmcg-select--inline:hover, .fmcg-select--inline:focus-within { border-color: var(--fmcg-color-accent-line); }
.fmcg-select--inline .fmcg-select__label { margin: 0; font-size: var(--fmcg-font-size-sm); font-weight: 400; color: var(--fmcg-color-text-muted); }
.fmcg-select--inline .fmcg-select__control {
  width: auto; max-width: none;
  padding: var(--fmcg-space-1) var(--fmcg-space-2);
  border: 0;
  background: transparent;
  font-size: var(--fmcg-font-size-sm); font-weight: 600;
  color: var(--fmcg-color-heading);
  cursor: pointer;
}
.fmcg-select__control:disabled { opacity: 0.6; cursor: not-allowed; }

.fmcg-segmented { display: inline-flex; gap: var(--fmcg-space-2); }
/* Fits as many columns as the container allows: three at full width, two in a 15rem sidebar.
   A plain 1fr track cannot shrink below its label's min-content, which pushed the last column outside the card. */
.fmcg-segmented--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(5.5rem, 100%), 1fr)); width: 100%; }
.fmcg-segmented__item {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fmcg-space-1);
  padding: var(--fmcg-space-2) var(--fmcg-space-3);
  border: 1px solid var(--fmcg-color-border-strong);
  border-radius: var(--fmcg-radius-md);
  background: var(--fmcg-color-bg-raised);
  color: var(--fmcg-color-text-muted);
  font: inherit; font-size: var(--fmcg-font-size-sm); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fmcg-motion-fast), color var(--fmcg-motion-fast);
}
.fmcg-segmented--row .fmcg-segmented__item { flex: 1; flex-direction: row; }
.fmcg-segmented--grid .fmcg-segmented__item { font-size: var(--fmcg-font-size-xs); min-width: 0; text-align: center; overflow-wrap: break-word; }
.fmcg-segmented__item:hover:not(:disabled) { border-color: var(--fmcg-color-selected); color: var(--fmcg-color-heading); }
.fmcg-segmented__item[data-state="on"] { background: var(--fmcg-color-accent-soft); border-color: var(--fmcg-color-accent); color: var(--fmcg-color-heading); }
.fmcg-segmented__item:disabled { opacity: 0.4; cursor: not-allowed; }
.fmcg-segmented__item .fmcg-icon { width: 1.1rem; height: 1.1rem; }

input.fmcg-inline-edit {
  display: block; width: 100%; max-width: none;
  padding: var(--fmcg-space-1) var(--fmcg-space-2);
  margin-left: calc(-1 * var(--fmcg-space-2));
  border: 1px solid transparent;
  border-radius: var(--fmcg-radius-sm);
  background: transparent;
  font: inherit; color: inherit;
}
input.fmcg-inline-edit:hover { border-color: var(--fmcg-color-border); }
input.fmcg-inline-edit:focus { border-color: var(--fmcg-color-selected); background: var(--fmcg-color-bg-raised); }

/* ---------- Search field ---------- */
.fmcg-search { position: relative; }
.fmcg-search__field {
  display: flex; align-items: center; gap: var(--fmcg-space-3);
  padding: var(--fmcg-space-3) var(--fmcg-space-3) var(--fmcg-space-3) var(--fmcg-space-5);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-lg);
  background: var(--fmcg-color-bg);
  cursor: text;
  transition: border-color var(--fmcg-motion-fast), box-shadow var(--fmcg-motion-fast);
}
.fmcg-search__field:hover { border-color: var(--fmcg-color-selected); box-shadow: var(--fmcg-shadow-md); }
.fmcg-search__field:focus-within { border-color: var(--fmcg-color-selected); box-shadow: var(--fmcg-shadow-md); outline: 2px solid var(--fmcg-color-focus); outline-offset: 2px; }
.fmcg-search__icon { font-size: var(--fmcg-font-size-lg); color: var(--fmcg-color-text-subtle); }
input.fmcg-search__input {
  flex: 1; min-width: 0; width: auto; max-width: none;
  padding: var(--fmcg-space-1) 0;
  border: 0;
  background: transparent;
  font-size: var(--fmcg-font-size-md);
}
input.fmcg-search__input:focus-visible { outline: none; }
.fmcg-search__results {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--fmcg-space-2));
  z-index: var(--fmcg-z-popover);
  /* A long list of matches scrolls inside the panel instead of running off the bottom of the page. */
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(60vh, 30rem);
  overscroll-behavior: contain;
  background: var(--fmcg-color-bg-raised);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-lg);
  box-shadow: var(--fmcg-shadow-lg);
  text-align: left;
}
.fmcg-search__results .fmcg-empty { border: 0; padding: var(--fmcg-space-5); }

/* ---------- Action list ---------- */
.fmcg-action-list { list-style: none; margin: 0; padding: 0; }
.fmcg-action-list--bordered { overflow: hidden; background: var(--fmcg-color-bg-raised); border: 1px solid var(--fmcg-color-border); border-radius: var(--fmcg-radius-lg); box-shadow: var(--fmcg-shadow-sm); }
.fmcg-action-list__item {
  position: relative;
  display: flex; align-items: center; gap: var(--fmcg-space-4);
  padding: var(--fmcg-space-4) var(--fmcg-space-5);
  border-bottom: 1px solid var(--fmcg-color-border);
  transition: background var(--fmcg-motion-fast);
}
.fmcg-action-list__item:last-child { border-bottom: 0; }
.fmcg-action-list__item:hover { background: var(--fmcg-color-bg-hover); }
.fmcg-action-list__item:has(:focus-visible) { outline: 2px solid var(--fmcg-color-focus); outline-offset: -2px; }
.fmcg-action-list__leading { flex-shrink: 0; }
.fmcg-action-list__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fmcg-action-list__title { font-weight: 600; line-height: 1.35; }
.fmcg-action-list__title > a, .fmcg-action-list__title > button {
  padding: 0; border: 0; background: none;
  color: var(--fmcg-color-heading); font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.fmcg-action-list__title > a::after, .fmcg-action-list__title > button::after { content: ""; position: absolute; inset: 0; }
.fmcg-action-list__title > a:focus-visible, .fmcg-action-list__title > button:focus-visible { outline: none; }
.fmcg-action-list__meta { font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-action-list__trailing { flex-shrink: 0; margin-left: auto; font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }

/* ---------- Toast (Radix Toast) ---------- */
.fmcg-toast__viewport {
  position: fixed; bottom: var(--fmcg-space-5); left: 50%;
  transform: translateX(-50%);
  z-index: var(--fmcg-z-toast);
  width: max-content; max-width: calc(100vw - 2 * var(--fmcg-space-5));
  margin: 0; padding: 0;
  list-style: none;
  outline: none;
}
.fmcg-toast {
  padding: var(--fmcg-space-2) var(--fmcg-space-5);
  border-radius: var(--fmcg-radius-pill);
  background: var(--fmcg-color-bg-inverse);
  color: var(--fmcg-color-text-inverse);
  font-size: var(--fmcg-font-size-sm);
  box-shadow: var(--fmcg-shadow-lg);
  animation: fmcg-fade-in var(--fmcg-motion-base) ease-out;
}
.fmcg-toast[data-state="closed"] { animation: fmcg-fade-out var(--fmcg-motion-fast) ease-in forwards; }

/* ---------- Text helpers (DisplayHeading, Lede, FinePrint, ContextLine, CodeLabel) ---------- */
.fmcg-display {
  max-width: 55rem;
  margin: 0 0 var(--fmcg-space-3);
  font-family: var(--fmcg-font-family-display);
  font-size: var(--fmcg-font-size-2xl);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--fmcg-color-heading);
}
.fmcg-display__mark { margin-left: var(--fmcg-space-1); font-family: var(--fmcg-font-family-body); font-size: var(--fmcg-font-size-sm); color: var(--fmcg-color-text-muted); }
.fmcg-lede--md { font-size: var(--fmcg-font-size-md); max-width: 50rem; }
.fmcg-fine-print { margin: 0; font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-fine-print--sm { font-size: var(--fmcg-font-size-sm); }
.fmcg-fine-print--center { text-align: center; }
ul.fmcg-fine-print { padding-left: var(--fmcg-space-4); }
.fmcg-context { margin: 0; font-size: var(--fmcg-font-size-sm); color: var(--fmcg-color-text-muted); }
.fmcg-context b, .fmcg-context strong { font-weight: 600; color: var(--fmcg-color-heading); }
.fmcg-code-label { display: inline-block; min-width: 3.5rem; font-size: var(--fmcg-font-size-xs); font-weight: 700; color: var(--fmcg-color-link); }

/* ---------- Page bands: PageHero and StickyBar ----------
   Both are full-width white bands. The band itself paints its own surface; a pseudo-element bleeds that surface and
   its bottom rule to the edges of the viewport — the box-shadow spreads sideways, clip-path stops it spreading
   upwards over the header, and neither widens the page.

   The bleed lives on the pseudo-element, never on the band, because clip-path clips descendants too: with it on the
   band, anything opened inside — the landing search results, a popover — was cut off at the band's bottom edge, and
   no z-index could lift it out. An outer box-shadow is not painted under its own border box, so the pseudo-element
   covers only the bleed, and `pointer-events: none` keeps it from swallowing clicks on the controls beneath it.

   Both expect to be first inside .fmcg-main. */
.fmcg-hero, .fmcg-sticky-bar {
  position: relative;
  margin-top: calc(-1 * var(--fmcg-space-6));
  margin-bottom: var(--fmcg-space-6);
  background: var(--fmcg-color-bg-raised);
}
.fmcg-hero::before, .fmcg-sticky-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 100vmax var(--fmcg-color-bg-raised),
    0 1px 0 100vmax var(--fmcg-color-border);
  clip-path: inset(0 -100vmax -1px);
}
.fmcg-hero { padding: var(--fmcg-space-8) 0 var(--fmcg-space-6); text-align: center; }
.fmcg-hero__inner { display: flex; flex-direction: column; gap: var(--fmcg-space-4); max-width: 48.75rem; margin: 0 auto; }
.fmcg-hero__inner > * { margin: 0; }
.fmcg-hero__inner > .fmcg-hero__title { margin-bottom: var(--fmcg-space-3); font-size: var(--fmcg-font-size-3xl); }
.fmcg-sticky-bar { position: sticky; top: var(--fmcg-layout-header-height); z-index: var(--fmcg-z-sticky); padding-top: var(--fmcg-space-3); }
.fmcg-sticky-bar .fmcg-tabs__list { margin-bottom: 0; box-shadow: none; }
@media (max-width: 60rem) {
  .fmcg-hero { padding: var(--fmcg-space-6) 0 var(--fmcg-space-5); }
  .fmcg-hero__inner > .fmcg-hero__title { font-size: var(--fmcg-font-size-2xl); }
}

/* ---------- Evidence and provenance ---------- */
.fmcg-evidence-chip {
  display: inline-block;
  padding: 0 var(--fmcg-space-2);
  border: 1px solid transparent;
  border-radius: var(--fmcg-radius-sm);
  background: var(--fmcg-color-sensia-chip);
  color: var(--fmcg-color-sensia-text);
  font: inherit;
  font-size: var(--fmcg-font-size-xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
button.fmcg-evidence-chip { cursor: pointer; transition: border-color var(--fmcg-motion-fast); }
button.fmcg-evidence-chip:hover { border-color: var(--fmcg-color-sensia); }
.fmcg-cited__emphasis { font-weight: 600; color: var(--fmcg-color-positive); }

.fmcg-provenance {
  display: flex; flex-wrap: wrap; gap: var(--fmcg-space-2) var(--fmcg-space-5);
  padding: var(--fmcg-space-3) var(--fmcg-space-5);
  border-top: 1px solid var(--fmcg-color-border);
  background: var(--fmcg-color-bg-hover);
  font-size: var(--fmcg-font-size-xs);
  color: var(--fmcg-color-text-muted);
}
.fmcg-provenance strong { font-weight: 600; color: var(--fmcg-color-text); }
.fmcg-provenance__hint { margin-left: auto; font-style: italic; }

.fmcg-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--fmcg-space-1) var(--fmcg-space-3); margin: 0; font-size: var(--fmcg-font-size-xs); }
.fmcg-facts dt { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fmcg-color-text-muted); }
.fmcg-facts dd { margin: 0; color: var(--fmcg-color-text); }

.fmcg-evidence-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--fmcg-space-2);
  padding: var(--fmcg-space-3) var(--fmcg-space-4);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-md);
  background: var(--fmcg-color-bg-raised);
}
.fmcg-evidence-card--highlighted { border-color: var(--fmcg-color-sensia); outline: 2px solid var(--fmcg-color-sensia-chip); }
.fmcg-evidence-card__code { margin: 0; font-size: var(--fmcg-font-size-xs); font-weight: 700; color: var(--fmcg-color-sensia-text); }
.fmcg-evidence-card__title { margin: 0; font-size: var(--fmcg-font-size-sm); font-weight: 600; }

.fmcg-table-panel { overflow: hidden; background: var(--fmcg-color-bg-raised); border: 1px solid var(--fmcg-color-border); border-radius: var(--fmcg-radius-lg); box-shadow: var(--fmcg-shadow-sm); }
.fmcg-table-panel__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fmcg-space-2); padding: var(--fmcg-space-3) var(--fmcg-space-5); border-bottom: 1px solid var(--fmcg-color-border); }
.fmcg-table-panel .fmcg-table { margin: 0; }
.fmcg-table-panel__footnote { padding: var(--fmcg-space-2) var(--fmcg-space-5) var(--fmcg-space-3); background: var(--fmcg-color-bg-hover); font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-table-panel__footnote > * { margin: 0; }

/* ---------- Sensia (SensiaPanel, SensiaPrompt) ---------- */
.fmcg-sensia {
  display: flex; flex-direction: column; gap: var(--fmcg-space-3);
  padding: var(--fmcg-space-5);
  border: 1px solid var(--fmcg-color-sensia-border);
  border-radius: var(--fmcg-radius-lg);
  background: var(--fmcg-color-sensia-soft);
}
.fmcg-sensia__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fmcg-space-2); }
.fmcg-sensia__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--fmcg-color-sensia); outline: 3px solid var(--fmcg-color-sensia-chip); }
.fmcg-sensia__name {
  margin: 0;
  font-family: var(--fmcg-font-family-body);
  font-size: var(--fmcg-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fmcg-color-sensia-text);
}
.fmcg-sensia__action { margin-left: auto; }
.fmcg-sensia__body { font-size: var(--fmcg-font-size-sm); line-height: 1.7; color: var(--fmcg-color-text-muted); }
.fmcg-sensia__body strong { font-weight: 600; color: var(--fmcg-color-heading); }
.fmcg-sensia__refs, .fmcg-sensia__actions { display: flex; flex-wrap: wrap; gap: var(--fmcg-space-2); margin: 0; padding: 0; list-style: none; }
.fmcg-sensia > .fmcg-fine-print { margin-top: calc(-1 * var(--fmcg-space-1)); }
.fmcg-sensia-prompt { display: flex; align-items: center; gap: var(--fmcg-space-2); }
input.fmcg-sensia-prompt__input { flex: 1; min-width: 0; max-width: none; border-color: var(--fmcg-color-sensia-border); background: var(--fmcg-color-bg-raised); font-size: var(--fmcg-font-size-sm); }
input.fmcg-sensia-prompt__input:hover, input.fmcg-sensia-prompt__input:focus { border-color: var(--fmcg-color-sensia); }

/* ---------- Save status and chart thumbnail ---------- */
.fmcg-save-status { display: inline-flex; align-items: center; gap: var(--fmcg-space-2); font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); white-space: nowrap; }
.fmcg-save-status__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--fmcg-color-positive); }
.fmcg-save-status--saving .fmcg-save-status__dot { background: var(--fmcg-color-caution); }

.fmcg-thumb {
  display: flex; align-items: flex-end; gap: calc(var(--fmcg-space-1) / 2);
  width: 2.75rem; height: 2rem;
  padding: var(--fmcg-space-1) var(--fmcg-space-2);
  border-radius: var(--fmcg-radius-md);
  background: var(--fmcg-color-accent-soft);
}
.fmcg-thumb__bar { flex: 1; border-radius: 2px 2px 0 0; background: var(--fmcg-color-chart-primary); }
.fmcg-thumb__bar--highlight { background: var(--fmcg-color-chart-highlight); }

/* ---------- Dashboard tiles (TileGrid, Tile, TileControls, AddTile) ---------- */
.fmcg-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--fmcg-space-5); }
.fmcg-tile { min-width: 0; }
.fmcg-tile--wide { grid-column: 1 / -1; }
.fmcg-tile__controls { display: inline-flex; gap: var(--fmcg-space-1); opacity: 0; transition: opacity var(--fmcg-motion-fast); }
.fmcg-tile:hover .fmcg-tile__controls, .fmcg-tile:focus-within .fmcg-tile__controls { opacity: 1; }
.fmcg-add-tile {
  display: flex; align-items: center; justify-content: center;
  min-height: 8rem;
  padding: var(--fmcg-space-6);
  border: 1px dashed var(--fmcg-color-border-strong);
  border-radius: var(--fmcg-radius-lg);
  background: transparent;
  color: var(--fmcg-color-text-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.fmcg-add-tile:hover { border-color: var(--fmcg-color-selected); color: var(--fmcg-color-heading); }
/* Touch screens have no hover, so arrange controls stay visible. */
@media (hover: none) { .fmcg-tile__controls { opacity: 1; } }
@media (max-width: 60rem) { .fmcg-tile-grid { grid-template-columns: 1fr; } }

/* ---------- Charts ---------- */
.fmcg-tone-primary { background: var(--fmcg-color-chart-primary); color: var(--fmcg-color-text-on-accent); }
.fmcg-tone-highlight { background: var(--fmcg-color-chart-highlight); color: var(--fmcg-color-chart-on-highlight); }
.fmcg-tone-muted { background: var(--fmcg-color-chart-muted); color: var(--fmcg-color-text); }
.fmcg-tone-total { background: var(--fmcg-color-chart-total); color: var(--fmcg-color-text-on-accent); }
.fmcg-tone-series-1 { background: var(--fmcg-color-chart-series-1); color: var(--fmcg-color-text-on-accent); }
.fmcg-tone-series-2 { background: var(--fmcg-color-chart-series-2); color: var(--fmcg-color-text-on-accent); }
.fmcg-tone-series-3 { background: var(--fmcg-color-chart-series-3); color: var(--fmcg-color-text); }
.fmcg-tone-scale-1 { background: var(--fmcg-color-chart-scale-1); color: var(--fmcg-color-text-on-accent); }
.fmcg-tone-scale-2 { background: var(--fmcg-color-chart-scale-2); color: var(--fmcg-color-text); }
.fmcg-tone-scale-3 { background: var(--fmcg-color-chart-scale-3); color: var(--fmcg-color-text); }
.fmcg-tone-scale-4 { background: var(--fmcg-color-chart-scale-4); color: var(--fmcg-color-text); }
.fmcg-tone-scale-5 { background: var(--fmcg-color-chart-scale-5); color: var(--fmcg-color-text-on-accent); }

.fmcg-chart {
  margin: 0;
  padding: var(--fmcg-space-6);
  background: var(--fmcg-color-bg-raised);
  border: 1px solid var(--fmcg-color-border);
  border-radius: var(--fmcg-radius-lg);
  box-shadow: var(--fmcg-shadow-md);
}
.fmcg-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fmcg-space-3); margin-bottom: var(--fmcg-space-5); }
.fmcg-chart__title { flex: 1; min-width: 0; font-size: var(--fmcg-font-size-sm); font-weight: 600; color: var(--fmcg-color-text-muted); }
.fmcg-chart__note { font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); white-space: nowrap; }
.fmcg-chart__source {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--fmcg-space-2);
  margin-top: var(--fmcg-space-5);
  font-size: var(--fmcg-font-size-xs);
  color: var(--fmcg-color-text-muted);
}

.fmcg-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fmcg-space-3); }
.fmcg-bars__row { display: grid; grid-template-columns: minmax(6rem, 10.5rem) 1fr 4rem; align-items: center; gap: var(--fmcg-space-4); }
.fmcg-bars:not(:has(.fmcg-bars__delta)) .fmcg-bars__row { grid-template-columns: minmax(6rem, 10.5rem) 1fr; }
.fmcg-bars__label { font-size: var(--fmcg-font-size-sm); color: var(--fmcg-color-text-muted); text-align: right; line-height: 1.3; }
.fmcg-bars__row--total .fmcg-bars__label { font-weight: 700; color: var(--fmcg-color-heading); }
.fmcg-bars__track { height: 1.5625rem; overflow: hidden; background: var(--fmcg-color-chart-track); border-radius: var(--fmcg-radius-sm); }
.fmcg-bars__fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; border-radius: var(--fmcg-radius-sm); transition: width var(--fmcg-motion-base) ease; }
.fmcg-bars__fill--labelled { min-width: 2.75rem; padding-right: var(--fmcg-space-2); }
.fmcg-bars__value { font-size: var(--fmcg-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.fmcg-bars__delta { font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }

.fmcg-grouped { display: flex; flex-direction: column; gap: var(--fmcg-space-4); }
.fmcg-grouped__name { margin: 0 0 var(--fmcg-space-1); font-size: var(--fmcg-font-size-sm); font-weight: 600; color: var(--fmcg-color-text-muted); }
.fmcg-grouped__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fmcg-space-1); }
.fmcg-grouped__row { display: grid; grid-template-columns: 3.5rem 1fr 3rem; align-items: center; gap: var(--fmcg-space-2); }
.fmcg-grouped__tag { font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); text-align: right; }
.fmcg-grouped__track { height: 0.9375rem; overflow: hidden; background: var(--fmcg-color-chart-track); border-radius: var(--fmcg-radius-sm); }
.fmcg-grouped__fill { display: block; height: 100%; border-radius: var(--fmcg-radius-sm); transition: width var(--fmcg-motion-base) ease; }
.fmcg-grouped__value { font-size: var(--fmcg-font-size-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fmcg-color-text); }

.fmcg-columns__plot { display: flex; align-items: flex-end; gap: var(--fmcg-space-4); height: 14rem; padding: var(--fmcg-space-5) var(--fmcg-space-2) 0; border-bottom: 2px solid var(--fmcg-color-border); }
.fmcg-columns__group { display: flex; flex: 1; align-items: flex-end; gap: var(--fmcg-space-1); height: 100%; }
.fmcg-columns__bar { position: relative; flex: 1; border-radius: var(--fmcg-radius-sm) var(--fmcg-radius-sm) 0 0; transition: height var(--fmcg-motion-base) ease; }
.fmcg-columns__value { position: absolute; bottom: 100%; left: 0; right: 0; padding-bottom: var(--fmcg-space-1); text-align: center; font-size: var(--fmcg-font-size-xs); font-weight: 700; color: var(--fmcg-color-heading); }
.fmcg-columns__axis { display: flex; gap: var(--fmcg-space-4); padding: var(--fmcg-space-2) var(--fmcg-space-2) 0; }
.fmcg-columns__axis span { flex: 1; text-align: center; font-size: var(--fmcg-font-size-xs); line-height: 1.3; color: var(--fmcg-color-text-muted); }

.fmcg-stacked + .fmcg-stacked { margin-top: var(--fmcg-space-5); }
.fmcg-stacked__head { display: flex; justify-content: space-between; gap: var(--fmcg-space-2); margin-bottom: var(--fmcg-space-2); font-size: var(--fmcg-font-size-sm); font-weight: 600; color: var(--fmcg-color-text-muted); }
.fmcg-stacked__summary { font-weight: 700; color: var(--fmcg-color-heading); }
.fmcg-stacked__bar { display: flex; height: 2.125rem; overflow: hidden; border-radius: var(--fmcg-radius-md); }
.fmcg-stacked__segment { display: flex; align-items: center; justify-content: center; flex-basis: 0; min-width: 1.5rem; font-size: var(--fmcg-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; }

.fmcg-legend { list-style: none; margin: var(--fmcg-space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fmcg-space-2) var(--fmcg-space-4); }
.fmcg-legend__item { display: inline-flex; align-items: center; gap: var(--fmcg-space-2); font-size: var(--fmcg-font-size-xs); color: var(--fmcg-color-text-muted); }
.fmcg-legend__swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; }

@media (max-width: 40rem) {
  .fmcg-chart { padding: var(--fmcg-space-4); }
  .fmcg-chart__head { flex-wrap: wrap; }
  .fmcg-bars__row, .fmcg-bars:not(:has(.fmcg-bars__delta)) .fmcg-bars__row { grid-template-columns: 1fr auto; gap: var(--fmcg-space-1) var(--fmcg-space-3); }
  .fmcg-bars__label { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Layout primitives (Stack, Cluster, SplitLayout) ----------
   Last in the file on purpose: they reset their children's outer margins so the gap is the only spacing. */
.fmcg-stack { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fmcg-cluster { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.fmcg-stack > *, .fmcg-cluster > * { margin-top: 0; margin-bottom: 0; }
.fmcg-gap-xs { gap: var(--fmcg-space-1); }
.fmcg-gap-sm { gap: var(--fmcg-space-2); }
.fmcg-gap-md { gap: var(--fmcg-space-4); }
.fmcg-gap-lg { gap: var(--fmcg-space-5); }
.fmcg-gap-xl { gap: var(--fmcg-space-6); }
.fmcg-cluster--justify-start { justify-content: flex-start; }
.fmcg-cluster--justify-center { justify-content: center; }
.fmcg-cluster--justify-between { justify-content: space-between; }
.fmcg-cluster--justify-end { justify-content: flex-end; }
.fmcg-cluster--align-start { align-items: flex-start; }
.fmcg-cluster--align-center { align-items: center; }
.fmcg-cluster--align-end { align-items: flex-end; }
.fmcg-cluster--align-baseline { align-items: baseline; }
.fmcg-cluster--grow { flex: 1; min-width: 0; }

.fmcg-split { display: grid; align-items: start; }
.fmcg-split > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
.fmcg-split--wide-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.fmcg-split--main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.fmcg-split--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fmcg-split--sidebar { grid-template-columns: minmax(0, 1fr) 15rem; }
@media (max-width: 60rem) { .fmcg-split { grid-template-columns: 1fr; } }

/* ---------- Animations ---------- */
@keyframes fmcg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmcg-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fmcg-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fmcg-spin { to { transform: rotate(360deg); } }
@keyframes fmcg-pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }