/* ====================================================
   Open America — Design System
   Civic-tech, data-forward, real-time feel.
   Canonical tokens. Never hardcode colors elsewhere.
==================================================== */

:root {
  /* ---------- Ink (neutrals) — light mode (default) ---------- */
  --ink-950: #050810;
  --ink-900: #0B1220;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-300: #D1D5DB;
  --ink-200: #E5E7EB;
  --ink-100: #F3F4F6;
  --ink-50:  #F9FAFB;
  --paper:   #FFFFFF;

  /* Theme-aware semantic surfaces (these swap in dark mode) */
  --nav-bg:      var(--ink-900);
  --nav-fg:      rgba(255, 255, 255, 0.85);
  --footer-bg:   var(--ink-900);
  --footer-fg:   rgba(255, 255, 255, 0.70);
  --feature-bg:  var(--ink-900);    /* intentionally-dark hero sections */
  --feature-fg:  rgba(255, 255, 255, 0.92);
  --feature-overlay: rgba(255, 255, 255, 0.06);

  /* Constants that never theme (used for fixed-color text on dark heroes) */
  --always-white: #FFFFFF;
  --always-dark:  #0B1220;

  /* ---------- Brand palette — deliberately non-partisan ----------
     We avoid pure electoral blue and pure electoral red anywhere except on
     party identification labels. Primary action color is teal; "live" /
     attention color is warm orange. Gold accent stays as-is. */
  --civic-blue:        #0D9488;   /* TEAL — primary action (links, buttons) */
  --civic-blue-hover:  #0F766E;
  --civic-blue-soft:   #CCFBF1;
  --civic-amber:       #D4AF37;   /* GOLD — accent, secondary */
  --civic-amber-soft:  #FEF3C7;
  --civic-flag-red:    #EA580C;   /* ORANGE — live/active indicators (not red) */
  --civic-orange-soft: #FFEDD5;

  /* Party identity — used ONLY for party D/R/I labels, never decoratively */
  --party-D: #2563EB;   /* Electoral blue, vivid */
  --party-R: #DC2626;   /* Electoral red, vivid */
  --party-I: #6B7280;

  /* States */
  --success: #16A34A;
  --warning: #D97706;
  --danger:  #DC2626;
  --info:    #0891B2;

  /* Plan badge gradients & avatars — surface tokens for tier UI */
  --plan-pro-grad:      linear-gradient(135deg, #FBBF24, #D97706);
  --plan-pro-fg:        #1F1503;
  --plan-pro-avatar:    linear-gradient(135deg, #D97706, #B45309);
  --plan-newsroom-grad: linear-gradient(135deg, #10B981, #047857);
  --plan-newsroom-fg:   #022C22;
  --plan-newsroom-avatar: linear-gradient(135deg, #059669, #047857);
  --plan-member-grad:   linear-gradient(135deg, #5EEAD4, #0D9488);
  --plan-member-fg:     #042F2E;
  --plan-member-avatar: linear-gradient(135deg, var(--civic-blue), var(--civic-blue-hover));
  --plan-free-avatar:   linear-gradient(135deg, var(--civic-blue), #2563EB);

  /* Dark-mode pill / alert accent ramps (semantic, never hardcode elsewhere) */
  --party-D-soft:    rgba(96, 165, 250, 0.18);
  --party-D-soft-fg: #93C5FD;
  --party-R-soft:    rgba(248, 113, 113, 0.18);
  --party-R-soft-fg: #FCA5A5;
  --amber-soft-dark-fg: #FCD34D;
  --success-soft-dark-fg: #86EFAC;
  --alert-success-fg:   #14532D;
  --alert-success-fg-dark: #BBF7D0;
  --alert-info-fg:      var(--civic-blue-hover);
  --alert-info-fg-dark: #BFDBFE;
  --alert-warning-fg:   #78350F;
  --alert-warning-fg-dark: #FDE68A;
  --alert-danger-fg:    #7F1D1D;
  --alert-danger-fg-dark: #FECACA;

  /* Misc tokens */
  --link-dark:           #93C5FD;
  --link-dark-hover:     #BFDBFE;
  --btn-warning-hover:   #B8911E;
  --btn-warning-fg-dark: #1F1503;
  --btn-warning-hover-dark: #E5BE52;
  --dropdown-bg-dark:    #131A2B;
  --civic-amber-bright:  #FCD34D;

  /* ---------- Type ---------- */
  --font-display: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', monospace;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.25rem;     /* 20 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  1.875rem;    /* 30 */
  --fs-3xl:  2.25rem;     /* 36 */
  --fs-4xl:  3rem;        /* 48 */

  /* ---------- Spacing (4px scale) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Radii ---------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(11, 18, 32, 0.08), 0 2px 4px -2px rgba(11, 18, 32, 0.05);
  --shadow-lg: 0 10px 25px -5px rgba(11, 18, 32, 0.10), 0 4px 10px -3px rgba(11, 18, 32, 0.06);
  --shadow-glow-blue: 0 0 0 4px rgba(29, 78, 216, 0.15);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 360ms;

  /* ---------- Layout ---------- */
  --max-w: 1200px;
  --nav-h: 64px;

  /* Bootstrap variable overrides so .btn-warning etc. match our system */
  --bs-primary: var(--ink-900);
  --bs-secondary: var(--civic-amber);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink-800);
}

/* ====================================================
   DARK MODE — inverts the ink scale + tunes accents
   Applied when <html data-theme="dark">
==================================================== */
[data-theme="dark"] {
  --paper:   #131A2B;   /* card / surface */
  --ink-50:  #0A111F;   /* page background */
  --ink-100: #1A2236;   /* subtle alt surface */
  --ink-200: #283045;   /* borders */
  --ink-300: #3D465F;
  --ink-400: #6B7387;
  --ink-500: #9099AD;
  --ink-600: #B3BBCC;
  --ink-700: #D1D7E3;
  --ink-800: #E3E7EF;
  --ink-900: #F3F4F6;   /* primary text */
  --ink-950: #FFFFFF;

  /* Slight bump to accent fills for dark backgrounds */
  --civic-blue-soft:  rgba(96, 165, 250, 0.16);
  --civic-amber-soft: rgba(212, 175, 55, 0.16);

  /* Navbar / footer sit slightly DEEPER than the page bg so they ground the layout */
  --nav-bg:    #060B17;
  --nav-fg:    rgba(255, 255, 255, 0.85);
  --footer-bg: #060B17;
  --footer-fg: rgba(255, 255, 255, 0.7);

  /* Feature surfaces (legislator hero, recent-strip, bill-id tag) sit slightly LIGHTER */
  --feature-bg:      #1A2236;
  --feature-fg:      rgba(255, 255, 255, 0.92);
  --feature-overlay: rgba(255, 255, 255, 0.05);

  /* Heavier shadows so cards feel layered against the dark page */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.65), 0 4px 10px -3px rgba(0, 0, 0, 0.45);
  --shadow-glow-blue: 0 0 0 4px rgba(96, 165, 250, 0.25);

  --bs-body-bg: var(--ink-50);
  --bs-body-color: var(--ink-800);
}

/* Per-component dark-mode tweaks that can't be expressed by token swaps alone */
[data-theme="dark"] .pill.party-D { background: var(--party-D-soft); color: var(--party-D-soft-fg); border-color: rgba(96, 165, 250, 0.3); }
[data-theme="dark"] .pill.party-R { background: var(--party-R-soft); color: var(--party-R-soft-fg); border-color: rgba(248, 113, 113, 0.3); }
[data-theme="dark"] .pill.blue    { background: rgba(96, 165, 250, 0.16); color: var(--party-D-soft-fg); border-color: rgba(96, 165, 250, 0.3); }
[data-theme="dark"] .pill.amber   { background: rgba(212, 175, 55, 0.18); color: var(--amber-soft-dark-fg); border-color: rgba(212, 175, 55, 0.3); }
[data-theme="dark"] .pill.success { background: rgba(34, 197, 94, 0.18); color: var(--success-soft-dark-fg); border-color: rgba(34, 197, 94, 0.3); }

[data-theme="dark"] .alert-success { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); color: var(--alert-success-fg-dark); }
[data-theme="dark"] .alert-info    { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.3); color: var(--alert-info-fg-dark); }
[data-theme="dark"] .alert-warning { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.3); color: var(--alert-warning-fg-dark); }
[data-theme="dark"] .alert-danger  { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: var(--alert-danger-fg-dark); }

[data-theme="dark"] a { color: var(--link-dark); }
[data-theme="dark"] a:hover { color: var(--link-dark-hover); }

[data-theme="dark"] code { background: var(--ink-100); color: var(--ink-800); }

/* Member-card avatar placeholder needs a touch of contrast on dark surfaces */
[data-theme="dark"] .member-card .avatar-placeholder { background: var(--ink-200); }
[data-theme="dark"] .member-card img,
[data-theme="dark"] .member-card .avatar-placeholder { border-color: var(--ink-200); }

/* Buttons */
[data-theme="dark"] .btn-warning { color: var(--btn-warning-fg-dark); }
[data-theme="dark"] .btn-warning:hover { background: var(--btn-warning-hover-dark); border-color: var(--btn-warning-hover-dark); }
[data-theme="dark"] .btn-outline-secondary { color: var(--ink-700); border-color: var(--ink-300); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--ink-100); color: var(--ink-900); }

