/* The purple worksheet maker page (/generators/<slug>/ under the purple theme;
   docs/purple-rollout.md, step 3): the cream-studio maker Blake approved on 2026-09-25.
   includes/purple/generator-page.php adds the classes and the few pieces of markup these
   rules need; the maker's own controls, script and worksheet are untouched.
   Two parts, kept in the mockup's order:
   1. the cream-studio shell (from mockups/redesign/site-a-hub/gen.css)
   2. its fit to the real pages: the 76px purple header, the old page chrome undone, the
      "About this generator" block as purple cards (from the mockup's live/gen-live.css) */

/* ---------- 1. The cream-studio shell ---------- */
/* Worksheet generator, unframed (generator.html). The worksheet SVG itself is untouched;
   this is only the chrome around it: sidebar, controls, buttons, preview stage. */

.gen { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - 108px); }
.gen .sidebar { padding: 28px 24px 32px; position: sticky; top: 108px; height: calc(100vh - 108px); overflow-y: auto; }
.gen .sidebar h1 { font-size: 24px; line-height: 1.15; color: var(--plum); margin-bottom: 6px; }
.gen .sidebar .sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; line-height: 1.45; }
.gen .control-group { margin-bottom: 16px; }
.gen .control-group > label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.gen .control-group select, .gen .control-group input[type="text"], .gen .control-group input[type="number"], .gen .adv-sub select, .gen .adv-sub input[type="text"] { width: 100%; padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 600; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--plum); }
.gen select:focus, .gen input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(99,75,245,.15); }
.gen .checkbox-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.gen .checkbox-row label, .gen .adv-checkbox-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.gen input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; }
.gen .advanced-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 0; user-select: none; font-size: 13px; font-weight: 700; color: var(--violet); }
.gen .advanced-toggle .toggle-arrow { font-size: 10px; transition: transform .2s; }
.gen .advanced-toggle .toggle-arrow.open { transform: rotate(90deg); }
.gen .advanced-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--bg); border-radius: 16px; }
.gen .advanced-panel.open { max-height: 560px; }
.gen .advanced-panel-inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.gen .adv-sub { padding-left: 27px; display: grid; gap: 6px; }
.gen .adv-sub label { font-size: 12px; color: var(--muted); font-weight: 600; }
.gen .adv-sub select, .gen .adv-sub input[type="text"] { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.gen .preview-area { padding: 28px 40px 60px; display: flex; justify-content: center; align-items: flex-start; overflow: auto; }
.gen #sheetWrap { display: flex; flex-direction: column; gap: 32px; align-items: center; }
.gen #sheetWrap.grid-view { display: grid; justify-items: center; }
.gen .worksheet-page { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 18px 50px rgba(52,30,96,.16); display: inline-block; }
.ak-print-only { display: none !important; }

/* Cream studio: white sidebar card floating on the cream page */
.gen { background: var(--cream); }
.gen .sidebar { background: #fff; box-shadow: 8px 0 30px rgba(52,30,96,.06); border-right: 1px solid var(--line); }

@media (max-width: 900px) {
  .gen { display: block; }
  .gen .sidebar { position: static; height: auto; }
  .gen .preview-area { padding: 16px 12px 40px; }
  .gen #sheetWrap, .gen #sheetWrap.grid-view { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px; }
  .gen .worksheet-page { padding: 8px; width: 100%; max-width: 100%; }
  .gen .worksheet-page svg { width: 100% !important; height: auto !important; }
}

@media print {
  #site-header, #site-footer, .proto, .gen .sidebar { display: none !important; }
  .ak-print-only { display: block !important; }
  body, .gen, .gen .preview-area, .gen #sheetWrap { background: #fff !important; display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
  .gen .worksheet-page { padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; display: block !important; page-break-inside: avoid !important; break-inside: avoid !important; }
  .gen .worksheet-page:not(:last-child) { page-break-after: always !important; break-after: page !important; }
  .gen .worksheet-page svg { width: 100% !important; height: auto !important; display: block !important; }
}
@page { size: letter; margin: 0.5in 0.4in 0in 0.4in; }

/* Back link above the maker title */
.gen .sidebar .crumb { margin-bottom: 14px; }
.gen .sidebar .crumb a { font-size: 12.5px; font-weight: 700; color: var(--violet); }

/* ---------- 2. On the real pages ---------- */
:root {
  --plum: #341e60; --plum-2: #4a2d85; --orange: #ff9500; --orange-d: #e07f00; --violet: #634bf5; --violet-d: #4a37c9;
  --lav: #cbc2ff; --ink: #2a1b4d; --muted: #6b6485; --line: #e6dff2; --bg: #f3eef9; --cream: #f8f2e9;
}
/* The purple header is 76px (the prototype's 108px included its review bar) */
body.pv-gen .gen { min-height: calc(100vh - 76px); height: auto; margin: 0; max-width: none; width: auto; flex: none; }
body.pv-gen .gen .sidebar { top: 76px; height: calc(100vh - 76px); width: auto; max-width: none; min-width: 0; margin: 0; border-radius: 0; }
body.pv-gen .gen .preview-area { height: auto; min-height: 0; background: transparent; flex: none; }
body.pv-gen { height: auto !important; overflow: visible !important; display: block !important; }
body.pv-gen .gen .sidebar h1 { font: 600 24px/1.15 'Fredoka', sans-serif !important; color: var(--plum) !important; margin: 0 0 6px; padding: 0; text-align: left; letter-spacing: 0; }
body.pv-gen .gen .sidebar .sub { margin: 0 0 22px; }
body.pv-gen .gen .sidebar .crumb a { text-decoration: none; }
@media (max-width: 900px) {
  body.pv-gen .gen .sidebar { position: static; height: auto; }
}

/* The "About this generator" block, as purple cards on cream */
body.pv-gen .generator-content-block { background: var(--cream); border: 0; padding: 40px 0 0; margin: 0; }
body.pv-gen .gcb-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; display: grid; gap: 18px; }
body.pv-gen .gcb-section { background: #fff; border: 0; border-radius: 24px; padding: 24px 26px; box-shadow: 0 6px 20px rgba(52,30,96,.05); margin: 0; }
body.pv-gen .gcb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; }
body.pv-gen .gcb-section h2 { font: 600 26px/1.2 'Fredoka', sans-serif !important; color: var(--plum) !important; margin: 0 0 10px; }
body.pv-gen .gcb-section h3 { font: 600 19px/1.25 'Fredoka', sans-serif; color: var(--plum); margin: 0 0 10px; }
body.pv-gen .gcb-section h4.gcb-subhead { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
body.pv-gen .gcb-section p, body.pv-gen .gcb-list li { font-size: 14.5px; line-height: 1.6; color: #4b3f6b; }
body.pv-gen .gcb-list { padding-left: 20px; margin: 0; }
body.pv-gen .gcb-list li::marker { color: var(--orange); }
/* FAQ: roomy rounded boxes; the answer lines up with the question text, not the +/- sign */
body.pv-gen .gcb-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin: 0 0 10px; transition: border-color .15s, background .15s; }
body.pv-gen .gcb-faq-item:last-child { margin-bottom: 0; }
body.pv-gen .gcb-faq-item:hover { border-color: var(--lav); }
body.pv-gen .gcb-faq-item[open] { background: #faf8fe; border-color: var(--lav); }
body.pv-gen .gcb-faq-item summary { display: flex; align-items: baseline; gap: 10px; font: 700 15px/1.4 'DM Sans', sans-serif; color: var(--plum); cursor: pointer; list-style: none; }
body.pv-gen .gcb-faq-item summary::before { content: '+'; flex: none; width: 12px; margin: 0; color: var(--orange); font-weight: 800; }
body.pv-gen .gcb-faq-item[open] summary::before { content: '\2212'; }
body.pv-gen .gcb-faq-item p { margin: 10px 0 2px; padding-left: 22px; font-size: 14.5px; line-height: 1.65; }
body.pv-gen .gcb-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
body.pv-gen .gcb-related-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg); border: 2px solid transparent; border-radius: 16px; padding: 12px 14px; text-decoration: none; transition: .15s; }
body.pv-gen .gcb-related-card:hover { border-color: var(--lav); background: #fff; }
body.pv-gen .gcb-related-title { font-weight: 700; color: var(--plum); font-size: 14px; }
body.pv-gen .gcb-related-grade { font-size: 11.5px; font-weight: 700; color: var(--violet-d); background: #ece8ff; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
body.pv-gen .gcb-footer-note { background: #fff5e6; box-shadow: none; }
body.pv-gen .gcb-section a:not(.gcb-related-card):not(.tag-chips a) { color: var(--violet); font-weight: 700; }
@media (max-width: 860px) {
  body.pv-gen .gcb-grid, body.pv-gen .gcb-related-grid { grid-template-columns: 1fr; }
  body.pv-gen .gcb-inner { padding: 0 16px; }
}

/* The sidebar is exactly the window's height under the header and scrolls inside itself,
   as on the live site (chosen 2026-09-29 over one page scroll). Phones keep one scroll. */
body.pv-gen .gen .sidebar { align-self: start; }
@media screen and (min-width: 901px) {
  body.pv-gen .gen .sidebar { position: sticky; top: 76px !important; height: calc(100vh - 76px) !important; overflow-y: auto !important; overscroll-behavior: contain; }
  body.pv-gen .gen .sidebar::-webkit-scrollbar { width: 8px; }
  /* The first sheet fits the window: the same 28px gap below it as above it, so its
     bottom edge sits the same distance above the sidebar's bottom as its top sits below
     the sidebar's top. Only ever shrinks (never below 480px); later pages scroll. */
  body.pv-gen .gen .worksheet-page svg { display: block; width: auto !important; height: auto !important; max-width: 100%;
    max-height: max(480px, calc(100vh - 76px - 28px - 28px - 40px)); }
}
/* Match the reference exactly: white Generate New, violet Advanced Options, 14px labels */
body.pv-gen .gen .advanced-toggle, body.pv-gen .gen .advanced-toggle * { color: var(--violet) !important; }
body.pv-gen .gen .checkbox-row label, body.pv-gen .gen .adv-checkbox-row, body.pv-gen .gen .adv-checkbox-row label { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; }

/* ---- Where the maker ends (2026-09-29, primary mockup only until approved) ----
   The sidebar's white column runs all the way down to the stripe: it is painted as the
   maker area's background, so it reaches the bottom whether the sidebar or the preview is
   taller. A hairline replaces the sidebar's shadow, which would stop short of the stripe. */
body.pv-gen .gen { background: linear-gradient(to right, #fff 0 339px, var(--line) 339px 340px, var(--cream) 340px); }
body.pv-gen .gen .sidebar { background: transparent; box-shadow: none; border-right: 0; }
@media (max-width: 900px) { body.pv-gen .gen { background: var(--cream); } body.pv-gen .gen .sidebar { background: #fff; } }

/* The stripe: a quiet full-width band that hands the page over to the About section */
.gen-bridge { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 18px 24px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s; }
.gen-bridge:hover { background: #faf8fe; }
.gen-bridge .gb-k { font: 800 11.5px 'DM Sans', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--violet); }
.gen-bridge .gb-t { font: 600 18px 'Fredoka', sans-serif; color: var(--plum); }
.gen-bridge .gb-ar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ece8ff; color: var(--violet-d); font-weight: 800; transition: transform .2s; }
.gen-bridge:hover .gb-ar { transform: translateY(3px); }
body.pv-gen .generator-content-block { scroll-margin-top: 76px; }

/* the new one-line description replaces the old "Generate custom worksheets" subtitle */
body.pv-gen .gen .sidebar .subtitle { display: none; }
/* (The pinned two-by-two button footer tried here was rejected 2026-09-29: the buttons stay
   full size in the sidebar, and the sidebar may run taller than the preview.) */

/* Printing a worksheet: nothing of the page around it */
@media print { .gen-bridge, body.pv-gen .crumb { display: none !important; } }

/* ---- The maker's buttons (Blake's layout, 2026-10-07) ----
   Generate New stays with the settings. Under a line: Download PDF (the makers' orange, no picture),
   then Print and Share side by side, drawn as on a printable's page, then Add to My Sets (pale
   violet; js/favorites.js adds it and its menu). The three buttons are the maker's own, moved and
   re-dressed (generator-page.php), so the maker's script still finds them by id.
   A Like heart belongs between Share and the edge, as on a printable's page: left off until makers
   can be liked (Print and Share share the row meanwhile). */
body.pv-gen .gen .sidebar .mb-b { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100% !important; margin: 0 !important; border: 2px solid var(--line) !important; border-radius: 999px !important; padding: 10px 14px !important; font: 700 14px/1.3 'DM Sans', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--plum) !important; background: #fff !important; cursor: pointer; white-space: nowrap; transition: .15s; box-shadow: none !important; transform: none !important; }
body.pv-gen .gen .sidebar .mb-b:hover { border-color: var(--lav) !important; color: var(--violet-d) !important; }
body.pv-gen .gen .sidebar .mb-b:disabled { opacity: .7; cursor: default; }
body.pv-gen .gen .sidebar .mb-b svg { width: 17px; height: 17px; flex: none; }
body.pv-gen .gen .sidebar .mb-gen { margin-top: 18px; }
body.pv-gen .gen .sidebar .mb-line { height: 1px; background: var(--line); margin: 18px 0; }
/* 16px between Download, the Print / Share row and Add to My Sets: the gap a printable's page has under its Download */
body.pv-gen .gen .sidebar .button-group.mb-actions { display: flex; flex-direction: column; gap: 16px; margin: 0; }
body.pv-gen .gen .sidebar .mb-actions:first-child, body.pv-gen .gen .sidebar :not(.mb-line) + .mb-actions { margin-top: 22px; }
body.pv-gen .gen .sidebar .mb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.pv-gen .gen .sidebar #btnDownloadPdf.mb-dl { padding: 14px 24px !important; font-size: 16px !important; background: #ff7800 !important; border-color: #ff7800 !important; color: #fff !important; }
body.pv-gen .gen .sidebar #btnDownloadPdf.mb-dl:hover { background: #e06a00 !important; border-color: #e06a00 !important; color: #fff !important; }
body.pv-gen .gen .sidebar .mb-sets { background: #ece8ff !important; border-color: #ece8ff !important; color: var(--violet-d) !important; }
body.pv-gen .gen .sidebar .mb-sets:hover { background: #ded7ff !important; border-color: #ded7ff !important; }
/* the menu Add to My Sets opens, above the button */
body.pv-gen .mb-setwrap { position: relative; }
body.pv-gen .mb-pop { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 200; background: #fff; border-radius: 22px; padding: 8px; box-shadow: 0 18px 48px rgba(36,18,67,.24), 0 2px 8px rgba(36,18,67,.08); text-align: left; font-family: 'DM Sans', sans-serif; }
body.pv-gen .mb-pop h4 { font: 600 16px/1.2 'Fredoka', sans-serif; color: var(--plum); margin: 0; padding: 8px 10px; }
body.pv-gen .mp-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; cursor: pointer; font: 700 14px 'DM Sans', sans-serif; color: var(--plum); transition: background .12s; }
body.pv-gen .mp-row:hover { background: var(--bg); }
body.pv-gen .mp-row .mp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pv-gen .mp-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ff7800; color: #fff; }
body.pv-gen .mp-ic svg { width: 16px; height: 16px; }
body.pv-gen .mp-n { flex: none; margin-left: auto; font: 700 11.5px 'DM Sans', sans-serif; color: var(--violet-d); background: #ece8ff; border-radius: 999px; padding: 3px 9px; }
body.pv-gen .mp-sep { height: 1px; background: var(--line); margin: 6px 10px; }
body.pv-gen .mp-new { color: var(--violet); } body.pv-gen .mp-new .mp-ic { background: #ece8ff; color: var(--violet); }
body.pv-gen .mp-form { display: flex; gap: 8px; padding: 6px; }
body.pv-gen .gen .sidebar .mp-form input { flex: 1; min-width: 0; width: auto; box-sizing: border-box; border: 2px solid var(--line); border-radius: 999px; padding: 9px 14px; font: 600 14px 'DM Sans', sans-serif; color: var(--ink); outline: none; }
body.pv-gen .gen .sidebar .mp-form input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(99,75,245,.15); }
body.pv-gen .gen .sidebar .mp-form button, body.pv-gen .mp-pop-go { width: auto !important; border: 0 !important; border-radius: 999px !important; background: var(--orange) !important; color: var(--plum) !important; font: 700 14px 'DM Sans', sans-serif !important; padding: 9px 18px !important; cursor: pointer; text-decoration: none; }
body.pv-gen .gen .sidebar .mp-form button:hover, body.pv-gen .mp-pop-go:hover { background: var(--orange-d) !important; }
body.pv-gen #favNewPackBtn, body.pv-gen #favNewPackInput { position: relative; margin-top: 13px; }
body.pv-gen #favNewPackBtn::before, body.pv-gen #favNewPackInput::before { content: ''; position: absolute; left: 10px; right: 10px; top: -7px; height: 1px; background: var(--line); }
body.pv-gen .mp-msg { padding: 6px 12px 12px; font: 500 13.5px/1.5 'DM Sans', sans-serif; color: var(--muted); text-align: center; }
body.pv-gen .mp-msg .mp-pop-go { display: block; margin: 12px 0 10px; padding: 11px 18px !important; text-align: center; }
body.pv-gen .mp-msg .mp-reg { font: 700 13.5px 'DM Sans', sans-serif; color: var(--violet); text-decoration: none; }
body.pv-gen .mp-msg .mp-reg:hover { text-decoration: underline; }
body.pv-gen .mb-toast { position: fixed; left: 50%; bottom: 26px; z-index: 500; transform: translate(-50%, 90px); background: var(--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; }
body.pv-gen .mb-toast.on { transform: translate(-50%, 0); }
body.pv-gen .mb-toast b { margin-right: 6px; color: #7be0a5; } body.pv-gen .mb-toast b.no { color: #ff9db8; }
@media print { body.pv-gen .mb-gen, body.pv-gen .mb-line, body.pv-gen .mb-actions, body.pv-gen .mb-toast { display: none !important; } }