/* Learn Vedic Math: the landing page and the pages for grown-ups (site/). Tokens only, both color schemes.
   The game has its own styles (math.css). */
.md-brand svg.lv-mark { width: 48px; height: 32px; } /* the Nikhilam Family brand mark is 3:2, not square */
.lv-title { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 16em; text-wrap: balance; margin-top: var(--space-2) !important; }
.lv-hero-in { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; }
/* The landing hero: the Nikhilam Family (site/index.html). Same width rules Bolt had, so the layout is unchanged; the
   inline SVG takes its height from its viewBox, so nothing shifts while it loads. Gentle motion, off with reduced
   motion, Pause motion (html.motion-paused) and Calm (html.calm, applied before paint from vm.calm). */
.lv-family { width: clamp(120px, 22vw, 220px); height: auto; overflow: visible; }
.lv-family .lv-f-one, .lv-family .lv-f-zero, .lv-family .lv-f-nine { transform-box: fill-box; transform-origin: 50% 100%; }
.lv-family .lv-f-one { animation: lv-sway 6s ease-in-out infinite; }
.lv-family .lv-f-zero { animation: lv-hop 3s ease-in-out infinite; }
.lv-family .lv-f-nine { animation: lv-nod 4s ease-in-out infinite; } /* in step with the button's glow: a nod toward Start learning */
.lv-family .lv-f-shadow--zero { transform-box: fill-box; transform-origin: center; animation: lv-shrink 3s ease-in-out infinite; }
.lv-family .lv-spark { transform-box: fill-box; transform-origin: center; animation: lv-twinkle 3.2s ease-in-out infinite; }
.lv-family .lv-spark--b { animation-delay: -.8s; } .lv-family .lv-spark--c { animation-delay: -1.6s; } .lv-family .lv-spark--d { animation-delay: -2.4s; }
@keyframes lv-sway { 50% { transform: rotate(-2.5deg); } }
@keyframes lv-nod { 0%, 45%, 100% { transform: none; } 15% { transform: rotate(-7deg); } 28% { transform: rotate(2deg); } }
@keyframes lv-hop { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-5px); } }
@keyframes lv-shrink { 0%, 55%, 100% { transform: none; } 25% { transform: scale(.7); } }
@keyframes lv-twinkle { 50% { opacity: .3; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .lv-family * { animation: none !important; } }
html.motion-paused .lv-family *, html.calm .lv-family * { animation: none !important; }
@media (max-width: 700px) { .lv-hero-in { grid-template-columns: 1fr; } .lv-family { order: -1; width: 120px; } }
.lv-sub { margin: var(--space-3) 0 0; font-size: clamp(1.1rem, 2.6vw, 1.4rem); font-weight: 700; color: var(--ink-muted); }
.lv-cta-row { margin: var(--space-6) 0 0; }
/* Start learning: the one big call to action. Coral fill with --on-accent text, a soft ring that glows out every four
   seconds and an arrow that nudges with it (transform and opacity only). Hover or focus makes the family hop. */
.lv-play { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2-5); min-height: 64px; padding: 0 var(--space-7); border: 2px solid var(--primary-border); border-radius: var(--radius-pill); background: var(--primary-bg); color: var(--on-accent); font: 800 clamp(1.25rem, 3vw, 1.45rem)/1 var(--font-sans); text-decoration: none; box-shadow: var(--shadow-ledge); }
.lv-play:hover { box-shadow: var(--shadow-ledge-hover); transform: translateY(-1px); }
.lv-play:active { box-shadow: var(--shadow-ledge-press); transform: translateY(2px) scale(.97); }
.lv-play:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lv-play::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--coral); opacity: 0; pointer-events: none; animation: lv-ring 4s ease-out infinite; }
.lv-play-go { width: 1.1em; height: 1.1em; animation: lv-go 4s ease-in-out infinite; }
@keyframes lv-ring { 0% { opacity: .75; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(1.1, 1.45); } }
@keyframes lv-go { 0%, 30%, 100% { transform: none; } 12% { transform: translateX(5px); } }
.lv-hero-in:has(.lv-play:hover, .lv-play:focus-visible) :is(.lv-f-one, .lv-f-zero, .lv-f-nine) { animation: lv-cheer .5s ease-out 2; }
.lv-hero-in:has(.lv-play:hover, .lv-play:focus-visible) .lv-f-zero { animation-delay: .08s; }
.lv-hero-in:has(.lv-play:hover, .lv-play:focus-visible) .lv-f-nine { animation-delay: .16s; }
@keyframes lv-cheer { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .lv-play::after, .lv-play-go { animation: none; } .lv-play:hover, .lv-play:active { transform: none; } }
html.motion-paused .lv-play::after, html.calm .lv-play::after, html.motion-paused .lv-play-go, html.calm .lv-play-go { animation: none; }
html.motion-paused .lv-play:hover, html.calm .lv-play:hover, html.motion-paused .lv-play:active, html.calm .lv-play:active { transform: none; }
/* The Mode cards (openspec change landing-modes-and-return): each card is one link into the game in its Mode, with its
   call to action as a pill in the Mode's colour at its foot. Hover lifts it, press drops it and keyboard focus rings
   it, like Start learning; still under reduced motion, Pause motion and Calm. Welcome back marks the Player's Mode. */
