/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ═══════════════════════════════════════════════════════════════
   Design System — Component Classes
   Uses Tailwind CSS variables for automatic dark mode support.
   ═══════════════════════════════════════════════════════════════ */

/* ── Turbo Frames ─────────────────────────────────────────── */
turbo-frame {
  display: block;
}

turbo-frame[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
  min-height: 4rem;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: #eff1f5;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.card-interactive {
  background: #eef0f4;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.card-interactive:hover {
  background: #e5e8ed;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  border-color: var(--color-gray-300);
}

.dark .card,
.dark .card-interactive {
  background: #131c2b;
  box-shadow: 0 1px 4px 0 rgba(147, 197, 253, 0.06), 0 0 1px 0 rgba(147, 197, 253, 0.1);
}

.dark .card-interactive:hover {
  background: #182338;
  box-shadow: 0 2px 12px -2px rgba(147, 197, 253, 0.12), 0 0 1px 0 rgba(147, 197, 253, 0.15);
}

/* ── Search Quality Tiers ────────────────────────────────── */
.search-tier-excellent {
  border-left: 3px solid #f59e0b;
  background: #fefcf5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 0 8px -1px rgba(245, 158, 11, 0.18);
}

.search-tier-excellent:hover {
  background: #fdf8eb;
  border-left-color: #d97706;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 0 12px -1px rgba(245, 158, 11, 0.3);
}

.dark .search-tier-excellent {
  background: #1a1710;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 0 12px -2px rgba(245, 158, 11, 0.25);
}

.dark .search-tier-excellent:hover {
  background: #211e14;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 18px -2px rgba(245, 158, 11, 0.35);
}

.search-tier-good {
  border-left: 3px solid #3b82f6;
}

.search-tier-good:hover {
  border-left-color: #2563eb;
}

.search-tier-basic {
  border-left: 3px solid #d1d5db;
}

.dark .search-tier-basic {
  border-left-color: #374151;
}

