/* LSTS 2026 — Design system matching CounselorSophie */

/* Satoshi font */
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/FMOLJUAQB5CXWAATWHUODP7FUQ4XAV4E/5JXI3D7WFWAMVJ4Z4ZTHSQSGVPTYYLZE/ZFQPKIWX5HK4NGQXSMUKAUYY2RHE6NIS.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --foreground: #0f172a;
  --muted-foreground: #64748b;
  --muted-foreground-70: #64748ba8;
  --background: #ffffff;
  --card: #ffffff;
  --border: #e2e8f0;
  --primary: #6344bd;
  --primary-foreground: #ffffff;
  --primary-20: #6344bd33;
  --muted: #f1f5f9;
  --muted-40: #f1f5f966;
  --reach: #ef4444;
  --reach-bg: #fef2f2;
  --target: #22c55e;
  --target-bg: #f0fdf4;
  --safety: #3b82f6;
  --safety-bg: #eff6ff;
}

* { box-sizing: border-box; }

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

/* Classification badges */
.badge-reach {
  background: var(--reach-bg);
  color: var(--reach);
  border: 1px solid #fecaca;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  display: inline-block;
}
.badge-target {
  background: var(--target-bg);
  color: #15803d;
  border: 1px solid #bbf7d0;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  display: inline-block;
}
.badge-safety {
  background: var(--safety-bg);
  color: var(--safety);
  border: 1px solid #bfdbfe;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  display: inline-block;
}

/* Round pills */
.pill { font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.375rem; border-radius: 0.25rem; display: inline-block; margin-right: 0.25rem; }
.pill-ed, .pill-ed1 { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.pill-ea, .pill-rea { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.pill-ed2 { background: #faf5ff; color: #9333ea; border: 1px solid #e9d5ff; }
.pill-rd { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.pill-rolling { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

/* Card hover */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--primary-20);
}

/* Muted background */
.bg-muted-40 { background: var(--muted-40); }

/* Table sort indicators */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { background: var(--muted); }
th[data-sort]::after { content: ' ↕'; opacity: 0.3; font-size: 0.75em; }
th[data-sort].sort-asc::after { content: ' ↑'; opacity: 0.7; }
th[data-sort].sort-desc::after { content: ' ↓'; opacity: 0.7; }

/* Responsive */
@media (max-width: 768px) {
  .desktop-table { display: none; }
  .mobile-cards { display: block !important; }
}
@media (min-width: 769px) {
  .mobile-cards { display: none !important; }
}

/* Print */
@media print {
  nav, footer, .no-print { display: none !important; }
}

/* Details/summary reset */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }