/*
 * Programming Roadmap - dedicated article stylesheet.
 * Purpose-built for this section (not a copy of tutorial-article.css):
 * compact spacing (4px column gutter, 4/8/12/16px spacing scale, no
 * 24px+ padding) and a colorful, chapter-accented visual system layered
 * on top of the shared site tokens from styles.css. Markup/class names
 * match programming-roadmap/includes/{sidebar,content-renderer}.php, and
 * the JS hooks (data-pe-*, .pe-module/.pe-chapter/.pe-topic-list/
 * .pe-topic-link.is-active/.pe-rail-col, body.pe-sidebar-open/
 * pe-rail-open) are the same ones assets/js/tutorial-article.js expects,
 * so that shared behaviour script keeps working unmodified.
 */

:root {
    --pr-1: 4px;
    --pr-2: 8px;
    --pr-3: 12px;
    --pr-4: 16px;
    --pr-5: 20px;

    /* Fresh blue + emerald primary pair (no purple/violet anywhere in the
       palette) with teal/amber/rose/sky as supporting accents. */
    --pr-blue: #2563eb;
    --pr-blue-soft: #eff6ff;
    --pr-teal: #0d9488;
    --pr-teal-soft: #f0fdfa;
    --pr-emerald: #059669;
    --pr-emerald-soft: #ecfdf5;
    --pr-amber: #b45309;
    --pr-amber-soft: #fffbeb;
    --pr-rose: #be123c;
    --pr-rose-soft: #fff1f2;
    --pr-sky: #0369a1;
    --pr-sky-soft: #f0f9ff;
    --pr-orange: #c2410c;
    --pr-orange-soft: #fff7ed;
    --pr-cyan: #0e7490;
    --pr-cyan-soft: #ecfeff;

    --pr-ink: #101828;
    --pr-ink-soft: #344054;
    --pr-muted: #667085;
    --pr-line: #e4e7ec;
    --pr-surface: #ffffff;
    --pr-surface-tint: #f8fafc;
    /* Square cards - kept as variables (rather than hardcoding 0 on every
       rule) so the whole section's corner treatment stays a single toggle. */
    --pr-radius: 0;
    --pr-radius-sm: 0;
    --pr-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);

    --pr-nav-h: 54px;
    /* Fallback total offset (navbar + sticky chapter header) for the
       scroll-margin-top rules below, used only until roadmap-article.js
       measures the real stuck position/height of .pe-sticky-head - which
       varies with topic-title wrapping and the mobile-bar's extra offset
       at narrow widths - and overwrites this via inline style on :root. */
    --pr-scroll-offset: 118px;

    /* Article body copy uses a serif reading face (falls back to widely
       installed system serifs - no external font request needed) while
       headings/UI keep the site's sans-serif for contrast. */
    --pr-serif: Georgia, Cambria, "Times New Roman", Times, serif;
}

/* Every icon in this section is a plain single-path SVG with no fill
   attribute of its own, so it always needs `fill: currentColor` to pick
   up whatever `color` a given rule sets - otherwise the browser default
   (opaque black) wins regardless of `color`. */
svg {
    fill: currentColor;
}

