/* Learn with Tao — the payments sheet and the locked-cover badge (q2508).
   The app's own popover language, with the :root tokens this document already defines.
   Nothing new. q3009: the Grown-ups tab left this document with the room bar's popovers; the
   button that opens the account sheet is #grownups-btn in index.html now. */

#pay-sheet{padding:28px 28px 24px; width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 40px);
  overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fdf6e8; color:var(--green-lo);
  font-family:Georgia,serif; text-align:left; box-shadow:0 16px 44px rgba(60,44,22,.34)}
#pay-sheet::backdrop{background:rgba(40,30,15,.38)}
#pay-sheet .pay-title{margin:0 0 8px; font-family:Georgia,serif; font-size:24px; font-weight:400; color:var(--green-lo)}
#pay-sheet .pay-line{margin:0 0 12px; font-size:16px; line-height:1.45; color:var(--ink-soft)}
#pay-sheet .pay-field{margin:0 0 14px}
#pay-sheet .pay-label{display:block; margin:0 0 6px; font-size:13.5px; color:var(--ink-soft)}
#pay-sheet .pay-input{display:block; width:100%; min-height:48px; padding:0 16px; border:1px solid var(--line);
  border-radius:999px; background:#fffaf0; color:var(--ink); font-family:Georgia,serif; font-size:17px}
#pay-sheet .pay-input:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
#pay-sheet .pay-error{margin:0 0 12px; font-size:14px; color:var(--coral)}
#pay-sheet .pay-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px}
#pay-sheet .pay-btn{min-height:48px; border-radius:999px; font-family:Georgia,serif}
#pay-sheet .pay-primary{padding:0 22px; border:0; background:var(--green); color:#fdf6e8; font-size:17px}
#pay-sheet .pay-primary:hover{background:var(--green-lo)}
#pay-sheet .pay-secondary{padding:0 18px; border:1px solid var(--line); background:none; color:var(--green-lo); font-size:15px}
#pay-sheet .pay-secondary:hover{background:rgba(88,120,70,.08)}
#pay-sheet .pay-btn:disabled{opacity:.5; cursor:default}
#pay-sheet .pay-note{margin:14px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink-soft)}
html.kb-modality #pay-sheet .pay-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Locked covers carry their gold corner, over the shelf picture and out of the tap path. It is ONE
   gold-only asset at a fixed room size: per-cover paintings baked in copied cover art (that distorted
   the titles) and their 64%-of-cover sizing made the gold differ per book. */
.book-slot.is-locked::after,.activity-book.is-locked::before{content:'';position:absolute;top:0;right:0;width:64px;height:64px;background-image:url("assets/lock-corner-v2.webp");background-size:100% 100%;background-repeat:no-repeat;border-top-right-radius:7px;pointer-events:none;z-index:4}
.book-slot.is-origin::after{visibility:hidden}

/* Continue with Google: Google's own button rules, beside the sheet's rounded language. The mark is
   20px; the divider is a thin line either side of a small word. */
#pay-sheet .pay-gbtn{display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  min-height:48px; padding:0 18px; border:1px solid #747775; border-radius:999px; background:#fff;
  color:#1f1f1f; font-family:-apple-system,'Roboto',sans-serif; font-size:16px; font-weight:500; cursor:pointer}
#pay-sheet .pay-gbtn svg{display:block; width:20px; height:20px; flex:0 0 auto}
#pay-sheet .pay-gbtn:hover{background:#f8f9fa}
#pay-sheet .pay-gbtn:disabled{opacity:.6; cursor:default}
html.kb-modality #pay-sheet .pay-gbtn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
#pay-sheet .pay-or{display:flex; align-items:center; gap:12px; margin:14px 0; font-size:14px; color:var(--ink-soft)}
#pay-sheet .pay-or::before,#pay-sheet .pay-or::after{content:''; flex:1 1 auto; height:1px; background:var(--line)}

/* q8894: native membership sheets reuse the existing dialog and buttons. */
#pay-sheet .pay-box{position:relative}
#pay-sheet .pay-close{position:absolute;right:-12px;top:-16px;width:44px;height:44px;border:0;background:none;
  color:var(--green);font-size:28px;cursor:pointer}