/* Forms: inputs need a darker fill */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
[data-theme="dark"] .form-control::placeholder { color: var(--ink-500); }

/* Soft "live feed" backdrop on dark mode */
[data-theme="dark"] .recent-strip { background: var(--feature-bg); }
[data-theme="dark"] .recent-strip .feed-item { background: var(--feature-overlay); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .leg-hero { background: var(--feature-bg); }
[data-theme="dark"] .bill-id-tag { background: var(--feature-bg); color: var(--feature-fg); }


/* ====================================================
   Reset / base
==================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ====================================================
   Accessibility — skip link + visible focus ring
==================================================== */

/* Skip link: visually hidden until focused. Keyboard users hit Tab once
   on page load and can jump past the navbar to <main>. */
.oa-skip-link {
  position: absolute;
  left: -10000px;
  top: 8px;
  z-index: 200;
  background: var(--civic-blue);
  color: var(--always-white);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.oa-skip-link:focus,
.oa-skip-link:focus-visible {
  left: 8px;
  outline: 3px solid var(--civic-amber);
  outline-offset: 2px;
}

/* Make every interactive element show a strong focus ring when reached via
   keyboard. We use :focus-visible so mouse clicks don't trigger it.
   Bootstrap's default focus rings are inconsistent across components, so
   this catches everything that's :focus-visible. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--civic-amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* When main gets focus programmatically (via the skip link) we don't want
   a thick outline around the entire page — kill it. */
#main-content:focus-visible {
  outline: none;
}


body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--civic-blue);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--civic-blue-hover); text-decoration: underline; }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--ink-100);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  color: var(--ink-900);
  font-size: 0.875em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--ink-200);
  margin: var(--sp-6) 0;
}

