/* === WIKI PAGES ===
   The prose pages: About, Resources, Contact, Impressum and everything under them.

   Loaded AFTER page.css, which is where the type tokens, the reset and the header
   come from. That is deliberate and it is a correction: the first version of these
   pages invented its own header and its own type scale (17px/1.65), which is exactly
   why they read as a different site. Nothing here re-decides a token - the font
   stack, the size and the line height are the dictionary's own.

   Three zones: the tree on the left, the prose in the middle, the footnotes on the
   right, laid out the way the entry page lays out its three - one viewport tall, each
   column scrolling inside itself. Below 1280px that model is dropped and the page
   scrolls normally; see === STEPPING DOWN === at the foot of this file. */

/* === PAGE FRAME ===
   page/core/base.css paints the body antiflash-white, which suits the entry layout
   where the three columns read as cards on a tinted ground. A page of prose is paper,
   so the wiki takes it back to white. Everything else about the body - the font stack,
   the size, the line height, the reset - stays exactly as the dictionary sets it. */
body.wiki {
    background: #fff;
}

/* === LAYOUT ===
   The entry page's model, copied: the layout is exactly one viewport tall and clips,
   and each of the three columns scrolls inside itself. The page as a whole barely
   moves, so the columns keep their bottom edge on screen at all times and the panels
   never drift away from the text they belong to.

       .wiki-layout  <- .entry-layout    height: calc(100vh - 80px), margin-top: 20px,
                                         overflow: hidden
       .wiki-main    <- .entry-content   height: 100%, overflow-y: auto, no scrollbar

   See page/components/navigation.css. The 80px is the 56px sticky header plus the
   20px margin above the layout; the 4px left over is what keeps the bottom rule just
   inside the window.

   The column widths step down together as the window narrows rather than one
   breakpoint dropping a whole zone. The number that decides when the notes column
   folds away is the measure of the middle column, not a round viewport number: below
   roughly 60 characters scholarly prose in long paragraphs becomes hard work. */
.wiki-layout {
    display: grid;
    --wiki-gap: 34px;
    grid-template-columns: 300px minmax(0, 1fr) 290px;
    gap: 0 var(--wiki-gap);
    width: 100%;
    max-width: 1440px;
    height: calc(100vh - 80px);
    margin: 20px auto 0;
    padding: 0 24px;
    overflow: hidden;
    border-bottom: 1px solid #e6ebee;
}

/* A page with neither panel: the Impressum and the Datenschutzerklärung. One column,
   held to the measure the prose has in the three-column layout and centred, rather
   than a single column running the full 1440px - the point of the measure is the line
   length, and that does not change because the panels are gone.

   Written .wiki-layout.wiki-layout--plain, not .wiki-layout--plain, on purpose: the
   responsive blocks below re-declare grid-template-columns on .wiki-layout, and at the
   same specificity the later rule wins. A single class here therefore held only above
   1440px; under it the panel-less page laid its prose into the middle of three tracks
   whose outer two were reserved for panels it does not have - 289px of text at 1280,
   264px at 1100. Two classes outrank every one of those blocks whatever the order. */
.wiki-layout.wiki-layout--plain {
    grid-template-columns: minmax(0, 1fr);
    max-width: 790px;
}

.wiki-tree,
.wiki-notes,
.wiki-main {
    height: 100%;
    overflow-y: auto;
    /* A column that reaches its top or bottom hands the scroll on to the page, so the
       header and the footer come back into view without moving the pointer off the
       text. Was `contain` (the entry nav panel's rule) until 2026-10-06: then scrolling
       up stopped at the column's top with the page itself still scrolled down, and the
       header stayed out of reach. */
    overscroll-behavior: auto;
}

/* The prose column's scrollbar rides in the gutter, not in the measure.
   A scrollbar sits at the right edge of its own box, so the box is pushed into the
   gap by a negative margin and the text pulled back out of it by the same padding:
   the words end exactly where they did, and the bar lands in the empty space between
   the prose and the footnotes. 0.65 of the gap puts it roughly in the middle of it.

   It is also invisible until the column is hovered - the thumb is transparent at rest.
   The track still reserves its width either way, so nothing shifts when it appears.
   (.entry-content hides its bar outright, which works there because an entry fits and
   never scrolls. These documents are ten screens long, so a permanently hidden bar
   read as a page that had been cut off.) */
.wiki-main {
    margin-right: calc(var(--wiki-gap) * -0.65);
    padding-right: calc(var(--wiki-gap) * 0.65);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.wiki-main:hover {
    scrollbar-color: #d5dbe0 transparent;
}
.wiki-main::-webkit-scrollbar {
    width: 10px;
}
.wiki-main::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    transition: background 0.2s ease;
}
.wiki-main:hover::-webkit-scrollbar-thumb {
    background: #d5dbe0;
}
.wiki-main:hover::-webkit-scrollbar-thumb:hover {
    background: #c2cad1;
}

/* === TREE PANEL ===
   300px, the same width as the entry page's navigation panel. It was tempting to make
   it wider for the longer titles here, but the three columns only fit on a 1366px
   laptop at this width, and matching the entry page is worth more than the extra room. */
.wiki-tree {
    padding-right: 10px;
    padding-bottom: 28px;
    border-right: 1px solid #edf1f3;
}
/* The panel's own title, matching .nav-header h6 on the entry page - 18px/700/#495057,
   in a 12px 16px header. It used to be a small uppercase grey label, which made the
   heading OVER the panel quieter than the headings inside it. */
.wiki-panel-head {
    margin: 0 0 6px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #495057;
}

/* Thin scrollbars on both panels - at 300px and 290px a default 15px bar eats real
   room - and invisible until the panel itself is hovered, the same way the prose column
   behaves. The track keeps its width either way, so nothing shifts when the thumb
   appears; only the thumb fades in.

   Both panels, not just the tree: they share this rule and the principle, and a
   permanent bar on the footnotes beside two panels that hide theirs would be the odd
   one out. */
