/* Reading app — shared chrome for library, project TOC and reader. */

:root{
  --bg:#fbfaf7; --panel:#f2efe9; --ink:#23201c; --soft:#6a635a;
  --line:#e0dad0; --accent:#c8553d; --accent-soft:#f6e5e0;
  --hl-yellow:#ffe9a3; --hl-green:#c6ecc6; --hl-blue:#c5e2f7; --hl-pink:#f9cfe0;
  --hl-yellow-b:#e0b93a; --hl-green-b:#5aa85a; --hl-blue-b:#3f8fc4; --hl-pink-b:#cc6e97;
  --serif:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-palette]){
    --bg:#15140f; --panel:#1d1b16; --ink:#e8e3d8; --soft:#9a9184;
    --line:#302c25; --accent:#e2795d; --accent-soft:#33231f;
    --hl-yellow:#5c4d17; --hl-green:#25451f; --hl-blue:#1d3a4d; --hl-pink:#4a2233;
    --hl-yellow-b:#c9a63a; --hl-green-b:#68a860; --hl-blue-b:#4e9ac9; --hl-pink-b:#c97fa2;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
     font-size:19px;line-height:1.68;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}

.wrap{max-width:940px;margin:0 auto;padding:78px 32px 120px}
.crumb{font-family:var(--sans);font-size:13px;margin:0 0 26px}
.crumb a{color:var(--soft);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--accent);margin:0 0 12px}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.lede{max-width:640px;color:var(--soft);font-size:18px;margin:0}
.pmeta{font-family:var(--sans);font-size:13px;color:var(--soft);margin:10px 0 0}
.foot{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);
      font-family:var(--sans);font-size:13px;color:var(--soft)}

.btn{display:inline-block;font-family:var(--sans);font-size:13px;text-decoration:none;
     padding:8px 14px;border:1px solid var(--line);border-radius:8px;
     background:var(--panel);color:var(--soft)}
.btn:hover{color:var(--accent);border-color:var(--accent)}

.search input{font-family:var(--sans);font-size:13.5px;padding:8px 13px;width:230px;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.search input:focus{outline:none;border-color:var(--accent)}

/* ---------- library ---------- */

.lib-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;
          justify-content:space-between;margin-bottom:46px}
.lib-actions{display:flex;gap:9px;align-items:center}

.pgrid{list-style:none;margin:0;padding:0;display:grid;gap:16px;
       grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.pcard{border:1px solid var(--line);border-radius:13px;background:var(--panel);
       overflow:hidden;transition:border-color .18s,transform .18s}
.pcard:hover{border-color:var(--pa,var(--accent));transform:translateY(-2px)}
.pcard>a{display:block;padding:22px 24px 20px;text-decoration:none;color:inherit}
.pcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pcard .kind{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pa,var(--accent));border:1px solid currentColor;border-radius:20px;padding:2px 9px}
.pcard .pct{font-family:var(--sans);font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.pcard h2{margin:0 0 5px;font-size:22px;line-height:1.25}
.pcard .by{font-family:var(--sans);font-size:12.5px;color:var(--pa,var(--accent));margin:0 0 10px}
.pcard .desc{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--soft);margin:0 0 14px}
.pcard .pmeta{margin:0 0 14px}
.pbar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--pa,var(--accent))}
.pcard.empty>div{padding:22px 24px}
.pcard.empty code{font-size:12.5px;background:var(--bg);padding:1px 5px;border-radius:4px}

/* ---------- project table of contents ---------- */

.proj-head{margin-bottom:40px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.proj-head .eyebrow{color:var(--pa,var(--accent))}
.toc-list{list-style:none;margin:0;padding:0}
.toc-list li{border-bottom:1px solid var(--line)}
.toc-list a{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:baseline;
  padding:18px 8px;text-decoration:none;color:inherit;border-radius:8px}
.toc-list a:hover{background:var(--panel)}
.toc-list .n{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--accent)}
.toc-list .t strong{display:block;font-size:19px;font-weight:600;line-height:1.3}
.toc-list .t em{display:block;font-family:var(--sans);font-style:normal;font-size:13.5px;
  color:var(--soft);margin-top:4px}
.toc-list .r{font-family:var(--sans);font-size:12.5px;color:var(--soft);white-space:nowrap;text-align:right}
.toc-list .rd{display:block;font-style:normal;color:var(--accent);margin-top:4px}

