/* ============================================
   Congressional Record Explorer - WSJ-Inspired Theme
   ============================================ */

:root {
  /* WSJ-Inspired Color Palette */
  --wsj-tan: #f5f1eb;
  --wsj-cream: #faf8f5;
  --wsj-dark: #1a1a1a;
  --wsj-nav: #352a21; /* sepia brown for nav */
  --wsj-brown: #6b5b4f;
  --wsj-gold: #c4a35a;
  --wsj-blue: #0274b6;
  --wsj-red: #b71c1c;
  --wsj-green: #2e7d32;
  --wsj-border: #d4c8b8;

  /* Semantic Colors */
  --bg: var(--wsj-tan);
  --card: var(--wsj-cream);
  --text: var(--wsj-dark);
  --muted: var(--wsj-brown);
  --accent: var(--wsj-blue);
  --border: var(--wsj-border);
  --row: var(--wsj-cream);
  --row-alt: #f8f5ef;

  /* Shadows */
  --elev-1: 0 1px 3px rgba(107, 91, 79, 0.08),
    0 4px 12px rgba(107, 91, 79, 0.04);

  /* Typography - via Google Fonts in HTML */
  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, sans-serif;
}

/* ============================================
   Base Styles
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100vh;
}

/* Subtle paper texture overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.025;
  z-index: 1000;
}

/* ============================================
   Header & Masthead
   ============================================ */
header {
  background: var(--wsj-cream);
  border-bottom: 3px double var(--wsj-border);
  padding: 32px 16px 28px;
}

.hero {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}

.hero .subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--wsj-brown);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero .page-description {
  font-family: var(--font-serif);
  color: #555;
  font-size: 16px;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

.hero .page-description a {
  color: var(--wsj-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.hero .page-description a:hover {
  border-bottom-color: var(--wsj-blue);
}

.hero .wip-notice {
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid var(--wsj-gold);
  border-left: 4px solid var(--wsj-gold);
  font-size: 13px;
  line-height: 1.7;
  color: #78350f;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero .wip-notice strong {
  color: #92400e;
  font-weight: 600;
}

.hero .wip-notice .about-link {
  display: block;
  margin-top: 10px;
  color: #92400e;
  text-decoration: underline;
  font-weight: 500;
}

.hero .wip-notice .about-link:hover {
  color: #78350f;
}

/* ============================================
   Navigation Menu
   ============================================ */
.main-nav {
  background: var(--wsj-nav);
  border-bottom: 1px solid #453931;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: white;
  padding: 14px 0;
  margin-right: 32px;
  white-space: nowrap;
}

.nav-brand-link {
  color: inherit;
  text-decoration: none;
}

.nav-sections {
  display: flex;
  align-items: center;
  flex: 1;
}

.nav-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 12px 0 0;
  white-space: nowrap;
}

.nav-section-links {
  display: flex;
  gap: 0;
}

/* Nav dropdown */
.nav-section-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
  border-bottom: 2px solid transparent;
}

.nav-dropdown-trigger:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.nav-dropdown-trigger.open {
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-trigger svg {
  transition: transform 200ms ease;
  opacity: 0.6;
}

.nav-dropdown-trigger.open svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: white;
  border: 1px solid var(--wsj-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 200;
}

.nav-dropdown.open {
  display: block;
}

.nav-dropdown-item {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  border-bottom: 1px solid #f0ece6;
  transition: background 100ms ease;
}

.nav-dropdown-item:last-child {
  border-bottom: none;
}

.nav-dropdown-item:hover {
  background: var(--wsj-cream);
}

.nav-dropdown-item.active {
  background: var(--wsj-cream);
  border-left: 3px solid var(--wsj-blue);
  padding-left: 15px;
}

.nav-dropdown-item-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--wsj-dark);
  margin-bottom: 2px;
}

.nav-dropdown-item-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 20px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 150ms ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nav-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: var(--wsj-gold);
}

.nav-login-link {
  color: var(--accent-gold, #c9a84c);
  margin-left: auto;
}
.nav-login-link:hover {
  color: #fff;
  background: rgba(201, 168, 76, 0.15);
}

/* Mobile nav */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    padding: 12px 16px;
    gap: 8px;
  }

  .nav-brand {
    margin-right: 0;
    padding: 0;
  }

  .nav-sections {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .nav-section {
    flex-direction: column;
    width: 100%;
    gap: 4px;
  }

  .nav-section-label {
    padding: 4px 0;
  }

  .nav-section-links {
    width: 100%;
    justify-content: center;
  }

  .nav-divider {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }

  .nav-link {
    padding: 10px 14px;
    font-size: 11px;
  }
}

/* ============================================
   Container
   ============================================ */
.container {
  padding: 24px 16px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================
   Filter Card
   ============================================ */
.filters-card {
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  box-shadow: var(--elev-1);
  padding: 24px;
  margin-bottom: 24px;
}

.filters-grid {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.filters-grid .filter-group {
  flex: 1;
  min-width: 160px;
}

.filter-group label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
}

.filter-group input,
.filter-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wsj-border);
  background: white;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: all 150ms ease;
  height: 42px;
  box-sizing: border-box;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}

.filter-group input::placeholder {
  color: #9ca3af;
}

/* Custom select (chamber dropdown) */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wsj-border);
  border-radius: 0;
  background: white;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  height: 42px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
  text-align: left;
  outline: none;
}

.custom-select-trigger:hover {
  border-color: #999;
}

.custom-select-trigger svg {
  flex-shrink: 0;
  color: var(--wsj-brown);
  transition: transform 150ms ease;
}

.custom-select.open .custom-select-trigger {
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}

.custom-select.open .custom-select-trigger svg {
  transform: rotate(180deg);
}

.custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 0 8px;
  overflow-y: auto;
}

.custom-select.open .custom-select-options {
  display: block;
}

.custom-select-header {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  padding: 0 14px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--wsj-border);
}

.custom-select-option {
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 100ms ease;
}

.custom-select-option:hover {
  background: var(--wsj-tan);
}

.custom-select-option.selected {
  font-weight: 600;
  color: var(--wsj-blue);
}

/* Full-width search row above the filter grid */
.filter-group-fullwidth {
  margin-bottom: 16px;
}

/* Filter box and its field scope read as one control: the scope decides which
   field the text above it applies to, so it sits inside the same border rather
   than beside Chamber and Date as another independent filter. */
.filter-compound {
  border: 1px solid var(--wsj-border);
  background: white;
}

.filter-compound:focus-within {
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}

.filter-group .filter-compound input[type="text"] {
  border: none;
  background: transparent;
  box-shadow: none;
}

.filter-group .filter-compound input[type="text"]:focus {
  border: none;
  box-shadow: none;
}

.filter-compound-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--wsj-border);
  background: #f3eee6;
}

.filter-compound-scope-label {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wsj-brown);
}

.scope-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--wsj-border);
  background: rgba(255, 255, 255, 0.7);
}

.scope-pill {
  padding: 5px 10px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--wsj-brown);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.scope-pill:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}

.scope-pill.active {
  background: var(--wsj-nav);
  color: #f5f1eb;
  font-weight: 600;
}

.scope-hint {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--wsj-brown);
}

/* Suggestion dropdown (instant filter typeahead) */
.filter-group-suggest {
  position: relative;
}

.suggest-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  border: 1px solid var(--wsj-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-height: 360px;
  overflow-y: auto;
  margin-top: 2px;
}

.suggest-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid #f0ece6;
  transition: background 100ms ease;
}

.suggest-item:last-child {
  border-bottom: none;
}

.suggest-item:hover,
.suggest-item.suggest-active {
  background: #f5f1eb;
}

.suggest-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-item-text mark {
  background: transparent;
  font-weight: 700;
  color: inherit;
}

.suggest-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--wsj-blue);
  background: rgba(2, 116, 182, 0.08);
}

.suggest-meta {
  color: #999;
  font-size: 12px;
  margin-left: 4px;
}

/* Member combo box (typeahead + dropdown) */
.member-combo {
  position: relative;
  width: 100%;
}

.member-combo-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wsj-border);
  border-radius: 4px;
  background: white;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.member-combo-input-wrap:focus-within {
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}

.member-combo.open .member-combo-input-wrap {
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}

.member-combo-input-wrap input {
  flex: 1;
  border: none;
  border-radius: 4px 0 0 4px;
  outline: none;
  box-shadow: none;
}

.member-combo-input-wrap input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.member-combo-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--wsj-border);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  color: var(--wsj-brown);
  transition: background 100ms ease, color 100ms ease;
}

.member-combo-toggle:hover {
  background: var(--wsj-tan);
}

.member-combo.open .member-combo-toggle {
  color: var(--wsj-blue);
}

.member-combo.open .member-combo-toggle svg {
  transform: rotate(180deg);
}

.member-combo-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  border: 1px solid var(--wsj-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 380px;
  overflow-y: auto;
}

.member-combo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0ece6;
  transition: background 100ms ease;
}

.member-combo-item:last-child {
  border-bottom: none;
}

.member-combo-item:hover,
.member-combo-item.suggest-active {
  background: #f5f1eb;
}

.member-combo-item.selected {
  background: rgba(2, 116, 182, 0.06);
}

.member-combo-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--wsj-tan);
}

.member-combo-photo-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--wsj-tan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #999;
}

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

.member-combo-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-combo-name mark {
  background: transparent;
  font-weight: 700;
  color: inherit;
}

.member-combo-detail {
  font-family: var(--font-sans);
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-combo-added {
  color: #059669;
  font-weight: 600;
  font-size: 12px;
  margin-left: 4px;
}

.member-combo-item.selected {
  background: rgba(2, 116, 182, 0.04);
}

.member-combo-letter-header {
  position: sticky;
  top: 0;
  padding: 6px 14px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--wsj-brown);
  background: var(--wsj-cream);
  border-bottom: 1px solid var(--wsj-border);
  z-index: 1;
}

.member-combo-empty {
  padding: 16px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #999;
  text-align: center;
}

.filter-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 42px;
  background: var(--wsj-dark);
  color: white;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 200ms ease;
  white-space: nowrap;
}

.btn-primary:hover:not(:disabled) {
  background: #333;
}

.btn-primary:active:not(:disabled) {
  background: #000;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 0 24px;
  height: 42px;
  background: white;
  color: var(--wsj-brown);
  border: 1px solid var(--wsj-border);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 200ms ease;
  white-space: nowrap;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--wsj-tan);
  border-color: var(--wsj-brown);
}

.btn-secondary:active:not(:disabled) {
  background: var(--wsj-border);
}

/* ============================================
   Table Styles
   ============================================ */
.table-wrap {
  margin-top: 16px;
  border: 1px solid var(--wsj-border);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--elev-1);
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead th {
  background: var(--wsj-tan);
  color: var(--wsj-brown);
  text-align: left;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--wsj-border);
  vertical-align: top;
}

tbody td {
  padding: 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--wsj-border);
  font-size: 14px;
}

tbody tr {
  background: var(--row);
}

tbody tr:nth-child(2n) {
  background: var(--row-alt);
}

tbody tr:hover {
  background: white;
}

/* Column sizing */
th.col-name,
td.col-name {
  width: 240px;
}

th.col-details,
td.col-details {
  width: 380px;
}

th.col-text,
td.col-text {
  width: auto;
}

/* Details column styling */
td.col-details {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* Topic title */
.topic-title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 14px;
}

/* Statement sequence badge */
.statement-sequence {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  background: var(--wsj-tan);
  border: 1px solid var(--wsj-border);
  padding: 3px 8px;
  margin-bottom: 8px;
}

/* Statement metadata paragraph */
.statement-meta {
  margin-bottom: 4px;
}

/* Text column styling */
td.col-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  font-family: var(--font-serif);
  font-size: 14px;
}

/* PDF link styling */
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--wsj-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: all 150ms ease;
}

.pdf-link .pdf-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pdf-link:hover {
  color: #025e91;
  text-decoration: underline;
}

/* Artifact link styling */
.artifact-link {
  color: var(--wsj-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: all 150ms ease;
}

.artifact-link:hover {
  color: #025e91;
  text-decoration: underline;
}

/* Legislation link styling */
.legislation-link {
  color: var(--wsj-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: all 150ms ease;
}

.legislation-link:hover {
  color: #025e91;
  text-decoration: underline;
}

.legislation-link .bill-number {
  font-weight: 600;
  color: var(--wsj-dark);
  background: var(--wsj-tan);
  border: 1px solid var(--wsj-border);
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.legislation-link:hover .bill-number {
  background: #e8e3d9;
}

/* Video link styling */
.video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: all 150ms ease;
}

.video-link .video-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.youtube-link {
  color: var(--wsj-red);
}

.youtube-link:hover {
  color: #8b1212;
  text-decoration: underline;
}

.cspan-link {
  color: var(--wsj-blue);
}

.cspan-link:hover {
  color: #025e91;
  text-decoration: underline;
}

/* ============================================
   Modal Styles
   ============================================ */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 26, 26, 0.6);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.modal-content {
  background-color: var(--wsj-cream);
  padding: 32px;
  max-width: 1000px;
  min-width: min(600px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  border: 1px solid var(--wsj-border);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  font-weight: 300;
  color: var(--wsj-brown);
  cursor: pointer;
  transition: color 150ms ease;
  line-height: 1;
}

.modal-close:hover {
  color: var(--wsj-dark);
}

.modal-content h2 {
  margin: 0 0 20px 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
}

/* Share modal — narrower than the artifact modal, which is sized for prose. */
.modal-content--share {
  min-width: 0;
  width: min(520px, 100%);
  padding: 26px 28px 28px;
  border-top: 4px solid var(--wsj-gold);
}
.modal-content--share h2 {
  margin-bottom: 14px;
  padding-right: 32px;
}
/* .modal-close is written for a <span>; this one is a real button so it can be
   reached and fired from the keyboard. */
.modal-content--share .modal-close {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
}
.share-what {
  border-left: 3px solid var(--wsj-gold);
  background: #fff;
  padding: 10px 14px;
  margin-bottom: 20px;
}
.share-what-title {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
}
.share-what-meta {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.share-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.share-url-row {
  display: flex;
  margin-bottom: 20px;
}
.share-url-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--wsj-border);
  border-right: none;
  background: #fff;
  padding: 10px 12px;
  font: 400 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #4a4038;
}
.share-url-row input:focus {
  outline: none;
  border-color: var(--wsj-gold);
}
.share-url-row button {
  flex: 0 0 auto;
  border: 1px solid var(--wsj-nav);
  background: var(--wsj-nav);
  color: var(--wsj-cream);
  padding: 10px 18px;
  font: 600 13px/1.4 var(--font-sans);
  cursor: pointer;
}
.share-url-row button:hover {
  background: #241c15;
}
.share-dests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.share-dest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px;
  border: 1px solid var(--wsj-border);
  background: #fff;
  color: var(--wsj-nav);
  text-decoration: none;
  font: 600 12px/1.2 var(--font-sans);
}
.share-dest:hover {
  border-color: var(--wsj-gold);
  color: var(--accent);
}
.share-dest svg {
  width: 19px;
  height: 19px;
}

