/*
 * Turbo Scratch components. Spec: docs/DESIGN-SYSTEM.md, section 5.
 * Load after tokens.css. Use var(--…) tokens only: no literal colours,
 * radii, shadows or durations in this file.
 *
 * Class prefix: ts-. Breakpoints: 40rem (640), 48rem (768), 64rem (1024).
 */

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.ts-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Only our own embeds are sized here. An ad (the ColorMagic iframe, or
 * any network-injected element) must never be restyled (DESIGN-SYSTEM
 * section 7.2), so this rule does not match iframes in general: our
 * embeds opt in with the ts-embed class. */
.ts-body img,
.ts-body svg,
.ts-body .ts-embed {
  display: block;
  max-width: 100%;
}

/* These resets keep element-only specificity (0,0,1), so any component
 * class can set its own margin and colour. They must not drop to zero:
 * layout.html loads app.css (Tailwind preflight, kept for the ad widget)
 * first, and its "h1, h2, h3 { font-weight: inherit }" would win. */
:where(.ts-body) :is(h1, h2, h3) {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

:where(.ts-body) :where(p) {
  margin: 0;
}

/* app.css (Tailwind preflight) loads first for the ad widget. It strips
 * link underlines and list bullets, which this system takes from the
 * browser defaults. Put the defaults back at element specificity, so
 * component classes still override them. */
:where(.ts-body) a {
  text-decoration-line: revert;
}

:where(.ts-body) :is(ul, ol, dl) {
  margin-block: revert;
  padding-inline-start: revert;
  list-style: revert;
}

.ts-body a {
  color: var(--color-brand);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.ts-body a:hover {
  color: var(--color-brand-hover);
}

/* The :where(:not(...)) leaves the ColorMagic ad widget alone (never
 * restyle ads, docs/DESIGN-SYSTEM.md section 7.2) at zero added
 * specificity. */
.ts-body :focus-visible:where(:not(#colormagic-widget, #colormagic-widget-hidden, #colormagic-widget *, #colormagic-widget-hidden *)) {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.ts-skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--header-h));
  z-index: var(--z-menu);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.ts-skip:focus {
  top: var(--space-2);
}

.ts-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ts-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ts-container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.ts-main {
  flex: 1 0 auto;
  padding-block: var(--space-6) var(--space-16);
}

.ts-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
}

.ts-icon--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* ---------- Header and nav ---------- */

.ts-header {
  background: var(--color-surface);
  border-bottom: var(--border-w) solid var(--color-border);
  position: relative;
  z-index: var(--z-header);
}

.ts-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "brand . actions"
    "play play play";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
}

.ts-brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  color: var(--color-text);
  font-weight: var(--weight-heavy);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
}

.ts-body a.ts-brand,
.ts-body a.ts-brand:hover {
  color: var(--color-text);
}

.ts-brand__mark {
  display: grid;
  place-items: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-md);
  background: var(--color-bolt);
  color: var(--color-on-bolt);
}

.ts-nav {
  display: none;
}

.ts-nav__list {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-body .ts-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.ts-body .ts-nav__link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.ts-body .ts-nav__link[aria-current="page"] {
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
}

.ts-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ts-header__play {
  grid-area: play;
}

/* Mobile menu: a <details> disclosure, works with no JS. */
.ts-menu {
  position: relative;
}

.ts-menu > summary {
  list-style: none;
}

.ts-menu > summary::-webkit-details-marker {
  display: none;
}

.ts-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-menu);
  min-width: 14rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.ts-menu__panel .ts-nav__list {
  flex-direction: column;
}

.ts-menu__panel .ts-nav__link {
  width: 100%;
}

