/* coordinate-converter: the interval and build widget of module 2 (content/academy/genetics-for-data-scientists/module-2.md). */
.coordinate-converter__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--spacing-16); margin-bottom: var(--spacing-12); }
.coordinate-converter__convention { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: var(--spacing-8); padding: var(--spacing-12); border: var(--stroke-weight-1) solid var(--border-default); border-radius: var(--corner-radius-xs); }
.coordinate-converter__convention legend { padding: 0 var(--spacing-4); color: var(--text-primary); font-size: var(--font-size-14); font-weight: var(--font-weight-600); }
.coordinate-converter__convention .academy-widget__input { width: 100%; }
select.academy-widget__input.academy-widget__input { width: auto; }
.coordinate-converter__spelling { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: var(--font-size-14); white-space: pre; }
.coordinate-converter__notice { margin-bottom: var(--spacing-12); color: var(--text-danger); font-size: var(--font-size-14); }
.coordinate-converter__ruler { overflow-x: auto; margin-bottom: var(--spacing-8); padding: var(--spacing-8); background-color: var(--background-surface-2); font-family: var(--font-family-mono); font-size: var(--font-size-12); white-space: nowrap; }
.coordinate-converter__ruler-row { display: flex; align-items: center; }
.coordinate-converter__ruler-row--edges { transform: translateX(2.6rem); }
.coordinate-converter__ruler-label { position: sticky; left: 0; min-width: 8rem; color: var(--text-tertiary); }
.coordinate-converter__ruler-row--edges .coordinate-converter__ruler-label { transform: translateX(-2.6rem); }
.coordinate-converter__base { display: inline-block; width: 5.2rem; padding: var(--spacing-2) 0; border: var(--stroke-weight-1) solid var(--border-strong); text-align: center; }
.coordinate-converter__base--inside { background-color: var(--background-highlight); color: var(--text-primary); }
.coordinate-converter__base--outside { color: var(--text-tertiary); border-style: dashed; }
.coordinate-converter__base--more { border: none; color: var(--text-tertiary); text-align: left; padding-left: var(--spacing-8); }
.coordinate-converter__edge { display: inline-block; width: 5.2rem; color: var(--text-tertiary); text-align: center; }
.coordinate-converter__edge--start, .coordinate-converter__edge--end { color: var(--text-danger); font-weight: var(--font-weight-700); }
.coordinate-converter__edge--end { text-align: left; padding-left: var(--spacing-8); }
.coordinate-converter__length { margin-bottom: var(--spacing-12); color: var(--text-secondary); font-size: var(--font-size-14); }
.coordinate-converter__tests { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-4) var(--spacing-16); margin-bottom: var(--spacing-16); font-size: var(--font-size-14); }
.coordinate-converter__tests dt { color: var(--text-secondary); }
.coordinate-converter__tests dd { color: var(--text-primary); font-family: var(--font-family-mono); }
.coordinate-converter__heading { margin: var(--spacing-16) 0 var(--spacing-8); font-size: var(--font-size-16); font-weight: var(--font-weight-600); }
.coordinate-converter__table { margin-bottom: var(--spacing-8); border-collapse: collapse; font-size: var(--font-size-14); }
.coordinate-converter__table th, .coordinate-converter__table td { padding: var(--spacing-4) var(--spacing-12); border-bottom: var(--stroke-weight-1) solid var(--border-default); text-align: left; }
.coordinate-converter__table th { color: var(--text-secondary); font-weight: var(--font-weight-600); }
.coordinate-converter__table td { color: var(--text-primary); font-family: var(--font-family-mono); }
.coordinate-converter__note { margin-bottom: var(--spacing-8); color: var(--text-primary); font-size: var(--font-size-14); }
.coordinate-converter__source { color: var(--text-tertiary); font-size: var(--font-size-12); }