/**
 * src/index.css — Vanilla CSS entry point
 *
 * @import this file in any project to get all Roman's Pizza design tokens
 * and component classes in a single stylesheet.
 *
 * Usage:
 *   <link rel="stylesheet" href="https://design.romanspizza.co.za/rp-style.css">
 * or in CSS:
 *   @import "rp-design-system/dist/rp-style.css";
 */

/* Establish cascade layer order — tokens always lose to components, components lose to utilities */
@layer tokens, components, utilities;

/* ── Tokens ── */
/* ── Brand colours ────────────────────────────────────────── */
:root {
  --color-white:             #fff; /* Named alias — avoids bare #fff literals in components */
  --color-brand-blue:       #014085;
  --color-brand-blue-dark:  #012d5e;
  --color-brand-blue-light: #0260c9;
  --color-brand-blue-glow:  rgb(1 64 133 / 25%);
  --color-brand-red:        #ed1c24;
  --color-brand-red-dark:   #c41820;

  /* Gradient helpers */
  --gradient-brand-blue: linear-gradient(135deg, #014085, #0260c9);
  --gradient-sidebar:    linear-gradient(180deg, #012d5e 0%, #014085 50%, #01336e 100%);
}

/* ── MD3-style Surface System (Light) ──────────────────────── */
:root {
  --color-surface:                #fff;
  --color-surface-dim:            #f8f9fa;
  --color-surface-container:      #f3f4f6;
  --color-surface-container-high: #e5e7eb;
  --color-surface-variant:        #eef2f7;
  --color-on-surface:             #111827;
  --color-on-surface-muted:       #6b7280;
  --color-outline:                #d1d5db;
  --color-outline-variant:        #e5e7eb;

  /* Legacy Radix-compatible aliases used by the CMS sidebar */
  --color-background:             #f3f4f6;
}

/* ── Dark Mode Surface Overrides ─────────────────────────── */
[data-theme="dark"] {
  --color-surface:                #0f1117;
  --color-surface-dim:            #141720;
  --color-surface-container:      #1a1d2b;
  --color-surface-container-high: #222638;
  --color-surface-variant:        #1e2235;
  --color-on-surface:             #f1f5f9;
  --color-on-surface-muted:       #94a3b8;
  --color-outline:                #3f4f6a;
  --color-outline-variant:        #2a3348;
  --color-background:             #0f1117;
}

/* ── Semantic Status Colours ──────────────────────────────── */
:root {
  --color-success:       #22c55e;
  --color-success-light: #dcfce7;

  /* "on" = text colour rendered on top of the *-light surface */
  --color-success-on:    #15803d;
  --color-warning:       #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-on:    #b45309;
  --color-error:         #ef4444;
  --color-error-light:   #fee2e2;
  --color-error-on:      #b91c1c;

  /* Darker shade used for hover/active states (e.g. danger button) */
  --color-error-dark:    #dc2626;
  --color-info:          #3b82f6;
  --color-info-light:    #dbeafe;
  --color-info-on:       #1d4ed8;
}

[data-theme="dark"] {
  --color-success-light: rgb(34 197 94 / 18%);

  /* Dark-mode "on" colours flip to lighter tints for legibility */
  --color-success-on:    #86efac;
  --color-warning-light: rgb(245 158 11 / 18%);
  --color-warning-on:    #fcd34d;
  --color-error-light:   rgb(239 68 68 / 18%);
  --color-error-on:      #fca5a5;
  --color-info-light:    rgb(59 130 246 / 18%);
  --color-info-on:       #93c5fd;
}

/* ── CSAT Rating Colour Scale ─────────────────────────────── */

/* 5 stars → green, 4 → lime, 3 → amber, 2 → orange, 1 → red */
:root {
  --color-rating-5: #22c55e;
  --color-rating-4: #84cc16;
  --color-rating-3: #eab308;
  --color-rating-2: #f97316;
  --color-rating-1: #ef4444;
}

/* ── Sentiment Colour Scale ───────────────────────────────── */
:root {
  /* Positive — emerald family */
  --color-sentiment-pos-start:  #10b981;
  --color-sentiment-pos-end:    #059669;
  --color-sentiment-pos-bg:     linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  --color-sentiment-pos-border: rgb(16 185 129 / 40%);
  --color-sentiment-pos-text:   #065f46;
  --color-sentiment-pos-shadow: rgb(16 185 129 / 15%);

  /* Negative — rose family */
  --color-sentiment-neg-start:  #f43f5e;
  --color-sentiment-neg-end:    #e11d48;
  --color-sentiment-neg-bg:     linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
  --color-sentiment-neg-border: rgb(244 63 94 / 40%);
  --color-sentiment-neg-text:   #9f1239;
  --color-sentiment-neg-shadow: rgb(244 63 94 / 15%);
}

/* Dark-mode overrides — use [data-theme="dark"] per AGENTS.md rule §3 */
[data-theme="dark"] {
  --color-sentiment-pos-bg:     linear-gradient(135deg, rgb(16 185 129 / 22%) 0%, rgb(5 150 105 / 18%) 100%);
  --color-sentiment-pos-border: rgb(16 185 129 / 40%);
  --color-sentiment-pos-text:   #6ee7b7;
  --color-sentiment-neg-bg:     linear-gradient(135deg, rgb(244 63 94 / 22%) 0%, rgb(225 29 72 / 18%) 100%);
  --color-sentiment-neg-border: rgb(244 63 94 / 40%);
  --color-sentiment-neg-text:   #fda4af;
}

/* ── Elevation Shadows ────────────────────────────────────── */
:root {
  --shadow-xs:         0 1px 2px rgb(0 0 0 / 5%);
  --shadow-sm:         0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-md:         0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 4%);
  --shadow-lg:         0 10px 15px rgb(0 0 0 / 5%), 0 4px 6px rgb(0 0 0 / 3%);
  --shadow-glow:       0 0 24px rgb(1 64 133 / 15%);

  /* Component-semantic aliases */
  --shadow-card:       0 1px 3px rgb(0 0 0 / 7%), 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-card-hover: 0 6px 20px rgb(1 64 133 / 10%), 0 2px 8px rgb(0 0 0 / 6%);
  --shadow-section:    0 2px 8px rgb(0 0 0 / 6%);
  --shadow-pop:        0 12px 32px rgb(0 0 0 / 12%), 0 4px 12px rgb(0 0 0 / 8%);
}

[data-theme="dark"] {
  --shadow-xs:         0 1px 2px rgb(0 0 0 / 40%);
  --shadow-sm:         0 1px 3px rgb(0 0 0 / 50%);
  --shadow-md:         0 4px 6px rgb(0 0 0 / 50%);
  --shadow-lg:         0 10px 15px rgb(0 0 0 / 60%);
  --shadow-glow:       0 0 24px rgb(1 64 133 / 25%);
  --shadow-card:       0 1px 4px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 4%);
  --shadow-card-hover: 0 6px 20px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 7%);
  --shadow-section:    0 2px 8px rgb(0 0 0 / 40%);
  --shadow-pop:        0 12px 32px rgb(0 0 0 / 60%), 0 4px 12px rgb(0 0 0 / 40%);
}