.card-accent {
  border-left: 4px solid var(--color-blue-200);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card-accent:hover {
  border-left-color: var(--color-blue-500);
}

/* Synthesis element cards — shares card-interactive visual language
   Set --el-color on each card via inline style for the tinted background. */
.synth-card {
  --el-color: #6b7280;
  background: color-mix(in srgb, var(--el-color) 6%, #f6f7f9);
  border: 1px solid color-mix(in srgb, var(--el-color) 12%, var(--color-gray-200));
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.synth-card:hover {
  background: color-mix(in srgb, var(--el-color) 10%, #eef0f3);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  border-color: color-mix(in srgb, var(--el-color) 20%, var(--color-gray-300));
}

.dark .synth-card {
  background: color-mix(in srgb, var(--el-color) 8%, #131c2b);
  border-color: color-mix(in srgb, var(--el-color) 20%, rgba(147, 197, 253, 0.1));
  box-shadow: 0 1px 4px 0 rgba(147, 197, 253, 0.06), 0 0 1px 0 rgba(147, 197, 253, 0.1);
}

.dark .synth-card:hover {
  background: color-mix(in srgb, var(--el-color) 12%, #182338);
  border-color: color-mix(in srgb, var(--el-color) 30%, rgba(147, 197, 253, 0.15));
  box-shadow: 0 2px 12px -2px rgba(147, 197, 253, 0.12), 0 0 1px 0 rgba(147, 197, 253, 0.15);
}

/* Strength pills */
.strength-pill {
  display: inline-flex;
  overflow: hidden;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px var(--sp-ring);
  --sp-green: #c7e4d1;
  --sp-red: #e4c7c7;
  --sp-indigo: #c7d2fe;
  --sp-empty: #e5e7eb;
  --sp-ring-green: var(--color-green-600);
  --sp-ring-red: var(--color-red-600);
  --sp-ring-indigo: var(--color-indigo-600);
}
.dark .strength-pill {
  --sp-green: #15803d;
  --sp-red: #991b1b;
  --sp-indigo: #3730a3;
  --sp-empty: #4b5563;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-primary {
  background: #1e3a5f;
  color: #fff;
  box-shadow: 0 1px 3px 0 rgba(15, 30, 50, 0.2);
}

.btn-primary:hover {
  background: #163050;
  box-shadow: 0 2px 6px 0 rgba(15, 30, 50, 0.3);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.3);
}

.dark .btn-primary {
  background: #2a5080;
  color: #fff;
  box-shadow: 0 0 12px rgba(42, 80, 128, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .btn-primary:hover {
  background: #356198;
  box-shadow: 0 0 18px rgba(53, 97, 152, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dark .btn-primary:focus {
  box-shadow: 0 0 18px rgba(42, 80, 128, 0.2), 0 0 0 3px rgba(42, 80, 128, 0.2);
}

.dark .btn-starfield {
  background: linear-gradient(135deg, #060a14 0%, #0f172a 50%, #060a14 100%);
  border: 1px solid rgba(147, 197, 253, 0.2);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: rgba(147, 197, 253, 0.9);
}

.dark .btn-starfield:hover {
  background: linear-gradient(135deg, #0a1020 0%, #131c2e 50%, #0a1020 100%);
  border-color: rgba(147, 197, 253, 0.35);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* ── Issue Direction Toggle ──────────────────────────────── */
.issue-dir-btn {
  color: #6b7280;
  border-right: 1px solid var(--color-gray-300);
}
.issue-dir-btn:last-child { border-right: none; }
.issue-dir-btn:hover { background: var(--color-gray-100); }

.issue-dir-for.active {
  background: #166534;
  color: #fff;
}
.issue-dir-for.active:hover {
  background: #15803d;
}
.issue-dir-against.active {
  background: #991b1b;
  color: #fff;
}
.issue-dir-against.active:hover {
  background: #b91c1c;
}

.dark .issue-dir-label {
  color: #9ca3af;
  border-right-color: rgba(147, 197, 253, 0.12);
}
.dark .issue-dir-btn {
  color: #9ca3af;
  border-right-color: rgba(147, 197, 253, 0.12);
}
.dark .issue-dir-btn:hover {
  background: #182338;
  color: #d1d5db;
}
.dark .issue-dir-for.active {
  background: #166534;
  color: #bbf7d0;
  box-shadow: 0 0 8px rgba(22, 101, 52, 0.3);
}
.dark .issue-dir-for.active:hover {
  background: #15803d;
}
.dark .issue-dir-against.active {
  background: #991b1b;
  color: #fecaca;
  box-shadow: 0 0 8px rgba(153, 27, 27, 0.3);
}
.dark .issue-dir-against.active:hover {
  background: #b91c1c;
}

.dark .btn-starfield:focus {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2), 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-secondary {
  background: transparent;
  color: var(--color-blue-700);
  border: 1px solid var(--color-blue-200);
}

.btn-secondary:hover {
  background: var(--color-blue-50);
  border-color: var(--color-blue-300);
}

.btn-danger {
  background: transparent;
  color: var(--color-red-500);
}

.btn-danger:hover {
  background: var(--color-red-50);
  color: var(--color-red-700);
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 9999px;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  vertical-align: middle;
}

.badge-score {
  background: var(--color-teal-100);
  color: var(--color-teal-800);
}

.dark .badge-score {
  background: var(--color-teal-900);
  color: var(--color-teal-200);
}

.badge-secondary {
  background: var(--color-yellow-100);
  color: var(--color-yellow-700);
}

.dark .badge-secondary {
  background: var(--color-yellow-900);
  color: var(--color-yellow-300);
}

.badge-status {
  background: var(--color-green-100);
  color: var(--color-green-800);
  font-weight: 500;
}

/* ── Form inputs ───────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 0.25rem;
}

.form-input,
.form-textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-gray-300);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--color-white);
  color: var(--color-gray-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-blue-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-400);
}

/* ── Nav refinement ────────────────────────────────────────── */
:root { --nav-height: 3.5rem; }

.nav-refined {
  height: var(--nav-height);
  background: var(--color-white);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--color-gray-100);
}

.dark .nav-refined {
  box-shadow: 0 1px 4px 0 rgba(147, 197, 253, 0.05);
}

#app-menu { background: #fafbfc; }
.dark #app-menu { background: #1a2332; }

.nav-link {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  transition: color 0.15s ease;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--color-gray-900);
}

.nav-link-active {
  color: var(--color-blue-600);
  font-weight: 500;
  border-bottom-color: var(--color-blue-600);
}

/* Prevent iOS Safari auto-zoom on input focus */
@media screen and (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Hide matter header + mobile tabs when reading a case on mobile.
   JS toggles .reading-case on the tab container when frame has data-case-name. */
@media (max-width: 767px) {
  .reading-case > #matter-header,
  .reading-case > #matter-mobile-tabs {
    display: none !important;
  }
  .reading-case .opinion-header-sticky {
    top: var(--nav-height) !important;
  }
  main:has(.reading-case) {
    padding-top: 0 !important;
  }
}

/* Case reader header — sticky on web, static on native */
.opinion-header-sticky {
  position: sticky;
  top: var(--sticky-top, var(--nav-height));
  z-index: 30;
  box-shadow: 0 -2rem 0 0 var(--color-gray-50);
}

/* ── Turbo Native overrides ──────────────────────────────── */
body.turbo-native {
  --nav-height: 0px;
}

body.turbo-native main {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Hide web-only elements inside native shell */
body.turbo-native .web-only {
  display: none !important;
}


/* Hide web headers and tab bars in native app — handled by native UI */
body.turbo-native #matters-header,
body.turbo-native #matter-header,
body.turbo-native #matter-mobile-tabs,
body.turbo-native #tab-bar-mobile,
body.turbo-native #matter-sidebar,
body.turbo-native #tab-sidebar,
body.turbo-native #settings-mobile-tabs,
body.turbo-native #settings-sidebar {
  display: none !important;
}

/* Show native-only elements (hidden by default, visible in native shell) */
.native-only { display: none !important; }
body.turbo-native .native-only { display: flex !important; }

/* Case reader: un-stick the header and hide close button on native (nav back handles it) */
body.turbo-native .opinion-header-sticky {
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}
body.turbo-native #opinion-header [data-action="opinion-reader#close"] {
  display: none !important;
}

/* On native, page markers scroll inline (not sticky) and are visually subtle */
body.turbo-native .page-marker {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(209, 213, 219, 0.5) !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  justify-content: center !important;
}

/* Apple Books-style floating page bubble */
#native-page-bubble {
  position: fixed;
  bottom: calc(var(--native-tab-bar-height, 100px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 10px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#native-page-bubble.visible {
  opacity: 1;
}
#native-page-bubble.chrome-hidden {
  bottom: 20px;
}
.dark #native-page-bubble {
  background: rgba(255, 255, 255, 0.2);
}

/* Dark mode nav starfield */
.dark nav #nav-starfield {
  background: linear-gradient(90deg, #060a14 0%, #0a0e1a 50%, #060a14 100%);
}

/* Starry night login screen */
html:has(.starry-night) { height: 100%; background: #0a0e1a; }
html:has(.starry-night) body { width: 100%; min-height: 100%; height: 100%; background: #0a0e1a !important; margin: 0; }
html:has(.starry-night) main { padding: 0 !important; margin: 0 !important; max-width: none !important; }

.starry-night {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  z-index: 0;
}

.starry-night::before {
  content: '';
  position: fixed;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  background: linear-gradient(180deg, #0a0e1a 0%, #111827 40%, #1a1f3a 100%);
  z-index: -1;
}

.starry-night #starfield {
  position: fixed;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  z-index: 0;
}

.starry-night #constellation {
  position: fixed;
  width: min(220px, 30vw);
  height: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.starry-content {
  position: relative;
  z-index: 10;
  padding: 1rem;
  padding-top: 25vh;
  max-width: 28rem;
  margin: 0 auto;
}

.starry-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(147, 197, 253, 0.15);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.08);
}

.starry-input {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgba(147, 197, 253, 0.2);
  background: rgba(15, 23, 42, 0.5);
  color: #e2e8f0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem; /* 16px prevents iOS Safari auto-zoom on focus */
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.starry-input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.starry-input:focus {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Constellation animation */
.star-node {
  animation: twinkle 6s ease-in-out infinite;
}

.star-node:nth-child(1) { animation-delay: 0s; animation-duration: 7s; }
.star-node:nth-child(2) { animation-delay: -2.1s; animation-duration: 5s; }
.star-node:nth-child(3) { animation-delay: -4.3s; animation-duration: 8s; }
.star-node:nth-child(4) { animation-delay: -1.7s; animation-duration: 6s; }
.star-node:nth-child(5) { animation-delay: -3.8s; animation-duration: 9s; }
.star-node:nth-child(6) { animation-delay: -0.5s; animation-duration: 7s; }
.star-node:nth-child(7) { animation-delay: -5.2s; animation-duration: 5.5s; }
.star-node:nth-child(8) { animation-delay: -2.9s; animation-duration: 8s; }
.star-node:nth-child(9) { animation-delay: -6.1s; animation-duration: 6.5s; }
.star-node:nth-child(10) { animation-delay: -1.3s; animation-duration: 7.5s; }
.star-node:nth-child(11) { animation-delay: -4.6s; animation-duration: 5s; }
.star-node:nth-child(12) { animation-delay: -3.2s; animation-duration: 9s; }
.star-node:nth-child(13) { animation-delay: -0.8s; animation-duration: 6s; }
.star-node:nth-child(14) { animation-delay: -5.7s; animation-duration: 7s; }
.star-node:nth-child(15) { animation-delay: -2.5s; animation-duration: 8.5s; }

.star-bright {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.star-glow {
  animation: pulse-glow 10s ease-in-out infinite;
}

.star-glow:nth-child(2) { animation-delay: -3s; }
.star-glow:nth-child(3) { animation-delay: -7s; }

.constellation-lines line {
  animation: line-fade 12s ease-in-out infinite;
}

.constellation-lines line:nth-child(odd) { animation-delay: -4s; }
.constellation-lines line:nth-child(3n) { animation-delay: -8s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; r: 6; }
  50% { opacity: 0.8; r: 9; }
}

@keyframes line-fade {
  0%, 100% { stroke-opacity: 0.25; }
  50% { stroke-opacity: 0.4; }
}

/* Prose typography (replaces @tailwindcss/typography) */
.prose {
  line-height: 1.75;
}

/* Optimal reading width for opinion text (~63 chars/line with Lora at prose-sm) */
@media (min-width: 768px) {
  #opinion-body .prose,
  #opinion-body-highlighted .prose {
    max-width: 38em !important;
    margin-left: auto;
    margin-right: auto;
  }
}

.dark #opinion-body .prose,
.dark #opinion-body-highlighted .prose {
  color: #f8fafc !important;
}

.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose p:first-child {
  margin-top: 0;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1em;
  margin: 1.25em 0;
  font-style: italic;
  color: #4b5563;
}

.dark .prose blockquote {
  border-color: rgba(147, 197, 253, 0.25);
  color: #94a3b8;
}

.prose em {
  font-style: italic;
}

.prose strong {
  font-weight: 600;
}

.prose ul, .prose ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin: 0.25em 0;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.prose h1 { font-size: 1.5em; }
.prose h2 { font-size: 1.25em; }
.prose h3 { font-size: 1.125em; }

.prose-sm {
  font-size: 0.875rem;
}

/* CourtListener opinion HTML rendering */
.opinion-html pre {
  white-space: pre-line;
  word-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.75;
  margin: 0;
}

.opinion-html a {
  color: #2563eb;
  text-decoration: underline;
}

.opinion-html a:hover {
  color: #1d4ed8;
}

.dark .opinion-html a {
  color: #60a5fa;
}

.dark .opinion-html a:hover {
  color: #93c5fd;
}

/* ── Sidebar Tab Buttons ────────────────────────────────── */
#tab-sidebar .tab-btn {
  border-left-width: 3px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#tab-sidebar .tab-btn svg {
  color: var(--color-gray-400);
  transition: color 0.15s ease;
}

#tab-sidebar .tab-btn:hover:not(:disabled) {
  background: var(--color-gray-50);
}

#tab-sidebar .tab-btn:hover:not(:disabled) svg {
  color: var(--color-gray-600);
}

.dark #tab-sidebar .tab-btn:hover:not(:disabled) {
  background: #182338;
}

#tab-sidebar .tab-btn.tab-active svg {
  color: var(--color-blue-500);
}

#tab-sidebar .tab-btn.tab-active .tab-count {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.dark #tab-sidebar .tab-btn.tab-active svg {
  color: var(--color-blue-400);
}

.dark #tab-sidebar .tab-btn.tab-active .tab-count {
  background: color-mix(in srgb, var(--color-blue-400) 20%, transparent);
  color: var(--color-blue-300);
}

/* ── Mobile bottom tab bar ──────────────────────────────── */
.mobile-tab-btn.tab-active {
  color: var(--color-blue-600);
}
.mobile-tab-btn.tab-active svg {
  stroke-width: 2;
}
.dark .mobile-tab-btn {
  color: var(--color-gray-500);
}
.dark .mobile-tab-btn.tab-active {
  color: var(--color-blue-400);
}
.dark #matter-mobile-tabs {
  background: rgba(17, 24, 39, 0.95);
  border-color: var(--color-gray-700);
}
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hide scrollbar on mobile tab bar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom tooltips */
.app-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.app-tooltip.visible {
  opacity: 1;
}

