/* Magicians Keep: the bookshelf in Your Chamber (account.html).
   Lessons you buy land on the shelf as leather books. Opened, each is the Library's book (assets/css/tome.css)
   with its tutorial inside; the few extras for that are at the bottom. The workings live in assets/js/bookshelf.js. */

/* ===== The shelf on the wall ===== */
.myshelf{--post:clamp(12px,2vw,20px);--board:clamp(14px,2vw,20px);position:relative;max-width:980px;margin:0 auto}
.ms-case{position:relative;overflow:hidden;padding:0 var(--post);border-radius:4px 4px 0 0;
  background:radial-gradient(ellipse 70% 60% at 50% 30%,rgba(255,180,90,.12),rgba(0,0,0,0) 70%),linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 8%,rgba(0,0,0,0) 92%,rgba(0,0,0,.5)),#1a110a;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6)}
.ms-case::before,.ms-case::after{content:"";position:absolute;top:0;bottom:0;width:var(--post);z-index:3;background:linear-gradient(90deg,#160d07,#3a2616 30%,#4a321d 50%,#2c1c0f 78%,#140b06);box-shadow:0 0 14px rgba(0,0,0,.6)}
.ms-case::before{left:0}
.ms-case::after{right:0}
/* the carved top with its brass plate */
.ms-top{position:relative;z-index:4;margin:0 -10px;padding:12px 16px 14px;display:flex;justify-content:center;border-radius:6px 6px 0 0;
  background:linear-gradient(rgba(255,215,160,.16),rgba(0,0,0,0) 40%,rgba(0,0,0,.6)),url('../shop/plank.jpg') -200px -20px/1400px auto;
  box-shadow:0 10px 16px -6px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,225,180,.25)}
.ms-plate{position:relative;display:inline-flex;align-items:baseline;gap:.6em;padding:.28em 1.4em .34em;border-radius:4px;color:#2b1d0c;font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.15;text-align:center;
  background:linear-gradient(180deg,#f3dc9c 0%,#d6b062 38%,#b48a3e 62%,#d9b86c 100%);text-shadow:0 1px 0 rgba(255,245,210,.55);
  box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,250,220,.75),inset 0 -1px 0 rgba(90,60,20,.6),inset 0 0 0 1px rgba(120,82,30,.55)}
.ms-plate::before,.ms-plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff1c4,#8a6426 70%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.ms-plate::before{left:7px}
.ms-plate::after{right:7px}
.ms-shelf{position:relative;padding-top:clamp(22px,3vw,30px)}
.ms-shelf + .ms-shelf{margin-top:4px}
.ms-row{position:relative;z-index:2;display:flex;align-items:flex-end;gap:2px;height:var(--rowh,230px);padding:0 6px}
.ms-board{position:relative;z-index:1;height:var(--board);margin:0 calc(-1 * var(--post));
  background:linear-gradient(rgba(255,215,160,.16),rgba(0,0,0,0) 35%,rgba(0,0,0,.6)),url('../shop/plank.jpg') -120px -60px/1400px auto;
  box-shadow:0 12px 18px -6px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,225,180,.25)}
.ms-plinth{position:relative;z-index:3;height:clamp(18px,2.6vw,26px);margin:0 -10px;border-radius:0 0 4px 4px;
  background:linear-gradient(rgba(255,215,160,.14),rgba(0,0,0,0) 30%,rgba(0,0,0,.55)),url('../shop/plank.jpg') -300px -40px/1400px auto;
  box-shadow:0 24px 40px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,225,180,.22)}
/* the empty part of a shelf: faint dust, and a note chalked on the back */
.ms-space{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 12px;text-align:center}
.ms-space p{max-width:30ch;font-style:italic;font-size:clamp(.95rem,1.6vw,1.08rem);line-height:1.4;color:rgba(241,227,196,.6);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.ms-space a{display:inline-block;margin-top:8px;font-style:normal;color:var(--glow);text-underline-offset:4px}
.ms-dust{position:absolute;left:var(--post);right:var(--post);bottom:var(--board);height:10px;z-index:1;pointer-events:none;background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(230,215,180,.06),rgba(0,0,0,0) 70%)}
/* a candle at the end of the shelf */
.ms-candle{position:relative;flex:none;align-self:flex-end;width:calc(var(--rowh) * .34);height:calc(var(--rowh) * .5);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.ms-candle img{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6)) brightness(.85)}
.ms-candle::before{content:"";position:absolute;left:-150%;right:-150%;top:-75%;bottom:-25%;background:radial-gradient(closest-side,rgba(255,196,110,.3),rgba(255,196,110,.1) 55%,rgba(255,196,110,0));animation:msCandle 3.4s ease-in-out -1.2s infinite}
@keyframes msCandle{0%,100%{opacity:.75}30%{opacity:1}48%{opacity:.82}70%{opacity:.95}}

