/* ==========================================================================
   Logic Article — reading module rendered below the interactive practice
   tool. Uses the same blue/violet/navy palette as java-logic-development.css
   so the article reads as part of the same product instead of a mismatched
   theme, while still keeping its own compact layout components. Scoped
   under .logic-article / .la-footer / .la-back-to-top so it cannot leak
   into or be affected by java-logic-development.css.

   The tool page locks `body { overflow: hidden }` so the practice tool
   itself always fills exactly one screen with no page scroll — several of
   the tool's own scripts (and the third-party consent banner) call
   `scrollIntoView()` / `focus()` without `preventScroll`, which is only
   harmless because there has never been anywhere for the page itself to
   scroll to. Rather than opening up `body`/`html` scrolling (which would
   let those pre-existing calls start nudging the whole page on load),
   `.page-scroll` below is a purpose-built scroll container that wraps only
   `.app-shell` + the article + the footer. `body`/`html` stay completely
   untouched, so the tool's scroll behavior is unaffected either way, while
   the new content underneath becomes reachable through this wrapper.
   ========================================================================== */

.page-scroll {
    height: calc(100dvh - var(--nav-height, 54px));
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.logic-article {
    /* Cool, crisp "new build" palette — clean neutrals with a vivid
       indigo/violet accent, deliberately distinct from the tool's blue-gray
       UI above it so the article still reads as its own space, without the
       sepia/serif "old paper" look this used to have. */
    --la-bg: #f4f5fa;
    --la-surface: #ffffff;
    --la-ink: #14162a;
    --la-ink-soft: #4a4d63;
    --la-muted: #7c8098;
    --la-line: #e3e5f0;
    --la-line-soft: #eef0f8;
    --la-accent: #4f46e5;
    --la-accent-ink: #4338ca;
    --la-accent-soft: #ecebfe;
    --la-violet: #9333ea;
    --la-violet-soft: #f7edff;
    --la-code-bg: #070b14;
    --la-code-bg2: #0b1220;
    --la-code-border: #334e7d;
    --la-code-header-a: #101827;
    --la-code-header-b: #172554;
    --la-code-header-c: #1e1b4b;
    --la-code-text: #f8fafc;
    --la-radius: 0;
    --la-shadow: 0 10px 26px rgba(20, 22, 42, .08);
    display: block;
    background: var(--la-bg);
    color: var(--la-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    border-top: 1px solid var(--la-line);
}

.logic-article * {
    box-sizing: border-box;
}

/* No max-width/auto-margin here on purpose: the interactive tool above
   (.app-shell) always runs edge-to-edge with a 4px gutter, at every
   viewport width. Mirroring that same 4px left/right gutter here (instead
   of centering in a max-width column) keeps the left TOC and right links
   sidebar sitting at the same horizontal position as the tool's own left
   and right panels, so the two sections read as one continuous layout. */
.la-shell {
    padding: 1.1rem 4px 2rem;
    display: grid;
    grid-template-columns: minmax(195px, 230px) minmax(0, 1fr) minmax(180px, 205px);
    gap: 4px;
    align-items: start;
}

/* ---- Shared compact "card" chrome for both side columns --------------- */

.la-sidebar,
.la-links {
    position: sticky;
    top: 4px;
    background: var(--la-surface);
    border: 1px solid var(--la-line);
    border-radius: var(--la-radius);
    box-shadow: var(--la-shadow);
    max-height: calc(100dvh - var(--nav-height, 54px) - 8px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.la-sidebar-head {
    padding: .65rem .75rem .5rem;
    border-bottom: 1px solid var(--la-line-soft);
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    flex-shrink: 0;
}

.la-kicker {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--la-accent);
    margin: 0 0 .2rem;
}

.la-sidebar-head h2 {
    margin: 0;
    font-size: .87rem;
    font-weight: 700;
    color: var(--la-ink);
}

/* ---- Left column: scrollspy TOC ---------------------------------------- */

.la-toc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .4rem;
    gap: .05rem;
    scrollbar-width: thin;
    scrollbar-color: var(--la-accent-soft) transparent;
}

.la-toc::-webkit-scrollbar {
    width: 5px;
}

.la-toc::-webkit-scrollbar-thumb {
    background: var(--la-accent-soft);
    border-radius: 999px;
}

.la-toc-link {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .32rem .5rem;
    border-radius: 7px;
    font-size: .77rem;
    line-height: 1.28;
    color: var(--la-ink-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.la-toc-link:hover {
    background: var(--la-line-soft);
    color: var(--la-ink);
}

.la-toc-index {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: .64rem;
    font-weight: 700;
    color: var(--la-muted);
    min-width: 1.25rem;
}

.la-toc-link.is-active {
    background: var(--la-accent-soft);
    color: var(--la-accent-ink);
    border-left-color: var(--la-accent);
    font-weight: 600;
}

.la-toc-link.is-active .la-toc-index {
    color: var(--la-accent);
}

/* ---- Right column: internal links --------------------------------------
   Deliberately given its own identity instead of mirroring the left TOC
   card — it's a discovery/promo panel (other tools and chapters), not
   in-page navigation, so a matching plain white header made it disappear
   as "just another sidebar". The violet/cyan header and accented rows
   below reuse the hero's gradient family to still feel on-brand. */

.la-links {
    box-shadow: 0 10px 26px rgba(124, 58, 237, .16);
}

.la-links .la-sidebar-head {
    background: linear-gradient(135deg, #4338ca 0%, #7c3aed 55%, #0891b2 100%);
    border-bottom-color: transparent;
}

.la-links .la-sidebar-head .la-kicker {
    color: #dcd6ff;
}

.la-links .la-sidebar-head h2 {
    color: #fff;
}

.la-links-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .55rem .7rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    scrollbar-width: thin;
    scrollbar-color: var(--la-accent-soft) transparent;
}

.la-links-scroll::-webkit-scrollbar {
    width: 5px;
}

.la-links-scroll::-webkit-scrollbar-thumb {
    background: var(--la-accent-soft);
    border-radius: 999px;
}

.la-links-group {
    display: flex;
    flex-direction: column;
}

.la-links-group + .la-links-group {
    margin-top: .15rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--la-line);
}

.la-links-group h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .35rem;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--la-violet);
}

.la-links-group h3::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--la-accent), var(--la-violet));
    flex-shrink: 0;
}

