/* Muted coastal water cards: shared lake/bay treatment; fish cards retain their field-guide style. */
.water-card{display:flex;flex-direction:column;min-width:0;background:#183b46;border-color:#365d66;border-radius:16px;color:#eef8f7;box-shadow:0 4px 16px #020f1812;transition:border-color .18s,box-shadow .18s,transform .18s}
.water-card-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:#285566;flex:none}
.water-card .water-card-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.water-card .card-body{display:flex;flex-direction:column;flex:1;align-items:flex-start;min-width:0;padding:19px 20px 17px}
.water-card-kind{display:inline-flex;align-items:center;background:#244e5a;color:#c3e5ed;border:1px solid #436a72;border-radius:999px;padding:3px 9px;margin:0 0 11px;font-size:10px;line-height:1.3;font-weight:800;letter-spacing:.5px}
.water-card-coastal .water-card-kind{background:#254c44;color:#c3ebd9;border-color:#427467}
.water-card h3{color:#eef8f7;font-size:19px;line-height:1.3;margin:0 0 6px;overflow-wrap:anywhere}
.water-card p.water-card-region{color:#b8ced2;font-size:12px;line-height:1.5;margin:0 0 7px}
.water-card p.water-card-detail{color:#b8ced2;font-size:11px;line-height:1.5;margin:0 0 15px}
.water-card .card-foot{width:100%;margin-top:auto;padding-top:12px;border-top:1px solid #365d66;color:#77deca;font-size:12px;font-weight:700;gap:8px}
.water-card-saved{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #d7eee6;border-radius:999px;background:#f5faf9;color:#135648;font-size:10px;font-weight:800;line-height:1.3;box-shadow:0 2px 8px #082b2e26}
.water-card:focus-visible{outline:3px solid #56d5c0;outline-offset:4px}
.grid:has(>.water-card),.grid:has(>.wt-saved-card){gap:20px;align-items:stretch}
.section:has(>.grid>.water-card){margin-block:38px}
.section:has(>.grid>.water-card)>.section-top{align-items:baseline;flex-wrap:wrap;row-gap:8px;margin-bottom:20px}
.coastal-feature{padding-top:30px;border-top:1px solid var(--edge)}
@media(hover:hover){.water-card:hover{border-color:#60ad9e;box-shadow:0 8px 22px #020f1826;transform:translateY(-3px)}.water-card:hover .card-foot{color:#b6f3e5}}
@media(max-width:850px){.grid:has(>.water-card),.grid:has(>.wt-saved-card){gap:16px}}
@media(max-width:600px){
 .grid:has(>.water-card),.grid.three:has(>.water-card),.grid:has(>.wt-saved-card),.grid.three:has(>.wt-saved-card){grid-template-columns:minmax(0,1fr);gap:14px}
 .water-card{display:grid;grid-template-columns:110px minmax(0,1fr);border-radius:13px}
 .water-card-art{aspect-ratio:auto;min-height:166px;height:100%}
 .water-card .card-body{padding:15px 16px 13px}
 .water-card-kind{font-size:9px;margin-bottom:8px;padding:3px 8px}
 .water-card h3{font-size:17px;margin-bottom:5px}
 .water-card p.water-card-region{font-size:11px;margin-bottom:5px}
 .water-card p.water-card-detail{font-size:11px;margin-bottom:11px}
 .water-card .card-foot{font-size:11px;padding-top:9px}
 .water-card-saved{top:8px;right:8px;font-size:9px;padding:4px 6px;gap:3px}
 .section:has(>.grid>.water-card){margin-block:30px}
 .section:has(>.grid>.water-card)>.section-top{margin-bottom:16px;gap:8px 14px}
 .coastal-feature{padding-top:24px}
}
@media(max-width:359px){.water-card{grid-template-columns:90px minmax(0,1fr)}.water-card .card-body{padding:13px 12px}.water-card h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){.water-card{transition:none}.water-card:hover{transform:none}}

/* Quick Limits keep a normal desktop table and become labeled rows on phones. */
@media(max-width:640px){
 #quick .section-top{flex-wrap:wrap;align-items:flex-start;gap:10px}
 #quick .section-top .tag{max-width:100%;overflow-wrap:anywhere}
 #quick .quick-limits-wrap{overflow:visible;border:0;border-radius:0;background:transparent}
 #quick .quick-limits-wrap table{display:block;width:100%;min-width:0;font-size:14px}
 #quick .quick-limits-wrap thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 #quick .quick-limits-wrap tbody{display:grid;gap:12px;width:100%;min-width:0}
 #quick .quick-limits-wrap tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);min-width:0;border:1px solid var(--edge);border-radius:12px;background:var(--panel);overflow:hidden}
 #quick .quick-limits-wrap tbody td{display:block;min-width:0;max-width:100%;padding:12px 14px;border:0;font-weight:400;overflow-wrap:anywhere;white-space:normal}
 #quick .quick-limits-wrap tbody td::before{content:attr(data-label);display:block;color:var(--muted);font-size:10px;line-height:1.4;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
 #quick .quick-limits-wrap tbody td:first-child{grid-column:1/-1;min-width:0;background:#15313d;font-size:16px;font-weight:700;padding:0}
 #quick .quick-limits-wrap tbody td:first-child::before{display:none}
 #quick .quick-limits-wrap tbody td:first-child a{display:block;padding:13px 14px;min-height:46px}
 #quick .quick-limits-wrap tbody td:last-child{grid-column:1/-1;border-top:1px solid var(--edge);padding-top:11px}
 #quick .quick-limits-wrap tbody td small{font-size:12px;line-height:1.5}
}

/* Show the daylight in existing water scenery; keep the text side shaded. */
.hero.water-daylight-hero:after{background:linear-gradient(90deg,rgba(4,18,26,.78) 0%,rgba(4,18,26,.68) 44%,rgba(4,18,26,.52) 64%,rgba(4,18,26,.12) 82%,rgba(4,18,26,.02) 100%),linear-gradient(0deg,rgba(4,18,26,.2),transparent 65%)}
.water-daylight-hero .hero-content>p{color:#e3f2f4}
.water-daylight-hero .hero-content>.eyebrow{color:#76e7d3}
.water-daylight-hero .home-observations>div{background:rgba(24,59,70,.94);border-color:#52777f}
.water-daylight-hero .home-observations .label,.water-daylight-hero .home-observations small{color:#d2e6e9}
.water-daylight-hero .home-observations a{color:#88ebd8}
.water-daylight-hero .home-refresh{color:#d2e6e9!important}
.water-daylight-hero .hero-weather{background:rgba(24,59,70,.94);border-color:#52777f}
.water-daylight-hero .weather-kicker,.water-daylight-hero .weather-summary small{color:#d2e6e9}
@media(max-width:700px){
 .hero.water-daylight-hero:after{background:linear-gradient(90deg,rgba(4,18,26,.72),rgba(4,18,26,.58)),linear-gradient(0deg,rgba(4,18,26,.2),transparent 70%)}
 /* Bay observations flow below the content; varying source text cannot overlap the title. */
 .water-daylight-hero:has(>#coast-brief){display:flex;flex-direction:column;align-items:stretch;min-height:0}
 .water-daylight-hero:has(>#coast-brief)>.hero-content{padding:28px 22px 24px;max-width:none}
 .water-daylight-hero>#coast-brief{position:relative;top:auto;right:auto;align-self:stretch;width:auto;min-width:0;margin:0 18px 18px}
 #coast-brief .weather-summary{padding:11px 14px;overflow-wrap:anywhere}
 #coast-brief .weather-kicker{font-size:10px;line-height:1.4}
 #coast-brief .weather-line{flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:5px 0}
 #coast-brief .weather-line strong{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;min-width:0;font-size:22px;white-space:normal}
 #coast-brief .weather-line strong small{display:inline;font-size:11px;font-weight:500;line-height:1.3;margin:0}
 #coast-brief .weather-summary>small{font-size:10px;line-height:1.5}
}

/* Saved ordering stays compact and readable beside account-wrapped cards. */
#app [data-order-saved63]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;width:fit-content;margin:0 0 12px;padding:9px 12px;border:1px solid var(--edge,#42616d);border-radius:9px;background:var(--panel,#102633);color:var(--ink,#f1f6f6);font:inherit;font-size:.82rem;line-height:1.4;white-space:normal;cursor:pointer}
#app [data-order-saved63]:focus-visible{outline:2px solid var(--teal,#56d5c0);outline-offset:3px}