/* ============================================================
   KOReader Highlights — theming
   Self-hosted variable fonts (no external requests).
   ============================================================ */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/fraunces.woff2") format("woff2");
}
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/static/fonts/newsreader.woff2") format("woff2");
}
@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("/static/fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/public-sans.woff2") format("woff2");
}
/* Typewriter set for the Archiv themes: Cutive (display -- a sharp, clean
   typewriter slab; Special Elite proved too inky/blurry for headings and
   stats figures), Special Elite (kept only for the small brand drawer label,
   where the patina works) + Courier Prime (UI). All single weights, so archiv
   headings run at 400. */
@font-face {
    font-family: "Cutive";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/cutive.woff2") format("woff2");
}
@font-face {
    font-family: "Special Elite";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/special-elite.woff2") format("woff2");
}
@font-face {
    font-family: "Courier Prime";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/courier-prime.woff2") format("woff2");
}
@font-face {
    font-family: "Courier Prime";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/courier-prime-bold.woff2") format("woff2");
}

:root {
    --maxw: 49rem;
    --radius: 10px;
    --border-w: 1px;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px -30px rgba(0,0,0,.5);
}

/* Bibliothek — warm paper, literary serif (default) */
[data-theme="biblio"] {
    --bg: #f4efe5;
    --surface: #fcf9f2;
    --surface-2: #efe7d8;
    --ink: #2b2620;
    --ink-soft: #8a7f6c;
    --accent: #b1502a;
    --accent-soft: #e3c3a6;
    --line: #e5ddcd;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Newsreader", Georgia, serif;
    --font-ui: "Public Sans", system-ui, sans-serif;
}

/* Nacht — dark, cosy night reading */
[data-theme="nacht"] {
    --bg: #15120d;
    --surface: #1f1b15;
    --surface-2: #28221a;
    --ink: #ece3d4;
    --ink-soft: #9d927e;
    --accent: #e0a25a;
    --accent-soft: #5e4b30;
    --line: #342d23;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Newsreader", Georgia, serif;
    --font-ui: "Public Sans", system-ui, sans-serif;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px -30px rgba(0,0,0,.85);
}

/* Klar — modern, crisp, sans-serif */
[data-theme="klar"] {
    --bg: #eceff3;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --ink: #111722;
    --ink-soft: #687180;
    --accent: #0f766e;
    --accent-soft: #a7d7d1;
    --line: #e0e5ec;
    --font-display: "Public Sans", system-ui, sans-serif;
    --font-body: "Public Sans", system-ui, sans-serif;
    --font-ui: "Public Sans", system-ui, sans-serif;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(20,30,45,.05), 0 14px 36px -24px rgba(20,30,45,.4);
}

/* Zettelkasten — dark slip-box: index-card stock, typewriter accents, ribbon
   red. Headings/labels/signatures are monospace; the body stays a readable
   serif. Structural index-card touches live in the [data-theme="kasten"]
   section near the foot of this file. */
[data-theme="kasten"] {
    --bg: #131418;
    --surface: #1c1e24;
    --surface-2: #242730;
    --ink: #e7e3d8;
    --ink-soft: #908b80;
    --accent: #cf6a4f;
    --accent-soft: #4f352c;
    --line: #2f323b;
    --font-display: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --font-body: "Newsreader", Georgia, serif;
    --font-ui: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --radius: 3px;
    --shadow: 0 1px 0 rgba(0,0,0,.45), 0 12px 30px -24px rgba(0,0,0,.9);
}

/* Archiv — typed index cards in a card catalogue. Manila paper, stamp red,
   typewriter mono display/UI over a serif reading body. The --fiber/--spot/
   --hole-rim vars feed the paper textures in the [data-theme^="archiv"]
   structural section at the foot of this file. */
[data-theme="archiv"] {
    --bg: #d0c3a5;
    --surface: #faf6ec;
    --surface-2: #e4d7b0;
    --ink: #2f2718;
    --ink-mid: #493b22;
    --ink-soft: #6e5e3d;
    --lift: rgba(255,255,255,.45);
    --accent: #a14a30;
    --accent-soft: #cfa583;
    --line: #b4a276;
    --font-display: "Cutive", "Courier Prime", ui-monospace, monospace;
    --font-body: "Newsreader", Georgia, serif;
    --font-ui: "Courier Prime", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    --radius: 2px;
    --shadow: 0 1px 2px rgba(62,48,24,.16), 0 12px 26px -18px rgba(62,48,24,.5),
              inset 0 1px 0 rgba(255,255,255,.55);
    --fiber-x: rgba(101,79,46,.075);
    --fiber-y: rgba(101,79,46,.05);
    --spot: rgba(101,79,46,.11);
    --ruling: rgba(96,124,160,.3);
    --hole-rim: rgba(255,255,255,.4);
    --folder: #dcceac;
}

/* Archiv bei Lampenlicht — the same card catalogue after dark (default). */
[data-theme="archiv-nacht"] {
    --bg: #171209;
    --surface: #251d10;
    --surface-2: #2e2514;
    --ink: #e7dec6;
    --ink-mid: #c4b48e;
    --ink-soft: #9b8c69;
    --lift: rgba(0,0,0,.55);
    --accent: #d57a4d;
    --accent-soft: #5e4026;
    --line: #3c321c;
    --font-display: "Cutive", "Courier Prime", ui-monospace, monospace;
    --font-body: "Newsreader", Georgia, serif;
    --font-ui: "Courier Prime", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    --radius: 2px;
    --shadow: 0 1px 0 rgba(0,0,0,.5), 0 14px 30px -22px rgba(0,0,0,.95),
              inset 0 1px 0 rgba(255,255,255,.04);
    --fiber-x: rgba(0,0,0,.2);
    --fiber-y: rgba(0,0,0,.13);
    --spot: rgba(0,0,0,.24);
    --ruling: rgba(168,188,220,.13);
    --hole-rim: rgba(255,255,255,.05);
    --folder: #1e1810;
}

* { box-sizing: border-box; }

/* Root size scales the whole rem-based UI at once (text, spacing, column). */
html {
    color-scheme: light dark;
    font-size: 120%;
    /* Small breathing room above anchored jumps (#h…, #c…). The header isn't
       sticky, so it scrolls away and needs no offset here. */
    scroll-padding-top: .8rem;
}

/* Three fixed text sizes (header picker, saved per-browser). Everything is
   rem-based, so bumping the root scales the whole UI -- like Ctrl++, but
   remembered. "m" is the default (120% above) and needs no override. */
html[data-size="l"]  { font-size: 140%; }
html[data-size="xl"] { font-size: 165%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    transition: background .25s ease, color .25s ease;
}

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

/* ---------- header ---------- */
.site-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: var(--border-w) solid var(--line);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    /* Not sticky: at larger text sizes a sticky header grew tall and covered
       content (and the reader's own toolbar). It scrolls away with the page. */
    flex-wrap: wrap;
}
.brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--ink);
    white-space: nowrap;
}
.brand span { color: var(--accent); }

.search { display: flex; flex: 1 1 14rem; max-width: 26rem; }
.search input {
    flex: 1;
    padding: .5rem .85rem;
    border: var(--border-w) solid var(--line);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .92rem;
}
.search input:focus { outline: none; border-color: var(--accent); }
.search button {
    border: var(--border-w) solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0 .9rem;
    cursor: pointer;
    font-size: 1.1rem;
}

.header-right { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-left: auto; }
.theme-select {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .35rem 1.6rem .35rem .6rem;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* One button that cycles the text size; the "A" grows with the level as a cue. */
.size-cycle {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .35rem .7rem;
    cursor: pointer;
    line-height: 1;
}
.size-cycle:hover { border-color: var(--accent); }
.size-cycle-a { font-weight: 700; line-height: 1; }
.size-cycle[data-size="m"]  .size-cycle-a { font-size: .85rem; }
.size-cycle[data-size="l"]  .size-cycle-a { font-size: 1.05rem; }
.size-cycle[data-size="xl"] .size-cycle-a { font-size: 1.25rem; }
.usernav { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-family: var(--font-ui); font-size: .85rem; }
.usernav a { color: var(--ink-soft); text-decoration: none; }
.usernav a:hover { color: var(--accent); }
/* The personal cluster sits to the right of the display controls; a quiet
   rule keeps Admin and the account name from running together. */
.usernav-account { gap: .5rem .7rem; }
.nav-sep { color: var(--line); user-select: none; }
/* ---------- header nav menus (native <details> dropdowns) ---------- */
.navmenu { position: relative; }
.navmenu > summary {
    list-style: none;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.navmenu > summary::-webkit-details-marker { display: none; }
/* CSS-only chevron that flips when the menu is open. */
.navmenu > summary::after {
    content: "";
    width: .38em;
    height: .38em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    margin-top: -.18em;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.navmenu > summary:hover,
.navmenu[open] > summary { color: var(--accent); }
.navmenu[open] > summary::after { margin-top: .12em; transform: rotate(-135deg); }
.navmenu-panel {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 11rem;
    padding: .4rem;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5);
}
.navmenu-panel a {
    display: block;
    padding: .42rem .6rem;
    border-radius: calc(var(--radius) - 2px);
    color: var(--ink-soft);
    white-space: nowrap;
}
.navmenu-panel a:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

/* Hauptkasten is its own room, not a facet of this box: its way in is a
   distinct pill up by the wordmark (left of the search), so it reads as a
   separate place rather than another source-box link. */
.brand-hk {
    padding: .3rem .7rem;
    border: var(--border-w) solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.brand-hk:hover { background: var(--accent); color: #fff; }

/* "Aa Darstellung" -- Theme + Schriftgröße als Popover statt zweier
   permanenter Regler in der Kopfzeile; das Wort macht sichtbar, dass hier
   auch die Themes wohnen. */
.display-menu > summary {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .35rem .6rem;
    line-height: 1;
}
.display-menu > summary::after { content: none; }
.display-menu .display-word { font-weight: 400; color: var(--ink-soft); margin-left: .25rem; }
.display-menu > summary:hover, .display-menu[open] > summary { border-color: var(--accent); color: var(--ink); }
.display-panel {
    left: auto;
    right: 0;
    gap: .5rem;
    padding: .7rem;
    align-items: stretch;
}
.display-panel .theme-picker { display: flex; }
.display-panel .theme-select { flex: 1; }
.display-panel .size-cycle { justify-content: center; }

.nav-notif { position: relative; }
.nav-badge {
    display: inline-block; min-width: 1.1em; padding: 0 .35em; margin-left: .1em;
    background: var(--accent); color: #fff; border-radius: 999px;
    font-size: .68rem; font-weight: 700; line-height: 1.5; text-align: center;
    vertical-align: top;
}

/* ---------- notifications ---------- */
.notif-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.notif { border-bottom: var(--border-w) solid var(--line); display: flex; align-items: stretch; }
.notif a {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem;
    padding: .7rem .2rem; text-decoration: none; color: var(--ink);
}
.notif a:hover { background: var(--surface-2); }
.notif-unread a { border-left: 3px solid var(--accent); padding-left: .6rem; }
.notif-line { font-family: var(--font-ui); font-size: .9rem; }
.notif-node { color: var(--ink-soft); font-style: italic; }
.notif-when {
    margin-left: auto; font-family: var(--font-ui); font-size: .72rem; color: var(--ink-soft);
}
/* Archive view: a quiet ✕ at the end of each row to delete a single item. */
.notif-del { display: flex; }
.notif-del button {
    background: none; border: none; cursor: pointer;
    color: var(--ink-soft); font-size: .95rem; padding: 0 .65rem; align-self: stretch;
}
.notif-del button:hover { color: var(--accent); }
.linklike {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font-family: var(--font-ui); font-size: inherit;
}
.linklike:hover { text-decoration: underline; }

/* ---------- layout ---------- */
main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1rem, 4vw, 1.5rem) 4rem;
    animation: rise .4s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: .1rem 0;
}
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 2rem 0 .7rem; }
h3 { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; margin: 1.5rem 0 .5rem; }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .3rem;
}
.meta { color: var(--ink-soft); font-family: var(--font-ui); font-size: .85rem; margin: .3rem 0 1.6rem; }
.hint { color: var(--ink-soft); font-size: .95rem; }
.back {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: 1rem;
}
.back:hover { color: var(--accent); }
.empty { color: var(--ink-soft); }

.exports, .sortbar { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); }
.exports a, .sortbar a {
    color: var(--accent);
    text-decoration: none;
    margin-left: .5rem;
    padding: .15rem .55rem;
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
}
.sortbar { margin: -.2rem 0 1.4rem; }
.sortbar a { border-color: transparent; }
.sortbar a.active { background: var(--accent); color: #fff; }

/* ---------- pagination (server-side, no-JS) ---------- */
.pager {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink-soft);
    margin: 1.6rem 0 .4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
}
.pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.pager-nav a, .pager-step, .pager-page {
    text-decoration: none;
    padding: .2rem .55rem;
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    color: var(--accent);
}
.pager-nav a:hover { border-color: var(--accent); }
.pager-step.disabled, .pager-gap {
    border-color: transparent;
    color: var(--ink-soft);
    opacity: .5;
}
.pager-gap { padding: .2rem .2rem; }
.pager-page.current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.pager-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pager-count { white-space: nowrap; }
.pager-size a {
    color: var(--accent);
    text-decoration: none;
    margin-left: .35rem;
}
.pager-size a:hover { text-decoration: underline; }
.pager-size .active { margin-left: .35rem; font-weight: 600; color: var(--ink); }

/* ---------- onboarding (empty library) ---------- */
.onboard {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    text-align: center;
    margin-top: 1rem;
}
.onboard h2 { margin-top: 0; }

.feed-subs-head { margin: 1.5rem 0 .25rem; }
.feed-form-head { margin: 1rem 0 .25rem; }
.feed-form-sep { border: 0; border-top: 1px solid var(--border, #ddd); margin: 2rem 0; }

/* ---------- book list ---------- */
.book-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.book-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem .2rem;
    border-bottom: var(--border-w) solid var(--line);
}
.book-list li:first-child { padding-top: 0; }
.book-line { display: flex; align-items: baseline; gap: .2rem .7rem; flex-wrap: wrap; }
.book-link {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}
.book-link:hover { color: var(--accent); }
.book-author { color: var(--ink-soft); font-style: italic; text-decoration: none; font-size: .95rem; }
.book-author:hover { color: var(--accent); }
/* OPDS language code (e.g. DEU/ENG) -- helps tell same-title editions apart. */
.book-lang {
    font-family: var(--font-ui);
    font-size: .7rem;
    letter-spacing: .03em;
    color: var(--ink-soft);
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    padding: .02rem .45rem;
}
.count {
    color: var(--ink-soft);
    font-family: var(--font-ui);
    font-size: .78rem;
    white-space: nowrap;
}

/* ---------- list pages: wide column + one toolbar ---------- */
/* List pages may use the width (cards/rows, not running text). The reading
   measure stays untouched elsewhere -- everything still derives from --maxw. */
main.wide { --maxw: 74rem; }
/* One compact row: sort chips left, type-to-narrow filter, add-action right.
   An opened inline <details> form (book-create) drops to its own line. */
.listbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.2rem;
    margin: 0 0 1.1rem;
    font-family: var(--font-ui);
}
.listbar .sortbar { margin: 0; }
/* Tipp-Filter: lebt auf /articles in der .listbar und auf /books in der
   klassischen .sortbar-Zeile. */
.list-filter {
    flex: 1 1 10rem;
    max-width: 18rem;
    padding: .3rem .7rem;
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .82rem;
}
.list-filter:focus { outline: none; border-color: var(--accent); }
.sortbar .list-filter { margin-left: .8rem; width: 15rem; vertical-align: middle; }
/* Vom Tipp-Filter (list-filter.js) ausgeblendete Zeilen. */
.lf-hidden { display: none !important; }
.listbar-add {
    margin-left: auto;
    font-size: .8rem;
    color: var(--accent);
    text-decoration: none;
    padding: .15rem .55rem;
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
}
.listbar-add:hover { border-color: var(--accent); }
.listbar .select-toggle {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .8rem;
    padding: .15rem .55rem;
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}
.listbar .select-toggle:hover, .listbar .select-toggle.is-on { border-color: var(--accent); }
.listbar-add + .select-toggle { margin-left: 0; }

