/* 31.05.26 02:28 AM / 02:28 — edited by Claude — create shared component primitives: buttons, cards, badges, pills, code blocks */

/* ============================================================================
   components.css — reusable UI primitives consumed by every page (mine and the
   peer's). Define once here; never copy-paste a styled button/card into a page.
   All visuals reference tokens.css. States (hover/focus/active/disabled) are
   real, not afterthoughts.
   ============================================================================ */

/* ---- Buttons (CONTRACT) ----------------------------------------------------
   .btn is the shared base; .btn--primary and .btn--ghost are the two variants.
   Min-height keeps a ≥44px tap target on touch. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.btn:active {
  transform: translateY(1px); /* tactile press */
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Primary: solid Cox-violet fill, dark ink. The main call to action. */
/* 31.05.26 02:29 AM / 02:29 — edited by Claude — tokenize button ink (#0a0b0d → var(--color-bg)) so it tracks the bg token under re-skin */
/* 10.06.26 03:13 AM / 03:13 — edited by Claude — resting CTA now wears the 4px
   hard --shadow-pop (sticker at rest → 6px lift on hover → flat on press). */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-bg); /* dark ink locked to the bg token for re-skin contrast */
  box-shadow: var(--shadow-pop);
}

/* 06.06.26 06:07 PM / 18:07 — edited by Claude — retro-terminal: primary CTA lifts into a soft accent phosphor halo on hover (was a plain drop shadow). */
/* 10.06.26 03:12 AM / 03:12 — edited by Claude — playful "sticker" press: hover
   now lifts the CTA diagonally onto the hard --shadow-pop-hover offset (replaces
   the 06.06 halo hover noted above); :active squashes it flat. Tactile, toylike,
   zero timing changes. */
.btn--primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-bg);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop-hover);
}

.btn--primary:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* Ghost: transparent with a border; fills subtly on hover. Secondary action. */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* Optional size modifier for prominent hero CTAs. Additive, not in contract. */
.btn--lg {
  min-height: 52px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

/* ---- Card (CONTRACT) -------------------------------------------------------
   Raised surface with a quiet border that brightens on hover. Works whether the
   card is a plain block or an <a>. */
/* 06.06.26 06:07 PM / 18:07 — edited by Claude — retro-terminal: chunky 2px terminal-window border (was 1px hairline) so cards read as boxy CRT panels. */
.card {
  background-color: var(--color-surface);
  border: var(--border-thick) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

/* Only lift when the card is actually interactive (a link or button). */
/* 10.06.26 03:12 AM / 03:12 — edited by Claude — interactive cards now lift
   diagonally onto the hard pop shadow (sticker feel, matches the primary CTA);
   plain cards get a quiet border-brighten on hover so grids feel alive without
   faking clickability. */
a.card:hover,
.card--interactive:hover {
  border-color: var(--color-accent);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop-hover);
}

.card:hover {
  /* Fallback first for engines without color-mix (same pattern as chrome.css). */
  border-color: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-accent));
}

.card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.card__body {
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* ---- Badge (CONTRACT) ------------------------------------------------------
   Small rectangular status tag. Neutral by default; brand variants tint with
   the soft washes so the peer can label modes/roles on-brand. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.badge--claude { background-color: var(--color-claude-soft); color: var(--color-claude); border-color: transparent; }
.badge--codex  { background-color: var(--color-codex-soft);  color: var(--color-codex);  border-color: transparent; }
.badge--cox    { background-color: var(--color-accent-soft);  color: var(--color-cox);    border-color: transparent; }

/* ---- Pill (CONTRACT) -------------------------------------------------------
   Fully-rounded label/tag — used for categories, modes, nav-ish chips. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.pill--accent {
  background-color: var(--color-accent-soft);
  border-color: transparent;
  color: var(--color-cox);
}

/* ---- Code (CONTRACT) -------------------------------------------------------
   .code is inline; .code-block is a terminal-flavored block. The block can hold
   an absolutely-positioned copy button (.code-copy) at top-right. */
.code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
  white-space: nowrap;
}

/* 06.06.26 06:07 PM / 18:07 — edited by Claude — retro-terminal: code blocks now read as little CRT terminals — chunky 2px border + a faint scanline raster layered over the surface. Scanline is a static, very-low-opacity bg image (no animation → no noise, no perf cost). */
/* 10.06.26 03:12 AM / 03:12 — edited by Claude — terminal-WINDOW chrome: every
   code block now wears three traffic-light dots in the three brand colors
   (Claude coral / Codex teal / Cox violet — the in-joke: this terminal runs all
   three). One ::before + box-shadow, no extra markup; top padding makes room. */
.code-block {
  position: relative;
  display: block;
  padding: var(--space-4) var(--space-5);
  padding-top: calc(var(--space-4) + 16px);
  border: var(--border-thick) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-elevated);
  background-image: var(--scanline);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-x: auto;          /* long commands scroll instead of overflowing */
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.code-block::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--color-claude);
  box-shadow: 13px 0 0 var(--color-codex), 26px 0 0 var(--color-cox);
}

/* A muted prompt glyph the page can put before a command, e.g. <span class="code-prompt">$</span>. */
/* 10.06.26 03:12 AM / 03:12 — edited by Claude — prompt glyph violet → --color-ok
   terminal green: the classic "ready" prompt, and the green token's consumer. */
.code-prompt {
  color: var(--color-ok);
  user-select: none;         /* copying the command shouldn't grab the "$" */
  margin-right: var(--space-2);
}

/* Copy affordance — page wires the click; this only styles it. */
.code-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  opacity: 0;                /* reveal on hover/focus to keep the block clean */
  transition: opacity var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.code-block:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

.code-copy:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

/* ---- Install band ----------------------------------------------------------
   31.05.26 02:51 AM / 02:51 — edited by Claude — add reusable split copy+code panel used on the landing + install pages
   Sits on a .card. Copy on one side, a terminal block on the other; stacks on
   mobile, two columns on wider screens. */
.install-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

/* 31.05.26 03:51 AM / 03:51 — edited by Claude — grid items need min-width:0 (same fix as .grid-2/3/4 in base.css) so the white-space:pre .code-block shrinks to the track and scrolls internally instead of forcing the band past a 320px viewport */
.install-band > * {
  min-width: 0;
}

@media (min-width: 56rem) { /* ~896px */
  .install-band {
    grid-template-columns: 1.1fr 1fr;
    padding: var(--space-6);
  }
}

.install-band__code .code-block {
  /* A touch more breathing room than an inline command block. */
  padding: var(--space-5);
}

/* ---- Terminal status line (CONTRACT) ---------------------------------------
   06.06.26 06:13 PM / 18:13 — edited by Claude — shared "what it runs on" / status
   line, used by BOTH the footer (js/components.js) and the install page so the
   platform line has one owner and can't drift. Mono + muted, with an accent
   prompt glyph. Wraps normally — never a nowrap overflow on a 360px phone. */
.term-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  line-height: var(--leading-normal);
}

.term-line__glyph {
  color: var(--color-accent);
  margin-right: var(--space-1);
}

/* ---- Button row ------------------------------------------------------------
   31.05.26 02:53 AM / 02:53 — edited by Claude — add generic button-row primitive so CTA clusters don't reuse the hero-scoped class or inline flexbox
   A horizontal cluster of buttons that wraps on small screens. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--center {
  justify-content: center;
}