/* LETRA: "Scriptorium". A philologist's manuscript: warm vellum with faint ruled lines, ink-brown text,
   rubric red for rules and the initial, lapis blue for results, gold for hairlines and numbers.
   Same family as the other tools (glass panels, pill controls, one texture layer, footer toggle). */

@font-face { font-family: 'Gentium'; src: url('fonts/Gentium-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gentium'; src: url('fonts/Gentium-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gentium'; src: url('fonts/Gentium-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --ink: #2b2118;
    --dim: #6b5a45;
    --rubric: #9d2a22;
    --rubric-soft: rgba(157, 42, 34, 0.1);
    --lapis: #2c4f8a;
    --lapis-soft: rgba(44, 79, 138, 0.1);
    --gold: #b8862b;
    --gold-text: #7f5d17;          /* gold where it is read as text (the # boundary, arrows), not just a line */
    --gold-soft: rgba(184, 134, 43, 0.35);
    --vellum-1: #f7f0de;
    --vellum-2: #f1e6c8;
    --vellum-3: #ead9b2;
    --glass: rgba(255, 252, 243, 0.8);
    --line: rgba(110, 70, 30, 0.22);
    --ruling: rgba(120, 90, 50, 0.09);
    --shadow: 0 6px 22px rgba(90, 60, 20, 0.1);
    --serif: 'Gentium', 'Gentium Plus', 'Charis SIL', Palatino, 'Palatino Linotype', Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --focus: 0 0 0 3px rgba(44, 79, 138, 0.35);
    --danger: #a32424;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { background: var(--vellum-2); }

body {
    min-height: 100vh;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink);
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--ruling) 31px, var(--ruling) 32px),
        linear-gradient(170deg, var(--vellum-1) 0%, var(--vellum-2) 55%, var(--vellum-3) 100%);
    background-attachment: fixed;
}

/* the double vertical rule of a ruled manuscript page, in the left margin of wide screens */
body::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 30px;
    width: 8px;
    border-left: 1px solid rgba(157, 42, 34, 0.28);
    border-right: 1px solid rgba(157, 42, 34, 0.28);
    pointer-events: none;
}

@media (max-width: 1180px) { body::before { display: none; } }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font-family: var(--sans); font-size: 0.72em; opacity: 0.85; padding: 1px 6px; border: 1px solid currentColor; border-radius: 5px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--rubric); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- hero ---------- */
.hero { padding: 34px 20px 22px; text-align: center; }
.hero-inner { max-width: 880px; margin: 0 auto; }

.logo { display: inline-flex; align-items: baseline; justify-content: center; line-height: 0.9; }
.initial {
    font-weight: 700;
    font-size: 4.6rem;          /* the five letters are the same size (.logo-rest too) */
    color: var(--rubric);
    -webkit-text-stroke: 0.7px var(--gold);
    text-shadow: 3px 3px 0 var(--gold-soft);
}
.logo-rest { font-size: 4.6rem; letter-spacing: 0.08em; margin-left: 4px; font-variant: small-caps; font-weight: 700; color: var(--rubric); -webkit-text-stroke: 0.7px var(--gold); text-shadow: 3px 3px 0 var(--gold-soft); }          /* exactly the initial's lettering, at the same size */
.acronym { margin-top: 6px; font-size: 1.25rem; letter-spacing: 0.06em; font-variant: small-caps; }
.acronym b { color: var(--rubric); font-weight: 700; }
.tagline { margin-top: 4px; color: var(--dim); font-style: italic; }