#pay-sheet.pay-device{box-sizing:border-box;text-align:center;width:min(542px,calc(100vw - 32px));
  padding:44px 34px 32px;border-color:var(--gold);max-height:calc(100vh - 24px)}
#pay-sheet.pay-device .pay-title{font:400 44px/1.15 'Book Roman',Georgia,serif;margin:0 0 12px}
#pay-sheet .pay-mark{display:block;width:152px;height:152px;margin:2px auto 22px;color:#0a84ff;flex-shrink:0}
#pay-sheet.pay-device .pay-primary{width:100%;min-height:66px;font-size:28px}
#pay-sheet.pay-device .pay-primary:hover,#pay-sheet.pay-membership .pay-primary:hover{background:var(--green)}
#pay-sheet.pay-device .pay-line{font:18px/1.4 -apple-system,system-ui,sans-serif;margin:16px 0 0;order:3}
#pay-sheet.pay-device .pay-box{display:flex;flex-direction:column}
#pay-sheet.pay-device .pay-actions{order:2}
#pay-sheet.pay-device .pay-close{top:-32px;right:-22px}
#pay-sheet.pay-membership{width:min(860px,calc(100vw - 32px));padding:0;box-sizing:border-box;overflow:hidden}
#pay-sheet.pay-membership .pay-box{display:grid;grid-template-columns:44% 56%}
#pay-sheet.pay-membership .pay-content{position:relative;padding:26px 30px 20px;min-width:0}
#pay-sheet.pay-membership .pay-figure{margin:0;padding:22px;background:linear-gradient(160deg,#efe3c8,#e3d1ac)}
#pay-sheet .pay-figure img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;
  box-shadow:0 6px 18px rgba(40,25,5,.25)}
#pay-sheet .pay-eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);
  font:600 12px/1 -apple-system,system-ui,sans-serif}
#pay-sheet.pay-membership .pay-title{text-wrap:balance;font:400 28px/1.15 'Book Roman',Georgia,serif;margin:0 40px 12px 0}
#pay-sheet .pay-ticks{list-style:none;margin:0 0 20px;padding:0;font:15.5px/1.2 Georgia,serif;color:var(--ink)}
#pay-sheet .pay-ticks li{display:flex;gap:9px;align-items:baseline;margin:0 0 5px}
#pay-sheet .pay-ticks li::before{content:'';flex:0 0 auto;width:14px;height:8px;border-left:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green);transform:rotate(-45deg) translateY(-3px)}
#pay-sheet .pay-price{margin:0;font:26px/1.15 'Book Roman',Georgia,serif;color:var(--green-lo)}
#pay-sheet.pay-membership .pay-price strong{font-weight:700;font-synthesis:weight}
#pay-sheet.pay-membership .pay-price span{font-weight:400}
#pay-sheet .pay-trial{margin:2px 0 12px;color:var(--ink-soft);font:15px/1.2 Georgia,serif}
#pay-sheet.pay-membership .pay-primary{width:100%;min-height:52px;font-size:18px}
#pay-sheet.pay-membership .pay-note{font:11.5px/1.45 -apple-system,system-ui,sans-serif;margin:10px 0 8px}
#pay-sheet.pay-membership .pay-close{top:12px;right:12px}
#pay-sheet .pay-links{justify-content:flex-start;gap:6px 16px}
#pay-sheet .pay-links .pay-btn{padding:0;border:0;border-radius:0;min-height:18px;text-decoration:underline;
  text-underline-offset:2px;color:var(--green);font:12.5px/1.4 -apple-system,system-ui,sans-serif}