/* ── Spacing Scale ────────────────────────────────────────── */
:root {
  --spacing-page:    2rem;     /* Outer page padding */
  --spacing-section: 2rem;     /* Gap between major page sections */
  --spacing-card:    1.375rem; /* Internal card padding */

  /* ── Numeric Scale ── */
  --spacing-1:       0.25rem;  /* 4px  */
  --spacing-2:       0.5rem;   /* 8px  */
  --spacing-3:       0.75rem;  /* 12px */
  --spacing-4:       1rem;     /* 16px */
  --spacing-5:       1.25rem;  /* 20px */
  --spacing-6:       1.5rem;   /* 24px */
  --spacing-8:       2rem;     /* 32px */
  --spacing-12:      3rem;     /* 48px */
  --spacing-16:      4rem;     /* 64px */
}

/* ── Shape (MD3 Border-Radius Scale) ──────────────────────── */
:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* ── Motion Tokens ────────────────────────────────────────── */
:root {
  /* Duration */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Easing curves */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-settle: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Named animation durations */
  --duration-bar:     700ms; /* Bar chart fill animation */
  --duration-fade:    350ms; /* Section fade-up entrance */
  --duration-stagger: 60ms;  /* Per-item delay for sequential stagger */
}

/* ── Z-Index Layers ───────────────────────────────────────── */
:root {
  --z-index-base:     1;   /* Default stacking for positioned elements */
  --z-index-sticky:   100; /* Sticky table headers, fixed navigation */
  --z-index-dropdown: 200; /* Dropdown menus, popovers */
  --z-index-modal:    300; /* Modal overlays and dialogs */
  --z-index-toast:    400; /* Toast notifications, always on top */
}

/* ── Typography Tokens ────────────────────────────────────── */
:root {
  /* Font Sizes */
  --font-size-2xs:    0.625rem;  /* 10px */
  --font-size-xs:     0.6875rem; /* 11px */
  --font-size-xs-alt: 0.7rem;    /* 11.2px — bar-chart distribution labels */
  --font-size-sm:     0.75rem;   /* 12px */
  --font-size-sm-alt: 0.8rem;    /* 12.8px — bar-chart labels */
  --font-size-base:   0.8125rem; /* 13px — button, input, card, layout default */
  --font-size-md:     0.875rem;  /* 14px — table body */
  --font-size-md-alt: 0.9375rem; /* 15px — button-lg, empty-state, layout */
  --font-size-lg:     1rem;      /* 16px */
  --font-size-xl:     1.25rem;   /* 20px — modal title */
  --font-size-2xl:    1.375rem;  /* 22px — page header */
  --font-size-3xl:    1.875rem;  /* 30px — stat card value */
  --font-size-4xl:    2.5rem;    /* 40px — empty-state icon */

  /* Line Heights */
  --line-height-tight:   1.15;
  --line-height-snug:    1.2;
  --line-height-normal:  1.4;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.6;

  /* Letter Spacing */
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:   0.01em;
  --letter-spacing-wide:     0.04em;
  --letter-spacing-wider:    0.07em;
  --letter-spacing-widest:   0.075em;

  /* Font Weights */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
}