@media (min-width: 64rem) {
  .ts-header__inner {
    grid-template-columns: auto auto minmax(16rem, 1fr) auto;
    grid-template-areas: "brand nav play actions";
    gap: var(--space-4);
  }

  .ts-nav {
    grid-area: nav;
    display: block;
  }

  .ts-menu {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-5);
  border: var(--border-w-thick) solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.ts-body .ts-btn--primary,
.ts-body .ts-btn--primary:hover {
  color: var(--color-on-brand);
}

.ts-btn--primary {
  background: var(--color-brand-solid);
  box-shadow: var(--shadow-edge) var(--color-brand-edge);
  margin-bottom: var(--press);
}

.ts-btn--primary:hover {
  background: var(--color-brand-solid-hover);
}

.ts-btn--primary:active {
  transform: translateY(var(--press));
  box-shadow: var(--shadow-edge-pressed) var(--color-brand-edge);
}

.ts-body .ts-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.ts-body .ts-btn--secondary:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.ts-body .ts-btn--ghost {
  background: transparent;
  color: var(--color-brand);
}

.ts-body .ts-btn--ghost:hover {
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
}

.ts-btn--lg {
  min-height: calc(var(--target-min) + var(--space-2));
  padding-inline: var(--space-6);
  font-size: var(--text-lg);
}

.ts-btn--block {
  width: 100%;
}

.ts-btn[disabled],
.ts-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-3);
  box-shadow: none;
  transform: none;
}

.ts-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.ts-icon-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.ts-body a.ts-icon-btn {
  color: var(--color-text-2);
}

/* Theme toggle: shows the moon in light mode, the sun in dark mode. */
.ts-theme-toggle .ts-icon--sun,
html.dark .ts-theme-toggle .ts-icon--moon {
  display: none;
}

html.dark .ts-theme-toggle .ts-icon--sun {
  display: block;
}

/* ---------- Badges ---------- */

.ts-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ts-badge--new {
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
}

/* ---------- Play by ID (existing feature) ---------- */

.ts-play {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--target-min);
  background: var(--color-surface);
  border: var(--border-w-thick) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.ts-play:focus-within {
  border-color: var(--color-focus);
  outline: var(--focus-w) solid var(--color-brand-tint);
}

.ts-play__prefix {
  display: none;
  align-items: center;
  padding-left: var(--space-3);
  color: var(--color-text-3);
  white-space: nowrap;
}

.ts-play__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
}

.ts-play__input::placeholder {
  color: var(--color-text-3);
}

.ts-play__input:focus-visible {
  outline: none;
}

.ts-play__submit {
  margin: var(--space-1);
  min-height: calc(var(--target-min) - var(--space-2));
  padding-inline: var(--space-4);
}

.ts-play--lg {
  min-height: calc(var(--target-min) + var(--space-4));
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
}

.ts-play--lg .ts-play__submit {
  margin-bottom: var(--space-2);
}

@media (min-width: 40rem) {
  .ts-play--lg .ts-play__prefix {
    display: flex;
  }

  .ts-play--lg .ts-play__input {
    padding-left: 0;
  }
}

/* ---------- Page sections ---------- */

.ts-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
  padding-block: var(--space-8) var(--space-10);
}

/* Decorative block stack beside the hero text. Wide screens only. */
.ts-hero__art {
  display: none;
}

@media (min-width: 64rem) {
  .ts-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding-block: var(--space-12) var(--space-16);
  }

  .ts-hero__art {
    display: block;
    transform: rotate(-3deg);
    box-shadow: var(--shadow-lg);
  }
}

.ts-hero__title {
  font-size: var(--text-4xl);
  max-width: 20ch;
}

/* Highlighted word. Text on bolt is always --color-on-bolt (black),
 * in both themes: 12.98:1. */
.ts-mark {
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-bolt);
  color: var(--color-on-bolt);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ts-hero__lead {
  margin-top: var(--space-4);
  max-width: 40rem;
  color: var(--color-text-2);
  font-size: var(--text-lg);
}

.ts-hero__play {
  margin-top: var(--space-6);
  max-width: 44rem;
}

.ts-hero__hint {
  margin-top: var(--space-3);
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

.ts-section {
  padding-block: var(--space-10);
}

.ts-section + .ts-section {
  border-top: var(--border-w) solid var(--color-border);
}

.ts-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-6);
}

.ts-section__title {
  font-size: var(--text-2xl);
}

.ts-eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ts-section__lead {
  margin-top: var(--space-2);
  max-width: 44rem;
  color: var(--color-text-2);
}

.ts-body .ts-more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-min);
  font-weight: var(--weight-semibold);
}

/* ---------- Cards ---------- */

