/* ==========================================================================
   WINNR — TOOLS PAGE (circle-icon grid)
   Replaces the previous big-card "bento" layout with one page of small
   round icon tiles (reference: a competitor's mobile home screen, all
   its tools shown as circles in one screen instead of large spaced-out
   cards). All page-specific classes are prefixed `tk-`, for "toolkit".

   SCOPE: this file is the ONLY place this page's look lives. It does
   NOT touch tokens.css or base.css -- the shared site nav/footer
   (tools/index.html) still use the site's normal Space Grotesk/Inter
   palette from tokens.css, unchanged. Content INSIDE `.tk-page` uses
   Archivo/Space Mono (loaded via its own <link> in the HTML, alongside
   -- not replacing -- the site's normal font link) but pulls its
   colors from tokens.css so it stays in step with the rest of the
   site's palette rather than a one-off hardcoded hex set.
   ========================================================================== */

.tk-page {
  background: var(--ink-950);
  color: var(--text-100);
  font-family: 'Archivo', Helvetica, sans-serif;
}

/* ---- Hero ---- */
.tk-hero { padding: 56px 0 8px; }
.tk-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  color: var(--lime-400);
}
.tk-h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.tk-sub { margin: 14px 0 0; max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--text-400); }

/* ---- Circle grid ---- */
.tk-section { padding: 44px 0 96px; }

.tk-circle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 18px;
  max-width: 620px;
}

.tk-circle-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: default;
}
a.tk-circle-tile { cursor: pointer; }
.tk-circle-tile:focus-visible { outline: 2px solid var(--lime-500); outline-offset: 4px; border-radius: 16px; }

.tk-circle {
  width: 76px;
  height: 76px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background-color var(--dur-fast);
}
.tk-circle svg { width: 28px; height: 28px; }

.tk-circle-tile--soon .tk-circle { background: var(--ink-800); color: var(--text-600); }
.tk-circle-tile--soon .tk-circle-name { color: var(--text-300); }

.tk-circle-tile--live .tk-circle { background: var(--lime-500-15); color: var(--lime-500); border-color: var(--lime-500-35); }
a.tk-circle-tile--live:hover .tk-circle,
a.tk-circle-tile--live:focus-visible .tk-circle {
  transform: translateY(-3px);
  border-color: var(--lime-500);
  background: var(--lime-500-15);
}

.tk-circle-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; max-width: 92px; }

.tk-circle-status {
  display: block;
  margin-top: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--text-600);
}

@media (max-width: 560px) {
  .tk-h1 { letter-spacing: -0.03em; }
  .tk-circle-grid { gap: 26px 10px; }
  .tk-circle { width: 64px; height: 64px; }
  .tk-circle svg { width: 24px; height: 24px; }
  .tk-circle-name { font-size: 12.5px; max-width: 78px; }
}