.lv-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4-5); }
@media (max-width: 800px) { .lv-modes { grid-template-columns: 1fr; } }
.lv-modes > li { display: flex; min-width: 0; }
.lv-mode { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 2px solid var(--edge); border-top-width: 10px; border-radius: var(--radius-lg); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.lv-mode--sun { border-top-color: var(--sun); } .lv-mode--sky { border-top-color: var(--sky); } .lv-mode--plum { border-top-color: var(--plum); }
.lv-mode:hover { box-shadow: var(--shadow-ledge-hover); transform: translateY(-2px); }
.lv-mode:active { box-shadow: var(--shadow-ledge-press); transform: translateY(2px) scale(.98); }
.lv-mode:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lv-mode-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.lv-mode-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--radius-round); color: var(--on-accent); }
.lv-mode h3 { margin: 0 !important; font-size: var(--text-h3-size); }
.lv-mode-about { display: block; color: var(--ink-muted); }
.lv-ages { color: var(--ink); font-weight: 700; }
.lv-mode-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-pill); color: var(--on-accent); font-weight: 800; }
.lv-mode--sun :is(.lv-mode-ic, .lv-mode-cta) { background: var(--sun); }
.lv-mode--sky :is(.lv-mode-ic, .lv-mode-cta) { background: var(--sky); }
.lv-mode--plum :is(.lv-mode-ic, .lv-mode-cta) { background: var(--plum); }
.lv-mode-go { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--duration-fast) var(--ease-out); }
.lv-mode:is(:hover, :focus-visible) .lv-mode-go { transform: translateX(4px); }
.lv-mode[aria-current="true"] { border-right-color: var(--ink); border-bottom-color: var(--ink); border-left-color: var(--ink); }
.lv-mode-badge { margin-left: auto; padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font-size: var(--text-small-size); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .lv-mode, .lv-mode-go { transition: none; } .lv-mode:is(:hover, :active), .lv-mode:is(:hover, :focus-visible) .lv-mode-go { transform: none; } }
html.motion-paused .lv-mode:is(:hover, :active), html.calm .lv-mode:is(:hover, :active),
html.motion-paused .lv-mode:is(:hover, :focus-visible) .lv-mode-go, html.calm .lv-mode:is(:hover, :focus-visible) .lv-mode-go { transform: none; }
.lv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
@media (max-width: 800px) { .lv-cols { grid-template-columns: 1fr; } }
.lv-links { padding-left: 1.2em; }
.lv-foot { border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-7); color: var(--ink-muted); font-size: var(--text-label-size); }
.lv-page a, .lv-foot a, .lv-cols a, .lv-grown a { color: var(--sky-strong); font-weight: 700; }

/* Grown-up pages: readable text */
.lv-page { max-width: 760px; }
.lv-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.lv-page h2 { font-size: var(--text-h3-size); margin-top: var(--space-7) !important; }
.lv-page h3 { font-size: var(--text-h4-size); margin-top: var(--space-5) !important; }
.lv-page p, .lv-page li { line-height: 1.6; }
.lv-page blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--sun); background: var(--card); border-radius: var(--radius-sm); }
.lv-table { overflow-x: auto; margin: var(--space-4) 0; }
.lv-page table { border-collapse: collapse; min-width: 560px; font-size: var(--text-small-size); }
.lv-page th, .lv-page td { border: 1px solid var(--line); padding: var(--space-2) var(--space-2-5); text-align: left; vertical-align: top; }
.lv-page th { background: var(--bg-alt); }
.lv-draft { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-md); background: color-mix(in srgb, var(--sun) 30%, var(--card)); color: var(--ink); font-weight: 700; }
.lv-page code { font-family: var(--font-mono); font-size: .9em; }