.ts-card {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

@media (min-width: 48rem) {
  .ts-card {
    padding: var(--space-6);
  }
}

.ts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .ts-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ts-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tool card: the whole card is one link target (stretched link). */
.ts-tool-card {
  --tool: var(--color-tool-a);
  --tool-tint: var(--color-tool-a-tint);
  --tool-ink: var(--color-tool-a-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-top: calc(var(--border-w-thick) * 2) solid var(--tool);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.ts-tool-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-md);
}

.ts-tool-card:focus-within {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.ts-tool-card--b {
  --tool: var(--color-tool-b);
  --tool-tint: var(--color-tool-b-tint);
  --tool-ink: var(--color-tool-b-ink);
}

.ts-tool-card--c {
  --tool: var(--color-tool-c);
  --tool-tint: var(--color-tool-c-tint);
  --tool-ink: var(--color-tool-c-ink);
}

.ts-tool-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ts-tool-tile {
  display: grid;
  place-items: center;
  width: var(--tool-tile);
  height: var(--tool-tile);
  border-radius: var(--radius-md);
  background: var(--tool, var(--color-tool-a));
  color: var(--color-on-brand);
}

.ts-tool-tile--b {
  --tool: var(--color-tool-b);
}

.ts-tool-tile--c {
  --tool: var(--color-tool-c);
}

.ts-tool-card__title {
  font-size: var(--text-xl);
}

.ts-body .ts-tool-card__link {
  color: var(--color-text);
  text-decoration: none;
}

.ts-tool-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.ts-tool-card__link:focus-visible {
  outline: none;
}

.ts-tool-card__desc {
  color: var(--color-text-2);
}

.ts-tool-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-2);
  font-size: var(--text-sm);
}

.ts-tool-card__list li {
  display: flex;
  gap: var(--space-2);
}

.ts-tool-card__list svg {
  color: var(--tool-ink);
  margin-top: var(--space-1);
}

.ts-tool-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
  align-self: flex-start;
  min-height: var(--target-min);
  border-radius: var(--radius-md);
  background: var(--tool-tint);
  color: var(--tool-ink);
  font-weight: var(--weight-semibold);
}

