/* Approved visual direction, applied to the existing live application. */
:root{--fg-bg:#0c1c1f;--fg-panel:#102326;--fg-raised:#183033;--fg-line:#ffffff0d;--fg-muted:#95aaa9;--fg-accent:#b4db77;color-scheme:dark}
body,.app-shell{background:var(--fg-bg)!important;color:#eaf0ee}
.app-shell{width:100%;max-width:none!important;margin:0!important}
.app-shell button,.app-shell a{transition:background-color .15s,color .15s,border-color .15s}
.app-shell button:focus-visible,.app-shell a:focus-visible{outline:2px solid var(--fg-accent)!important;outline-offset:3px}
.app-shell button.fg-action:not(.record-title):not(.catch-photo-button){box-shadow:none!important;background-image:none!important;border-radius:9px!important;font-weight:550!important}
.app-shell :is(input:not([type=checkbox]):not([type=range]):not([type=radio]):not([type=file]),select,textarea){background:#0c1c1f!important;border-color:#ffffff20!important;border-radius:9px!important;box-shadow:none!important;min-width:0;max-width:100%}
.app-shell :is(input,select,textarea):focus{border-color:var(--fg-accent)!important}
.sidebar{background:#0c1b1e!important;border-color:var(--fg-line)!important}
.sidebar .brand{margin-bottom:12px;padding-bottom:12px!important}
.sidebar nav{gap:2px!important}
.sidebar nav>button{border:0!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;font-weight:450!important;min-height:35px!important;padding:8px 11px!important;border-radius:8px!important;color:#a8bab8!important}
.sidebar nav>button.active{background:#b4db7712!important;color:var(--fg-accent)!important;font-weight:600!important}
.sidebar nav>button:hover{background:#ffffff06!important;color:#eaf0ee!important}
.sidebar nav>button>span{color:#7f9b98!important}
.sidebar nav>button.active>span{color:var(--fg-accent)!important}
.sidebar .profile,.sidebar .quick-catch{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:8px!important;padding:8px!important}
.sidebar .profile:hover,.sidebar .quick-catch:hover{background:#ffffff06!important}
.sidebar .profile strong,.sidebar .quick-catch strong{font-size:12px!important}
.sidebar .profile small,.sidebar .quick-catch small{font-size:10px!important;color:var(--fg-muted)!important}
.sidebar .avatar,.sidebar .quick-catch>span{width:32px!important;height:32px!important;min-width:32px!important}
.sidebar .quick-catch>span{background:#b4db7715!important;color:var(--fg-accent)!important;border-radius:8px!important}
.sidebar .account-tools{border-color:var(--fg-line)!important;gap:3px!important}
.sidebar .fg-legal-links{border-color:var(--fg-line)!important;padding:12px 10px!important;gap:6px!important}
.sidebar .fg-legal-links a{font-size:10px!important;color:#8fa6a1!important;background:none!important;border:0!important;padding:3px 0!important}
.sidebar :is(.fg-notification-bell,.fg-owner-statistics-link,.fg-support-link){background:transparent!important;box-shadow:none!important;border-color:var(--fg-line)!important;border-radius:8px!important;font-size:11px!important}
.fg-clean-heading{grid-column:1/-1;padding:0 0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fg-clean-heading small{color:#829c8d;letter-spacing:1.5px;font-size:9px;font-weight:600}
.fg-clean-heading h1{font-size:26px;letter-spacing:-.8px;font-weight:600;margin:6px 0}
.fg-clean-heading p{color:var(--fg-muted);font-size:12px;margin:0;line-height:1.6}
.fg-clean-heading>a{color:#9fb4b0;font-size:11px;text-decoration:none;white-space:nowrap;padding:9px 0}
.page-home .map-panel{border:0!important;border-radius:15px!important;isolation:isolate}
.page-home .map:after{box-shadow:none!important}
.map-panel .location-context,.map-panel .map-actions button,.map-panel .conditions>div,.map-panel .radar-toggle,.map-panel .fg-basemap-switch{background:#102326f5!important;border:1px solid #ffffff0d!important;box-shadow:0 4px 18px #0002!important;border-radius:10px!important}
.map-panel .location-context{padding:8px 11px!important}
.map-panel .location-context small{color:var(--fg-muted)!important;font-size:9px!important}
.map-panel .location-context strong{font-size:11px!important;font-weight:550!important}
.map-panel .map-actions button{font-size:11px!important;font-weight:550!important;padding:10px 12px!important;min-height:38px!important}
.map-panel .map-actions button.active,.map-panel .fg-basemap-switch button[aria-pressed=true],.map-panel .radar-toggle.active{background:var(--fg-accent)!important;color:#142518!important}
.map-panel .location-search{border:1px solid #ffffff16!important;background:#102326fa!important;border-radius:12px!important;box-shadow:0 12px 35px #0003!important}
.map-panel .location-search form{padding:8px!important}
.map-panel .location-search li button,.map-panel .fg-place-history button{border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.map-panel .location-search li+li{border-top:1px solid var(--fg-line)}
.map-panel .location-search li button:hover{background:#ffffff06!important}
.map-panel .conditions>div{padding:8px 10px!important}
.map-panel .conditions strong{font-weight:550!important}
.map-panel .conditions small{color:#9cb1aa!important}
.map-panel .leaflet-control-zoom{border:0!important;box-shadow:0 3px 15px #0002!important;border-radius:9px!important;overflow:hidden}
.map-panel .leaflet-control-zoom a{background:#102326f5!important;border-color:#ffffff12!important;color:#cfdbd3!important;font-weight:400!important;font-size:18px!important}
.fishery-context-panel,.save-location-bar,.detail-panel{background:var(--fg-panel)!important;border:1px solid var(--fg-line)!important;border-radius:12px!important;box-shadow:none!important}
.fishery-context-panel{margin-top:14px!important;padding:17px 20px!important;gap:12px!important}
.fishery-context-panel h2{font-weight:600!important;letter-spacing:-.35px;font-size:20px!important}
.fishery-context-panel>p{line-height:1.65!important;color:#a9bfba!important}
.fishery-context-panel>a{background:none!important;border:0!important;color:var(--fg-accent)!important;font-size:11px!important;padding:0!important;font-weight:500!important}
.save-location-bar{margin-top:12px!important;padding:14px 18px!important;gap:8px!important}
.save-location-bar .mapy-navigation{font-size:12px!important;min-height:32px!important}
.detail-panel{margin-top:12px!important;padding:18px!important}
.detail-panel dl>div{border-color:var(--fg-line)!important;font-size:12px!important}
.water-level-note{background:#ffffff03!important;font-size:11px!important;line-height:1.65!important}
.fishery-detail-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
.fishery-detail-card header strong{font-size:20px!important;line-height:1.35!important;font-weight:600!important;letter-spacing:-.4px}
.fishery-detail-card header small{color:var(--fg-accent)!important;font-size:9px!important;letter-spacing:.6px}
.fishery-detail-card header>span{white-space:nowrap;font-size:10px!important;flex:none}
.fishery-detail-card header>div{min-width:0}
.app-shell .fishery-detail-card button.fg-clean-rules-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none!important;background-image:none!important;border:0!important;border-top:1px solid var(--fg-line)!important;border-radius:0!important;box-shadow:none!important;text-align:left;font-size:12px!important;font-weight:550!important;color:#c8d5ca!important;padding:17px 0!important;margin-top:18px;cursor:pointer}
.fg-clean-rules-toggle:after{content:'⌄';font-size:16px;color:#8ca592}
.fg-clean-rules-toggle[aria-expanded=true]:after{content:'⌃'}
.fishery-detail-card:has(>.fg-clean-rules-toggle[aria-expanded=false])>.fishery-rules{display:none!important}
.fishery-detail-card>a{font-size:11px!important;line-height:1.65!important;font-weight:450!important;margin:12px 0!important;color:var(--fg-accent)!important}
.fishery-detail-card section{border-top:1px solid var(--fg-line)!important;padding-top:16px!important;margin-top:16px!important}
.fishery-detail-card section>b{color:#d1dfcd!important;font-size:11px!important;letter-spacing:.3px;font-weight:600!important}
.fishery-detail-card li,.fishery-detail-card p{font-size:12px!important;line-height:1.8!important;color:#b3c5bd!important;overflow-wrap:anywhere;white-space:pre-line}
.fishery-detail-card li+li{margin-top:11px!important}
.fishery-detail-card li::marker{color:#91b47a}
.fishery-detail-card .fishery-rules{background:none!important;border:0!important;border-top:1px solid var(--fg-line)!important;border-radius:0!important;padding:16px 0 0!important}
.desktop-fishery-details h3{font-size:11px!important;font-weight:550!important;color:#8fa99d!important;margin-bottom:18px!important}
.recommendations{background:var(--fg-panel)!important;border-color:var(--fg-line)!important;box-shadow:none!important}
.recommendations .fish-target{background:transparent!important;box-shadow:none!important;border:1px solid var(--fg-line)!important;border-radius:10px!important}
.recommendations header h2{font-size:18px!important;letter-spacing:-.4px;font-weight:600!important}
.recommendations .method-guide,.recommendations .recommendation-list article{box-shadow:none!important;border-color:var(--fg-line)!important;background:#ffffff02!important;border-radius:10px!important}
.recommendation-drawer-toggle{background:#183033f5!important;border:1px solid #ffffff20!important;box-shadow:none!important;font-weight:450!important}
.workspace:not(.page-home){background:var(--fg-bg)!important}
.workspace :is(.personal-page,.features-page,.fish-atlas-page,.forecast-page){max-width:none!important}
.workspace :is(.trip-card,.catch-card,.catch-summary-card,.favorite-card){background:var(--fg-panel)!important;border-color:var(--fg-line)!important;box-shadow:none!important;border-radius:12px!important}
@media(min-width:901px){
 .page-home:has(.fg-clean-weather-desktop) .map-panel .leaflet-bottom.leaflet-right:has(.fg-basemap-switch){left:0!important;right:0!important;bottom:0!important}
 .page-home:has(.fg-clean-weather-desktop) .map-panel .fg-basemap-switch.leaflet-control{position:absolute!important;left:190px!important;right:auto!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;display:flex!important;align-items:center;gap:5px;height:34px}
 .page-home:has(.fg-clean-weather-desktop) .map-panel :is(.fg-basemap-switch button,.radar-toggle,.fg-fishery-layers summary){height:34px!important;min-height:34px!important;padding:7px 10px!important;font-size:11px!important;font-weight:500!important;line-height:18px!important;border-radius:8px!important}
 .page-home:has(.fg-clean-weather-desktop) .map-panel .fg-basemap-switch .fg-fishery-layers{right:calc(100% + 6px)!important;bottom:0!important}
 .app-shell{grid-template-columns:220px minmax(0,1fr)!important}
 .sidebar{position:sticky!important;top:0!important;height:100dvh!important;min-height:0!important;overflow-y:auto!important;padding:26px 15px 14px!important;scrollbar-width:thin;scrollbar-color:#30433d transparent}
 .workspace.page-home{padding:26px 32px!important;column-gap:22px!important;row-gap:0!important;align-content:start!important;grid-template-columns:minmax(0,1fr) 340px!important}
 .workspace.page-home:has(>.recommendation-drawer.is-collapsed){grid-template-columns:minmax(0,1fr) 0!important;column-gap:0!important}
 .workspace.page-home>.map-column{grid-row:2!important;min-width:0}
 .workspace.page-home>.recommendation-drawer{grid-row:2!important;grid-column:2!important;min-height:0}
 .page-home .map-panel{height:clamp(570px,76dvh,1100px)!important;min-height:0!important;max-height:none!important}
 #desktop-recommendation-content{background:var(--fg-panel)!important;border:1px solid var(--fg-line)!important;border-radius:14px!important;overflow:hidden}
 .desktop-fishery-details{padding:23px!important}
 .recommendation-drawer .recommendations{min-height:0!important;padding:22px!important;border-top:1px solid var(--fg-line)!important}
 .recommendation-drawer-toggle{margin-left:-26px!important;width:26px!important;min-height:130px!important;border-radius:8px 0 0 8px!important}
 .recommendation-drawer-toggle span{font-size:10px!important}
 .page-home .map-top{left:16px!important;right:16px!important;top:16px!important}
 .page-home .detail-scroll{display:block!important}
 .page-home .detail-scroll>h3{margin-bottom:12px!important}
}
@media(min-width:901px) and (max-width:1250px){
 .app-shell{grid-template-columns:195px minmax(0,1fr)!important}
 .workspace.page-home{padding:22px!important;column-gap:18px!important;grid-template-columns:minmax(0,1fr) 290px!important}
 .desktop-fishery-details{padding:18px!important}
 .map-panel .location-context{max-width:48%!important}
 .map-panel .map-actions button{font-size:10px!important;padding:9px 8px!important}
}
@media(max-width:900px){
 .fg-clean-heading{display:none!important}
 .app-shell{display:block!important}
 .mobile-bar{background:#0c1b1e!important;border-color:var(--fg-line)!important;box-shadow:none!important}
 .mobile-navigation{background:#102326f5!important;border-color:var(--fg-line)!important;box-shadow:none!important;backdrop-filter:blur(12px)}
 .mobile-navigation>button{background:none!important;border:0!important;box-shadow:none!important;border-radius:8px!important;color:#8fa7a1!important}
 .mobile-navigation>button.active{background:#b4db7710!important;color:var(--fg-accent)!important}
 .mobile-navigation small{font-size:10px!important}
 .page-home>.map-column{padding:12px 12px 0!important}
 .page-home .map-panel{height:clamp(494px,79.3svh,741px)!important;min-height:0!important;border-radius:12px!important}
 .page-home .map-top{top:11px!important;left:10px!important;right:10px!important;gap:7px!important}
 .map-panel .location-context{padding:6px 9px!important;min-height:0!important;border-radius:8px!important}
 .map-panel .map-actions button{min-height:34px!important;padding:8px 10px!important;font-size:10px!important}
 .page-home .conditions>div{padding:3px 5px!important;border-radius:7px!important;height:36px!important}
 .page-home .conditions strong{font-size:11px!important}
 .page-home .conditions small{font-size:8px!important}
 .fishery-context-panel{margin-top:12px!important;padding:16px!important}
 .fishery-context-panel h2{font-size:20px!important}
 .fishery-context-panel>dl{font-size:11px!important}
 .save-location-bar{padding:12px!important;margin-top:10px!important}
 .detail-panel{padding:15px!important;margin-top:10px!important}
 .page-home .recommendations{margin:12px!important;border:1px solid var(--fg-line)!important;border-radius:12px!important;padding:16px!important}
 .sidebar{padding:18px!important}
 .sidebar nav>button{min-height:40px!important;font-size:13px!important}
 .map-panel .location-search{top:104px!important;left:10px!important;width:calc(100% - 20px)!important;max-width:430px!important}
}
@media(prefers-reduced-motion:reduce){.app-shell button,.app-shell a{transition:none!important}}
.fg-clean-weather{padding:22px;color:#eaf0ee;border-top:1px solid var(--fg-line)}
.fg-clean-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.fg-clean-section-title h3{margin:0;font-size:13px;font-weight:600;color:#d1dfd6}
.fg-clean-section-title>a{color:#92b28e;font-size:10px;text-decoration:none}
.fg-clean-weather-summary{display:flex;align-items:center;gap:15px}
.fg-clean-weather-icon{font-size:38px;line-height:1}
.fg-clean-weather-summary strong{display:block;font-size:34px;line-height:1.15;letter-spacing:-1px;font-weight:450}
.fg-clean-weather-summary span:not(.fg-clean-weather-icon){display:block;font-size:11px;color:#9cafaa;margin-top:6px}
.fg-clean-weather-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 17px}
.fg-clean-weather-values>div{min-width:0;display:grid;align-content:start;gap:6px}
.fg-clean-weather-values span{font-size:10px;color:#7f9c91}
.fg-clean-weather-values strong{font-size:12px;font-weight:550;white-space:nowrap}
.fg-clean-weather-values small{font-size:9px;color:#8aa39a;line-height:1.5;overflow-wrap:anywhere}
.fg-clean-weather details{border-top:1px solid var(--fg-line);margin-top:10px;padding-top:12px}
.fg-clean-weather summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;color:#b5c9bc;font-size:11px;padding:4px 0;line-height:1.5}
.fg-clean-weather summary::-webkit-details-marker{display:none}
.fg-clean-weather summary:after{content:'⌄';color:#8ca592}
.fg-clean-weather details[open]>summary:after{content:'⌃'}
.fg-clean-forecast-days,.fg-clean-forecast-hours{display:flex;overflow-x:auto;gap:5px;margin-top:12px;scrollbar-width:thin;padding-bottom:4px}
.app-shell .fg-clean-weather :is(.fg-clean-forecast-days,.fg-clean-forecast-hours)>button{min-width:58px;min-height:40px;padding:7px 8px!important;background:#ffffff03!important;color:#b9cdc3!important;border:1px solid #ffffff10!important;border-radius:7px!important;box-shadow:none!important;flex:0 0 auto;font:inherit;text-align:center;cursor:pointer}
.app-shell .fg-clean-weather :is(.fg-clean-forecast-days,.fg-clean-forecast-hours)>button.active{background:#b4db771a!important;color:var(--fg-accent)!important;border-color:#b4db7755!important}
.fg-clean-weather :is(.fg-clean-forecast-days,.fg-clean-forecast-hours)>button :is(strong,small,span,b){display:block;font-size:10px!important;line-height:1.4;font-weight:450}
.fg-clean-weather .hydrology-data{margin-top:12px}
.fg-clean-weather .hydrology-data>div{font-size:11px!important;padding:8px 0!important;border-color:var(--fg-line)!important}
.fg-clean-weather .hydrology-data a{color:var(--fg-accent)}
.fg-clean-weather .water-level-note{font-size:10px!important;line-height:1.65!important;margin-bottom:0}
.fg-clean-upgrade{display:block;padding:10px 0;color:var(--fg-accent);font-size:12px;line-height:1.6;text-decoration:none}
.app-shell .fg-clean-weather button.fg-clean-weather-retry{font:inherit;font-size:11px!important;color:var(--fg-accent)!important;box-shadow:none!important;background:none!important;border:0!important;padding:13px 0!important;cursor:pointer}
@media(min-width:901px){
 .page-home:has(.fg-clean-weather-desktop) .map-panel .fg-basemap-switch button{background:#102326f5!important;color:#d9e5df!important;border:1px solid #ffffff10!important}
 .page-home:has(.fg-clean-weather-desktop) .map-panel .fg-basemap-switch button[aria-pressed=true]{background:var(--fg-accent)!important;color:#142518!important;border-color:var(--fg-accent)!important}
}
.fg-clean-weather-mobile{display:none}
/* Keep the disclosure trigger in the control row; expand content above it. */
.map-panel .fg-basemap-switch .fg-fishery-layers[open]{display:block!important;width:210px!important;max-width:min(210px,calc(100vw - 32px))!important;padding:0 0 42px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]>summary{position:absolute!important;bottom:0!important;right:0!important;left:auto!important;width:max-content!important;margin:0!important;background:#102326f5!important;border:1px solid #ffffff20!important;border-radius:8px!important;box-sizing:border-box;z-index:2}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]>div,.map-panel .fg-basemap-switch .fg-fishery-layers[open]>label{width:100%!important;box-sizing:border-box;background:#102326fc!important;border:1px solid #36514e!important;padding:10px 12px!important;margin:0!important;font-size:12px!important;color:#d9e5df!important;box-shadow:0 -5px 18px #0002}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]>div:first-of-type{border-radius:10px 10px 0 0!important}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]>label{border-top:0!important;border-radius:0 0 10px 10px!important;display:flex;align-items:center;gap:8px;min-height:40px}
@media(max-width:900px){.map-panel .fg-basemap-switch .fg-fishery-layers[open]>summary{left:0!important;right:auto!important;width:70px!important}}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]{width:70px!important;max-width:70px!important}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]>summary{left:0!important;right:auto!important;width:70px!important}
.map-panel .fg-basemap-switch .fg-fishery-layers[open]>div,.map-panel .fg-basemap-switch .fg-fishery-layers[open]>label{width:210px!important;max-width:calc(100vw - 120px)!important}
.page-home:has(.fg-clean-weather-desktop) .map-panel>.conditions{display:none!important}
.page-home:has(.fg-clean-weather-desktop) .detail-panel>.forecast-planner{display:none!important}
@media(min-width:901px){
 .page-home:has(.fg-clean-weather-desktop) .map-panel .radar-toggle{bottom:25px!important}
 .page-home:has(.fg-clean-weather-desktop) .map-panel .fg-basemap-switch{bottom:25px!important}
 .page-home:has(.fg-clean-weather-desktop) .map-panel .legend{bottom:70px!important}
 .page-home:has(.fg-clean-weather-desktop) .map-panel .leaflet-control-zoom{margin-bottom:100px!important}
 .recommendation-drawer .recommendations .method-tabs,.recommendation-drawer .recommendations .advice-filter{display:flex!important;flex-wrap:wrap;gap:5px!important}
 .app-shell .recommendation-drawer .recommendations :is(.method-tabs,.advice-filter)>button{flex:0 1 auto!important;width:auto!important;min-height:30px!important;padding:6px 9px!important;font-size:10px!important;background:#ffffff03!important;border:1px solid var(--fg-line)!important;border-radius:7px!important;box-shadow:none!important;color:#9eb5ab!important}
 .app-shell .recommendation-drawer .recommendations :is(.method-tabs,.advice-filter)>button.active{background:#b4db7715!important;border-color:#b4db7730!important;color:var(--fg-accent)!important}
}
@media(max-width:900px){
 .fg-clean-weather-desktop{display:none!important}
 .fg-clean-weather-mobile{display:block;margin-top:10px;padding:18px;background:var(--fg-panel);border:1px solid var(--fg-line);border-radius:12px}
 .fg-clean-weather-summary strong{font-size:31px}
 .fg-clean-section-title{margin-bottom:15px}
 .fg-clean-weather-values{margin-top:18px}
 .page-home:has(.fg-clean-weather-mobile) .map-panel>.conditions{display:none!important}
 .page-home:has(.fg-clean-weather-mobile) .map-panel{height:clamp(468px,70.2svh,624px)!important}
 .page-home:has(.fg-clean-weather-mobile) .map-panel button.radar-toggle.fg-action.fg-action:not(.record-title):not(.catch-photo-button){bottom:24px!important}
 .page-home:has(.fg-clean-weather-mobile) .map-panel .fg-basemap-switch.leaflet-control{bottom:24px!important}
 .page-home:has(.fg-clean-weather-mobile) .map-panel .leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-bottom:76px!important}
}