/*







  Parent Data Force Website Styles







  Real data insertion points:







  - Update document links in #repository rows







  - Update case cards in #cases and modal content generated in script.js







  - Replace placeholder social links and contact emails







*/















:root {







  --bg-primary: #0b0b0b;







  --bg-secondary: #161616;







  --bg-elevated: #1d1d1d;







  --bg-glass: rgba(255, 255, 255, 0.04);







  --accent: #ff5a1f;







  --accent-hot: #ff3b1f;







  --accent-ember: #ff5a1f;







  --accent-glow: #ffa366;







  --bg-card: rgba(255, 255, 255, 0.03);







  --text-primary: #f5f5f5;







  --text-secondary: #a0a0a0;







  --text-muted: #767676;







  --border: #2a2a2a;







  --border-soft: #232323;







  --success: #22c55e;







  --warning: #f59e0b;







  --danger: #ef4444;







  --radius-sm: 10px;







  --radius-md: 14px;







  --radius-lg: 20px;







  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.25);







  --shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.45);







  --glow: 0 0 36px rgba(255, 90, 31, 0.2);







  --container: 1200px;







  --nav-height: 72px;







  --transition: 260ms ease;







}















* {







  box-sizing: border-box;







  margin: 0;







  padding: 0;







}















html {







  scroll-behavior: smooth;







  scroll-padding-top: calc(var(--nav-height) + 16px);







}















body {







  background: radial-gradient(circle at top right, rgba(255, 59, 31, 0.08), transparent 35%), var(--bg-primary);







  color: var(--text-primary);







  font-family: Inter, "Segoe UI", Tahoma, sans-serif;







  line-height: 1.6;







  overflow-x: hidden;







}















a {







  color: inherit;







  text-decoration: none;







}















img {







  max-width: 100%;







  display: block;







}















button,







input,







select,







textarea {







  font: inherit;







  color: inherit;







}















.container {







  width: min(var(--container), 100% - 2rem);







  margin-inline: auto;







}















.section {







  padding: 6rem 0;







  position: relative;







}















.section-dark {







  background: linear-gradient(160deg, rgba(22, 22, 22, 0.92), rgba(11, 11, 11, 1));







  border-top: 1px solid var(--border-soft);







  border-bottom: 1px solid var(--border-soft);







}















.section-accent {







  background: linear-gradient(180deg, rgba(255, 59, 31, 0.08), rgba(255, 90, 31, 0.03));







}















.section-header {







  max-width: 820px;







  margin-bottom: 2.5rem;







}















.section-tag {







  display: inline-flex;







  align-items: center;







  gap: 0.4rem;







  font-size: 0.78rem;







  text-transform: uppercase;







  letter-spacing: 0.14em;







  color: var(--accent-glow);







  font-weight: 600;







  margin-bottom: 0.8rem;







}















.section-title {







  font-size: clamp(1.7rem, 4vw, 2.65rem);







  line-height: 1.15;







  margin-bottom: 0.85rem;







}















.section-subtitle {







  color: var(--text-secondary);







  font-size: 1.02rem;







  max-width: 70ch;







}















.nav {







  position: sticky;







  top: 0;







  z-index: 100;







  height: var(--nav-height);







  border-bottom: 1px solid rgba(255, 255, 255, 0.08);







  backdrop-filter: blur(13px);







  background: rgba(11, 11, 11, 0.86);







}















.nav.nav-scrolled {







  box-shadow: var(--shadow-soft);







}















.nav-container {







  height: 100%;







  width: min(var(--container), 100% - 2rem);







  margin-inline: auto;







  display: flex;







  align-items: center;







  justify-content: space-between;







}















.nav-logo {







  display: flex;







  align-items: center;







  gap: 0.7rem;







  min-width: 0;







}















.nav-logo-img {







  width: 36px;







  height: 36px;







  border-radius: 50%;







  border: 1px solid var(--border);







  box-shadow: var(--glow);







}















.nav-logo-text {







  font-size: 0.92rem;







  letter-spacing: 0.08em;







  font-weight: 700;







  white-space: nowrap;







}















.nav-menu {







  list-style: none;







  display: flex;







  align-items: center;







  gap: 1.05rem;







}















.nav-link {







  color: var(--text-primary);







  font-size: 0.92rem;







  transition: color var(--transition);







}















.nav-link:hover,







.nav-link.active {







  color: var(--text-primary);







  font-weight: 500;
}















.nav-link-portal {







  border: 1px solid rgba(255, 90, 31, 0.5);







  padding: 0.42rem 0.72rem;







  border-radius: 999px;







}















.nav-link-tip {







  border: 1px solid rgba(255, 163, 102, 0.5);







  padding: 0.42rem 0.72rem;







  border-radius: 999px;







  color: #ffe2cc;







  background: rgba(255, 90, 31, 0.14);







}















.nav-toggle {







  display: none;







  width: 44px;







  height: 44px;







  border: 1px solid var(--border);







  border-radius: var(--radius-sm);







  background: transparent;







  align-items: center;







  justify-content: center;







}















.hamburger,







.hamburger::before,







.hamburger::after {







  display: block;







  width: 19px;







  height: 2px;







  background: var(--text-primary);







  position: relative;







  transition: transform var(--transition);







}















.hamburger::before,







.hamburger::after {







  content: "";







  position: absolute;







  left: 0;







}















.hamburger::before { top: -6px; }







.hamburger::after { top: 6px; }















.hero {







  min-height: calc(100vh - var(--nav-height));







  display: grid;







  align-items: center;







  position: relative;







  overflow: hidden;







  padding: 5rem 1rem 3rem;







}















.hero-bg {







  position: absolute;







  inset: 0;







  background:







    radial-gradient(circle at 18% 30%, rgba(255, 59, 31, 0.14), transparent 35%),







    radial-gradient(circle at 75% 12%, rgba(255, 163, 102, 0.14), transparent 30%),







    linear-gradient(120deg, #0b0b0b 0%, #121212 42%, #0b0b0b 100%);







  z-index: -2;







}















.hero-bg::after {







  content: "";







  position: absolute;







  inset: 0;







  opacity: 0.25;







  background-image: linear-gradient(transparent 98%, rgba(255, 255, 255, 0.05) 100%);







  background-size: 100% 22px;







}















.hero-overlay {







  position: absolute;







  inset: 0;







  z-index: -1;







  background: linear-gradient(180deg, rgba(11, 11, 11, 0.25) 0%, rgba(11, 11, 11, 0.95) 90%);







}















.hero-content {







  width: min(1020px, 100%);







  margin-inline: auto;







}















.hero-tagline {







  display: inline-flex;







  padding: 0.35rem 0.7rem;







  border: 1px solid rgba(255, 90, 31, 0.35);







  border-radius: 999px;







  background: rgba(255, 90, 31, 0.08);







  color: var(--accent-glow);







  letter-spacing: 0.1em;







  text-transform: uppercase;







  font-size: 0.72rem;







  font-weight: 600;







  margin-bottom: 1.1rem;







}















.hero-title {







  display: grid;







  gap: 0.3rem;







  font-size: clamp(2rem, 7vw, 4.6rem);







  line-height: 0.98;







  margin-bottom: 1rem;







}















.hero-title-accent {







  background: linear-gradient(90deg, var(--accent-hot), var(--accent-glow));







  -webkit-background-clip: text;







  background-clip: text;







  color: transparent;







}















.hero-subtitle {







  max-width: 62ch;







  color: #d0d0d0;







  margin-bottom: 1.5rem;







  font-size: 1.02rem;







}















.hero-cta {







  display: flex;







  flex-wrap: wrap;







  gap: 0.75rem;







}















.btn {







  border: 1px solid transparent;







  border-radius: 12px;







  padding: 0.74rem 1rem;







  display: inline-flex;







  align-items: center;







  gap: 0.52rem;







  font-weight: 600;







  font-size: 0.95rem;







  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);







}















.btn:hover {







  transform: translateY(-2px);







}















.btn-icon {







  width: 16px;







  height: 16px;







}















.btn-primary {







  background: linear-gradient(120deg, var(--accent-hot), var(--accent-ember));







  box-shadow: 0 6px 20px rgba(255, 90, 31, 0.3);







}















.btn-secondary {







  background: rgba(255, 90, 31, 0.14);







  border-color: rgba(255, 90, 31, 0.4);







}















.btn-ghost {







  border-color: var(--border);







  background: rgba(255, 255, 255, 0.03);







}















.btn-tip {







  border-color: rgba(255, 163, 102, 0.55);







  background: rgba(255, 90, 31, 0.2);







}















.btn-large {







  width: 100%;







  justify-content: center;







  margin-top: 0.9rem;







}















.hero-stats {







  margin-top: 1.7rem;







  display: grid;







  grid-template-columns: repeat(4, minmax(0, 1fr));







  gap: 0.8rem;







}















.stat {







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  background: var(--bg-glass);







  padding: 0.85rem 0.9rem;







}















.stat-value {







  display: block;







  font-size: 1.4rem;







  font-weight: 700;







  color: var(--accent-glow);







}















.stat-label {







  color: var(--text-secondary);







  font-size: 0.8rem;







}















.hero-scroll-indicator {







  position: absolute;







  bottom: 1.2rem;







  left: 50%;







  transform: translateX(-50%);







  color: var(--text-muted);







  display: flex;







  flex-direction: column;







  align-items: center;







  gap: 0.35rem;







  font-size: 0.76rem;







  letter-spacing: 0.05em;







}















.section-tip {







  padding-top: 4rem;







  padding-bottom: 4rem;







  background: linear-gradient(180deg, rgba(255, 90, 31, 0.14), rgba(255, 90, 31, 0.04));







  border-top: 1px solid rgba(255, 90, 31, 0.25);







  border-bottom: 1px solid rgba(255, 90, 31, 0.25);







}















.tip-banner {







  display: grid;







  grid-template-columns: 1.1fr 0.9fr;







  gap: 1rem;







  border: 1px solid rgba(255, 163, 102, 0.4);







  border-radius: var(--radius-lg);







  padding: 1rem;







  background: linear-gradient(140deg, rgba(255, 90, 31, 0.16), rgba(255, 255, 255, 0.02));







}















.tip-form {







  border: 1px solid var(--border);







  border-radius: 12px;







  padding: 0.75rem;







  background: rgba(0, 0, 0, 0.25);







}















.tip-grid {







  display: grid;







  grid-template-columns: repeat(2, minmax(0, 1fr));







  gap: 0.7rem;







}















.btn-tip-submit {







  grid-column: 1 / -1;







}















.hero-scroll-indicator svg {







  width: 14px;







  height: 14px;







  animation: bounce 2.2s infinite;







}















@keyframes bounce {







  0%, 100% { transform: translateY(0); }







  50% { transform: translateY(5px); }







}















.mission-statement {







  border: 1px solid rgba(255, 90, 31, 0.25);







  background: linear-gradient(120deg, rgba(255, 90, 31, 0.08), rgba(0, 0, 0, 0));







  border-radius: var(--radius-lg);







  padding: 1.2rem;







  display: flex;







  gap: 0.8rem;







  margin-bottom: 1.5rem;







}















.mission-icon {







  width: 42px;







  min-width: 42px;







  height: 42px;







  border: 1px solid rgba(255, 90, 31, 0.4);







  border-radius: 12px;







  display: grid;







  place-items: center;







  color: var(--accent-ember);







}















.mission-text {







  color: #e8e8e8;







  font-size: 1.04rem;







}















.values-grid,







.services-grid,







.statewide-grid,







.resources-grid,







.portal-grid,







.appearances-grid {







  display: grid;







  grid-template-columns: repeat(4, minmax(0, 1fr));







  gap: 1rem;







}















.value-card,







.service-card,







.statewide-card,







.resource-card,







.portal-card,







.appearance-card,







.case-card,







.dese-case-item {







  border: 1px solid var(--border);







  background: linear-gradient(160deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));







  border-radius: var(--radius-md);







  padding: 1rem;







  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);







}















.value-card:hover,







.service-card:hover,







.statewide-card:hover,







.resource-card:hover,







.portal-card:hover,







.appearance-card:hover,







.case-card:hover,







.dese-case-item:hover {







  border-color: rgba(255, 90, 31, 0.45);







  transform: translateY(-3px);







  box-shadow: var(--shadow-soft);







}















.value-icon,







.statewide-icon,







.portal-icon {







  width: 38px;







  height: 38px;







  border-radius: 10px;







  border: 1px solid rgba(255, 90, 31, 0.35);







  display: grid;







  place-items: center;







  color: var(--accent-ember);







  margin-bottom: 0.7rem;







}















.value-title,







.service-title,







.statewide-title,







.portal-title,







.appearance-title,







.resource-title,







.case-card-title {







  font-size: 1.03rem;







  margin-bottom: 0.44rem;







}















.value-description,







.service-description,







.statewide-description,







.portal-description,







.appearance-summary,







.resource-excerpt,







.case-card-summary,







.dese-case-summary {







  font-size: 0.92rem;







  color: var(--text-secondary);







}















.service-number {







  font-family: "JetBrains Mono", Consolas, monospace;







  color: var(--accent-glow);







  margin-bottom: 0.5rem;







}















.case-filters,







.case-type-filters,







.resources-categories,







.repo-filters {







  display: flex;







  flex-wrap: wrap;







  gap: 0.5rem;







  margin-bottom: 0.8rem;







}















.filter-btn,







.type-filter-btn,







.category-btn {







  border: 1px solid var(--border);







  background: rgba(255, 255, 255, 0.02);







  color: var(--text-secondary);







  border-radius: 999px;







  padding: 0.45rem 0.8rem;







  cursor: pointer;







  transition: all var(--transition);







}















.filter-btn.active,







.type-filter-btn.active,







.category-btn.active,







.filter-btn:hover,







.type-filter-btn:hover,







.category-btn:hover {







  background: rgba(255, 90, 31, 0.18);







  color: var(--text-primary);







  border-color: rgba(255, 90, 31, 0.48);







}















.cases-grid {







  display: grid;







  grid-template-columns: repeat(3, minmax(0, 1fr));







  gap: 1rem;







}















.case-card-header {







  display: flex;







  justify-content: space-between;







  align-items: center;







  gap: 0.6rem;







  margin-bottom: 0.55rem;







}















.case-district {







  font-size: 0.75rem;







  color: var(--accent-glow);







  letter-spacing: 0.08em;







  text-transform: uppercase;







}















.case-card-id {







  font-family: "JetBrains Mono", Consolas, monospace;







  color: var(--text-muted);







  font-size: 0.78rem;







  margin-bottom: 0.4rem;







}















.status-badge {







  display: inline-flex;







  border-radius: 999px;







  font-size: 0.72rem;







  padding: 0.25rem 0.55rem;







  font-weight: 600;







}















.status-open { background: rgba(34, 197, 94, 0.15); color: #7bed9f; }







.status-closed { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }







.status-pending { background: rgba(245, 158, 11, 0.15); color: #facc15; }







.status-resolved { background: rgba(99, 102, 241, 0.14); color: #b3bafc; }







.status-overdue { color: #ff9e9e; }















.case-card-meta {







  display: grid;







  grid-template-columns: repeat(2, minmax(0, 1fr));







  gap: 0.5rem;







  margin-top: 0.85rem;







}















.meta-item {







  background: rgba(255, 255, 255, 0.02);







  border: 1px solid var(--border-soft);







  border-radius: 10px;







  padding: 0.45rem;







}















.meta-label { display: block; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }







.meta-value { font-size: 0.84rem; color: var(--text-primary); }















.case-card-btn {







  margin-top: 0.9rem;







  width: 100%;







  border: 1px solid var(--border);







  border-radius: 10px;







  padding: 0.55rem;







  background: rgba(255, 255, 255, 0.02);







  display: flex;







  justify-content: center;







  gap: 0.4rem;







  color: var(--text-primary);







  cursor: pointer;







  transition: all var(--transition);







}















.case-card-btn:hover {







  border-color: rgba(255, 90, 31, 0.5);







  background: rgba(255, 90, 31, 0.1);







}















.case-card-btn svg {







  width: 14px;







}















/* ── District Cards ── */







.districts-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));







  gap: 1rem;







}















.district-card {







  background: var(--bg-elevated);







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  padding: 1.5rem;







  display: flex;







  flex-direction: column;







  gap: 0.6rem;







  transition: border-color var(--transition), box-shadow var(--transition);







}















.district-card:hover {







  border-color: var(--accent-glow);







  box-shadow: 0 0 20px rgba(255, 90, 31, 0.08);







}















.district-card-header {







  display: flex;







  justify-content: space-between;







  align-items: center;







  margin-bottom: 0.2rem;







}















.district-card-name {







  font-size: 1.1rem;







  font-weight: 700;







}















.district-card-location {







  color: var(--text-secondary);







  font-size: 0.85rem;







}















.district-card-stats {







  display: flex;







  gap: 0.75rem;







  font-size: 0.82rem;







  color: var(--text-muted);







  flex-wrap: wrap;







}















.district-card-link {







  color: var(--accent-glow);







  font-size: 0.85rem;







  font-weight: 600;







  margin-top: auto;







}















.district-detail-header {







  margin-bottom: 2rem;







}















.district-section {







  margin-bottom: 2.5rem;







}















.data-tabs {







  display: flex;







  border-bottom: 2px solid var(--border);







  margin-bottom: 1.5rem;







}















.data-tab {







  padding: 0.75rem 1.5rem;







  cursor: pointer;







  border-bottom: 2px solid transparent;







  margin-bottom: -2px;







  font-size: 0.9rem;







  font-weight: 500;







  color: var(--text-secondary);







  transition: color var(--transition), border-color var(--transition);







  background: none;







}















.data-tab:hover {







  color: var(--text-primary);







}















.data-tab.active {







  color: var(--accent);







  border-bottom-color: var(--accent);







}















.repo-controls {







  display: grid;







  gap: 0.7rem;







  margin-bottom: 1rem;







}















.repo-search {







  position: relative;







}















.repo-search-icon {







  width: 16px;







  height: 16px;







  position: absolute;







  left: 0.7rem;







  top: 50%;







  transform: translateY(-50%);







  color: var(--text-muted);







}















.repo-search-input,







.repo-select,







.form-input,







.form-select,







.form-textarea {







  width: 100%;







  border: 1px solid var(--border);







  background: rgba(255, 255, 255, 0.02);







  border-radius: 10px;







  padding: 0.63rem 0.7rem;







  color: var(--text-primary);







}















.repo-select,







.form-select,







select {







  background-color: var(--bg-elevated);







  color: var(--text-primary);







  border-color: var(--border);







  appearance: auto;







}















.repo-select option,







.form-select option,







select option {







  background-color: var(--bg-elevated);







  color: var(--text-primary);







}















.repo-search-input {







  padding-left: 2.2rem;







}















.repo-search-input:focus,







.repo-select:focus,







.form-input:focus,







.form-select:focus,







.form-textarea:focus {







  outline: none;







  border-color: rgba(255, 90, 31, 0.55);







  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.15);







}















.repo-table-wrapper {







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  overflow: auto;







}















.repo-table {







  width: 100%;







  border-collapse: collapse;







  min-width: 940px;







}















.repo-table th,







.repo-table td {







  padding: 0.7rem;







  border-bottom: 1px solid var(--border-soft);







  text-align: left;







  font-size: 0.88rem;







}















.repo-table thead {







  background: rgba(255, 255, 255, 0.02);







}















.sortable th {







  cursor: pointer;







  user-select: none;







}















.sortable th:hover {







  color: var(--text-primary);







}















.sortable th.sort-asc::after {







  content: ' \25B2';







  color: var(--accent-glow);







}















.sortable th.sort-desc::after {







  content: ' \25BC';







  color: var(--accent-glow);







}















.repo-date,







.repo-id {







  font-family: "JetBrains Mono", Consolas, monospace;







  color: #d7d7d7;







}















.calendar-month-header {







  margin-bottom: 0.7rem;







}















.calendar-weekdays {







  display: grid;







  grid-template-columns: repeat(7, minmax(0, 1fr));







  gap: 0.4rem;







  margin-bottom: 0.4rem;







}















.calendar-weekdays span {







  text-align: center;







  font-size: 0.78rem;







  color: var(--text-secondary);







  letter-spacing: 0.05em;







  text-transform: uppercase;







}















.calendar-grid {







  display: grid;







  grid-template-columns: repeat(7, minmax(0, 1fr));







  gap: 0.4rem;







}















.calendar-day {







  min-height: 86px;







  border: 1px solid var(--border);







  border-radius: 10px;







  background: rgba(255, 255, 255, 0.02);







  color: var(--text-primary);







  text-align: left;







  padding: 0.42rem;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  gap: 0.35rem;







  cursor: pointer;







}















.calendar-day-empty {







  border-style: dashed;







  opacity: 0.35;







  pointer-events: none;







}















.calendar-day-has-events {







  border-color: rgba(255, 163, 102, 0.45);







}















.calendar-day-active {







  border-color: rgba(255, 90, 31, 0.75);







  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.2);







}















.calendar-day-number {







  font-weight: 700;







  font-size: 0.9rem;







}















.calendar-day-markers {







  display: flex;







  flex-wrap: wrap;







  gap: 0.3rem;







}















.calendar-chip {







  display: inline-flex;







  border-radius: 999px;







  padding: 0.12rem 0.4rem;







  font-size: 0.68rem;







  border: 1px solid transparent;







}















.calendar-chip-meeting {







  background: rgba(59, 130, 246, 0.18);







  border-color: rgba(59, 130, 246, 0.4);







  color: #b9dcff;







}















.calendar-chip-deadline {







  background: rgba(245, 158, 11, 0.2);







  border-color: rgba(245, 158, 11, 0.45);







  color: #facc15;







}















.doc-link {







  display: inline-flex;







  align-items: center;







  gap: 0.35rem;







  color: var(--accent-glow);







}