.artifact-text {
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  font-family: var(--font-serif);
}

/* Add spacing before line break in details */
td.col-details br {
  content: "";
  display: block;
  margin-bottom: 4px;
}

/* ============================================
   Name Cell with Profile Pic
   ============================================ */
.name-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.profile-pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--wsj-border);
  border: 2px solid var(--wsj-border);
}

.profile-pic-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--wsj-tan) 0%,
    var(--wsj-border) 100%
  );
  flex-shrink: 0;
  border: 2px solid var(--wsj-border);
}

.name-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Enhanced cell styles */
.name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  display: block;
}

.political-party {
  font-size: 12px;
  color: var(--wsj-brown);
  display: block;
}

.state {
  font-size: 12px;
  color: var(--wsj-brown);
  display: block;
}

.chamber {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  display: block;
  margin-top: 2px;
}

.member-website {
  display: block;
  margin-top: 6px;
  color: var(--wsj-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  transition: all 150ms ease;
}

.member-website:hover {
  color: #025e91;
  text-decoration: underline;
}

.muted {
  color: var(--muted);
}

/* ============================================
   Results Summary Bar
   ============================================ */
.results-summary {
  margin-top: 16px;
  padding: 10px 20px;
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  border-bottom: 2px solid var(--wsj-border);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--wsj-brown);
  letter-spacing: 0.2px;
}

.summary-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wsj-brown);
  margin-bottom: 6px;
}

.summary-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.summary-stat {
  white-space: nowrap;
}

.summary-num {
  color: var(--wsj-blue);
  font-weight: 600;
}

.summary-divider {
  margin: 0 10px;
  color: var(--wsj-border);
  font-weight: 300;
  user-select: none;
}

.rows-count {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--wsj-brown);
  margin-left: 8px;
  margin-top: 12px;
}

.info-icon {
  display: inline-block;
  cursor: help;
  font-size: 13px;
  color: var(--wsj-blue);
  font-weight: 600;
  margin-left: 4px;
  vertical-align: baseline;
  position: relative;
}

.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 14px;
  background: var(--wsj-dark);
  color: white;
  font-size: 12px;
  font-weight: 400;
  white-space: normal;
  max-width: 300px;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 1000;
  margin-bottom: 8px;
  line-height: 1.5;
  width: 250px;
}

.info-icon:hover::after {
  opacity: 1;
}

.topic-filter-link {
  color: var(--wsj-green);
  text-decoration: none;
  font-weight: 500;
}

.topic-filter-link:hover {
  text-decoration: underline;
}

/* ============================================
   Calendar Widget
   ============================================ */
.calendar-wrapper {
  position: relative;
  width: 100%;
}

.calendar-wrapper input {
  cursor: pointer;
  background-color: white;
  padding-right: 36px;
}

/* The Daily Record's date field is a search box, not a label: it takes typed
   dates so a day years back costs one phrase instead of one ‹ press per month.
   Everything below exists to say "you can type in this" before the reader tries
   anything else. Scoped to .date-search — the two readonly range fields on
   /search share .calendar-wrapper and must keep their plain treatment. */
.calendar-wrapper input.date-search {
  cursor: text;
  padding-left: 32px;
}

.calendar-wrapper input.date-search:focus {
  outline: none;
  border-color: var(--wsj-nav);
  box-shadow: inset 0 0 0 1px var(--wsj-nav);
}

.calendar-search {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wsj-brown);
  pointer-events: none;
  transition: color 150ms ease;
}

.calendar-wrapper input.date-search:focus ~ .calendar-search {
  color: var(--wsj-nav);
}

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

.calendar-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wsj-brown);
  pointer-events: none;
  transition: transform 150ms ease;
}

.calendar-wrapper.open .calendar-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.calendar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 16px;
  z-index: 1000;
  min-width: 300px;
}

.calendar-dropdown.open {
  display: block;
}

/* Answers what was typed. Empty and invisible at rest — a standing "type a date
   here" line inside the panel reads as the input and sends people typing into it. */
.calendar-echo-slot:empty {
  display: none;
}

.calendar-echo {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wsj-nav);
  background: #f0ead9;
  border-left: 2px solid var(--wsj-gold);
  padding: 7px 10px;
  margin-bottom: 12px;
}

.calendar-echo.is-empty {
  color: var(--wsj-red);
  background: #f7ece9;
  border-left-color: var(--wsj-red);
}

/* A parsed date commits with a click; ↵ is a shortcut, never the only way. */
button.calendar-echo {
  width: 100%;
  border: 0;
  border-left: 2px solid var(--wsj-gold);
  background: var(--wsj-nav);
  color: white;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 150ms ease;
}

button.calendar-echo:hover {
  background: #241c15;
}

button.calendar-echo .echo-kbd {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}

.calendar-header span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.calendar-nav {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--wsj-brown);
  padding: 4px 8px;
  transition: all 0.2s;
}

.calendar-nav:hover {
  color: var(--wsj-dark);
  background: var(--wsj-tan);
}

/* The year list is complete on one screen, and the month list stops at the ends
   of the archive — an arrow that cannot move should not look like it can. */
.calendar-nav:disabled {
  opacity: 0.25;
  cursor: default;
  background: none;
  color: var(--wsj-brown);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  padding: 4px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
  background: transparent;
}

.calendar-day.empty {
  cursor: default;
}

.calendar-day:not(.empty):hover {
  background: var(--wsj-tan);
}

.calendar-day.has-data {
  background: #d4edda;
  color: var(--wsj-green);
  font-weight: 600;
}

.calendar-day.has-data:hover {
  background: #c3e6cb;
}

/* A half-finished date names more than one day, so the panel answers at the
   altitude the text reaches: a year offers its months, a bare month offers the
   years it appears in, and only a full date drops to the day grid. */
.calendar-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.calendar-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 2px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 150ms ease;
}

.calendar-option:hover {
  background: var(--wsj-tan);
}

.calendar-option[disabled] {
  opacity: 0.3;
  cursor: default;
  background: none;
}

.calendar-option .option-count {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--wsj-green);
}

.calendar-option[disabled] .option-count {
  visibility: hidden;
}

.calendar-option.selected {
  background: var(--wsj-dark);
  color: white;
}

.calendar-option.selected .option-count {
  color: #cfe6cc;
}

/* The day a typed date resolves to, before it is committed. */
.calendar-day.hinted {
  outline: 2px solid var(--wsj-gold);
  outline-offset: -2px;
}

.calendar-day.selected {
  background: var(--wsj-dark);
  color: white;
  font-weight: 600;
}

.calendar-day.selected:hover {
  background: #333;
}

/* ============================================
   Audio Player
   ============================================ */
.audio-player {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--wsj-dark) 0%, #333 100%);
}

.audio-player-compact {
  padding: 8px 12px;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wsj-gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.audio-play-btn:hover {
  transform: scale(1.1);
  background: #d4b366;
}

.audio-play-btn svg {
  width: 16px;
  height: 16px;
  fill: var(--wsj-dark);
}

.audio-progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.audio-progress-bar {
  height: 100%;
  background: var(--wsj-gold);
  transition: width 0.1s;
}

.audio-time {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  min-width: 80px;
  text-align: right;
  font-family: var(--font-sans);
}

.audio-label {
  color: white;
  font-size: 13px;
  font-weight: 500;
  margin-right: auto;
  font-family: var(--font-sans);
}

/* ============================================
   Media Sections (Watch / Listen)
   ============================================ */
.media-section {
  margin-top: 16px;
}

.media-section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  margin-bottom: 8px;
}

/* Video Player (inline) */
.statement-video {
  width: 100%;
  display: block;
  margin-bottom: 6px;
}

.media-section .video-link,
.media-section .youtube-link,
.media-section .cspan-link {
  margin-top: 0;
}

/* ============================================
   Page Container & Animation
   ============================================ */
.page-container {
  animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Search Page (All Records)
   ============================================ */
/* Search mode toggle pills (Quick Search / Criteria Builder) */
.search-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--light-gray, #f0f2f4);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 20px;
  width: fit-content;
}
.search-mode-pill {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.search-mode-pill:hover {
  color: var(--text-primary, #111827);
}
.search-mode-pill.active {
  background: #fff;
  color: var(--text-primary, #111827);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.search-mode-desc {
  margin: 0 0 16px 0;
  font-size: 0.85rem;
  color: var(--wsj-brown, #76736e);
  line-height: 1.5;
}

/* Search-in card radios (smaller version of search-mode-radios) */
.search-in-radios {
  margin: 12px 0 4px 0;
}
.search-in-radios-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wsj-brown, #76736e);
  margin-bottom: 6px;
}
.search-in-radios-options {
  display: flex;
  gap: 10px;
}
.search-in-radio {
  flex: 1;
  cursor: pointer;
  margin: 0;
}
.search-in-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.search-in-card {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--wsj-border);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-in-radio input[type="radio"]:checked + .search-in-card {
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 1px var(--wsj-blue);
  background: rgba(2, 116, 182, 0.03);
}
.search-in-radio:hover .search-in-card {
  border-color: var(--wsj-blue-light);
}
.search-in-card-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.search-in-radio
  input[type="radio"]:checked
  + .search-in-card
  .search-in-card-title {
  color: var(--wsj-blue);
}
.search-in-card-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Search summary stats — override flex row to column for search page */
#searchSummaryStats {
  flex-direction: column;
  align-items: flex-start;
}

/* Search results count + order note */
.search-results-count {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.search-order-note {
  font-size: 0.8rem;
  color: var(--wsj-brown, #76736e);
  margin-top: 4px;
  font-style: italic;
}
.ranking-learn-more {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--wsj-blue, #0274b6);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.ranking-learn-more:hover {
  color: var(--wsj-blue-dark, #015a8d);
}
.ranking-explainer {
  display: none;
  margin-top: 10px;
  padding: 14px 18px;
  background: var(--wsj-cream-light, #faf8f5);
  border: 1px solid var(--wsj-border, #e0dcd7);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-style: normal;
}
.ranking-explainer.open {
  display: block;
}
.ranking-explainer p {
  margin: 0 0 8px 0;
}
.ranking-explainer p:last-child {
  margin-bottom: 0;
}
.ranking-explainer ul {
  margin: 6px 0 8px 0;
  padding-left: 20px;
}
.ranking-explainer li {
  margin-bottom: 4px;
}
.ranking-explainer li:last-child {
  margin-bottom: 0;
}

/* Search pagination */
.search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  margin-top: 8px;
}

.pagination-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: var(--text-primary, #111827);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pagination-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination-info {
  font-size: 0.85rem;
  color: var(--wsj-brown, #76736e);
  font-weight: 500;
}

/* Criteria term input */
.criteria-add-term {
  margin-bottom: 16px;
}
.criteria-term-input-wrap {
  position: relative;
  width: 100%;
}
.criteria-term-input-wrap input {
  width: 100%;
  padding: 10px 48px 10px 14px;
  border: 1px solid var(--wsj-border);
  border-radius: 0;
  font-size: 14px;
  font-family: var(--font-sans);
  background: #fff;
  color: var(--text);
  height: 42px;
  box-sizing: border-box;
  transition: all 150ms ease;
  pointer-events: auto;
}
.criteria-term-input-wrap input:focus {
  outline: none;
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}
.criteria-term-input-wrap input::placeholder {
  color: #9ca3af;
}
.criteria-term-add-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 0;
  background: var(--wsj-brown);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.criteria-term-add-btn:hover {
  background: #5f5952;
}

#criteriaBuilderSection .search-in-radios {
  margin: 12px 0 18px 0;
}

#criteriaBuilderSection > .filters-grid {
  margin-top: 10px;
}

#criteriaBuilderSection > .filters-grid + .filters-grid {
  margin-top: 14px;
}
.criteria-term-type-toggle {
  display: flex;
  gap: 2px;
  background: var(--light-gray, #f0f2f4);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}
.criteria-type-pill {
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary, #6b7280);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.criteria-type-pill:hover {
  color: var(--text-primary, #111827);
}
.criteria-type-pill.active {
  background: #fff;
  color: var(--primary-color, #2563eb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

/* Search mode radio cards */
.search-mode-radios {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}

.search-radio {
  flex: 1;
  cursor: pointer;
  margin: 0;
}

.search-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-radio-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--wsj-border);
  border-radius: 4px;
  background: white;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.search-radio input[type="radio"]:checked + .search-radio-card {
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 1px var(--wsj-blue);
  background: rgba(2, 116, 182, 0.03);
}

.search-radio:hover .search-radio-card {
  border-color: var(--wsj-blue-light);
}

.search-radio-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.search-radio
  input[type="radio"]:checked
  + .search-radio-card
  .search-radio-title {
  color: var(--wsj-blue);
}

.search-radio-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

/* Search page actions */
/* ============================================
   Search Criteria Display
   ============================================ */
.search-criteria {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  border-radius: 4px;
}

.search-criteria-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.search-criteria-header span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wsj-brown);
}

.criteria-clear-all {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 100ms ease, background 100ms ease;
}

.criteria-clear-all:hover {
  color: var(--wsj-red);
  background: rgba(200, 50, 50, 0.06);
}

.search-criteria-groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.criteria-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.criteria-group-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #888;
  white-space: nowrap;
  min-width: 110px;
}

.criteria-group-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.criteria-connector {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 0;
}

.criteria-connector-line {
  flex: 1;
  height: 1px;
  background: var(--wsj-border);
  min-width: 20px;
}

.criteria-connector-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--wsj-white);
  border: 1px dashed #ccc;
  border-radius: 10px;
  padding: 2px 10px 2px 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #999;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.criteria-connector-toggle:hover {
  border-color: var(--wsj-blue);
  border-style: solid;
  color: var(--wsj-blue);
  background: rgba(2, 116, 182, 0.04);
}

.connector-swap-icon {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.criteria-connector-toggle:hover .connector-swap-icon {
  opacity: 1;
}

.criteria-or {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: #bbb;
  text-transform: lowercase;
  font-style: italic;
}

/* Criteria cards */
.criteria-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--wsj-border);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 100ms ease;
  max-width: 100%;
}

.criteria-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.criteria-card-photo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.criteria-card-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.criteria-card-text {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.criteria-card-detail {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
}

.criteria-card-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #bbb;
  flex-shrink: 0;
  transition: background 100ms ease, color 100ms ease;
  padding: 0;
}

.criteria-card-remove:hover {
  background: rgba(200, 50, 50, 0.1);
  color: var(--wsj-red);
}

/* Typed keyword/semantic cards */
.criteria-card-keyword {
  border-color: var(--wsj-blue);
  background: rgba(2, 116, 182, 0.04);
}

.criteria-card-keyword .criteria-card-icon {
  color: var(--wsj-blue);
}

.criteria-card-semantic {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.04);
}

.criteria-card-semantic .criteria-card-icon {
  color: #8b5cf6;
}

.criteria-card-member {
  border-left: 3px solid var(--wsj-brown);
}

.criteria-card-state {
  border-left: 3px solid #059669;
}

.criteria-card-state .criteria-card-icon {
  color: #059669;
}

.criteria-card-date {
  border-left: 3px solid var(--wsj-blue);
}

.criteria-card-date .criteria-card-icon {
  color: var(--wsj-blue);
}

.criteria-card-chamber {
  border-left: 3px solid var(--wsj-brown);
}

.criteria-card-congress {
  border-left: 3px solid #d97706;
}

.criteria-card-congress .criteria-card-icon {
  color: #d97706;
}

.search-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wsj-border);
}

