/* ============================================================
   atlas-thread.css — the thread that ties every lab back to
   the Edge Atlas (personal_atlas).
   ------------------------------------------------------------
   Purpose: labs keep their own face; this file adds the ONE
   shared element — a small fixed chip that says whose lab this
   is and links home — plus the Edge Atlas vocabulary as
   namespaced --at-* tokens for labs that want to consume it.

   Rules of the thread:
   - Self-contained. No dependency on the lab's own CSS,
     Tailwind, or theme. Safe to drop into any project.
   - Namespaced. Everything is .atlas-thread / --at-*; it can
     never collide with a lab's classes or tokens.
   - Dark-canonical, like the atlas. The chip is always warm
     charcoal + paper + chartreuse so it reads on ANY lab
     background (white tool UI or black fractal canvas alike)
     and ignores the lab's light/dark switching on purpose.

   Usage (2 steps):
   1. <link rel="stylesheet" href="/atlas-thread.css" />
   2. Drop the chip markup just before </body>:

      <a class="atlas-thread" href="https://github.com/sviat-barbutsa"
         aria-label="Part of Sviat Barbutsa's lab — back to the atlas">
        <span class="atlas-thread__mark" aria-hidden="true"></span>
        <span>sviat's lab</span>
        <span class="atlas-thread__sep" aria-hidden="true">/</span>
        <span class="atlas-thread__name">lab-name</span>
      </a>

      TODO: when the atlas website goes live, point href at it
      (one find-and-replace across labs).

   Optional: add data-position="right" on the chip to dock it
   bottom-right instead of bottom-left.
   Canonical copy lives in personal_atlas/styles/; labs carry
   duplicates in their public/ dir (independence over DRY —
   same call as the component kits).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:where(:root) {
  /* Edge Atlas raw palette, namespaced (see personal_atlas/styles/tokens.css) */
  --at-ink: #141412;        /* warm charcoal */
  --at-ink-2: #1b1b17;      /* raised charcoal */
  --at-paper: #ece9e2;      /* warm off-white */
  --at-chartreuse: #d4f34a; /* the signal hue, bright form */
  --at-olive: #4d5c08;      /* the signal hue, dark form */

  /* shared typography vocabulary (labs may consume these) */
  --at-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --at-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --at-mono-xs: 11px;          /* instrument labels: fixed, never fluid */
  --at-tracking-caps: 0.22em;

  /* motion, mirrored from the atlas */
  --at-dur-fast: 0.18s;
  --at-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- the chip ---------------------------------------------- */

.atlas-thread {
  position: fixed;
  inset: auto auto 16px 16px;              /* bottom-left default */
  z-index: 2147483000;                     /* above any lab UI */
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 9px 13px;

  background: var(--at-ink);
  color: var(--at-paper);
  border: 1px solid rgb(236 233 226 / 0.16); /* hairline: visible on black AND white */
  border-radius: 2px;                        /* Edge Atlas is sharp */

  font-family: var(--at-font-mono);
  font-size: var(--at-mono-xs);
  font-weight: 400;
  letter-spacing: var(--at-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;

  transition:
    border-color var(--at-dur-fast) var(--at-ease-out),
    transform var(--at-dur-fast) var(--at-ease-out);
}

.atlas-thread[data-position="right"] {
  inset: auto 16px 16px auto;
}

.atlas-thread__mark {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--at-chartreuse);        /* the one signal hue */
}

.atlas-thread__sep {
  color: rgb(236 233 226 / 0.35);
}

.atlas-thread__name {
  color: rgb(236 233 226 / 0.65);
  transition: color var(--at-dur-fast) var(--at-ease-out);
}

.atlas-thread:hover {
  border-color: rgb(212 243 74 / 0.55);
  transform: translateY(-1px);
}

.atlas-thread:hover .atlas-thread__name {
  color: var(--at-chartreuse);
}

.atlas-thread:focus-visible {
  outline: 2px solid var(--at-chartreuse);
  outline-offset: 2px;
}

/* ---- discipline -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .atlas-thread,
  .atlas-thread__name {
    transition: none;
  }
  .atlas-thread:hover {
    transform: none;
  }
}

@media print {
  .atlas-thread {
    display: none;
  }
}