.doc-link svg {







  width: 14px;







}















.type-badge {







  font-size: 0.72rem;







  border-radius: 999px;







  padding: 0.2rem 0.5rem;







  font-weight: 600;







}















.type-appeal { background: rgba(255, 90, 31, 0.18); color: #ffb88f; }







.type-determination { background: rgba(59, 130, 246, 0.15); color: #b9dcff; }







.type-prr { background: rgba(139, 92, 246, 0.18); color: #d8c4ff; }















.repo-lifecycle {







  margin-top: 1.1rem;







}















.repo-lifecycle-title,







.dese-cases-title {







  font-size: 1.15rem;







  margin-bottom: 0.7rem;







}















.lifecycle-steps {







  display: grid;







  grid-template-columns: repeat(5, minmax(0, 1fr));







  gap: 0.8rem;







}















.lifecycle-step {







  border: 1px solid var(--border);







  border-radius: 12px;







  padding: 0.8rem;







  background: rgba(255, 255, 255, 0.02);







}















.lifecycle-number {







  width: 27px;







  height: 27px;







  border-radius: 50%;







  display: grid;







  place-items: center;







  background: rgba(255, 90, 31, 0.2);







  color: var(--accent-glow);







  margin-bottom: 0.45rem;







  font-weight: 700;







}















.lifecycle-content h4 {







  font-size: 0.9rem;







  margin-bottom: 0.3rem;







}















.lifecycle-content p {







  font-size: 0.82rem;







  color: var(--text-secondary);







}















.dese-cases {







  margin-top: 1.2rem;







}















.dese-case-list {







  display: grid;







  gap: 0.7rem;







}















.dese-case-header,







.dese-case-links,







.appearance-meta,







.resource-meta,







.footer-bottom,







.footer-legal,







.footer-contact-info,







.footer-social,







.contact-method,







.contact-method-content,







.hero-cta,







.radio-group {







  display: flex;







  align-items: center;







}















.dese-case-header {







  justify-content: space-between;







  margin-bottom: 0.4rem;







}















.dese-case-id,







.appearance-date,







.resource-category {







  font-family: "JetBrains Mono", Consolas, monospace;







  color: var(--accent-glow);







  font-size: 0.75rem;







}















.dese-case-links {







  gap: 0.5rem;







  margin-top: 0.55rem;







  flex-wrap: wrap;







}















.related-link {







  border: 1px solid var(--border);







  border-radius: 999px;







  padding: 0.2rem 0.45rem;







  color: var(--text-secondary);







  font-size: 0.72rem;







}















.statewide-meta,







.portal-status {







  margin-top: 0.65rem;







}















.statewide-tag,







.portal-status {







  display: inline-flex;







  border-radius: 999px;







  border: 1px solid var(--border);







  padding: 0.24rem 0.52rem;







  font-size: 0.72rem;







  color: var(--text-secondary);







}















.resources-grid {







  grid-template-columns: repeat(3, minmax(0, 1fr));







}















.resource-category { margin-bottom: 0.5rem; }















.resource-meta {







  justify-content: space-between;







  margin-top: 0.8rem;







}















.resource-read-time {







  color: var(--text-muted);







  font-size: 0.78rem;







}















.resource-link {







  border: none;







  background: transparent;







  color: var(--accent-glow);







  cursor: pointer;







}















/* ── Article Cards ── */







.articles-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));







  gap: 1.2rem;







}















.article-card {







  background: var(--bg-elevated);







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  overflow: hidden;







  display: flex;







  flex-direction: column;







  transition: border-color var(--transition), box-shadow var(--transition);







}















.article-card:hover {







  border-color: var(--accent-glow);







  box-shadow: 0 0 20px rgba(255, 90, 31, 0.08);







}















.article-card-body {







  padding: 1.5rem;







  flex: 1;







  display: flex;







  flex-direction: column;







}















.article-card-meta {







  display: flex;







  gap: 0.6rem;







  align-items: center;







  margin-bottom: 0.75rem;







}















.article-category {







  display: inline-block;







  padding: 0.15rem 0.5rem;







  border-radius: 999px;







  font-size: 0.7rem;







  font-weight: 600;







  letter-spacing: 0.03em;







  background: rgba(255, 90, 31, 0.12);







  color: var(--accent-glow);







  text-transform: uppercase;







}















.article-category-large {







  padding: 0.3rem 0.7rem;







  font-size: 0.78rem;







}















.article-date {







  color: var(--text-muted);







  font-size: 0.78rem;







}















.article-card-title {







  font-size: 1.05rem;







  font-weight: 700;







  line-height: 1.4;







  margin: 0 0 0.5rem;







}















.article-card-title a {







  color: var(--text-primary);







}















.article-card-title a:hover {







  color: var(--accent-glow);







}















.article-card-excerpt {







  color: var(--text-secondary);







  font-size: 0.85rem;







  line-height: 1.55;







  margin: 0;







  flex: 1;







}















.article-card-footer {







  display: flex;







  justify-content: space-between;







  align-items: center;







  margin-top: 1rem;







  padding-top: 0.75rem;







  border-top: 1px solid var(--border-soft);







}















.article-read-time {







  color: var(--text-muted);







  font-size: 0.75rem;







}















/* ── Single Article Page ── */







.article-full {







  max-width: 800px;







  margin: 0 auto;







}















.article-header {







  margin-bottom: 2rem;







  padding-bottom: 1.5rem;







  border-bottom: 1px solid var(--border);







}















.article-header-meta {







  display: flex;







  gap: 0.75rem;







  align-items: center;







  margin-bottom: 1rem;







}















.article-title {







  font-size: 2rem;







  font-weight: 800;







  line-height: 1.25;







  margin: 0 0 0.5rem;







}















.article-excerpt {







  font-size: 1.1rem;







  color: var(--text-secondary);







  line-height: 1.6;







  margin: 0;







}















.article-body {







  max-width: 720px;







  line-height: 1.8;







  font-size: 1.05rem;







}















.article-body h2 {







  font-size: 1.4rem;







  margin: 2rem 0 0.75rem;







}















.article-body h3 {







  font-size: 1.15rem;







  margin: 1.5rem 0 0.5rem;







}















.article-body p {







  margin: 0 0 1rem;







  color: var(--text-secondary);







}















.article-body ul,







.article-body ol {







  margin: 0 0 1rem;







  padding-left: 1.5rem;







  color: var(--text-secondary);







}















.article-body li {







  margin-bottom: 0.4rem;







}















.article-body blockquote {







  border-left: 3px solid var(--accent-ember);







  margin: 1.5rem 0;







  padding: 0.75rem 1.25rem;







  background: rgba(255, 90, 31, 0.04);







  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;







  color: var(--text-secondary);







  font-style: italic;







}















.article-body a {







  color: var(--accent-glow);







  text-decoration: underline;







}















.article-body strong {







  color: var(--text-primary);







}















.article-related {







  margin-top: 3rem;







  padding-top: 1.5rem;







  border-top: 1px solid var(--border);







}















.article-related-title {







  font-size: 1.2rem;







  font-weight: 700;







  margin: 0 0 1rem;







}















/* ── Shared Components ── */







.empty-state {







  text-align: center;







  padding: 3rem 1rem;







  color: var(--text-muted);







  border: 1px dashed var(--border);







  border-radius: var(--radius-md);







  font-size: 0.95rem;







}















.articles-controls {







  display: flex;







  flex-wrap: wrap;







  gap: 0.75rem;







  align-items: center;







  margin-bottom: 1.5rem;







}















