/*
 * Content-Bibliothek (M6, Design §7.1/§7.2). The professional overview/detail surface:
 * a filter toolbar, kind tabs with count badges, artefact cards, a compatibility matrix
 * and the modpack workbench. Tokens only (no hard-coded colours); light+dark inherit
 * from tokens.css. Reuses gtx-card / gtx-btn / gtx-badge / gtx-table where possible.
 */

/* --- filter toolbar ----------------------------------------------------- */
.gtx-lib-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--gtx-s3);
    margin-bottom: var(--gtx-s5);
}

.gtx-lib-toolbar__search {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.gtx-lib-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s1);
}

.gtx-lib-toolbar__label {
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
    color: var(--gtx-text-dim);
}

/* --- kind tabs (count badges) ------------------------------------------ */
.gtx-lib-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    margin-bottom: var(--gtx-s4);
}

.gtx-lib-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s2) var(--gtx-s3);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-btn);
    background: var(--gtx-surface);
    color: var(--gtx-text);
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--gtx-t-fast) var(--gtx-ease), background var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-lib-tab:hover { border-color: var(--gtx-line-strong); }

.gtx-lib-tab.is-active {
    border-color: var(--gtx-ember);
    background: var(--gtx-ember-soft);
}

.gtx-lib-tab__count {
    min-width: 1.5rem;
    padding: 0 var(--gtx-s2);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface-2);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    text-align: center;
}

.gtx-lib-tab.is-active .gtx-lib-tab__count {
    background: var(--gtx-accent-fill);
    color: var(--gtx-on-accent);
}

/* --- artefact card grid ------------------------------------------------- */
.gtx-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--gtx-s4);
    margin-bottom: var(--gtx-s6);
}

.gtx-lib-card {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s3);
    padding: var(--gtx-s4);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    background: var(--gtx-surface);
    box-shadow: var(--gtx-shadow-card);
}

.gtx-lib-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gtx-s2);
}

.gtx-lib-card__title {
    margin: 0;
    font-size: var(--gtx-fs-h3);
    line-height: 1.25;
}

.gtx-lib-card__title a { color: var(--gtx-text); text-decoration: none; }
.gtx-lib-card__title a:hover { color: var(--gtx-accent-text); }

.gtx-lib-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    align-items: center;
}

.gtx-lib-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    margin-top: auto;
    padding-top: var(--gtx-s2);
}

/* chips for compatibility / tags */
.gtx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s1);
    padding: 1px var(--gtx-s2);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface-2);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
    white-space: nowrap;
}

/* Violet-tinted accent chip: legible text on a quiet violet wash. */
.gtx-chip--ember { color: var(--gtx-text); background: var(--gtx-accent-soft); border-color: transparent; }

/* --- item detail -------------------------------------------------------- */
.gtx-lib-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--gtx-s5);
    align-items: start;
}

@media (max-width: 60rem) {
    .gtx-lib-detail { grid-template-columns: 1fr; }
}

.gtx-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--gtx-s2) var(--gtx-s4);
    margin: 0;
}

.gtx-dl dt { color: var(--gtx-text-dim); font-size: var(--gtx-fs-meta); font-weight: 600; }
.gtx-dl dd { margin: 0; }

/* --- compatibility target list ----------------------------------------- */
.gtx-target {
    display: flex;
    align-items: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s3);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface);
    margin-bottom: var(--gtx-s2);
}

.gtx-target--block { opacity: 0.55; }

.gtx-target__body { flex: 1 1 auto; min-width: 0; }

.gtx-target__name { font-weight: 600; }

.gtx-target__compat { display: flex; flex-wrap: wrap; gap: var(--gtx-s2); margin-top: var(--gtx-s1); }

/* =======================================================================
 * Content section v2 — professional re-layout (library index/detail +
 * modpacks). Additive, tokens-only, theme-aware. Reuses gtx-card / gtx-btn /
 * gtx-badge / gtx-table / gtx-chip; adds the vocabulary those four views share.
 * ======================================================================= */

/* --- page header: title block + primary action ------------------------- */
.gtx-lib-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gtx-s4);
    margin-bottom: var(--gtx-s5);
}

.gtx-lib-head__titles { min-width: 0; }
.gtx-lib-head__titles h1 { margin: 0; }

/* --- icon medallion (cards + detail hero) ------------------------------ */
.gtx-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--gtx-r-m);
    background: var(--gtx-accent-soft);
    color: var(--gtx-accent);
}

.gtx-media--sm { width: 40px; height: 40px; }
.gtx-media--lg { width: 56px; height: 56px; border-radius: var(--gtx-r-l); }

/* --- collapsible action panel (upload / create) ------------------------ */
/* The summary reads as a full-width control; the body drops into the panel. */
.gtx-disclosure {
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    background: var(--gtx-surface);
    overflow: hidden;
    transition: border-color var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-disclosure:hover { border-color: var(--gtx-line-strong); }

.gtx-disclosure__summary {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s3) var(--gtx-s4);
    font-weight: 600;
    color: var(--gtx-text);
    cursor: pointer;
    list-style: none;
}