.app-tooltip.tooltip-fact {
  background: #065f46;
  color: #d1fae5;
}

.app-tooltip.tooltip-reasoning {
  background: #581c87;
  color: #f3e8ff;
}

.app-tooltip.tooltip-holding {
  background: #713f12;
  color: #fef9c3;
}

.app-tooltip.tooltip-default {
  background: #1f2937;
  color: #f3f4f6;
}

.tooltip-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  margin-right: 4px;
  margin-bottom: 4px;
  vertical-align: middle;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip-pill-element {
  background: rgba(255, 255, 255, 0.2);
}

.tooltip-pill-factor {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 500;
}

.tooltip-text {
  display: block;
}

/* ── Skeleton loading cards ────────────────────────────────── */
.skeleton-bone {
  background: #dfe2e8;
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;
}

.skeleton-bone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: shimmer 1.8s ease-in-out infinite;
}

.dark .skeleton-bone {
  background: rgba(147, 197, 253, 0.08);
}

.dark .skeleton-bone::after {
  background: linear-gradient(90deg, transparent 0%, rgba(147, 197, 253, 0.08) 50%, transparent 100%);
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Case-sorting loading animation ──────────────────────── */
.sorting-anim {
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  height: 24rem;
  position: relative;
  /* Clip content AND fade edges */
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 90%, transparent 100%);
}

