.map-label-layer { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.coast-label { position:absolute; pointer-events:auto; transform:translate(-50%,-115%); display:flex; align-items:center; gap:5px; border:1px solid #ffffffd9; border-radius:6px; padding:5px 8px; background:#fcfbeded; color:#366250; box-shadow:0 2px 8px #1d55432b; font-size:10px; line-height:1.2; font-weight:700; white-space:nowrap; transition:background .15s,color .15s; }
.coast-label::before { content:''; width:5px; height:5px; flex:none; background:#74965c; border-radius:1px; transform:rotate(45deg); }
.coast-label.is-selected { background:#e27d53; color:#fffdf3; border-color:#ffd9b4; z-index:2; }
.coast-label.is-selected::before { background:#fff4d7; }
.coast-label:hover { background:#fffdf3; color:#a25739; }
.map-compass { position:absolute; z-index:2; right:95px; top:26px; display:flex; flex-direction:column; align-items:center; color:#2b7372; pointer-events:none; }
.compass-arrow { display:block; font-size:31px; font-family:Georgia,serif; line-height:1; transform-origin:50% 65%; }
.map-compass b { font-size:9px; margin-top:5px; letter-spacing:.08em; }
.flat-map { position:absolute; inset:0; width:100%; height:100%; background:#83d4ce; touch-action:none; }
#spot-list .spot-name { flex:1; }
#geo-source-info p { margin:6px 0; line-height:1.7; }
.weather-panel { margin-top:0; }
@media(max-width:760px) { .coast-label { font-size:9px; padding:5px 7px; } .map-compass { right:76px; top:60px; } .compass-arrow { font-size:26px; } }

.coast-label.is-mine { background:#fff3c9ed; color:#7a5a12; }
.coast-label.is-mine::before { background:#e6ad2e; }
.point-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.point-actions a, .point-actions button, .gps-button, .ghost-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:7px 11px; border-radius:9px; font-size:10px; font-weight:700; text-decoration:none; letter-spacing:.02em; }
.action-primary, .gps-button { background:#2f6f63; color:#fffdf3 !important; border:1px solid #2f6f63; }
.action-primary:hover, .gps-button:hover { background:#255a50; }
.action-secondary, .ghost-button { background:transparent; color:#36614f !important; border:1px solid #d7ddcf; }
.action-secondary:hover, .ghost-button:hover { background:#ecefe3; }
.gps-button svg { width:14px; height:14px; }
.my-spots-section { border-top:1px solid var(--line); padding:16px 3px 16px; }
.my-spot-actions { display:flex; gap:6px; flex-wrap:wrap; }
.gps-status { margin:9px 0 0; font-size:9.5px; line-height:1.75; color:#7c8a7a; }
.spot-form { margin-top:11px; padding:11px; border:1px solid #e3e7db; border-radius:11px; background:#fffef7; display:flex; flex-direction:column; gap:7px; }
.spot-form label { font-size:9px; font-weight:700; color:#6f8070; letter-spacing:.05em; }
.spot-form input { border:1px solid #d6ddcf; border-radius:8px; padding:9px 10px; font-size:12px; color:var(--ink); background:#fff; }
.spot-form input:focus { outline:2px solid var(--coral); outline-offset:1px; }
.spot-form .coordinates { margin:0; }
.spot-form-buttons { display:flex; gap:6px; }
.my-spot-empty { margin:11px 0 0; font-size:10px; color:#9aa394; }
.my-spot-list { display:flex; flex-direction:column; gap:4px; margin-top:9px; }
.my-spot-row { display:flex; align-items:center; gap:4px; }
.my-spot-open { flex:1; display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; border:1px solid transparent; background:transparent; text-align:left; font-size:11px; font-weight:600; }
.my-spot-open:hover { background:#ecefe3; }
.my-spot-open.is-active { background:#f7e8da; border-color:#e9cab4; color:#854d37; }
.my-spot-mark { width:8px; height:8px; background:#e6ad2e; transform:rotate(45deg); border-radius:1px; flex:none; }
.my-spot-delete { border:0; background:transparent; font-size:9px; color:#a2846f; padding:8px 6px; border-radius:7px; }
.my-spot-delete:hover { background:#f6e7dc; }
.my-spot-store { margin:8px 0 0; font-size:8.5px; color:#9aa394; }
.my-spot-store:empty { display:none; }
.layer-note { position:absolute; z-index:4; left:50%; bottom:22px; transform:translateX(calc(-50% + 160px)); max-width:min(440px, calc(100% - 380px)); padding:8px 13px; border-radius:10px; background:#f7f6eef0; color:#46675a; font-size:10px; line-height:1.6; box-shadow:0 3px 14px #234b3f16; }
.map-control.is-busy { opacity:.6; }
.gps-button.is-busy { opacity:.6; }
@media(max-width:760px) {
  .layer-note { left:10px; right:70px; transform:none; max-width:none; top:56px; bottom:auto; font-size:9px; }
  .point-actions a, .point-actions button { flex:1 1 auto; }
}

.point-actions .action-fish { flex: 1 1 100%; min-height: 40px; font-size: 12px; }

.coast-label { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
#selected-description { word-break: auto-phrase; text-wrap: pretty; }
@media (pointer: coarse) { .region-filters button { min-height: 40px; } .my-spot-delete { min-height: 40px; min-width: 40px; } }

@media (max-width: 760px) { #spot-list { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; } }

/* Wind and waves always in view under the header */
:root { --cond-height: 34px; }
.cond-bar { height: var(--cond-height); display: flex; align-items: center; gap: 6px; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); background: #10283a; color: #e9f1ec; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 11px; font-weight: 700; position: relative; z-index: 19; }
.cond-bar::-webkit-scrollbar { display: none; }
.cond-bar span { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 100px; background: #ffffff14; font-variant-numeric: tabular-nums; }
.cond-bar small { font-size: 9.5px; font-weight: 600; color: #a9c2c0; }
.map-workspace { height: calc(100svh - var(--header-height) - var(--cond-height)); }