/* ============================================================
   ENV — Problem Guides
   Consolidated resource guides. Four of them, one per major
   problem class. Layout is a persistent left rail (sticky,
   scroll-spy) beside a single prose column.

   Depends on: tokens.css, main.css, subpage.css, blog.css
   Adds no new colors. Reuses .prose, .fig, .btn, .exec-summary.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Index cards (insights.html)
   Four cards. Subtopic links are VISIBLE, never behind an
   accordion: the subtopic list is the only thing on the page
   that proves depth, so hiding it defeats the page.
   ------------------------------------------------------------ */

.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-6);
}

/* The card is an <article>, never an <a>. It contains its own subtopic
   links, and nesting anchors is invalid HTML: the parser silently closes
   and reopens the outer one, which shatters the layout. */
.guide-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-elevated);
    border: 1px solid var(--overlay-border-medium);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}
.guide-card:hover {
    border-color: var(--overlay-border-strong);
    transform: translateY(-2px);
}

.guide-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.guide-card__body {
    padding: var(--s-5) var(--s-5) var(--s-4);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.guide-card__eyebrow {
    color: var(--brand-blue-light);
    font-size: var(--label-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--s-2);
}

.guide-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-3);
    overflow-wrap: break-word;
}
.guide-card__title a {
    color: var(--fg-1);
    transition: color var(--duration-fast) var(--ease-standard);
}
.guide-card__title a:hover { color: var(--brand-blue-light); }

.guide-card__summary {
    color: var(--fg-3);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 var(--s-4);
}

/* Visible subtopic list. This is the depth signal. */
.guide-card__topics {
    list-style: none;
    margin: 0 0 var(--s-4);
    padding: 0 0 0 var(--s-4);
    border-left: 2px solid var(--brand-blue-rule);
}
.guide-card__topics li {
    margin-bottom: var(--s-2);
    font-size: 0.88rem;
    line-height: 1.45;
}
.guide-card__topics li:last-child { margin-bottom: 0; }
.guide-card__topics a {
    color: var(--fg-3);
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.guide-card__topics a:hover {
    color: var(--fg-1);
    border-bottom-color: var(--brand-blue-light);
}
.guide-card__more {
    color: var(--fg-5);
    font-size: 0.82rem;
    font-style: italic;
}

/* One quantified proof line per card. Case-study evidence has to
   appear before the reader commits to opening anything. */
.guide-card__proof {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--overlay-border-weak);
    color: var(--fg-4);
    font-size: 0.85rem;
    line-height: 1.5;
}
.guide-card__proof strong {
    color: var(--fg-2);
    font-weight: 600;
    display: block;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    font-size: var(--label-xs-size);
    letter-spacing: 0.06em;
}

.guide-card__cta {
    display: inline-block;
    margin-top: var(--s-4);
    color: var(--brand-blue-light);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color var(--duration-fast) var(--ease-standard);
}
.guide-card__cta:hover { color: var(--fg-1); }


/* ------------------------------------------------------------
   2 · Guide page shell
   ------------------------------------------------------------ */

.guide-hero {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    padding: var(--s-8) var(--s-6) var(--s-7);
    margin-top: 70px; /* clears the fixed nav */
}
.guide-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(2, 6, 23, 0.55) 0%,
                rgba(2, 6, 23, 0.80) 55%,
                var(--surface-base) 100%);
}
.guide-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
}
.guide-hero__eyebrow {
    color: var(--brand-blue-light);
    font-size: var(--label-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--s-3);
}
.guide-hero__title {
    color: var(--fg-1);
    font-size: var(--display-1-size);
    font-weight: var(--display-1-weight);
    line-height: var(--display-1-lh);
    letter-spacing: var(--display-1-tracking);
    margin: 0 0 var(--s-4);
    max-width: 20ch;
}
.guide-hero__lede {
    color: var(--fg-3);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 62ch;
    margin: 0;
}
.guide-hero__audience {
    margin-top: var(--s-4);
    color: var(--fg-4);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 62ch;
}
.guide-hero__audience strong { color: var(--fg-2); font-weight: 600; }

/* Credential strip. Visible text, not hidden markup: this is what
   both a human and a retrieval system actually read. */
.guide-cred {
    background: var(--surface-elevated);
    border-top: 1px solid var(--overlay-border-weak);
    border-bottom: 1px solid var(--overlay-border-weak);
}
.guide-cred__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-4) var(--s-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    align-items: center;
    color: var(--fg-4);
    font-size: 0.84rem;
}
.guide-cred__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.guide-cred__item strong { color: var(--fg-2); font-weight: 600; }
.guide-cred__rev { margin-left: auto; color: var(--fg-5); font-size: 0.8rem; }


