/* The skill sheet and the rule composer: two of the game's own tables, set to be played with. */
.skills,
.modding {
  padding-block: var(--section-gap) var(--section-gap-s);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.skill-sheet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-columns);
  align-items: stretch;
}
.skill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  align-content: start;
}
.skill-choice,
.rule-option {
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.skill-choice {
  display: grid;
  gap: var(--space-3xs);
}
.skill-choice span {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.skill-choice:hover,
.rule-option:hover {
  border-color: var(--color-ink-2);
}
.skill-choice:active,
.rule-option:active {
  transform: translateY(1px);
}
.skill-choice:focus-visible,
.rule-option:focus-visible,
.level:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.skill-choice[aria-pressed='true'],
.rule-option[aria-pressed='true'] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.rule-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.rule-option:disabled:hover {
  border-color: var(--color-rule);
}

.skill-panel {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-paper-3);
  color: var(--color-ink);
  border-left: var(--rule-hair) solid var(--color-rule-strong);
}
.skill-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
}
.skill-head h3 {
  font-size: var(--text-title);
}
.skill-head output {
  font-size: var(--text-section);
  line-height: 1;
}
.skill-stats {
  display: grid;
  margin: 0;
}
.skill-stats div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.skill-stats dt {
  color: var(--color-ink-2);
}
.skill-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-display);
  white-space: nowrap;
}
.skill-practice {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.skill-practice b {
  font-weight: 400;
  color: var(--color-ink-2);
}
.skill-foot {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
}
.kits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kits li {
  display: grid;
  gap: var(--space-3xs);
}
.kits b {
  color: var(--color-ink);
}
.note,
.planned {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.rule-lab {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--gap-columns);
  align-items: stretch;
}
.rule-choices {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}
.rule-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}
.rule-option {
  white-space: nowrap;
}
.rule-group legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.rule-group legend span {
  margin-left: var(--space-xs);
  color: var(--color-muted);
}
.subset {
  max-width: 70ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
}
.rule-code {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-xl);
  background: var(--color-paper-3);
  border-left: var(--rule-hair) solid var(--color-rule-strong);
}
.rule-code pre {
  margin: 0;
  overflow-x: auto;
  font: var(--text-lg) / 1.45 var(--font-body);
  color: var(--color-ink-2);
}
.json-key {
  color: var(--color-ink);
}
.json-string {
  color: var(--color-accent);
}
.json-literal {
  color: var(--color-display);
}
.rule-code figcaption {
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
}
.planned {
  margin-top: var(--space-lg);
}

@media (max-width: 60rem) {
  .skill-sheet,
  .rule-lab,
  .kits {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skill-choice,
  .rule-option {
    transition: none;
  }
}