/* ProtoLingua ---------------------------------------------------------------
   Colour is doing real work here: each of the nine parts of speech has its own
   hue, and the gloss line beneath a word reuses that hue at lower weight so the
   two lines read as one object. Everything is defined once as a token and
   redefined for dark mode. */

:root {
    color-scheme: light dark;

    --bg: #fbfbfa;
    --panel: #ffffff;
    --ink: #16181d;
    --ink-soft: #5b6472;
    --ink-faint: #8a93a3;
    --line: #e3e6ea;
    --line-soft: #eef0f3;
    --accent: #3b5bdb;
    --accent-soft: #edf1ff;
    --warn: #b45309;
    --error: #b91c1c;

    --pos-noun: #1d4ed8;
    --pos-pronoun: #7c3aed;
    --pos-verb: #b91c1c;
    --pos-adjective: #15803d;
    --pos-adverb: #c2410c;
    --pos-adposition: #0e7490;
    --pos-conjunction: #a16207;
    --pos-determiner: #475569;
    --pos-interjection: #be185d;
    --pos-marker: #8a93a3;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --panel: #1c1f25;
        --ink: #e8eaee;
        --ink-soft: #a3acbb;
        --ink-faint: #79828f;
        --line: #2c313a;
        --line-soft: #23272e;
        --accent: #8ba4ff;
        --accent-soft: #232a3d;
        --warn: #e0a14a;
        --error: #f08a84;

        --pos-noun: #7fa5ff;
        --pos-pronoun: #c4a2ff;
        --pos-verb: #ff9189;
        --pos-adjective: #6fce8f;
        --pos-adverb: #ffab6b;
        --pos-adposition: #5fc7d8;
        --pos-conjunction: #e0bc5c;
        --pos-determiner: #a5b0c0;
        --pos-interjection: #ff8fc0;
        --pos-marker: #79828f;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
}

/* -- shell ---------------------------------------------------------------- */

.page {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;

    /* The sidebar is exactly one viewport tall and sticky, so anything past the
       bottom edge used to spill out with no way to reach it -- overflow
       defaults to visible, and a sticky element does not move when the page
       scrolls. On a short window that put the account link and the sign-out
       button somewhere the mouse could not go.

       The container itself does NOT scroll: the nav list does, and the foot
       stays pinned. Scrolling the whole sidebar would work too, but it would
       carry the account link out of view again, which is the thing that was
       broken in the first place. */
    overflow: hidden;
    min-height: 0;
}

.brand { display: flex; gap: .65rem; align-items: center; }

.brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}

.brand-name { font-weight: 650; letter-spacing: -.01em; }
.brand-sub { font-size: .78rem; color: var(--ink-faint); }

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Takes the slack, and scrolls when there is not enough. min-height:0 is
       load-bearing: without it a flex item refuses to shrink below its content
       and the overflow never engages. overscroll-behavior stops a scroll that
       reaches the end of the list from carrying on into the page behind it. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem;
    border-radius: 7px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .92rem;
}

.nav-item:hover { background: var(--line-soft); color: var(--ink); }

.nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.nav-num {
    width: 1.35rem; height: 1.35rem;
    border-radius: 5px;
    background: var(--line-soft);
    display: grid; place-items: center;
    font-size: .72rem; font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.nav-item.active .nav-num { background: var(--accent); color: #fff; }

.current-language {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.cl-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.cl-name { font-weight: 600; margin-top: .15rem; }
.cl-stats { font-size: .78rem; color: var(--ink-faint); }

/* The second grid column: a thin account bar across the top, then the page. */
.content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: .6rem 2.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel);

    /* Stays put while the page scrolls -- the whole point is that it is always
       reachable, which the old sidebar link was not. */
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar-account {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .6rem .25rem .3rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    font-size: .88rem;
}

.topbar-account:hover { background: var(--line-soft); }

.topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--accent, #3b4cca);
    color: #fff;
    font-size: .78rem;
    font-weight: 650;
}

.topbar-name { font-weight: 600; }

/* The word "Account" is what makes this findable. A name on its own does not
   tell anyone it is the way in. */
.topbar-label { color: var(--ink-faint); }

@media (max-width: 520px) {
    .topbar { padding: .6rem 1rem; }
    .topbar-name { display: none; }
}

main {
    padding: 2rem 2.5rem 5rem;
    max-width: 1100px;
}

/* -- typography ----------------------------------------------------------- */

h1 { font-size: 1.65rem; letter-spacing: -.02em; margin: 0 0 .35rem; font-weight: 650; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 2rem 0 .6rem; font-weight: 650; }

.lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 1.5rem; }
.hint { color: var(--ink-faint); font-size: .9rem; max-width: 68ch; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }
code { font-family: var(--mono); font-size: .88em; background: var(--line-soft); padding: .08em .35em; border-radius: 4px; }

/* -- interlinear: the centrepiece ---------------------------------------- */

.interlinear {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .1rem 1.05rem;
    padding: .35rem 0 .2rem;
}

.interlinear.rtl { justify-content: flex-end; }

.il-word { min-width: 0; padding-bottom: .3rem; }

.il-role {
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1.4;
}

.il-empty { color: var(--ink-faint); font-style: italic; }

/* A word standing in for one that has not been coined yet: same hue, dotted
   underline, so it is visible without shouting. */
.il-word.fallback .il-warnings {
    margin: .5rem 0 0;
    padding-left: 1.1rem;
    font-size: .8rem;
    color: var(--warn);
}

/* -- part-of-speech colours ---------------------------------------------- */

.pos-noun { color: var(--pos-noun); }
.pos-pronoun { color: var(--pos-pronoun); }
.pos-verb { color: var(--pos-verb); }
.pos-adjective { color: var(--pos-adjective); }
.pos-adverb { color: var(--pos-adverb); }
.pos-adposition { color: var(--pos-adposition); }
.pos-conjunction { color: var(--pos-conjunction); }
.pos-determiner { color: var(--pos-determiner); }
.pos-interjection { color: var(--pos-interjection); }
.pos-marker { color: var(--pos-marker); font-style: italic; }