/* Date tag in search result rows */
.date-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Search page: all filter groups equal width */
#searchPage {
  min-height: 100vh;
}

#searchPage .filters-grid .filter-group {
  flex: 1;
  min-width: 140px;
}

#searchPage .filters-grid .filter-group-chamber {
  flex: 1;
}

/* ============================================
   Browse Page Styles
   ============================================ */
.browse-header {
  margin-bottom: 24px;
  text-align: center;
}

.browse-header h2 {
  font-family: var(--font-serif);
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}

.browse-description {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

.browse-tree {
  background: var(--card);
  border: 1px solid var(--wsj-border);
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.loading {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
}

.error {
  padding: 16px;
  color: var(--wsj-red);
  background: #fef2f2;
  border-left: 4px solid var(--wsj-red);
  margin: 8px;
}

/* ============================================
   Tree Node Styles
   ============================================ */
.tree-node {
  border-bottom: 1px solid var(--wsj-border);
}

.tree-node:last-child {
  border-bottom: none;
}

.tree-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 150ms ease;
  gap: 12px;
}

.tree-header:hover {
  background: white;
}

.tree-toggle {
  width: 16px;
  height: 16px;
  font-size: 10px;
  color: var(--wsj-brown);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease;
}

.tree-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.tree-label {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.tree-count {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--wsj-brown);
  background: var(--wsj-tan);
  border: 1px solid var(--wsj-border);
  padding: 4px 12px;
  flex-shrink: 0;
}

.tree-children {
  padding-left: 28px;
  border-top: 1px solid var(--wsj-border);
  background: #faf8f5;
}

.tree-loading {
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* Date node styling */
.date-node > .tree-header {
  background: linear-gradient(135deg, var(--wsj-cream) 0%, #f0ebe3 100%);
}

.date-node > .tree-header:hover {
  background: linear-gradient(135deg, white 0%, var(--wsj-cream) 100%);
}

.date-node > .tree-header .tree-label {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
}

/* Category node styling */
.category-node > .tree-header {
  padding: 14px 20px;
}

.category-node > .tree-header .tree-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--wsj-dark);
}

/* Title node styling */
.title-node > .tree-header {
  padding: 12px 20px;
}

.title-node > .tree-header .tree-label {
  font-size: 13px;
  font-weight: 500;
}

.title-label {
  max-width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nested children backgrounds */
.category-node > .tree-children {
  background: #f8f5ef;
}

.title-node > .tree-children {
  background: white;
  padding-left: 0;
}

/* ============================================
   Browse Table Styles
   ============================================ */
.browse-table-wrap {
  margin: 12px;
  border: 1px solid var(--wsj-border);
  overflow: hidden;
  background: var(--card);
}

.browse-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.browse-table thead th {
  background: var(--wsj-tan);
  color: var(--wsj-brown);
  text-align: left;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--wsj-border);
  vertical-align: top;
}

.browse-table tbody td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--wsj-border);
  font-size: 13px;
}

.browse-table tbody tr {
  background: var(--row);
}

.browse-table tbody tr:nth-child(2n) {
  background: var(--row-alt);
}

.browse-table tbody tr:hover {
  background: white;
}

.browse-table tbody tr:last-child td {
  border-bottom: none;
}

.browse-table th.col-name,
.browse-table td.col-name {
  width: 220px;
}

.browse-table th.col-details,
.browse-table td.col-details {
  width: 360px;
}

.browse-table th.col-text,
.browse-table td.col-text {
  width: auto;
}

.browse-table td.col-details {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.browse-table td.col-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  font-family: var(--font-serif);
  font-size: 14px;
}

/* ============================================
   Action Tracker Styles
   ============================================ */
#trackerPage {
  padding: 0;
}

.tracker-header {
  background: var(--wsj-cream);
  border-bottom: 3px double var(--wsj-border);
  padding: 40px 24px 32px;
  text-align: center;
}

.tracker-masthead {
  max-width: 700px;
  margin: 0 auto 24px;
}

.edition-line {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  margin-bottom: 12px;
}

.tracker-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0;
}

.tracker-title .year {
  color: var(--wsj-red);
  font-style: italic;
}

.tracker-subtitle {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: #555;
  max-width: 550px;
  margin: 16px auto 0;
  line-height: 1.7;
}

.stats-line {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--wsj-brown);
  margin-top: 16px;
}

.stats-line strong {
  color: var(--wsj-dark);
  font-weight: 600;
}

.tracker-links {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.tracker-links a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wsj-blue);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tracker-links a:hover {
  border-bottom-color: var(--wsj-blue);
}

.tracker-controls {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 16px 0;
}

/* Reuse the Congressional Record filters-card look. The search box is a
   full-width row; Category, Year, and Sort share the grid row below it. */
.tracker-controls .filters-card {
  margin-bottom: 16px;
}

.tracker-results-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 20px;
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  border-bottom: 2px solid var(--wsj-border);
}

.tracker-results-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wsj-brown);
}

#results-count {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
}

.tracker-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}

.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Action Card */
.action-card {
  background: var(--wsj-cream);
  border-bottom: 1px solid var(--wsj-border);
  padding: 24px;
  transition: background 0.2s ease;
  /* Keep title visible below the sticky nav on deep-link scroll. */
  scroll-margin-top: 80px;
}

.action-card:hover {
  background: white;
}

.action-card:first-child {
  border-top: 1px solid var(--wsj-border);
}

.action-card-content {
  flex: 1;
}

.action-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.action-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wsj-dark);
  flex: 1;
  order: 2;
  flex: 1;
  margin: 0;
  transition: color 0.2s ease;
}

.action-card-title:hover {
  color: var(--wsj-blue);
}

.action-card-meta {
  display: contents;
}

.action-category-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--wsj-tan);
  border: 1px solid var(--wsj-border);
  color: var(--wsj-brown);
  flex-shrink: 0;
  align-self: flex-start;
  order: 3;
}

/* Rating & Analysis Section */
.action-analysis-section {
  margin: 12px 106px 12px 106px;
  padding: 12px 16px;
  background: #faf9f7;
  border-left: 3px solid var(--wsj-border);
}

.action-rating-badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.rating-positive {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.rating-overblown {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.rating-neutral {
  background: #f5f5f5;
  color: #616161;
  border: 1px solid #bdbdbd;
}

.rating-unclear {
  background: #f5f5f5;
  color: #616161;
  border: 1px solid #bdbdbd;
}

.rating-concerning {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.rating-netnegative {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.rating-bigdeal {
  background: #ffebee;
  color: #b71c1c;
  border: 1px solid #ef9a9a;
}

.rating-default {
  background: var(--wsj-tan);
  color: var(--wsj-brown);
  border: 1px solid var(--wsj-border);
}

.action-analysis-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 0.85em;
}

.action-analysis-text:last-child {
  margin-bottom: 0;
}

.action-date {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--wsj-brown);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
  order: 1;
}

.action-card-description {
  font-family: var(--font-sans);
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 12px;
  margin-left: 106px; /* Align with title (date width 90px + gap 16px) */
  margin-right: 106px; /* Uniform margins */
  padding-left: 0;
  display: none;
}

.action-card.expanded .action-card-description {
  display: block;
}

.action-card-title-link {
  color: inherit;
  text-decoration: none;
}

.action-card-title-link:hover {
  color: var(--wsj-brown);
  text-decoration: underline;
}

.tracker-article-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}

.tracker-article-back {
  font-family: var(--font-sans);
  font-size: 14px;
  margin: 0 0 20px;
}

.tracker-article-back a {
  color: var(--wsj-brown);
  text-decoration: none;
  font-weight: 600;
}

.tracker-article-back a:hover {
  text-decoration: underline;
}

.tracker-article.action-card {
  border-top: 1px solid var(--wsj-border);
  padding: 24px;
}

.tracker-article .action-card-title {
  font-size: 28px;
  line-height: 1.3;
}

.tracker-article .action-card-description {
  display: block;
  margin-left: 0;
  margin-right: 0;
}

.tracker-article .action-analysis-section {
  margin-left: 0;
  margin-right: 0;
}

.tracker-article .action-card-actions {
  margin-left: 0;
}

.details-heading {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wsj-border);
}

/* Markdown content in action cards */
.action-card-description h2 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--wsj-dark);
  margin: 20px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wsj-border);
}

.action-card-description h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--wsj-dark);
  margin: 18px 0 8px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--wsj-border);
}

.action-card-description h4 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--wsj-dark);
  margin: 16px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--wsj-border);
}

.action-card-description p {
  margin: 10px 0;
}

.action-card-description ul,
.action-card-description ol {
  margin: 10px 0;
  padding-left: 20px;
}

.action-card-description li {
  margin: 6px 0;
}

.action-card-description a {
  color: var(--wsj-blue);
  text-decoration: none;
}

.action-card-description a:hover {
  text-decoration: underline;
}

.action-card-description strong {
  color: var(--wsj-dark);
  font-weight: 600;
}

.action-card-description blockquote {
  border-left: 3px solid var(--wsj-gold);
  margin: 14px 0;
  padding: 8px 14px;
  background: var(--wsj-tan);
  font-style: italic;
}

.action-card-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13px;
}

.action-card-description table th {
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  background: var(--wsj-tan);
  border-bottom: 2px solid var(--wsj-border);
  color: var(--wsj-dark);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.action-card-description table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--wsj-border);
  color: #555;
  line-height: 1.5;
}

.action-card-description table tr:last-child td {
  border-bottom: none;
}

.action-card-description table tr:hover {
  background: var(--wsj-tan);
}

/* Inline images placed directly in article body */
.action-card-description img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  border: 1px solid var(--wsj-border);
}

/* Image thumbnails */
.action-card-images {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wsj-border);
  flex-wrap: wrap;
}

/* Grid layout for multiple images */
.action-card-images.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.action-card-images.image-grid .action-image-thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 842 / 504;
}

.action-card-images.image-grid .action-image-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f5f5f5;
}

@media (max-width: 600px) {
  .action-card-images.image-grid {
    grid-template-columns: 1fr;
  }
}

/* Inline image grid (for images in body text) */
.inline-image-grid {
  margin: 16px 0;
}

.inline-image-grid p {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
}

.inline-image-grid br {
  display: none;
}

.inline-image-grid img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 1px solid var(--wsj-border);
}

@media (max-width: 900px) {
  .inline-image-grid p {
    grid-template-columns: 1fr;
  }
  .inline-image-grid img {
    max-width: 100%;
  }
}

.action-image-thumbnail {
  display: block;
  width: 100px;
  height: 75px;
  overflow: hidden;
  border: 1px solid var(--wsj-border);
  background: var(--wsj-tan);
  transition: all 0.2s ease;
  position: relative;
}

.action-image-thumbnail:hover {
  border-color: var(--wsj-blue);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-image-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.action-image-thumbnail .twitter-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--wsj-dark);
  color: white;
  font-size: 8px;
  font-weight: 600;
  padding: 2px 4px;
  font-family: var(--font-sans);
}

.action-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: 106px; /* Align with title (date width 90px + gap 16px) */
}

.action-footer-rule {
  width: 1px;
  height: 14px;
  background: var(--wsj-border);
  flex-shrink: 0;
}

.action-footer-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.action-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.action-footer-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.action-share-btn .action-footer-icon {
  width: 17px;
  height: 17px;
}