/* ---------- Slim themed scrollbars ----------
   This stylesheet only ever loads on Programming Roadmap pages, so these
   can target the real page scrollbar (html) directly - no extra page-level
   scoping class needed. Firefox gets the two-value shorthand; WebKit/Blink
   get the fuller pseudo-element treatment. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--pr-blue) transparent;
}

html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pr-blue), var(--pr-teal));
    border-radius: 999px;
    border: 2px solid var(--color-background);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--pr-teal), var(--pr-blue));
}

.pe-sidebar-scroll,
.pe-rail-col,
.pe-toc-list {
    scrollbar-width: thin;
    scrollbar-color: var(--pr-blue) transparent;
}

.pe-sidebar-scroll::-webkit-scrollbar,
.pe-rail-col::-webkit-scrollbar,
.pe-toc-list::-webkit-scrollbar {
    width: 6px;
}

.pe-sidebar-scroll::-webkit-scrollbar-thumb,
.pe-rail-col::-webkit-scrollbar-thumb,
.pe-toc-list::-webkit-scrollbar-thumb {
    background: var(--pr-blue);
    border-radius: 999px;
}

.pe-sidebar-scroll::-webkit-scrollbar-track,
.pe-rail-col::-webkit-scrollbar-track,
.pe-toc-list::-webkit-scrollbar-track {
    background: transparent;
}

.pe-code-body {
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}

.pe-code-body::-webkit-scrollbar {
    height: 6px;
}

.pe-code-body::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 999px;
}

.pe-code-body::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.pe-code-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Navbar (unique to Programming Roadmap pages) ----------
   Scoped under body.pr-roadmap-page so this treatment applies only here
   and never touches .site-header on the rest of the site. A dark
   charcoal-to-teal base - deliberately not purple - with a thin multicolor
   accent line keeps it "unique" without competing with the colorful
   heading chips below it. Also compact: shorter than the sitewide 72px
   nav-shell, with the body's fixed 73px top offset overridden to match so
   content isn't pushed down further than the header actually is. */
.pr-roadmap-page .site-header {
    background: linear-gradient(100deg, #0b1120 0%, #0f2e3d 55%, #0f766e 100%);
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(11, 17, 32, 0.35);
}

.pr-roadmap-page .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pr-amber), var(--pr-rose), var(--pr-blue), var(--pr-teal));
}

.pr-roadmap-page .nav-shell {
    min-height: var(--pr-nav-h);
}

.pr-roadmap-page .brand-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 0.86rem;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.pr-roadmap-page .brand-text strong {
    color: #ffffff;
    font-size: 0.92rem;
}

.pr-roadmap-page .brand-text span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
}

.pr-roadmap-page .nav-links a {
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.86rem;
}

.pr-roadmap-page .nav-links a:hover,
.pr-roadmap-page .nav-links a:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.pr-roadmap-page .menu-toggle {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}

.pr-roadmap-page .menu-toggle-line {
    background: #ffffff;
}

body.pr-roadmap-page {
    padding-top: var(--pr-nav-h);
}

/* ---------- Progress bar ---------- */
.pe-progress {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 3px;
    background: transparent;
}

.pe-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--pr-blue), var(--pr-teal), var(--pr-amber));
    transition: width 80ms linear;
}

/* ---------- Shell / breadcrumb ---------- */
.pe-shell {
    width: min(100% - var(--pr-4), 1520px);
    margin-inline: auto;
}

.pe-topbar {
    display: none;
}

/* ---------- 3-column layout ---------- */
.pe-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) 232px;
    column-gap: var(--pr-1);
    row-gap: var(--pr-1);
    align-items: start;
    padding: var(--pr-2) 0 var(--pr-5);
}

/* ---------- Mobile toggle bar ---------- */
.pe-mobile-bar {
    display: none;
    gap: var(--pr-1);
}

.pe-mobile-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--pr-2) var(--pr-2);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pr-ink);
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius-sm);
    cursor: pointer;
}

.pe-mobile-toggle svg {
    width: 15px;
    height: 15px;
    fill: var(--pr-blue);
}

/* ---------- Sidebar (left) ---------- */
.pe-sidebar-col {
    position: sticky;
    top: calc(var(--pr-nav-h) + var(--pr-1));
    max-height: calc(100vh - var(--pr-nav-h) - 12px);
    display: flex;
    flex-direction: column;
    /* Same guard as .pe-article-col/.pe-rail-col, applied here too so a
       future long chapter/topic title can't force this column wider. */
    overflow-wrap: anywhere;
}

.pe-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-card-shadow);
    overflow: hidden;
}

.pe-sidebar-head {
    display: flex;
    align-items: center;
    gap: var(--pr-2);
    padding: var(--pr-3);
    background: linear-gradient(135deg, var(--pr-blue) 0%, var(--pr-teal) 100%);
}

.pe-sidebar-head-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 4px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--pr-radius-sm);
}

.pe-sidebar-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pe-sidebar-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
}

.pe-sidebar-count {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.82);
}

