.tool-finder {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  max-width: 40rem;
}

.tool-finder__input {
  min-height: var(--touch-min);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-card);
}

.tool-finder__input:focus {
  border-color: var(--colour-accent);
}

.tool-finder__status {
  min-height: 1.5rem;
  font-size: 0.95rem;
}

.category-list {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}

.category-block {
  display: grid;
  gap: var(--space-md);
}

.category-block__intro {
  display: grid;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--colour-text);
}

.card-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tool-card {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--colour-card);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  min-height: 8rem;
  color: inherit;
  text-decoration: none;
}

a.tool-card:hover {
  border-color: var(--colour-accent);
  color: inherit;
}

.tool-card--later {
  background: var(--colour-card-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  width: fit-content;
}

.badge--available,
.badge--developing {
  background: var(--colour-developing-bg);
  color: var(--colour-developing-text);
}

.badge--later {
  background: var(--colour-later-bg);
  color: var(--colour-later-text);
}

.empty-results {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--colour-card);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
}

.panel {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--colour-card);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
}

#spur-gear-form {
  gap: 0.65rem;
  /* The card stretches to the schematic. Auto rows would otherwise grow
     with it and leave the Module field far below the heading text. */
  align-content: start;
}

.notice {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--colour-accent);
  background: var(--colour-accent-soft);
  color: var(--colour-developing-text);
  font-weight: 650;
}

#diagram-notice.notice:not(.notice--info) {
  padding: 0.45rem 0.75rem;
  line-height: 1.35;
}

.notice--info {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colour-text);
  font-weight: 500;
  line-height: 1.45;
}

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

.field {
  display: grid;
  gap: 0.35rem;
}

.field__hint {
  font-size: 0.9rem;
}

.field__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}

.field__input {
  min-height: var(--touch-min);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-card);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-numbers);
}

.field__input:focus {
  border-color: var(--colour-accent);
}

.field__unit {
  min-width: 2.5rem;
  font-weight: 650;
}

.messages {
  display: grid;
  gap: var(--space-sm);
}

.messages__list {
  margin: 0;
  padding-left: 1.25rem;
}

.message-box {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
}

.message-box--idle {
  background: var(--colour-card-muted);
  border: 1px dashed var(--colour-border);
}

.message-box--error {
  background: var(--colour-error-bg);
  color: var(--colour-error-text);
  border: 1px solid var(--colour-error-text);
}

.message-box--warning {
  background: var(--colour-accent-soft);
  color: var(--colour-developing-text);
  border: 1px solid var(--colour-accent);
}

.result-group {
  display: grid;
  gap: var(--space-sm);
}

.result-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.result-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-sm);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--colour-border);
}

.result-list > div > dt {
  min-width: 0;
  overflow-wrap: break-word;
}

.result-list > div[hidden] {
  display: none;
}

.result-value {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: right;
}

.result-value--pending {
  color: var(--colour-muted);
  font-family: var(--font-sans);
  font-weight: 500;
}

#rotation-row {
  grid-template-columns: minmax(0, 1fr);
}

.result-note {
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow-wrap: break-word;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 500;
  font-variant-numeric: normal;
}

.diagram-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.diagram-view legend {
  padding: 0;
  font-weight: 700;
  line-height: var(--touch-min);
}

.diagram-view__option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--touch-min);
  font-weight: 500;
}

.diagram-view__option input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}

.diagram-overlays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1rem;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.diagram-overlays legend {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}

.overlay-hold {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--colour-text);
  font-weight: 650;
  line-height: 1.35;
}

.overlay-item:has(input:disabled) {
  opacity: 0.55;
}

.diagram-overlays input:disabled {
  cursor: not-allowed;
}

.overlay-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch-min);
  min-width: 0;
  margin: 0;
  font-weight: 500;
}

.overlay-item input,
.overlay-item__spacer {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: 0 0 1.15rem;
}

.swatch {
  box-sizing: border-box;
  width: 1.5rem;
  height: 0.15rem;
  border: 0;
  border-top: 0.15rem solid var(--colour-text);
  flex: 0 0 1.5rem;
}

.swatch--pitch {
  border-top-color: var(--colour-text);
}

.diagram-panel--gear-a .swatch--pitch,
.diagram-panel--tooth .swatch--pitch {
  border-top-color: var(--colour-muted);
  border-top-style: dashed;
}

.swatch--outside {
  border-top-color: var(--colour-accent);
}

