/* why.html (A04) — page layout only. Tokens and components come from css/site.css. */

.why { --why-fig-bg: var(--surface); }

/* ---------- Depth switch ---------- */
.why-depth { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.why-depth__label { font-weight: 700; font-size: 0.95rem; }
.why-depth__group { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); }
.why-depth__btn { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.why-depth__btn:hover { background: var(--surface-2); }
.why-depth__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.why-depth__btn small { font-weight: 400; opacity: 0.85; }
.why-depth__status { font-size: 0.9rem; color: var(--ink-muted); flex-basis: 100%; }

/* Content tagged by depth. The attribute lives on <main>; 30s content always shows. */
.why[data-depth="30s"] [data-depth="5m"],
.why[data-depth="30s"] [data-depth="deep"],
.why[data-depth="5m"] [data-depth="deep"] { display: none !important; }
/* regression: 2026-10-21-why-main-point-visible (UX-CLICKS principles 1-2): quiet sections are NOT hidden at 30 s any more;
   each shows its one-line key point (data-depth="30s") so the main point of every section is visible at every depth. */

/* ---------- Layout: sticky contents + article ---------- */
.why-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .why-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-7); }
}
.why-toc { align-self: start; }
.why-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.why-toc summary::-webkit-details-marker { display: none; }
.why-toc summary .icon--chev { transition: transform var(--std) var(--ease); }
.why-toc[open] summary .icon--chev { transform: rotate(180deg); }
.why-toc ol { list-style: none; margin: var(--space-2) 0 0; padding: 0; counter-reset: toc; }
.why-toc li { margin: 0; }
.why-toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px var(--space-3); margin-left: calc(-1 * var(--space-3)); text-decoration: none; color: var(--ink); border-left: 2px solid transparent; font-size: 0.95rem; }
.why-toc a::before { counter-increment: toc; content: counter(toc); flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--ink-muted); }
.why-toc a:hover, .why-toc a[aria-current="true"] { border-left-color: var(--accent); color: var(--accent-deep); }
.why-toc a[aria-current="true"]::before { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 959px) {
  .why-toc { position: static; }
  .why-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
}

/* ---------- Sections ---------- */
.why-article { min-width: 0; }
.why-section { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.why-section:first-child { border-top: 0; padding-top: 0; }
.why-section > h2 { display: flex; align-items: center; gap: var(--space-3); }
.why-section__num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 0.9rem var(--font-body); background: var(--accent-soft); color: var(--accent-deep); }
.why-section .prose { max-width: var(--measure); }
.why-section .prose > * + * { margin-top: var(--space-3); }
.why-key { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; }
.why-deep { border-left: 3px solid var(--line-strong); padding-left: var(--space-4); color: var(--ink); }
.why-deep__label { display: inline-block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; margin-bottom: var(--space-1); }

/* Citation "i" (shell info-tip; the real styling is in js/explorer/info-tip.css) */
.why-cite { margin-left: 2px; vertical-align: super; font-size: 0.7rem; }

/* ---------- "What helps" rows ---------- */
.why-helps { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.why-helps__label { font-weight: 700; font-size: 0.9rem; margin-right: var(--space-1); color: var(--ink-muted); }
.why-helps .chip { text-decoration: none; }

/* ---------- Figures (diagrams) ---------- */
.why-fig { margin: var(--space-5) 0 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--why-fig-bg); box-shadow: var(--shadow-1); }
.why-fig svg { width: 100%; height: auto; max-height: 520px; display: block; margin-inline: auto; font-family: var(--font-body); }
.why-fig figcaption { margin-top: var(--space-3); font-size: 0.9rem; color: var(--ink-muted); }
.why-fig .details { margin: var(--space-3) 0 0; }
.why-fig .details__body { padding: 0 var(--space-5) var(--space-4); }
.why-fig .details__body ul { margin: 0; }