/**
 * src/tokens/theme-fallback.css — CSS-only dark mode fallback (DARK-02)
 *
 * PURPOSE: Provide dark mode support when JavaScript is disabled.
 * Duplicates the [data-theme="dark"] overrides from surface.css, semantic.css,
 * sentiment.css, and shadows.css inside a prefers-color-scheme media query.
 *
 * WHY DUPLICATE: The primary mechanism uses [data-theme="dark"] which is set by JS.
 * This @media block ensures dark mode still works in no-JS environments by
 * matching the OS preference directly in CSS.
 *
 * NOTE: This file must be kept in sync with the [data-theme="dark"] blocks
 * in the other token files. When updating dark overrides, update both.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── Surface overrides (from surface.css) ──────────────── */
    --color-surface:                #0f1117;
    --color-surface-dim:            #141720;
    --color-surface-container:      #1a1d2b;
    --color-surface-container-high: #222638;
    --color-surface-variant:        #1e2235;
    --color-on-surface:             #f1f5f9;
    --color-on-surface-muted:       #94a3b8;
    --color-outline:                #3f4f6a;
    --color-outline-variant:        #2a3348;
    --color-background:             #0f1117;

    /* ── Semantic overrides (from semantic.css) ────────────── */
    --color-success-light: rgb(34 197 94 / 18%);
    --color-success-on:    #86efac;
    --color-warning-light: rgb(245 158 11 / 18%);
    --color-warning-on:    #fcd34d;
    --color-error-light:   rgb(239 68 68 / 18%);
    --color-error-on:      #fca5a5;
    --color-info-light:    rgb(59 130 246 / 18%);
    --color-info-on:       #93c5fd;

    /* ── Sentiment overrides (from sentiment.css) ─────────── */
    --color-sentiment-pos-bg:     linear-gradient(135deg, rgb(16 185 129 / 22%) 0%, rgb(5 150 105 / 18%) 100%);
    --color-sentiment-pos-border: rgb(16 185 129 / 40%);
    --color-sentiment-pos-text:   #6ee7b7;
    --color-sentiment-neg-bg:     linear-gradient(135deg, rgb(244 63 94 / 22%) 0%, rgb(225 29 72 / 18%) 100%);
    --color-sentiment-neg-border: rgb(244 63 94 / 40%);
    --color-sentiment-neg-text:   #fda4af;

    /* ── Shadow overrides (from shadows.css) ───────────────── */
    --shadow-xs:         0 1px 2px rgb(0 0 0 / 40%);
    --shadow-sm:         0 1px 3px rgb(0 0 0 / 50%);
    --shadow-md:         0 4px 6px rgb(0 0 0 / 50%);
    --shadow-lg:         0 10px 15px rgb(0 0 0 / 60%);
    --shadow-glow:       0 0 24px rgb(1 64 133 / 25%);
    --shadow-card:       0 1px 4px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 4%);
    --shadow-card-hover: 0 6px 20px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 7%);
    --shadow-section:    0 2px 8px rgb(0 0 0 / 40%);
    --shadow-pop:        0 12px 32px rgb(0 0 0 / 60%), 0 4px 12px rgb(0 0 0 / 40%);
  }
}


/* ── Components ── */
/* ── CSS Reset (scoped to rp- components) ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Better font rendering across platforms */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global :focus-visible base — keyboard-only focus ring (CFIX-03)
 * Shows on keyboard navigation only (not mouse clicks).
 * Individual components may override with more specific styles. */
:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ── Shared Keyframes ─────────────────────────────────────── */

/* Fade up — used for stat card entrance with staggered --delay */
@keyframes rp-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pop in — used for highlight cards */
@keyframes rp-pop-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Bar grow — GPU-accelerated scaleX for bar charts */
@keyframes rp-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(var(--bar-scale, 0)); }
}

/* Shimmer sweep — for progress bars and loading skeletons */
@keyframes rp-shimmer {
  0%   { left: -100%; }
  100% { left:  100%; }
}

/* Spin — loading spinners */
@keyframes rp-spin {
  to { transform: rotate(360deg); }
}

/* Slide up — modal entrance */
@keyframes rp-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Donut segment draw-in */
@keyframes rp-donut-draw {
  0% { stroke-dashoffset: var(--rp-donut-circ, 276.5); opacity: 0; }
  30%  { opacity: 1; }
  100%   { stroke-dashoffset: 0; }
}

/* ── Layout helpers ───────────────────────────────────────── */

/* Page wrapper — centres content, adds lateral padding.
   Safe-area insets (A11Y-09) are folded into each side's padding so
   notched devices are respected without a separate rule that would
   override the breakpoint-specific paddings in responsive.css.
   env() resolves to 0 on devices without a notch. */
.rp-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0
    max(var(--spacing-page, 2rem), env(safe-area-inset-right))
    max(3rem, env(safe-area-inset-bottom))
    max(var(--spacing-page, 2rem), env(safe-area-inset-left));
}

/* Standard page header row: title-block on left, actions on right */
.rp-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: 1.5rem;
}

/* H1 / H2 inside a page header */
.rp-page-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.375rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-on-surface);
  line-height: 1.2;
  margin: 0;
}

/* Muted subtitle / date-range beneath the page title */
.rp-page-subtitle {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-on-surface-muted);
  margin-top: 0.2rem;
}

/* Section wrapper — creates consistent vertical rhythm */
.rp-section { margin-bottom: var(--spacing-section, 2rem); }

/* Section heading: icon + label */
.rp-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  margin-bottom: 0.875rem;
}

/* Responsive 4-column stat grid — collapses gracefully */
.rp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* ── Card Surface ─────────────────────────────────────────── */

.rp-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
  padding: var(--spacing-card, 1.375rem);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Opt-in hover lift behaviour */
.rp-card[data-hoverable],
.rp-card--hoverable {
  cursor: pointer;
}

.rp-card[data-hoverable]:hover,
.rp-card--hoverable:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* ── Semantic tint variants ── */
.rp-card--success {
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  background-color: var(--color-success-light);
}