/* ====================================================
   Navbar
==================================================== */
.navbar {
  background: linear-gradient(180deg, var(--nav-bg) 0%, rgba(11, 18, 32, 0.96) 100%);
  color: var(--always-white);
  min-height: var(--nav-h);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-2) var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
/* Subtle tri-color accent at the very bottom edge of the navbar */
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--civic-blue) 0%,
    var(--civic-blue) 33%,
    var(--civic-amber) 33%,
    var(--civic-amber) 66%,
    var(--civic-flag-red) 66%,
    var(--civic-flag-red) 100%);
  opacity: 0.45;
}

/* Brand: bold wordmark + a small civic-flag mark */
.navbar-brand,
.navbar-brand.nav-link {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--always-white) !important;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) !important;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
.navbar-brand:hover { background: rgba(255, 255, 255, 0.04); }
.brand-mark {
  width: 14px;
  height: 14px;
  background: var(--civic-amber);
  border-radius: 3px;
  display: inline-block;
  box-shadow: -4px -4px 0 var(--civic-flag-red), 4px 4px 0 var(--civic-blue);
  transition: transform var(--t-base) var(--ease);
}
.navbar-brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }
.brand-text { line-height: 1; }

/* Primary nav links */
.navbar .nav-link {
  color: var(--nav-fg);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3) !important;
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
  position: relative;
}
.navbar .nav-link:hover {
  color: var(--always-white);
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}
.navbar .nav-link.is-current {
  color: var(--always-white);
  background: rgba(255, 255, 255, 0.06);
}
.navbar .nav-link.is-current::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 24px;
  height: 2px;
  background: var(--civic-amber);
  border-radius: 1px;
}

/* "Upgrade" link gets a softly glowing amber pill */
.navbar .nav-link.nav-link-upgrade {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.08));
  color: var(--civic-amber);
  border: 1px solid rgba(212, 175, 55, 0.35);
  font-weight: 700;
}
.navbar .nav-link.nav-link-upgrade:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15));
  color: var(--civic-amber-bright);
}
.navbar .nav-link.nav-link-upgrade i { font-size: 0.85em; margin-right: 4px; }

