/* LandformMap (salt dough map module) — pairs with styles.css. 390px-first, tablet up to 760px, printable. */
.lf-app { max-width: 760px; padding-bottom: calc(48px + var(--safe-b)); }
.lf-top { display: flex; align-items: center; gap: 10px; }
.lf-top .back-link { margin: 0; }
.lf-saved { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--teddy-ink); opacity: 0; transition: opacity .3s; }
.lf-saved.on { opacity: 1; }
.lf-top .ml-mute { min-width: 44px; min-height: 44px; border-radius: 14px; background: rgba(20, 31, 69, .9); border: 1px solid var(--line); font-size: 20px; }
.lf-hero { margin: 4px 0 12px; }
.lf-hero h1 { font-size: clamp(30px, 8.4vw, 44px); }
.lf-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; }

.lf-nav {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-16px - var(--safe-l)) 14px; padding: 8px 16px; background: rgba(11, 22, 56, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.lf-nav::-webkit-scrollbar { display: none; }
.lf-tab {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 31, 69, .9); border: 1px solid var(--line); font-weight: 800; font-size: 14px; color: var(--ink-soft); white-space: nowrap;
}
.lf-tab small { font-size: 11px; opacity: .7; }
.lf-tab.on { background: linear-gradient(135deg, #34d399, #22d3ee); color: #062016; border-color: transparent; }
.lf-tab.done:not(.on) { border-color: rgba(52, 211, 153, .7); color: var(--teddy-ink); }

.lf-sec { display: none; }
.lf-sec.on { display: block; animation: lf-in .25s ease; }
@keyframes lf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lf-h { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 4px 0 10px; letter-spacing: -.01em; }
.lf-h3 { font-size: 19px; margin: 20px 0 8px; }
.lf-p { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.lf-small { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.lf-small.warn { color: #fde68a; }
.lf-cap { margin: 8px 4px 2px; font-size: 13px; color: #475569; text-align: center; }
.lf-hint { font-size: 15px; color: #fde68a; margin: 10px 0; }

.lf-say {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; vertical-align: middle; margin-left: 2px;
  background: rgba(34, 211, 238, .16); border: 1px solid rgba(34, 211, 238, .45); font-size: 16px;
}
.lf-say.talking { background: #22d3ee; animation: lf-pulse 1s ease-in-out infinite; }
.lf-paper .lf-say { background: #e0f2fe; border-color: #7dd3fc; }

.lf-paper { background: #fbf8f1; color: #1f2937; border-radius: 18px; padding: 10px; box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, .06); }
.lf-paper.sm { padding: 6px; margin: 4px 0 10px; }
.lf-paper.art { padding: 8px; margin: 8px 0 10px; }
.lf-map, .lf-art { display: block; width: 100%; height: auto; }
.lf-map text, .lf-art text { font-family: var(--font); }
.lf-cl { font-size: 17px; font-weight: 800; fill: #111827; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.lf-cl.home { fill: #15803d; }
.lf-star { font-size: 24px; fill: #dc2626; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.lf-star.sm { font-size: 16px; }
.lf-rl { font-size: 19px; font-weight: 900; fill: #111827; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; stroke-linejoin: round; }
.lf-rl.big { font-size: 24px; }
.lf-rs { font-size: 14px; font-weight: 700; fill: #374151; paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 3px; }
.lf-nb { font-size: 13px; font-weight: 800; letter-spacing: .04em; fill: #64748b; }
.lf-cn { font-size: 15px; font-weight: 900; fill: #111827; }
.lf-st { font-size: 13px; font-weight: 700; fill: #111827; }
.lf-tick { font-size: 15px; font-weight: 900; fill: #dc2626; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.lf-lm { font-size: 18px; fill: #7c2d12; }
.lf-title { font-family: var(--serif); font-size: 32px; font-weight: 700; fill: #111827; }
.lf-kt { font-size: 14px; font-weight: 900; letter-spacing: .1em; fill: #111827; }
.lf-kx { font-size: 13px; font-weight: 700; fill: #111827; }
.lf-zone.tap { cursor: pointer; }
.lf-zone.tap:hover { fill-opacity: .7; }
.a-b { font-size: 16px; font-weight: 900; fill: #111827; }
.a-s { font-size: 13px; font-weight: 700; fill: #374151; }
.a-s.dk { fill: #5b3d1e; }
.a-s.red { fill: #dc2626; }
.a-n { font-size: 13px; font-weight: 900; fill: #78350f; }
.a-plus { font-size: 30px; font-weight: 900; fill: #64748b; }

.lf-brushes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 10px; }
.lf-brush { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 6px 4px; border-radius: 16px; font-weight: 800; font-size: 13px; background: rgba(20, 31, 69, .9); border: 2px solid var(--line); line-height: 1.15; }
.lf-brush span { font-size: 24px; }
.lf-brush[aria-pressed="true"] { border-color: var(--c, #e2e8f0); background: color-mix(in srgb, var(--c, #64748b) 28%, #141f45); box-shadow: 0 0 18px color-mix(in srgb, var(--c, #64748b) 45%, transparent); }
.lf-why { display: grid; gap: 10px; margin: 12px 0; }
.lf-field { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.lf-field textarea, .lf-days input {
  width: 100%; font: inherit; font-weight: 500; font-size: 16px; color: var(--ink); background: rgba(20, 31, 69, .9);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; resize: vertical;
}
.lf-field textarea[readonly] { opacity: .8; }
.lf-lock { padding: 10px 14px; border-radius: 14px; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .4); font-weight: 700; }

.lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 16px; border-radius: 16px; font-weight: 800; font-size: 15px; background: rgba(20, 31, 69, .9); border: 1px solid rgba(34, 211, 238, .5); margin: 6px 6px 6px 0; }
.lf-btn.go { background: linear-gradient(135deg, #34d399, #22d3ee); color: #062016; border-color: transparent; width: 100%; font-size: 17px; }
.lf-btn.ghost { border-color: var(--line); color: var(--ink-soft); }
.lf-print-row { display: flex; flex-wrap: wrap; }

.lf-cards { display: grid; gap: 10px; margin-top: 14px; }
.lf-card { border-radius: 20px; background: var(--bg-elev); border: 1px solid var(--line); border-left: 8px solid var(--c); overflow: hidden; }
.lf-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; align-items: center; padding: 14px 16px; min-height: 64px; }
.lf-card summary::-webkit-details-marker { display: none; }
.lf-card summary b { font-size: 19px; }
.lf-card summary small { grid-column: 2; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.lf-card summary .lf-tick { grid-row: 1 / span 2; grid-column: 3; font-style: normal; color: var(--teddy-ink); font-weight: 900; font-size: 20px; }
.lf-dot { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 6px; background: var(--c); }
.lf-card[open] summary { border-bottom: 1px solid var(--line); }
.lf-card-body { padding: 12px 16px 16px; font-size: 16px; line-height: 1.5; }
.lf-card-body h4 { margin: 14px 0 4px; font-size: 16px; color: var(--teddy-ink); }
.lf-card-body ul, .lf-card-body ol { margin: 4px 0; padding-left: 1.3em; display: grid; gap: 4px; }
.lf-kid { font-size: 17px; font-weight: 600; }
.lf-fun { padding: 10px 12px; border-radius: 14px; background: rgba(253, 224, 71, .1); border: 1px solid rgba(253, 224, 71, .3); }
.lf-buildnote { padding: 10px 12px; border-radius: 14px; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); }

.lf-build { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 16px; }
.lf-step { padding: 14px; border-radius: 22px; background: var(--bg-elev); border: 1px solid var(--line); }
.lf-step.done { border-color: rgba(52, 211, 153, .6); }
.lf-step-head { display: flex; align-items: center; gap: 10px; }
.lf-step-head h3 { margin: 0; font-size: 20px; flex: 1; }
.lf-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, #34d399, #22d3ee); color: #062016; }
.lf-step.done .lf-num { background: #34d399; }
.lf-bul { margin: 4px 0; padding-left: 1.25em; display: grid; gap: 6px; font-size: 16px; line-height: 1.45; }
.lf-bul b { color: #fde68a; }
.lf-think { margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: rgba(232, 121, 249, .1); border: 1px solid rgba(232, 121, 249, .35); font-size: 15px; }
.done-btn { margin-top: 8px; }
.lf-step.done .done-btn { background: rgba(52, 211, 153, .2); border-color: rgba(52, 211, 153, .7); color: var(--teddy-ink); }
.lf-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 10px 0; font-size: 14px; }
.lf-key span { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 7px; }
.lf-key i { width: 22px; height: 22px; border-radius: 5px; flex: none; border: 1px solid rgba(255, 255, 255, .4); }
.lf-key i.riv { background: #0284c7; height: 6px; border-radius: 3px; }
.lf-key small { color: var(--ink-soft); grid-column: 2; margin-top: -2px; }

.lf-box { margin: 12px 0; padding: 12px 14px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.lf-box h4 { margin: 0 0 6px; font-size: 17px; color: var(--teddy-ink); }
.lf-box p { margin: 4px 0; }
.lf-box ul, .lf-box ol { margin: 4px 0; padding-left: 1.3em; display: grid; gap: 6px; }
.lf-fair { font-weight: 800; color: #fde68a; }
.lf-test { margin: 14px 0; padding: 14px; border-radius: 22px; background: rgba(20, 31, 69, .9); border: 1px solid rgba(232, 121, 249, .4); font-size: 16px; }
.lf-test h3 { margin: 0 0 6px; font-size: 19px; }
.lf-test b { color: #fde68a; }
.lf-q { font-size: 17px; margin: 10px 0 6px; }
.lf-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.lf-opt { min-height: 48px; padding: 8px 14px; border-radius: 14px; font-weight: 800; font-size: 16px; background: rgba(11, 22, 56, .9); border: 2px solid var(--line); }
.lf-opt.on { border-color: #e879f9; background: rgba(232, 121, 249, .22); }
.lf-opt.right { border-color: #34d399; background: rgba(52, 211, 153, .3); }
.lf-opt.wrong { border-color: #fb7185; animation: lf-shake .4s ease; }
.lf-days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.lf-days label { display: grid; gap: 2px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.lf-days input { padding: 8px 10px; font-size: 15px; }

.lf-trick { padding: 10px 12px; border-radius: 14px; background: rgba(253, 224, 71, .1); border: 1px solid rgba(253, 224, 71, .35); font-weight: 700; }
.lf-mq { margin: 14px 0; padding: 14px; border-radius: 22px; background: var(--bg-elev); border: 1px solid var(--line); font-size: 16px; }
.lf-mq h3 { margin: 0 0 6px; font-size: 19px; }
.lf-mres { padding: 10px 12px; border-radius: 14px; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .4); }

.lf-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-compare figure { margin: 0; }
.lf-compare figcaption { text-align: center; font-weight: 800; font-size: 14px; }
.lf-score { font-size: 18px; text-align: center; }
.lf-score b { color: #fde047; font-size: 1.3em; }
.lf-cmp { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.lf-cmp li { padding: 8px 12px; border-radius: 12px; background: rgba(20, 31, 69, .9); border-left: 5px solid #fb923c; }
.lf-cmp li.ok { border-left-color: #34d399; }
.lf-said { font-size: 18px; margin: 6px 0 10px; }
.lf-said b { color: #fde047; }
.lf-starters { display: grid; gap: 8px; }
.lf-starter { text-align: left; min-height: 52px; padding: 10px 14px; border-radius: 16px; font-size: 17px; font-weight: 700; background: rgba(20, 31, 69, .9); border: 2px solid var(--line); }
.lf-starter.on { border-color: #34d399; background: rgba(52, 211, 153, .18); }
.lf-starter.on::after { content: " ⭐"; }
.lf-quiz { display: grid; gap: 10px; }
.lf-qa { padding: 12px 14px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--line); }
.lf-qq { margin: 0 0 8px; font-weight: 800; font-size: 17px; }
.lf-reveal { min-height: 44px; padding: 6px 14px; border-radius: 12px; font-weight: 800; background: rgba(34, 211, 238, .14); border: 1px solid rgba(34, 211, 238, .45); }
.lf-qans { display: none; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(52, 211, 153, .14); font-size: 16px; }
.lf-qa.open .lf-qans { display: block; }

.lf-note { padding: 10px 14px; border-radius: 14px; background: rgba(253, 230, 138, .12); border: 1px solid rgba(253, 230, 138, .35); color: #fde68a; font-weight: 600; font-size: 14px; }
.lf-meter { height: 14px; border-radius: 999px; background: rgba(20, 31, 69, .9); border: 1px solid var(--line); overflow: hidden; margin-top: 10px; }
.lf-meter span { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #22d3ee); transition: width .5s; }
.lf-checks { border: 1px solid var(--line); border-radius: 18px; margin: 12px 0; padding: 8px 12px 10px; background: var(--bg-elev); }
.lf-checks.opt { opacity: .9; border-style: dashed; }
.lf-checks legend { font-weight: 900; padding: 0 6px; color: var(--teddy-ink); }
.lf-checks label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 6px 0; font-size: 16px; line-height: 1.35; cursor: pointer; }
.lf-checks input { flex: none; width: 26px; height: 26px; accent-color: #34d399; margin: 0; }
.lf-checks input:checked + span { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(52, 211, 153, .7); }
.lf-sessions li b { display: block; color: var(--ink); }

.lf-next { margin: 22px 0 0; text-align: center; }
.lf-next .btn-primary { width: 100%; }
.lf-print-outline { display: none; }

@media (min-width: 700px) {
  .lf-cards { grid-template-columns: 1fr 1fr; align-items: start; }
  .lf-days { grid-template-columns: repeat(4, 1fr); }
  .lf-build .lf-paper.art { max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) { .lf-sec.on, .lf-say.talking { animation: none; } }

/* ---------- print ---------- */
@page outline { size: letter landscape; margin: 0.35in; }
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  .app::before, .no-print, .lf-nav, .lf-top, .lf-next, .lf-say, .space-bg, .ml-sound-tip { display: none !important; }
  .app { max-width: none; padding: 0; min-height: 0; }
  .lf-paper { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  .lf-hero h1 { color: #111; }
  .lf-sub, .kicker { color: #444 !important; }
  /* default (Ctrl-P anywhere, or "Print steps + checklist"): build steps + checklist + grown-up plan */
  .lf-sec { display: none !important; animation: none !important; }
  #lf-build, #lf-check, #lf-grownups, #lf-build p, #lf-build li, #lf-check span, #lf-grownups li, #lf-grownups p, #lf-grownups td { color: #111 !important; opacity: 1 !important; }
  body:not([data-print="outline"]) #lf-build, body:not([data-print="outline"]) #lf-check, body:not([data-print="outline"]) #lf-grownups { display: block !important; }
  #lf-check, #lf-grownups { break-before: page; }
  .lf-step, .lf-box, .lf-checks, .lf-test { background: #fff !important; border: 1px solid #bbb !important; color: #111 !important; break-inside: avoid; }
  .lf-step { padding: 8px 12px; }
  .lf-build { gap: 10px; }
  .lf-build .lf-paper.art { max-width: 4.2in; margin: 4px 0; }
  .lf-bul b, .lf-box h4, .lf-checks legend, .lf-card-body h4 { color: #111 !important; }
  .lf-think { background: #f6f0fa !important; border-color: #d8b4fe !important; color: #111; }
  .lf-note { color: #111; background: #fffbe6; border-color: #e5c84f; }
  .lf-key small, .lf-small, .lf-cap { color: #444 !important; }
  .lf-checks input { appearance: none; -webkit-appearance: none; border: 2px solid #111; border-radius: 4px; width: 18px; height: 18px; }
  .lf-checks input:checked + span { color: #111; text-decoration: none; }
  .lf-meter, #lf-check .lf-cap, #lf-check .lf-btn, #lf-grownups .lf-btn { display: none !important; }
  .lf-print-row { display: none; }
  /* outline print */
  body[data-print="outline"] .lf-hero, body[data-print="outline"] .lf-main { display: none !important; }
  body[data-print="outline"] .lf-print-outline { display: block; page: outline; }
  .lf-print-outline .lf-map { display: block; width: 100%; max-height: 7.35in; margin: 0 auto; }
  .lf-print-outline p { font-size: 11px; margin: 4px 0 0; }
}
@keyframes lf-pulse { 50% { transform: scale(1.1); } }
@keyframes lf-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }