/* search.dhammacakka.in — the library.
   Same house palette as research.dhammacakka.in: stone ground, incised display
   serif, seal green. The shelf, the reader and the results are the additions. */
:root{
  --stone:#DFDAC1; --stone-2:#D5CFB2; --card:#E9E4CE; --incised:#2B2820;
  --ink:#3E392C; --ink-soft:#6B6552;
  --accent:#14663A; --accent-2:#2F8A55;
  --rule:#BFB694; --notebg:#EDE6C6; --noteline:#CFC49B; --track:#E3DCBE;
  --plank:#C3B893; --plank-edge:#A99C74; --mark:#F2E39A;
  /* the shelf itself — warm walnut, one step darker than the stone ground */
  --wood:#6B5133; --wood-dark:#503B24; --case-edge:#3B2B1A;
  --plank-top:#C29A62; --plank-face:#8C6B44; --plank-foot:#4C3821;
  --plank-shade:rgba(0,0,0,.42);
  /* the board's own top surface, seen at an angle — the thing that makes the
     case read as having depth rather than being a painted wall */
  --shelf-top:#A98254; --shelf-back:#4A3722;
  --wood-ink:#F6EDDA; --wood-ink-soft:#CDB894;
  --measure:1180px;        /* one column for header, page and footer alike */
  --serif:'Spectral',Georgia,serif;
  --disp:'Source Serif 4','Spectral',Georgia,serif;
  --ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --scroll:rgba(88,78,58,.30); --scroll-live:rgba(66,58,42,.52);
}
:root[data-theme="dark"]{
  --stone:#1C1917; --stone-2:#221E1B; --card:#252119; --incised:#EDE6D8;
  --ink:#D6CCBC; --ink-soft:#9A8F80;
  --accent:#7FB894; --accent-2:#9ACFAE;
  --rule:#413A31; --notebg:#292418; --noteline:#463D28; --track:#231F16;
  --plank:#3A342B; --plank-edge:#4B4437; --mark:#5C4E1E;
  --wood:#39291B; --wood-dark:#281C12; --case-edge:#150E08;
  --plank-top:#6E5334; --plank-face:#493419; --plank-foot:#231810;
  --plank-shade:rgba(0,0,0,.55);
  --shelf-top:#5C452B; --shelf-back:#241A11;
  --wood-ink:#E8DAC0; --wood-ink-soft:#A5937A;
  --scroll:rgba(226,214,190,.22); --scroll-live:rgba(236,226,206,.42);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --stone:#1C1917; --stone-2:#221E1B; --card:#252119; --incised:#EDE6D8;
    --ink:#D6CCBC; --ink-soft:#9A8F80;
    --accent:#7FB894; --accent-2:#9ACFAE;
    --rule:#413A31; --notebg:#292418; --noteline:#463D28; --track:#231F16;
    --plank:#3A342B; --plank-edge:#4B4437; --mark:#5C4E1E;
  --wood:#39291B; --wood-dark:#281C12; --case-edge:#150E08;
  --plank-top:#6E5334; --plank-face:#493419; --plank-foot:#231810;
  --plank-shade:rgba(0,0,0,.55);
  --shelf-top:#5C452B; --shelf-back:#241A11;
  --wood-ink:#E8DAC0; --wood-ink-soft:#A5937A;
  --scroll:rgba(226,214,190,.22); --scroll-live:rgba(236,226,206,.42);
  }
}
body.wide{--measure:1560px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--stone);color:var(--ink);
  font:18px/1.75 var(--serif);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
code{font:.88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--track);padding:1px 5px;border-radius:3px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:20;background:var(--stone-2);
  border-bottom:1px solid var(--rule)}
.bar{max-width:var(--measure);margin:0 auto;padding:0 44px;
  display:flex;align-items:center;gap:22px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;margin-right:44px;min-width:0}
.brand img{width:42px;height:42px;object-fit:contain;flex:0 0 42px}
.brand:hover{text-decoration:none}
.brand .kicker{display:block;font:9.5px var(--ui);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.brand b{display:block;font:600 18.5px/1.2 var(--disp);color:var(--incised);
  letter-spacing:.005em;white-space:nowrap}
nav.site{display:flex;gap:24px;margin-right:auto;flex-wrap:wrap}
nav.site a{font:15px var(--serif);color:var(--ink);white-space:nowrap;
  padding:3px 0;border-bottom:2px solid transparent}
nav.site a:hover{text-decoration:none;border-bottom-color:var(--rule)}
nav.site a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.signin{font:12.5px var(--ui);letter-spacing:.03em;color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;padding:7px 14px;white-space:nowrap;
  max-width:26ch;overflow:hidden;text-overflow:ellipsis}
.signin:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.tswitch{background:transparent;border:1px solid var(--rule);border-radius:3px;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-soft);flex:0 0 auto}
.tswitch svg{width:17px;height:17px}
.tswitch .moon{display:none}
:root[data-theme="dark"] .tswitch .moon{display:block}
:root[data-theme="dark"] .tswitch .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tswitch .moon{display:block}
  :root:not([data-theme="light"]) .tswitch .sun{display:none}
}

/* ---------- page frame ---------- */
main{max-width:var(--measure);margin:0 auto;padding:44px 44px 56px}
p{margin:0 0 20.8px;max-width:70ch}
h1.page{font:600 clamp(28px,3.2vw,42px)/1.14 var(--disp);letter-spacing:-.012em;
  color:var(--incised);margin:0 0 8px;text-wrap:balance}
h2{font:600 24px/1.22 var(--disp);color:var(--incised);margin:52px 0 4px}
h3{font:600 18.5px/1.35 var(--disp);color:var(--incised);margin:26px 0 8px}
.chapline{font:11px var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px}
.lede{font-size:19.5px;line-height:1.7;color:var(--ink-soft);max-width:72ch;margin-bottom:22px}
.hint{font:13.5px var(--ui);color:var(--ink-soft)}
.plbl{font:10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px}
.note{background:var(--notebg);border-left:3px solid var(--accent);
  border-top:1px solid var(--noteline);border-right:1px solid var(--noteline);
  border-bottom:1px solid var(--noteline);padding:15px 20px;margin:0 0 12px;
  font:14.5px/1.65 var(--ui);color:var(--ink);max-width:none}
.note b{color:var(--incised)}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:18px 20px;font:15px/1.65 var(--serif)}
.cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:56px;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:24px}}
footer.page{border-top:1px solid var(--rule);max-width:var(--measure);margin:0 auto;
  padding:26px 44px 60px;font:13px/1.9 var(--ui);color:var(--ink-soft)}
.btn{display:inline-block;font:13px var(--ui);letter-spacing:.03em;
  background:var(--accent);color:#fff;padding:10px 18px;border-radius:3px;
  border:1px solid var(--accent)}