.articles-search-form {







  display: flex;







  gap: 0.5rem;







  flex-wrap: wrap;







  flex: 1;







}















.pagination {







  display: flex;







  justify-content: center;







  gap: 0.4rem;







  margin-top: 2rem;







  flex-wrap: wrap;







}















.pagination-info {







  color: var(--text-muted);







  font-size: 0.85rem;







  text-align: center;







  margin: 0.5rem 0;







}















.submit-form,







.contact-form,







.contact-form-wrapper,







.repo-table-wrapper,







.portal-notice,







.disclaimer-box,







.form-disclaimer {







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  background: rgba(255, 255, 255, 0.02);







}















.submit-form,







.contact-form {







  padding: 1rem;







}















.quick-tip-block {







  display: flex;







  justify-content: space-between;







  gap: 0.8rem;







  align-items: center;







  border: 1px solid rgba(255, 163, 102, 0.35);







  border-radius: 12px;







  background: rgba(255, 90, 31, 0.09);







  padding: 0.8rem;







  margin-bottom: 0.8rem;







}















.quick-tip-content h3 {







  font-size: 1rem;







  margin-bottom: 0.2rem;







}















.quick-tip-content p {







  color: var(--text-secondary);







  font-size: 0.88rem;







}















.btn-tip-inline {







  border: 1px solid rgba(255, 163, 102, 0.55);







  background: rgba(255, 255, 255, 0.03);







  border-radius: 10px;







  padding: 0.55rem 0.8rem;







  white-space: nowrap;







}















.form-disclaimer {







  display: flex;







  gap: 0.65rem;







  padding: 0.8rem;







  margin-bottom: 0.9rem;







  border-color: rgba(255, 90, 31, 0.3);







  background: rgba(255, 90, 31, 0.07);







}















.form-disclaimer svg,







.portal-notice svg {







  width: 18px;







  min-width: 18px;







  color: var(--accent-glow);







}















.form-disclaimer p,







.portal-notice p {







  font-size: 0.88rem;







  color: var(--text-secondary);







}















.form-grid {







  display: grid;







  grid-template-columns: repeat(2, minmax(0, 1fr));







  gap: 0.8rem;







}















.form-group-full {







  grid-column: 1 / -1;







}















.form-label {







  display: block;







  font-size: 0.82rem;







  color: var(--text-secondary);







  margin-bottom: 0.35rem;







}















.form-textarea {







  min-height: 120px;







  resize: vertical;







}















.radio-group {







  gap: 0.8rem;







  flex-wrap: wrap;







}















.radio-label,







.checkbox-label {







  display: inline-flex;







  align-items: center;







  gap: 0.45rem;







  font-size: 0.9rem;







  color: var(--text-secondary);







}















.file-upload {







  position: relative;







}















.file-input {







  position: absolute;







  opacity: 0;







  inset: 0;







  cursor: pointer;







}















.file-label {







  border: 1px dashed rgba(255, 90, 31, 0.42);







  border-radius: 12px;







  padding: 0.85rem;







  display: flex;







  flex-direction: column;







  align-items: center;







  gap: 0.35rem;







  color: var(--text-secondary);







  text-align: center;







}















.file-label svg {







  width: 18px;







  color: var(--accent-glow);







}















.file-hint {







  font-size: 0.77rem;







  color: var(--text-muted);







}















.contact-grid {







  display: grid;







  grid-template-columns: 1.05fr 0.95fr;







  gap: 1rem;







}















.contact-title {







  font-size: clamp(1.55rem, 4vw, 2.3rem);







  margin: 0.5rem 0;







}















.contact-description {







  color: var(--text-secondary);







  margin-bottom: 1rem;







}















.contact-methods {







  display: grid;







  gap: 0.65rem;







  margin-bottom: 1rem;







}















.contact-method {







  gap: 0.6rem;







  border: 1px solid var(--border);







  border-radius: 10px;







  padding: 0.55rem;







}















.contact-method-icon {







  width: 34px;







  height: 34px;







  border: 1px solid rgba(255, 90, 31, 0.33);







  border-radius: 9px;







  display: grid;







  place-items: center;







  color: var(--accent-ember);







}















.contact-method-icon svg {







  width: 15px;







}















.contact-method-content {







  gap: 0.1rem;







  flex-direction: column;







  align-items: flex-start;







}















.contact-method-label {







  color: var(--text-muted);







  font-size: 0.76rem;







  text-transform: uppercase;







}















.contact-method-value {







  color: var(--text-primary);







  font-size: 0.92rem;







}















.contact-social-title,







.contact-note-title,







.footer-nav-title {







  margin-bottom: 0.5rem;







  font-size: 0.94rem;







}















.social-links {







  display: flex;







  gap: 0.5rem;







  margin-bottom: 1rem;







}















.social-link,







.footer-social-link {







  width: 34px;







  height: 34px;







  border: 1px solid var(--border);







  border-radius: 9px;







  display: grid;







  place-items: center;







  color: var(--text-secondary);







  transition: all var(--transition);







}















.social-link:hover,







.footer-social-link:hover {







  border-color: rgba(255, 90, 31, 0.45);







  color: var(--accent-glow);







}















.social-link svg,







.footer-social-link svg {







  width: 14px;







}















.contact-note-text {







  color: var(--text-secondary);







  font-size: 0.9rem;







}















.contact-form-wrapper {







  padding: 0.4rem;







}















.portal-grid {







  grid-template-columns: repeat(4, minmax(0, 1fr));







}















.portal-notice {







  margin-top: 0.95rem;







  padding: 0.75rem;







  display: flex;







  gap: 0.58rem;







}















.footer {







  background: #070707;







  border-top: 1px solid var(--border-soft);







  padding: 3rem 0 1.4rem;







}















.footer-grid {







  display: grid;







  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;







  gap: 1rem;







}















.footer-logo {







  display: inline-flex;







  align-items: center;







  gap: 0.55rem;







  margin-bottom: 0.5rem;







}















.footer-logo-img {







  width: 34px;







  height: 34px;







  border-radius: 50%;







}















.footer-logo-text {







  font-weight: 700;







  font-size: 0.92rem;







}















.footer-tagline {







  color: var(--accent-glow);







  font-size: 0.74rem;







  letter-spacing: 0.08em;







  margin-bottom: 0.55rem;







}















.footer-description,







.footer-nav-list a,







.footer-contact-info a,







.copyright,







.footer-legal a {







  color: var(--text-secondary);







  font-size: 0.87rem;







}















.footer-nav-list {







  list-style: none;







  display: grid;







  gap: 0.36rem;







}















.footer-contact-info {







  gap: 0.6rem;







  flex-direction: column;







  align-items: flex-start;







  margin-bottom: 0.7rem;







}















.footer-social {







  gap: 0.46rem;







}















.footer-disclaimer {







  margin-top: 1.1rem;







}















.disclaimer-box {







  padding: 0.85rem;







}















.disclaimer-box h5 {







  margin-bottom: 0.35rem;







}















.disclaimer-box p {







  color: var(--text-secondary);







  font-size: 0.84rem;







}















.footer-bottom {







  justify-content: space-between;







  margin-top: 1.1rem;







  padding-top: 0.9rem;







  border-top: 1px solid var(--border-soft);







  gap: 0.8rem;







  flex-wrap: wrap;







}















.footer-legal {







  gap: 0.8rem;







}