/* ---------- Sidebar reading-progress ----------
   Sits between the head and the scrollable chapter list, so it stays
   visible for as long as the sidebar itself is on screen (the sidebar
   column is already position: sticky) without needing its own sticky
   rule or a second scroll container. */
.pe-sidebar-progress {
    padding: var(--pr-2) var(--pr-3);
    border-bottom: 1px solid var(--pr-line);
}

.pe-sidebar-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pr-muted);
}

.pe-sidebar-progress-head [data-pe-sidebar-progress-label] {
    font-weight: 800;
    color: var(--pr-blue);
}

.pe-sidebar-progress-track {
    height: 6px;
    background: var(--pr-surface-tint);
    border: 1px solid var(--pr-line);
}

.pe-sidebar-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--pr-blue), var(--pr-teal));
    transition: width 120ms linear;
}

.pe-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--pr-2) 4px;
}

.pe-module {
    margin: 0;
}

.pe-chapter {
    background: var(--pr-surface-tint);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius-sm);
}

.pe-chapter + .pe-chapter {
    margin-top: var(--pr-1);
}

.pe-chapter-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px var(--pr-2);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--pr-ink);
    list-style: none;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.pe-chapter-title::-webkit-details-marker {
    display: none;
}

.pe-chapter-title:hover {
    background: var(--pr-blue-soft);
}

.pe-chevron {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    transition: transform 150ms ease;
    color: var(--pr-blue);
}

.pe-chapter[open] > .pe-chapter-title .pe-chevron {
    transform: rotate(90deg);
}

.pe-chapter.has-active {
    background: var(--pr-surface);
}

.pe-chapter.has-active > .pe-chapter-title {
    color: var(--pr-blue);
    background: var(--pr-blue-soft);
    border-left-color: var(--pr-blue);
}

.pe-topic-list {
    margin: 2px 0 4px;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--pr-line);
    margin-left: 12px;
}

.pe-topic-link,
.pe-topic-upcoming {
    display: block;
    padding: 5px 8px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--pr-ink-soft);
}

.pe-topic-link {
    font-weight: 500;
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.pe-topic-link:hover,
.pe-topic-link:focus-visible {
    color: var(--pr-teal);
    background: var(--pr-teal-soft);
}

.pe-topic-link.is-active {
    color: var(--pr-teal);
    font-weight: 800;
    background: var(--pr-teal-soft);
    border-left-color: var(--pr-teal);
    border-left-width: 3px;
}

.pe-topic-upcoming {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--pr-muted);
    opacity: 0.75;
}

.pe-topic-upcoming em {
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pr-amber);
}

/* ---------- Article column ---------- */
.pe-article-col {
    min-width: 0;
    /* Inherited by every heading/paragraph/list item below (title, lede,
       callout, article body) - without it, a long unbroken token (a class
       name like "ExpressionChangedAfterItHasBeenCheckedError", a URL, a
       long identifier) has no wrap opportunity and forces this column -
       and from there the whole page - wider than the viewport instead of
       breaking onto a new line. min-width: 0 above only lets the column
       shrink in the grid; it doesn't make unbreakable text itself wrap. */
    overflow-wrap: anywhere;
}

/* Sticky "chapter header" - pinned just below the navbar so the reader
   always knows which chapter/topic they're in, replacing the role a
   prev/next strip would otherwise play. Kept outside .pe-article-card so
   its own background can sit flush against the page while the card
   scrolls beneath it. */
.pe-sticky-head {
    position: sticky;
    top: var(--pr-nav-h);
    z-index: 30;
    margin: 0 0 var(--pr-2);
    padding: var(--pr-2) var(--pr-1) var(--pr-2);
    background: var(--color-background);
    border-bottom: 1px solid var(--pr-line);
}

.pe-article-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-card-shadow);
    padding: var(--pr-4);
}

.pe-eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pr-2);
    margin-bottom: 4px;
}

.pe-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: linear-gradient(135deg, var(--pr-blue), var(--pr-teal));
    border-radius: 999px;
}

.pe-meta {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--pr-teal);
}

.pe-article-title {
    margin: 0;
    font-size: clamp(1.28rem, 1.1rem + 0.8vw, 1.62rem);
    line-height: 1.2;
    color: var(--pr-ink);
}

