/* CDP Hearing Guide — Vanilla CSS, zero dependencies */

:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-secondary: #555;
  --color-primary: #1a56db;
  --color-primary-light: #e8f0fe;
  --color-border: #ddd;
  --color-warning: #b45309;
  --color-warning-bg: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-controlling: #16a34a;
  --color-persuasive: #2563eb;
  --color-unsettled: #d97706;
  --color-dicta: #6b7280;
  --max-width: 800px;
  --radius: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* Layout */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }
header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 1rem 0; }
header h1 { font-size: 1.6rem; }
header h1 a { color: var(--color-text); text-decoration: none; }
header .subtitle { color: var(--color-text-secondary); font-size: 0.9rem; }
nav { margin-top: 0.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
nav a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; }
nav a:hover { text-decoration: underline; }
main { padding: 1.5rem 0; }
footer { border-top: 1px solid var(--color-border); padding: 1rem 0; color: var(--color-text-secondary); font-size: 0.8rem; text-align: center; }

/* Disclaimer banner */
.disclaimer {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-warning);
}

/* Staleness banner */
.staleness-warning {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-danger);
  display: none;
}

/* Search */
.search-box {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.search-box input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}
.search-box button {
  padding: 0.6rem 1.2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
}
.search-box button:hover { opacity: 0.9; }

/* Filters */
.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.filters select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  background: var(--color-surface);
}

/* Proposition cards */
.prop-list { display: flex; flex-direction: column; gap: 0.75rem; }
.prop-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.prop-card:hover { border-color: var(--color-primary); }
.prop-card .prop-id { font-family: monospace; font-size: 0.8rem; color: var(--color-text-secondary); }
.prop-card .prop-topic { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.03em; }
.prop-card .prop-text { margin: 0.4rem 0; font-size: 0.95rem; }
.prop-card .prop-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8rem; }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-controlling { background: var(--color-success-bg); color: var(--color-controlling); }
.badge-persuasive { background: var(--color-primary-light); color: var(--color-persuasive); }
.badge-unsettled { background: var(--color-warning-bg); color: var(--color-unsettled); }
.badge-dicta_only { background: #f3f4f6; color: var(--color-dicta); }
.badge-authority { background: #f3f4f6; color: var(--color-text-secondary); font-weight: 500; }

/* Tier legend */
.tier-legend { margin-top: 0.25rem; margin-bottom: 0.75rem; }
.tier-legend summary { cursor: pointer; color: var(--color-primary); font-size: 0.85rem; }
.tier-legend summary:hover { text-decoration: underline; }
.tier-legend-content {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.tier-legend-intro { margin-bottom: 0.75rem; line-height: 1.5; color: var(--color-text-secondary); }
.tier-legend-content h4 { font-size: 0.85rem; margin: 0.75rem 0 0.35rem; }
.tier-legend-content h4:first-of-type { margin-top: 0; }
.tier-legend-content ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.tier-legend-content li { line-height: 1.5; }
.tier-legend-content .badge { margin-right: 0.4rem; vertical-align: middle; }

/* Score bar */
.score-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.score-bar .bar {
  width: 60px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.score-bar .bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Proposition detail page */
.prop-detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; }
.prop-detail h2 { font-size: 1.1rem; margin-bottom: 0.5rem; font-family: monospace; }
.detail-meta { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 1rem; }
.prop-detail .full-text { margin: 1rem 0; line-height: 1.7; }
.prop-detail section { margin-top: 1.25rem; }
.prop-detail section h3 { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.25rem; }

/* Citation list */
.citation-list { list-style: none; }
.citation-list li { padding: 0.35rem 0; font-size: 0.9rem; border-bottom: 1px solid #f3f4f6; }
.citation-list li:last-child { border-bottom: none; }
.citation-primary { font-weight: 600; }

/* Edge list */
.edge-list { list-style: none; }
.edge-list li { padding: 0.4rem 0; font-size: 0.9rem; border-bottom: 1px solid #f3f4f6; }
.edge-list li:last-child { border-bottom: none; }
.edge-list .edge-type { font-weight: 600; text-transform: uppercase; font-size: 0.75rem; margin-right: 0.5rem; }
.edge-list a { color: var(--color-primary); text-decoration: none; }
.edge-list a:hover { text-decoration: underline; }

/* Anchor pills */
.anchor-pill {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  margin: 0.15rem;
  text-decoration: none;
}
.anchor-pill:hover { opacity: 0.8; }

/* Stats */
.stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat { text-align: center; }
.stat .stat-num { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.stat .stat-label { font-size: 0.8rem; color: var(--color-text-secondary); }

/* Result count */
.result-count { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; }

/* Hero section */
.hero { margin-bottom: 2rem; }
.hero h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.hero p { color: var(--color-text-secondary); font-size: 1rem; max-width: 600px; }
.hero .powered-by { font-size: 0.85rem; margin-top: 0.5rem; }

/* Quick links */
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.quick-link {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s;
}
.quick-link:hover { border-color: var(--color-primary); }
.quick-link h3 { font-size: 0.95rem; color: var(--color-primary); margin-bottom: 0.25rem; }
.quick-link p { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Responsive */
@media (max-width: 600px) {
  .search-box { flex-direction: column; }
  .filters { flex-direction: column; }
  .stats { justify-content: center; }
  nav { flex-direction: column; gap: 0.5rem; }
}

/* Loading */
.loading { text-align: center; padding: 2rem; color: var(--color-text-secondary); }

/* Hidden utility */
.hidden { display: none !important; }