/* Sober: één lettertype (Mulish), twee tekstgroottes (16px, 12px), ritme in stappen van 6px */
:root{
  --bg:#fff; --ink:#000; --mute:#6b6b6b; --line:#e6e6e6; --mark:#f1f1f1;
  --f:'Mulish','Muli',sans-serif;
  --t:16px; --s:12px; --u:6px;
  --side-w:264px; --top-h:66px;
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:300 var(--t)/1.5 var(--f);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;padding:0}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--bg);padding:6px 12px;z-index:99}

/* links / knoppen: gewone tekst */
.link{font-size:var(--t);font-weight:300;color:var(--ink);text-decoration:none;cursor:pointer}
.link:hover,.link.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.link:disabled{color:var(--mute);text-decoration:none;cursor:default}
.link.block{display:block;margin-top:12px}
.btn{font-size:var(--t);font-weight:400;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.btn.ghost{font-weight:300;text-decoration:none;color:var(--mute)}
.btn.ghost:hover{color:var(--ink)}
.btn.danger{color:var(--mute)}
.grow{flex:1}

/* kop */
.top{position:sticky;top:0;z-index:30;height:var(--top-h);display:flex;align-items:center;gap:36px;padding:0 36px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:12px;width:calc(var(--side-w) - 36px);flex-shrink:0;text-decoration:none;font-size:var(--t)}
.brand img{width:auto;height:28px;display:block}
.brand a{text-decoration:none}
.brand-home,.brand-home:hover{text-decoration:none}
.search{flex:1;min-width:0;max-width:540px;display:flex;align-items:center;border-bottom:1px solid var(--line);height:36px}
.search:focus-within{border-color:var(--ink)}
.search input{flex:1;min-width:0;outline:none;font-size:var(--t);font-weight:300}
.search input::placeholder{color:var(--mute)}
.top-actions{margin-left:auto;flex-shrink:0}
.only-mobile{display:none}

/* opbouw */
.layout{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:calc(100vh - var(--top-h))}
.side{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));overflow:auto;padding:30px 24px 48px 36px;scrollbar-width:thin}
.side-block+.side-block{margin-top:36px}
.side h2,.side-sub,.label{font-size:var(--s);font-weight:400;color:var(--mute);margin-bottom:12px;display:block}
.side-sub{margin-top:24px}
.side-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.side-head h2{margin:0}
.theme-list{display:flex;flex-direction:column}
.theme-item{display:flex;align-items:baseline;gap:6px;width:100%;text-align:left;padding:3px 0;font-size:var(--t);font-weight:300;cursor:pointer}
.theme-item .dot{display:none}
.theme-item .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-item .tcount{font-size:var(--s);color:var(--mute);font-variant-numeric:tabular-nums}
.theme-item:hover .tname{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.theme-item.on .tname{font-weight:600}
.theme-item .edit{font-size:var(--s);color:var(--mute);opacity:0}
.theme-item:hover .edit,.theme-item:focus-within .edit{opacity:1}
.custom-empty{font-size:var(--s);color:var(--mute)}
.io{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:var(--s);color:var(--mute)}
.io .link{font-size:var(--s);color:var(--mute)}
.io .link:hover{color:var(--ink)}

/* segmenten en chips als platte tekst */
.seg{display:flex;gap:12px;flex-wrap:wrap}
.seg button,.chip{font-size:var(--t);font-weight:300;color:var(--mute)}
.seg button:hover,.chip:hover{color:var(--ink)}
.seg button.on,.chip.on{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.side-head .seg button{font-size:var(--s)}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.field{margin-bottom:24px}
.hint{font-size:var(--s);color:var(--mute);margin-top:6px;line-height:1.5}

/* hoofdkolom */
.main{padding:30px 36px 72px 36px;max-width:960px;min-width:0}
.bundle-head{margin-bottom:24px}
.eyebrow{font-size:var(--s);color:var(--mute);margin-bottom:6px}
.bundle-title{font-size:var(--t);font-weight:600;line-height:1.5;margin-bottom:6px}
.bundle-title em{font-style:normal;font-weight:300}
.bundle-desc{max-width:60ch;margin-bottom:12px}
.bundle-stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--s);color:var(--mute)}
.bundle-stats b{font-weight:400;color:var(--ink)}
.kw-row{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:var(--s);color:var(--mute)}
.kw.more{font-size:var(--s);color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.list-tools{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;font-size:var(--s);color:var(--mute);border-top:1px solid var(--line)}
.sort{display:flex;align-items:baseline;gap:6px}
.sort select{font-size:var(--s);font-weight:300;color:var(--ink);cursor:pointer}

.poem-list{list-style:none;padding:0}
.list-head{display:grid;grid-template-columns:42px minmax(0,1fr) 150px 96px;gap:18px;padding:6px 0;font-size:var(--s);color:var(--mute)}
.list-head span:last-child{text-align:right}
.row{display:grid;grid-template-columns:42px minmax(0,1fr) 150px 96px;gap:18px;align-items:baseline;padding:12px 0;cursor:pointer}
.row .n{font-size:var(--s);color:var(--mute);font-variant-numeric:tabular-nums}
.row .r-t{font-size:var(--t);font-weight:400;overflow-wrap:anywhere}
.row:hover .r-t{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.row .img-badge{font-size:var(--s);color:var(--mute);font-weight:300}
.row .snip{display:block;font-size:var(--t);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .tags{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:6px}
.row .tag{font-size:var(--s);color:var(--mute)}
.row .tag.hit{color:var(--ink)}
.row .a,.row .d{font-size:var(--s);color:var(--mute)}
.row .d{text-align:right;font-variant-numeric:tabular-nums}
mark{background:var(--mark);color:inherit}

.empty{padding:48px 0}
.empty p{margin-bottom:12px}
.empty-title{font-weight:600}
.foot{margin-top:48px;font-size:var(--s);color:var(--mute);max-width:66ch}

/* leesweergave: volledig scherm, zoals een blogpagina */
.reader-backdrop{position:fixed;inset:0;background:var(--bg);z-index:40}
.reader{position:fixed;inset:0;background:var(--bg);z-index:41;display:flex;flex-direction:column}
.reader-bar{display:flex;align-items:center;gap:18px;height:var(--top-h);padding:0 36px;flex-shrink:0}
.reader-pos{font-size:var(--s);color:var(--mute);font-variant-numeric:tabular-nums}
.reader-body{flex:1;overflow:auto;padding:24px 36px 96px}
.reader-body>*{max-width:600px;margin-left:auto;margin-right:auto}
.r-meta{display:none}
.r-title{font-size:var(--t);font-weight:600;margin-bottom:6px}
.r-author{font-size:var(--s);color:var(--mute);margin-bottom:6px}
.r-themes{display:flex;flex-wrap:wrap;gap:0 12px;margin-bottom:36px}
.r-themes button{font-size:var(--s);color:var(--mute)}
.r-themes button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.r-images{display:grid;gap:12px;margin-bottom:36px}
.r-images img{width:100%;height:auto;display:block}
.r-text{font-size:var(--t);font-weight:300;line-height:1.75;white-space:pre-wrap;overflow-wrap:break-word}
.r-stamp{margin-top:36px;font-size:var(--s);color:var(--mute);font-variant-numeric:tabular-nums}
.r-source{display:block;margin-top:6px;font-size:var(--s);color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.r-source:hover{color:var(--ink)}
.pin-wrap{position:relative}
.pin-menu{position:absolute;right:0;top:calc(100% + 12px);min-width:228px;background:var(--bg);border:1px solid var(--line);padding:6px 12px;z-index:5}
.pin-menu label{display:flex;gap:6px;align-items:center;padding:6px 0;font-size:var(--t);cursor:pointer}
.pin-menu input{accent-color:#000}
.pin-menu .pm-empty{font-size:var(--s);color:var(--mute);padding:6px 0}
.pin-menu .pm-new{display:block;width:100%;text-align:left;padding:6px 0;border-top:1px solid var(--line);margin-top:6px;font-size:var(--t)}
.pin-menu .pm-new:hover{text-decoration:underline;text-underline-offset:6px}

/* thema-editor */
.editor{border:1px solid var(--line);padding:0;width:min(480px,calc(100% - 24px));background:var(--bg);color:var(--ink)}
.editor::backdrop{background:rgba(255,255,255,.85)}
.editor form{padding:30px}
.editor h2{font-size:var(--t);font-weight:600;margin-bottom:24px}
.f{display:block;font-size:var(--s);color:var(--mute);margin-bottom:18px}
.f input,.f textarea{display:block;width:100%;margin-top:6px;border-bottom:1px solid var(--line);padding:6px 0;font-size:var(--t);font-weight:300;color:var(--ink);resize:vertical;outline:none}
.f input:focus,.f textarea:focus{border-color:var(--ink)}
.opt{color:var(--mute)}
code{font:inherit;font-weight:400;color:var(--ink)}
.preview{font-size:var(--s);color:var(--mute);margin-bottom:12px}
.preview b{font-weight:400;color:var(--ink)}
.editor-actions{display:flex;gap:18px;align-items:baseline;margin-top:24px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:6px 12px;font-size:var(--s);z-index:60}

@media (max-width:1100px){.row,.list-head{grid-template-columns:36px minmax(0,1fr) 96px}.row .a,.list-head .h-a{display:none}}
@media (max-width:860px){
  :root{--top-h:60px}
  .top{gap:18px;padding:0 18px}
  .brand{width:auto}.brand-home{display:none}
  .only-mobile{display:inline}
  .layout{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:var(--top-h);bottom:0;height:auto;width:min(300px,86vw);background:var(--bg);z-index:35;transform:translateX(-102%);transition:transform .2s;border-right:1px solid var(--line);padding-left:18px}
  .side.open{transform:none}
  .main{padding:24px 18px 60px}
  .reader-bar{padding:0 18px;gap:12px}
  .reader-body{padding:18px 18px 72px}
  .row,.list-head{grid-template-columns:minmax(0,1fr) 84px;gap:12px}
  .row .n,.list-head span:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.r-images:empty{display:none}