.pe-article-lede {
    font-family: var(--pr-serif);
    font-size: 1.04rem;
    font-weight: 400;
    font-style: italic;
    color: var(--pr-ink-soft);
    margin-bottom: var(--pr-3);
    line-height: 1.6;
}

.pe-callout {
    display: flex;
    gap: var(--pr-2);
    padding: var(--pr-3);
    margin: 0 0 var(--pr-3);
    background: var(--pr-amber-soft);
    border: 1px solid #fde68a;
    border-left: 3px solid var(--pr-amber);
    border-radius: var(--pr-radius-sm);
    font-size: 0.86rem;
    font-weight: 500;
    color: #78350f;
}

.pe-callout svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--pr-amber);
}

.pe-callout strong {
    color: #78350f;
}

.pe-callout p {
    margin: 0;
}

/* ---------- Article body typography ---------- */
/* Section headings get a full colored highlight chip (not just a rule),
   cycling through the palette so a long roadmap doesn't read as one
   monotone wall of headings. */
.pe-article-body h2 {
    margin: var(--pr-5) 0 var(--pr-3);
    padding: 8px var(--pr-3);
    background: var(--pr-blue-soft);
    border-left: 4px solid var(--pr-blue);
    border-radius: var(--pr-radius-sm);
    font-size: 1.12rem;
    color: var(--pr-blue);
    scroll-margin-top: var(--pr-scroll-offset);
}

.pe-article-body h2:nth-of-type(4n+2) {
    background: var(--pr-teal-soft);
    border-left-color: var(--pr-teal);
    color: var(--pr-teal);
}

.pe-article-body h2:nth-of-type(4n+3) {
    background: var(--pr-emerald-soft);
    border-left-color: var(--pr-emerald);
    color: var(--pr-emerald);
}

.pe-article-body h2:nth-of-type(4n) {
    background: var(--pr-amber-soft);
    border-left-color: var(--pr-amber);
    color: #78350f;
}

.pe-article-body h2:first-child {
    margin-top: 0;
}

.pe-article-body h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: var(--pr-3) 0 6px;
    font-size: 1.02rem;
    color: var(--pr-teal);
    scroll-margin-top: var(--pr-scroll-offset);
}

.pe-article-body h3::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--pr-teal);
}

.pe-article-body h3:nth-of-type(3n+2)::before {
    background: var(--pr-emerald);
}

.pe-article-body h3:nth-of-type(3n)::before {
    background: var(--pr-amber);
}

.pe-article-body h3:nth-of-type(3n+2) {
    color: var(--pr-emerald);
}

.pe-article-body h3:nth-of-type(3n) {
    color: #b45309;
}

.pe-article-body h4 {
    margin: var(--pr-2) 0 4px;
    font-size: 0.94rem;
    color: var(--pr-ink);
    scroll-margin-top: var(--pr-scroll-offset);
}

.pe-article-body p {
    margin: 0 0 var(--pr-2);
    color: var(--pr-ink-soft);
    font-family: var(--pr-serif);
    line-height: 1.7;
    font-size: 1.02rem;
}

.pe-article-body ul,
.pe-article-body ol {
    margin: 0 0 var(--pr-2);
    padding-left: 20px;
    color: var(--pr-ink-soft);
    font-family: var(--pr-serif);
    line-height: 1.65;
    font-size: 1.02rem;
}

.pe-article-body li {
    margin-bottom: 4px;
}

.pe-article-body li::marker {
    color: var(--pr-blue);
}

.pe-article-body hr {
    margin: var(--pr-3) 0;
    border: none;
    border-top: 1px dashed var(--pr-line);
}

.pe-article-body strong {
    color: var(--pr-ink);
    font-weight: 800;
}

.pe-article-body code {
    padding: 1px 5px;
    font-size: 0.86em;
    color: var(--pr-rose);
    background: var(--pr-rose-soft);
    border-radius: 4px;
}

