styles.css

/* CSS Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  /* Milwaukee County Brand Colors */
  --milwaukee-blue: #0077be;
  --milwaukee-blue-dark: #005a8f;
  --milwaukee-blue-light: #4da3d9;
  --milwaukee-navy: #1c3d59;

  /* Dark theme defaults (used before JS applies saved theme) */
  --milwaukee-gray: #1f1f1f;
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #262626;
  --bg-card: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --border-color: #404040;
  --border-subtle: #262626;
  /* Shared frosted-glass tint for the header and sidebar toolbars, kept
     identical so the two panels read as one continuous surface */
  --frost-bg: rgba(15, 15, 15, 0.5);

  /* Accents and feedback colors */
  --accent-color: var(--milwaukee-blue-light);
  --accent-hover: #66b8e6;
  --accent-light: rgba(77, 163, 217, 0.15);
  --detail-accent: var(--accent-color);
  --success-color: #28a745;
  --success-light: rgba(34, 197, 94, 0.15);
  --warning-color: #ffc107;
  --warning-light: rgba(251, 191, 36, 0.15);
  --danger-color: #dc3545;
  --danger-light: rgba(239, 68, 68, 0.15);
  --error-color: var(--danger-color);

  /* Shadows and effects */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

  /* Border radius scale */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Spacing scale (8px grid) */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */

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

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition: all 0.2s ease-in-out;
  --transition-slow: all 0.3s ease-in-out;
  --transition-theme-duration: 0.45s;
}

:root[data-theme="light"] {
  color-scheme: light;

  --milwaukee-gray: #f5f6f7;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-card: #ffffff;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --border-color: #dee2e6;
  --border-subtle: #f1f3f4;
  --frost-bg: rgba(255, 255, 255, 0.6);
  --accent-color: var(--milwaukee-blue);
  --accent-hover: var(--milwaukee-blue-dark);
  --accent-light: rgba(0, 119, 190, 0.1);
  --success-light: rgba(40, 167, 69, 0.1);
  --warning-light: rgba(255, 193, 7, 0.1);
  --danger-light: rgba(220, 53, 69, 0.1);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --detail-accent: var(--accent-color);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --detail-accent: var(--accent-color);
}

html {
  background-color: var(--bg-primary);
  transition:
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease;
  /* The app shell (.container) is capped to 100vh and scrolls internally
     via .main-content/.sidebar, so the document itself should never
     scroll. This is a defensive backstop against any stray overflow
     (e.g. rounding) still bouncing the whole page on overscroll. */
  overscroll-behavior: none;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  font-size: var(--text-base);
  transition:
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hidden {
  display: none !important;
}

/* Focus styles */
*:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius);
  z-index: 1000;
  transition: var(--transition);
}

.skip-link:focus {
  top: 6px;
}

/* Full-page background photo, fixed behind everything (including the
   sidebar) so it's visible through any translucent panel and through any
   gap between them. Fades in once the photo has actually loaded (see
   applyBackground in script.js) to avoid a jarring pop-in. */
.page-bg {
  position: fixed;
  inset: 0;
  /* Not a negative z-index: Chromium paints html/body's propagated
     background as the page canvas, which sits beneath *any* z-index
     (even negative), so a negative value here would hide this behind
     that flat fallback color. Instead this relies on DOM order (it's
     .container's preceding sibling) plus .container being explicitly
     positioned below, so .container's stacking context - and everything
     in it - paints above this layer. */
  z-index: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.45)
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.page-bg.loaded {
  opacity: 1;
}

/* Layout */
.container {
  --sidebar-width: 380px;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  /* Without an explicit row size, this single implicit row sizes itself
     to fit its tallest child's content (grid "auto" tracks are
     content-sized, regardless of the children's own overflow rules), so
     long content silently grew the whole page past 100vh instead of
     scrolling inside .main-content/.sidebar. That made the *document*
     the thing that scrolled/overscrolled, dragging the sticky header and
     the sidebar away from the top together during rubber-band overscroll.
     A definite height plus an explicit 1fr row caps it at the viewport,
     so the panes' own overflow-y:auto actually engages instead. */
  height: 100vh;
  grid-template-rows: 1fr;
  min-height: 100vh;
  gap: 0;
  /* Positioned (with the default z-index:auto) purely so it paints above
     .page-bg, its preceding sibling, per normal stacking order - not for
     layout purposes */
  position: relative;
  /* Transparent so .page-bg shows through (including the sidebar's own
     frosted-glass background, and any rounding gap between panels) */
  background: transparent;
  transition:
    grid-template-columns 0.35s ease,
    background var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease;
}

.container.sidebar-collapsed {
  grid-template-columns: 1fr 0;
}

.main-content {
  padding: 0;
  overflow-y: auto;
  /* Without this, rubber-band/overscroll past the top translates the
     scrolled content down while the sticky .header stays pinned to the
     viewport, opening a gap between them. Containing the overscroll here
     stops the bounce so the header stretches with the pane instead. */
  overscroll-behavior-y: contain;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 50px);
  transition:
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease;
}