.modal {







  position: fixed;







  inset: 0;







  z-index: 120;







  display: none;







}















.modal.open {







  display: block;







}















.modal-overlay {







  position: absolute;







  inset: 0;







  background: rgba(0, 0, 0, 0.7);







  backdrop-filter: blur(3px);







}















.modal-content {







  position: relative;







  width: min(900px, 92vw);







  max-height: 88vh;







  overflow: auto;







  margin: 5vh auto;







  border-radius: var(--radius-lg);







  border: 1px solid var(--border);







  background: linear-gradient(180deg, #131313, #0b0b0b);







  box-shadow: var(--shadow-strong);







}















.modal-close {







  position: absolute;







  top: 0.7rem;







  right: 0.7rem;







  width: 36px;







  height: 36px;







  border: 1px solid var(--border);







  border-radius: 10px;







  background: rgba(255, 255, 255, 0.03);







  display: grid;







  place-items: center;







  z-index: 2;







  cursor: pointer;







}















.modal-close svg { width: 14px; }















.modal-body {







  padding: 1rem;







}















.modal-headline {







  margin-bottom: 0.9rem;







}















.modal-headline h3 {







  font-size: 1.3rem;







  margin: 0.3rem 0;







}















.modal-meta {







  display: grid;







  grid-template-columns: repeat(4, minmax(0, 1fr));







  gap: 0.5rem;







  margin-bottom: 0.9rem;







}















.modal-pill {







  border: 1px solid var(--border);







  border-radius: 10px;







  padding: 0.48rem;







  background: rgba(255, 255, 255, 0.03);







}















.modal-pill small {







  color: var(--text-muted);







  display: block;







  font-size: 0.72rem;







}















.modal-pill span {







  font-size: 0.84rem;







}















.modal-section {







  margin-top: 0.9rem;







  border-top: 1px solid var(--border-soft);







  padding-top: 0.8rem;







}















.modal-section h4 {







  margin-bottom: 0.45rem;







}















.timeline-list {







  list-style: none;







  display: grid;







  gap: 0.45rem;







}















.timeline-item {







  border-left: 2px solid rgba(255, 90, 31, 0.55);







  background: rgba(255, 255, 255, 0.02);







  border-radius: 8px;







  padding: 0.55rem 0.62rem;







}















.timeline-item-head {







  display: flex;







  justify-content: space-between;







  gap: 0.6rem;







  margin-bottom: 0.2rem;







}















.timeline-item-title {







  font-weight: 600;







  font-size: 0.9rem;







}















.timeline-item-date {







  color: var(--accent-glow);







  font-size: 0.77rem;







  font-family: "JetBrains Mono", Consolas, monospace;







}















.timeline-item p {







  color: var(--text-secondary);







  font-size: 0.86rem;







}















.timeline-docs {







  margin-top: 0.3rem;







  display: flex;







  gap: 0.35rem;







  flex-wrap: wrap;







}















.timeline-doc {







  border: 1px solid var(--border);







  border-radius: 999px;







  padding: 0.2rem 0.45rem;







  color: var(--text-secondary);







  font-size: 0.72rem;







}















.timeline-doc:hover {







  border-color: rgba(255, 90, 31, 0.45);







  color: var(--accent-glow);







}















.recordings-toolbar {







  display: grid;







  grid-template-columns: repeat(2, minmax(0, 1fr));







  gap: 0.6rem;







  margin-bottom: 0.55rem;







}















.recordings-toolbar-item {







  display: grid;







  gap: 0.25rem;







}















.recordings-toolbar-item label {







  font-size: 0.74rem;







  color: var(--text-secondary);







}















.recordings-toolbar-item-search {







  grid-column: 1 / -1;







}















.recordings-toolbar-item-check {







  grid-column: 1 / -1;







}















.recordings-checkbox {







  display: inline-flex;







  align-items: center;







  gap: 0.45rem;







  font-size: 0.82rem;







}















.recordings-count {







  margin-bottom: 0.45rem;







  color: var(--text-secondary);







  font-size: 0.8rem;







}















.recordings-table-wrap {







  overflow-x: auto;







  border: 1px solid var(--border-soft);







  border-radius: 10px;







  background: rgba(255, 255, 255, 0.02);







}















.recordings-table {







  width: 100%;







  border-collapse: collapse;







  min-width: 560px;







}















.recordings-table th,







.recordings-table td {







  padding: 0.45rem 0.5rem;







  border-bottom: 1px solid var(--border-soft);







  font-size: 0.78rem;







  text-align: left;







}















.recordings-table th {







  color: var(--text-secondary);







  font-weight: 600;







}















.recordings-table tbody tr:last-child td {







  border-bottom: none;







}















[data-animate] {







  opacity: 0;







  transform: translateY(16px);







  transition: opacity 0.6s ease, transform 0.6s ease;







}















[data-animate].in-view {







  opacity: 1;







  transform: translateY(0);







}















.hidden {







  display: none !important;







}















@media (max-width: 1120px) {







  .values-grid,







  .services-grid,







  .statewide-grid,







  .portal-grid,







  .appearances-grid,







  .footer-grid {







    grid-template-columns: repeat(2, minmax(0, 1fr));







  }















  .cases-grid,







  .resources-grid {







    grid-template-columns: repeat(2, minmax(0, 1fr));







  }















  .lifecycle-steps {







    grid-template-columns: repeat(3, minmax(0, 1fr));







  }







}















@media (max-width: 860px) {







  .nav-toggle {







    display: inline-flex;







  }















  .nav-menu {







    position: absolute;







    top: calc(100% + 0.3rem);







    right: 1rem;







    width: min(330px, 92vw);







    border: 1px solid var(--border);







    border-radius: 12px;







    background: rgba(16, 16, 16, 0.98);







    backdrop-filter: blur(8px);







    padding: 0.7rem;







    display: none;







    flex-direction: column;







    align-items: stretch;







  }















  .nav-menu.open {







    display: flex;







  }















  .hero-stats {







    grid-template-columns: repeat(2, minmax(0, 1fr));







  }















  .contact-grid,







  .tip-banner,







  .values-grid,







  .services-grid,







  .statewide-grid,







  .cases-grid,







  .resources-grid,







  .portal-grid,







  .appearances-grid,







  .footer-grid,







  .lifecycle-steps,







  .modal-meta,







  .form-grid {







    grid-template-columns: 1fr;







  }







}















@media (max-width: 560px) {







  .section {







    padding: 4rem 0;







  }















  .hero {







    padding-top: 3.2rem;







  }















  .hero-cta {







    flex-direction: column;







  }















  .quick-tip-block {







    flex-direction: column;







    align-items: flex-start;







  }















  .tip-grid {







    grid-template-columns: 1fr;







  }















  .recordings-toolbar {







    grid-template-columns: 1fr;







  }















  .btn {







    width: 100%;







    justify-content: center;







  }















  .hero-scroll-indicator {







    display: none;







  }







}















@media (prefers-reduced-motion: reduce) {







  *,







  *::before,







  *::after {







    animation: none !important;







    transition: none !important;







    scroll-behavior: auto !important;







  }







}















/* ==========================================================================







   Restraint Data Page







   ========================================================================== */







.restraint-charts {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 1.5rem;







  margin: 2rem 0;







}















.restraint-chart-card {







  background: var(--bg-elevated);







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  padding: 1.5rem;







}















.restraint-chart-card.full-width {







  grid-column: 1 / -1;







}















.restraint-chart-title {







  font-size: 1rem;







  font-weight: 700;







  margin: 0 0 1rem;







  color: var(--text-primary);







}















.restraint-info-box {







  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(139, 92, 246, 0.04));







  border: 1px solid rgba(59, 130, 246, 0.15);







  border-radius: var(--radius-md);







  padding: 1.25rem;







  margin-bottom: 2rem;







  font-size: 0.9rem;







  color: var(--text-secondary);







  line-height: 1.6;







}