/* The generic inline-code rule above also matches the <code> element
   inside fenced code blocks (it is a descendant of .pe-article-body too) -
   reset it there so the rose "inline code chip" background doesn't bleed
   per-line into the code block, which already has its own token colors. */
.pe-code-pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    background: none;
    border-radius: 0;
}

.pe-task-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    list-style: none;
    margin-left: -20px;
}

.pe-task-box {
    flex: 0 0 auto;
    color: var(--pr-teal);
    line-height: 1.6;
}

/* ---------- Highlight blocks ----------
   A small, reusable "different information" system: caution asides are
   auto-detected from the roadmap's own "Do not ..." / "Avoid ..."
   sentences (content-renderer.php), while tip/note/important variants are
   available for any `> ` blockquote (optionally prefixed "Tip:", "Note:",
   "Important:", "Warning:") so future chapters can use them directly. */
.pe-highlight {
    display: flex;
    gap: var(--pr-2);
    padding: var(--pr-2) var(--pr-3);
    margin: 0 0 var(--pr-2);
    border: 1px solid var(--pr-line);
    border-left: 3px solid var(--pr-muted);
    border-radius: var(--pr-radius-sm);
    font-family: var(--pr-serif);
    font-size: 0.96rem;
    line-height: 1.6;
}

.pe-highlight svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.pe-highlight p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
}

.pe-highlight-label {
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.pe-highlight--caution {
    background: var(--pr-rose-soft);
    border-left-color: var(--pr-rose);
    color: #881337;
}

.pe-highlight--caution svg { color: var(--pr-rose); }
.pe-highlight--caution .pe-highlight-label { color: var(--pr-rose); }

.pe-highlight--tip {
    background: var(--pr-teal-soft);
    border-left-color: var(--pr-teal);
    color: #115e59;
}

.pe-highlight--tip svg { color: var(--pr-teal); }
.pe-highlight--tip .pe-highlight-label { color: var(--pr-teal); }

.pe-highlight--note {
    background: var(--pr-sky-soft);
    border-left-color: var(--pr-sky);
    color: #0c4a6e;
}

.pe-highlight--note svg { color: var(--pr-sky); }
.pe-highlight--note .pe-highlight-label { color: var(--pr-sky); }

.pe-highlight--important {
    background: var(--pr-emerald-soft);
    border-left-color: var(--pr-emerald);
    color: #065f46;
}

.pe-highlight--important svg { color: var(--pr-emerald); }
.pe-highlight--important .pe-highlight-label { color: var(--pr-emerald); }

/* ---------- Flow diagrams ----------
   The roadmap's inline "A / arrow / B / arrow / C" flow sequences (e.g.
   "Java Source Code -> Compiler -> Bytecode -> JVM") are detected in
   content-renderer.php and rendered here as a distinct centered node
   diagram instead of a plain paragraph. */
.pe-diagram-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--pr-4) var(--pr-3);
    margin: 0 0 var(--pr-3);
    background: var(--pr-surface-tint);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
}

.pe-diagram-node {
    padding: 7px var(--pr-3);
    min-width: 160px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pr-blue);
    background: var(--pr-blue-soft);
    border: 1px solid #bfdbfe;
    border-radius: var(--pr-radius-sm);
}

/* Color cycle uses an explicit class per node (set in content-renderer.php
   as index % 4) rather than :nth-of-type - the arrow spans between nodes
   share the same <span> tag, so :nth-of-type counts them too and collapses
   what should be a 4-color cycle down to 2. */
.pe-diagram-node.pe-diagram-c1 {
    color: var(--pr-teal);
    background: var(--pr-teal-soft);
    border-color: #99f6e4;
}

.pe-diagram-node.pe-diagram-c2 {
    color: var(--pr-emerald);
    background: var(--pr-emerald-soft);
    border-color: #a7f3d0;
}

.pe-diagram-node.pe-diagram-c3 {
    color: #78350f;
    background: var(--pr-amber-soft);
    border-color: #fde68a;
}

.pe-diagram-arrow {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pr-ink-soft);
}

/* Horizontal variant: a single-line "A -> B -> C -> ..." sequence (like
   the roadmap overview or a "learn these in this order" list) rendered
   as a wrapping row of numbered chips instead of a vertical stack, which
   would be far too tall for a chain this long. */