/* Link card for guides. */
.ts-link-card {
  position: relative;
  display: block;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.ts-link-card:hover {
  border-color: var(--color-brand);
  transform: translateY(var(--lift));
}

.ts-link-card:focus-within {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.ts-link-card__title {
  font-size: var(--text-lg);
}

.ts-body .ts-link-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.ts-link-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ts-link-card__title a:focus-visible {
  outline: none;
}

.ts-link-card__desc {
  margin-top: var(--space-1);
  color: var(--color-text-2);
  font-size: var(--text-sm);
}

/* Project grid (existing "Popular projects" and "More cool projects"). */
.ts-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .ts-projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ts-projects {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ts-body .ts-project {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.ts-project__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-thumb-bg);
}

.ts-project__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.ts-project:hover .ts-project__thumb img {
  transform: scale(1.05);
}

.ts-project__title {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-project:hover .ts-project__title {
  color: var(--color-brand);
}

.ts-project__by {
  color: var(--color-text-3);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Numbered steps. */
.ts-steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--icon-lg) 1fr;
  gap: var(--space-3);
}

.ts-steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
  font-weight: var(--weight-heavy);
}

/* ---------- Callouts ---------- */

.ts-callout {
  --c-bg: var(--color-brand-tint);
  --c-fg: var(--color-brand-ink);
  display: grid;
  grid-template-columns: var(--icon-md) 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  color: var(--color-text);
}

.ts-callout > svg {
  color: var(--c-fg);
}

.ts-callout__title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.ts-callout p + p {
  margin-top: var(--space-1);
}

.ts-callout--tip {
  --c-bg: var(--color-ok-tint);
  --c-fg: var(--color-ok);
}

.ts-callout--warn {
  --c-bg: var(--color-warn-tint);
  --c-fg: var(--color-warn);
}

.ts-callout--safety {
  --c-bg: var(--color-surface-2);
  --c-fg: var(--color-text-2);
}

/* ---------- Forms ---------- */

.ts-field {
  display: grid;
  gap: var(--space-2);
}

.ts-field + .ts-field {
  margin-top: var(--space-5);
}

.ts-label {
  font-weight: var(--weight-semibold);
}

.ts-hint {
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

.ts-input,
.ts-textarea,
.ts-select {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w-thick) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.ts-textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: var(--leading-snug);
}

.ts-input::placeholder,
.ts-textarea::placeholder {
  color: var(--color-text-3);
}

.ts-input:hover,
.ts-textarea:hover,
.ts-select:hover {
  border-color: var(--color-text-3);
}

.ts-body .ts-input:focus-visible,
.ts-body .ts-textarea:focus-visible,
.ts-body .ts-select:focus-visible {
  border-color: var(--color-focus);
  outline: var(--focus-w) solid var(--color-brand-tint);
  outline-offset: 0;
}

.ts-input[aria-invalid="true"],
.ts-textarea[aria-invalid="true"] {
  border-color: var(--color-bad);
}

.ts-error-text {
  display: flex;
  gap: var(--space-2);
  color: var(--color-bad);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.ts-field__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ts-counter {
  white-space: nowrap;
  color: var(--color-text-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Example prompts. Each chip is a real <button>. */
.ts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-chip {
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.ts-chip:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}

/* Segmented choice (radio group), e.g. grade band in the lesson kit. */
.ts-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.ts-segmented legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: var(--weight-semibold);
}

.ts-segmented label {
  position: relative;
}

.ts-segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.ts-segmented span {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  border: var(--border-w-thick) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.ts-segmented input:checked + span {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
  font-weight: var(--weight-semibold);
}

.ts-segmented input:focus-visible + span {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* ---------- Upload (project doctor) ---------- */

.ts-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  border: var(--border-w-thick) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.ts-drop:hover,
.ts-drop[data-dragging] {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}

.ts-drop:focus-within {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.ts-drop__icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--color-tool-b-ink);
}

.ts-drop__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ts-drop__title {
  font-weight: var(--weight-semibold);
}

.ts-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ts-file__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-file__meta {
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

/* ---------- Results list (project doctor) ---------- */

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

.ts-result {
  --r-fg: var(--color-bad);
  --r-bg: var(--color-bad-tint);
  border: var(--border-w) solid var(--color-border);
  border-left: calc(var(--border-w-thick) * 2) solid var(--r-fg);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ts-result--warn {
  --r-fg: var(--color-warn);
  --r-bg: var(--color-warn-tint);
}

.ts-result--ok {
  --r-fg: var(--color-ok);
  --r-bg: var(--color-ok-tint);
}

.ts-result > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

@media (max-width: 39.99rem) {
  .ts-result > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ts-result__sev {
    justify-self: start;
  }

  .ts-result__title {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

.ts-result > summary::-webkit-details-marker {
  display: none;
}

.ts-result__sev {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--r-bg);
  color: var(--r-fg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ts-result__title {
  font-weight: var(--weight-semibold);
}

.ts-result__where {
  display: block;
  color: var(--color-text-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.ts-result__chev {
  color: var(--color-text-3);
  transition: transform var(--dur-base) var(--ease-out);
}

.ts-result[open] .ts-result__chev {
  transform: rotate(180deg);
}

.ts-result__body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text-2);
}

/* ---------- Tool workspace (A, B, C) ---------- */

.ts-tool-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}

.ts-tool-head__title {
  font-size: var(--text-3xl);
}

.ts-tool-head__lead {
  margin-top: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--text-lg);
  max-width: 44rem;
}

.ts-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 64rem) {
  .ts-workspace {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6);
  }
}

.ts-panel {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

@media (min-width: 48rem) {
  .ts-panel {
    padding: var(--space-6);
  }
}

.ts-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ts-panel__step {
  display: grid;
  place-items: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
  font-weight: var(--weight-heavy);
}

.ts-panel__title {
  font-size: var(--text-lg);
}

.ts-panel__section + .ts-panel__section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
}

.ts-panel__subtitle {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

/* Actions stay inline in the flow. Never sticky or fixed at the bottom:
 * the ColorMagic widget covers the bottom-left corner on phones. */
.ts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 39.99rem) {
  .ts-actions > .ts-btn {
    flex: 1 1 100%;
  }
}

.ts-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--text-sm);
}

/* ---------- Block preview ---------- */

.ts-blocks {
  position: relative;
  overflow-x: auto;
  padding: var(--space-5);
  min-height: 12rem;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--workspace-bg);
  background-image: radial-gradient(var(--workspace-dot) var(--border-w), transparent var(--border-w));
  background-size: var(--space-5) var(--space-5);
}

.ts-blocks__script + .ts-blocks__script {
  margin-top: var(--space-6);
}

.ts-block {
  --b: var(--block-events);
  --b-edge: var(--block-events-edge);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  width: max-content;
  max-width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--b-edge);
  border-radius: var(--radius-block);
  background: var(--b);
  color: var(--block-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.ts-block + .ts-block,
.ts-block__mouth > .ts-block:first-child {
  margin-top: calc(-1 * var(--border-w));
}

.ts-block--hat {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-lg);
  padding-top: var(--space-3);
}

.ts-block--motion { --b: var(--block-motion); --b-edge: var(--block-motion-edge); }
.ts-block--looks { --b: var(--block-looks); --b-edge: var(--block-looks-edge); }
.ts-block--sound { --b: var(--block-sound); --b-edge: var(--block-sound-edge); }
.ts-block--events { --b: var(--block-events); --b-edge: var(--block-events-edge); }
.ts-block--control { --b: var(--block-control); --b-edge: var(--block-control-edge); }
.ts-block--sensing { --b: var(--block-sensing); --b-edge: var(--block-sensing-edge); }
.ts-block--operators { --b: var(--block-operators); --b-edge: var(--block-operators-edge); }
.ts-block--variables { --b: var(--block-variables); --b-edge: var(--block-variables-edge); }
.ts-block--myblocks { --b: var(--block-myblocks); --b-edge: var(--block-myblocks-edge); }

/* C-shaped block: arm, inner stack ("mouth"), foot. */
.ts-block--c {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  min-height: 0;
}

.ts-block--c > .ts-block__arm,
.ts-block--c > .ts-block__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 8rem;
  padding: var(--space-2) var(--space-3);
  background: var(--b);
  border: var(--border-w) solid var(--b-edge);
}

.ts-block--c > .ts-block__arm {
  min-height: var(--target-min);
  border-radius: var(--radius-block) var(--radius-block) 0 0;
  border-bottom: 0;
}

.ts-block--c > .ts-block__foot {
  min-height: var(--space-6);
  border-radius: 0 0 var(--radius-block) var(--radius-block);
  border-top: 0;
}

.ts-block__mouth {
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  background: linear-gradient(to right, var(--b) var(--space-4), transparent var(--space-4));
  border-left: var(--border-w) solid var(--b-edge);
}

.ts-block__input {
  display: inline-block;
  min-width: var(--space-8);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--block-input);
  color: var(--block-text);
  font-weight: var(--weight-regular);
  text-align: center;
}

