/* Typology page — vanilla CSS, leans on design-system tokens. */

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-background);
    margin: 0;
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl, 2rem) var(--space-lg, 1rem);
}

.page-header {
    margin-bottom: var(--space-2xl, 3rem);
}

.page-header h1 {
    font-family: var(--font-serif);
    font-size: 2.75rem;
    font-weight: 600;
    margin: 0 0 var(--space-sm, 0.5rem) 0;
}

.lead {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.tab-section {
    margin-top: var(--space-2xl, 3rem);
}

.tab-section h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    margin-bottom: var(--space-xs, 0.25rem);
}

.tab-section h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin: var(--space-xl, 2rem) 0 var(--space-sm, 0.5rem) 0;
}

.section-lead {
    color: var(--color-text-secondary);
    max-width: 70ch;
    margin: 0 0 var(--space-lg, 1.5rem) 0;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    margin-bottom: var(--space-md, 1rem);
}

.controls label { font-weight: 500; }

.controls select,
.controls input[type="text"],
.controls button {
    font: inherit;
    padding: 0.4em 0.75em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text);
}

.controls input[type="text"] { min-width: 140px; }

.controls button {
    cursor: pointer;
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.controls button:hover,
.controls button:focus-visible {
    filter: brightness(1.08);
}

.controls button:focus-visible,
.controls select:focus-visible,
.controls input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.status {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm, 0.5rem);
    min-height: 1.25em;
}

.status.error { color: #b33a3a; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: var(--color-surface);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.data-table th {
    background: var(--color-surface-sunken);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.data-table td.num,
.data-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, monospace);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.footer-crumb {
    margin-top: var(--space-2xl, 3rem);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.footer-crumb a { color: var(--color-accent); text-decoration: none; }
.footer-crumb a:hover,
.footer-crumb a:focus-visible { text-decoration: underline; }

/* Phoneme inventory cards — one block per segment class, with
   each phoneme rendered as a monospace chip. Lets a reader scan
   the whole inventory at a glance. */
.inv-class {
    margin-bottom: var(--space-lg, 1.5rem);
}
.inv-class h4 {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-sm, 0.5rem) 0;
}
.inv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.inv-chip {
    display: inline-block;
    min-width: 2.5em;
    text-align: center;
    padding: 0.4em 0.6em;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
}
.inv-chip.consonant { border-left: 3px solid #8b5a2b; }
.inv-chip.vowel     { border-left: 3px solid #2e7ca8; }
.inv-chip.tone      { border-left: 3px solid #a83d3d; }

/* ISO 639-3 code badge — used in the /macroareas table next to
   language names. Monospace, muted, subtle hover. */
.iso-badge {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 0.75em;
    padding: 0.1em 0.45em;
    margin-left: 0.25em;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    color: var(--color-text-secondary);
    text-decoration: none;
}
.iso-badge:hover,
.iso-badge:focus-visible {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.iso-badge:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}