/* Shelf (.db-shelf): rows of bound books standing on the app's wooden plank.
   Ported from build_app.py (.sect, .row, .ledge, .sect h3 .shchip). Columns follow the shelf's own
   width (container queries): 2 on a small phone, 3 on a tablet, 4 to 5 on a desktop.
   The planks are placed by js/components/shelf.js (one per line of books, edge to edge). */
.db-shelf{--db-shelf-gap:clamp(12px,2.2cqw,22px);--db-shelf-row-gap:clamp(28px,3.4cqw,40px);--db-plank-h:clamp(16px,1.9cqw,24px);
  --db-shelf-bleed:0px;position:relative;display:block;container-type:inline-size}
.db-shelf__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--db-s3) var(--db-s5);margin:0 0 var(--db-s5)}
.db-shelf__title{display:flex;align-items:center;gap:.55rem;margin:0;font-size:var(--db-fs-h3);font-weight:700;line-height:1.1;color:var(--fg)}
.db-shelf__chip{min-height:26px;padding:0 .7rem;transform:translateY(1px)}

/* age filter: pill buttons, the pressed one in gold */
.db-shelf__tabs{display:flex;flex-wrap:wrap;gap:var(--db-s2)}
.db-shelf__tab{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem;border:0;border-radius:var(--db-r-pill);cursor:pointer;
  font-family:var(--db-font);font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg);
  background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  transition:background-color var(--m-dur-fast) linear,transform var(--m-dur-fast) var(--m-ease)}
.db-shelf__tab:hover{background:rgba(255,255,255,.14)}
.db-shelf__tab:active{transform:scale(.96)}
.db-shelf__tab[aria-pressed="true"]{background:linear-gradient(135deg,var(--db-gold),var(--db-gold-2));color:var(--db-on-gold);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 18px rgba(247,169,59,.28)}
.db-shelf__dot{width:9px;height:9px;border-radius:50%;background:var(--db-age-2-4);box-shadow:0 0 0 2px rgba(0,0,0,.18)}
.db-shelf__tab[data-age="4-5"] .db-shelf__dot{background:var(--db-age-4-5)}
.db-shelf__tab[data-age="5-6"] .db-shelf__dot{background:var(--db-age-5-6)}
.db-shelf__tab[data-age="6-7"] .db-shelf__dot{background:var(--db-age-6-7)}
.db-light .db-shelf__tab{background:rgba(27,36,64,.07);box-shadow:0 0 0 1px rgba(27,36,64,.14) inset}

/* the row: a grid; planks are absolutely placed children behind the books */
.db-shelf__row{--db-cols:2;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--db-cols),minmax(0,1fr));
  gap:var(--db-shelf-row-gap) var(--db-shelf-gap);align-items:start;padding:2px 0 var(--db-plank-h);
  transition:opacity var(--m-dur-fast) linear}
@container (min-width:560px){.db-shelf__row{--db-cols:3}}
@container (min-width:900px){.db-shelf__row{--db-cols:4}}
@container (min-width:1180px){.db-shelf__row{--db-cols:5}}
@container (min-width:560px){.db-shelf[data-cols="3"] .db-shelf__row{--db-cols:3}}
.db-shelf__row.is-out{opacity:0}
.db-shelf__row > .db-book{z-index:1}
/* the plank: the app's painted wood, repeated edge to edge, with a two-part shadow on the wall */
.db-shelf__ledge{position:absolute;left:calc(-1 * var(--db-shelf-bleed));right:calc(-1 * var(--db-shelf-bleed));height:var(--db-plank-h);z-index:0;pointer-events:none;
  background:url("../../assets/textures/plank.webp") left bottom/auto 100% repeat-x;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)) drop-shadow(0 7px 9px rgba(4,6,20,.5))}
.db-light .db-shelf__ledge{filter:sepia(.35) saturate(.55) brightness(1.55) drop-shadow(0 4px 5px rgba(0,0,0,.28))}
.db-shelf__empty{grid-column:1/-1;color:var(--fg-muted)}

/* books rising in after a filter change (transform + opacity only) */
@keyframes db-shelf-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.db-book.is-rising{animation:db-shelf-rise var(--m-dur-slow) var(--m-ease) both;animation-delay:calc(var(--i,0) * 40ms)}

@media (prefers-reduced-motion:reduce){
  .db-shelf__row{transition:none}
  .db-book.is-rising{animation:none}
  .db-shelf__tab{transition:none}
}