.pe-diagram-block--flow {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 6px;
    counter-reset: pe-flow-step;
}

.pe-diagram-block--flow .pe-diagram-node {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 12px 5px 6px;
    font-size: 0.82rem;
    counter-increment: pe-flow-step;
}

.pe-diagram-block--flow .pe-diagram-node::before {
    content: counter(pe-flow-step);
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.66rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--pr-blue);
    border-radius: 999px;
}

.pe-diagram-block--flow .pe-diagram-node.pe-diagram-c1::before { background: var(--pr-teal); }
.pe-diagram-block--flow .pe-diagram-node.pe-diagram-c2::before { background: var(--pr-emerald); }
.pe-diagram-block--flow .pe-diagram-node.pe-diagram-c3::before { background: #b45309; }

.pe-diagram-arrow--flow {
    align-self: center;
    font-size: 1.15rem;
    color: var(--pr-ink-soft);
}

/* Caption above a labeled chain (e.g. "Core Java Depth" above its chip
   row) and the standalone connector between successive labeled chains -
   see pr_render_labeled_chain() / pr_render_lone_arrow(). */
.pe-diagram-caption {
    margin: 0 0 6px;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pr-muted);
    text-align: center;
}

.pe-diagram-connector {
    display: flex;
    justify-content: center;
    margin: -6px 0 var(--pr-3);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--pr-ink-soft);
}

@media (max-width: 640px) {
    .pe-diagram-block--flow {
        justify-content: flex-start;
    }
}

/* ---------- Tables ---------- */
.pe-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--pr-2);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius-sm);
}

.pe-article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.pe-article-body th,
.pe-article-body td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--pr-line);
}

.pe-article-body thead th {
    background: var(--pr-blue-soft);
    color: var(--pr-blue);
    font-weight: 800;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pe-article-body tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- Code blocks ----------
   A dark panel (not the light article surface) so code reads as a
   distinct "terminal" surface, with a larger, more legible font than
   the surrounding prose. */
.pe-code-block {
    margin: 0 0 var(--pr-3);
    background: #0b1220;
    border-radius: var(--pr-radius-sm);
    overflow: hidden;
    border: 1px solid #1e293b;
    box-shadow: var(--pr-card-shadow);
}

.pe-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pr-2);
    padding: 7px var(--pr-3);
    background: #131c2e;
    border-bottom: 2px solid var(--pr-blue);
}

.pe-lang-sql .pe-code-head { border-bottom-color: var(--pr-teal); }
.pe-lang-python .pe-code-head { border-bottom-color: var(--pr-emerald); }
.pe-lang-javascript .pe-code-head { border-bottom-color: var(--pr-rose); }
.pe-lang-typescript .pe-code-head { border-bottom-color: var(--pr-sky); }
.pe-lang-html .pe-code-head { border-bottom-color: var(--pr-orange); }
.pe-lang-go .pe-code-head { border-bottom-color: var(--pr-cyan); }
.pe-lang-plain .pe-code-head { border-bottom-color: var(--pr-amber); }

.pe-code-lang {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #93c5fd;
}