.rp-card--warning {
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  background-color: var(--color-warning-light);
}

.rp-card--error {
  border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
  background-color: var(--color-error-light);
}

.rp-card--info {
  border-color: color-mix(in srgb, var(--color-info) 35%, transparent);
  background-color: var(--color-info-light);
}

/* ── Accent left-border variants ── */
.rp-card--accent-left {
  border-left-width: 4px;
  padding-left: calc(var(--spacing-card, 1.375rem) - 3px);
}
.rp-card--accent-success { border-left-color: var(--color-success); }
.rp-card--accent-warning { border-left-color: var(--color-warning); }
.rp-card--accent-error   { border-left-color: var(--color-error); }
.rp-card--accent-info    { border-left-color: var(--color-info); }

/* ── Stat card variant ── */
.rp-stat-card {
  animation: rp-fade-up var(--duration-fade, 350ms) var(--ease-settle) both;
  animation-delay: var(--delay, 0ms);
}

.rp-card__label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-on-surface-muted);
}

.rp-card__value {
  font-size: 1.875rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-on-surface);
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.rp-card__sub {
  font-size: 0.75rem;
  color: var(--color-on-surface-muted);
  margin-top: 0.25rem;
}

.rp-card__heading {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
  margin-bottom: 0.875rem;
}

/* ── Status Badge ─────────────────────────────────────────── */

.rp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Status dot indicator */
.rp-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentcolor;
  flex-shrink: 0;
}

/* No dot for plain badges */
.rp-badge--no-dot::before { display: none; }

/* ── Colour variants ── */
.rp-badge--success {
  background-color: var(--color-success-light);
  color: var(--color-success-on);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.rp-badge--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-on);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.rp-badge--error {
  background-color: var(--color-error-light);
  color: var(--color-error-on);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}

.rp-badge--info {
  background-color: var(--color-info-light);
  color: var(--color-info-on);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}

.rp-badge--neutral {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-muted);
  border-color: var(--color-outline-variant);
}

.rp-badge--brand {
  background-color: var(--color-brand-blue);
  color: var(--color-white);
  border-color: transparent;
}

/*
 * Dark-mode text overrides are handled automatically by the CSS cascade:
 * semantic.css redefines --color-*-on inside [data-theme="dark"], so no
 * component-level overrides are needed here.
 */

/* ── Button ───────────────────────────────────────────────── */

.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
}

.rp-btn:disabled          { opacity: 0.45; cursor: not-allowed; }

.rp-btn:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

.rp-btn:not(:disabled):active { transform: translateY(0.5px); }

/* ── Primary ── */
.rp-btn--primary {
  background-color: var(--color-brand-blue);
  color: var(--color-white);
}

.rp-btn--primary:hover:not(:disabled) {
  background-color: var(--color-brand-blue-dark);
  box-shadow: 0 2px 8px var(--color-brand-blue-glow);
}

/* ── Ghost / outline ── */
.rp-btn--ghost {
  background-color: transparent;
  color: var(--color-on-surface-muted);
  border-color: var(--color-outline-variant);
}

.rp-btn--ghost:hover:not(:disabled) {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* ── Danger ── */
.rp-btn--danger {
  background-color: var(--color-error);
  color: var(--color-white);
}

.rp-btn--danger:hover:not(:disabled) {
  background-color: var(--color-error-dark);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-error) 30%, transparent);
}

/* ── Icon-only square button ── */
.rp-btn--icon {
  padding: 0.4rem;
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-muted);
  border-color: var(--color-outline-variant);
}

.rp-btn--icon:hover:not(:disabled) {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

/* ── Size modifiers ── */
.rp-btn--sm { padding: 0.28rem 0.625rem; font-size: 0.75rem; }
.rp-btn--lg { padding: 0.65rem 1.25rem;  font-size: 0.9375rem; }

/* ── Data Table ───────────────────────────────────────────── */

.rp-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-card);
}

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.rp-table thead {
  background-color: var(--color-surface-container);
  border-bottom: 1px solid var(--color-outline-variant);
  position: sticky;
  top: 0;
  z-index: 1;
}

.rp-table th {
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-on-surface-muted);
  white-space: nowrap;
}

.rp-table td {
  padding: 0.75rem 1rem;
  color: var(--color-on-surface);
  border-bottom: 1px solid var(--color-outline-variant);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Last row — no bottom border */
.rp-table tbody tr:last-child td { border-bottom: none; }

/* Row hover */
.rp-table tbody tr {
  transition: background-color 0.12s ease;
}

.rp-table tbody tr:hover {
  background-color: var(--color-surface-container);
}

/* Muted cell variant */
.rp-table .rp-cell--muted { color: var(--color-on-surface-muted); }

/* Right-align numeric columns */
.rp-table .rp-cell--num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Sentiment Chip (tag pill) ────────────────────────────── */

.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.4;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  font-size: 0.75rem;
}

.rp-chip:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xs);
}

/*
 * Positive / Negative chips use sentiment token variables defined in
 * src/tokens/sentiment.css. Dark-mode values are automatically applied via
 * the [data-theme="dark"] overrides in that file — no component-level
 * dark selectors needed.
 */
.rp-chip--positive {
  background: var(--color-sentiment-pos-bg);
  border-color: var(--color-sentiment-pos-border);
  color: var(--color-sentiment-pos-text);
  box-shadow: 0 1px 3px var(--color-sentiment-pos-shadow);
}

