/* components.css — specimen-page layout only (sp- prefix). Never reuse on product pages. */

.sp-intro { padding: 32px 0 40px; }
.sp-intro .nt-hero { margin-top: 16px; max-width: 18ch; }
.sp-intro .nt-lead { margin-top: 16px; max-width: 56ch; }
.sp-index { flex-wrap: wrap; margin-top: 28px; gap: 6px; }
.sp-index .nt-pilltab { border: var(--nt-rule-hair); color: var(--nt-text); }
.sp-index .nt-pilltab:hover { background: var(--nt-surface-2); }

.sp-sec { scroll-margin-top: calc(var(--nt-banner-h) + var(--nt-top-h) + 8px); }
.sp-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.sp-head .nt-label { color: var(--nt-muted); }
.sp-h { font-size: clamp(24px, 2.6vw, 32px); }
.sp-api { grid-column: 3; color: var(--nt-muted); text-align: right; font-size: var(--nt-fs-micro); max-width: 42ch; }
.sp-sub { margin: 10px 0 28px 52px; max-width: 70ch; font-size: var(--nt-fs-body); color: var(--nt-muted); text-wrap: pretty; }
@media (max-width: 1023px) {
  .sp-head { grid-template-columns: minmax(0, 1fr); }
  .sp-api { grid-column: auto; text-align: left; }
  .sp-sub { margin-left: 0; }
}

.sp-block + .sp-block, .sp-block.sp-pair, * + .sp-block { margin-top: 40px; }
.sp-block__label { display: block; margin-bottom: 14px; }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sp-cap { font-size: var(--nt-fs-small); line-height: 1.5; color: var(--nt-muted); }   /* captions are prose: Inter (mono is for facts) */
.sp-note { margin-top: 16px; }
.sp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.sp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .sp-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sp-pair, .sp-trio { grid-template-columns: minmax(0, 1fr); } }

/* 01 · colour */
.sp-swatches { border-top: var(--nt-rule-hair); }
.sp-swatch { display: grid; grid-template-columns: 44px 170px 84px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 60px; padding: 8px 0; border-bottom: var(--nt-rule-hair); }
.sp-chipbox { width: 44px; height: 44px; border-radius: var(--nt-r-input); box-shadow: inset 0 0 0 1px var(--nt-border); display: grid; place-items: center; }
.sp-chipbox--signal { background: var(--nt-canvas); }
.sp-chipbox--signal .nt-dot { width: 14px; height: 14px; }
.sp-chipbox--tint { background: var(--nt-surface); font-family: var(--nt-font-mono); font-size: var(--nt-fs-label); letter-spacing: var(--nt-ls-label); text-transform: uppercase; color: var(--nt-muted); }
.sp-chipbox--tint.is-playing { animation: nt-tint-card var(--nt-d-tint) var(--nt-ease) backwards; }
.sp-swatch__name { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.sp-swatch__name span { display: block; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); font-weight: var(--nt-w-regular); color: var(--nt-muted); }
.sp-swatch__hex { font-family: var(--nt-font-mono); font-size: var(--nt-fs-data); color: var(--nt-text); }
.sp-swatch__role { font-size: var(--nt-fs-small); color: var(--nt-muted); }
@media (max-width: 767px) {
  .sp-swatch { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 4px; }
  .sp-chipbox { width: 40px; height: 40px; grid-row: 1 / span 2; }
  .sp-swatch__role { grid-column: 2 / -1; }
}

/* 01 · type */
.sp-type { border-top: var(--nt-rule-hair); }
.sp-type__row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: var(--nt-rule-hair); }
.sp-type__spec { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); line-height: 1.5; color: var(--nt-muted); }
.sp-type__spec b { display: block; font-family: var(--nt-font-sans); font-size: var(--nt-fs-small); font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.sp-type__sample { min-width: 0; overflow-wrap: anywhere; }
.sp-type__hero { font-size: clamp(32px, 4.4vw, 56px); }
.sp-type__num { font-size: clamp(44px, 6vw, 80px); line-height: 1; letter-spacing: -0.03em; font-weight: var(--nt-w-bold); color: var(--nt-text-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .sp-type__row { grid-template-columns: minmax(0, 1fr); } }

/* 01 · shape + space */
.sp-shapes { display: grid; gap: 16px; }
.sp-shape { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 16px; }
.sp-shape span { display: block; height: 44px; border: 1px solid var(--nt-border-strong); background: var(--nt-surface); }
.sp-shape__pill { border-radius: var(--nt-r-pill); }
.sp-shape__card { height: 64px !important; border-radius: var(--nt-r-card); }
.sp-shape__input { border-radius: var(--nt-r-input); background: var(--nt-surface-2) !important; border-color: var(--nt-field) !important; }
.sp-space { display: grid; gap: 8px; }
.sp-space__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); }
.sp-space__bar { height: 10px; border-radius: 3px; background: var(--nt-border-strong); }