/* Unsplash photo attribution, bottom-left of the background photo */
.photo-credit {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}

.photo-credit:empty {
  display: none;
}

.photo-credit a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}

.photo-credit a:hover,
.photo-credit a:focus {
  color: #ffffff;
}

/* Main content wrapper for centering (positioned above the darkening
   overlay; the header sits above it too via its own higher z-index) */
.main-content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-2) var(--space-2) var(--space-2);
  flex: 1;
  gap: var(--space-3);
}

/* Hero Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  position: sticky;
  top: 0;
  background: var(--frost-bg);
  z-index: 100;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition:
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease;
}

.header h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* Search Section */
.search-section {
  width: 100%;
  max-width: 600px;
}

.search-container {
  width: 100%;
}

.search-form {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.search-form:focus-within {
  border-color: var(--accent-color);
  box-shadow:
    var(--shadow),
    0 0 0 3px var(--accent-light);
}

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-button {
  background: var(--accent-color);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-2);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  transition: var(--transition);
  font-size: var(--text-base);
}

.search-button:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.search-button:active {
  transform: scale(0.98);
}

.header-controls {
  display: flex;
  align-items: center;
  /* Matches .nav-controls/.nav-toggle-group in the sidebar's top row */
  gap: 6px;
}

/* Match the sidebar's nav-btn-icon style so the header and sidebar top
   rows read as one continuous toolbar */
.header-controls .btn-icon {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  box-shadow: none;
}

.header-controls .btn-icon:hover {
  background: var(--bg-card);
  border-color: var(--accent-color);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.header-controls .btn-icon:active {
  transform: none;
  box-shadow: none;
}

.version-indicator {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-fast);
}

.version-indicator:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* Modern Button Components */
.btn-icon {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-icon:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-primary {
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.025em;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* Favorites Section */
.favorites-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.favorites-grid {
  display: grid;
  /* minmax keeps tiles a comfortable size but never overflows the
     available width, unlike fixed-width auto-fit tracks */
  grid-template-columns: repeat(auto-fit, minmax(72px, 100px));
  gap: var(--space-3);
  width: 100%;
  max-width: 800px;
  justify-content: center;
}

.favorite-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition);
  position: relative;
  cursor: pointer;
  min-height: 80px;
  justify-content: center;
}

.favorite-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Drag & Drop states */
.favorite-item.dragging {
  opacity: 0.5;
  border-color: var(--accent-color);
  box-shadow: var(--shadow-lg);
}

.favorite-item.drag-over {
  outline: 2px dashed var(--accent-color);
  outline-offset: 2px;
}

.favorite-item .icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-xs);
  object-fit: contain;
}

.favorite-item .name {
  font-size: var(--text-xs);
  text-align: center;
  word-wrap: break-word;
  max-width: 100%;
  line-height: var(--leading-tight);
}

/* Context menu styles */
.context-menu {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: 1000;
  min-width: 120px;
  display: none;
}

.context-menu.show {
  display: block;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: var(--transition);
}

.context-menu-item:hover {
  background: var(--bg-tertiary);
}

.context-menu-item:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}

.context-menu-item.delete {
  color: var(--error-color, #dc3545);
}

.context-menu-item.delete:hover {
  background: var(--error-color, #dc3545);
  color: white;
}

.add-favorite-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  display: inline-block;
}

.add-favorite-link:hover {
  color: var(--accent-color);
  background: var(--bg-tertiary);
  text-decoration: underline;
}

.add-favorite-link:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Show sidebar button */
.show-sidebar-btn {
  /* Desktop uses #show-sidebar-header-btn in the header instead (it
     matches the app's button style); this floating circle is only
     re-enabled for the mobile bottom-sheet trigger below */
  display: none;
  position: fixed;
  right: var(--space-4);
  top: 80px; /* Align to top, below the sticky header */
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: bold;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  z-index: 50;
  /* Positioning transform (e.g. centering on mobile) lives in this
     variable so :hover/:active can layer scale() on top of it instead
     of overwriting it and knocking the button off its position */
  --btn-shift: none;
  transform: var(--btn-shift);
}

.show-sidebar-btn:hover {
  background: var(--accent-hover);
  transform: var(--btn-shift) scale(1.05);
  box-shadow: var(--shadow-xl);
}

.show-sidebar-btn:active {
  transform: var(--btn-shift) scale(0.98);
}

.show-sidebar-btn.hidden {
  opacity: 0;
  pointer-events: none;
  --btn-shift: translateX(20px);
}

/* Sidebar */
.sidebar {
  /* Muted text (day-of-week labels, "Last updated", legend labels, etc.)
     often sits directly on the frosted photo background here instead of
     an opaque card, so it needs more contrast than the dim tone used
     elsewhere in the app */
  --text-muted: var(--text-secondary);
  /* Frosted glass: translucent tint + blur so the page photo shows
     through, matching the header treatment */
  background: var(--frost-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-left: 2px solid var(--border-color);
  padding: var(--space-2);
  overflow: hidden;
  position: relative;
  transition:
    width 0.35s ease,
    padding 0.35s ease,
    opacity 0.25s ease,
    transform 0.35s ease,
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease;
  will-change: width, transform, opacity;
  /* Fill the grid column exactly (previously a fixed 350px inside a
     380px column, which left a stray unstyled gap at the page edge) */
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(40px);
  pointer-events: none;
}

/* Drag handle on the sidebar's left edge, desktop-only (see mobile media
   query below, which hides it since the sidebar becomes a bottom sheet
   there and resizes vertically via the OS/gesture, not this handle). */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 20;
  background: transparent;
}

.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background-color var(--transition-fast);
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:focus-visible::after,
.sidebar-resize-handle.dragging::after {
  background: var(--accent-color);
}

.sidebar-resize-handle:focus-visible {
  outline: none;
}

.sidebar.collapsed .sidebar-resize-handle {
  display: none;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.unified-reps-bar {
  gap: var(--space-2);
}

.reps-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.reps-title-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.reps-title-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.reps-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.reps-icon-btn {
  width: 1.9rem;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.reps-icon-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 119, 190, 0.25);
}

/* Chevron toggle rotation */
#toggle-sidebar {
  transition: transform 0.25s ease;
  font-size: 1rem;
  line-height: 1;
}

