/* polka.css — the shelf of books (/books/ and 找课本 on the home page) and the lesson tiles of 我的课本 (home page).
   Dave, 16 Oct 2026 (mockup: HeHeChinese/05-serwis-www/makiety/2026-10-16-polka/). Drawn by assets/polka.js.
   - shelf: planks by level, covers with a page edge on the right, standing back on the plank (a contact shadow on the plank,
     the cover's shadow to the right onto the wall — never downwards: that looked as if the book were falling off).
   - "+ Add" / "✓ Added" under every cover, the same navy for every book; an added book wears a navy bookmark ribbon.
   - lesson tile: the lesson's scene full-bleed, the book's cover sticking out above the tile (like the objects of 玩一玩). */

/* ---------- shelf ---------- */
.pk-wall{max-width:1080px;margin:0 auto;box-sizing:border-box;background:#fff;border:2px solid var(--line,#CFDEEA);border-radius:28px;padding:38px 40px 34px}
.pk-lvls{display:flex;flex-wrap:wrap;gap:46px 64px}
.pk-lh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 30px;font-size:1.12rem;font-weight:700;line-height:1.2;color:var(--ink,#16324F)}
.pk-lh .cjk{font-size:1.2em}
.pk-lh .sn{color:var(--ink-soft,#5A748C);font-weight:600;font-size:.86em}
.pk-shelf{--fs:15px;--cw:150px;--ch:210px;--gap:30px;isolation:isolate;display:flex;flex-wrap:wrap;align-items:flex-start;gap:34px var(--gap);padding:0 16px}
/* every slot draws its own piece of the plank, wider than the slot: a wrapped row gets a plank of its own. Pieces sit at z -1 of
   the shelf, the book (with its contact shadow) at z 1, so a neighbour's piece never covers a book. */
.pk-slot{position:relative;display:flex;flex-direction:column;align-items:center;width:var(--cw)}
.pk-slot::before{content:"";position:absolute;z-index:-1;left:calc(var(--gap) / -2 - 1px);right:calc(var(--gap) / -2 - 1px);top:calc(var(--ch) - 5px);height:24px;
  background:linear-gradient(#F8EDD8 0,#F1DFBC 42%,#DDBF8A 42%,#CFAE74 88%,#B99660 88%,#B99660 100%)}   /* top seen from above | front edge | its lower lip; no box-shadow: overlapping pieces would show seams */
.pk-bk{position:relative;z-index:1;display:block;text-decoration:none;line-height:0}
.pk-bk::after{content:"";position:absolute;z-index:-1;left:-3%;right:-12%;bottom:-4px;height:9px;
  background:radial-gradient(ellipse at 45% 50%,rgba(22,50,79,.4) 0,rgba(22,50,79,0) 70%)}
.pk-bk span.cover{font-size:var(--fs);display:block;
  box-shadow:inset .22em 0 .3em -.18em rgba(0,0,0,.35),.12em 0 0 #FBF8F1,.2em 0 0 #DCD3C2,.3em 0 0 #FBF8F1,.38em 0 0 #D2C8B5,.46em .04em 0 #EFE8DA,.5em -.2em .8em -.2em rgba(22,50,79,.18)}
.pk-bk:hover span.cover{transform:translateY(-3px)}
.pk-bk:focus-visible{outline:3px solid var(--glow,#FFD76B);outline-offset:4px;border-radius:4px}
.pk-rib{position:absolute;z-index:2;top:-7px;right:16%;width:24px;height:52px;background:#16324F;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);filter:drop-shadow(0 2px 2px rgba(22,50,79,.3))}
.pk-under{margin-top:30px;height:124px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:calc(var(--cw) + var(--gap) - 6px)}
.pk-under .pk-tg{margin-top:auto}
.pk-go{display:flex;flex-direction:column;align-items:center;color:var(--bk,#16324F);font-weight:700;text-decoration:none;font-size:.95rem;line-height:1.25}
.pk-go:hover{text-decoration:underline}
.pk-go .py{font-family:var(--py)}
.pk-mini{display:block;width:96px;height:5px;border-radius:3px;background:#DCE7F0;overflow:hidden;margin:2px 0 0;flex:none}
.pk-mini i{display:block;height:100%;background:var(--bk,#16324F)}
.pk-meta{font-size:.9rem;font-weight:600;color:var(--ink-soft,#5A748C)}
.pk-tg{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;
  border:2px solid #16324F;background:#fff;color:#16324F;font:inherit;font-weight:700;font-size:.92rem;line-height:1;cursor:pointer;white-space:nowrap;box-sizing:border-box}
.pk-tg:hover{background:#F3F7FB}
.pk-tg.on{background:#16324F;color:#fff}
.pk-tg.on:hover{background:#244A70}
.pk-tg:focus-visible,.pk-go:focus-visible{outline:3px solid var(--glow,#FFD76B);outline-offset:3px}
.pk-foot{margin:22px auto 0;max-width:1080px;font-size:.98rem;font-weight:600;color:var(--ink-soft,#5A748C)}
.pk-foot .linkbtn{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink,#16324F);text-decoration:underline;cursor:pointer}
.pk-fb{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin:0 18px 18px 0;text-decoration:none;color:inherit}

/* the small shelf of 找课本 on the home page (first visit): smaller covers, only the button under them, levels side by side */
.pk-s .pk-lvls{gap:30px 34px}
.pk-s .pk-lh{margin-bottom:22px;font-size:1.02rem}
.pk-s .pk-shelf{--fs:11px;--cw:110px;--ch:154px;--gap:20px;padding:0 12px}
.pk-s .pk-slot::before{height:20px;top:calc(var(--ch) - 4px)}
.pk-s .pk-under{margin-top:26px;height:auto}
.pk-s .pk-rib{width:18px;height:40px;top:-6px}

@media (max-width:640px){
  .pk-wall{padding:24px 12px 8px;border-radius:22px}
  .pk-lvls{gap:30px}
  .pk-lh{margin:0 4px 22px;font-size:1rem}
  .pk-shelf,.pk-s .pk-shelf{--fs:9.2px;--cw:92px;--ch:129px;--gap:16px;padding:0 10px;row-gap:28px}
  .pk-slot::before,.pk-s .pk-slot::before{height:18px;top:calc(var(--ch) - 4px)}
  .pk-rib,.pk-s .pk-rib{width:17px;height:36px;top:-5px}
  .pk-under{margin-top:24px;height:96px;gap:5px}
  .pk-s .pk-under{height:auto}
  .pk-go{font-size:.86rem}
  .pk-go .z{display:none}                    /* phone: "▶ Lesson 8" only, the Chinese title is on the lesson tile at home */
  .pk-mini{width:64px}
  .pk-meta{font-size:.82rem}
  .pk-tg{min-height:38px;padding:0 10px;font-size:.8rem;gap:4px}
}

/* ---------- toast with Undo ---------- */
.pk-toast{position:fixed;z-index:60;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:calc(100% - 24px);box-sizing:border-box;
  background:#16324F;color:#fff;border-radius:999px;padding:8px 8px 8px 22px;display:flex;align-items:center;gap:16px;font-weight:600;font-size:1rem;line-height:1.25;
  box-shadow:0 10px 28px rgba(22,50,79,.35);transition:opacity .2s,transform .2s}
.pk-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pk-toast .cjk{font-family:var(--cjk)}
.pk-toast button{flex:none;appearance:none;min-height:40px;border-radius:999px;border:0;background:#fff;color:#16324F;font:inherit;font-weight:700;padding:0 16px;cursor:pointer}
@media (max-width:640px){ .pk-toast{border-radius:18px;padding:8px 8px 8px 16px;font-size:.92rem;width:calc(100% - 24px);justify-content:space-between} }
@media (prefers-reduced-motion:reduce){ .pk-toast{transition:none} .pk-bk:hover span.cover{transform:none} }

/* ---------- 我的课本: lesson tiles on the home page ---------- */
.pk-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:52px 16px;padding-top:34px}   /* row gap: room for the cover sticking out of the next row */
.pk-tw{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.pk-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;
  background:var(--bk,#16324F);box-shadow:0 1px 2px rgba(22,50,79,.08),0 8px 18px rgba(22,50,79,.10);transition:transform .18s,box-shadow .18s}
.pk-tile:hover{color:#fff;transform:translateY(-4px);box-shadow:0 2px 4px rgba(22,50,79,.10),0 14px 28px rgba(22,50,79,.16)}
.pk-tile:focus-visible{outline:4px solid var(--glow,#FFD76B);outline-offset:3px}
.pk-sc{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.pk-stk{position:absolute;z-index:2;left:12px;top:-30px;transform:rotate(-6deg);pointer-events:none;line-height:0}
.pk-stk span.cover{font-size:8.8px;display:block;box-shadow:0 0 0 3px #fff,0 10px 18px rgba(22,50,79,.35)}
.pk-tx{position:absolute;left:0;right:0;bottom:0;padding:38% 12px 18px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  background:linear-gradient(to top,rgba(9,22,38,.86) 0,rgba(9,22,38,.6) 36%,rgba(9,22,38,0) 100%)}
.pk-tt{min-width:0}
.pk-ln{display:block;font-size:.86rem;font-weight:700;opacity:.92;line-height:1.1}
.pk-lz{display:block;font-family:var(--cjk);font-weight:700;font-size:1.4rem;line-height:1.2;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-lz.py{font-family:var(--py);letter-spacing:0}
.pk-play{flex:none;width:40px;height:40px;border-radius:50%;background:var(--bk,#16324F);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pk-prog{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.28)}
.pk-prog i{display:block;height:100%;background:var(--bk,#16324F)}
.pk-u2{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:40px}
.pk-bn{font-family:var(--cjk);font-weight:700;font-size:.9rem;color:var(--ink-soft,#5A748C);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-bn:hover{text-decoration:underline;color:var(--ink,#16324F)}
.pk-nx{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 12px;border-radius:999px;border:2px solid var(--bk,#16324F);color:var(--bk,#16324F);
  background:#fff;font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pk-nx:hover{background:#FFFBE6}
.pk-bn:focus-visible,.pk-nx:focus-visible,.pk-add:focus-visible{outline:3px solid var(--glow,#FFD76B);outline-offset:3px}
.pk-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1/1;box-sizing:border-box;border-radius:22px;border:3px dashed #A9C2D6;
  background:#F5F9FC;color:var(--ink,#16324F);text-decoration:none;text-align:center;padding:10px}
.pk-add:hover{border-color:#7FA2BE}
.pk-add .pk-plus{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--line,#CFDEEA);display:flex;align-items:center;justify-content:center}
.pk-add b{font-size:1rem;line-height:1.2}
@media (max-width:999px){ .pk-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  /* phone: a swipe row that runs to the screen edges; the next tile peeks in (like the topics) */
  .pk-tiles{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:30px 20px 10px;scroll-padding:0 20px}
  .pk-tiles::-webkit-scrollbar{display:none}
  .pk-tw,.pk-tiles > .pk-add{flex:none;width:46%;scroll-snap-align:start}
  .pk-tiles > .pk-add{align-self:flex-start}
  .pk-tile,.pk-add{border-radius:20px}
  .pk-stk{left:8px;top:-24px}
  .pk-stk span.cover{font-size:7px;box-shadow:0 0 0 2px #fff,0 8px 14px rgba(22,50,79,.35)}
  .pk-tx{padding:40% 10px 14px 12px;gap:6px}
  .pk-ln{font-size:.8rem}
  .pk-lz{font-size:1.2rem;letter-spacing:.03em}
  .pk-play{width:34px;height:34px}
  .pk-prog{height:5px}
  .pk-u2{gap:6px}
  .pk-bn{font-size:.8rem}
  .pk-nx{min-height:34px;padding:0 10px;font-size:.8rem;gap:4px}
}
@media (prefers-reduced-motion:reduce){ .pk-tile{transition:none} .pk-tile:hover{transform:none} }

/* ---------- type A (17 Oct 2026, three card types): the lesson tile has ONE white round button, bottom right ----------
   the tile = the last lesson opened; the button "4 ›" = the next lesson (a link of its own, laid over the tile, so not nested in
   the tile's link); a book without a next lesson shows a white ▶ instead. No row under the tile. "Add a book": the same shape,
   a plain light fill, no dashed line. */
.pk-tiles{gap:52px 16px}
.pk-tw{gap:0}
.pk-tx{padding-right:70px}
.pk-play{position:absolute;right:12px;bottom:18px;width:44px;height:44px;background:#fff;color:var(--bk,#16324F);box-shadow:0 3px 0 rgba(0,0,0,.15)}
.pk-play svg{margin-left:2px}
.pk-nx{position:absolute;z-index:3;right:12px;bottom:18px;min-width:44px;height:44px;min-height:0;padding:0 12px 0 14px;gap:3px;justify-content:center;
  border:0;background:#fff;color:var(--bk,#16324F);font-size:1.05rem;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.pk-nx:hover{background:#FFFBE6;transform:translateY(-1px)}
.pk-nx span[aria-hidden]{font-size:1.25rem;line-height:1;margin-top:-2px}
.pk-add{border:0;background:#DCE8F2;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.pk-add:hover{background:#D2E2EF}
.pk-add .pk-plus{border:0;box-shadow:0 3px 0 rgba(22,50,79,.12)}
@media (max-width:640px){
  .pk-tx{padding-right:56px}
  .pk-play,.pk-nx{right:10px;bottom:14px;height:38px;min-width:38px}
  .pk-play{width:38px}
  .pk-nx{font-size:.95rem;padding:0 9px 0 11px}
}