.btn:hover{text-decoration:none;background:var(--accent-2);border-color:var(--accent-2)}
:root[data-theme="dark"] .btn{color:#16241C}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn.ghost:hover{background:var(--track);color:var(--accent)}
.crumb{font:12px var(--ui);letter-spacing:.04em;color:var(--ink-soft);margin-bottom:14px}
.crumb span{opacity:.5;margin:0 6px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;padding:0;margin:26px 0 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.facts li{padding:16px 20px 15px 0;font:11px var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.facts li b{display:block;font:600 26px/1.15 var(--disp);color:var(--incised);
  letter-spacing:0;text-transform:none;margin-bottom:3px;font-variant-numeric:tabular-nums}
.facts li.zero b{color:var(--accent)}

/* ---------- the search field ---------- */
.find{margin:0 0 8px;max-width:820px}
.find .field{display:flex;align-items:center;gap:0;background:var(--card);
  border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.find .field:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.find svg{width:18px;height:18px;color:var(--ink-soft);margin:0 2px 0 14px;flex:0 0 18px}
.find input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:16px var(--serif);padding:12px 12px;outline:0}
.find input::placeholder{color:var(--ink-soft);opacity:.75}
.find select{border:0;border-left:1px solid var(--rule);background:transparent;
  color:var(--ink-soft);font:12.5px var(--ui);padding:12px 8px;outline:0;cursor:pointer}
.find button{border:0;border-left:1px solid var(--rule);background:var(--accent);
  color:#fff;font:12.5px var(--ui);letter-spacing:.05em;padding:13px 20px;cursor:pointer}
.find button:hover{background:var(--accent-2)}
:root[data-theme="dark"] .find button{color:#16241C}
.find.big .field{border-width:1.5px}
.find.big input{font-size:18px;padding:15px 12px}
.searchtop{border-bottom:1px solid var(--rule);margin:0 0 26px;padding-bottom:18px}
.scope{font:13.5px var(--ui);color:var(--ink-soft);margin:10px 0 0}
.scope .clear{margin-left:10px}


/* the way between the reading room and the review desk */
.crossto{margin:18px 0 0;font:13px var(--ui)}
.crossto a{color:var(--accent);text-decoration:none}
.crossto a:hover{text-decoration:underline}


/* ---------- the search engine's own front page ---------- */
/* Its own domain, its own room: one column, the box near the top, and nothing
   of the library's furniture around it. */
body.bare .bar{padding-top:14px;padding-bottom:14px}
body.bare nav.site a{font-size:13.5px}
.shome{max-width:74ch;margin:0 auto;padding:10px 0 0}
.shome .page{margin-bottom:10px}
.shome .find{max-width:none;margin-top:26px}
.shome .examples{font:14.5px/1.9 var(--serif);color:var(--ink-soft);margin:14px 0 0}
.shome .examples a{margin-right:2px}
.shome .shints{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:14px;
  border-top:1px solid var(--rule);padding-top:22px}
.shome .shints li{font:14.5px/1.7 var(--serif);color:var(--ink-soft);max-width:70ch}
.shome .shints b{color:var(--incised);font-weight:600}
.shome .shints code{font:12.5px var(--ui);background:var(--track);
  padding:1px 6px;border-radius:3px;color:var(--ink)}
.shome .tolib{margin:34px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.shome .tolib span{font:14px var(--serif);color:var(--ink-soft)}

/* ---------- the scrollbars ---------- */
/* A grey bar on a white strip is the browser's furniture, not the room's: the
   track is left to the paper it sits on and the thumb is the page's own ink. */
html{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.volscroll,ol.toc,pre,.tblwrap{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border:3px solid transparent;
  background-clip:padding-box;border-radius:8px}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--scroll-live);
  background-clip:padding-box}

/* ---------- the bookcase ---------- */
/* One case, standing on the page, with a rail of tabs across its head. The
   tab changes what stands inside; the case itself never moves. Inside, every
   volume is the same size, so a shelf is one unbroken board at one height
   right across the case — the board's top surface is seen at an angle, its
   front edge is a thick lit plank, and the label plaques are screwed on
   afterwards, below the board, where a library puts them. */
/* The case runs the full width of the window, but its contents come back to
   the page's own column: the percentages below resolve against .bookcase,
   which still sits inside the measure. */
.bookcase{margin:26px 0 0;
  /* The row is built from the top down, and the numbers are exact, because the
     board is drawn by the case and the volume is laid out by the grid — if the
     two disagree by a pixel the book floats. Top to bottom:
       lift        air above the volume
       cover-h     the volume itself, standing
       board-top   the board's top surface, seen at an angle behind the volumes
       board-face  the front edge of the plank
     Nothing else: a compartment is the back wall, the volume standing in it and
     the board it stands on. The name plaque stands on the board in front of the
     volume's foot, lapping over it — an extra band between one shelf and the
     next only makes the case read as stripes, and a board thick enough to carry
     a plaque on its face makes the whole case look coarse. */
  /* The volume has to fit inside its compartment: the case is the fixed thing
     and the book stands in it, so --lift + --cover-h always comes to --stand,
     and a volume never reaches down over the board it stands on. */
  --cover-h:176px;
  --board-top:22px;
  --board-face:30px;
  --lift:34px;
  --cap-w:30px;                       /* frame 12 + the side wall behind it */
  --board:calc(var(--board-top) + var(--board-face));
  --stand:calc(var(--lift) + var(--cover-h));   /* where the volumes stand */
  --row:calc(var(--stand) + var(--board));}
.bookcase > .rail, .bookcase > .railnote, .bookcase > .case, .bookcase > .plinth{
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:calc(50vw - 50% - 6px);padding-right:calc(50vw - 50% - 6px)}
/* …except inside the case, where the volumes must clear the end pieces */
.bookcase > .case{
  padding-left:max(var(--cap-w), calc(50vw - 50% - 6px));
  padding-right:max(var(--cap-w), calc(50vw - 50% - 6px))}
.bookcase > input{position:absolute;opacity:0;pointer-events:none}
/* the base rail: the case has to end on a board, not stop in mid-air */
.plinth{height:26px;border-bottom:1px solid var(--case-edge);
  background:url(shelf-base.svg) left top / 100% 100% no-repeat, var(--wood-dark);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}

/* the head of the case: its own top frame, cut from the same photograph as the
   shelving, so the rail carrying the tabs is the same timber as the case */
.rail{background:url(shelf-rail.svg) left top / 100% 100% no-repeat, var(--wood-dark);
  border-top:1px solid var(--case-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.28)}
.railtabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 0 0}
.railtabs label{display:inline-flex;align-items:baseline;gap:9px;cursor:pointer;
  padding:9px 20px 10px;border-radius:4px 4px 0 0;
  border:1px solid rgba(0,0,0,.45);border-bottom:none;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10));
  font:13.5px var(--serif);color:var(--wood-ink-soft);
  text-shadow:0 1px 0 rgba(0,0,0,.5)}
.railtabs label:hover{color:var(--wood-ink);background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.02))}
.railtabs label b{font:600 11px var(--ui);font-variant-numeric:tabular-nums;
  letter-spacing:.06em;color:var(--wood-ink-soft);opacity:.8}
