/* specimen.css - token-driven base for the fixed style specimen.
   Everything is scoped under .sp so nothing leaks into the host page.
   Tokens read from the style seed: --bg --fg --accent --accent2 --surface
   --radius --shadow --border --font --font-display --muted (all optional).
   Per-style files in /data/specimens/<id>.css override on top of this. */

.sp {
  --sp-bg: var(--bg, #ffffff);
  --sp-fg: var(--fg, #141414);
  --sp-accent: var(--accent, #2f5bea);
  --sp-accent2: var(--accent2, var(--sp-accent));
  --sp-accent-fg: var(--accent-fg, var(--bg, #ffffff));
  --sp-muted: var(--muted, color-mix(in srgb, var(--sp-fg) 64%, transparent));
  --sp-surface: var(--surface, color-mix(in srgb, var(--sp-fg) 5%, transparent));
  --sp-line: var(--line, color-mix(in srgb, var(--sp-fg) 14%, transparent));
  --sp-media: color-mix(in srgb, var(--sp-fg) 11%, transparent);
  --sp-radius: var(--radius, 8px);
  --sp-radius-card: min(var(--sp-radius), 28px);
  --sp-shadow: var(--shadow, none);
  --sp-border: var(--border, 1px solid var(--sp-line));
  --sp-font: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --sp-font-display: var(--font-display, var(--sp-font));
  --sp-gap: 28px;

  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  width: 100%;
  padding: 28px;
  background: var(--sp-bg);
  color: var(--sp-fg);
  font-family: var(--sp-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap);
}

.sp *,
.sp *::before,
.sp *::after { box-sizing: border-box; }

.sp :where(h1, h3, p) { margin: 0; font-weight: inherit; }
.sp :where(a) { color: inherit; text-decoration: none; }
.sp :where(nav) { display: contents; }
.sp :where(button, input) {
  font: inherit;
  color: inherit;
  margin: 0;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}
.sp :where(button) { cursor: pointer; }
.sp :focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* --- nav ------------------------------------------------------------ */
.sp-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 40px;
}
.sp-logo {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.sp-links { display: flex; align-items: center; gap: 22px; }
.sp-links a {
  font-size: 15px;
  color: var(--sp-muted);
}
.sp-links a:hover,
.sp-links a[aria-current="page"] { color: var(--sp-fg); }

/* --- buttons ---------------------------------------------------------- */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--sp-radius);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.sp-btn-sm { padding: 8px 14px; font-size: 14px; border-color: var(--sp-line); }
.sp-btn-sm:hover { border-color: var(--sp-fg); }
.sp-primary {
  background: var(--sp-accent);
  color: var(--sp-accent-fg);
  border-color: var(--sp-accent);
}
.sp-primary:hover { filter: brightness(1.08); }
.sp-secondary {
  background: transparent;
  color: var(--sp-fg);
  border: var(--sp-border);
}
.sp-secondary:hover { background: var(--sp-surface); }

/* --- hero ------------------------------------------------------------- */
.sp-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0 8px;
  max-width: 640px;
}
.sp-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-accent);
}
.sp-h1 {
  font-family: var(--sp-font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sp-lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--sp-muted);
  max-width: 34em;
}
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* --- cards ------------------------------------------------------------ */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--sp-surface);
  border: var(--sp-border);
  border-radius: var(--sp-radius-card);
  box-shadow: var(--sp-shadow);
  min-width: 0;
}
.sp-card p { font-size: 15px; color: var(--sp-muted); }
.sp-media {
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--sp-media);
  border-radius: min(var(--sp-radius), 12px);
  margin-bottom: 6px;
}
.sp-h3 {
  font-family: var(--sp-font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.sp-card-featured { border-color: var(--sp-accent); }
.sp-card-featured .sp-media { background: color-mix(in srgb, var(--sp-accent) 22%, var(--sp-media)); }
.sp-link {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-accent);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.sp-link:hover { border-bottom-color: currentColor; }

/* --- form ------------------------------------------------------------- */
.sp-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding: 20px;
  background: var(--sp-surface);
  border-radius: var(--sp-radius-card);
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
}
.sp-field > span { font-size: 13px; font-weight: 600; color: var(--sp-muted); }
.sp-input {
  width: 100%;
  padding: 11px 14px;
  border: var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--sp-bg);
  color: var(--sp-fg);
  font-size: 15px;
  line-height: 1.3;
}
.sp-input::placeholder { color: var(--sp-muted); opacity: 0.8; }
.sp-input:focus { border-color: var(--sp-accent); outline: none; }
.sp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.sp-check input {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--sp-accent);
}

/* --- stats ------------------------------------------------------------ */
.sp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 8px 0;
}
.sp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  border-left: 2px solid var(--sp-line);
}
.sp-stat b {
  font-family: var(--sp-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sp-stat span { font-size: 14px; color: var(--sp-muted); }

/* --- footer ----------------------------------------------------------- */
.sp-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sp-line);
  font-size: 14px;
  color: var(--sp-muted);
}
.sp-foot > span { margin-right: auto; }
.sp-foot .sp-links { gap: 18px; }
.sp-foot .sp-links a { font-size: 14px; }

/* --- motion: transitions exist only while the pointer is inside the specimen.
   Chrome can start transitions from user-agent values on first style pass
   (container queries), and a scaled poster or paused tab never finishes them. */
.sp:hover .sp-btn { transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, filter 0.15s; }
.sp:hover .sp-links a { transition: color 0.15s; }
.sp:hover .sp-link { transition: border-color 0.15s; }

/* --- narrow (container-based so scaled posters are unaffected) ---------- */
@container (max-width: 640px) {
  .sp-h1 { font-size: 36px; }
  .sp-lede { font-size: 17px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sp-card-featured { order: -1; grid-column: 1 / -1; }
  .sp-card-featured .sp-media { aspect-ratio: 16 / 6; }
  .sp-stats { gap: 12px; }
  .sp-stat b { font-size: 26px; }
  .sp-form { align-items: stretch; }
  .sp-check { padding-bottom: 0; }
  .sp-form .sp-btn { align-self: flex-start; }
  .sp-links { gap: 14px; }
}

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