.rp-chip--negative {
  background: var(--color-sentiment-neg-bg);
  border-color: var(--color-sentiment-neg-border);
  color: var(--color-sentiment-neg-text);
  box-shadow: 0 1px 3px var(--color-sentiment-neg-shadow);
}

.rp-chip--neutral {
  background: var(--color-surface-container);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface-muted);
}

/* Count badge inside chip */
.rp-chip__count {
  opacity: 0.65;
  font-weight: var(--font-weight-medium);
  font-size: 0.85em;
}

/* Clickable variant — resets button styles */
button.rp-chip {
  cursor: pointer;
  font-family: inherit;
  background: none; /* re-applied below by modifier */
}

button.rp-chip:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ── Form Input ───────────────────────────────────────────── */

.rp-input {
  background-color: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  color: var(--color-on-surface);
  font-size: 0.8125rem;
  padding: 0.4rem 0.675rem;
  height: 36px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.rp-input:focus-visible {
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-blue) 20%, transparent);
}

.rp-input::placeholder { color: var(--color-on-surface-muted); }

.rp-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Textarea variant — auto-size height */
textarea.rp-input {
  height: auto;
  min-height: 90px;
  resize: vertical;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Select variant */
select.rp-input { cursor: pointer; }

/* Control label — icon + input inline */
.rp-control-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-muted);
  flex-shrink: 0;
}

/* ── Bar Chart Components ─────────────────────────────────── */

/* Shared bar track (the background rail) */
.rp-bar-track {
  height: 16px;
  background-color: var(--color-surface-container);
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* Bar fill — full-width scaled via CSS transform to avoid reflow */
.rp-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-full);
  transform-origin: left center;
  transform: scaleX(var(--bar-scale, 0));
  animation: rp-bar-grow var(--duration-bar, 700ms) var(--ease-settle) both;
  animation-delay: var(--delay, 0ms);
}

/* ── Rating fills (1–5 stars) ── */
.rp-bar-fill--rating-5 { background: linear-gradient(90deg, var(--color-rating-5), #16a34a); }
.rp-bar-fill--rating-4 { background: linear-gradient(90deg, var(--color-rating-4), #65a30d); }
.rp-bar-fill--rating-3 { background: linear-gradient(90deg, var(--color-rating-3), #d97706); }
.rp-bar-fill--rating-2 { background: linear-gradient(90deg, var(--color-rating-2), #ea580c); }
.rp-bar-fill--rating-1 { background: linear-gradient(90deg, var(--color-rating-1), #dc2626); }

/* ── Sentiment fills ── */
.rp-bar-fill--positive {
  background: linear-gradient(90deg, var(--color-sentiment-pos-start), var(--color-sentiment-pos-end));
}

.rp-bar-fill--negative {
  background: linear-gradient(90deg, var(--color-sentiment-neg-start), var(--color-sentiment-neg-end));
}

/* ── Brand fill ── */
.rp-bar-fill--brand { background: var(--gradient-brand-blue); }

/* ── Rating distribution row ── */
.rp-dist-row {
  display: grid;
  grid-template-columns: 28px 1fr 48px 44px;
  align-items: center;
  gap: 0.5rem;
}
.rp-dist-label { font-size: 0.8rem; font-weight: var(--font-weight-bold); color: var(--color-on-surface); text-align: right; }
.rp-dist-count { font-size: 0.8rem; font-weight: var(--font-weight-semibold); color: var(--color-on-surface); text-align: right; font-variant-numeric: tabular-nums; }
.rp-dist-pct   { font-size: 0.7rem; color: var(--color-on-surface-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Chart Components ─────────────────────────────────────── */

/**
 * chart.css — CSS components for Chart.js-based charts
 *
 * Provides:
 *   .rp-chart-grid        — 2-col grid (desktop), 1-col (mobile/tablet)
 *   .rp-chart-card        — Card wrapper for individual charts
 *   .rp-chart-header      — Flex row: title + optional controls
 *   .rp-chart-title       — Chart heading text
 *   .rp-chart-canvas-wrap — Fixed-height container for <canvas>
 *
 * Requirements: CNEW-04, CNEW-05, CNEW-06, CHRT-01, CHRT-02
 */

/* ── Grid — 2-col desktop, 1-col mobile/tablet (CHRT-01) ── */
.rp-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6, 1.5rem);
}

/* Full-width chart card spanning both columns */
.rp-chart-grid--full,
.rp-chart-card--full {
  grid-column: 1 / -1;
}

/* ── Chart Card (CNEW-04) ── */
.rp-chart-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
  padding: var(--spacing-card, 1.375rem);
  box-shadow: var(--shadow-card);
}

/* ── Chart Header (CNEW-05) ── */
.rp-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3, 0.75rem);
  margin-bottom: var(--spacing-4, 1rem);
}

/* ── Chart Title (CNEW-05) ── */
.rp-chart-title {
  font-size: var(--font-size-base, 0.8125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-on-surface);
  line-height: var(--line-height-normal, 1.4);
  margin: 0;
}

/* ── Canvas Wrapper (CNEW-06) ── */

/* Container constrains the Chart.js canvas to a predictable height.
   The canvas itself should be created with { responsive: true, maintainAspectRatio: false }. */
.rp-chart-canvas-wrap {
  position: relative;
  height: 300px;
  width: 100%;
}

/* Ensure the canvas fills its wrapper */
.rp-chart-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Responsive — mobile + tablet (≤ 1023px) ── */
@media (width <= 1023px) {
  /* Stack chart grid to single column (CHRT-01) */
  .rp-chart-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive — mobile only (≤ 767px) ── */
@media (width <= 767px) {
  /* Reduce canvas height on mobile (CHRT-02) */
  .rp-chart-canvas-wrap {
    height: 220px;
  }

  /* Tighter card padding on mobile — consistent with .rp-card mobile override */
  .rp-chart-card {
    padding: var(--spacing-4, 1rem);
    border-radius: var(--radius-md, 0.75rem);
  }

  /* Stack header vertically if it contains controls alongside the title */
  .rp-chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Slightly smaller title on mobile */
  .rp-chart-title {
    font-size: var(--font-size-sm, 0.75rem);
  }
}

/* ── Modal Overlay + Card ─────────────────────────────────── */

.rp-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 55%);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;

  /* Backdrop fades in */
  animation: rp-fade-up 0.2s ease both;
}

.rp-modal-card {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-pop);
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: rp-slide-up 0.25s var(--ease-spring) both;
}

/* Close button — absolute top-right */
.rp-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--color-surface-container);
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-on-surface-muted);
  transition: background 0.15s ease;
}
.rp-modal-close:hover { background: var(--color-surface-container-high); }

.rp-modal-close:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* Modal title */
.rp-modal-title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-on-surface);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

/* ── Empty & Loading States ───────────────────────────────── */

.rp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-on-surface-muted);
}