#toggle-sidebar.rotated {
  transform: rotate(180deg);
}

.sidebar-header h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Address Section */
.address-section {
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}

.address-section label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.address-input-group {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.address-input-group input {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.address-input-group input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.address-actions {
  margin-top: var(--space-1);
  display: flex;
  gap: var(--space-2);
}

.address-actions .btn-primary {
  flex: 1;
}

.btn-small {
  min-width: 2rem;
  height: 2rem;
  padding: var(--space-1);
  font-size: var(--text-sm);
}

/* Address Section Transitions */
.address-section {
  transition: var(--transition-slow);
  opacity: 1;
  transform: translateY(0);
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}

.address-section.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  margin-bottom: 0;
  height: 0;
  overflow: hidden;
}

/* Officials Calendar */
.officials-calendar {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-height: 0;
  transition:
    background-color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-bottom: 0;
  flex-shrink: 0;
}

.calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.calendar-nav:hover,
.calendar-nav:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent-color);
  color: var(--accent-color);
  outline: none;
}

.calendar-month-label {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.2;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}

.calendar-cell {
  text-align: center;
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.calendar-cell.is-today {
  background: var(--accent-light);
  color: var(--accent-color);
  font-weight: 600;
}

.calendar-cell.is-label {
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
}

.calendar-cell.is-empty {
  background: transparent;
  color: transparent;
  pointer-events: none;
}

.calendar-cell.has-events::after {
  content: "";
  position: absolute;
  bottom: 0.35rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent-color);
}

.calendar-cell[data-source~="city"].has-events::after {
  background: #0077be;
}

.calendar-cell[data-source~="county"].has-events::after {
  background: #ffa500;
}

.calendar-cell.selected {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: var(--space-1) 0;
  padding: 0 var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.legend-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.city {
  background: var(--milwaukee-blue);
}

.legend-dot.county {
  background: var(--warning-color);
}

.legend-label {
  margin-right: var(--space-3);
}

.calendar-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
  overflow-y: auto;
  padding: 4px;
  padding-right: 8px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.calendar-event-item {
  border: 0px solid transparent;
  border-left: 4px solid var(--detail-accent, var(--accent-color));
  border-radius: 12px;
  background: var(--bg-tertiary);
  transition:
    border-color var(--transition-theme-duration) ease,
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    box-shadow var(--transition-fast);
  width: 100%;
}

.calendar-event-item + .calendar-event-item {
  margin-top: var(--space-2);
}

.calendar-event-item.active {
  border-color: var(--detail-accent, var(--accent-color));
  box-shadow: 0 0 0 1px rgba(0, 119, 190, 0.1);
}

.calendar-event-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  align-items: flex-start;
}

.calendar-event-main:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.calendar-event-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
}

.calendar-event-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}

.calendar-event-meta .calendar-event-source-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}

.calendar-event-time,
.calendar-event-date {
  font-weight: 500;
  color: var(--text-primary);
}

.calendar-event-time.is-now {
  font-weight: 700;
}

.now-badge,
.day-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--detail-accent, var(--accent-color));
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  line-height: 1.4;
}

.day-badge {
  background-color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.calendar-event-location {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: block;
}

.calendar-status {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.calendar-status.warning {
  color: var(--warning-color);
}

.calendar-status.muted {
  color: var(--text-muted);
}

.calendar-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.calendar-placeholder .spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-color);
  animation: calendar-spin 1s linear infinite;
}

@keyframes calendar-spin {
  to {
    transform: rotate(360deg);
  }
}

.calendar-detail-section {
  margin-top: var(--space-1);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--detail-accent, var(--accent-color));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  transition:
    background-color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease;
}

.calendar-detail-section.hidden {
  display: none;
}

