/* ===== Reusable components v2 ===== */

/* Buttons — editorial pill, restrained. Single accent on primary. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: transparent;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  border-radius: 100px;
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  transition: all .25s var(--easing);
  text-decoration: none;
  line-height: 1;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn.ghost { border-color: transparent; color: var(--ink-mute); padding: 13px 4px; }
.btn.ghost:hover { color: var(--accent); }
.btn .arr { transition: transform .25s var(--easing); display: inline-block; }
.btn:hover .arr { transform: translateX(4px); }

/* Tag chips — single accent variant + neutral */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: none;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid var(--panel-stroke);
  color: var(--ink-mute);
  background: transparent;
}
.tag.mint, .tag.amber, .tag.violet, .tag.blue {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.tag.magenta { color: var(--crit); border-color: color-mix(in oklab, var(--crit) 35%, transparent); }

/* Stat block — display serif, restrained */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .v {
  font-family: var(--ff-display);
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 400;
}
.stat .v em { color: var(--accent); font-style: italic; }
.stat .l {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Corner-tick frame — quieter than v1 */
.tick-frame {
  position: relative;
  border: 1px solid var(--panel-stroke);
}
.tick-frame::before, .tick-frame::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--accent);
}
.tick-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tick-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Hatched placeholder */
.stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in oklab, var(--ink) 4%, transparent) 0px,
    color-mix(in oklab, var(--ink) 4%, transparent) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* Telemetry stream */
.tele {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.7;
}
.tele .row { display: flex; gap: 12px; align-items: baseline; }
.tele .ts    { color: var(--ink-dim); width: 78px; flex-shrink: 0; }
.tele .agent { color: var(--accent); width: 96px; flex-shrink: 0; }
.tele .agent.amber, .tele .agent.violet, .tele .agent.blue { color: var(--accent); }
.tele .msg { color: var(--ink-2); flex: 1; }
.tele .msg b { color: var(--ink); font-weight: 500; }

/* Marquee / scroller */
.marquee {
  display: flex;
  gap: 36px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.marquee-track {
  display: flex; gap: 36px;
  flex-shrink: 0;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Photo placeholder — quiet warm hatching */
.photo-slot {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in oklab, var(--ink) 4%, transparent) 0px,
      color-mix(in oklab, var(--ink) 4%, transparent) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(135deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--panel-stroke-strong);
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}