/* ------------------------------------------------------------
   3 · Two-column body: sticky rail + prose
   ------------------------------------------------------------ */

.guide-layout {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-7) var(--s-6) var(--s-8);
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
}

/* -- the rail ------------------------------------------------ */

.guide-rail {
    position: sticky;
    top: 94px;                /* nav height + breathing room */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: var(--s-3);
}
.guide-rail__label {
    color: var(--fg-5);
    font-size: var(--label-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--s-3);
}
.guide-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--overlay-border-weak);
}
.guide-rail__list li { margin: 0; }

/* Links must look like links. Unstyled contents links get ignored. */
.guide-rail__link {
    display: block;
    padding: 0.45rem 0 0.45rem var(--s-4);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--fg-4);
    font-size: 0.84rem;
    line-height: 1.4;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.guide-rail__link:hover { color: var(--fg-1); border-left-color: var(--overlay-border-strong); }
.guide-rail__link.is-active {
    color: var(--fg-1);
    font-weight: 600;
    border-left-color: var(--brand-blue-light);
}
.guide-rail__link--case {
    margin-top: var(--s-2);
    color: var(--brand-blue-light);
    font-weight: 600;
}

.guide-rail__cta {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--overlay-border-weak);
}
.guide-rail__cta .btn { width: 100%; text-align: center; font-size: 0.85rem; }

/* -- mobile contents ----------------------------------------- */
/* A rail is impossible on a phone. A collapsed contents list at
   the top of a long document is the one accordion pattern the
   usability research actually endorses. */

.guide-toc-mobile { display: none; }
.guide-toc-mobile > summary {
    cursor: pointer;
    padding: var(--s-4) var(--s-5);
    background: var(--surface-elevated);
    border: 1px solid var(--overlay-border-medium);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-weight: 600;
    font-size: 0.92rem;
    list-style: none;
}
.guide-toc-mobile > summary::-webkit-details-marker { display: none; }
.guide-toc-mobile > summary::after {
    content: " ▾";
    color: var(--brand-blue-light);
    float: right;
}
.guide-toc-mobile[open] > summary::after { content: " ▴"; }
.guide-toc-mobile ol {
    margin: var(--s-3) 0 0;
    padding-left: var(--s-5);
    color: var(--fg-3);
}
.guide-toc-mobile li { margin-bottom: var(--s-2); font-size: 0.9rem; }


/* ------------------------------------------------------------
   4 · Sections
   ------------------------------------------------------------ */

.guide-body { min-width: 0; }

/* Offset anchor targets so a jumped-to heading is not hidden
   behind the fixed nav. */
.guide-section { scroll-margin-top: 90px; }
.guide-section + .guide-section { margin-top: var(--s-8); }

.guide-section > h2 {
    color: var(--fg-1);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 var(--s-4);
}
.guide-section__num {
    color: var(--brand-blue-light);
    font-size: 0.95rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
}

/* The complexity signal. One plain sentence stating why the
   problem is genuinely hard. Complexity belongs in the problem,
   never in the vocabulary. */
.guide-hard {
    margin: 0 0 var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--overlay-weak);
    border-left: 3px solid var(--fg-5);
    border-radius: var(--radius-xs);
    color: var(--fg-2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
}

/* The systems connection. Names one real link to physics,
   engineering, economics or management. */