.calendar-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-3);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 5;
}

.calendar-detail-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.calendar-detail-header h4 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.calendar-detail-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

#calendar-detail-back {
  min-width: 2rem;
  height: 2rem;
}

.calendar-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calendar-detail-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--detail-accent, var(--accent-color));
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-xs);
}

.calendar-detail-summary h5 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.calendar-detail-meta {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.calendar-detail-meta span {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.calendar-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 0.25rem;
}

.calendar-detail-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--detail-accent, var(--accent-color));
  color: var(--detail-accent, var(--accent-color));
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-detail-meta-label {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 5.5rem;
}

.calendar-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.calendar-detail-links a {
  font-size: var(--text-sm);
  color: var(--accent-color);
  text-decoration: none;
  border: 1px solid var(--accent-color);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
}

.calendar-detail-links a:hover,
.calendar-detail-links a:focus-visible {
  background: var(--accent-light);
  text-decoration: none;
}

.calendar-detail-section .detail-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* Officials Section */
.officials-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow inner scroll containers to size */
  margin-bottom: 0;
}

.officials-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

.officials-toggle:hover,
.officials-toggle:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent-color);
  color: var(--accent-color);
  outline: none;
}

.officials-toggle::after {
  content: "❯";
  transition: transform 0.2s ease;
}

.officials-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.officials-list-wrapper {
  margin-top: var(--space-3);
  position: relative;
  flex: 1 1 auto; /* take remaining height */
  min-height: 0; /* required for overflow in flex child */
  overflow-y: auto; /* scroll results when long */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.officials-list-wrapper.collapsed {
  display: none;
}

.officials-list-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 1;
}

.officials-list-wrapper:not(.collapsed)::before {
  opacity: 1;
}

.officials-list {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  gap: var(--space-3);
  padding: var(--space-3);
}

.officials-section.hidden {
  display: none;
}

.official-detail-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--detail-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  min-height: 0;
  transition:
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease,
    opacity 0.25s ease;
}

.official-detail-section.hidden {
  display: none;
}

.official-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-3);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 5;
}

.official-detail-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.official-detail-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.official-detail-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

#official-detail-back {
  min-width: 2.5rem;
  height: 2.5rem;
}

.official-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.official-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.official-detail-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--detail-accent);
  color: var(--detail-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
}

.official-detail-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--detail-accent);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease,
    border-color var(--transition-theme-duration) ease,
    box-shadow var(--transition-theme-duration) ease;
}

.official-detail-identity h4 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.official-detail-role {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.official-detail-metadata {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.official-detail-section .detail-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.official-detail-section .contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Modern Representative Cards */
.division-group {
  /* No margin-bottom here: spacing between cards comes solely from the
     parent .officials-list flex gap, so it isn't doubled up */
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.division-group:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent-color);
}

.division-group.milwaukee-section {
  border-left: 4px solid var(--milwaukee-blue);
  background: linear-gradient(135deg, var(--bg-card), var(--accent-light));
}

.division-header {
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.division-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--milwaukee-blue),
    var(--milwaukee-blue-light)
  );
  opacity: 0.7;
}

/* Collapsible indicators */
.division-header[role="button"]::after {
  content: "▼";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.division-group.collapsed > .division-header[role="button"]::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* Hide content when collapsed */
.division-group.collapsed > :not(.division-header) {
  display: none !important;
}

.office-group {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-fast);
}

.office-group:last-child {
  border-bottom: none;
}

.office-group:hover {
  background: var(--accent-light);
}

.office-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Enhanced Official Cards */
.official {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  transition: var(--transition-fast);
}

.official.milwaukee-official {
  background: linear-gradient(135deg, transparent, var(--accent-light));
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  margin: 0.25rem 0;
}

.official-info {
  flex: 1;
  min-width: 0;
}

.official-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-base);
  margin-bottom: 0.125rem;
  line-height: var(--leading-tight);
}