/* ===== A book on the shelf ===== */
.ms-book{position:relative;flex:none;display:block;width:var(--w);height:var(--h);padding:0;border:0;border-radius:3px 3px 2px 2px;background:center/100% 100% no-repeat;color:inherit;cursor:pointer;transform-origin:50% 100%;
  filter:drop-shadow(2px 0 3px rgba(0,0,0,.55));transition:transform .45s var(--ease-out),filter .45s var(--ease-out);-webkit-tap-highlight-color:transparent}
.ms-book::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,220,160,.10),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.25))}
.ms-book:hover,.ms-book:focus-visible{transform:translateY(-6%);filter:drop-shadow(2px 0 3px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,200,120,.45)) brightness(1.1)}
.ms-book:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.ms-book .lbl{position:absolute;left:17%;right:17%;top:15%;bottom:15%;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,rgba(8,5,2,.62),rgba(24,13,6,.78) 50%,rgba(8,5,2,.62));box-shadow:inset 0 0 0 1px rgba(226,190,120,.6),inset 0 0 0 3px rgba(0,0,0,.35),0 1px 0 rgba(255,220,160,.12)}
.ms-book .ttl{writing-mode:vertical-rl;text-orientation:sideways;max-height:100%;font-family:var(--f-display);font-weight:700;font-size:var(--fs,15px);line-height:1.04;letter-spacing:.02em;text-align:center;white-space:nowrap;
  color:#f2cf82;background:linear-gradient(90deg,#fbe6b0,#e8b85c 55%,#b8822e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.85))}
.ms-book .ttl.wrap{white-space:normal}
/* the brass tab on the shelf edge under a book */
.ms-tab{position:absolute;left:50%;top:100%;z-index:3;margin-top:3px;padding:.1em .5em .14em;border-radius:3px;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font-family:var(--f-body);font-weight:700;font-size:.72rem;line-height:1.2;color:#3a2509;background:linear-gradient(180deg,#f3dc9c,#c99a48 60%,#a87a32);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,250,220,.7)}
/* a book you have not opened yet: a red ribbon out of the top, in the middle of the spine */
.ms-book.new::before{content:"";position:absolute;left:50%;bottom:calc(100% - 1px);width:9px;height:18px;margin-left:-4.5px;background:linear-gradient(90deg,#8f241d,#c8402f 45%,#8f241d);clip-path:polygon(0 0,50% 22%,100% 0,100% 100%,0 100%)}
/* a book being read leaves its place on the shelf, then slides back in */
.myshelf .ms-row .ms-book.out,.myshelf.in .ms-row .ms-book.out{opacity:0}
/* books settle onto the shelf when it comes into view; a new one drops in from above */
.ms-row .ms-book{opacity:0;translate:0 -10px;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out),transform .45s var(--ease-out),filter .45s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms),calc(var(--i,0) * 70ms),0s,0s}
.myshelf.in .ms-row .ms-book{opacity:1;translate:0 0}
.myshelf.in.settled .ms-row .ms-book{transition-delay:0s}
.myshelf.in .ms-row .ms-book.drop{animation:msDrop .9s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--i,0) * 110ms + 150ms)}
@keyframes msDrop{0%{opacity:0;transform:translateY(-70%) rotate(-7deg)}55%{opacity:1;transform:translateY(2%) rotate(1.5deg)}75%{transform:translateY(-3%) rotate(-.6deg)}100%{opacity:1;transform:none}}
@media (max-width:640px){.ms-tab{font-size:.64rem;padding:.08em .35em .1em}.ms-top{padding:9px 10px 11px}}
@media (prefers-reduced-motion: reduce){.myshelf .ms-row .ms-book{transition:none;opacity:1;translate:0 0}.myshelf.in .ms-row .ms-book.drop{animation:none}.ms-candle::before{animation:none}}

/* ===== The open book: the Library's book (tome.css), with the tutorial where the picture would be ===== */
/* the video sits in the plate, in a dark frame. The frame is always 16 by 9 of its width (the old padding way, not
   aspect-ratio) and is sized as if it were empty, so pressing play or opening "About this book" can never grow it.
   An iPhone grew the old frame: Safari let the playing video and the page column size each other */