.gtx-disclosure__summary::-webkit-details-marker { display: none; }
.gtx-disclosure__summary:hover { color: var(--gtx-accent-text); }
.gtx-disclosure__summary:focus-visible {
    outline: none;
    box-shadow: var(--gtx-focus-ring);
}

.gtx-disclosure__chevron {
    margin-left: auto;
    color: var(--gtx-text-dim);
    transition: transform var(--gtx-t-med) var(--gtx-ease);
}

.gtx-disclosure[open] .gtx-disclosure__chevron { transform: rotate(180deg); }
.gtx-disclosure[open] .gtx-disclosure__summary { border-bottom: 1px solid var(--gtx-line); }

.gtx-disclosure__body { padding: var(--gtx-s4); }

/* --- card grid tile: interactive lift + head layout with medallion ----- */
.gtx-lib-card {
    transition: border-color var(--gtx-t-fast) var(--gtx-ease),
        box-shadow var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-lib-card:hover {
    border-color: var(--gtx-line-strong);
    box-shadow: var(--gtx-shadow-hover);
}

.gtx-lib-card__head { align-items: center; }

.gtx-lib-card__titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s1);
}

.gtx-lib-card__title { overflow-wrap: anywhere; }

/* A quiet divider before the compatibility/spec chip row. */
.gtx-lib-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    align-items: center;
    padding-top: var(--gtx-s3);
    border-top: 1px solid var(--gtx-line);
}

/* --- breadcrumb -------------------------------------------------------- */
.gtx-crumb {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    margin-bottom: var(--gtx-s3);
    font-size: var(--gtx-fs-meta);
}

.gtx-crumb a { color: var(--gtx-text-dim); text-decoration: none; }
.gtx-crumb a:hover { color: var(--gtx-accent-text); }
.gtx-crumb__sep { color: var(--gtx-text-dim); }
.gtx-crumb__current { color: var(--gtx-text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* --- detail hero: medallion + title + meta chips ----------------------- */
.gtx-content-hero {
    display: flex;
    align-items: center;
    gap: var(--gtx-s4);
    flex-wrap: wrap;
    margin-bottom: var(--gtx-s5);
}

.gtx-content-hero__body { min-width: 0; flex: 1 1 16rem; }

.gtx-content-hero__title {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gtx-s3);
    overflow-wrap: anywhere;
}

.gtx-content-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    align-items: center;
    margin-top: var(--gtx-s2);
}

/* --- section heading inside a card ------------------------------------- */
.gtx-panel-head {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    margin-bottom: var(--gtx-s3);
}

.gtx-panel-head h2,
.gtx-panel-head h3 { margin: 0; }
.gtx-panel-head > svg { color: var(--gtx-text-dim); flex: 0 0 auto; }

/* --- detail sidebar: even stack; sticky on wide viewports -------------- */
.gtx-lib-aside {
    display: grid;
    gap: var(--gtx-s4);
    align-content: start;
}

@media (min-width: 60rem) {
    .gtx-lib-aside {
        position: sticky;
        top: var(--gtx-s4);
    }
}

/* --- version history table: highlight the current row ------------------ */
.gtx-lib-versions tr.is-current > td { background: var(--gtx-accent-soft); }
.gtx-lib-versions tr.is-current > td:first-child { box-shadow: inset 3px 0 0 0 var(--gtx-accent); }

/* --- deployed-on list -------------------------------------------------- */
.gtx-deploy-list {
    display: grid;
    gap: var(--gtx-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gtx-deploy-list li {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s2) var(--gtx-s3);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface);
}

.gtx-deploy-list li > svg { color: var(--gtx-text-dim); flex: 0 0 auto; }
.gtx-deploy-list a { text-decoration: none; font-weight: 600; }
.gtx-deploy-list a:hover { color: var(--gtx-accent-text); }

/* =======================================================================
 * Modpacks — same vocabulary as the library so "Content" reads as one area.
 * ======================================================================= */
.gtx-mp-version__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gtx-s3);
    margin-bottom: var(--gtx-s3);
}

.gtx-mp-version__title {
    margin: 0;
    font-size: var(--gtx-fs-h3);
}

/* Included-items chip row inside a frozen version. */
.gtx-mp-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    margin-bottom: var(--gtx-s4);
}

/* The item-picker fieldset in the "freeze version" form. */
.gtx-mp-picker {
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    padding: var(--gtx-s3) var(--gtx-s4);
    background: var(--gtx-surface-2);
}

.gtx-mp-picker legend {
    padding: 0 var(--gtx-s2);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
    color: var(--gtx-text-dim);
}

.gtx-mp-picker__opt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    padding: var(--gtx-s2) 0;
    border-bottom: 1px solid var(--gtx-line);
}

.gtx-mp-picker__opt:last-child { border-bottom: 0; }
.gtx-mp-picker__opt-name { font-weight: 600; margin-right: auto; }