.guide-systems {
    margin: var(--s-5) 0 0;
    padding: var(--s-3) var(--s-4);
    background: var(--brand-blue-tint);
    border: 1px solid var(--brand-blue-rule);
    border-radius: var(--radius-xs);
    color: var(--fg-2);
    font-size: 0.92rem;
    line-height: 1.6;
}
.guide-systems__label {
    color: var(--brand-blue-light);
    font-size: var(--label-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.3rem;
}


/* Link out to the full-length technical note for a reader who
   wants the depth behind a compressed section. */
.guide-deeper {
    margin-top: var(--s-4);
    color: var(--fg-4);
    font-size: 0.86rem;
}
.guide-deeper a { font-weight: 600; }

.guide-section__figure { margin: var(--s-5) 0; }

/* Copyable deep link on each heading. Hidden until the heading is
   hovered or focused so it never competes with the title. */
.guide-anchor {
    margin-left: 0.5rem;
    color: var(--fg-6);
    font-weight: 400;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}
.guide-section > h2:hover .guide-anchor,
.guide-anchor:focus { opacity: 1; }
.guide-anchor:hover { color: var(--brand-blue-light); }
.guide-anchor.is-copied { opacity: 1; color: var(--logo-leaf); }
.guide-anchor.is-copied::after { content: " copied"; font-size: 0.8em; }


/* ------------------------------------------------------------
   5 · Proof band + case study
   Most readers never reach the bottom of a long page, so the
   proof appears high as well as in full at the end.
   ------------------------------------------------------------ */

.guide-proof {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--s-6);
}
.guide-proof__inner {
    margin-top: var(--s-6);
    padding: var(--s-4) var(--s-5);
    background: var(--surface-elevated);
    border: 1px solid var(--overlay-border-medium);
    border-left: 3px solid var(--logo-leaf);
    border-radius: var(--radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    justify-content: space-between;
}
.guide-proof__text { margin: 0; color: var(--fg-2); font-size: 0.95rem; line-height: 1.55; }
.guide-proof__text strong { color: var(--fg-1); }
.guide-proof__link { color: var(--brand-blue-light); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

.guide-case {
    background: var(--surface-elevated);
    border: 1px solid var(--overlay-border-medium);
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    margin-top: var(--s-6);
}
.guide-case__eyebrow {
    color: var(--brand-blue-light);
    font-size: var(--label-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--s-2);
}
.guide-case__title {
    color: var(--fg-1);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--s-4);
}
.guide-case__field { margin-bottom: var(--s-3); color: var(--fg-3); line-height: 1.65; font-size: 0.97rem; }
.guide-case__field:last-child { margin-bottom: 0; }
.guide-case__label {
    display: block;
    color: var(--fg-5);
    font-size: var(--label-xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

/* Visible placeholder state. Byron supplies the real cases; the
   slot should read as deliberately unfinished, not as thin work. */
.guide-case--placeholder { border-style: dashed; border-color: var(--overlay-border-medium); }
.guide-case__pending {
    display: inline-block;
    margin-bottom: var(--s-4);
    padding: 0.25rem 0.6rem;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-pill);
    color: var(--status-warning);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* ------------------------------------------------------------
   6 · Foot of guide
   ------------------------------------------------------------ */

.guide-end {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-7) var(--s-6) var(--s-8);
    border-top: 1px solid var(--overlay-border-weak);
}
.guide-end__title {
    color: var(--fg-4);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin: 0 0 var(--s-4);
}

/* Flex rather than a fixed 3-up grid so the block still reads as deliberate
   when there is only one related guide. */
.guide-related { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-7); }
.guide-related__card {
    flex: 1 1 260px;
    max-width: 380px;
    padding: var(--s-4);
    background: var(--surface-elevated);
    border: 1px solid var(--overlay-border-weak);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-standard);
}
.guide-related__card:hover { border-color: var(--overlay-border-strong); }
.guide-related__card h3 { color: var(--fg-1); font-size: 1rem; font-weight: 600; margin: 0 0 0.35rem; line-height: 1.35; }
.guide-related__card p { color: var(--fg-4); font-size: 0.85rem; margin: 0; line-height: 1.5; }


/* ------------------------------------------------------------
   7 · Responsive
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
    .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .guide-rail { display: none; }
    .guide-toc-mobile { display: block; margin-bottom: var(--s-6); }
    .guide-body { max-width: var(--prose-max); margin: 0 auto; }
}

@media (max-width: 860px) {
    .guide-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .guide-hero { min-height: 38vh; padding: var(--s-7) var(--s-4) var(--s-6); }
    .guide-hero__title { font-size: 1.9rem; }
    .guide-hero__lede { font-size: 1rem; }
    .guide-layout { padding: var(--s-6) var(--s-4) var(--s-7); }
    .guide-section > h2 { font-size: 1.4rem; }
    .guide-section + .guide-section { margin-top: var(--s-7); }
    .guide-cred__inner { padding: var(--s-3) var(--s-4); font-size: 0.78rem; gap: var(--s-2) var(--s-4); }
    .guide-cred__rev { margin-left: 0; width: 100%; }
    .guide-proof, .guide-end { padding-left: var(--s-4); padding-right: var(--s-4); }
    .guide-case { padding: var(--s-5) var(--s-4); }
    .guide-proof__inner { flex-direction: column; align-items: flex-start; }
}

/* Wide tables inside a guide must scroll themselves, never the page. */
.guide-body .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media print {
    .guide-rail, .guide-toc-mobile, .site-nav, .site-footer,
    .guide-rail__cta, .guide-proof { display: none !important; }
    .guide-layout { display: block; padding: 0; }
    .guide-hero { min-height: auto; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-card, .guide-card:hover { transition: none; transform: none; }
}