/*
 * unified.css — Design consistency override for fight.fudgie.org
 *
 * Drop into /static/ and add ONE line to base.html, after the Bootstrap link:
 *   <link rel="stylesheet" href="/static/unified.css">
 *
 * Does not touch functionality — only visual layer.
 * Bootstrap 4 remains the layout engine throughout.
 */

/* ============================================================
   TOKENS — edit here to retheme the whole site
   ============================================================ */
:root {
  /* Primary action color. Default is a slightly refined blue. */
  --u-blue:         #1a56db;
  --u-blue-hover:   #1741b0;
  --u-blue-bg:      #eff4ff;
  --u-blue-border:  #c3d6fe;

  /* Neutral surface */
  --u-bg:           #f8f9fb;
  --u-card-bg:      #ffffff;
  --u-border:       #dee2e6;
  --u-border-dark:  #c9d0d8;

  /* Text */
  --u-text:         #1a1d23;
  --u-text-2:       #5a6070;
  --u-text-3:       #9aa0ac;

  /* Semantic (kept intentionally close to Bootstrap defaults) */
  --u-green:        #198754;
  --u-red:          #dc2626;
  --u-amber:        #b45309;

  /* Radii + shadow */
  --u-radius:       5px;
  --u-shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --u-shadow:       0 1px 3px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.06);

  /* Layout heights */
  --navbar-height:      44px;
  --sticky-bar-height:  44px;
}

/* ============================================================
   TYPOGRAPHY
   Pull in Inter. Falls back to Bootstrap's system stack.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--u-text);
  background-color: var(--u-bg);
}

/* Slightly tighten headings */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }

/* Links: remove bold from base.html (feels heavy everywhere) */
a { font-weight: inherit; }

/* ============================================================
   BUTTONS
   Collapse all the different outline-* variants to one ghost
   style, and give btn-primary a consistent look.
   ============================================================ */

/* Primary */
.btn-primary {
  background-color: var(--u-blue);
  border-color: var(--u-blue);
  font-weight: 500;
  letter-spacing: .01em;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--u-blue-hover);
  border-color: var(--u-blue-hover);
  box-shadow: none;
}
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(26,86,219,.25); }

/* Ghost — all outline variants become one neutral ghost */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-success,
.btn-ghost {
  background-color: var(--u-card-bg);
  border-color: var(--u-border-dark);
  color: var(--u-text-2);
  font-weight: 500;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover,
.btn-ghost:hover {
  background-color: #f1f3f5;
  border-color: #aab0ba;
  color: var(--u-text);
  box-shadow: none;
}
.btn-outline-primary:focus,
.btn-outline-secondary:focus,
.btn-outline-info:focus,
.btn-ghost:focus {
  box-shadow: 0 0 0 3px rgba(26,86,219,.18);
}

/* Active/selected state for outline buttons used as toggles */
.btn-outline-primary.active,
.search-mode-btn.btn-primary.active {
  background-color: var(--u-blue);
  border-color: var(--u-blue);
  color: #fff;
}

/* Small buttons — tighten padding slightly */
.btn-sm { font-size: 12.5px; padding: .28rem .65rem; border-radius: var(--u-radius); }
.btn    { border-radius: var(--u-radius); }

/* Btn group continuity */
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--u-radius) 0 0 var(--u-radius); }
.btn-group > .btn:last-child  { border-radius: 0 var(--u-radius) var(--u-radius) 0; }

/* ============================================================
   ALERTS
   The alert-info boxes are used for page descriptions / stats
   banners. Make them quieter and consistent.
   ============================================================ */
.alert {
  border-radius: var(--u-radius);
  font-size: 13.5px;
  border-width: 1px;
}

/* Page-description / stats banner (used on show.html, index.html) */
.alert-info {
  background-color: var(--u-blue-bg);
  border-color: var(--u-blue-border);
  color: #1e3a8a;
}
.alert-info a { color: var(--u-blue); }

