:root {
    --discover-navy: #123444;
    --discover-blue: #2f6f8d;
    --discover-blue-dark: #245a73;
    --discover-pale: #eef6f8;
    --discover-border: #d8e3e7;
    --discover-muted: #60717a;
    --discover-ink: #162b35;
}

.discover-page {
    min-height: 100vh;
    background: #f6f8f9;
    color: var(--discover-ink);
    overflow-x: clip;
}

.discover-hero {
    position: relative;
    min-height: 190px;
    display: grid;
    place-items: center;
    color: #fff;
    background-color: #173f50;
    background-image: linear-gradient(120deg, rgba(14, 43, 56, .96), rgba(35, 91, 113, .88)), url("/static/images/backgrounds/fishing-hero.6c42d6433064.jpg");
    background-image: linear-gradient(120deg, rgba(14, 43, 56, .96), rgba(35, 91, 113, .88)), image-set(
        url("/static/images/backgrounds/fishing-hero-1440.604f0bc7ed26.avif") type('image/avif'),
        url("/static/images/backgrounds/fishing-hero-1440.47000a264231.webp") type('image/webp'),
        url("/static/images/backgrounds/fishing-hero.6c42d6433064.jpg") type('image/jpeg')
    );
    background-position: center, center 54%;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

.discover-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 72px;
    background: linear-gradient(transparent, rgba(246, 248, 249, .22));
    pointer-events: none;
}

.discover-hero-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    padding: 36px 0 60px;
}

.results-kicker {
    margin: 0 0 8px;
    color: #bfe6f2;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.discover-hero h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.discover-filter-wrap {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: -38px auto 0;
}

.discover-filter-form {
    padding: 26px 28px 24px;
    border: 1px solid rgba(216, 227, 231, .9);
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 52px rgba(23, 55, 68, .12);
}

.filter-heading-row,
.primary-filter-row,
.results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.filter-heading-row h2,
.results-heading h2,
.discover-secondary h2 {
    margin: 0;
    color: var(--discover-ink);
    font-size: 25px;
    line-height: 1.25;
}

.filter-heading-row p,
.results-heading p,
.discover-secondary p {
    margin: 6px 0 0;
    color: var(--discover-muted);
    font-size: 14px;
    line-height: 1.6;
}

.filter-clear {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    color: var(--discover-blue-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.location-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--discover-pale);
    color: #315765;
    font-size: 14px;
    line-height: 1.5;
}

.location-notice svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    flex: 0 0 auto;
}

