/* Repetitor — reading-first UI for a German law exam vault. */
:root{
  --bg:#faf9f7; --bg-2:#f2f0ec; --panel:#fff; --line:#e2ded6; --line-2:#d3cec3;
  --ink:#1c1a17; --ink-2:#55504a; --ink-3:#857e74;
  --accent:#7a2e2e; --accent-2:#a94848; --accent-bg:#f6ecec;
  --zr:#2f5d50; --str:#7a2e2e; --oer:#2b4a7a;
  --ok:#2f6b46; --warn:#8a6d1f; --mark:#ffe9a8;
  --r:7px; --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#16151a; --bg-2:#1d1c22; --panel:#211f26; --line:#332f3a; --line-2:#433d4d;
  --ink:#ece8e3; --ink-2:#b3ada5; --ink-3:#847d75;
  --accent:#e08b8b; --accent-2:#f0a5a5; --accent-bg:#2e2024;
  --zr:#6fb79c; --str:#e08b8b; --oer:#7fa6dd;
  --ok:#7bc49a; --warn:#d9bb6a; --mark:#5c4a17;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
/* The UA rule [hidden]{display:none} loses to any author rule that sets
   display — and .app/.gate both do. Without this, hiding either element by
   setting .hidden silently does nothing and the gate stays painted over a
   fully loaded app. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;height:100vh}
header.top{display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:none;z-index:20}
.brand{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.brand small{font-family:var(--sans);font-size:11px;color:var(--ink-3);font-weight:400;margin-left:7px;letter-spacing:.04em;text-transform:uppercase}
nav.modes{display:flex;gap:2px;margin-left:8px}
nav.modes button{background:none;border:0;padding:7px 13px;border-radius:var(--r);color:var(--ink-2);cursor:pointer;font-size:14px}
nav.modes button:hover{background:var(--bg-2);color:var(--ink)}
nav.modes button.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
.spacer{flex:1}
.stat{font-size:12px;color:var(--ink-3);white-space:nowrap}
main{flex:1;overflow:hidden;display:flex}

/* ---------- panes ---------- */
.pane{overflow-y:auto;height:100%}
.side{width:274px;flex:none;border-right:1px solid var(--line);background:var(--bg-2);padding:14px}
.center{flex:1;min-width:0}
.wrap{max-width:820px;margin:0 auto;padding:22px 26px 90px}
.wrap.wide{max-width:1180px}

/* ---------- search ---------- */
.searchbar{position:sticky;top:0;background:var(--bg);padding:16px 26px 12px;border-bottom:1px solid var(--line);z-index:10}
.searchbar .row{display:flex;gap:9px;max-width:820px;margin:0 auto}
.searchbar input[type=search]{flex:1;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel);font-size:15px;outline:none}
.searchbar input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.hint{max-width:820px;margin:8px auto 0;font-size:12px;color:var(--ink-3)}
.hint code{background:var(--bg-2);padding:1px 5px;border-radius:4px;font-size:11px}

.facet{margin-bottom:17px}
.facet h4{margin:0 0 6px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.facet label{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:5px;cursor:pointer;font-size:13.5px}
.facet label:hover{background:var(--panel)}
.facet input{accent-color:var(--accent);margin:0}
.facet .n{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.facet .more{font-size:12px;color:var(--accent);cursor:pointer;padding:3px 5px;display:inline-block}
.clearall{width:100%;padding:7px;border:1px solid var(--line-2);background:var(--panel);
  border-radius:var(--r);cursor:pointer;font-size:13px;margin-bottom:14px;color:var(--ink-2)}
.clearall:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- result list ---------- */
.res{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);margin-bottom:9px;cursor:pointer;transition:border-color .12s}
.res:hover{border-color:var(--line-2);box-shadow:var(--shadow);text-decoration:none}
.res h3{margin:0 0 4px;font-size:15.5px;font-weight:600;font-family:var(--serif);color:var(--ink)}
.res p{margin:0;font-size:13.2px;color:var(--ink-2);line-height:1.45}
.res .snip{margin-top:6px;font-size:12.8px;color:var(--ink-2);border-left:2px solid var(--line-2);padding-left:9px}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:center}
.tag{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:20px;
  background:var(--bg-2);color:var(--ink-3);border:1px solid var(--line);white-space:nowrap}