/* About page uses alert-primary — same treatment */
.alert-primary {
  background-color: var(--u-blue-bg);
  border-color: var(--u-blue-border);
  color: #1e3a8a;
}
.alert-primary a { color: var(--u-blue); }

/* Warning alerts (hidden by default in show.html, kept subtle) */
.alert-warning {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}

/* ============================================================
   CARDS
   The show cards and people cards all use .card.bg-light.shadow-sm
   ============================================================ */
.card {
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  background-color: var(--u-card-bg);
  box-shadow: var(--u-shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.card.bg-light { background-color: var(--u-card-bg) !important; }
.card.shadow-sm { box-shadow: var(--u-shadow-sm) !important; }
.card:hover  { box-shadow: var(--u-shadow) !important; border-color: var(--u-border-dark); }

/* Show grid cards — title link color */
.card-title a { color: var(--u-text); font-weight: 500; }
.card-title a:hover { color: var(--u-blue); text-decoration: none; }

/* ============================================================
   CATEGORY / SECTION HEADERS
   Currently: <h4><strong><a>CATEGORY</a></strong></h4>
   with an inline border-bottom:2px solid — very aggressive.
   Toned down to a smaller label style.
   ============================================================ */
.category-header {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none;
  color: var(--u-text) !important;
  margin-top: 2em;
}
.category-header a {
  color: var(--u-text) !important;
  text-decoration: none;
}
.category-header a:hover { color: var(--u-blue) !important; }

/* The border-bottom row wrapping the header */
.row.row-cols-8.m-0.mb-2[style*="border-bottom"] {
  border-bottom: 1px solid var(--u-border) !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
}

/* People list letter headers */
.letter-section h5 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--u-text-3); }
.letter-section h5[style*="border-bottom"] { border-bottom: 1px solid var(--u-border) !important; }

/* ============================================================
   TOP NAVIGATION ROW
   Each page: .d-flex.justify-content-between.align-items-center.mb-3
   Contains back button on left, BMC + utility buttons on right.
   ============================================================ */
.d-flex.justify-content-between.align-items-center.mb-3 {
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--u-border);
  margin-bottom: 14px !important;
}

/* Buy Me a Coffee image — reduced size, aligned with ghost buttons */
.d-flex.justify-content-between a[href*="buymeacoffee"] img {
  height: 22px !important;
  vertical-align: middle;
  opacity: .8;
  transition: opacity .15s;
}
.d-flex.justify-content-between a[href*="buymeacoffee"]:hover img { opacity: 1; }

/* ============================================================
   SHOW DETAIL HEADER — show name + border
   ============================================================ */
.d-flex.justify-content-between.align-items-center.pb-2[style*="border-bottom"] {
  border-bottom: 1px solid var(--u-border) !important;
  padding-bottom: 8px;
}

/* ============================================================
   EPISODE DATE COLUMN
   ============================================================ */
