/* North Wildwood V2-inspired key. Model palette and flood assets are unchanged.
   First cascade layer owns legend-only overrides above the legacy mobile CSS. */
@layer shorely-v2-key {
  #legendDock { --pj-equal-legend-min-h:74px !important; }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock {
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:74px !important;
    max-height:none !important;
    padding:6px 12px 9px !important;
    border:1px solid rgba(191,219,254,.2) !important;
    border-radius:16px !important;
    background:rgba(11,18,32,.96) !important;
    overflow:visible !important;
  }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock .legend-header {
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    position:static !important; height:24px !important; min-height:24px !important;
    padding:0 !important; margin:0 0 5px !important; gap:8px !important;
  }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock .legend-header-text {
    display:block !important; min-width:0 !important;
  }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock .legend-title {
    display:block !important; margin:0 !important; font-size:18px !important;
    line-height:24px !important; font-weight:850 !important; color:#f1f7ff !important;
  }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock .legend-header-actions {
    display:flex !important; align-items:center !important; gap:5px !important; position:static !important;
  }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock .legend-header-actions button {
    display:inline-grid !important; place-items:center !important; position:static !important;
    width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important;
    padding:0 !important; margin:0 !important; font-size:13px !important;
  }
  #legendDock .legend-sub, #legendDock .legend-note { display:none !important; }
  :is(body:not(.mobile-optimized), body.mobile-legend-open) #legendDock:not(.legend-collapsed) .legend-body {
    display:block !important; height:auto !important; max-height:none !important;
    padding:0 !important; margin:0 !important; overflow:visible !important;
  }
  #legendDock[data-legend-mode="depth"] .legend-list,
  #exportLegendDock[data-export-legend-mode="depth"] .legend-list {
    display:block !important; width:100% !important; height:auto !important; min-height:30px !important;
    padding:0 !important; margin:0 !important; gap:0 !important;
  }
  .depth-legend-scale { display:block !important; width:100% !important; min-width:0 !important; margin:0 !important; }
  .depth-legend-labels {
    display:grid !important; grid-template-columns:max-content minmax(0,1fr) auto !important;
    align-items:center !important; gap:12px !important; margin:0 1px 4px !important;
    font-size:11px !important; font-weight:850 !important; line-height:12px !important;
    color:#e7f3ff !important; text-transform:uppercase !important; letter-spacing:.035em !important;
  }
  .depth-legend-labels span:last-child { justify-self:end !important; }
  .depth-legend-gradient {
    display:block !important; width:100% !important; height:12px !important; box-sizing:border-box !important;
    border:1px solid rgba(255,255,255,.5) !important; border-radius:999px !important;
    background:linear-gradient(90deg,var(--below) 0%,var(--below) 18%,var(--depth-0) 18%,var(--depth-1) 26.2%,var(--depth-2) 34.4%,var(--depth-3) 42.6%,var(--depth-4) 50.8%,var(--depth-5) 59%,var(--depth-6) 67.2%,var(--depth-7) 75.4%,var(--depth-8) 83.6%,var(--depth-9) 91.8%,var(--depth-10) 100%) !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.2) !important;
  }
  #legendDock[data-legend-mode="dynamic"] .legend-list,
  #exportLegendDock[data-export-legend-mode="dynamic"] .legend-list {
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:center !important; gap:8px !important; margin:0 !important; padding:0 !important;
  }
  #legendDock[data-legend-mode="dynamic"] .legend-row,
  #exportLegendDock[data-export-legend-mode="dynamic"] .legend-row {
    display:grid !important; grid-template-columns:14px minmax(0,1fr) !important;
    gap:6px !important; align-items:center !important; min-height:24px !important; padding:0 !important;
  }
  #legendDock[data-legend-mode="dynamic"] .legend-label,
  #exportLegendDock[data-export-legend-mode="dynamic"] .legend-label {
    font-size:12px !important; font-weight:850 !important; line-height:1.2 !important; white-space:nowrap !important;
  }
  #legendDock[data-legend-mode="dynamic"] .legend-swatch,
  #exportLegendDock[data-export-legend-mode="dynamic"] .legend-swatch {
    width:14px !important; height:14px !important; border-radius:4px !important;
  }
  #legendDock.legend-collapsed { --pj-equal-legend-min-h:40px !important; min-height:40px !important; }
  #exportLegendDock { padding:10px 12px !important; min-width:300px !important; height:auto !important; }
  #exportLegendDock .legend-header { display:block !important; padding:0 !important; margin:0 0 8px !important; }
  #exportLegendDock .legend-title { font-size:17px !important; line-height:22px !important; margin:0 !important; }
  #exportLegendDock .legend-sub, #exportLegendDock .legend-note { display:none !important; }
  @media (max-width:900px), (max-height:560px) {
    body.mobile-legend-open #legendDock {
      position:fixed !important; top:max(calc(112px + env(safe-area-inset-top,0px)),var(--v2-key-alert-bottom,0px)) !important; bottom:auto !important;
      left:50% !important; right:auto !important; transform:translateX(-50%) !important;
      width:min(360px,calc(100vw - 16px)) !important; min-width:0 !important; max-width:calc(100vw - 16px) !important;
    }
    body.mobile-legend-open #legendDock .legend-title { font-size:16px !important; }
    body.mobile-legend-open #legendDock .legend-header-actions button {
      width:28px !important; min-width:28px !important; height:28px !important; min-height:28px !important;
    }
    body.mobile-legend-open #legendDock .legend-header { height:28px !important; min-height:28px !important; }
    body.mobile-legend-open #legendDock::before, body.mobile-legend-open #legendDock::after { display:none !important; content:none !important; }
  }
  @media (min-width:600px) and (max-height:560px) and (orientation:landscape) {
    body.mobile-legend-open #legendDock { top:max(60px,var(--v2-key-alert-bottom,0px)) !important; }
  }
}