.pe-lang-sql .pe-code-lang { color: #5eead4; }
.pe-lang-python .pe-code-lang { color: #6ee7b7; }
.pe-lang-javascript .pe-code-lang { color: #fda4af; }
.pe-lang-typescript .pe-code-lang { color: #7dd3fc; }
.pe-lang-html .pe-code-lang { color: #fdba74; }
.pe-lang-go .pe-code-lang { color: #67e8f9; }
.pe-lang-plain .pe-code-lang { color: #fcd34d; }

.pe-code-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pe-copy-btn,
.pe-fullscreen-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    cursor: pointer;
}

.pe-copy-btn:hover,
.pe-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.pe-copy-btn svg,
.pe-fullscreen-btn svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.pe-copy-btn.is-copied {
    color: #86efac;
    border-color: #86efac;
}

.pe-copy-btn.is-error {
    color: #fca5a5;
    border-color: #fca5a5;
}

.pe-fullscreen-btn[aria-pressed="true"] {
    background: var(--pr-blue);
    color: #ffffff;
    border-color: var(--pr-blue);
}

.pe-code-body {
    display: flex;
    overflow-x: auto;
}

.pe-code-lines {
    flex: 0 0 auto;
    padding: var(--pr-3) 8px;
    text-align: right;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
    background: #0e1626;
    user-select: none;
}

.pe-code-lines span {
    display: block;
}

.pe-code-pre {
    margin: 0;
    padding: var(--pr-3) var(--pr-4);
    overflow-x: auto;
    /* .pe-code-body is a flex row and this <pre> is a flex item - flex
       items default to min-width: auto, which lets an unwrapped long line
       (white-space: pre never wraps) refuse to shrink below its own
       intrinsic width and force the whole row - and the page - wider
       instead of scrolling internally via the overflow-x above. */
    min-width: 0;
    /* .pe-article-col sets overflow-wrap: anywhere so long prose tokens
       wrap instead of overflowing (see that rule's comment); as an
       inherited property that would reach in here too and wrap code onto
       extra lines, corrupting the exact formatting/indentation code is
       supposed to preserve. Code should scroll horizontally instead, via
       overflow-x above - so this opts back out of the inherited value. */
    overflow-wrap: normal;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #e2e8f0;
}

.pe-tok-com { color: #64748b; font-style: italic; }
.pe-tok-str { color: #86efac; }
.pe-tok-num { color: #fca5a5; }
.pe-tok-ann { color: #fcd34d; }
.pe-tok-kw  { color: #93c5fd; font-weight: 700; }
.pe-tok-fn  { color: #7dd3fc; }

/* ---------- Code full-screen overlay ---------- */
body.pe-code-fullscreen-open {
    overflow: hidden;
}

.pe-code-block.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.45);
}

.pe-code-block.is-fullscreen .pe-code-head {
    flex: 0 0 auto;
    padding: var(--pr-2) var(--pr-4);
}

.pe-code-block.is-fullscreen .pe-code-lang {
    font-size: 0.78rem;
}

.pe-code-block.is-fullscreen .pe-code-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.pe-code-block.is-fullscreen .pe-code-pre,
.pe-code-block.is-fullscreen .pe-code-lines {
    font-size: 1.08rem;
    line-height: 1.75;
    padding-top: var(--pr-4);
    padding-bottom: var(--pr-4);
}

/* ---------- Rail (right) ----------
   Each card gets a colored top accent (cycling through the palette) and a
   stronger hover/active highlight than a flat list, so the right column
   reads as "highlightable" rather than static text. */
.pe-rail-col {
    position: sticky;
    top: calc(var(--pr-nav-h) + var(--pr-1));
    max-height: calc(100vh - var(--pr-nav-h) - 12px);
    display: flex;
    flex-direction: column;
    gap: var(--pr-1);
    overflow-y: auto;
    /* Same reasoning as .pe-article-col: without this, a long unbreakable
       TOC heading (see the long-token comment there) forces the "On This
       Page" list - and this whole sticky column - wider than its slot,
       producing the horizontal scrollbar the rail otherwise has no reason
       to show. */
    overflow-wrap: anywhere;
}

.pe-rail-card {
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-top: 3px solid var(--pr-blue);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-card-shadow);
    padding: var(--pr-3);
}

.pe-rail-card:nth-of-type(2) { border-top-color: var(--pr-teal); }
.pe-rail-card:nth-of-type(3) { border-top-color: var(--pr-emerald); }
.pe-rail-card:nth-of-type(4) { border-top-color: var(--pr-amber); }

.pe-rail-title {
    margin: 0 0 var(--pr-2);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pr-blue);
}

.pe-rail-card--toc {
    padding: 0;
    display: flex;
    flex-direction: column;
    /* flex-shrink: 0 (not the old min-height: 0) so a long TOC can't lose the
       flex-shrink fight against the other rail cards, which default to
       min-height: auto and refuse to shrink below their content size - that
       left this the only compressible item, and it got squeezed to ~0px
       inside .pe-rail-col's own max-height + overflow-y: auto. It now holds a
       fixed height and scrolls its own list internally past that. */
    flex: 0 0 min(46vh, 420px);
    height: min(46vh, 420px);
    overflow: hidden;
}

.pe-rail-card--toc .pe-rail-title {
    margin: 0;
    padding: var(--pr-3) var(--pr-3) var(--pr-2);
    flex: 0 0 auto;
}

.pe-toc-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--pr-2) var(--pr-2);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.pe-toc-list li + li {
    margin-top: 1px;
}

.pe-toc-list a {
    display: block;
    padding: 6px 9px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--pr-ink-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.pe-toc-list a:hover {
    background: var(--pr-blue-soft);
    color: var(--pr-blue);
}

.pe-toc-list a.is-active {
    color: var(--pr-blue);
    font-weight: 800;
    background: var(--pr-blue-soft);
    border-left-color: var(--pr-blue);
    border-left-width: 3px;
}

.pe-link-list {
    display: flex;
    flex-direction: column;
    gap: var(--pr-1);
}

.pe-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: var(--pr-radius-sm);
    text-decoration: none;
    transition: background 120ms ease;
}

.pe-link-item:hover,
.pe-link-item:focus-visible {
    background: var(--pr-blue-soft);
}

.pe-link-item svg {
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 6px;
    box-sizing: border-box;
    fill: #ffffff;
    background: var(--pr-blue);
    border-radius: var(--pr-radius-sm);
}

.pe-link-item:nth-of-type(2n) svg {
    background: var(--pr-teal);
}

.pe-link-item:nth-of-type(3n) svg {
    background: var(--pr-emerald);
}

.pe-link-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pe-link-item-text strong {
    font-size: 0.82rem;
    color: var(--pr-ink);
}

.pe-link-item-text span {
    font-size: 0.72rem;
    color: var(--pr-muted);
}

.pe-rail-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--pr-muted);
}

/* ---------- Back to top ---------- */
.pe-back-to-top {
    position: fixed;
    right: var(--pr-4);
    bottom: var(--pr-4);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--pr-blue), var(--pr-teal));
    border: none;
    border-radius: var(--pr-radius-sm);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

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

.pe-back-to-top:hover {
    background: linear-gradient(135deg, var(--pr-teal), var(--pr-blue));
}

.pe-back-to-top svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ---------- Backdrop ---------- */
.pe-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    border: none;
    padding: 0;
    background: rgba(16, 24, 40, 0.5);
}

body.pe-sidebar-open .pe-backdrop,
body.pe-rail-open .pe-backdrop {
    display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .pe-layout {
        grid-template-columns: 216px minmax(0, 1fr);
    }

    .pe-rail-col {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        overflow: visible;
    }

    .pe-rail-card--toc {
        max-height: 320px;
    }
}

@media (max-width: 900px) {
    .pe-layout {
        grid-template-columns: 1fr;
    }

    .pe-mobile-bar {
        display: flex;
        position: sticky;
        top: var(--pr-nav-h);
        z-index: 40;
        margin: 0 0 var(--pr-2);
        padding: var(--pr-1) 0;
        background: var(--color-background);
    }

    .pe-sticky-head {
        top: calc(var(--pr-nav-h) + 46px);
    }

    .pe-sidebar-col,
    .pe-rail-col {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 95;
        width: min(88vw, 340px);
        max-height: none;
        padding: var(--pr-2);
        background: var(--color-background);
        transition: transform 200ms ease;
        overflow-y: auto;
        display: block;
    }

    .pe-sidebar-col {
        left: 0;
        transform: translateX(-100%);
    }

    .pe-rail-col {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    body.pe-sidebar-open .pe-sidebar-col {
        transform: translateX(0);
    }

    body.pe-rail-open .pe-rail-col {
        transform: translateX(0);
    }

    .pe-sidebar {
        height: 100%;
    }

    .pe-rail-card--toc {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .pe-article-card {
        padding: var(--pr-3);
    }

    .pe-back-to-top {
        right: var(--pr-3);
        bottom: var(--pr-3);
        width: 38px;
        height: 38px;
    }
}