.action-share-btn .action-footer-icon svg {
  width: 17px;
  height: 17px;
}

.action-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wsj-dark);
  font-weight: 600;
}

.action-expand-btn {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--wsj-border);
  color: var(--wsj-brown);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.action-expand-toggle:hover .action-expand-btn {
  background: var(--wsj-tan);
  color: var(--wsj-dark);
}

.action-expand-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--wsj-dark);
  font-weight: 600;
  white-space: nowrap;
}

.action-expand-toggle:hover .action-expand-label {
  text-decoration: underline;
}

.action-card.expanded .action-expand-btn {
  transform: rotate(45deg);
}

.action-share-btn,
.action-open-tab-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--wsj-brown);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.action-share-btn:hover,
.action-open-tab-link:hover {
  color: var(--wsj-dark);
  text-decoration: underline;
}

.action-source-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--wsj-blue);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.action-source-link:hover {
  color: #015a8c;
}

.action-share-btn.copied {
  color: var(--wsj-green);
  text-decoration: none;
  cursor: default;
  animation: share-copied-pop 0.35s ease-out;
}

@keyframes share-copied-pop {
  0% {
    opacity: 0.4;
    transform: translateY(2px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.no-results {
  text-align: center;
  padding: 48px 20px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--wsj-brown);
}

/* ============================================
   About Page
   ============================================ */
.about-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px;
}

.about-content h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 24px;
  color: var(--wsj-dark);
}

.about-content p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
}

.about-content h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--wsj-dark);
}

.about-content ul {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
  padding-left: 24px;
}

.about-content li {
  margin-bottom: 8px;
}

/* Responsive for Action Tracker */
@media (max-width: 640px) {
  .action-card-header {
    flex-direction: column;
    gap: 8px;
  }

  .action-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    order: -1;
  }

  .action-card-description,
  .action-card-actions {
    margin-left: 0;
  }

  .tracker-controls {
    padding-top: 24px;
  }
}

/* ============================================
   Contact Page
   ============================================ */
.contact-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 24px;
}

.contact-content h2 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--wsj-dark);
}

.contact-content > p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 32px;
}

.contact-form {
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  border-radius: 6px;
  padding: 32px;
  box-shadow: var(--elev-1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--wsj-dark);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--wsj-dark);
  background: #fff;
  border: 1px solid var(--wsj-border);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--wsj-blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 182, 0.1);
}

/* Custom Dropdown (styles in filter section above) */

.category-hint {
  margin-top: 12px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--wsj-brown);
  background: var(--wsj-tan);
  border-left: 3px solid var(--wsj-gold);
  border-radius: 0 4px 4px 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.25s ease;
}

.category-hint.visible {
  padding: 12px 14px;
  max-height: 150px;
  opacity: 1;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-actions {
  margin-top: 24px;
}

.form-actions .btn-primary {
  width: 100%;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.form-actions .btn-primary:hover:not(:disabled) {
  background-color: #015a8c;
}

.form-actions .btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.form-actions .btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.contact-status {
  margin-top: 16px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px;
  text-align: center;
  transition: all 0.3s ease;
}

.contact-status:empty {
  display: none;
}

.contact-status.success {
  display: block;
  padding: 14px 16px;
  background: #e8f5e9;
  color: var(--wsj-green);
  border: 1px solid #a5d6a7;
}

.contact-status.error {
  display: block;
  padding: 14px 16px;
  background: #ffebee;
  color: var(--wsj-red);
  border: 1px solid #ef9a9a;
}

/* Mobile adjustments for contact form */
@media (max-width: 640px) {
  .contact-content {
    padding: 40px 16px;
  }

  .contact-form {
    padding: 24px 20px;
  }

  .contact-content h2 {
    font-size: 26px;
  }
}

/* ============================================
   API Documentation
   ============================================ */
.api-docs {
  width: 100%;
}

/* --- Hero --- */
.api-docs-hero {
  background: linear-gradient(135deg, #1a1610 0%, #2d2419 50%, #352a21 100%);
  border-bottom: 3px solid var(--wsj-gold);
  padding: 80px 24px 64px;
}

.api-docs-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.api-docs-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wsj-gold);
  border: 1px solid rgba(196, 163, 90, 0.35);
  padding: 6px 18px;
  margin-bottom: 24px;
}

.api-docs-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #faf8f5;
  margin: 0 0 20px;
}

.api-docs-subtitle {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(250, 248, 245, 0.65);
  margin: 0 0 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.api-docs-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.api-docs-hero-actions .btn-primary {
  background: var(--wsj-gold);
  color: #1a1610;
  border: none;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-docs-hero-actions .btn-primary:hover {
  background: #d4b36a;
  transform: translateY(-1px);
}

.api-docs-hero-actions .btn-secondary {
  color: rgba(250, 248, 245, 0.8);
  border-color: rgba(250, 248, 245, 0.25);
  text-decoration: none;
}

.api-docs-hero-actions .btn-secondary:hover {
  color: #faf8f5;
  border-color: rgba(250, 248, 245, 0.5);
}

/* --- Body layout (sidebar + main) --- */
.api-docs-body {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
}

/* --- Sidebar --- */
.api-docs-sidebar {
  width: 240px;
  min-width: 240px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 32px 0 40px 24px;
  border-right: 1px solid var(--wsj-border);
  background: var(--wsj-cream);
}

.api-sidebar-section {
  margin-bottom: 28px;
}

.api-sidebar-heading {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  padding: 0 16px 8px 0;
  margin-bottom: 4px;
}

.api-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  padding: 7px 16px 7px 0;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
}

.api-sidebar-link:hover {
  color: var(--wsj-dark);
  border-left-color: var(--wsj-border);
  padding-left: 8px;
}

.api-sidebar-link.active {
  color: var(--wsj-dark);
  font-weight: 600;
  border-left-color: var(--wsj-gold);
  padding-left: 8px;
}

.api-sidebar-method {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.api-sidebar-method.get {
  background: #dcfce7;
  color: #166534;
}

.api-sidebar-method.post {
  background: #dbeafe;
  color: #1e40af;
}

/* --- Main content --- */
.api-docs-main {
  flex: 1;
  min-width: 0;
  padding: 0 48px 80px 48px;
}

.api-docs-section {
  padding: 48px 0 0;
}

.api-docs-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--wsj-dark);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--wsj-gold);
}

.api-docs-section h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  margin: 32px 0 14px;
}

.api-docs-section p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0 0 16px;
}

.api-docs-section p code,
.api-docs-section td code,
.api-docs-section li code {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 12.5px;
  background: #f0ece6;
  padding: 2px 7px;
  border-radius: 3px;
  color: #b44d12;
  border: 1px solid rgba(212, 200, 184, 0.5);
}

.api-docs-section a {
  color: var(--wsj-blue);
  text-decoration: none;
}

.api-docs-section a:hover {
  text-decoration: underline;
}

.api-docs-divider {
  height: 1px;
  background: var(--wsj-border);
  margin: 48px 0 0;
}

/* --- Screenshots / walkthrough images --- */
.api-screenshot-block {
  margin: 18px 0 22px;
}

.api-screenshot {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  background: #111;
}

.api-screenshot-caption {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(17, 17, 17, 0.68);
}

/* --- Endpoint Header --- */
.api-endpoint-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 20px 24px;
  background: #f8f5ef;
  border: 1px solid var(--wsj-border);
  border-radius: 8px;
  margin-top: 48px;
}

.api-method-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.api-method-badge.get {
  background: #dcfce7;
  color: #166534;
}

.api-method-badge.post {
  background: #dbeafe;
  color: #1e40af;
}

.api-endpoint-path {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--wsj-dark);
}

.api-endpoint-summary {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 20px;
}

.api-no-params {
  font-style: italic;
  color: #888;
}

/* --- Code Blocks --- */
.api-code-block {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  margin: 12px 0 24px;
  border: 1px solid #333;
}

.api-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #2d2d2d;
  border-bottom: 1px solid #3a3a3a;
}

.api-code-lang {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #aaa;
}

.api-code-copy {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: transparent;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.api-code-copy:hover {
  color: #fff;
  border-color: #888;
}

.api-code-copy.copied {
  color: #4ade80;
  border-color: #4ade80;
}

.api-code-block pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.api-code-block pre code {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #d4d4d4;
  background: none;
  border: none;
  padding: 0;
}

/* --- Tables --- */
.api-params-table,
.api-limits-table {
  overflow-x: auto;
  margin: 12px 0 24px;
  border-radius: 8px;
  border: 1px solid var(--wsj-border);
}

.api-params-table table,
.api-limits-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13.5px;
}

.api-params-table thead,
.api-limits-table thead {
  background: #f5f1eb;
}

.api-params-table th,
.api-limits-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--wsj-border);
}

.api-params-table td,
.api-limits-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ece7df;
  color: #444;
  line-height: 1.5;
  vertical-align: top;
}

.api-params-table tbody tr:last-child td,
.api-limits-table tbody tr:last-child td {
  border-bottom: none;
}

.api-params-table tbody tr:hover,
.api-limits-table tbody tr:hover {
  background: rgba(245, 241, 235, 0.5);
}

.api-schema-table td:first-child code {
  font-weight: 600;
}

/* --- Callouts --- */
.api-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 8px;
  margin: 20px 0 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}

.api-callout svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.api-callout--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.api-callout--info svg {
  color: #3b82f6;
}

.api-callout--info code {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1e40af;
}

.api-callout--tip {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.api-callout--tip svg {
  color: #22c55e;
}

.api-callout--tip code {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.api-callout--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.api-callout--warning svg {
  color: #f59e0b;
}

/* Login page: force Clerk widget to center within the content column */
#loginPage #clerk-sign-in {
  width: 100%;
  display: flex;
  justify-content: center;
}

#loginPage #clerk-sign-in > * {
  margin-left: auto;
  margin-right: auto;
}

#loginPage #clerk-sign-in .cl-rootBox,
#loginPage #clerk-sign-in .cl-cardBox {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Linked Keys – unlink button hover */
.linked-key-action[data-action="unlink"]:hover {
  background: var(--wsj-cream) !important;
  border-color: var(--wsj-red) !important;
}

/* --- API Key Card --- */
.api-key-card {
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  border-radius: 8px;
  padding: 28px;
  margin: 20px 0 28px;
}

.api-key-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--wsj-dark);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wsj-border);
}

.api-key-card-header svg {
  color: var(--wsj-brown);
}

.api-key-card-header--success svg {
  color: #22c55e;
}

.api-key-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.api-key-warning-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.api-key-warning-banner svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.form-optional {
  font-weight: 400;
  color: #999;
  font-size: 13px;
}

.api-key-value-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--wsj-border);
  border-radius: 6px;
  padding: 14px 18px;
}

.api-key-value {
  flex: 1;
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 14px;
  color: var(--wsj-dark);
  word-break: break-all;
  user-select: all;
}

.api-key-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--wsj-blue);
  background: none;
  border: 1px solid var(--wsj-blue);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.api-key-copy-btn:hover {
  background: var(--wsj-blue);
  color: #fff;
}

.api-key-copy-btn:hover svg {
  stroke: #fff;
}

.btn-secondary {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #555;
  background: none;
  border: 1px solid var(--wsj-border);
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  border-color: var(--wsj-dark);
  color: var(--wsj-dark);
}

.btn-danger {
  padding: 0 24px;
  height: 42px;
  background: var(--wsj-red);
  color: #fff;
  border: 1px solid #9a1919;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 150ms ease;
}

.btn-danger:hover:not(:disabled) {
  background: #9a1919;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.account-danger-zone {
  border-left: 3px solid var(--wsj-red);
}

.modal-content--narrow {
  max-width: 560px;
  min-width: min(560px, 92vw);
  padding: 28px;
}

/* --- Tab Language Switcher --- */
.api-examples-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--wsj-border);
  margin-top: 20px;
}

.api-tab {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #888;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 20px;
  cursor: pointer;
  margin-bottom: -2px;
  transition: all 0.15s ease;
}

.api-tab:hover {
  color: var(--wsj-dark);
}

.api-tab.active {
  color: var(--wsj-dark);
  border-bottom-color: var(--wsj-gold);
}

.api-tab-content {
  display: none;
}

.api-tab-content.active {
  display: block;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .api-docs-sidebar {
    display: none;
  }

  .api-docs-body {
    flex-direction: column;
  }

  .api-docs-main {
    padding: 0 24px 60px;
  }

  .api-endpoint-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .api-endpoint-path {
    font-size: 14px;
    word-break: break-all;
  }

  .api-key-form-row {
    grid-template-columns: 1fr;
  }

  .api-params-table,
  .api-limits-table {
    border-radius: 0;
    margin-left: -24px;
    margin-right: -24px;
    border-left: none;
    border-right: none;
  }

  .api-code-block {
    border-radius: 0;
    margin-left: -24px;
    margin-right: -24px;
    border-left: none;
    border-right: none;
  }
}

@media (max-width: 640px) {
  .api-docs-hero {
    padding: 50px 16px 40px;
  }

  .api-docs-subtitle {
    font-size: 15px;
  }

  .api-docs-main {
    padding: 0 16px 60px;
  }

  .api-key-card {
    padding: 20px 16px;
  }

  .api-key-value-container {
    flex-direction: column;
    align-items: stretch;
  }

  .api-key-copy-btn {
    text-align: center;
    justify-content: center;
  }

  .api-examples-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   Coming Soon Pages (MCP)
   ============================================ */
.coming-soon-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  text-align: center;
}

.coming-soon-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wsj-gold);
  background: linear-gradient(135deg, #2a2318 0%, #3d3025 100%);
  padding: 8px 20px;
  margin-bottom: 24px;
  border: 1px solid #4a3e32;
}

.coming-soon-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--wsj-dark);
  margin: 0 0 20px;
}

.coming-soon-description {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 40px;
}

.coming-soon-features {
  background: var(--wsj-cream);
  border: 1px solid var(--wsj-border);
  padding: 32px;
  text-align: left;
  margin-bottom: 40px;
}

