/* Tenderpoints — Obsidian Violet Medical Theme */

:root {
  color-scheme: dark;
  --obsidian: #0A0915;
  --obsidian-light: #1A1536;
  --obsidian-lighter: #221D42;
  --obsidian-border: #3B3370;
  --violet: #A78BFA;
  --violet-light: #C4B5FD;
  --violet-glow: #DDD6FE;
  --on-violet: #0A0915;
  --offwhite: #F4F1EA;
  --muted: #A9A3BD;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--obsidian);
  color: var(--offwhite);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--obsidian);
}
::-webkit-scrollbar-thumb {
  background: var(--obsidian-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4F4690;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--violet);
  color: var(--on-violet);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--violet-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  background-color: var(--obsidian-light);
  color: var(--violet-glow);
  border: 1px solid var(--obsidian-border);
  font-weight: 600;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--obsidian-lighter);
  border-color: var(--violet);
  color: var(--offwhite);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.18);
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Cards */
.card {
  border-radius: 1rem;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  padding: 1.25rem;
  transition: background-color 150ms ease, border-color 150ms ease;
}
@media (min-width: 640px) {
  .card { padding: 1.5rem; }
}
.card:hover {
  background-color: var(--obsidian-lighter);
  border-color: rgba(124, 58, 237, 0.45);
}

/* Dashboard / resource cards */
.dashboard-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  padding: 1.25rem;
  transition: background-color 150ms ease, border-color 150ms ease;
}
@media (min-width: 640px) {
  .dashboard-card { padding: 1.5rem; }
}
.dashboard-card:hover {
  background-color: var(--obsidian-lighter);
  border-color: rgba(124, 58, 237, 0.45);
}
.dashboard-card[data-status] {
  position: relative;
  overflow: hidden;
}
.dashboard-card[data-status]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--status-rail);
}
.dashboard-card[data-status="live"] {
  --status-rail: rgba(16, 185, 129, 0.55);
}
.dashboard-card[data-status="building"] {
  --status-rail: rgba(245, 158, 11, 0.55);
}
.dashboard-card[data-status="planned"] {
  --status-rail: rgba(148, 163, 184, 0.45);
}
.track-progress {
  margin: 0 0 1rem;
}
.track-progress-bar {
  height: 4px;
  border-radius: 9999px;
  background-color: var(--obsidian-lighter);
  overflow: hidden;
}
.track-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background-color: var(--violet);
  transition: width 150ms ease;
}
.track-progress-label {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Navigation links */
.nav-link {
  color: var(--muted);
  transition: color 150ms ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--violet-glow);
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: var(--offwhite);
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  background-color: var(--obsidian-lighter);
  color: var(--violet-glow);
}

/* Category filter bar */
.filter-bar {
  position: sticky;
  top: 64px;
  z-index: 30;
  background-color: rgba(10, 9, 21, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--obsidian-border);
}
.filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--obsidian-border);
  background-color: var(--obsidian-light);
  transition: all 200ms ease;
  white-space: nowrap;
}
.filter-btn:hover {
  border-color: rgba(124, 58, 237, 0.5);
  color: var(--offwhite);
}
.filter-btn.active {
  background: var(--violet);
  border-color: transparent;
  color: var(--on-violet);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Interactive toggle cards */
.toggle-card {
  cursor: pointer;
  user-select: none;
}
.toggle-card.open .toggle-chevron {
  transform: rotate(180deg);
}
.toggle-content {
  animation: fadeIn 200ms ease-out;
}

/* Tags / badges */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--obsidian-lighter);
  color: var(--muted);
  border: 1px solid var(--obsidian-border);
}
.tag-accent {
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--violet-glow);
  border-color: rgba(124, 58, 237, 0.3);
}
.tag-violet {
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--violet-glow);
  border-color: rgba(124, 58, 237, 0.35);
}
.tag-blue {
  background-color: rgba(59, 130, 246, 0.12);
  color: #93C5FD;
  border-color: rgba(59, 130, 246, 0.35);
}
.tag-amber {
  background-color: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.35);
}
.tag-red {
  background-color: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}
.tag-live {
  background-color: rgba(16, 185, 129, 0.12);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}