/* Diagram drawing styles (CSS tokens so they follow light / dark) */
.d-node { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.d-node--warm { stroke: var(--warm); }
.d-node--soft { fill: var(--accent-soft); stroke: var(--accent); }
.d-txt { fill: var(--ink); font-size: 15px; font-weight: 700; }
.d-txt--s { font-size: 13px; font-weight: 400; fill: var(--ink-muted); }
.d-txt--h { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-muted); }
.d-txt--accent { fill: var(--accent-deep); }
.d-txt--warm { fill: var(--warm); }
.d-txt--onwater { fill: var(--ink); }
.d-arrow { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.d-arrow--warm { stroke: var(--warm); }
.d-arrow--thin { stroke-width: 1.5; stroke: var(--ink-muted); }
.d-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 6; }
.d-bucket { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.d-water { fill: var(--accent-soft); }
.d-water--deep { fill: var(--accent); opacity: 0.35; }
.d-overflow { fill: var(--warm-soft); stroke: var(--warm); stroke-width: 1.5; }
.d-ice { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.d-ice--below { fill: var(--accent-soft); stroke: var(--accent-deep); }
.d-sea { fill: var(--accent); opacity: 0.12; }
.d-sea-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.d-pin { fill: var(--accent); }
.d-pin--warm { fill: var(--warm); }
.d-hand { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }

/* Gentle reveal (on scroll). Off under reduced motion; without JS everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-reduce-motion]) .js .why-fig .d-rise,
  html.js:not([data-reduce-motion]) .why-fig .d-rise { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
  html.js:not([data-reduce-motion]) .why-fig.is-visible .d-rise { opacity: 1; transform: none; }
  html.js:not([data-reduce-motion]) .why-fig .d-draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1200ms var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
  html.js:not([data-reduce-motion]) .why-fig.is-visible .d-draw { stroke-dashoffset: 0; }
  html.js:not([data-reduce-motion]) .why-fig.is-visible .d-wave { animation: why-wave 6s ease-in-out infinite alternate; }
}
@keyframes why-wave { from { transform: translateX(0); } to { transform: translateX(-14px); } }

/* ---------- Whiteboard placeholder ---------- */
.why-wb { margin: var(--space-5) 0 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); background: var(--surface); }
.why-wb__board { width: 72px; height: 56px; }
.why-wb__board svg { width: 100%; height: 100%; }
.why-wb figcaption { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }
.why-wb figcaption strong { color: var(--ink); display: block; }

/* ---------- Demands grid, ages grid, strengths cloud ---------- */
.why-kinds { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 560px) { .why-kinds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .why-kinds { grid-template-columns: repeat(3, 1fr); } }
.why-kind { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.why-kind h3 { font-size: 1rem; margin-bottom: var(--space-1); display: flex; align-items: center; gap: 8px; }
.why-kind h3 .icon svg { width: 22px; height: 22px; }
.why-kind p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }

.why-ages { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 640px) { .why-ages { grid-template-columns: 1fr 1fr; } }
.why-age { padding: var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); border-top: 4px solid var(--age-c, var(--accent)); }
.why-age--early { --age-c: var(--aud-child); }
.why-age--primary { --age-c: var(--aud-parent); }
.why-age--teen { --age-c: var(--aud-teen); }
.why-age--adult { --age-c: var(--aud-adult); }
.why-age h3 { margin-bottom: var(--space-2); }
.why-age ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; }
.why-age li + li { margin-top: 4px; }

.why-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); max-width: 760px; }
.why-cloud span { padding: 6px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 0.95rem; }
.why-cloud span:nth-child(3n) { background: var(--warm-soft); color: var(--warm); }
.why-cloud span:nth-child(4n+1) { font-size: 1.1rem; }

/* ---------- Names, evidence timeline, sources ---------- */
.why-names { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 720px) { .why-names { grid-template-columns: repeat(3, 1fr); } }
.why-name { padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.why-name h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.why-name .eyebrow { margin-bottom: var(--space-1); font-size: 0.72rem; }
.why-name p { margin: 0; font-size: 0.95rem; }

.why-timeline { list-style: none; padding: 0; margin: var(--space-4) 0 0; position: relative; max-width: var(--measure); }
.why-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-strong); }
.why-timeline li { position: relative; padding-left: 32px; margin: 0 0 var(--space-3); }
.why-timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); }
.why-timeline time { font-weight: 700; color: var(--accent-deep); margin-right: 6px; }

.why-balance { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 720px) { .why-balance { grid-template-columns: 1fr 1fr; } }
.why-balance .callout { height: 100%; }
.why-balance h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.why-balance ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; }

.why-sources { padding-left: 1.4em; max-width: 900px; }
.why-sources li { margin-bottom: var(--space-2); font-size: 0.92rem; }
.why-sources li:target { background: var(--accent-soft); border-radius: var(--radius-s); padding: 4px 6px; }
.why-sources .muted { display: block; }

/* Easier-reading mode: shorter lines everywhere in the article */
:root[data-easy-read] .why-kind p, :root[data-easy-read] .why-age li { max-width: 48ch; }

@media print {
  .why-depth, .why-toc, .why-wb { display: none !important; }
  .why [data-depth] { display: block !important; }
  .why-fig { break-inside: avoid; }
}

/* regression: 2026-10-22-wb-embed — the whiteboard explainers replace the placeholders (agent WB, EMBED.md). */
.why-wb--video { display: block; border-style: solid; }
.why-wb--video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-m); background: #fbfbf7; }
.why-wb--video figcaption { margin-top: var(--space-3); }