.coming-soon-features h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wsj-brown);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wsj-border);
}

.coming-soon-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.coming-soon-features li {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  padding: 12px 0;
  border-bottom: 1px solid var(--wsj-border);
}

.coming-soon-features li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.coming-soon-features li strong {
  color: var(--wsj-dark);
  font-weight: 600;
}

.coming-soon-cta {
  text-align: center;
}

.coming-soon-cta p {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--wsj-brown);
  margin: 0 0 16px;
}

.coming-soon-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

/* Mobile adjustments for coming soon pages */
@media (max-width: 640px) {
  .coming-soon-content {
    padding: 40px 16px 60px;
  }

  .coming-soon-features {
    padding: 24px 20px;
  }

  .coming-soon-description {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Entity pages (/members, /legislation)
   Ported from frontend/experiments/legislation-homepage-variants mocks.
   Everything is scoped under .entity-page to avoid collisions with the
   existing page styles (.hero, .badge, etc.).
   ════════════════════════════════════════════════════════════════════ */

.entity-page {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(107, 91, 79, 0.08);
  max-width: 1280px;
  margin: 24px auto 80px;
}
.entity-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 640px) { .entity-wrap { padding: 0 10px; } }

/* ── Shared atoms ── */
.entity-page .party-R { color: var(--R, #b71c1c); font-weight: 600; }
.entity-page .party-D { color: var(--D, #0274b6); font-weight: 600; }
.entity-page .party-I { color: var(--I, #6b5b4f); font-weight: 600; }
.entity-page .ep-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8e0d4;
  flex-shrink: 0;
}
.entity-page .ep-avatar.sm { width: 28px; height: 28px; }
.entity-page .speaker-id { display: flex; gap: 10px; align-items: flex-start; }
/* An author `display` beats the UA stylesheet's [hidden] { display: none }, so
   collapsing rows via the hidden attribute needs this to actually take. */
.entity-page .speaker-id[hidden] { display: none; }
.entity-page .speaker-id .name { font-weight: 600; display: block; }
.entity-page .speaker-id .sub { font-size: 12px; color: var(--muted); }
.entity-page .status-law { color: var(--wsj-green); font-weight: 600; }
.entity-page .section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.entity-page .ghost-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font: 600 13px/1.2 var(--font-sans);
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 2px;
}
.entity-page .ghost-btn:hover { border-color: var(--wsj-brown); }
.entity-page .ghost-btn[aria-expanded="true"] {
  background: var(--wsj-nav);
  color: #f5f1eb;
  border-color: var(--wsj-nav);
}
.entity-page .ep-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.entity-page .ep-error {
  padding: 60px 20px;
  text-align: center;
  color: var(--wsj-red);
  font-size: 14px;
}

/* ── Hero (bill or member) ── */
.entity-page .ep-hero {
  position: relative;
  background: var(--wsj-cream);
  border-bottom: 3px double var(--border);
  text-align: center;
  padding: 40px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.entity-page .ep-hero .ep-source-link {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.entity-page .ep-hero .ep-source-link:hover,
.entity-page .ep-hero .ep-source-link:focus-visible {
  color: var(--text);
  border-bottom-color: var(--border);
  outline: none;
}
@media (max-width: 720px) {
  .entity-page .ep-hero .ep-source-link {
    position: static;
    align-self: flex-end;
    margin: 0 0 8px;
    order: -1;
  }
}
.entity-page .ep-hero .portrait {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  margin-bottom: 12px;
  background: #e8e0d4;
}
.entity-page .ep-hero .kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.entity-page .ep-hero .ep-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 680px;
}
.entity-page .ep-hero .ep-field-label,
.entity-page .ep-hero .summary-block .ep-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wsj-gold);
  margin: 0 0 6px;
}
.entity-page .ep-hero .bill-num {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}
.entity-page .ep-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  max-width: 640px;
  margin: 0 auto 8px;
  line-height: 1.3;
  padding: 0;
  color: var(--text);
  text-shadow: none;
}
/* Long official titles (esp. House rules) — short h1, full text on demand */
.entity-page .ep-hero .bill-title-toggle {
  display: inline-block;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  font: 600 12px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
/* display:inline-block above beats the UA [hidden] rule — force it off. */
.entity-page .ep-hero .bill-title-toggle[hidden] {
  display: none;
}
.entity-page .ep-hero .bill-title-toggle:hover,
.entity-page .ep-hero .bill-title-toggle:focus-visible {
  color: var(--text);
  border-bottom-color: var(--border);
  outline: none;
}
.entity-page .ep-hero .bill-title-full {
  max-width: 66ch;
  width: 100%;
  margin: 0 0 10px;
  text-align: left;
}
.entity-page .ep-hero .bill-title-full p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.75;
  color: #333;
}
.entity-page .ep-hero .bill-title-toggle-end {
  display: block;
  margin: 14px 0 0;
}
.entity-page .ep-hero .summary-block .ep-field-label {
  text-align: center;
  width: 100%;
}
.entity-page .ep-hero h1.member-name {
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 6px 0 4px;
}
.entity-page .ep-hero .status { font-size: 14px; margin-bottom: 12px; }
.entity-page .ep-hero .status .sep { color: var(--border); margin: 0 6px; }
.entity-page .ep-hero .summary-block {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.entity-page .ep-hero .summary {
  font-family: var(--font-serif);
  font-size: 16px;
  color: #555;
  margin: 0;
  line-height: 1.7;
  text-align: center;
}
.entity-page .ep-hero .member-source-link {
  display: inline-block;
  margin-top: 12px;
  font: 400 14px/1.45 var(--font-sans);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.entity-page .ep-hero .member-source-link:hover,
.entity-page .ep-hero .member-source-link:focus-visible {
  color: var(--text);
  text-decoration-color: var(--text);
  outline: none;
}
.entity-page .ep-hero .summary-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 12px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.entity-page .ep-hero .summary-toggle:hover,
.entity-page .ep-hero .summary-toggle:focus-visible {
  color: var(--text);
  border-bottom-color: var(--border);
  outline: none;
}
.entity-page .ep-hero .summary-block:has(.summary) > .summary-toggle {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ── Bill hero: editorial two-column above the fold ── */
.entity-page .ep-hero.bill-hero {
  display: block;
  text-align: left;
  padding: 26px 24px 32px;
}
/* 1052px = the 1100px page-section column minus its 24px gutters, so the
   hero, meta band, section nav and body content share one left edge. */
.entity-page .ep-hero.bill-hero .hero-inner {
  max-width: 1052px;
  margin: 0 auto;
}
.entity-page .ep-hero.bill-hero .hero-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.entity-page .ep-hero.bill-hero .kicker .dot {
  color: var(--border);
  margin: 0 7px;
}
.entity-page .ep-hero.bill-hero .ep-source-link {
  position: static;
  flex: 0 0 auto;
  order: 0;
  align-self: baseline;
  margin: 0;
}
.entity-page .ep-hero.bill-hero .hero-main {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
}
.entity-page .ep-hero.bill-hero .hero-rail {
  border-right: 1px solid var(--border);
  padding-right: 32px;
}
.entity-page .ep-hero.bill-hero .bill-num {
  font-size: clamp(26px, 2.9vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin: 0;
}
.entity-page .ep-hero.bill-hero .bill-kind {
  margin-top: 9px;
  font: 600 11px/1.35 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.entity-page .ep-hero.bill-hero .hero-facts {
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.entity-page .ep-hero.bill-hero .hero-facts dt {
  font: 700 10px/1.2 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.entity-page .ep-hero.bill-hero .hero-facts dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
.entity-page .ep-hero.bill-hero h1 {
  max-width: 42ch;
  margin: 0 0 10px;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height: 1.2;
  text-wrap: balance;
}
.entity-page .ep-hero.bill-hero .bill-title-full {
  max-width: 66ch;
}
.entity-page .ep-hero.bill-hero .bill-title-toggle-end {
  margin-left: 0;
  margin-right: 0;
}
.entity-page .ep-hero.bill-hero .summary-block {
  max-width: 66ch;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.entity-page .ep-hero.bill-hero .summary-block .ep-field-label {
  text-align: left;
}
.entity-page .ep-hero.bill-hero .summary {
  text-align: left;
  color: #3c3733;
  line-height: 1.65;
}
.entity-page .ep-hero.bill-hero .summary-block:has(.summary) > .summary-toggle {
  margin-left: 0;
  margin-right: 0;
}
/* ── Bill page: meta band + nav share the hero's column ── */
#billView .meta-band {
  justify-content: flex-start;
  padding-inline: max(24px, calc((100% - 1052px) / 2));
}
#billView .meta-item {
  padding-left: 34px;
}
/* Sponsor cell is locked to the hero rail's 240px so the two vertical
   rules read as one line down the page; long names wrap instead. */
#billView .meta-item:first-child {
  flex: 0 0 240px;
  width: 240px;
  padding-left: 0;
  padding-right: 24px;
}
#billView .meta-item:first-child .meta-value {
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 2px;
}
#billView .section-nav {
  padding-inline: 0;
}
#billView .section-nav-inner {
  max-width: 1100px;
  padding-inline: 24px;
}
@media (max-width: 860px) {
  #billView .meta-item,
  #billView .meta-item:first-child {
    padding-left: 22px;
    padding-right: 22px;
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .entity-page .ep-hero.bill-hero .hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
@media (max-width: 860px) {
  .entity-page .ep-hero.bill-hero .hero-main {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .entity-page .ep-hero.bill-hero .hero-rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 18px;
  }
  .entity-page .ep-hero.bill-hero .hero-facts {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
.entity-page .crs-summary {
  margin-top: 10px;
}
.entity-page .crs-summary .summary-toggle-end {
  display: block;
  margin: 18px auto 0;
}
.entity-page .summary-block > .crs-credit {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  line-height: 1.5;
}
.entity-page .crs-summary .crs-body {
  font-family: var(--font-serif);
  font-size: 15px;
  color: #333;
  line-height: 1.75;
}
.entity-page .crs-summary .crs-body p {
  margin: 0 0 1em;
}
.entity-page .crs-summary .crs-body p:last-child { margin-bottom: 0; }
.entity-page .crs-summary .crs-body .crs-heading,
.entity-page .crs-summary .crs-body p.crs-heading {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 1.6em;
  margin-bottom: 0.7em;
  line-height: 1.45;
}
.entity-page .crs-summary .crs-body .crs-heading:first-child,
.entity-page .crs-summary .crs-body p.crs-heading:first-child {
  margin-top: 0;
}
.entity-page .crs-summary .crs-body .crs-section,
.entity-page .crs-summary .crs-body p.crs-section {
  margin-top: 1.15em;
}
.entity-page .crs-summary .crs-body ul,
.entity-page .crs-summary .crs-body ol {
  margin: 0 0 1em 1.2em;
  padding: 0;
}
.entity-page .crs-summary .crs-body li { margin-bottom: 0.35em; }
.entity-page .crs-summary .crs-body em { font-style: italic; }
.entity-page .crs-summary .crs-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Meta band ── */
.entity-page .meta-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.entity-page .meta-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 26px;
  border-right: 1px solid var(--border);
  min-height: 74px;
}
.entity-page .meta-item:last-child { border-right: none; }
.entity-page .meta-item .meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.entity-page .meta-item .meta-value {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
  white-space: nowrap;
}
.entity-page .meta-item .meta-value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entity-page .meta-item .meta-value .light { font-weight: 400; color: var(--muted); }
@media (max-width: 720px) {
  .entity-page .meta-band { flex-direction: column; }
  .entity-page .meta-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
    min-height: 0;
    padding: 12px 22px;
  }
  .entity-page .meta-item:last-child { border-bottom: none; }
  .entity-page .meta-item .meta-value { white-space: normal; }
}

/* ── Sticky section nav ── */
.entity-page .section-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}
.entity-page .section-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.entity-page .section-nav a {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font: 500 12px/1.2 var(--font-sans);
  padding: 8px 12px;
  border-radius: 2px;
  white-space: nowrap;
  text-decoration: none;
}
.entity-page .section-nav a:hover { border-color: var(--wsj-brown); text-decoration: none; }
.entity-page .section-nav a.active {
  background: var(--wsj-nav);
  color: #f5f1eb;
  border-color: var(--wsj-nav);
}
.entity-page .section-nav a .count { opacity: 0.65; margin-left: 5px; font-weight: 700; }

/* ── Page sections ── */
.entity-page .page-section {
  border-top: 1px solid var(--border);
  padding: 32px 24px 36px;
  max-width: 1100px;
  margin: 0 auto;
  scroll-margin-top: 56px;
}
.entity-page .page-section:first-of-type { border-top: none; }
.entity-page .page-section > h2.section-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 6px;
  color: var(--text);
}
.entity-page .page-section > .section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 72ch;
}

/* ── Discussions: threaded clusters ── */
.entity-page .convo-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--wsj-cream);
  border: 1px solid var(--border);
  font-size: 13px;
}
.entity-page .convo-stats-lead {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.entity-page .convo-stats b { font-family: var(--font-serif); font-size: 18px; font-weight: 400; }
.entity-page .convo-stats .nums { display: flex; gap: 22px; flex-wrap: wrap; }
.entity-page .h1-cluster { position: relative; margin-bottom: 24px; }
.entity-page .h1-cluster.multi {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0 0 4px;
}
.entity-page .h1-cluster.multi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wsj-gold);
}
.entity-page .h1-cluster-head {
  padding: 14px 18px 12px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #faf8f5, #f3eee6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.entity-page .h1-cluster-head .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wsj-gold);
  margin-bottom: 4px;
}
.entity-page .h1-cluster-head h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}
.entity-page .h1-cluster-head .when {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.entity-page .h1-cluster-head .daily-record-link {
  margin-top: 10px;
}
.entity-page .daily-record-link {
  display: inline-flex;
  align-items: center;
  font: 600 13px/1.2 var(--font-sans);
  color: var(--wsj-nav);
  text-decoration: none;
  border-bottom: 1.5px solid var(--wsj-gold);
  padding-bottom: 1px;
}
.entity-page .daily-record-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.entity-page .h1-node {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 14px 18px 14px 20px;
  position: relative;
}
.entity-page .h1-cluster.multi .h1-node > :first-child {
  display: flex;
  justify-content: center;
}
.entity-page .h1-cluster.multi .h1-node:not(.last-node)::after {
  content: "";
  position: absolute;
  left: 43px; /* pad 20 + half of 48px rail - 1px line */
  top: 54px;
  bottom: -2px;
  width: 2px;
  background: var(--wsj-border);
}
.entity-page .h1-cluster.solo { border: none; background: transparent; padding: 0; }
.entity-page .h1-cluster.solo .h1-node {
  background: var(--card);
  border: 1px solid var(--border);
  grid-template-columns: 1fr;
  padding: 14px 16px;
}
.entity-page .h1-who { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.entity-page .h1-who strong { font-size: 14px; }
.entity-page .h1-who .muted { font-size: 12px; color: var(--muted); }
.entity-page .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1.5px solid var(--wsj-gold);
  color: var(--wsj-nav);
}
.entity-page .excerpt {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  white-space: pre-wrap;
}
.entity-page .excerpt-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--wsj-nav);
  font: 600 13px/1.2 var(--font-sans);
  cursor: pointer;
  border-bottom: 1.5px solid var(--wsj-gold);
  padding-bottom: 1px;
}
.entity-page .excerpt-toggle:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.entity-page .excerpt-toggle:disabled {
  opacity: 0.65;
  cursor: wait;
}
.entity-page .excerpt-toggle[aria-expanded="true"] {
  border-bottom-color: var(--border);
}
.entity-page .mention-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wsj-nav);
  border: 1px solid var(--wsj-gold);
  background: rgba(196, 163, 90, 0.14);
  padding: 2px 7px;
  margin-bottom: 6px;
}
.entity-page .mention-daily { margin-top: 10px; }
.entity-page .h1-node.ctx { opacity: 0.72; }
.entity-page .h1-node.ctx .excerpt { color: #555; }
.entity-page .h1-cluster-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 18px 14px 20px;
  border-top: 1px solid var(--border);
}
.entity-page .h1-node[hidden] { display: none; }
.entity-page .convo-list { list-style: none; margin: 0 0 22px; padding: 0; }
.entity-page .convo-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.entity-page .convo-list li .t { min-width: 0; }
.entity-page .convo-list li .t a { color: var(--text); }
.entity-page .convo-list li .n {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
/* These introduce a subsection that carries its own .section-sub blurb, the
   same shape as a page section, so they read as headings rather than labels. */
.entity-page .disc-subhead {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin: 38px 0 6px;
}

/* ── Votes ── */
.entity-page .vote-list { display: flex; flex-direction: column; gap: 12px; }
.entity-page .vote-row {
  background: #fff;
  border: 1px solid var(--border);
  padding: 16px 18px;
}
.entity-page .vote-row.featured {
  background: var(--wsj-cream);
  border-left: 3px solid var(--wsj-nav);
}
.entity-page .vote-row .top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.entity-page .vote-row .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.entity-page .vote-row .result { font-size: 12px; font-weight: 600; color: var(--wsj-green); }
.entity-page .vote-row .result.fail { color: var(--wsj-red); }
.entity-page .vote-row h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 4px;
}
.entity-page .vote-row .meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.entity-page .vote-explain {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 12px;
  max-width: 66ch;
  line-height: 1.5;
}
.entity-page .tally { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entity-page .tally-bar {
  flex: 1 1 160px;
  height: 10px;
  background: #e8e0d4;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  min-width: 120px;
}
.entity-page .tally-bar .yea { background: var(--wsj-green); }
.entity-page .tally-bar .nay { background: var(--wsj-red); }
.entity-page .tally-nums { font-size: 13px; white-space: nowrap; }
.entity-page .vote-detail {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.entity-page .vote-detail.open { display: block; }
.entity-page .vote-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.entity-page .seg-control {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
}
.entity-page .seg-control button {
  border: none;
  background: transparent;
  color: var(--muted);
  font: 600 12px/1.2 var(--font-sans);
  padding: 8px 16px;
  cursor: pointer;
}
.entity-page .seg-control button + button { border-left: 1px solid var(--border); }
.entity-page .seg-control button.active {
  background: var(--wsj-nav);
  color: #f5f1eb;
}
.entity-page .vote-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.entity-page .vote-chip {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font: 500 12px/1.2 var(--font-sans);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 2px;
}
.entity-page .vote-chip:hover { border-color: var(--wsj-brown); }
.entity-page .vote-chip.active {
  background: var(--wsj-nav);
  color: #f5f1eb;
  border-color: var(--wsj-nav);
}
.entity-page .voter-list {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  background: #fff;
}
.entity-page .voter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.entity-page .voter-row:last-child { border-bottom: none; }
.entity-page .vote-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  white-space: nowrap;
}
.entity-page .vote-badge.yes {
  color: var(--wsj-green);
  border-color: rgba(46, 125, 50, 0.35);
  background: rgba(46, 125, 50, 0.08);
}
.entity-page .vote-badge.no {
  color: var(--wsj-red);
  border-color: rgba(183, 28, 28, 0.35);
  background: rgba(183, 28, 28, 0.08);
}
.entity-page .vote-badge.dnv { color: var(--muted); background: var(--wsj-cream); }
.entity-page .vote-map-wrap { display: none; }
.entity-page .vote-map-wrap.visible { display: block; }
.entity-page .vote-list-wrap.hidden { display: none; }
.entity-page .vote-filter-chips.hidden { display: none; }
.entity-page .state-detail { margin-top: 4px; }
.entity-page .state-detail h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 8px;
}
.entity-page .state-detail .voter-list { max-height: none; }
.entity-page .cartogram {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 5px;
  max-width: 640px;
  margin-bottom: 14px;
}
.entity-page .state-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  background: #e8e0d4;
  color: var(--text);
  font: 700 12px/1 var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
  padding: 0;
}
.entity-page .state-cell:hover,
.entity-page .state-cell.active { outline: 2px solid var(--wsj-nav); outline-offset: 1px; }
.entity-page .state-cell.both-yes { background: #c8e6c9; border-color: #81c784; }
.entity-page .state-cell.both-no { background: #ffcdd2; border-color: #e57373; }
.entity-page .state-cell.split { background: #ffe082; border-color: #ffca28; }
.entity-page .state-cell.missing { background: #ebe4da; color: var(--muted); }
.entity-page .map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.entity-page .map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.entity-page .map-legend i {
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid var(--border);
}
.entity-page .map-legend .lg-yes { background: #c8e6c9; }
.entity-page .map-legend .lg-no { background: #ffcdd2; }
.entity-page .map-legend .lg-split { background: #ffe082; }
.entity-page .map-legend .lg-miss { background: #ebe4da; }
.entity-page .map-hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* ── Tables (amendments, voting record) ── */
.entity-page .amdt-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-left: 3px solid var(--wsj-gold);
  padding-left: 14px;
  margin-bottom: 16px;
}
.entity-page .amdt-summary b {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
}
.entity-page .v5-table-wrap { overflow-x: auto; }
.entity-page .v5-table-wrap.expanded {
  max-height: 520px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
}
.entity-page .v5-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--border);
}
.entity-page .v5-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  background: #f0ebe3;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.entity-page .v5-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.entity-page .v5-table tr:nth-child(even) td { background: #f8f5ef; }
.entity-page .v5-table .amdt { font-weight: 600; white-space: nowrap; }
.entity-page .ep-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.entity-page .ep-badge.adopted { color: var(--wsj-green); border-color: #a5d6a7; background: #f1f8f2; }
.entity-page .ep-badge.rejected { color: var(--wsj-red); border-color: #ef9a9a; background: #fdf2f2; }
.entity-page .ep-badge.pending { color: var(--muted); background: var(--wsj-cream); }
.entity-page .amdt-controls {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.entity-page .amdt-controls .hint { font-size: 12px; color: var(--muted); }
.entity-page .keyvote {
  background: var(--wsj-cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--wsj-nav);
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.entity-page .keyvote .kv-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 3px;
}
.entity-page .keyvote h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.entity-page .keyvote .kv-meta { font-size: 13px; color: var(--muted); }

/* ── Related measures ── */
.entity-page .chamber-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}
@media (max-width: 720px) {
  .entity-page .chamber-pair { grid-template-columns: 1fr; }
}
.entity-page .chamber-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 18px 20px;
}
.entity-page .chamber-card.current {
  background: var(--wsj-cream);
  border-left: 3px solid var(--wsj-nav);
}
.entity-page .chamber-card .chamber-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wsj-gold);
  margin-bottom: 8px;
}
.entity-page .chamber-card.current .chamber-tag { color: var(--wsj-brown); }
.entity-page .chamber-card .rel-num { font-family: var(--font-serif); font-size: 24px; }
.entity-page .chamber-card .rel-title { font-size: 14px; font-weight: 600; margin: 2px 0 6px; }
.entity-page .chamber-card .rel-why { font-size: 13px; color: var(--muted); line-height: 1.55; }
.entity-page .rel-subhead {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.entity-page .related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.entity-page .related-item {
  background: #fff;
  border: 1px solid var(--border);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 640px) {
  .entity-page .related-item { grid-template-columns: 1fr; gap: 6px; }
}
.entity-page .related-item .rel-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wsj-gold);
  border: 1px solid var(--wsj-gold);
  background: var(--wsj-cream);
  padding: 4px 8px;
  text-align: center;
  line-height: 1.35;
}
.entity-page .related-item .rel-num { font-family: var(--font-serif); font-size: 17px; }
.entity-page .related-item .rel-title { font-size: 14px; margin: 1px 0 3px; }
.entity-page .related-item .rel-why {
  font-size: 13px;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.5;
}

/* ── Cosponsors ── */
.entity-page .cospon-head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .entity-page .cospon-head { grid-template-columns: 1fr; }
}
.entity-page .cospon-sponsor {
  background: var(--wsj-cream);
  border: 1px solid var(--border);
  padding: 16px;
}
.entity-page .v6-bar {
  display: flex;
  height: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.entity-page .v6-bar .d { background: var(--D, #0274b6); }
.entity-page .v6-bar .r { background: var(--R, #b71c1c); }
.entity-page .v6-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 6px;
  color: var(--muted);
}
.entity-page .cospon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 20px;
}
.entity-page .cospon-grid .speaker-id {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.entity-page .cospon-grid .speaker-id .name { font-size: 13px; }
.entity-page .cospon-controls {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.entity-page .cospon-controls .hint { font-size: 12px; color: var(--muted); }

/* ── Bill list (legislation search + member sponsored) ── */
.entity-page .bill-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.entity-page .bill-list > li {
  margin: 0;
  padding: 0;
}
.entity-page a.bill-item {
  background: #fff;
  border: 1px solid var(--border);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entity-page a.bill-item:hover,
.entity-page a.bill-item:focus-visible {
  background: var(--wsj-cream);
  border-color: rgba(53, 42, 33, 0.35);
  box-shadow: 0 1px 0 rgba(53, 42, 33, 0.06);
  outline: none;
}
@media (max-width: 640px) {
  .entity-page a.bill-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .entity-page a.bill-item .b-right { text-align: left; }
}
.entity-page .bill-item .b-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.entity-page .bill-item .b-num {
  font-family: var(--font-serif);
  font-size: 16px;
  white-space: nowrap;
  color: var(--text);
}
.entity-page .bill-item .b-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 64ch;
  color: var(--text);
}
.entity-page .bill-item .b-meta {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 5px;
}
.entity-page .bill-item .b-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  margin-top: 10px;
}
.entity-page .bill-item .b-right {
  align-self: center;
  text-align: right;
  min-width: 120px;
  max-width: 148px;
}
.entity-page .bill-item .b-right b {
  display: block;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}
.entity-page .bill-item .b-right span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
  white-space: normal;
}
.entity-page .bill-item .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(107, 91, 79, 0.08);
  padding: 2px 7px;
  border-radius: 2px;
}
.entity-page .bill-item .tag.hot {
  color: #7a4a00;
  background: rgba(196, 163, 90, 0.22);
}
.entity-page .bill-item .tag.status {
  color: var(--wsj-nav);
  background: rgba(53, 42, 33, 0.1);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}
.entity-page .bill-item .tag.status.law {
  color: var(--wsj-green);
  background: rgba(46, 125, 50, 0.12);
}
.entity-page .bill-item .tag.status.passed {
  color: var(--wsj-blue);
  background: rgba(2, 116, 182, 0.12);
}
.entity-page .bill-item .tag.status.committee {
  color: var(--wsj-brown);
  background: rgba(107, 91, 79, 0.14);
}
.entity-page .bill-item .tag.debate {
  color: var(--wsj-red);
  background: rgba(183, 28, 28, 0.1);
}

/* ── About (member page) ── */
.entity-page .about-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 840px) {
  .entity-page .about-grid { grid-template-columns: 1fr; }
}
.entity-page .about-grid .bio {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.75;
  color: #333;
  max-width: 68ch;
  white-space: pre-line;
}
.entity-page .about-rail {
  background: var(--wsj-cream);
  border: 1px solid var(--border);
  padding: 20px 22px;
}
.entity-page .about-rail h3 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 6px;
}
.entity-page .about-rail h3:first-child { margin-top: 0; }
.entity-page .about-rail p,
.entity-page .about-rail li { font-size: 13px; color: #444; }
.entity-page .about-rail ul { list-style: none; margin: 0; padding: 0; }
.entity-page .about-rail li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.entity-page .about-rail li:last-child { border-bottom: none; }

/* ── Directory / search (both index pages) ── */
.entity-page .dir-head {
  background: var(--wsj-cream);
  border-bottom: 3px double var(--border);
  text-align: center;
  padding: 40px 24px 30px;
}
.entity-page .dir-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 400;
  margin: 4px 0 8px;
  padding: 0;
  color: var(--text);
  text-shadow: none;
}
.entity-page .dir-head .sub {
  font-size: 14px;
  color: var(--muted);
  max-width: 64ch;
  margin: 0 auto;
}
.entity-page .dir-search {
  max-width: 680px;
  margin: 22px auto 0;
  position: relative;
}
.entity-page .dir-search input {
  width: 100%;
  padding: 13px 16px;
  font: 400 16px/1.3 var(--font-sans);
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #fff;
  color: var(--text);
}
.entity-page .dir-search input:focus {
  outline: 2px solid var(--wsj-nav);
  outline-offset: -1px;
}
.entity-page .dir-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.entity-page .dir-body { max-width: 1100px; margin: 0 auto; padding: 26px 24px 42px; }
.entity-page .dir-count { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.entity-page .member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.entity-page .member-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
}
.entity-page .member-card:hover {
  border-color: var(--wsj-brown);
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(107, 91, 79, 0.15);
}
.entity-page .member-card .name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.entity-page .member-card .sub { font-size: 12px; color: var(--muted); }
.entity-page .leg-results {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* ============================================
   Daily Record — debate clusters
   Ported from experiments/daily-record-ui-variants/segment-layout-variants.html
   (variant "Real · vote up front"). Everything is scoped to .daily-record so it
   cannot reach the table/entity styles above.
   ============================================ */
.daily-record {
  /* Sticky heads park under the site nav; keep the two in sync. */
  --drc-sticky-top: 57px;
  --drc-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    monospace;
  --drc-R: #b71c1c;
  --drc-D: #0274b6;
  margin-top: 16px;
}

.daily-record .day-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.daily-record .day-bar h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
}
.daily-record .day-bar .meta {
  font-size: 13px;
  color: var(--muted);
}

.daily-record .empty-note {
  padding: 24px 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
}

/* —— cluster shell —— */
.daily-record .h1-cluster {
  position: relative;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  background: var(--card);
  /* Skip layout and paint for debates that are off screen. The day is appended
     in slices, and without this every slice re-lays-out everything already
     added. `auto` lets the browser reuse each cluster's real height once it has
     measured it, so the estimate below only applies to clusters never yet seen.
     Unlike windowing, skipped content stays findable by the browser's own
     find-in-page. */
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}
/* Skipped content is omitted from print in some browsers, and these pages are
   meant to be printable. */
@media print {
  .daily-record .h1-cluster {
    content-visibility: visible;
  }
}
.daily-record .h1-cluster::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wsj-gold);
}
/* The head lays out as nothing so that its two halves become children of the
   cluster itself. That is what lets `.head-pin` below stay pinned for the whole
   debate: a sticky element travels only as far as its parent's box, and the
   head's box is a few lines tall while the cluster's is the debate. The element
   stays in the DOM as the scope the title toggle queries. */