.tag-progress {
  background-color: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.35);
}
.tag-planned {
  background-color: rgba(148, 163, 184, 0.12);
  color: #94A3B8;
  border-color: rgba(148, 163, 184, 0.35);
}
.tag-status::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
  margin-right: 0.4rem;
  flex: none;
}

/* Glossary term highlight */
.glossary-term mark {
  background-color: rgba(124, 58, 237, 0.22);
  color: var(--violet-glow);
  border-radius: 0.25rem;
  padding: 0 0.125rem;
}

/* Smooth reveal */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Donation widget animation */
#donation-panel.open {
  display: block;
  animation: popIn 250ms ease-out;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Toast */
#toast.show {
  display: block;
  animation: toastIn 200ms ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal */
#modal-backdrop.open,
#pdf-viewer-modal.open {
  display: flex;
  animation: fadeIn 200ms ease-out;
}
#modal-panel,
#pdf-viewer-panel {
  animation: scaleIn 200ms ease-out;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-trigger,
.disclaimer-trigger {
  cursor: pointer;
}
button.modal-trigger,
button.disclaimer-trigger {
  font-family: inherit;
  text-align: left;
  background: transparent;
}

/* Podcast series tabs */
.series-tabs {
  display: inline-flex;
  border-radius: 9999px;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  padding: 0.25rem;
}
.series-tab {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #AFA8C6;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.series-tab:hover {
  color: var(--offwhite);
}
.series-tab.active {
  background-color: var(--violet);
  color: var(--on-violet);
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
  animation: fadeIn 200ms ease-out;
}

/* Episode status badges */
.episode-status-live {
  background-color: rgba(16, 185, 129, 0.12);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}
.episode-status-upcoming {
  background-color: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.35);
}
.episode-status-planned {
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--violet-glow);
  border-color: rgba(124, 58, 237, 0.35);
}

/* Audio player placeholder */
.audio-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--obsidian-lighter) 0%, var(--obsidian-light) 100%);
  border: 1px dashed var(--obsidian-border);
  border-radius: 0.75rem;
  color: var(--muted);
}

/* no-scrollbar utility */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Footer disclaimer */
.footer-disclaimer {
  color: #94A3B8;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.footer-disclaimer strong {
  color: #CBD5E1;
}

/* Typography */
.font-heading {
  font-family: 'Montserrat', sans-serif;
}

/* Pill tags */
.tag-core {
  background-color: rgba(124, 58, 237, 0.12);
  color: var(--violet-glow);
  border-color: rgba(124, 58, 237, 0.35);
}
.tag-md {
  background-color: rgba(59, 130, 246, 0.12);
  color: #93C5FD;
  border-color: rgba(59, 130, 246, 0.35);
}
.tag-do {
  background-color: rgba(16, 185, 129, 0.12);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.35);
}
.tag-high-yield {
  background-color: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.35);
}

/* MD / DO visibility */
.do-only {
  display: none !important;
}
.md-only {
  display: initial !important;
}
:not(.do-mode) .md-only {
  animation: fadeIn 0.25s ease-out;
}
.do-mode .do-only {
  display: block !important;
  animation: fadeIn 0.25s ease-out;
}
.do-mode .do-only.inline,
.do-mode .do-only.inline-block {
  display: inline !important;
}
.do-mode .md-only {
  display: none !important;
}

/* Search modal */
.search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background-color: rgba(10, 9, 21, 0.85);
  backdrop-filter: blur(10px);
}
.search-modal.open {
  display: flex;
  animation: fadeIn 200ms ease-out;
}
.search-panel {
  width: 100%;
  max-width: 42rem;
  max-height: 80vh;
  margin: auto;
  border-radius: 1rem;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--obsidian-border);
}
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--offwhite);
  font-size: 1rem;
}
.search-input::placeholder {
  color: #AFA8C6;
}
.search-results {
  overflow-y: auto;
  padding: 0.75rem;
}
.search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--offwhite);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
  cursor: pointer;
}
.search-result:hover,
.search-result:focus {
  background-color: var(--obsidian-lighter);
  border-color: rgba(124, 58, 237, 0.3);
}
.search-result small {
  display: block;
  color: #AFA8C6;
  font-size: 0.75rem;
  margin-top: 0.125rem;
}
.search-empty {
  padding: 2rem;
  text-align: center;
  color: #AFA8C6;
}