.ts-block__menu {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-w) solid var(--b-edge);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
}

.ts-blocks__note {
  margin-top: var(--space-3);
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

/* Stage: TurboWarp embed preview, 4:3 like the project page. */
.ts-stage {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-thumb-bg);
  border: 0;
}

.ts-stage--placeholder {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  color: var(--color-text-3);
  background: var(--color-surface-2);
  border: var(--border-w) dashed var(--color-border-strong);
  text-align: center;
}

/* Explanation list next to the blocks. */
.ts-explain {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-explain li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.ts-swatch {
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--b-edge, var(--color-border-strong));
  background: var(--b, var(--color-surface-2));
}

/* ---------- Breadcrumbs ---------- */

.ts-crumbs {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.ts-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-3);
}

.ts-body .ts-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-2);
}

.ts-crumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* ---------- Article (guides, legal) ---------- */

.ts-article {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
}

@media (min-width: 48rem) {
  .ts-article {
    padding: var(--space-10) var(--space-12);
  }
}

.ts-article__title {
  font-size: var(--text-3xl);
}

.ts-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  color: var(--color-text-3);
  font-size: var(--text-sm);
}

.ts-article__lead {
  margin-top: var(--space-5);
  color: var(--color-text-2);
  font-size: var(--text-lg);
}

