/*
 * bookshelf.css — /bookshelf/ and its two shelf panes (see bookshelf.js).
 */
.bs{--lab:var(--body,var(--sys,system-ui)),sans-serif; /* labels: the site's small all-caps label, as on Press; Barlow is only for the bar's complications */
  --num2:var(--mono,ui-monospace,monospace);
  --win:var(--wbg,color-mix(in srgb,var(--paper) 93%,#000));--wlo:var(--lo,rgba(16,18,28,.075));--whi:var(--hi,rgba(255,255,255,.9));
  --ledge:color-mix(in srgb,var(--ink) 16%,var(--paper));--shade:color-mix(in srgb,var(--ink) 5%,transparent);margin:18px 0 10px}
.bs em{font-style:normal;font-family:var(--num2);font-variant-numeric:tabular-nums}
.books-msg{margin:0;font-size:calc(13px * var(--zs, 1));color:var(--ink3)}

/* ---- shelf headers ---- */
.bs-shelf{margin:0 0 34px}
.bs-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule3)}
.bs-t{font:600 calc(10.5px * var(--zs, 1))/1 var(--lab);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
a.bs-t{text-decoration:none!important;background:none!important}
a.bs-t:hover{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px}
.bs-n{font:500 calc(10px * var(--zs, 1))/1 var(--lab);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.bs-n em{color:var(--ink2);font-size:calc(10.5px * var(--zs, 1));letter-spacing:0}
.bs-one{margin-top:4px}
.bs-one .bs-h .bs-t{display:none} /* the pane's own title already says which shelf */
.bs-one .bs-h{justify-content:flex-start}

/* ---- covers, face-out, with a shelf under every row ---- */
/* rows are a fixed height, so one repeating gradient draws all the ledges */
.cv-row{--row:118px;--gap:18px;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:9px;row-gap:var(--gap);padding:0 6px var(--gap);
  background:repeating-linear-gradient(180deg,transparent 0 var(--row),var(--ledge) var(--row) calc(var(--row) + 2px),var(--shade) calc(var(--row) + 2px) calc(var(--row) + 8px),transparent calc(var(--row) + 8px) calc(var(--row) + var(--gap)))}
.cv{position:relative;display:flex;align-items:flex-end;height:var(--row);flex:none;text-decoration:none!important;background:none!important;outline:0}
.cv img{display:block;height:calc(var(--row) - 6px);width:auto;max-width:96px;border-radius:1px 2.5px 2.5px 1px;
  box-shadow:0 1px 1px rgba(0,0,0,.18),0 5px 10px -5px rgba(0,0,0,.45);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
/* the hinge of the binding */
.cv::after{content:"";position:absolute;left:0;bottom:0;width:5px;height:calc(var(--row) - 6px);border-radius:1px 0 0 1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.22) 45%,rgba(0,0,0,.06));transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.cv:hover img,.cv:focus-visible img,.cv:hover::after,.cv:focus-visible::after{transform:translateY(-7px)}
.cv:focus-visible img{box-shadow:0 0 0 2px var(--ink)}
.cv-fb{display:none}
.nocover .cv-fb{display:flex;align-items:flex-end;box-sizing:border-box;padding:7px;width:72px;height:calc(var(--row) - 6px);
  font:600 calc(9.5px * var(--zs, 1))/1.2 var(--lab);letter-spacing:.04em;text-transform:uppercase;color:var(--paper);background:color-mix(in srgb,var(--ink) 70%,var(--paper));border-radius:1px 3px 3px 1px}

/* ---- the box: now reading, or the cover under the pointer. Fixed size, so nothing jumps. ---- */
.bs-now{--cvw:112px;display:grid;grid-template-columns:var(--cvw) minmax(0,1fr);gap:18px;box-sizing:border-box;height:236px;margin:0 0 26px;padding:18px;overflow:hidden;
  border-radius:6px;background:var(--win);box-shadow:inset 0 1px 2px var(--wlo),0 1px 0 var(--whi)}
.nw-cv{display:flex;align-items:flex-start;width:var(--cvw);height:calc(var(--cvw) * 1.5);text-decoration:none!important;background:none!important}
.nw-cv img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:1px 3px 3px 1px;box-shadow:0 1px 1px rgba(0,0,0,.15),0 6px 16px -4px rgba(0,0,0,.35)}
.nw-cv.nocover .cv-fb{width:var(--cvw);height:calc(var(--cvw) * 1.5);font-size:calc(11px * var(--zs, 1));padding:10px}
.nw-tx{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.nw-k{flex:none;margin-bottom:8px;color:var(--ink3)}
.bs-now.peek .nw-k{color:var(--ink2)}
.nw-t{flex:none;margin:0;font:600 calc(17px * var(--zs, 1))/1.22 var(--head,var(--sys));letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-t a{color:inherit!important;text-decoration:none!important;background:none!important}
.nw-t a:hover{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px}
.nw-s{flex:none;margin:3px 0 0;font-size:calc(12px * var(--zs, 1));line-height:1.3;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-au{flex:none;margin:5px 0 0;font-size:calc(12px * var(--zs, 1));line-height:1.35;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-au em{font-size:calc(11px * var(--zs, 1));color:var(--ink)}
.nw-au .dot{color:var(--ink3)}
/* the description takes whatever room is left and fades out at the bottom */
.nw-d{flex:1 1 0;min-height:0;margin:9px 0 0;padding-top:9px;border-top:1px solid var(--rule3);overflow:hidden;
  font-size:calc(12px * var(--zs, 1));line-height:1.5;color:var(--ink2);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}

/* ---- the numbers ---- */
.ct-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}
.ct-dial{display:flex;flex-direction:column;gap:4px;padding:9px 10px 8px;border-radius:5px;background:var(--win);box-shadow:inset 0 1px 1.5px var(--wlo),0 1px 0 var(--whi);min-width:0}
.ct-dial.wide{grid-column:span 3;flex-direction:row;align-items:center;gap:12px}
.ct-dial .ct-k{font:500 calc(10px * var(--zs, 1))/1 var(--lab);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.ct-dial.wide .ct-k{flex:none;white-space:nowrap}
.ct-dial > em{font-size:calc(22px * var(--zs, 1));line-height:1;color:var(--ink);letter-spacing:-.02em}
.ct-dial .ct-u{font:500 calc(10px * var(--zs, 1))/1 var(--lab);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ct-hist{flex:1;height:44px;max-width:260px;overflow:visible}
.ct-hist rect{fill:var(--ink2)}
.ct-hist line{stroke:var(--rule2,var(--ink3));stroke-width:.5}
.ct-hist text{font:600 calc(3.6px * var(--zs, 1)) var(--lab);letter-spacing:.05em;fill:var(--ink3)}

/* ---- the shelves: panes beside the desk in Evergreen on desktop; underneath it everywhere else ---- */
.bs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:36px;margin-top:30px}
html.hstack .bs-desk .bs-cols{display:none}

@media (max-width:520px){
  .bs-now{--cvw:86px;height:214px;gap:14px;padding:14px}
  .nw-t{font-size:calc(16px * var(--zs, 1))}
  .ct-dial > em{font-size:calc(19px * var(--zs, 1))}
}
/* both shelves side by side (the Bookshelf detail pane): each needs its own title back */
.bs-pair .bs-one .bs-h .bs-t{display:inline}
.bs-pair .bs-one .bs-h{justify-content:space-between}

/* ---- Readwise extras: each only shows when Readwise has the data ---- */
.ct-stats{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.ct-dial.wide{grid-column:1/-1}
.bs-stars{font-size:calc(11px * var(--zs, 1));letter-spacing:1px;color:var(--ink2);text-transform:none}
.cv-r{position:absolute;right:3px;bottom:9px;padding:1px 4px;border-radius:3px;font:600 calc(9px * var(--zs, 1))/1.3 var(--lab);color:#f7f6f2;background:rgba(0,0,0,.62);pointer-events:none}
.nw-r{font-style:italic}
.nw-rk{font:500 calc(10px * var(--zs, 1))/1 var(--lab);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-right:4px}
.bs-yr{display:flex;align-items:baseline;gap:6px;margin:10px 6px 6px;font:500 calc(10px * var(--zs, 1))/1 var(--lab);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.bs-yr em{font-style:normal;font-weight:500;opacity:.7}
.bs-also{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 26px;padding:0 4px;font-size:calc(12px * var(--zs, 1))}
.bs-also .bs-t{color:var(--ink3)}