.episode-date {
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius);
  background: var(--u-bg);
}
.episode-date.episode-date-stamp {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  min-width: 4.25rem;
  padding: 0.32rem 0.25rem 0.3rem;
  text-align: center;
  line-height: 1.05;
  color: var(--u-text);
}
.episode-date.episode-date-with-show {
  flex-basis: 5.1rem;
  width: 5.1rem;
  min-width: 5.1rem;
}
.episode-date-day {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1;
}
.episode-date-month {
  display: inline;
  color: var(--u-text-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.1;
}
.episode-date-year {
  display: inline;
  color: var(--u-text-3);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.1;
}
.episode-date-weekday {
  display: block;
  margin-top: 0.15rem;
  color: var(--u-text-3);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.1;
}
.episode-date-show,
.episode-date-stamp .episode-show-name {
  margin-top: 0.24rem;
  color: var(--u-text-2);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.1;
  white-space: normal;
}
.episode-date-show {
  display: block;
}
.episode-date-stamp .episode-show-name {
  display: none;
}
.episode-title .episode-show-name {
  display: inline;
  color: var(--u-text-2);
  font-weight: 600;
}

/* ============================================================
   BADGES
   Unify sizes and bring in consistent neutral style
   ============================================================ */
.badge {
  font-weight: 500;
  font-size: 75%;
  letter-spacing: .01em;
  border-radius: 4px;
}

/* Secondary (used everywhere as a neutral count) */
.badge-secondary { background-color: #e9ecef; color: var(--u-text-2); }

/* Info (used for episode/result counts) */
.badge-info { background-color: var(--u-blue-bg); color: var(--u-blue); }

/* Success */
.badge-success { background-color: #d1fae5; color: #065f46; }

/* Warning */
.badge-warning { background-color: #fef3c7; color: #92400e; }

/* Danger */
.badge-danger { background-color: #fee2e2; color: #991b1b; }

/* Light (used in people list for episode counts) */
.badge-light { background-color: #f1f3f5; color: var(--u-text-2); border: 1px solid var(--u-border); }

/* ============================================================
   TABLES
   ============================================================ */
table th {
  background-color: var(--u-bg) !important;
  color: var(--u-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--u-border) !important;
}
table td { border-color: var(--u-border) !important; vertical-align: middle; font-size: 14px; }
table tbody tr:hover td { background-color: var(--u-blue-bg); }

/* DataTables overrides */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--u-blue) !important;
  border-color: var(--u-blue) !important;
  color: #fff !important;
  border-radius: var(--u-radius);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--u-bg) !important;
  border-color: var(--u-border-dark) !important;
  color: var(--u-text) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  font-size: 13px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-control-sm {
  border-color: var(--u-border);
  border-radius: var(--u-radius);
  color: var(--u-text);
  font-size: 13.5px;
}
.form-control:focus, .form-control-sm:focus {
  border-color: var(--u-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

/* Bootstrap-select picker */
.bootstrap-select .dropdown-toggle {
  border-color: var(--u-border);
  border-radius: var(--u-radius);
  background-color: var(--u-card-bg);
  color: var(--u-text);
  font-size: 13.5px;
}
.bootstrap-select .dropdown-menu { border-color: var(--u-border); border-radius: var(--u-radius); font-size: 13.5px; }
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active { background-color: var(--u-blue); }

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu { border-color: var(--u-border); border-radius: var(--u-radius); box-shadow: var(--u-shadow); font-size: 13.5px; }
.dropdown-item { color: var(--u-text-2); padding: 6px 14px; }
.dropdown-item:hover { background-color: var(--u-blue-bg); color: var(--u-blue); }
.dropdown-item i { width: 16px; }

/* ============================================================
   SPEAKER / GROUP BADGES (in episode rows)
   Keep the semantic party/network borders but clean the base
   ============================================================ */
.badge.group {
  font-size: 12px;
  font-weight: 500;
  padding: .22em .55em;
  border-radius: 4px;
}

/* ============================================================
   CLAIMS OVERVIEW
   Sync the selection highlight to our blue
   ============================================================ */
.claims-row-selected { box-shadow: inset 3px 0 0 var(--u-blue) !important; background: var(--u-blue-bg) !important; }

/* Stance badges in claims — normalise size */
.stance-badge { font-size: 12px !important; border-radius: 4px !important; }

/* ============================================================
   TOPICS / CLAIMS CARDS (have their own border-radius: 1rem)
   Bring inline with the rest of the system
   ============================================================ */
.topics-overview-card,
.claims-top-card {
  border-radius: var(--u-radius) !important;
  border-color: var(--u-border) !important;
  box-shadow: var(--u-shadow) !important;
}
.topics-overview-rising-link {
  border-radius: var(--u-radius) !important;
  border-color: var(--u-border) !important;
}

/* ============================================================
   QUOTE STYLE (in episode/transcript views)
   ============================================================ */
.quote-style {
  border-left: 4px solid var(--u-blue) !important;
  border-radius: 0 var(--u-radius) var(--u-radius) 0;
  background-color: var(--u-blue-bg) !important;
  color: var(--u-text-2) !important;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-content { border-radius: var(--u-radius); border-color: var(--u-border); box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.modal-header { border-bottom-color: var(--u-border); }
.modal-footer { border-top-color: var(--u-border); }

/* ============================================================
   FEEDBACK BUTTON (fixed bottom-right)
   ============================================================ */
.btn-feedback {
  background-color: var(--u-blue) !important;
  border-color: var(--u-blue) !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(26,86,219,.35) !important;
}

/* ============================================================
   MISC UTILITY
   ============================================================ */

/* The context lines in search results */
.context { color: var(--u-text-3); }

/* "mark" highlight for search terms — already has padding:0, just tighten */
mark { border-radius: 2px; background-color: #fef9c3; }

/* Hover highlight rows (used in episode list) */
.hover-highlight:hover {
  background-color: var(--u-blue-bg) !important;
  box-shadow: var(--u-shadow) !important;
}

/* Playing button border */
span.playing-button { border-color: var(--u-blue) !important; }

/* Person profile card */
.person-profile-card {
  border: 1px solid var(--u-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}

.person-profile-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1d23;
  margin-bottom: 4px;
}

.person-profile-card-group {
  font-size: 11.5px;
  font-weight: 500;
  color: #7a8090;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.person-profile-card-summary {
  font-size: 12.5px;
  color: #5a6070;
  line-height: 1.5;
}

.person-profile-card-links {
  font-size: 12px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--u-border);
}

.person-profile-card-links a {
  color: var(--u-blue, #1a56db);
  font-weight: 500;
  text-decoration: none;
}

.person-profile-card-links a:hover {
  text-decoration: underline;
}

.person-profile-card-image {
  border: 1px solid var(--u-border);
  border-radius: 5px;
}

.person-profile-card-loading,
.person-profile-card-empty {
  font-size: 13px;
  color: #9aa0ac;
  padding: 12px;
}

/* Tooltip */
.tooltip-inner {
  background-color: var(--u-card-bg) !important;
  border-color: var(--u-border) !important;
  color: var(--u-text) !important;
  font-size: 13px;
  border-radius: var(--u-radius) !important;
}

/* ============================================================
   ABOUT PAGE — pre/code blocks
   ============================================================ */
pre.bg-light { background-color: var(--u-bg) !important; border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 12px; }

/* ============================================================
   PERSISTENT SHELL NAVIGATION
   ============================================================ */
.shell-navbar {
  position: sticky;
  top: 0;
  z-index: 2100;
  display: flex;
  align-items: stretch;
  height: 44px;
  background: var(--u-card-bg);
  border-bottom: 1px solid var(--u-border);
}

.shell-source {
  position: relative;
  flex: 0 0 auto;
}

.shell-source-button {
  height: 44px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--u-border);
  background: var(--u-card-bg);
  color: var(--u-text);
}

.shell-source-button:hover {
  background: var(--u-bg);
}

.shell-source-thumb,
.shell-menu-thumb {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #334155;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.shell-source-label {
  max-width: 150px;
  overflow: hidden;
  color: var(--u-text);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-source-chevron {
  color: var(--u-text-3);
  transition: transform .15s ease;
}

.shell-source-chevron.is-open {
  transform: rotate(180deg);
}

.shell-source-menu {
  position: absolute;
  top: 44px;
  left: 0;
  width: 320px;
  overflow: hidden;
  border: 1px solid var(--u-border);
  border-radius: 0 var(--u-radius) var(--u-radius) var(--u-radius);
  background: var(--u-card-bg);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 2110;
}

.shell-source-menu[hidden] {
  display: none !important;
}

.shell-source-search {
  padding: 8px;
  border-bottom: 1px solid var(--u-border);
}

.shell-source-search input {
  width: 100%;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  padding: 5px 9px;
  color: var(--u-text);
  font-size: 13px;
  outline: none;
}

.shell-source-search input:focus {
  border-color: var(--u-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

.shell-source-scroll {
  max-height: 330px;
  overflow-y: auto;
}

.shell-source-group-label {
  padding: 8px 12px 4px;
  color: var(--u-text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.shell-source-all,
.shell-source-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--u-text);
  padding: 6px 12px;
  text-align: left;
}

.shell-source-all {
  border-bottom: 1px solid var(--u-border);
  padding-top: 7px;
  padding-bottom: 7px;
}

.shell-source-all:hover,
.shell-source-option:hover {
  background: var(--u-bg);
}

.shell-source-all.is-selected,
.shell-source-option.is-selected {
  background: var(--u-blue-bg);
}

.shell-source-option.is-unavailable {
  opacity: .45;
}

.shell-source-option.is-unavailable:hover,
.shell-source-option.is-unavailable.is-selected {
  opacity: .72;
}

.shell-source-option.is-unavailable .shell-menu-thumb {
  filter: grayscale(1);
}

.shell-source-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-source-count {
  flex: 0 0 auto;
  color: var(--u-text-3);
  font-size: 11px;
}

.shell-source-check {
  flex: 0 0 auto;
  visibility: hidden;
  color: var(--u-blue);
  font-size: 12px;
}

.is-selected > .shell-source-check {
  visibility: visible;
}

.shell-tab {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  border-bottom: 2px solid transparent;
  color: var(--u-text-2);
  font-size: 13px;
  font-weight: 500 !important;
  text-decoration: none;
  white-space: nowrap;
}

.shell-tab:hover {
  color: var(--u-text);
  text-decoration: none;
}

.shell-tab.active {
  border-bottom-color: var(--u-blue);
  color: var(--u-blue);
}

.shell-tab-primary {
  height: 32px;
  margin: 6px 3px;
  padding: 0 12px;
  border: 1px solid var(--u-border);
  border-radius: 7px;
  background: var(--u-bg);
  color: var(--u-text);
  font-weight: 650 !important;
}

.shell-tab-primary:hover {
  border-color: #c4ccd8;
  background: var(--u-card-bg);
  color: var(--u-text);
}

.shell-tab-primary.active {
  border-color: rgba(26,86,219,.32);
  background: var(--u-blue-bg);
  color: var(--u-blue);
}

.shell-tab.is-disabled {
  color: var(--u-text-3);
  cursor: default;
}

.shell-tab-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--u-blue);
}

.shell-tab-separator {
  width: 1px;
  margin: 8px 2px;
  background: var(--u-border);
}

.shell-spacer {
  flex: 1 1 auto;
}

.shell-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-left: 1px solid var(--u-border);
}

.shell-actions .btn {
  flex: 0 0 auto;
}

.shell-bmc img {
  height: 22px;
  opacity: .8;
  transition: opacity .15s ease;
}

.shell-bmc:hover img {
  opacity: 1;
}

.shell-content {
  padding-top: 16px;
}

.legacy-source-control,
.legacy-source-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ============================================================
   SHARED SEARCH BAR
   ============================================================ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--u-border);
}

.search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 160px;
  display: flex;
  align-items: stretch;
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  padding: 7px 36px 7px 12px;
  background: var(--u-card-bg);
  color: var(--u-text);
  font-size: 14px;
  outline: none;
}

.search-input-wrap.has-filter .search-input {
  padding-right: 64px;
}

.search-input:focus {
  border-color: var(--u-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
}

.search-input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--u-text-3);
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  font-size: 14px;
}

.search-input-icon:hover {
  color: var(--u-text-2);
}

.search-input-icon.search-clear {
  right: 4px;
  font-size: 18px;
}

.search-input-icon.search-filter-toggle {
  right: 30px;
}

.search-input-icon[hidden] {
  display: none;
}

.search-icon-btn {
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.phrase-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--u-text-2);
  font-size: 13px;
  white-space: nowrap;
}

.search-hits {
  color: var(--u-text-3);
  font-size: 12px;
  white-space: nowrap;
}

.search-bar .search-mode-group {
  flex: 0 0 auto;
}

.search-bar .search-mode-btn {
  font-size: 12px;
  padding: 4px 9px;
}

.search-tab-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 12px;
}

.search-result-meta {
  color: var(--u-text-2);
  font-size: 13px;
  white-space: nowrap;
}

.search-overflow-btn {
  font-size: 16px;
  line-height: 1;
}

.search-tab-controls #stats-toggle.active {
  background: var(--u-blue-bg);
  border-color: var(--u-blue-border);
  color: var(--u-blue);
}

#stats {
  margin: 10px 0 14px;
}

