/* Field guide layer: shared teaching and delight components for every tool page.
   Load after /styles.css. Every class is prefixed lx- so it never collides with tool CSS. */

/* Hero with figure */
.lx-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 56px; align-items: center; }
.lx-fig { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.lx-fig img { position: relative; width: 100%; height: 100%; object-fit: contain; animation: lxFloat 7s ease-in-out infinite; }
.lx-fig::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 10%; background: radial-gradient(closest-side, rgba(13, 36, 99, .16), transparent); animation: lxShadow 7s ease-in-out infinite; }
.lx-fig figcaption { position: absolute; left: 0; bottom: -6px; color: #6b7079; }
/* Process Motion scene in the hero: a framed stage, no float or floor shadow */
.lx-fig--pm { aspect-ratio: auto; width: 100%; }
.lx-fig--pm::before { display: none; }
.lx-fig--pm .pm { border: 1px solid var(--line); }
/* Give the 16:9 scene the wider column so its narration stays legible */
.lx-hero:has(.lx-fig--pm) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
@media (max-width: 900px) { .lx-hero:has(.lx-fig--pm) { grid-template-columns: 1fr; } }
@keyframes lxFloat { 50% { transform: translateY(-10px); } }
@keyframes lxShadow { 50% { transform: scaleX(.86); opacity: .7; } }
@media (max-width: 900px) { .lx-hero { grid-template-columns: 1fr; } .lx-fig { max-width: 520px; width: 100%; } }

/* Why this matters: inline lesson attached to a question or input */
.lx-why { margin-top: 12px; border-left: 2px solid var(--blue); background: #f3f5ff; }
.lx-why summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.lx-why summary::-webkit-details-marker { display: none; }
.lx-why summary::before { content: "+"; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; font-size: 12px; line-height: 1; transition: transform .3s var(--ease); }
.lx-why[open] summary::before { transform: rotate(45deg); }
.lx-why__body { padding: 0 14px 14px 40px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.lx-why[open] .lx-why__body { animation: lxReveal .45s var(--ease); }
@keyframes lxReveal { from { opacity: 0; transform: translateY(-6px); } }

/* Glossary terms: dotted underline, definition on hover, focus or tap */
.lx-term { position: relative; display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline dotted var(--blue); text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: help; }
.lx-tip { position: absolute; z-index: 60; width: min(300px, calc(100vw - 32px)); padding: 14px 16px; background: var(--navy); color: #fff; font-size: 14px; line-height: 1.5; text-align: left; box-shadow: 0 18px 40px -16px rgba(13, 36, 99, .5); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s ease, transform .3s var(--ease); }
.lx-tip.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lx-tip b { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #9fb0ff; }

/* Field note: a short callout with a takeaway */
.lx-note { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.lx-note::before { content: ""; grid-row: span 2; width: 10px; height: 10px; margin-top: 4px; background: var(--blue); }
.lx-note__label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.lx-note p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* Milestone rail: Base Camp to Summit. Set --v (0 to 1) on .lx-rail */
.lx-rail { --v: 0; position: relative; padding-top: 34px; }
.lx-rail__track { position: relative; height: 4px; background: var(--line); }
.lx-rail__fill { position: absolute; inset: 0; background: var(--blue); transform: scaleX(var(--v)); transform-origin: left; transition: transform 1.4s var(--ease); }
.lx-rail__pin { position: absolute; top: 0; width: 22px; left: calc(var(--v) * 100%); transform: translateX(-50%); transition: left 1.4s var(--ease); }
.lx-rail__pin svg { display: block; width: 22px; height: 22px; }
.lx-rail__stops { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.lx-rail__stops li { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b7079; }
.lx-rail__stops li.is-reached { color: var(--ink); }
.lx-rail__stops li:last-child { text-align: right; }

/* Field guide: numbered lessons section below the tool */
.lx-guide { padding: clamp(80px, 9vw, 120px) 0; background: #fff; }
.lx-guide__head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; align-items: end; margin-bottom: 40px; }
.lx-guide__head h2 { margin: 10px 0 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
.lx-guide__head > p { margin: 0; justify-self: end; max-width: 30em; color: var(--text); }
.lx-lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.lx-lesson { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; transition: background-color .3s ease; }
.lx-lesson:hover { background: #f7f8ff; }
.lx-lesson__n { font-family: var(--mono); font-size: 12px; color: var(--blue); }
.lx-lesson h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.lx-lesson p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.lx-lesson__rule { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.lx-lesson__rule b { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 900px) { .lx-guide__head, .lx-lessons { grid-template-columns: 1fr; } .lx-guide__head > p { justify-self: start; } }

/* Myth vs reality pair */
.lx-myth { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: #fff; }
.lx-myth > div { padding: 22px 24px; }
.lx-myth > div + div { border-left: 1px solid var(--line); background: #f3f5ff; }
.lx-myth .mono { display: block; margin-bottom: 8px; color: #6b7079; }
.lx-myth > div + div .mono { color: var(--blue); }
.lx-myth p { margin: 0; font-size: 15.5px; line-height: 1.5; }
@media (max-width: 640px) { .lx-myth { grid-template-columns: 1fr; } .lx-myth > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Result actions */
.lx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lx-act { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s var(--ease); }
.lx-act:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.lx-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; padding: 12px 18px; background: var(--navy); color: #fff; font-size: 14px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s ease, transform .4s var(--ease); pointer-events: none; }
.lx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Summit burst: canvas placed over a result by LX.celebrate() */
.lx-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .lx-fig img, .lx-fig::before { animation: none; }
  .lx-rail__fill, .lx-rail__pin { transition: none; }
}

/* Print: results become a clean one-page report */
@media print {
  .nav, .progress, .cta, .foot, .lx-actions, .lx-guide, .skip, .band, canvas, .lx-toast, .lx-tip { display: none !important; }
  body { background: #fff !important; }
  .lx-fig img { animation: none; }
  .lx-why { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}