.strip { margin: 18px auto 0; max-width: 760px; padding: 12px 18px 14px; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.strip-stage { height: 3.6rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.strip-form { font-size: 2.7rem; letter-spacing: 0.02em; line-height: 1.15; white-space: pre; }      /* the rows of the strip have fixed heights, whatever glyphs the current word uses, so nothing below moves */
.strip-form .mid { display: inline-grid; }
.strip-form .mid > span { grid-area: 1 / 1; text-align: center; }
.strip-form .out { color: var(--rubric); animation: out 0.8s ease forwards; }
.strip-form .in { color: var(--lapis); animation: in 0.8s ease 0.15s both; }
.strip-rule { height: 1.7rem; line-height: 1.7rem; overflow: hidden; font-variant: small-caps; letter-spacing: 0.1em; color: var(--rubric); }
.strip-rule.pop { animation: pop 0.7s ease both; }
.strip-trail { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; height: 1.8rem; line-height: 1.6rem; overflow: hidden; font-size: 1.02rem; color: var(--dim); }
.strip-trail .sep { color: var(--gold-text); }
.strip-trail .done { color: var(--lapis); }
.strip-trail .cur { color: var(--ink); font-weight: 700; }

@keyframes out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-0.4em); } }
@keyframes in { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- shelf and tabs ---------- */
.shelf { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }      /* the title, then the row of set buttons */
.shelf-label { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sect-head { margin: 6px 2px 12px; }
.shelf-sets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }      /* the buttons share the full width in one row */
.shelf-sets .book { text-align: left; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.searchbar .shelf-label { margin-bottom: 8px; }
/* the Lucide "info" icon next to a section title: its tooltip says what the section is for */
.info { display: inline-flex; flex: none; padding: 0; line-height: 0; text-transform: none; letter-spacing: 0; color: var(--gold-text); background: none; border: 0; border-radius: 50%; cursor: help; }
.info .icon { width: 17px; height: 17px; }
.info:hover, .info:focus-visible { color: var(--ink); }

.book {
    padding: 8px 18px;
    font-size: 1.02rem;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.book:hover { border-color: var(--rubric); transform: translateY(-1px); }
.book[aria-checked="true"] { background: var(--rubric); color: #fff; border-color: var(--rubric); }
.book.empty { border-style: dashed; color: var(--dim); }

/* the workbench: one card holding the folder tabs and the active tab's content (the rule set is a card of its own above it) */
.workbench { --wb-bg: #fcf7e9; }
.workbench .wb-card { padding: 0; background: var(--wb-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tabs { display: flex; gap: 6px; padding: 0 0 0 22px; }          /* starts right of the card's rounded corner */          /* straight on the page background; the card starts right below */
.tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
    margin-bottom: -1px;                       /* overlaps the card's top line so the active tab can cover it */
    padding: 9px 20px 10px;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--dim);
    background: #e8dcbe;                       /* opaque: the tint the old see-through brown gave over the page */
    border: 1px solid var(--line);
    border-bottom-color: var(--line);
    border-radius: 11px 11px 0 0;
    transition: background 0.15s, color 0.15s;
}
.tab .icon { width: 17px; height: 17px; flex: none; }
.tab:hover { color: var(--ink); background: #e0d2b4; }
.tab[aria-selected="true"] { z-index: 1; color: var(--rubric); background: var(--wb-bg); border-bottom-color: var(--wb-bg); box-shadow: inset 0 3px 0 var(--rubric); }
/* inside the card the sections are flat: dashed dividers instead of cards within a card */
.wb-card .panel { margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wb-card .panel + .panel { border-top: 1px dashed var(--line); }
/* the About link in the hero's corner (absolute, so the logo stays centred) and its page */
.hero { position: relative; }
.about-link { position: absolute; top: 14px; right: max(20px, calc((100% - 1180px) / 2 + 20px)); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--dim); text-decoration: none; border: 1px solid transparent; border-radius: 999px; }
.about-link .icon { width: 17px; height: 17px; flex: none; }
.about-link:hover, .about-link:focus-visible { color: var(--rubric); border-color: var(--line); background: var(--glass); }

main { max-width: 1180px; margin: 0 auto; padding: 0 20px 10px; }

/* ---------- panels ---------- */
.panel {
    background: var(--glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.panel-title { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); margin-bottom: 12px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.panel-head .panel-title { margin: 0; }
.hint { font-family: var(--sans); font-size: 0.82rem; color: var(--dim); margin: 6px 0; }
.hint.warn, .status.warn { color: var(--rubric); }
.howto { margin: 6px 0 10px; }
.howto summary { cursor: pointer; width: fit-content; font-family: var(--sans); font-size: 0.86rem; font-weight: 700; color: var(--rubric); }
.howto .markdown { margin-top: 6px; padding: 4px 16px 8px; border-left: 2px solid var(--line); font-size: 0.95rem; }
.dim { color: var(--dim); }
.error, .status.error { color: var(--danger); font-weight: 600; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px;
    font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    list-style: none;
}
.btn:hover { border-color: var(--rubric); }
.btn.small { padding: 6px 13px; font-size: 0.82rem; }
.btn.has-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn .icon { width: 15px; height: 15px; flex: none; }
.btn.primary { background: var(--rubric); border-color: var(--rubric); color: #fff; }
.btn.primary:hover { background: #85221c; }
.btn.wide { width: 100%; margin-top: 12px; }
summary.btn::-webkit-details-marker { display: none; }

.field, .words {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus, .words:focus { outline: none; border-color: var(--lapis); box-shadow: var(--focus); }
.field-label { display: block; margin: 10px 0 4px; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.words { font-size: 1.2rem; }
.check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--sans); font-size: 0.88rem; cursor: pointer; }
.check input { accent-color: var(--rubric); width: 16px; height: 16px; }

/* ---------- evolve ---------- */
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.examples-label { font-family: var(--sans); font-size: 0.78rem; color: var(--dim); }
.example { padding: 2px 11px; font-style: italic; background: transparent; border: 1px dashed var(--gold); border-radius: 999px; }
.example:hover { background: var(--rubric-soft); border-style: solid; }
.explain { font-size: 0.95rem; color: var(--dim); margin-top: 10px; }
.explain p { margin: 6px 0; }
.explain ul, .explain ol { margin: 6px 0 6px 20px; }          /* the bullets sit inside the box, the text lines up under the set name */
.explain li { margin: 3px 0; }
.explain a { color: var(--rubric); }
.explain code { font-family: var(--mono); font-size: 0.88em; color: var(--ink); }
/* the search bar: one wide field for the word or words, like a search box */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.searchbar { padding: 18px 20px 14px; }
.search-row { display: flex; gap: 10px; }
.search-row .words { flex: 1; min-width: 0; height: 58px; padding: 0 20px; font-size: 1.6rem; line-height: 1; border-radius: 14px; border-color: var(--gold-soft); }
.search-row .btn { height: 58px; padding: 0 30px; font-size: 1rem; border-radius: 14px; }
.search-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-top: 10px; }
.search-meta .examples, .search-meta .check { margin: 0; }
.searchbar .hint { margin: 6px 2px 0; }

/* what the current rule set is: one slim line, opens for the explanation */
.setinfo { padding: 12px 20px; }
.setinfo summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; cursor: pointer; list-style: none; }
.setinfo summary::-webkit-details-marker { display: none; }
.setinfo summary::before { content: '▸'; color: var(--rubric); font-family: var(--sans); font-size: 0.8rem; }
.setinfo[open] summary::before { content: '▾'; }
.set-name { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); }
.set-stats { font-family: var(--sans); font-size: 0.82rem; color: var(--dim); }
.set-stats.error { color: var(--danger); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; position: relative; }
.grow { flex: 1; }
.menu { position: relative; }
.menu-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 250px; padding: 14px; background: #fffdf6; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.menu-actions { display: flex; gap: 8px; margin-top: 12px; }
.status { min-height: 1.4em; margin: 2px 2px 10px; font-family: var(--sans); font-size: 0.85rem; color: var(--dim); }
#results.loading { opacity: 0.55; transition: opacity 0.2s; }
.empty-state { padding: 44px 20px; text-align: center; color: var(--dim); border: 1px dashed var(--gold-soft); border-radius: 16px; }
.empty-state h3 { font-size: 1.45rem; color: var(--ink); margin-bottom: 6px; }
.empty-note { color: var(--dim); font-style: italic; }

/* entries */
.entry { background: var(--glass); border: 1px solid var(--line); border-left: 4px solid var(--rubric); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 20px 18px; margin-bottom: 14px; }
.entry.flash, .rb-rule.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--gold-soft), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.headword { font-size: 1.9rem; font-weight: 400; line-height: 1.2; }
.entry-head { cursor: pointer; }
.fold { display: inline-flex; align-items: baseline; gap: 10px; padding: 0; font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.fold::before { content: ''; flex: none; align-self: center; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold-text); transition: transform 0.15s; }      /* a small triangle: down when open, right when folded */
.entry.collapsed .fold::before { transform: rotate(-90deg); }
.fold:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.entry.collapsed .forms, .entry.collapsed .derivation { display: none; }
.entry.collapsed { padding-bottom: 12px; }
.count { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lapis); }
.forms { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.form { padding: 3px 15px 4px; font-size: 1.3rem; color: var(--lapis); background: var(--lapis-soft); border: 1px solid rgba(44, 79, 138, 0.4); border-radius: 999px; transition: background 0.15s, color 0.15s; }
.form:hover:not(.static) { background: rgba(44, 79, 138, 0.2); }
.form[aria-pressed="true"] { background: var(--lapis); color: #fff; border-color: var(--lapis); }
.form.static { cursor: default; }
.derivation { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--gold-soft); }
.deriv-title { margin: 0 0 6px; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.chain-form { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }      /* the chosen word: normal font, not the heading's capitals */
.fold.small { gap: 8px; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); align-items: center; }
.fold.small::before { border-left-width: 5px; border-right-width: 5px; border-top-width: 7px; }
.chain-box.folded .fold.small::before { transform: rotate(-90deg); }
.chain-box.folded .chain { display: none; }
.chain-box.folded .deriv-title { margin-bottom: 0; }
.chain-box { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--gold-soft); }

/* chain */
.chain { list-style: none; position: relative; padding-left: 0; }
.chain::before { content: ''; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 1px; background: var(--gold-soft); }
.step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.num { z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; background: #fffdf6; border: 1.5px solid var(--gold); border-radius: 50%; }
.step.start .num { background: var(--ink); color: #fbf5e4; border-color: var(--ink); }
.step.note .num { visibility: hidden; }
.stepbody { padding-top: 2px; }
.step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rule-name { font-variant: small-caps; font-weight: 700; letter-spacing: 0.06em; color: var(--rubric); }
.rule-name.link { padding: 0; background: none; border: none; text-decoration: underline dotted; text-underline-offset: 3px; }
.rule-name.link:hover { text-decoration-style: solid; }
.also { font-family: var(--sans); font-size: 0.76rem; color: var(--dim); }
.step-entries { list-style: none; margin: 3px 0 5px; }
.step-entries li { font-size: 0.98rem; color: var(--dim); }
.pair { white-space: normal; }
.pair .arrow, .change .arrow { color: var(--gold-text); }
.lit { font-style: normal; }
.grp { display: inline-block; padding: 0 6px; margin: 0 1px; font-size: 0.88em; color: var(--lapis); background: var(--lapis-soft); border-radius: 5px; cursor: help; }
.wb { color: var(--gold-text); font-weight: 700; cursor: help; }       /* ␣ is in Gentium, so no fallback font is needed */
.empty { color: var(--rubric); cursor: help; }
.change { font-size: 1.22rem; white-space: pre-wrap; }
.change .form-text { white-space: pre-wrap; }
.start-form { font-size: 1.22rem; }
.change .del { color: var(--rubric); background: var(--rubric-soft); border-radius: 3px; text-decoration: line-through; text-decoration-color: rgba(157, 42, 34, 0.45); }
.change .ins { color: var(--lapis); background: var(--lapis-soft); border-radius: 3px; font-weight: 700; }

/* tree */
.tree-scroll { overflow-x: auto; padding: 4px 0 8px; }
.tree-scroll svg { display: block; margin: 0 auto; }      /* centred when it fits, scrolls when it does not */
.tree-arrow { fill: var(--gold); }
.tree-edge path { fill: none; stroke-linejoin: round; stroke: var(--gold); stroke-opacity: 0.6; stroke-width: 1.6; transition: stroke 0.15s, stroke-width 0.15s; }
.tree-measure { position: absolute; left: -9999px; top: 0; visibility: hidden; }
.tree-label { width: max-content; max-width: 300px; padding: 2px 4px; text-align: left; font-size: 0.92rem; line-height: 1.3; cursor: help; text-shadow: 0 0 3px #fbf5e4, 0 0 3px #fbf5e4, 0 0 2px #fbf5e4; }      /* only the name, no box (a box looks like a form); the halo keeps it readable over lines */
.tree-label:focus-visible { outline: none; box-shadow: var(--focus); }
.tree-rule { display: block; text-decoration: underline dotted; text-underline-offset: 3px; font-variant: small-caps; font-weight: 700; letter-spacing: 0.06em; color: var(--rubric); }
/* inside the dark tooltip: the concrete change of an edge */
.tl-tip { font-family: var(--serif); font-size: 1rem; line-height: 1.4; }
.tl-item + .tl-item { margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(251, 245, 228, 0.25); }
.tl-name { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #e9b8a8; }
.tl-entries { list-style: none; }
.tl-entries li { padding: 1px 0; white-space: normal; }
.tip .pair { white-space: normal; }
.tip .pair .arrow { color: #e6c27a; }
.tip .grp { color: #cfe0ff; background: rgba(255, 255, 255, 0.14); cursor: default; }
.tip .wb, .tip .empty { cursor: default; color: #e6c27a; }
.tree-elabel { overflow: visible; }
.has-path .tree-elabel:not(.on) .tree-label { opacity: 0.4; }      /* on the inner box: WebKit does not paint a foreignObject that has its own opacity */
.tree-node rect { fill: #fffdf6; stroke: var(--line); stroke-width: 1.2; }
.tree-node text { font-family: var(--serif); font-size: 17px; fill: var(--ink); }
.tree-node.start rect { fill: var(--ink); stroke: var(--ink); }
.tree-node.start text { fill: #fbf5e4; }
.tree-node.mid text { fill: var(--dim); }
.tree-node.final rect { fill: var(--lapis-soft); stroke: rgba(44, 79, 138, 0.5); }
.tree-node.final text { fill: var(--lapis); font-weight: 700; }
.tree-node.final { cursor: pointer; }
.tree-node.chosen rect { fill: var(--lapis); stroke: var(--lapis); }
.tree-node.chosen text { fill: #fff; }
.tree-node:focus-visible { outline: none; }
.tree-node:focus-visible rect { stroke: var(--lapis); stroke-width: 3; }
.has-path .tree-node:not(.on) { opacity: 0.45; }
.has-path .tree-edge:not(.on) { opacity: 0.35; }
.tree-edge.on path { stroke: var(--rubric); stroke-opacity: 1; stroke-width: 2.4; }
.tree-legend { font-family: var(--sans); font-size: 0.8rem; color: var(--dim); margin-top: 4px; }

/* ---------- rule book ---------- */
.search { max-width: 340px; }
.rb-steps, .rb-columns { column-count: 2; column-gap: 32px; column-rule: 1px solid var(--line); }      /* the thin line between the two columns of rules */
.rb-steps { margin-top: 10px; }
.rb-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--gold-soft); break-inside: avoid; }
.rb-step.col-end { border-bottom-color: transparent; }      /* the last step of a column: no line under it */
.rb-num { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; border: 1.5px solid var(--gold); border-radius: 50%; background: #fffdf6; }
.rb-alts { display: grid; gap: 8px; }
.rb-branch { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.rb-branch-rules { display: grid; gap: 8px; }
.rb-brace svg { display: block; width: 100%; height: 100%; }
.rb-brace path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rb-branch-note { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
.rb-rule { padding: 6px 12px; border-left: 3px solid transparent; border-radius: 8px; break-inside: avoid; }
.rb-rule.unused { opacity: 0.75; margin-bottom: 6px; }
.rb-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rb-rule-head .rule-name { padding: 1px 9px; border: 1px solid var(--rubric); border-radius: 4px; background: var(--rubric-soft); }      /* the rule's name, boxed like a badge */
.used-badge { display: none; padding: 1px 9px; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--rubric); border-radius: 999px; cursor: help; }
.rb-entries { list-style: none; margin: 4px 0 0; }
/* a row (one transformation); the ones being applied get the red callout and the badge */
.rb-entries li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 2px 8px 2px 19px; border-left: 3px solid transparent; border-radius: 6px; }
.rb-entries li.used { border-left-color: var(--rubric); background: var(--rubric-soft); }
.rb-entries li.used .used-badge { display: inline-block; margin-left: auto; }
.rb-entries li::before { content: ''; position: absolute; left: 5px; top: 1em; width: 4px; height: 4px; background: var(--rubric); border-radius: 50%; }      /* one small bullet per transformation */
.rb-unused { margin-top: 18px; }
.rb-groups { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }      /* separates the rules from the groups */
.rb-unused summary, .rb-groups summary { cursor: pointer; font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--dim); }
.rb-columns { margin-top: 10px; }
.rb-group-list { column-count: 3; column-gap: 28px; column-rule: none; }      /* groups: three columns, no vertical line */
.rb-group { display: flex; align-items: baseline; gap: 4px 10px; break-inside: avoid; margin-bottom: 8px; }      /* name on the left, its members to the right */
.rb-group-names { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.rb-group .members { display: block; flex: 1 1 0; min-width: 0; font-size: 0.95rem; color: var(--dim); overflow-wrap: anywhere; }

/* ---------- editor ---------- */
.ed-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 10px; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.ed-name .icon-btn { margin-left: auto; }          /* the full-page button at the right end of the row, right above the editor */
.ed-name .field { width: 280px; max-width: 100%; padding: 6px 10px; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* the editor panel in full page: everything in it stays, the editor takes the room that is left */
.wb-card .panel.editor-full { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; padding: 14px 18px; background: var(--wb-bg); overflow: auto; overscroll-behavior: contain; }
.editor-full .editor { flex: 1; height: auto; min-height: 0; max-height: none; }
.editor-full .issues { max-height: 22vh; }          /* an open list leaves the editor most of the room */
.editor { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); height: 62vh; min-height: 360px; max-height: 720px; background: #fffdf6; border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; overflow: hidden; transition: border-left-color 0.2s; }      /* the thick left line shows the validation state */
.editor[data-state="error"] { border-left-color: var(--danger); }
.editor[data-state="warning"] { border-left-color: var(--gold); }
.editor[data-state="ok"] { border-left-color: #2f6b3a; }
.editor-gutter, .editor-hl, .editor-text, .editor-marks { font-family: var(--mono); font-size: 14px; line-height: 22px; tab-size: 2; }
.editor-gutter { color: var(--dim); background: rgba(110, 70, 30, 0.07); border-right: 1px solid var(--line); overflow: hidden; user-select: none; }
.editor-nums { padding: 12px 0; white-space: pre; will-change: transform; }
.editor-gutter .ln { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 22px; padding: 0 6px 0 4px; }          /* the symbol sits right next to its number; the numbers stay in one column */
.editor-gutter .flag { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0; line-height: 0; background: none; border: 0; cursor: help; color: inherit; }
.editor-gutter .flag .icon { width: 15px; height: 15px; }
.editor-gutter .flag:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.tip > div + div { margin-top: 4px; }
.editor-gutter .ln.error { color: var(--danger); font-weight: 700; }
.editor-gutter .ln.warning { color: var(--gold-text); font-weight: 700; }
.editor-code { position: relative; overflow: hidden; }
.editor-hl, .editor-text, .editor-marks { position: absolute; top: 0; left: 0; margin: 0; padding: 12px; white-space: pre; }
.editor-hl { pointer-events: none; color: var(--ink); will-change: transform; }
.editor-marks { right: 0; padding: 0; pointer-events: none; will-change: transform; }
.editor-marks .mark { position: absolute; left: 0; right: 0; height: 22px; }
.mark.error { background: rgba(163, 36, 36, 0.13); border-left: 3px solid var(--danger); }
.mark.warning { background: rgba(184, 134, 43, 0.16); border-left: 3px solid var(--gold); }
.editor-text { inset: 0; width: 100%; height: 100%; resize: none; overflow: auto; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink); background: transparent; border: none; outline: none; }
.editor-text::selection { background: rgba(44, 79, 138, 0.28); -webkit-text-fill-color: transparent; }
.editor-hl .k { color: var(--rubric); }
.editor-hl .s { color: var(--ink); }
.editor-hl .n { color: var(--lapis); }
.editor-hl .p { color: var(--dim); }
.editor-hl .c { color: #9a8458; font-style: italic; }
.editor-hl .g { color: var(--lapis); font-weight: 700; }
.editor-problems { margin: 10px 2px 4px; }
.editor-summary { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: var(--dim); list-style: none; }
.editor-summary::-webkit-details-marker { display: none; }
.editor-problems.has-issues > summary { cursor: pointer; }
.editor-problems.has-issues > summary::before { content: '▸'; display: inline-block; width: 1.1em; }
.editor-problems[open] > summary::before { content: '▾'; }
.editor-summary.bad { color: var(--danger); }
.editor-summary.warn { color: var(--gold-text); }
.editor-summary.good { color: #2f6b3a; }
.issues { list-style: none; display: grid; gap: 4px; margin-top: 8px; max-height: 32vh; overflow: auto; }
.issue { display: grid; grid-template-columns: 16px 62px minmax(0, 1fr); gap: 10px; width: 100%; padding: 6px 10px; text-align: left; font-family: var(--sans); font-size: 0.86rem; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; }
.issues .error .issue { border-left-color: var(--danger); }
.issues .warning .issue { border-left-color: var(--gold); }
.issue:hover { background: #fffdf6; }
.issue .pos { font-family: var(--mono); color: var(--dim); }
.issue .sev { display: inline-flex; align-items: center; }
.issue .sev .icon { width: 15px; height: 15px; }
.issues .error .sev { color: var(--danger); }
.issues .warning .sev { color: var(--gold-text); }
.issue .path { grid-column: 3; font-family: var(--mono); font-size: 0.76rem; color: var(--dim); overflow-wrap: anywhere; }
#edNote button { margin-left: 4px; }

/* ---------- about ---------- */
.markdown h1, .markdown h2 { font-size: 1.5rem; margin: 6px 0 10px; font-weight: 700; color: var(--rubric); }
.markdown h3 { font-size: 1.2rem; margin: 16px 0 6px; }
.markdown p { margin: 8px 0; }
.markdown ul, .markdown ol { margin: 8px 0 8px 26px; }
.markdown li { margin: 4px 0; }
.markdown a { color: var(--lapis); }
.markdown code { padding: 0 5px; font-family: var(--mono); font-size: 0.88em; background: var(--lapis-soft); border-radius: 4px; }
.markdown pre { overflow-x: auto; padding: 12px; background: rgba(110, 70, 30, 0.08); border-radius: 8px; }
.markdown pre code { background: none; font-style: normal; font-family: var(--mono); font-size: 0.85em; }
.markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 12px 0; font-size: 0.95rem; }
.markdown th, .markdown td { padding: 7px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.markdown th { background: rgba(110, 70, 30, 0.07); }

/* ---------- footer, toast ---------- */
footer { max-width: 1180px; margin: 22px auto 0; padding: 26px 20px 34px; text-align: center; font-family: var(--sans); font-size: 0.82rem; color: var(--dim); border-top: 1px solid var(--gold-soft); }
footer a { color: var(--rubric); font-weight: 600; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.lang-toggle { display: inline-flex; margin-bottom: 14px; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(110, 70, 30, 0.1); }
.lang-toggle button { padding: 6px 18px; border: none; border-radius: 999px; background: transparent; font-weight: 700; font-size: 0.9rem; color: var(--dim); }
.lang-toggle button[aria-pressed="true"] { background: var(--rubric); color: #fff; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; padding: 9px 20px; font-family: var(--sans); font-size: 0.88rem; color: #fbf5e4; background: var(--ink); border-radius: 999px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.tip { position: fixed; z-index: 70; max-width: min(420px, calc(100vw - 16px)); padding: 6px 11px; font-family: var(--sans); font-size: 0.8rem; line-height: 1.4; color: #fbf5e4; background: var(--ink); border-radius: 8px; box-shadow: 0 6px 18px rgba(43, 33, 24, 0.28); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 0.14s, transform 0.14s; overflow-wrap: anywhere; }
.tip.show { opacity: 1; transform: none; }
.tip::after { content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -4px; width: 8px; height: 8px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.tip.below::after { bottom: auto; top: -4px; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
    .rb-group-list { column-count: 2; }
}

@media (max-width: 1000px) {
    .shelf-sets .book { white-space: normal; }          /* narrow: a long set name may wrap */
}

@media (max-width: 860px) {
    .shelf-sets { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }          /* narrow: two per row */
    body { font-size: 17px; }
    .search-row .words { height: 52px; padding: 0 14px; font-size: 1.3rem; }
    .search-row .btn { height: 52px; padding: 0 18px; }
    .initial, .logo-rest { font-size: 3.4rem; }
    .strip-form { font-size: 2.1rem; }
    .panel { padding: 16px; }
    .entry { padding: 14px 14px 16px; }
    .rb-step { grid-template-columns: 34px minmax(0, 1fr); }
    .rb-steps, .rb-columns, .rb-group-list { column-count: 1; column-rule: none; }
    .menu-body { right: auto; left: 0; }

    /* less chrome above the tool on a phone */
    .hero { padding: 16px 16px 8px; }
    .acronym { font-size: 1.1rem; }
    .strip { margin-top: 8px; padding: 6px 10px 8px; }
    .strip-stage { height: 2.8rem; }
    .strip-trail { display: none; }
    .tabs { gap: 4px; padding-left: 18px; }
    .tab { gap: 6px; padding: 8px 10px 9px; }
    .hero { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* section 3: the words evolution, in its own container */
.evolution #results > .entry:last-child { margin-bottom: 0; }
.evolution .toolbar { margin-top: 0; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(110, 70, 30, 0.1); }
.seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: none; border-radius: 999px; background: transparent; font-family: var(--sans); font-weight: 700; font-size: 0.82rem; color: var(--dim); cursor: pointer; }
.seg .icon { width: 15px; height: 15px; flex: none; }
.seg button[data-view="h"] .icon { transform: rotate(-90deg); }          /* the same tree turned to grow to the right */
.seg button[aria-pressed="true"] { background: var(--rubric); color: #fff; }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }

/* the full-screen tree viewer */
html.viewer-open, html.viewer-open body, html.modal-open, html.modal-open body { overflow: hidden; }
.deriv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.deriv-head .deriv-title { margin: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--dim); background: var(--glass); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.icon-btn:hover { color: var(--rubric); border-color: var(--rubric); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viewer { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: var(--vellum-2); overscroll-behavior: contain; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; background: var(--glass); border-bottom: 1px solid var(--line); }
.viewer-title { font-size: 1.35rem; margin-right: 6px; }
.viewer-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; background: var(--vellum-1); user-select: none; -webkit-user-select: none; }
.viewer-stage.dragging { cursor: grabbing; }
.viewer-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.viewer-canvas svg { display: block; }
.viewer-hint { margin: 0; padding: 8px 14px; font-family: var(--sans); font-size: 0.8rem; color: var(--dim); background: var(--glass); border-top: 1px solid var(--line); }
.viewer .seg button { white-space: nowrap; }
@media (max-width: 860px) { .viewer-hint { display: none; } .viewer-bar .grow { display: none; } .viewer-bar { justify-content: space-between; } }

/* a modal: a dialog over a semi-transparent backdrop */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(43, 33, 24, 0.5); }
.modal { width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px; background: #fffdf6; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(43, 33, 24, 0.35); }
.modal-title { margin-bottom: 8px; font-size: 1.3rem; color: var(--rubric); }
.modal p { margin: 6px 0; }
.modal-warn { padding: 8px 12px; font-family: var(--sans); font-size: 0.88rem; color: var(--ink); background: rgba(184, 134, 43, 0.16); border-left: 3px solid var(--gold); border-radius: 6px; }
.modal-actions .modal-save { margin-right: auto; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 520px) { .modal-actions .modal-save { flex: 1 0 100%; justify-content: center; margin-right: 0; } }          /* narrow: Download on a row of its own */