/* =========================================================
   THEME VARIABLES
   Centralized color palette for consistent reuse
   ========================================================= */
:root {
    --accent: #7cc4ff; /* Link and highlight color */
    --bg: #0b0e14; /* Page background color */
    --card: #121828; /* Card/container background */
    --fg: #e7eefc; /* Primary foreground/text color */
    --line: #22304a; /* Border/divider color */
    --muted: #9bb0d0; /* Secondary/de-emphasized text color */
}

/* =========================================================
   GLOBAL / RESET
   Shared page-wide defaults
   ========================================================= */
* {
    box-sizing: border-box; /* Include padding and border in element sizing */
}

body {
    background: var(--bg); /* Apply theme background */
    color: var(--fg); /* Apply theme text color */
    font-family: system-ui, Segoe UI, Roboto, Arial; /* System-first font stack */
    margin: 0; /* Remove default browser margin */
}

a {
    color: var(--accent); /* Accent color for links */
    text-decoration: none; /* Remove underline by default */
}

    a:hover {
        text-decoration: underline; /* Add underline on hover */
    }

h1, h2, h3 {
    margin: 0 0 10px 0; /* Remove top margin, preserve bottom spacing */
}

/* =========================================================
   LAYOUT
   Structural page containers and layout helpers
   ========================================================= */
.bottomTable {
    table-layout: fixed; /* Force column sizing rules instead of content sizing */
    width: 2%; /* Very small table width */
}

.grid {
    display: grid; /* Enable CSS Grid layout */
    /* Responsive columns with 250px minimum width */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem; /* Spacing between grid items */
}

    .grid.is-closed {
        display: none; /* Hide collapsed grid */
    }

.gridSection {
    margin-bottom: 1rem; /* Space below each grid section */
}

header {
    background: rgba(18,24,40,0.8); /* Semi-transparent header background */
    border-bottom: 1px solid var(--line); /* Bottom divider */
    padding: 16px 18px; /* Inner spacing */
    position: sticky; /* Stick to top while scrolling */
    top: 0; /* Sticky anchor point */
}

.kv {
    display: grid; /* Grid layout for key/value pairs */
    gap: 6px 12px; /* Row and column spacing */
    grid-template-columns: 220px 1fr; /* Fixed key column + flexible value column */
    margin: 10px 0 16px;
}

main {
    margin: 0 auto; /* Center horizontally */
    max-width: 1200px; /* Limit content width */
    padding: 18px; /* Inner spacing */
}

.toolbar {
    align-items: center; /* Vertically center items */
    display: flex; /* Horizontal flex layout */
    gap: 10px; /* Space between items */
    margin-bottom: 12px; /* Space below toolbar */
}

/* =========================================================
   COMPONENTS
   Reusable UI blocks
   ========================================================= */
.badge {
    border: 1px solid var(--line); /* Outline */
    border-radius: 999px; /* Pill shape */
    color: var(--muted); /* Secondary text color */
    display: inline-block; /* Allow padding and pill shape */
    font-size: 0.8rem; /* Slightly smaller text */
    padding: 2px 8px; /* Inner spacing */
}

button,
.btn {
    background: var(--card); /* Card-like background */
    border: 1px solid var(--line); /* Border */
    border-radius: 10px; /* Rounded corners */
    color: var(--fg); /* Foreground text color */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 8px 12px; /* Inner spacing */
}

    button:hover,
    .btn:hover {
        border-color: var(--accent); /* Highlight border on hover */
    }

.card {
    align-items: flex-start; /* Top-align card children */
    background: var(--card); /* Card background */
    border: 1px solid var(--line); /* Card border */
    border-radius: 12px; /* Rounded corners */
    display: flex; /* Flex layout */
    gap: 10px; /* Space between child elements */
    padding: 12px; /* Inner spacing */
}

    .card > div {
        display: flex; /* Flex layout for card content */
        flex-direction: column; /* Stack content vertically */
        gap: 4px; /* Space between stacked items */
    }

    .card img {
        align-self: flex-start; /* Align image to top */
        display: block; /* Remove inline image spacing */
        height: 196px; /* Fixed image height */
        image-rendering: auto; /* Default browser image scaling */
        width: 196px; /* Fixed image width */
    }