.official-office {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.official-party {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  display: inline-block;
}

/* Modern Link Buttons */
.official-links {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.official-links a {
  color: var(--accent-color);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  background: var(--accent-light);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.official-links a:hover {
  background: var(--accent-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.official-links a:active {
  transform: translateY(0);
}

/* Elections Section */
.elections-section h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.elections-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.election-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
}

.election-date {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.election-type {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: var(--transition);
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.setting-group {
  margin-bottom: 1rem;
}

.setting-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: normal;
}

.setting-group legend {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.search-engine-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-engine-options label {
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: var(--transition);
}

.search-engine-options label:hover {
  background: var(--bg-tertiary);
}

.search-engine-options input[type="radio"] {
  margin: 0;
  accent-color: var(--accent-color);
}

.search-engine-options input[type="radio"]:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Enhanced Responsive Design */
/* Disables the grid-template-columns transition while the user is
   actively dragging the resize handle, so the sidebar tracks the pointer
   immediately instead of easing toward each intermediate width. */
body.sidebar-resizing .container {
  transition: none;
}

@media (max-width: 1200px) {
  .container {
    --sidebar-width: 340px;
  }

  /* .main-content itself stays flush (padding: 0) so the header/photo
     stay edge-to-edge; the padding lives on the inner content wrapper */
  .main-content-wrapper {
    padding: var(--space-6);
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .main-content {
    min-height: auto;
  }

  .main-content-wrapper {
    justify-content: center;
    padding: var(--space-6);
    padding-top: var(--space-4);
  }

  /* On smaller screens the calendar/officials pane becomes a bottom
     sheet the user can bring up on demand, instead of a block that
     pushes the favorites grid below the fold and has to be scrolled
     to. */
  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--border-color);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    z-index: 200;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .sidebar.collapsed {
    width: 100%;
    padding: var(--space-2);
    opacity: 1;
    transform: translateY(100%);
    pointer-events: none;
  }

  .sidebar.collapsed::before {
    opacity: 0;
  }

  /* The header button is desktop-only; mobile keeps the bottom-sheet
     pill trigger below instead */
  #show-sidebar-header-btn {
    display: none;
  }

  /* The sidebar is a full-width bottom sheet here, so horizontal
     drag-resizing doesn't apply */
  .sidebar-resize-handle {
    display: none;
  }

  /* Persistent, clearly-labeled way to bring the pane back up */
  .show-sidebar-btn {
    left: 50%;
    right: auto;
    bottom: var(--space-4);
    top: auto;
    --btn-shift: translateX(-50%);
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .show-sidebar-btn .show-sidebar-icon {
    display: none;
  }

  .show-sidebar-btn::before {
    content: "📅";
  }

  .show-sidebar-btn::after {
    content: "Meetings & Officials";
  }

  .show-sidebar-btn.hidden {
    --btn-shift: translateX(-50%) translateY(20px);
  }

  /* Clear the floating "Meetings" pill above it instead of sitting
     underneath it */
  .photo-credit {
    bottom: 68px;
  }

  /* The pane is a bottom sheet here (dismisses downward), so its
     dismiss chevron should point down rather than the desktop right */
  #toggle-sidebar {
    transform: rotate(90deg);
  }

  #toggle-sidebar.rotated {
    transform: rotate(270deg);
  }

  .header h1 {
    font-size: var(--text-3xl);
  }

  .favorites-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 110px));
    gap: var(--space-4);
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .container {
    min-height: 100vh;
  }

  .main-content {
    min-height: auto;
  }

  .main-content-wrapper {
    justify-content: center;
    padding: var(--space-4);
    padding-top: var(--space-2);
  }

  /* Search moves below the favorites grid on mobile, with both
     centered as a group in the viewport */
  .search-section {
    order: 2;
  }

  .favorites-section {
    order: 1;
  }

  /* Keep the header a single row at narrow widths too - it just shrinks
     (h1 truncates) rather than wrapping the controls onto a second row */
  .header h1 {
    font-size: var(--text-2xl);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .favorites-grid {
    grid-template-columns: repeat(auto-fit, minmax(64px, 90px));
    gap: var(--space-3);
    justify-content: center;
  }

  .favorite-item {
    padding: var(--space-2);
    min-height: 80px;
  }

  .favorite-item .name {
    font-size: var(--text-xs);
  }

  /* Mobile-optimized address section */
  .address-section label {
    font-size: var(--text-sm);
  }

  .address-input-group {
    flex-direction: column;
    gap: var(--space-2);
  }

  .address-input-group input {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-base);
  }

  .address-input-group .btn-icon {
    align-self: flex-start;
    min-width: auto;
    width: auto;
    padding: var(--space-3) var(--space-4);
  }

  .address-actions {
    margin-top: var(--space-3);
  }

  .btn-primary {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .main-content-wrapper {
    padding: var(--space-3);
  }

  .sidebar {
    padding: var(--space-1);
  }

  .show-sidebar-btn::after {
    content: "Meetings";
  }

  .header h1 {
    font-size: var(--text-xl);
  }

  .favorites-grid {
    grid-template-columns: repeat(auto-fit, minmax(56px, 80px));
    gap: var(--space-2);
    justify-content: center;
  }

  .favorite-item {
    padding: var(--space-1);
    min-height: 60px;
  }

  .favorite-item .icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* Mobile representative cards */
  .division-group {
    border-radius: var(--radius-lg);
  }

  .division-header {
    padding: var(--space-4);
    font-size: var(--text-base);
  }

  .office-group {
    padding: var(--space-4);
  }

  .official-name {
    font-size: var(--text-base);
  }

  .official-office {
    font-size: var(--text-sm);
  }

  .official-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .official-links a {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Modal improvements for mobile */
  .modal-content {
    width: 95%;
    max-width: none;
    margin: var(--space-4);
    max-height: calc(100vh - 2rem);
  }

  .modal-header {
    padding: var(--space-4);
  }

  .modal-body {
    padding: var(--space-4);
  }

  .modal-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .modal-actions button {
    width: 100%;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-color: #333;
    --border-subtle: #666;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  [data-theme="dark"] {
    --border-color: #ccc;
    --border-subtle: #999;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in,
  .slide-in-left,
  .slide-in-right {
    animation: none;
  }

  .btn-icon:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
}

/* Loading and Empty States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.empty-state p {
  margin-bottom: 1rem;
}

/* Enhanced Loading States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-secondary);
  flex-direction: column;
  gap: var(--space-4);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--accent-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Test Result Items */
.test-result-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  margin-bottom: var(--space-2);
  animation: fadeIn 0.3s ease;
}

.test-result-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.test-result-body {
  flex: 1;
  min-width: 0;
}

.test-result-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.test-result-detail {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  word-break: break-word;
}

.test-result-item.pending {
  opacity: 0.6;
}

.test-result-item .loading-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
  flex-shrink: 0;
}

/* Skeleton Loading for Cards */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary),
    var(--bg-tertiary),
    var(--bg-secondary)
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}

.skeleton-card {
  height: 120px;
  margin-bottom: var(--space-4);
}

.skeleton-text {
  height: 16px;
  margin-bottom: var(--space-2);
  width: 80%;
}

.skeleton-text.short {
  width: 60%;
}

/* Enhanced Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.4s ease-out backwards;
}

.slide-in-left {
  animation: slideInLeft 0.4s ease-out backwards;
}

.slide-in-right {
  animation: slideInRight 0.4s ease-out backwards;
}

.fade-in-delayed {
  animation: fadeIn 0.4s ease-out 0.1s backwards;
}

.bounce {
  animation: bounce 2s infinite;
}

.pulse {
  animation: pulse 2s infinite;
}

/* Staggered Animation Delays */
.division-group:nth-child(1) {
  animation-delay: 0s;
}
.division-group:nth-child(2) {
  animation-delay: 0.1s;
}
.division-group:nth-child(3) {
  animation-delay: 0.2s;
}
.division-group:nth-child(4) {
  animation-delay: 0.3s;
}

.official:nth-child(1) {
  animation-delay: 0s;
}
.official:nth-child(2) {
  animation-delay: 0.05s;
}
.official:nth-child(3) {
  animation-delay: 0.1s;
}
.official:nth-child(4) {
  animation-delay: 0.15s;
}

.subsection-header {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-2) 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.local-subsection {
  color: var(--accent-color);
  background: linear-gradient(to right, var(--accent-light), transparent);
  padding-left: var(--space-3);
  border-radius: var(--radius);
}

.all-subsection {
  color: var(--text-secondary);
}

/* Compact official elements */
.compact-official {
  --detail-accent: var(--accent-color);
  background: var(--bg-card);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  transition: var(--transition);
  overflow: hidden;
}

.compact-official:hover,
.compact-official:focus-within {
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.official-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
  font: inherit;
}

.official-name-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.official-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: var(--text-base);
}