/* Vertical separator between primary nav and account area */
.nav-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 var(--sp-2);
}
@media (max-width: 992px) {
  .nav-divider { display: none; }
}

/* User dropdown trigger — avatar + name + plan badge */
.nav-user-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3) 4px 4px !important;
}
.nav-user-trigger::after {
  margin-left: var(--sp-1);
  border-top-color: rgba(255, 255, 255, 0.5);
}
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--plan-free-avatar);
  color: var(--always-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18);
}
.nav-user-trigger[data-plan="pro"] .nav-avatar      { background: var(--plan-pro-avatar); }
.nav-user-trigger[data-plan="newsroom"] .nav-avatar { background: var(--plan-newsroom-avatar); }
.nav-user-trigger[data-plan="member"] .nav-avatar   { background: var(--plan-member-avatar); }
.nav-user-name {
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* Plan badges (PRO / MEMBER / NEWSROOM) */
.plan-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.plan-badge.plan-pro {
  background: var(--plan-pro-grad);
  color: var(--plan-pro-fg);
}
.plan-badge.plan-newsroom {
  background: var(--plan-newsroom-grad);
  color: var(--plan-newsroom-fg);
}
.plan-badge.plan-member {
  background: var(--plan-member-grad);
  color: var(--plan-member-fg);
}

/* Dropdown menu */
.navbar .dropdown-menu {
  background: var(--dropdown-bg-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
  margin-top: var(--sp-2);
  min-width: 220px;
}
.navbar .dropdown-header {
  padding: var(--sp-2) var(--sp-3);
}
.dropdown-user {
  color: var(--always-white);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.dropdown-user-meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  margin-top: 2px;
}
.navbar .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}
.navbar .dropdown-item,
.navbar .dropdown-item:link {
  color: var(--nav-fg);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.navbar .dropdown-item i { width: 16px; text-align: center; opacity: 0.7; }
.navbar .dropdown-item:hover {
  background: rgba(255,255,255,0.08);
  color: var(--always-white);
}
.navbar .dropdown-item:hover i { opacity: 1; }
.navbar .dropdown-item-owner,
.navbar .dropdown-item-owner:link { color: var(--civic-amber); }
.navbar .dropdown-item-owner i { opacity: 1; }
.navbar .dropdown-item form button {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  width: 100%;
  text-align: left;
}
.navbar-toggler { border: 1px solid rgba(255,255,255,0.2); }

/* ---------- Top-nav search — universal discovery surface ---------- */
.nav-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
  transition: all var(--t-fast) var(--ease);
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
}
.nav-search:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.nav-search-icon {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.nav-search:focus-within .nav-search-icon { color: var(--civic-amber); }
.nav-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--always-white);
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  min-width: 0;
}
.nav-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.45); }
.nav-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.nav-search-hint {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}
.nav-search:focus-within .nav-search-hint { opacity: 0; }
.nav-search-go {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  padding: 4px 4px 4px var(--sp-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
  display: flex;
  align-items: center;
}
.nav-search:focus-within .nav-search-go { color: var(--civic-amber); }
.nav-search-go:hover { color: var(--civic-amber); }
@media (max-width: 992px) {
  .nav-search { margin: var(--sp-2) 0; max-width: none; }
}

/* Square icon buttons (theme toggle, etc.) */
.nav-icon-btn,
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--nav-fg);
  padding: 0;
}
.nav-icon-btn:hover,
.theme-toggle:hover {
  background: rgba(255,255,255,0.10);
  color: var(--always-white);
  border-color: rgba(255, 255, 255, 0.22);
}
.theme-toggle i { line-height: 1; }