.il-word.pos-marker .legend { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: .6rem 0 1.2rem; }

.legend-chip {
    font-size: .72rem;
    padding: .1rem .45rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: .85;
}

/* -- cards, fields, buttons ---------------------------------------------- */

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.row-fields { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }

.field { display: flex; flex-direction: column; gap: .25rem; }
.field.grow { flex: 1 1 20rem; }

.field label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
}

.text, .select {
    font: inherit;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: .38rem .55rem;
    min-width: 0;
    width: 100%;
}

.text:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.text.short { width: 17rem; }
.text.tiny { width: 7rem; }
.text.tiny.wide { width: 100%; }
.select.small { padding: .2rem .3rem; font-size: .85rem; }

.form-cell { font-family: var(--serif); font-size: 1.02rem; }

.btn {
    font: inherit;
    font-size: .88rem;
    padding: .38rem .8rem;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { opacity: .9; color: #fff; }
.btn.ghost { background: transparent; color: var(--ink-soft); }
.btn.small { font-size: .82rem; padding: .25rem .6rem; }
.btn.tiny { font-size: .75rem; padding: .12rem .45rem; }

.toolbar {
    display: flex; flex-wrap: wrap; gap: .5rem .8rem;
    align-items: center;
    margin: .8rem 0 1rem;
}

.check { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--ink-soft); }
.check input { margin: 0; }

.msg { font-size: .85rem; color: var(--accent); }
.msg.block { display: block; margin: .5rem 0; }
.msg.error { color: var(--error); }

/* Item 80. Where a library language's answer came from. The two are styled
   differently on purpose: a citation is quiet, and a judgement is not, because
   the whole reason the mark exists is that the reader would otherwise take
   both for the same kind of statement. */
.src-database,
.src-grammar {
    font-size: .78rem;
    white-space: nowrap;
    border-radius: 3px;
    padding: .1rem .35rem;
}

.src-database { color: var(--ink-soft); background: var(--accent-soft); }

.src-grammar {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
}

/* -- questionnaire -------------------------------------------------------- */

.sticky-preview {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .7rem 1rem .5rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px -14px rgba(0,0,0,.5);
}

.preview-picker { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.preview-picker .select { margin-top: .2rem; text-transform: none; letter-spacing: normal; font-size: .85rem; }

.qsection { margin-bottom: 2rem; }

.question {
    border-top: 1px solid var(--line-soft);
    padding: .9rem 0 .3rem;
}

.question.form-question { padding-left: 1.2rem; border-left: 2px solid var(--line); border-top: none; padding-top: .5rem; }

.q-text { font-weight: 550; margin-bottom: .1rem; }
.q-note { font-size: .82rem; color: var(--ink-faint); max-width: 66ch; margin-bottom: .4rem; }

.q-options { display: flex; flex-direction: column; gap: .1rem; margin-top: .35rem; }

.option {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .2rem .45rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .92rem;
    color: var(--ink-soft);
}

.option:hover { background: var(--line-soft); }
.option.chosen { background: var(--accent-soft); color: var(--ink); font-weight: 550; }

/* -- tiles ---------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }

.tile {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .85rem 1rem;
    text-decoration: none;
    color: inherit;
}

.tile:hover { border-color: var(--accent); }
.tile-num { font-size: .7rem; color: var(--ink-faint); }
.tile-title { font-weight: 600; margin-bottom: .2rem; }
.tile-body { font-size: .84rem; color: var(--ink-soft); }

.preview .source { font-size: .84rem; color: var(--ink-faint); margin-bottom: .3rem; }

/* -- sentences ------------------------------------------------------------ */

.sentence-card { padding: .9rem 1.1rem 1rem; }

.sentence-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin-bottom: .2rem;
}

.sentence-head .source { font-size: .85rem; color: var(--ink-faint); }

.tagger { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); }

.tagger-title {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-faint);
    display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
    display: inline-flex; align-items: center; gap: .25rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: .1rem .3rem .1rem .45rem;
    font-size: .85rem;
}

.chip.locked { border-width: 2px; }
.chip-word { font-family: var(--serif); }

.chip-select {
    font: inherit; font-size: .68rem;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.parse-summary {
    margin-top: .5rem;
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--ink-faint);
    word-break: break-word;
}

/* -- tables and charts ---------------------------------------------------- */

.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    font-size: .9rem;
}

.grid th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    font-weight: 600;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
}

.grid td { padding: .3rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.grid tr:last-child td { border-bottom: none; }
.grid .blank-row { background: color-mix(in srgb, var(--warn) 7%, transparent); }

.ipa { font-family: var(--mono); font-size: 1rem; }

.chart-scroll { overflow-x: auto; margin-bottom: 1rem; }

.ipa-chart {
    border-collapse: collapse;
    font-size: .82rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.ipa-chart th {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-faint);
    font-weight: 600;
    padding: .4rem .35rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.ipa-chart .rowhead { text-align: left; border-right: 1px solid var(--line); white-space: nowrap; }
.ipa-chart td { padding: .15rem .2rem; border-bottom: 1px solid var(--line-soft); text-align: center; }

.cell {
    display: inline-grid;
    place-items: center;
    width: 1.75rem; height: 1.6rem;
    font-family: var(--mono);
    font-size: .95rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.cell:hover { border-color: var(--accent); color: var(--accent); }
.cell.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cell.blank { cursor: default; opacity: .18; }
.cell.blank::after { content: "·"; }

.sample { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); }
.sample strong { color: var(--ink); }

.file { font-size: .9rem; }

@media (max-width: 820px) {
    .page { grid-template-columns: 1fr; }

    /* Narrow screens put the sidebar in the document flow at its natural
       height, so it scrolls with the page and must not clip or trap a scroll
       of its own. Both rules above are undone here deliberately. */
    .sidebar { position: static; height: auto; overflow: visible; }
    .nav-menu { flex: 0 0 auto; min-height: auto; overflow-y: visible; }
    main { padding: 1.25rem; }
}

/* -- nav groups ----------------------------------------------------------- */

.nav-group {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-faint);
    margin: .7rem 0 .15rem .6rem;
}

/* -- the five views ------------------------------------------------------- */

.view-picker { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .9rem; }

.view-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .82rem;
    padding: .18rem .55rem .18rem .35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}