.location-notice a { margin-left: auto; color: var(--discover-blue-dark); font-weight: 700; }
.location-notice.is-warning { background: #fff6df; color: #765d17; }

.primary-filter-row { margin-top: 20px; align-items: flex-end; }
.filter-keyword { flex: 1 1 auto; }
.filter-sort { flex: 0 0 240px; }

.filter-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.filter-field > span:first-child {
    color: #425a65;
    font-size: 13px;
    font-weight: 750;
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    border: 1px solid #cbd9de;
    border-radius: 10px;
    background: #fff;
    color: var(--discover-ink);
    font: inherit;
    font-size: 15px;
}

.filter-field input { padding: 10px 14px 10px 43px; }
.filter-field select { padding: 10px 35px 10px 12px; }

.filter-input-with-icon { position: relative; display: block; }
.filter-input-with-icon svg {
    position: absolute;
    z-index: 1;
    top: 13px;
    left: 14px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #70828a;
    stroke-width: 1.8;
}

.filter-submit {
    min-height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: 10px;
    background: var(--discover-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.filter-submit:hover { background: var(--discover-blue-dark); transform: translateY(-1px); }
.filter-submit:disabled { cursor: wait; opacity: .72; transform: none; }

.filter-field input:focus-visible,
.filter-field select:focus-visible,
.filter-submit:focus-visible,
.filter-clear:focus-visible,
.waterway-card:focus-visible,
.results-map-link:focus-visible,
.tag-pill:focus-visible,
.knowledge-link:focus-visible {
    outline: 3px solid rgba(47, 111, 141, .32);
    outline-offset: 2px;
}

.filter-more { margin-top: 18px; }
.filter-more summary {
    display: none;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    color: #34515e;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more summary svg { width: 20px; height: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .18s ease; }
.filter-more[open] summary svg { transform: rotate(180deg); }
.filter-count { padding: 3px 8px; border-radius: 999px; background: var(--discover-pale); color: var(--discover-blue-dark); font-size: 12px; }

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 18px;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5edef;
}

.active-filters span {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--discover-pale);
    color: #315c6e;
    font-size: 12px;
    font-weight: 700;
}

.discover-results {
    width: min(1180px, calc(100% - 40px));
    margin: 56px auto 0;
    padding-bottom: 32px;
}

.results-kicker { color: var(--discover-blue); }
.results-heading { align-items: center; margin-bottom: 22px; }
.results-heading > div { max-width: 760px; }
.results-map-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid #cbdce2;
    border-radius: 10px;
    color: var(--discover-blue-dark);
    background: #fff;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}
.results-map-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.waterway-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.waterway-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--discover-border);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(28, 60, 73, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.waterway-card:hover { transform: translateY(-3px); border-color: #aecbd6; box-shadow: 0 14px 30px rgba(28, 60, 73, .12); }

.waterway-card-map {
    position: relative;
    height: 158px;
    overflow: hidden;
    background: #dcecef;
    background-image: linear-gradient(34deg, transparent 42%, rgba(52, 125, 151, .18) 43%, rgba(52, 125, 151, .18) 47%, transparent 48%), linear-gradient(120deg, rgba(255,255,255,.5), transparent);
}
.waterway-card-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.waterway-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(19, 49, 62, .84);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(5px);
}
.waterway-map-marker {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #d95645;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
    transform: rotate(-45deg) translate(-50%, -50%);
}

.waterway-card-body { padding: 17px 18px 16px; }
.waterway-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.waterway-card h3 { min-width: 0; margin: 0; color: var(--discover-ink); font-size: 19px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quality-badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 7px; background: #e8f3eb; color: #2b6840; font-size: 12px; font-weight: 800; }
.quality-badge.is-pending { background: #f0f2f3; color: #68767d; }
.waterway-location { display: flex; align-items: center; gap: 5px; min-height: 22px; margin: 9px 0 14px; color: var(--discover-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waterway-location svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; }
.waterway-location span { color: #afbbc0; }
.waterway-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 13px; border-top: 1px solid #edf1f2; }
.waterway-metrics span { min-width: 0; display: grid; gap: 3px; }
.waterway-metrics small { color: #75858c; font-size: 11px; }
.waterway-metrics strong { color: #244a5a; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waterway-metric.metric-high strong { color: #22c55e; }
.waterway-metric.metric-mid strong { color: #0ea5e9; }
.waterway-metric.metric-low strong { color: #f59e0b; }
.waterway-metric.metric-poor strong { color: #ef4444; }
.waterway-metric.metric-unknown strong { color: #9ca3af; }
.waterway-metric.food-regular strong { color: #166534; }
.waterway-metric.food-controlled strong { color: #0369a1; }
.waterway-metric.food-caution strong { color: #92400e; }
.waterway-metric.food-not_recommended strong { color: #c2410c; }
.waterway-metric.food-avoid strong { color: #991b1b; }
.waterway-metric.food-unknown strong { color: #9ca3af; }

/* I2 PR-2:食用**频次**三态(轴 A)。上面五档是旧口径的, 紧急取证时仍可能渲染,
   故保留。三态刻意**不给绿色** —— 绿色会被读成"这处水安全", 而 D=1 只表示
   "没有经过验证的本地点位修正"。也不用 #9ca3af(那是地图"无数据"的灰),
   避免同色不同义。 */
.waterway-metric.food-no_limit strong { color: #64748b; }
.waterway-metric.food-limited strong { color: #92400e; }
.waterway-metric.food-blocked strong { color: #991b1b; }

/* v3.1 食用指数与咬钩、水质指数使用完全相同的四段阈值和颜色。
   类名只是数值区间，不把颜色命名成食品安全或可食用等级。 */
.waterway-metric.food-high strong { color: #22c55e; font-weight: 900; }
.waterway-metric.food-mid strong { color: #0ea5e9; font-weight: 850; }
.waterway-metric.food-low strong { color: #f59e0b; font-weight: 800; }
.waterway-metric.food-poor strong { color: #ef4444; font-weight: 750; }

/* 证据来源与健康结论**正交**:只改虚实/透明度, 不改颜色、不覆盖结论。
   仅有全国文献基线(本水体一项都没测过)时用虚线下划线提示"这个数字没有本地支撑"。 */
.waterway-metric.evidence-baseline_only strong {
    text-decoration: underline dotted 1px;
    text-underline-offset: 3px;
    opacity: 0.82;
}
.waterway-metric.evidence-tissue strong { font-weight: 800; }
.waterway-reference { margin: 11px 0 0; color: #849198; font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waterway-reference.is-warning { color: #8a6a18; white-space: normal; }

.results-state {
    padding: 56px 24px;
    border: 1px dashed #c7d8de;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}
.results-state h3 { margin: 0 0 8px; font-size: 20px; }
.results-state p { margin: 0 0 18px; color: var(--discover-muted); }
.results-state a { color: var(--discover-blue-dark); font-weight: 750; }
.results-state.is-error { border-color: #e6c6bd; background: #fff9f7; }
.results-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
}
.results-state-actions a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.results-state-actions .results-state-primary {
    padding: 0 16px;
    border-radius: 10px;
    background: var(--discover-blue);
    color: #fff;
    text-decoration: none;
}
.progressive-more {
    min-height: 44px;
    display: block;
    margin: 22px auto 0;
    padding: 0 22px;
    border: 1px solid #b8ced7;
    border-radius: 10px;
    background: #fff;
    color: var(--discover-blue-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}
.progressive-more[hidden] { display: none; }

.discover-secondary {
    width: min(1180px, calc(100% - 40px));
    box-sizing: border-box;
    margin: 32px auto 72px;
    padding: 26px 28px;
    border: 1px solid var(--discover-border);
    border-radius: 16px;
    background: #fff;
}
.fish-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.tag-pill { min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--discover-pale); color: #315b6c; font-size: 14px; font-weight: 700; text-decoration: none; }
.tag-pill:hover { background: #dceef3; }
.knowledge-link { display: inline-flex; min-height: 40px; align-items: center; color: var(--discover-blue-dark); font-size: 14px; font-weight: 750; }

@media (max-width: 960px) {
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .waterway-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .discover-hero {
        min-height: 165px;
        background-image: linear-gradient(120deg, rgba(14, 43, 56, .96), rgba(35, 91, 113, .88)), url("/static/images/backgrounds/fishing-hero.6c42d6433064.jpg");
        background-image: linear-gradient(120deg, rgba(14, 43, 56, .96), rgba(35, 91, 113, .88)), image-set(
            url("/static/images/backgrounds/fishing-hero-768.291c8d5febe4.avif") type('image/avif'),
            url("/static/images/backgrounds/fishing-hero-768.9a6bd65fd04f.webp") type('image/webp'),
            url("/static/images/backgrounds/fishing-hero.6c42d6433064.jpg") type('image/jpeg')
        );
    }
    .discover-hero-inner { width: min(100% - 32px, 1180px); padding: 30px 0 56px; }
    .discover-filter-wrap,
    .discover-results,
    .discover-secondary { width: calc(100% - 24px); }
    .discover-filter-form { padding: 20px 16px 18px; border-radius: 16px; }
    .filter-heading-row { align-items: flex-start; }
    .filter-heading-row h2, .results-heading h2 { font-size: 22px; }
    .location-notice { align-items: flex-start; flex-wrap: wrap; }
    .location-notice a { width: 100%; margin-left: 30px; }
    .primary-filter-row { gap: 10px; }
    .filter-submit { flex: 0 0 auto; padding: 0 17px; }
    .filter-more { margin-top: 12px; border-top: 1px solid #e6edef; }
    .filter-more summary { display: flex; padding-top: 10px; }
    .filter-more:not([open]) .filter-grid { display: none; }
    .filter-grid { grid-template-columns: 1fr 1fr; padding-top: 12px; }
    .results-heading { align-items: flex-start; }
    .results-map-link { flex: 0 0 auto; }
    .waterway-results-grid { gap: 14px; }
}

@media (max-width: 520px) {
    .discover-page { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
    .discover-hero h1 { font-size: 36px; }
    .primary-filter-row { display: grid; grid-template-columns: minmax(0, 1fr); }
    .filter-grid { grid-template-columns: 1fr; }
    .filter-actions { align-items: stretch; }
    .filter-actions .filter-submit { width: 100%; }
    .active-filters { gap: 6px; }
    .results-heading { display: block; }
    .results-map-link { margin-top: 14px; }
    .waterway-results-grid { grid-template-columns: 1fr; }
    .waterway-card-map { height: 150px; }
    .discover-secondary { margin-bottom: 32px; padding: 22px 18px; }
}

@media (max-width: 350px) {
    .discover-hero-inner { width: calc(100% - 24px); }
    .discover-filter-wrap, .discover-results, .discover-secondary { width: calc(100% - 16px); }
    .filter-submit { padding: 0 12px; }
    .filter-field input { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .filter-submit, .waterway-card, .filter-more summary svg { transition: none; }
    .filter-submit:hover, .waterway-card:hover { transform: none; }
}