.tag.rg-zivilrecht{color:var(--zr);border-color:color-mix(in srgb,var(--zr) 35%,transparent)}
.tag.rg-strafrecht{color:var(--str);border-color:color-mix(in srgb,var(--str) 35%,transparent)}
.tag.rg-oeffentliches-recht{color:var(--oer);border-color:color-mix(in srgb,var(--oer) 35%,transparent)}
.tag.t-fall-sachverhalt,.tag.t-fall-loesung{background:var(--accent-bg);color:var(--accent);border-color:transparent}
.stars{color:var(--warn);letter-spacing:1px;font-size:11px}

/* ---------- document ---------- */
.doc{font-family:var(--serif);font-size:16.5px;line-height:1.66;color:var(--ink)}
.doc h1{font-size:25px;line-height:1.25;margin:0 0 6px}
.doc h2{font-size:20px;margin:1.7em 0 .5em;padding-bottom:5px;border-bottom:1px solid var(--line)}
.doc h3{font-size:17.5px;margin:1.5em 0 .4em}
.doc h4,.doc h5,.doc h6{font-size:15.5px;margin:1.3em 0 .3em;color:var(--ink-2)}
.doc p{margin:0 0 .85em}
.doc ul,.doc ol{margin:0 0 .9em;padding-left:1.5em}
.doc li{margin-bottom:.34em}
.doc blockquote{margin:1em 0;padding:.6em 1em;border-left:3px solid var(--line-2);
  background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;font-size:15.5px}
.doc blockquote p:last-child{margin:0}
.doc table{border-collapse:collapse;width:100%;margin:1.1em 0;font-size:14px;font-family:var(--sans);display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--bg-2);font-weight:600}
.doc hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.doc a.norm{color:var(--accent);border-bottom:1px dotted var(--accent-2);text-decoration:none;white-space:nowrap}
.doc a.norm:hover{background:var(--accent-bg);text-decoration:none}
.doc .norm-plain{color:var(--ink-2);border-bottom:1px dotted var(--line-2)}
.doc a.wiki{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}

.dochead{margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.dochead h1{font-family:var(--serif);font-size:25px;margin:0 0 7px;line-height:1.25}
.dochead .kurz{font-size:14px;color:var(--ink-2);margin:0 0 10px;line-height:1.5;font-family:var(--sans)}
.crumb{font-size:11.5px;color:var(--ink-3);margin-bottom:7px;font-family:var(--sans)}
.crumb a{color:var(--ink-3)}

.toolbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.btn{padding:6px 12px;border:1px solid var(--line-2);background:var(--panel);border-radius:var(--r);
  cursor:pointer;font-size:13px;color:var(--ink-2);white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-2);color:#fff}
.btn:disabled{opacity:.45;cursor:default}

/* Gliederung */
.toc{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r);
  margin:0 0 22px;font-family:var(--sans)}
.toc summary{cursor:pointer;padding:9px 14px;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);user-select:none}
.toc summary:hover{color:var(--accent)}
.toc[open] summary{border-bottom:1px solid var(--line)}
.toc-list{padding:8px 6px 10px;max-height:340px;overflow-y:auto;display:flex;flex-direction:column}
.toc-i{display:block;padding:4px 10px;font-size:13.2px;color:var(--ink-2);line-height:1.35;
  border-radius:4px;text-decoration:none}
.toc-i:hover{background:var(--panel);color:var(--accent);text-decoration:none}
.toc-i.lvl1{padding-left:24px;font-size:12.8px}
.toc-i.lvl2{padding-left:38px;font-size:12.4px;color:var(--ink-3)}

/* related-links rail */
.rail{width:310px;flex:none;border-left:1px solid var(--line);background:var(--bg-2);padding:18px 15px}
.rail h4{margin:0 0 8px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rail .grp{margin-bottom:20px}
.lnk{display:block;padding:8px 10px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);margin-bottom:6px;cursor:pointer;font-size:13px;line-height:1.35;position:relative}
.lnk:hover{border-color:var(--line-2);text-decoration:none}
.lnk b{display:block;font-weight:600;color:var(--ink);font-size:13.2px;margin-bottom:2px}
.lnk span{color:var(--ink-3);font-size:11.5px}
.lnk .nope{position:absolute;top:5px;right:6px;opacity:0;font-size:11px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--bg-2)}
.lnk:hover .nope{opacity:1}
.lnk .nope:hover{color:var(--accent);border-color:var(--accent)}
.lnk.rejected{opacity:.4}
.normlist{display:flex;flex-wrap:wrap;gap:5px}
.normlist a{font-size:12px;padding:3px 8px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;color:var(--accent);white-space:nowrap}

