/* Swype One V2 — design standards page. */

.design-main { position: relative; z-index: 1; padding-bottom: var(--sp-8); }
.design-hero { padding: 130px var(--sp-5) var(--sp-6); max-width: var(--shell); margin-inline: auto; }
.design-hero .lede { margin-top: var(--sp-4); max-width: 60ch; }
.design-hero em { font-style: normal; color: var(--signal-deep); }

.spec {
  display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-6);
  max-width: var(--shell); margin-inline: auto;
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line);
}
.spec-rail h2 { margin-bottom: var(--sp-3); }
.spec .why { color: var(--ink-2); font-size: var(--fs-small); max-width: 34ch; }
.spec-body { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.spec-sub {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-top: var(--sp-2);
}

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.swatch { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--panel); }
.swatch .chip-color { height: 56px; }
.swatch .meta { padding: var(--sp-2) var(--sp-3); display: grid; gap: 1px; }
.swatch b { font-size: var(--fs-small); }
.swatch code { font-size: 0.64rem; color: var(--ink-3); }
.swatch .role { font-size: var(--fs-micro); color: var(--ink-2); }

.type-spec .row-item { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); }
.type-spec .meta { font-size: var(--fs-micro); color: var(--ink-3); font-family: var(--font-mono); }

.specimen { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.spec-icon { display: grid; justify-items: center; gap: 6px; }

.motion-spec { display: grid; gap: var(--sp-3); }
.motion-demo { display: flex; align-items: center; gap: var(--sp-4); }

.mark-usage { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.mark-cell {
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-5); border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--panel);
}

.expression { display: grid; gap: var(--sp-3); max-width: 66ch; }
.signal-text { color: var(--signal-deep); }
.go-text { color: var(--go-deep); }
.amber-text { color: var(--amber); }

@media (max-width: 860px) {
  .spec { grid-template-columns: 1fr; gap: var(--sp-4); }
}