.la-links-group a {
    position: relative;
    padding: .32rem .3rem .32rem .65rem;
    border-radius: 6px;
    font-size: .76rem;
    line-height: 1.32;
    color: var(--la-ink-soft);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.la-links-group a:hover {
    background: var(--la-violet-soft);
    color: var(--la-violet);
    padding-left: .8rem;
}

.la-links-group a[aria-current="page"] {
    background: linear-gradient(120deg, var(--la-accent-soft), var(--la-violet-soft));
    color: var(--la-accent-ink);
    font-weight: 700;
    border: 1.5px solid var(--la-accent);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(79, 70, 229, .2);
}

/* ---- Article content ---------------------------------------------------*/

.la-content {
    min-width: 0;
    background: var(--la-surface);
    border: 1px solid var(--la-line);
    border-radius: var(--la-radius);
    box-shadow: var(--la-shadow);
    padding: 1.1rem 1.3rem 1.5rem;
}

/* Hero banner: a crisp tinted panel in the same cool palette as the rest
   of the article (accent-soft gradient, near-black ink text) instead of a
   dark navy/cyan block, so it reads as this page's own opening section
   rather than a clashing slab of app-UI color dropped into a reading page. */
.la-article-head {
    margin: 0 0 1.4rem;
    padding: 1.3rem 1.4rem;
    background: linear-gradient(120deg, #dbeafe 0%, #e0e7ff 32%, #ede9fe 64%, #fae8ff 100%);
    border: 1px solid var(--la-line);
    border-left: 4px solid var(--la-accent);
    border-radius: 0;
    scroll-margin-top: 4.5rem;
    position: relative;
}

.la-article-head .la-kicker {
    font-size: .68rem;
    color: var(--la-accent-ink);
}

.la-article-head h2 {
    scroll-margin-top: 4.5rem;
    margin: .25rem 0 .55rem;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
    line-height: 1.16;
    color: var(--la-ink);
    letter-spacing: -.02em;
}

.la-article-head .la-article-intro {
    margin: 0;
    font-size: .96rem;
    line-height: 1.6;
    color: var(--la-ink-soft);
    max-width: none;
}

.article-section {
    padding-top: 1.4rem;
    margin-top: 1.4rem;
    border-top: 1px solid var(--la-line-soft);
    scroll-margin-top: 4.5rem;
}

.article-section:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.section-heading {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .7rem;
    font-weight: 800;
    font-size: clamp(1.08rem, .98rem + .5vw, 1.32rem);
    color: var(--la-accent-ink);
    letter-spacing: -.015em;
}

.section-heading::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--la-accent), var(--la-violet));
    box-shadow: 0 0 0 3px var(--la-accent-soft);
    flex-shrink: 0;
}

.subsection-heading {
    scroll-margin-top: 4.5rem;
    margin: 1.2rem 0 .55rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--la-violet);
}

.subsubsection-heading {
    margin: .9rem 0 .4rem;
    font-size: .89rem;
    font-weight: 700;
    color: var(--la-ink);
}

.logic-article p {
    margin: 0 0 .75rem;
    line-height: 1.65;
    font-size: .93rem;
    color: var(--la-ink-soft);
    max-width: 76ch;
}