.rp-empty-state__icon {
  font-size: 2.5rem;
  opacity: 0.4;
}

.rp-empty-state__title {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
}

.rp-empty-state__body {
  font-size: 0.8125rem;
  max-width: 280px;
  line-height: 1.6;
}

/* Loading spinner */
.rp-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-outline-variant);
  border-top-color: var(--color-brand-blue);
  border-radius: 50%;
  animation: rp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Skeleton placeholder */
.rp-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-container) 25%,
    var(--color-surface-container-high) 50%,
    var(--color-surface-container) 75%
  );
  background-size: 200% 100%;
  animation: rp-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* ── Accessibility Utilities ──────────────────────────────── */

/**
 * Screen-reader-only utility — visually hidden but accessible
 * to assistive technologies. Standard clip-rect pattern.
 */
.rp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/**
 * Reduced motion — disables all animations and transitions for users
 * who have enabled "Reduce motion" in their OS accessibility settings.
 * Uses 0.01ms instead of 0 so animationend events still fire.
 * !important is required to override component-level specificity.
 */
@media (prefers-reduced-motion: reduce) {
  /* stylelint-disable declaration-no-important */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* stylelint-enable declaration-no-important */
}

/**
 * High contrast — bolder borders and improved muted text contrast
 * for users who have enabled "Increase contrast" in their OS settings.
 * Overrides token values so all components automatically benefit.
 */
@media (prefers-contrast: more) {
  :root {
    --color-outline: #9ca3af;
    --color-outline-variant: #9ca3af;
    --color-on-surface-muted: #374151;
  }

  [data-theme="dark"] {
    --color-outline: #94a3b8;
    --color-outline-variant: #64748b;
    --color-on-surface-muted: #cbd5e1;
  }
}

/* ── Responsive Overrides ─────────────────────────────────── */

/**
 * responsive.css — Mobile-first responsive layer
 *
 * This file contains ALL viewport-dependent overrides for the
 * RP Design System. Every rule lives inside a media query to
 * guarantee zero effect on desktop layout.
 *
 * ┌─────────────────────────────────────────────────────────────┐
 * │  BREAKPOINT ARCHITECTURE                                    │
 * ├──────────────┬──────────────────────────────────────────────┤
 * │  Mobile      │  max-width: 767px  (min supported: 375px)   │
 * │  Tablet      │  min-width: 768px  AND  max-width: 1023px   │
 * │  Desktop     │  min-width: 1024px  (default / no query)    │
 * ├──────────────┼──────────────────────────────────────────────┤
 * │  COMBINED QUERIES                                           │
 * ├──────────────┼──────────────────────────────────────────────┤
 * │  ≤ Tablet    │  max-width: 1023px  (mobile + tablet)       │
 * │  ≥ Tablet    │  min-width: 768px   (tablet + desktop)      │
 * └──────────────┴──────────────────────────────────────────────┘
 *
 * Design principle: Desktop styles are the default in each
 * component file. This file only _overrides_ at narrower
 * viewports so existing desktop appearance is never affected.
 */

/* ================================================================
 *  MOBILE  —  max-width: 767px
 * ================================================================ */
