/* ============================================================================
   base.css — reset, root typography, scrollbars, focus, utilities
   ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* never scroll the body sideways */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Mono chrome: any element flagged .mono, plus all interactive chrome */
.mono,
button, input, select, textarea,
kbd, code, .num, .badge, .chip, .pill, .tag, .label, .eyebrow {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: var(--lh-tight); }

p { margin: 0; }

a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--ember-deep); }

img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

input, textarea, select {
  color: var(--ink);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

textarea { resize: none; }

/* --- focus visibility ------------------------------------------------------*/
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible,
.chip:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* --- scrollbars (warm, thin) ----------------------------------------------*/
* { scrollbar-width: thin; scrollbar-color: var(--border-lit) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-lit);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
  background-clip: content-box;
}

/* --- selection -------------------------------------------------------------*/
::selection { background: var(--ember); color: #0f0f12; }

/* ============================================================================
   Utility classes
   ==========================================================================*/

.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.muted  { color: var(--ink-muted); }
.dim    { color: var(--ink-dim); }
.faint  { color: var(--ink-faint); }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.grow  { flex: 1 1 auto; min-width: 0; }
.wrap  { flex-wrap: wrap; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance  { text-wrap: balance; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

.hairline { height: 1px; background: var(--border); border: 0; margin: 0; }

/* small pulsing "live" dot used across chrome */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(127,174,110,.6);
  animation: livePulse 2.4s var(--ease) infinite;
  flex: 0 0 auto;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,174,110,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(127,174,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,174,110,0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}