@import url("../reference-kit/kit.css");

.preview-main {
  width: min(100%, var(--content-wide));
  margin-inline: auto;
  padding: var(--space-16) var(--gutter) var(--space-24);
}

.preview-nav {
  display: flex;
  flex-wrap: wrap;
  margin-block: var(--space-6) var(--space-16);
  gap: var(--space-2);
}

.preview-nav a {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-12);
  text-decoration: none;
}

.preview-nav a[aria-current="page"] {
  border-color: var(--color-signal);
  background: var(--color-signal-soft);
  color: var(--color-text);
}

.fixture {
  margin-block-end: var(--space-12);
}

.fixture__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-4);
  gap: var(--space-4);
}

.fixture__head h2 {
  margin: 0;
  font-size: var(--font-size-20);
}

.fixture__head span {
  color: var(--color-text-tertiary);
  font: 500 var(--font-size-10)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.fixture__stage {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.ratio-field {
  display: grid;
  min-height: 24rem;
  grid-template-columns: 7fr 2.4fr .6fr;
}

.ratio-field > div {
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
  font: 500 var(--font-size-11)/1.35 var(--font-mono);
}

.ratio-field__navy { background: var(--navy-900); color: var(--neutral-50); }
.ratio-field__light { background: var(--neutral-100); color: var(--neutral-900); }
.ratio-field__signal { background: var(--cyan-500); color: var(--navy-950); }

.palette-line {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  min-height: 12rem;
}

.palette-line > div {
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  color: white;
  font: 500 var(--font-size-10)/1.3 var(--font-mono);
}

.palette-line > div:nth-child(n+5) { color: var(--navy-950); }

.type-poster {
  padding: clamp(2rem, 7vw, 6rem);
}

.type-poster__display {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: .92;
}

.type-poster__display em {
  color: var(--color-signal-strong);
  font-style: normal;
}

.type-poster__support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block-start: var(--space-16);
  gap: var(--space-10);
}

.type-poster__support p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.type-scale {
  padding: var(--space-8);
}

.type-scale > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: baseline;
  border-block-end: 1px solid var(--color-border);
  padding-block: var(--space-5);
  gap: var(--space-5);
}

.type-scale code { color: var(--color-text-tertiary); font-size: var(--font-size-10); }
.type-scale p { margin: 0; }

.component-field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 22rem;
}

.component-field__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline-end: 1px solid var(--color-border);
  padding: var(--space-6);
}

.component-field__cell:last-child { border-inline-end: 0; }
.component-field__cell--light { background: var(--neutral-50); color: var(--neutral-900); }
.component-field__cell--raised { background: var(--navy-700); }
.component-field__cell--grid { background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 2rem 2rem; }

.state-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--space-8);
  gap: var(--space-4);
}

.state-card {
  min-height: 10rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  padding: var(--space-4);
}

.state-card strong { display: block; margin-block: var(--space-8) var(--space-2); }
.state-card p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-12); }

.motion-field {
  position: relative;
  min-height: 24rem;
  background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 3rem 3rem;
}

.motion-axis {
  position: absolute;
  inset-inline: 12%;
  inset-block-start: 50%;
  height: 1px;
  background: var(--color-border-strong);
}

.motion-node {
  position: absolute;
  inset-block-start: calc(50% - .45rem);
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: var(--shadow-signal);
  animation: preview-scan 3.2s var(--ease-standard) infinite alternate;
}

.motion-panel {
  position: absolute;
  inset: 20% 18%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: rgb(11 31 58 / .86);
  padding: var(--space-6);
  animation: preview-reveal 3.8s var(--ease-enter) infinite;
}

.motion-panel span { color: var(--color-signal-strong); font: 500 var(--font-size-10)/1 var(--font-mono); }
.motion-panel h3 { max-width: 14ch; margin-block: var(--space-8) 0; font-size: var(--font-size-24); }

@keyframes preview-scan {
  from { inset-inline-start: 12%; }
  to { inset-inline-start: calc(88% - .9rem); }
}

@keyframes preview-reveal {
  0%, 12% { opacity: 0; transform: translateY(1rem); }
  35%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-.5rem); }
}

@media (max-width: 44rem) {
  .ratio-field { grid-template-columns: 1fr; }
  .ratio-field__navy { min-height: 15rem; }
  .palette-line { grid-template-columns: repeat(2, 1fr); }
  .type-poster__support, .component-field, .state-stack { grid-template-columns: 1fr; }
  .type-scale > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .component-field__cell { min-height: 10rem; border-inline-end: 0; border-block-end: 1px solid var(--color-border); }
}

@media print {
  .preview-nav { display: none; }
  .preview-main { padding: 0; }
  .fixture { break-inside: avoid; }
}