.wiki-tree,
.wiki-notes {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.wiki-tree:hover,
.wiki-notes:hover {
    scrollbar-color: #dde3e7 transparent;
}
.wiki-tree::-webkit-scrollbar,
.wiki-notes::-webkit-scrollbar {
    width: 8px;
}
.wiki-tree::-webkit-scrollbar-thumb,
.wiki-notes::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.wiki-tree:hover::-webkit-scrollbar-thumb,
.wiki-notes:hover::-webkit-scrollbar-thumb {
    background: #dde3e7;
}

/* === THE PROSE COLUMN === */
.wiki-main {
    min-width: 0;
    /* Caps the measure at roughly 85 characters. With three zones the middle column is
       already narrower than this, so the rule does nothing; it earns its keep the
       moment the notes column folds away and the prose would otherwise take the whole
       remaining width - measured 97 characters at 1200px before this was here. */
    max-width: 48rem;
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    /* Black, not the dictionary's charcoal. Charcoal is right for an entry, where it
       sits among coloured spans and grey metadata; continuous prose is easier at full
       contrast. */
    color: #000;
    padding-bottom: 40px;
}
.wiki-breadcrumb {
    margin-bottom: 12px;
    font-size: 0.78rem;
    color: #98a3ad;
}
/* Scoped with .wiki-main on purpose. `.wiki-breadcrumb a` and `.wiki-main a` are both
   0-1-1, and the latter sits further down this file, so it silently won and the
   breadcrumb came out in the link blue. Same rule as the tree: the crumb is the text
   colour until you point at it. */
.wiki-main .wiki-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.wiki-main .wiki-breadcrumb a:hover {
    color: var(--celestial-blue);
}
.wiki-breadcrumb .sep { margin: 0 6px; }

.wiki-main h1 {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f3;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}
.wiki-main h2 {
    margin: 38px 0 12px;
    font-size: 1.32rem;
    font-weight: 600;
}
/* No standfirst under the h1: the heading says what the page is, and a sentence
   restating it in grey was noise on a reference document. */
.wiki-main h1 + h2,
.wiki-main h1 + .fold {
    margin-top: 26px;
}

/* Four levels under the h1, all upright and in the text colour, set apart by size; a
   numbered page (front matter `numbered: true`) prints 1 to 1.1.1.1 before each
   (Luis, 2026-10-12: h4 was italic grey). */
.wiki-main h3 {
    margin: 30px 0 12px;
    font-size: 1.2rem;
    font-weight: 600;
}
.wiki-main h4 {
    margin: 26px 0 8px;
    font-size: 1.125rem;
    font-weight: 600;
}
.wiki-main h5 {
    margin: 22px 0 6px;
    font-size: 1.0625rem;
    font-weight: 600;
}
.wiki-main :is(h2, h3, h4, h5, h6) > .sec-num {
    margin-right: 0.4em;
    color: #8a96a0;
    font-variant-numeric: lining-nums tabular-nums;
}
.wiki-main p { margin: 0 0 1.05em; }
/* Links take the colour of the text they sit in and only show the accent on hover -
   the rule the tree, the breadcrumb and the rule numbers already follow.
   This is 0-1-1, which beats the bare .fn-ref class further down whatever the order,
   so the footnote references come through here too and need no separate colour. */
.wiki-main a { color: inherit; }
.wiki-main a:hover { color: var(--celestial-blue); }
.wiki-notes a { color: inherit; }
.wiki-notes a:hover { color: var(--celestial-blue); }

/* Akkadian and other transliterated forms. A class rather than a bare <em>, so
   "this is Akkadian" stays distinguishable from "this is emphasis" in the markup. */
.ak { font-style: var(--akkadian-font-style); }
/* Sumerian is transliterated spaced, never italic (Conventions, rule 2). */
.sux {
    font-style: normal;
    letter-spacing: var(--sumerian-letter-spacing);
}

/* === NUMBERED PARAGRAPHS ===
   These numbers are the citable unit: the prose itself says "see § 21", and a printed
   citation will point at one. So each is an anchor that links to itself. Each document
   is its own page, so each numbers from 1 and the ids need no prefix. */
.para {
    margin: 0 0 1.05em;
    scroll-margin-top: 16px;
}
.para-num {
    font-weight: 700;
}
.para-num a {
    color: inherit;
    text-decoration: none;
}
.para-num a:hover { color: var(--celestial-blue); }

.rules {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Conventions' rules. They carried their own numbers "§ 1 ... § 33" until 2026-10-06;
   since the About pages number their titles and subtitles (§5.2.2 Vowels), the rules
   are unnumbered and set as the dash lists elsewhere on these pages. Each <li> keeps its
   id (r1 ... r33), so an old link to a rule still lands on it. */
.rules > li {
    position: relative;
    margin: 0 0 0.95em;
    padding-left: 1.15em;
    scroll-margin-top: 16px;
}
.rules > li::before {
    content: "\2013";
    position: absolute;
    left: 0.15em;
    color: #b6bfc7;
}
/* No longer in the markup of the About pages; kept for any page that still numbers. */
.rules .rule-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 3.3rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #97a2ac;
    text-decoration: none;
}
.rules .rule-num:hover { color: var(--celestial-blue); }

/* Landing on a paragraph or rule from a link. The flash class does the same job when
   the same target is clicked twice - :target only fires on a change. */
.para:target,
.rules > li:target,
.para.is-flash,
.rules > li.is-flash {
    background: #fffbe9;
    box-shadow: 0 0 0 6px #fffbe9;
    border-radius: 2px;
}
.para.is-flash,
.rules > li.is-flash {
    animation: wiki-flash 1.4s ease-out;
}
@keyframes wiki-flash {
    0%   { background: #ffeeb0; box-shadow: 0 0 0 6px #ffeeb0; }
    100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .para.is-flash,
    .rules > li.is-flash,
    .notes-list li.is-flash {
        animation: none;
    }
}

/* === LISTS === */
.wiki-main ul.bullets {
    margin: 0 0 1.2em;
    padding-left: 1.15em;
    list-style: none;
}
.wiki-main ul.bullets > li {
    position: relative;
    margin-bottom: 0.55em;
}
.wiki-main ul.bullets > li::before {
    content: "\2013";
    position: absolute;
    left: -1em;
    color: #b6bfc7;
}

/* === NOTES PANEL ===
   Not aligned to their references, on purpose. Anchoring a note to the line that cites
   it needs JavaScript to measure and stagger, because notes collide when two references
   are close - and they are: rule 20 of Conventions carries two on its own. The numbers
   already do the work of linking, so the panel is just a list, and clicking either end
   scrolls to the other and flashes it. */
.wiki-notes {
    padding-left: 16px;
    padding-bottom: 28px;
    border-left: 1px solid #edf1f3;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #63707c;
}
.notes-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.notes-list li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0 4px;
    margin-bottom: 0.7em;
    padding: 2px 4px 2px 0;
    border-radius: 3px;
    scroll-margin-top: 12px;
}
/* Set like the reference it answers: superscript and smaller. It is a grid item, so
   vertical-align does nothing to it - the raise has to come from alignment plus a
   nudge, which is what align-self and the padding below are for. */
.fn-num {
    align-self: start;
    padding-top: 0.15em;
    font-size: 0.74em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-decoration: none;
    color: inherit;
}
.fn-num:hover { color: var(--celestial-blue); }
.notes-list li:target,
.notes-list li.is-flash {
    background: #fffbe9;
}
.notes-list li.is-flash {
    animation: note-flash 1.4s ease-out;
}
@keyframes note-flash {
    0%   { background: #ffeeb0; }
    100% { background: transparent; }
}

/* The reference in the text. */
.fn-ref {
    font-size: 0.72em;
    font-weight: 700;
    line-height: 0;
    vertical-align: 0.42em;
    padding: 0 0.12em;
    text-decoration: none;
}

/* An unresolved reference carried over from the Word source, where it was a
   highlighted "xy." Left visible on purpose: dropping it silently would leave a
   citation that quietly points nowhere. */
.todo {
    padding: 0 5px;
    border-radius: 3px;
    background: #fff3cd;
    color: #8a6d2f;
}

/* === WORKS CITED === */
.works-cited {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
    line-height: 1.5;
}
/* Each entry is two cells: the work, and its siglum in a column down the right edge.
   A fixed column - not a float and not `auto` - is what makes the sigla line up: every
   entry is its own grid, so an intrinsic width would be measured per row and each row
   would put its siglum somewhere different. The width suits the 95th percentile (six
   characters); the handful of long ones, which are really short titles rather than
   sigla, wrap inside the column instead of being clipped or pushing the text. */
.works-cited {
    --sigla-col: 5.4rem;
}
.works-cited li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sigla-col);
    column-gap: 16px;
    align-items: baseline;
    margin-bottom: 0.7em;
}
/* The hanging indent belongs to the entry now, not to the row: on the row it would have
   shifted the siglum cell as well. */