/* Audio player */
.audio-player {
  width: 100%;
  border-radius: 0.75rem;
  background-color: var(--obsidian-lighter);
}
.audio-timestamp {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--obsidian-lighter);
  color: var(--violet-glow);
  border: 1px solid var(--obsidian-border);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.audio-timestamp:hover {
  border-color: var(--violet);
  color: var(--offwhite);
  background-color: var(--obsidian-light);
}

/* Hero search bar */
.hero-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  color: #AFA8C6;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hero-search:hover {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.12);
}
.hero-search kbd {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background-color: var(--obsidian-lighter);
  border: 1px solid var(--obsidian-border);
  font-size: 0.75rem;
  color: var(--violet-glow);
}

/* Header search */
.header-search-input {
  width: 10rem;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border-radius: 0.5rem;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  color: var(--muted);
  font-size: 0.875rem;
  transition: border-color 200ms ease, box-shadow 200ms ease, width 200ms ease;
  cursor: pointer;
}
.header-search-input:hover,
.header-search-input:focus {
  border-color: rgba(124, 58, 237, 0.5);
  color: var(--offwhite);
  width: 14rem;
}

/* Dashboard filters — 3D button-style selects */
.di-filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  border-radius: 0.75rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.08) 100%),
    var(--obsidian-lighter);
  border: 1px solid var(--obsidian-border);
  border-bottom: 2px solid #4F4690;
  color: var(--offwhite);
  font-size: 0.875rem;
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem top 0.85rem;
  background-size: 0.9rem;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.di-filter-select:hover:not(:disabled) {
  background-color: var(--obsidian-light);
  border-color: rgba(124, 58, 237, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 0 rgba(124, 58, 237, 0.7),
    0 8px 22px rgba(124, 58, 237, 0.22);
}
.di-filter-select:focus {
  border-color: var(--violet-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 3px rgba(124, 58, 237, 0.25),
    0 4px 0 rgba(124, 58, 237, 0.6);
}
.di-filter-select:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 0 rgba(124, 58, 237, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.35);
}
.di-filter-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: translateY(0);
}

/* Mode toggle */
.mode-toggle {
  display: inline-flex;
  border-radius: 9999px;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  padding: 0.25rem;
}
.mode-toggle button {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #AFA8C6;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.mode-toggle button.active {
  background-color: var(--violet);
  color: var(--on-violet);
}

/* Divine Intervention notes layout */
.di-notes p,
.di-notes li,
.di-notes td,
.di-notes th,
.di-notes summary {
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.di-notes p,
.di-notes li,
.di-notes td {
  color: #F4F1EA !important;
  margin-bottom: 0.6rem !important;
}
.di-notes h2,
.di-notes h3,
.di-notes h4 {
  color: #F4F1EA !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}
.di-notes h2 { font-size: 1.5rem !important; }
.di-notes h3 { font-size: 1.25rem !important; }
.di-notes h4 { font-size: 1.1rem !important; }
.di-notes strong {
  color: #F4F1EA !important;
  font-weight: 700 !important;
}
.di-notes em {
  color: var(--violet-glow) !important;
  font-style: italic !important;
}
.di-notes ul,
.di-notes ol {
  padding-left: 1.5rem !important;
  margin-bottom: 1rem !important;
}
.di-notes li {
  margin-bottom: 0.5rem !important;
}
.di-notes details { margin-bottom: 1rem; }
.di-notes summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--obsidian-lighter);
  border: 1px solid var(--obsidian-border);
  border-radius: 0.5rem;
  color: #F4F1EA;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  list-style: none;
}
.di-notes summary:hover {
  border-color: var(--violet);
  background: var(--obsidian-lighter);
}
.di-notes summary::-webkit-details-marker { display: none; }
.di-notes summary::before {
  content: '▶';
  color: var(--violet-glow);
}
.di-notes details[open] summary::before { content: '▼'; }
.di-notes details > *:not(summary) {
  margin-left: 0.5rem;
  padding-left: 0.75rem !important;
  border-left: 2px solid var(--obsidian-border);
}
.di-notes pre {
  margin-bottom: 1rem !important;
  overflow-x: auto;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: #0A0915;
  border: 1px solid var(--obsidian-border);
}
.di-notes code {
  font-size: 0.9rem !important;
}
.di-notes blockquote {
  border-left: 4px solid var(--violet);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--violet-glow);
  font-style: italic;
}
.di-notes figure { margin: 1rem 0; }
.di-notes img {
  border-radius: 0.75rem;
  max-width: 100%;
  display: block;
  margin: 1rem 0;
}
.di-notes hr { border-color: var(--obsidian-border); margin: 1.5rem 0; }
.di-notes a {
  color: var(--violet-glow) !important;
  text-decoration: underline !important;
}
.di-notes a:hover { color: #F4F1EA !important; }
.di-notes table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  background: #0A0915;
  border: 1px solid var(--obsidian-border);
}
.di-notes th,
.di-notes td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--obsidian-border);
  text-align: left;
  vertical-align: top;
}
.di-notes th {
  background: var(--obsidian-lighter);
  color: #F4F1EA;
  font-weight: 600;
}