/* Sign-up CTA at the right edge for logged-out users */
.nav-cta {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-cta i { font-size: 0.85em; transition: transform var(--t-fast) var(--ease); }
.nav-cta:hover i { transform: translateX(2px); }

/* Upgrade nudge — soft banner for free users above the dashboard */
.upgrade-nudge {
  background: linear-gradient(90deg, var(--civic-amber-soft) 0%, var(--paper) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-left: 4px solid var(--civic-amber);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
[data-theme="dark"] .upgrade-nudge {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, transparent 100%);
}
.upgrade-nudge-body { display: flex; gap: var(--sp-3); align-items: center; }
.upgrade-nudge-icon { color: var(--civic-amber); font-size: var(--fs-lg); }
.upgrade-nudge-text { flex: 1; font-size: var(--fs-sm); color: var(--ink-700); }
.upgrade-nudge-text strong { color: var(--ink-900); }
.upgrade-nudge-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }

/* Watchlist cap progress bar — shows free users how close they are to the limit */
.cap-progress {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.cap-progress-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-2);
}
.cap-progress-count { font-size: var(--fs-sm); color: var(--ink-700); }
.cap-progress-bar {
  height: 6px;
  background: var(--ink-100);
  border-radius: var(--r-full);
  overflow: hidden;
}
.cap-progress-fill {
  height: 100%;
  background: var(--civic-blue);
  transition: width var(--t-base) var(--ease);
}
.cap-progress.is-near-limit .cap-progress-fill { background: var(--civic-amber); }
.cap-progress.is-at-limit { border-color: var(--civic-flag-red); }
.cap-progress.is-at-limit .cap-progress-fill { background: var(--civic-flag-red); }

/* Onboarding strip — appears on dashboard when setup is incomplete */
.onboarding-strip {
  background: linear-gradient(135deg, var(--civic-blue-soft) 0%, var(--civic-amber-soft) 100%);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .onboarding-strip {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.12) 0%, rgba(212, 175, 55, 0.10) 100%);
  border-color: var(--ink-200);
}
.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.onboarding-step {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  transition: all var(--t-fast) var(--ease);
}
.onboarding-step.is-done {
  opacity: 0.65;
  background: var(--ink-50);
}
.onboarding-step .step-check {
  font-size: var(--fs-xl);
  color: var(--ink-300);
  line-height: 1;
  flex-shrink: 0;
}
.onboarding-step.is-done .step-check {
  color: var(--success);
}
.step-title {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink-900);
  margin-bottom: 4px;
}
.onboarding-step.is-done .step-title {
  text-decoration: line-through;
  text-decoration-color: var(--ink-400);
}
.step-detail {
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.5;
}

/* Share popover — for download links to social-media share cards */
.share-wrap { position: relative; display: inline-block; }
.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--paper);
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 8px var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.share-trigger:hover {
  background: var(--ink-50);
  border-color: var(--ink-400);
  color: var(--ink-900);
}
.share-pop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  padding: var(--sp-3);
  z-index: 50;
}
.share-wrap.is-open .share-pop { display: block; }
.share-pop h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin: var(--sp-2) 0 var(--sp-2) var(--sp-2);
  font-weight: 700;
}
.share-pop a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-800);
  font-size: var(--fs-sm);
}
.share-pop a:hover {
  background: var(--ink-50);
  text-decoration: none;
}
.share-pop a small {
  font-family: var(--font-mono);
  color: var(--ink-500);
  font-size: 0.75rem;
}
.share-pop .pop-divider {
  height: 1px;
  background: var(--ink-200);
  margin: var(--sp-2) 0;
}
.share-pop .share-format-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.85rem;
}
.share-pop .share-format-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.share-pop .share-format-label {
  font-weight: 700;
  color: var(--ink-700);
  margin-right: var(--sp-1);
}
.share-pop .share-format-hint {
  padding: 0 var(--sp-3) var(--sp-2);
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-500);
}

/* Watch / Unfollow toggle — green pill while watched, swaps to red on hover */
.watch-toggle { display: inline-block; }
.watch-toggle.is-watching .btn {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.4);
  color: var(--success);
  font-weight: 600;
}
.watch-toggle.is-watching .btn:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.5);
  color: var(--danger);
}
.watch-toggle.is-watching .btn:hover .fa-star { animation: shake 0.3s var(--ease); }
.watch-toggle.is-watching .label-watching { display: inline; }
.watch-toggle.is-watching .label-unfollow { display: none; }
.watch-toggle.is-watching .btn:hover .label-watching { display: none; }
.watch-toggle.is-watching .btn:hover .label-unfollow { display: inline; }
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* ====================================================
   Buttons (extends Bootstrap with our system)
==================================================== */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
  padding: 10px var(--sp-4);
  transition: all var(--t-fast) var(--ease);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--civic-blue);
  border-color: var(--civic-blue);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--civic-blue-hover);
  border-color: var(--civic-blue-hover);
  color: var(--paper);
}

