:root {
  --joint-surface: #b87a20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --joint-surface: #d49540;
  }
}

.joint-schematic {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: .5rem auto;
}

.joint-schematic text {
  text-anchor: middle;
  font-family: monospace;
  font-size: 10px;
  paint-order: stroke;
  stroke: var(--surface2);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.schematic-title {
  font-size: 11px;
  font-weight: 700;
  fill: var(--accent);
}

.schematic-note {
  fill: var(--text-dim);
  paint-order: normal;
  stroke: none;
}

.schematic-note-sm {
  fill: var(--text-dim);
  font-size: 9px;
  paint-order: normal;
  stroke: none;
}

.schematic-bone {
  fill: var(--surface2);
  stroke-width: 1.5;
}

.schematic-surface {
  fill: var(--joint-surface);
  fill-opacity: 0.35;
  stroke: var(--joint-surface);
  stroke-width: 2.5;
}

.schematic-ball {
  fill: var(--surface2);
  stroke: var(--accent);
  stroke-width: 1.8;
  opacity: 0.75;
}

.schematic-joint-line {
  stroke: var(--joint-surface);
  stroke-width: 3;
  stroke-linecap: round;
}

.stroke-accent { stroke: var(--accent); }
.stroke-inlet { stroke: var(--inlet); }
.fill-accent { fill: var(--accent); }
.fill-inlet { fill: var(--inlet); }
.fill-joint-surface { fill: var(--joint-surface); }

.joint-table {
  width: 100%;
  font-size: var(--text-sm);
  margin: 1rem 0;
}

.joint-table th {
  white-space: nowrap;
}

.joint-table td {
  font-size: var(--text-xs);
}

.joint-table td:first-child {
  font-weight: 700;
  font-size: var(--text-sm);
}

.joint-table .mono {
  font-family: var(--mono);
}

.col-joint { width: 15%; }
.col-type { width: 15%; }
.col-motion { width: 15%; }
.col-positions { width: 25%; }
.col-role { width: 30%; }

.translation-detail {
  font-size: var(--text-xs);
}

.joint-schematic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0 0 1rem;
}

.joint-schematic-row > div {
  text-align: center;
}

.joint-schematic-caption {
  font-size: var(--text-sm);
  margin-top: .25rem;
}

.decoder-table {
  font-size: var(--text-sm);
  width: 100%;
  margin: .5rem 0;
}

@media (max-width: 600px) {
  .joint-table-wrap table {
    display: none;
  }

  .joint-table-wrap .table-row-card {
    display: block;
  }
}