.swatch--root {
  border-top-style: dashed;
  border-top-color: var(--colour-text);
}

.swatch--base {
  border-top-style: dotted;
  border-top-color: var(--colour-accent);
}

.diagram-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  min-height: 16rem;
  max-height: 36rem;
  background: var(--colour-card);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
}

.diagram-svg > :is(.diagram-root, .gear-outline-space, .diagram-label) {
  transition: opacity 150ms ease;
}

.diagram-svg--previous > :is(.diagram-root, .gear-outline-space, .diagram-label) {
  opacity: 0.4;
}

#outline-status.diagram-state {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-card);
  color: var(--colour-text);
  font-weight: 650;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .diagram-svg > :is(.diagram-root, .gear-outline-space, .diagram-label) {
    transition: none;
  }
}


.diagram-svg[hidden],
.diagram-svg--screen-hidden,
.diagram-stage[hidden] {
  display: none;
}

.tooth-frame {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}

.tooth-frame[hidden],
.tooth-nav[hidden] {
  display: none !important;
}

.tooth-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.tooth-nav__hold,
.tooth-nav__note,
.tooth-nav__readout {
  margin: 0;
  max-width: 100%;
  line-height: 1.3;
}

.tooth-nav__hold,
.tooth-nav__note {
  font-weight: 650;
}

.tooth-nav__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.tooth-nav__readout {
  min-width: 0;
  font-family: var(--font-numbers);
  font-weight: 650;
}

.tooth-nav__lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--touch-min);
  max-width: 100%;
  margin: 0;
  font-weight: 650;
}

.tooth-nav__lock input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--colour-text);
}

.tooth-nav__lock:has(input:disabled) {
  opacity: 0.55;
}

.tooth-nav__lock input:disabled {
  cursor: not-allowed;
}

.tooth-nav__view {
  max-width: 100%;
}

.tooth-nav__view summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  max-width: 100%;
  padding: 0 0.7rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--colour-muted);
  font-weight: 650;
  cursor: pointer;
}

.tooth-nav__view summary:hover,
.tooth-nav__view summary:focus-visible {
  border-color: var(--colour-accent);
  color: var(--colour-text);
  background: var(--colour-accent-soft);
}

.tooth-nav__view[aria-disabled="true"] summary {
  opacity: 0.55;
  cursor: not-allowed;
}

.tooth-nav__view:not([open]) > .tooth-nav__view-body {
  display: none;
}

.tooth-nav__view[open] > .tooth-nav__view-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}

.tooth-nav__zoom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tooth-nav__view[open] .tooth-nav__pan {
  display: grid;
  grid-template-columns: repeat(3, var(--touch-min));
  grid-template-rows: repeat(2, var(--touch-min));
  gap: 0.25rem;
  width: max-content;
  max-width: 100%;
}

#tooth-pan-up {
  grid-column: 2;
  grid-row: 1;
}

#tooth-pan-left {
  grid-column: 1;
  grid-row: 2;
}

#tooth-pan-down {
  grid-column: 2;
  grid-row: 2;
}

#tooth-pan-right {
  grid-column: 3;
  grid-row: 2;
}

.tooth-nav .button {
  padding: 0 0.7rem;
}

.tooth-nav__pan .button {
  width: var(--touch-min);
  min-width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1;
  white-space: nowrap;
}

.tooth-nav .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#gear-outline,
#tooth-profile {
  touch-action: auto;
  user-select: none;
}

#tooth-profile.diagram-svg--pannable {
  cursor: grab;
  touch-action: auto;
  user-select: none;
}

#gear-outline.diagram-svg--pickable,
#tooth-profile.diagram-svg--pannable.diagram-svg--pickable:not(.diagram-svg--panning) {
  cursor: pointer;
}

#tooth-profile:focus-visible {
  outline: 0.1875rem solid var(--colour-accent);
  outline-offset: 0.125rem;
}

#tooth-profile.diagram-svg--panning {
  cursor: grabbing;
}

.diagram-panel--tooth #gear-outline {
  display: none;
}

.feature-identify {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--space-sm);
  max-width: 100%;
}

.feature-identify[hidden] {
  display: none;
}

.feature-identify__label {
  font-weight: 650;
}

.feature-identify select {
  width: 100%;
  max-width: 22rem;
  /* A native WebKit menulist replaces min-height and padding with its own
     metrics, so the control stays about 23px tall unless height is set. */
  height: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-card);
  font: inherit;
  color: var(--colour-text);
}