.view-chip input { margin: 0; }
.view-chip:hover { border-color: var(--accent); }
.view-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

.view-chip.unavailable { opacity: .45; }
.view-chip.unavailable.on { border-style: dashed; }

.view-num {
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    background: var(--line-soft);
    display: grid; place-items: center;
    font-size: .64rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.view-chip.on .view-num { background: var(--accent); color: #fff; }

/* -- interlinear lines ---------------------------------------------------- */

.il-line { white-space: nowrap; line-height: 1.35; }

/* Whichever view is topmost leads, whatever it is. */
.il-lead {
    font-family: var(--serif);
    font-size: 1.32rem;
    line-height: 1.3;
}

.il-english,
.il-pointtranslation {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .01em;
    opacity: .72;
}

.il-lead.il-english,
.il-lead.il-pointtranslation {
    font-family: var(--serif);
    font-size: 1.2rem;
    opacity: 1;
    letter-spacing: normal;
}

.il-transliteration { font-family: var(--serif); font-size: 1.05rem; }
.il-lead.il-transliteration { font-size: 1.32rem; }

.il-ipa { font-family: var(--mono); font-size: .8rem; opacity: .8; }
.il-lead.il-ipa { font-size: 1.1rem; opacity: 1; }
.ipa-slashes::before { content: "/"; opacity: .45; }
.ipa-slashes::after { content: "/"; opacity: .45; }

.il-gap { opacity: .3; }

.il-word.fallback .il-lead {
    text-decoration: underline dotted;
    text-underline-offset: .28em;
    text-decoration-thickness: 1px;
    opacity: .82;
}

.il-warnings.quiet { color: var(--ink-faint); }

/* -- glyphs --------------------------------------------------------------- */

.glyph-run { display: inline-flex; align-items: flex-end; gap: .12rem; }

.glyph-piece {
    display: inline-grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
}

.glyph-piece img { height: 1.75rem; width: auto; display: block; }

.glyph-piece.vowel-mark { font-size: .85rem; align-self: flex-start; margin-left: -.25rem; }
.glyph-piece.vowel-mark img { height: .95rem; }

.glyph-piece.missing {
    font-family: var(--mono);
    font-size: .95rem;
    opacity: .45;
    border-bottom: 1px dotted currentColor;
}

.il-lead .glyph-piece img { height: 2.1rem; }
.il-lead .glyph-piece { font-size: 1.8rem; }

.glyph-grid .glyph-cell { text-align: center; }
.glyph-preview { max-height: 2rem; max-width: 3rem; }
.glyph-char { font-size: 1.5rem; line-height: 1; }
.glyph-input { font-size: 1.1rem; }

.hidden-file {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
}

label.btn { position: relative; overflow: hidden; cursor: pointer; }

.coverage { font-size: .9rem; color: var(--ink-soft); display: flex; align-items: center; gap: .6rem; }

.bar {
    display: inline-block;
    width: 12rem; height: .45rem;
    background: var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
}

.bar-fill { display: block; height: 100%; background: var(--accent); }

/* -- romanisation grid ---------------------------------------------------- */

.roman-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: .35rem;
    margin-bottom: 1rem;
}

.roman-cell {
    display: flex; align-items: center; gap: .35rem;
    padding: .25rem .35rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    position: relative;
}

.roman-cell.vowel { border-color: color-mix(in srgb, var(--pos-adjective) 45%, var(--line)); }
.roman-cell .ipa { min-width: 1.6rem; text-align: center; color: var(--ink-soft); }
.roman-cell .text.tiny { width: 100%; min-width: 0; }

.roman-remove {
    position: absolute;
    top: -.4rem; right: -.4rem;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink-faint);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.roman-cell:hover .roman-remove { opacity: 1; }
.roman-remove:hover { color: var(--error); border-color: var(--error); }

/* -- sticky preview head -------------------------------------------------- */

.preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
}

.preview-head .view-picker { margin: 0 0 .2rem; }

/* -- the generated guide -------------------------------------------------- */

.guide {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.75rem 2.25rem 2.25rem;
    max-width: 46rem;
}

.guide h1 { font-size: 1.7rem; margin: 0 0 .2rem; }
.guide h2 { font-size: 1.15rem; margin: 1.9rem 0 .5rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.guide h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--ink-soft); }
.guide p { margin: .5rem 0; }
.guide ul { margin: .5rem 0; padding-left: 1.2rem; }
.guide li { margin: .15rem 0; }

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: .7rem 0 1rem;
}

.guide-table th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--line);
}

.guide-table td { padding: .28rem .5rem; border-bottom: 1px solid var(--line-soft); }

.guide-block {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: .7rem .9rem;
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.6;
    overflow-x: auto;
    margin: .8rem 0;
}

/* -- accounts ------------------------------------------------------------- */

.account-page { max-width: 34rem; }

.account-page .card { display: flex; flex-direction: column; gap: .8rem; }

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .4rem;
}

.account-facts {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .2rem .8rem;
    margin: 0 0 1.5rem;
    font-size: .92rem;
}

.account-facts dt { color: var(--ink-faint); }
.account-facts dd { margin: 0; }

/* Blazor's validation output */
.validation-message {
    display: block;
    font-size: .82rem;
    color: var(--error);
    margin-top: .15rem;
}

.invalid { border-color: var(--error); }

/* -- who is signed in ----------------------------------------------------- */

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }

.current-language { margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }

.who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
    font-size: .82rem;
}

