/* Growing up (version 1.2): All About Me, My Day, My Town */
.gr-wrap { display: grid; gap: calc(14px * var(--k)); }
.gr-me { width: min(60%, calc(190px * var(--k))); margin: 0 auto; }
.gr-range { width: 100%; accent-color: var(--gold); height: 34px; margin: 6px 0; }
.gr-grad { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 18%, transparent); border: 2px solid var(--gold); text-align: left; }
.gr-qs { display: grid; gap: calc(12px * var(--k)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.gr-q h3 { margin: 0 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .gr-q h3 .e { font-size: 1.3em; }
.gr-note { margin: 12px 0 0; }
.gr-say { display: flex; gap: 12px; align-items: flex-start; } .gr-say .kbubble { flex: 1; }
.gr-buddy { width: calc(64px * var(--k)); flex: none; display: block; }
.gr-moods { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(92px * var(--k)), 1fr)); gap: 10px; margin-top: 14px; }
.gr-mood { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; border: 2px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; min-height: 86px; }
.gr-mood .e { font-size: calc(36px * var(--k)); line-height: 1; } .gr-mood:hover { border-color: var(--line2); transform: translateY(-2px); }
.gr-mood.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); } .gr-mood:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gr-chips { margin-top: 14px; }
/* ages 4–6: what they liked (or did not like) is picked from a few big picture buttons */
.gr-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gr-picks .gr-mood { min-height: calc(96px * var(--k)); font-size: calc(15px * var(--k)); line-height: 1.15; text-align: center; } .gr-picks .gr-mood .e { font-size: calc(44px * var(--k)); }
.gr-mood.on { background: color-mix(in srgb, var(--gold) 22%, var(--panel2)); }
@media (max-width: 559px) { .gr-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gr-sum { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); }
.gr-strip { display: flex; gap: 8px; flex-wrap: wrap; } .gr-strip span { display: grid; justify-items: center; min-width: 40px; } .gr-strip i { font-style: normal; font-size: 26px; } .gr-strip small { color: var(--muted); }
.gr-homecard { margin-bottom: calc(14px * var(--k)); }
.gr-place .kbtn { flex: none; }
@media (max-width: 560px) { .gr-place { flex-wrap: wrap; } .gr-place .main { flex-basis: 60%; } }
body.calm .gr-mood:hover { transform: none; }