/*! Wavelength shelf — styles for the almanac card drawn by /e/shelf.js. WP-122, 2026-09-05.
 *  Every declaration below is the Library's own (lifted verbatim from library.html so the card is
 *  identical on / and on the product pages); the .sales rules at the end are the product-page mode.
 *  The button rules are scoped to .vol so a host page's own .btn can never restyle the card. */
.vol,.vol *{box-sizing:border-box}
.vol p,.vol h2{margin:0}
.vol h2{font-family:'Lora',Georgia,serif;line-height:1.2;color:#141A2F}
.vol a{text-decoration:none}
.vol .ctaline a{color:#177E70}
.vol .kicker{font-family:'Lora',Georgia,serif;font-size:clamp(19px,2.5vw,23px);letter-spacing:.15em;color:#141A2F;font-weight:600;margin-bottom:2px}.almhead{font-family:'Lora',Georgia,serif;font-size:clamp(19px,2.5vw,23px);letter-spacing:.15em;color:#141A2F;font-weight:600;margin:0 0 6px;text-transform:uppercase}.almhead .sub{font-size:.66em;letter-spacing:.1em;color:#5B6478;white-space:nowrap}
.shelf{display:grid;grid-auto-rows:1fr;gap:22px}
.shelf.anyopen{grid-auto-rows:auto}
.vol{background:#fff;border:1px solid #E4DDD1;border-radius:16px;box-shadow:0 8px 28px rgba(20,26,47,.07);overflow:hidden}
.vol .top{display:flex;gap:0;align-items:stretch}
.spine{flex:0 0 64px;display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);letter-spacing:.04em;color:#fff;position:relative}
.spine::after{content:"";position:absolute;top:0;bottom:0;right:0;width:6px;background:rgba(0,0,0,.14)}
.v1 .spine{background:linear-gradient(160deg,#177E70,#0F5A50)}
.v2 .spine{background:linear-gradient(160deg,#C7CEDB,#8F9BB0);color:#141A2F}
.v3 .spine{background:linear-gradient(160deg,#F7D275,#D99B2E);color:#141A2F}
.vol .top{height:100%}
.vol .body{flex:1;padding:20px 22px 18px;min-width:0;display:flex;flex-direction:column}
.vol h2{font-size:clamp(19px,2.6vw,24px);margin-bottom:4px}
.vol .tag{color:#6E7688;font-size:14.5px;max-width:620px}
.vol .stateline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.prog{flex:1 1 180px;max-width:280px;height:8px;background:#EFEAE0;border-radius:999px;overflow:hidden}
.prog i{display:block;height:100%;background:#177E70;border-radius:999px;width:0;transition:width .5s ease}
.count{font-size:13.5px;color:#6E7688;white-space:nowrap}
.owned{font-size:12px;font-weight:600;letter-spacing:.07em;color:#177E70;background:#E3F0ED;border-radius:999px;padding:4px 11px;text-transform:uppercase}
.vol .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.ctaline{display:block;flex-basis:100%;margin:0 0 2px;font-size:13.5px}
.toc{border-top:1px solid #EFEAE0;padding:6px 22px 14px;display:none}
.vol.open .toc{display:block}
.vol.open .top{height:auto}
.toc a.row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid #F4EFE6;color:#232838}
.toc a.row:last-child{border-bottom:0}
.toc .ic{flex:0 0 26px;text-align:center;font-size:15px}
.toc .rn{font-weight:500;font-size:15px;margin-right:auto;min-width:0;overflow-wrap:anywhere}
.toc .rt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8A93AD;background:#F4EFE6;border-radius:999px;padding:2px 8px;margin-left:2px;white-space:nowrap;flex:none}
.toc .sample-chip{color:#141A2F;background:#E9B44C;font-weight:700}
.toc .rt.incl-chip{background:#E4EAF6;color:#3A4258}
.toc a.row.incl .rn{font-family:'Lora',Georgia,serif;letter-spacing:.05em}
.toc a.row.incl .rn .sub{font-family:Poppins,system-ui,sans-serif;letter-spacing:.04em;font-size:.82em;color:#8A93AD;white-space:nowrap}
.toc .arrow{color:#177E70;flex:none}
.toc .locked .rn{color:#6E7688}
.toc a.row.locked{background:#F1EBE0}
.toc a.row.locked .rt{background:#E7DFD2}
.toc a.row.locked .rt.sample-chip{background:#E9B44C;color:#141A2F}
.toc a.row.locked .arrow{color:#A9B0BE}
.toc .ic.done{color:#3FBBA2;font-weight:800;font-size:21px;line-height:1}
.showtoc{background:none;border:0;color:#177E70;font-weight:600;font-size:14px;cursor:pointer;padding:8px 0;font-family:inherit}
.vol .btn{display:inline-block;background:#E9B44C;color:#141A2F;font-weight:600;padding:13px 26px;border-radius:999px;font-size:16px;border:0;cursor:pointer;transition:transform .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease}
.vol .btn:hover,.vol .btn:focus-visible{background:#E9B44C;color:#141A2F;transform:scale(1.05);box-shadow:0 0 0 3px rgba(233,180,76,.38),0 0 26px 7px rgba(233,180,76,.55)}
.vol .btn.small{padding:11px 18px;font-size:14px;min-width:190px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media(prefers-reduced-motion:reduce){.vol .btn:hover,.vol .btn:focus-visible{transform:none}}

/* ---- sales mode (the product pages): one almanac, contents open, arrows instead of locks ---- */
.vol.sales .showtoc{display:none}
.vol.sales .toc{display:block}
.vol.sales .top{height:auto}
.toc .ic.go{color:#177E70;font-weight:700;font-size:18px;line-height:1}
.toc a.row.todo .arrow{color:#177E70}
.vol.sales .count.sum{white-space:normal;line-height:1.45}