/* seo.css — styles the generated SEO pages (per-phoneme, minimal-pair,
 * index, /ipa-chart, 404). Self-contained: no @import, no data: URIs, no
 * JS, no dependency on src/styles/* or /legal.css. Tokens copied from
 * DESIGN.md §2/§3. Keep this small — budget is ≤ 8 KB unminified. */

@font-face {
 font-family: 'ChicagoFLF';
 src: url('/fonts/ChicagoFLF.ttf') format('truetype');
 font-display: swap;
}
@font-face {
 font-family: 'Charis SIL';
 src: url('/fonts/Charis-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Charis SIL';
 src: url('/fonts/Charis-Bold.ttf') format('truetype');
 font-weight: 700;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: 'Inter';
 src: url('/fonts/InterVariable.ttf') format('truetype');
 font-weight: 100 900;
 font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
 --sand: #E5DAB6;
 --sand-dot: #C9BE94;
 --gray: #C0C0C0;
 --gray-light: #DEDEDE;
 --gray-dark: #7B7B7B;
 --border: #000000;
 --title: #7E7E9F;
 --surface: #FFFFFF;
 --text: #0E0E0E;
 --text-dim: #5C5C5C;
 --accent: #F4A12B;
 --accent-dark: #C97D14;
 --font-chrome: 'ChicagoFLF', 'Geneva', monospace;
 --font-ipa: 'Charis SIL', 'Doulos SIL', 'Gentium Plus', serif;
 --font-body: 'Inter', system-ui, sans-serif;
}

html {
 background-color: var(--sand);
 background-image: radial-gradient(var(--sand-dot) 1px, transparent 1px);
 background-size: 4px 4px;
 min-height: 100%;
}

body.seo {
 margin: 0;
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.5;
 color: var(--text);
}

/* Top bar */

.seo-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 max-width: 760px;
 margin: 0 auto;
 padding: 16px;
}

.seo-brand { font-family: var(--font-chrome); font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }

.seo-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.seo-nav a {
 font-family: var(--font-chrome);
 font-size: 12px;
 color: var(--text-dim);
 text-decoration: none;
}
.seo-nav a:hover { color: var(--text); }

/* Window */

.window {
 max-width: 760px;
 margin: 0 auto 32px;
 background: var(--gray);
 border: 1px solid var(--border);
 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.window__titlebar {
 height: 22px;
 background: var(--title);
 background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.18) 0px,
    rgba(255, 255, 255, 0.18) 1px,
    transparent 1px,
    transparent 2px
 );
 border-bottom: 1px solid var(--border);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 8px;
}

.window__title { font-family: var(--font-chrome); font-size: 13px; font-weight: 700; color: #fff; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.window__body { background: var(--surface); padding: 20px 16px 32px; }

/* Breadcrumb */

.breadcrumb { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent-dark); }

/* Typography */

h1 {
 font-family: var(--font-chrome);
 font-size: 20px;
 font-weight: 700;
 line-height: 1.2;
 margin: 0 0 16px;
}

h2 { font-family: var(--font-chrome); font-size: 14px; font-weight: 700; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--gray); }

p { margin: 0 0 12px; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

.note { background: var(--sand); border: 1px solid var(--border); padding: 10px 12px; font-size: 13px; color: var(--text-dim); margin: 12px 0; }

/* Glyph card */

.glyph-card {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
 background: var(--surface);
 border: 1px solid var(--border);
 padding: 16px;
 margin-bottom: 20px;
}

.glyph {
 font-family: var(--font-ipa);
 font-size: 88px;
 line-height: 1;
 color: var(--text);
}

.sprite { width: 96px; height: 96px; image-rendering: pixelated; border: 1px solid var(--border); background: var(--surface); }

.keyword {
 font-family: var(--font-ipa);
 font-size: 20px;
 font-style: italic;
 color: var(--text);
}
.keyword small { display: block; font-family: var(--font-body); font-style: normal; font-size: 12px; color: var(--text-dim); }

/* Audio */

.audio-row {
 display: flex;
 gap: 20px;
 flex-wrap: wrap;
 margin-bottom: 20px;
}
.audio-row figure { margin: 0; }
.audio-row figcaption { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }

audio { width: 100%; max-width: 220px; height: 32px; vertical-align: middle; }

/* Minimal-pairs table */

table.pairs {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 8px;
}
table.pairs th, table.pairs td {
 border: 1px solid var(--border);
 padding: 8px;
 text-align: left;
 vertical-align: middle;
}
table.pairs th {
 font-family: var(--font-ipa);
 font-size: 17px;
 background: var(--gray);
}
table.pairs td { font-family: var(--font-ipa); font-size: 15px; }
table.pairs audio { display: block; margin-top: 4px; }

/* CTA row */

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 32px;
 padding: 6px 14px;
 background: var(--gray);
 border: 1px solid var(--border);
 box-shadow: inset 1px 1px 0 var(--gray-light), inset -1px -1px 0 var(--gray-dark);
 font-family: var(--font-chrome);
 font-size: 13px;
 font-weight: 700;
 color: var(--text);
 text-decoration: none;
}
.btn:hover { background: var(--gray-light); }
.btn:active {
 box-shadow: inset -1px -1px 0 var(--gray-light), inset 1px 1px 0 var(--gray-dark);
}

.btn--primary {
 background: var(--accent);
 box-shadow: inset 1px 1px 0 #F8C97A, inset -1px -1px 0 var(--accent-dark);
 color: var(--text);
}
.btn--primary:hover { background: #F6B04A; }

/* Prev/next */

.prevnext {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding-top: 16px;
 border-top: 1px solid var(--gray);
 font-family: var(--font-chrome);
 font-size: 12px;
}

/* Index grid */

ul.sound-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
 gap: 8px;
 list-style: none;
 margin: 0 0 16px;
 padding: 0;
}

a.sound-chip {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 background: var(--surface);
 border: 1px solid var(--border);
 padding: 10px 4px;
 text-decoration: none;
 color: var(--text);
}
a.sound-chip:hover { background: var(--accent); }

a.sound-chip .glyph { font-size: 28px; }
a.sound-chip .keyword { font-family: var(--font-body); font-style: normal; font-size: 11px; color: var(--text-dim); }

/* IPA chart table */

table.chart {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 20px;
}
table.chart .cell { border: 1px solid var(--border); background: var(--surface); text-align: center; padding: 6px 4px; min-width: 56px; }
.cell__glyph { display: block; font-family: var(--font-ipa); font-size: 24px; line-height: 1.1; }
.cell__keyword { display: block; font-size: 10px; color: var(--text-dim); }

/* Footer */

.seo-footer { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; font-size: 12px; color: var(--text-dim); display: flex; gap: 16px; flex-wrap: wrap; }
.seo-footer a { color: var(--text-dim); }
.seo-footer a:hover { color: var(--accent-dark); }

/* Responsive */

@media (min-width: 480px) {
 .window__body { padding: 28px 32px 40px; }
 .glyph { font-size: 112px; }
}

/* Print (/ipa-chart) */

@media print {
 .seo-top, .seo-footer, .cta-row, .breadcrumb, audio { display: none; }
 @page { size: landscape; margin: 10mm; }
 html, body.seo { background: #fff; color: #000; }
 .window { max-width: none; box-shadow: none; border: none; }
 .window__titlebar { display: none; }
 .window__body { background: #fff; padding: 0; }
 table.chart .cell { background: #fff; border-color: #000; }
 .cell__keyword, h1, h2 { color: #000; }
}