.family-chooser {display:grid;grid-template-columns:minmax(160px,1fr) minmax(190px,1.5fr);gap:12px;margin:10px 0 18px}
.family-chooser label {display:flex;flex-direction:column;gap:6px;font-size:16px;min-width:0}
.family-chooser input,.family-chooser select {width:100%;min-width:0;min-height:44px;font-size:16px}
.family-heading {font-size:18px;line-height:1.6;margin:12px 0 6px;overflow-wrap:anywhere}
.family-folios {max-width:100%;overflow-x:auto;padding:18px 12px 20px;border:1px solid var(--line);border-radius:6px;background:var(--bg-subtle)}
.folio-rail {list-style:none;display:flex;align-items:stretch;gap:0;margin:0;padding:0;width:max-content;min-width:100%}
.folio-slot {position:relative;display:flex;flex-direction:column;width:240px;flex:none;padding:6px 18px 0}
.folio-slot::after {content:"";position:absolute;left:0;right:0;bottom:84px;height:1px;background:var(--ink-2);opacity:.45}
.folio-book {display:flex;flex-direction:column;gap:14px;flex:1;text-align:left;position:relative;isolation:isolate;min-height:240px!important;width:100%;margin:0 0 26px;padding:18px 16px!important;border:1px solid #19364b!important;border-radius:2px 4px 4px 2px!important;background:#294b64!important;color:#f2f3ec!important;transform:perspective(900px) rotateY(-7deg) rotateZ(-1deg);box-shadow:3px 2px 0 #e0dfd4,5px 3px 0 #b8beb7,0 12px 14px -8px #162a3b55;transition:transform .18s,box-shadow .18s}
.folio-book::before {content:"";position:absolute;inset:0;z-index:-1;border-left:3px solid #19384d;background:repeating-linear-gradient(90deg,#ffffff05 0,#ffffff05 1px,transparent 1px,transparent 3px),repeating-linear-gradient(0deg,#ffffff04 0,#ffffff04 1px,transparent 1px,transparent 4px)}
.folio-book:hover,.folio-book[aria-pressed="true"] {transform:perspective(900px) rotateY(-3deg) translateY(-5px);box-shadow:3px 2px 0 #e0dfd4,5px 3px 0 #b8beb7,0 17px 16px -9px #162a3b66}
.folio-book[aria-pressed="true"] {outline:3px solid var(--accent);outline-offset:7px}
.folio-number {font:14px/1.5 var(--font-mono);overflow-wrap:anywhere;border-bottom:1px solid #ffffff40;padding-bottom:10px}
.folio-title {font-size:16px;line-height:1.7;font-weight:650;overflow-wrap:anywhere}
.folio-status {font-size:13px;margin-top:auto;color:#e0e8e9}
.folio-year {font-size:16px;font-weight:650;text-align:center;position:relative;line-height:24px}
.folio-year::before {content:"";position:absolute;left:50%;top:-12px;height:9px;width:1px;background:var(--ink-2)}
.folio-date {font-size:13px;text-align:center;color:var(--ink-2);line-height:24px}
.folio-rail-unknown .folio-slot::after,.folio-rail-unknown .folio-year::before {display:none}
.folio-unknown {font-size:16px;margin:24px 0 8px}
.family-folios :focus-visible {outline:3px solid var(--accent);outline-offset:6px}
@media(min-width:601px) {
  .folio-rail-compact {display:grid;grid-template-columns:repeat(var(--edition-count),minmax(0,1fr));width:100%;min-width:0}
  .folio-rail-compact .folio-slot {width:auto;min-width:0;padding-inline:12px}
  .folio-rail-compact .folio-book {min-height:240px!important;max-width:220px;margin-inline:auto}
}
@media(max-width:600px) {.family-chooser {grid-template-columns:minmax(0,1fr)}.folio-slot {width:220px;padding-inline:14px}.family-folios {padding-inline:8px}}
@media(prefers-reduced-motion:reduce) {.folio-book {transition:none;transform:none!important}}