/* Specimen renderers for the brand.weareinto.consulting publication layer.
   All typography and color use INTO tokens. Specimens demonstrate the rules. */

.specimens {
  margin-top: var(--into-space-13);
  border-top: 1px solid var(--into-line-soft);
  padding-top: var(--into-space-11);
  display: grid;
  gap: var(--into-space-13);
  max-width: none;
}

/* Inline specimens sit inside the article body, adjacent to the section
   they document. They use the article's full width and lean visual chrome. */
.specimens-inline {
  display: block;
  margin: var(--into-space-9) 0 var(--into-space-11);
  padding: var(--into-space-7) 0 0;
  border-top: 1px solid var(--into-line-soft);
  max-width: none;
  width: 100%;
}

.specimens-inline + .specimens-inline {
  margin-top: var(--into-space-7);
}

.specimens-inline .specimens-section + .specimens-section {
  margin-top: var(--into-space-11);
}

.specimens-reference-link {
  font-family: var(--into-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  margin: var(--into-space-5) 0 0;
}

.specimens-reference-link a {
  color: var(--into-accent);
  text-decoration-color: color-mix(in srgb, var(--into-accent) 38%, transparent);
  text-underline-offset: 0.2em;
}

.specimens-reference-link a:hover {
  text-decoration-color: var(--into-accent);
}

.site-token-section {
  scroll-margin-top: var(--into-space-9);
}

/* Responsive — narrow viewports collapse multi-column specimen rows so the
   sample side always gets enough width. */

@media (max-width: 48rem) {
  .specimen-type-row {
    grid-template-columns: 1fr;
    gap: var(--into-space-3);
  }

  .specimen-spacing-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "code value"
      "bar  bar";
    gap: var(--into-space-2);
  }
  .specimen-spacing-row > code { grid-area: code; }
  .specimen-spacing-row > span:nth-of-type(1) { grid-area: value; justify-self: end; }
  .specimen-spacing-row > .specimen-spacing-bar { grid-area: bar; }

  .specimen-motion-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name dur"
      "track track";
    gap: var(--into-space-2);
  }
  .specimen-motion-row > .specimen-motion-name { grid-area: name; }
  .specimen-motion-row > .specimen-motion-duration { grid-area: dur; justify-self: end; }
  .specimen-motion-row > .specimen-motion-track { grid-area: track; }

  .specimen-button-row-controls {
    gap: var(--into-space-2);
  }
}

.specimens-section {
  display: grid;
  gap: var(--into-space-7);
}

.specimens-section-header {
  display: grid;
  gap: var(--into-space-2);
  max-width: 56ch;
}

.specimens-section-kicker {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--into-text-muted);
  margin: 0;
}

.specimens-section-title {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.18;
  color: var(--into-text-primary);
  margin: 0;
}

.specimens-section-note {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--into-text-secondary);
  margin: 0;
  max-width: 50ch;
}

/* Color swatches */

.specimen-swatch-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--into-space-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.specimen-swatch {
  display: grid;
  gap: var(--into-space-3);
}

.specimen-swatch-chip {
  height: 5rem;
  border-radius: var(--into-radius-card);
  border: 1px solid var(--into-line-soft);
  background: var(--swatch-color);
}

.specimen-swatch-meta {
  display: grid;
  gap: var(--into-space-1);
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--into-text-secondary);
}

.specimen-swatch-name {
  font-family: var(--into-font-sans);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--into-text-primary);
}

.specimen-swatch-token {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--into-text-muted);
}

.specimen-swatch-hex {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--into-text-muted);
}

.specimen-swatch-role {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--into-text-secondary);
  margin-top: var(--into-space-1);
}

/* Type scale */

.specimen-type-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: var(--into-space-6);
  align-items: baseline;
  padding-block: var(--into-space-5);
  border-bottom: 1px solid var(--into-line-soft);
}

.specimen-type-row:last-child {
  border-bottom: none;
}

.specimen-type-meta {
  display: grid;
  gap: var(--into-space-1);
  font-family: var(--into-font-mono);
  font-size: 0.75rem;
  color: var(--into-text-muted);
}

