:root {
    --slop-navy: #102f3c;
    --slop-blue: #246f83;
    --slop-cyan: #5db2b0;
    --slop-coral: #cb4b38;
    --slop-orange: #df7d37;
    --slop-yellow: #e7c35d;
    --slop-lavender: #87779a;
    --slop-paper: #f4edd6;
}

.slop-database-page {
    background: var(--slop-paper);
}

.slop-database-page .site-header {
    background: var(--slop-navy);
    border-bottom-color: rgba(244, 237, 214, .42);
}

.slop-database-page main {
    overflow: hidden;
}

.slop-database-page .hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 650px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--slop-paper);
    background:
        radial-gradient(circle at 82% 19%, #f5d66e 0 6.4%, #e78039 6.6% 8.3%, transparent 8.6%),
        linear-gradient(166deg, transparent 0 42%, rgba(203, 75, 56, .95) 42.3% 45.5%, transparent 45.8%),
        linear-gradient(171deg, transparent 0 50%, rgba(231, 195, 93, .82) 50.3% 53.6%, transparent 53.9%),
        linear-gradient(176deg, transparent 0 58%, rgba(135, 119, 154, .8) 58.3% 62%, transparent 62.3%),
        linear-gradient(180deg, #83c2bd 0 38%, #31849a 38% 62%, #174b68 62% 78%, #102f3c 78% 100%);
}

.slop-database-page .hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        radial-gradient(ellipse at center, rgba(247, 221, 132, .95) 0 1.4px, transparent 1.8px),
        radial-gradient(ellipse at center, rgba(221, 75, 50, .88) 0 1.2px, transparent 1.7px),
        radial-gradient(ellipse at center, rgba(33, 91, 123, .9) 0 1.5px, transparent 2px),
        radial-gradient(ellipse at center, rgba(237, 239, 205, .8) 0 1px, transparent 1.6px);
    background-position: 0 0, 7px 4px, 3px 9px, 10px 12px;
    background-size: 14px 13px, 17px 15px, 19px 17px, 23px 21px;
    mix-blend-mode: color-dodge;
    opacity: .66;
    transform: rotate(-1deg) scale(1.04);
}

.slop-database-page .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(9, 27, 34, .94) 0, rgba(9, 27, 34, .84) 43%, rgba(9, 27, 34, .28) 70%, rgba(9, 27, 34, .08) 100%),
        linear-gradient(180deg, transparent 55%, rgba(9, 27, 34, .62) 100%);
}

.slop-database-page .hero-content {
    position: relative;
    z-index: 1;
    width: min(1160px, calc(100% - 64px));
    margin: 0 auto;
    padding: 82px 0 62px;
}

.slop-database-page .hero h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--slop-paper);
    font-size: clamp(44px, 5.7vw, 74px);
    line-height: 1.03;
    letter-spacing: -2.4px;
    text-wrap: balance;
}

.slop-database-page .hero-lead {
    max-width: 660px;
    padding: 18px 22px 19px;
    border-left: 10px solid var(--slop-yellow);
    color: #fffdf3;
    background: rgba(8, 26, 34, .58);
    font-size: 17px;
    line-height: 1.95;
}

.slop-database-page .hero-meta {
    grid-template-columns: repeat(3, minmax(110px, 150px)) 1fr;
    max-width: 850px;
    margin-top: 42px;
    border: 2px solid rgba(244, 237, 214, .88);
    background: rgba(9, 28, 36, .7);
    box-shadow: 11px 11px 0 rgba(203, 75, 56, .72);
}

.slop-database-page .hero-stat,
.slop-database-page .hero-version {
    min-height: 84px;
    padding: 14px 18px;
}

.slop-database-page .hero-stat {
    border-right: 1px solid rgba(244, 237, 214, .52);
}

.slop-database-page .hero-stat strong {
    color: var(--slop-paper);
    font-size: 29px;
}

.slop-database-page .hero-stat span {
    color: rgba(255, 253, 243, .78);
    font-size: 12px;
}

.slop-database-page .hero-version strong {
    color: var(--slop-paper);
    font-size: 16px;
}

.slop-database-page .hero-actions {
    max-width: 850px;
    margin-top: 28px;
    gap: 14px;
}

.slop-database-page .hero-actions .button {
    min-height: 68px;
    border: 2px solid var(--slop-paper);
    color: var(--slop-paper);
    background: rgba(9, 28, 36, .74);
    font-size: 18px;
}

.slop-database-page .hero-actions .button:hover {
    color: var(--slop-navy);
    background: var(--slop-paper);
}

.slop-database-page .hero-actions .view-link.active {
    color: var(--slop-paper);
    background: var(--slop-coral);
}

.slop-database-page .hero-actions .view-link.active:hover {
    color: var(--slop-navy);
    background: var(--slop-yellow);
}

.slop-database-page .scope-section {
    margin-top: 42px;
    padding: 32px 34px;
    border: 1px solid var(--ink);
    border-left: 14px solid var(--slop-coral);
    background:
        linear-gradient(90deg, rgba(231, 195, 93, .33) 0 62%, rgba(93, 178, 176, .2) 62% 100%),
        #fffdf3;
    box-shadow: 10px 10px 0 rgba(16, 47, 60, .18);
}