/* the chosen tab is the same board as the case below it, and joins onto it */
.bookcase > input:checked + * ~ .rail label,
.rail label{transition:background .15s ease, color .15s ease}
#sh-l0:checked ~ .rail label[for="sh-l0"],
#sh-l1:checked ~ .rail label[for="sh-l1"],
#sh-l2:checked ~ .rail label[for="sh-l2"],
#sh-l3:checked ~ .rail label[for="sh-l3"],
#sh-l4:checked ~ .rail label[for="sh-l4"]{
  background:linear-gradient(180deg,#f3f5f6 0%,#d4d9dd 44%,#aab0b6 54%,#e4e8eb 100%);
  color:#2b3034;text-shadow:0 1px 0 rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 -1px 4px rgba(0,0,0,.3)}
#sh-l0:checked ~ .rail label[for="sh-l0"] b,
#sh-l1:checked ~ .rail label[for="sh-l1"] b,
#sh-l2:checked ~ .rail label[for="sh-l2"] b,
#sh-l3:checked ~ .rail label[for="sh-l3"] b,
#sh-l4:checked ~ .rail label[for="sh-l4"] b{color:#5a6167;opacity:1}

/* the line under the tabs, naming what is on the shelves */
.railnote{display:block;margin:0;max-width:none;padding-top:11px;padding-bottom:12px;
  background:linear-gradient(rgba(24,14,6,.62), rgba(24,14,6,.72)),
    url(shelf-rail.svg) left bottom / 100% 220% no-repeat, var(--wood-dark);
  border-top:1px solid rgba(0,0,0,.45);
  font:14.5px/1.5 var(--serif);color:var(--wood-ink);
  text-shadow:0 1px 0 rgba(0,0,0,.5)}

/* the shelves */
.case{
  display:grid;grid-auto-rows:auto;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(136px,1fr));
  border-top:1px solid var(--case-edge);border-bottom:2px solid var(--case-edge);
  /* The case is built the way a digital bookcase is built: an end piece at each
     side showing the inner wall in perspective, and between them one shelf drawn
     once and repeated down the case. Three background layers, in that order —
     the artwork is ours (public/shelf-*.svg), the construction is the standard
     one. The middle is stretched, not tiled, so there is no seam across it. */
  background:
    url(shelf-cap-left.svg)  left  top / var(--cap-w) var(--row) repeat-y,
    url(shelf-cap-right.svg) right top / var(--cap-w) var(--row) repeat-y,
    url(shelf-row.svg)       left  top / 100%         var(--row) repeat-y,
    var(--wood);
  box-shadow:inset 0 3px 9px rgba(0,0,0,.5), inset 0 -2px 6px rgba(0,0,0,.35),
    inset 16px 0 22px -16px rgba(0,0,0,.7), inset -16px 0 22px -16px rgba(0,0,0,.7);
}
/* At night the case is the same piece of furniture, only the room is darker:
   one flat layer over the shelving rather than a different set of artwork. */
:root[data-theme="dark"] .rail{background:
  linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
  url(shelf-rail.svg) left top / 100% 100% no-repeat, var(--wood-dark)}
:root[data-theme="dark"] .plinth{background:
  linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
  url(shelf-base.svg) left top / 100% 100% no-repeat, var(--wood-dark)}
:root[data-theme="dark"] .case{background-image:
  linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
  url(shelf-cap-left.svg), url(shelf-cap-right.svg), url(shelf-row.svg);
  background-size:100% 100%, var(--cap-w) var(--row), var(--cap-w) var(--row), 100% var(--row);
  background-position:left top, left top, right top, left top;
  background-repeat:no-repeat, repeat-y, repeat-y, repeat-y}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rail{background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
    url(shelf-rail.svg) left top / 100% 100% no-repeat, var(--wood-dark)}
  :root:not([data-theme="light"]) .plinth{background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
    url(shelf-base.svg) left top / 100% 100% no-repeat, var(--wood-dark)}
  :root:not([data-theme="light"]) .case{background-image:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
    url(shelf-cap-left.svg), url(shelf-cap-right.svg), url(shelf-row.svg);
    background-size:100% 100%, var(--cap-w) var(--row), var(--cap-w) var(--row), 100% var(--row);
    background-position:left top, left top, right top, left top;
    background-repeat:no-repeat, repeat-y, repeat-y, repeat-y}
}

/* The chosen shelf is the one that stays: everything is shown by default and
   the other three are taken away. Written the other way round — hidden by
   default, shown when its tab is checked — a page cached from before the tabs
   existed meets this stylesheet and the whole case disappears, which is a bad
   way to fail. This way the worst case is four shelves at once. */
#sh-l0:checked ~ .case-l1,
#sh-l0:checked ~ .case-l2,
#sh-l0:checked ~ .case-l3,
#sh-l0:checked ~ .case-l4,
#sh-l1:checked ~ .case-l0,
#sh-l2:checked ~ .case-l0,
#sh-l3:checked ~ .case-l0,
#sh-l4:checked ~ .case-l0,
#sh-l1:checked ~ .case-l2,
#sh-l1:checked ~ .case-l3,
#sh-l1:checked ~ .case-l4,
#sh-l2:checked ~ .case-l1,
#sh-l2:checked ~ .case-l3,
#sh-l2:checked ~ .case-l4,
#sh-l3:checked ~ .case-l1,
#sh-l3:checked ~ .case-l2,
#sh-l3:checked ~ .case-l4,
#sh-l4:checked ~ .case-l1,
#sh-l4:checked ~ .case-l2,
#sh-l4:checked ~ .case-l3{display:none}
#sh-l0:checked ~ .note-l1,
#sh-l0:checked ~ .note-l2,
#sh-l0:checked ~ .note-l3,
#sh-l0:checked ~ .note-l4,
#sh-l1:checked ~ .note-l0,
#sh-l2:checked ~ .note-l0,
#sh-l3:checked ~ .note-l0,
#sh-l4:checked ~ .note-l0,
#sh-l1:checked ~ .note-l2,
#sh-l1:checked ~ .note-l3,
#sh-l1:checked ~ .note-l4,
#sh-l2:checked ~ .note-l1,
#sh-l2:checked ~ .note-l3,
#sh-l2:checked ~ .note-l4,
#sh-l3:checked ~ .note-l1,
#sh-l3:checked ~ .note-l2,
#sh-l3:checked ~ .note-l4,
#sh-l4:checked ~ .note-l1,
#sh-l4:checked ~ .note-l2,
#sh-l4:checked ~ .note-l3{display:none}