.specimen-type-name {
  font-family: var(--into-font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--into-text-primary);
}

.specimen-type-sample {
  font-family: var(--into-font-serif);
  font-weight: 400;
  color: var(--into-text-primary);
  line-height: 1.1;
  letter-spacing: 0;
}

.specimen-type-sample[data-family="sans"] {
  font-family: var(--into-font-sans);
  font-weight: 300;
  line-height: 1.55;
}

.specimen-type-sample[data-family="mono"] {
  font-family: var(--into-font-mono);
  font-weight: 400;
  line-height: 1.4;
}

/* Font families */

.specimen-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--into-space-7);
}

.specimen-family-card {
  border-top: 1px solid var(--into-line-soft);
  padding-top: var(--into-space-5);
  display: grid;
  gap: var(--into-space-3);
}

.specimen-family-name {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--into-text-muted);
}

.specimen-family-sample {
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--into-text-primary);
  margin: 0;
}

.specimen-family-use {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--into-text-secondary);
  margin: 0;
  max-width: 38ch;
}

/* Buttons — specimens render canonical button variants. */

.specimen-buttons {
  display: grid;
  gap: var(--into-space-9);
}

.specimen-button-row {
  display: grid;
  gap: var(--into-space-4);
}

.specimen-button-row-label {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--into-text-muted);
  margin: 0;
}

.specimen-button-row-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--into-space-3);
  align-items: center;
}

/* Canonical button implementations follow brand/button-system.md.
   Lexend 500, 0.875rem, compact radius, horizontal commands. */

.spec-btn {
  font-family: var(--into-font-sans);
  font-weight: 500;
  font-size: var(--into-type-floor-button);
  line-height: 1.2;
  letter-spacing: 0;
  border-radius: var(--into-radius-card);
  border: 1px solid transparent;
  padding: var(--into-button-padding-y-default) var(--into-button-padding-x-default);
  height: var(--into-button-height-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--into-space-2);
  cursor: pointer;
  transition: background-color var(--into-motion-micro) var(--into-ease-standard),
    color var(--into-motion-micro) var(--into-ease-standard),
    border-color var(--into-motion-micro) var(--into-ease-standard),
    transform var(--into-motion-instant) var(--into-ease-standard);
}

.spec-btn[data-size="compact"] {
  height: var(--into-button-height-compact);
  padding: var(--into-button-padding-y-compact) var(--into-button-padding-x-compact);
  font-size: var(--into-type-floor-button-compact);
}

.spec-btn[data-size="touch"] {
  height: var(--into-button-height-touch);
  padding: var(--into-button-padding-y-touch) var(--into-button-padding-x-touch);
}

.spec-btn[data-size="large"] {
  height: var(--into-button-height-large);
  padding: var(--into-button-padding-y-large) var(--into-button-padding-x-large);
}

.spec-btn[data-variant="primary"] {
  background: var(--into-accent);
  color: var(--into-text-inverse);
}

.spec-btn[data-variant="primary"]:hover {
  background: var(--into-accent-hover);
}

.spec-btn[data-variant="primary"]:active {
  transform: translateY(0.0625rem);
}

.spec-btn[data-variant="secondary"] {
  background: transparent;
  color: var(--into-text-primary);
  border-color: var(--into-line-strong);
}

.spec-btn[data-variant="secondary"]:hover {
  border-color: var(--into-accent);
  color: var(--into-accent);
}

.spec-btn[data-variant="quiet"] {
  background: transparent;
  color: var(--into-text-primary);
  border-color: transparent;
  padding-inline: var(--into-space-2);
}

.spec-btn[data-variant="quiet"]:hover {
  color: var(--into-accent);
}

.spec-btn[data-variant="destructive"] {
  background: transparent;
  color: var(--into-state-critical);
  border-color: var(--into-state-critical);
}

.spec-btn[data-variant="destructive"]:hover {
  background: var(--into-state-critical-soft);
}

.spec-btn[data-state="disabled"],
.spec-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.spec-btn[data-state="focus"] {
  outline: none;
  box-shadow: var(--into-app-focus-ring);
}

