/* The Suggest an Idea page in the purple theme (Blake's picks of 2026-10-07: one card, and a
   thank-you that says where to go next). Loaded by the purple skin on /suggest/ only, and by the
   mockup's suggest page. The page's own markup and styles are pages/suggest.php; js/purple-suggest.js
   adds the kinds' pictures (css/purple-kinds.css) and rebuilds the thank-you. */
body.page-suggest .sg-page { background: #f8f2e9; padding: 44px 20px 72px; font-family: 'DM Sans', sans-serif; }
body.page-suggest .sg-card { max-width: 620px; border: 0; border-radius: 28px; padding: 36px 36px 32px; box-shadow: 0 10px 34px rgba(52,30,96,.08); }
body.page-suggest .sg-card h1 { font: 600 34px/1.1 'Fredoka', sans-serif; color: #341e60; letter-spacing: 0; margin: 0 0 8px; }
body.page-suggest .sg-sub { font: 400 15.5px/1.55 'DM Sans', sans-serif; color: #6b6485; margin-bottom: 26px; }
body.page-suggest .sg-field { margin-bottom: 22px; }
body.page-suggest .sg-field > label, body.page-suggest .sg-field legend { font: 600 16px 'Fredoka', sans-serif; color: #341e60; margin-bottom: 9px; }
body.page-suggest .sg-optional { font: 500 13px 'DM Sans', sans-serif; color: #9a93b0; }
body.page-suggest .sg-field textarea, body.page-suggest .sg-field input[type="email"], body.page-suggest .sg-field select { border: 2px solid #e6dff2; border-radius: 16px; padding: 13px 16px; font: 500 15.5px/1.5 'DM Sans', sans-serif; color: #2a1b4d; }
body.page-suggest .sg-field select { padding-right: 42px; }
body.page-suggest .sg-field textarea::placeholder { color: #a9a2bd; }
body.page-suggest .sg-field textarea:focus, body.page-suggest .sg-field input:focus, body.page-suggest .sg-field select:focus { border-color: #634bf5; box-shadow: 0 0 0 3px rgba(99,75,245,.15); }
body.page-suggest .sg-hint { font-size: 13px; color: #8a83a0; }
body.page-suggest .sg-page-ref { background: #f3eef9; border: 0; border-radius: 14px; padding: 11px 14px; color: #6b6485; }
body.page-suggest .sg-page-ref code { color: #341e60; font-family: 'DM Sans', sans-serif; }
body.page-suggest .sg-msg { border-radius: 14px; }
body.page-suggest .sg-btn { border-radius: 999px; padding: 15px 20px; background: #ff9500; color: #341e60; font: 700 16px 'DM Sans', sans-serif; }
body.page-suggest .sg-btn:hover { background: #e07f00; }
body.page-suggest .sg-note { color: #8a83a0; font-size: 13px; }

/* "What is it about?": each choice carries a picture in a circle. A worksheet idea and a generator or
   tool idea are kinds (violet printer, orange sliders); the other two are plain plum. */
body.page-suggest .sg-kinds { gap: 10px; }
body.page-suggest .sg-kind span:not(.kd-hic) { border: 2px solid #e6dff2; border-radius: 18px; padding: 10px 14px 10px 10px; gap: 11px; background: #fff; font: 700 14px/1.25 'DM Sans', sans-serif; color: #341e60; }
body.page-suggest .sg-kind .sg-plain { --c: #341e60; --soft: #f3eef9; }
body.page-suggest .sg-kind .kd-hic, body.page-suggest .sg-kind .kd-hic:hover { display: inline-grid; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; gap: 0; background: var(--c); color: #fff; }
body.page-suggest .sg-kind .kd-hic svg { width: 22px; height: 22px; color: #fff; }
body.page-suggest .sg-kind span:not(.kd-hic):hover { border-color: color-mix(in srgb, var(--c, #634bf5) 45%, #fff); background: #fff; }
body.page-suggest .sg-kind input:checked + span:not(.kd-hic), body.page-suggest .sg-kind input:checked + span:not(.kd-hic):hover { border-color: var(--c, #634bf5); background: var(--soft, #f6f3ff); color: #341e60; }
body.page-suggest .sg-kind input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #634bf5) 28%, #fff); }

/* The thank-you */
body.page-suggest .sg-done-purple { text-align: center; padding-top: 8px; }
body.page-suggest .sg-ring { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #ece8ff; color: #634bf5; animation: sgPop .5s cubic-bezier(.2,1.4,.4,1) both; }
body.page-suggest .sg-ring svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
body.page-suggest .sg-ring path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sgDraw .45s .3s ease-out forwards; }
body.page-suggest .sg-done-purple h2 { font: 600 34px/1.1 'Fredoka', sans-serif; color: #341e60; margin: 0 0 10px; }
body.page-suggest .sg-done-purple > p { font-size: 16px; line-height: 1.55; color: #6b6485; margin: 0 auto 26px; max-width: 420px; }
body.page-suggest .sg-next { text-align: left; padding-top: 22px; border-top: 1px solid #e6dff2; }
body.page-suggest .sg-next > b { display: block; font: 700 11.5px 'DM Sans', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #6b6485; margin-bottom: 12px; }
body.page-suggest .sg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* a tile is a small card of its kind: the kind's faint edge, its picture in its circle */
body.page-suggest .sg-card a.sg-tile { display: block; background: #fff; border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); border-radius: 20px; padding: 14px 14px 13px; font: 600 16px/1.2 'Fredoka', sans-serif; color: #341e60; text-decoration: none; box-shadow: 0 4px 14px rgba(52,30,96,.05); transition: transform .15s, border-color .15s, box-shadow .15s; }
body.page-suggest .sg-card a.sg-tile:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 8px 20px rgba(52,30,96,.09); color: #341e60; text-decoration: none; }
body.page-suggest .sg-tile .kd-hic { display: grid; margin-bottom: 10px; }
body.page-suggest .sg-tile small { display: block; margin-top: 3px; font: 500 12.5px/1.35 'DM Sans', sans-serif; color: #6b6485; }
body.page-suggest .sg-again { display: inline-block; margin-top: 18px; padding: 4px 8px; border: 0; background: none; font: 700 14.5px 'DM Sans', sans-serif; color: #634bf5; cursor: pointer; }
body.page-suggest .sg-again:hover { text-decoration: underline; }
@keyframes sgPop { from { transform: scale(.4); opacity: 0; } }
@keyframes sgDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { body.page-suggest .sg-ring, body.page-suggest .sg-ring path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 560px) {
  body.page-suggest .sg-page { padding: 24px 14px 56px; }
  body.page-suggest .sg-card { padding: 28px 20px 26px; }
  body.page-suggest .sg-tiles { grid-template-columns: 1fr; }
  body.page-suggest .sg-card a.sg-tile { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  body.page-suggest .sg-tile .kd-hic { grid-row: span 2; margin: 0; }
}