#pay-sheet.pay-member{box-sizing:border-box;width:min(460px,calc(100vw - 32px));padding:26px 28px 22px}
#pay-sheet.pay-member .pay-title{margin:0 0 12px}
#pay-sheet .pay-member-panel{display:flex;gap:12px;align-items:center;margin:0 0 12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:#f3ead2;color:var(--ink)}
#pay-sheet .pay-member-panel .pay-mark{width:34px;height:34px;flex:0 0 auto;margin:0;color:var(--gold)}
#pay-sheet .pay-member-panel p{font:15px/1.35 Georgia,serif;margin:0}
#pay-sheet .pay-member-panel strong{color:var(--green-lo)}
#pay-sheet .pay-member-status{font:13.5px/1.35 Georgia,serif;margin:0 0 14px;color:var(--ink-soft)}
#pay-sheet .pay-member-actions{flex-direction:column}
#pay-sheet .pay-member-actions>.pay-btn{width:100%;font-size:17px}
#pay-sheet .pay-member-account{margin-top:12px}
#pay-sheet .pay-member-account .pay-line{font-size:12px;margin:0 0 6px}
#pay-sheet .pay-member-account .pay-field{margin:0 0 8px}
#pay-sheet .pay-member-account .pay-label{font-size:11px;margin-bottom:4px}
#pay-sheet .pay-member-account .pay-input{min-height:34px;font-size:14px}
#pay-sheet .pay-member-account .pay-actions{justify-content:flex-start;gap:6px}
#pay-sheet .pay-member-account .pay-btn{min-height:34px;font-size:13px;padding:0 12px}
#pay-sheet .pay-member-account .pay-note{font-size:11px;margin:8px 0 0}
#pay-sheet .pay-member-footer{justify-content:space-between;margin-top:12px}
#pay-sheet .pay-member-footer .pay-btn{min-height:24px;border:0;border-radius:0;background:none;padding:0;
  font-size:14px;color:var(--ink-soft)}
html:not(.kb-modality) #pay-sheet.pay-device button:focus-visible,
html:not(.kb-modality) #pay-sheet.pay-membership button:focus-visible,
html:not(.kb-modality) #pay-sheet.pay-member button:focus-visible{outline:none}
#peek-card{position:fixed;inset:0;z-index:11;display:grid;place-items:center;pointer-events:none;
  background:rgba(253,246,232,.86);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);color:var(--green)}
