/* Home page (/): the wooden bookcase and the strips. The Explorer
   grid is home-grid.css, phone layouts home-phone.css; chrome primitives live in
   style.css (the filter bar: window-chrome.css), dialog innards in home-dialogs.css.
   Cover rules here size covers only — never `display`, so a jacket keeps its flex. */
:root {
  --wood-back: #5a3a1e; --wood-plank: #8b5a2b; --wood-edge: #3e2612; --wood-hi: #b07a45;
  --label: #f3e9c8; --label-edge: #8a7a52; --label-ink: #2a1c0c; --label-ink-2: #7a6431; --brass: #b8923f; --brass-dark: #5c4515;
  --grain: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 23px, rgba(255,255,255,.03) 23px 25px, transparent 25px 41px);
  --case-side: 12px;
}
img.cover, img.face, img.detail-cover { object-fit: cover; background: var(--hilite); }

/* ===== The bookcase =====
   One continuous case: side panels and plinth are painted in #shelf-view's own
   padding; each .shelf-sec is a compartment under a rail carrying a brass-framed
   card. A unit grows to fill its row so the plank runs wall to wall. */
#shelf-view {
  margin: var(--s3); padding: 0 var(--case-side) var(--case-side);
  background:
    linear-gradient(0deg, var(--wood-edge) 0 1px, var(--wood-plank) 1px calc(var(--case-side) - 2px), var(--wood-hi) 0 var(--case-side), transparent 0),
    linear-gradient(90deg, var(--wood-edge) 0 1px, var(--wood-hi) 1px 3px, var(--wood-plank) 3px calc(var(--case-side) - 1px), var(--wood-edge) 0 var(--case-side),
      transparent 0 calc(100% - var(--case-side)), var(--wood-edge) 0 calc(100% - var(--case-side) + 1px), var(--wood-plank) 0 calc(100% - 1px), var(--wood-edge) 0),
    var(--wood-back);
  box-shadow: 0 0 0 1px var(--wood-edge), 4px 4px 0 rgba(0,0,0,.18);
}
#shelf-view[hidden], #grid-view[hidden] { display: none; }
#shelves:empty { display: none; }
#shelves > .loading95 { margin: 0; padding: var(--s6) var(--s4); color: var(--label); background: var(--wood-back); }
.shelf-sec[hidden] { display: none; }

/* The rail: a crosspiece of the case with the section's card plaque. */
.shelf-title {
  display: flex; margin: 0; padding: 7px var(--s3) 8px;
  background: linear-gradient(180deg, var(--wood-hi) 0 2px, transparent 2px calc(100% - 3px), var(--wood-edge) 0), var(--grain), var(--wood-plank);
}
.plaque {
  display: inline-flex; align-items: baseline; gap: var(--s2); max-width: 100%; padding: 1px 10px 0;
  background: var(--label); color: var(--label-ink); font: 400 var(--d-md)/1.15 var(--font-display); letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px var(--brass-dark), inset 0 -1px rgba(0,0,0,.12), 2px 3px 0 3px rgba(0,0,0,.25);
}
.shelf-n { font: 600 var(--t-xs)/1 var(--font-ui); color: var(--label-ink-2); font-variant-numeric: tabular-nums; }

.shelf-wrap {
  display: flex; flex-wrap: wrap; align-items: flex-start; padding: var(--s3) 0 0;
  background: var(--grain), var(--wood-back); box-shadow: inset 0 14px 18px -8px rgba(0,0,0,.55);
}
/* The run of books sets a unit's width, never its card (width: min-content —
   the card's name wraps, the bay cannot): a long list name next to three books
   would otherwise stretch the plank into empty wood. min-width keeps a small
   unit's card wide enough to read in three lines.
   Units hang from the top and every bay has one height, so the planks on a row
   form one line whatever the cards below them wrap to. */
.unit { flex: 1 0 auto; width: min-content; display: flex; flex-direction: column; align-items: flex-start; min-width: min(100%, 220px); max-width: 100%; margin-bottom: var(--s3); }