@media (width <= 767px) {
  /* ── Overflow prevention ────────────────────────────────── */

  /* Prevent accidental horizontal scroll on mobile (UTIL-05) */
  html,
  body {
    overflow-x: hidden;
  }

  /* ── Typography ─────────────────────────────────────────── */

  /* Scale headings and data values down for phone screens.
     Body text (0.8125rem / 13px) stays unchanged — already
     optimised for mobile reading (TYPO-01). */

  /* h1 — 20px on mobile (desktop: 22px / 1.375rem) (TYPO-02) */
  .rp-page-title {
    font-size: 1.25rem;
  }

  /* h2 — 18px on mobile (desktop: 15px / 0.9375rem) (TYPO-02) */
  .rp-section-title {
    font-size: 1.125rem;
  }

  /* Stat values — 24px on mobile (desktop: 30px / 1.875rem) (TYPO-03) */
  .rp-card__value {
    font-size: 1.5rem;
  }

  /* Labels, badges, table headers — 10px minimum (TYPO-04, TYPO-05)
     No text element may go below 0.625rem (10px). */
  .rp-card__label,
  .rp-badge,
  .rp-table th {
    font-size: 0.625rem;
  }

  /* ── Touch targets ──────────────────────────────────────── */

  /* Ensure all interactive elements meet the 44px WCAG touch
     target guideline on mobile (TOUC-01 through TOUC-06). */

  /* Standard buttons — 44px touch target (TOUC-01) */
  .rp-btn {
    min-height: 44px;
  }

  /* Small buttons — 36px compact exemption (TOUC-02) */
  .rp-btn--sm {
    min-height: 36px;
  }

  /* Icon buttons — 44×44px square touch target (TOUC-03) */
  .rp-btn--icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Inputs and selects — 44px touch target (TOUC-04)
     A font-size of at least 1rem (16px) prevents iOS Safari
     auto-zoom on focus without disabling user zoom (TOUC-06).
     Note: max(1rem, inherit) is invalid CSS — CSS-wide keywords
     cannot appear inside math functions, so the declaration was
     silently dropped. max(1rem, 1em) is the valid equivalent
     (in font-size, 1em resolves to the inherited size). */
  .rp-input,
  select.rp-input {
    min-height: 44px;
    font-size: max(1rem, 1em);
  }

  /* Textareas — exempt from min-height, sizes by rows (TOUC-05)
     Still gets iOS zoom prevention via font-size override */
  textarea.rp-input {
    min-height: auto;
    font-size: max(1rem, 1em);
  }

  /* ── Spacing ────────────────────────────────────────────── */

  /* Tighter spacing on mobile to maximise usable content area. */

  /* Card — reduced padding (SPAC-01) + tighter radius (COMP-05) */
  .rp-card {
    padding: 1rem;
    border-radius: var(--radius-md, 0.75rem);
  }

  /* Table — compact cell padding (SPAC-02) */
  .rp-table th,
  .rp-table td {
    padding: 0.5rem 0.625rem;
  }

  /* Modal — reduced padding (SPAC-03) + constrained viewport (COMP-04) */
  .rp-modal-card {
    padding: 1.5rem;
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Page header — reduced bottom spacing (SPAC-04) + vertical stack (COMP-08) */
  .rp-page-header {
    padding-bottom: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Section — tighter vertical rhythm (SPAC-05) */
  .rp-section {
    margin-bottom: 1.25rem;
  }

  /* Page — mobile lateral padding gives 1rem gutters (SPAC-06, RESP-03)
     At 375px viewport → 375 - 16 - 16 = 343px usable content.
     Safe-area insets (A11Y-09) fold into each side so notched devices
     are respected without losing the 1rem gutter elsewhere. */
  .rp-page {
    padding: 0
      max(1rem, env(safe-area-inset-right))
      max(2rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
  }

  /* ── Layout ─────────────────────────────────────────────── */

  /* Stats grid — single column stack on phones (COMP-01) */
  .rp-stats-grid {
    grid-template-columns: 1fr;
  }

  /* ── Component Responsive Enhancements (Phase 4) ───────── */

  /* Table wrapper — horizontal scroll with touch momentum (COMP-03) */
  .rp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stat cards — disable entrance animations on mobile (COMP-06) */
  .rp-stat-card,
  .rp-card[class*="stat"] {
    animation: none;
  }

  /* Empty state — scale icons down to 32px (COMP-09) */
  .rp-empty-state__icon,
  /* stylelint-disable-next-line selector-class-pattern -- vendor class (Google Material Symbols) */
  .rp-empty-state .material-symbols-rounded {
    font-size: 2rem;
  }

  /* ── Visibility & Stack Utilities (Phase 5) ──────────────── */

  /* Hide element on mobile viewports (UTIL-03) */
  .rp-hide-mobile {
    display: none;
  }

  /* Force flex children to stack vertically on mobile (UTIL-04) */
  .rp-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ================================================================
 *  SHOW-MOBILE — visible only on mobile, hidden on tablet+desktop
 *  (UTIL-03)
 * ================================================================ */
@media (width >= 768px) {
  .rp-show-mobile {
    display: none;
  }
}

/* ================================================================
 *  SAFE AREA INSETS — notched device support (A11Y-09)
 *
 *  Requires <meta name="viewport" content="viewport-fit=cover">
 *  in the consuming page's <head>. The env() values resolve to
 *  0 on devices without a notch, so this is always safe to apply.
 *
 *  Implemented inline in the .rp-page padding declarations — the
 *  desktop default in layout.css and the mobile override above —
 *  rather than as a standalone rule here: an unlayered rule at the
 *  end of the bundle would override the mobile 1rem gutters
 *  (SPAC-06) and shrink the desktop 3rem bottom padding, since
 *  --spacing-page is 2rem and source order wins at equal
 *  specificity regardless of media queries.
 * ================================================================ */

/**
 * src/components/theme-toggle.css — Theme toggle button component (CNEW-01)
 *
 * A button that switches between light and dark themes.
 * Shows a moon icon in light mode (to indicate "switch to dark")
 * and a sun icon in dark mode (to indicate "switch to light").
 *
 * USAGE:
 *   <button class="rp-theme-toggle" aria-label="Toggle dark mode">
 *     <svg class="rp-theme-toggle__icon--light" data-lucide="moon" width="16" height="16"></svg>
 *     <svg class="rp-theme-toggle__icon--dark" data-lucide="sun" width="16" height="16"></svg>
 *   </button>
 *
 * Icon visibility is controlled via the [data-theme] attribute on <html>.
 * In light mode (default): moon icon visible, sun icon hidden.
 * In dark mode: sun icon visible, moon icon hidden.
 */

/* ── Base toggle button ──────────────────────────────────── */
.rp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface-muted);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.rp-theme-toggle:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border-color: var(--color-outline);
}

.rp-theme-toggle:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ── Icon visibility: light mode (default) ───────────────── */

/* Show moon (suggests "switch to dark"), hide sun */
.rp-theme-toggle__icon--light {
  display: block;
}

.rp-theme-toggle__icon--dark {
  display: none;
}

/* ── Icon visibility: dark mode ──────────────────────────── */

/* Show sun (suggests "switch to light"), hide moon */
[data-theme="dark"] .rp-theme-toggle__icon--light {
  display: none;
}

[data-theme="dark"] .rp-theme-toggle__icon--dark {
  display: block;
}

/* ── Dark mode overrides ─────────────────────────────────── */
[data-theme="dark"] .rp-theme-toggle {
  border-color: var(--color-outline-variant);
  background: var(--color-surface);
  color: var(--color-on-surface-muted);
}

[data-theme="dark"] .rp-theme-toggle:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border-color: var(--color-outline);
}


/* ── Utilities ── */
/* ── Utility Classes ──────────────────────────────────────── */

/**
 * utilities.css — Viewport-agnostic utility helpers
 *
 * These classes work at all breakpoints. Mobile-only visibility
 * and stacking utilities live in responsive.css inside the
 * mobile media query.
 *
 * Requirements: UTIL-01, UTIL-02, CNEW-02, CNEW-03
 */

/* ── Horizontal scroll (UTIL-01) ─────────────────────────── */

/**
 * Horizontal scroll container with touch-momentum scrolling
 * and a thin, unobtrusive scrollbar. Apply to a wrapper element
 * whose children overflow horizontally (e.g. a chip row).
 */
.rp-scroll-x {
  overflow: hidden auto;

  /* Touch momentum for iOS / mobile WebKit */
  -webkit-overflow-scrolling: touch;

  /* Thin scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant, #d1d5db) transparent;
}

/* Thin scrollbar (WebKit / Blink) */
.rp-scroll-x::-webkit-scrollbar {
  height: 4px;
}

.rp-scroll-x::-webkit-scrollbar-track {
  background: transparent;
}

.rp-scroll-x::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #d1d5db);
  border-radius: var(--radius-full, 9999px);
}

/* ── Hidden scrollbar variant (UTIL-02) ──────────────────── */

/**
 * Hides the scrollbar visually while preserving scroll
 * functionality. Useful for horizontal chip/tab rows where
 * the scrollbar would be distracting.
 */
.rp-scroll-x--hidden {
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: none;
}

/* WebKit / Blink */
.rp-scroll-x--hidden::-webkit-scrollbar {
  display: none;
}

/* ── Text truncation (CNEW-02) ───────────────────────────── */

/**
 * Single-line text truncation with ellipsis. The element must
 * have a constrained width (explicit or from its container)
 * for the truncation to take effect.
 */
.rp-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tabular numbers (CNEW-03) ───────────────────────────── */

/**
 * Forces tabular (monospaced) number rendering so that digits
 * line up in columns — critical for stat cards, tables, and
 * any numeric list. Only affects digits; letters remain
 * proportional.
 */
.rp-tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ── Print Styles ─────────────────────────────────────────── */

/**
 * print.css — Clean, readable printed output
 *
 * Hides decorative elements, strips shadows and gradients,
 * ensures readable text contrast on white paper. Applied only
 * inside @media print so zero impact on screen display.
 *
 * Requirement: A11Y-10
 */

@media print {
  /* ── Global resets ──────────────────────────────────────── */
  /* stylelint-disable declaration-no-important */

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* ── Typography ─────────────────────────────────────────── */

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Ensure links are identifiable on paper */
  a,
  a:visited {
    text-decoration: underline !important;
  }

  /* Show URL after external links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: var(--font-weight-regular);
  }

  /* Don't show URL for anchors and JS links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  /* ── Hide non-essential UI ──────────────────────────────── */

  /* Navigation and interactive controls are not useful on paper */
  .rp-theme-toggle,
  .rp-modal,
  .rp-modal-backdrop,
  .rp-btn--icon,
  nav,
  [role="navigation"],
  [aria-hidden="true"] {
    display: none !important;
  }

  /* ── Layout ─────────────────────────────────────────────── */

  /* Let the browser handle page width */
  .rp-page {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Prevent content from being cut off across pages */
  .rp-card,
  .rp-table,
  .rp-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Allow page breaks before major sections */
  .rp-section {
    break-before: auto;
  }

  /* ── Cards ──────────────────────────────────────────────── */

  .rp-card {
    border: 1px solid #d1d5db !important;
  }

  /* ── Tables ─────────────────────────────────────────────── */

  .rp-table {
    border-collapse: collapse;
  }

  .rp-table th,
  .rp-table td {
    border: 1px solid #d1d5db !important;
  }

  /* Repeat table headers on each printed page */
  .rp-table thead {
    display: table-header-group;
  }

  /* ── Images & media ─────────────────────────────────────── */

  img {
    max-width: 100% !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* stylelint-enable declaration-no-important */
}