/* ---------- notes / search listings ---------- */

.ngroup{margin-bottom:34px}
.ngroup h3{font-size:17px;font-family:var(--sans);margin:0 0 12px}
.ngroup h3 a{color:var(--ink);text-decoration:none}
.ngroup h3 a:hover{color:var(--accent)}
.ngroup h3 span{color:var(--soft);font-weight:400;font-size:13px}
.ngroup .item{padding:12px 15px;margin-bottom:10px;border-radius:9px;background:var(--panel);
  border-left:4px solid var(--hl-yellow-b)}
.ngroup .item.c-green{border-left-color:var(--hl-green-b)}
.ngroup .item.c-blue{border-left-color:var(--hl-blue-b)}
.ngroup .item.c-pink{border-left-color:var(--hl-pink-b)}
.ngroup blockquote{margin:0;font-size:16px;line-height:1.55}
.ngroup blockquote b{background:var(--hl-yellow);border-radius:2px}
.ngroup .cmt{margin:9px 0 0;padding-top:9px;border-top:1px dashed var(--line);
  font-family:var(--sans);font-size:13.5px;color:var(--soft)}

/* ---------- bookmarks listing ---------- */

.bm-list{list-style:none;margin:0;padding:0}
.bm-row{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.bm-row a{flex:1;display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto;gap:18px;
  align-items:baseline;padding:16px 8px;text-decoration:none;color:inherit;border-radius:8px}
.bm-row a:hover{background:var(--panel)}
.bm-where{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink)}
.bm-where em{display:block;font-style:normal;font-weight:400;font-size:12.5px;
  color:var(--soft);margin-top:3px}
.bm-label{font-size:15px;line-height:1.5;color:var(--soft)}
.bm-pct{font-family:var(--sans);font-size:12.5px;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bm-del{border:0;background:transparent;color:var(--soft);cursor:pointer;font-size:19px;
  line-height:1;padding:8px 10px;opacity:0}
.bm-row:hover .bm-del{opacity:1}
.bm-del:hover{color:#d24b4b}

/* ---------- reader ---------- */

.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;background:transparent}
#bar{height:100%;width:0;background:var(--accent);transition:width .1s linear}

body.reader aside{position:fixed;top:0;left:0;bottom:0;width:290px;padding:34px 22px;
  overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);z-index:50;
  transition:transform .22s ease}
.side-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px}
.brand{display:block;flex:1;font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.3;
       color:var(--ink);text-decoration:none}
.side-toggle{flex:none;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--soft);
  font-size:15px;line-height:1}
.side-toggle:hover{color:var(--accent);border-color:var(--accent)}
.brand small{display:block;font-weight:400;font-size:12px;letter-spacing:.09em;
             text-transform:uppercase;color:var(--soft);margin-top:6px}
.toc{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 2px}
.toc a{display:flex;gap:10px;padding:9px 11px;border-radius:7px;font-family:var(--sans);
       font-size:13.5px;line-height:1.4;color:var(--soft);text-decoration:none}
.toc a:hover{background:var(--bg);color:var(--ink)}
.toc .n{font-variant-numeric:tabular-nums;opacity:.55;flex:none}
.toc .current a{background:var(--accent-soft);color:var(--pa,var(--accent));font-weight:600}
/* saved spots for the current piece, listed under the contents */
.side-bm{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.side-bm[hidden]{display:none}
.side-bm h4{margin:0 0 9px;font-family:var(--sans);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);font-weight:700}
.side-bm ol{list-style:none;margin:0;padding:0}
.side-bm li{display:flex;align-items:flex-start;gap:4px;margin-bottom:2px}
.side-bm .go{flex:1;display:flex;gap:8px;align-items:baseline;text-align:left;padding:7px 9px;
  border:0;border-radius:7px;background:transparent;color:var(--soft);cursor:pointer;
  font-family:var(--sans);font-size:12.5px;line-height:1.4}
.side-bm .go:hover{background:var(--bg);color:var(--ink)}
.side-bm .go i{flex:none;font-style:normal;font-variant-numeric:tabular-nums;opacity:.6;font-size:11px}
.side-bm .go span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-bm .rm{flex:none;border:0;background:transparent;color:var(--soft);cursor:pointer;
  font-size:15px;line-height:1;padding:6px 4px;opacity:0}
