/* The purple worksheet page (/printables/<slug>/ under the purple theme; docs/purple-rollout.md,
   step 2). Design: mockups/redesign/site-a-hub/live/printable-detail.html (Blake, 2026-09-28).
   The page's own markup is kept; includes/purple/printable-page.php takes the page's classic
   <style> out, groups the right column into cards (.pp-card) and puts the page selector in a
   dock under the sheet. So these rules style the classic class names.
   - Left: the sheet sized to fit the window with the page selector under it, then Skills
     Covered, How to Use and Common Core as cards.
   - Right: the worksheet card (title, grade, description, Download, Print / Share / Like,
     Customize), What's included + Tags, More sets + More like this, Related app.
   Colours come from the --pv-* variables in css/purple-skin.css. */
body.pp-page { margin: 0; --pp-tint: #ece8ff; --pp-text: #4b3f6b; --pp-hdr: 76px; }
body.pp-page *, body.pp-page *::before, body.pp-page *::after { box-sizing: border-box; }
body.pp-page :is(h1, h2, h3, p, ul) { margin: 0; padding: 0; }

.breadcrumb-bar { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.breadcrumb { font-size: 13px; font-weight: 400; letter-spacing: .2px; color: var(--pv-muted); padding: 28px 0 24px; }
.breadcrumb a { color: var(--pv-violet); text-decoration: none; }
.breadcrumb span { margin: 0 6px; color: #c9c0dd; }

.detail-container { max-width: 1180px; margin: 0 auto; padding: 0 28px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.preview-col, .info-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* one card style throughout */
.pp-card, .edu-section { background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 10px 30px rgba(52,30,96,.08); }
.pp-card:empty { display: none; }

/* ---- Viewer: the sheet fits the window, the page selector sits right under it ---- */
.pp-stage { padding: 24px 18px 10px; display: flex; flex-direction: column; align-items: center; --pp-sel: 150px; }
body.pp-single .pp-stage { --pp-sel: 0px; padding-bottom: 24px; }   /* one page: no selector, the sheet takes the room */
.pp-stage-head { display: none; }
body.pp-page .big-preview { margin: 0; }
.big-preview { --pp-h: calc(100vh - var(--pp-hdr) - 70px - 36px - var(--pp-sel) - 18px); height: max(360px, var(--pp-h)); aspect-ratio: 8.5 / 11; max-width: 100%;
  background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(52,30,96,.14); border: 1px solid var(--pv-line); overflow: hidden; display: grid; place-items: center; }
.big-preview canvas { width: auto !important; height: auto; max-width: 100%; max-height: 100%; display: block; }
.pp-dock { width: 100%; margin-top: 8px; display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; column-gap: 8px; }
.pp-dock[hidden] { display: none; }
.pp-pager { grid-column: 3; grid-row: 1; min-width: 96px; text-align: center; font-size: 13px; font-weight: 600; color: var(--pv-muted); }
.pp-nav { grid-row: 1; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--pv-line); background: #fff; color: var(--pv-plum); font-size: 20px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; cursor: pointer; }
.pp-nav:hover { border-color: var(--pv-lav); color: var(--pv-violet-d); }
.pp-nav:disabled { opacity: .3; cursor: default; }
#ppPrev { grid-column: 2; }
#ppNext { grid-column: 4; }
.thumb-strip { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; min-width: 0; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; justify-content: safe center; }
.thumb-strip canvas { width: 70px; height: auto; border-radius: 8px; border: 3px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer; background: #fff; flex: 0 0 auto; }
.thumb-strip canvas.active { border-color: var(--pv-orange); }
/* while the strip is dragged sideways with the mouse (js/purple-printable.js) */
.thumb-strip.dragging, .thumb-strip.dragging canvas { cursor: grabbing; user-select: none; }
/* the pages under the pointer do not react while the strip is being dragged (hovering one shows it) */
.thumb-strip.dragging canvas { pointer-events: none; }

/* ---- Under the preview: Skills Covered, How to Use, Common Core ---- */
body.pp-page .edu-section h2 { font: 600 22px/1.2 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0 0 12px; letter-spacing: 0; }
body.pp-page .edu-section h3 { font: 600 17px/1.3 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 18px 0 6px; }
/* How to use: a touch more room at the sides, and its heading in sentence case as the mockup has it
   (the words in the page are unchanged) */
.edu-section:has(> h3) { padding: 24px 28px; box-shadow: 0 8px 24px rgba(52,30,96,.06); }
body.pp-page .edu-section:has(> h3) > h2 { text-transform: lowercase; }
body.pp-page .edu-section:has(> h3) > h2::first-letter { text-transform: uppercase; }
.edu-section p { font-size: 15px; color: var(--pp-text); line-height: 1.65; margin: 0 0 10px; }
.edu-section p:last-child { margin-bottom: 0; }
.edu-section ul { list-style: none; display: grid; gap: 7px; margin: 4px 0 10px; }
.edu-section ul:last-child { margin-bottom: 0; }
.edu-section li { display: flex; gap: 10px; font-size: 14.5px; color: var(--pp-text); line-height: 1.5; }
.edu-section li::before { content: '\2713'; color: var(--pv-orange); font-weight: 800; flex: none; }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 28px; }
.skills-grid ul { margin: 0; }
.edu-section ul.standards-list { gap: 9px; }
.standards-list li { display: block; padding-left: 0; }
.standards-list li::before { content: none; }
.standard-code { display: inline-block; font: 700 12.5px 'DM Sans', sans-serif; color: var(--pv-violet-d); background: var(--pp-tint); border-radius: 999px; padding: 2px 9px; margin-right: 4px; }

/* ---- The worksheet card ---- */
.pp-wcard { display: flex; flex-direction: column; gap: 16px; }
body.pp-page .info-col h1, body.pp-page .pp-stage-head h1 { font: 600 28px/1.05 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; letter-spacing: -.5px; margin: 0; }
.info-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.info-badge { display: inline-block; background: var(--pp-tint); color: var(--pv-violet-d); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.info-badge.count { background: #d8f5ec; color: #1f6a55; }
body.pp-page .info-description { margin: 0; padding: 0; }
.info-description p { font-size: 14.5px; color: #374151; line-height: 1.55; }
body.pp-page .action-buttons { display: flex; flex-direction: column; gap: 16px; margin: 0 !important; padding: 0; }
.btn-download, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--pv-line); border-radius: 999px; padding: 10px 14px; font: 700 14px 'DM Sans', sans-serif; color: var(--pv-plum); background: #fff; transition: .15s; white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn-secondary:hover { border-color: var(--pv-lav); color: var(--pv-violet-d); }
.btn-download { width: 100%; padding: 14px 24px; font-size: 16px; background: var(--pv-orange); border-color: var(--pv-orange); }
.btn-download:hover { background: var(--pv-orange-d); border-color: var(--pv-orange-d); }
.btn-download svg, .btn-secondary svg { width: 17px; height: 17px; flex: none; }
.action-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.action-row .btn-secondary { min-width: 0; }
.action-row .btn-secondary[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-like .like-count { font-variant-numeric: tabular-nums; }
.btn-like .like-count:empty { display: none; }
/* liked: the button turns coral, the number white, the outline goes (Blake's pick, 2026-10-07); the heart
   stays line art, a size up (2026-10-08).
   The same coral heart marks likes in the account menu and on My Likes. */
.btn-like[aria-pressed="true"] { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }
.btn-like[aria-pressed="true"]:hover { background: #ec4247; border-color: #ec4247; color: #fff; }
.btn-like[aria-pressed="true"] svg { fill: none; stroke: #fff; stroke-width: 2.3; width: 21px; height: 21px; margin: -2px 0; }
.btn-like.pop svg { animation: pp-like-pop .35s ease; }
@keyframes pp-like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .btn-like.pop svg { animation: none; } }
/* "Saved to My Likes": the worksheet makers' toast (css/purple-generator.css: keep the two alike) */
.mb-toast { position: fixed; left: 50%; bottom: 26px; z-index: 500; transform: translate(-50%, 90px); background: var(--pv-plum); color: #fff; border-radius: 999px; padding: 12px 22px; font: 700 14px 'DM Sans', sans-serif; box-shadow: 0 12px 30px rgba(36,18,67,.3); transition: transform .3s cubic-bezier(.2,1.3,.4,1); white-space: nowrap; }
.mb-toast.on { transform: translate(-50%, 0); }
.mb-toast b { margin-right: 6px; color: #7be0a5; }
@media print { .mb-toast { display: none !important; } }
.like-note { margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--pv-muted); text-align: center; }
.like-note[hidden] { display: none; }
.like-note a { color: var(--pv-violet); font-weight: 700; text-decoration: none; }
/* Customize: cream card, two short lines */
.gen-callout { display: block; background: var(--pv-cream); border-radius: 18px; padding: 12px 16px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.gen-callout:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(52,30,96,.1); }
.gen-callout > svg { display: none; }
.gen-callout strong { display: block; font: 600 16px/1.25 'Fredoka', sans-serif; color: var(--pv-plum); }
.gen-callout span { display: block; font-size: 13.5px; font-weight: 600; color: var(--pv-muted); margin-top: 2px; }
.gen-callout:hover span { color: var(--pv-violet-d); }

/* ---- Right column cards under it ---- */
body.pp-page .info-col .pp-card > div > h3 { font: 700 11px 'DM Sans', sans-serif !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pv-muted) !important; margin: 0 0 12px; }
.pp-card > div + div { margin-top: 18px; }
.whats-included ul { list-style: none; display: grid; gap: 7px; }
.whats-included li { display: flex; gap: 10px; font-size: 14px; color: var(--pp-text); line-height: 1.4; }
.whats-included li::before { content: '\2713'; color: var(--pv-orange); font-weight: 800; }
body.pp-page .tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.pp-page .tag-chips a { background: var(--pv-bg); border: 1px solid var(--pv-lav); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--pv-violet-d); text-decoration: none; transition: .15s; }
body.pp-page .tag-chips a:hover { background: var(--pp-tint); border-color: var(--pv-violet); }
.related-cards { display: grid; gap: 10px; }
.related-card { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 8px; margin: 0 -8px; text-decoration: none; transition: background .15s; box-shadow: none !important; }
.related-card:hover { background: var(--pv-bg); }
.related-card img { flex: none; width: 58px; height: 74px; object-fit: cover; object-position: top; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(52,30,96,.16); }
.rc-info { min-width: 0; }
.rc-title { font: 600 15px/1.2 'Fredoka', sans-serif; color: var(--pv-plum); }
.rc-meta { font-size: 12.5px; color: var(--pv-muted); margin-top: 3px; }
/* the listing's chips on a set's card */
.rc-info .chips { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.rc-info .chip { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; background: #ece8ff; color: #4a37c9; }
.rc-info .chip.pages { background: #d8f5ec; color: #1f6a55; }
.rc-info .chip.season { background: #ffe0ff; color: #8a1f8a; }
/* the related app: a little roomier, with an arrow at the end */
.pp-rel .related-card { padding: 10px; margin: 0 -10px -10px; }
.pp-rel .related-card .rc-info { flex: 1; }
.pp-rel .related-card::after { content: '\2192'; flex: none; margin-left: auto; color: var(--pv-violet); font-weight: 700; }
.pp-rel .rc-meta { font-size: 12px; margin-top: 2px; }
.pp-rel .related-card img { width: 52px; height: 52px; border-radius: 13px !important; box-shadow: 0 6px 14px rgba(52,30,96,.18); }
body.pp-page .hub-link-list { display: grid; gap: 8px; }
body.pp-page .hub-link-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid var(--pv-line); border-radius: 999px; padding: 9px 16px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--pv-plum); text-decoration: none; transition: .15s; }
body.pp-page .hub-link-list a:hover { border-color: var(--pv-lav); color: var(--pv-violet-d); }
body.pp-page .hub-link-list a::after { content: '\2192'; color: var(--pv-violet); }

@media (max-width: 1000px) {
  /* one column: the worksheet preview first, with the title, grade and the Download / Print /
     Share / Like buttons on top of the preview card (Blake, 2026-10-01; js/purple-printable.js
     moves them there and back), then the rest of the worksheet card, the teaching notes, and
     the rest of the right column */
  .detail-container { display: flex; flex-direction: column; gap: 16px; }
  .preview-col, .info-col { display: contents; }
  .pp-stage { order: 1; }
  .pp-wcard { order: 2; }
  .edu-section { order: 3; }
  .info-col > .pp-card:not(.pp-wcard) { order: 4; }
  .pp-stage-head { display: flex; flex-direction: column; gap: 12px; align-self: stretch; padding: 4px 6px 14px; }
  .pp-stage-head:empty { display: none; }
  .pp-stage-head .info-badges { margin-top: -4px; }
  body.pp-page .pp-stage-head h1 { font-size: 26px !important; }
  .pp-wcard:not(:has(> *)) { display: none; }
  .big-preview { height: auto; width: 100%; }
}
@media (max-width: 760px) {
  .breadcrumb-bar, .detail-container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
  .skills-grid { grid-template-columns: 1fr; }
  .pp-card, .edu-section { padding: 20px; }
  .pp-stage { padding: 14px 10px 10px; }
  .pp-stage-head { padding: 2px 6px 12px; }
  body.pp-page .pp-stage-head h1 { font-size: 24px !important; }
}