/* The hand-off import page (/import/) */
.lv-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.lv-note { color: var(--ink-muted); }
#handoff [hidden] { display: none; }

/* The background sky (js/sky-bg.js; the same rules are in math.css for the game): a fixed canvas behind
   the page. Its wash is a soft dawn glow on the horizon in Daybreak and a night glow in Deep Space, from tokens. */
.vm-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background: radial-gradient(140% 55% at 50% 108%, color-mix(in srgb, var(--sun) 24%, transparent), transparent 70%),
    radial-gradient(90% 36% at 50% 104%, color-mix(in srgb, var(--coral) 12%, transparent), transparent 75%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-bg { background: radial-gradient(140% 50% at 50% 110%, color-mix(in srgb, var(--plum) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--sky) 5%, transparent), transparent 45%); }
}
:root[data-theme="dark"] .vm-bg { background: radial-gradient(140% 50% at 50% 110%, color-mix(in srgb, var(--plum) 16%, transparent), transparent 72%),
  linear-gradient(180deg, color-mix(in srgb, var(--sky) 5%, transparent), transparent 45%); }
.lv-landing main, .lv-landing .lv-foot { position: relative; z-index: var(--z-base); }
/* Welcome back: main stays unseen while the script after the Modes sets its words (site/index.html), so nothing shifts */
html[data-lv-wait] .lv-landing main { visibility: hidden; animation: lv-show 0s 1.5s forwards; } /* shown anyway after 1.5 s */
@keyframes lv-show { to { visibility: visible; } }

/* The sutras and the method (openspec change sutras-first): one sum both ways and three sutra cards. Tokens only. */
.lv-ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-5) 0; }
@media (max-width: 700px) { .lv-ways { grid-template-columns: 1fr; } }
.lv-way { margin: 0; padding: var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); min-width: 0; }
.lv-way--sutra { border-color: var(--plum); background: color-mix(in srgb, var(--plum) 10%, var(--card)); }
.lv-way figcaption { font-weight: 700; color: var(--ink-muted); }
.lv-way--sutra figcaption { color: var(--plum-strong); }
.lv-sum { margin: var(--space-2) 0; font: 600 1.6rem/1.2 var(--display); }
.lv-steps { margin: 0; padding-left: 1.3em; }
.lv-steps li { margin: var(--space-1) 0; overflow-wrap: anywhere; }
.lv-sutra-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 800px) { .lv-sutra-cards { grid-template-columns: 1fr; } }
.lv-sutra { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; box-sizing: border-box; padding: var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); overflow-wrap: anywhere; }
.lv-sutra:hover { border-color: var(--plum); }
.lv-sutra:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.lv-sutra b { font: 600 1.2rem/1.3 var(--display); color: var(--plum-strong); }
.lv-sutra-m { font-style: italic; color: var(--ink-muted); }
.lv-sutra-go { margin-top: auto; font-weight: 700; color: var(--sky-strong); }
.lv-sutras-note { margin-top: var(--space-5); }
.lv-sutras-note a { color: var(--sky-strong); font-weight: 700; }
/* A Trick's plain-English name leads and its Sutra's Sanskrit name sits right under it (landing-interactive-hero) */
.lv-trick { display: block; font: 600 1.15rem/1.3 var(--display); color: var(--ink); }
.lv-way figcaption .lv-sa { display: block; font-weight: 700; color: var(--plum-strong); }
.lv-sutra b { font-size: 1rem; }

/* The sutra way, step by step (openspec change landing-interactive-hero). Without JavaScript every step and the whole
   board show. With it, data-step on the card hides later steps with visibility only, so the card keeps its size and
   nothing moves; the current step is tinted. Back and Next stay in place, and nothing animates on its own: a step
   fades in only when a visitor presses a button, and not at all under reduced motion, Pause motion or Calm. */
