/*
 * Purpose: the document shelf (poster cards with a details panel on hover or keyboard focus) and the
 * document reading page. Shared by the public site and the admin Document library so both look the same.
 * Communication: written by website/document_pages.py; loaded by every public page and the admin library.
 * Settings: --shelf-accent (icons and highlights), --shelf-card (card width in a row).
 * Edge cases: the panel opens on :hover and :focus-within; touch screens keep the title line instead.
 * Known limitations: generated covers are typographic designs, not page images.
 * Examples: <div class="docshelf layout-row"><div class="shelftrack"><article class="doccard">...
 */
.docshelf{--shelf-accent:#e8e8e8;--shelf-card:240px;position:relative;max-width:1320px;margin:28px auto;padding:0 40px}
.shelfhead{font:600 30px/1.2 "Segoe UI",Arial,sans-serif;color:#fff;margin:0 0 22px;letter-spacing:-.01em}
.shelftrack{display:grid;gap:28px}
.layout-row .shelftrack{grid-auto-flow:column;grid-auto-columns:var(--shelf-card);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.layout-grid .shelftrack{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.doccard{position:relative;scroll-snap-align:start;min-width:0}
.doclabel{height:22px;font:600 13px "Segoe UI",Arial,sans-serif;color:#fff;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doclabel span{color:var(--shelf-accent)}.doclabel.nolabel{padding:0;margin-top:0}
.docposter{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;background:#141414;border-radius:2px}
.docposter img{width:100%;height:100%;object-fit:cover;display:block}
.docinfo h3{margin:12px 0 4px;font:600 15px/1.3 "Segoe UI",Arial,sans-serif}.docinfo h3 a{color:#fff;text-decoration:none}
.docinfo p{margin:0;color:#8a8a8a;font-size:13px}
.docdraft{position:absolute;top:8px;left:8px;background:#000c;color:#f0cf86;font-size:11px;padding:3px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.06em}
.gencover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px 16px;color:#fff;
  background:linear-gradient(160deg,var(--c1),var(--c2) 70%);font-family:Georgia,"Times New Roman",serif}
.gencover:before{content:"";position:absolute;inset:10px;border:1px solid #ffffff2a}
.gc-kind{position:absolute;top:18px;left:16px;font:700 10px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:5px 7px;background:#0007;border:1px solid #ffffff40}
.gc-title{font-size:24px;line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;position:relative}
.gc-author{font:13px "Segoe UI",Arial,sans-serif;opacity:.8;position:relative}
.gc-mark{font:600 9px "Segoe UI",Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;opacity:.55;position:relative}
.tone0{--c1:#263238;--c2:#0d1317}.tone1{--c1:#4a2b1f;--c2:#140b08}.tone2{--c1:#1f3a2e;--c2:#09140f}.tone3{--c1:#2c2547;--c2:#0d0b17}
.tone4{--c1:#45202a;--c2:#13080b}.tone5{--c1:#1d3448;--c2:#080f16}.tone6{--c1:#3e3a22;--c2:#12110a}.tone7{--c1:#333;--c2:#0b0b0b}
.dochover{position:absolute;left:-8px;right:-8px;top:20px;bottom:-10px;display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;
  background:#141519f5;border-radius:3px;box-shadow:0 20px 50px #000c;opacity:0;visibility:hidden;transform:scale(.97);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:5;overflow:hidden;pointer-events:none}
.doccard:hover .dochover,.doccard:focus-within .dochover{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s;pointer-events:auto}
.docinfo{transition:opacity .16s ease}.doccard:hover .docinfo,.doccard:focus-within .docinfo{opacity:0;transition-delay:.12s}
.dochover h3{margin:0;font:700 15px/1.3 "Segoe UI",Arial,sans-serif;color:#fff}
.docmeta{list-style:none;margin:0;padding:0;font:600 13px/1.45 "Segoe UI",Arial,sans-serif;color:#9a9a9a}
.docmeta li:first-child{color:#c9c9c9}
.docdesc{margin:4px 0 0;font:14px/1.5 "Segoe UI",Arial,sans-serif;color:#e4e4e4;flex:1;min-height:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical}
.docactions{display:flex;gap:18px;align-items:center;padding-top:6px}
.docact{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:none;border:0;color:var(--shelf-accent);cursor:pointer;text-decoration:none;border-radius:4px}
.docact svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.docact svg.solid{fill:currentColor;stroke:none}
.docact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.docact:hover,.docact:focus-visible{background:#ffffff14;outline:none}
.docact.done{color:#9fdcae}
.shelfnav{position:absolute;top:50%;width:42px;height:84px;border:0;background:#000b;color:#fff;font-size:34px;cursor:pointer;z-index:6;opacity:0;transition:opacity .15s}
.docshelf:hover .shelfnav,.shelfnav:focus-visible{opacity:1}.shelfnav.prev{left:0}.shelfnav.next{right:0}.shelfnav[disabled]{opacity:0!important;pointer-events:none}
@media(hover:none){.dochover{display:none}.shelfnav{display:none}}
@media(max-width:700px){.docshelf{padding:0 16px;--shelf-card:46vw}.shelfhead{font-size:22px}.layout-grid .shelftrack{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(prefers-reduced-motion:reduce){.dochover,.shelfnav,.docinfo{transition:none}}
.docpage{max-width:960px;margin:30px auto 60px;padding:0 24px}
.dochead{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start;margin-bottom:30px}
.dochead-cover{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:2px}.dochead-cover img{width:100%;height:100%;object-fit:cover}
.dochead-cover .gc-title{font-size:20px}
.dockind{margin:0 0 6px;font:700 12px "Segoe UI",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a}
.dochead h1{margin:0 0 6px;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:38px;line-height:1.15;color:#eee}
.docby{margin:0 0 6px;color:#ccc}.docfacts{color:#8a8a8a;font-size:14px;margin:0 0 14px}.docsummary{color:#d6d6d6;line-height:1.6}
.docbuttons{display:flex;gap:10px;flex-wrap:wrap}.ghostpay{background:transparent!important;border:1px solid #555!important;color:#ddd!important}
.doctoc{border:1px solid #262626;padding:14px 20px;margin:0 0 28px;background:#0d0d0d}.doctoc h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#999;margin:0 0 8px}
.doctoc ol{margin:0;padding-left:20px}.doctoc li{margin:4px 0}.doctoc .lvl3{margin-left:16px;list-style:circle}
.docbody{line-height:1.75;color:#d8d8d8;font-size:16.5px}.docbody h2,.docbody h3{color:#eee;scroll-margin-top:80px}
.docbody pre{background:#111;border:1px solid #222;padding:12px 14px;overflow:auto}.docbody blockquote{border-left:3px solid #444;margin:16px 0;padding:2px 16px;color:#bbb}
.pdfview{display:block;width:100%;height:85vh;min-height:520px;border:1px solid #262626;background:#111}.pdffallback{padding:24px}
@media(max-width:700px){.dochead{grid-template-columns:110px 1fr;gap:16px}.dochead h1{font-size:26px}.pdfview{height:70vh}}
@media print{.dochover,.shelfnav,.docbuttons{display:none!important}}