.sorting-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  will-change: transform;
}

.sorting-card-inner {
  background: #eef0f4;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.06);
}

.sorting-card-accent {
  border-left: 3px solid var(--color-blue-200, #bfdbfe);
}

.sorting-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sorting-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sorting-card-score {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  background: var(--color-teal-100, #ccfbf1);
  color: var(--color-teal-800, #115e59);
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
}

.sorting-card-cite {
  font-size: 0.6875rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

.sorting-card-holding {
  font-size: 0.75rem;
  color: #4b5563;
  margin-top: 0.25rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sorting-card-snippet {
  margin-top: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sorting-snippet-line {
  height: 0.375rem;
  background: #dfe2e8;
  border-radius: 0.125rem;
}

.sorting-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.sorting-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.5rem 0.0625rem 0.3125rem;
  border-radius: 9999px;
  color: white;
  background: var(--pill-color, #6b7280);
}

.sorting-pill-check {
  width: 0.6875rem;
  height: 0.6875rem;
}

/* Dark mode */
.dark .sorting-card-inner {
  background: #131c2b;
  border-color: rgba(147, 197, 253, 0.1);
}
.dark .sorting-card-accent { border-left-color: rgba(147, 197, 253, 0.2); }
.dark .sorting-card-name { color: #e5e7eb; }
.dark .sorting-card-cite { color: #9ca3af; }
.dark .sorting-card-holding { color: #9ca3af; }
.dark .sorting-snippet-line { background: rgba(147, 197, 253, 0.08); }

/* Tab panel fade-in when shown */
[data-tab-panel]:not(.hidden) {
  animation: tab-fade-in 150ms ease-out;
}
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile reader mode — nav and tab bar scroll away, only case info sticks */
@media (max-width: 767px) {
  body.reader-open > nav {
    display: none !important;
  }
  body.reader-open #tab-bar-mobile,
  body.reader-open #matter-header,
  body.reader-open #matter-mobile-tabs {
    display: none !important;
  }
  body.reader-open #opinion-header {
    position: relative !important;
    top: auto !important;
    z-index: 1;
  }
  body.reader-open .page-marker {
    top: var(--page-marker-top, 0px) !important;
  }
  .mobile-reader-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 0 var(--color-gray-50);
  }
  .dark .mobile-reader-header {
    border-bottom-color: rgba(147, 197, 253, 0.15);
  }
}

/* ── Print styles ────────────────────────────────────────── */
/* Designed for "Print Case" with true reporter pagination.
   .page-marker divs already exist at reporter page boundaries with
   data-page attributes. Adding page-break-before on them produces
   one printed page per reporter page.

   Page-range printing: add .print-page-hidden to content outside
   the desired range before calling window.print(). The CSS below
   hides those elements. */

@media print {
  @page { margin: 0.75in 1in; }

  /* ── Hide app chrome ── */
  nav, #tab-sidebar, #matter-sidebar, #matter-header, #matter-mobile-tabs,
  #tab-bar-mobile, #reporter-switcher, #highlights-container,
  #native-page-bubble, #mobile-reader-spacer, #card-ticker, #card-ticker-source,
  #analysis-banner, .app-tooltip, .print-hide { display: none !important; }

  /* ── Force light theme with pure black text ── */
  body, body.dark { background: white !important; color: #000 !important; }
  .prose, .prose *, .opinion-html, .opinion-html *, #opinion-body, #opinion-body * { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline !important; }

  /* ── Opinion reader: fill the page ── */
  [data-tab-panel] { display: none !important; }
  #opinion-reader-panel, #opinion-reader-panel.hidden {
    display: block !important;
    position: static !important;
    width: 100% !important;
    overflow: visible !important;
  }
  #opinion_reader { overflow: visible !important; }
  #opinion-header { display: none !important; }
  #opinion-body {
    padding: 0 !important;
    overflow: visible !important;
  }
  #opinion-body .prose, #opinion-body .opinion-html {
    max-width: none !important;
    margin: 0 !important;
  }

  /* ── Per-page sections (built by print_case_controller) ── */
  .print-pages {
    /* Container for restructured per-page sections */
  }
  /* Each section = one reporter page = one printed page.
     min-height fills the page; content area on letter paper
     with 0.75in top/bottom margins = 9.5in. */
  .print-page {
    page-break-after: always;
    break-after: page;
  }
  .print-page-first {
    display: flex;
    flex-direction: column;
    min-height: 9in;
  }
  .print-page:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ── Page markers inside sections ── */
  .page-marker {
    position: static !important;
    top: auto !important;
    display: flex !important;
    background: none !important;
    border: none !important;
    border-bottom: 0.5pt solid #999 !important;
    padding: 0 0 3pt 0 !important;
    margin: 0 0 9pt 0 !important;
    font-size: 9pt !important;
    color: #555 !important;
    z-index: auto !important;
    page-break-before: auto !important;
    break-before: auto !important;
    column-span: all;
  }
  .page-marker.hidden { display: none !important; }
  .page-marker .sm\:hidden { display: none !important; }
  .page-marker .hidden.sm\:inline { display: inline !important; }

  /* ── Typography — user-configurable via Settings > Print Layout ── */
  body { font-family: var(--print-font, Georgia, "Times New Roman", serif) !important; font-size: var(--print-size, 11pt) !important; line-height: var(--print-line-spacing, 1.4) !important; }
  .prose, .prose-sm { font-size: var(--print-size, 11pt) !important; line-height: var(--print-line-spacing, 1.4) !important; }
  .print-page:not(.print-page-first) { column-count: var(--print-columns, 1); column-gap: 0.3in; }
  .prose p, .opinion-html p { orphans: 3; widows: 3; margin-top: 0.75em !important; margin-bottom: 0.75em !important; text-align: var(--print-align, left); }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }

  /* ── Packet: controls hidden, cases flow continuously ── */
  .print-packet-controls { display: none !important; }
  .print-packet-body { background: white !important; }
  .print-packet-content { overflow: visible !important; }

  /* ── Packet cover page ── */
  .packet-cover-page {
    display: flex;
    flex-direction: column;
    min-height: 9in;
  }
  .packet-cover-top {
    padding: 1in 0 0.5in;
    border-bottom: 1pt solid #ccc;
    margin-bottom: 0.4in;
  }
  .packet-cover-matter {
    font-size: 18pt;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin-bottom: 0.1in;
  }
  .packet-cover-meta {
    font-size: 11pt;
    color: #666;
    margin-bottom: 0.05in;
  }
  .packet-cover-date {
    font-size: 10pt;
    color: #999;
  }
  .packet-cover-facts {
  }
  .packet-cover-facts-label {
    font-size: 9pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 0.1in;
  }
  .packet-cover-facts-text {
    font-size: 10.5pt;
    line-height: 1.5;
    color: #333;
  }
  .packet-cover-footer {
    border-top: 0.5pt solid #ccc;
    padding-top: 0.15in;
    text-align: left;
    margin-top: auto;
  }
  .packet-cover-brand {
    font-size: 11pt;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.05in;
  }
  .packet-cover-disclaimer {
    font-size: 8pt;
    color: #999;
    line-height: 1.4;
  }

  /* ── Table of cases ── */
  .packet-toc {
    padding: 0.3in 0;
  }
  .packet-toc-title {
    font-size: 14pt;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.3in;
    padding-bottom: 0.1in;
    border-bottom: 1pt solid #ccc;
  }
  .packet-toc-table {
    width: 100%;
    border-collapse: collapse;
  }
  .packet-toc-row td {
    padding: 4pt 0;
    vertical-align: top;
    border-bottom: 0.5pt solid #eee;
  }
  .packet-toc-num {
    width: 1.5em;
    font-size: 10pt;
    color: #999;
    text-align: right;
    padding-right: 6pt !important;
  }
  .packet-toc-case {
    font-size: 10pt;
  }
  .packet-toc-name {
    font-weight: 600;
    color: #111;
    display: block;
  }
  .packet-toc-cite {
    font-size: 9pt;
    color: #666;
    display: block;
  }
  .packet-toc-elements {
    display: block;
    font-size: 8pt;
    color: #888;
    margin-top: 1pt;
  }
  .packet-toc-score {
    width: 3em;
    text-align: right;
    font-size: 10pt;
    font-weight: 600;
    color: #555;
  }

  /* Each case in the packet starts on a new page */
  .packet-case + .packet-case {
    page-break-before: always;
    break-before: page;
  }

  /* Case title page */
  .packet-case-header {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .packet-title {
    text-align: center;
    padding: 0.3in 0 0.4in;
    display: flex;
    flex-direction: column;
    min-height: 9in;
  }
  .packet-title-name {
    font-size: 16pt;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin-bottom: 0.15in;
  }
  .packet-title-cite {
    font-size: 13pt;
    color: #333;
    margin-bottom: 0.15in;
  }
  .packet-title-court {
    font-size: 11pt;
    color: #666;
    margin-bottom: 0.3in;
  }
  .packet-title-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4pt;
    margin-bottom: 0.4in;
  }
  .packet-title-highlights {
    text-align: left;
    max-width: none;
    margin: 0;
    border-top: 0.5pt solid #ccc;
    padding-top: 0.25in;
    column-count: var(--print-columns, 1);
    column-gap: 0.3in;
  }
  .packet-highlight {
    font-size: 9.5pt;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0.15in;
  }
  .packet-highlight-label {
    font-weight: 600;
    color: #555;
  }
  .packet-highlight-page {
    font-weight: 400;
    color: #888;
    font-style: italic;
  }

  .packet-opinion-body {
    overflow: visible !important;
    padding: 0 !important;
  }
  .packet-opinion-body .prose {
    max-width: none !important;
    margin: 0 !important;
  }

  /* ── Highlights: print-friendly ── */
  [data-highlight-type] {
    background: none !important;
    text-decoration: underline;
    text-decoration-color: #999;
    text-underline-offset: 2pt;
  }
}

/* ----- Embedded outline graph (matter outline tab) ----- */

.graph-embed {
  position: relative;
  border-radius: 0.875rem;
  background: linear-gradient(180deg, #0a0e1a 0%, #111827 50%, #1a1f3a 100%);
  border: 1px solid rgba(147, 197, 253, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 12px 36px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.graph-embed .graph-demo-scroll {
  padding: 1rem 1rem 1.25rem;
  overflow: hidden;
  height: calc(100vh - 14rem);
  height: calc(100dvh - 14rem);
  min-height: 380px;
}

.graph-embed--empty {
  padding: 3rem 2rem;
  text-align: center;
}
.graph-empty-message p {
  margin: 0;
  color: rgba(186, 211, 245, 0.65);
}
.graph-empty-message .graph-empty-hint {
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  color: rgba(186, 211, 245, 0.45);
}
.graph-empty-message strong {
  color: rgba(186, 211, 245, 0.85);
  font-weight: 600;
}

/* Compact-mode tweaks for the smaller embedded nodes */
.graph-embed .node              { padding: 0.3rem 0.6rem; border-radius: 10px; }
.graph-embed .node[data-collapse-key] { padding-right: 1.4rem; }
.graph-embed .node-title        { font-size: 0.78rem; }
.graph-embed .node-label        { font-size: 0.5rem; margin-bottom: 0; }
.graph-embed .node--issue       { padding: 0.55rem 0.85rem; }
.graph-embed .node--issue .node-title { font-size: 0.92rem; }
.graph-embed .node--factor      { padding: 0.25rem 0.6rem; }
.graph-embed .node--factor .node-title { font-size: 0.72rem; }
.graph-embed .node--case        { padding: 0.2rem 0.55rem; gap: 0.45rem; }
.graph-embed .node--case .case-name { font-size: 0.65rem; }
.graph-embed .node--case .case-meta { font-size: 0.55rem; }
.graph-embed .node-chevron      { right: 0.4rem; width: 10px; height: 10px; }
.graph-embed .node-hidden-count { font-size: 0.55rem; right: 1.3rem; bottom: 0.2rem; }

/* Top-right expand-to-fullscreen button */
.graph-embed-expand {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(147, 197, 253, 0.2);
  color: rgba(186, 211, 245, 0.7);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.graph-embed-expand svg { pointer-events: none; }
.graph-embed-expand:hover {
  color: #f1f5f9;
  background: rgba(30, 41, 90, 0.7);
  border-color: rgba(147, 197, 253, 0.5);
}

.graph-extras-toggle {
  position: absolute;
  top: 0.6rem;
  right: 2.8rem;  /* leave room for the expand button at right: 0.6rem */
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(147, 197, 253, 0.2);
  color: rgba(186, 211, 245, 0.7);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.graph-extras-toggle svg { pointer-events: none; }
.graph-extras-toggle:hover {
  color: #f1f5f9;
  background: rgba(30, 41, 90, 0.7);
  border-color: rgba(147, 197, 253, 0.5);
}
.graph-extras-toggle.is-active {
  color: #f1f5f9;
  background: rgba(59, 130, 246, 0.35);
  border-color: rgba(96, 165, 250, 0.6);
}
.graph-embed--modal .graph-extras-toggle {
  right: 0.6rem;  /* modal has no expand button */
}

/* Fullscreen graph overlay (triggered by .graph-embed-expand) */

.graph-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: graphOverlayIn 0.18s ease-out;
}

@keyframes graphOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.graph-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(6px);
}

.graph-overlay-container {
  position: relative;
  width: 100%;
  max-width: min(95vw, 1600px);
  height: calc(100vh - 4rem);
  display: flex;
}

.graph-overlay .graph-embed--modal {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.graph-overlay .graph-embed--modal .graph-demo-scroll {
  flex: 1;
  overflow: hidden;
  padding: 1.5rem 1.5rem 2rem;
}

.graph-overlay-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 30;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(147, 197, 253, 0.22);
  color: rgba(186, 211, 245, 0.8);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.graph-overlay-close:hover {
  color: #f1f5f9;
  background: rgba(30, 41, 90, 0.8);
  border-color: rgba(147, 197, 253, 0.5);
}
.graph-overlay-close svg { pointer-events: none; }

/* Active state on the Graph toggle button */
button.is-active[data-outline-graph-toggle-target="button"] {
  background: #1f2937;
  border-color: #1f2937;
  color: #f9fafb;
}
button.is-active[data-outline-graph-toggle-target="button"]:hover {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

/* ----- Graph demo (/graphdemo) ----- */

.graph-demo {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.graph-demo-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.5rem 1.25rem;
  flex-wrap: wrap;
}

.graph-demo-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.55);
  font-weight: 600;
}

.graph-demo-title {
  margin: 0.25rem 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}

.graph-demo-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: rgba(186, 211, 245, 0.7);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  backdrop-filter: blur(10px);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 0.15rem;
}
.legend-dot--met    { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.legend-dot--notmet { background: transparent; border: 1px dashed #f87171; }

.legend-divider {
  width: 1px;
  height: 14px;
  background: rgba(147, 197, 253, 0.25);
  margin: 0 0.25rem;
}

.legend-hint {
  font-style: italic;
  color: rgba(186, 211, 245, 0.55);
}

.graph-demo-scroll {
  position: relative;
  z-index: 10;
  flex: 1;
  overflow: hidden;
  padding: 1rem 2.5rem 3rem;
}

.graph-canvas {
  position: relative;
}

.graph-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.node {
  position: absolute;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(147, 197, 253, 0.18);
  backdrop-filter: blur(12px);
  padding: 0.4rem 0.75rem;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(59, 130, 246, 0.05);
  transition:
    left 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  will-change: left, top, transform;
}

.node:hover {
  transform: translateY(-1px);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(59, 130, 246, 0.18);
}

.node[data-collapse-key] { cursor: pointer; padding-right: 1.7rem; }
.node--case { color: inherit; text-decoration: none; }
a.node--case { cursor: pointer; }
a.node--case:hover {
  transform: translateY(-1px);
  border-color: var(--accent, rgba(147, 197, 253, 0.55));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 30px var(--accent, rgba(59, 130, 246, 0.18));
}
a.node--case:hover .case-name { color: #ffffff; }

.node-chevron {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  color: rgba(186, 211, 245, 0.55);
  transition: transform 0.18s ease, color 0.18s ease;
}
.node-chevron svg { width: 100%; height: 100%; display: block; }
.node-chevron.is-collapsed { transform: translateY(-50%) rotate(-90deg); color: rgba(186, 211, 245, 0.85); }

.node--issue .node-chevron { right: 0.8rem; }

.node-hidden-count {
  position: absolute;
  bottom: 0.25rem;
  right: 1.6rem;
  font-size: 0.6rem;
  color: rgba(186, 211, 245, 0.55);
  font-style: italic;
}

/* Detail content shown only at higher zoom (semantic zoom).
   max-height in em is more reliable than -webkit-line-clamp inside
   nested flex containers (line-clamp can fail to constrain height
   when the box is a child of a flex item, which leaks content into
   adjacent nodes and breaks the measurement-based layout). */
.node-desc {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(186, 211, 245, 0.75);
  display: block;
  max-height: calc(1.35em * 3);
  overflow: hidden;
}
.node--issue .node-desc {
  font-size: 0.78rem;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  max-height: calc(1.35em * 4);
}
.node--factor .node-desc {
  font-size: 0.66rem;
  margin-top: 0.2rem;
  max-height: calc(1.35em * 2);
}
.case-holding {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1.3;
  color: rgba(186, 211, 245, 0.7);
  display: block;
  max-height: calc(1.3em * 2);
  overflow: hidden;
}

.node.is-collapsed {
  background: rgba(15, 23, 42, 0.55);
  border-style: dashed;
  border-color: rgba(147, 197, 253, 0.28);
}

.node-label {
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.55);
  font-weight: 600;
  margin-bottom: 0.05rem;
}

.node-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.15;
  color: #f1f5f9;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.node-meta {
  font-size: 0.7rem;
  color: rgba(186, 211, 245, 0.6);
  margin-top: 0.15rem;
}

.node--issue {
  background: linear-gradient(135deg, rgba(30, 41, 90, 0.85), rgba(15, 23, 42, 0.85));
  border-color: rgba(147, 197, 253, 0.35);
  padding: 0.7rem 1rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(96, 165, 250, 0.18);
}
.node--issue .node-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.25;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.node--issue .node-label { color: rgba(147, 197, 253, 0.7); }

.node--element {
  border-left: 3px solid var(--accent, #60a5fa);
  background:
    linear-gradient(90deg, var(--accent-fill, rgba(59,130,246,0.12)) 0%, rgba(15, 23, 42, 0.78) 60%);
}
.node--element .node-label { color: var(--accent, #60a5fa); opacity: 0.85; }

.node--factor {
  padding: 0.3rem 0.7rem;
}
.node--factor .node-title {
  font-size: 0.78rem;
  font-weight: 500;
  -webkit-line-clamp: 2;
}
.node--factor .node-label { display: none; }
.node--factor::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent, #60a5fa);
  transform: translateY(-50%);
  box-shadow: 0 0 12px var(--accent, #60a5fa);
}

.node--case {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.65rem;
  background: rgba(15, 23, 42, 0.65);
}

.case-marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent, #60a5fa);
  box-shadow: 0 0 10px var(--accent, #60a5fa);
}

.node--case-not_met .case-marker {
  background: transparent;
  border: 1px dashed var(--accent, #f87171);
  box-shadow: none;
}

.node--case-not_met {
  border-style: dashed;
  border-color: rgba(147, 197, 253, 0.22);
}

/* "Related cases" column — high-scoring cases that aren't directly
   cited by the synthesis. Dimmer than the primary cases. */
.node--extra {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(147, 197, 253, 0.13);
  opacity: 0.78;
}
.node--extra .case-marker {
  width: 6px;
  height: 6px;
  opacity: 0.7;
}
.node--extra .case-name {
  font-weight: 500;
  font-size: 0.66rem;
  color: rgba(241, 245, 249, 0.85);
}
.node--extra .case-meta {
  font-size: 0.55rem;
  color: rgba(186, 211, 245, 0.45);
}
a.node--extra:hover {
  opacity: 1;
  border-color: var(--accent, rgba(147, 197, 253, 0.5));
}

.case-body { min-width: 0; flex: 1; }

.case-name {
  font-size: 0.72rem;
  font-weight: 600;
  font-style: italic;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.case-meta {
  font-size: 0.6rem;
  color: rgba(186, 211, 245, 0.55);
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-meta span + span::before {
  content: '·';
  margin-right: 0.4rem;
  opacity: 0.6;
}