.btn-warning {
  background: var(--civic-amber);
  border-color: var(--civic-amber);
  color: var(--ink-900);
}
.btn-warning:hover {
  background: var(--btn-warning-hover);
  border-color: var(--btn-warning-hover);
  color: var(--ink-900);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--ink-300);
  color: var(--ink-700);
}
.btn-outline-secondary:hover {
  background: var(--ink-100);
  border-color: var(--ink-400);
  color: var(--ink-900);
}

.btn-ghost {
  background: transparent;
  color: var(--civic-blue);
  border: none;
  padding: var(--sp-2) var(--sp-3);
}
.btn-ghost:hover {
  background: var(--civic-blue-soft);
  color: var(--civic-blue-hover);
}

.btn-sm {
  padding: 6px var(--sp-3);
  font-size: var(--fs-xs);
}

/* ====================================================
   Cards
==================================================== */
.oa-card,
.card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  overflow: hidden;
}
.oa-card.hoverable:hover,
.card.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-header {
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: var(--sp-5); }

/* ====================================================
   Stat tiles (used on dashboard, hero, etc.)
==================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.stat-tile {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.stat-tile::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--civic-blue);   /* now teal */
}
.stat-tile.amber::after { background: var(--civic-amber); }
.stat-tile.red::after, .stat-tile.orange::after { background: var(--civic-flag-red); }  /* now orange */
.stat-tile.green::after { background: var(--success); }
.stat-tile.slate::after { background: var(--ink-500); }
.stat-tile .stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: 600;
}
.stat-tile .stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
  margin: var(--sp-2) 0 var(--sp-1);
  letter-spacing: -0.02em;
}
.stat-tile .stat-meta {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ====================================================
   Real-time pulse indicator
==================================================== */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--civic-flag-red);
  border-radius: 50%;
  position: relative;
  margin-right: var(--sp-2);
  flex-shrink: 0;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--civic-flag-red);
  opacity: 0.6;
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(0.9); opacity: 0.6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.live-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--civic-flag-red);
}

/* ====================================================
   Badges / pills
==================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--ink-100);
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
/* Party pills — saturated chips, white text, high visibility */
.pill.party-D {
  background: var(--party-D);
  color: #fff;
  border-color: var(--party-D);
  font-weight: 700;
}
.pill.party-R {
  background: var(--party-R);
  color: #fff;
  border-color: var(--party-R);
  font-weight: 700;
}
.pill.party-I {
  background: var(--ink-500);
  color: #fff;
  border-color: var(--ink-500);
  font-weight: 700;
}
.pill.amber   { background: var(--civic-amber-soft); color: var(--alert-warning-fg); border-color: rgba(212, 175, 55, 0.3); }
.pill.blue    { background: var(--civic-blue-soft); color: var(--civic-blue-hover); border-color: rgba(13, 148, 136, 0.3); }
.pill.success { background: rgba(22, 163, 74, 0.1); color: var(--success); border-color: rgba(22, 163, 74, 0.2); }

/* Larger party "badge" treatment for heroes — colored top stripe, like stat tiles */
.party-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px 6px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--ink-200);
  border-top-width: 3px;
  background: var(--paper);
  color: var(--ink-900);
  line-height: 1;
}
.party-badge.party-D { border-top-color: var(--party-D); color: var(--party-D); }
.party-badge.party-R { border-top-color: var(--party-R); color: var(--party-R); }
.party-badge.party-I { border-top-color: var(--ink-500); color: var(--ink-700); }
[data-theme="dark"] .party-badge { background: var(--ink-100); }

/* ====================================================
   Tables — clean, data-forward
==================================================== */
.oa-table,
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.oa-table th,
.table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-200);
  text-align: left;
  background: var(--ink-50);
}
.oa-table td,
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  font-size: var(--fs-sm);
  color: var(--ink-800);
  vertical-align: middle;
}
.oa-table tbody tr:hover,
.table tbody tr:hover {
  background: var(--ink-50);
}