.lv-board { display: inline-grid; grid-template-columns: auto auto; column-gap: var(--space-4); row-gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); font: 600 1.35rem/1.2 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.lv-board > span { padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.lv-bd { color: var(--plum-strong); }
.lv-bl, .lv-br { border-top: 2px solid var(--ink); border-radius: 0 !important; padding-top: var(--space-1) !important; }
.lv-br { border-left: 2px solid var(--line); }
.lv-bx { grid-column: 1 / -1; color: var(--plum-strong); font-size: 1.6rem; }
.lv-demo-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.lv-demo-at { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--ink-muted); }
.lv-demo-nav .md-btn { min-height: 44px; min-width: 128px; }
.lv-demo-back[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (scripting: none) { .lv-demo-nav { display: none; } }
/* With scripting on, the row keeps its place but shows only once the script has set data-step, so a module that
   failed to load leaves no dead buttons and nothing shifts when it does load (#172 review) */
.lv-demo:not([data-step]) .lv-demo-nav { visibility: hidden; }
.lv-demo[data-step="1"] [data-s="2"], .lv-demo[data-step="1"] [data-s="3"], .lv-demo[data-step="2"] [data-s="3"] { visibility: hidden; }
.lv-demo[data-step="1"] .lv-board [data-s="1"], .lv-demo[data-step="2"] .lv-board [data-s="2"], .lv-demo[data-step="3"] .lv-board [data-s="3"] { background: color-mix(in srgb, var(--sun) 35%, transparent); }
/* The current step is tinted, never bolded: background and box-shadow do not change the text's size, so the card never moves (#172 review) */
.lv-demo .lv-steps li[aria-current="step"] { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sun) 30%, transparent); box-shadow: -6px 0 0 color-mix(in srgb, var(--sun) 30%, transparent), 6px 0 0 color-mix(in srgb, var(--sun) 30%, transparent); }
.lv-demo[data-moved][data-step="1"] [data-s="1"], .lv-demo[data-moved][data-step="2"] [data-s="2"], .lv-demo[data-moved][data-step="3"] [data-s="3"] { animation: lv-step-in var(--duration-medium) var(--ease-out); }
@keyframes lv-step-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lv-demo [data-s] { animation: none !important; } }
html.motion-paused .lv-demo [data-s], html.calm .lv-demo [data-s] { animation: none !important; }
html.motion-paused .lv-demo-nav .md-btn, html.calm .lv-demo-nav .md-btn { transition: none; transform: none; } /* the buttons' press dip (reduced motion: components.css) */

/* Inside the game (landing-interactive-hero): Bolt and Math Lens, one line each */
.lv-feats { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .lv-feats { grid-template-columns: 1fr; } }
.lv-feat { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; padding: var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); }
.lv-feat h3 { margin: 0 0 var(--space-1) !important; font-size: var(--text-h4-size); }
.lv-feat p { margin: 0; }
.lv-feat-art { flex: none; width: 64px; height: 64px; }
.lv-bolt-art { overflow: visible; }
.lv-lens-art { display: grid; place-items: center; border-radius: var(--radius-round); background: var(--teal); color: var(--on-accent); }


/* Grown-up pages: the three-point summary on /parents/ and the warm-up box on /teachers/ (UX audit 2026-10-29, task 1.2).
   Nothing moves: no hover lift, no animation. */
.lv-facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 700px) { .lv-facts { grid-template-columns: 1fr; } }
.lv-fact { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 2px solid var(--edge); border-top-width: 6px; border-radius: var(--radius-lg); background: var(--card); color: var(--ink); font-size: var(--text-small-size); line-height: 1.45; }
.lv-fact strong { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
.lv-fact-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-round); color: var(--on-accent); }
.lv-fact--sky { border-top-color: var(--sky); } .lv-fact--sky .lv-fact-ic { background: var(--sky); }
.lv-fact--plum { border-top-color: var(--plum); } .lv-fact--plum .lv-fact-ic { background: var(--plum); }
.lv-fact--sun { border-top-color: var(--sun); } .lv-fact--sun .lv-fact-ic { background: var(--sun); }
.lv-callout { margin: var(--space-6) 0 0; padding: var(--space-5); border: 2px solid var(--edge); border-left: 8px solid var(--coral); border-radius: var(--radius-lg); background: var(--card); }
.lv-page .lv-callout h2 { margin-top: 0 !important; }
.lv-callout-go { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
.lv-page .lv-callout-go a.md-btn { min-height: 48px; font-size: 1.05rem; }
.lv-page .lv-callout-go a.md-btn--primary { color: var(--on-accent); }
.lv-page .lv-callout-go a.md-btn:not(.md-btn--primary) { color: var(--ink); } /* the second button (Open the Arena, teacher-warm-up 3.1) keeps the ink of a plain button */
.lv-page .lv-callout-go a.md-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lv-callout-note { margin: 0; color: var(--ink-muted); font-size: var(--text-small-size); }
@media (prefers-reduced-motion: reduce) { .lv-page .lv-callout-go a.md-btn:hover, .lv-page .lv-callout-go a.md-btn:active { transform: none; } }
html.motion-paused .lv-page .lv-callout-go a.md-btn:is(:hover, :active), html.calm .lv-page .lv-callout-go a.md-btn:is(:hover, :active) { transform: none; }