.feature-panel {
  max-width: 40rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-card-muted);
}

.feature-panel p {
  margin: 0.35rem 0 0;
}

.feature-panel__name {
  margin-top: 0;
  font-weight: 650;
}

.feature-panel__limit {
  color: var(--colour-muted);
}

.feature-panel a {
  display: inline-block;
  margin-top: 0.35rem;
}

.feature-measures {
  max-width: 40rem;
}

.feature-measures[hidden] {
  display: none;
}

.feature-measures__label {
  margin: 0;
  font-weight: 650;
}

.feature-measures dl {
  margin: 0.2rem 0 0;
}

.feature-measures dl div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.15rem;
  justify-content: space-between;
  margin-top: 0.2rem;
}

.feature-measures dt,
.feature-measures dd {
  margin: 0;
}

.feature-measures dt {
  font-weight: 650;
}

.feature-hold {
  margin: 0;
  color: var(--colour-muted);
}

.diagram-event-surface {
  fill: none;
  stroke: none;
  pointer-events: all;
}

.gear-outline {
  fill: var(--colour-accent-soft);
  stroke: var(--colour-text);
}

.gear-span {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.tooth-profile {
  fill: none;
  stroke: var(--colour-text);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tooth-profile.is-identified,
.gear-span.is-identified {
  stroke: var(--colour-highlight-tooth);
}

.diagram-circle.is-identified {
  stroke: var(--colour-highlight-reference);
  stroke-dasharray: none;
}

.gear-crosshair {
  stroke: var(--colour-text);
  fill: none;
}

.diagram-circle--pitch {
  stroke: var(--colour-text);
}

.gear-circle--pitch {
  stroke: var(--colour-muted);
  stroke-dasharray: 1.5 2.2;
}

.diagram-circle--outside {
  stroke: var(--colour-accent);
}

.diagram-circle--root {
  stroke: var(--colour-text);
  stroke-dasharray: 3 2.5;
}

.diagram-circle--base {
  stroke: var(--colour-accent);
  stroke-dasharray: 1.2 2.2;
}

.diagram-shaft {
  fill: var(--colour-text);
}

.diagram-dim-line,
.diagram-extension {
  stroke: var(--colour-text);
  fill: none;
  stroke-width: 0.35;
}

.diagram-extension {
  stroke-dasharray: 1.5 1.5;
  opacity: 0.7;
}

.diagram-label {
  fill: var(--colour-text);
  font-family: var(--font-sans);
}

.understand-panel details {
  padding-top: 0.15rem;
}

.understand-panel .teach-figure,
.understand-panel .teach-table,
.understand-panel .teach-compare {
  margin: 0 0 var(--space-sm);
}

.understand-panel .teach-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 20rem;
}

.understand-panel .teach-figure {
  max-width: 36rem;
}

.understand-panel .teach-compare {
  display: grid;
  gap: var(--space-md);
  justify-content: start;
  grid-template-columns: minmax(0, 22rem);
}

.understand-panel .teach-compare .teach-figure {
  max-width: 22rem;
}

.understand-panel .teach-compare .teach-figure svg {
  max-width: 16rem;
}

.understand-panel .teach-table {
  width: 100%;
  max-width: 42rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.understand-panel .teach-table caption {
  caption-side: top;
  margin: 0 0 0.35rem;
  text-align: left;
  font-weight: 650;
}

.understand-panel .teach-table th,
.understand-panel .teach-table td {
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-bottom: 1px solid var(--colour-border);
  text-align: left;
  vertical-align: top;
}

.understand-panel .teach-table td {
  white-space: nowrap;
}

.understand-panel figcaption {
  margin: 0.35rem 0 0;
  color: var(--colour-muted);
}

@media (min-width: 40rem) {
  .understand-panel .teach-compare {
    grid-template-columns: repeat(2, minmax(0, 22rem));
  }
}

.form-actions,
.result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.button {
  min-height: var(--touch-min);
  padding: 0 var(--space-md);
  border: 1px solid var(--colour-text);
  border-radius: var(--radius);
  background: var(--colour-text);
  color: var(--colour-header-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  background: var(--colour-accent);
  border-color: var(--colour-accent);
  color: var(--colour-header-text);
}

.button--secondary {
  background: var(--colour-card);
  color: var(--colour-text);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: var(--colour-accent-soft);
  color: var(--colour-text);
  border-color: var(--colour-accent);
}

.copy-status {
  min-height: 1.5rem;
  margin: 0;
}