/* The purple "hub" family (docs/purple-rollout.md, step 4): grade + topic hubs and theme hubs
   (pages/purple/topic-hub.php), tag pages, and the Topics / Tags directories. The markup comes
   from includes/purple/hub-kit.php. Started as a copy of the mockup's live/hub-kit.css; loaded
   after css/purple-skin.css. The pieces: the site-standard breadcrumb, a one-line header, a left
   rail of white cards, white section cards on the right, and three card sizes (small resource
   card, big printable card with the page stack, directory tile). */
body.pv-body { margin: 0; }
:root { --k-printable: #634bf5; --k-maker: #ff7800; --k-tool: #2563eb; --k-quiz: #2fa776; --k-app: #f0c330; }

/* Space at the top: header bar -> breadcrumb (--sp-top), breadcrumb -> title (--sp-crumb),
   title line -> content (--sp-head). B is the default (2026-09-30: a was too tight next to common
   site spacing); ?space=a|c shows the other presets for comparison. */
:root { --sp-top: 28px; --sp-crumb: 10px; --sp-head: 24px; }
html[data-space="a"] { --sp-top: 14px; --sp-crumb: 6px; --sp-head: 16px; }
html[data-space="c"] { --sp-top: 40px; --sp-crumb: 14px; --sp-head: 32px; }

/* Breadcrumb: the site standard (same as the worksheet page) */
.crumbs { font-size: 13px; font-weight: 400; letter-spacing: .2px; color: var(--pv-muted); padding: var(--sp-top) 0 var(--sp-crumb); }
.crumbs a { color: var(--pv-violet); text-decoration: none; }
.crumbs span { margin: 0 6px; color: #c9c0dd; }
.crumbs .here { margin: 0; color: inherit; }

/* One-line header: kind label, title, counts; an optional one-line intro under it */
.th-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 0 var(--sp-head); }
/* Header variants (?head=, 2026-09-30 mockups): small uppercase label, round badge, art banner */
.th-head .ey { font: 800 11.5px 'DM Sans', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pv-violet); }
.th-head .tl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.th-head.eyeb, .th-head.iconh { display: block; }
.th-head.eyeb .ey { margin-bottom: 4px; }
.th-head.iconh { display: flex; align-items: center; gap: 16px; }
.th-head.iconh .ey { margin-bottom: 2px; }
.th-head .badge { flex: none; width: 64px; height: 64px; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(52,30,96,.08); display: grid; place-items: center; }
.th-head .badge img { width: 44px; height: 44px; object-fit: contain; }
.th-head .badge span { font: 600 30px 'Fredoka', sans-serif; color: var(--pv-violet); white-space: nowrap; }
.th-head .badge span.sm { font-size: 19px; }
.th-head .counts a { color: var(--pv-violet); font-weight: 700; text-decoration: none; }
.th-head .counts a:hover { text-decoration: underline; }
.th-head.bannerh { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-radius: 24px; padding: 18px 24px; margin-bottom: var(--sp-head); box-shadow: 0 6px 20px rgba(52,30,96,.05); }
.th-head.bannerh .bt { display: flex; flex-direction: column; gap: 2px; }
.th-head.bannerh .art { display: flex; align-items: center; gap: 14px; flex: none; }
.th-head.bannerh .art img { height: 52px; width: auto; transform: rotate(var(--r, 0deg)); opacity: .9; }
@media (max-width: 760px) { .th-head.bannerh .art img:nth-child(n+3) { display: none; } .th-head.bannerh .art img { height: 40px; } }

/* the hub's intro, at the bottom of the content column */
.about { margin-top: 28px; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,.55); border: 1px solid var(--pv-line); }
.about h2 { font: 600 16px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0 0 6px; }
.about p { font-size: 13.5px; color: var(--pv-muted); line-height: 1.6; margin: 0; max-width: 820px; }
.th-head .kind { align-self: center; font: 800 10.5px 'DM Sans', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--pv-violet); border-radius: 999px; padding: 4px 10px; }
.th-head h1 { font: 600 32px/1.1 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; }
.th-head .counts { font-size: 13.5px; color: var(--pv-muted); font-weight: 600; }
.th-head .counts b { color: var(--pv-plum); }
.th-head .lede { flex-basis: 100%; margin: -4px 0 0; font-size: 14px; color: #4b3f6b; line-height: 1.5; max-width: 860px; }

/* Topics | Tags tab bar (the directories) */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(52,30,96,.06); margin: 0 0 14px; }
.tabs a { padding: 7px 20px; border-radius: 999px; font: 700 13.5px 'DM Sans', sans-serif; color: var(--pv-plum); text-decoration: none; }
.tabs a.on { background: var(--pv-plum); color: #fff; }
.tabs a:not(.on):hover { background: var(--pv-bg); }
/* On the title line, at its right end (2026-10-01): no row of its own between breadcrumb and title */
.th-head .tabs { margin: -6px 0 -6px auto; align-self: center; }
@media (max-width: 640px) { .th-head .tabs { order: 1; } .th-head:has(.tabs) .counts { order: 2; flex-basis: 100%; } }

/* Left rail of white cards + the content column */
.cols { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 24px; }
.panel { background: #fff; border-radius: 24px; box-shadow: 0 6px 20px rgba(52,30,96,.05); }
.rail { display: grid; gap: 14px; position: sticky; top: 90px; }
.rail .panel { padding: 18px 12px; }
.rail h3 { font: 600 17px 'Fredoka', sans-serif !important; color: var(--pv-plum); margin: 0 4px 10px; }
.rail .note { font-size: 12px; color: var(--pv-muted); margin: 8px 4px 0; line-height: 1.4; }
.opts { display: grid; gap: 7px; }
.opt { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--pv-cream); border: 2px solid transparent; border-radius: 999px; padding: 4px 10px; font: 700 13.5px 'DM Sans', sans-serif; color: var(--pv-plum); cursor: pointer; text-align: left; text-decoration: none; }
.opt:hover { border-color: var(--pv-lav); }
.opt.on { border-color: var(--pv-violet); }
.opt small { font-weight: 600; font-size: 12px; color: var(--pv-muted); }
.opt i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; flex: none; }
.opt .l { display: inline-flex; align-items: center; }
.opts.grades .opt { font: 600 16px 'Fredoka', sans-serif; color: var(--pv-violet); }
.opts.grades .opt small { font-family: 'DM Sans', sans-serif; }
.opt:focus-visible, .sc:focus-visible, .pc:focus-visible, .tile:focus-visible, .tagcloud a:focus-visible, .chiplinks a:focus-visible { outline: 3px solid rgba(99,75,245,.35); outline-offset: 2px; }
.tagcloud, .chiplinks { display: flex; flex-wrap: wrap; gap: 6px; }
.tagcloud a, .chiplinks a, .chiplinks span { font-size: 12.5px; font-weight: 700; color: var(--pv-violet-d); background: #ece8ff; border-radius: 999px; padding: 5px 10px; text-decoration: none; }
.tagcloud a small { color: #8f86ad; font-weight: 600; margin-left: 3px; }
.tagcloud a:hover, .chiplinks a:hover { background: #ddd6ff; }
.chiplinks span { background: var(--pv-cream); color: var(--pv-plum); font-weight: 600; }
.gradelist h4 { font: 800 10.5px 'DM Sans', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--pv-muted); margin: 12px 4px 6px; }
.gradelist h4:first-child { margin-top: 0; }

/* White section cards on the right */
.kband { background: #fff; border-radius: 24px; padding: 16px 18px 18px; box-shadow: 0 6px 20px rgba(52,30,96,.05); min-width: 0; scroll-margin-top: 90px; }
.kband + .kband, .kband + .krow, .krow + .kband, .krow + .krow { margin-top: 16px; }
.sec { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.sec h2 { font: 600 20px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; }
.sec small { color: var(--pv-muted); font-weight: 600; font-size: 13px; }
.sec .dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.sec .go { margin-left: auto; color: var(--pv-violet); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.none { color: var(--pv-muted); font-size: 13.5px; }
/* Tools and quizzes side by side: the row has 5 slots (like the 5 small cards in a full-width
   card); each card spans as many slots as it has items, so its cards keep the normal size */
.krow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.krow .kband + .kband { margin-top: 0; }
.krow .kband { padding-left: 12px; padding-right: 12px; }
.krow .kband .sec { padding-left: 6px; }

/* Small resource card (skill-resources style): wide rounded picture box, title, grade */
.sgrid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; }
.sc { display: flex; flex-direction: column; gap: 8px; background: var(--pv-cream); border-radius: 18px; padding: 8px 8px 11px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; min-width: 0; }
.sc:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(52,30,96,.12); }
.sc .pic { height: 104px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #efe9f9; position: relative; }
.sc .pic.sheet { place-items: start center; padding: 8px 12px 0; box-sizing: border-box; }
.sc .pic.sheet img { width: 100%; display: block; border-radius: 5px 5px 0 0; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.sc .pic.maker { background: #f7f8fc; } .sc .pic.tool { background: #fff; box-shadow: inset 0 0 0 2px #efe9f9; } .sc .pic.quiz { background: #fff; box-shadow: inset 0 0 0 2px #efe9f9; } .sc .pic.app { background: #fff7dc; }
.sc .pic.maker img { width: 62%; height: 84%; object-fit: contain; }
.sc .pic svg { width: 64%; height: auto; max-height: 76%; }
.sc .pic.tool svg { width: 84%; max-height: 88%; }
.sc .pic.quiz svg { width: 84%; height: auto; max-height: 88%; }
.sc .pic.app img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 16px rgba(52,30,96,.25); }
.sc b { font: 600 14px/1.2 'Fredoka', sans-serif; color: var(--pv-plum); padding: 0 4px; }
.sc .m { font-size: 11.5px; color: var(--pv-muted); padding: 0 4px; margin-top: -4px; }

/* The page stack: a printable's first three pages as a small fanned pile (any picture box) */
.stackbox { position: relative; overflow: hidden; background: linear-gradient(160deg, #efe9f9, #e4dcff); }
.stackbox .sheet { position: absolute; left: 50%; top: 12px; width: 40%; aspect-ratio: 8.5 / 11; background: #fff; border-radius: 4px; box-shadow: 0 4px 10px rgba(52,30,96,.22); overflow: hidden; transition: transform .25s ease; }
.stackbox .sheet img { width: 100%; display: block; }
.stackbox .s1 { transform: translateX(-92%) rotate(-9deg); } .stackbox .s2 { transform: translateX(-50%); z-index: 2; top: 8px; } .stackbox .s3 { transform: translateX(-8%) rotate(9deg); }
a:hover .stackbox .s1 { transform: translateX(-104%) rotate(-12deg); } a:hover .stackbox .s3 { transform: translateX(4%) rotate(12deg); }
.stackbox .pg { position: absolute; right: 6px; bottom: 6px; z-index: 3; font: 800 9.5px 'DM Sans', sans-serif; letter-spacing: .4px; text-transform: uppercase; background: #d8f5ec; color: #1f6a55; border-radius: 999px; padding: 2px 7px; }

/* Big printable card (the Printables page card) */
.grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
.pc { display: flex; flex-direction: column; background: var(--pv-cream); border-radius: 22px; overflow: hidden; transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; }
.pc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(52,30,96,.12); }
.pc .thumb { background: #efe9f9; height: 162px; box-sizing: border-box; overflow: hidden; padding: 12px 14px 0; }
.pc .thumb img { width: 100%; display: block; border-radius: 8px 8px 0 0; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.pc .stackbox { height: 162px; }
.pc .stackbox .sheet { width: 44%; top: 22px; border-radius: 6px; box-shadow: 0 6px 16px rgba(52,30,96,.22); }
.pc .stackbox .s2 { top: 14px; }
.pc .info { padding: 14px 14px 16px; }
.pc b { display: block; font: 600 17px 'Fredoka', sans-serif; color: var(--pv-plum); line-height: 1.2; }
.pc .m { font-size: 12.5px; color: var(--pv-muted); margin-top: 3px; }
.chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.chip { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; background: #ece8ff; color: #4a37c9; }
.chip.pages { background: #d8f5ec; color: #1f6a55; }
.chip.maker { background: #ffe9c6; color: #8a4b00; }

/* Directory tile (Topics / Tags): a picture, the name, counts, optional grade links */
.tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; background: var(--pv-cream); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; min-width: 0; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(52,30,96,.12); }
.tile .stackbox, .tile .ico { height: 118px; }
.tile .ico { display: grid; place-items: center; background: #f7f8fc; }
.tile .ico img { width: 56%; height: 78%; object-fit: contain; }
.tile .ti { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.tile b { font: 600 16px/1.2 'Fredoka', sans-serif; color: var(--pv-plum); }
.tile .m { font-size: 12px; color: var(--pv-muted); font-weight: 600; }
.tile .gl { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tile .gl a { font: 700 11px 'DM Sans', sans-serif; color: var(--pv-violet-d); background: #fff; border-radius: 999px; padding: 3px 8px; text-decoration: none; }
.tile .gl a:hover { background: #ece8ff; }
.tiles.small .tile .stackbox, .tiles.small .tile .ico { height: 92px; }
.tiles.small .tile b { font-size: 14.5px; }
/* Tags A-Z: every tile flows in one grid; a letter is a tile of its own, so short letters
   leave no gaps */
.lt { display: grid; place-items: center; min-height: 100%; border-radius: 20px; background: var(--pv-bg); font: 600 44px 'Fredoka', sans-serif; color: var(--pv-violet); scroll-margin-top: 90px; }
.letters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.letters a, .letters span { text-align: center; font: 600 14px 'Fredoka', sans-serif; border-radius: 10px; padding: 5px 0; text-decoration: none; }
.letters a { background: var(--pv-cream); color: var(--pv-violet); }
.letters a:hover { background: #ece8ff; }
.letters span { color: #cfc8e2; }

@media (prefers-reduced-motion: reduce) { .stackbox .sheet, .sc, .pc, .tile { transition: none; } }
@media (max-width: 1100px) {
  /* narrower screens: tools and quizzes stack as full-width cards; 4 small cards a row */
  .krow { display: block; } .krow .kband + .kband { margin-top: 16px; }
  .sgrid { --n: 4 !important; }
  .grid { --n: 2 !important; } .tiles { --n: 3 !important; }
}
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  .rail { position: static; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts.grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgrid, .tiles { --n: 2 !important; }
  .grid { --n: 1 !important; }
  .th-head h1 { font-size: 26px !important; }
}

/* ---- Mockups (2026-10-01, ?mk=a|b|c|d): telling a worksheet maker card from a printable card ----
   a  a round icon on the picture's corner: a sheet of paper (violet) or sliders (orange)
   b  colour: maker cards are warm (orange edge, peach picture); printables stay lavender
   c  a small label pill over the title: PRINTABLE / MAKER
   d  a footer on each card that says what you do with it: Ready to print / Make your own */
.sc .kb, .sc .kl, .sc .kv { display: none; }
.mk-a .sc { position: relative; }
.mk-a .sc .kb { display: grid; place-items: center; position: absolute; left: 14px; top: 14px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; color: #fff; box-shadow: 0 2px 6px rgba(52,30,96,.28); }
.mk-a .sc .kb svg { width: 15px; height: 15px; }
.mk-a .sc .kb-printable { background: var(--pv-violet); }
.mk-a .sc .kb-maker { background: var(--pv-orange); color: var(--pv-plum); }
.mk-b .sc.k-maker { background: #fff0d6; box-shadow: inset 0 4px 0 var(--pv-orange); }
.mk-b .sc.k-maker .pic { background: #ffdfa8; }
.mk-b .sc.k-maker .pic img { border-radius: 10px; box-shadow: 0 3px 8px rgba(138,75,0,.18); }
.mk-b .sc.k-printable { box-shadow: inset 0 4px 0 var(--pv-violet); }
.mk-c .sc .kl { display: inline-block; align-self: flex-start; margin: 0 4px -3px; font: 700 9.5px 'DM Sans', sans-serif; letter-spacing: .6px; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
.mk-c .sc .kl-printable { background: #ece8ff; color: #4a37c9; }
.mk-c .sc .kl-maker { background: #ffe9c6; color: #8a4b00; }
.mk-d .sc { padding-bottom: 0; overflow: hidden; }
.mk-d .sc .kv { display: flex; align-items: center; gap: 6px; margin: auto -8px 0; padding: 7px 12px; font: 700 11.5px 'DM Sans', sans-serif; }
.mk-d .sc .kv svg { width: 13px; height: 13px; flex: none; }
.mk-d .sc .kv-printable { background: #ece8ff; color: #4a37c9; }
.mk-d .sc .kv-maker { background: #ffe1b0; color: #7a4100; }
.mk-d .sc:not(.k-printable):not(.k-maker) { padding-bottom: 11px; }
.optbar { position: fixed; right: 14px; bottom: 14px; z-index: 50; background: var(--pv-plum); border-radius: 999px; padding: 6px 8px; display: flex; align-items: center; gap: 4px; font: 700 12.5px 'DM Sans', sans-serif; box-shadow: 0 8px 24px rgba(52,30,96,.3); }
.optbar span { color: #cbc2ff; padding: 0 6px 0 8px; }
.optbar a { color: #cbc2ff; text-decoration: none; padding: 5px 11px; border-radius: 999px; }
.optbar a.on { background: #fff; color: var(--pv-plum); }

/* ---- Theme hubs: the theme shows on its page (Blake's pick, 2026-10-01). A soft wash of the
   theme's colour behind the top of the page with the theme's pictures scattered faintly in it,
   the first picture beside the title (no box around it), and the theme's colour on the small label and
   section dot. --th and --th-bg (set on the page wrapper) are the theme's colour and pale tint. */
.hk-theme { position: relative; }
.hk-theme #top, .hk-theme #page { position: relative; z-index: 1; }
/* no box around the picture (Blake, 2026-10-04): the line art sits straight on the wash */
.hk-theme .th-head.iconh .badge { width: 72px; height: 72px; border-radius: 0; background: none; box-shadow: none; }
.hk-theme .th-head.iconh .badge img { width: 68px; height: 68px; }
.hk-theme .th-head .ey { color: var(--th); }
.th-wash { position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); height: 440px; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(var(--th-bg) 0, var(--th-bg) 30%, rgba(248,242,233,0) 100%); }
.th-wash img { position: absolute; opacity: .2; }
.hk-theme .kband .sec .dot { background: var(--th) !important; }
@media (max-width: 760px) { .th-wash img:nth-child(odd) { display: none; } }

/* Cards and sections the grade filter hides (js/purple-hub.js) */
.sc[hidden], .sgrid[hidden], .none[hidden] { display: none; }

/* ---- The Tags directory (pages/purple/tags.php), from the mockup's live/tags.html ---- */
/* The list (final, 2026-10-01: layout D of the three compared): one white panel of plain text
   links in four columns, a small violet letter over each group, the count beside each tag. All
   the tags fit one screen, so there is no A-Z jump bar. */
.az-list { background: #fff; border-radius: 28px; padding: 26px 32px 10px; margin: 0 0 40px; box-shadow: 0 6px 20px rgba(52,30,96,.05); columns: 4; column-gap: 36px; }
.az-group { break-inside: avoid; padding: 0 0 18px; }
.az-group h2 { margin: 0 0 2px; padding: 0; font: 800 12px 'DM Sans', sans-serif !important; letter-spacing: 1.4px; color: var(--pv-violet) !important; }
.tag-list { list-style: none; margin: 0; padding: 0; }
.tag-list a { display: block; padding: 4px 0; line-height: 1.3; text-decoration: none; }
.tag-list .name { font-size: 15px; font-weight: 600; color: var(--pv-plum); }
.tag-list a:hover .name { color: var(--pv-violet); text-decoration: underline; }
.tag-list .count { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--pv-muted); white-space: nowrap; }
@media (max-width: 1000px) { .az-list { columns: 3; } }
@media (max-width: 640px) { .az-list { columns: 2; column-gap: 20px; padding: 20px 20px 4px; } }

/* A panel's intro line, as a quiet note along its bottom (Tools, Quizzes; Blake, 2026-10-06) */
.band-note { margin: 16px 0 0; padding: 0 4px; font-size: 13.5px; line-height: 1.6; color: var(--pv-muted); }