#stats-content {
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  background: var(--u-card-bg);
  padding: 12px;
  box-shadow: var(--u-shadow-sm);
}

#stats .chart-tabs {
  text-align: left !important;
}

#stats .chart-wrapper {
  width: min(100%, 1100px) !important;
  height: clamp(240px, 32vw, 420px) !important;
}

@media (max-width: 900px) {
  .shell-navbar {
    overflow: visible;
  }

  .shell-source-button {
    min-width: 150px;
  }

  .shell-actions {
    padding-right: 8px;
  }

  .shell-actions .btn {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 820px) {
  .shell-source-button {
    min-width: 138px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .shell-source-label {
    max-width: 96px;
  }

  .shell-tab {
    padding-left: 8px;
    padding-right: 8px;
  }

  .shell-actions {
    gap: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .shell-bmc {
    display: none;
  }

  .shell-actions .btn {
    font-size: 0;
    gap: 0;
    padding-left: 7px;
    padding-right: 7px;
  }

  .shell-actions .btn i {
    margin: 0 !important;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .search-bar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .search-input-wrap {
    flex-basis: 100%;
  }

  .search-tab-controls {
    align-items: center;
  }
}

/* ============================================================
   FILTER SEARCH PANEL
   ============================================================ */
#advanced-options {
  background: var(--u-card-bg, #fff);
  border: 1px solid var(--u-border, #dee2e6);
  border-top: none;
  border-radius: 0 0 5px 5px;
  padding: 16px;
  margin-bottom: 12px;
}

#advanced-options .filter-section {
  margin-bottom: 14px;
}

#advanced-options .filter-section:last-of-type {
  margin-bottom: 8px;
}

#advanced-options .filter-section-label,
#advanced-options label:not(.form-check-label) {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9aa0ac;
  margin-bottom: 6px;
  display: block;
}

#advanced-options .form-control,
#advanced-options input[type="date"],
#advanced-options input[type="text"] {
  font-size: 13px;
  border-color: var(--u-border, #dee2e6);
  border-radius: 5px;
}

#advanced-options .form-check-label {
  font-size: 13px;
  color: #5a6070;
}

#advanced-options .filter-inline-label {
  font-size: 13px;
  color: #5a6070;
}

