/* Guides (public/guides.js) on the shared tokens and ui- components. On screen they look like the
   rest of the portal; printed, they become a clean one or two page handout (no app bar, tab bar or
   buttons, two columns, light colors). The kids' guide is the playful one: an evening street at the
   top, drawn pictures and a color for every card, big type for little ones. Loaded from index.html. */

.guide { display: grid; gap: var(--space-5); }
.guide-head { display: grid; gap: 4px; }
.guide-head h1 { font-size: var(--text-2xl); }
.guide-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.guide-tools > .guide-head { flex: 1 1 240px; }
.guide-tools > .ui-seg { flex: 1 1 260px; }
.guide-print { flex: none; }
.guide-body { display: grid; gap: var(--space-4); }
.guide-card { display: grid; gap: var(--space-2); align-content: start; }
.guide-card h2 { font-size: var(--text-lg); margin: 0; }
.guide-text { display: grid; gap: var(--space-2); }
.guide-text ul, .guide-text ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.guide-part { display: grid; gap: var(--space-3); }
.guide-part-head h2 { font-size: var(--text-xl); }
.guide-foot { text-align: center; }

/* [safety-guide] "General guidance, not advice" at the top of the safety guide; two columns of
   drawn cards on wider screens. */
.guide-note { font-size: var(--text-sm); color: var(--ink-muted); border-left: 4px solid var(--accent); }
@media (min-width: 720px) {
  .guide-safety .guide-body { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- the kids' guide ---------- */

.guide-kids-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #243152; color: #F3F1EA; box-shadow: var(--shadow-2); }
.guide-scene-wrap { display: block; line-height: 0; }
.guide-scene { display: block; width: 100%; height: clamp(120px, 34vw, 190px); }
.guide-kids-words { padding: 14px 20px 20px; display: grid; gap: 6px; }
.guide-eyebrow { font: 700 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #F2A93B; }
.guide-kids-hero h1 { font-family: var(--font-hand); font-weight: 700; font-size: clamp(40px, 11vw, 60px); line-height: 1; color: #FFE3A3; letter-spacing: 0; }
.guide-kids-sub { color: #D6DAE8; }
/* Teens and grown-ups have no handwriting font; the shout stays big and friendly in the display face. */
:where([data-skin="teen"], [data-skin="grown"]) .guide-kids-hero h1 { font-family: var(--font-display); font-size: clamp(30px, 8vw, 44px); }

.guide-kids .guide-part-head {
  border-radius: var(--radius-md); padding: 12px 16px; display: grid; gap: 2px;
  background: color-mix(in srgb, var(--pc) 16%, var(--surface)); border: 2px solid color-mix(in srgb, var(--pc) 45%, transparent);
}
.guide-kids .guide-part-head h2 { color: color-mix(in srgb, var(--pc) 70%, var(--ink)); }
.guide-kids .guide-part-head p { color: var(--ink); opacity: 0.8; font-size: var(--text-sm); }
.guide-little { --pc: #F2A93B; }
.guide-big { --pc: #2F86C4; }

/* Colorful cards: a tinted background, a stripe of color and a drawn picture in a tile. */
.guide-card--art { --tone: #F2A93B; position: relative; overflow: hidden; background: color-mix(in srgb, var(--tone) 9%, var(--surface)); border-color: color-mix(in srgb, var(--tone) 35%, var(--line)); border-top: 6px solid var(--tone); }
.tone-amber { --tone: #F2A93B; }
.tone-blue { --tone: #2F86C4; }
.tone-green { --tone: #3F9661; }
.tone-pink { --tone: #E882B4; }
.tone-teal { --tone: #2B9A94; }
.tone-purple { --tone: #7B5DBE; }
.tone-coral { --tone: #E0654F; }
.tone-dusk { --tone: #243152; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tone-dusk { --tone: #7F97BA; } }
:root[data-theme="dark"] .tone-dusk { --tone: #7F97BA; }

.guide-card-head { display: flex; align-items: center; gap: 14px; }
.guide-art-tile {
  flex: none; width: 64px; height: 64px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone) 22%, #FFFFFF); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone) 40%, transparent);
}
.guide-art { width: 50px; height: 50px; display: block; }

.guide .try { margin-top: 6px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface); border: 2px dashed color-mix(in srgb, var(--tone) 60%, transparent); }
.guide .try .tag {
  display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: var(--radius-full); font: 800 0.85em var(--font-display);
  background: var(--accent); color: var(--accent-ink); transform: rotate(-2deg);
}

/* "5 things to try first": big numbered circles. */
.guide ol.five { list-style: none; padding: 0; counter-reset: five; gap: 10px; }
.guide ol.five li { counter-increment: five; position: relative; padding-left: 44px; min-height: 32px; }
.guide ol.five li::before {
  content: counter(five); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font: 800 17px var(--font-display); background: var(--tone); color: #FFFFFF;
}

.guide-bye { text-align: center; font: 800 24px/1.15 var(--font-display); color: color-mix(in srgb, var(--pc) 75%, var(--ink)); padding: 4px 0; }

/* Little ones: big friendly type, read aloud, short lines. */
.guide-little .guide-card { font-size: 1.2em; line-height: 1.45; }
.guide-little .guide-card h2 { font-size: 26px; }
.guide-little .guide-text { gap: 6px; }
.guide-little .guide-art-tile { width: 76px; height: 76px; border-radius: 22px; }
.guide-little .guide-art { width: 60px; height: 60px; }

/* Two columns of cards on wider screens. */
@media (min-width: 720px) {
  .guide-kids .guide-body { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Fireflies twinkle gently (never when someone asks for less motion). */
@media (prefers-reduced-motion: no-preference) {
  .guide .ff { animation: guide-twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .guide .ff.f2 { animation-delay: -1.1s; animation-duration: 2.6s; }
  .guide .ff.f3 { animation-delay: -2.2s; animation-duration: 3.8s; }
}
:where([data-motion="reduce"]) .guide .ff { animation: none; }
@keyframes guide-twinkle { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.25; transform: translateY(-2px); } }

/* ---------- printing: only when a guide is on screen ---------- */
@media print {
  @page { margin: 10mm; }
  :root:has(.guide) {
    color-scheme: light;
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-sunken: #F1F3EE; --ink: #111111; --ink-muted: #444A57; --line: #BFC6BA;
  }
  body:has(.guide) { background: #fff !important; color: #111; font-size: 10.5pt; line-height: 1.35; padding: 0 !important; }
  body:has(.guide) :is(#top, #tabs, #offline, .ui-toasts, #boot, .guide-actions, .guide-print, .help) { display: none !important; }
  body:has(.guide) main { max-width: none; padding: 0; display: block; }
  .guide { display: block; }
  .guide-tools { display: block; }
  .guide-head { padding: 0 0 5pt; margin-bottom: 8pt; border-bottom: 2pt solid #F2A93B; }
  .guide-head h1 { font-size: 20pt; }
  .guide-body { display: block; columns: 2; column-gap: 7mm; }
  .guide .guide-card { display: block; box-shadow: none; border: 0.6pt solid #BFC6BA; border-radius: 6pt; padding: 5pt 7pt; margin: 0 0 5pt; break-inside: avoid; }
  .guide .guide-card h2 { font-size: 11.5pt; margin-bottom: 2pt; }
  .guide-text { gap: 3pt; }
  .guide-text ul, .guide-text ol { padding-left: 14pt; gap: 1pt; }
  .guide-part + .guide-part { break-before: page; margin-top: 0; }
  .guide-part-head { margin-bottom: 6pt; }
  .guide-part-head h2 { font-size: 16pt; }
  .guide-foot { margin-top: 6pt; font-size: 8.5pt; }
  .guide-note { display: block; font-size: 8.5pt; padding: 3pt 6pt; margin: 0 0 6pt; box-shadow: none; border: 0.6pt solid #BFC6BA; border-left: 3pt solid #F2A93B; } /* [safety-guide] */
  .guide-safety .guide-card { font-size: 9.6pt; } /* [safety-guide] */
  .guide-grown-up .guide-card { font-size: 10pt; } /* fits on one sheet */
  .guide a { color: inherit; text-decoration: none; }

  /* Kids: keep the colors and pictures (they are the fun part), in two columns. */
  .guide-kids { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .guide-kids .guide-kids-hero { border-radius: 8pt; overflow: hidden; margin-bottom: 6pt; display: flex; align-items: stretch; box-shadow: none; }
  .guide-kids .guide-scene-wrap { width: 46%; flex: none; }
  .guide-kids .guide-scene { height: 100%; min-height: 70pt; }
  .guide-kids .guide-kids-words { padding: 6pt 10pt; gap: 2pt; align-content: center; }
  .guide-kids .guide-kids-hero h1 { font-size: 26pt; }
  .guide-eyebrow { font-size: 8pt; }
  .guide-kids .guide-part-head { border-radius: 6pt; padding: 4pt 8pt; margin-bottom: 6pt; border-width: 1pt; }
  .guide-kids .guide-part-head h2 { font-size: 15pt; }
  .guide-kids .guide-part-head p { font-size: 9pt; }
  .guide-kids .guide-body { columns: 2; column-gap: 5mm; }
  .guide-kids .guide-card--art { border: 0.8pt solid color-mix(in srgb, var(--tone) 45%, #FFFFFF); border-top: 3pt solid var(--tone); background: color-mix(in srgb, var(--tone) 7%, #FFFFFF); }
  .guide-card-head { gap: 6pt; margin-bottom: 3pt; }
  .guide-art-tile, .guide-little .guide-art-tile { width: 28pt; height: 28pt; border-radius: 7pt; }
  .guide-art, .guide-little .guide-art { width: 22pt; height: 22pt; }
  .guide .try { margin-top: 3pt; padding: 3pt 5pt; border-radius: 5pt; border-width: 1pt; }
  .guide ol.five li { padding-left: 20pt; min-height: 0; }
  .guide ol.five li::before { width: 14pt; height: 14pt; font-size: 8.5pt; top: 1pt; }
  .guide ol.five { gap: 2pt; padding-left: 0; }
  .guide-little .guide-card { font-size: 14pt; line-height: 1.3; padding: 6pt 8pt; margin-bottom: 7pt; }
  .guide-little .guide-card h2 { font-size: 15.5pt; }
  .guide-big .guide-card { font-size: 10.4pt; line-height: 1.3; padding: 5pt 7pt; margin-bottom: 5pt; }
  .guide-big .guide-card h2 { font-size: 11.5pt; }
  .guide-bye { font-size: 14pt; padding: 0; margin-top: 2pt; }
  .guide .ff { animation: none !important; }
}

/* ---------- [launch5] the welcome sheet for a new family (public/welcome.js): one printed page ---------- */

.guide-welcome-sheet { display: grid; gap: var(--space-4); }
.guide-welcome-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.guide-welcome-logo { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.guide-welcome-lead { margin-top: 4px; }
.guide-welcome-at { padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); overflow-wrap: anywhere; }
.guide-welcome-send { display: grid; gap: var(--space-3); }
.guide-welcome-message { width: 100%; min-height: 12rem; font: inherit; line-height: 1.4; resize: vertical; }
@media (min-width: 720px) { .guide-welcome .guide-body { grid-template-columns: 1fr 1fr; } }

@media print {
  .guide-welcome { font-size: 10pt; }
  .guide-welcome-sheet { display: block; }
  .guide-welcome-head { display: flex; gap: 8pt; align-items: center; border-bottom: 2pt solid #F2A93B; padding-bottom: 5pt; margin-bottom: 6pt; }
  .guide-welcome-logo { width: 40pt; height: 40pt; border-radius: 9pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .guide-welcome .guide-welcome-head h1 { font-size: 20pt; }
  .guide-welcome-lead { font-size: 10.5pt; margin: 2pt 0 0; }
  .guide-welcome-at { background: none; border: 1pt solid #F2A93B; border-radius: 6pt; padding: 4pt 8pt; margin: 0 0 8pt; font-size: 12pt; }
  .guide-welcome .guide-card { font-size: 10.6pt; margin-bottom: 7pt; }
  .guide-welcome .guide-body { margin-top: 8pt; }
  .guide-welcome-send { display: none !important; }
}