/* css/purple-skin.css */
/* 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, .am-in .pv-header .user-menu-btn::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-bookmarks .am-ic { background: #ff5a5f; } .pv-header .am .am-bookmarks .am-ic svg { width: 17px; height: 17px; stroke-width: 2.3; }   /* the Bookmark button's coral, white line bookmark */
.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 bookmark bounces; a page lands on the set; the dashboard's tiles pop one by one; the arrow leaves */
.am-go.am-bookmarks .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; }
/* the column headings are h2s (includes/purple/skin.php): !important holds their look against the purple h2 rule
   below and any page's own h2 styles */
.pv-footer .pv-fh { color: #fff !important; font: 600 18px 'Fredoka', sans-serif !important; letter-spacing: normal !important; text-transform: none !important; text-align: inherit !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.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 .pv-fh a { display: inline; padding: 0; color: #fff !important; }
.pv-footer .pv-fh 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 */
/* Grade labels by country (js/grade-labels.js): an England, Australia, New Zealand or Canada visitor's labels stay hidden until their words are swapped in */
html.gl-england .gl:not(.gl-done), html.gl-australia .gl:not(.gl-done), html.gl-new-zealand .gl:not(.gl-done), html.gl-canada .gl:not(.gl-done) { visibility: hidden; }

/* css/purple-kinds.css */
/* What kind of thing a card is (2026-10-08): printable, worksheet maker, classroom tool, quiz or app.
   js/purple-kinds.js marks the cards and the panels that hold them as the page is read, from each
   card's address; everything here hangs off the classes it adds (kd-*), so a page without the script
   looks as it did. Blake chose every value in the mockup's tweaker (live/kind-options.html).

   - One colour a kind, used everywhere that kind appears (the --k-* variables).
   - Each panel's heading carries the kind's picture in a circle of its colour. The picture moves once,
     as the panel first comes into view, and never again.
   - Each card: a hairline edge in a faint tint of its kind, a very pale cream behind its picture, and
     the kind's picture in its lower right corner while the pointer is on it (nothing on a touch screen).
   - The "every ... here is free" bar on the two listings takes its page's kind (pale), centred, no tick.
   - The words in the left column's lists are plum; the picked one is violet. */
:root { --k-printable: #634bf5; --k-maker: #ff7800; --k-tool: #2563eb; --k-quiz: #2fa776; --k-app: #f0c330; }
/* .kd-k: the same colours and pictures on something that is neither (the suggest page's choices) */
.kd-card, .kd-panel, .kd-k { position: relative; --c: var(--k-printable); --on: #fff; --soft: color-mix(in srgb, var(--c) 14%, #fff); --ink: color-mix(in srgb, var(--c) 62%, #1b1038); }
.kd-maker { --c: var(--k-maker); } .kd-tool { --c: var(--k-tool); } .kd-quiz { --c: var(--k-quiz); }
.kd-app { --c: var(--k-app); --on: #8a5a12; }   /* gold, with a warm brown picture on it */

/* ---- the small pictures (drawn 24 wide, in lines). Each moves once while .kd-play is on, then rests as drawn ---- */
.kd-i { width: 22px; height: 22px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.kd-printable .kd-i, .kd-maker .kd-i { stroke-width: 1.75; }
.kd-i .fl { fill: var(--ibg, #fff); }            /* a part that hides what slides behind it */
.kd-i .so { fill: currentColor; stroke: none; }
.kd-i * { transform-box: fill-box; transform-origin: center; }
/* a printer: the page feeds out */
.kd-play .kd-i-print .pg { animation: kdFeed 1.6s cubic-bezier(.3,.7,.3,1) both; }
@keyframes kdFeed { 0%, 12% { transform: translateY(-7px); } 30%, 45% { transform: translateY(-4px); } 70% { transform: translateY(1px); } 100% { transform: none; } }
.kd-play .kd-i-print .bd { animation: kdShake 1.6s ease both; }
@keyframes kdShake { 12%, 36% { transform: translateY(.6px); } 24%, 48% { transform: translateY(-.6px); } 60%, 100% { transform: none; } }
/* sliders: the knobs slide and settle */
.kd-play .kd-i-make .k1 { animation: kdK1 1.6s ease both; } .kd-play .kd-i-make .k2 { animation: kdK2 1.6s ease both; } .kd-play .kd-i-make .k3 { animation: kdK3 1.6s ease both; }
@keyframes kdK1 { 25% { transform: translateX(7px); } 60% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes kdK2 { 30% { transform: translateX(-8px); } 65% { transform: translateX(3px); } 100% { transform: none; } }
@keyframes kdK3 { 35% { transform: translateX(8px); } 75% { transform: translateX(-1px); } 100% { transform: none; } }
/* a pointer drags a block */
.kd-play .kd-i-tool .cur { animation: kdCur 1.6s ease both; } .kd-play .kd-i-tool .blk { animation: kdBlk 1.6s ease both; }
@keyframes kdCur { 0% { transform: translate(7px, 7px); opacity: 0; } 25% { transform: none; opacity: 1; } 35% { transform: scale(.82); } 60% { transform: translate(-4px, -3px) scale(.82); } 85% { transform: translate(-4px, -3px); } 100% { transform: none; } }
@keyframes kdBlk { 0%, 35% { transform: none; } 60%, 85% { transform: translate(-4px, -3px); } 100% { transform: none; } }
/* a question that turns into a tick, then back */
.kd-i.kd-i-quiz .ck { opacity: 0; stroke-dasharray: 15; }
.kd-play .kd-i-quiz .qm { animation: kdQm 1.8s ease both; } .kd-play .kd-i-quiz .ck { animation: kdCk 1.8s ease both; }
@keyframes kdQm { 10% { transform: rotate(-14deg); } 22% { transform: rotate(12deg); } 34% { transform: none; opacity: 1; } 42%, 82% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kdCk { 0%, 40% { opacity: 0; stroke-dashoffset: 15; } 44% { opacity: 1; stroke-dashoffset: 15; } 64%, 80% { opacity: 1; stroke-dashoffset: 0; } 96%, 100% { opacity: 0; stroke-dashoffset: 0; } }
/* an arrow drops into a tablet */
.kd-play .kd-i-app .ar { animation: kdDrop 1.3s ease both; }
@keyframes kdDrop { 0% { transform: translateY(-4px); opacity: 0; } 35% { transform: translateY(1px); opacity: 1; } 50% { transform: translateY(-1.5px); } 70%, 100% { transform: none; } }

/* ---- a panel's heading: the picture in a circle of the kind's colour (it replaces the small dot) ---- */
.kd-hic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: var(--on); --ibg: var(--c); vertical-align: middle; position: relative; overflow: hidden; }
.kd-panel > .sec > .dot { display: none; }
.kd-panel > .pl-head.kd-row, .kd-panel > .pl-bar > .pl-head.kd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* a phone, the two listings: the picture a size down (the row's layout is css/purple-listing.css) */
@media (max-width: 600px) {
  .kd-panel > .pl-bar > .pl-head.kd-row > .kd-hic, .kd-panel > .pl-head.kd-row > .kd-hic { width: 30px; height: 30px; }
  .kd-panel > .pl-bar > .pl-head.kd-row > .kd-hic .kd-i, .kd-panel > .pl-head.kd-row > .kd-hic .kd-i { width: 18px; height: 18px; }
}
.kd-play > * > .kd-hic, .kd-play > .pl-bar > * > .kd-hic { animation: kdPop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes kdPop { from { transform: scale(0); } }
/* the apps' gold circle shines once its picture has settled: a band of light crossing it */
.kd-app.kd-play > * > .kd-hic::after { content: ''; position: absolute; inset: -30% -60%; background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%); transform: translateX(-100%); animation: kdShine .75s 1.1s ease-in-out both; pointer-events: none; }
@keyframes kdShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- a card ---- */
/* a hairline edge in a faint tint of the kind, drawn over the whole card so it is complete on every card */
.kd-card::after { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); border-radius: inherit; pointer-events: none; z-index: 6; }
/* the same very pale cream behind every kind's picture, with no line of its own round it */
.kd-card > :first-child:not(.kd-add) { background: #fefdfa !important; box-shadow: none !important; }
/* a maker's picture is drawn on a pale page shape (part of the picture file): a touch brighter turns that shape
   white, and "multiply" lets the cream show through it; with the shape gone the picture can be larger */
.kd-maker .thumb > .icon { background: transparent !important; box-shadow: none !important; }
.kd-maker > :first-child:not(.kd-add) img { filter: brightness(1.04); mix-blend-mode: multiply; }
a.pc.kd-maker .thumb > .icon img { transform: scale(1.18); }
a.sc.kd-maker > .pic img { transform: scale(1.22); }
/* the kind's picture in the lower right corner, no circle: hidden until the pointer is on the card, then it moves */
.kd-cor { display: block; position: absolute; right: 13px; bottom: 12px; z-index: 4; color: var(--c); --ibg: var(--pv-cream, #f8f2e9); pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .15s ease, transform .2s cubic-bezier(.2,1.5,.4,1); }
.kd-cor .kd-i { width: 24px; height: 24px; }
a.sc .kd-cor { right: 11px; bottom: 9px; } a.sc .kd-cor .kd-i { width: 18px; height: 18px; }
a.kd-card:hover .kd-cor, a.kd-card:focus-visible .kd-cor { opacity: 1; transform: none; }
/* nothing on a touch screen, unless a mouse has moved on it (js/purple-kinds.js adds kd-mouse) */
@media (hover: none) { :root:not(.kd-mouse) .kd-cor { display: none; } }

/* ---- the "every ... here is free" bar on the two listings: its page's kind (pale), centred, no tick ---- */
.kd-on .pl-free { justify-content: center; }
.kd-on .pl-free > i { display: none !important; }
.kd-panel .pl-free { background: var(--soft); color: var(--ink); }

/* ---- the left column's lists: plum words, the picked one violet (the grades were all violet) ---- */
.kd-on .opts .opt { color: var(--pv-plum, #341e60) !important; }
.kd-on .opts .opt.on { color: var(--pv-violet, #634bf5) !important; }

@media (prefers-reduced-motion: reduce) { .kd-play, .kd-play * { animation: none !important; } .kd-cor { transition: none; } }