/* Date row — keep From/To on same line but give them breathing room */
#advanced-options .date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 1em;
}

#advanced-options .date-row label {
  font-size: 13px;
  color: #5a6070;
  white-space: nowrap;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
#advanced-options input[type="date"],
#advanced-options .date-input {
  max-width: 160px;
}

/* Close button */
#advanced-options .close-filter-btn,
#advanced-options [data-dismiss],
#advanced-options .btn-close-filter {
  position: absolute;
  top: 10px;
  right: 12px;
}

/* Clear filter button */
#advanced-options .btn-clear-filter,
#advanced-options button[type="reset"] {
  font-size: 12px;
  margin-top: 8px;
}

/* ============================================================
   VIDEO / AUDIO PLAYER
   ============================================================ */
.player {
  border: 1px solid var(--u-border, #dee2e6) !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  background: #0f172a;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Header bar */
.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #1e293b;
  font-size: 12px;
  color: #94a3b8;
  gap: 8px;
}
.player-header .episode-id {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.player-header .timestamp {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
}
.player-header .btn-stop,
.player-header button {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
}
.player-header .btn-stop:hover { background: #334155; color: #f1f5f9; }

/* Controls row */
.player-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  background: #fff;
  border-top: 1px solid var(--u-border, #dee2e6);
  font-size: 12px;
  color: #5a6070;
}
.player-controls-row .form-check {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.player-controls-row .form-check-input {
  margin: 0;
  position: static;
}
.player-controls-row .form-check-label {
  font-size: 12px;
  color: #5a6070;
  margin: 0;
}
.player-voice-control {
  display: none !important;
}
.player.player-audio .player-size-control {
  display: none !important;
}
.player.player-audio .player-voice-control {
  display: flex !important;
}
.player-controls-row .share-btn {
  color: #9aa0ac;
  cursor: pointer;
}
.player-controls-row .share-btn:first-of-type { margin-left: auto; }
.player-controls-row .share-btn:hover { color: #1a56db; }

/* ============================================================
   EPISODE STICKY SUB-HEADER
   Sits below the navbar; fades in once the main episode card has
   scrolled above the fold.
   ============================================================ */
.episode-sticky-bar {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  height: var(--sticky-bar-height);
  background: var(--u-card-bg);
  border-bottom: 1px solid var(--u-border);
  box-shadow: var(--u-shadow-sm);
  z-index: 150;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.episode-sticky-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.episode-sticky-inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 14px;
  font-size: 13px;
  color: var(--u-text);
  white-space: nowrap;
  overflow: hidden;
}
.episode-sticky-inner .sticky-show {
  font-weight: 600;
  flex-shrink: 0;
}
.episode-sticky-inner .sticky-date {
  color: var(--u-text-2);
  flex-shrink: 0;
}
.episode-sticky-inner .sticky-title {
  color: var(--u-text);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 2 1 0;
}
.episode-sticky-inner .sticky-chapter {
  color: var(--u-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 0;
  font-style: italic;
}
.episode-sticky-inner .sticky-sep {
  color: var(--u-text-3);
  flex-shrink: 0;
}

/* Small / corner state (default, Large unchecked) */
.player:not(.player-large) {
  position: fixed !important;
  top: calc(var(--navbar-height) + var(--sticky-bar-height)) !important;
  right: 12px !important;
  width: 340px;
  z-index: 99;
}
.player:not(.player-large) #video_wrapper {
  width: 100% !important;
  height: 190px !important;
}
.player:not(.player-large) .video-js {
  width: 100% !important;
  height: 190px !important;
}

/* Large state — floats, centered via left:50% + transform */
.player.player-large {
  position: fixed !important;
  top: calc(var(--navbar-height) + var(--sticky-bar-height)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  z-index: 99;
  border-radius: 6px !important;
}
.player.player-large:not(.player-audio) .video-js {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
}

/* Audio-only state — hide video area, keep a slim audio bar.
   Audio ignores the Large checkbox — stays compact even when checked. */
.player.player-audio {
  width: 320px !important;
}
.player.player-audio.player-large {
  transform: none;
  left: auto !important;
  right: 12px !important;
}
.player.player-audio .vjs-tech,
.player.player-audio .vjs-poster,
.player.player-audio .vjs-loading-spinner,
.player.player-audio .vjs-big-play-button,
.player.player-audio .vjs-text-track-display {
  display: none !important;
}
.player.player-audio .video-js {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}
.player.player-audio .vjs-control-bar {
  position: relative !important;
  display: flex !important;
  background: #1e293b !important;
  border-top: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.player.player-audio #video_wrapper {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 10px;
  background: #1e293b;
  display: flex;
  align-items: center;
}
.player.player-audio.player-voice-visible {
  overflow: visible;
}
.voice-speaker-popout[hidden] {
  display: none !important;
}
.voice-speaker-popout {
  --voice-speaker-color: #999;
  display: none;
}
.player.player-audio.player-voice-visible .voice-speaker-popout {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  width: 84px;
  min-height: 104px;
  padding: 9px 7px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--u-border, #dee2e6);
  border-top: 3px solid var(--voice-speaker-color);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 100;
}
.voice-speaker-avatar {
  width: 56px;
  height: 56px;
  border: 2px solid var(--voice-speaker-color);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #334155;
  flex: 0 0 auto;
}
.voice-speaker-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voice-speaker-fallback {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}
.voice-speaker-name {
  max-width: 100%;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

@media (max-width: 520px) {
  .player:not(.player-large),
  .player.player-audio.player-large {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
  .player.player-audio.player-voice-visible .voice-speaker-popout {
    position: static;
    width: auto;
    min-height: 0;
    padding: 7px 10px;
    flex-direction: row;
    justify-content: flex-start;
    background: #111827;
    border: 0;
    border-top: 1px solid #334155;
    border-bottom: 1px solid #334155;
    border-radius: 0;
    box-shadow: none;
  }
  .voice-speaker-avatar {
    width: 40px;
    height: 40px;
  }
  .voice-speaker-name {
    color: #e2e8f0;
    font-size: 12px;
    text-align: left;
  }
}

/* VideoJS skin tweaks */
.player .video-js .vjs-control-bar {
  background: rgba(15, 23, 42, 0.85);
}
.player .video-js .vjs-play-progress,
.player .video-js .vjs-volume-level {
  background: #1a56db;
}
.player .video-js .vjs-big-play-button {
  border-color: rgba(255,255,255,.4);
  background: rgba(15,23,42,.6);
  border-radius: 6px;
}

/* Quick search bar (Shows tab / Episodes tab) */
.quick-search-form {
  margin: 0;
}
.quick-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--u-border, #dee2e6);
}
.quick-search-input {
  flex: 1;
  border: 1px solid var(--u-border, #dee2e6);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: #1a1d23;
  background: #fff;
}
.quick-search-input:focus {
  border-color: var(--u-blue, #1a56db);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}
.quick-search-phrase {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #5a6070;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}
.quick-search-hits {
  font-size: 12px;
  color: #9aa0ac;
  white-space: nowrap;
  min-width: 120px;
}
.quick-search-hits strong {
  color: #1a1d23;
  font-weight: 600;
}

/* Speaker pill — selected/hovered state (filled blue for contrast) */
.badge.group:hover,
.badge.group-selected,
.badge.group.group-selected {
  background-color: var(--u-blue, #1a56db) !important;
  color: #fff !important;
  border-color: var(--u-blue, #1a56db) !important;
}
.badge.group:hover .group-indicator,
.badge.group-selected .group-indicator,
.badge.group.group-selected .group-indicator {
  color: #fff !important;
}

/* People list card — hover */
.card.group:hover {
  background-color: var(--u-blue-bg, #eff4ff) !important;
  border-color: var(--u-blue-border, #c3d6fe) !important;
}

/* Speaker pills overflow — single visible row, +N more appended by JS */
.speakers-container {
  flex: 1 1 auto;
  min-width: 0;
  column-gap: 2px;
}
.speakers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
  max-height: 1.75em;
  min-width: 0;
  flex: 1 1 auto;
  column-gap: 2px;
  row-gap: 2px;
}
.speakers-row .speaker-pill { flex: 0 0 auto; }
.speakers-more { flex: 0 0 auto; cursor: default; margin-left: 2px; }

/* ============================================================
   BAND TABS (count/letter band filter pills)
   Shared by claims list and people list pages
   ============================================================ */
.band-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.band-tab {
  border: 1px solid var(--u-border, #dee2e6);
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: #1a1d23;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.2;
}
.band-tab:hover {
  background: oklch(97% 0.015 240);
  text-decoration: none;
  color: #1a1d23;
}
.band-tab.active {
  background: var(--u-blue, #1a56db);
  border-color: var(--u-blue, #1a56db);
  color: #fff;
}
.band-tab.active:hover {
  color: #fff;
  background: var(--u-blue, #1a56db);
}
.band-tab-count {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.band-tab.active .band-tab-count {
  background: rgba(255, 255, 255, 0.2);
}