/* Shared design tokens — matches priora.html marketing site. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0a0a0a;
  --bg-elev: #111111;
  --bg-elev-2: #161616;
  --fg: #f5f3ee;
  --fg-dim: rgba(245,243,238,0.6);
  --fg-faint: rgba(245,243,238,0.32);
  --line: rgba(245,243,238,0.12);
  --line-strong: rgba(245,243,238,0.24);
  --accent: #ec4899;
  --accent-soft: rgba(236,72,153,0.12);
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 500; font-size: 14px;
  border: 1px solid transparent;
  transition: transform .15s, background .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--accent); color: #0a0a0a; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-google {
  background: #fff; color: #1f1f1f;
  padding: 12px 20px 12px 16px;
  border: 1px solid #dadce0;
}
.btn-google:hover { background: #f8f9fa; transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; justify-content: center; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; color: var(--fg-dim);
  font-family: 'JetBrains Mono', monospace;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.pill { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.pill-good { background: rgba(52,211,153,0.12); color: var(--good); }
.pill-warn { background: rgba(251,191,36,0.12); color: var(--warn); }
.pill-bad  { background: rgba(248,113,113,0.12); color: var(--bad); }
.pill-mute { background: var(--line); color: var(--fg-dim); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* Horizontal-scroll container that hides its scrollbar visually.
   Trackpad swipe / shift+mousewheel still scrolls. */
.scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.scroll-x::-webkit-scrollbar { display: none; height: 0; width: 0; }

/* Styled column-header tooltips (data-tooltip set by app.js from title attr) */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--fg);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  z-index: 1000;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,0.6);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--line-strong);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  z-index: 1000;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}