/* puzzles-page-specific styles (loaded after app-common.css). Same DS tokens/
   structure as grade.css / exam.css — copied rather than shared because each page
   sheet in this system owns its rules (see app-common.css's own note on this). */

.grade-wrap{padding:20px 24px;flex:1}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(41,40,39,.5);margin-bottom:24px;flex-wrap:wrap}

.crumb-sep{color:rgba(41,40,39,.3)}

/* Hero */
.pz-hero{margin-bottom:20px}

.pz-hero-title{font-family:'Athletics';font-size:28px;line-height:36px;font-weight:700;color:#1C1917;margin-bottom:8px}

.pz-hero-sub{font-size:14px;line-height:22px;color:rgba(41,40,39,.7);max-width:640px}

/* Grade filter — same pill language as the grade/exam switchers */
.gs-chips{display:flex;flex-wrap:wrap;gap:6px}

.gs-pill{padding:5px 14px;border:1px solid rgba(0,0,0,.12);background:none;font-family:'UntitledSans';font-size:12px;font-weight:500;color:#97948E;cursor:pointer;border-radius:20px;white-space:nowrap;flex-shrink:0;text-decoration:none}

/* Section headings on the hub — "Browse by Type" / "Browse by Grade" — same weight
   language as the category page's own h1, one size down. */
.pz-section-heading{font-family:'Athletics';font-size:18px;font-weight:700;color:#1C1917;margin:0 0 12px}

/* Category directory (hub) — one full-width section per category, stacked (not a
   grid of small tiles): `.pz-cat-head` (icon/name/desc/count) links to the category
   page, and `.pz-subtype-list` below it lists every real subtype inside — same "list
   within it" pattern as the Math Games hub's per-type sections. */
.pz-cat-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}

/* Each section's card, head (icon/name/desc/count) and tile grid are shared across the
   games + puzzles hubs — see .enr-section* in app-common.css. */

/* "Browse by Grade" — real links to the separate, older grade-specific puzzle pages
   (see the note in puzzles-page.js). A compact colour-tinted tile per grade (same
   rotating hue palette as SubtypeTile/CategorySection, via hueVars), not a pill row —
   Manasa asked for something other than pills here; short label ("K"/"1".."12") on the
   tile face, full label ("Kindergarten"/"Grade N") as the native tooltip. */
.pz-grade-links-note{font-size:13px;color:rgba(41,40,39,.6);margin:0 0 10px}

.pz-grade-tiles{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}

.pz-grade-tile{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--cb,#F5F2EF);border:1px solid var(--c2,#EDE8E3);color:#1C1917;font-family:'Athletics';font-size:15px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s,border-color .12s}

.pz-grade-tile:hover{border-color:var(--cd,#1C1917);box-shadow:0 4px 12px rgba(28,25,23,.12);transform:translateY(-2px)}

/* Category page's own hero — icon beside the h1, same row language as the category
   directory card's heading */
.pz-category-heading{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:8px}

.pz-category-heading .pz-hero-title{margin-bottom:0}

/* Category section */
.pz-category{margin-bottom:32px}

.pz-category-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}

.pz-category-heading{display:flex;align-items:center;gap:12px;min-width:0}

.pz-category-icon{width:44px;height:44px;flex-shrink:0;display:block}

.pz-category-count{font-size:12px;color:rgba(41,40,39,.5);white-space:nowrap}

.pz-category-empty{font-size:13px;color:#97948E;padding:12px 0}

/* Subtype accordion group — same shell as .ch-row, own body content */
.about-section{margin-bottom:0}

.ch-row-num{font-size:12px;font-weight:500;color:rgba(41,40,39,.5);width:16px;flex-shrink:0;text-align:center}

.ch-ic{width:34px;height:34px;border-radius:50%;background:#F5F2EF;display:flex;align-items:center;justify-content:center}

.ch-row-lessons{background:var(--cb,#F9F7F5);padding:12px 20px 16px;border-top:1px solid #EDE8E3;margin-top:-1px;overflow:hidden}

/* Subtype tile grid — illustrated-icon tiles (SplashLearn reference, illustrated rather
   than screenshots per Manasa's steer): the icon panel is the card, label + puzzle count
   underneath, no competing paragraph of text on the tile face (the genuine on-screen
   description moves to the `title` tooltip and the detail panel below — see
   SubtypePanel). Selecting a tile never expands it in place (that would distort the
   grid); it opens the one shared panel below the whole grid. */
.pz-subtype-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:20px}

/* The tile box and media panel are shared across all three enrichment verticals — see
   .enr-card* in app-common.css. Only the footer below is puzzle-specific (fixed height +
   name line-clamp, since subtype names vary in length). */

/* Fixed height, not content-driven — label+nickname length varies a lot ("Tangram" vs
   "Pigeonhole Matching · The Mitten Box"), which was making tiles in the same row 183px,
   202px or 222px tall depending on how many lines the name wrapped to. Clamping the name
   to 2 lines and giving the footer a fixed height keeps every tile the same size
   regardless of its text length. */
/* Additive to the shared .enr-card-footer / .enr-card-title (app-common.css): puzzles
   pin a fixed footer height and clamp the name to 2 lines, so tiles in a row stay the
   same height regardless of name/nickname length. */
.pz-subtype-footer{height:82px}

.pz-subtype-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pz-subtype-nickname{font-weight:400;color:#97948E;font-size:12px}

.pz-card-list{background:var(--cb,#F9F7F5);border-radius:8px;padding:4px 16px}

/* Puzzle card row — title + grade badge + Play CTA, same row language as exam.css's
   .block-row/.block-cta */
.pz-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px}

.pz-card + .pz-card{border-top:1px solid rgba(41,40,39,.08)}

.pz-card-main{min-width:0;display:flex;flex-direction:column;gap:2px}

.pz-card-title{font-size:13px;color:#1C1917;line-height:1.35}

.pz-card-meta{display:flex;align-items:center;gap:8px}

.pz-card-grade{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cd)}

/* Non-live staging status — a visible QA signal, not a gate: the card still links out. */
.pz-card-status{font-size:10px;color:#97948E}

.pz-card-cta{height:34px;min-width:76px;padding:0 16px;border-radius:6px;border:1px solid #1C1917;background:#1C1917;color:#fff;font-family:'UntitledSans';font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.12)}

.pz-card-cta:hover{background:#38322E;border-color:#38322E}

/* Currently-playing instance — de-emphasized rather than solid, since it's already
   been actioned and the solid treatment should stay reserved for what's clickable next. */
.pz-card.active .pz-card-cta{background:#fff;color:var(--cd,#1C1917);border-color:var(--cd,#1C1917);box-shadow:none}

/* Locked instance (free-preview quota used up for this category) — same solid CTA
   shape as Play, plus the lock glyph; recolored to white for contrast against the dark
   fill, same treatment as games.css's .gd-embed-lock-icon / exploration.css's
   .expl-embed-lock-icon on their own dark embed triggers. */
.pz-card-cta-locked{gap:6px}

.pz-card-lock-icon{width:12px;height:12px;display:flex}

.pz-card-lock-icon svg{width:12px;height:12px;display:block}

.pz-card-lock-icon .lr-sno-lock{position:static;width:12px;height:12px}

.pz-card-lock-icon .lr-sno-lock svg rect{fill:#F9F7F5;stroke:#1C1917}

.pz-card-lock-icon .lr-sno-lock svg path{stroke:#F9F7F5}

.pz-card.active .pz-card-cta:hover{background:var(--cb,#F5F2EF)}

/* Subtype detail page (/math-puzzles/<subtype>/) — hero card (icon + title + tags +
   real hook/how-to-play copy), in-page embed panel, puzzle-instance list, and FAQs.
   Same shape as the Math Games detail page (games.css's .gd-* rules), `pzd-` prefixed
   here to stay unambiguous inside this sheet. */
.pzd-wrap{max-width:760px;margin:0 auto}

.pzd-hero{display:flex;gap:20px;background:#fff;border-radius:12px;padding:24px;margin-bottom:20px}

.pzd-icon-panel{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:10px;background:var(--cb,#F5F2EF);flex-shrink:0}

.pzd-icon{width:72px;height:72px;display:block}

.pzd-thumb{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}

.pzd-hero-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

.pzd-hero-hook{font-size:14px;line-height:22px;color:rgba(41,40,39,.85);margin:0}

.pzd-tags{display:flex;flex-wrap:wrap;gap:8px}

.pzd-tag{padding:5px 14px;border:1px solid rgba(0,0,0,.12);border-radius:20px;font-size:12px;font-weight:500;color:#57534E;white-space:nowrap}

.pzd-tag-type{background:#1C1917;color:#fff;border-color:#1C1917}

.pzd-panel{background:#fff;border-radius:12px;padding:24px;margin-bottom:20px}

.pzd-panel-body{font-size:14px;line-height:1.7;color:#43413E;margin-top:10px}

/* The pre-Play embed panel is shared — see .enr-embed* in app-common.css. */

/* Right rail — "Other Grades" quick-switch on the grade pages, same pattern as
   games.css's "Other Formats" rail. */
.rp-formats{background:#fff;border:1px solid #EDE8E3;border-radius:8px;overflow:hidden}

.rf-title{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;padding:12px 16px;border-bottom:1px solid #EDE8E3}

.rf-item{display:block;padding:12px 16px;border-bottom:1px solid #EDE8E3;font-size:13px;line-height:20px;color:rgba(41,40,39,.7);text-decoration:none}

.rf-item:hover{background:#FAF1E6;color:#1C1917}

.rf-item.active{color:#1C1917;font-weight:500;background:#FAF1E6}

.rf-item:last-child{border-bottom:none}

/* "Explore Enrichment" cross-vertical nav (app-shell.js's EnrichmentCrossNav) — a
   colored icon per row, unlike the plain-text "Other Categories"/"More X Puzzles" rows
   above, so this block reads as more prominent. */
.rp-formats-icons .rf-item{display:flex;align-items:center;gap:10px}

.rf-icon{width:18px;height:18px;flex-shrink:0;display:flex}

.rf-icon svg{width:18px;height:18px;display:block}

/* Right rail — "Resources" list (ResourcesRail, app-shell.js). Copied verbatim from
   grade.css: the component only ever ships `variant="grade"`'s classnames
   (.rp-resources/.rp-res-*), but this sheet never defined them — every icon in this
   list was rendering unstyled, at full raw SVG size, until this was added. */
.rp-resources{background:#fff;border:1px solid #EDE8E3;border-radius:8px;padding:0 16px}

.rp-res-title{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;padding:16px 0 12px}

.rp-res-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #EDE8E3;text-decoration:none;color:#1C1917;font-size:14px;line-height:20px;font-weight:500}

.rp-res-item:hover .rp-res-name{text-decoration:underline}

.rp-res-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.rp-res-icon svg{width:18px;height:18px;display:block}

/* NOTE: .about-topic* / .about-faq-* (exam-page AboutUnit styles) removed — AboutUnit is
   only rendered on exam pages (exam.css), never on puzzle pages. */
.section-divider{border:none;border-top:1px solid #EDE8E3;margin:0 0 24px}

/* RIGHT RAIL — reuses the shared MathFitCard + ResourcesRail (app-shell.js /
   app-common.css) rather than a page-local CTA, so this page carries no CTA copy of
   its own to drift from the grade page's. Mobile: rail flows below the content
   (grade.css's pattern), not duplicated inline (exam.css's .cta-mobile pattern) —
   this page has no per-item mobile CTA that needs a copy above the fold. */
@media(max-width:1024px){
  .shell{display:block;overflow-y:auto}
  .main{overflow-y:visible;border-right:none}
  .rightpanel{border-left:none;border-top:1px solid #EDE8E3;background-image:none;overflow-y:visible}
}

@media(max-width:767px){
  .gs-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .pz-hero-title{font-size:22px;line-height:28px}
  .pz-card{flex-wrap:wrap}
  .pz-category-icon{width:34px;height:34px}
  .pz-cat-grid{gap:12px}
  .pz-subtype-grid{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px}
  .pzd-hero{flex-direction:column}
  .pzd-icon-panel{width:100%;height:140px}
}