/* Hallmark · macrostructure: Index-First · genre: editorial · tone: bright-soft-luxury · anchor hue: pearl-sage
 * theme: Atelier · nav: N1 left/right text links · footer: Ft6 roman close · enrichment: pearl-gilt rules + lustre hover
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: static-pass (34, 49–57) · icons: pass (30) · pre-emit critique: P5 H5 E5 S5 R5 V5
 */

.collection-page .page-shell {
    display: block;
    min-height: 100svh;
    pointer-events: auto;
}

.collection-main,
.collection-footer {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.collection-intro {
    display: grid;
    gap: var(--space-lg);
    padding-block: var(--space-2xl) var(--space-3xl);
}

.collection-intro h1 {
    min-width: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-style: normal;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
}

.collection-intro__copy {
    max-width: 34ch;
    color: var(--color-ink-caption);
    font-size: var(--text-md);
    line-height: 1.65;
    letter-spacing: var(--tracking-caption);
}

.collection-intro__notice {
    max-width: 72ch;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.inline-link {
    color: var(--color-ink);
    text-decoration-color: var(--color-collection-accent);
    text-decoration-thickness: var(--rule-hairline);
    text-underline-offset: 0.22em;
    white-space: nowrap;
}

.inline-link:active {
    color: var(--color-collection-focus);
}

.inline-link[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.inline-link:focus-visible,
.resource-search input:focus-visible,
.search-clear:focus-visible,
.category-index a:focus-visible,
.resource-entry:focus-visible,
.resource-state__action:focus-visible {
    outline: 2px solid var(--color-collection-focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

.resource-entry:focus-visible {
    border-radius: var(--radius-lustre);
}

.resource-directory,
.disclaimer {
    position: relative;
    border-top: 0;
}

.resource-directory::before,
.resource-directory::after,
.disclaimer::before,
.disclaimer::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: var(--rule-hairline);
    pointer-events: none;
}

.resource-directory::before,
.disclaimer::before {
    inset-inline-end: 0;
    background-color: var(--color-collection-rule-soft);
}

.resource-directory::after,
.disclaimer::after {
    width: var(--space-xl);
    background-color: var(--color-collection-accent);
}

.resource-search {
    display: grid;
    gap: var(--space-sm);
    padding-block: var(--space-xl);
    border-bottom: var(--rule-hairline) solid var(--color-collection-rule-soft);
}

.resource-search label {
    width: fit-content;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--tracking-link);
}

.resource-search__control {
    position: relative;
    max-width: 48rem;
}

.resource-search input {
    width: 100%;
    min-height: 3rem;
    padding: var(--space-sm) var(--space-2xl) var(--space-sm) 0;
    color: var(--color-ink);
    background-color: var(--color-paper-clear);
    border: 0;
    border-bottom: var(--rule-hairline) solid var(--color-collection-rule);
    border-radius: 0;
    outline: 2px solid transparent;
    outline-offset: var(--focus-offset);
    font: inherit;
    font-size: var(--text-base);
    line-height: 1.5;
    appearance: none;
}

.resource-search input::placeholder {
    color: var(--color-ink-subtle);
    opacity: 1;
}

.resource-search input::-webkit-search-cancel-button {
    appearance: none;
}

.resource-search input:disabled {
    color: var(--color-ink-subtle);
    background-color: var(--color-paper-clear);
    opacity: 0.55;
    cursor: not-allowed;
}

.resource-search input[aria-invalid='true'] {
    border-color: var(--color-error);
}

.resource-search input:focus {
    border-color: var(--color-collection-focus);
}

.search-clear {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    min-width: 3rem;
    padding-inline: var(--space-xs);
    color: var(--color-ink-muted);
    background-color: var(--color-paper-clear);
    border: 0;
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.search-clear:active,
.resource-state__action:active,
.category-index a:active,
.resource-entry:active {
    transform: translateY(1px);
}

.search-clear:disabled,
.resource-state__action:disabled,
.category-index a[aria-disabled='true'],
.resource-entry[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.resource-search__hint,
.resource-search__status {
    max-width: 65ch;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.resource-search__status {
    min-height: 1.6em;
    font-variant-numeric: tabular-nums;
}

.directory-layout {
    display: grid;
    min-width: 0;
}

.category-index {
    padding-block: var(--space-xl);
    border-bottom: var(--rule-hairline) solid var(--color-collection-rule-soft);
}

.category-index__title {
    margin-block-end: var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.category-index ul {
    display: grid;
    gap: var(--space-xs);
    list-style: none;
}

.category-index a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    min-height: 2.75rem;
    padding-inline-start: var(--space-md);
    color: var(--color-ink-caption);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.category-index a::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: var(--space-xs);
    height: var(--rule-hairline);
    background-color: var(--color-collection-accent);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--dur-medium) var(--ease-out);
    pointer-events: none;
}

.category-index__count {
    color: var(--color-ink-subtle);
    font-variant-numeric: tabular-nums;
}

.resource-list {
    min-width: 0;
    padding-block: var(--space-xl) var(--space-3xl);
}

.resource-category + .resource-category {
    margin-block-start: var(--space-2xl);
}

.resource-category__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-lg);
    padding-block-end: var(--space-md);
    border-bottom: 0;
}

.resource-category__header::before,
.resource-category__header::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: var(--rule-hairline);
    pointer-events: none;
}

.resource-category__header::before {
    inset-inline-end: 0;
    background-color: var(--color-collection-rule);
}

.resource-category__header::after {
    width: var(--space-xl);
    background-color: var(--color-collection-accent);
}

.resource-category__header h2 {
    color: var(--color-ink);
    font-size: var(--text-md);
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
}

.resource-category__count {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.resource-entry {
    position: relative;
    isolation: isolate;
    display: grid;
    min-width: 0;
    gap: var(--space-sm);
    margin-inline: calc(var(--space-sm) * -1);
    padding: var(--space-lg) var(--space-sm);
    color: var(--color-ink);
    border-bottom: 0;
    text-decoration: none;
}

.resource-entry::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block: var(--space-xs);
    inset-inline: 0;
    background-color: var(--color-collection-lustre);
    border-radius: var(--radius-lustre);
    box-shadow: var(--shadow-collection-lustre);
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease-out);
    pointer-events: none;
}

.resource-entry::after {
    content: '';
    position: absolute;
    inset-inline: var(--space-sm);
    inset-block-end: 0;
    height: var(--rule-hairline);
    background-color: var(--color-collection-rule-soft);
    pointer-events: none;
}

.resource-entry__name {
    display: inline-flex;
    align-items: baseline;
    width: fit-content;
    max-width: 100%;
    gap: var(--space-xs);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.resource-entry__arrow {
    flex: 0 0 auto;
    color: var(--color-collection-accent);
}

.resource-entry__description {
    max-width: 65ch;
    color: var(--color-ink-caption);
    font-size: var(--text-base);
    line-height: 1.65;
}

.resource-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.resource-entry__domain {
    overflow-wrap: anywhere;
}

mark {
    color: var(--color-ink);
    background-color: var(--color-paper-clear);
    text-decoration: underline;
    text-decoration-color: var(--color-collection-accent);
    text-decoration-thickness: var(--rule-hairline);
    text-underline-offset: 0.18em;
}

.resource-state {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    padding-block: var(--space-2xl);
    border-bottom: var(--rule-hairline) solid var(--color-collection-rule-soft);
}

.resource-state__title {
    color: var(--color-ink);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.4;
}

.resource-state__copy {
    max-width: 60ch;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.65;
}

.resource-state[data-tone='error'] .resource-state__title {
    color: var(--color-error);
}

.resource-state__action {
    min-height: 2.75rem;
    padding: var(--space-xs) 0;
    color: var(--color-ink);
    background-color: var(--color-paper-clear);
    border: 0;
    border-bottom: var(--rule-hairline) solid var(--color-collection-accent);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.disclaimer {
    display: grid;
    gap: var(--space-2xl);
    padding-block: var(--space-2xl) var(--space-3xl);
}

.disclaimer__header {
    display: grid;
    max-width: 72ch;
    gap: var(--space-sm);
}

.disclaimer h2 {
    color: var(--color-ink);
    font-size: var(--text-md);
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

.disclaimer__lead {
    max-width: 60ch;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.7;
}

.disclaimer__list {
    display: grid;
    max-width: 88ch;
}

.disclaimer__item {
    display: grid;
    min-width: 0;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-top: var(--rule-hairline) solid var(--color-collection-rule-soft);
}

.disclaimer__item dt {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: var(--tracking-link);
}

.disclaimer__item dd {
    min-width: 0;
    color: var(--color-ink-caption);
    font-size: var(--text-base);
    line-height: 1.8;
}

.collection-footer {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
    border-top: var(--rule-hairline) solid var(--color-collection-rule-soft);
}

.collection-footer__close {
    color: var(--color-ink-caption);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
}

.collection-footer__close span {
    color: var(--color-ink);
}

.collection-footer__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-xl);
}

@media (hover: hover) and (pointer: fine) {
    .resource-search input:hover {
        color: var(--color-ink);
        background-color: var(--color-collection-lustre);
    }

    .search-clear:hover {
        color: var(--color-collection-focus);
    }

    .inline-link:hover,
    .resource-state__action:hover {
        color: var(--color-collection-focus);
    }

    .category-index a:hover::before {
        opacity: 1;
    }

    .resource-entry:hover::before {
        opacity: 1;
    }
}

@media (min-width: 40rem) {
    .collection-footer {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .collection-footer__links {
        justify-content: flex-end;
    }
}

@media (min-width: 60rem) {
    .disclaimer__list {
        max-width: none;
    }

    .disclaimer__item {
        grid-template-columns: 12rem minmax(0, 72ch);
        column-gap: var(--space-2xl);
    }

    .resource-search {
        grid-template-columns: 12rem minmax(0, 1fr);
        column-gap: var(--space-2xl);
    }

    .resource-search label {
        grid-row: 1 / span 3;
    }

    .directory-layout {
        grid-template-columns: 12rem minmax(0, 1fr);
        gap: var(--space-2xl);
    }

    .category-index {
        align-self: start;
        position: sticky;
        top: var(--space-xl);
        border-bottom: 0;
    }

    /**
     * @brief 使用内容无关的弹性列宽，避免长域名改变不同资源行的说明列起点。
     */
    .resource-entry {
        grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.7fr) minmax(14rem, 1.1fr);
        align-items: start;
        gap: var(--space-xl);
    }

    .resource-entry__meta {
        justify-content: flex-end;
        text-align: end;
    }
}

@media (pointer: coarse) {
    .inline-link,
    .search-clear,
    .category-index a,
    .resource-entry,
    .resource-state__action,
    .collection-footer .text-link {
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-index a::before,
    .resource-entry::before {
        transition-duration: var(--dur-short);
    }

    .search-clear:active,
    .resource-state__action:active,
    .category-index a:active,
    .resource-entry:active {
        transform: none;
    }
}