/* ============================================================
   Claude Components — shared base
   Tokens copied from css/home-v5.1.css so every component sits in the same
   palette and type as the portfolio. Each component page is self-contained:
   it links this file, then adds its own styles inline.
   ============================================================ */
:root {
  --bg:                #000000;
  --bg-secondary:      #2a2a2a;
  --well:              #111111;   /* component page background: reads as a panel on the black stage */
  --content-primary:   #eeeeee;
  --content-secondary: #b4b4b4;
  --content-tertiary:  #b4b4b4;
  --content-contrast:  #000000;
  --border-primary:    #1f1f1f;

  --surface:        rgba(255, 255, 255, 0.08);
  --surface-hover:  rgba(255, 255, 255, 0.12);
  --chip-teal:      rgba(13, 255, 224, 0.24);
  --chip-orange:    rgba(240, 161, 69, 0.24);
  --chip-edge:      rgba(255, 255, 255, 0.24);
  --status-green:   #34c759;
  --status-amber:   #f0a145;
  --tick:           var(--content-secondary);
  --holo-glow:      0 0 6px rgba(255, 255, 255, 0.35), 0 2px 4px rgba(255, 255, 255, 0.25);

  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--well);
  color: var(--content-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                 /* the page is embedded in a fixed 905×600 panel: never scrolls */
}
a { color: inherit; }
button { font: inherit; color: inherit; }

/* the component sits centred in the panel */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100dvh;
  padding: 24px;
}

/* mono caption under / above a component ("/ NAME [0.1v]") */
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--content-primary);
  letter-spacing: 0.02em;
}
.label .dim { color: var(--content-tertiary); }

/* corner ticks: four 6px L-shapes hugging a box (same as the portfolio) */
.ticks { position: absolute; inset: 0; pointer-events: none; }
.ticks span { position: absolute; width: 6px; height: 6px; border: 0 solid var(--tick); }
.ticks span:nth-child(1) { top: 0;    left: 0;  border-top-width: 1px;    border-left-width: 1px; }
.ticks span:nth-child(2) { top: 0;    right: 0; border-top-width: 1px;    border-right-width: 1px; }
.ticks span:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 1px; border-left-width: 1px; }
.ticks span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* focus ring: visible for keyboard users only */
:focus-visible { outline: 1px solid var(--content-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}