.ts-toc {
  margin-block: var(--space-6);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.ts-toc > summary {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.ts-toc ol {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4) var(--space-8);
  columns: 1;
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .ts-toc ol {
    columns: 2;
    column-gap: var(--space-8);
  }
}

.ts-toc li {
  padding-block: var(--space-1);
  break-inside: avoid;
}

/* Prose: styles the guide body HTML as written today. Replaces
 * Tailwind's "prose dark:prose-invert" with no change to the content. */
.ts-prose {
  max-width: var(--measure);
  color: var(--color-text);
}

.ts-body .ts-prose > * + * {
  margin-top: var(--space-4);
}

.ts-body .ts-prose h2 {
  margin-top: var(--space-10);
  font-size: var(--text-2xl);
  scroll-margin-top: var(--space-4);
}

.ts-body .ts-prose h3 {
  margin-top: var(--space-8);
  font-size: var(--text-xl);
}

.ts-body .ts-prose h2 + *,
.ts-body .ts-prose h3 + * {
  margin-top: var(--space-3);
}

.ts-prose ul,
.ts-prose ol {
  padding-left: var(--space-6);
}

.ts-prose li + li {
  margin-top: var(--space-2);
}

.ts-prose li::marker {
  color: var(--color-text-3);
}

.ts-prose ol > li::marker {
  font-weight: var(--weight-semibold);
}

.ts-prose strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.ts-prose code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.ts-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ts-prose th,
.ts-prose td {
  padding: var(--space-3);
  border-bottom: var(--border-w) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.ts-prose th {
  background: var(--color-surface-2);
  font-weight: var(--weight-semibold);
}

.ts-prose td:first-child {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* FAQ: the guides render it as <dl>. */
.ts-prose dl {
  display: grid;
  gap: var(--space-3);
}

.ts-prose dt {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.ts-prose dt:not(:first-child) {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--color-border);
}

.ts-prose dd {
  margin: 0;
  color: var(--color-text-2);
}

.ts-prose a[target="_blank"] {
  overflow-wrap: anywhere;
}

/* "Try the tool" block at the end of a guide. */
.ts-related {
  margin-top: var(--space-10);
}

/* ---------- Ad slot wrapper (ours) ----------
 * Reserves space so the page does not jump when an ad loads. Never style
 * the ad element inside it. See docs/DESIGN-SYSTEM.md, section 7. */
.ts-ad-slot {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  min-height: var(--ad-slot-min-h);
  margin-block: var(--space-8);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-ad-reserve);
}

.ts-ad-slot__label {
  color: var(--color-text-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---------- Footer ---------- */

.ts-footer {
  margin-top: auto;
  padding-block: var(--space-10) var(--ad-safe-bottom);
  border-top: var(--border-w) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: var(--text-sm);
}

.ts-footer__grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 40rem) {
  .ts-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ts-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.ts-footer__title {
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
}

.ts-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-body .ts-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-2);
  text-decoration: none;
}

.ts-body .ts-footer a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.ts-body .ts-footer p a {
  display: inline;
  min-height: 0;
  color: var(--color-brand);
  text-decoration: underline;
}

.ts-footer li > span {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

.ts-footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  color: var(--color-text-3);
}

/* ---------- Page parts (TS-300 step 2) ----------
 * Small pieces the Go templates need beyond the showcase. Tokens only. */

/* The hidden attribute wins over component display rules. */
.ts-body [hidden] {
  display: none !important;
}

/* Block builder: the result wrapper is replaced by each build, so the
 * section after it needs its own divider. */
.ts-make-result + .ts-panel__section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
}

.ts-stack-top {
  margin-top: var(--space-4);
}

.ts-stack-top-lg {
  margin-top: var(--space-6);
}

.ts-body .ts-flush-top {
  margin-top: 0;
}

.ts-measure {
  max-width: var(--measure);
}

.ts-center {
  display: flex;
  justify-content: center;
}

.ts-page-title {
  margin-bottom: var(--space-6);
}

.ts-empty {
  padding-block: var(--space-8);
  color: var(--color-text-2);
  text-align: center;
}

/* Two columns from 1024 px: home "how to play" and "what we do". */
.ts-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 64rem) {
  .ts-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ts-checklist {
  font-size: var(--text-base);
}

/* A tool card with no page yet: no lift, no link target. */
.ts-tool-card--soon:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Article text after the title or byline (guides and legal pages have
 * no table of contents between them). */
.ts-article__title + .ts-prose,
.ts-byline + .ts-prose {
  margin-top: var(--space-6);
}

.ts-related__title {
  margin-bottom: var(--space-4);
}

.ts-chip[aria-pressed="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
  color: var(--color-brand-ink);
  font-weight: var(--weight-semibold);
}

.ts-input--lg {
  min-height: var(--space-12);
  font-size: var(--text-lg);
}

/* Search page */
.ts-search__pills {
  margin-bottom: var(--space-4);
}

.ts-search__box {
  position: relative;
  max-width: 44rem;
  margin-bottom: var(--space-8);
}

.ts-search__spinner {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  margin-top: calc(var(--icon-sm) / -2);
}

/* Project page head: thumbnail, title, author, favorite, stats. */
.ts-project-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}