.bk{height:var(--row);display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--lift) 8px var(--board);position:relative}
.bk:hover{text-decoration:none}

/* the upright that divides one compartment from the next — part of the case,
   so it stands on the board. The volume at the very edge needs none: the side
   wall of the case is already its partition. */
.case > .bk.starts:first-child::before{content:none}
.bk.starts::before{content:"";position:absolute;left:0;top:0;
  bottom:var(--board);width:4px;
  /* light and shadow rather than a colour, so it belongs to whatever wood the
     photograph happens to be */
  background:linear-gradient(90deg,
    rgba(0,0,0,.45) 0 1px, rgba(255,255,255,.20) 1px 3px, rgba(0,0,0,.38) 3px 4px)}

/* the compartment's name, on a steel plate screwed to the upright */
.bk .tag{position:absolute;left:0;top:-24px;z-index:2;
  max-width:250%;padding:3px 14px 3.5px 12px;border-radius:2px;
  background:linear-gradient(180deg,#f4f6f7 0%,#d2d7db 42%,#aab0b6 52%,#e2e6e9 100%);
  border:1px solid rgba(0,0,0,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.15),
    0 1px 3px rgba(0,0,0,.5);
  font:600 9px/1.3 var(--ui);letter-spacing:.11em;text-transform:uppercase;
  color:#2c3135;text-shadow:0 1px 0 rgba(255,255,255,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk .tag::before,.bk .tag::after{content:"";position:absolute;top:50%;width:3px;height:3px;
  margin-top:-1.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fcfdfd,#8f959b 60%,#6b7176)}
.bk .tag::before{left:4px}
.bk .tag::after{right:4px}

/* The cover's own box, no wider than the cover: the shelf label hangs off its
   left edge, and a label that starts a few pixels to the left of the volume it
   names is the sort of thing the eye catches at once. */
.bk .cov{display:block;position:relative;height:var(--cover-h);
  width:max-content;max-width:100%;margin:0 auto;
  transition:transform .18s ease}
/* The covers carry no shadow of their own — the case does the lighting. What
   stands beside each cover is the block of its own pages, seen on the fore
   edge: that is part of the book, and it is what stops a row of covers from
   reading as a row of tiles. */
.bk .cov img{display:block;height:100%;width:auto;max-width:100%;margin:0 auto;
  border-radius:1px 2px 2px 1px;border:1px solid rgba(0,0,0,.32);
  /* the block of pages first, then the little shadow the volume throws */
  box-shadow:2px 0 0 #E4DCC9, 3px 0 0 #C9BFA6, 4px 0 0 rgba(0,0,0,.4),
    6px 2px 7px rgba(0,0,0,.22)}
/* and where it meets the board: a hair of contact shadow, no more */
.bk .cov::after{content:"";position:absolute;left:1px;right:-3px;bottom:-3px;height:5px;
  background:radial-gradient(70% 100% at 50% 0, rgba(0,0,0,.34), rgba(0,0,0,0) 72%);
  pointer-events:none}
.bk:hover .cov{transform:translateY(-6px)}
.bk:focus-visible{outline:2px solid var(--accent-2);outline-offset:-5px}

/* the plaque on the front of the board, naming the volume standing above it */
/* The plaque stands on the board, below the volume — never across its cover,
   which is a printed page and not a backing card. It grows upward, the way a
   longer name needs a longer plate, and it is anchored to the board so every
   plaque in a row lines up along its foot. */
.bk .plate2{position:absolute;left:10px;right:10px;bottom:5px;min-height:30px;
  max-height:calc(var(--board) - 6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2px 5px;overflow:hidden;
  background:linear-gradient(180deg, rgba(20,13,6,.68), rgba(20,13,6,.84));
  border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.14);
  border-radius:4px;
  font:9px/1.25 var(--ui);color:var(--wood-ink-soft);text-align:center}
.bk .plate2 b{font:600 var(--t,9.5px)/1.2 var(--disp);color:var(--wood-ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.bk .plate2 span{font-variant-numeric:tabular-nums;opacity:.85;font-size:.85em}
.bk:hover .plate2{background:linear-gradient(180deg, rgba(40,28,14,.66), rgba(22,15,7,.82))}
.bk:hover .plate2 b{color:#fff}

.bk.unread .cov img{filter:grayscale(.35) opacity(.62)}
.bk.unread:hover .cov img{filter:grayscale(0) opacity(.85)}
.bk .soon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:8.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(20,16,10,.82);color:#F6EDDA;padding:3px 9px;border-radius:10px;
  white-space:nowrap}

@media(max-width:760px){
  /* Two rules govern the small case. First, the row height is worked out where
     these are declared, so they have to be declared on .bookcase as well —
     overriding --cover-h on .case alone leaves --row at its full-size value and
     the volumes sit in a great pocket of air. Second, the shelving is one
     drawing stretched to --row, so the whole set has to be **the same shape**,
     scaled: 150/196 of the full size, or the painted board no longer lands
     where the volumes stand. */
  .bookcase{--cover-h:135px;--lift:26px;--board-top:17px;--board-face:23px}
  .case{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  /* every millimetre of the plaque, so a name is not broken across the middle
     of a word — Pali compounds have nowhere else to break */
  .bk .plate2{left:5px;right:5px;bottom:4px;min-height:23px;padding:2px;font-size:7.5px}
  /* the air above the volumes is shallower here, so the shelf label is too */
  .bk .tag{font-size:7.5px;letter-spacing:.09em;padding:2px 10px 2.5px 9px;top:-19px}
  .bk .plate2 b{font-size:calc(var(--t,9.5px) * .78);line-height:1.25}
  .railtabs label{padding:8px 14px 9px;font-size:12.5px}
}

nav.jump{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
nav.jump a{display:inline-flex;align-items:center;gap:8px;font:12.5px var(--ui);
  padding:7px 15px;border:1px solid var(--rule);border-radius:16px;color:var(--ink)}
nav.jump a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
nav.jump b{font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---------- one volume: two panes ---------- */
/* The book does not move. It stands where you left it and the text runs past
   it, which is what a volume in the hand does. Only the right pane scrolls, and
   the footer travels at the end of that pane so every rule on the page ends on
   the same line. */
body.pane{height:100vh;overflow:hidden}
body.pane main{max-width:none;padding:0;height:calc(100vh - 71px)}
.volwrap{display:grid;grid-template-columns:330px minmax(0,1fr);height:100%;
  max-width:var(--measure);margin:0 auto}
.volcover{align-self:center;padding:0 0 0 44px}
.volscroll{overflow-y:auto;overscroll-behavior:contain;height:100%;
  padding:0 44px 0 52px;scrollbar-gutter:stable}

.volscroll footer.page{max-width:none;padding:30px 0 64px;margin:0}
@media(max-width:980px){
  body.pane{height:auto;overflow:visible}
  .volhead{position:static;padding-top:22px}
  body.pane main{height:auto}
  .volwrap{grid-template-columns:1fr;height:auto;padding:0 18px}
  .volcover{align-self:start;padding:34px 0 0}
  .volscroll{overflow:visible;height:auto;padding:0}

}

/* ---------- one volume ---------- */
.vol{display:grid;grid-template-columns:330px minmax(0,1fr);gap:52px;align-items:start;
  margin-bottom:0}
.volcover{position:sticky;top:96px}

@media(max-width:820px){.vol{grid-template-columns:1fr;gap:26px}}
.volcover img{display:block;width:100%;height:auto;border:1px solid rgba(0,0,0,.2);
  box-shadow:0 16px 24px -14px rgba(0,0,0,.55);border-radius:1px;margin-bottom:18px}
.volcover .btn{display:block;text-align:center}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 28px;margin:4px 0 22px;
  font:14.5px var(--ui)}
dl.kv dt{color:var(--ink-soft);letter-spacing:.03em}
dl.kv dd{margin:0;color:var(--incised)}
ol.toc{list-style:none;padding:0;margin:0;columns:2;column-gap:48px;
  column-fill:balance;font:15px/1.5 var(--serif)}
@media(max-width:1100px){ol.toc{columns:1}}
@media(max-width:820px){ol.toc{columns:1}}
ol.toc li{break-inside:avoid;margin-bottom:7px}
ol.toc li a{color:var(--ink)}
ol.toc li a:hover{color:var(--accent)}
ol.toc .pi{display:block;font:12.5px var(--ui);color:var(--ink-soft)}
ol.toc .l1{font-weight:600;color:var(--incised);margin-top:14px}
ol.toc .l2{padding-left:14px}
ol.toc .l3{padding-left:28px;font-size:14px;color:var(--ink-soft)}
ol.toc .none{color:var(--ink-soft)}

.kv .src{display:block;font:11.5px var(--ui);color:var(--ink-soft);
  letter-spacing:.02em;margin-top:2px}
.background{max-width:70ch;margin-top:6px}
.background p{font:17px/1.72 var(--serif);color:var(--ink);margin:0 0 18px;max-width:none}
.background b{color:var(--incised);font-weight:600}
.volnote{background:var(--notebg);padding:14px 18px;margin:0 0 24px;border-radius:3px}
.volnote p{font:15px/1.7 var(--serif);color:var(--ink-soft);margin:0 0 12px;max-width:80ch}
.volnote p:last-child{margin-bottom:0}
.colophon{padding:4px 0 0;margin:0 0 22px}
.colophon p{font:15.5px/1.7 var(--serif);font-style:italic;color:var(--ink-soft);
  margin:0;max-width:80ch}
.sources{font:12.5px/1.7 var(--ui);color:var(--ink-soft);max-width:none}
.sources span+*{max-width:80ch}
.sources span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:3px}

/* radio tabs: no script, and the choice survives a reload */
.tabs-r{margin:0}
.tabs-r > input{position:absolute;opacity:0;width:0;height:0}

/* The head does not travel. The volume's name stays in front of the reader,
   and the panels scroll beneath it. */
.volhead{position:sticky;top:0;z-index:5;background:var(--stone);
  padding:34px 0 0;margin:0}
.volhead .crumb{margin-bottom:10px}
.voltitle{border-top:1px solid var(--rule);padding-top:18px}
.voltitle h1.page{margin:0 0 4px}
.voltitle .sub{font:18px/1.5 var(--serif);color:var(--ink-soft);margin:0 0 8px;
  max-width:60ch}
.voltitle .chapline{margin:0 0 18px}
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:0;
  flex-wrap:wrap}
.tabbar label{font:12.5px var(--ui);letter-spacing:.04em;padding:9px 16px;cursor:pointer;
  color:var(--ink-soft);border:1px solid transparent;border-bottom:0;
  border-radius:3px 3px 0 0;margin-bottom:-1px}
.tabbar label:hover{background:var(--track);color:var(--ink)}
.tabs-r > section{display:none}
#tab-story:checked ~ .volhead .tabbar label[for=tab-story],
#tab-facts:checked ~ .volhead .tabbar label[for=tab-facts],
#tab-inside:checked ~ .volhead .tabbar label[for=tab-inside],
#tab-toc:checked ~ .volhead .tabbar label[for=tab-toc]{
  background:var(--card);border-color:var(--rule);color:var(--accent);font-weight:600}
#tab-story:checked ~ .panel-story,
#tab-facts:checked ~ .panel-facts,
#tab-inside:checked ~ .panel-inside,
#tab-toc:checked ~ .panel-toc{display:block;padding:26px 0 40px}
.tabs-r .kv{margin-top:0}
.tabs-r ol.toc{margin-top:0}

/* a volume that cannot be opened yet */
.bk.unread .cov img{filter:grayscale(.35) opacity(.62)}
.bk.unread:hover .cov img{filter:grayscale(0) opacity(.85)}
.bk .soon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:10.5px var(--ui);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(20,16,10,.82);color:#F6EDDA;padding:5px 11px;border-radius:12px;
  white-space:nowrap}
.notyet{font:14px/1.65 var(--ui);color:var(--ink-soft);margin:0;max-width:none}
.notyet b{display:block;color:var(--incised);margin-bottom:4px}

nav.jump{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
nav.jump a{display:inline-flex;align-items:center;gap:7px;font:12.5px var(--ui);
  padding:7px 14px;border:1px solid var(--rule);border-radius:16px;color:var(--ink)}
nav.jump a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
nav.jump b{font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---------- the reader ---------- */
.readwrap{display:grid;grid-template-columns:264px minmax(0,1fr);gap:52px;align-items:start}
@media(max-width:980px){.readwrap{grid-template-columns:1fr;gap:22px}}
.side{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto;
  padding-right:8px}
@media(max-width:980px){.side{position:static;max-height:none}}
.sidetitle{font:600 19px/1.3 var(--disp);color:var(--incised);margin:0 0 14px}
.sidetitle span{display:block;font:12.5px var(--ui);color:var(--ink-soft);margin-top:3px}
.side .find{margin-bottom:14px}
.side .find button{display:none}
.side .find select{display:none}
.seg{display:flex;gap:5px;margin:0 0 22px}
.seg button{font:11px var(--ui);letter-spacing:.04em;padding:6px 11px;
  border:1px solid var(--rule);background:transparent;color:var(--ink-soft);
  border-radius:3px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{color:#16241C}
details.tocbox{margin-top:4px}
details.tocbox > summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;justify-content:space-between;padding:8px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
details.tocbox > summary::-webkit-details-marker{display:none}
details.tocbox > summary::after{content:"+";font:14px var(--ui);color:var(--ink-soft)}
details.tocbox[open] > summary::after{content:"–"}
details.tocbox[open] > summary{border-bottom:0}
ol.toc.mini{columns:1;font:13.5px/1.45 var(--ui);margin-top:0}
ol.toc.mini li{margin-bottom:6px}
ol.toc.mini .l1{font:600 13.5px var(--ui);margin-top:12px}
ol.toc.mini .l3{font-size:12.5px}
ol.toc.mini li.here>a{color:var(--accent);font-weight:600}

.readhead{border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:6px}
.readhead h1{font:600 clamp(22px,2.4vw,30px)/1.2 var(--disp);color:var(--incised);margin:0}
.pager{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 0;font:12.5px var(--ui);color:var(--ink-soft)}
.pager .where{letter-spacing:.06em;text-transform:uppercase;font-size:11px}

.text{border-top:1px solid var(--rule)}
.p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 40px;padding:14px 44px 14px 0;border-bottom:1px solid var(--rule);
  position:relative}
.p:target{background:var(--notebg)}
.p .en{font:17.5px/1.72 var(--serif);color:var(--ink)}
.p .pi{font:15.5px/1.75 var(--serif);color:var(--ink-soft);font-style:italic}
.p .none{color:var(--ink-soft);opacity:.6}
.p .anchor{position:absolute;right:0;top:14px;font:11px var(--ui);
  color:var(--ink-soft);opacity:0;font-variant-numeric:tabular-nums}
.p:hover .anchor{opacity:.75}
.p.h{border-bottom:0;padding-top:30px;padding-bottom:4px}
.p.h .en{font:600 20px/1.3 var(--disp);color:var(--incised)}
.p.h .pi{font:600 16px/1.4 var(--disp);color:var(--accent);font-style:normal}
.p.h-nikaya .en,.p.h-book .en,.p.h-head-book .en{font-size:24px}
.p.h-subhead .en,.p.h-subsubhead .en,.p.h-head-subsubhead .en{font-size:17px}
.p.verse .en,.p.verse .pi{padding-left:22px;font-style:italic}
.p.verse{padding-top:2px;padding-bottom:2px;border-bottom:0}
.p.verse-end{padding-bottom:14px;border-bottom:1px solid var(--rule)}
.p.hang .en{padding-left:0}
body[data-view="en"] .p .pi{display:none}
body[data-view="en"] .p{grid-template-columns:minmax(0,1fr)}
body[data-view="pi"] .p .en{display:none}
body[data-view="pi"] .p{grid-template-columns:minmax(0,1fr)}
/* ---------- forms: registering and signing in ---------- */
.narrow{max-width:56ch}
.narrowform{max-width:38ch}
form.stack{margin-top:22px}
form.inline{display:inline-block;margin:0 0 12px}
.f{margin:0 0 18px;max-width:46ch}
.f label{display:block;font:13px var(--ui);color:var(--incised);margin-bottom:5px;
  letter-spacing:.02em}
.f .opt{color:var(--ink-soft);font-weight:400;text-transform:none;letter-spacing:0}
.f .note-s{display:block;font:12.5px/1.5 var(--ui);color:var(--ink-soft);margin-bottom:6px}
.f input[type=text],.f input[type=email],.f input[type=password]{
  width:100%;font:16px var(--serif);color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:3px;padding:10px 12px;outline:0}
.f input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.f.bad input{border-color:#A33;background:color-mix(in srgb,#A33 6%,var(--card))}
.f .err{display:block;font:12.5px var(--ui);color:#A33;margin-top:5px}
:root[data-theme="dark"] .f .err{color:#E08A85}
.f.check label{display:flex;gap:9px;align-items:flex-start;font:15px/1.5 var(--serif);
  color:var(--ink);text-transform:none;letter-spacing:0}
.f.check input{margin-top:4px}
fieldset.choice{border:0;padding:0;margin:0 0 24px}
fieldset.choice legend{font:10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);padding:0;margin-bottom:10px}
label.pick{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;
  border:1px solid var(--rule);border-radius:4px;margin-bottom:8px;cursor:pointer;
  background:var(--card);max-width:52ch}
label.pick:hover{border-color:var(--accent)}
label.pick:has(input:checked){border-color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent)}
label.pick input{margin-top:5px;flex:0 0 auto}
label.pick span{font:14px/1.55 var(--ui);color:var(--ink-soft)}
label.pick b{display:block;font:600 15px/1.4 var(--disp);color:var(--incised);
  margin-bottom:3px}
.note.bad{border-left-color:#A33}
.note.ok{border-left-color:var(--accent-2)}

/* ---------- comments in the reader ---------- */
.p.hasnote{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.notes{grid-column:1/-1;margin:10px 0 2px;padding-left:14px;
  border-left:2px solid var(--accent)}
.cmt{margin-bottom:12px}
.cmt .who,.rev .who{font:12px var(--ui);color:var(--ink-soft);margin:0 0 4px;max-width:none}
.cmt .who b,.rev .who{color:var(--incised)}
.when{margin-left:8px;opacity:.8}
.ckind{display:inline-block;margin-left:8px;font:10.5px var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.cstate{display:inline-block;margin-left:8px;font:10px var(--ui);letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:2px;background:var(--track);
  color:var(--ink-soft)}
.cstate.accepted,.cstate.fixed{background:color-mix(in srgb,var(--accent) 20%,transparent);
  color:var(--accent)}
.cstate.declined{background:color-mix(in srgb,#A33 14%,transparent);color:#A33}
.cmt .said,.rev .said{font:15px/1.6 var(--serif);color:var(--ink);margin:0 0 5px;max-width:70ch}
.sugg,.ans{font:14.5px/1.6 var(--serif);margin:0 0 5px;max-width:70ch;
  padding-left:12px;border-left:2px solid var(--rule)}
.sugg span,.ans span{display:block;font:10px var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.ans{border-left-color:var(--accent)}
details.addcmt{margin:4px 0 6px}
details.addcmt > summary{cursor:pointer;font:12px var(--ui);color:var(--accent);
  letter-spacing:.03em;list-style:none;display:inline-block;padding:3px 0}
details.addcmt > summary::-webkit-details-marker{display:none}
details.addcmt > summary::before{content:"+ "}
details.addcmt[open] > summary::before{content:"– "}
details.addcmt form{margin-top:8px;max-width:56ch}
details.addcmt textarea,form.settle textarea,.f textarea{width:100%;
  font:15px/1.55 var(--serif);color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:3px;padding:9px 11px;outline:0;resize:vertical}
details.addcmt select,.f select{font:14px var(--ui);color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:3px;padding:8px 10px;outline:0}
details.addcmt textarea:focus,.f textarea:focus,.f select:focus{border-color:var(--accent)}

/* ---------- faces ---------- */
.av{display:inline-grid;place-items:center;width:var(--sz,30px);height:var(--sz,30px);
  border-radius:50%;overflow:hidden;flex:0 0 auto;vertical-align:middle;
  background:var(--track)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.letter{background:hsl(var(--hue,150) 34% 42%);color:#fff;
  font:600 calc(var(--sz,30px) * .44)/1 var(--ui);letter-spacing:.01em;
  text-transform:uppercase}
:root[data-theme="dark"] .av.letter{background:hsl(var(--hue,150) 30% 38%)}
.av.more{background:var(--card);border:1px solid var(--rule);color:var(--ink-soft);
  font:600 10px/1 var(--ui);width:26px;height:26px}
.stack{display:inline-flex;align-items:center;vertical-align:middle}
.stack > *{margin-left:-8px;box-shadow:0 0 0 2px var(--stone);border-radius:50%}
.stack > *:first-child{margin-left:0}
.stack .avlink:hover{position:relative;z-index:2;transform:translateY(-2px)}
.stack.up > *{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,var(--stone))}
.stack.down > *{box-shadow:0 0 0 2px color-mix(in srgb,#A33 45%,var(--stone))}
.signin.who{display:inline-flex;align-items:center;gap:7px;position:relative}
.signin.who span{overflow:hidden;text-overflow:ellipsis;max-width:18ch}
.badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#A33;color:#fff;font:600 10px/17px var(--ui);
  text-align:center}
.bigav{display:block;margin-bottom:14px}
.bigav .av{box-shadow:0 2px 10px rgba(0,0,0,.18)}

/* ---------- the dashboard ---------- */
.dash{display:grid;grid-template-columns:270px minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:860px){.dash{grid-template-columns:1fr;gap:26px}}
.me h1{font:600 24px/1.2 var(--disp);color:var(--incised);margin:0 0 8px}
.me .role{margin:0 0 10px}
.me .where{font:13.5px/1.6 var(--ui);color:var(--ink-soft);margin:0 0 4px;max-width:none}
.me .about{font:15px/1.65 var(--serif);color:var(--ink);margin:12px 0 0}
.me .acts{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dashmain h2:first-child{margin-top:0}
ul.notices{list-style:none;padding:0;margin:14px 0 0}
ul.notices li{display:flex;gap:11px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--rule);font:14px/1.55 var(--ui);color:var(--ink-soft)}
ul.notices li b{color:var(--incised)}
ul.notices li.fresh{background:var(--notebg);margin:0 -12px;padding-left:12px;padding-right:12px}
ul.notices .quote{display:block;font:14px/1.55 var(--serif);color:var(--ink);
  margin-top:3px;padding-left:10px;border-left:2px solid var(--rule)}
ul.notices .when{display:block;font-size:11.5px;opacity:.75;margin-top:2px}
ul.notices li.none{color:var(--ink-soft);display:block}
.avedit{display:flex;gap:20px;align-items:flex-start;margin-bottom:22px}
.avedit .bigav{margin:0}
.avedit label{display:block;font:13px var(--ui);color:var(--incised);margin-bottom:5px}
.avedit input[type=file]{font:13px var(--ui);color:var(--ink-soft);margin-top:8px}

/* a layer of the library — the commentaries, then the sub-sub-commentaries */
.layer + .layer{margin-top:16px}
.layerhead{border-top:1px solid var(--rule);margin-top:64px;padding-top:22px}
.layerhead .layername{font:600 15px var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px}
.layerhead .layername span{font:400 15px var(--serif);font-style:italic;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-left:8px}
.layerhead p{font:15px/1.65 var(--serif);color:var(--ink-soft);max-width:72ch;margin:0}
.coll h2 .lay{font:11px var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);vertical-align:middle;margin-left:8px}

/* ---------- the review shelf ---------- */
.rbk .cov{position:relative}
.ring{position:absolute;right:6px;bottom:6px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--accent-2) calc(var(--share) * 1%), rgba(0,0,0,.45) 0);
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;
  background:#1C1917}
.ring b{position:relative;font:600 12px var(--ui);color:#F6EDDA;
  font-variant-numeric:tabular-nums}
.flag{position:absolute;left:6px;top:6px;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:#A33;color:#fff;font:600 11px/20px var(--ui);
  text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.hero .actions{margin-top:18px}

/* judging a paragraph, in the reader */
.p.v-passed{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.p.v-disputed{background:color-mix(in srgb,#A33 6%,transparent)}
form.pass{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:9px 0 2px;
  flex-wrap:wrap}
form.pass button{font:11.5px var(--ui);letter-spacing:.03em;padding:5px 12px;
  border:1px solid var(--rule);background:transparent;color:var(--ink-soft);
  border-radius:14px;cursor:pointer}
form.pass button.up:hover{border-color:var(--accent);color:var(--accent)}
form.pass button.down:hover{border-color:#A33;color:#A33}
form.pass button.on.up{background:var(--accent);border-color:var(--accent);color:#fff}
form.pass button.on.down{background:#A33;border-color:#A33;color:#fff}
:root[data-theme="dark"] form.pass button.on.up{color:#16241C}
form.pass .side{margin-left:2px}
.verdict{font:10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:11px;background:var(--track);color:var(--ink-soft)}
.verdict.passed{background:var(--accent);color:#fff}
:root[data-theme="dark"] .verdict.passed{color:#16241C}
.verdict.disputed{background:#A33;color:#fff}
.volprog .warn{color:#A33}
:root[data-theme="dark"] .volprog .warn{color:#E08A85}
.volprog{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font:12px var(--ui);color:var(--ink-soft);margin:0 0 14px;max-width:none;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.volprog b{color:var(--accent);font-variant-numeric:tabular-nums}
.volprog .bar{flex:0 0 130px;height:6px;background:var(--track);border-radius:3px;
  overflow:hidden}
.volprog .bar span{display:block;height:100%;background:var(--accent)}

/* ---------- the review desk ---------- */
ul.revlist{list-style:none;padding:0;margin:22px 0 0}
li.rev{border-bottom:1px solid var(--rule);padding:18px 0}
li.rev .head{font:14px var(--ui);margin:0 0 3px;max-width:none}
li.rev .head a{font-weight:600}
li.none{color:var(--ink-soft);padding:22px 0;font:15px var(--serif)}
form.settle{margin-top:9px;max-width:56ch}
form.settle .row{display:flex;gap:8px;margin-top:7px}
form.settle button{font:12px var(--ui);padding:7px 14px;border-radius:3px;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer}
form.settle button:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- the back office ---------- */
nav.tabs{display:flex;flex-wrap:wrap;gap:0 4px;margin:22px 0 18px;
  border-bottom:1px solid var(--rule)}
nav.tabs a{display:flex;align-items:center;gap:8px;padding:9px 14px;
  font:13px var(--ui);color:var(--ink);border:1px solid transparent;
  border-bottom:0;border-radius:3px 3px 0 0;margin-bottom:-1px}
nav.tabs a:hover{text-decoration:none;background:var(--track)}
nav.tabs a.on{background:var(--card);border-color:var(--rule);color:var(--accent);
  font-weight:600}
nav.tabs b{font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums}
table.roster{font-size:13.5px}
table.roster td{vertical-align:top}
table.roster td.mid{white-space:nowrap}
table.roster .sub{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
table.roster th .sub{display:block;font-size:9.5px;text-transform:none;letter-spacing:.04em}
table.roster .none{color:var(--ink-soft);padding:22px 0}
.tag{display:inline-block;font:10.5px var(--ui);letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;
  background:var(--track);color:var(--ink-soft)}
.tag.admin{background:var(--accent);color:#fff}
:root[data-theme="dark"] .tag.admin{color:#16241C}
.tag.reviewer{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.yes{color:var(--accent)}
.no{color:#A33}
:root[data-theme="dark"] .no{color:#E08A85}
td.acts form{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
td.acts select,td.acts button{font:11.5px var(--ui);padding:5px 9px;border-radius:3px;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer}
td.acts button:hover{border-color:var(--accent);color:var(--accent)}
td.acts button.danger:hover{border-color:#A33;color:#A33}
form.invite{max-width:34ch}
form.invite select{width:100%;font:15px var(--serif);color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:10px 12px}
.linkbox{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:14px 16px;word-break:break-all;max-width:none}
.linkbox code{background:transparent;padding:0;font-size:13px;line-height:1.7}

/* ---------- the notices ---------- */
.prose{max-width:74ch}
.prose h2{font-size:20px;margin:38px 0 8px}
.prose ul{margin:0 0 20px;padding-left:22px;max-width:70ch}
.prose li{margin-bottom:7px}
.prose .lede{margin-bottom:6px}

/* ---------- the colophon ---------- */
dl.colophon{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 26px;
  margin:0 0 16px;font:14px/1.65 var(--ui)}
dl.colophon dt{padding:2px 0;color:var(--accent);letter-spacing:.12em;
  text-transform:uppercase;font-size:10.5px;line-height:1.9;white-space:nowrap}
dl.colophon dd{padding:2px 0;margin:0;color:var(--ink-soft);max-width:none}
dl.colophon dd > span.hold{display:block;max-width:80ch}
dl.colophon dd b{color:var(--incised);font-weight:600}
.sig{font:13px var(--ui);color:var(--ink-soft);margin:0}

@media(max-width:760px){
  .p{grid-template-columns:1fr;gap:8px 0;padding-right:0}
  .p .anchor{display:none}
}

/* ---------- results ---------- */
.results{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start}
@media(max-width:900px){.results{grid-template-columns:1fr;gap:30px}}
.count{font:12px var(--ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:12px}
.count span{float:right;opacity:.7;text-transform:none;letter-spacing:0}
ol.hits{list-style:none;padding:0;margin:0}
.hit{padding:22px 0;border-bottom:1px solid var(--rule)}
.hit .src{font:12px var(--ui);color:var(--ink-soft);margin:0 0 5px;max-width:none}
.hit .src a{color:var(--accent)}
.hit .src span{margin-left:10px;opacity:.85}
.hit h3{margin:0 0 6px;font:400 18px/1.55 var(--serif);color:var(--ink)}
.hit h3 a{color:var(--ink)}
.hit h3 a:hover{color:var(--accent);text-decoration:none}
.hit .alt{font:15px/1.65 var(--serif);color:var(--ink-soft);
  margin:0 0 6px;max-width:none}
/* Pali is set in italic wherever it appears, in the headline or under it */
.hit h3.pilead a,.hit .alt[lang="pi"]{font-style:italic}
.hit .cite{font:12px var(--ui);color:var(--ink-soft);margin:0;max-width:none;
  font-variant-numeric:tabular-nums}
.facetcol{position:sticky;top:92px}
ul.facets{list-style:none;padding:0;margin:0 0 26px;font:13.5px var(--ui)}
ul.facets li{border-bottom:1px solid var(--rule)}
ul.facets li a{display:flex;justify-content:space-between;gap:10px;
  padding:9px 0;color:var(--ink)}
ul.facets li a:hover{color:var(--accent);text-decoration:none}
ul.facets li b{color:var(--ink-soft);font-weight:400;font-variant-numeric:tabular-nums}
ul.facets li.on a{color:var(--accent);font-weight:600}
ul.facets li.none{padding:9px 0;color:var(--ink-soft)}
nav.pages{display:flex;gap:6px;align-items:center;padding:26px 0;font:13px var(--ui)}
nav.pages a,nav.pages b{min-width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:3px;color:var(--ink)}
nav.pages b{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] nav.pages b{color:#16241C}
nav.pages a:hover{background:var(--track);text-decoration:none}
nav.pages .gap{color:var(--ink-soft);padding:0 2px;border:0}
.empty{padding:20px 0}
.empty h2{margin-top:0}
.empty ul{max-width:70ch;font-size:16.5px}
.empty li{margin-bottom:8px}
ul.tries{list-style:none;padding:0;margin:0;font:15px var(--serif)}
ul.tries li{border-bottom:1px solid var(--noteline);padding:8px 0}
ul.tries li:last-child{border-bottom:0}
ul.tries span{color:var(--ink-soft);font:11.5px var(--ui)}

@media(max-width:760px){
  /* the navigation drops to its own line under the mark */
  .bar{flex-wrap:wrap;padding:10px 18px;min-height:0;gap:8px 16px}
  .brand{margin-right:auto;gap:10px}
  .brand img{width:34px;height:34px;flex-basis:34px}
  .brand b{font-size:16px;white-space:normal}
  .tswitch{order:2}
  nav.site{order:3;width:100%;margin:0;gap:18px;
    border-top:1px solid var(--rule);padding-top:8px}
  nav.site a{font-size:14px}
  main{padding:26px 18px 70px}
  footer.page{padding:22px 18px 50px}
  .find .field{flex-wrap:wrap}
  .find input{flex:1 0 100%;order:1;padding-left:0}
  .find svg{order:0}
  .find select{order:2;border-left:0;border-top:1px solid var(--rule);flex:1}
  .find button{order:3;border-top:1px solid var(--rule);flex:1}
  .shelf{--lift:20px;--book-max:150px;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .bk{padding-left:8px;padding-right:8px}
  .bk .cap{font-size:10.5px}
  .bk .cap b{font-size:12px}
  ol.toc{columns:1}
}