.restraint-info-box strong {







  color: var(--text-primary);







}















.restraint-info-box a {







  color: var(--accent-glow);







}















.restraint-export-btn {







  display: inline-flex;







  align-items: center;







  gap: 0.4rem;







  padding: 0.5rem 1rem;







  background: rgba(34, 197, 94, 0.1);







  border: 1px solid rgba(34, 197, 94, 0.2);







  border-radius: 8px;







  color: #4ade80;







  font-size: 0.82rem;







  font-weight: 600;







  cursor: pointer;







  text-decoration: none;







  transition: background var(--transition);







}















.restraint-export-btn:hover {







  background: rgba(34, 197, 94, 0.18);







}















.restraint-comparison-panel {







  background: var(--bg-elevated);







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  padding: 1.5rem;







  margin-bottom: 2rem;







}















.restraint-comparison-panel select {







  min-width: 200px;







}















.restraint-delta-up {







  color: var(--danger);







  font-size: 0.75rem;







}















.restraint-delta-down {







  color: var(--success);







  font-size: 0.75rem;







}















.restraint-delta-same {







  color: var(--text-muted);







  font-size: 0.75rem;







}















/* ── Compare District Selectors ── */







.compare-select-row {







  display: flex;







  gap: 1rem;







  align-items: center;







  margin-bottom: 1rem;







  flex-wrap: wrap;







}















.compare-select {







  min-width: 200px;







  background: var(--bg-elevated);







  color: var(--text-primary);







  border: 1px solid var(--border);







  border-radius: 8px;







  padding: 0.5rem 0.75rem;







  font-family: Inter, "Segoe UI", Tahoma, sans-serif;







  font-size: 0.9rem;







  appearance: auto;







  cursor: pointer;







}















.compare-select:focus {







  outline: none;







  border-color: var(--accent);







  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.18);







}















.compare-select option {







  background-color: var(--bg-elevated);







  color: var(--text-primary);







}















/* ── Compare Chart ── */







.compare-chart-container {







  position: relative;







  width: 100%;







  min-height: 400px;







  background: var(--bg-elevated);







  border: 1px solid var(--border);







  border-radius: 12px;







  padding: 1rem;







}















.district-compare-empty {







  display: flex;







  align-items: center;







  justify-content: center;







  min-height: 300px;







  color: var(--text-muted);







  font-size: 0.95rem;







  text-align: center;







}















/* ── Similar Districts ── */







.similar-districts-panel {







  background: var(--bg-elevated);







  border: 1px solid var(--border);







  border-radius: var(--radius-md);







  padding: 1rem;







  margin-top: 1.5rem;







}















.similar-districts-panel h4 {







  margin: 0 0 0.75rem;







  color: var(--text-primary);







  font-size: 0.95rem;







  font-weight: 600;







}















.similar-district-tag {







  display: inline-flex;







  align-items: center;







  gap: 0.4rem;







  background: rgba(255, 255, 255, 0.06);







  border: 1px solid var(--border);







  border-radius: 999px;







  padding: 0.3rem 0.55rem 0.3rem 0.75rem;







  font-size: 0.82rem;







  color: var(--text-primary);







  margin: 0.2rem 0.35rem 0.2rem 0;







}















.similar-district-tag button {







  background: none;







  border: none;







  color: var(--text-muted);







  cursor: pointer;







  font-size: 0.85rem;







  line-height: 1;







  padding: 0 0.15rem;







  transition: color var(--transition);







}















.similar-district-tag button:hover {







  color: var(--danger);







}















.similar-district-select {







  min-width: 200px;







  background: var(--bg-elevated);







  color: var(--text-primary);







  border: 1px solid var(--border);







  border-radius: 8px;







  padding: 0.4rem 0.65rem;







  font-family: Inter, "Segoe UI", Tahoma, sans-serif;







  font-size: 0.85rem;







  appearance: auto;







  cursor: pointer;







}















.similar-district-select:focus,







.similar-district-select:focus-visible {







  outline: none;







  border-color: var(--accent);







  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.18);







}















.similar-district-add {







  display: inline-flex;







  align-items: center;







  gap: 0.35rem;







  background: rgba(255, 90, 31, 0.12);







  border: 1px solid rgba(255, 90, 31, 0.3);







  color: var(--accent);







  border-radius: 8px;







  padding: 0.4rem 0.75rem;







  font-family: Inter, "Segoe UI", Tahoma, sans-serif;







  font-size: 0.85rem;







  cursor: pointer;







  transition: all var(--transition);







}















.similar-district-add:hover {







  background: rgba(255, 90, 31, 0.22);







  border-color: rgba(255, 90, 31, 0.5);







}















/* ==========================================================================







   Responsive: Cards & Restraint Charts







   ========================================================================== */







@media (max-width: 768px) {







  .districts-grid,







  .articles-grid {







    grid-template-columns: 1fr;







  }















  .restraint-charts {







    grid-template-columns: 1fr;







  }















  .article-full {







    max-width: 100%;







  }















  .article-title {







    font-size: 1.5rem;







  }















  .data-tab {







    padding: 0.6rem 1rem;







    font-size: 0.82rem;







  }















  .article-card-body {







    padding: 1.2rem;







  }







}















/* ==========================================================================







   Resource Library — Dedicated Page Styles (.rl-*)







   ========================================================================== */







[data-theme="paper"] .res-url-btn:hover {







  background: rgba(200, 100, 20, 0.12);







  color: #4a2208;







}















.rl-crisis-bar {







  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(249, 115, 22, 0.05));







  border: 1px solid rgba(239, 68, 68, 0.15);







  border-radius: 12px;







  padding: 1.5rem;







  margin-bottom: 2rem;







}















.rl-crisis-bar-header {







  display: flex;







  align-items: center;







  gap: 0.5rem;







  margin-bottom: 1rem;







}















.rl-crisis-bar-icon {







  width: 22px;







  height: 22px;







  color: var(--accent);







  flex-shrink: 0;







}















.rl-crisis-bar-icon svg {







  width: 22px;







  height: 22px;







}















.rl-crisis-bar-title {







  font-size: 1rem;







  font-weight: 700;







  color: var(--accent);







  margin: 0;







}















.rl-crisis-grid {







  display: grid;







  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));







  gap: 0.8rem;







}















.rl-crisis-card {







  background: var(--bg-card);







  border: 1px solid var(--border);







  border-radius: 10px;







  padding: 1rem;







  display: flex;







  flex-direction: column;







  gap: 0.5rem;







}















.rl-crisis-card-header {







  display: flex;







  align-items: center;







  gap: 0.5rem;







}















.rl-crisis-icon {







  width: 20px;







  height: 20px;







  color: var(--accent-glow);







  flex-shrink: 0;







}















.rl-crisis-icon svg {







  width: 20px;







  height: 20px;







}















.rl-crisis-title {







  font-size: 0.9rem;







  font-weight: 700;







  margin: 0;







  color: var(--text-primary);







}