.daily-record .h1-cluster-head {
  display: contents;
}
/* What is pinned: the label and share pair, the title, the day, and the
   parliamentary tag. Solid rather than the gradient, because it is read against
   the statements once the rest of the head has gone under it. */
.daily-record .head-pin {
  padding: 14px 18px 10px 20px;
  background: #faf8f5;
}
/* What scrolls away: the bill's story, which grows with its history, and the
   presentation controls. Picks the gradient up where the strip left it, so the
   two read as one band before anything has moved. The top padding is here to
   keep the first child's margin from collapsing through it. */
.daily-record .head-detail {
  padding: 2px 18px 12px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #faf8f5, #f3eee6);
}
/* The strip already ends in a rule, so the first bill's outcome does not need
   to start with one. A bill block that leads with something else — a lede, the
   status flags — keeps its own. */
.daily-record .head-detail .da-bill:first-child .da-outcome:first-child {
  padding-top: 0;
  border-top: none;
}
/* Last line of the strip; the strip's own padding closes it. */
.daily-record .head-pin .debate-act-tag {
  margin-bottom: 0;
}
.daily-record .h1-cluster-head .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wsj-gold);
  margin-bottom: 4px;
}
.daily-record .h1-cluster-head h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
}
/* Titles long enough to need it are clipped to a teaser in clusterTitle();
   the expanded heading is the same h4 so size and face do not change. */