.shelf-tome .plate-fig.vid{display:block;flex:none;height:auto;min-width:0;min-height:0;aspect-ratio:auto;padding:12px}
.shelf-tome .plate-fig.vid[hidden]{display:none}
.bk-screen{position:relative;width:100%;height:0;padding-top:56.25%;contain:size layout;border-radius:2px;overflow:hidden;background:#140d08;box-shadow:0 0 0 1px rgba(60,35,10,.55),0 8px 16px rgba(60,35,10,.3)}
/* whatever is in the frame (the still, the player, or a note) fills it exactly and never sizes it */
.bk-screen>*{position:absolute;top:0;left:0;width:100%;height:100%;margin:0}
/* a canvas is the printed copy of a video that has started (a page turning shows the picture it was showing) */
.bk-screen iframe,.bk-screen video,.bk-screen canvas{max-width:100%;max-height:100%;border:0;object-fit:contain;background:#000}
/* the note in place of a video. It may be taller than a small frame, so it is never cut off at the top: it starts at
   the top and scrolls inside the frame (a browser that does not know "safe" centers it, as before) */
.bk-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:12px;padding:20px;overflow:auto;text-align:center;font-style:italic;color:#e9dbbb;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(227,168,90,.22),rgba(0,0,0,0) 70%),#1a120b}
.bk-wait a{font-style:normal}
/* before it plays: a still of the video with a play button */
.bk-facade{display:grid;place-items:center;background-color:#1a120b;background-image:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(227,168,90,.2),rgba(0,0,0,0) 70%);background-size:cover;background-position:center;background-repeat:no-repeat}
.bk-facade::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.35));pointer-events:none}
.bk-playbtn{position:relative;display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:50%;border:2px solid rgba(243,217,168,.85);background:rgba(20,12,6,.6);color:#f3d9a8;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.bk-playbtn:hover{transform:scale(1.08);background:rgba(20,12,6,.8);border-color:#f3d9a8}
.bk-playbtn:focus-visible{outline:2px solid #f3d9a8;outline-offset:3px}
.bk-playbtn:disabled{opacity:.6;cursor:default}
.bk-tick{position:absolute;left:8px;right:8px;bottom:8px;margin:0;padding:6px 10px;border-radius:8px;background:rgba(20,12,6,.8);color:#f3d9a8;text-align:center;font-size:.95rem;line-height:1.3}
.bk-tick[hidden]{display:none}
.bk-playbtn svg{width:26px;height:26px;margin-left:3px}
/* the close button: printed on every right-hand page on a computer, at the top of the book on a phone */
.shelf-tome .page.right > .tome-close{top:8px;right:8px}
.shelf-tome .binding > .tome-close{display:none}
/* the top of the left page: page number in the corner, the kind of book by the spine */
.bk-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.shelf-tome .page .bk-pg{color:#3a2410}
.bk-pg:empty{display:none}
/* the name of the page under the plate. It keeps room for the longest name in the book (bookshelf.js fit()), and a
   shorter one sits in the middle of that room */
.bk-cap{display:grid;align-content:center;margin-top:10px;text-align:center;font-family:var(--f-display);font-weight:700;font-size:1.3rem;line-height:1.15;color:#3a2410}
.bk-cap[hidden]{display:none}
/* what this page says, and its practice. Line breaks are kept as they were typed */
.bk-main{flex:none}
.bk-page-text{margin-top:10px;white-space:pre-line;color:#3a2410;line-height:1.5}
.bk-page-text:empty{display:none}
.bk-practice{margin-top:12px;padding:10px 14px;border-left:3px solid #8f241d;border-radius:0 6px 6px 0;background:rgba(143,36,29,.07)}
.bk-practice:first-child{margin-top:0}
.bk-practice b{display:block;margin-bottom:4px;font-family:var(--f-mono);font-weight:400;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#7a1f18}
/* a book with its own writing on its pages: on a computer its description and facts move to the right-hand page, out of
   the way of the writing (on a phone they stay behind "About this book") */
@media (min-width:761px),(min-width:560px) and (max-height:520px){.bk-desc.off,.bk-tags.off{display:none}}
@media (max-width:760px) and (min-height:521px),(max-width:559px){.shelf-tome .page .bk-desc-r,.shelf-tome .page dl.bk-tags-r{display:none}}
/* the bottom corners of the book: each page is a column, and its foot sits at the very bottom */
.shelf-tome .page{display:flex;flex-direction:column;min-width:0;overflow-wrap:break-word;overflow-wrap:anywhere}
/* the pages always share the book evenly: nothing printed on them (a long word, the list of pages, the tags) can widen one */
.shelf-tome .pages{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shelf-tome .page dl{grid-template-columns:fit-content(40%) minmax(0,1fr)}
.shelf-tome .chapters li{grid-template-columns:2.2em minmax(0,1fr)}
.bk-gap{flex:1 0 22px}
.shelf-tome .turn.bk-foot{align-items:center;margin-top:0;padding-top:12px}
.bk-foot.l{justify-content:space-between}
.bk-foot.r{justify-content:flex-end}
.bk-down[hidden]{display:none}
.bk-down svg{rotate:90deg}
.shelf-tome .turn button:disabled{opacity:.35;cursor:default;text-decoration:none}
.bk-of{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em;color:#7a5a30;white-space:nowrap}
/* an iPhone draws a grey box over a button as it is tapped; on these it would hang over the page as it starts to turn */
.shelf-tome .turn button,.shelf-tome .chapters button,.shelf-tome .bk-more{-webkit-tap-highlight-color:transparent}
.shelf-tome .turn button{white-space:nowrap}
/* the pages of the book, listed on the right: press one to turn straight to it */
.shelf-tome .chapters button{padding:2px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .25s,color .25s}
.shelf-tome .chapters button:hover{text-decoration-color:rgba(90,58,26,.5)}
.shelf-tome .chapters button[aria-current="page"]{font-weight:700;color:#2a1a0e;text-decoration-color:rgba(143,36,29,.6)}
.shelf-tome .chapters button:focus-visible{outline:2px solid #8f241d;outline-offset:2px;border-radius:2px}
.bk-ch-wrap[hidden]{display:none}
.shelf-tome .bk-name-m,.shelf-tome .bk-foot.m,.shelf-tome .bk-more{display:none}
/* a phone on its side: the video is only as wide as lets it, its name and the buttons under it all fit on the screen
   (what else the left page holds and the book's edges come to 180px) */
@media (min-width:560px) and (max-width:1100px) and (max-height:520px){
  .shelf-tome .plate-fig.vid{width:100%;max-width:max(220px,calc((100vh - 180px)*16/9 + 12px));max-width:max(220px,calc((100svh - 180px)*16/9 + 12px));margin:6px auto 0;padding:6px}
  .bk-cap{margin-top:6px;font-size:1.05rem}
  .bk-playbtn{width:52px;height:52px}
  .bk-playbtn svg{width:22px;height:22px}
  .bk-wait{padding:10px;gap:8px}
  .bk-page-text{margin-top:6px;line-height:1.4}
  .bk-practice{margin-top:8px;padding:6px 10px}
  .bk-gap{flex-basis:6px}
  .shelf-tome .turn.bk-foot{padding-top:4px}
  .shelf-tome .page.right>.tome-close{display:none}
  .shelf-tome .binding>.tome-close{display:grid}
  .shelf-tome .page.right>h2{padding-right:44px}
}
@media (max-width:760px) and (min-height:521px),(max-width:559px){
  .shelf-tome .pages{grid-template-columns:minmax(0,1fr)}
  .shelf-tome .plate-fig.vid{padding:6px;margin-top:8px}
  .bk-wait{padding:10px;gap:8px}
  .bk-cap{font-size:1.1rem}
  /* a phone shows the essentials on one screen: the name, the video, its caption and the page buttons under it;
     the rest of the book opens with "About this book" */
  .shelf-tome .bk-name-m{display:block;margin:6px 0 0;font-family:var(--f-display);font-size:1.45rem;line-height:1.1;color:#2a1a0e}
  .shelf-tome .bk-foot.m{display:flex;justify-content:space-between;padding-top:8px}
  .shelf-tome .bk-foot.m[hidden]{display:none}
  .bk-foot.l,.bk-foot.r,.page.left .bk-gap,.page.right .bk-gap{display:none}
  .shelf-tome .bk-more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;padding:11px 2px;border:0;border-top:1px solid rgba(90,58,26,.25);border-bottom:1px solid rgba(90,58,26,.25);background:none;color:#5a3a1a;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .shelf-tome .bk-more::after{content:"";width:8px;height:8px;margin-right:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
  .shelf-tome.more .bk-more::after{transform:rotate(-135deg) translateY(-2px)}
  .shelf-tome .bk-more:focus-visible{outline:2px solid #8f241d;outline-offset:2px}
  .shelf-tome:not(.more) .bk-desc,.shelf-tome:not(.more) .bk-tags,.shelf-tome:not(.more) #bk-h,.shelf-tome:not(.more) .bk-mark,
  .shelf-tome:not(.more) .bk-level,.shelf-tome:not(.more) .bk-details,.shelf-tome:not(.more) .bk-ch-wrap,.shelf-tome:not(.more) .bk-note{display:none}
  /* folded away, everything on the right-hand page is hidden, so the page is left out and the book ends with
     "About this book", with no line under it */
  .shelf-tome:not(.more) .page.right{display:none}
  .shelf-tome:not(.more) .bk-more{border-bottom-color:transparent}
  .shelf-tome .page.right > .tome-close{display:none}
  .shelf-tome .binding > .tome-close{display:grid}
  /* room for the close button at the top right */
  .bk-head{padding-right:52px}
  .shelf-tome .page.left .bk-head .mono{padding-right:0}
  .shelf-tome .page.right{padding-bottom:14px}
}
/* the smallest phones: the frame is short, so the note in it is set a little smaller and its button still fits */
@media (max-width:380px){
  .bk-wait{gap:6px;padding:8px 10px;font-size:1rem;line-height:1.3}
}