/* Bay: covers + spines on a baseline; ::after is the plank under them. */
.bay {
  align-self: stretch; display: flex; align-items: flex-end; gap: 2px; min-height: 126px; margin: 0;
  padding: 0 var(--s3) 9px; border: 0; background: none; cursor: pointer; position: relative; text-align: left;
}
.bay::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: linear-gradient(180deg, var(--wood-hi) 0 2px, var(--wood-plank) 2px 7px, var(--wood-edge) 7px);
  box-shadow: 0 2px 2px rgba(0,0,0,.45);
}
.bay:hover { background: linear-gradient(180deg, transparent, rgba(255,255,255,.07)); }
.bay:focus-visible { outline: 1px dotted var(--label); outline-offset: -3px; }
.unit.open .bay { background: linear-gradient(180deg, transparent, rgba(255,255,255,.12)); }

.bay .face {
  width: 66px; height: 96px; flex: none; transition: transform .12s steps(2);
  box-shadow: var(--cover-shadow);
}
.bay:hover .face { transform: translateY(-3px); }

/* Spines: cloth colours shared with the jackets; thickness/height per title. */
.bspine {
  --th: 9px; --h: 92px; --c: var(--cloth-0);
  width: var(--th); height: var(--h); flex: none; background: var(--c); position: relative;
  box-shadow: inset 1px 0 rgba(255,255,255,.28), inset -2px 0 rgba(0,0,0,.45),
              inset 0 2px rgba(255,255,255,.18), inset 0 -3px rgba(0,0,0,.4), 2px 2px 0 rgba(0,0,0,.3);
}
.bspine::before, .bspine::after { content: ""; position: absolute; left: 1px; right: 2px; height: 2px; background: rgba(230,207,139,.45); }
.bspine::before { top: 8px; }
.bspine::after { bottom: 12px; opacity: .6; }
.bspine.c1 { --c: var(--cloth-1); } .bspine.c2 { --c: var(--cloth-2); } .bspine.c3 { --c: var(--cloth-3); }
.bspine.c4 { --c: var(--cloth-4); } .bspine.c5 { --c: var(--cloth-5); } .bspine.c6 { --c: var(--cloth-6); }
.bspine.c7 { --c: var(--cloth-7); }

/* Tiers: more books → more facing covers, taller books, a longer run. */
.unit.t0 .bay .face { width: 54px; height: 80px; }  .unit.t0 .bspine { --h: 78px; }
.unit.t1 .bay .face { width: 60px; height: 88px; }  .unit.t1 .bspine { --h: 86px; }
.unit.t3 .bay .face { width: 72px; height: 104px; } .unit.t3 .bspine { --h: 100px; }

/* The card in its brass holder under each run of books. */
.plate {
  display: flex; align-items: last baseline; gap: 6px; max-width: calc(100% - var(--s4)); margin: 7px var(--s3) 0;
  padding: 2px 8px; background: var(--label); color: var(--label-ink); font: 500 var(--t-sm)/1.3 var(--font-ui);
  box-shadow: 0 0 0 1px var(--brass), 0 0 0 2px var(--brass-dark), 2px 2px 0 2px rgba(0,0,0,.25);
}
.plate-name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-wrap: balance; overflow-wrap: anywhere; }
.plate-n { flex: none; font-size: var(--t-xs); color: var(--label-ink-2); font-variant-numeric: tabular-nums; }
.unit.open .plate { background: var(--sel); color: var(--sel-text); }
.unit.open .plate-n { color: var(--sel-muted); }

/* "Kệ của tôi": reading progress as a sunken gauge. Every unit in the section
   reserves the strip so the cards on a row keep one baseline. */
.shelf-sec.has-prog .unit { padding-bottom: 20px; position: relative; }
.shelf-sec.has-prog .unit .unit-prog { position: absolute; left: var(--s3); right: var(--s3); bottom: 0; margin: 0; }
.unit-prog { position: relative; display: block; height: 14px; margin: 4px var(--s3) 0; background: var(--paper); box-shadow: var(--bevel-field); }
.unit-prog-fill { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: var(--sel); }
.unit-prog-txt { position: absolute; inset: 0; text-align: center; font: 600 var(--t-xs)/14px var(--font-ui); color: var(--dark); text-shadow: 0 0 2px var(--light), 0 0 2px var(--light); }

