/* The Bookshelf · styles only this page uses, loaded after /shared/deep-dive.css. A plain page
   like Questions: no Contents menu, and each work is a plain <details> that opens without any
   script. docs/build_bookshelf.py writes the shelves; the "Show what's used in" menu, Open all and
   printing are the small script at the end of the page. */

/* header: no Contents button, so the Kitchen Table link shows from 600px */
.bs-page .home-link{display:none}
@media (min-width:600px){.bs-page .home-link{display:flex}}

/* opening: the introduction, then the free-to-read card; side by side from 900px */
.bs-open{display:grid;gap:28px;padding-block:28px 32px}
.bs-open .panel{gap:16px;order:0}
.bs-open .free{order:1}
.bs-open .panel a{color:var(--accent);text-underline-offset:3px}
.bs-small{font:400 calc(15px*var(--ts,1))/1.55 var(--sans)!important;color:var(--ink-2)}
@media (min-width:900px){
  .bs-open{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:start;padding-block:44px 40px}
  .bs-open .panel{grid-column:1;grid-row:1}
  .bs-open .free{grid-column:2;grid-row:1}
}

/* free to read: a short list on the night card, like the short version on Questions */
.free{background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);border-radius:12px;padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.free .label{color:var(--night-2)}
.free ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.free li{font-size:calc(18px*var(--ts,1));line-height:1.45}
.free a{color:var(--gold);text-underline-offset:3px}
.free a:hover{color:var(--night-ink)}
.free :focus-visible{outline-color:var(--night-ink)}
.free .note{font:400 calc(13px*var(--ts,1))/1.5 var(--sans);color:var(--night-2)}
@media (min-width:900px){.free{padding:26px 28px 28px}}

/* the counts, the "Show" menu and the jump links */
.shelf-count{margin:0 0 18px;font:500 calc(15px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.bs-tools{display:flex;flex-direction:column;gap:18px}
.bs-show{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bs-show select{min-height:44px;max-width:100%;padding:0 40px 0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 calc(15px*var(--ts,1)) var(--sans);cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bs-show select:hover{border-color:var(--accent)}
.bs-tools .q-jump a[hidden]{display:none}
@media (min-width:900px){.bs-show{flex-direction:row;align-items:center;gap:12px}}

/* the shelves: a heading beside each from 900px, the works as rows that open */
.shelves{padding-block:12px 24px}
.shelf{display:grid;gap:8px;padding-block:28px 32px;border-top:1px solid var(--line-2)}
.shelf:first-child{border-top:0}
.shelf h2{margin:0;font:400 calc(clamp(28px,3.4vw,40px)*(1 + (var(--ts,1) - 1)*0.6))/1.08 var(--display)}
.shelf .g-note{margin-top:8px;font:400 calc(14px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2);max-width:36ch}
.shelf[hidden]{display:none}
@media (min-width:900px){
  .shelves{padding-block:28px 40px}
  .shelf{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start;padding-block:44px 48px}
}

.works{border-top:1px solid var(--line)}
.work{border-bottom:1px solid var(--line)}
.work[hidden]{display:none}
.work summary{min-height:60px;padding-block:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}
.work summary::-webkit-details-marker{display:none}
.work summary:hover .w-title{color:var(--accent)}
.w-head{display:flex;flex-direction:column;gap:3px;min-width:0}
.w-title{font-size:calc(20px*var(--ts,1));line-height:1.3}
.w-by{font:400 calc(14px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
.w-meta{font:600 calc(12px*var(--ts,1))/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.work .chev{flex-shrink:0;color:var(--ink-2);transition:transform .2s ease}
.work[open] .chev{transform:rotate(180deg)}
.w-body{padding:4px 0 26px;display:flex;flex-direction:column;gap:10px;max-width:64ch}
.w-body .label{margin-top:8px}
.w-about{font-size:calc(18px*var(--ts,1));line-height:1.55}
.w-note{font:400 calc(15px*var(--ts,1))/1.55 var(--sans);color:var(--ink-2)}
.w-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.w-read a{display:inline-flex;align-items:center;min-height:36px;font:600 calc(15px*var(--ts,1))/1.4 var(--sans);color:var(--accent);text-underline-offset:3px}
.w-read a::after{content:"↗";margin-left:6px;font-weight:400;text-decoration:none}
.w-items{font:400 calc(15px*var(--ts,1))/1.5 var(--sans)}
.w-items li{padding-left:14px;text-indent:-14px}
.w-items li::before{content:"·";display:inline-block;width:14px;text-indent:0;color:var(--ink-2)}
.w-items a{color:inherit;text-underline-offset:3px}
.w-used{font:400 calc(15px*var(--ts,1))/1.5 var(--sans)}
.w-used li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:2px 0}
.w-used .pc{color:var(--ink);font-weight:600;text-underline-offset:3px}
.w-used .parts{display:inline-flex;flex-wrap:wrap;gap:4px}
.w-used .parts a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);font:600 calc(13px*var(--ts,1)) var(--sans);text-decoration:none}
.w-used .parts a:hover{border-color:var(--accent);color:var(--accent)}
.w-used li.here{order:-1}
.w-used li.here .pc{color:var(--accent)}
.w-used li.here .parts a{border-color:var(--accent)}
@media (min-width:900px){.w-title{font-size:calc(22px*(1 + (var(--ts,1) - 1)*0.9))}}
@media (prefers-reduced-motion:reduce){.work .chev{transition:none}}

.bs-none{padding-block:28px;font-size:calc(18px*var(--ts,1));color:var(--ink-2)}

/* the end: a way to report a missing book or a dead link, through the Contact page */
.bs-end{padding-block:40px 24px}
.q-ask{display:flex;flex-direction:column;gap:8px;padding-bottom:28px;border-bottom:1px solid var(--line-2)}
.q-ask p{font-size:calc(18px*var(--ts,1));max-width:60ch}
.q-ask a{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;font:600 calc(16px*var(--ts,1)) var(--sans)}

/* printing (the shared print styles do the rest): every work showing opens, the menu, jump links
   and the "something missing" box stay off the paper, and each link prints its address */
@media print{
  .bs-tools,.bs-end,.chev{display:none!important}
  .bs-open{display:flex;flex-direction:column;gap:14pt}
  .free{break-inside:avoid}
  .shelf{display:block;padding-block:12pt;break-inside:auto}
  .shelf > div:first-child{margin-bottom:6pt}
  .work summary{min-height:0;padding-block:6pt;break-after:avoid}
  .w-body li{break-inside:avoid}
  .w-body{padding-bottom:8pt}
  .w-read a[href^="http"]::after,.w-items a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;font-weight:400;word-break:break-all;color:#444}
  .w-used .parts a{border:0;min-width:0;min-height:0;padding:0}
}