/* ---------- split reading ---------- */
.split{display:flex;height:100%;min-width:0}
.split>.half{flex:1;min-width:0;overflow-y:auto;border-right:1px solid var(--line)}
.split>.half:last-child{border-right:0}
.halfhead{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);
  padding:8px 16px;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:8px;z-index:5}
.halfhead b{color:var(--ink-2);font-weight:600}
.halfhead .x{margin-left:auto;cursor:pointer;padding:2px 7px;border-radius:4px}
.halfhead .x:hover{background:var(--bg-2);color:var(--accent)}

/* ---------- training ---------- */
.drill{max-width:800px;margin:0 auto;padding:24px 26px 90px}
.drillbar{display:flex;align-items:center;gap:12px;padding:11px 26px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.timer{font-variant-numeric:tabular-nums;font-size:17px;font-weight:600;color:var(--ink-2);min-width:62px}
.timer.run{color:var(--accent)}
.queueinfo{font-size:12.5px;color:var(--ink-3)}
.sv{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:20px 24px;margin-bottom:20px}
textarea.gutachten{width:100%;min-height:230px;padding:14px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--panel);resize:vertical;line-height:1.6;font-size:14.5px;
  font-family:var(--serif);outline:none}
textarea.gutachten:focus{border-color:var(--accent)}
.reveal{margin-top:22px;padding-top:20px;border-top:2px dashed var(--line-2)}
.grades{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.grade{flex:1;min-width:96px;padding:11px 8px;border:1px solid var(--line-2);background:var(--panel);
  border-radius:var(--r);cursor:pointer;text-align:center;line-height:1.3}
.grade:hover{border-color:var(--accent);background:var(--accent-bg)}
.grade b{display:block;font-size:17px;margin-bottom:1px}
.grade span{font-size:11px;color:var(--ink-3)}
.g1 b{color:#b3392f}.g2 b{color:#b5651d}.g3 b{color:var(--warn)}.g4 b{color:#4a7c59}.g5 b{color:var(--ok)}

/* ---------- progress ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px;margin-top:12px}
.cell{border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;background:var(--panel)}
.cell h5{margin:0 0 3px;font-size:14px;font-weight:600}
.cell .sub{font-size:11.5px;color:var(--ink-3);margin-bottom:9px}
.bar{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden;margin-bottom:6px}
.bar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.cell .figs{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
h2.sec{font-size:15px;margin:26px 0 4px;font-weight:600;text-transform:capitalize}
h2.sec:first-child{margin-top:0}

.empty{text-align:center;padding:64px 20px;color:var(--ink-3)}
.empty b{display:block;font-size:16px;color:var(--ink-2);margin-bottom:6px;font-family:var(--serif)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:var(--bg);padding:9px 17px;border-radius:20px;font-size:13px;z-index:100;box-shadow:var(--shadow)}

/* citation popover — shows the official statute text where it is cached */
.card{position:fixed;z-index:60;width:min(390px,calc(100vw - 24px));background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);
  padding:12px 14px;font-family:var(--sans);font-size:13px;line-height:1.5}
.card>b{font-size:14px;display:block;color:var(--accent);margin-bottom:2px}
.card .body i{display:block;font-style:normal;font-weight:600;color:var(--ink);
  font-size:13.5px;margin-bottom:6px}
.card .gesetz{max-height:230px;overflow-y:auto;color:var(--ink-2);font-size:13px}
.card .gesetz p{margin:0 0 .55em}
.card .gesetz p:last-child{margin:0}
.card .gesetz ul{margin:.2em 0 .55em;padding-left:1.15em}
.card .gesetz li{margin-bottom:.25em}
.card .load{color:var(--ink-3);font-size:12px}
.card .src{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3)}
.card .src:hover{color:var(--accent)}

/* filter toggle: only meaningful once the sidebar goes off-canvas */
#filterbtn{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);
  padding:6px 11px;color:var(--ink-2);cursor:pointer;font-size:13px}
