/* ====================================================================
   KR-ATOMS — shared widgets that aren't scoped to any one page
   ====================================================================
   Extracted from home.css so the right rail's headings, blog cards'
   buttons + tags, and the kr-cursor blink all render correctly on every
   route — not just `/`. Loaded by BlogShellRender on every page so any
   `.kr-*` / `.rail-heading` site-wide picks up its base styling.
   ==================================================================== */

/* ─── shared rail heading ─── */

.rail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--io-font-display);
  font-size: var(--io-fs-micro);
  letter-spacing: 0.1em;
  color: var(--io-text-tertiary);
  text-transform: uppercase;
}
.rail-heading i { color: var(--io-accent); }
.rail-heading .label { color: var(--io-text-secondary); }
.rail-heading .rule { flex: 1; height: 1px; background: var(--io-border); }
.rail-heading .extra { font-size: 10px; color: var(--io-text-tertiary); }

/* ─── shared tag ─── */

.kr-tag {
  display: inline-block;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  color: var(--io-accent);
  background: var(--io-accent-subtle);
  border: 1px solid transparent;
  padding: 2px 8px;
  border-radius: var(--io-radius-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ─── shared button (kr-btn) ─── */

.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-sm);
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-sm);
  color: var(--io-text-secondary);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.kr-btn:hover { background: var(--io-surface-overlay); color: var(--io-text-primary); }
.kr-btn i { font-size: 0.9em; }

.kr-btn.primary {
  background: var(--io-accent);
  border-color: var(--io-accent);
  color: var(--io-on-accent);
  font-weight: 700;
}
.kr-btn.primary:hover {
  background: var(--io-accent-bright);
  border-color: var(--io-accent-bright);
  color: var(--io-on-accent);
  box-shadow: 0 0 8px var(--io-accent-glow);
}

.kr-btn.ghost { background: transparent; }
.kr-btn.ghost:hover { background: var(--io-surface-overlay); }

.kr-btn.icon { padding: 8px 10px; }

.kr-btn.sm { padding: 4px 8px; font-size: var(--io-fs-micro); }

/* ─── <cl>...</cl> shorthand → shimmer-swept inline span ───
   Sitewide. Any element with class="cl" (auto-emitted by Html.EscWithCl when
   the source has <cl> tags) renders as transparent text whose background is
   a 3-stop tertiary→primary→tertiary gradient swept horizontally — text
   itself shimmers, no surrounding box. Ported from
   I:/_AIVAULT/PRIMITIVES_HTML/shimmer_variants.html (variant 02). */

.cl {
  /* paint the text via background-clip so the gradient sweeps across the
     glyphs themselves, not behind them */
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--io-text-tertiary)  0%,
    var(--io-text-secondary) 30%,
    var(--io-text-primary)   50%,
    var(--io-text-secondary) 70%,
    var(--io-text-tertiary) 100%
  );
  background-size: 400px 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: cl-shimmer 3.2s linear infinite;
  /* keep typography from being changed — only the fill is animated */
  font-weight: inherit;
  font-family: inherit;
}

@keyframes cl-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* If the parent already has an accent color and the user wants a brighter
   sweep on those highlights, add .cl.accent — same shape, accent stops. */
.cl.accent {
  background: linear-gradient(
    90deg,
    var(--io-accent-dim)    0%,
    var(--io-accent)       35%,
    var(--io-accent-bright) 50%,
    var(--io-accent)       65%,
    var(--io-accent-dim)  100%
  );
  background-size: 400px 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: cl-shimmer 2.8s linear infinite;
}

/* ─── copy-toast — spawned by /static/js/copy-toast.js on data-copy click ─── */

.kr-copy-toast {
  position: fixed;
  z-index: 9999;
  padding: 4px 10px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  letter-spacing: 0.02em;
  color: var(--io-text-primary);
  background: var(--io-surface-sunken);
  border: 1px solid var(--io-accent-dim);
  border-radius: var(--io-radius-sm);
  box-shadow: 0 0 6px var(--io-accent-glow);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.kr-copy-toast.on { opacity: 1; transform: translateY(0); }
.kr-copy-toast.err { border-color: var(--io-error); color: var(--io-error); }

/* ─── shared blinking cursor ─── */

.kr-cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.85em;
  vertical-align: -0.05em;
  margin-left: 0.18em;
  background: var(--io-accent);
  box-shadow: 0 0 6px var(--io-accent-glow);
  animation: kr-cursor-blink 1.05s steps(1, end) infinite;
}
@keyframes kr-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}