/* =========================================================
   Growing Minds Science: lens-page.css
   The standalone Developmental Lens (body.lp). The plate, its labels, the
   step tabs and the panel frame are the homepage's (home.css, driven by
   home.js); this file holds what the full Lens adds: the title block, the
   panels' fuller content (mechanisms with their evidence, options, prompts),
   the text alternative, the links, the sources and the close.
   Tokens from tokens-field-guide.css.
   ========================================================= */

/* ---------- Title block ---------- */
.lp-title { padding-block: clamp(40px, 6vw, 96px) clamp(32px, 4vw, 56px); }
.lp-title h1 { font-size: clamp(2.75rem, 1.6rem + 4vw, 5rem); line-height: 0.98; letter-spacing: -0.025em; }
.lp-meta { margin-top: 16px; font-size: 15px; color: var(--ink-muted); }
.lp-title .hb-lead { margin-top: 20px; color: var(--ink-soft); max-width: 52ch; }

/* ---------- Panels: the full Lens content inside the homepage's frame ---------- */
.lp .lens__panel { gap: 18px; }
.lens__heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -0.015em; }
.lens__text { color: var(--ink); max-width: 60ch; }
.lens__text--soft { color: var(--ink-soft); }
.lens__block { display: grid; gap: 8px; }
.fg .lens__subhead { letter-spacing: normal; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); }
.fg ul.lens__list, .fg ul.lens__prompts { display: grid; gap: 6px; }
.lens__list li, .lens__prompts li { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.lens__list li::before, .lens__prompts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--note-amber); margin-top: 0.6em; }
.lens__prompts li { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.3; padding-block: 4px; }
.lens__aside { font-size: 15px; color: var(--ink-muted); max-width: 60ch; }
.fg ul.lens__mechanisms { display: grid; gap: 10px; }
.lens__mech { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 8px; }
.fg .lens__mech-title { letter-spacing: normal; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.lens__mech--parent { background: var(--paper); }
.lens__evidence { font-size: 14px; font-weight: 500; color: var(--research); }
.lens__class { margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.lens__class a { color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.fg ol.lens__options { display: grid; counter-reset: opt; }
.lens__options > li { display: grid; gap: 6px; padding-block: 14px; border-top: 1px solid var(--sage-mist-2); }
.lens__options > li:first-child { border-top: 0; padding-top: 0; }
.lens__option-title { font-weight: 600; }

/* ---------- The text alternative to the plate ---------- */
.lp-alt { margin-top: clamp(28px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--sage-mist-2); display: grid; gap: 10px; max-width: 70ch; }
.lp-caption { font-size: 14px; color: var(--ink-soft); }
.lp-alt__more summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 0.16em; }
.fg ul.lp-alt__list { display: grid; gap: 4px; margin-top: 6px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Go further: Read, Try, Learn ---------- */
.lp-links { background: var(--surface); }
.lens__connections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
.lens__conn-title { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--clay-text); margin-bottom: 6px; }
.fg ul.lens__conn-list { display: grid; }
.lens__conn-list li { border-top: 1px solid var(--border-soft); }
.lens__conn-list li:first-child { border-top: 0; }
.lp .lens__link { display: flex; padding: 0; margin: 0; align-items: center; min-height: 48px; text-decoration: none; font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.2; }
.lp .lens__link:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 0.16em; }
@media (max-width: 860px) { .lens__connections { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sources ---------- */
.lp-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.lens-page__status { margin-top: 14px; font-size: 15px; color: var(--ink-soft); max-width: 40ch; }
.fg ul.lens-page__refs { display: grid; }
.lens-page__refs li { padding-block: 12px; border-top: 1px solid var(--border-soft); font-size: 15px; line-height: 1.5; }
.lens-page__refs li:first-child { border-top: 0; padding-top: 0; }
.lens-page__refs cite { font-style: italic; }
@media (max-width: 860px) { .lp-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Close ---------- */
.lp-close { padding-top: 0; }

/* ---------- No script: every panel shows, in order, and the labels for Observe stay on the plate ---------- */
.fg--page:not(.js) .lens__plate .label { display: none; }
.fg--page:not(.js) .lens__plate .label[data-for="observe"] { display: block; opacity: 1; transform: none; }
.fg--page:not(.js) .lens__panel[hidden] { display: grid; }
.fg--page:not(.js) .lens__tabs, .fg--page:not(.js) .lens__nav { display: none; }

/* The Lens's ages, as doors into the Explore hub (assets/data/explore.json). */
.lp-explore { display: grid; gap: 18px; justify-items: start; }
.lp .lp-explore__title { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.lp .lp-explore__ages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); width: 100%; border-top: 2px solid var(--ink); }
.lp-explore__ages a { display: grid; gap: 4px; min-height: 44px; padding-block: 14px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.15; }
.lp-explore__ages a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 0.14em; }
.lp-explore__ages span { font-family: var(--font-body); font-size: 14px; color: var(--ink-muted); }
@media (max-width: 760px) { .lp .lp-explore__ages { grid-template-columns: minmax(0, 1fr); } .lp-explore__ages li + li { border-top: 1px solid var(--border-soft); } }