.official-summary {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
}

.official-detail-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  color: var(--text-muted);
  transition:
    transform var(--transition-theme-duration) ease,
    color var(--transition-theme-duration) ease;
}

.compact-official:hover .official-detail-indicator,
.compact-official:focus-within .official-detail-indicator {
  color: var(--detail-accent);
  transform: translateX(2px);
}

.compact-official.active {
  border-color: var(--detail-accent);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, var(--bg-card), var(--accent-light));
}
.detail-item {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.contact-link {
  color: var(--accent-color);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--accent-color);
  border-radius: var(--radius);
  transition: var(--transition);
  display: inline-block;
}

.contact-link:hover {
  background: var(--accent-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.contact-link:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.responsibilities-header {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  margin: var(--space-2) 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: var(--transition);
  width: 100%;
  text-align: left;
}

.responsibilities-header:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.responsibilities-list {
  margin: 0;
  padding-left: var(--space-4);
  list-style-type: disc;
  background: var(--bg-card);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.responsibilities-list li {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
}

.responsibilities-list li:last-child {
  margin-bottom: 0;
}

/* Local officials styling */
.local-official {
  background: linear-gradient(to right, var(--accent-light), var(--bg-card));
  border-left: 3px solid var(--accent-color);
}

.local-official .official-name {
  font-weight: 600;
}

/* Animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .compact-official {
    padding: var(--space-2);
  }

  .official-main {
    gap: var(--space-2);
  }

  .official-name {
    font-size: var(--text-sm);
  }

  .contact-links {
    gap: var(--space-1);
  }

  .contact-link {
    font-size: 10px;
    padding: 4px 8px;
  }
}

.officials-list.search-active .division-group {
  display: none;
}
.officials-list.search-active .search-results-group {
  display: block;
}
.search-results-group {
  display: none;
  padding-top: 0.5rem;
}
.search-results-group .result-count {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin: 0 0 0.25rem 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-results-section {
  padding-bottom: var(--space-2);
}

.search-results-subheading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 var(--space-3);
  margin: var(--space-1) 0;
}

.search-meeting-result-list,
.search-official-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3);
}

.search-meeting-result-list .calendar-event-item {
  margin: 0;
}

.search-official-result-list .official {
  margin: 0;
}

.search-meeting-button {
  align-items: flex-start;
}
.search-results-empty {
  padding: 0.75rem 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ============================
   SIMPLIFIED UI STYLES (Issue #11)
   ============================== */

/* Simplified Navigation Row */
.simplified-nav {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-subtle);
}

.nav-row {
  display: flex;
  align-items: center;
  /* No top padding: the sidebar's own padding already provides it, and
     matches the header's padding so both toolbars line up exactly */
  padding: 0 6px var(--space-2) 6px;
  width: 100%;
  box-sizing: border-box;
}

.nav-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.nav-toggle-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-spacer {
  flex: 1;
  min-width: 12px;
}

.nav-utility-group {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.nav-btn-icon {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0;
  border-radius: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-btn-icon:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--accent-color);
}

.nav-btn-icon[aria-pressed="true"] {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* Search Row */
.search-row {
  padding: var(--space-2) 6px;
}

.search-row.hidden {
  display: none;
}

.search-row input[type="search"] {
  /* Matches the main "Search the web..." bar's pill treatment
     (.search-form/.search-input combined into one element) so the two
     search fields in the app read as the same component, including its
     larger text size and roomier padding - not just the same colors.
     The wrapping <div> reuses .search-container's own width:100% rule,
     so this doesn't need its own wrapper styles. */
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.search-row input[type="search"]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow:
    var(--shadow),
    0 0 0 3px var(--accent-light);
}

/* Simplified Calendar */
.simplified-calendar {
  margin-bottom: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.week-row {
  padding: 0 var(--space-2);
  border-bottom: none;
}

.week-row:last-of-type {
  border-bottom: none;
}

.week-days {
  display: flex;
  gap: 15px;
  justify-content: space-between;
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  min-width: 29px;
  width: 29px;
}

.week-day:hover {
  background: var(--bg-tertiary);
}

.week-day.has-events::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color);
}

.week-day.has-city-events::after {
  background: var(--milwaukee-blue);
}

.week-day.has-county-events::after {
  background: var(--warning-color);
}

.week-day.has-both-events::after {
  background: linear-gradient(
    45deg,
    var(--milwaukee-blue) 50%,
    var(--warning-color) 50%
  );
}

.week-day.selected {
  background: var(--accent-color);
  color: white;
  border-radius: 6px;
}

.day-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: normal;
  /* Sits directly on the frosted photo background, not an opaque card */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.day-name {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: normal;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.week-day.selected .day-name {
  color: white;
}

/* Calendar Key */
.calendar-key {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: var(--space-3);
  border-top: none;
  margin-top: 0;
}

.key-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.key-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.key-dot.city {
  background: var(--milwaukee-blue);
}

.key-dot.county {
  background: var(--warning-color);
}

.key-label {
  font-size: 12px;
  color: var(--text-muted);
  line-height: normal;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.key-livestream {
  font-size: 11px;
  color: var(--accent-color);
  text-decoration: none;
  margin-left: 4px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.key-livestream:hover,
.key-livestream:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Content Scroll View */
.content-scroll-view {
  flex: 1;
  overflow-y: auto;
  height: 0; /* Forces flex sizing */
  position: relative;
}

/* Custom scrollbar styling for government pane */
.content-scroll-view::-webkit-scrollbar {
  width: 15px;
  background: var(--bg-tertiary);
}

.content-scroll-view::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 7px;
}

.content-scroll-view::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 7px;
  border: 3px solid var(--bg-tertiary);
}

.content-scroll-view::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

.content-view {
  display: none;
  height: 100%;
  overflow-y: auto;
}

.content-view.active {
  display: block;
}

.events-list,
.officials-list {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Search Results View */
.search-suggestions {
  padding: var(--space-3) var(--space-3) 0;
}

.search-suggestions.hidden {
  display: none;
}

.search-suggestions-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.search-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.search-suggestion-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.search-suggestion-chip:hover,
.search-suggestion-chip:focus-visible {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.search-results-content {
  padding: var(--space-3);
}

.search-results-section {
  margin-bottom: var(--space-6);
}

.search-section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-level-badge {
  margin-top: var(--space-1);
}

.search-match-reason {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
}

.search-match-reason-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.search-match-highlight {
  background: color-mix(
    in srgb,
    var(--detail-accent, var(--accent-color)) 30%,
    transparent
  );
  color: var(--text-primary);
  border-radius: var(--radius-xs);
  padding: 0 0.15em;
}

/* Detail Overlay */
.detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.detail-overlay.hidden {
  display: none;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.detail-back-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: var(--space-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.detail-back-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--accent-color);
}

.detail-title-group {
  flex: 1;
}

.detail-title-group h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.detail-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Hide calendar when searching */
.searching .simplified-calendar {
  display: none;
}

/* Clear filter button and no events message */
.no-events-message {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-muted);
}

.clear-filter-btn {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition);
  margin-top: var(--space-3);
}

.clear-filter-btn:hover {
  background: var(--accent-hover);
}

/* Event Detail Styles */
.event-detail {
  line-height: var(--leading-relaxed);
}

.event-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.event-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.event-source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
}

.source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.info-section h5 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.info-section p {
  margin-top: var(--space-2);
}

.info-section p:first-of-type {
  margin-top: 0;
}

.event-date {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.event-time {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.event-time.is-now {
  font-weight: 700;
  color: var(--text-primary);
}

.event-time .now-badge {
  font-size: 0.7rem;
}

.event-location,
.event-body {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.event-location {
  white-space: pre-line;
}

.event-description {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}

.event-description ul {
  padding-left: var(--space-4);
}

.event-description li {
  margin-top: var(--space-2);
}

.event-description li:first-child {
  margin-top: 0;
}

.event-description p + p {
  margin-top: var(--space-2);
}

.event-inline-link {
  color: var(--accent-color);
  word-break: break-word;
}

.event-inline-link:hover,
.event-inline-link:focus {
  text-decoration: underline;
  outline: none;
}

.event-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-light);
  color: var(--accent-color);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: var(--transition);
  border: 1px solid transparent;
}

.event-link:hover {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.event-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-light);
}

.agenda-items-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.agenda-items-heading-row h5 {
  margin-bottom: 0;
}

.agenda-items-search-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.agenda-items-search-toggle:hover,
.agenda-items-search-toggle:focus {
  background: var(--accent-light);
  color: var(--accent-color);
  border-color: var(--accent-color);
  outline: none;
}

.agenda-items-search-toggle[aria-pressed="true"] {
  background: var(--accent-light);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.agenda-items-search-row {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.agenda-items-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.agenda-items-search-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.event-items-loading,
.event-items-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.event-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-item {
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.event-item-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.event-item-number {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.event-item-title {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

.event-item-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.event-item-action,
.event-item-passed {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.event-item-passed.is-passed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.35);
}

.event-item-passed.is-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
}

.event-item-file,
.event-item-updated {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.event-item-toggle {
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.event-item-toggle:hover,
.event-item-toggle:focus {
  text-decoration: underline;
  outline: none;
}

.event-item-detail-panel {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-item-detail-panel[hidden] {
  display: none;
}

.event-item-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}

.event-item-attachments-loading,
.event-item-attachments-empty {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.event-item-attachments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-item-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--accent-color);
  text-decoration: none;
}

.event-item-attachment-link:hover,
.event-item-attachment-link:focus {
  text-decoration: underline;
  outline: none;
}

/* Settings Pane View */
.settings-pane-content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings-pane-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-pane-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.settings-pane-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-pane-field > label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.settings-pane-address-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.settings-pane-address-row input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.settings-pane-address-row input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.settings-pane-actions {
  display: flex;
  gap: var(--space-2);
}

.settings-pane-actions .btn-primary,
.settings-pane-actions .btn-secondary {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.settings-pane-current-address {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  display: none;
}

.settings-pane-current-address.visible {
  display: block;
}

.settings-pane-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.settings-pane-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.settings-pane-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.settings-pane-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.settings-pane-color-input {
  width: 100%;
  height: 2.25rem;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  cursor: pointer;
}

.settings-pane-theme-btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-pane-about {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.settings-pane-version {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

/* Settings Pane Status Feedback */
.settings-pane-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.settings-pane-status.hidden {
  display: none;
}

.settings-pane-status.loading {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.settings-pane-status.success {
  background: rgba(34, 139, 34, 0.12);
  color: #228b22;
  border: 1px solid rgba(34, 139, 34, 0.3);
}

[data-theme="dark"] .settings-pane-status.success {
  background: rgba(34, 139, 34, 0.15);
  color: #6fcf6f;
  border-color: rgba(34, 139, 34, 0.35);
}

.settings-pane-status.error {
  background: rgba(220, 20, 60, 0.1);
  color: #dc143c;
  border: 1px solid rgba(220, 20, 60, 0.3);
}

[data-theme="dark"] .settings-pane-status.error {
  background: rgba(220, 20, 60, 0.15);
  color: #ff6b6b;
  border-color: rgba(220, 20, 60, 0.35);
}

.settings-pane-status .status-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.settings-pane-status .status-text {
  flex: 1;
  line-height: 1.3;
}

.settings-pane-status.loading .status-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Disabled state for buttons during loading */
.settings-pane-actions .btn-primary:disabled,
.settings-pane-actions .btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .nav-controls {
    gap: var(--space-1);
  }

  .nav-toggle-group,
  .nav-utility-group {
    gap: var(--space-1);
  }

  .nav-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--text-sm);
  }

  .week-days {
    gap: 2px;
  }

  .week-day {
    min-width: 32px;
    padding: var(--space-1);
  }

  .calendar-key {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Extension Options Page (options.html) - reuses the .settings-pane-*
   classes from the in-app settings pane so the two stay visually
   identical; this just supplies the standalone page's own frame */
.options-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4);
  gap: var(--space-6);
}

.options-header {
  text-align: center;
}

.options-header h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.options-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.options-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}