.logic-article strong {
    color: var(--la-ink);
    font-weight: 700;
}

.logic-article p code,
.article-table code,
.article-list code {
    background: var(--la-line-soft);
    border: 1px solid var(--la-line);
    color: var(--la-accent-ink);
    padding: .1em .36em;
    border-radius: 5px;
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: .85em;
}

.article-list {
    margin: 0 0 .85rem;
    padding-left: 1.1rem;
    max-width: 76ch;
    color: var(--la-ink-soft);
}

.article-list li {
    margin: 0 0 .34rem;
    line-height: 1.55;
    font-size: .91rem;
}

.article-list li::marker {
    color: var(--la-accent);
}

.article-quote {
    position: relative;
    margin: 0 0 .85rem;
    padding: .65rem .9rem .65rem 2.6rem;
    background: linear-gradient(135deg, var(--la-violet-soft), #eef2ff);
    border-left: 3px solid var(--la-violet);
    border-radius: 0;
    color: #4c1d95;
    font-size: .92rem;
    font-style: italic;
    max-width: 68ch;
}

.article-quote::before {
    content: "\201C";
    position: absolute;
    left: .75rem;
    top: .05rem;
    font-family: Georgia, serif;
    font-size: 1.9rem;
    font-style: normal;
    line-height: 1;
    color: var(--la-violet);
    opacity: .5;
}

/* ---- Tables -------------------------------------------------------------*/

.table-wrap {
    overflow-x: auto;
    margin: 0 0 1rem;
    border: 1px solid var(--la-line);
    border-radius: 0;
    background: var(--la-surface);
}

.article-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .84rem;
    min-width: 380px;
}

.article-table th {
    text-align: left;
    background: linear-gradient(120deg, var(--la-accent-soft), var(--la-violet-soft));
    color: var(--la-accent-ink);
    font-weight: 700;
    padding: .5rem .7rem;
    white-space: nowrap;
}

.article-table td {
    padding: .48rem .7rem;
    border-top: 1px solid var(--la-line-soft);
    color: var(--la-ink-soft);
}

.article-table tr:hover td {
    background: var(--la-line-soft);
}

/* ---- Code blocks ----------------------------------------------------- */

/* Mirrors the interactive tool's own .code-block chrome (same gradient
   background, glowing top hairline, gradient header) so a reader scrolling
   from the practice card into the article sees one consistent, colorful
   code presentation rather than two different styles. */
.code-block {
    position: relative;
    isolation: isolate;
    margin: 0 0 1rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--la-code-border);
    background: linear-gradient(145deg, var(--la-code-bg) 0%, var(--la-code-bg2) 100%);
    box-shadow: 0 10px 26px rgba(2, 6, 23, .28), inset 0 1px 0 rgba(125, 211, 252, .12);
    max-width: 76ch;
}

.code-block::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 9%;
    left: 9%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .9), rgba(244, 114, 182, .75), transparent);
    pointer-events: none;
}

.code-block__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .42rem .5rem .42rem .75rem;
    background: linear-gradient(90deg, var(--la-code-header-a) 0%, var(--la-code-header-b) 58%, var(--la-code-header-c) 100%);
    border-bottom: 1px solid var(--la-code-border);
}

.code-block__lang {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #bae6fd;
}

.code-block__lang::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 9px rgba(56, 189, 248, .85);
}

.code-block__header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.code-block__copy,
.code-block__fullscreen {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .26rem .5rem;
    background: transparent;
    border: 1px solid var(--la-code-border);
    border-radius: 6px;
    color: #cfd3d9;
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.code-block__fullscreen {
    padding: .26rem .5rem;
}

.code-block__copy:hover,
.code-block__fullscreen:hover {
    background: rgba(255, 255, 255, .06);
    border-color: #3b4149;
    color: #fff;
}

.code-block__copy.is-copied {
    color: #6ee7b7;
    border-color: #1f6d4c;
}

.code-block__fullscreen[aria-pressed="true"] {
    color: #93c5fd;
    border-color: #2563eb;
    background: rgba(37, 99, 235, .16);
}

.copy-icon,
.code-block__fullscreen svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    flex-shrink: 0;
}

.code-block__pre {
    position: relative;
    margin: 0;
    padding: .65rem .85rem;
    overflow-x: auto;
    background-image: radial-gradient(circle at 88% 0%, rgba(37, 99, 235, .14), transparent 34%);
}

.logic-article .code-block__code {
    font-family: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .004em;
    color: var(--la-code-text);
    white-space: pre;
    tab-size: 4;
}

/* ---- Code block full screen -------------------------------------------
   The header's fullscreen button (injected by logic-article.js next to
   Copy) toggles this class on the block itself rather than opening a
   separate modal — the block already has all the chrome a fullscreen
   code viewer needs, so it just grows to fill the viewport in place. */