/* ====================================================
   Forms (lightly Bootstrap-friendly)
==================================================== */
.form-control,
.form-select {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  background: var(--paper);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--civic-blue);
  box-shadow: var(--shadow-glow-blue);
}
.form-label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
  display: block;
}
.form-text {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ====================================================
   Containers
==================================================== */
.container, .container-md, .container-lg {
  max-width: var(--max-w);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

/* ====================================================
   Page section spacing
==================================================== */
.section {
  padding: var(--sp-12) 0;
}
.section.compact { padding: var(--sp-8) 0; }
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.section-title h2 { margin: 0; }
.section-title .subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ====================================================
   Flash/messages
==================================================== */
.flash-area {
  max-width: var(--max-w);
  margin: var(--sp-4) auto;
  padding: 0 var(--sp-5);
}
.alert {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.alert-success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.2); color: var(--alert-success-fg); }
.alert-info    { background: var(--civic-blue-soft); border-color: rgba(29, 78, 216, 0.2); color: var(--alert-info-fg); }
.alert-warning { background: var(--civic-amber-soft); border-color: rgba(212, 175, 55, 0.3); color: var(--alert-warning-fg); }
.alert-danger  { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.2); color: var(--alert-danger-fg); }

/* ====================================================
   Footer
==================================================== */
.footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: var(--sp-12) 0 var(--sp-6);
  margin-top: var(--sp-16);
}
.footer h5 {
  color: var(--always-white);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.footer a, .footer .nav-link {
  color: rgba(255,255,255,0.7) !important;
  padding: 0 !important;
  margin: 0 0 var(--sp-2) !important;
  font-size: var(--fs-sm);
  display: inline-block;
}
.footer a:hover { color: var(--civic-amber) !important; }
.footer hr {
  background: rgba(255,255,255,0.1);
  margin: var(--sp-6) 0;
}
.footer .social a { font-size: var(--fs-md); margin-right: var(--sp-4); }
.footer .copyright {
  color: rgba(255,255,255,0.5);
  font-size: var(--fs-xs);
}
.footer-tagline {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.footer-attribution {
  color: rgba(255,255,255,0.6);
  font-size: var(--fs-xs);
}
.footer .footer-donate-link { color: var(--civic-amber) !important; }

/* ====================================================
   Utilities
==================================================== */
.text-muted-2 { color: var(--ink-500); }
.muted        { color: var(--ink-400); }
.text-tiny    { font-size: var(--fs-xs); }
.text-meta    {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: 600;
}

/* Color utilities (canonical brand colors only) */
.text-civic-blue { color: var(--civic-blue); }
.text-civic-amber { color: var(--civic-amber); }
.text-civic-red { color: var(--civic-flag-red); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-ink-400 { color: var(--ink-400); }
.text-ink-500 { color: var(--ink-500); }
.text-ink-700 { color: var(--ink-700); }
.text-ink-900 { color: var(--ink-900); }

/* Other small utilities — Bootstrap covers most spacing/flex, these fill gaps */
.cursor-pointer { cursor: pointer; }
.flex-1 { flex: 1; min-width: 0; }
.gap-3px { gap: 3px; }
.row-flex-center { display: flex; align-items: center; }
.row-flex-center-gap { display: flex; align-items: center; gap: var(--sp-2); }

/* List rows used heavily on dashboard / lists */
.list-row {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--ink-100);
}
.list-row:last-child { border-bottom: 0; }

/* Avatar bubble (legislator photo or initials fallback) */
.avatar-sm {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  flex-shrink: 0;
}

/* Strong-text link (used to make a card title look clickable) */
.link-strong {
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
}
.link-strong:hover { color: var(--civic-blue); }

/* Subtle entry animation for hero/dashboard content */
.fade-up {
  animation: fade-up var(--t-slow) var(--ease) both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ====================================================
   Responsive
==================================================== */
@media (max-width: 768px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  .section { padding: var(--sp-8) 0; }
  .navbar { padding: var(--sp-2) var(--sp-4); }
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ====================================================
   Navigation loading shimmer (global)
   Shows a thin tri-color shimmer bar at the very top of the viewport
   while the browser is fetching the next page. Triggered by JS in
   base.html on any internal link click or form submit.
==================================================== */
.oa-loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--civic-blue) 30%,
    var(--civic-amber) 60%,
    var(--civic-flag-red) 90%,
    transparent 100%);
  background-size: 200% 100%;
  animation: oa-loading-shimmer 1.1s linear infinite;
  pointer-events: none;
  display: none;
}
body.is-navigating .oa-loading-overlay { display: block; }
body.is-navigating { cursor: progress; }
body.is-navigating a, body.is-navigating button { cursor: progress; }

@keyframes oa-loading-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Skeleton placeholders during content load */
.oa-skeleton {
  background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-200) 50%, var(--ink-100) 100%);
  background-size: 200% 100%;
  animation: oa-loading-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: inline-block;
  height: 1em;
  width: 100%;
}