.daily-record .h1-cluster-head .cluster-title-toggle {
  display: inline-block;
  margin: 6px 0 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
/* display:inline-block above beats the UA [hidden] rule — force it off. */
.daily-record .h1-cluster-head .cluster-title-toggle[hidden] {
  display: none;
}
.daily-record .h1-cluster-head .cluster-title-toggle:hover,
.daily-record .h1-cluster-head .cluster-title-toggle:focus-visible {
  color: var(--text);
  border-bottom-color: var(--border);
  outline: none;
}
.daily-record .h1-cluster-head .cluster-title-toggle-end {
  display: block;
  margin-top: 10px;
}
.daily-record .h1-cluster-head .when {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.daily-record .h1-cluster-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 18px 14px 20px;
  border-top: 1px solid var(--border);
}

/* The strip holds its place until the next debate title pushes it out. The
   cluster is the containing block, so each title hands off to the next. The
   height cap is a guard for the opened full title on a short viewport; the
   strip is three lines otherwise, and the rest of the head scrolls under it. */
.daily-record .h1-cluster.sticky-head .head-pin {
  position: sticky;
  top: var(--drc-sticky-top);
  z-index: 25;
  max-height: calc(100vh - var(--drc-sticky-top) - 40px);
  overflow-y: auto;
  box-shadow: 0 1px 0 var(--border), 0 6px 14px -10px rgba(53, 42, 33, 0.5);
}

/* —— Copy / Share controls, used by the debate head, the statement body, and
   the bill and member page heroes (see js/share.js) —— */
.share-ctl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1.5px solid var(--wsj-gold);
  background: none;
  color: var(--wsj-nav);
  font: 600 13px/1.2 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.share-ctl svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.share-ctl:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.share-ctl.is-copied {
  color: var(--wsj-green);
  border-bottom-color: currentColor;
  cursor: default;
}

/* Statement controls close the body, after the remarks they point at. The
   media rail is left to the speaker and the clip. */
.daily-record .sg-body .stmt-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* —— Copy / Share, flush right of the "Floor debate" label —— */
.daily-record .h1-cluster-head .head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.daily-record .h1-cluster-head .head-top .label {
  margin-bottom: 0;
}
/* No `margin-left: auto` here on purpose: space-between already pins the pair
   right when it shares the line with the label, and leaves it aligned left
   once it wraps onto its own line in a narrow cluster. */
.daily-record .h1-cluster-head .head-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 640px) {
  .daily-record .h1-cluster-head .head-actions,
  .daily-record .sg-body .stmt-actions {
    gap: 8px 14px;
  }
  .share-ctl {
    font-size: 12.5px;
  }
}

/* —— Share row on a bill or member hero. Sits under the hero rule so it reads
   as an action on the page rather than part of the identification. —— */
.ep-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.bill-hero .ep-share {
  margin-top: 22px;
}
@media (max-width: 640px) {
  .ep-share {
    gap: 8px 14px;
  }
}

/* —— Display: / Length: behind "Show presentation options" —— */
.daily-record .h1-cluster-head .excerpt-toggle.pres-toggle,
.daily-record .h1-cluster-head .excerpt-toggle.detail-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1.5px solid var(--wsj-gold);
  background: none;
  color: var(--wsj-nav);
  font: 600 13px/1.2 var(--font-sans);
  cursor: pointer;
}
.daily-record .h1-cluster-head .excerpt-toggle.pres-toggle:hover,
.daily-record .h1-cluster-head .excerpt-toggle.detail-toggle:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.daily-record .h1-cluster-head .excerpt-toggle.pres-toggle[aria-expanded="true"] {
  border-bottom-color: var(--border);
}
/* Length only has something to act on once Statements is showing. */
.daily-record .h1-cluster[data-view-mode="details"] .pres-length {
  display: none;
}
.daily-record .pres-panel[hidden] {
  display: none !important;
}
.daily-record .pres-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.daily-record .pres-panel .ctl-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}
.daily-record .pres-panel .lbl {
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.daily-record .bin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.daily-record .bin-toggle .side {
  font: 600 12px/1.2 var(--font-sans);
  color: #b0a394;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.daily-record .bin-toggle .side.on {
  color: var(--wsj-nav);
}
.daily-record .bin-toggle .track {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #d8cfc2;
  border: none;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.daily-record .bin-toggle .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: left 0.15s ease;
}
.daily-record .bin-toggle .track.right {
  background: var(--wsj-nav);
}
.daily-record .bin-toggle .track.right::after {
  left: 18px;
}
.daily-record .view-panel[hidden] {
  display: none !important;
}

/* —— Details view: media column + statement body —— */
.daily-record .sg-node {
  display: grid;
  grid-template-columns: 300px 1fr;
}
.daily-record .sg-node:not(.last-node) {
  border-bottom: 1px solid var(--border);
}
.daily-record .sg-media {
  background: var(--wsj-nav);
  color: #f5f1eb;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.daily-record .sg-onair {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.daily-record .sg-onair .ep-avatar {
  border: 2px solid var(--wsj-gold);
}
.daily-record .sg-onair .sg-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #f5f1eb;
}
.daily-record .sg-onair .sg-partyline {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(245, 241, 235, 0.75);
}
.daily-record .ep-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8e0d4;
  flex-shrink: 0;
}
.daily-record .sg-media .party-R {
  color: #b87f72;
  font-weight: 600;
}
.daily-record .sg-media .party-D {
  color: #6f96ab;
  font-weight: 600;
}
.daily-record .sg-live {
  font-family: var(--drc-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wsj-gold);
}
.daily-record .sg-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: -4px;
}
.daily-record .sg-bar > i {
  display: block;
  height: 100%;
  background: var(--wsj-gold);
}
.daily-record .sg-vid-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wsj-gold);
  margin: 0 0 -4px;
}

/* Media players sit on the dark panel, so the shared chrome is re-tinted. */
.daily-record .sg-media .statement-video {
  max-height: 160px;
  margin: 0;
  background: #1a1a1a;
}
.daily-record .sg-media .media-section {
  margin-top: 0;
}
.daily-record .sg-media .media-section-label {
  color: rgba(245, 241, 235, 0.65);
}
.daily-record .sg-media .audio-player {
  margin-top: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.1);
}
.daily-record .sg-media .audio-play-btn {
  width: 34px;
  height: 34px;
}
.daily-record .sg-media .audio-label,
.daily-record .sg-media .audio-time {
  font-size: 12px;
  color: #f0e7d8;
}

.daily-record .sg-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* Arrow links without an underline — the arrow already signals linkiness. */
.daily-record .sg-links a,
.daily-record .sg-media .member-website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #f0e7d8;
  text-decoration: none;
}
.daily-record .sg-links a:hover,
.daily-record .sg-media .member-website:hover {
  color: var(--wsj-gold);
  text-decoration: none;
}
.daily-record .sg-links .video-icon,
.daily-record .sg-links .pdf-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.daily-record .sg-links .artifact-note {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(245, 241, 235, 0.7);
}
.daily-record .sg-links .info-icon {
  cursor: help;
}
.daily-record .sg-links .info-icon::after {
  left: 0;
  transform: none;
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 8px;
}

/* What the member entered into the record, listed by title. Same rule and
   kicker as the legislation rail beneath it, so the two read as sibling
   sections of the same column. */
.daily-record .artifact-wrap {
  width: 100%;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 241, 235, 0.14);
}
.daily-record .artifact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.daily-record .artifact-list li {
  position: relative;
  padding-left: 13px;
}
.daily-record .artifact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--wsj-gold);
}
/* A title wraps like a bill title does, not as an inline-flex row. */
.daily-record .sg-links .artifact-list a.artifact-link {
  display: block;
  overflow-wrap: break-word;
}
.daily-record .legis-wrap {
  width: 100%;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 241, 235, 0.14);
}
/* The rail is split into headed groups so the bill the debate is about is not
   followed by an unlabelled list of whatever else the speaker named. The
   debate's own group takes the gold kicker used elsewhere for the record's own
   voice; the mentions group is quieter, because it is secondary. */
.daily-record .rail-hd {
  margin-bottom: 7px;
  font: 700 9.5px/1.2 var(--font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wsj-gold);
}
.daily-record .rail-group.other .rail-hd {
  color: #8a7f75;
}
.daily-record .rail-group + .rail-group {
  margin-top: 14px;
}
.daily-record .rail-group > .bill-card + .bill-card {
  margin-top: 10px;
}
.daily-record .legis-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.daily-record .legis-links.has-votes,
.daily-record .legis-links.has-votes .legis-extra {
  gap: 10px;
  align-items: stretch;
}
.daily-record .bill-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(245, 241, 235, 0.18);
  border-radius: 2px;
  background: rgba(245, 241, 235, 0.05);
}
.daily-record .bill-card .bill-title {
  /* .sg-links a makes the arrow links inline-flex rows, which would strand the
     bill number in its own column beside a block of title text. The number
     belongs in the run of the title. */
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #f0e7d8;
  text-decoration: none;
  border: none;
  padding: 0;
  overflow-wrap: break-word;
}
.daily-record .bill-card a.bill-title:hover {
  color: var(--wsj-gold);
}
.daily-record .bill-card.is-topic {
  border-left: 2px solid var(--wsj-gold);
  padding-left: 9px;
}
.daily-record .bill-card .bill-title .bill-number {
  color: inherit;
  margin-right: 0.3em;
  /* "S.Res. 605" is full of break opportunities and the column is only 300px,
     so left alone it stacks into a ragged two-character stub. */
  white-space: nowrap;
}
/* What the speaker called it, directly under the official title — the two are
   the same kind of thing, a name, and adjacency is the only arrangement that
   lets a reader compare them without looking past a fact first. No rule above
   it, because the line it restates is the one immediately above. */
