/* Content list spacing - scoped to .content to avoid affecting sidebar TOC */
.content li:not(:last-of-type) {
    margin-block-end: 0.5em;
}

.content :is(ul, ol) + :is(ul, ol),
.content li :is(ul, ol) {
    margin-block-start: 0.5em;
}

/* Reduces the top margin of an H2 that directly follows an H1 */
h1 + h2 {
    margin-top: -2.0rem;
}

/* Version Switcher Styles */
.version-selector-container {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.version-selector {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-popup-border);
    background-color: var(--theme-popup-bg);
    color: var(--fg);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    max-width: 180px;
}

.version-selector:hover {
    border-color: var(--theme-hover);
    background-color: var(--theme-hover);
}

.version-selector:focus {
    outline: 2px solid var(--links);
    outline-offset: 2px;
}

/* Version Badge */
.version-badge {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    background-color: var(--theme-popup-bg);
    border: 1px solid var(--theme-popup-border);
    vertical-align: middle;
}

.version-badge-snapshot {
    background-color: #fbbf24;
    color: #78350f;
    border-color: #f59e0b;
}

.version-badge-stable {
    background-color: #22c55e;
    color: #14532d;
    border-color: #16a34a;
}

/* Outdated Version Warning Banner */
.version-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.version-warning-content {
    color: #78350f;
}

.version-warning-content strong {
    color: #92400e;
}

.version-warning-content p {
    margin: 0.5rem 0 0 0;
    line-height: 1.6;
}

.version-warning-content a {
    color: #c2410c;
    text-decoration: underline;
    font-weight: 600;
}

.version-warning-content a:hover {
    color: #9a3412;
}

/* Responsive adjustments */
@media screen and (max-width: 1080px) {
    .version-selector-container {
        margin-left: 5px;
    }

    .version-selector {
        max-width: 120px;
        font-size: 0.8rem;
        padding: 3px 6px;
    }

    .version-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        margin-left: 0.5rem;
    }
}

@media screen and (max-width: 768px) {
    .version-selector-container {
        display: none; /* Hide on very small screens to save space */
    }

    .version-badge {
        display: none;
    }

    .version-warning {
        padding: 0.75rem 1rem;
        margin: 1rem 0;
    }
}