.slop-database-page .scope-label {
    font-size: 15px;
}

.slop-database-page .scope-section p {
    color: #283437;
    font-size: 16px;
}

.slop-database-page .taxonomy-dialog-open {
    min-height: 54px;
    padding: 12px 18px;
    border-width: 2px;
    background: rgba(255, 253, 243, .72);
    font-size: 14px;
}

.slop-database-page .database-section {
    padding-top: 66px;
}

.slop-database-page .database-heading {
    margin-bottom: 20px;
    padding: 13px 0 13px 22px;
    border-left: 14px solid var(--slop-blue);
    background: linear-gradient(90deg, rgba(93, 178, 176, .2), transparent 72%);
}

.slop-database-page .database-heading h2 {
    font-size: 30px;
}

.slop-database-page .filter-panel {
    border-width: 2px;
    background: #fffdf7;
}

.slop-database-page .audit-select-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slop-database-page .case-fact {
    grid-template-columns: 86px 1fr;
}

.slop-database-page .case-follow-up,
.slop-database-page .case-comment {
    grid-column: 1 / -1;
    padding-top: 13px;
    border-top: 1px solid var(--rule-light);
}

.slop-database-page .case-follow-up p,
.slop-database-page .case-comment p {
    margin: 5px 0 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.85;
}

.slop-database-page .case-review-source { margin-top: 8px; }

.slop-database-page .type-filter.active {
    color: var(--slop-blue);
    border-bottom-color: var(--slop-blue);
}

.slop-database-page .finding-item:nth-child(4n+1) {
    border-top-color: var(--slop-coral);
}

.slop-database-page .finding-item:nth-child(4n+2) {
    border-top-color: var(--slop-blue);
}

.slop-database-page .finding-item:nth-child(4n+3) {
    border-top-color: var(--slop-yellow);
}

.slop-database-page .finding-item:nth-child(4n+4) {
    border-top-color: var(--slop-lavender);
}

.slop-database-page .information-note {
    background: #ede3c3;
}

.slop-database-page .site-footer {
    background: var(--slop-navy);
}

@media (max-width: 820px) {
    .slop-database-page .hero {
        min-height: 620px;
    }

    .slop-database-page .hero::after {
        background:
            linear-gradient(90deg, rgba(9, 27, 34, .9) 0, rgba(9, 27, 34, .65) 74%, rgba(9, 27, 34, .25) 100%),
            linear-gradient(180deg, transparent 48%, rgba(9, 27, 34, .72) 100%);
    }

    .slop-database-page .hero-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .slop-database-page .hero-version {
        grid-column: 1 / -1;
        min-height: 62px;
        align-items: flex-start;
        border-top: 1px solid rgba(244, 237, 214, .52);
        text-align: left;
    }

    .slop-database-page .scope-section {
        background:
            linear-gradient(180deg, rgba(231, 195, 93, .28) 0 58%, rgba(93, 178, 176, .18) 58% 100%),
            #fffdf3;
    }

    .slop-database-page .audit-select-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    .slop-database-page .hero {
        min-height: 0;
        background:
            radial-gradient(circle at 84% 14%, #f5d66e 0 7%, #e78039 7.3% 9.4%, transparent 9.7%),
            linear-gradient(168deg, transparent 0 39%, rgba(203, 75, 56, .92) 39.4% 43.5%, transparent 43.9%),
            linear-gradient(176deg, transparent 0 53%, rgba(231, 195, 93, .76) 53.4% 57.5%, transparent 57.9%),
            linear-gradient(180deg, #75b8b3 0 34%, #2e8094 34% 57%, #174b68 57% 76%, #102f3c 76% 100%);
    }

    .slop-database-page .hero-content {
        width: min(100% - 28px, 1160px);
        padding: 50px 0 46px;
    }

    .slop-database-page .hero h1 {
        max-width: 350px;
        margin-bottom: 18px;
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .slop-database-page .hero-lead {
        padding: 15px 16px;
        border-left-width: 8px;
        font-size: 16px;
        line-height: 1.85;
    }

    .slop-database-page .hero-meta {
        margin-top: 28px;
        box-shadow: 7px 7px 0 rgba(203, 75, 56, .7);
    }

    .slop-database-page .hero-stat,
    .slop-database-page .hero-version {
        padding: 11px 10px;
    }

    .slop-database-page .hero-stat strong {
        font-size: 24px;
    }

    .slop-database-page .hero-actions {
        margin-top: 22px;
    }

    .slop-database-page .hero-actions .button {
        min-height: 58px;
        padding: 10px 8px;
        font-size: 16px;
    }

    .slop-database-page .scope-section {
        width: min(100% - 28px, 1160px);
        margin-top: 28px;
        padding: 25px 20px;
        border-left-width: 9px;
        box-shadow: 7px 7px 0 rgba(16, 47, 60, .16);
    }

    .slop-database-page .database-section {
        padding-top: 48px;
    }

    .slop-database-page .database-heading {
        padding-left: 16px;
        border-left-width: 9px;
    }

    .slop-database-page .database-heading h2 {
        font-size: 25px;
    }

    .slop-database-page .audit-select-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .slop-database-page .hero::before {
        transform: none;
    }
}