/* 02 · logo */
.sp-logos { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 16px; }
.sp-logo-tile { display: grid; place-items: center; min-height: 220px; padding: 24px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-canvas); color: var(--nt-text-strong); }
.sp-logo-tile--hero { background: var(--nt-surface); }
.sp-logo-tile--hero .nt-mark { width: min(160px, 100%); height: auto; }
.sp-logo-tile .nt-logo__lockup { max-width: 100%; height: auto; }
.sp-logo-tile--ink { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.sp-marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding: 20px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); color: var(--nt-text-strong); }
.sp-mark { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; padding: 20px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); }
.sp-use { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sp-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-state { display: flex; align-items: center; gap: 16px; padding: 16px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); background: var(--nt-surface); color: var(--nt-text-strong); }
.sp-state p { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--nt-fs-small); }
@media (max-width: 1023px) { .sp-logos { grid-template-columns: 1fr 1fr; } .sp-logo-tile--hero { grid-column: 1 / -1; } }
.sp-netting { display: flex; align-items: center; gap: 32px; padding: 24px; border: var(--nt-rule-hair); border-radius: var(--nt-r-card); }
.sp-netting__art { display: grid; place-items: center; flex: none; width: 160px; height: 160px; border-radius: var(--nt-r-input); background: var(--nt-surface); }
.sp-netting__text { display: flex; flex-direction: column; gap: 8px; max-width: 56ch; }
.sp-netting__text .sp-row { margin-top: 8px; }
@media (max-width: 767px) { .sp-logos, .sp-states { grid-template-columns: minmax(0, 1fr); } .sp-logo-tile { min-height: 160px; } .sp-netting { flex-direction: column; align-items: flex-start; gap: 20px; padding: 16px; } }

/* 03 · shell */
.sp-kv { border: var(--nt-rule-hair); border-radius: var(--nt-r-card); padding: 4px 16px; background: var(--nt-surface); }
.sp-kv .nt-kv__row > dd { font-size: var(--nt-fs-micro); white-space: normal; text-align: right; }
.sp-search { margin: 0; max-width: 440px; }
.sp-row > .nt-account { border: var(--nt-rule-hair); padding-right: 16px; max-width: 320px; }

/* 04 · posts */
.sp-posts { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1023px) { .sp-posts { grid-template-columns: minmax(0, 1fr); } }

/* 05 · live */
.sp-live { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sp-live__kpis { position: sticky; top: calc(var(--nt-banner-h) + var(--nt-top-h) + 16px); }
.sp-live__kpis .nt-card__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-live__big { font-size: clamp(36px, 4vw, 48px); }
@media (max-width: 1023px) { .sp-live { grid-template-columns: minmax(0, 1fr); } .sp-live__kpis { position: static; order: -1; } }

/* 06 · analytics */
.sp-analytics { padding: 24px; }
.sp-analytics__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.sp-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 1023px) { .sp-charts { grid-template-columns: minmax(0, 1fr); } }

/* 07 · marquee */
.sp-wallwrap { margin-inline: calc(-1 * var(--nt-gutter)); padding-inline: var(--nt-gutter); overflow: hidden; }

/* 08 · status */
.sp-marker-xl { gap: 24px; margin: 24px 0 8px; }
.sp-marker-xl .nt-marker { width: 32px; height: 32px; }

/* 10–11 · tabs, forms */
.sp-panel { margin-top: 16px; max-width: 70ch; }
.sp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; max-width: 760px; }
.sp-form .nt-field--wide { grid-column: 1 / -1; }
.sp-check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--nt-fs-ui); cursor: pointer; }
@media (max-width: 767px) { .sp-form { grid-template-columns: minmax(0, 1fr); } }

/* 13 · receipt wall */
.sp-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sp-wall .nt-receipt { max-width: none; }
@media (max-width: 1099px) { .sp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sp-wall { grid-template-columns: minmax(0, 1fr); } }

/* 16 · more */
.sp-steps-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.sp-ordercard .nt-status { margin-top: 2px; }
@media (max-width: 1023px) { .sp-steps-grid { grid-template-columns: minmax(0, 1fr); } }