.grid img {
    align-self: flex-start; /* Align image to top of grid item */
    display: block; /* Remove inline spacing artifacts */
    height: 64px; /* Fixed thumbnail height */
    image-rendering: auto; /* Default browser image scaling */
    width: 64px; /* Fixed thumbnail width */
}

.gridToggle {
    color: navajowhite; /* Toggle text color */
    font-family: system-ui, Segoe UI, Arial, sans-serif; /* Font stack */
    font-size: 1.4rem; /* Heading-like size */
    font-weight: 600; /* Semi-bold */
    letter-spacing: .02em; /* Slight tracking */
    line-height: 1.2; /* Compact line spacing */
    text-align: left; /* Left-align text */
    text-transform: none; /* Preserve original casing */
}

    .gridToggle::before {
        content: "▾"; /* Expanded-state chevron */
        display: inline-block; /* Allow sizing/positioning */
        transform: rotate(0deg); /* Explicit non-rotated state */
    }

    .gridToggle[aria-expanded="false"]::before {
        content: "▸"; /* Collapsed-state chevron */
    }

.mermaid {
    background: rgba(18,24,40,0.6); /* Diagram container background */
    border: 1px solid var(--line); /* Border */
    border-radius: 12px; /* Rounded corners */
    overflow: auto; /* Scroll if diagram is too large */
    padding: 12px; /* Inner spacing */
}

.nodebox {
    height: auto; /* Grow to fit content */
    text-align: center; /* Center content */
    width: 100px; /* Fixed node width */
}

    .nodebox > div {
        font-size: 12px; /* Small label text */
        text-align: center; /* Center label */
        white-space: normal; /* Allow label wrapping */
    }

    .nodebox img {
        display: block; /* Remove inline spacing */
        height: 100px; /* Fixed image height */
        margin: 0 auto 6px; /* Center horizontally and space below */
        object-fit: contain; /* Preserve aspect ratio */
        width: 100px; /* Fixed image width */
    }

.pageSearch {
    align-items: center; /* Vertically center contents */
    display: flex; /* Horizontal layout */
    gap: 12px; /* Space between items */
    margin: 12px 0; /* Vertical spacing */
}

    .pageSearch input {
        padding: 10px 12px; /* Inner spacing */
        width: min(520px, 100%); /* Cap width at 520px but allow shrink */
    }

    .pageSearch span {
        opacity: 0.8; /* Slightly muted text */
    }

.reward {
    border: 2px solid gold; /* Highlighted table border */
    border-collapse: collapse; /* Merge cell borders */
}

    .reward td,
    .reward th {
        border-collapse: collapse; /* Keep collapsed border behavior */
        height: 10px; /* Minimal row height */
        line-height: 1; /* Tight text line spacing */
        padding: 0; /* Remove default cell padding */
        text-align: left; /* Left-align text */
    }

        .reward td:first-child,
        .reward th:first-child {
            border-collapse: collapse; /* Keep collapsed border behavior */
            padding: 0; /* Remove padding */
            text-align: left; /* Left-align first column */
            white-space: nowrap; /* Prevent wrapping */
            width: auto; /* Size to content */
        }

.small,
.smallIndex {
    color: var(--muted); /* Secondary text color */
    font-size: 0.9rem; /* Slightly smaller text */
}

/* =========================================================
   TABLES
   Table-specific styling
   ========================================================= */
.table {
    border-collapse: collapse; /* Merge adjacent borders */
    width: 100%; /* Full width table */
}

    .table td,
    .table th {
        border: 1px solid var(--line); /* Cell borders */
        padding: 8px; /* Cell padding */
        text-align: left; /* Left-align text */
    }

td.receipe {
    vertical-align: top; /* Align cell content to top */
    width: 22%; /* Set recipe column width */
}

/* =========================================================
   DETAILS / STATEFUL UI
   Dynamic content markers and states
   ========================================================= */
details.collapsible summary::after {
    content: " (" attr(data-closed) ")"; /* Show closed-state label */
}

details.collapsible[open] summary::after {
    content: " (" attr(data-open) ")"; /* Show open-state label */
}

/* =========================================================
   CONTENT TYPES
   Styling for semantic/type-based inline spans
   ========================================================= */
span.typeFUEL {
    color: orangered; /* Fuel type color */
    font-style: italic; /* Italic emphasis */
}

span.typeTECHNOLOGY {
    color: lightblue; /* Technology type color */
    font-style: italic; /* Italic emphasis */
}