.daily-record .card-said {
  margin-top: -2px;
  font: 400 12px/1.5 var(--font-serif);
  color: rgba(245, 241, 235, 0.62);
}
.daily-record .card-said q {
  font-style: italic;
  quotes: "\201C" "\201D";
}
/* Pointing at the phrase in the statement lights the card it resolved to, and
   mutes the others so the answer is the one card still lit. */
.daily-record .bill-card {
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.daily-record .bill-card.is-linked {
  border-color: var(--wsj-gold);
  background: rgba(196, 163, 90, 0.13);
}
.daily-record .bill-card.is-linked .bill-title {
  color: #fbf4e6;
}
.daily-record .legis-links.has-dim .bill-card:not(.is-linked) {
  opacity: 0.38;
}
/* What became of the bill, in the small-meta type the party line and the page
   numbers already use on this rail — so the one filled pill on a card is the
   member's own vote, which is what the card is for. */
.daily-record .card-facts {
  margin: 0;
}
.daily-record .card-facts span {
  display: block;
  margin-top: 2px;
  font: 600 12px/1.45 var(--font-sans);
  color: rgba(245, 241, 235, 0.65);
}
/* An amendment's card opens with the bill it amends, which is a link. */
.daily-record .card-facts a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 235, 0.3);
}
.daily-record .card-facts a:hover {
  color: var(--wsj-gold);
  border-bottom-color: var(--wsj-gold);
}
.daily-record .vh-summary {
  appearance: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 0 0;
  border: none;
  border-top: 1px solid rgba(245, 241, 235, 0.12);
  background: none;
  font: 600 12px/1.3 var(--font-sans);
  color: rgba(245, 241, 235, 0.72);
  text-align: left;
  cursor: pointer;
}
/* One pill carrying the whole claim — "Schumer voted Yes" — rather than a
   label, a badge and a question strung across the card. The filled treatment is
   the /legislation status tag redrawn for this dark ground; .vote-badge keeps
   its outlined form inside the expanded history, where it labels rows. */
.daily-record .vh-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font: 600 12px/1.45 var(--font-sans);
}
.daily-record .vh-tag.yes {
  color: #8fd694;
  background: rgba(143, 214, 148, 0.16);
}
.daily-record .vh-tag.no {
  color: #e5a79b;
  background: rgba(229, 167, 155, 0.16);
}
.daily-record .vh-tag.dnv {
  color: rgba(245, 241, 235, 0.6);
  background: rgba(245, 241, 235, 0.1);
}
.daily-record .vh-summary:hover .vh-tag {
  color: #f5f1eb;
}
.daily-record .vh-note {
  padding-top: 8px;
  border-top: 1px solid rgba(245, 241, 235, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 241, 235, 0.55);
}
.daily-record .vote-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 241, 235, 0.12);
}
.daily-record .vote-history[hidden] {
  display: none;
}
.daily-record .vh-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.daily-record .vh-main {
  min-width: 0;
}
.daily-record .vh-q {
  font-size: 12.5px;
  font-weight: 600;
  color: #f0e7d8;
}
.daily-record .vh-sub {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(245, 241, 235, 0.62);
}
.daily-record .vh-sub b {
  font-weight: 700;
  color: rgba(245, 241, 235, 0.85);
}
.daily-record .vote-badge {
  flex-shrink: 0;
  padding: 3px 7px;
  border: 1px solid rgba(245, 241, 235, 0.25);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Softened for the dark panel, same yes/no/abstain reading as the bill page. */
.daily-record .vote-badge.yes {
  color: #8fbf95;
  border-color: rgba(143, 191, 149, 0.4);
}
.daily-record .vote-badge.no {
  color: #d09a8f;
  border-color: rgba(208, 154, 143, 0.4);
}
.daily-record .vote-badge.dnv {
  color: rgba(245, 241, 235, 0.55);
}
.daily-record .legis-links .bill-number {
  margin-right: 0.3em;
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
  color: inherit;
}
.daily-record .legis-links .legislation-link:hover .bill-number {
  background: none;
  color: inherit;
}
.daily-record .legis-extra {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.daily-record .rail-group.is-expanded .legis-extra {
  display: flex;
}
.daily-record .legis-more-btn {
  appearance: none;
  display: inline-block;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(245, 241, 235, 0.28);
  border-radius: 2px;
  background: transparent;
  color: #f0e7d8;
  font: 600 12.5px/1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.daily-record .legis-more-btn:hover {
  border-color: var(--wsj-gold);
  color: #f5f1eb;
}
.daily-record .legis-more-btn[aria-expanded="true"] {
  background: rgba(245, 241, 235, 0.1);
  border-color: var(--wsj-gold);
  color: #f5f1eb;
}

.daily-record .sg-body {
  padding: 16px 18px 20px;
  min-width: 0;
}
.daily-record .sg-text {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 68ch;
}
/* The wording a speaker used for a bill, marked where it falls. Dotted rather
   than solid so it does not read as a link — it is not one; it points at the
   card in this statement's rail. */
.daily-record .sg-text .cite {
  border-bottom: 1px dotted var(--wsj-gold);
  cursor: help;
}
.daily-record .sg-text .cite:hover,
.daily-record .sg-text .cite:focus {
  background: rgba(196, 163, 90, 0.16);
  outline: none;
}
.daily-record .sg-text p + p {
  margin-top: 0.9em;
}

/* —— fact chips —— */
.daily-record .fact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.daily-record .fact-chip {
  display: inline-flex;
  align-items: baseline;
  border: 1px solid #cfc3b2;
  background: #f3eee6;
  padding: 4px 8px;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
.daily-record .fact-chip .k {
  color: #352a21;
  font-weight: 700;
}
.daily-record .fact-chip .k::after {
  content: ":";
  margin-right: 6px;
  color: inherit;
}
.daily-record .fact-chip .v {
  color: #1a1a1a;
}
.daily-record a.fact-chip {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.daily-record a.fact-chip:hover {
  border-color: var(--wsj-brown);
  background: #ebe4d8;
}
.daily-record a.fact-chip:hover .v {
  color: var(--accent);
}

/* —— Statements view: compact threaded list —— */
.daily-record .stmt-node {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 14px 18px 14px 20px;
  position: relative;
}
.daily-record .stmt-node.solo-node {
  grid-template-columns: 1fr;
}
.daily-record .stmt-node:not(.last-node)::after {
  content: "";
  position: absolute;
  left: 43px;
  top: 54px;
  bottom: -2px;
  width: 2px;
  background: var(--border);
}
.daily-record .stmt-rail {
  display: flex;
  justify-content: center;
}
.daily-record .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  border: 1.5px solid var(--wsj-gold);
  border-radius: 2px;
  box-sizing: border-box;
  background: #fff;
  color: var(--wsj-nav);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.daily-record .stmt-who {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.daily-record .stmt-who .ep-avatar {
  width: 28px;
  height: 28px;
}
.daily-record .stmt-who .sg-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--wsj-nav);
}
.daily-record .stmt-who .muted {
  font-size: 12px;
  color: var(--muted);
}
.daily-record .stmt-who .party-R {
  color: var(--drc-R);
  font-weight: 600;
}
.daily-record .stmt-who .party-D {
  color: var(--drc-D);
  font-weight: 600;
}
.daily-record .stmt-who .pages-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.daily-record .stmt-who .pages-link:hover {
  color: var(--accent);
}
.daily-record .stmt-excerpt {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}
.daily-record .stmt-excerpt p + p {
  margin-top: 0.8em;
}

/* —— shared per-statement Show full / Show less —— */
.daily-record .excerpt-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1.5px solid var(--wsj-gold);
  background: none;
  color: var(--wsj-nav);
  font: 600 13px/1.2 var(--font-sans);
  cursor: pointer;
}
.daily-record .excerpt-toggle:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.daily-record .excerpt-toggle[aria-expanded="true"] {
  border-bottom-color: var(--border);
}
.daily-record .linkish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
  border-bottom: 1.5px solid var(--wsj-gold);
  color: var(--wsj-nav);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.daily-record .linkish:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 960px) {
  .daily-record .sg-node {
    grid-template-columns: 1fr;
  }
  .daily-record .h1-cluster.sticky-head .head-pin {
    position: static;
  }
}

/* —— Loading placeholder ——
   Shaped like a debate cluster rather than a line of text, so the wait shows
   what is coming and the real first cluster lands into roughly the space the
   placeholder already held. */
.dr-skel {
  position: relative;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.dr-skel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wsj-gold);
  opacity: 0.45;
}
.dr-skel-head {
  padding: 14px 18px 12px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #faf8f5, #f3eee6);
}
.dr-skel-node {
  display: grid;
  grid-template-columns: 300px 1fr;
}
.dr-skel-media {
  background: var(--wsj-nav);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dr-skel-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dr-skel-line {
  display: block;
  height: 11px;
  border-radius: 3px;
  background: #e8e0d4;
  background-image: linear-gradient(90deg, #e8e0d4 0%, #f3eee6 50%, #e8e0d4 100%);
  background-size: 200% 100%;
  animation: dr-skel-shimmer 1.4s ease-in-out infinite;
}
.dr-skel-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 241, 235, 0.18);
}
/* The media column is dark, so its bars shimmer light instead of tan. */
.dr-skel-media .dr-skel-line {
  background: rgba(245, 241, 235, 0.16);
  background-image: linear-gradient(
    90deg,
    rgba(245, 241, 235, 0.12) 0%,
    rgba(245, 241, 235, 0.28) 50%,
    rgba(245, 241, 235, 0.12) 100%
  );
  background-size: 200% 100%;
}
.dr-skel-head .dr-skel-line + .dr-skel-line {
  margin-top: 8px;
}
.dr-skel-line.w-label { width: 90px; height: 9px; }
.dr-skel-line.w-title { width: 68%; height: 15px; }
.dr-skel-line.w-when { width: 150px; height: 9px; }
.dr-skel-line.w-name { width: 60%; }
.dr-skel-line.w-party { width: 42%; height: 9px; }
.dr-skel-line.w-70 { width: 70%; }
.dr-skel-line.w-40 { width: 40%; }

@keyframes dr-skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dr-skel-line {
    animation: none;
  }
}

@media (max-width: 960px) {
  .dr-skel-node {
    grid-template-columns: 1fr;
  }
}

/* ── Debate status: what this debate's bill is, and what became of it ────────
   Sits under the heading's chamber/date line. A debate that names a bill always
   gets the label, the standing flags and an outcome sentence; the action groups
   appear only when they have lines under them, and a debate that names no bill
   renders nothing at all.

   Headers keep the cluster head's own scale — 11px/700/uppercase, matching
   .label. Everything else is one body type, set above. */
.daily-record .h1-cluster-head .debate-status {
  margin-top: 10px;
}
.daily-record .h1-cluster-head .debate-act-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px 3px;
  border: 1px solid var(--wsj-gold);
  border-radius: 2px;
  background: rgba(196, 163, 90, 0.12);
  color: var(--wsj-nav);
  font: 600 10.5px/1.3 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.daily-record .h1-cluster-head .da-bill + .da-bill {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}
/* The bill's standing, drawn as the status pills /legislation already uses for
   the same two facts. This ground is light, like the bill listing's, so the
   palette carries over unchanged. */
.daily-record .h1-cluster-head .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(107, 91, 79, 0.08);
  padding: 2px 7px;
  border-radius: 2px;
}
.daily-record .h1-cluster-head .tag.status {
  color: var(--wsj-nav);
  background: rgba(53, 42, 33, 0.1);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}
.daily-record .h1-cluster-head .tag.status.law {
  color: var(--wsj-green);
  background: rgba(46, 125, 50, 0.12);
}
.daily-record .h1-cluster-head .tag.status.passed {
  color: var(--wsj-blue);
  background: rgba(2, 116, 182, 0.12);
}
.daily-record .h1-cluster-head .tag.status.committee {
  color: var(--wsj-brown);
  background: rgba(107, 91, 79, 0.14);
}
/* An amendment can be rejected, tabled, withdrawn or ruled out of order — none
   of which a bill's four status colours have a word for. */
.daily-record .h1-cluster-head .tag.status.failed {
  color: var(--wsj-red);
  background: rgba(183, 28, 28, 0.1);
}
/* A row of flags naming its own subject, so the block does not depend on the
   heading above it having printed the bill number — which it often has not. */
.daily-record .h1-cluster-head .da-lede {
  margin: 0 0 6px;
}
.daily-record .h1-cluster-head .da-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.daily-record .h1-cluster-head .da-outcome {
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.daily-record .h1-cluster-head .da-outcome strong {
  font-weight: 700;
  color: #2b2118;
}
/* One body type for the whole block: the label, the outcome sentence and every
   list item read at the same size, weight and colour. Only the group headings
   stay distinct, because they are headings. */
.daily-record .h1-cluster-head .da-lede,
.daily-record .h1-cluster-head .da-outcome,
.daily-record .h1-cluster-head .da-group li {
  font: 400 13.5px/1.55 var(--font-sans);
  color: #222;
}
.daily-record .h1-cluster-head .da-group {
  margin-top: 9px;
}
.daily-record .h1-cluster-head .da-hd {
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.daily-record .h1-cluster-head .da-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 78ch;
}
.daily-record .h1-cluster-head .da-group li {
  position: relative;
  padding-left: 13px;
  margin-top: 4px;
}
.daily-record .h1-cluster-head .da-group li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wsj-gold);
}
.daily-record .h1-cluster-head .da-extra[hidden] {
  display: none;
}
/* Same treatment as "Show presentation options" in this head, rather than a
   boxed button. */
.daily-record .h1-cluster-head .da-more {
  appearance: none;
  display: inline-block;
  margin-top: 9px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1.5px solid var(--wsj-gold);
  background: none;
  color: var(--wsj-nav);
  font: 600 13px/1.2 var(--font-sans);
  cursor: pointer;
}
.daily-record .h1-cluster-head .da-more:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 960px) {
  .daily-record .h1-cluster-head .da-lede,
  .daily-record .h1-cluster-head .da-outcome,
  .daily-record .h1-cluster-head .da-group li { font-size: 13px; }
}