/* Resource catalog — tokens only. Not a site. */

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--os-ground);
  color: var(--os-ink);
  font-family: var(--os-font-body);
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--os-focus-ring-width) solid var(--os-focus-ring-color);
  outline-offset: var(--os-focus-ring-offset);
}

.catalog-rail {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 2);
  padding: calc(var(--os-space-unit) * 3) calc(var(--os-space-unit) * 5);
  border-bottom: 1px solid var(--os-rule);
}

.catalog-rail a {
  font-family: var(--os-font-mono);
  font-size: var(--os-type-label-size);
  letter-spacing: var(--os-type-label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--os-muted);
  padding: calc(var(--os-space-unit) * 1) calc(var(--os-space-unit) * 2);
}

.catalog-rail [aria-current="page"] {
  color: var(--os-ink);
  box-shadow:  0 -2px 0 var(--os-indigo);
}

.catalog-main {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: calc(var(--os-space-unit) * 6) calc(var(--os-space-unit) * 5) calc(var(--os-space-unit) * 8);
}

.catalog-head {
  display: grid;
  gap: calc(var(--os-space-unit) * 3);
  margin-bottom: calc(var(--os-space-unit) * 6);
}

.catalog-head h1 {
  margin: 0;
  font-size: var(--os-type-display-size);
  line-height: var(--os-type-display-leading);
  letter-spacing: var(--os-type-display-tracking);
}

.catalog-head p {
  margin: 0;
  max-width: 72ch;
  color: var(--os-muted);
  font-size: var(--os-type-body-size);
  line-height: var(--os-type-body-leading);
}

.kit-import {
  overflow-x: auto;
  font-family: var(--os-font-mono);
  font-size: var(--os-type-caption-size);
  letter-spacing: var(--os-type-caption-tracking);
}

.kit-import code,
.resource-table code {
  font: inherit;
}

.resource-table {
  width: 100%;
  border-collapse: collapse;
}

.resource-table th,
.resource-table td {
  padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 2);
  border-bottom: 1px solid var(--os-rule);
  text-align: left;
  vertical-align: top;
  font-size: var(--os-type-body-size);
}

.resource-table thead th {
  font-family: var(--os-font-mono);
  font-size: var(--os-type-caption-size);
  letter-spacing: var(--os-type-caption-tracking);
  text-transform: uppercase;
  color: var(--os-muted);
}

.stamp {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid var(--os-rule);
  border-radius: 4px;
  font-family: var(--os-font-mono);
  font-size: var(--os-type-caption-size);
  letter-spacing: var(--os-type-caption-tracking);
  text-transform: uppercase;
  color: var(--os-muted);
}

.stamp-live {
  color: var(--os-status-success);
  border-color: var(--os-status-success);
}

.stamp-gap {
  color: var(--os-status-warning);
  border-color: var(--os-status-warning);
}

.stamp-empty,
.stamp-paper,
.stamp-ours,
.stamp-off,
.stamp-held,
.stamp-no {
  color: var(--os-muted);
}

.stamp-no {
  border-style: dashed;
}

.family-block {
  margin-top: calc(var(--os-space-unit) * 8);
}

.family-block h2 {
  margin: 0 0 calc(var(--os-space-unit) * 3);
  font-size: var(--os-type-headline-size);
  letter-spacing: var(--os-type-headline-tracking);
}

.hole {
  color: var(--os-muted);
}

.no-row {
  margin-top: calc(var(--os-space-unit) * 8);
}

.no-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.no-row li {
  padding: calc(var(--os-space-unit) * 1) calc(var(--os-space-unit) * 2);
  border: 1px dashed var(--os-rule);
  color: var(--os-muted);
  font-family: var(--os-font-mono);
  font-size: var(--os-type-caption-size);
  letter-spacing: var(--os-type-caption-tracking);
  text-transform: uppercase;
}

.shelf-notice {
  display: grid;
  gap: calc(var(--os-space-unit) * 2);
  padding: calc(var(--os-space-unit) * 3);
  margin-bottom: calc(var(--os-space-unit) * 6);
  border: 1px solid var(--os-rule);
  color: var(--os-ink);
}

.shelf-notice p,
.notice-list,
.shelf-pointer {
  margin: 0;
  color: var(--os-muted);
  font-size: var(--os-type-body-size);
  line-height: var(--os-type-body-leading);
}

.shelf-pointer {
  margin-top: calc(var(--os-space-unit) * 6);
}

.notice-list {
  padding-left: calc(var(--os-space-unit) * 5);
}

.stamp-keep {
  color: var(--os-status-success);
  border-color: var(--os-status-success);
}

.stamp-embed {
  color: var(--os-ink);
  border-color: var(--os-rule);
}

.type-row,
.still-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 3);
  margin-top: calc(var(--os-space-unit) * 4);
}

.type-sample {
  margin: 0;
  padding: calc(var(--os-space-unit) * 2) calc(var(--os-space-unit) * 3);
  border: 1px solid var(--os-rule);
  font-size: var(--os-type-headline-size);
  letter-spacing: var(--os-type-headline-tracking);
}

.still-card {
  margin: 0;
  width: min(240px, 100%);
}

.still-card img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--os-ground);
}

.still-card figcaption,
.media-card figcaption,
.grad-card figcaption,
.shelf-stage figcaption {
  margin-top: calc(var(--os-space-unit) * 1);
  color: var(--os-muted);
  font-family: var(--os-font-mono);
  font-size: var(--os-type-caption-size);
  letter-spacing: var(--os-type-caption-tracking);
}

.media-row,
.field-row,
.grad-row,
.mark-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 3);
  margin-top: calc(var(--os-space-unit) * 4);
}

.media-card,
.grad-card,
.shelf-stage {
  margin: 0;
  width: min(240px, 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--os-rule);
  background: var(--os-ground);
}

.media-card video,
.media-card img,
.shelf-stage canvas,
.shelf-stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
  background: var(--os-ground);
}

.shelf-stage {
  min-height: 180px;
}

.shelf-stage.field-grid,
.shelf-stage.field-grid--paper,
.shelf-stage[data-field-grid="paper"],
.shelf-stage[data-field-grid="y2036-world"],
.shelf-stage[data-field-grid="y2008-aqua"] {
  position: relative;
  top:auto;right:auto;bottom:auto;left:auto;
  z-index: 0;
  width: min(240px, 100%);
  height: 180px;
  pointer-events: none;
}

.shelf-stage.night-volume {
  background: var(--os-ground-void);
}

.shelf-stage .night-plate {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shelf-stage figcaption {
  position: relative;
  z-index: 2;
  padding: calc(var(--os-space-unit) * 1);
}

.grad-card {
  min-height: 120px;
  padding: calc(var(--os-space-unit) * 2);
}

.living-dither-well {
  min-height: 120px;
}

.weather-index {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 1);
  padding: 0;
  margin: calc(var(--os-space-unit) * 3) 0 0;
  list-style: none;
}

.weather-index li {
  padding: 3px 7px;
  border: 1px solid var(--os-rule);
  color: var(--os-muted);
  font-family: var(--os-font-mono);
  font-size: var(--os-type-caption-size);
  letter-spacing: var(--os-type-caption-tracking);
}

@media (max-width: 390px) {
  .catalog-main {
    padding-inline: calc(var(--os-space-unit) * 3);
  }
}