#filterbtn.active{border-color:var(--accent);color:var(--accent)}
.scrim{position:fixed;inset:52px 0 0;background:rgba(0,0,0,.35);z-index:25}

/* iPad and narrower: the two-column reading view becomes one scrolling
   column, with the related-links rail below the text instead of hidden. */
@media (max-width:1100px){
  .split{display:block;overflow-y:auto;height:100%}
  .split>.half{height:auto;overflow:visible;border-right:0}
  .rail{width:auto;height:auto;border-left:0;border-top:1px solid var(--line);
    padding:20px var(--wrappad,26px) 80px}
  .rail .grp{max-width:820px;margin-left:auto;margin-right:auto}
  .halfhead{position:sticky}
}

@media (max-width:860px){
  #filterbtn{display:block}
  .side{position:fixed;left:0;top:52px;bottom:0;z-index:30;width:min(300px,84vw);
    transform:translateX(-100%);transition:transform .2s ease}
  .side.open{transform:none;box-shadow:var(--shadow)}
  .wrap{padding:16px 15px 80px}
  .searchbar{padding:12px 15px 10px}
  nav.modes{gap:0}
  nav.modes button{padding:7px 8px;font-size:13px}
  .brand small{display:none}
  .drillbar{padding:10px 15px;flex-wrap:wrap}
  .drill{padding:18px 15px 90px}
  .sv{padding:16px 17px}
  /* comfortable tap targets */
  .grade{min-width:0;flex:1 1 30%;padding:14px 6px}
  .facet label{padding:7px 5px}
  .btn{padding:9px 14px}
  .card{width:calc(100vw - 20px)}
}
@media (max-width:560px){.brand{font-size:16px}nav.modes button{padding:6px 6px;font-size:12px}}

/* pointer-coarse: hover affordances that never fire on a touch screen */
@media (hover:none){
  .lnk .nope{opacity:1}
  .doc a.norm{padding:1px 0}
}

/* ============================================================ Bibliothek */
.side.tree{padding:10px 6px}
.treehead{margin:4px 8px 8px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.trow{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 0;border-radius:5px;
  cursor:pointer;font-size:13.4px;color:var(--ink-2);line-height:1.25}
.trow:hover{background:var(--panel);color:var(--ink)}
.trow.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
.trow .tw{width:11px;flex:none;font-size:9px;color:var(--ink-3);text-align:center}
.trow .tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .tc{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}

.foldertitle{font-family:var(--serif);font-size:26px;margin:4px 0 0;line-height:1.2}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px;margin-bottom:24px}
.fcard{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);cursor:pointer}
.fcard:hover{border-color:var(--accent);text-decoration:none}
.fcard b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.fcard span{font-size:11.5px;color:var(--ink-3)}

.frow{display:flex;align-items:center;gap:14px;padding:10px 13px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);margin-bottom:6px;cursor:pointer}
.frow:hover{border-color:var(--line-2);text-decoration:none}
.ftext{flex:1;min-width:0}
.ftext b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.3}
.ftext .fname{font-size:11px;color:var(--ink-3);font-family:ui-monospace,Menlo,monospace}
.fmeta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:none}

/* ========================================================== Markierungen */
.annotbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);margin-bottom:16px}
/* The swatches belong to the highlighter: dimmed while it is switched off,
   so the toolbar shows at a glance whether selecting text will mark. */
