/*
 * work.karti.ai — layered on top of the shared radar/template/styles.css,
 * never instead of it.
 *
 * The two public sites are siblings, not clones: same near-black glass, same
 * card grid, same type scale, because they are the same person's work and
 * should look like it. What changes here is the accent (radar is emerald;
 * this page is a cooler indigo/sky, so the two are instantly distinguishable
 * in a tab strip or a screenshot) plus the two blocks this page has and the
 * radar doesn't — the stats strip and the "how this page is built" aside.
 *
 * Loaded as a second stylesheet rather than a forked copy of the base, so a
 * fix to the shared card/pill styling lands on both sites at once.
 */

:root {
  /* Indigo-400 / sky-300. Same lightness family as radar's emerald, so the
     existing contrast ratios against the near-black background carry over. */
  --accent: #818cf8;
  --accent-strong: #a5b4fc;
  --accent-tint: rgba(129, 140, 248, 0.15);
  --accent-edge: rgba(129, 140, 248, 0.4);
}

@media (prefers-color-scheme: light) {
  :root {
    --accent: #4f46e5;
    --accent-strong: #4338ca;
    --accent-tint: rgba(79, 70, 229, 0.12);
    --accent-edge: rgba(79, 70, 229, 0.35);
  }
}

/* The base stylesheet hardcodes emerald rgba() here rather than deriving it
   from --accent, so overriding the custom property alone would leave a green
   pill on an indigo page. Re-state the rule against the tint variables. */
.rd-pill--active {
  color: var(--accent-strong);
  border-color: var(--accent-edge);
  background: var(--accent-tint);
}

/* ===== Stats strip ======================================================= */

.wk-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--border);
  overflow: hidden;
}

@media (min-width: 640px) {
  .wk-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.wk-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.wk-stat-n {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.wk-stat-l {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-45);
}

/* ===== "How this page is built" ========================================== */

.wk-note {
  position: relative;
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.4rem 1.35rem;
  border: 1px solid var(--border);
  /* One lit edge in the accent — the page's only piece of pure decoration,
     and the thing that keeps this block from reading as an error banner. */
  border-left: 2px solid var(--accent-edge);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 46rem;
}

.wk-note-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.6rem;
}

.wk-note p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--fg-70);
  margin: 0;
}

/* ===== Footer ============================================================ */

.rd-footer p {
  margin: 0 0 0.5rem;
  max-width: 46rem;
}

.wk-footer-links {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-40);
}