/* ============================================
   Clear-Sight — /why pages ("Spot the move")
   One page (/why), a section per move, each at its own anchor.
   Layered on style-v2.css + style-learn.css. Generated by
   scripts/build-why-pages.mjs.
   ============================================ */

:root {
    --why-weak: #b45309;          /* amber-700: the move being made */
    --why-weak-bg: #fffbeb;
    --why-weak-border: #fcd34d;
    --why-strong: #0f766e;        /* teal-700: done well */
    --why-strong-bg: #f0fdfa;
    --why-strong-border: #5eead4;
    --why-surface: var(--white);
}
:root[data-theme="dark"] {
    --why-weak: #fbbf24;
    --why-weak-bg: rgba(251, 191, 36, 0.08);
    --why-weak-border: rgba(251, 191, 36, 0.35);
    --why-strong: #5eead4;
    --why-strong-bg: rgba(94, 234, 212, 0.07);
    --why-strong-border: rgba(94, 234, 212, 0.32);
    --why-surface: var(--dk-surface);
}

/* The page title is the line from the share card, so it reads as a statement. */
.why-title {
    font-size: clamp(2.1rem, 6vw, 3.1rem);
    line-height: 1.1;
}

.why-strong {
    font-size: 1rem;
    color: var(--text-body);
}
.why-strong strong {
    color: var(--why-strong);
    font-weight: 600;
}

/* Shown only when the visit came from a share card (?from=share). */
.why-from-share {
    margin-bottom: var(--space-lg);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--why-strong-bg);
    border: 1px solid var(--why-strong-border);
    color: var(--text-heading);
    font-size: 0.9375rem;
}
.why-from-share[hidden] { display: none; }

/* --- Weak vs strong example --- */
.why-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-md);
}
@media (max-width: 640px) {
    .why-compare { grid-template-columns: minmax(0, 1fr); }
}
.why-example {
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}
.why-example figcaption {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}
.why-example blockquote,
.learn-article__body .why-example blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-heading);
}
.why-example--weak {
    background: var(--why-weak-bg);
    border-color: var(--why-weak-border);
}
.why-example--weak figcaption { color: var(--why-weak); }
.why-example--strong {
    background: var(--why-strong-bg);
    border-color: var(--why-strong-border);
}
.why-example--strong figcaption { color: var(--why-strong); }

.why-madeup {
    font-size: 0.875rem;
    color: var(--text-muted);
}
.learn-article__body > .why-madeup { margin-top: var(--space-sm); }

/* --- Spot it yourself: numbered checks --- */
.why-checks,
.learn-article__body .why-checks {
    list-style: none;
    padding: 0;
    margin-left: 0;
    counter-reset: why-check;
}
.why-checks li {
    counter-increment: why-check;
    position: relative;
    padding: var(--space-md) var(--space-md) var(--space-md) 3.25rem;
    border-radius: var(--radius-md);
    background: var(--why-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-heading);
    line-height: 1.55;
}
.why-checks li + li { margin-top: var(--space-sm); }
.why-checks li::before {
    content: counter(why-check);
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.6rem;
    text-align: center;
}

/* --- One section per move --- */
.why-move {
    margin-top: var(--space-4xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-subtle);
    /* Anchors land below the fixed nav, not under it. */
    scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}
.why-move__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 4.5vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-heading);
    margin-bottom: var(--space-sm);
}
.why-move .why-strong { margin-bottom: var(--space-lg); }
.why-move .learn-article__body > p:first-of-type {
    font-size: 1.125rem;
}
.why-move .learn-article__body h3 { margin-top: var(--space-xl); }

/* The section a share card pointed at. */
.why-move.is-shared {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    border: 1px solid var(--why-strong-border);
    border-radius: var(--radius-lg);
    background: var(--why-strong-bg);
}
.why-move.is-shared .why-checks li,
.why-move.is-shared .why-notmean { background: var(--why-surface); }

.why-move__foot {
    margin-top: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    color: var(--text-muted);
}
.why-move__foot a {
    color: var(--accent-hover);
    font-weight: 600;
    text-decoration: none;
}
.why-move__foot a:hover { text-decoration: underline; }

#all-ten { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }

/* --- What it doesn't mean --- */
.why-notmean {
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--accent);
    border-radius: 0;
    background: var(--why-surface);
    color: var(--text-body);
}
.why-notmean strong { color: var(--text-heading); }

/* --- CTA extras --- */
.why-cta__sub {
    position: relative;
    margin-top: var(--space-md);
    font-size: 0.9375rem;
}
.why-cta__sub a {
    color: var(--text-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- The other nine / the index list --- */
.why-more {
    margin-top: var(--space-xl);
}
.why-more > h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--text-heading);
    margin-bottom: var(--space-lg);
}
.why-more--index { margin-top: 0; }
.why-more__group + .why-more__group { margin-top: var(--space-xl); }
.why-more__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}
.why-more ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.why-more li + li { margin-top: 6px; }
.why-more a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--why-surface);
    color: var(--text-heading);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.why-more a:hover { border-color: var(--accent); }
.why-more__dim {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
}