@media (min-width: 40rem) {
  .ts-project-head {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-6);
    text-align: left;
  }
}

.ts-project-head__thumb {
  width: 9rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-thumb-bg);
}

.ts-project-head__title {
  font-size: var(--text-3xl);
}

.ts-project-head__by {
  margin-top: var(--space-1);
  color: var(--color-text-2);
}

.ts-project-head__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ts-fav[aria-pressed="true"] {
  border-color: var(--color-bad);
  background: var(--color-bad-tint);
  color: var(--color-bad);
}

.ts-fav[aria-pressed="true"] svg {
  fill: currentColor;
}

.ts-meta-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

@media (min-width: 40rem) {
  .ts-meta-list {
    justify-content: flex-start;
  }
}

.ts-meta-list--quiet {
  margin-top: var(--space-1);
  color: var(--color-text-3);
}

/* A card whose first child runs to the edges (the player). */
.ts-card--flush {
  padding: 0;
  overflow: hidden;
}

.ts-card__body {
  padding: var(--space-5);
}

@media (min-width: 48rem) {
  .ts-card__body {
    padding: var(--space-6);
  }
}

.ts-stage--embed {
  display: block;
  border-radius: 0;
}

.ts-prose--pre p {
  white-space: pre-wrap;
}

.ts-prose--pre h2:first-child {
  margin-top: 0;
}

.ts-details {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--color-border);
  font-size: var(--text-sm);
}

.ts-details__title {
  margin-bottom: var(--space-3);
  color: var(--color-text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.ts-details__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
}

@media (min-width: 40rem) {
  .ts-details__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ts-details__list dt {
  color: var(--color-text-3);
}

.ts-details__list dd {
  margin: 0;
}

@media (min-width: 64rem) {
  .ts-projects--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Favorites page */
.ts-fav-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .ts-fav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ts-fav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ts-fav-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-thumb-bg);
}

.ts-fav-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-fav-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
}

.ts-fav-card__title {
  font-size: var(--text-lg);
}

.ts-body .ts-fav-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.ts-body .ts-fav-card__title a:hover {
  color: var(--color-brand);
}

.ts-body .ts-fav-card__remove {
  color: var(--color-bad);
}

.ts-fav-card__remove svg {
  fill: currentColor;
}

/* Contact form embed */
.ts-embed-form {
  display: block;
  width: 100%;
  margin-block: var(--space-6);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Block builder: boolean slot inside an if or wait-until block. */
.ts-block__bool {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--b-edge);
  border-radius: var(--radius-sm);
  background: var(--b);
}

/* The "else" arm in the middle of an if-else block. */
.ts-block--c > .ts-block__arm--mid {
  border-radius: 0;
  border-top: 0;
}

.ts-status--error {
  color: var(--color-bad);
  font-weight: var(--weight-semibold);
}

/* The live player inside the stage box. */
.ts-stage--live {
  position: relative;
  background: var(--block-input);
  border: var(--border-w) solid var(--color-border);
}

/* Standalone 404 page */
.ts-notfound {
  display: grid;
  place-items: center;
}

.ts-notfound__box {
  padding: var(--space-6);
  text-align: center;
}

.ts-notfound__message {
  margin-bottom: var(--space-3);
  color: var(--color-text-2);
  font-size: var(--text-xl);
}

/* ---------- Motion ---------- */

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

.ts-spinner {
  width: var(--icon-sm);
  height: var(--icon-sm);
  border: var(--border-w-thick) solid var(--color-border);
  border-top-color: var(--color-brand);
  border-radius: var(--radius-pill);
  animation: ts-spin calc(var(--dur-slow) * 3) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ts-body *:where(:not(#colormagic-widget, #colormagic-widget-hidden, #colormagic-widget *, #colormagic-widget-hidden *)),
  .ts-body *:where(:not(#colormagic-widget, #colormagic-widget-hidden, #colormagic-widget *, #colormagic-widget-hidden *))::before,
  .ts-body *:where(:not(#colormagic-widget, #colormagic-widget-hidden, #colormagic-widget *, #colormagic-widget-hidden *))::after {
    animation-duration: var(--dur-fast) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-fast) !important;
    scroll-behavior: auto !important;
  }
}