/* ===== Tab panels =====
 *
 * Each tab is a flex column. Sticky toolbar / section at the top sits outside
 * the scroll container (.panels-scroll).
 * Footer cp-panels (JOSM, Credits) sit outside the scroll container at the
 * bottom, pinned via flex-shrink:0.
 */

.tab-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

    .tab-panel.active {
        display: flex;
    }

.panels-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.panel-text {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.7;
}

    .panel-text strong {
        color: var(--text2);
    }


    .panel-text p {
        margin: 0 0 10px;
    }

        .panel-text p:last-child {
            margin-bottom: 0;
        }

    .panel-text strong {
        color: var(--text2);
    }

    .panel-text a {
        color: var(--accent2);
        text-decoration: none;
    }

        .panel-text a:hover {
            text-decoration: underline;
        }


/* ===== Collapsible panel system (cp-panel) ===== */

.cp-panel {
    flex-shrink: 0;
}

/* cp-body: toggled via [hidden] attribute by collapsible-panel.js */
.cp-body[hidden] {
    display: none;
}

.panel-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--ff-mono);
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text2);
    background: var(--panel2);
    user-select: none;
}

    .panel-summary[role="button"] {
        cursor: pointer;
        outline: none;
    }

        .panel-summary[role="button"]:hover {
            background: var(--panel3);
        }

        .panel-summary[role="button"]:focus-visible {
            outline: 2px solid var(--accent2);
            outline-offset: -2px;
        }

.panel-arrow {
    color: var(--text3);
    transition: transform .15s;
    flex-shrink: 0;
    /* icon-chevron points right (>) by default.
     * Closed: pointing right (>) is the standard collapsed indicator.
     * Open:   rotated 90deg to point down (v). */
    transform: rotate(0deg);
}

.cp-panel--open > .panel-summary .panel-arrow {
    transform: rotate(90deg);
}

.panel-body {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.panel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text2);
}

.panels-scroll > .cp-panel > .panel-summary:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.panels-scroll > .cp-panel:first-child > .panel-summary {
    border-top: 1px solid var(--border);
}


/* ===== Sub-panels (.cp-panel--sub) =====
 *
 * Lightweight collapsible sections — reuse the cp-panel /
 * collapsible-panel.js system with visual overrides:
 *   — no background box or border, just a ruled header underline
 *   — smaller title font (same mono style, less prominent than main panels)
 *   — compact body padding
 *
 * The header underline (border-bottom on .panel-summary) is only visible when
 * the sub-panel is open; transparent default makes it invisible when closed.
 */

.cp-panel--sub {
    border: none;
    background: none;
    box-shadow: none;
}

    .cp-panel--sub + .cp-panel--sub {
        border-top: none;
        margin-top: 6px;
    }

    .cp-panel--sub > .panel-summary {
        background: none;
        padding: 0 0 5px;
        font-size: 10px;
        letter-spacing: .6px;
        gap: 5px;
        border-bottom: 1px solid transparent;
    }

/* Underline only when open */
.cp-panel--open.cp-panel--sub > .panel-summary {
    border-bottom-color: var(--border);
}

.cp-panel--sub > .panel-summary[role="button"]:hover {
    background: none;
    color: var(--text);
}

.cp-panel--sub > .panel-summary .panel-arrow {
    color: var(--text3);
}

.cp-panel--sub > .cp-body {
    padding-top: 4px;
}