.bib-entry {
    padding-left: 1.6em;
    text-indent: -1.6em;
}

/* The "read it online" mark, at the end of the reference it belongs to.
   Baseline-aligned and grey so the line still reads as one sentence; it takes the
   link colour on hover, like any other link. Sized in em so it tracks the text
   rather than a fixed pixel size. */
.bib-open {
    display: inline-block;
    margin-left: 0.35em;
    color: #b3bcc4;
    vertical-align: -0.1em;
    transition: color 0.15s ease;
}
.bib-open svg {
    display: block;
    width: 0.82em;
    height: 0.82em;
}
/* The open-page arrow is drawn down to y=21 of its 24-unit box, the envelope beside it
   on the Team page only to y=20, so the arrow's box hung one unit below the baseline
   the envelope sits on. Lifted by that one unit (1/24 of the icon), both stand on the
   text's baseline. */
.bib-open:not(.team-mail) svg {
    transform: translateY(calc(-0.82em / 24));
}
.bib-open:hover,
.bib-open:focus-visible {
    color: var(--vermilion, #d94f2b);
}

/* Section numbers on the About pages (§3, §3.1, §3.1.1), in tree order since 2026-10-06.
   Written into the HTML, not generated by CSS counters, because they are cited ("see §3.1
   Attestations") and must survive copying, printing and a reader without CSS. The number
   below a page title is a link to its own heading, like a rule number in Conventions, so
   the address of a section is one click away. Lighter than the title, so the words lead.
   Scoped with .wiki-main: `.wiki-main a { color: inherit }` (0-1-1) beat a bare .sec-num
   and painted the linked numbers in the heading's black. */
.wiki-main .sec-num {
    color: #8a96a0;
    font-weight: inherit;
    font-style: normal;
    text-decoration: none;
    font-variant-numeric: lining-nums tabular-nums;
}
.wiki-main a.sec-num:hover,
.wiki-main a.sec-num:focus-visible {
    color: var(--celestial-blue, #2f80c3);
}

/* The Team page's envelope beside each profile mark: same look, and a click copies the
   address (wiki.js) instead of opening a mail client - without JavaScript it is a plain
   mailto link. "Copied" shows for a moment under the mark, so the reader sees that
   something happened without a toast this page does not load. */
.team-mail {
    position: relative;
    margin-left: 0.3em;
}
.team-mail.is-copied {
    color: var(--vermilion, #d94f2b);
}
.team-mail.is-copied::after {
    content: attr(data-copied-label);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0.3em);
    padding: 0.15em 0.45em;
    border-radius: 3px;
    background: #2b3a45;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* === TABLES ===
   Six columns of mostly short cells. It stops shrinking at 720px and scrolls sideways
   inside its own box, so a narrow window scrolls the table rather than the page. */
.table-scroll {
    margin: 0 0 1.4em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wiki-table {
    width: 100%;
    min-width: 720px;
    /* At 1280px and up the table always has its widened width (--table-w, set by
       wiki.js: the text plus the footnote column), so its columns never re-flow: at the
       text's width it scrolls sideways, widened it shows whole. */
    min-width: max(720px, var(--table-w, 720px));
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.4;
}
.wiki-table th,
.wiki-table td {
    padding: 8px 11px;
    border-bottom: 1px solid #eef1f3;
    text-align: left;
    vertical-align: top;
}
.wiki-table thead th {
    border-bottom: 2px solid #dfe4e8;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c8791;
    white-space: nowrap;
}
.wiki-table tbody tr:hover { background: #fafbfc; }
.wiki-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* An entry citation (How to cite): indented, monospace and small enough that the longest form, the
   version citation, stays on one line in the text column; a phone may still break it. */
.wiki-main .cite-line {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8125rem;
    margin-left: 1.5em;
    overflow-wrap: anywhere;
}

/* === TECHNICAL PAGES (pages from docs/wiki/*.md, e.g. API access) ===
   Addresses, field names and parameters are set apart from the prose instead of running
   on in it: a paragraph that holds nothing but code is a display line (one address per
   line), and a list of code items a compact list. Generated by scripts/wiki/build.mjs;
   see docs/wiki/README.md. */
.wiki-main code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.86em;
    padding: 0.08em 0.35em;
    border-radius: 3px;
    background: #f2f4f6;
    color: #24303a;
}
.wiki-main .code-line {
    margin: 0.35em 0 1em;
    padding: 0.55em 0.9em;
    border-left: 3px solid #d5dbe0;
    border-radius: 0 4px 4px 0;
    background: #f7f9fa;
    line-height: 1.9;
}
.wiki-main .code-line code {
    padding: 0;
    background: none;
    font-size: 0.9em;
}
.wiki-main .code-line a {
    text-decoration: none;
}
.wiki-main .code-line a:hover code {
    text-decoration: underline;
}
/* A code list with descriptions ("`file`: what it holds"): two columns, the code as wide
   as its longest item and the descriptions all starting at one indent. Stacked on a
   phone, where two columns would leave the description no room. */
.wiki-main dl.code-defs {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.1em;
    row-gap: 0.45em;
    margin: 0.4em 0 1.1em 0.9em;
}
.wiki-main dl.code-defs > dt,
.wiki-main dl.code-defs > dd {
    margin: 0;
}
.wiki-main dl.code-defs > dt {
    white-space: nowrap;
}
@media (max-width: 600px) {
    .wiki-main dl.code-defs {
        grid-template-columns: 1fr;
        row-gap: 0.15em;
    }
    .wiki-main dl.code-defs > dd {
        margin: 0 0 0.5em 0.9em;
    }
}
.wiki-main ul.code-list {
    margin: 0.3em 0 1em;
    padding-left: 0.9em;
}
.wiki-main ul.code-list > li {
    margin-bottom: 0.3em;
}
.wiki-main ul.code-list > li::before {
    content: none;
}

/* === BILINGUAL PAGES (Impressum, Datenschutz, Contact) ===
   The DE | EN switch of the footer's funding notice (same buttons, same script,
   common/funderLang.js) at the top right of the page, and the two versions below it.
   Without JavaScript both versions show, German first, divided by a rule. */
.page-lang {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 -1.2em;
    position: relative;
    z-index: 1;
}
.page-lang .funder-lang {
    margin: 0;
}
.lang-version + .lang-version {
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid #e6ebee;
}
.lang-version[hidden] {
    display: none;
}
/* With the switch working only one version shows: no divider above it. */
.lang-switching .lang-version + .lang-version {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.legal-binding {
    color: #7c8791;
    font-size: 0.9em;
}

/* === TABLE TOOLS: Widen and Enlarge (wiki.js) ===
   Two icon buttons in a row of their own above the table, at its right end. They live
   in the .table-frame wiki.js wraps around the scroll box, not inside it, so they stay
   at the frame's right edge while the table scrolls sideways - and when the table is
   widened, they move out with that edge. */
.table-frame {
    margin: 0 0 1.4em;
}
.table-frame > .table-scroll {
    margin: 0;
}
.table-tools {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin: 0 0 2px;
}
.table-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #9aa5ae;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.table-tool svg {
    width: 15px;
    height: 15px;
    flex: none;
}
.table-tool:hover,
.table-tool:focus-visible {
    color: var(--vermilion, #d94f2b);
    border-color: #e6ebee;
    background: #fafbfc;
    outline: none;
}
/* Pressed: the arrow turns round, pointing back to the text. */
.table-tool--wide[aria-pressed="true"] {
    color: var(--vermilion, #d94f2b);
}
.table-tool--wide[aria-pressed="true"] svg {
    transform: scaleX(-1);
}
/* No notes column below 1280px, so nothing to widen over. */
@media (max-width: 1279px) {
    .table-tool--wide { display: none; }
}

/* Widened. The prose column spans the notes column too and sits above it; every block
   in it keeps the measured text width, except the widened table, which takes the whole
   width over the notes - opaque, with a soft edge where it covers them. The column is
   transparent to the pointer where it has no content, so the notes beside the text keep
   scrolling and their links keep working. Rows are fixed so the tree and the notes stay
   in the first row instead of being pushed to a second one by the wider column. */
@media (min-width: 1280px) {
    .wiki-layout.has-wide-table .wiki-tree  { grid-column: 1; grid-row: 1; }
    .wiki-layout.has-wide-table .wiki-notes { grid-column: 3; grid-row: 1; position: relative; z-index: 1; }
    .wiki-layout.has-wide-table .wiki-main {
        grid-column: 2 / -1;
        grid-row: 1;
        max-width: none;
        position: relative;
        z-index: 2;
        pointer-events: none;
    }
    .wiki-layout.has-wide-table .wiki-main > * {
        max-width: var(--prose-w);
        pointer-events: auto;
    }
    .wiki-layout.has-wide-table .wiki-main > .table-frame.is-wide {
        max-width: none;
        background: #fff;
        box-shadow: 12px 0 24px -12px rgba(43, 58, 69, 0.18);
    }
    /* Widened, the table is exactly the frame's width - it never needs the sideways
       scrollbar, whatever the measured --table-w came to. */
    .wiki-layout.has-wide-table .table-frame.is-wide .wiki-table {
        min-width: 0;
        width: 100%;
    }
}

/* Figures get the same two tools (wiki.js): the frame takes over the figure's outer
   margins so the tool row sits right above it. Widened, a drawing fills the wider frame;
   a picture grows only up to its own pixels (wiki.js offers Widen only where it shows more). */
.figure-frame {
    margin: 1.2rem 0 1.6rem;
}
.figure-frame > figure,
.figure-frame > .stemma {
    margin: 0;
}
@media (min-width: 1280px) {
    .wiki-layout.has-wide-table .figure-frame.is-wide .stemma-img {
        max-width: none;
    }
}
.table-dialog--figure .table-dialog-body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.figure-dialog-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Enlarged: a copy of the table in a modal window, as wide as the screen allows. */
.table-dialog {
    /* margin:auto is what centres a modal <dialog>; the site's reset zeroes it, which
       pinned the window to the top-left corner. */
    margin: auto;
    /* No cap of its own: the whole width and up to the whole height of the screen.
       A table taller than that is scaled down to fit by wiki.js (not below 75%). */
    width: 96vw;
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    background: #fff;
    color: #000;
    overflow: hidden;
}
.table-dialog[open] {
    display: flex;
    flex-direction: column;
}
.table-dialog::backdrop {
    background: rgba(25, 33, 40, 0.5);
}
.table-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 20px;
    border-bottom: 1px solid #eef1f3;
}
.table-dialog-title {
    font-weight: 600;
    color: #343a40;
}
.table-dialog-body {
    overflow: auto;
    padding: 6px 20px 20px;
    overscroll-behavior: contain;
}
.table-dialog-body .wiki-table {
    font-size: 0.9rem;
}

/* A stemma drawn by the team (draw.io SVG) instead of built in HTML: the image fills
   the frame's width up to its own 862px and never past it, keeping its proportions;
   a click opens it on its own for a closer look. */
.stemma--image .stemma-img-link {
    display: block;
}
.stemma--image .stemma-img {
    display: block;
    width: 100%;
    max-width: 862px;
    height: auto;
    margin: 0 auto;
}

/* === STEMMA DIAGRAMS ===
   Two family trees. In the Word source both are laid out with tab stops, which carries
   the shape to a reader's eye and nothing at all to a machine - converting the file to
   text destroys them completely. Rebuilt so the relationships survive copy-paste, a
   screen reader and a phone screen. */
.stemma {
    margin: 26px 0 30px;
    padding: 20px 18px;
    border: 1px solid #eef1f3;
    border-radius: 6px;
    background: #fcfdfd;
}
.stemma-caption {
    margin: 0 0 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #98a3ad;
}
.stemma-chron {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px 12px;
    font-size: 0.82rem;
}
.stemma-chron .node {
    padding: 7px 10px;
    border: 1px solid #e3e9ed;
    border-radius: 4px;
    background: #fff;
    text-align: center;
}
.stemma-chron .node--root {
    grid-column: 1 / -1;
    border-color: var(--charcoal);
    font-weight: 600;
}
.stemma-chron .node--wide { grid-column: 1 / -1; }
.stemma-chron .node--quiet {
    border-style: dashed;
    color: #98a3ad;
}
.stemma-chron .node--empty {
    border: 0;
    background: none;
}

.stemma-tree,
.stemma-tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.stemma-tree ul {
    margin-left: 0.7rem;
    padding-left: 1rem;
    border-left: 1px solid #dfe6ea;
}
.stemma-tree li {
    position: relative;
    padding: 3px 0 3px 0.9rem;
    font-size: 0.85rem;
    font-weight: 400;
}
.stemma-tree li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 0.65rem;
    height: 1px;
    background: #dfe6ea;
}
.stemma-tree > li::before { content: none; }
.stemma-tree > li { padding-left: 0; }
/* Branch nodes carry weight, leaves do not, so the shape of the tree is legible
   without reading it. Where :has() is unsupported everything stays at normal weight
   and the indentation alone carries the hierarchy - which is why the default is the
   leaf style rather than the branch one. */
.stemma-tree li:has(> ul) { font-weight: 600; }
.stemma-tree .leaf-note {
    color: #98a3ad;
    font-weight: 400;
}

/* For a caption that names a table to a screen reader while the heading above it
   already does the job for everyone else. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* === STEPPING DOWN ===
   1280-1439: the same three zones, tightened. A 1366px laptop is still a normal
   university machine and it does fit, but only just. */
@media (max-width: 1439px) {
    .wiki-layout {
        --wiki-gap: 26px;
        grid-template-columns: 272px minmax(0, 1fr) 258px;
        gap: 0 var(--wiki-gap);
        padding: 0 20px;
    }
}

/* Below 1280 the middle column would drop under about 60 characters with three zones,
   so the footnotes stop being a column. They cannot simply move under the prose while
   the layout is one viewport tall and clipping - a second grid row would be cut off -
   so the whole entry-style model is dropped here and the page scrolls normally again.
   The tree becomes sticky instead, which is the closest thing to staying put that
   ordinary page flow offers. */
@media (max-width: 1279px) {
    .wiki-layout {
        grid-template-columns: 264px minmax(0, 1fr);
        height: auto;
        overflow: visible;
        padding: 0 20px 48px;
        border-bottom: 0;
    }
    .wiki-main {
        height: auto;
        overflow: visible;
        margin-right: 0;
        padding-right: 0;
    }
    .wiki-tree {
        position: sticky;
        top: 76px;
        height: auto;
        max-height: calc(100vh - 96px);
        padding-bottom: 12px;
    }
    /* Out of the grid's second column and under the prose, as endnotes. */
    .wiki-notes {
        grid-column: 2;
        height: auto;
        overflow: visible;
        padding-left: 0;
        border-left: 0;
        margin-top: 40px;
        padding: 16px 0 0;
        border-top: 1px solid #e8edf0;
    }
    .wiki-notes .wiki-panel-head {
        margin-bottom: 10px;
    }
    /* Back under a sticky page header, so anchors need to clear it again. */
    .para,
    .rules > li,
    .fold > summary {
        scroll-margin-top: 72px;
    }
}

/* Below 1024 there is no room for a panel beside the prose. The tree does not vanish -
   it is the same tree the bars button in the header opens, which is how entry pages
   reach the wiki too, so nothing is lost by hiding this copy. */
@media (max-width: 1023px) {
    .wiki-layout {
        display: block;
        max-width: 780px;
        margin: 0 auto;
        padding: 18px 16px 44px;
    }
    .wiki-tree {
        display: none;
    }
    .wiki-main h1 { font-size: 1.65rem; }
    .wiki-main h2 { font-size: 1.25rem; }
    .stemma { padding: 14px 12px; }
    .stemma-chron {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .stemma-chron .node--wide,
    .stemma-chron .node--root { grid-column: 1 / -1; }
    .stemma-chron .node--empty { display: none; }
}

/* === FOLDABLE SECTIONS ===
   Conventions is 33 numbered rules in three parts; folding lets a reader collapse the
   parts they are not consulting and see the shape of the document at a glance.

   Built on <details>/<summary>, not a click handler: it folds with JavaScript off, the
   keyboard gets it for free, and browsers expand a <details> automatically when a URL
   fragment points inside it - which is what keeps a citation like #r21 working when its
   section happens to be closed. wiki.js adds the same behaviour for older browsers.

   Open by default, deliberately. Closed would look tidier, but it would hide the text
   from Ctrl+F and from anything printing the page, and this is a reference document. */
.fold {
    margin: 0 0 6px;
}
.fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 12px;
    padding: 6px 8px 6px 0;
    border-radius: 3px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}
/* The default disclosure triangle, removed in both dialects, so the chevron below is
   the only marker. */
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }
.fold > summary:hover {
    color: var(--celestial-blue);
}
.fold > summary:focus-visible {
    outline: 2px solid var(--celestial-blue);
    outline-offset: 2px;
}
.fold-chevron {
    flex: 0 0 auto;
    width: 0.8em;
    height: 0.8em;
    color: #97a2ac;
    transition: transform 0.2s ease;
}
.fold[open] > summary .fold-chevron {
    transform: rotate(90deg);
}
.fold-body {
    padding-left: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .fold-chevron { transition: none; }
}

/* === HYPHENATION ===
   These columns are narrow - 734px for the prose, 258px for the footnotes - and long
   Assyriological words ("logographic-syllabic", "Morgenländische") leave holes in a
   ragged edge. `hyphens: auto` closes them. It works because every page declares
   <html lang="en">; without a language the browser has no dictionary and does nothing.

   hyphenate-limit-chars keeps it from splitting short words or leaving one or two
   letters stranded: at least a 6-letter word, 3 characters before the break and 3
   after. Browsers that do not know the property just use their own defaults.

   WHAT MUST NOT HYPHENATE, and why it matters more here than on a normal site:
   in Akkadian transliteration the hyphen is not punctuation, it is the sign boundary.
   A break inserted into u-na-ah-hi-id is indistinguishable from the real hyphens
   around it, so a reader cannot tell the word's spelling from the typesetting. The
   same goes for logograms, determinatives and the transliterated forms in the table
   and the stemmata. Bibliography entries are excluded too: their titles are German
   and Italian, and English patterns would break them in the wrong places. */
.wiki-main,
.wiki-notes {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

.ak,
.sux,
.logogram,
.determinative,
.works-cited,
.wiki-table,
.stemma,
.rules .rule-num,
.para-num,
.fn-ref,
.fn-num,
code,
.site-tree {
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* === ABBREVIATIONS AND SIGLA ===
   A two-column lookup table built from <dl>: the abbreviation in the left column, the
   name it stands for in the right. A grid rather than a table because the pairs are a
   definition list semantically, and because the abbreviation column should be exactly
   as wide as its widest member and no wider.

   Generated by app:sigla from the taxonomies - see modules/app.xqm. */
/* One measurement for every abbreviation list, on both pages.
   The width was `max-content`, which is measured per list - and there is one list per
   taxonomy, so the six sections of the Abbreviations page came out at 117, 131, 281, 48,
   48 and 134px and the explanations began at six different places down the page. The
   Sigla fold on the Bibliography was a seventh. A fixed column is what makes them agree.

   8.5rem is taken from the data: of the 208 glosses across the six taxonomies the median
   is 4 characters, the 95th percentile 12, and exactly one - "Borrowed from an unknown
   language" - runs past 20. That one wraps inside its column rather than setting the
   width for the other 207. */
.sigla {
    --sigla-term-col: 8.5rem;
    display: grid;
    grid-template-columns: var(--sigla-term-col) minmax(0, 1fr);
    gap: 2px 16px;
    margin: 0 0 1.8em;
    font-size: 0.95rem;
}
/* The column does NOT narrow with the window, because the prose column does not: it is
   756px at 1500, 768px at 1200 once the notes fold away, and still 748px at 900. Stepping
   the abbreviations down at those breakpoints wrapped eight terms where there was in fact
   more room than before, not less. Only a phone genuinely runs out of width - at 390px
   the column is 358px - and there two columns is the wrong shape anyway, so the list
   stacks: the abbreviation on its own line with its explanation under it. */
@media (max-width: 599px) {
    .sigla {
        display: block;
    }
    .sigla dt {
        margin-top: 0.9em;
        padding-top: 2px;
    }
    .sigla dt:first-of-type {
        margin-top: 0;
    }
    .sigla dd {
        margin: 0;
        padding-bottom: 2px;
    }
    /* Stacked, the stripe has to run the full width of both lines to read as one row. */
    .sigla dt:nth-of-type(odd),
    .sigla dd:nth-of-type(odd) {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .sigla dt:nth-of-type(odd) {
        border-radius: 3px 3px 0 0;
    }
    .sigla dd:nth-of-type(odd) {
        border-radius: 0 0 3px 3px;
    }
}
.sigla dt {
    font-weight: 600;
    /* An abbreviation is not a word: breaking "PS onward(s)" across a line would read as
       part of the siglum. Same reason the Akkadian is excluded. It may still wrap at a
       space when it is too long for the column - the one gloss that needs to - and
       min-width lets the cell shrink to its column instead of pushing it wider. */
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.sigla dd {
    margin: 0;
}
/* Zebra striping across a two-column grid needs the rows counted in pairs: every fourth
   child starting at the third is the left cell of an odd row, and the one after it is
   its right cell. Without it the eye loses the line on a 54-row list. */
.sigla dt:nth-of-type(odd),
.sigla dd:nth-of-type(odd) {
    background: #fafbfc;
}
.sigla dt:nth-of-type(odd) {
    margin-left: -8px;
    padding-left: 8px;
    border-radius: 3px 0 0 3px;
}
.sigla dd:nth-of-type(odd) {
    margin-right: -8px;
    padding-right: 8px;
    border-radius: 0 3px 3px 0;
}

/* The date a generated list was last built. Both lists on the Bibliography page grow,
   so the stamp is not decoration: it tells a reader whether what they are looking at is
   this morning's state or last June's. */
.gen-stamp {
    margin: 0.4em 0 1.8em;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #8a949d;
}
.fold-body > .gen-stamp:last-child {
    margin-bottom: 0.4em;
}

/* How many entries a generated fold holds, so the size of a list is visible while it is
   closed. Pushed to the right of the summary rather than sitting against the label. */
.fold-count {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 9px;
    background: #f1f4f6;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #97a2ac;
}
.fold > summary:hover .fold-count {
    background: #e8edf1;
}
/* The pill sits at the right edge of the column, so its tooltip opens leftwards from
   it rather than centred, which would push half of it off the column on a phone. The
   pill's own tiny bold type is not the tooltip's. */
.fold-count.tooltip-container {
    cursor: help;
}
.fold-count.tooltip-hover .tooltip-text {
    left: auto;
    right: 0;
    transform: none;
    font-size: 0.8rem;
    font-weight: 400;
    font-variant-numeric: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.fold-count.tooltip-hover .tooltip-text::after {
    left: auto;
    right: 10px;
}

/* === ARRANGING THE BIBLIOGRAPHY === */
.bib-arrange {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f3;
    font-size: 0.85rem;
    color: #63707c;
}
/* Arrangement on the left, order on the right, at opposite ends of the measure: they
   are two separate questions and the gap between them says so better than a caption
   would. auto rather than space-between because the Show button is a third child - it
   is hidden as soon as the script runs, and without the auto margin its appearing and
   disappearing would move both groups. */
.bib-toggle--sort {
    margin-left: auto;
}

/* === THE SEGMENTED TOGGLES ===
   Radio inputs wearing buttons, in the search toolbar's colours: charcoal on white at
   rest, white on vermilion when chosen, and the index page's lighter vermilion (#f38361,
   the same value .diacritic-btn hovers with) to show what is about to be chosen. Hover
   and chosen are deliberately not the same red - in a segmented control they can be on
   screen at once.

   The input stays in the page and stays focusable - moved out of sight rather than
   display:none, which would take it out of the tab order and out of the accessibility
   tree - and the label beside it is what gets painted. */
.bib-toggle {
    display: inline-flex;
    border: 1px solid #dfe4e8;
    /* 5px outside against 4px inside, so a chosen end segment fills the corner it sits
       in instead of leaving a hairline of white showing through. */
    border-radius: 5px;
    background: #fff;
}
.bib-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
.bib-toggle-btn {
    padding: 2px 9px;
    border-left: 1px solid #eef1f3;
    font-size: 0.76rem;
    line-height: 1.7;
    color: var(--charcoal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
/* first-of-type counts labels only, so the interleaved inputs do not confuse it. */
.bib-toggle-btn:first-of-type {
    border-left: 0;
    border-radius: 4px 0 0 4px;
}
.bib-toggle-btn:last-of-type {
    border-radius: 0 4px 4px 0;
}
.bib-toggle-btn:hover {
    background: #f38361;
    color: #fff;
}
.bib-toggle-input:checked + .bib-toggle-btn {
    background: var(--vermilion);
    color: #fff;
}
.bib-toggle-input:checked + .bib-toggle-btn:hover {
    background: var(--vermilion);
    color: #fff;
}
/* The ring has to be drawn on the label, because the input it belongs to is invisible. */
.bib-toggle-input:focus-visible + .bib-toggle-btn {
    outline: 2px solid var(--vermilion);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .bib-toggle-btn { transition: none; }
}
/* Hidden once the script can apply the choice on click; without JavaScript it is the only way
   to apply the choice, so it must exist in the markup. */
.bib-arrange-go {
    padding: 4px 12px;
    border: 1px solid #dfe4e8;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-size: 0.85rem;
    color: var(--charcoal);
    cursor: pointer;
}
.bib-arrange-go:hover { border-color: var(--celestial-blue); }
.bib-arrange.is-auto .bib-arrange-go { display: none; }

/* A group of works within an arrangement. Nested inside the Works cited fold, so it is
   quieter than a top-level section: smaller, and no rule above it. */
.fold--group > summary {
    margin: 0;
    padding: 5px 8px 5px 0;
    font-size: 0.95rem;
}

/* === STICKY SECTION HEADINGS ===
   The heading of the section you are inside stays at the top of the column while you
   scroll it, and is pushed out by the next one. On a 587-entry list run out to a letter
   or a period, the only thing that says which section you are in is the heading you
   scrolled past several screens ago.

   Sticking works here because .wiki-main is the scrolling box and nothing between it
   and the summary clips its overflow. The heading needs an opaque background - the
   entries pass underneath it, not behind the page.

   A sub-period is sticky too, below its period rather than on top of it, so both stay
   readable: "Old Babylonian" over "Old Babylonian Lexical Texts". --head-h is the
   measured height of one heading row. */
.bib-list {
    --head-h: 34px;
}
.bib-list .fold--group > summary {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
.bib-list .fold--sub > summary {
    top: var(--head-h);
    z-index: 1;
}

/* Below the three-column breakpoint the page itself scrolls rather than the column, so
   the headings stick under the site header instead of the top of the window. */
@media (max-width: 1279px) {
    .bib-list .fold--group > summary {
        top: var(--site-header-h, 56px);
    }
    .bib-list .fold--sub > summary {
        top: calc(var(--site-header-h, 56px) + var(--head-h));
    }
}
.fold--group > .fold-body {
    padding-left: 18px;
}
.fold-note {
    font-size: 0.78rem;
    font-weight: 400;
    font-style: italic;
    color: #98a3ad;
}
/* While an arrangement is being fetched. Dimming rather than emptying keeps the column
   at its height, so the page does not jump twice - once when the old list goes and again
   when the new one arrives. The swap itself is usually too fast to see this. */
.bib-list.is-busy {
    opacity: 0.45;
    transition: opacity 120ms ease;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .bib-list.is-busy { transition: none; }
}

/* The siglum, in its column. Grey and small: it is a finding aid beside the entry, not
   part of the citation. Right-aligned so the column has a clean edge against the margin
   whatever the length.

   It began in front of the entry, where it collided with the hanging indent - the
   negative text-indent pulled it into the column's left padding and clipped the wider
   ones, so "CUSAS" read "SAS". */
.bib-abbr {
    font-size: 0.8rem;
    line-height: 1.35;
    color: #98a3ad;
    text-align: right;
    /* An abbreviation is not a word: it may wrap at a space when it is too long for the
       column, but it is never hyphenated apart. */
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* Below the three-column breakpoint the measure is already tight, so the sigla column
   gives up some of its width rather than the entries. */
@media (max-width: 1279px) {
    .works-cited { --sigla-col: 4.6rem; }
}

/* === A PERIOD AND ITS SUB-PERIODS ===
   Literary, lexical and site-specific corpora are forms of their period, so they are
   folded inside it: Ur III holds Ur III literary texts. The count on the period is the
   whole family counted once per work; each sub-period carries its own beside it. */
.fold--sub > summary {
    font-size: 0.9rem;
    font-weight: 500;
}
.fold--period > .fold-body > .fold--sub {
    margin-top: 0.5em;
    border-left: 2px solid #eef1f4;
    padding-left: 10px;
}
/* The period's own works follow its sub-periods, and need to be set apart from them. */
.fold--period > .fold-body > .fold--sub + .works-cited {
    margin-top: 1.2em;
    padding-top: 1em;
    border-top: 1px solid #eef1f4;
}


/* ===== FIGURES (How to use, Microstructure): a snippet of the site's own screen with
   its caption (::: figure in docs/wiki, scripts/wiki/build.mjs). The image keeps its own
   size up to the column. No border, shadow or rounded corners (Luis, 2026-10-12): the
   snippet stands as it is. ===== */
.wiki-figure {
    margin: 1.4rem 0 1.6rem;
    padding: 1rem 0 0.9rem;
    /* Half rules above and below, centred, set the picture off; the full rule across
       the column belongs to the headings (LEVELS below), so a picture never reads as a
       new section (Luis, 2026-10-12). */
    background:
        linear-gradient(#e3e8ec, #e3e8ec) top center / 50% 1px no-repeat,
        linear-gradient(#e3e8ec, #e3e8ec) bottom center / 50% 1px no-repeat;
}

/* ===== FIGURE WIDTH, DRAWINGS AND CROP (scripts/wiki/build.mjs, figures written in the
   LAD Wiki Studio): `::: figure 60% src` puts the width on .fig-frame, so the picture is
   centred in it while the figure and its rules keep the column's width. Drawings are an
   SVG laid over the picture in screen pixels (positions in %, strokes and names of a
   fixed size); names beside or above a picture get room from .fig-canvas's padding. A
   crop shows part of the picture through .fig-clip; the drawings stay outside the clip.
   Same rules as the Studio's preview - keep the two in step. ===== */
.wiki-figure { position: relative; }
.fig-frame { position: relative; margin: 0 auto; max-width: 100%; }
.wiki-figure--sized img { width: 100%; max-width: 100%; }
.fig-canvas { display: block; line-height: 0; }
.fig-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; }
.wiki-figure--sized .fig-stage { width: 100% !important; }
.fig-stage > img { display: block; flex: none; }
.fig-clip { position: absolute; inset: 0; overflow: hidden; line-height: 0; }
.fig-clip > img { display: block; }
.fig-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fig-label {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
    font: 600 12.5px/1.25 "Noto Sans", system-ui, sans-serif;
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.fig-label--light { color: #2c3e50; box-shadow: 0 0 0 1px #c9d3dc, 0 1px 3px rgba(0, 0, 0, .2); }

/* ===== AHw's OWN SIGNS (scripts/wiki/build.mjs ahwMarks, pages with `marks: ahw`): its
   reference arrow and its lying sign as inline SVG, in the box of the AHw column's arrow
   (1em tall, baseline 0.21em above the foot; css/page/dictionaries/ahw.css .custom-icon).
   Heavier stroke than there: the wiki sets Noto Sans at 400, the AHw column Noto Serif
   at 200. ===== */
.wiki-main .ahw-mark {
    height: 1em;
    vertical-align: -.21em;
    fill: none;
    stroke: currentColor;
    stroke-width: 8;
    stroke-linecap: round;
    overflow: visible;
}
.wiki-main .ahw-mark--arrow { width: .60em; }
.wiki-main .ahw-mark--lying { width: .63em; }

/* ===== LEVELS: an h2 or h3 opens its section with a rule across the whole column,
   darker for the h2; none where it follows the heading above it directly. News items
   keep their own headings. ===== */
.wiki-main :is(h2, h3):not(.news-item *) {
    border-top: 1px solid #d5dbe0;
    padding-top: 20px;
    margin-top: 30px;
}
.wiki-main h3:not(.news-item *) {
    border-top-color: #e6eaed;
    padding-top: 14px;
    margin-top: 24px;
}
.wiki-main h1 + h2:not(.news-item *),
.wiki-main h2 + h3:not(.news-item *) {
    border-top: 0;
    padding-top: 0;
}

/* ===== THE SECTION BEING READ (wiki.js followHeadings): a bar at the top of the prose
   column, "LAD Entry › Header › Marks and links". It hangs from a sticky holder of no
   height, so it takes no room in the text. Under the site's sticky header once the page
   itself scrolls (below 1280px). ===== */
.wiki-here {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 5;
}
.wiki-here-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 7px 0 6px;
    background: #fff;
    border-bottom: 1px solid #d5dbe0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #66727e;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}
.wiki-here.is-shown .wiki-here-bar {
    opacity: 1;
    visibility: visible;
}
.wiki-here-bar button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.wiki-here-bar button:hover {
    text-decoration: underline;
}
.wiki-here-bar button:last-child {
    color: #000;
    font-weight: 600;
}
.wiki-here-sep {
    color: #aab4bd;
}
/* a heading reached from the bar or a link stops below the bar, not under it */
.wiki-main :is(h2, h3, h4) {
    scroll-margin-top: 44px;
}
@media (max-width: 1279px) {
    .wiki-here { top: var(--header-height, 56px); }
    .wiki-main :is(h2, h3, h4) { scroll-margin-top: calc(var(--header-height, 56px) + 44px); }
}
/* The same section in the side panel's list of the page's sections: weight and a
   neutral mark, never a colour (site-tree.css, WHERE YOU ARE). */
.tree-sections a.is-reading {
    color: #212529;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #9aa5ae;
}

.wiki-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;                     /* centred in the column */
}

.wiki-figure figcaption {
    margin: 0.6rem auto 0;
    max-width: 46rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #5b6670;
}

.wiki-figure figcaption p {
    margin: 0;
}

/* a small element (an icon row, the version line) stands at its natural size */
.wiki-figure--small img {
    max-width: 24rem;
}

/* ===== FOOTNOTES PANEL: no title when there is nothing under it. Every wiki page
   carries the panel (the layout's third column); its head only says something when
   a note is there. :has() - the list keeps whitespace text, so :empty would not do. ===== */
.wiki-notes:not(:has(.notes-list li)) .wiki-panel-head {
    display: none;
}

/* ===== AHw ABBREVIATIONS AND SIGLA (about/ahw-abbreviations.html, the Sigla of
   about/ahw-bibliography.html; generated by scripts/ahw/ahw-abbreviations-page.py): few
   columns, one of them prose, so the table fits the text column and that column wraps,
   instead of taking the widened width of the many-column tables. Sigla never break. ===== */
.wiki-main:has(> h1#ahw-abbreviations) .wiki-table,
.wiki-main:has(> h1#ahw-bibliography) .wiki-table {
    min-width: 0;
}
.wiki-main:has(> h1#ahw-abbreviations) .wiki-table td:first-child,
.wiki-main:has(> h1#ahw-bibliography) .wiki-table td:first-child,
.wiki-main:has(> h1#ahw-bibliography) .wiki-table td:nth-child(3),
.wiki-main:has(> h1#ahw-bibliography) .wiki-table td:nth-child(4) {
    white-space: nowrap;
}

/* ===== WHAT'S NEW (about/project/whats-new, ::: news in docs/wiki): one post per
   article, the date above the headline as a quiet link to the post itself, a hairline
   between posts. ===== */
.news-item {
    padding: 1.1rem 0 1.2rem;
    border-top: 1px solid #eef1f3;
}
.news-item:first-of-type {
    border-top: 0;
}
.news-item .news-date {
    margin: 0 0 0.15rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: #8a96a0;
}
.news-item .news-date a {
    color: inherit;
    text-decoration: none;
}
.news-item .news-date a:hover {
    color: var(--vermilion, #d94f2b);
}
.news-item h2 {
    margin: 0 0 0.45rem;
    font-size: 1.25rem;
}
.news-item p:last-child {
    margin-bottom: 0;
}
/* a post opened by its address stands out for a moment */
.news-item:target {
    animation: news-target 2.4s ease-out;
}
@keyframes news-target {
    from { background: #fff6e0; }
    to   { background: transparent; }
}