.rl-crisis-desc {







  font-size: 0.78rem;







  color: var(--text-secondary);







  margin: 0;







  line-height: 1.4;







}















.rl-crisis-actions {







  display: flex;







  gap: 0.4rem;







  flex-wrap: wrap;







  margin-top: auto;







  padding-top: 0.5rem;







}















.rl-crisis-btn {







  display: inline-flex;







  align-items: center;







  gap: 0.3rem;







  font-size: 0.75rem;







  padding: 0.35rem 0.7rem;







  border-radius: 6px;







  font-weight: 600;







  text-decoration: none;







  transition: all 0.15s;







}















.rl-crisis-btn:hover {







  filter: brightness(1.15);







}















.rl-crisis-phone {







  background: rgba(239, 68, 68, 0.12);







  color: #f87171;







  border: 1px solid rgba(239, 68, 68, 0.2);







}















.rl-crisis-web {







  background: rgba(59, 130, 246, 0.12);







  color: #60a5fa;







  border: 1px solid rgba(59, 130, 246, 0.2);







}















.rl-crisis-email {







  background: rgba(139, 92, 246, 0.12);







  color: #a78bfa;







  border: 1px solid rgba(139, 92, 246, 0.2);







}















.rl-section {







  margin-bottom: 2.5rem;







}















.rl-section-header {







  display: flex;







  align-items: flex-start;







  gap: 0.8rem;







  margin-bottom: 1.2rem;







  padding-bottom: 0.8rem;







  border-bottom: 1px solid var(--border);







}















.rl-section-icon {







  width: 28px;







  height: 28px;







  color: var(--accent-glow);







  flex-shrink: 0;







  margin-top: 0.1rem;







}















.rl-section-icon svg {







  width: 28px;







  height: 28px;







}















.rl-section-title {







  font-size: 1.1rem;







  font-weight: 700;







  margin: 0 0 0.2rem;







  color: var(--text-primary);







}















.rl-section-desc {







  font-size: 0.82rem;







  color: var(--text-secondary);







  margin: 0;







  line-height: 1.45;







  max-width: 600px;







}















.rl-section-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));







  gap: 0.8rem;







}















.rl-card {







  background: var(--bg-card);







  border: 1px solid var(--border);







  border-radius: 10px;







  overflow: hidden;







  display: flex;







  flex-direction: column;







  transition: border-color 0.15s, box-shadow 0.15s;







}















.rl-card:hover {







  border-color: var(--accent-glow);







  box-shadow: 0 0 20px rgba(255, 90, 31, 0.05);







}















.rl-card-body {







  padding: 1rem 1rem 0.5rem;







  flex: 1;







}















.rl-card-title {







  font-size: 0.95rem;







  font-weight: 700;







  margin: 0 0 0.4rem;







  color: var(--text-primary);







}















.rl-card-desc {







  font-size: 0.8rem;







  color: var(--text-secondary);







  margin: 0 0 0.6rem;







  line-height: 1.5;







}















.rl-tags {







  display: flex;







  gap: 0.3rem;







  flex-wrap: wrap;







  margin-bottom: 0.3rem;







}















.rl-tag {







  font-size: 0.65rem;







  padding: 0.12rem 0.45rem;







  border-radius: 999px;







  background: rgba(255, 255, 255, 0.04);







  color: var(--text-muted);







  border: 1px solid var(--border);







}















.rl-card-actions {







  display: flex;







  gap: 0.4rem;







  flex-wrap: wrap;







  padding: 0.5rem 1rem 1rem;







  border-top: 1px solid rgba(255, 255, 255, 0.03);







}















.rl-action-btn {







  display: inline-flex;







  align-items: center;







  gap: 0.3rem;







  font-size: 0.75rem;







  padding: 0.4rem 0.75rem;







  border-radius: 6px;







  font-weight: 600;







  text-decoration: none;







  transition: all 0.15s;







  white-space: nowrap;







}















.rl-action-btn:hover {







  filter: brightness(1.15);







}















.rl-action-primary {







  background: var(--accent-glow);







  color: #fff;







}















.rl-action-phone {







  background: rgba(34, 197, 94, 0.1);







  color: #4ade80;







  border: 1px solid rgba(34, 197, 94, 0.2);







}















.rl-action-email {







  background: rgba(139, 92, 246, 0.1);







  color: #a78bfa;







  border: 1px solid rgba(139, 92, 246, 0.2);







}















.rl-action-info {







  background: rgba(255, 255, 255, 0.03);







  color: var(--text-muted);







  border: 1px solid var(--border);







  font-size: 0.75rem;







  padding: 0.4rem 0.75rem;







  border-radius: 6px;







}















.rl-getting-started {







  background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(59, 130, 246, 0.04));







  border: 1px solid rgba(34, 197, 94, 0.1);







  border-radius: 12px;







  padding: 1.5rem;







}















.rl-start-grid {







  display: grid;







  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));







  gap: 0.8rem;







}















.rl-start-card {







  background: var(--bg-card);







  border: 1px solid var(--border);







  border-radius: 8px;







  padding: 1rem;







}















.rl-start-num {







  width: 28px;







  height: 28px;







  border-radius: 50%;







  background: var(--accent-glow);







  color: #fff;







  display: flex;







  align-items: center;







  justify-content: center;







  font-size: 0.8rem;







  font-weight: 800;







  margin-bottom: 0.5rem;







}















.rl-start-card h4 {







  font-size: 0.88rem;







  margin: 0 0 0.4rem;







  font-weight: 700;







  color: var(--text-primary);







}















.rl-start-card p {







  font-size: 0.78rem;







  color: var(--text-secondary);







  margin: 0;







  line-height: 1.5;







}















.rl-start-card a {







  color: var(--accent-glow);







}















@media (max-width: 768px) {







  .rl-crisis-grid,







  .rl-section-grid,







  .rl-start-grid {







    grid-template-columns: 1fr;







  }







  .rl-crisis-bar {







    padding: 1rem;







  }







}















[data-theme="paper"] .rl-crisis-bar {







  background: rgba(239, 68, 68, 0.04);







  border-color: rgba(200, 110, 25, 0.15);







}















[data-theme="paper"] .rl-crisis-card,







[data-theme="paper"] .rl-start-card {







  background: rgba(255, 255, 255, 0.5);







  border-color: rgba(0, 0, 0, 0.08);







}















[data-theme="paper"] .rl-getting-started {







  background: rgba(200, 120, 30, 0.03);







  border-color: rgba(200, 110, 25, 0.1);







}















[data-theme="paper"] .rl-tag {







  background: rgba(200, 100, 20, 0.06);







  border-color: rgba(200, 100, 20, 0.15);







  color: #6b3410;







}







/* ── Construction Notice ── */







.construction-notice {







  background: rgba(245, 158, 11, 0.08);







  border-bottom: 1px solid rgba(245, 158, 11, 0.25);







  padding: 0.65rem 1rem;







  text-align: center;







  color: var(--warning);







  font-size: 0.85rem;







  font-weight: 500;







  letter-spacing: 0.01em;







}











/* ── Theme Toggle ── */



.theme-toggle {



  background: transparent;



  border: none;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  width: 36px;



  height: 36px;



  border-radius: var(--radius-sm);



  color: var(--text-muted);



  padding: 0;



  transition: color var(--transition), background var(--transition);



}



.theme-toggle:hover {



  color: #fff;



  background: rgba(255, 255, 255, 0.08);



}