/* --- Per-visitor progress toggles (Divine Intervention modal) --- */
.di-progress-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--obsidian-border);
  background: #12102A;
  color: #9A93B8;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.di-progress-btn:hover {
  color: #F4F1EA;
  border-color: var(--violet);
}
.di-progress-btn.is-on {
  background: rgba(124, 58, 237, 0.18);
  border-color: var(--violet);
  color: #F4F1EA;
}

.di-view-btn {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--obsidian-border);
  background-color: var(--obsidian-lighter);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.di-view-btn:hover {
  color: var(--offwhite);
  border-color: var(--violet);
}
.di-view-btn.is-on {
  background-color: var(--violet);
  color: var(--on-violet);
  border-color: var(--violet);
}

.di-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--obsidian-light);
  border: 1px solid var(--obsidian-border);
  border-radius: 0.75rem;
  overflow: hidden;
}
.di-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  min-height: 40px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.di-row + .di-row {
  border-top: 1px solid var(--obsidian-border);
}
.di-row:hover {
  background-color: var(--obsidian-lighter);
}
.di-row-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  padding: 0;
  background: none;
  border: none;
  color: var(--obsidian-border);
  cursor: pointer;
}
.di-row-done.is-on {
  color: #6EE7B7;
}
.di-row-done:hover {
  color: var(--muted);
}
.di-row-number {
  width: 3rem;
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.di-row-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--offwhite);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-row-system {
  width: 8rem;
  flex: none;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.di-row-runtime {
  width: 5rem;
  flex: none;
  color: var(--muted);
  white-space: nowrap;
}
.di-row-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  flex: none;
  color: var(--muted);
}
.di-row-link:hover {
  color: var(--offwhite);
}
#di-list-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: var(--obsidian);
}
#di-list-head[hidden] {
  display: none;
}
#di-list-head > :first-child {
  width: 1.5rem;
  flex: none;
}
#di-list-head .di-list-col-num {
  width: 3rem;
  flex: none;
}
#di-list-head .di-list-col-title {
  flex: 1;
  min-width: 0;
}
#di-list-head .di-list-col-system {
  width: 8rem;
  flex: none;
}
#di-list-head .di-list-col-runtime {
  width: 5rem;
  flex: none;
}
#di-list-head > :last-child {
  width: 1.5rem;
  flex: none;
}

@media (max-width: 900px) {
  .di-row-system,
  #di-list-head .di-list-col-system {
    display: none;
  }
}
@media (max-width: 640px) {
  .di-row-runtime,
  #di-list-head .di-list-col-runtime {
    display: none;
  }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 2px;
}

/* The support widget is fixed, so on narrow screens it sat on top of the hero
   chips and the end of every page. Tuck it into the corner and keep the last
   row of content clear of it. */
@media (max-width: 640px) {
  #donation-widget {
    bottom: 0.75rem;
    right: 0.75rem;
  }
  #donation-toggle {
    width: 3rem;
    height: 3rem;
  }
  #donation-panel {
    width: calc(100vw - 1.5rem);
  }
  footer {
    padding-bottom: 4rem;
  }
}