.code-block.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 300;
    margin: 0;
    max-width: none;
    border-radius: 0;
    border-width: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.code-block.is-fullscreen .code-block__pre {
    flex: 1 1 auto;
    max-height: none;
}

.logic-article .code-block.is-fullscreen .code-block__code {
    font-size: 1rem;
    line-height: 1.7;
}

.page-scroll.is-code-fullscreen-locked {
    overflow: hidden;
}

.code-block__code::selection {
    color: #111827;
    background: #fbbf24;
}

/* Same category set and colors as the interactive tool's own
   .token-* classes (java-logic-development.css), so Java snippets look
   identical whether they appear in the practice card or down here. */
.tok-comment { color: #a8b3c7; font-style: italic; }
.tok-string { color: #86efac; }
.tok-keyword { color: #f472b6; font-weight: 800; }
.tok-number { color: #fde047; }
.tok-annotation { color: #67e8f9; font-weight: 700; }
.tok-type { color: #60a5fa; font-weight: 700; }
.tok-method { color: #fbbf24; }
.tok-literal { color: #c4b5fd; font-weight: 700; }
.tok-operator { color: #fb7185; font-weight: 650; }

/* ---- Back to top --------------------------------------------------------*/

.la-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .35);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.la-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.la-back-to-top:hover {
    filter: brightness(1.08);
}

.la-back-to-top svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ---- Footer -------------------------------------------------------------*/

.la-footer {
    background: #172554;
    color: #c7d1ea;
    border-top: 1px solid #24356f;
}

.la-footer a {
    color: inherit;
    text-decoration: none;
}

.la-footer-top {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.25rem 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.la-footer-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
}

.la-footer-brand img {
    display: block;
    border-radius: 8px;
}

.la-footer-brand strong {
    display: block;
    font-size: 1.02rem;
    color: #fff;
}

.la-footer-brand span {
    display: block;
    font-size: .74rem;
    color: #93a3d1;
}

.la-footer-desc {
    font-size: .82rem;
    line-height: 1.6;
    color: #a6b3da;
    max-width: 36ch;
    margin: 0 0 1rem;
}

.la-footer-col h3 {
    margin: 0 0 .7rem;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7dabff;
}

.la-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.la-footer-col a {
    font-size: .8rem;
    color: #b7c2e6;
    transition: color .15s ease;
}

.la-footer-col a:hover {
    color: #fff;
}

.la-footer-bottom {
    border-top: 1px solid #24356f;
    padding: .9rem 1.25rem;
}

.la-footer-bottom-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .76rem;
    color: #8b97c2;
}

.la-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.la-footer-legal a {
    color: #8b97c2;
}

.la-footer-legal a:hover {
    color: #fff;
}

/* ---- Responsive: below 1180px drop the right links column into the
   normal document flow (non-sticky) so the main two columns keep room
   to breathe; below 900px collapse the left TOC into a sticky horizontal
   pill strip, matching how the tool itself adapts to small screens. ---- */

@media (max-width: 1180px) {
    .la-shell {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas:
            "toc content"
            "links links";
    }

    .la-sidebar {
        grid-area: toc;
    }

    .la-content {
        grid-area: content;
    }

    .la-links {
        grid-area: links;
        position: static;
        max-height: none;
    }

    .la-links-scroll {
        overflow-y: visible;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 1.5rem;
    }

    .la-links-group {
        min-width: 180px;
        flex: 1 1 180px;
    }
}

@media (max-width: 900px) {
    .la-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "toc"
            "content"
            "links";
        padding: 0 4px 1.5rem;
        gap: .75rem;
    }

    .la-sidebar {
        position: sticky;
        top: 0;
        z-index: 5;
        max-height: none;
        flex-direction: row;
        align-items: center;
        border-radius: 0;
        margin: 0 -4px;
        border-left: none;
        border-right: none;
    }

    .la-sidebar-head {
        display: none;
    }

    .la-toc {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .5rem .6rem;
        gap: .35rem;
        -webkit-overflow-scrolling: touch;
    }

    .la-toc-link {
        flex-shrink: 0;
        white-space: nowrap;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 7px;
    }

    .la-toc-link.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--la-accent);
    }

    .la-content {
        padding: .9rem 1rem 1.2rem;
    }

    .la-footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .la-article-head h2 {
        font-size: 1.3rem;
    }

    .logic-article .code-block__code {
        font-size: .78rem;
    }

    .la-back-to-top {
        width: 38px;
        height: 38px;
        right: .7rem;
        bottom: .7rem;
    }

    .la-footer-top {
        grid-template-columns: 1fr;
        padding: 2rem 1.1rem 1.25rem;
    }

    .la-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}