.side-bm li:hover .rm{opacity:1}
.side-bm .rm:hover{color:#d24b4b}

.bm-btn{position:fixed;right:26px;bottom:134px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  z-index:40;font-size:16px;transition:border-color .2s,transform .2s}
.bm-btn:hover{border-color:var(--accent)}
.bm-btn.saved{border-color:var(--accent);transform:scale(1.15)}

.back{display:block;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:12.5px;color:var(--soft);text-decoration:none}
.back:hover{color:var(--accent)}

body.reader main{margin-left:290px;padding:70px 40px 140px}
article{max-width:720px;margin:0 auto}

/* Only the article is text; everything else is chrome. Without this a drag that
   wanders past the column picks up the sidebar, the pager, or the whitespace
   between elements -- and once the selection spans those, the browser paints the
   highlight across the full width of the common ancestor, lighting up the empty
   gutters either side of the column. Confining it keeps the highlight on words. */
body.reader{-webkit-user-select:none;user-select:none}
body.reader article{-webkit-user-select:text;user-select:text;touch-action:manipulation}
body.reader .pager{-webkit-user-select:none;user-select:none}
/* Fields and your own notes stay selectable -- those you do want to copy out. */
body.reader input,body.reader textarea,body.reader .anno-panel .list{
  -webkit-user-select:text;user-select:text}

::selection{background:var(--accent-soft);color:var(--ink)}
.post-head{margin-bottom:44px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.meta{font-family:var(--sans);font-size:13.5px;color:var(--soft);margin:0}
.meta a{color:var(--soft)}

article h2{font-size:30px;line-height:1.2;margin:2.2em 0 .6em}
article h3{font-size:23px;margin:1.9em 0 .5em}
article h4{font-size:20px;margin:1.7em 0 .5em}
article p{margin:0 0 1.25em}
article a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)}
article a:hover{border-bottom-color:var(--accent)}
article img{display:block;max-width:100%;height:auto;margin:1.9em auto;border-radius:5px}
article blockquote{margin:1.8em 0;padding:.2em 0 .2em 22px;border-left:3px solid var(--accent);
  color:var(--soft);font-style:italic}
article ul,article ol{padding-left:1.4em;margin:0 0 1.3em}
article li{margin:.4em 0}
article hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
article table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;
  margin:1.8em 0;display:block;overflow-x:auto}
article td,article th{border:1px solid var(--line);padding:8px 11px;text-align:left}
article iframe,article embed{max-width:100%}

.pager{display:flex;justify-content:space-between;gap:16px;margin-top:70px;
  padding-top:26px;border-top:1px solid var(--line);font-family:var(--sans);font-size:14px}
.pager a{color:var(--accent);text-decoration:none;max-width:47%}
.pager a.r{text-align:right}
.pager span{color:var(--soft);display:block;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:4px}

.top{position:fixed;right:26px;bottom:26px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;font-size:17px}
.top.show{opacity:1;pointer-events:auto}
.menu-btn{display:none}

/* collapsed sidebar (desktop) — state lives on <html data-side> so it applies pre-paint */
body.reader main{transition:margin-left .22s ease}
:root[data-side="collapsed"] body.reader aside{transform:translateX(-100%)}
:root[data-side="collapsed"] body.reader main{margin-left:0}
:root[data-side="collapsed"] .menu-btn{display:block;position:fixed;top:14px;left:14px;z-index:55;
  width:40px;height:40px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:17px;cursor:pointer}

@media(max-width:980px){
  .wrap{padding:64px 20px 110px}
  body.reader aside{transform:translateX(-100%);transition:transform .25s;width:270px}
  body.reader aside.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.reader main{margin-left:0;padding:64px 20px 110px}
  .menu-btn{display:block;position:fixed;top:14px;left:14px;z-index:55;width:40px;height:40px;
    border-radius:9px;border:1px solid var(--line);background:var(--panel);
    color:var(--ink);font-size:17px;cursor:pointer}
  .search input{width:100%}
  .bm-btn{right:14px;bottom:128px}
  .bm-row a{grid-template-columns:1fr auto;gap:6px 14px}
  .bm-label{grid-column:1/-1}
  .toc-list a{grid-template-columns:32px 1fr;gap:12px}
  .toc-list .r{grid-column:2;text-align:left}
}