/* The purple skin (docs/purple-rollout.md, step 1): loaded by includes/purple/skin.php when
   the site theme is purple. Started as a copy of mockups/redesign/site-a-hub/live/reskin.css.
   1. Purple header and footer, named pv-* so the classic .site-header / .site-footer CSS
      can never reach them.
   2. A light layer over the page content: purple type, cream ground, pill buttons,
      rounder cards. skin.php has already swapped the old amber + slate palette for the
      purple one inside each page's own styles.
   The pages' own layouts are unchanged. */
:root {
  --pv-plum: #341e60; --pv-plum-2: #4a2d85; --pv-orange: #ff9500; --pv-orange-d: #e07f00;
  --pv-violet: #634bf5; --pv-violet-d: #4a37c9; --pv-lav: #cbc2ff; --pv-ink: #2a1b4d;
  --pv-muted: #6b6485; --pv-line: #e6dff2; --pv-bg: #f3eef9; --pv-cream: #f8f2e9;
}

/* ---------- 1. Chrome ---------- */
.pv-top { position: sticky; top: 0; z-index: 1000; font-family: 'DM Sans', -apple-system, sans-serif; }
/* Full width even on pages whose body centres a column (the songs player) */
.pv-top, .pv-footer { width: 100%; align-self: stretch; box-sizing: border-box; flex: none; }
.pv-bar { background: #ffe9c6; color: #6b3a00; font-size: 12px; text-align: center; padding: 5px 12px; line-height: 1.35; }
.pv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; box-sizing: border-box; }
.pv-header { background: var(--pv-plum); color: #fff; }
.pv-header .pv-nav { display: flex; align-items: center; gap: 18px; height: 76px; }
.pv-logo { display: flex; align-items: center; }
.pv-header .pv-logo img { height: 24px; width: auto; display: block; position: relative; top: -3px; }
.pv-links { display: flex; gap: 4px; margin-left: 6px; }
.pv-links a { padding: 10px 15px; border-radius: 999px; font-weight: 600; font-size: 15px; color: #fff !important; opacity: .9; text-decoration: none; }
.pv-links a:hover, .pv-links a.active { background: rgba(255,255,255,.14); opacity: 1; }
.pv-header .user-menu { position: relative; margin-left: auto; }
/* .user-menu in these selectors outranks the styles js/auth-ui.js adds on static pages
   (.user-menu-btn.logged-in), which load after this file */
.pv-header .user-menu .user-menu-btn { display: inline-flex; align-items: center; width: auto; height: 45px; border: 0; border-radius: 999px; background: var(--pv-orange); color: var(--pv-plum); font: 700 15px 'DM Sans', sans-serif; line-height: 1; padding: 2px 22px 0; cursor: pointer; transition: .15s; }
.pv-header .user-menu .user-menu-btn:hover { background: var(--pv-orange-d); }
.pv-header .user-menu-btn svg, .pv-header .user-menu-btn .user-avatar, .pv-header .user-menu-btn img { display: none; }
.pv-header .user-menu-btn:not(.logged-in)::after { content: 'Log in'; }
.pv-header .user-menu-btn.logged-in::after { content: 'Account'; }
.pv-header .user-menu-dropdown { right: 0; }
/* The account menu (js/auth-ui.js draws it under the purple header): who is signed in, then a list.
   Each row's picture sits in a circle and moves once as the menu opens, and again under the pointer. */
.pv-header .user-menu .user-menu-dropdown { width: 296px; margin-top: 12px; padding: 10px; border-radius: 24px; background: #fff; box-shadow: 0 20px 54px rgba(36,18,67,.28), 0 2px 8px rgba(36,18,67,.08); text-align: left; font-family: 'DM Sans', sans-serif; color: var(--pv-plum); }
.am-top { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; }
.am-av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #ece8ff; color: var(--pv-violet-d); display: grid; place-items: center; font: 800 18px 'DM Sans', sans-serif; }
.am-who { min-width: 0; }
.am-who b { display: block; font: 600 17px/1.2 'Fredoka', sans-serif; color: var(--pv-plum); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-who small { display: block; font-size: 13px; color: var(--pv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-sep { height: 1px; background: var(--pv-line); margin: 6px 10px; }
.pv-header .am .am-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px; border: 0; border-radius: 14px; background: none; font: 700 15px 'DM Sans', sans-serif; color: var(--pv-plum); text-align: left; text-decoration: none; cursor: pointer; transition: background .12s; }
.pv-header .am .am-row:hover { background: var(--pv-bg); color: var(--pv-plum); }
.am-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pv-plum); color: #fff; }
.pv-header .am .am-ic svg { display: block; width: 18px; height: 18px; overflow: visible; }
.am-ic svg * { transform-box: fill-box; transform-origin: center; }
.am-likes .am-ic { background: #ff5a5f; } .am-likes .am-ic svg path { fill: currentColor; }   /* the Like button's coral, white heart */
.am-sets .am-ic { background: #ff7800; }
.am-out .am-ic { background: var(--pv-bg); color: var(--pv-muted); }
.pv-header .am .am-row.am-out { color: var(--pv-muted); }
/* a heart beats; a page lands on the set; the dashboard's tiles pop one by one; the arrow leaves */
.am-go.am-likes .a1 { animation: amBeat 1s ease both; }
@keyframes amBeat { 20% { transform: scale(1.32); } 40% { transform: scale(.92); } 60% { transform: scale(1.18); } 80%, 100% { transform: none; } }
.am-go.am-sets .a1 { animation: amLand 1s cubic-bezier(.3,.7,.3,1) both; }
@keyframes amLand { 0% { transform: translate(5px, -6px); opacity: 0; } 45% { transform: translate(0, 1px); opacity: 1; } 70% { transform: translateY(-1px); } 100% { transform: none; } }
.am-go.am-admin :is(.a1, .a2, .a3, .a4) { animation: amTile .9s cubic-bezier(.2,1.6,.4,1) both; }
.am-go.am-admin .a2 { animation-delay: .1s; } .am-go.am-admin .a3 { animation-delay: .2s; } .am-go.am-admin .a4 { animation-delay: .3s; }
@keyframes amTile { 0% { transform: scale(0); } 55%, 100% { transform: none; } }
.am-go.am-out .a1 { animation: amLeave 1s ease both; }
@keyframes amLeave { 30% { transform: translateX(4px); } 55% { transform: translateX(-1px); } 80%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .am-go * { animation: none !important; } }
/* Phones: a hamburger (as on the live site). Hidden on wider screens, with the account links
   js/auth-ui.js writes into #userMenuMobile for the phone menu. */
.pv-burger { display: none; }
.pv-links .user-menu-mobile { display: none; }

.pv-footer { background: var(--pv-plum); color: var(--pv-lav); padding: 48px 0 28px; font: 14px/1.45 'DM Sans', sans-serif; margin-top: 56px; }
/* logo + blurb, then four columns (scripts/purple-footer.mjs, 2026-09-30). 2026-10-01: the link
   columns sit a little closer together and a little further from the logo block. */
.pv-footer .pv-cols { display: grid; grid-template-columns: 1.8fr repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
.pv-footer .pv-cols > :first-child { padding-right: 36px; }
.pv-footer h4 { color: #fff; font: 600 18px 'Fredoka', sans-serif; margin: 0 0 12px; }
.pv-footer a { display: block; padding: 4px 0; color: var(--pv-lav) !important; text-decoration: none; }
.pv-footer a:hover { color: #fff !important; }
/* a column heading that is a link (Printables): looks like the other headings */
.pv-footer h4 a { display: inline; padding: 0; color: #fff !important; }
.pv-footer h4 a:hover { text-decoration: underline; }
.pv-footer .pv-logo { display: inline-flex; padding: 0; }
.pv-footer .pv-logo img { height: 34px; width: auto; display: block; }
.pv-footer .pv-about { margin: 14px 0 0; line-height: 1.55; max-width: 300px; }
.pv-footer .pv-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 32px; padding-top: 20px; font-size: 13px; text-align: center; }
/* bottom bar: copyright left, the legal links right */
.pv-footer .pv-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; }
.pv-footer .pv-legal nav { display: flex; gap: 18px; }
.pv-footer .pv-legal a { display: inline; padding: 0; }
@media (max-width: 1000px) { .pv-footer .pv-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv-footer .pv-cols > :first-child { grid-column: 1 / -1; padding-right: 0; } }
@media (max-width: 760px) {
  .pv-wrap { padding: 0 16px; }
  .pv-footer .pv-cols { grid-template-columns: 1fr 1fr; }
  .pv-footer .pv-legal { justify-content: center; text-align: center; }
}
/* five tabs and Log in on a narrow window (wider than the phone menu's 768px): tighter tabs, smaller logo */
@media (max-width: 980px) {
  .pv-header .pv-nav { gap: 10px; }
  .pv-header .pv-logo img { height: 20px; }
  .pv-links { gap: 0; margin-left: 0; }
  .pv-links a { padding: 9px 10px; font-size: 14px; }
  .pv-header .user-menu .user-menu-btn { height: 40px; padding: 2px 16px 0; font-size: 14px; }
}
/* 768px: where js/auth-ui.js swaps the account button for the links in the phone menu */
@media (max-width: 768px) {
  .pv-header .pv-nav { height: auto; min-height: 64px; flex-wrap: wrap; gap: 0 10px; padding: 0 16px; }
  .pv-header .pv-logo { min-height: 64px; }
  .pv-header .pv-logo img { height: 21px; top: -2px; }
  .pv-header .user-menu { display: none; }
  .pv-burger { display: grid; align-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; padding: 0 11px; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); cursor: pointer; }
  .pv-burger span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
  .pv-burger.open { background: rgba(255,255,255,.22); }
  .pv-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .pv-burger.open span:nth-child(2) { opacity: 0; }
  .pv-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .pv-links { display: none; order: 5; width: 100%; margin: 0; flex-direction: column; gap: 2px; padding: 6px 0 14px; border-top: 1px solid rgba(255,255,255,.14); }
  .pv-links.open { display: flex; }
  .pv-links a { padding: 13px 14px; font-size: 16px; border-radius: 14px; }
  .pv-links .user-menu-mobile { display: flex !important; flex-direction: column; gap: 2px; margin-top: 8px !important; padding-top: 10px !important; border-top: 1px solid rgba(255,255,255,.14) !important; }
  .pv-links .user-menu-mobile-name { padding: 4px 14px 2px !important; font-size: 13px !important; color: var(--pv-lav) !important; }
  .pv-links .user-menu-mobile button { padding: 13px 14px !important; font: 600 16px 'DM Sans', sans-serif !important; color: #fff !important; opacity: .9; border-radius: 14px !important; }
  .pv-links .user-menu-mobile button:hover { background: rgba(255,255,255,.14) !important; }
  /* signed out, the one link is Log In: the orange button */
  .pv-links .user-menu-mobile > a:only-child { align-self: flex-start; margin: 4px 0 0 2px; background: var(--pv-orange); color: var(--pv-plum) !important; opacity: 1; font-weight: 700; border-radius: 999px; padding: 11px 24px; }
}
@media print { .pv-top, .pv-footer { display: none !important; } }

/* The old header's mobile menu and its overlay are gone with the header */
.pv-body .mobile-menu, .pv-body .mobile-nav, .pv-body .mobile-overlay, .pv-body .hamburger-btn { display: none !important; }

/* ---------- 2. Page content ---------- */
body.pv-body:not(.pv-own-bg) { background: var(--pv-cream) !important; }
body.pv-body { color: var(--pv-ink); font-family: 'DM Sans', -apple-system, 'Segoe UI', sans-serif; }
body.pv-body :is(h1, h2):not(svg *):not(.worksheet *):not(.ws-page *):not(#worksheet *):not(.preview *) {
  font-family: 'Fredoka', 'DM Sans', sans-serif; font-weight: 600; color: var(--pv-plum); letter-spacing: -.2px;
}
body.pv-body h3:not(svg *):not(.worksheet *):not(.ws-page *):not(#worksheet *):not(.preview *) { color: var(--pv-plum); }

/* Pill buttons in the purple manner */
body.pv-body :is(.btn-primary, .acct-btn, .print-btn, .btn-print, .download-btn, .generate-btn, .btn-generate) {
  border-radius: 999px !important; font-family: 'DM Sans', sans-serif; font-weight: 700;
}
body.pv-body :is(.btn-primary, .acct-btn, .print-btn, .btn-print, .generate-btn, .btn-generate) {
  background: var(--pv-orange) !important; border-color: var(--pv-orange) !important; color: var(--pv-plum) !important; box-shadow: none;
}
body.pv-body :is(.btn-primary, .acct-btn, .print-btn, .btn-print, .generate-btn, .btn-generate):hover { background: var(--pv-orange-d) !important; }
body.pv-body :is(.btn-secondary, .acct-btn-secondary) { border-radius: 999px !important; }

/* Rounder, softer cards, like the prototype's */
body.pv-body :is(.ws-card, .topic-card, .gen-card, .related-card, .gcb-related-card, .tool-card, .quiz-card, .app-card, .feature-item, .card) {
  border-radius: 22px; border-color: var(--pv-line); box-shadow: 0 6px 18px rgba(52,30,96,.06);
}
body.pv-body :is(.ws-card, .topic-card, .gen-card, .related-card, .gcb-related-card, .tool-card, .quiz-card, .app-card, .card):hover { box-shadow: 0 14px 30px rgba(52,30,96,.12); }
body.pv-body :is(.grade-pill, .grade-chip, .grade-badge, .pack-badge, .topic-chip, .price-badge) { border-radius: 999px; }
body.pv-body a:not(.pv-top a):not(.pv-footer a) { text-decoration-color: rgba(99,75,245,.35); }

/* The old sticky header was 64px; anything that stuck under it now sits under the purple one */
html:has(body.pv-body) { scroll-padding-top: 86px; }

/* ---------- Scrollbars: the site standard (2026-09-29) ----------
   Rounded lavender thumb on a pale lavender track, violet on hover; the page's own
   scrollbar sits on the cream ground. Chrome, Edge and Safari; Firefox cannot round
   scrollbars, so it gets the thin lavender version. Same rules in css/purple.css. */
::-webkit-scrollbar { width: 12px; height: 8px; }
::-webkit-scrollbar-track { background: var(--pv-bg); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: var(--pv-lav); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--pv-violet); }
::-webkit-scrollbar-corner { background: transparent; }
html::-webkit-scrollbar-track { background: var(--pv-cream); border-radius: 0; }
html::-webkit-scrollbar-thumb { border: 3px solid var(--pv-cream); }
@supports not selector(::-webkit-scrollbar) { html, * { scrollbar-width: thin; scrollbar-color: var(--pv-lav) var(--pv-bg); } }

/* The page ending (2026-10-08; includes/purple/ending.php): the white "tell us what to make" card, then a few
   lines about the page as plain text with no box. One look on every page type that has it. The card sits 20px
   under whatever is above it and the text 20px under the card; on a page with two columns the ending sits
   under the right-hand one. Markup: .ending > .suggest (div > b + p, then a.go) + section.about (h2 + p). */
.ending { margin-top: 20px; min-width: 0; text-align: left; font-family: 'DM Sans', sans-serif; }
.ending .suggest { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border-radius: 24px; padding: 18px 24px; margin: 0; box-shadow: 0 6px 20px rgba(52,30,96,.05); }
.ending .suggest > div { flex: 1; min-width: 240px; }
.ending .suggest b { display: block; font: 600 18px 'Fredoka', sans-serif; color: var(--pv-plum, #341e60); }
.ending .suggest p { margin: 2px 0 0; color: var(--pv-muted, #6b6485); font-size: 14px; line-height: 1.4; }
.ending .suggest .go { flex: none; background: var(--pv-orange, #ff9500); color: var(--pv-plum, #341e60) !important; font: 700 14px 'DM Sans', sans-serif; border-radius: 999px; padding: 10px 20px; text-decoration: none !important; }
.ending .suggest .go:hover { background: var(--pv-orange-d, #e07f00); }
.ending .about { margin: 20px 0 8px; padding: 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.ending .about h2 { font: 600 16px 'Fredoka', sans-serif !important; color: var(--pv-plum, #341e60) !important; margin: 0 0 6px !important; padding: 0 !important; letter-spacing: 0 !important; text-transform: none !important; }
.ending .about p { font-size: 13.5px; font-weight: 400; color: var(--pv-muted, #6b6485); line-height: 1.6; margin: 0; max-width: 900px; }
/* where it sits */
.pl > .ending { grid-column: -2 / -1; margin-top: 2px; }                 /* the two listings: under the cards (the grid's own 18px gap + 2) */
.info-col > .ending { margin-top: 4px; }                                 /* a worksheet page: the end of the right-hand column (16px gap + 4) */
body.pv-gen .gcb-inner > .ending { margin-top: 2px; }                    /* a worksheet maker: the end of its "about" block (18px gap + 2) */
.tgroup + .ending { margin-top: 20px; } .az-list + .ending { margin-top: -20px; }   /* Topics, Tags: their last panel has its own space under it */
#page > .ending:last-child { margin-bottom: 26px; }
@media (max-width: 900px) { .info-col > .ending { order: 5; } }           /* one column: after the cards, which are ordered there */