:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0f19; color: #e8eefc; }
a { color: #9cc2ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
h1 { margin: 10px 0 4px; }
h2 { margin: 18px 0 10px; color: #cfe0ff; }
.sub { margin: 0 0 10px; color: #b7c3dd; }
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
input, select, button { padding: 10px 12px; border-radius: 10px; border: 1px solid #2a3550; background: #121a2c; color: #e8eefc; }
button { cursor: pointer; }
button:hover { background: #1a2540; }
.list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { background: #10182a; border: 1px solid #23304a; border-radius: 16px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.muted { color: #b7c3dd; }
.top { display:flex; justify-content: space-between; align-items:center; gap:10px; }
.billno { font-weight: 700; font-size: 1.1rem; }
.badge { padding: 4px 10px; border: 1px solid #2a3550; border-radius: 999px; color: #cfe0ff; font-size: .85rem; }
.foot { opacity: .8; }

/* Navigation */
nav.main-nav { display: flex; gap: 20px; margin: 12px 0; flex-wrap: wrap; }
nav.main-nav a { padding: 8px 16px; border-radius: 8px; background: #121a2c; border: 1px solid #2a3550; }
nav.main-nav a:hover { background: #1a2540; text-decoration: none; }
nav.main-nav a.active { background: #2a3550; border-color: #4a6090; }

/* Grade badges */
.grade { display: inline-block; padding: 5px 10px; border-radius: 8px; font-weight: 700; font-size: 1rem; }
.grade-a { background: #1a4d2e; color: #4ade80; }
.grade-b { background: #2a4d1a; color: #a3e635; }
.grade-c { background: #4d4d1a; color: #facc15; }
.grade-d { background: #4d2a1a; color: #fb923c; }
.grade-f { background: #4d1a1a; color: #f87171; }
.grade-na { background: #2a2a2a; color: #888; }

/* Party colors */
.party-r { color: #f87171; }
.party-d { color: #60a5fa; }
.party-i { color: #a78bfa; }

/* Tables */
.table-container { overflow-x: auto; margin: 14px 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #23304a; }
th { background: #121a2c; color: #b7c3dd; font-weight: 600; position: sticky; top: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #1a2540; }
th.sortable::after { content: ""; margin-left: 6px; opacity: 0.3; }
th.sort-asc::after { content: "▲"; opacity: 1; }
th.sort-desc::after { content: "▼"; opacity: 1; }

/* Bill rows */
.bill-row { cursor: pointer; transition: background 0.15s; }
.bill-row:hover { background: #151d30; }
.bill-row.expanded { background: #151d30; }
.bill-link { font-weight: 700; }
.title-cell { max-width: 280px; }
.expand-col { width: 40px; }
.expand-cell { text-align: center; }
.expand-icon { color: #6b7a99; font-size: 0.8rem; transition: transform 0.2s; }

/* Detail row (expandable) */
.detail-row td { padding: 0; background: #0d1321; }
.detail-content { padding: 16px 20px; border-left: 3px solid #4a6090; }
.detail-section { margin-bottom: 12px; }
.detail-section strong { color: #9cc2ff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-section p { margin: 6px 0 0; line-height: 1.5; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-tags { margin-top: 12px; }
.detail-links { margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
.detail-links a { color: #9cc2ff; }

/* Tags */
.tag { display: inline-block; padding: 3px 10px; margin: 2px 4px 2px 0; background: #1a2540; border-radius: 12px; font-size: 0.85rem; color: #b7c3dd; }

/* Status badges */
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.status-enacted { background: #1a4d2e; color: #4ade80; }
.status-passed { background: #1a4d2e; color: #4ade80; }
.status-governor { background: #2e4d1a; color: #a3e635; }
.status-enrolled { background: #2e4d1a; color: #a3e635; }
.status-calendar { background: #3d4d1a; color: #facc15; }
.status-reported { background: #3d4d1a; color: #facc15; }
.status-committee { background: #2a3550; color: #9cc2ff; }
.status-introduced { background: #2a2a3d; color: #a78bfa; }
.status-dead { background: #4d1a1a; color: #f87171; }
.status-carried { background: #3d2a1a; color: #fb923c; }
.status-vetoed { background: #4d1a1a; color: #f87171; }

@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; }
  .title-cell { max-width: 150px; }
  th, td { padding: 10px 8px; font-size: 0.9rem; }
  .leg-card { flex-wrap: wrap; }
  .grade-group { width: 100%; justify-content: flex-start; margin-top: 8px; }
  .controls select, .controls input { width: 100%; }
}

@media (max-width: 480px) {
  .controls { flex-direction: column; }
  .chamber-filter { width: 100%; justify-content: stretch; }
  .chamber-btn { flex: 1; text-align: center; }
  .grade-group { flex-wrap: wrap; gap: 12px; }
  .grade { font-size: 0.85rem; padding: 4px 8px; }
  .leg-photo { width: 48px; height: 48px; }
  .grade-label { font-size: 0.65rem; }
  th, td { padding: 8px 6px; font-size: 0.8rem; }
  .session-tabs { gap: 4px; }
  .session-btn { padding: 8px 12px; font-size: 0.85rem; }
}

/* Legislator cards */
.leg-card { display: flex; gap: 14px; align-items: center; }
.leg-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: #2a3550; }
.leg-info { flex: 1; }
.leg-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-meta { color: #b7c3dd; font-size: 0.9rem; }

/* Dual grade display */
.grade-group { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.grade-item { text-align: center; }
.grade-label { font-size: 0.75rem; color: #b7c3dd; margin-top: 4px; }

/* Vote indicators */
.vote-yea { color: #4ade80; }
.vote-nay { color: #f87171; }
.vote-absent { color: #888; }

/* Tabs */
.tabs { display: flex; gap: 8px; margin: 14px 0; }
.tab { padding: 10px 18px; border-radius: 8px 8px 0 0; background: #121a2c; border: 1px solid #2a3550; border-bottom: none; cursor: pointer; }
.tab.active { background: #10182a; border-color: #4a6090; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Chamber filter */
.chamber-filter { display: flex; gap: 8px; margin: 10px 0; }
.chamber-btn { padding: 8px 16px; border-radius: 8px; background: #121a2c; border: 1px solid #2a3550; cursor: pointer; color: #e8eefc; }
.chamber-btn.active { background: #2a3550; border-color: #4a6090; }

/* Session tabs */
.session-tabs { display: flex; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; }
.session-btn { padding: 10px 20px; border-radius: 8px; background: #121a2c; border: 1px solid #2a3550; cursor: pointer; color: #e8eefc; font-size: 1rem; }
.session-btn:hover { background: #1a2540; }
.session-btn.active { background: #2a3550; border-color: #4a6090; font-weight: 600; }

/* Beta banner */
.beta-banner { background: #1a2540; border-bottom: 1px solid #2a3550; padding: 10px 18px; text-align: center; font-size: 0.9rem; color: #b7c3dd; }
.beta-banner a { margin-left: 8px; }

/* Toggle label */
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 8px; background: #121a2c; border: 1px solid #2a3550; }
.toggle-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* Support banner */
.support-banner { background: #1a2540; border-top: 1px solid #2a3550; border-bottom: 1px solid #2a3550; padding: 16px 18px; text-align: center; }
.support-banner .support-inner { max-width: 980px; margin: 0 auto; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.support-banner .support-text { color: #b7c3dd; font-size: 0.95rem; }
.support-banner .support-links { display: flex; gap: 10px; flex-wrap: wrap; }
.support-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 0.15s; }
.support-btn:hover { text-decoration: none; }
.support-btn-fb { background: #1877f2; color: #fff; border: none; }
.support-btn-fb:hover { background: #1565c0; color: #fff; }
.support-btn-venmo { background: #008cff; color: #fff; border: none; }
.support-btn-venmo:hover { background: #0070cc; color: #fff; }
.support-btn-campaign { background: #2a3550; color: #9cc2ff; border: 1px solid #4a6090; }
.support-btn-campaign:hover { background: #3a4560; color: #fff; }

/* Loading skeletons */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton { background: linear-gradient(90deg, #121a2c 25%, #1a2540 50%, #121a2c 75%); background-size: 800px 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.skeleton-row { display: flex; gap: 14px; align-items: center; padding: 14px; }
.skeleton-circle { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; }
.skeleton-line { height: 14px; border-radius: 4px; }
.skeleton-line-short { width: 40%; }
.skeleton-line-medium { width: 65%; }
.skeleton-line-long { width: 90%; }
.skeleton-grade { width: 42px; height: 42px; border-radius: 8px; }
.skeleton-table-row td { padding: 14px; }
.skeleton-table-cell { height: 14px; border-radius: 4px; }

/* Session context */
.session-context { font-size: 0.85rem; color: #b7c3dd; margin: 0 0 4px; font-style: italic; }
.session-active { color: #4ade80; }
.session-completed { color: #888; }

/* Print styles */
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .beta-banner, .support-banner, .main-nav, .controls, .chamber-filter,
  .tabs, .session-tabs, #vote-summary, footer, .expand-cell, .expand-icon,
  #reset, #go, button { display: none; }
  header { border-bottom: 2px solid #000; margin-bottom: 16px; }
  header h1 { color: #000; font-size: 1.4rem; }
  .sub { color: #333; }
  .card { border: 1px solid #ccc; box-shadow: none; background: #fff; color: #000; }
  .grade { border: 1px solid #999; background: transparent !important; color: #000 !important; font-weight: 700; }
  .grade-label { color: #333; }
  .muted { color: #666; }
  table { border-collapse: collapse; width: 100%; }
  th { background: #eee; color: #000; }
  td, th { border: 1px solid #ccc; color: #000; }
  .bill-row:hover { background: none; }
  .detail-row { display: table-row !important; }
  .detail-content { border-left: 2px solid #999; }
  .wrap { max-width: none; padding: 0 16px; }
  .list { display: block; }
  .list .card { page-break-inside: avoid; margin-bottom: 12px; }
  .leg-photo { filter: grayscale(1); }
  .vote-yea { color: #000; font-weight: 700; }
  .vote-nay { color: #000; font-weight: 700; }
  .vote-absent { color: #666; }
  .tag { border: 1px solid #999; background: #eee; color: #000; }
  .status-badge { border: 1px solid #999; background: transparent; color: #000; }
}