.who-name { color: var(--ink-soft); text-decoration: none; }
.who-name:hover { color: var(--accent); }

.who-out {
    font: inherit;
    font-size: .78rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-faint);
    cursor: pointer;
    text-decoration: underline;
}

.who-out:hover { color: var(--error); }

.cl-name .dot { color: var(--warn); font-size: 1.1em; line-height: 0; }

/* -- your languages ------------------------------------------------------- */

.badge {
    display: inline-block;
    margin-left: .4rem;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    vertical-align: .1em;
}

.grid .open-row { background: var(--accent-soft); }

/* -- gallery -------------------------------------------------------------- */

.gallery-tile .tile-num { margin-top: .1rem; color: var(--ink-faint); }
.gallery-tile .tile-title { font-size: 1.05rem; }
.gallery-tile .tile-body + .tile-body { margin-top: .3rem; }

/* ---------------------------------------------------------------------------
   Tiers, progress and the maturity ladder
   --------------------------------------------------------------------------- */

.domain-distinction { margin-top: -.4rem; font-style: italic; }

.tier-picker {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    margin: 1rem 0 1.4rem; padding: .6rem .7rem;
    border: 1px solid var(--line); border-radius: 6px;
}
.tier-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-right: .3rem; }
.tier {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px;
    background: none; color: inherit; font: inherit; font-size: .88rem; cursor: pointer;
}
.tier:hover:not(:disabled) { border-color: currentColor; }
.tier.chosen { background: var(--accent, #2b6cb0); color: #fff; border-color: transparent; }
.tier:disabled { opacity: .35; cursor: default; }
.tier-count { font-size: .74rem; opacity: .75; }
.tier-note { flex: 1 1 16rem; font-size: .82rem; opacity: .75; }

.tier-tag {
    margin-left: .5rem; padding: .05rem .4rem; border-radius: 3px;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
    border: 1px solid var(--line); opacity: .65; vertical-align: middle;
}
.question.answered > .q-text { font-weight: 600; }

/* The ladder. Deliberately not a percentage: expressive range arrives in
   steps, and a bar would imply it accumulates smoothly. */
.stage-card { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 2rem; }
.stage-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .8rem; }
.stage-name { font-size: 1.35rem; font-weight: 600; }
.stage-of { font-size: .8rem; opacity: .6; }
.stage-ladder { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; }
.rung {
    padding: .25rem .6rem; border-radius: 999px; font-size: .76rem;
    border: 1px solid var(--line); opacity: .45;
}
.rung.reached { opacity: 1; }
.rung.current { background: var(--accent, #2b6cb0); color: #fff; border-color: transparent; font-weight: 600; }
.stage-desc { margin: 0 0 .5rem; }
.stage-advice { margin: 0; font-size: .92rem; }

.progress-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
.progress-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; padding: .3rem .5rem; }
.progress-table td { padding: .35rem .5rem; border-top: 1px solid var(--line); }
.progress-table td.ok { color: #2f855a; font-weight: 600; }
.progress-table td.todo { opacity: .7; }
.progress-table .dash { opacity: .4; }
.progress-table .wide { width: 40%; }

.bar { height: .5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar .fill { height: 100%; background: var(--accent, #2b6cb0); }

/* --- design features: a wide comparison table that has to survive a phone --- */

/* The table scrolls inside its own box rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.feature-table { min-width: 40rem; }
.feature-table th:not(:first-child),
.feature-table td:not(:first-child) { text-align: center; width: 5.5rem; }

.feature-table td.yes { color: #2f855a; font-weight: 600; }
.feature-table td.no { opacity: .35; }

/* The builder's own row sits at the top and is marked, so the eye finds it
   before reading any of the reference systems below it. */
.feature-table tr.mine td { background: color-mix(in srgb, var(--accent, #2b6cb0) 7%, transparent); }
.feature-table tr.mine td:first-child { border-left: 3px solid var(--accent, #2b6cb0); }

.feature-table .q-note { display: block; font-size: .8rem; opacity: .7; margin-top: .1rem; }

/* --- a word's history: the chain of forms, then the working --- */

.lineage-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .35rem; }
.lineage-form { font-size: 1.35rem; letter-spacing: .01em; opacity: .75; }
.lineage-form.now { opacity: 1; font-weight: 600; }
.lineage-arrow { opacity: .4; font-size: 1.1rem; }

/* Each generation is a block with a rule left-edge, so the eye can count the
   steps without reading them. */
.stage { border-left: 3px solid var(--line); padding: .1rem 0 .6rem .8rem; margin: 0 0 .9rem; }
.stage:last-child { border-left-color: var(--accent, #2b6cb0); }
.stage-head { display: flex; align-items: baseline; gap: .6rem; }
.stage-lang { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.stage-form { font-size: 1.1rem; font-weight: 600; }

.gap-list { list-style: none; padding: 0; margin: .6rem 0 0; }
.gap-list li { padding: .55rem 0; border-top: 1px solid var(--line); }
.gap-what { font-weight: 600; }
.gap-where { margin-left: .5rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .55; }
.gap-why { font-size: .88rem; opacity: .8; margin-top: .15rem; }

/* --- typology presets --- */
.callout {
    border-left: 3px solid var(--accent, #2b6cb0); padding: .6rem .9rem;
    margin: 1rem 0 1.6rem; font-size: .92rem;
}
.preset { border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem; margin-bottom: .9rem; }
.preset.open { border-color: var(--accent, #2b6cb0); }
.preset-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.preset-name { font-size: 1.1rem; font-weight: 600; }
.preset-exemplars { font-size: .82rem; opacity: .65; margin-top: .1rem; }
.preset-summary { margin: .55rem 0 .3rem; }
.preset-freq { font-size: .78rem; opacity: .6; }
.preset-rationale { margin: .8rem 0; font-size: .92rem; padding-left: .8rem; border-left: 2px solid var(--line); }
.change-table td { font-size: .88rem; vertical-align: top; }
.change-domain {
    display: inline-block; margin-right: .45rem; padding: .03rem .35rem;
    border: 1px solid var(--line); border-radius: 3px;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6;
}
.change-table .was { opacity: .55; text-decoration: line-through; }
.change-table .now { font-weight: 600; }

/* --- typology report --- */
.tab-row { display: flex; gap: .4rem; margin: .8rem 0 1.2rem; }
.callout.warn { border-left-color: #b7791f; }
.rarity { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .5rem; }
.rarity-very-common, .rarity-common { opacity: .55; }
.rarity-uncommon { color: #b7791f; }
.rarity-rare, .rarity-very-rare { color: #c05621; font-weight: 600; }
.pct { font-size: .82rem; opacity: .7; }
.harmony { border-top: 1px solid var(--line); padding: .6rem 0; }
.harmony.unusual { border-left: 3px solid #b7791f; padding-left: .7rem; }
.harmony-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.harmony-count { font-size: .8rem; opacity: .65; white-space: nowrap; }
.harmony-eg { font-size: .82rem; opacity: .7; margin-top: .25rem; }
.attribution { margin-top: 2rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .76rem; }

/* --- sound change --- */
.rule-help { font-size: .82rem; opacity: .8; margin: .5rem 0 .6rem; line-height: 1.7; }
.rule-help code { padding: .05rem .3rem; border: 1px solid var(--line); border-radius: 3px; }
.rules-box { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; }
.rule-table code { font-size: .9rem; }
.rule-table tr.off { opacity: .4; }
.rule-actions { white-space: nowrap; }
.linkish {
    background: none; border: none; color: inherit; font: inherit;
    cursor: pointer; padding: .1rem .3rem; opacity: .7;
}
.linkish:hover:not(:disabled) { opacity: 1; text-decoration: underline; }
.linkish:disabled { opacity: .25; cursor: default; }
.select.tiny { font-size: .82rem; padding: .1rem .25rem; margin-right: .3rem; }
.sound-delta { margin: .6rem 0 1rem; font-size: .92rem; line-height: 1.8; }
.trace-table td { vertical-align: top; }
.trace-table .was { opacity: .6; font-family: ui-monospace, monospace; }
.trace-table .now { font-weight: 600; font-family: ui-monospace, monospace; }
.steps { display: flex; flex-direction: column; gap: .15rem; }
.step { font-size: .82rem; display: flex; gap: .6rem; align-items: baseline; }
.step-rule { opacity: .65; min-width: 9rem; }
.src { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .35rem;
       border: 1px solid var(--line); border-radius: 3px; opacity: .7; }
.src-grambank { border-color: #2b6cb0; }

/* --- icons ---------------------------------------------------------------
   Sized in em so an icon tracks whatever text it sits beside, and nudged down
   a fraction because a line drawing's optical centre sits above a capital's. */
.icon {
    display: inline-block; vertical-align: -0.18em;
    width: 1.15em; height: 1.15em; flex: 0 0 auto;
    opacity: .78;
}
h1 > .icon, h2 > .icon { opacity: .55; margin-right: .15em; }
.nav-item .icon { margin-right: .15rem; opacity: .6; }
.nav-item.active .icon, .nav-item:hover .icon { opacity: 1; }
.nav-item { display: flex; align-items: center; gap: .35rem; }
.nav-item .nav-num { min-width: 1.1rem; text-align: right; }

/* --- contact languages --- */
.purpose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.purpose {
    text-align: left; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px;
    background: none; color: inherit; font: inherit; cursor: pointer; display: flex;
    flex-direction: column; gap: .2rem;
}
.purpose:hover { border-color: currentColor; }
.purpose.chosen { border-color: var(--accent, #2b6cb0); box-shadow: inset 0 0 0 1px var(--accent, #2b6cb0); }
.purpose-name { font-weight: 600; }
.purpose-count { font-size: .74rem; opacity: .6; }
.purpose-desc { font-size: .82rem; opacity: .8; }
.in-mix { background: color-mix(in srgb, currentColor 4%, transparent); }
.stat-row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: .8rem 0 1rem; }
.stat { display: flex; flex-direction: column; }
.stat-n { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.stat-l { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.not-yet { opacity: .45; }

/* --- ten questions -------------------------------------------------------
   Wider than the question pages and centred: this is a focused flow, and the
   sidebar is a distraction while somebody is halfway through it. */
.start { max-width: 46rem; margin: 0 auto; }
.start-head { display: flex; justify-content: space-between; align-items: baseline; }
.start-count { font-size: .82rem; opacity: .6; }
.start-rail { display: flex; gap: .3rem; margin: .6rem 0 1.4rem; }
.pip {
    flex: 1; height: .3rem; border: none; border-radius: 999px; padding: 0;
    background: var(--line); cursor: pointer;
}
.pip.done { background: color-mix(in srgb, var(--accent, #2b6cb0) 55%, transparent); }
.pip.here { background: var(--accent, #2b6cb0); }
.start-preview {
    border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem;
    margin-bottom: 1.6rem; overflow-x: auto;
}
.start-q h2 { margin-bottom: .2rem; }
.pick {
    display: flex; flex-direction: column; gap: .15rem; width: 100%;
    text-align: left; padding: .7rem .9rem; margin-bottom: .5rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: none; color: inherit; font: inherit; cursor: pointer;
}
.pick:hover { border-color: currentColor; }
.pick.chosen { border-color: var(--accent, #2b6cb0); box-shadow: inset 0 0 0 1px var(--accent, #2b6cb0); }
.pick strong { font-size: 1rem; }
.pick span { font-size: .87rem; opacity: .8; }
.text.big { font-size: 1.3rem; padding: .6rem .8rem; width: 100%; }
.start-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.6rem;
             padding-top: 1rem; border-top: 1px solid var(--line); }
.start-nav .linkish { margin-left: auto; font-size: .82rem; }
.start-callout { display: flex; gap: .7rem; align-items: flex-start; }
.nav-item.start-link { font-weight: 600; }

/* --- family tree and reconstruction --- */
.family { margin-bottom: 1.4rem; }
.tree-row {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .4rem 0; border-top: 1px solid var(--line);
}
.tree-row.depth-1 { padding-left: 1.6rem; }
.tree-row.depth-2 { padding-left: 3.2rem; }
.tree-row.depth-3 { padding-left: 4.8rem; }
.tree-row.depth-4 { padding-left: 6.4rem; }
.tree-row.depth-5 { padding-left: 8rem; }
.tree-row.depth-6 { padding-left: 9.6rem; }
.tree-row.depth-1, .tree-row.depth-2, .tree-row.depth-3,
.tree-row.depth-4, .tree-row.depth-5, .tree-row.depth-6 {
    background: linear-gradient(to right, var(--line) 0 1px, transparent 1px) no-repeat;
    background-size: 1px 100%;
}
.tree-name { font-weight: 600; }
.tree-meta { font-size: .78rem; opacity: .6; }
.tree-how {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .04rem .35rem; border: 1px solid var(--line); border-radius: 3px; opacity: .7;
}
.tree-row.orphan { opacity: .75; }
.pick-list { display: flex; flex-direction: column; margin: .5rem 0 1rem; }
.check-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; border-bottom: 1px solid var(--line); cursor: pointer;
}
.check-row .grow { flex: 1; }
.corr { font-size: .95rem; letter-spacing: .03em; }
.rule-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .9rem; }
.chip { padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; }
.lang-changes { margin-bottom: .4rem; }
.bar.tiny { width: 5rem; height: .35rem; }

/* --- glossary terms ------------------------------------------------------
   A dotted underline and nothing else: the mark has to be findable without
   competing with the sentence it sits in. No colour, no icon, no weight
   change -- those all pull the eye harder than the word deserves. */
.term-wrap { position: relative; display: inline; }
.term {
    background: none; border: none; padding: 0; font: inherit; color: inherit;
    cursor: help; border-bottom: 1px dotted currentColor;
    opacity: .95;
}
.term:hover, .term:focus-visible, .term.open { border-bottom-style: solid; outline: none; }
.term:focus-visible { outline: 2px solid var(--accent, #2b6cb0); outline-offset: 2px; border-radius: 2px; }

.term-pop {
    position: absolute; left: 0; top: 1.6em; z-index: 40;
    display: none; width: max-content; max-width: min(24rem, 80vw);
    padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 6px;
    background: var(--bg, #fff); color: inherit;
    box-shadow: 0 6px 22px rgba(0,0,0,.16);
    font-size: .85rem; line-height: 1.45; font-weight: 400; text-align: left;
    white-space: normal;
}
.term-wrap:hover .term-pop, .term-pop.open { display: block; }
.term-pop strong { display: block; margin-bottom: .15rem; }
.term-pop em { display: block; margin-top: .35rem; opacity: .8; font-style: italic; }

/* Near the right edge a fixed-left popover runs off screen; on narrow
   viewports pin it to the left margin instead of the word. */
@media (max-width: 40rem) {
    .term-pop { left: 0; right: 0; width: auto; max-width: none; }
}
.glossary-list { margin-top: 1rem; }
.glossary-entry { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
                  padding: .7rem 0; border-top: 1px solid var(--line); }
.glossary-term { font-weight: 600; }
.glossary-def em { display: block; margin-top: .25rem; opacity: .78; font-style: italic; }
@media (max-width: 34rem) { .glossary-entry { grid-template-columns: 1fr; gap: .2rem; } }

/* --- grammaticalisation --- */
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.path {
    display: flex; flex-direction: column; gap: .25rem; text-align: left;
    padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 8px;
    background: none; color: inherit; font: inherit; cursor: pointer;
}
.path:hover { border-color: currentColor; }
.path.chosen { border-color: var(--accent, #2b6cb0); box-shadow: inset 0 0 0 1px var(--accent, #2b6cb0); }
.path-arrow { font-weight: 600; }
.path-note { font-size: .84rem; opacity: .82; }
.path-attested { font-size: .74rem; opacity: .55; font-style: italic; }

/* The cline, drawn as a track so the direction is obvious. It only runs one
   way -- affixes do not climb back into content words -- and the layout says
   so without a sentence about it. */
.cline { display: flex; align-items: stretch; gap: .25rem; margin: .8rem 0 1rem; flex-wrap: wrap; }
.cline-step {
    flex: 1 1 7rem; display: flex; flex-direction: column; gap: .2rem;
    padding: .55rem .5rem; border: 1px solid var(--line); border-radius: 6px;
    background: none; color: inherit; font: inherit; cursor: pointer; opacity: .55;
}
.cline-step.past { opacity: .8; }
.cline-step.here { opacity: 1; border-color: var(--accent, #2b6cb0);
                   box-shadow: inset 0 0 0 1px var(--accent, #2b6cb0); }
.cline-name { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.cline-form { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; }
.roman-table .ipa { font-size: 1.05rem; margin-right: .4rem; }
.roman-table tr.manual { background: color-mix(in srgb, currentColor 5%, transparent); }
.roman-table tr.manual .text { font-weight: 600; }

/* -- conformance ---------------------------------------------------------- */
/*
   The questionnaire answered from the language: 1,836 rows, so the page has to
   lead with the arithmetic and let somebody choose what to read.
*/

.conf-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: .6rem 0 .8rem;
}

.conf-figure { min-width: 6rem; }
.conf-n { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }

.conf-l {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
}

/* Two segments: answered, then settled by being inapplicable. What is left of
   the track is what is still open, so the bar reads without a legend. */
.conf-bar { display: flex; width: 100%; height: .6rem; }
.conf-bar .fill { display: block; }
.conf-bar .fill-na { background: var(--line); opacity: .85; }

.conf-count { font-variant-numeric: tabular-nums; font-weight: 600; }

.conf-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    white-space: nowrap;
    color: var(--ink-faint);
}

.conf-chapter {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1.4rem 0 .4rem;
}

.conf-sections td { vertical-align: top; }
.conf-sections td.ok { color: #2f855a; font-weight: 600; }
.conf-sections td.todo { opacity: .75; }

.conf-open > td { background: var(--line-soft); }

/* The expanded section. Capped and scrolled: the largest single section is 261
   rows, which is worth reading and not worth pushing the page to a metre long. */
.conf-detail > td { padding: .6rem; background: var(--line-soft); }
.conf-detail .grid { max-height: 28rem; overflow-y: auto; display: block; }

.conf-determined { }
.conf-notapplicable { opacity: .7; }
.conf-unspecified { opacity: .85; }

/* --- the interview: chapters of the speakers' life -------------------------
   The cards are the whole navigation. Interview and workshop use the same
   card so neither looks like the lesser option; the only difference is that a
   suggested one is outlined, and only interview chapters are ever suggested. */

.chapter-head {
    font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); margin: 2.4rem 0 .4rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}

.chapter-grid { display: grid; gap: .7rem; margin: 1rem 0 1.6rem; }
@media (min-width: 46rem) { .chapter-grid { grid-template-columns: 1fr 1fr; } }

.chapter-card {
    display: grid; gap: .3rem; align-content: start;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel);
    padding: .9rem 1rem 1rem;
    text-decoration: none; color: inherit;
}
.chapter-card:hover { border-color: var(--accent); }
.chapter-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chapter-card.suggested { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

.chapter-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.chapter-lede { font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.chapter-count {
    font-size: .76rem; color: var(--ink-faint);
    margin-top: .35rem; padding-top: .45rem; border-top: 1px solid var(--line-soft);
}
.chapter-count b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- what a chapter's answers did ---------------------------------------- */

.qsection.effect { border-top: 2px solid var(--line); padding-top: 1.4rem; margin-top: 2.6rem; }

.maps { margin: .9rem 0 1.2rem; border-top: 1px solid var(--line); }
.map-row {
    display: grid; gap: .15rem .9rem;
    padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 42rem) { .map-row { grid-template-columns: 1fr 14rem; align-items: baseline; } }
.map-row .human { font-size: .95rem; color: var(--ink-soft); }
.map-row .gram { font-size: .95rem; }
.map-row .gram b { font-weight: 600; }

/* Side by side: the same sentence with a chapter's answers taken away and put
   back. Stacks on a narrow screen, which keeps the two readings in the right
   order -- without, then with. */
.prune { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1rem 0 1.4rem; }
@media (min-width: 42rem) { .prune { grid-template-columns: 1fr 1fr; } }
.prune-col { background: var(--panel); padding: .9rem 1rem 1.1rem; overflow-x: auto; }
.prune-col h4 {
    font-family: var(--sans); font-size: .7rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
    margin: 0 0 .6rem;
}

/* --- how common each answer is, beside the answer -------------------------
   Set in the mono face and dimmed: it is evidence sitting next to a choice,
   not a score. The chosen option brightens it, because once you have picked,
   how unusual your pick is becomes the interesting part. */

.option .share {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--ink-faint);
    margin-left: auto;
    padding-left: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.option.chosen .share { color: var(--accent); }

/* Where a question comes from.

   A row of small monospace links under the question's note, sitting below the
   prose and above the options so it reads as provenance rather than as part of
   the choice. Deliberately quiet: the badge is for the reader who wants to
   check, and it should not compete with the answer they came to give.

   Each database gets its own hue so the eye can tell at a glance that word
   order is attested in two independent sources, which is a stronger claim than
   either alone and is worth being able to see without reading. */

.q-sources {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: -.15rem 0 .45rem;
}

.source-badge {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .02em;
    line-height: 1;
    padding: .2rem .38rem;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid transparent;
    color: var(--ink-faint);
    background: color-mix(in srgb, var(--ink-faint) 8%, transparent);
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}

.source-badge:hover,
.source-badge:focus-visible {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    text-decoration: none;
}

.source-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The references page.

   A bibliography, so it reads as one: the source's name carries the link, the
   licence sits beside it as a small tag, and what we actually took is stated
   under both rather than buried. Share-alike gets its own colour because it is
   the one term here that carries an obligation beyond attribution, and a
   reader should be able to see which entry it applies to without reading. */

.ref-entry {
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
    max-width: 78ch;
}
.ref-entry:last-of-type { border-bottom: none; }

.ref-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ref-name { font-weight: 600; text-decoration: none; }
.ref-name:hover { text-decoration: underline; }

.ref-licence {
    font-family: var(--mono);
    font-size: .68rem;
    padding: .15rem .4rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--ink-faint);
    background: color-mix(in srgb, var(--ink-faint) 10%, transparent);
    white-space: nowrap;
}
.ref-licence.share-alike {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ref-cite { font-size: .85rem; margin-top: .2rem; }
.ref-took { font-size: .82rem; color: var(--ink-faint); margin-top: .25rem; }

/* The link from a dataset to the report that measures your language against
   it. Set apart from the licence and citation lines above, which are duties;
   this one is an invitation. */
.ref-report { margin-top: .35rem; font-size: .82rem; }
.ref-report a { color: var(--accent); text-decoration: none; }
.ref-report a:hover { text-decoration: underline; }

/* The superscript on a percentile figure -- "72nd" -- so the number keeps the
   weight and the ordinal does not compete with it. */
.conf-unit { font-size: .55em; font-weight: 500; margin-left: .05em; }

.ref-list { list-style: none; padding: 0; max-width: 78ch; }
.ref-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.ref-list li:last-child { border-bottom: none; }
.ref-use { display: block; color: var(--ink-faint); font-size: .82rem; margin-top: .25rem; }

/* The atlas report.

   One row per chapter, and the rows that could NOT be settled are the ones
   worth seeing, so they are not dimmed into invisibility -- they carry the
   reason and the link that would fix them. A report that hides its gaps is
   not a report. */

.atlas-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }

.atlas-table { width: 100%; border-collapse: collapse; }
.atlas-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.atlas-id { font-family: var(--mono); font-size: .74rem; width: 4.5rem; white-space: nowrap; }
.atlas-id a { color: var(--ink-faint); text-decoration: none; }
.atlas-id a:hover { color: var(--accent); text-decoration: underline; }

.atlas-name { font-size: .86rem; width: 40%; }
.atlas-value { font-size: .86rem; }
.atlas-answer { font-weight: 600; }
.atlas-none { color: var(--ink-faint); font-style: italic; }

.atlas-why, .atlas-src, .atlas-fix { font-size: .76rem; color: var(--ink-faint); margin-top: .2rem; }
.atlas-src { font-family: var(--mono); font-size: .7rem; opacity: .75; }
.atlas-fix a { color: var(--accent); }

.atlas-table .share {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-faint);
    margin-left: .5rem;
    font-variant-numeric: tabular-nums;
}

tr.atlas-determined .atlas-name { color: var(--ink); }
tr.atlas-partial .atlas-id a,
tr.atlas-unknown .atlas-id a { opacity: .8; }
tr.atlas-notapplicable .atlas-name,
tr.atlas-notapplicable .atlas-id a { opacity: .55; }

/* THE CASCADE — what the speakers suggest, and where you disagreed with them.
   Item 41.

   Deliberately quieter than an answer. A proposal sits beside the question
   without competing with the options: it is a note from the people you have
   already described, not a control. A caution — a proposal that names no
   value — is quieter still, because it is raising a doubt rather than
   offering a way out of it. */
.q-proposal {
    margin: .5rem 0 .6rem;
    padding: .5rem .65rem;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 0 4px 4px 0;
    font-size: .84rem;
}
.q-proposal.caution {
    border-left-color: var(--ink-faint);
    background: color-mix(in srgb, var(--ink-faint) 7%, transparent);
}
.q-proposal-why { color: var(--ink); }
.q-proposal-act {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    flex-wrap: wrap;
}
.q-proposal-value { color: var(--ink-faint); font-size: .8rem; }
.chip.small { padding: .15rem .5rem; font-size: .78rem; }

/* WHAT EACH ANSWER DOES.

   Deliberately quieter than the proposal block above it. The proposal is the
   speakers asking for something and wants to be noticed; this is evidence, and
   evidence should be there when you look for it and out of the way when you are
   not. Hence no accent, a hairline rule instead of a bar, and a smaller face.

   The rendered sentences are monospaced so that a marker appearing in one row
   and not another lines up down the column and can be seen at a glance. */
.q-demo {
    margin: .6rem 0 .2rem;
    padding: .5rem .65rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: color-mix(in srgb, var(--ink-faint) 4%, transparent);
    font-size: .82rem;
}
.q-demo-head {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}
.q-demo-label {
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .68rem;
}
.q-demo-english { color: var(--ink-faint); font-style: italic; }
.q-demo-rows { display: flex; flex-direction: column; gap: .2rem; }
.q-demo-row {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr;
    gap: .6rem;
    align-items: baseline;
    padding: .12rem .25rem;
    border-radius: 3px;
}
.q-demo-row.chosen {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 500;
}
.q-demo-option { color: var(--ink-faint); }
.q-demo-row.chosen .q-demo-option { color: var(--ink); }
.q-demo-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

@media (max-width: 32rem) {
    .q-demo-row { grid-template-columns: 1fr; gap: 0; }
    .q-demo-option { font-size: .74rem; }
}

/* The disagreements panel. Presented as a finding rather than a fault: these
   are the places a language has a history. */
.disagreements { display: flex; flex-direction: column; gap: .55rem; }
.disagreement {
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
}
.dis-q { font-weight: 600; font-size: .88rem; }
.dis-pair {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin: .3rem 0;
    font-size: .82rem;
}
.dis-expected { color: var(--ink-faint); }
.dis-chose { color: var(--accent); font-weight: 600; }
.dis-why { font-size: .8rem; color: var(--ink-faint); }

/* SAY THIS — door three. Item 49.
   The list is meant to invite rather than nag, so each entry leads with what
   the sentence would BECOME rather than with the name of a question. */
.say-suggest { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.loss-list { margin: .3rem 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-soft); max-width: 74ch; }
.loss-list li { margin: .2rem 0; }

.gap-list { display: flex; flex-direction: column; gap: .6rem; }
.gap {
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
}
.gap-q { font-weight: 600; font-size: .89rem; }
.gap-preview {
    display: flex; align-items: baseline; gap: .5rem;
    flex-wrap: wrap; margin: .35rem 0 .45rem;
    font-size: .86rem;
}
.gap-label { color: var(--ink-faint); }
.gap-arrow { color: var(--ink-faint); }
.gap-text { font-family: var(--serif); color: var(--accent); }
.gap-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.text.wide { width: 100%; max-width: 52ch; }

/* --- nearest real languages, per area (item 50) ---------------------------
   A tie is information, not a defect: English shares its whole word order
   with four languages, one of them Gunbalang, and naming only Norwegian would
   hide the interesting one. So the set is shown inline, and each name carries
   its genus and family in a title rather than on the row -- the family matters
   when you look, not while you scan. */
.near-lang {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .05rem .5rem;
    margin: .1rem .25rem .1rem 0;
    font-size: .86rem;
    white-space: nowrap;
    cursor: help;
}

/* --- surprisal bands (item 50) -------------------------------------------
   Reuses the existing rarity colours so a "rare" answer looks the same
   wherever it is said. The two new bands are the quiet end: a choice most of
   the world makes should recede, not compete with the ones that do not. */
.rarity-ordinary, .rarity-common-enough { opacity: .55; }
.rarity-too-thinly-attested { opacity: .55; font-style: italic; }