/* ---------- article list: dense single-line rows ---------- */
.article-list li {
    align-items: center;
    gap: .7rem;
    padding: .55rem .2rem;
}
.article-list li:first-child { padding-top: .55rem; }
.article-list .book-line {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: baseline;
    overflow: hidden;
}
.article-list .book-link {
    font-size: 1.02rem;
    flex: 0 1 auto;
    min-width: 0;
    /* Long titles stay readable: up to two lines, then an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.art-source { font-size: .78rem; font-family: var(--font-ui); font-style: normal; white-space: nowrap; }
/* Select mode: once JS takes over (.js-select) the checkboxes appear only
   while selecting; without JS they simply stay visible, as they always were. */
.article-list.js-select .bulk-box { display: none; }
.article-list.js-select.selecting .bulk-box { display: inline-flex; }
/* On narrow screens the row may wrap (title keeps priority). */
@media (max-width: 640px) {
    .article-list li { flex-wrap: wrap; gap: .3rem .7rem; padding: .7rem .2rem; }
    .article-list .book-line { flex-wrap: wrap; flex-basis: 100%; }
    .article-list .book-link { white-space: normal; }
}

/* ---------- Dossier-Zeile in der Artikelliste ----------
   Ein Dossier steht als EINE Zeile für seine Artikel und klappt an Ort und
   Stelle auf (natives <details>, kein Seitensprung). Die Zeile ist deshalb ein
   Block, kein Flex-Zeilchen wie die Artikelzeilen daneben. */
.article-list li.dossier-row { display: block; padding: 0; }
.dossier-block > summary {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .55rem .2rem;
    cursor: pointer;
    list-style-position: outside;
}
.dossier-block > summary::marker { color: var(--ink-soft); }
.dossier-title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
    flex: 1 1 auto;
    min-width: 0;
}
.dossier-when { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.dossier-open {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.dossier-open:hover { text-decoration: underline; }
/* Die Mitglieder rücken ein, damit die Mappe als Ebene lesbar bleibt. */
.dossier-members { margin: 0 0 .4rem 1.4rem; border-left: var(--border-w) solid var(--line); padding-left: .8rem; }
.dossier-members li:last-child { border-bottom: none; }
.dossier-block > .empty { margin: 0 0 .6rem 1.4rem; font-size: .85rem; }

/* ---------- bulk-select (articles list) ---------- */
.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 .2rem;
}
.bulk-all { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.bulk-all input[type=checkbox] { width: auto; margin: 0; }
.bulk-delete {
    font-family: var(--font-ui);
    font-size: .85rem;
    padding: .4rem .9rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.bulk-delete:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.bulk-delete:disabled { opacity: .45; cursor: default; }
.bulk-list li { align-items: center; }
.bulk-list .book-line { flex: 1; }
.bulk-box { flex: none; display: inline-flex; align-items: center; min-width: 1.1rem; }
.bulk-box input[type=checkbox] { width: auto; margin: 0; cursor: pointer; }
/* ---------- Hauptkasten select mode (hk-select.js) ---------- */
/* Toggle row above the tree: the button stays right-aligned and out of the
   way; the delete action joins it while selecting. Without JS both the
   checkboxes and the action are simply always visible. */
.hk-selbar { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 .6rem; }
.hk-selbar .bulk-bar { margin: 0; }

/* After a delete: what went, and the way back. Deliberately loud enough to be
   read before the eye wanders -- the whole point is that nobody has to navigate
   back and count their thoughts to see whether the box swallowed one. */
.hk-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin: 0 0 1.2rem; padding: .6rem .9rem;
    border: 1px solid var(--rule); border-left: 3px solid var(--accent);
    border-radius: 4px; background: var(--paper-2, var(--paper));
    font-family: var(--font-ui); font-size: .9rem; color: var(--ink-soft);
}
.hk-notice b { color: var(--ink); font-weight: 600; }
.hk-notice-undo { margin: 0; }
.hk-notice-undo button {
    font-family: var(--font-ui); font-size: .9rem; cursor: pointer;
    padding: .3rem .7rem; border: 1px solid var(--rule); border-radius: 4px;
    background: var(--paper); color: var(--ink);
}
.hk-notice-undo button:hover { border-color: var(--accent); color: var(--accent); }
.hk-notice.is-back { border-left-color: var(--ok, #4a7c59); }
/* Under the Folgezettel list the delete button sits left, near the list. */
.hk-selbar-below { justify-content: flex-start; margin-top: .6rem; }
form[data-hk-select] { margin: 0; }
form[data-hk-select].js-select .bulk-box,
form[data-hk-select].js-select .bulk-bar { display: none; }
form[data-hk-select].js-select.selecting .bulk-box { display: inline-flex; }
form[data-hk-select].js-select.selecting .bulk-bar { display: flex; }
.hk-tree .bulk-box { margin-right: .4rem; }
.hk-sb-tree-title .bulk-box { margin-right: .5rem; }

/* reader detail reuses the bulk bar: group the two action forms, left-aligned */
.reader-bulk { justify-content: flex-start; gap: .6rem 1rem; }
.reader-bulk .rdr-bulk-form { margin: 0; }
.reader-members .bulk-box { margin-top: .2rem; }

/* articles bulk bar carries several action forms -> left-aligned, wrapping */
#articles-bulk { justify-content: flex-start; gap: .6rem 1rem; }
.bulk-action { margin: 0; display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.bulk-action select,
.bulk-action input[type=text] {
    font-family: var(--font-ui);
    font-size: .85rem;
    padding: .35rem .5rem;
    width: auto;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
}
.bulk-action-btn {
    font-family: var(--font-ui);
    font-size: .85rem;
    padding: .4rem .9rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.bulk-action-btn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.bulk-action-btn:disabled { opacity: .45; cursor: default; }
.hidden { display: none !important; }

/* feed-article retention: countdown / "behalten" chip + pin toggle */
.retain { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.retain-chip {
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--ink-soft);
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    padding: .1rem .5rem;
    white-space: nowrap;
}
.retain-chip--keep { color: var(--accent); border-color: var(--accent); }
.retain-form { margin: 0; }
.retain-toggle {
    font-family: var(--font-ui);
    font-size: .72rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}
.retain-toggle:hover { color: var(--accent); text-decoration: underline; }

/* ---------- book page ---------- */
.author { font-size: 1.1rem; color: var(--ink-soft); font-style: italic; margin: .1rem 0 .2rem; }
.author a { color: var(--ink-soft); text-decoration: none; }
.author a:hover { color: var(--accent); }

/* ---------- quotes ---------- */
.quote {
    position: relative;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.15rem 1.4rem;
    margin: 0 0 1.1rem;
    box-shadow: var(--shadow);
    animation: rise .4s ease both;
    /* Long unbreakable strings (e.g. URLs in article quotes) must wrap instead
       of spilling out of the card -- shows up first in the narrow reader panel. */
    overflow-wrap: break-word;
}
/* Jumped to from the reader's "Im Buch": the quotes panel scrolls this card
   into view (reader-panel.js) -- keep it clear of the sticky top and flash it
   briefly so the eye lands on the right quote. */
.quote { scroll-margin-top: 1rem; }
.quote.is-target { animation: rise .4s ease both, quote-flash 2.4s ease-out 1; }
@keyframes quote-flash {
    0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
    100% { box-shadow: var(--shadow); }
}
.quote .text { margin: 0; font-size: 1.13rem; line-height: 1.62; }
/* Textmarker-Look: a tint of the highlight colour sits behind the whole quote,
   like a real highlighter -- not just the card's left border. --mark is set per
   .color-* below; with no colour it falls back to transparent (invisible). The
   tint is mixed into the theme --bg so it stays readable in light AND dark; if a
   browser lacks color-mix the declaration is dropped and the quote shows no
   tint. The small negative margin lets the swipe bleed past the text edges. */
.quote .text {
    background-color: color-mix(in srgb, var(--mark, transparent) 22%, var(--bg));
    margin: 0 -.45rem;
    padding: .1rem .45rem;
    border-radius: 3px;
}
/* User-authored quote text (edited override or a manually added quote) keeps the
   line breaks the user typed -- e.g. a poem in verses. Device-ingested raw text
   stays collapsed (it has no deliberate breaks, only the odd page-number
   artifact), so this is gated to user text in the templates. */
.quote .text.preserve-breaks { white-space: pre-line; }
/* User-made inline highlights within a quote (the "markieren" feature). The
   text keeps its colour (color: inherit) and the tint is mixed into the theme
   background, so it stays readable in light AND dark themes. Each rgba line is a
   fallback for browsers without color-mix. */
.qmark {
    color: inherit;
    border-radius: 2px;
    padding: 0 .06em;
}
.qmark-yellow { background-color: rgba(227,193,74,.30); background-color: color-mix(in srgb, #e3c14a 34%, var(--bg)); }
.qmark-orange { background-color: rgba(224,138,60,.30); background-color: color-mix(in srgb, #e08a3c 34%, var(--bg)); }
.qmark-red    { background-color: rgba(212,96,74,.30);  background-color: color-mix(in srgb, #d4604a 34%, var(--bg)); }
.qmark-blue   { background-color: rgba(74,120,212,.32); background-color: color-mix(in srgb, #4a78d4 36%, var(--bg)); }
.qmark-green  { background-color: rgba(90,161,90,.32);  background-color: color-mix(in srgb, #5aa15a 38%, var(--bg)); }
/* "markieren" mode: a dashed frame signals the quote is now selectable for
   highlighting; existing marks become clickable (to remove). */
.quote .text.marking {
    cursor: text;
    outline: 2px dashed var(--accent-soft);
    outline-offset: 5px;
    border-radius: 2px;
}
.quote .text.marking .qmark { cursor: pointer; }
.mark-toggle {
    font: inherit;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.mark-toggle:hover { text-decoration: underline; }
/* Colour palette shown only while a quote is in "markieren" mode. */
.mark-palette { display: none; gap: .3rem; align-items: center; }
.quote .text.marking ~ footer .mark-palette { display: inline-flex; }
.mark-swatch {
    width: 1.05rem; height: 1.05rem; padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}
.mark-swatch.active { border-color: var(--ink); }
.mark-swatch[data-color="yellow"] { background: #e3c14a; }
.mark-swatch[data-color="orange"] { background: #e08a3c; }
.mark-swatch[data-color="red"]    { background: #d4604a; }
.mark-swatch[data-color="blue"]   { background: #4a78d4; }
.mark-swatch[data-color="green"]  { background: #5aa15a; }

/* Recolour a whole quote (card colour / PDF overlay): a swatch toggle that
   reveals the same palette, available on every quote (not just in mark-mode). */
.recolor { display: inline-flex; gap: .3rem; align-items: center; }
.recolor-toggle {
    font: inherit; background: none; border: none; padding: 0; cursor: pointer;
    line-height: 1; opacity: .75;
}
.recolor-toggle:hover { opacity: 1; }
.recolor-palette { display: inline-flex; gap: .3rem; align-items: center; }
.recolor-palette[hidden] { display: none; }
.recolor-swatch {
    width: 1.05rem; height: 1.05rem; padding: 0;
    border-radius: 50%; border: 2px solid transparent; cursor: pointer;
}
.recolor-swatch:hover { border-color: var(--ink); }
.recolor-swatch[data-color="yellow"] { background: #e3c14a; }
.recolor-swatch[data-color="orange"] { background: #e08a3c; }
.recolor-swatch[data-color="red"]    { background: #d4604a; }
.recolor-swatch[data-color="blue"]   { background: #4a78d4; }
.recolor-swatch[data-color="green"]  { background: #5aa15a; }
.recolor-swatch.recolor-clear {
    background: var(--bg); color: var(--ink-soft);
    border: 1px solid var(--line); font-size: .7rem; line-height: 1;
}
.quote .text::before {
    content: "\201C";
    font-family: var(--font-display);
    color: var(--accent-soft);
    font-size: 2.4rem;
    line-height: 0;
    vertical-align: -.45em;
    margin-right: .12rem;
}
.quote .note {
    margin: .7rem 0 0;
    padding-left: .9rem;
    border-left: 2px solid var(--accent-soft);
    color: var(--ink-soft);
    font-size: .96rem;
    font-style: italic;
}
.quote footer {
    margin-top: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    color: var(--ink-soft);
    font-size: .76rem;
    font-family: var(--font-ui);
}
.quote footer a { color: var(--accent); text-decoration: none; }
/* On result cards (search/tags): an obvious button to jump to this quote in the
   book view -- the small book-title link wasn't discoverable. Sits at the far
   right of the footer. */
.goto-quote {
    margin-left: auto;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .15rem .55rem;
    white-space: nowrap;
}
.goto-quote:hover { border-color: var(--accent); }
.copy-link {
    font: inherit;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.copy-link:hover { text-decoration: underline; }
.copy-link.copied { color: var(--ink-soft); }
.quote footer .device {
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    padding: .05rem .5rem;
}
/* stagger the first few for a gentle reveal */
.quote:nth-child(1){animation-delay:.02s}.quote:nth-child(2){animation-delay:.06s}
.quote:nth-child(3){animation-delay:.1s}.quote:nth-child(4){animation-delay:.14s}
.quote:nth-child(5){animation-delay:.18s}.quote:nth-child(6){animation-delay:.22s}

/* Each colour drives both the left border and the --mark tint behind the text. */
.color-yellow { border-left-color: #e3c14a; --mark: #e3c14a; }
.color-orange { border-left-color: #e08a3c; --mark: #e08a3c; }
.color-red    { border-left-color: #d4604a; --mark: #d4604a; }
.color-blue   { border-left-color: #4a78d4; --mark: #4a78d4; }
.color-green  { border-left-color: #5aa15a; --mark: #5aa15a; }
.color-purple { border-left-color: #8a5ad4; --mark: #8a5ad4; }
.color-gray   { border-left-color: #9a9a9a; --mark: #9a9a9a; }

/* ---------- reading stats ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .8rem 1.2rem;
    margin: 0 0 1rem;
    padding: 1.1rem 1.3rem;
    background: var(--surface-2);
    border-radius: var(--radius);
}
.stats div { margin: 0; }
.stats dt {
    font-family: var(--font-ui);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-soft);
}
.stats dd { margin: .15rem 0 0; font-size: 1.15rem; font-family: var(--font-display); }

.per-device { margin: 0 0 1.8rem; font-family: var(--font-ui); }
.per-device summary { cursor: pointer; color: var(--accent); font-size: .84rem; padding: .2rem 0; }
.per-device table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .82rem; }
.per-device th, .per-device td {
    text-align: left;
    padding: .45rem .5rem;
    border-bottom: var(--border-w) solid var(--line);
    white-space: nowrap;
}
.per-device th { color: var(--ink-soft); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- book header (title / byline+correction / actions) ---------- */
.book-title { margin: 0 0 .15rem; }
.book-byline {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .3rem 1rem; margin: 0 0 .3rem;
}
.book-byline .author { margin: 0; }
.book-actions {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem;
    margin: .25rem 0 0; font-family: var(--font-ui); font-size: .8rem;
}
.book-actions > a {
    color: var(--accent); text-decoration: none;
    padding: .15rem .55rem; border: var(--border-w) solid var(--line); border-radius: 999px;
}
.book-actions > a:hover { border-color: var(--accent); }

/* ---------- book title/author correction ---------- */
.meta-edit { font-family: var(--font-ui); }
/* When the editor opens it drops to its own full-width line below the byline. */
.meta-edit[open] { flex-basis: 100%; }
.meta-edit > summary {
    cursor: pointer; list-style: none; display: inline-block;
    font-size: .76rem; color: var(--ink-soft);
}
.meta-edit > summary::-webkit-details-marker { display: none; }
.meta-edit > summary:hover { color: var(--accent); }
.meta-edited { color: var(--accent); }
.meta-edit form {
    margin: .6rem 0 0; padding: .8rem 1rem; max-width: 34rem;
    background: var(--surface-2); border-radius: var(--radius);
    display: flex; flex-direction: column; gap: .6rem;
}
.meta-edit label {
    display: flex; flex-direction: column; gap: .2rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
}
.meta-edit input {
    padding: .45rem .6rem; border: var(--border-w) solid var(--line);
    border-radius: var(--radius); background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: .98rem;
}
.meta-edit input:focus { outline: none; border-color: var(--accent); }
.meta-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

/* ---------- book merge ---------- */
.merge-undo {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    margin: 2.5rem 0 .5rem; padding: .55rem .85rem;
    background: var(--surface-2); border-left: 3px solid var(--line);
    border-radius: var(--radius); font-family: var(--font-ui);
    font-size: .8rem; color: var(--ink-soft);
}
.merge-undo form { margin: 0; }
.merge-undo button {
    background: none; border: var(--border-w) solid var(--accent); color: var(--accent);
    border-radius: var(--radius); padding: .25rem .7rem; cursor: pointer;
    font-family: var(--font-ui); font-size: .8rem;
}
.merge-undo button:hover { background: var(--accent); color: #fff; }
.merge-keeper {
    margin: .3rem 0 1.4rem; padding: .7rem 1rem;
    background: var(--surface-2); border-radius: var(--radius);
    border-left: 3px solid var(--accent);
}
.mk-title { font-family: var(--font-display); font-size: 1.1rem; }
.mk-author { font-family: var(--font-ui); font-size: .82rem; color: var(--ink-soft); margin-left: .5rem; }
.merge-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.merge-cand {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem 1rem; padding: .7rem 0; border-bottom: var(--border-w) solid var(--line);
}
.mc-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.mc-title { font-family: var(--font-display); font-size: 1.02rem; }
.mc-author { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); }
.mc-count {
    font-family: var(--font-ui); font-size: .72rem; color: var(--ink-soft);
    background: var(--surface-2); border-radius: 999px; padding: .05rem .5rem;
}
.btn-merge {
    background: var(--accent); border: none; color: #fff; cursor: pointer;
    border-radius: var(--radius); padding: .4rem .8rem;
    font-family: var(--font-ui); font-size: .82rem; white-space: nowrap;
}
.btn-merge:hover { filter: brightness(1.08); }
.merge-cand form { margin: 0; }

/* ---------- account / admin ---------- */
.account-nav {
    display: flex; gap: .4rem 1.4rem; flex-wrap: wrap;
    margin: 0 0 2rem; padding: .65rem 0;
    border-top: var(--border-w) solid var(--line);
    border-bottom: var(--border-w) solid var(--line);
    font-family: var(--font-ui); font-size: .85rem;
}
.account-nav a { color: var(--accent); text-decoration: none; }
.account-nav a:hover { text-decoration: underline; }
.account-group {
    border-top: var(--border-w) solid var(--line);
    margin-top: 2.8rem; padding-top: .4rem;
}
.account-group-heading {
    font-family: var(--font-ui); font-weight: 600;
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .09em; color: var(--ink-soft);
    margin: 0 0 1.4rem;
}
.account-steps-heading {
    font-family: var(--font-ui); font-weight: 600; font-size: 1rem;
    margin: 1.5rem 0 .5rem;
}
.token-copy-row { display: flex; align-items: stretch; gap: .5rem; margin: .5rem 0 1rem; }
.token-copy-row .token-box { margin: 0; flex: 1 1 0; min-width: 0; }
.btn-copy {
    flex: 0 0 auto; padding: .45rem .8rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink-soft);
    font-family: var(--font-ui); font-size: .82rem;
    cursor: pointer; white-space: nowrap;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.btn-copy.copied { color: var(--accent); border-color: var(--accent); }
.admin-user-search {
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
    margin: .4rem 0 1rem;
}
.admin-user-search input[type="search"] {
    flex: 1 1 14rem; max-width: 24rem;
    padding: .5rem .7rem; border: var(--border-w) solid var(--line);
    border-radius: var(--radius); background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: 1rem;
}
.admin-user-search input[type="search"]:focus { outline: none; border-color: var(--accent); }
.admin-search-clear {
    color: var(--ink-soft); font-family: var(--font-ui); font-size: .85rem;
    text-decoration: none;
}
.admin-search-clear:hover { color: var(--accent); }
.token-box, .token-cell code, pre, code { font-family: "Public Sans", ui-monospace, monospace; }
.wiki-langs-form { display: flex; gap: .6rem; align-items: center; max-width: 30rem; margin: .4rem 0 1rem; }
.wiki-langs-form input {
    flex: 1; padding: .5rem .7rem; border: var(--border-w) solid var(--line);
    border-radius: var(--radius); background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: 1rem;
}
.wiki-langs-form input:focus { outline: none; border-color: var(--accent); }
.retention-form { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 1rem; font-family: var(--font-ui); font-size: .9rem; }
.retention-toggle-label, .retention-days-label { display: inline-flex; align-items: center; gap: .4rem; }
.retention-form input[type=checkbox] { width: auto; margin: 0; }
.retention-form input[type=number] {
    width: 4.5rem; padding: .4rem .5rem; border: var(--border-w) solid var(--line);
    border-radius: var(--radius); background: var(--surface); color: var(--ink); font-family: var(--font-body);
}
.wiki-langs-help { margin: 0 0 1.4rem; }
.wiki-langs-help > summary {
    cursor: pointer; color: var(--accent); font-family: var(--font-ui);
    font-size: .82rem; list-style: none; display: inline-block;
}
.wiki-langs-help > summary::-webkit-details-marker { display: none; }
.wiki-langs-help > summary:hover { text-decoration: underline; }
.wiki-codes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.wiki-code {
    border: var(--border-w) solid var(--line); background: var(--surface);
    color: var(--ink); cursor: pointer; border-radius: var(--radius);
    padding: .25rem .55rem; font-size: .82rem; font-family: var(--font-ui);
}
.wiki-code b { color: var(--accent); font-weight: 600; }
.wiki-code:hover { border-color: var(--accent); }
.bookmarklet {
    display: inline-block; padding: .45rem .9rem; margin: .2rem 0 1rem;
    border: var(--border-w) dashed var(--accent); border-radius: var(--radius);
    color: var(--accent); text-decoration: none; font-family: var(--font-ui);
    font-size: .9rem; cursor: grab;
}
.bookmarklet:hover { background: var(--surface-2); }

/* Web-article capture form. */
.article-form, .song-form { display: flex; flex-direction: column; gap: 1rem; max-width: 42rem; }
.article-form .field, .song-form .field { display: flex; flex-direction: column; gap: .35rem; }
.article-form .field > span, .song-form .field > span {
    font-family: var(--font-ui); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-soft);
}
.article-form input, .article-form textarea,
.song-form input, .song-form textarea {
    width: 100%; padding: .55rem .8rem; border: var(--border-w) solid var(--line);
    border-radius: var(--radius); background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: 1rem;
}
.article-form textarea, .song-form textarea { resize: vertical; line-height: 1.6; }
.article-form input:focus, .article-form textarea:focus,
.song-form input:focus, .song-form textarea:focus { outline: none; border-color: var(--accent); }
.article-form .btn-save, .song-form .btn-save { align-self: flex-start; }
.field-check {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--font-ui); font-size: .9rem; color: var(--ink);
    cursor: pointer;
}
.field-check input[type=checkbox] {
    width: auto; margin: 0; padding: 0; flex: none;
}
/* Interpret/Titel and Album/Jahr share a row on wide screens, stack on narrow. */
.song-meta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.song-meta-row .field { flex: 1 1 14rem; }

/* ---------- web article: full text + versions + diff ---------- */
.article-fulltext-box { margin: 1rem 0; }
.article-fulltext-meta {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    color: var(--ink-soft); font-size: .95rem; margin: .4rem 0 0;
}
.article-refetch { margin: 0; display: inline-flex; align-items: baseline; gap: .5rem; }
.refetch-images { font-size: .85rem; color: var(--ink-soft); }
.article-versions { margin-top: .5rem; }
/* Per-image removal grid on the article page */
.article-images-manage { margin-top: .5rem; }
.article-images-grid {
    display: grid; gap: .8rem; margin-top: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    align-items: start;
}
.article-image-item { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.article-image-item img {
    width: 100%; height: 110px; object-fit: cover;
    border: 1px solid var(--line, #ccc); border-radius: 4px;
}
.article-image-item.is-cover img { border: 2px solid var(--accent); }
.article-image-item .img-remove { color: var(--ink-soft); }
.article-image-item .cover-pick { margin: 0; }
.article-image-item .cover-pick .btn-link { width: 100%; }
.cover-badge {
    font-family: var(--font-ui); font-size: .76rem; font-weight: 600;
    color: var(--accent); text-align: center;
}
.article-images-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
    margin-top: .9rem;
}
.article-images-actions form { margin: 0; }
.cover-reset .btn-link { background: transparent; color: var(--accent); }
.cover-reset .btn-link:hover { background: var(--accent); color: #fff; }

/* Cover editor */
.cover-editor { margin-top: .8rem; }
.cover-editor-layout {
    display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .6rem;
    align-items: flex-start;
}
.cover-editor-preview { flex: 0 0 auto; }
.cover-editor-preview img {
    width: 240px; max-width: 100%; height: auto;
    border: 1px solid var(--line, #ccc); border-radius: 4px;
    background: #f7f5f0;
}
.cover-editor-form { flex: 1 1 280px; margin: 0; min-width: 240px; }
.cover-editor-form .field { display: block; margin-bottom: .7rem; }
.cover-radios {
    border: 1px solid var(--line, #ccc); border-radius: 4px;
    padding: .4rem .6rem; margin: 0 0 .7rem;
    display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: center;
}
.cover-radios legend { font-size: .82rem; color: var(--ink-soft); padding: 0 .3rem; }
.cover-radios label { font-size: .9rem; display: inline-flex; align-items: center; gap: .25rem; }
.cover-editor-form [data-cover-dims] { display: block; margin-top: .25rem; }

/* --- Feed import (feed_import.html / feed_import_result.html) ------------ */
.feed-pick-actions { margin: .2rem 0 .6rem; font-size: .9rem; }
.feed-list { list-style: none; padding: 0; margin: 1rem 0; }
.feed-list li { border-bottom: var(--border-w) solid var(--line); }
.feed-list li:last-child { border-bottom: none; }
.feed-list label { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .2rem; cursor: pointer; }
.feed-list input[type=checkbox] { margin-top: .35rem; flex: none; width: auto; }
.feed-pick-actions input[type=checkbox], .feed-reader-opts input[type=checkbox], .feed-reader-opts input[type=radio], .feed-images-opt input[type=checkbox] { width: auto; }
.feed-item-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.feed-item-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); text-decoration: none; }
a.feed-item-title:hover { color: var(--accent); }
.feed-item-meta { color: var(--ink-soft); font-size: .8rem; overflow-wrap: anywhere; }
/* Result rows: text left, status chip right. */
.feed-result li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem .2rem; }
.feed-status { font-family: var(--font-ui); font-size: .78rem; white-space: nowrap; color: var(--ink-soft); }
.feed-status-imported, .feed-status-existed { color: #2e7d32; }
.feed-status-error { color: #b3402f; }
.feed-status-imported_nobody, .feed-status-existed_nobody { white-space: normal; }
.feed-reader-opts {
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    padding: .6rem .8rem; display: flex; flex-direction: column; gap: .5rem;
}
.feed-reader-opts legend { font-size: .82rem; color: var(--ink-soft); padding: 0 .3rem; }
.feed-reader-opts label.radio { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; }
.feed-reader-opts input[type=text], .feed-reader-opts select { max-width: 28rem; }
/* Subscribe form (feed_edit.html): align the standalone checkboxes too, and
   indent the inputs that depend on a radio so they read as sub-options. */
.feed-form label.radio { display: inline-flex; align-items: center; gap: .4rem; }
.feed-form label.radio input[type=checkbox], .feed-form label.radio input[type=radio] { width: auto; }
.feed-form .feed-reader-opts > select,
.feed-form .feed-reader-opts > input[type=text] { margin-left: 1.5rem; }
.feed-progress { margin: 1.5rem 0; max-width: 34rem; }
.feed-progress-text { font-family: var(--font-display); font-size: 1.15rem; }
.feed-progress-bar { height: .55rem; background: var(--line); border-radius: var(--radius); overflow: hidden; margin: .6rem 0 .8rem; }
.feed-progress-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* --- Free WYSIWYG cover editor (cover-editor.js) ------------------------- */
.cover-free {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .7rem;
    align-items: flex-start;
}
/* .cover-free / .cover-editor-layout carry display:flex, which would beat the
   bare [hidden] UA rule; restore it so the free editor stays hidden without JS
   and JS can hide the no-JS presets once it takes over. */
.cover-free[hidden], .cover-editor-layout[hidden] { display: none; }
.cover-free-stage-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.cover-stage {
    position: relative; width: 280px; max-width: 72vw; aspect-ratio: 3 / 4;
    container-type: size;            /* lets element font-size use cqh units */
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: #f7f5f0; box-shadow: var(--shadow);
    touch-action: none; user-select: none; cursor: default;
}
.cover-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cover-stage.is-pannable { cursor: grab; }
.cover-stage-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: fill; pointer-events: none; -webkit-user-drag: none;
}
.cover-stage-layer { position: absolute; inset: 0; }
.cover-el {
    position: absolute; box-sizing: border-box; padding: 1.75cqh 2cqw;
    line-height: 1.25; cursor: move; border: 1px solid transparent;
    border-radius: 3px; word-break: break-word; touch-action: none;
}
.cover-el.is-selected { border-color: var(--accent); border-style: dashed; }
.cover-el-text { display: block; white-space: pre-wrap; }
.cover-grip {
    position: absolute; display: none; width: 15px; height: 15px;
    background: var(--accent); border: 2px solid var(--surface); border-radius: 50%;
    box-shadow: 0 0 0 1px var(--accent); touch-action: none;
}
.cover-el.is-selected .cover-grip { display: block; }
.cover-grip-size { right: -8px; bottom: -8px; cursor: nwse-resize; }
.cover-grip-rotate { left: 50%; top: -26px; margin-left: -8px; cursor: grab; }
.cover-grip-rotate::after {       /* little stem down to the box */
    content: ""; position: absolute; left: 50%; top: 13px;
    width: 2px; height: 12px; margin-left: -1px; background: var(--accent);
}
.cover-free-truth { display: flex; flex-direction: column; gap: .35rem; }
.cover-free-truth img {
    width: 96px; height: 128px; object-fit: contain;
    border: var(--border-w) solid var(--line); border-radius: 6px; background: #f7f5f0;
}

/* Inspector panel */
.cover-tools {
    flex: 1 1 300px; min-width: 260px; align-self: stretch;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1rem 1.1rem; background: var(--surface-2);
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    font-family: var(--font-ui);
}
.cover-sec-label {
    margin: 0 0 .5rem; font-size: .68rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.cover-tool-head { display: flex; gap: .5rem; align-items: center; }
.cover-add { font-weight: 600; }
.cover-del { margin-left: auto; }
.cover-del:disabled { opacity: .4; cursor: default; }
.cover-del:not(:disabled):hover { border-color: #d4604a; color: #d4604a; }
.cover-el-tools { padding-top: .2rem; border-top: var(--border-w) solid var(--line); }
.cover-el-tools[hidden] { display: none; }
.cover-tool-row { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; margin-top: .6rem; }
.cover-input, .cover-select {
    width: 100%; font: inherit; color: var(--ink); background: var(--surface);
    border: var(--border-w) solid var(--line); border-radius: 8px; padding: .4rem .55rem;
}
.cover-input { min-height: 2.6rem; resize: vertical; }
.cover-select { width: auto; }
.cover-input:focus, .cover-select:focus { outline: none; border-color: var(--accent); }

/* Pill toggles + connected segments */
.cover-segment { display: inline-flex; }
.cover-toggle {
    font-family: var(--font-ui); border: var(--border-w) solid var(--line);
    background: var(--surface); color: var(--ink); cursor: pointer;
    padding: .34rem .55rem; font-size: .82rem; line-height: 1; min-width: 2rem;
}
.cover-segment .cover-toggle { border-radius: 0; margin-left: -1px; }
.cover-segment .cover-toggle:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.cover-segment .cover-toggle:last-child { border-radius: 0 8px 8px 0; }
.cover-segment-wrap { flex-wrap: wrap; }
.cover-toggle:hover { border-color: var(--accent); color: var(--accent); z-index: 1; position: relative; }
.cover-toggle.is-on {
    background: var(--accent); color: #fff; border-color: var(--accent);
    z-index: 1; position: relative;
}

/* Inline labelled controls (font, track, zoom) + colour swatches + checkbox */
.cover-inline {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .82rem; color: var(--ink-soft);
}
.cover-range { display: flex; }
.cover-range input[type="range"] { flex: 1; min-width: 7rem; accent-color: var(--accent); }
.cover-swatch {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--ink-soft);
}
.cover-swatch input[type="color"] {
    width: 30px; height: 26px; padding: 0; cursor: pointer; background: none;
    border: var(--border-w) solid var(--line); border-radius: 6px;
}
.cover-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.cover-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cover-check {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
    font-size: .82rem; color: var(--ink); cursor: pointer;
}
.cover-check input { accent-color: var(--accent); }
.cover-bg-tools { padding-top: .9rem; border-top: var(--border-w) solid var(--line); }
.cover-bg-tools .cover-swatch { margin-top: .7rem; }
.cover-bg-free { margin-top: .7rem; }
.cover-bg-free .hint { margin: .35rem 0 0; }

/* Save row: styled file picker + primary button */
.cover-save-form {
    margin: 0; padding-top: .9rem; border-top: var(--border-w) solid var(--line);
    display: flex; flex-direction: column; gap: .7rem; align-items: flex-start;
}
.cover-file { display: flex; flex-direction: column; gap: .35rem; width: 100%; }
.cover-file input[type="file"] { font-size: .82rem; color: var(--ink-soft); }
.cover-file input[type="file"]::file-selector-button {
    font-family: var(--font-ui); margin-right: .6rem; cursor: pointer;
    border: var(--border-w) solid var(--line); background: var(--surface);
    color: var(--ink); border-radius: 8px; padding: .34rem .7rem; font-size: .82rem;
}
.cover-file input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
/* Reader cover field */
.reader-cover-current { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .5rem; }
.reader-cover-current img {
    width: 90px; height: 120px; object-fit: cover;
    border: 1px solid var(--line, #ccc); border-radius: 4px;
}
.article-versions ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.article-versions li { padding: .15rem 0; }
.pubdate { color: var(--ink-soft); font-size: .95rem; margin: .1rem 0 0; }
.article-version-switch { margin: .5rem 0 1rem; }
/* Word-level diff: changed words inline -- removed struck-through red, added
   green -- so only what actually changed stands out, context stays readable. */
.diff-words { white-space: pre-wrap; line-height: 1.7; }
.diff-words del {
    background: #fbe9e9; color: #a11; text-decoration: line-through;
    border-radius: 3px; padding: 0 .1rem;
}
.diff-words ins {
    background: #e7f6e9; color: #161; text-decoration: none;
    border-radius: 3px; padding: 0 .1rem;
}
/* Floating "save as quote" button that follows a selection in the full text. */
.article-quote-btn {
    z-index: 50; padding: .3rem .7rem; font-size: .9rem; cursor: pointer;
    color: #fff; background: var(--accent, #3a6); border: none; border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap;
}
.article-quote-btn:hover { filter: brightness(1.07); }
/* Saved quotes shown highlighted within the article's full text. */
.article-fulltext .article-hit {
    color: inherit; border-radius: 2px; padding: .05em .1em;
    background-color: color-mix(in srgb, var(--mark, #e3c14a) 32%, var(--bg));
}
.article-fulltext .article-hit:target {
    outline: 2px solid var(--mark, #e3c14a); outline-offset: 1px;
}
/* Clickable footnotes (see article-footnotes.js): an inline reference sits as a
   superscript, its definition's leading marker links back up. */
.article-fulltext a.fn-ref {
    font-size: .72em; vertical-align: super; line-height: 0;
    color: var(--accent); text-decoration: none; padding: 0 .05em;
    white-space: nowrap;
}
.article-fulltext a.fn-back { color: var(--accent); text-decoration: none; }
.article-fulltext a.fn-ref:hover, .article-fulltext a.fn-back:hover {
    text-decoration: underline;
}
.article-fulltext p:target, .article-fulltext li:target {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

/* ---------- songs ---------- */
.song-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.song-list li {
    padding: 1rem .2rem;
    border-bottom: var(--border-w) solid var(--line);
}
.song-list li:first-child { padding-top: 0; }
.song-quote-link { text-decoration: none; display: block; }
.song-quote-snip {
    margin: 0; padding: .1rem .45rem; border-left: 3px solid var(--accent);
    padding-left: .7rem; font-size: 1.1rem; line-height: 1.55; color: var(--ink);
    background-color: color-mix(in srgb, var(--mark, transparent) 22%, var(--bg));
    border-radius: 3px; white-space: pre-line;
}
.song-quote-link:hover .song-quote-snip { color: var(--accent); }
.song-meta {
    font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft);
    margin: .45rem 0 0; display: flex; gap: .1rem .55rem; flex-wrap: wrap;
}
.song-meta .song-artist { font-style: italic; }
.song-meta .song-title { font-weight: 500; color: var(--ink); }
/* A faint vertical bar separates the metadata pieces; the first present piece
   gets none, so optional fields (album/year) drop out cleanly. */
.song-meta > span:not(:first-child)::before,
.song-byline > span:not(:first-child)::before {
    content: "|"; padding-right: .55rem; color: var(--ink-soft);
    font-style: normal; opacity: .55;
}
/* Clickable artist (find their other songs) -- styled like the muted byline,
   not a loud link. */
.song-meta .song-artist a, .song-byline .song-artist a {
    color: inherit; text-decoration: none;
}
.song-meta .song-artist a:hover, .song-byline .song-artist a:hover { color: var(--accent); }
/* song page byline (artist · album · year) under the title */
.song-byline {
    font-size: 1.05rem; color: var(--ink-soft); font-style: italic;
    margin: .1rem 0 .2rem; display: flex; gap: .1rem .6rem; flex-wrap: wrap;
}
.song-byline a { color: var(--ink-soft); text-decoration: none; }
.song-byline a:hover { color: var(--accent); }
/* The full lyric, shown as context, with the quoted line(s) marked. pre-line
   keeps verse line breaks (the .preserve-breaks rule is scoped to .quote .text,
   so .lyric must set white-space itself). */
.lyric {
    background: var(--surface); border: var(--border-w) solid var(--line);
    border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: .4rem 0 1.6rem;
    font-size: 1.08rem; line-height: 1.7; color: var(--ink);
    box-shadow: var(--shadow);
    white-space: pre-line;
}
.lyric .lyric-hit {
    color: inherit; border-radius: 2px; padding: .05em .1em;
    background-color: rgba(227,193,74,.30);
    background-color: color-mix(in srgb, var(--mark, #e3c14a) 32%, var(--bg));
}
.token-box {
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin: .4rem 0 1rem;
    font-size: .85rem;
    word-break: break-all;
    font-family: ui-monospace, monospace;
}

button {
    font-family: var(--font-ui);
    border: var(--border-w) solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    padding: .4rem .8rem;
    cursor: pointer;
    font-size: .85rem;
}
button:hover { border-color: var(--accent); color: var(--accent); }
.btn-warn { color: #b3402f; border-color: color-mix(in srgb, #d4604a 40%, var(--line)); }
.btn-warn:hover { background: #d4604a; color: #fff; border-color: #d4604a; }
.btn-primary {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius);
    padding: .6rem 1.1rem;
    font-size: .92rem;
}
.btn-primary:hover { filter: brightness(1.07); }

.admin-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--font-ui); }
.admin-form input[type=text] {
    padding: .45rem .65rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
.admin-form .check { font-size: .85rem; color: var(--ink-soft); display: flex; gap: .3rem; align-items: center; }
.admin-form .field { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--ink-soft); }
.admin-form .field input[type=text] { min-width: 16rem; }
/* The settings form keeps its hint on its own line under the inputs. */
.admin-form .hint { flex-basis: 100%; margin: .2rem 0 0; }
/* Separate the settings block from the user-management section below it. */
.admin-section { padding-bottom: 1.6rem; margin-bottom: 2rem; border-bottom: var(--border-w) solid var(--line); }

/* dictionary upload: live checklist of the Stardict parts */
.form-error {
    font-family: var(--font-ui); font-size: .85rem; color: #b3402f;
    background: color-mix(in srgb, #b3402f 8%, transparent);
    border-left: 3px solid #b3402f; padding: .5rem .7rem; border-radius: var(--radius);
}
.form-notice {
    font-family: var(--font-ui); font-size: .85rem; color: var(--ink);
    background: color-mix(in srgb, var(--accent, #4169e1) 8%, transparent);
    border-left: 3px solid var(--accent, #4169e1);
    padding: .5rem .7rem; border-radius: var(--radius); margin: .6rem 0;
}
.dict-checklist {
    flex-basis: 100%; list-style: none; margin: .4rem 0; padding: 0;
    font-family: var(--font-ui); font-size: .82rem; color: var(--ink-soft);
}
.dict-checklist li { padding: .1rem 0; }
.dict-checklist .mark { font-weight: 700; }
.dict-checklist li[data-state="ok"] { color: var(--ink); }
.dict-checklist li[data-state="ok"] .mark { color: #4a9d5b; }
.dict-checklist li[data-state="miss"][data-req$="Pflicht"] { color: #b3402f; }
.dict-checklist .req { color: #b3402f; }
.dict-checklist .opt { opacity: .7; }
.dict-checklist.is-zip li .req,
.dict-checklist.is-zip li .opt { opacity: .5; }
.dict-table td .meta { font-size: .72rem; }
.dict-actions { flex-basis: 100%; display: flex; align-items: center; gap: .9rem; }
.dict-progress {
    flex-basis: 100%; display: flex; align-items: center; gap: .8rem;
    font-family: var(--font-ui); font-size: .82rem; color: var(--ink-soft);
    margin-top: .3rem;
}
.dict-progress progress {
    flex: 1 1 auto; height: .8rem; border: var(--border-w) solid var(--line);
    border-radius: 999px; overflow: hidden; background: var(--surface-2);
    accent-color: var(--accent);
}
.dict-progress progress::-webkit-progress-bar { background: var(--surface-2); }
.dict-progress progress::-webkit-progress-value { background: var(--accent); }
.dict-progress progress::-moz-progress-bar { background: var(--accent); }
.dict-progress-label { white-space: nowrap; min-width: 9rem; }
.dict-progress .btn-warn { flex: 0 0 auto; }

table.users { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .85rem; }
table.users th, table.users td {
    text-align: left;
    padding: .55rem .4rem;
    border-bottom: var(--border-w) solid var(--line);
    vertical-align: top;
}
table.users th { color: var(--ink-soft); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.token-cell { max-width: 15rem; color: var(--ink-soft); }
/* the API token is one long unbreakable hex string -- let it wrap so it can't
   overflow under the Aktionen column and collide with the buttons */
.token-cell code { word-break: break-all; overflow-wrap: anywhere; }
table.users { table-layout: fixed; }
table.users th:first-child, table.users td:first-child { width: 9rem; }
.actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.actions form { display: inline-flex; gap: .25rem; }
.actions input[type=text] {
    width: 8rem;
    padding: .3rem .45rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
.badge {
    font-family: var(--font-ui);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--accent);
    color: #fff;
    border-radius: 4px;
    padding: .05rem .35rem;
}
.badge.you { background: var(--ink-soft); }

/* ---------- device setup ---------- */
.download-box {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    margin: 1rem 0 1.6rem;
    box-shadow: var(--shadow);
}
.download-box .hint { margin: .6rem 0 0; }
.single-dl { font-family: var(--font-ui); font-size: .85rem; margin: .8rem 0 0; }
.single-dl a { color: var(--accent); }
.steps { padding-left: 1.3rem; }
.steps li { margin: .6rem 0; }
.device-steps { margin: .4rem 0 0; padding-left: 1.1rem; }
.device-steps li { margin: .3rem 0; font-size: .92rem; }
pre {
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    overflow-x: auto;
    font-size: .82rem;
    line-height: 1.5;
    font-family: ui-monospace, monospace;
}
pre .add { color: var(--accent); font-weight: 700; }

/* ---------- tags / Zettelkasten keyword index ---------- */
/* Per-highlight tag row on the book page */
.tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .85rem;
    padding-top: .7rem;
    border-top: var(--border-w) solid var(--line);
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    padding: .1rem .25rem .1rem .6rem;
    font-family: var(--font-ui);
    font-size: .76rem;
}
.tag > a { color: var(--accent); text-decoration: none; }
.tag > a::before { content: "#"; opacity: .5; }
.tag form { display: inline-flex; margin: 0; }
.tag form button {
    border: none;
    background: none;
    color: var(--ink-soft);
    padding: 0 .25rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
}
.tag form button:hover { color: #fff; background: var(--accent); }
.tag-add { margin: 0; }
.tag-add input {
    width: 8.5rem;
    padding: .18rem .55rem;
    border: var(--border-w) dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .76rem;
}
.tag-add input::placeholder { color: var(--ink-soft); }
.tag-add input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--accent);
    background: var(--surface);
}

/* Schlagwort autocomplete popup (tagbox.js) */
.tagbox-pop {
    position: absolute;
    z-index: 50;
    list-style: none;
    margin: 0;
    padding: .25rem;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: var(--font-ui);
    font-size: .78rem;
}
.tagbox-pop li {
    padding: .28rem .55rem;
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    white-space: nowrap;
}
.tagbox-pop li::before { content: "#"; opacity: .45; margin-right: .15rem; }
.tagbox-pop li.is-active,
.tagbox-pop li:hover { background: var(--accent); color: #fff; }
.tagbox-pop li.is-active::before,
.tagbox-pop li:hover::before { opacity: .7; }

/* ---------- search typeahead dropdown ---------- */
.suggest-pop {
    position: absolute;
    z-index: 60;
    max-height: 24rem;
    max-width: 32rem;
    overflow-y: auto;
    padding: .3rem;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: var(--font-ui);
}
.sg-group + .sg-group { border-top: var(--border-w) solid var(--line); margin-top: .25rem; padding-top: .25rem; }
.sg-head {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-soft); padding: .3rem .5rem .15rem;
}
.sg-item {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .32rem .55rem; border-radius: calc(var(--radius) - 4px);
    text-decoration: none; color: var(--ink); cursor: pointer;
}
.sg-item.is-active, .sg-item:hover { background: var(--accent); color: #fff; }
.sg-label { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sub { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.sg-meta {
    margin-left: auto; font-size: .68rem; color: var(--ink-soft);
    background: var(--surface-2); border-radius: 999px;
    padding: .03rem .4rem; min-width: 1.1rem; text-align: center;
}
.sg-item.is-active .sg-sub, .sg-item:hover .sg-sub,
.sg-item.is-active .sg-meta, .sg-item:hover .sg-meta { color: #fff; }
.sg-item.is-active .sg-meta, .sg-item:hover .sg-meta { background: rgba(255,255,255,.25); }
.sg-all { font-size: .8rem; color: var(--accent); font-weight: 600; }
.sg-all.is-active, .sg-all:hover { color: #fff; }

/* ---------- dictionary lookup (Wörterbücher page) ---------- */
.dict-lookup {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.4rem;
    font-family: var(--font-ui);
}
.dict-lookup input[type="search"] {
    flex: 1 1 14rem;
    padding: .5rem .85rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .92rem;
}
.dict-lookup input[type="search"]:focus { outline: none; border-color: var(--accent); }
.dict-lookup select {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--ink);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .35rem .6rem;
    max-width: 16rem;
}
.dict-results { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.dict-entry {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
}
.dict-entry-head {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}
.dict-entry-head h2 { margin: 0; font-size: 1.15rem; }
.dict-entry-source {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: .75rem;
    color: var(--ink-soft);
    text-decoration: none;
}
.dict-entry-source:hover { color: var(--accent); }
.dict-entry-body { font-size: .95rem; line-height: 1.55; overflow-wrap: break-word; }
.dict-entry-body blockquote {
    margin: .4rem 0 .4rem .9rem;
    padding-left: .7rem;
    border-left: 2px solid var(--line);
    color: var(--ink-soft);
}
.dict-entry-body hr { border: none; border-top: var(--border-w) solid var(--line); margin: .7rem 0; }
.dict-downloads-head { margin-top: .5rem; }

/* ---------- embedded book reader (calibre-web streamed) ---------- */
.reader-bar {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
    font-family: var(--font-ui);
}
.reader-bar .back { margin: 0; }
.reader-title { font-weight: 600; }
.reader-status { color: var(--ink-soft); font-size: .82rem; margin-left: auto; }
.reader-search {
    display: flex; align-items: center; gap: .25rem;
}
.reader-search input {
    font: inherit; font-size: .85rem; padding: .25rem .5rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--bg); color: var(--ink); width: 12rem; max-width: 40vw;
}
.reader-search input:focus { outline: none; border-color: var(--accent); }
.reader-search-nav {
    border: none; background: transparent; cursor: pointer;
    font-size: 1.2rem; line-height: 1; color: var(--ink-soft); padding: 0 .2rem;
}
.reader-search-nav:hover:not(:disabled) { color: var(--accent); }
.reader-search-nav:disabled { opacity: .35; cursor: default; }
.reader-search-count {
    font-size: .78rem; color: var(--ink-soft); min-width: 3.2rem; text-align: center;
}
.reader-zoom { display: flex; align-items: center; gap: .3rem; }
.reader-zoom-label {
    font-size: .72rem; color: var(--ink-soft); text-transform: uppercase;
    letter-spacing: .04em;
}
.reader-zoom button {
    border: var(--border-w) solid var(--line); background: var(--bg);
    color: var(--ink); cursor: pointer; font-size: .9rem; font-weight: 600;
    padding: .15rem .55rem; border-radius: var(--radius); line-height: 1;
    display: inline-flex; align-items: baseline; gap: .05rem;
}
.reader-zoom button:hover { border-color: var(--accent); color: var(--accent); }
#reader-zoom-out span { font-size: .78em; }
#reader-zoom-in span { font-size: 1.2em; }
.reader-save {
    border: var(--border-w) solid var(--accent); background: var(--bg);
    color: var(--accent); cursor: pointer; font-family: var(--font-ui);
    font-size: .8rem; padding: .25rem .7rem; border-radius: var(--radius);
    line-height: 1;
}
.reader-save:hover:not(:disabled) { background: var(--accent); color: #fff; }
.reader-save:disabled { opacity: .4; cursor: default; border-color: var(--line); color: var(--ink-soft); }
.reader-paneltoggle {
    border: var(--border-w) solid var(--line); background: var(--bg);
    color: var(--ink-soft); cursor: pointer; font-family: var(--font-ui);
    font-size: .8rem; padding: .25rem .7rem; border-radius: var(--radius); line-height: 1;
}
.reader-paneltoggle:hover { border-color: var(--accent); color: var(--accent); }

/* PDF highlight-colour picker (swatches in the reader bar). The active swatch
   is the colour the next saved quote -- and its persistent overlay -- gets. */
.reader-colors { display: inline-flex; gap: .3rem; align-items: center; }
.reader-color {
    width: 1.15rem; height: 1.15rem; padding: 0; cursor: pointer; line-height: 0;
    border: var(--border-w) solid color-mix(in srgb, var(--ink) 25%, var(--line));
    border-radius: 50%; background: var(--swatch, #e3c14a);
}
.reader-color:hover { transform: scale(1.12); }
.reader-color.is-active {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent);
    border-color: transparent;
}
.swatch-yellow { --swatch: #e3c14a; }
.swatch-orange { --swatch: #e08a3c; }
.swatch-red    { --swatch: #d4604a; }
.swatch-blue   { --swatch: #4a78d4; }
.swatch-green  { --swatch: #5aa15a; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Per-book dictionary picker (gear dropdown in the reader bar). */
.reader-dictwrap { position: relative; }
.reader-dictcfg {
    position: absolute; right: 0; top: 100%; margin-top: .35rem; z-index: 40;
    min-width: 14rem; max-height: 60vh; overflow: auto;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    padding: .6rem .7rem;
    display: flex; flex-direction: column; gap: .35rem; font-size: .85rem;
}
.reader-dictcfg[hidden] { display: none; }
.reader-dictcfg-head {
    margin: 0 0 .2rem; font-size: .68rem; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .05em;
}
.reader-dictcfg label { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.reader-dictcfg .btn-save {
    margin-top: .4rem; align-self: flex-start; padding: .3rem .9rem; font-size: .82rem;
}

/* Table of contents dropdown. */
.reader-tocwrap { position: relative; }
.reader-toc {
    position: absolute; left: 0; top: 100%; margin-top: .35rem; z-index: 40;
    min-width: 16rem; max-width: 26rem; max-height: 70vh; overflow: auto;
    background: var(--surface); border: var(--border-w) solid var(--line);
    border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    padding: .4rem 0;
}
.reader-toc[hidden] { display: none; }
.reader-toc-list, .reader-toc-list ul { list-style: none; margin: 0; padding: 0; }
.reader-toc-link {
    display: block; padding: .3rem .6rem; color: var(--ink);
    text-decoration: none; font-size: .85rem; line-height: 1.3;
}
.reader-toc-link:hover { background: var(--surface-2); color: var(--accent); }

/* Reading-position slider (jump to %). */
.reader-prog-wrap { display: inline-flex; align-items: center; gap: .4rem; }
.reader-prog { width: 8rem; max-width: 24vw; cursor: pointer; accent-color: var(--accent); }
.reader-prog:disabled { opacity: .4; cursor: default; }
.reader-prog-label { font-size: .76rem; color: var(--ink-soft); min-width: 2.6rem; }

/* The reader/split needs (almost) the full window -- the 49rem reading cap
   crams the viewer and the quotes column into the centre. Every theme sizes
   `main` from --maxw (archiv even via width:min(--maxw, calc(100% - 1.4rem))),
   so lifting --maxw on just this page widens it everywhere, each theme keeping
   its own edge spacing -- no width/max-width specificity battle. */
main.reader-page { --maxw: 200rem; }

/* PDF reader: the vendored PDF.js viewer (own toolbar) on the left of the split,
   quotes panel on the right -- same sizing/drag as the EPUB reader. */
.reader-split > .pdf-frame {
    flex: 1 1 auto;
    min-width: 0;
    height: calc(100vh - 12rem);
    min-height: 24rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

/* Split view: two distinct cards side by side -- the viewer on the left, the
   book page embedded on the right. Shadow + gap so each reads as its own frame
   (the panel's content is dark in dark themes, where a thin border vanishes). */
.reader-split { display: flex; gap: .5rem; align-items: stretch; --panel-w: 40%; }
.reader-split > .reader-frame { flex: 1 1 auto; min-width: 0; }
.reader-split > .reader-frame,
.reader-panel {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.reader-panel {
    flex: 0 0 var(--panel-w);   /* viewer ~60%, quotes column ~40% (drag to adjust) */
    /* px, not rem: a rem floor scales with the text-size picker and, at larger
       sizes, exceeds 40% of the viewport -- overriding the flex-basis and
       quietly shifting the 60/40 default. px keeps the ratio stable. */
    min-width: 288px;
    height: calc(100vh - 12rem);
    min-height: 24rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.reader-panel-frame { width: 100%; height: 100%; border: 0; display: block; }
.reader-split.no-panel .reader-panel,
.reader-split.no-panel .reader-divider { display: none; }

/* Draggable divider between viewer and quotes column. */
.reader-divider {
    flex: 0 0 .5rem;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
}
.reader-divider::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 2.4rem;
    border-radius: 2px;
    background: var(--line);
    transition: background .15s, height .15s;
}
.reader-divider:hover::before, .reader-split.dragging .reader-divider::before {
    background: var(--accent); height: 4rem;
}
/* While dragging, let the mouse move over BOTH iframes (the epub viewer on the
   left and the book panel on the right) without them swallowing mousemove/up --
   otherwise shrinking the viewer drags the cursor over the viewer iframe and the
   mouseup never reaches us, leaving the drag stuck. */
.reader-split.dragging { user-select: none; }
.reader-split.dragging iframe { pointer-events: none; }

/* The book page when embedded in that panel: no chrome, tighter, no entry anim. */
.embed main { padding: 1.1rem clamp(.8rem, 3vw, 1.4rem) 1.8rem; animation: none; }

/* In-book dictionary / Wikipedia popup (single-word selection). */
.reader-dict-pop {
    position: fixed;
    z-index: 50;
    width: 23rem; max-width: 92vw;
    max-height: min(22rem, 55vh); overflow: auto;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    font-family: var(--font-ui);
}
.rdp-head {
    display: flex; align-items: center; gap: .3rem;
    padding: .35rem .5rem; border-bottom: var(--border-w) solid var(--line);
    position: sticky; top: 0; background: var(--surface);
}
.rdp-src { flex: 1; text-align: center; font-size: .74rem; color: var(--ink-soft); }
.rdp-nav, .rdp-close {
    border: none; background: transparent; cursor: pointer;
    color: var(--ink-soft); font-size: 1.1rem; line-height: 1; padding: 0 .3rem;
}
.rdp-nav:hover:not(:disabled), .rdp-close:hover { color: var(--accent); }
.rdp-nav:disabled { opacity: .3; cursor: default; }
.rdp-body { padding: .5rem .7rem; font-family: var(--font-body); font-size: .95rem; }
.rdp-body > :first-child { margin-top: 0; }
.rdp-body > :last-child { margin-bottom: 0; }
.rdp-empty { color: var(--ink-soft); font-style: italic; }
/* Cross-reference to another headword (click -> look it up). */
.dict-xref { color: var(--accent); cursor: pointer; text-decoration: none;
    border-bottom: 1px dotted currentColor; }
.dict-xref:hover { filter: brightness(1.15); }
.rdp-foot {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .7rem; border-top: var(--border-w) solid var(--line); font-size: .8rem;
}
.rdp-wiki-label { color: var(--ink-soft); }
.rdp-wiki {
    color: var(--accent); text-decoration: none; font-weight: 600;
    padding: .05rem .4rem; border: var(--border-w) solid var(--line); border-radius: 4px;
}
.rdp-wiki:hover { border-color: var(--accent); }

.reader-frame {
    position: relative;
    display: flex;
    height: calc(100vh - 12rem);
    min-height: 24rem;
    /* Book pages assume paper: keep the stage light even in dark themes. */
    background: #fdfdfa;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
#reader-view { flex: 1; height: 100%; min-width: 0; }
.reader-nav {
    width: 2.4rem;
    border: none;
    background: transparent;
    font-size: 1.8rem;
    color: #999;
    cursor: pointer;
    flex: 0 0 auto;
}
.reader-nav:hover { color: var(--accent); background: rgba(0,0,0,.04); }
.quote .read-in-book { text-decoration: none; }
.calibre-unlink { display: inline; }

/* ---------- Markdown toolbar (textarea[data-md]) ---------- */
.md-wrap { display: flex; flex-direction: column; }
.md-toolbar {
    display: flex; align-items: center; gap: .15rem; flex-wrap: wrap;
    margin-bottom: .35rem; font-family: var(--font-ui);
}
.md-btn {
    border: var(--border-w) solid var(--line); background: var(--bg);
    color: var(--ink-soft); cursor: pointer; border-radius: var(--radius);
    font-size: .82rem; line-height: 1; min-width: 1.8rem; height: 1.8rem;
    padding: 0 .4rem; display: inline-flex; align-items: center; justify-content: center;
}
.md-btn:hover { border-color: var(--accent); color: var(--accent); }
.md-btn.md-i { font-style: italic; font-family: Georgia, serif; }
.md-heading {
    width: auto; min-width: 0; padding: 0 .3rem;
    font-family: var(--font-ui); appearance: auto;
}
.md-spacer { flex: 1 1 auto; }
.md-preview-toggle { font-size: .74rem; padding: 0 .6rem; height: 1.8rem; }
.md-preview-toggle.active { border-color: var(--accent); color: var(--accent); }
.md-preview {
    display: none; min-height: 4rem; padding: .5rem .7rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--bg);
}
.md-preview.on { display: block; }
.md-preview > :first-child { margin-top: 0; }
.md-preview > :last-child { margin-bottom: 0; }
.md-preview-loading, .md-preview-empty { color: var(--ink-soft); font-style: italic; }

/* ---------- grouped search results ---------- */
.result-group { margin: 0 0 1rem; }
.result-group > summary {
    cursor: pointer; list-style: none; display: flex; align-items: baseline;
    gap: .6rem; padding: .5rem 0; border-bottom: var(--border-w) solid var(--line);
}
.result-group > summary::-webkit-details-marker { display: none; }
.result-group > summary::before {
    content: "▾"; color: var(--ink-soft); font-size: .8rem; transition: transform .15s;
}
.result-group:not([open]) > summary::before { transform: rotate(-90deg); display: inline-block; }
.rg-title { font-family: var(--font-display); font-size: 1.05rem; }
.rg-author { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); }
.rg-count {
    margin-left: auto; font-family: var(--font-ui); font-size: .72rem;
    color: var(--ink-soft); background: var(--surface-2);
    border-radius: 999px; padding: .05rem .5rem; min-width: 1.3rem; text-align: center;
}
.result-group[open] > summary { margin-bottom: .6rem; }

/* Keyword index page */
.tag-cloud { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    padding: .35rem .55rem .35rem .85rem;
    font-family: var(--font-ui);
    font-size: .9rem;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow);
}
.tag-chip::before { content: "#"; color: var(--accent); opacity: .7; margin-right: -.2rem; }
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip .n {
    font-size: .72rem;
    color: var(--ink-soft);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .05rem .45rem;
    min-width: 1.2rem;
    text-align: center;
}
.tag-h { font-family: var(--font-display); }
.tag-h::before { content: "#"; color: var(--accent); opacity: .6; }

/* ---------- tag filter (search page) ---------- */
.tag-filter { margin: .4rem 0 1.6rem; }
.tag-filter-label {
    display: block; font-family: var(--font-ui); font-size: .8rem;
    color: var(--ink-soft); margin-bottom: .55rem;
}
.tag-filter-clear { color: var(--accent); text-decoration: none; margin-left: .4rem; }
.tag-filter-clear:hover { text-decoration: underline; }
.tag-filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface); border: var(--border-w) solid var(--line);
    border-radius: 999px; padding: .3rem .5rem .3rem .8rem;
    font-family: var(--font-ui); font-size: .86rem; color: var(--ink);
    text-decoration: none;
}
.filter-chip::before { content: "#"; color: var(--accent); opacity: .7; margin-right: -.2rem; }
.filter-chip:hover { border-color: var(--accent); }
.filter-chip.on {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.filter-chip.on::before { color: #fff; opacity: .85; }
.filter-count {
    font-size: .7rem; color: var(--ink-soft); background: var(--surface-2);
    border-radius: 999px; padding: .05rem .4rem; min-width: 1.1rem; text-align: center;
}
.filter-chip.on .filter-count { color: #fff; background: rgba(255, 255, 255, .25); }

/* ---------- links / note references ---------- */
.links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .55rem;
    margin-top: .85rem;
    padding-top: .7rem;
    border-top: var(--border-w) solid var(--line);
    font-family: var(--font-ui);
    font-size: .78rem;
}
.links-label {
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .66rem;
}
.link-item {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    /* Cap at 22rem on wide screens, but never exceed the card; min-width:0 lets
       the flex item shrink so the label's ellipsis engages instead of the chip
       (and its × button) spilling out -- visible in the narrow reader panel. */
    max-width: min(22rem, 100%);
    min-width: 0;
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-left: 2px solid var(--accent-soft);
    border-radius: 6px;
    padding: .12rem .25rem .12rem .55rem;
}
.link-item > a {
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}
.link-item > a:hover { color: var(--accent); }
.link-item form { display: inline-flex; margin: 0; }
.link-item form button {
    border: none;
    background: none;
    color: var(--ink-soft);
    padding: 0 .2rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.link-item form button:hover { color: #fff; background: var(--accent); }
.link-add {
    color: var(--accent);
    text-decoration: none;
    border: var(--border-w) dashed var(--line);
    border-radius: 6px;
    padding: .12rem .55rem;
}
.link-add:hover { border-style: solid; border-color: var(--accent); }

/* picker page */
.quote.source { border-left-width: 3px; background: var(--surface-2); }
.picker-search { max-width: none; margin: 1.4rem 0 .4rem; }

/* type-filter chips above the picker results (No-JS: each is a GET link) */
.picker-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .8rem; }
.picker-chip {
    font-family: var(--font-ui); font-size: .78rem;
    border: var(--border-w) solid var(--line); border-radius: 999px;
    padding: .14rem .7rem; color: var(--ink-soft); text-decoration: none;
}
.picker-chip:hover { border-color: var(--accent); color: var(--accent); }
.picker-chip.is-active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.link-do { display: inline-flex; margin: 0; }
.btn-link {
    font-family: var(--font-ui);
    font-size: .76rem;
    border: var(--border-w) solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: .18rem .7rem;
    cursor: pointer;
}
.btn-link:hover { filter: brightness(1.07); color: #fff; }
.linked-badge {
    font-size: .74rem;
    color: var(--ink-soft);
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
    padding: .12rem .6rem;
}

/* Link-picker results: the entire card is the connect action. Selecting a result
   links it (and stays in the picker) instead of navigating into it -- the old
   book-title link bounced you out of the Hauptkasten. */
.picker-result { position: relative; padding: 0; overflow: hidden; }
.picker-result.is-linked { padding: .9rem 1.1rem; }
.picker-pick {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    padding: .9rem 1.1rem; font: inherit; color: inherit;
    transition: background .12s ease;
}
.picker-pick:hover, .picker-pick:focus-visible { background: var(--surface); }
.picker-result .text { display: block; margin: 0; }
.picker-result .note { display: block; margin: .3rem 0 0; }
.picker-cite {
    display: block; margin-top: .45rem;
    font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft);
}
.picker-add {
    display: inline-block; margin-top: .55rem;
    font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--accent);
}
.picker-pick:hover .picker-add { text-decoration: underline; }
.picker-result .linked-badge { position: absolute; top: .9rem; right: 1.1rem; }

/* link target chips coloured by node kind */
.link-target {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    min-width: 0;        /* allow the label (lt-label) to ellipsis within the chip */
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    font-style: normal;
}
.link-target .lt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-target .lt-icon { opacity: .65; font-size: .85em; }
.link-target:hover { color: var(--accent); }
.link-item.kind-highlight { border-left-color: var(--accent-soft); }
.link-item.kind-zettel { border-left-color: #6aa9c9; }
.link-item.kind-book { border-left-color: #b08968; }
.link-overview { color: var(--ink-soft); text-decoration: none; font-size: .74rem; }
.link-overview:hover { color: var(--accent); }

/* ---------- node meta block (book page) ---------- */
.node-meta { margin: .4rem 0 1.8rem; display: flex; flex-direction: column; gap: .5rem; }
.book-meta {
    /* Lighter than a filled panel: the book-level action chips just float,
       set off by spacing and a faint hairline, so they integrate quietly
       under the stats instead of forming a heavy box. */
    padding: .2rem 0 0;
    border-top: var(--border-w) solid var(--line);
}

/* node-bars — the chip action bars (tags/links/colls/shares) laid out side by
   side in one wrapping row so they don't each eat a full line. The annobar
   stays a separate block below (it carries rendered note content, not chips). */
.node-bars {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1.6rem;
    margin-top: .85rem;
    padding-top: .7rem;
    border-top: var(--border-w) solid var(--line);
}
.node-bars > .tags, .node-bars > .links, .node-bars > .colls, .node-bars > .shares {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    /* As flex items they default to min-width:auto and won't shrink below their
       content -- a long link chip then pushes the whole bar past the card. 0
       lets them shrink/wrap so the chip's own max-width + ellipsis can do their
       job. */
    min-width: 0;
}
/* inside the book-meta panel the wrapper needs no extra separator */
.book-meta .node-bars { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- own zettel ---------- */
.zettel-card { border-left-color: #6aa9c9; }
.zettel-card .text { font-family: var(--font-ui); font-size: 1.02rem; line-height: 1.5; }
.zettel-card .text::before { content: none; }
.book-card { border-left-color: #b08968; }
.book-card .text { font-family: var(--font-display); }
.book-card .text::before { content: none; }
/* Dossierkarte: eigene Farbe, damit eine Mappe am Zettel sofort als Mappe
   liest und nicht als einzelner Artikel. Inhaltsverzeichnis wie beim Reader. */
.dossier-card { border-left-color: #8f7bbf; }
.dossier-card .text { font-family: var(--font-display); font-weight: 600; }
.dossier-card .text::before { content: none; }
.dossier-card .rdr-toc { margin: .4rem 0; }
.dossier-card .rdr-toc summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.quote.focal { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }

/* Rendered Markdown (zettel bodies, book remarks, collection descriptions). */
.prose {
    font-size: 1.12rem;
    line-height: 1.7;
    margin: .4rem 0 1.5rem;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 .8rem; }
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 1.3rem 0 .5rem;
}
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.3rem; }
.prose h3 { font-size: 1.1rem; }
.prose ul, .prose ol { margin: 0 0 .8rem; padding-left: 1.5rem; }
.prose li { margin: .2rem 0; }
.prose blockquote {
    margin: .8rem 0;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--accent-soft);
    color: var(--ink-soft);
    font-style: italic;
}
.prose a { color: var(--accent); }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose figure { margin: 1.2rem 0; text-align: center; }
.prose figcaption {
    margin-top: .4rem; font-family: var(--font-ui); font-size: .82rem;
    color: var(--ink-soft); line-height: 1.4;
}
.prose hr { border: none; border-top: var(--border-w) solid var(--line); margin: 1.3rem 0; }
.prose table {
    border-collapse: collapse;
    margin: .8rem 0;
    font-size: .92em;
    width: auto;
    max-width: 100%;
}
.prose th, .prose td {
    border: var(--border-w) solid var(--line);
    padding: .3rem .6rem;
    text-align: left;
}
.prose th { background: var(--surface-2); font-weight: 600; }
.prose code, .prose pre {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.prose code {
    font-size: .9em;
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: 4px;
    padding: .05em .35em;
}
.prose pre {
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    overflow-x: auto;
    margin: 0 0 .8rem;
}
.prose pre code { background: none; border: none; padding: 0; font-size: .88em; }

.conns-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.9rem 0 .9rem;
    border-top: var(--border-w) solid var(--line);
    padding-top: 1.2rem;
}
.conns-head h2 { margin: 0; }
.conn { margin-bottom: 1.2rem; }
.conn .quote { margin-bottom: .35rem; }
/* a connected node's OWN other links, so the hub stays navigable */
.conn-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .35rem .4rem;
    padding-left: .8rem;
    border-left: var(--border-w) solid var(--line);
}
.conn-links-label { font-family: var(--font-ui); font-size: .72rem; color: var(--ink-soft); }
/* "why connected?" reasoned cross-reference: a quiet inline note editor. */
.conn-note { display: flex; gap: .3rem; align-items: center; margin: .35rem 0 .35rem .4rem; }
.conn-note input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .25rem .5rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: .78rem;
    font-style: italic;
}
.conn-note input:focus { outline: none; border-color: var(--accent); }
.conn-note input::placeholder { color: var(--ink-soft); font-style: italic; }
.conn-note button {
    flex: 0 0 auto;
    border: var(--border-w) solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    border-radius: var(--radius);
    padding: .2rem .55rem;
    cursor: pointer;
    line-height: 1;
}
.conn-note button:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.conn-unlink { text-align: right; margin: 0; }
.conn-unlink button {
    font-size: .72rem;
    color: var(--ink-soft);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.conn-unlink button:hover { color: #b3402f; }

/* collbar — collections a node belongs to (sibling of .tags/.links) */
.colls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
}
.colls-label { font-family: var(--font-ui); font-size: .72rem; color: var(--ink-soft); }
.coll-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .1rem .25rem .1rem .55rem;
    font-family: var(--font-ui);
    font-size: .76rem;
}
.coll-chip > a { color: var(--accent); text-decoration: none; }
.coll-chip > a::before { content: "▦ "; opacity: .5; }
.coll-chip form { display: inline-flex; margin: 0; }
.coll-chip form button {
    border: none; background: none; color: var(--ink-soft);
    padding: 0 .25rem; margin: 0; font-size: .9rem; line-height: 1;
    cursor: pointer; border-radius: 999px;
}
.coll-chip form button:hover { color: #fff; background: var(--accent); }
.coll-add {
    font-family: var(--font-ui); font-size: .74rem;
    color: var(--ink-soft); text-decoration: none;
    border: var(--border-w) dashed var(--line);
    border-radius: 999px; padding: .12rem .55rem;
}
.coll-add:hover { color: var(--accent); border-color: var(--accent); }

/* collection thread (ordered Folgezettel sequence) */
.thread { list-style: none; counter-reset: none; padding: 0; margin: 1.4rem 0 0; }
.thread-item { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.thread-rank {
    flex: 0 0 auto;
    min-width: 1.9rem; height: 1.9rem;
    display: flex; align-items: center; justify-content: center;
    margin-top: .3rem;
    font-family: var(--font-display); font-size: .95rem;
    color: var(--accent);
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: 999px;
}
.thread-body { flex: 1 1 auto; min-width: 0; }
.thread-body .quote { margin-bottom: .3rem; }

/* A node's own context under its card in the collection thread (read-only). */
.node-desc { margin: -.1rem 0 .5rem; color: var(--ink-soft); font-size: .92rem; }
.thread-body .node-ctx { margin: -.1rem 0 .5rem; }

/* Per-entry note in a collection ("why is this here"). */
.item-note { margin: .35rem 0 .2rem; }
.item-note-view {
    font-size: .92rem;
    padding: .35rem .6rem;
    border-left: 3px solid var(--accent-soft);
    background: var(--surface-2);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: .35rem;
}
.item-note-edit > summary {
    display: inline-block; cursor: pointer; list-style: none;
    font-family: var(--font-ui); font-size: .74rem; color: var(--accent);
}
.item-note-edit > summary::-webkit-details-marker { display: none; }
.item-note-edit > summary:hover { text-decoration: underline; }
.item-note-edit form {
    display: flex; flex-direction: column; gap: .45rem;
    align-items: flex-start; margin-top: .5rem; max-width: 40rem;
}
.item-note-edit textarea {
    width: 100%; padding: .5rem .7rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: .98rem; line-height: 1.5; resize: vertical;
}
.item-note-edit textarea:focus { outline: none; border-color: var(--accent); }
.thread-controls { display: flex; align-items: center; gap: .4rem; }
.thread-controls form { margin: 0; }
.thread-controls button {
    font-family: var(--font-ui); font-size: .8rem;
    color: var(--ink-soft);
    border: var(--border-w) solid var(--line);
    background: var(--surface);
    border-radius: 8px; padding: .1rem .5rem; cursor: pointer;
}
.thread-controls button:hover:not([disabled]) { color: var(--accent); border-color: var(--accent); }
.thread-controls button[disabled] { opacity: .35; cursor: default; }
.thread-remove { margin-left: auto; }
.thread-remove:hover:not([disabled]) { color: #b3402f !important; border-color: #b3402f !important; }

/* collect picker */
.collect-source { margin: 1rem 0 1.6rem; }

/* a shared zettel shown in full on the discussion view */
.shared-zettel {
    margin: 1rem 0 1.6rem;
    padding: 1rem 1.2rem;
    background: var(--surface-2);
    border-left: 2px solid #6aa9c9;
    border-radius: var(--radius);
}
.shared-zettel-title { margin: 0 0 .5rem; font-size: 1.15rem; }
.collect-new { max-width: 36rem; margin-bottom: 1.8rem; }
.collect-list { list-style: none; padding: 0; margin: .6rem 0 0; }
.collect-list li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .6rem 0; border-bottom: var(--border-w) solid var(--line);
}

.zettel-form, .hk-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 42rem; }
.zettel-form .field, .hk-form .field { display: flex; flex-direction: column; gap: .35rem; }
.zettel-form .field > span, .hk-form .field > span {
    font-family: var(--font-ui);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
}
.zettel-form input, .zettel-form textarea,
.hk-form input, .hk-form textarea {
    width: 100%;
    padding: .6rem .85rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.05rem;
}
.zettel-form textarea, .hk-form textarea { resize: vertical; line-height: 1.65; }
.zettel-form input:focus, .zettel-form textarea:focus,
.hk-form input:focus, .hk-form textarea:focus { outline: none; border-color: var(--accent); }
.form-actions { display: flex; align-items: center; gap: 1.2rem; }
.btn-save {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .6rem 1.4rem;
    font-family: var(--font-ui);
    font-size: .95rem;
    cursor: pointer;
}
.btn-save:hover { filter: brightness(1.07); color: #fff; }
.inline-del { display: inline; }

/* Toast UI editor: the editable area (ProseMirror) only spans its own content,
   so inside the editor's min-height box everything below the first line is a
   dead zone where a click doesn't focus -- you had to use the toolbar first.
   Give the editable a min-height so the whole box is clickable to write. */
.toastui-editor-ww-container .ProseMirror,
.toastui-editor-md-container .ProseMirror { min-height: 280px; }

/* Editor zoom: a per-writer comfort control (A− / A+ above the editor) that
   scales only the writing surface, its preview and the markdown source -- not
   the page or toolbar. Driven by --tui-zoom on the holder, set from JS and
   remembered in localStorage, so a size chosen once holds everywhere. */
.tui-holder { --tui-zoom: 1; }
.tui-holder .toastui-editor-contents { font-size: calc(16px * var(--tui-zoom)); }
.tui-holder .toastui-editor-md-container .ProseMirror {
    font-size: calc(15px * var(--tui-zoom));
    line-height: 1.6;
}
.tui-zoom {
    display: inline-flex; align-items: center; gap: .25rem;
    margin: 0 0 .55rem; padding: .12rem .25rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-ui);
}
.tui-zoom button {
    min-width: 2rem; padding: .2rem .45rem;
    border: none; background: none; cursor: pointer;
    color: var(--ink); font-family: var(--font-ui); font-size: .95rem;
    line-height: 1; border-radius: calc(var(--radius) - 4px);
}
.tui-zoom button:hover { background: var(--accent-soft); color: var(--accent); }
.tui-zoom-val {
    min-width: 3.4rem; text-align: center;
    font-size: .78rem; color: var(--ink-soft);
}

/* Long-form note pages (Zettel / Gedanke bearbeiten) break out of the reading
   measure so the editor's split preview gets HedgeDoc-like room. The narrative
   bits around it stay at a comfortable width; only the form + editor go wide. */
main.editor-wide { --maxw: 74rem; }
main.editor-wide .zettel-form, main.editor-wide .hk-form { max-width: none; }
main.editor-wide .zettel-form input[type="text"],
main.editor-wide .hk-form input[type="text"] { max-width: 44rem; }
main.editor-wide .hk-head, main.editor-wide .hk-lede,
main.editor-wide .hk-source, main.editor-wide .hk-vorher { max-width: 44rem; }

/* Autosave status: a quiet pill at the end of the action row that turns the
   Save click from a lifeline into a convenience. */
.tui-status {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: color .2s ease;
}
.tui-status.is-saved { color: var(--accent); }
.tui-status.is-error { color: #c0392b; }

/* Recovery banner: a lost draft found in localStorage, offered back. */
.tui-recover {
    display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
    margin: 0 0 .9rem; padding: .6rem .9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
    font-size: .9rem;
}
.tui-recover-msg { margin-right: auto; }
.tui-recover button {
    font-family: var(--font-ui); font-size: .85rem;
    padding: .35rem .85rem; border-radius: var(--radius); cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.tui-recover-yes { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tui-recover button:hover { filter: brightness(1.05); }

/* ---------- manual create: book + quote ---------- */
.book-create { margin: 0 0 1.2rem; }
.book-create > summary, .quote-add > summary {
    display: inline-block;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--accent);
    list-style: none;
}
.book-create > summary::-webkit-details-marker,
.quote-add > summary::-webkit-details-marker { display: none; }
.book-create > summary:hover, .quote-add > summary:hover { text-decoration: underline; }
.book-create form, .quote-add form {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: flex-start;
    margin-top: .7rem;
    max-width: 42rem;
}
.book-create label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
    font-family: var(--font-ui);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
}
.book-create input, .quote-add input, .quote-add textarea {
    padding: .55rem .8rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
}
.book-create input { text-transform: none; letter-spacing: normal; }
.quote-add { margin: 0 0 1.6rem; }
.quote-add textarea { width: 100%; line-height: 1.55; resize: vertical; }
.quote-add-row { display: flex; gap: .55rem; width: 100%; flex-wrap: wrap; }
.quote-add-row input[name="note"] { flex: 1 1 14rem; }
.quote-add-page { flex: 0 0 6rem; }
.book-create input:focus, .quote-add input:focus, .quote-add textarea:focus {
    outline: none; border-color: var(--accent);
}

/* ---------- per-book remarks ---------- */
.remarks { margin: 0 0 1.9rem; }
.remarks-label {
    display: block;
    font-family: var(--font-ui);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    margin-bottom: .4rem;
}
.remarks-view { margin: 0 0 .5rem; }
.remarks-edit summary {
    display: inline-block;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--accent);
    list-style: none;
}
.remarks-edit summary::-webkit-details-marker { display: none; }
.remarks-edit summary:hover { text-decoration: underline; }
.remarks-edit form {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: flex-start;
    margin-top: .6rem;
}
.remarks-edit textarea {
    width: 100%;
    padding: .6rem .85rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
}
.remarks-edit textarea:focus { outline: none; border-color: var(--accent); }

/* ---------- in-page confirmation dialog (confirm.js) ---------- */
dialog.confirm-dialog {
    max-width: 26rem;
    margin: auto;
    padding: 1.2rem 1.4rem;
    background: var(--surface);
    color: var(--ink);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: var(--font-body);
}
dialog.confirm-dialog[open] { animation: confirm-pop .16s ease both; }
@keyframes confirm-pop {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
dialog.confirm-dialog::backdrop {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    animation: confirm-fade .16s ease both;
}
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
.confirm-msg { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.confirm-actions .confirm-yes {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.confirm-actions .confirm-yes:hover { filter: brightness(1.07); color: #fff; }

/* ---------- Auswahlmodus: bulk hide (select.js) ---------- */
.select-toggle[hidden] { display: none; }
.select-box {
    position: absolute;
    top: .55rem;
    right: .6rem;
    z-index: 3;
    margin: 0;
    display: inline-flex;
    cursor: pointer;
}
.select-box input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
body.selecting .quote { cursor: pointer; }
.quote.selected { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.select-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    width: fit-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .55rem .9rem;
    background: var(--surface);
    color: var(--ink);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 40;
    font-family: var(--font-ui);
    font-size: .85rem;
    animation: rise .25s ease both;
}
.select-bar[hidden] { display: none; }
.select-bar .select-count { min-width: 7rem; }
.select-bar .select-go[disabled] { opacity: .45; cursor: default; }
.select-bar .select-korb[disabled] { opacity: .45; cursor: default; }
[data-theme^="archiv"] .select-bar { border-top: 2px solid var(--accent); border-radius: 0; }

/* ---------- Sammelkorb (working tray) ---------- */
/* The per-quote gather button in a card footer: a quiet chip that fills in once
   the quote is in the tray. */
.korb-form { display: inline-flex; margin: 0; }
.korb-btn {
    font: inherit; font-size: .76rem;
    color: var(--accent);
    background: none;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .15rem .55rem;
    cursor: pointer;
    white-space: nowrap;
}
.korb-btn:hover { border-color: var(--accent); }
.korb-btn.is-in {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Nav badge: dim when the tray is empty so it isn't a loud "0". */
.nav-korb { position: relative; }
.nav-korb-badge.is-empty {
    background: transparent;
    color: var(--ink-soft);
    font-weight: 400;
}

/* The tray page: the "put onto a note" panel sits above the quote list. */
.korb-kip {
    margin: 1rem 0 1.6rem;
    padding: 1rem 1.1rem;
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}
.korb-kip h2 { margin: 0 0 .8rem; font-size: 1rem; }
.korb-new { display: flex; gap: .6rem; flex-wrap: wrap; }
.korb-new input[type="text"] {
    flex: 1 1 16rem; min-width: 0;
    padding: .5rem .7rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); font: inherit;
}
.korb-or {
    text-align: center; color: var(--ink-soft);
    font-size: .8rem; margin: 1rem 0 .8rem;
}
.korb-kip .picker-search { margin: 0 0 .8rem; }
.korb-targets { display: flex; flex-direction: column; gap: .4rem; }
.korb-target { margin: 0; }
.korb-target button {
    width: 100%;
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .5rem .7rem;
    background: var(--surface); color: var(--ink);
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    cursor: pointer; font: inherit; text-align: left;
}
.korb-target button:hover { border-color: var(--accent); }
.korb-target-title { font-weight: 600; }
.korb-target-add { color: var(--accent); font-size: .78rem; white-space: nowrap; }
.korb-items-head { font-size: 1rem; margin: 0 0 .6rem; color: var(--ink-soft); }

/* ---------- footer (live version, for deploy-visibility) ---------- */
.site-footer {
    max-width: var(--maxw);
    margin: 1rem auto 0;
    padding: 1.4rem clamp(1rem, 4vw, 1.5rem) 2.4rem;
    border-top: var(--border-w) solid var(--line);
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--ink-soft);
    text-align: center;
}
.site-footer .foot-date { opacity: .7; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer .foot-branch {
    font-family: var(--font-mono, ui-monospace, monospace);
    padding: .05rem .35rem;
    border: var(--border-w) solid var(--line);
    border-radius: 4px;
    opacity: .85;
}

/* ---------- annotations (own notes overlaid on a node) ---------- */
.annos { margin-top: .6rem; }
.anno {
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: .5rem .8rem;
    margin-bottom: .5rem;
}
.anno-body { font-size: .98rem; line-height: 1.55; }
.anno-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    margin-top: .4rem;
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--ink-soft);
}
.anno-when { margin-right: auto; }
.anno-edit summary, .anno-add summary {
    cursor: pointer;
    color: var(--accent);
    list-style: none;
    display: inline-block;
    font-family: var(--font-ui);
    font-size: .76rem;
}
.anno-edit summary::-webkit-details-marker,
.anno-add summary::-webkit-details-marker { display: none; }
.anno-edit summary:hover, .anno-add summary:hover { text-decoration: underline; }
.anno-del { display: inline; margin: 0; }
.anno-del button {
    border: none; background: none; cursor: pointer;
    color: var(--ink-soft); font-family: var(--font-ui); font-size: .72rem; padding: 0;
}
.anno-del button:hover { color: #b3402f; }
.anno-add { display: block; margin-top: .3rem; }
.annos textarea {
    width: 100%;
    margin-top: .4rem;
    padding: .5rem .7rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .96rem;
    line-height: 1.5;
    resize: vertical;
}
.annos textarea:focus { outline: none; border-color: var(--accent); }
.anno-actions { margin-top: .4rem; }

/* ---------- edit / override a quote's text (overlay) ---------- */
.edit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .8rem;
    margin-top: .55rem;
    font-family: var(--font-ui);
    font-size: .76rem;
}
.edit-mark { color: var(--ink-soft); }
.edit-diff { color: var(--ink-soft); text-decoration: none; }
.edit-diff:hover { color: var(--accent); }
.edit-reset, .edit-edit, .edit-hide { margin: 0; }
.edit-reset button, .edit-edit > summary, .edit-hide button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-soft);
    font: inherit;
}
.edit-edit > summary { list-style: none; }
.edit-edit > summary::-webkit-details-marker { display: none; }
.edit-edit > summary::before { content: "✎ "; }
.edit-hide button::before { content: "🛇 "; }
.edit-reset button:hover, .edit-edit > summary:hover { color: var(--accent); }
.edit-hide button:hover { color: var(--warn, #cf6a4f); }
.edit-edit textarea {
    width: 100%;
    margin-top: .4rem;
    padding: .5rem .65rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .96rem;
    line-height: 1.5;
    resize: vertical;
}
.edit-edit textarea:focus { outline: none; border-color: var(--accent); }
.edit-hint { margin: .35rem 0 0; color: var(--ink-soft); font-size: .72rem; }
.edit-actions { margin-top: .4rem; }
/* "bearbeitet" marker inside a quote_card footer */
.quote footer .edited { color: var(--ink-soft); font-style: italic; }

/* ---------- edit diff view ---------- */
.diff { margin: 1rem 0 1.6rem; }
.diff-text {
    padding: 1rem 1.2rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    line-height: 1.7;
    font-size: 1.05rem;
}
.diff-text ins {
    text-decoration: none;
    background: rgba(120, 190, 130, .22);
    color: var(--ink);
    border-radius: 3px;
    padding: 0 .12em;
}
.diff-text del {
    background: rgba(207, 106, 79, .22);
    color: var(--ink-soft);
    border-radius: 3px;
    padding: 0 .12em;
}
.diff-versions { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.diff-versions h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.quote.original { opacity: .85; }
@media (max-width: 640px) { .diff-versions { grid-template-columns: 1fr; } }

/* ---------- hidden / restore (ausblenden) ---------- */
.hidden-link { margin-top: 2rem; font-family: var(--font-ui); font-size: .82rem; }
.hidden-link a { color: var(--ink-soft); text-decoration: none; }
.hidden-link a:hover { color: var(--accent); }
.hidden-quote { opacity: .75; }
.unhide { margin-top: .6rem; }

/* ---------- sharing + discussion ---------- */
.shares {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
}
.shares-label { font-family: var(--font-ui); font-size: .72rem; color: var(--ink-soft); }
.share-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .1rem .25rem .1rem .55rem;
    font-family: var(--font-ui);
    font-size: .76rem;
}
.share-chip.reads { opacity: .8; }
.share-chip form { display: inline-flex; margin: 0; }
.share-chip form button {
    border: none; background: none; color: var(--ink-soft);
    padding: 0 .2rem; margin: 0; font-size: .9rem; line-height: 1; cursor: pointer; border-radius: 999px;
}
.share-chip form button:hover { color: #fff; background: var(--accent); }
.share-add, .share-discuss {
    font-family: var(--font-ui); font-size: .74rem;
    color: var(--ink-soft); text-decoration: none;
    border: var(--border-w) dashed var(--line);
    border-radius: 999px; padding: .12rem .55rem;
}
.share-add:hover, .share-discuss:hover { color: var(--accent); border-color: var(--accent); }
.share-discuss { border-style: solid; }

.share-do { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
.share-cancomment { font-family: var(--font-ui); font-size: .76rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .3rem; }
.share-pick { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.share-perms { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .6rem; }

/* Recipient actions under a shared quote: open in book / adopt it. */
.shared-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    margin: 0 0 1.4rem;
}
.shared-actions .adopt-form { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
/* Read-only tags / annotations shown when the owner shared them. */
.shared-ro { margin: -.4rem 0 1rem; }
.shared-ro.tags .tag { padding: .12rem .55rem; }

/* shared discussion view */
.shared-item { margin-bottom: 1.8rem; }
.shared-from { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.comments { margin-top: .8rem; }
.comment {
    background: var(--surface-2);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: .6rem .85rem;
    margin-bottom: .7rem;
}
.comment-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .25rem; }
.comment-author { font-family: var(--font-ui); font-weight: 600; font-size: .82rem; color: var(--accent); }
.comment-when { font-family: var(--font-ui); font-size: .7rem; color: var(--ink-soft); }
.comment-edited { font-family: var(--font-ui); font-size: .68rem; color: var(--ink-soft); font-style: italic; margin-left: auto; }
.comment-body { font-size: .98rem; line-height: 1.55; }
.comment-foot { display: flex; gap: .9rem; align-items: center; margin-top: .35rem; }
.comment-edit summary {
    cursor: pointer; color: var(--accent); list-style: none; display: inline-block;
    font-family: var(--font-ui); font-size: .74rem;
}
.comment-edit summary::-webkit-details-marker { display: none; }
.comment-edit summary:hover { text-decoration: underline; }
.comments textarea {
    width: 100%; margin-top: .4rem; padding: .5rem .7rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
    font-family: var(--font-body); font-size: .96rem; line-height: 1.5; resize: vertical;
}
.comments textarea:focus { outline: none; border-color: var(--accent); }
.comment-add { margin-top: 1rem; }

/* threaded replies: nested under their parent with a guide rail */
.comment-reply summary, .comment-replies summary {
    cursor: pointer; color: var(--accent); list-style: none; display: inline-block;
    font-family: var(--font-ui); font-size: .74rem;
}
.comment-reply summary::-webkit-details-marker,
.comment-replies summary::-webkit-details-marker { display: none; }
.comment-reply summary:hover, .comment-replies summary:hover { text-decoration: underline; }
.comment-replies {
    margin-top: .6rem;
    margin-left: .9rem;
    padding-left: .9rem;
    border-left: 2px solid var(--thread-rail, var(--line));
}
.comment-replies[data-depth="0"] { --thread-rail: var(--accent); }
.comment-replies[data-depth="1"] { --thread-rail: #6aa9c9; }
.comment-replies[data-depth="2"] { --thread-rail: #b08968; }
.comment-replies[data-depth="3"] { --thread-rail: #7dab7d; }
.comment-replies > summary { color: var(--ink-soft); margin-bottom: .5rem; }
.comment-replies .comment { margin-bottom: .55rem; }
/* a deleted comment kept as a tombstone so its replies still read */
.comment-deleted {
    margin: 0; font-family: var(--font-ui); font-size: .82rem;
    color: var(--ink-soft); font-style: italic;
}
.comment-tomb { background: transparent; border-style: dashed; }

/* ============================================================
   Zettelkasten theme — structural index-card / slip-box touches
   (palette + fonts are in the [data-theme="kasten"] var block up top).
   ============================================================ */

/* Typewriter headings: tighten the mono display a touch, drop the editorial
   negative tracking that only suits Fraunces. */
[data-theme="kasten"] h1 { letter-spacing: -.01em; font-weight: 600; }
[data-theme="kasten"] .brand { letter-spacing: 0; font-size: 1.25rem; }

/* Cards look like index cards: square corners, a thin full rule, and a colored
   top edge (the card's tab) instead of the editorial left bar. */
[data-theme="kasten"] .quote {
    border: var(--border-w) solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: 0 0 var(--radius) var(--radius);
}
[data-theme="kasten"] .quote.focal { border-top-width: 3px; }

/* The hanging quote mark inherits the mono display font -> a typewriter ".
   Calm it down so it reads as a mark, not a glyph. */
[data-theme="kasten"] .quote .text::before {
    font-size: 1.5rem;
    vertical-align: -.18em;
    margin-right: .25rem;
    opacity: .8;
}
[data-theme="kasten"] .quote .text { line-height: 1.66; }

/* Footer / meta reads like a stamped signature line: faint, spaced mono. */
[data-theme="kasten"] .quote footer {
    border-top: var(--border-w) dotted var(--line);
    padding-top: .6rem;
    letter-spacing: .02em;
}
[data-theme="kasten"] .meta,
[data-theme="kasten"] .exports,
[data-theme="kasten"] .sortbar { letter-spacing: .02em; }

/* Collection thread numbers become typed "signatures": square, ribbon red. */
[data-theme="kasten"] .thread-rank {
    border-radius: 2px;
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* Chips (tags, links, collections) go square to match the card stock. */
[data-theme="kasten"] .tag,
[data-theme="kasten"] .coll-chip,
[data-theme="kasten"] .link-target,
[data-theme="kasten"] .device,
[data-theme="kasten"] .exports a,
[data-theme="kasten"] .sortbar a { border-radius: 2px; }
[data-theme="kasten"] .tag,
[data-theme="kasten"] .coll-add,
[data-theme="kasten"] .tag-add input { border-radius: 2px; }

/* ============================================================
   Archiv themes — typed index cards in a card catalogue.
   Shared structure for [data-theme="archiv"] (Manila by day) and
   [data-theme="archiv-nacht"] (lamplight, default). The palette +
   texture ingredient vars live in the blocks up top.
   ============================================================ */

/* The desk: a faint woven crosshatch over the background. */
[data-theme^="archiv"] body {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, var(--fiber-y) 2px, var(--fiber-y) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, var(--fiber-x) 2px, var(--fiber-x) 4px);
}

/* Typewriter display: Special Elite ships one weight, so headings run at 400
   (its inked letterforms carry the emphasis themselves). */
[data-theme^="archiv"] h1,
[data-theme^="archiv"] h2 { font-weight: 400; letter-spacing: .01em; }
[data-theme^="archiv"] .meta,
[data-theme^="archiv"] .exports,
[data-theme^="archiv"] .sortbar,
[data-theme^="archiv"] .quote footer { letter-spacing: .03em; }

/* Brand = the drawer label: a small framed holder on the catalogue front.
   Keeps the inky Special Elite -- at this small size the patina reads as a
   stamped label, not as blur. Case is left as the admin typed it (Special
   Elite has proper lowercase), so a mixed-case site title renders verbatim. */
[data-theme^="archiv"] .brand {
    font-family: "Special Elite", "Cutive", ui-monospace, monospace;
    font-size: .98rem;
    font-weight: 400;
    letter-spacing: .05em;
    padding: .38rem .8rem;
    border: var(--border-w) solid color-mix(in srgb, var(--ink) 35%, var(--line));
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--bg);
}

/* Die Akte: the whole page content sits in one folder panel, binding the
   heading tab and what's under it together (user: "wie eine Akte"). The
   white cards lie ON the manila folder, the folder lies on the desk. */
[data-theme^="archiv"] main {
    background: var(--folder);
    border: var(--border-w) solid var(--line);
    box-shadow: var(--shadow);
    margin: 1.8rem auto 2.2rem;
    width: min(var(--maxw), calc(100% - 1.4rem));
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 1.8rem) 2.6rem;
}

/* Page titles are divider tabs (Trennblätter) riding on a rule. The book
   page's own long title (h1.book-title) is exempt -- it stays a typed line. */
[data-theme^="archiv"] .page-head {
    border-bottom: var(--border-w) solid var(--line);
    align-items: flex-end;
    margin-bottom: .8rem;
}
[data-theme^="archiv"] .page-head h1:not(.book-title) {
    margin: 0 0 -1px;
    font-size: clamp(1.3rem, 3vw, 1.65rem);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-bottom: none;
    padding: .4rem 1.5rem .3rem;
    clip-path: polygon(.9rem 0, calc(100% - .9rem) 0, 100% 100%, 0 100%);
}
[data-theme^="archiv"] .page-head .exports,
[data-theme^="archiv"] .page-head .meta { margin-bottom: .4rem; }

/* Bücherliste als Karteikasten: jede Zeile eine Schubladenfront mit
   Etikettenrahmen und Messinggriff. */
[data-theme^="archiv"] .book-list { margin-top: 1.2rem; }
[data-theme^="archiv"] .book-list li {
    position: relative;
    margin-bottom: .7rem;
    padding: .85rem 5.4rem .85rem 1rem;
    align-items: center;
    border: var(--border-w) solid var(--line);
    border-bottom: 2px solid color-mix(in srgb, var(--ink) 30%, var(--line));
    background-color: var(--surface-2);
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 1px, var(--fiber-x) 1px, var(--fiber-x) 2px),
        repeating-linear-gradient(0deg, transparent, transparent 1px, var(--fiber-y) 1px, var(--fiber-y) 2px);
    box-shadow: var(--shadow);
}
[data-theme^="archiv"] .book-list li:first-child { padding-top: .85rem; }
[data-theme^="archiv"] .book-list li::after {
    /* the brass pull */
    content: "";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 2.4rem;
    height: .72rem;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(180deg, #d3ac62, #8a6a33 60%, #b08a47);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.35),
                0 2px 3px rgba(0,0,0,.3);
}
[data-theme^="archiv"] .book-list .book-line {
    /* the label holder */
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    box-shadow: inset 0 0 0 2px var(--bg);
    padding: .3rem .75rem;
}
[data-theme^="archiv"] .book-list .count { letter-spacing: .03em; }

/* Quotes are real index cards, upside-down per the user's call (quote first):
   the quote sits ON fine blue ruling at the top, below it runs the thin red
   rule, below THAT the metadata (footer) — like the reference photo, flipped.
   The card stock itself is smooth (no crosshatch — paper structure must stay
   very fine); texture lives on the desk and furniture only. */
[data-theme^="archiv"] .quote {
    border: var(--border-w) solid var(--line);
    border-radius: 0;
    padding-bottom: 1.9rem;
}

/* The Lochung: a punched rod hole at the card's bottom centre, showing the
   desk through it. Scoped to `blockquote.quote` (the actual cards) so it doesn't
   leak onto Toast UI Editor's blockquote toolbar button, which also uses the
   class `quote`. */
[data-theme^="archiv"] blockquote.quote::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .5rem;
    width: .7rem;
    height: .7rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 1px 0 var(--hole-rim);
    pointer-events: none;
}

/* The hanging quote mark inherits the mono font -> a typewriter ". Calm it. */
[data-theme^="archiv"] .quote .text::before {
    font-size: 1.4rem;
    vertical-align: -.15em;
    margin-right: .25rem;
    opacity: .75;
}

/* The quote sits on the ruling: line spacing == ruling period, the 1px line
   at the foot of every line box so the glyphs rest on it (descenders dip
   below, like writing on ruled stock). Negative margins span the full card. */
[data-theme^="archiv"] .quote .text {
    line-height: 1.9rem;
    margin: 0 -1.4rem;
    padding: 0 1.4rem;
    /* archiv shows the highlight colour on the footer rule, not as a tint --
       keep the ruled-paper look clean (no textmarker bg in this theme). */
    background-color: transparent;
    background-image: repeating-linear-gradient(180deg,
        transparent, transparent calc(1.9rem - 1px),
        var(--ruling) calc(1.9rem - 1px), var(--ruling) 1.9rem);
}

/* Below the quote: the thin red rule, then the metadata — the card's foot
   zone. The rule carries the highlight colour (kept for scanability). */
[data-theme^="archiv"] .quote footer {
    margin: .9rem -1.4rem 0;
    padding: .5rem 1.4rem 0;
    border-top: 2px solid var(--accent);
}
[data-theme^="archiv"] .quote.color-yellow footer { border-top-color: #e3c14a; }
[data-theme^="archiv"] .quote.color-orange footer { border-top-color: #e08a3c; }
[data-theme^="archiv"] .quote.color-red    footer { border-top-color: #d4604a; }
[data-theme^="archiv"] .quote.color-blue   footer { border-top-color: #4a78d4; }
[data-theme^="archiv"] .quote.color-green  footer { border-top-color: #5aa15a; }
[data-theme^="archiv"] .quote.color-purple footer { border-top-color: #8a5ad4; }
[data-theme^="archiv"] .quote.color-gray   footer { border-top-color: #9a9a9a; }
[data-theme^="archiv"] .zettel-card footer { border-top-color: #6aa9c9; }
[data-theme^="archiv"] .book-card footer   { border-top-color: #b08968; }

/* Tags are register tabs: a clipped trapezoid riding on the card. box-shadow
   would be clipped away with the corners, so the shadow is a drop-shadow. */
[data-theme^="archiv"] .tag,
[data-theme^="archiv"] .tag-chip,
[data-theme^="archiv"] .filter-chip {
    border: none;
    border-radius: 0;
    clip-path: polygon(.45em 0, calc(100% - .45em) 0, 100% 100%, 0 100%);
    background: var(--surface-2);
    box-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.22));
}
[data-theme^="archiv"] .tag { padding: .16rem .55rem .16rem .95rem; }
[data-theme^="archiv"] .tag-chip { padding: .4rem .8rem .4rem 1.1rem; }
[data-theme^="archiv"] .filter-chip { padding: .32rem .7rem .32rem 1.05rem; }
[data-theme^="archiv"] .filter-chip.on { background: var(--accent); }
[data-theme^="archiv"] .tag-chip:hover,
[data-theme^="archiv"] .filter-chip:hover { background: var(--surface); }

/* Round pills square off to match the card stock. */
[data-theme^="archiv"] .exports a,
[data-theme^="archiv"] .sortbar a,
[data-theme^="archiv"] .device,
[data-theme^="archiv"] .coll-chip,
[data-theme^="archiv"] .coll-add,
[data-theme^="archiv"] .link-add,
[data-theme^="archiv"] .link-item,
[data-theme^="archiv"] .share-chip,
[data-theme^="archiv"] .share-add,
[data-theme^="archiv"] .share-discuss,
[data-theme^="archiv"] .linked-badge,
[data-theme^="archiv"] .btn-link,
[data-theme^="archiv"] .tag-add input,
[data-theme^="archiv"] .tag-chip .n,
[data-theme^="archiv"] .filter-count,
[data-theme^="archiv"] .rg-count,
[data-theme^="archiv"] .mc-count,
[data-theme^="archiv"] .sg-meta,
[data-theme^="archiv"] .nav-badge { border-radius: 0; }

/* Badges become rubber stamps: hollow, inked edge, set slightly askew. */
[data-theme^="archiv"] .badge {
    display: inline-block;
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 3px;
    padding: .02rem .4rem;
    font-weight: 700;
    letter-spacing: .08em;
    transform: rotate(-2deg);
}
[data-theme^="archiv"] .badge.you { color: var(--ink-soft); border-color: var(--ink-soft); }

/* Collection thread numbers: typed signatures, square, stamp red. */
[data-theme^="archiv"] .thread-rank {
    border-radius: 0;
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* Ordner mit Lasche: the manila folder body (.folder-body) begins UNDER the
   title, so the page-head title reads as the protruding tab (Lasche), while the
   back-link and title sit on the bare desk above it. Same manila colour as the
   global Akte -- only the folder's extent changes (it no longer wraps the
   title). Opt-in per page via {% block main_class %}foldered{% endblock %}. */
[data-theme^="archiv"] main.foldered {
    /* drop the global Akte panel here: the desk shows above the folder */
    background: none;
    border: none;
    box-shadow: none;
    padding: 1.2rem clamp(.4rem, 1.5vw, .8rem) 2.2rem;
}
[data-theme^="archiv"] main.foldered .page-head {
    border-bottom: none;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}
/* The title tab keeps the global Trennblatt look but sits ON the folder's top
   edge (no bottom border, bottom margin removed) so it reads as the Lasche. */
[data-theme^="archiv"] main.foldered .page-head h1:not(.book-title) {
    margin-bottom: 0;
}
[data-theme^="archiv"] .folder-body {
    position: relative;
    margin-top: 0;
    padding: 1.15rem clamp(.9rem, 2.5vw, 1.4rem) 1.4rem;
    background-color: var(--folder);
    border: var(--border-w) solid var(--line);
    box-shadow: var(--shadow);
}
[data-theme^="archiv"] .folder-body > .meta:first-child { margin-top: 0; }
[data-theme^="archiv"] .folder-body .thread { margin-top: 1rem; }
[data-theme^="archiv"] .folder-body .thread-item:last-child { margin-bottom: 0; }

/* Secondary text (byline, meta line, small actions) reads against the paper
   texture: a mid ink tone between full ink and the soft labels, a notch more
   size where it was tiny, and a 1px letterpress lift that separates the
   letters from the fibres without reading as an effect. */
[data-theme^="archiv"] .author,
[data-theme^="archiv"] .author a,
[data-theme^="archiv"] .book-author,
[data-theme^="archiv"] .meta,
[data-theme^="archiv"] .count,
[data-theme^="archiv"] .back,
[data-theme^="archiv"] .exports,
[data-theme^="archiv"] .sortbar,
[data-theme^="archiv"] .remarks-label,
[data-theme^="archiv"] .meta-edit > summary {
    color: var(--ink-mid);
    text-shadow: 0 1px 0 var(--lift);
}
[data-theme^="archiv"] .meta { font-size: .9rem; }
[data-theme^="archiv"] .remarks-label { font-size: .76rem; }
[data-theme^="archiv"] .meta-edit > summary { font-size: .8rem; }
[data-theme^="archiv"] .count { font-size: .82rem; }
[data-theme^="archiv"] .meta a { color: var(--accent); }
[data-theme^="archiv"] .meta-edit > summary:hover,
[data-theme^="archiv"] .back:hover,
[data-theme^="archiv"] .book-author:hover { color: var(--accent); }

/* Action chips lift off the desk: card fill + firmer outline instead of the
   bare hairline that sank into the manila/lamplight background. */
[data-theme^="archiv"] .exports a,
[data-theme^="archiv"] .sortbar a,
[data-theme^="archiv"] .book-actions > a,
[data-theme^="archiv"] .link-add,
[data-theme^="archiv"] .coll-add,
[data-theme^="archiv"] .share-add,
[data-theme^="archiv"] .share-discuss,
[data-theme^="archiv"] .anno-add > summary,
[data-theme^="archiv"] .remarks-edit summary {
    background: var(--surface);
    border: var(--border-w) solid color-mix(in srgb, var(--ink) 22%, var(--line));
    box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
[data-theme^="archiv"] .link-add,
[data-theme^="archiv"] .coll-add,
[data-theme^="archiv"] .share-add { border-style: dashed; }
[data-theme^="archiv"] .anno-add > summary,
[data-theme^="archiv"] .remarks-edit summary {
    border-style: dashed;
    border-radius: 0;
    padding: .12rem .55rem;
}
[data-theme^="archiv"] .sortbar a:not(.active) { background: var(--surface); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
/* the active sort must keep its filled accent chip (the generic surface-fill
   above would otherwise wash it out: white text on near-white) */
[data-theme^="archiv"] .sortbar a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
[data-theme^="archiv"] .tag-add input {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}
/* register tabs throw a firmer shadow so they read on the bare desk too */
[data-theme^="archiv"] .tag,
[data-theme^="archiv"] .tag-chip,
[data-theme^="archiv"] .filter-chip { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

/* Site footer: a dotted signature rule, like the card foot. */
[data-theme^="archiv"] .site-footer { border-top-style: dotted; letter-spacing: .03em; }

/* The confirmation dialog is an index card too: red rule, smooth stock. */
[data-theme^="archiv"] dialog.confirm-dialog {
    border-top: 2px solid var(--accent);
    border-radius: 0;
}

/* Figures must read instantly: stats values (and thread signatures) use the
   clean Courier digits, not Cutive's wobbly numerals/% sign. */
[data-theme^="archiv"] .stats dd {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: .01em;
}
[data-theme^="archiv"] .thread-rank { font-family: var(--font-ui); }

/* ============================================================
   Hauptkasten — the private second box (Luhmann's Hauptkasten).
   A quieter room layered OVER whatever theme is active: it only
   re-tunes the reading measure, type and spacing -- never colour,
   which stays the chosen theme's. Scoped to main.hauptkasten so
   the rest of the app is untouched. Phase 2: the room + the door.
   The Folgezettel tree/address signature arrives in Phase 4.
   ============================================================ */
/* Slim Hauptkasten header: the source-box nav + quote search are gone, leaving
   the wordmark, a quiet way back, and the personal controls. A hair lighter so
   the room reads as its own place without changing the theme's colours. */
.hk-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.hk-back {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.hk-back:hover { color: var(--accent); }

main.hauptkasten {
    --maxw: 40rem;                                   /* ~62ch reading measure */
    max-width: var(--maxw);
    width: min(var(--maxw), calc(100% - 1.4rem));
    padding-top: clamp(2.2rem, 6vw, 4.4rem);
    font-family: var(--font-body);
    line-height: 1.7;
}
.hk-head { margin-bottom: 1.6rem; }
.hk-lede {
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 34rem;
    margin: .5rem 0 0;
}

/* Sub-nav: quiet wayfinding. Live items link; not-yet-built areas show as
   muted, non-interactive "soon" labels until their phase lands. */
.hk-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.3rem;
    align-items: baseline;
    font-family: var(--font-ui);
    font-size: .9rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}
.hk-subnav a { color: var(--ink-soft); text-decoration: none; }
.hk-subnav a:hover { color: var(--accent); }
.hk-subnav a.is-active { color: var(--ink); font-weight: 600; }
.hk-soon { color: var(--ink-soft); opacity: .45; cursor: default; }
/* Serendipity die: an action, set apart from the section links at the right. */
.hk-dice { margin-left: auto; }

/* Communication partner: quiet discovery blocks (adrift thoughts, shared-keyword
   suggestions). Set apart, never loud -- a whisper, not a badge. */
.hk-adrift, .hk-related { margin-top: 2.6rem; }
.hk-adrift-lede, .hk-related-lede {
    color: var(--ink-soft); font-size: .95rem; line-height: 1.55;
    max-width: 38rem; margin: .2rem 0 1rem;
}
.hk-adrift-list .hk-item-date { opacity: .8; }
.hk-related-list { list-style: none; margin: 0; padding: 0; }
.hk-related-item {
    display: flex; align-items: center; gap: 1rem;
    padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.hk-related-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.hk-related-tag { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); }
.hk-related-link { margin: 0; }
.hk-related-link button {
    font-family: var(--font-ui); font-size: .82rem;
    color: var(--ink-soft); background: none; border: 1px solid var(--line);
    border-radius: var(--radius); padding: .25rem .6rem; cursor: pointer;
    white-space: nowrap; transition: border-color .15s ease, color .15s ease;
}
.hk-related-link button:hover { border-color: var(--accent); color: var(--accent); }

/* Phase 5 — the bridge (highlight → Gedanke). Quote-footer actions in the book
   view: deliberately quiet, matching the surrounding footer affordances. */
.hk-bridge { color: var(--accent); }
.hk-bridge-form { display: inline; margin: 0; }
.hk-bridge-form button, .hk-bridge-done {
    font: inherit; font-size: .76rem; background: none; border: none;
    padding: 0; color: var(--ink-soft); cursor: pointer;
}
.hk-bridge-form button:hover { color: var(--accent); text-decoration: underline; }
.hk-bridge-form button.is-on { color: var(--accent); }
.hk-bridge-done { cursor: default; opacity: .75; }

/* Source reference on the writing form: visible to think AGAINST, never to copy. */
.hk-source {
    border-left: 3px solid var(--line);
    padding: .1rem 0 .1rem 1.1rem;
    margin: 0 0 1.8rem; max-width: 62ch;
}
.hk-source-label { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.hk-source-quote { font-size: 1.05rem; line-height: 1.5; color: var(--ink); margin: 0; font-style: italic; }
.hk-source-cite { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft); margin: .5rem 0 0; }
.hk-source-hint { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; margin: .7rem 0 0; }
.field-opt { color: var(--ink-soft); font-weight: 400; }

/* Register-Vorher: "Schau zuerst" panel on the new-thought form. */
.hk-vorher {
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: .65rem .9rem;
    margin: 0 0 1.8rem;
    max-width: 42rem;
}
.hk-vorher summary {
    font-family: var(--font-ui);
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.hk-vorher summary::-webkit-details-marker { display: none; }
.hk-vorher[open] summary::after { content: " ↑"; }
.hk-vorher:not([open]) summary::after { content: " ↓"; }
.hk-vorher-body { margin-top: .75rem; }
.hk-vorher-hint {
    font-size: .88rem; color: var(--ink-soft); line-height: 1.5;
    margin: 0 0 .75rem;
}
.hk-vorher-search {
    display: flex; gap: .4rem; align-items: center; margin: 0 0 .6rem;
}
.hk-vorher-search input[type="search"] {
    flex: 1; font-family: var(--font-body); font-size: .9rem;
    border: 1px solid var(--line); background: var(--bg); color: var(--fg);
    padding: .3rem .55rem; border-radius: 3px; outline: none;
}
.hk-vorher-search input[type="search"]:focus { border-color: var(--accent); }
.hk-vorher-search button {
    font-family: var(--font-ui); font-size: .85rem;
    border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
    padding: .3rem .65rem; border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.hk-vorher-search button:hover { color: var(--accent); border-color: var(--accent); }
.hk-vorher-reg {
    font-family: var(--font-ui); font-size: .85rem;
    color: var(--ink-soft); text-decoration: none;
}
.hk-vorher-reg:hover { color: var(--accent); }

/* Suche: full-page search within the Hauptkasten. */
.hk-suche-form {
    display: flex; gap: .5rem; align-items: center;
    margin: 0 0 1.8rem; max-width: 38rem;
}
.hk-suche-form input[type="search"] {
    flex: 1; font-family: var(--font-body); font-size: 1rem;
    border: 1px solid var(--line); background: var(--bg); color: var(--fg);
    padding: .4rem .65rem; border-radius: 3px; outline: none;
}
.hk-suche-form input[type="search"]:focus { border-color: var(--accent); }
.hk-suche-form button {
    font-family: var(--font-ui); font-size: .9rem;
    border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
    padding: .4rem .8rem; border-radius: 3px; cursor: pointer;
}
.hk-suche-form button:hover { color: var(--accent); border-color: var(--accent); }
.hk-suche-liste { list-style: none; margin: 0; padding: 0; }
.hk-suche-treffer {
    padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.hk-suche-treffer > a {
    color: var(--accent); text-decoration: none; font-size: 1.02rem;
}
.hk-suche-treffer > a:hover { text-decoration: underline; }
.hk-suche-leer { color: var(--ink-soft); font-size: .95rem; }

/* Move ("Einsortieren") picker: the thought being filed, then targets as rows
   with a quiet "Hierher" action (mirrors .hk-related-item). */
.hk-move-source { margin: 1rem 0 1.5rem; }
.hk-move-source footer { color: var(--ink-soft); font-size: .9rem; margin-top: .3rem; }
.hk-move-target { display: flex; align-items: center; gap: 1rem; }
.hk-move-target-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.hk-move-go { margin: 0; }
.hk-move-go button {
    font-family: var(--font-ui); font-size: .82rem;
    color: var(--ink-soft); background: none; border: 1px solid var(--line);
    border-radius: var(--radius); padding: .3rem .7rem; cursor: pointer;
    white-space: nowrap; transition: border-color .15s ease, color .15s ease;
}
.hk-move-go button:hover { border-color: var(--accent); color: var(--accent); }

.hk-suche-links {
    display: flex; gap: 1.5rem; margin-top: 2rem;
    font-family: var(--font-ui); font-size: .9rem;
}
.hk-suche-links a { color: var(--ink-soft); text-decoration: none; }
.hk-suche-links a:hover { color: var(--accent); }

/* Inbox: the at-a-glance hint on the home + the opt-in list itself. */
.hk-inbox-hint {
    display: inline-block; font-family: var(--font-ui); font-size: .9rem;
    color: var(--ink-soft); text-decoration: none; margin: 0 0 2.2rem;
}
.hk-inbox-hint:hover { color: var(--accent); }
.hk-inbox { list-style: none; margin: 0; padding: 0; }
.hk-inbox-item { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.hk-inbox-quote {
    font-size: 1.08rem; line-height: 1.55; color: var(--ink);
    margin: 0; font-style: italic; border: none; padding: 0;
}
.hk-inbox-cite { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft); margin: .5rem 0 0; }
.hk-inbox-cite a { color: var(--ink-soft); }
.hk-inbox-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: .7rem; }
.hk-inbox-dismiss { display: inline; margin: 0; }
.hk-inbox-dismiss button {
    font-family: var(--font-ui); font-size: .85rem; background: none; border: none;
    padding: 0; color: var(--ink-soft); cursor: pointer;
}
.hk-inbox-dismiss button:hover { color: var(--accent); text-decoration: underline; }

/* Writing invitation — the thesis of the room, its most prominent action. */
.hk-write {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 2.6rem;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.hk-write:hover { border-color: var(--accent); background: var(--surface); }
.hk-write-mark { font-size: 1.5rem; color: var(--accent); line-height: 1; }
.hk-write-text { font-family: var(--font-ui); font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.hk-write-text small { font-weight: 400; color: var(--ink-soft); font-size: .82rem; margin-top: .15rem; }
.hk-write-go { margin-left: auto; color: var(--ink-soft); font-size: 1.2rem; }
.hk-write:hover .hk-write-go { color: var(--accent); }

/* Detail page: title + quiet actions, meta line, reading prose. */
.hk-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .8rem; }
.hk-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; font-family: var(--font-ui); font-size: .9rem; }
/* Wrap between actions, never inside one -- "Strang lesen" stays one piece. */
.hk-actions a, .hk-actions button { white-space: nowrap; }
.hk-actions a { color: var(--ink-soft); text-decoration: none; }
.hk-actions a:hover { color: var(--accent); }
.hk-meta { font-family: var(--font-ui); font-size: .82rem; color: var(--ink-soft); margin: .2rem 0 1.8rem; }
.hk-prose { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.75; }

.hk-section {
    font-family: var(--font-ui);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
    margin: 0 0 1rem;
}

/* Flat list of recent thoughts -- hairline-separated rows, no cards yet.
   The address marker shows only once a thought has one (Phase 4). */
.hk-list { list-style: none; margin: 0; padding: 0; }
.hk-item {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding: .85rem 0;
    border-top: 1px solid var(--line);
}
.hk-item:last-child { border-bottom: 1px solid var(--line); }
.hk-item-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.hk-item-title { font-family: var(--font-body); font-size: 1.08rem; color: var(--ink); }
.hk-item-excerpt { color: var(--ink-soft); font-size: .9rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-addr {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--ink-soft);
    letter-spacing: .03em;
}
.hk-item-date { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }

.hk-empty { padding: 1.5rem 0; }
.hk-empty p { margin: 0; color: var(--ink); }
.hk-empty-hint { color: var(--ink-soft); font-size: .95rem; line-height: 1.55; max-width: 32rem; margin-top: .5rem !important; }

/* Register (Phase 6): the star toggle on a Gedanke's tag chips, and the keyword
   register itself. A filled star marks a chip as a keyword's entry point; the
   chip then carries a quiet accent ring. The Quellenkasten tagbar has no star. */
.tag:has(.tag-entry) { padding-left: .25rem; }
.tag.is-entry { border-color: var(--accent); }
.tag-entry button { color: var(--ink-soft); }
.tag.is-entry .tag-entry button { color: var(--accent); }
.tag-entry button:hover { color: #fff; background: var(--accent); }
.hk-bars-hint { color: var(--ink-soft); font-size: .82rem; margin: .5rem 0 0; }
.hk-notice {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: var(--border-w) solid var(--accent);
    border-radius: var(--radius);
    color: var(--ink);
    padding: .7rem .9rem;
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.hk-register { margin: 0; }
.hk-reg-kw {
    display: flex;
    align-items: baseline;
    gap: .6rem 1rem;
    flex-wrap: wrap;
    margin-top: 1.8rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--line);
}
.hk-reg-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
}
.hk-reg-region { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); text-decoration: none; margin-left: auto; }
.hk-reg-region:hover { color: var(--accent); }
.hk-reg-entry { margin: .7rem 0 0; }
.hk-reg-entry > a { color: var(--accent); text-decoration: none; font-size: 1.02rem; }
.hk-reg-entry > a:hover { text-decoration: underline; }
.hk-reg-excerpt { display: block; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin-top: .15rem; }
.hk-export-link { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: .85rem; }
.hk-export-link a { color: var(--accent); text-decoration: none; }
.hk-export-link a:hover { text-decoration: underline; }
.hk-export-link span { display: block; color: var(--ink-soft); margin-top: .25rem; }

/* Folgezettel (Phase 4): breadcrumb path, address badge, continue/branch. The
   address is monospace-quiet -- a label on the position, never the hero. */
.hk-crumb {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .45rem;
    align-items: baseline;
}
.hk-crumb a { color: var(--ink-soft); text-decoration: none; }
.hk-crumb a:hover { color: var(--accent); }
.hk-crumb-sep { color: var(--ink-soft); opacity: .5; }
.hk-addr-lg { font-size: .82em; opacity: .8; margin-right: .15em; }
h1 .hk-addr { font-family: var(--font-ui); }

.hk-folge { margin: 2rem 0 1.4rem; }
.hk-folge-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.hk-act {
    font-family: var(--font-ui);
    font-size: .9rem;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .4rem .9rem;
    transition: border-color .15s ease, color .15s ease;
}
.hk-act:hover { border-color: var(--accent); color: var(--accent); }
.hk-folge-list { list-style: none; margin: 1rem 0 0; padding: 0; border-left: 2px solid var(--line); }
.hk-folge-list li { padding: .35rem 0 .35rem 1rem; position: relative; }
.hk-folge-list li::before {
    content: "";
    position: absolute;
    left: -2px; top: 1.1rem;
    width: .7rem; height: 2px;
    background: var(--line);
}
.hk-folge-list a { color: var(--ink); text-decoration: none; font-family: var(--font-body); }
.hk-folge-list a:hover { color: var(--accent); }

/* Expandable Folgezettel tree on the home (native <details>, no JS). */
.hk-section-spacer { margin-top: 2.6rem; }
.hk-tree { list-style: none; margin: .2rem 0 0; padding: 0; }
.hk-tree .hk-tree { margin-left: 1.1rem; padding-left: .9rem; border-left: 1px solid var(--line); }
.hk-tree li { padding: .12rem 0; }
.hk-tree details > summary { list-style: none; display: flex; align-items: baseline; gap: .6rem; cursor: default; }
.hk-tree details > summary::-webkit-details-marker { display: none; }
.hk-tree details > summary::before {
    content: "▸";
    color: var(--ink-soft);
    font-size: .8em;
    cursor: pointer;
    transition: transform .12s ease;
    display: inline-block;
}
.hk-tree details[open] > summary::before { transform: rotate(90deg); }
.hk-tree-link { color: var(--ink); text-decoration: none; font-family: var(--font-body); font-size: 1.04rem; }
.hk-tree-link:hover { color: var(--accent); }
.hk-tree li > .hk-tree-link { padding-left: 1.4rem; display: inline-block; }   /* leaf: align past the triangle */
.hk-thread-link {
    font-family: var(--font-ui); font-size: .74rem; color: var(--ink-soft);
    text-decoration: none; opacity: 0; transition: opacity .12s ease; white-space: nowrap;
}
.hk-tree summary:hover .hk-thread-link { opacity: 1; }
.hk-thread-link:hover { color: var(--accent); }

/* Upward context tree: orientation block above a Gedanke / Faden. Reuses the
   hk-tree look; the spine is open, uncles sit collapsed, "here" is marked. */
.hk-ctx-box {
    margin: .4rem 0 1.4rem;
    padding: .7rem .95rem .8rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.hk-ctx-title { margin: 0 0 .3rem; }
.hk-ctx { font-size: .96rem; }
.hk-here { font-weight: 600; color: var(--accent) !important; }
.hk-here::after {
    content: " · hier";
    font-family: var(--font-ui); font-size: .68rem; font-weight: 400;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.hk-more { color: var(--ink-soft); opacity: .55; }

/* ---------- Arbeitsfläche (free desk surface, ephemeral) ---------- */
/* Override --maxw (not just max-width): main.hauptkasten also pins `width` to
   --maxw, so the desk needs the variable widened or the viewport stays at the
   40rem reading column and squeezes the canvas. */
main.hauptkasten-wide { --maxw: min(98vw, 2200px); }
/* Gedanke detail page: desktop-wide head/actions/lists, but long body text
   keeps a comfortable reading measure. */
main.hk-page-detail { --maxw: min(62rem, 94vw); }
main.hk-page-detail .hk-prose { max-width: 44rem; }
.af-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.af-add > summary {
    cursor: pointer; font-family: var(--font-ui); font-size: .82rem;
    color: var(--accent); list-style: none; display: inline-block;
    padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 6px;
}
.af-add > summary::-webkit-details-marker { display: none; }
.af-add[open] > summary { background: var(--surface-2); }
.af-add-list {
    list-style: none; margin: .5rem 0 0; padding: .5rem .7rem; max-height: 16rem; overflow: auto;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    position: absolute; z-index: 50; min-width: 16rem; box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.af-add-list li { padding: .15rem 0; }
.af-add-list a { color: var(--ink); text-decoration: none; font-size: .96rem; }
.af-add-list a:hover { color: var(--accent); }
.af-reset { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); text-decoration: none; }
.af-reset:hover { color: var(--accent); }
.af-hint { color: var(--ink-soft); font-size: .92rem; }

/* No-JS / pre-lift: tidy columns. .af-js (added by the script) lifts cards out
   of flow into an absolutely-positioned canvas; inline styles do the placing. */
.af-surface {
    display: flex; align-items: flex-start; gap: 1.2rem;
    overflow-x: auto; padding: 1rem; min-height: 60vh;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, var(--line) 31px 32px),
        var(--surface-2);
    background-size: 100% 32px; border: 1px solid var(--line); border-radius: 10px;
}
/* JS mode: the surface becomes a plain scroll/zoom viewport; the framed,
   growing "desk" is the canvas inside it (it carries the grid + border now). */
.af-surface.af-js {
    display: block; overflow: auto; height: 80vh; min-height: 0;
    padding: 0; border: none; background: none; position: relative;
}
.af-canvas {
    position: relative; transform-origin: 0 0; display: inline-block;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, var(--line) 31px 32px),
        var(--surface-2);
    background-size: 100% 32px; border: 1px solid var(--line); border-radius: 10px;
}
.af-zoom { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.af-zoom button {
    font-family: var(--font-ui); font-size: 1rem; line-height: 1; cursor: pointer;
    width: 1.9rem; height: 1.9rem; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); border-radius: 6px;
}
.af-zoom button:hover { border-color: var(--accent); color: var(--accent); }
.af-zoom-val { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); min-width: 3rem; text-align: center; }
.af-col { flex: 0 0 auto; }
/* Tree layout: a node is its card with its children fanned out horizontally
   below, so siblings (9a, 9b ...) sit side by side like a Stammbaum. */
.af-node { display: inline-flex; flex-direction: column; align-items: center; }
.af-kids { display: flex; gap: 1rem; align-items: flex-start; justify-content: center; padding-top: .2rem; }
.af-col-head {
    display: flex; align-items: baseline; gap: .5rem; justify-content: space-between;
    font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft);
    padding: .2rem .3rem .4rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem;
}
.af-col-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-col-x { color: var(--ink-soft); text-decoration: none; opacity: .6; }
.af-col-x:hover { color: var(--accent); opacity: 1; }
.af-card {
    width: 16rem; flex: 0 0 auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08); margin: 0 0 .8rem;
    overflow: hidden;
}
.af-card-head {
    display: flex; gap: .4rem; align-items: baseline; cursor: grab;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    padding: .5rem .7rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
    touch-action: none;
}
.af-card-head a { color: var(--ink); text-decoration: none; }
.af-card-head a:hover { color: var(--accent); }
.af-surface.af-js .af-card-head { cursor: grab; }
.af-card.af-dragging { box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.af-card.af-dragging .af-card-head { cursor: grabbing; }
.af-card-body { max-height: 13rem; overflow: auto; padding: .6rem .7rem; font-size: .95rem; }
.af-card-body.empty { color: var(--ink-soft); font-style: italic; }
.hk-to-af { margin-left: 1.2rem; }

/* --- Sortiermodus (JS-injected controls; hidden until the desk enters it) --- */
.af-modes { display: inline-flex; }
.af-mode-btn {
    font-family: var(--font-ui); font-size: .82rem; cursor: pointer;
    padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
}
.af-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.af-mode-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.af-surface.af-js.af-sort { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Per-card detach toggle: invisible in Frei, a small corner chip in Sortieren. */
.af-detach {
    display: none; margin-left: auto; cursor: pointer; line-height: 1;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
    color: var(--ink-soft); font-size: .8rem; padding: 0 .3rem;
}
.af-surface.af-sort .af-detach { display: inline-block; }
.af-detach:hover { border-color: var(--accent); color: var(--accent); }
.af-detach.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Live drop target while dragging a strand. */
.af-card.af-drop-target { outline: 2px solid var(--accent); outline-offset: 1px; }
#af-rootzone {
    display: none; position: fixed; left: 0; top: 30%; z-index: 40;
    width: 2.4rem; height: 40%; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px dashed var(--line);
    border-left: none; border-radius: 0 10px 10px 0; color: var(--ink-soft);
}
.af-surface.af-sort #af-rootzone { display: flex; }
#af-rootzone span { writing-mode: vertical-rl; font-family: var(--font-ui); font-size: .8rem; white-space: nowrap; }
#af-rootzone.af-drop-target { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Floating tip that trails the cursor during a sort drag. */
.af-tip {
    display: none; position: fixed; z-index: 50; pointer-events: none;
    background: var(--ink); color: var(--surface); font-family: var(--font-ui);
    font-size: .78rem; padding: .2rem .5rem; border-radius: 6px; white-space: nowrap;
}

/* Inline address chooser after a valid drop. */
.af-chooser {
    position: absolute; z-index: 60; display: flex; flex-direction: column; gap: .2rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2); padding: .35rem;
}
.af-chooser button {
    font-family: var(--font-ui); font-size: .82rem; cursor: pointer; text-align: left;
    padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink);
}
.af-chooser button:hover { border-color: var(--accent); color: var(--accent); }
.af-chooser .af-chooser-cancel { color: var(--ink-soft); border-color: transparent; }

/* Queued card marker. */
.af-card.af-pending-card { outline: 2px solid var(--accent); outline-offset: 1px; }
.af-badge { margin-left: .4rem; font-family: var(--font-ui); font-size: .72rem; color: var(--accent); white-space: nowrap; }

/* Pending bar (list of queued moves + Speichern/Verwerfen). */
.af-pending { flex-basis: 100%; order: 9; margin-top: .3rem; }
.af-pending-list { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.af-pending-list li { display: flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: .82rem; color: var(--ink); }
.af-pending-x { cursor: pointer; border: none; background: none; color: var(--ink-soft); font-size: .9rem; padding: 0 .2rem; }
.af-pending-x:hover { color: var(--accent); }
.af-pending-actions { display: flex; gap: .5rem; }
.af-save {
    font-family: var(--font-ui); font-size: .84rem; cursor: pointer; padding: .3rem .9rem;
    border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff;
}
.af-save[disabled] { opacity: .6; cursor: default; }
.af-discard {
    font-family: var(--font-ui); font-size: .84rem; cursor: pointer; padding: .3rem .9rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft);
}
.af-discard:hover { border-color: var(--accent); color: var(--accent); }

/* Linear thread reading view: each node indented by its depth. */
.hk-thread { margin-top: 1rem; }
.hk-thread-node { margin: 0 0 1.6rem; padding-left: calc(var(--d, 0) * 1.4rem); }
.hk-thread-head { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin: 0 0 .4rem; display: flex; gap: .5rem; align-items: baseline; }
.hk-thread-head a { color: var(--ink); text-decoration: none; }
.hk-thread-head a:hover { color: var(--accent); }
.hk-thread-node .hk-prose { font-size: 1rem; }

/* ---------- Lesemodus (whole thread as one continuous flowing text) ---------- */
/* The checkbox itself is hidden; its :checked state drives the boundary styling
   on the sibling .hk-read prose via the ~ combinator (No-JS toggle). */
.hk-read-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.hk-read-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: .2rem 0 1.4rem; padding: .3rem .7rem;
    border: 1px solid var(--line); border-radius: 7px;
    font-family: var(--font-ui); font-size: .82rem; color: var(--ink-soft);
    cursor: pointer; user-select: none;
}
.hk-read-toggle::before {
    content: "○"; font-size: .9em;
}
.hk-read-toggle-input:checked + .hk-read-toggle { color: var(--ink); border-color: var(--accent); }
.hk-read-toggle-input:checked + .hk-read-toggle::before { content: "●"; color: var(--accent); }
.hk-read-toggle-input:focus-visible + .hk-read-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Seamless by default: each Zettel is a borderless block whose inner paragraphs
   carry the normal prose rhythm, so consecutive Zettel read as one text. */
.hk-read { margin-top: .4rem; }
.hk-read-seg { position: relative; scroll-margin-top: 2rem; }
/* Opened from a deeper Zettel: the browser jumps to #g<id>; mark that spot so the
   reader sees where they landed inside the whole thread (fades after a moment). */
.hk-read-seg:target { animation: hk-read-flash 2.4s ease-out 1; }
.hk-read-seg:target::after {
    content: ""; position: absolute; left: -.85rem; top: -.1em; bottom: -.1em;
    width: 2px; background: var(--accent); border-radius: 2px;
}
@keyframes hk-read-flash {
    0%, 35% { background: color-mix(in srgb, var(--accent) 12%, transparent); }
    100% { background: transparent; }
}
.hk-read-seg > :first-child { margin-top: 0; }
.hk-read-seg > :last-child { margin-bottom: 0; }
/* keep the normal paragraph gap between two Zettel (collapsing margins) */
.hk-read-seg + .hk-read-seg { margin-top: 1.1em; }

/* The reference label + jump anchor, hidden until hover (outline avoids reflow). */
.hk-read-seg::before {
    content: attr(data-ref);
    position: absolute; left: 0; top: -1.25em;
    font-family: var(--font-ui); font-size: .72rem; color: var(--accent);
    opacity: 0; transition: opacity .12s ease; pointer-events: none;
    white-space: nowrap;
}
.hk-read-anchor {
    position: absolute; right: -1.4rem; top: 0;
    color: var(--ink-soft); text-decoration: none; font-size: .9rem;
    opacity: 0; transition: opacity .12s ease;
}
.hk-read-seg:hover { outline: 1px dashed var(--line); outline-offset: .55rem; border-radius: 2px; }
.hk-read-seg:hover::before,
.hk-read-seg:hover .hk-read-anchor { opacity: 1; }
.hk-read-anchor:hover { color: var(--accent); }

/* Toggle on: boundaries made permanent — address shown, hairline rule above each
   following Zettel, and a faint depth indent to keep branched threads legible. */
.hk-read-toggle-input:checked ~ .hk-read .hk-read-seg {
    padding-left: calc(var(--d, 0) * 1.1rem);
    padding-top: 1.7em;
}
.hk-read-toggle-input:checked ~ .hk-read .hk-read-seg::before {
    opacity: 1; top: .35em; left: calc(var(--d, 0) * 1.1rem);
}
.hk-read-toggle-input:checked ~ .hk-read .hk-read-seg + .hk-read-seg {
    margin-top: 0; border-top: 1px solid var(--line);
}
.hk-read-toggle-input:checked ~ .hk-read .hk-read-seg:first-child { padding-top: .2em; }

/* ---------- Stammbaum (graphical family tree of a thread) ---------- */
.hk-sb-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 1.2rem; }
.hk-sb-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.hk-sb-toggle a {
    font-family: var(--font-ui); font-size: .82rem; padding: .35rem .85rem;
    color: var(--ink-soft); text-decoration: none; background: var(--surface);
}
.hk-sb-toggle a + a { border-left: 1px solid var(--line); }
.hk-sb-toggle a:hover { color: var(--accent); }
.hk-sb-toggle a.is-active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.hk-sb-tree { margin: 0 0 2rem; }
.hk-sb-tree-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 .5rem; }
.hk-sb-tree-title a { color: var(--ink); text-decoration: none; }
.hk-sb-tree-title a:hover { color: var(--accent); }

/* Compact view: a scrollable, self-contained SVG. Each node is a real <a>. */
.hk-sb-scroll {
    overflow: auto; max-height: 80vh; position: relative;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
/* Node selection in the single-tree Stammbaum: real checkboxes can't live
   inside the SVG, so they sit absolutely positioned beside each node box and
   the SVG shifts right to make room -- but only while they are visible
   (always without JS, in select mode with JS). */
.hk-sb-cbox { position: absolute; transform: translateY(-50%); z-index: 1; }
.hk-sb-nodesel .hk-sb-svg { margin-left: 30px; }
form[data-hk-select].js-select:not(.selecting) .hk-sb-nodesel .hk-sb-svg { margin-left: 0; }
.hk-sb-fhead .bulk-box { align-self: center; }
.hk-sb-svg { display: block; font-family: var(--font-ui); font-size: 12.5px; }
.hk-sb-edges path { stroke: var(--line); stroke-width: 1.5; }
.hk-sb-node { cursor: pointer; }
.hk-sb-node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: stroke .12s; }
.hk-sb-node text { fill: var(--ink); text-decoration: none; }
.hk-sb-node .hk-sb-addr { fill: var(--accent); font-weight: 600; }
.hk-sb-node:hover rect { stroke: var(--accent); }
.hk-sb-here rect { stroke: var(--accent); stroke-width: 2; fill: var(--surface-2); }

/* Full-content view: the same tree as nested HTML cards, siblings side by side,
   each Zettel's body fully rendered -- a branch reads top-down as a text. */
/* Same left->right flow as the compact SVG: a node is its card with its children
   stacked in a column to the right, the parent vertically centred against them. */
.hk-sb-full { overflow-x: auto; padding-bottom: .5rem; }
.hk-sb-fnode { display: inline-flex; flex-direction: row; align-items: center; }
.hk-sb-fkids { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; justify-content: center; padding-left: 1.4rem; }
.hk-sb-fcard {
    width: 19rem; flex: 0 0 auto; margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden;
}
.hk-sb-fcard.hk-here { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.hk-sb-fhead {
    display: flex; gap: .4rem; align-items: baseline;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    padding: .5rem .7rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.hk-sb-fhead a { color: var(--ink); text-decoration: none; }
.hk-sb-fhead a:hover { color: var(--accent); }
.hk-sb-fbody { padding: .55rem .7rem; font-size: .92rem; max-height: 22rem; overflow: auto; }
.hk-sb-fbody.empty { color: var(--ink-soft); font-style: italic; }

/* --- Phase 8: Schreibtisch-Landing --------------------------------------
   The landing "/": chrome-free and full-page (no header/search/footer). Two
   rooms split by a single hairline -- the choice IS the whole screen. Calm and
   typographic: no cards, no shadows, no gradients. Colours come straight from
   the active theme. */
main.schreibtisch {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    animation: none;
    /* Neutralise theme chrome that targets bare `main` (e.g. the Archiv theme
       turns main into a folder card: width + background + border + shadow).
       The desk must be truly full-bleed in every theme. */
    background: var(--bg);
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.desk {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.desk-rooms {
    flex: 1;
    display: grid;
    /* minmax(0,…) so a long title/last-line can't blow a column past 50% and
       shove the dividing hairline off-centre. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.desk-room {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2rem clamp(1rem, 4vw, 3rem);
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    transition: background-color .25s ease;
}
.desk-room + .desk-room { border-left: var(--border-w) solid var(--line); }
.desk-room:hover, .desk-room:focus-visible { background: var(--surface); outline: none; }
.desk-room-kicker {
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: .68rem;
    color: var(--ink-soft);
}
.desk-room-title {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 4.5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ink);
}
.desk-room-meta { font-size: .9rem; color: var(--accent); }
.desk-room-last {
    max-width: 26ch;
    font-size: .85rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desk-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
    padding: 1.1rem clamp(1.5rem, 6vw, 5rem);
    border-top: var(--border-w) solid var(--line);
    font-family: var(--font-ui);
    font-size: .82rem;
}
.desk-foot a { color: var(--ink-soft); text-decoration: none; }
.desk-foot a:hover { color: var(--accent); }
.desk-foot em { font-style: normal; font-weight: 600; color: var(--accent); }
.desk-foot-acct { margin-left: auto; }
.desk-lang { display: inline-flex; align-items: baseline; gap: .5rem; margin: 0; }
.desk-lang button {
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ink-soft);
}
.desk-lang button:hover { color: var(--accent); }
.desk-lang-cur { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) {
    .desk-rooms { grid-template-columns: 1fr; }
    .desk-room + .desk-room { border-left: 0; border-top: var(--border-w) solid var(--line); }
    .desk-foot { gap: 1rem; justify-content: center; }
    .desk-foot-acct { margin-left: 0; }
}

/* --- login page ---------------------------------------------------------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-box {
    width: min(22rem, 94vw);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.login-brand {
    font-family: var(--font-ui);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 .4rem;
}
.login-box h1 {
    font-size: 1.6rem;
    margin: 0 0 .2rem;
}
.login-box .field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .8rem;
}
.login-box .field span {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--ink-soft);
}
.login-box .field input {
    width: 100%;
    box-sizing: border-box;
    padding: .5rem .65rem;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    font-size: 1rem;
}
.login-box .field input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}
.login-btn {
    width: 100%;
    padding: .55rem;
    font-size: 1rem;
    margin-top: .2rem;
}
.login-box .form-error { margin-bottom: .4rem; }
.nav-logout-form { display: inline; margin: 0; }
.nav-logout {
    font-size: .9rem;
    opacity: .65;
    text-decoration: none !important;
    /* Rendered as a <button> (POST logout) but styled like the old link. */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink-soft);
    font-family: inherit;
    line-height: inherit;
}
.nav-logout:hover { opacity: 1; color: var(--accent); }

/* --- Reader (article reading lists -> bundled EPUB) -------------------- */
.rdr-search {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 .8rem;
}
.rdr-search input {
    flex: 1 1 12rem; padding: .45rem .6rem;
    border: var(--border-w) solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
}
.section-head {
    font-size: 1.05rem; margin: 1.6rem 0 .6rem;
    padding-bottom: .3rem; border-bottom: var(--border-w) solid var(--line);
}
.reader-members .book-line, .reader-candidates .book-line { gap: .5rem; }
.reader-candidates li, .reader-members li { gap: .6rem; }
.warn-chip {
    font-size: .72rem; padding: .05rem .4rem; border-radius: 999px;
    background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
/* Author quick-filter: "all articles by X" as one tap */
.rdr-authors { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 1rem; }
.rdr-authors-label { font-size: .85rem; color: var(--muted); }
.rdr-author-chip {
    font-size: .8rem; padding: .12rem .55rem; border-radius: 999px;
    border: var(--border-w) solid var(--line); background: var(--surface);
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.rdr-author-chip:hover { border-color: var(--accent); }
.rdr-author-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Reader card + inline table-of-contents (in a collection's reading view) */
.reader-card .rdr-toc { margin: .4rem 0; }
.reader-card .rdr-toc summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.rdr-toc-list { margin: .4rem 0 .2rem; padding-left: 1.4rem; }
.rdr-toc-list li { margin: .15rem 0; }