/* Navigation Sidebar Link */
.nav-show-sidebar {
    color: var(--links);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.nav-show-sidebar:hover {
    color: var(--links-hover);
    text-decoration: underline;
}

.nav-show-sidebar-separator {
    color: var(--fg);
    opacity: 0.5;
}

/* ===== Sidebar TOC Spacing Adjustments ===== */

/* Style main chapter headings (1, 2, 3...) - slightly bigger with darker background */
.sidebar .chapter > li.chapter-item > a {
    font-size: 1.05em !important;
    font-weight: 600 !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    padding: 0.25em 0.5em !important;
    margin-left: -0.5em !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

/* Increase space BEFORE main chapter headings only (li.chapter-item)
   This creates visual separation between chapters (e.g., between 5 and 6) */
.sidebar .chapter > li.chapter-item {
    margin-top: 1.2em !important;
}

/* Remove space before the first chapter */
.sidebar .chapter > li.chapter-item:first-child {
    margin-top: 0 !important;
}

/* Remove space before section wrapper li (keeps sub-chapters tight to parent)
   The section wrapper is a plain <li> without .chapter-item class */
.sidebar .chapter > li:not(.chapter-item) {
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Hide section wrapper when chapter is collapsed (no expanded class) */
.sidebar .chapter > li.chapter-item:not(.expanded) + li:not(.chapter-item) {
    display: none !important;
}

/* Tighten spacing between sub-chapter items */
.sidebar .chapter .section > li {
    margin-bottom: 0.15em !important;
    margin-top: 0 !important;
}

/* ===== Heading Colors by Theme ===== */

/* Latte (light theme) - uses darker, more saturated colors */
html.latte h1, html.latte .content h1 { color: #1e66f5 !important; } /* Blue */
html.latte h2, html.latte .content h2 { color: #8839ef !important; } /* Mauve */
html.latte h3, html.latte .content h3 { color: #179299 !important; } /* Teal */
html.latte h4, html.latte .content h4 { color: #df8e1d !important; } /* Yellow */
html.latte h5, html.latte .content h5 { color: #40a02b !important; } /* Green */
html.latte h6, html.latte .content h6 { color: #e64553 !important; } /* Maroon */

/* Frappe (dark theme) */
html.frappe h1, html.frappe .content h1 { color: #8caaee !important; } /* Blue */
html.frappe h2, html.frappe .content h2 { color: #ca9ee6 !important; } /* Mauve */
html.frappe h3, html.frappe .content h3 { color: #81c8be !important; } /* Teal */
html.frappe h4, html.frappe .content h4 { color: #e5c890 !important; } /* Yellow */
html.frappe h5, html.frappe .content h5 { color: #a6d189 !important; } /* Green */
html.frappe h6, html.frappe .content h6 { color: #ea999c !important; } /* Maroon */

/* Macchiato (dark theme) */
html.macchiato h1, html.macchiato .content h1 { color: #8aadf4 !important; } /* Blue */
html.macchiato h2, html.macchiato .content h2 { color: #c6a0f6 !important; } /* Mauve */
html.macchiato h3, html.macchiato .content h3 { color: #8bd5ca !important; } /* Teal */
html.macchiato h4, html.macchiato .content h4 { color: #eed49f !important; } /* Yellow */
html.macchiato h5, html.macchiato .content h5 { color: #a6da95 !important; } /* Green */
html.macchiato h6, html.macchiato .content h6 { color: #ee99a0 !important; } /* Maroon */

/* Mocha (dark theme) */
html.mocha h1, html.mocha .content h1 { color: #89b4fa !important; } /* Blue */
html.mocha h2, html.mocha .content h2 { color: #cba6f7 !important; } /* Mauve */
html.mocha h3, html.mocha .content h3 { color: #94e2d5 !important; } /* Teal */
html.mocha h4, html.mocha .content h4 { color: #f9e2af !important; } /* Yellow */
html.mocha h5, html.mocha .content h5 { color: #a6e3a1 !important; } /* Green */
html.mocha h6, html.mocha .content h6 { color: #eba0ac !important; } /* Maroon */

/* Ensure heading links inherit their heading color */
html.latte :is(h1, h2, h3, h4, h5, h6) > a,
html.frappe :is(h1, h2, h3, h4, h5, h6) > a,
html.macchiato :is(h1, h2, h3, h4, h5, h6) > a,
html.mocha :is(h1, h2, h3, h4, h5, h6) > a {
    color: inherit !important;
}

/* ===== Sidebar TOC Level Colors (matching heading colors) ===== */

/* Latte theme - TOC colors */
html.latte .sidebar .chapter > li.chapter-item > a:not(.active) { color: #1e66f5 !important; } /* Blue - Level 1 */
html.latte .sidebar .chapter .section > li.chapter-item > a:not(.active) { color: #8839ef !important; } /* Mauve - Level 2 */
html.latte .sidebar .chapter .section .section > li.chapter-item > a:not(.active) { color: #179299 !important; } /* Teal - Level 3 */

/* Frappe theme - TOC colors */
html.frappe .sidebar .chapter > li.chapter-item > a:not(.active) { color: #8caaee !important; } /* Blue - Level 1 */
html.frappe .sidebar .chapter .section > li.chapter-item > a:not(.active) { color: #ca9ee6 !important; } /* Mauve - Level 2 */
html.frappe .sidebar .chapter .section .section > li.chapter-item > a:not(.active) { color: #81c8be !important; } /* Teal - Level 3 */

/* Macchiato theme - TOC colors */
html.macchiato .sidebar .chapter > li.chapter-item > a:not(.active) { color: #8aadf4 !important; } /* Blue - Level 1 */
html.macchiato .sidebar .chapter .section > li.chapter-item > a:not(.active) { color: #c6a0f6 !important; } /* Mauve - Level 2 */
html.macchiato .sidebar .chapter .section .section > li.chapter-item > a:not(.active) { color: #8bd5ca !important; } /* Teal - Level 3 */

/* Mocha theme - TOC colors */
html.mocha .sidebar .chapter > li.chapter-item > a:not(.active) { color: #89b4fa !important; } /* Blue - Level 1 */
html.mocha .sidebar .chapter .section > li.chapter-item > a:not(.active) { color: #cba6f7 !important; } /* Mauve - Level 2 */
html.mocha .sidebar .chapter .section .section > li.chapter-item > a:not(.active) { color: #94e2d5 !important; } /* Teal - Level 3 */

/* ===== Home Page Title Hiding ===== */
/* Hide the book title bar and any auto-generated h1 on the home page (identified by .hkj-logo) */
body:has(.hkj-logo) .menu-title { visibility: hidden; }
body:has(.hkj-logo) #content > main > h1:first-of-type { display: none; }

/* ===== Strapline Styles (uses h3 theme colors) ===== */

.hkj-strapline {
    text-align: center;
    text-transform: uppercase;
    font-style: normal;
    font-weight: lighter;
    margin: 2em 0;
}

.hkj-strapline, .hkj-strapline a { font-size: x-large !important; }

html.latte .hkj-strapline, html.latte .hkj-strapline a { color: #179299 !important; } /* Teal */
html.frappe .hkj-strapline, html.frappe .hkj-strapline a { color: #81c8be !important; } /* Teal */
html.macchiato .hkj-strapline, html.macchiato .hkj-strapline a { color: #8bd5ca !important; } /* Teal */
html.mocha .hkj-strapline, html.mocha .hkj-strapline a { color: #94e2d5 !important; } /* Teal */

/* ===== Theme-Aware Logo Styles ===== */

/* Default: show light logo, hide dark logo */
.hkj-logo-light { display: inline; }
.hkj-logo-dark { display: none; }

/* Frappe (dark theme) - show dark logo */
html.frappe .hkj-logo-light { display: none; }
html.frappe .hkj-logo-dark { display: inline; }

/* Macchiato (dark theme) - show dark logo */
html.macchiato .hkj-logo-light { display: none; }
html.macchiato .hkj-logo-dark { display: inline; }

/* Mocha (dark theme) - show dark logo */
html.mocha .hkj-logo-light { display: none; }
html.mocha .hkj-logo-dark { display: inline; }

/* ===== Pipeline Diagram Styles ===== */

.pipeline-diagram {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    overflow-x: auto;
    font-size: 1.05rem;
    line-height: 1.5;
    background: #fafbfc;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.pipeline-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
}

.pipeline-row-center {
    justify-content: center;
}

.pipeline-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 2.5px solid;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    text-align: center;
}

.pipeline-arrow {
    color: #424242;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0 0.15rem;
}

.pipeline-arrow-down {
    display: flex;
    justify-content: center;
    color: #424242;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.15rem 0;
    letter-spacing: 0.25em;
}

.pipeline-label {
    font-size: 0.85rem;
    color: #555;
    font-style: italic;
    white-space: nowrap;
}

.pipeline-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 1.5px dashed;
}

.pipeline-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* Colour palette — saturated borders, dark text for readability */
.pn-green  { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }
.pn-blue   { background: #e3f2fd; border-color: #1565c0; color: #0d47a1; }
.pn-orange { background: #fff3e0; border-color: #e65100; color: #bf360c; }
.pn-red    { background: #fce4ec; border-color: #c62828; color: #b71c1c; }
.pn-purple { background: #f3e5f5; border-color: #6a1b9a; color: #4a148c; }
.pn-grey   { background: #f5f5f5; border-color: #9e9e9e; color: #424242; }
.pn-grey-dashed { background: #fafafa; border-color: #9e9e9e; color: #757575; border-style: dashed; }

.pg-green  { background: #f1f8e9; border-color: #66bb6a; }
.pg-blue   { background: #e8f0fe; border-color: #42a5f5; }
.pg-orange { background: #fff8e1; border-color: #ffa726; }
.pg-red    { background: #fef0f0; border-color: #ef5350; }
.pg-purple { background: #f8f0fc; border-color: #ab47bc; }

/* Fail/success markers */
.pn-fail   { background: #ffcdd2; border-color: #c62828; color: #b71c1c; }
.pn-warn   { background: #fff3e0; border-color: #e65100; color: #bf360c; }
.pn-ok     { background: #e8f5e9; border-color: #2e7d32; color: #1b5e20; }

/* ===== Source Index Card Styles ===== */

.source-index {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.25rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fafbfc;
}

.source-group {
    border-left: 4px solid;
    padding: 1rem 1.5rem;
}

.source-group + .source-group {
    border-top: 1px solid #e8e8e8;
}

.source-group-title {
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.source-group-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.source-group-files li {
    font-size: 1.25rem;
    line-height: 1.8;
}

.source-group-files li::before {
    content: "\25cf";
    margin-right: 0.5rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Colour-code each group to match pipeline stages */
.source-group.sg-core    { border-left-color: #1565c0; }
.source-group.sg-core .source-group-title { color: #0d47a1; }

.source-group.sg-feed    { border-left-color: #2e7d32; }
.source-group.sg-feed .source-group-title { color: #1b5e20; }

.source-group.sg-process { border-left-color: #e65100; }
.source-group.sg-process .source-group-title { color: #bf360c; }

.source-group.sg-alert   { border-left-color: #c62828; }
.source-group.sg-alert .source-group-title { color: #b71c1c; }

.source-group.sg-resil   { border-left-color: #6a1b9a; }
.source-group.sg-resil .source-group-title { color: #4a148c; }

.source-group.sg-model   { border-left-color: #9e9e9e; }
.source-group.sg-model .source-group-title { color: #424242; }

.source-group.sg-demo    { border-left-color: #00838f; }
.source-group.sg-demo .source-group-title { color: #006064; }

/* Dark theme overrides */
html.macchiato .source-index,
html.frappe .source-index,
html.mocha .source-index {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

html.macchiato .source-group + .source-group,
html.frappe .source-group + .source-group,
html.mocha .source-group + .source-group {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.macchiato .source-group-files li::before,
html.frappe .source-group-files li::before,
html.mocha .source-group-files li::before {
    opacity: 0.6;
}

/* ===== Chapter Intro Title Styles ===== */

/* Scope: top-level chapter intros only. The `chapter-intro` body class is
   added by theme/chapter-title.js based on a URL allowlist, so this rule
   is inert on every other page in the book.

   Colours: "Wordmark Mirror" — each theme's primary matches the colour of
   the HKJ wordmark on the corresponding logo variant (deep teal on the
   light logo, citron yellow on the dark logo). The secondary accent is
   the leaf-green "H" from the logo, used universally for brand cohesion. */

body.chapter-intro main > h1:first-of-type {
    font-size: 2.8em;
    font-weight: 800;
    letter-spacing: -0.015em;
    padding-bottom: 0.35em;
    margin-bottom: 1.1em;
    border-bottom: 3px solid currentColor;
    position: relative;
}

/* Two-tone accent: a leaf-green stripe sits 6px below the wordmark-colour
   border, echoing the H + wordmark pairing in the HKJ logo. */
body.chapter-intro main > h1:first-of-type::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 3px;
    background-color: #5dc349; /* Leaf Green — HKJ logo "H" */
}

/* Wordmark-Mirror primary colour, per theme. */
html.latte body.chapter-intro main > h1:first-of-type     { color: #0b6455 !important; } /* Deep Teal — light-logo wordmark */
html.frappe body.chapter-intro main > h1:first-of-type    { color: #dad126 !important; } /* Citron Yellow — dark-logo wordmark */
html.macchiato body.chapter-intro main > h1:first-of-type { color: #dad126 !important; } /* Citron Yellow — dark-logo wordmark */
html.mocha body.chapter-intro main > h1:first-of-type     { color: #dad126 !important; } /* Citron Yellow — dark-logo wordmark */

/* ===== ASCII Diagram Styles =====
   Box-drawing glyphs (┌ ─ ┐ │ └ ┘) render at non-standard widths in some
   default UI monospace fonts (notably iOS Safari and several Android
   webviews), which breaks the alignment of the box edges. Force a known-
   good monospace stack and enable horizontal scroll on narrow viewports so
   the diagram stays flush on phones and tablets. */

.hkj-ascii-diagram,
.hkj-railway-diagram {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Mono',
                 'Roboto Mono', 'DejaVu Sans Mono', 'Source Code Pro',
                 Menlo, Consolas, monospace, monospace;
    font-size: 0.95em;
    white-space: pre;
    overflow-x: auto;
    -webkit-text-size-adjust: 100%;
}

/* Tighter line-height for box-drawing diagrams so the vertical edges stay
   visually flush. */
.hkj-ascii-diagram { line-height: 1.4; }

/* Slightly looser line-height for railway-track diagrams, where the rows
   carry labels above and below the track and need breathing room. */
.hkj-railway-diagram { line-height: 1.5; }