/* Drawer: a small window opened in place under the unit. Its title bar
   (.drawer-head) is painted with the other title bars in style.css. */
.shelf-drawer {
  flex: 1 0 100%; margin: 0 var(--s2) var(--s3); padding: 3px; background: var(--face);
  box-shadow: var(--bevel-window), 4px 4px 0 rgba(0,0,0,.35); animation: unfold .12s steps(4, end);
}
.drawer-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--d-sm)/1.1 var(--font-display); letter-spacing: .02em; }
.drawer-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 var(--t-xs)/1 var(--font-ui); color: var(--sel-muted); }
.drawer-all { --py: 1px; --px: 10px; min-height: 20px; flex: none; font-size: var(--t-xs); }
@media (pointer: coarse) { .drawer-all { min-height: var(--tap); } }
/* Columns share out the spare width, so the covers sit evenly, not flush left. */
.drawer-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--s4) var(--s3); margin-top: 3px; padding: var(--s3); background: var(--paper); box-shadow: var(--bevel-field); }
.dcard { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.dcard:hover { text-decoration: none; }
.dcard .cover { width: 70px; height: 100px; box-shadow: var(--cover-shadow); transition: transform .12s steps(2); }
.dcard:hover .cover { transform: translateY(-2px); }
.dcard-title { width: 100%; padding: 0 2px; font: 500 var(--t-xs)/1.3 var(--font-ui); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcard:hover .dcard-title, .dcard:focus-visible .dcard-title { background: var(--sel); color: var(--sel-text); }
.dcard:focus-visible { outline: none; }
.dcard:focus-visible .dcard-title { outline: 1px dotted var(--dark); outline-offset: 1px; }

/* ===== Strips (Đang đọc dở / Mới thêm): a row of books on one plank ===== */
.continue-row {
  --cv-w: 64px; --cv-h: 92px; --pt: 14px;
  display: flex; gap: var(--s4); overflow-x: auto; padding: var(--pt) var(--s3) var(--s3); scrollbar-color: var(--wood-hi) var(--wood-edge);
  background:
    linear-gradient(180deg, transparent calc(var(--pt) + var(--cv-h)), var(--wood-hi) 0 calc(var(--pt) + var(--cv-h) + 2px),
      var(--wood-plank) 0 calc(var(--pt) + var(--cv-h) + 8px), var(--wood-edge) 0 calc(var(--pt) + var(--cv-h) + 10px), transparent 0),
    var(--grain), var(--wood-back);
  box-shadow: inset 0 14px 18px -8px rgba(0,0,0,.55);
}
.continue-card { flex: 0 0 calc(var(--cv-w) + 20px); display: flex; flex-direction: column; align-items: center; color: var(--label); text-decoration: none; }
.continue-card:hover { text-decoration: none; }
.continue-card .cover { width: var(--cv-w); height: var(--cv-h); box-shadow: var(--cover-shadow); transition: transform .12s steps(2); }
.continue-card:hover .cover { transform: translateY(-3px); }
.continue-label { margin-top: 18px; width: 100%; font: 500 var(--t-xs)/1.3 var(--font-ui); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.continue-card:hover .continue-label, .continue-card:focus-visible .continue-label { background: var(--sel); color: var(--sel-text); }
.continue-card:focus-visible { outline: none; }
.continue-card:focus-visible .continue-label { outline: 1px dotted var(--label); outline-offset: 1px; }
.continue-pct { margin-top: 3px; font: 400 var(--t-xs)/1.2 var(--font-ui); color: rgba(243,233,200,.7); }
.cc-gauge { position: relative; display: block; width: 100%; height: 14px; margin-top: 5px; background: var(--paper); box-shadow: var(--bevel-field); }
.cc-gauge i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: var(--sel); }
.cc-gauge b { position: absolute; inset: 0; font: 600 var(--t-xs)/14px var(--font-ui); text-align: center; color: var(--dark); text-shadow: 0 0 2px var(--light), 0 0 2px var(--light); }