/**
 * EW Commentary Cross-Links — panel styles
 * Brand tokens from the EW brand guide: navy #014161, link #029CE9,
 * fonts Lato (headings) / Karla (body).
 */

.ew-xref {
    --ewx-navy: #014161;
    --ewx-link: #029CE9;
    --ewx-line: #e6e9ec;
    --ewx-bg: #fafbfc;
    display: block;
    margin: 2.6em 0 0.5em;
    padding-top: 1.6em;
    border-top: 2px solid var(--ewx-navy);
}

.ew-xref-sec { margin-bottom: 1.5em; }
.ew-xref-sec:last-child { margin-bottom: 0; }

.ew-xref-title {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--ewx-navy);
    margin: 0 0 0.15em;
    text-transform: uppercase;
}

.ew-xref-count {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    color: #fff;
    background: var(--ewx-link);
    border-radius: 10px;
    padding: 0.05em 0.55em;
    vertical-align: middle;
    margin-left: 0.35em;
}

.ew-xref-sub {
    font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.84rem;
    color: #6a747a;
    margin: 0 0 0.85em;
}

.ew-xref-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.ew-xref-chip {
    font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ewx-navy) !important;
    text-decoration: none !important;
    background: #fff;
    border: 1px solid #d8dde1;
    border-radius: 18px;
    padding: 0.34em 0.85em;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.ew-xref-chip:hover,
.ew-xref-chip:focus {
    background: var(--ewx-link);
    border-color: var(--ewx-link);
    color: #fff !important;
}

/* CSS-only "show all" — every chip stays in the HTML for crawlers. */
.ew-xref-more-cb { position: absolute; opacity: 0; pointer-events: none; }

.ew-xref-chips.is-collapsible {
    max-height: 5.2em;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.ew-xref-more-cb:checked + .ew-xref-chips.is-collapsible {
    max-height: 200em;
}

.ew-xref-more {
    display: inline-block;
    margin-top: 0.7em;
    font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ewx-link);
    cursor: pointer;
    user-select: none;
}
.ew-xref-more:hover { text-decoration: underline; }

.ew-xref-more .ew-xref-more-hide { display: none; }
.ew-xref-more-cb:checked ~ .ew-xref-more .ew-xref-more-show { display: none; }
.ew-xref-more-cb:checked ~ .ew-xref-more .ew-xref-more-hide { display: inline; }

@media (max-width: 600px) {
    .ew-xref-chip { font-size: 0.88rem; padding: 0.3em 0.75em; }
}