#peek-card[hidden]{display:none}
#peek-card.peek-map{z-index:2147482600;pointer-events:auto}
.peek-content{text-align:center;width:min(640px,90vw)}
.peek-content>img{width:84px;height:84px;border-radius:50%;object-fit:cover}
.peek-content h2{font:34px/1.15 'Book Roman',Georgia,serif;margin:22px 0 28px;color:var(--green-lo)}
.peek-actions{display:flex;justify-content:center;gap:14px}
.peek-actions button{pointer-events:auto;min-height:52px;border:1px solid var(--line);border-radius:999px;padding:0 24px;
  background:#fdf6e8;color:var(--green);font:17px Georgia,serif;cursor:pointer}
.peek-actions .peek-grown{display:flex;align-items:center;gap:10px;background:var(--green);color:#fdf6e8;border:0}
.peek-grown svg{width:20px;height:24px}
html:not(.kb-modality) .peek-actions button:focus-visible{outline:none}
html.kb-modality .peek-actions button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.book-slot.is-unlocking::after,.activity-book.is-unlocking::before,.unlock-fx{transform-origin:top right}
.activity-book.is-unlocking{overflow:visible}
.unlock-fx{position:absolute;right:0;top:0;width:64%;aspect-ratio:1;z-index:5;pointer-events:none}
.book-slot[data-book-id="italy"]{--unlock-nudge:0px}
.book-slot[data-book-id="kyoto"]{--unlock-nudge:0px}
#activity-book-italy{--unlock-nudge:0px}
#activity-book-kyoto{--unlock-nudge:0px}
.unlock-fx::before{content:'';position:absolute;left:66%;top:8%;width:24%;height:16%;background:#d9bc7c;
  opacity:0;transform:translate(var(--unlock-nudge,0px))}
.unlock-fx svg{position:absolute;left:66%;top:8%;width:24%;height:30%;color:#1b2238;opacity:0;
  transform:translate(var(--unlock-nudge,0px))}
.unlock-spring .unlock-fx::before{opacity:1}
.unlock-spring .unlock-fx svg{animation:unlock-spring .5s both}
.unlock-peel.is-unlocking::after,.unlock-peel.is-unlocking::before,.unlock-peel .unlock-fx{animation:unlock-peel .6s both}
.unlock-fx i{position:absolute;right:calc(var(--spark)*10% - 6%);top:calc(var(--spark)*8% - 10%);
  width:9px;height:9px;background:#d8b35b;opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.unlock-fx i:nth-of-type(even){background:#fff9df;scale:.7}
.unlock-peel .unlock-fx i{animation:unlock-spark .4s both}
@keyframes unlock-spring{0%{opacity:1;scale:.9}65%{opacity:1;scale:1.2}100%{opacity:1;scale:1}}
@keyframes unlock-peel{20%{transform:perspective(400px) rotateY(35deg) rotate(-12deg);opacity:1}
  to{transform:perspective(400px) translate(75%,-90%) rotateY(65deg) rotate(-35deg);opacity:0}}
@keyframes unlock-spark{0%,35%{opacity:1}to{translate:10px -16px;opacity:0;scale:.3}}
@media(max-height:500px){
  #pay-sheet.pay-device{width:min(400px,calc(100vw - 48px));padding:14px 16px 18px}
  #pay-sheet.pay-device .pay-title{font-size:36px;margin:0 0 8px}
  #pay-sheet.pay-device .pay-mark{width:136px;height:136px;margin:2px auto 12px}
  #pay-sheet.pay-device .pay-primary{min-height:54px;font-size:22px}
  #pay-sheet.pay-device .pay-line{font-size:14px;margin:12px 0 0}
  #pay-sheet.pay-device .pay-close{top:-2px;right:-4px}
  #pay-sheet.pay-membership{width:calc(100vw - 48px);max-height:calc(100vh - 16px);height:calc(100vh - 24px)}
  #pay-sheet.pay-membership .pay-box{grid-template-columns:38% 62%;height:100%}
  #pay-sheet.pay-membership .pay-figure{padding:14px 18px;min-height:0}
  #pay-sheet.pay-membership .pay-content{padding:16px 22px 12px;display:flex;flex-direction:column;justify-content:center}
  #pay-sheet.pay-membership .pay-title{font-size:21px;margin:0 30px 8px 0}
  #pay-sheet .pay-ticks{font-size:13.5px;margin:0}
  #pay-sheet .pay-ticks li{margin:0 0 3px}
  #pay-sheet .pay-price{font-size:21px}
  #pay-sheet .pay-trial{font-size:13.5px;margin:0 0 8px}
  #pay-sheet.pay-membership .pay-primary{min-height:44px;font-size:16px}
  #pay-sheet.pay-membership .pay-note{font-size:11px;margin:7px 0 5px}
  #pay-sheet .pay-links .pay-btn{font-size:11.5px}
  #pay-sheet .pay-eyebrow{margin:0 0 6px}
  #pay-sheet.pay-member{padding:16px 22px 14px;width:min(560px,calc(100vw - 48px));max-height:calc(100vh - 24px)}
  #pay-sheet.pay-member .pay-title{font-size:20px;margin:0 0 8px}
  #pay-sheet .pay-member-panel{padding:8px 12px;margin:0 0 8px}
  #pay-sheet .pay-member-status{margin:0 0 8px}
  #pay-sheet .pay-member-actions{flex-direction:row;flex-wrap:nowrap}
  #pay-sheet .pay-member-actions>.pay-btn{width:auto;flex:1;white-space:nowrap;font-size:15.5px;padding:0 18px;min-height:44px}
  #pay-sheet .pay-member-footer{margin-top:8px}
  .peek-content>img{width:70px;height:70px}
  .peek-content h2{font-size:24px;margin:14px 0 18px}
}
@media(prefers-reduced-motion:reduce){
  .is-unlocking::after,.is-unlocking::before,.unlock-fx,.unlock-fx svg,.unlock-fx i{animation:none!important;transition:none!important}
}