.swatches{display:flex;gap:5px;opacity:.45;transition:opacity .15s}
.swatches.armed{opacity:1}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;box-shadow:0 0 0 1px var(--line-2)}
.swatch.on{border-color:var(--panel);box-shadow:0 0 0 2px var(--accent)}
.swatch.sm{width:18px;height:18px}
.annothelp{font-size:11.5px;color:var(--ink-3);margin-left:6px}
.annotinfo{font-size:11.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.popttl{font-size:12px;color:var(--ink-3);font-style:italic;line-height:1.4;
  border-left:2px solid var(--line-2);padding-left:8px}
.swatch.sm.on{box-shadow:0 0 0 2px var(--accent)}
.annotwarn{font-size:11.5px;color:var(--warn);flex-basis:100%}

/* While the marker is on, the selection itself previews the colour you will
   get — the clearest possible signal that the mode is active. */
.doc.markon{--selcolor:#e0a800}
.doc.markon ::selection,.doc.markon::selection{
  background:color-mix(in srgb,var(--selcolor) 42%,transparent)}

mark.hl{border-radius:2px;padding:.05em 0;color:inherit;cursor:pointer}
mark.hl-gelb{background:rgba(224,168,0,.32)}
mark.hl-gruen{background:rgba(47,138,85,.26)}
mark.hl-blau{background:rgba(47,107,173,.26)}
mark.hl-rot{background:rgba(179,57,47,.24)}
mark.hl:hover{filter:brightness(1.15)}
@media (prefers-color-scheme:dark){
  mark.hl-gelb{background:rgba(224,168,0,.30)}
  mark.hl-gruen{background:rgba(90,200,140,.24)}
  mark.hl-blau{background:rgba(110,160,230,.26)}
  mark.hl-rot{background:rgba(230,110,100,.26)}
}
.mk{border-left-width:3px!important;border-left-style:solid!important}
.mk-gelb{border-left-color:#e0a800!important}
.mk-gruen{border-left-color:#2f8a55!important}
.mk-blau{border-left-color:#2f6bad!important}
.mk-rot{border-left-color:#b3392f!important}

.selpop{position:fixed;z-index:70;display:flex;align-items:center;gap:6px;padding:7px 9px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:22px;box-shadow:var(--shadow)}
.selpop.wide{flex-direction:column;align-items:stretch;border-radius:var(--r);
  width:min(330px,calc(100vw - 20px));gap:8px}
.selpop-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.selpop-x{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:17px;
  line-height:1;padding:0 4px}
.marknote{width:100%;min-height:74px;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--bg-2);resize:vertical;font-size:13.5px}
.btn.danger:hover{border-color:#b3392f;color:#b3392f}

/* pencil layer */
.inklayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;
  overflow:visible}
.doc.inkon .inklayer{pointer-events:auto;cursor:crosshair}
.doc.inkon{user-select:none;-webkit-user-select:none}

/* per-document note */
.notewrap{margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.notewrap summary{cursor:pointer;padding:10px 14px;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);user-select:none}
.notewrap summary:hover{color:var(--accent)}
.notearea{width:100%;min-height:150px;padding:13px 15px;border:0;border-top:1px solid var(--line);
  background:var(--panel);resize:vertical;font-size:14.5px;line-height:1.6;
  font-family:var(--serif);outline:none;border-radius:0 0 var(--r) var(--r)}
.notefoot{padding:6px 14px 9px;font-size:11px;color:var(--ink-3);
  font-family:ui-monospace,Menlo,monospace}

@media (max-width:860px){
  .annothelp{display:none}
  .side.tree{width:min(320px,88vw)}
  .frow{flex-direction:column;align-items:flex-start;gap:7px}
  .fmeta{justify-content:flex-start}
  .swatch{width:28px;height:28px}
  .annotbar{position:sticky;top:0;z-index:6}
}

/* ============================================================ Anmeldung */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:var(--bg);z-index:200}
.gatebox{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:34px 32px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:11px}
.gatebox h1{font-family:var(--serif);font-size:30px;margin:0;letter-spacing:-.01em}
.gatesub{font-size:13.6px;color:var(--ink-2);line-height:1.5;margin:0 0 10px}
.gatenote{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0;
  padding-top:14px;border-top:1px solid var(--line)}
.gatelink{font-size:12.5px;color:var(--ink-3);align-self:flex-start}
.gatelink:hover{color:var(--accent)}
.signin{display:flex;flex-direction:column;gap:9px;margin-top:14px;
  padding-top:16px;border-top:1px solid var(--line)}
.signin label{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.signin input{padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg-2);font-size:15px;outline:none}
.signin input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.signin .btn{padding:11px;justify-content:center;margin-top:4px}
.gatebox input{padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg-2);font-size:15px;outline:none}
.gatebox input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.gatebox .btn{padding:11px;font-size:14.5px;justify-content:center}
.gatemsg{font-size:13px;color:var(--ink-3);margin:2px 0 0;min-height:1.2em;line-height:1.45}
.gatemsg.ok{color:var(--ok)}
.gatemsg.bad{color:var(--accent)}
.btn.ghost{border-color:transparent;color:var(--ink-3);padding:5px 9px;font-size:12.5px}
.btn.ghost:hover{border-color:var(--line-2);color:var(--accent)}
@media (max-width:560px){#signout{display:none}}