.spec-btn[data-state="loading"]::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: spec-spin var(--into-motion-slow) linear infinite;
}

@keyframes spec-spin {
  to { transform: rotate(360deg); }
}

/* Spacing scale */

.specimen-spacing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--into-space-3);
}

.specimen-spacing-row {
  display: grid;
  grid-template-columns: 7rem 4rem minmax(0, 1fr);
  align-items: center;
  gap: var(--into-space-4);
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--into-text-muted);
}

.specimen-spacing-bar {
  background: var(--into-accent);
  height: 0.5rem;
  border-radius: var(--into-radius-small);
}

/* Radius */

.specimen-radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--into-space-5);
}

.specimen-radius-card {
  display: grid;
  gap: var(--into-space-3);
}

.specimen-radius-chip {
  height: 5rem;
  background: var(--into-surface-raised);
  border: 1px solid var(--into-line-soft);
  border-radius: var(--radius-value);
}

.specimen-radius-meta {
  display: grid;
  gap: var(--into-space-1);
}

/* Depth ladder */

.specimen-depth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--into-space-6);
}

.specimen-depth-card {
  background: var(--into-surface-page);
  border-radius: var(--into-radius-panel);
  padding: var(--into-space-5);
  min-height: 8rem;
  display: grid;
  gap: var(--into-space-2);
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--into-text-secondary);
  align-content: end;
}

.specimen-depth-card[data-shadow="hairline"] { box-shadow: var(--into-shadow-hairline); }
.specimen-depth-card[data-shadow="panel"] { box-shadow: var(--into-shadow-panel); }
.specimen-depth-card[data-shadow="floating"] { box-shadow: var(--into-shadow-floating); }
.specimen-depth-card[data-shadow="command"] { box-shadow: var(--into-shadow-command); }

.specimen-depth-name {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--into-text-muted);
}

.specimen-depth-title {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--into-text-primary);
}

/* Motion */

.specimen-motion-list {
  display: grid;
  gap: var(--into-space-5);
}

.specimen-motion-row {
  display: grid;
  grid-template-columns: 8rem 5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--into-space-5);
}

.specimen-motion-name {
  font-family: var(--into-font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--into-text-primary);
}

.specimen-motion-duration {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--into-text-muted);
}

.specimen-motion-track {
  position: relative;
  height: 1.5rem;
  background: var(--into-surface-raised);
  border-radius: var(--into-radius-pill);
  overflow: hidden;
}

.specimen-motion-marker {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1rem;
  height: 1rem;
  background: var(--into-accent);
  border-radius: 50%;
  animation: spec-motion-slide var(--motion-duration) var(--into-ease-standard) infinite alternate;
}

@keyframes spec-motion-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 1rem)); }
}

/* Logo lockups */

.specimen-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--into-space-5);
}

.specimen-logo-card {
  border-radius: var(--into-radius-panel);
  border: 1px solid var(--into-line-soft);
  padding: var(--into-space-9) var(--into-space-7);
  display: grid;
  justify-items: center;
  gap: var(--into-space-5);
  min-height: 9rem;
}

.specimen-logo-card[data-surface="warm"] {
  background: #fbfaf7;
  color: #1a1a1a;
}

.specimen-logo-card[data-surface="blueprint"] {
  background: #0f1518;
  color: #eceef0;
}

.specimen-logo-card img {
  max-height: 2.5rem;
  width: auto;
}

.specimen-logo-card[data-shape="mark"] img {
  max-height: 3.5rem;
}

.specimen-logo-caption {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: currentColor;
  opacity: 0.7;
}

/* Chart palettes */

.specimen-chart-set {
  display: grid;
  gap: var(--into-space-5);
}

.specimen-chart-row {
  display: grid;
  gap: var(--into-space-2);
}

.specimen-chart-label {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--into-text-muted);
}

.specimen-chart-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--into-space-1);
  height: 3rem;
  border-radius: var(--into-radius-small);
  overflow: hidden;
}

.specimen-chart-bar {
  background: var(--bar-color);
}