.waterKey { font-size: 11px; line-height: 1.4; color: #365962; margin: 6px 0; }
.waterKey .waterRamp { display: inline-block; width: 55px; height: 8px; border-radius: 5px; background: linear-gradient(90deg,#f5c642,#ea7e2a,#c93d3a); margin-right: 5px; }
@media (max-width: 768px) { .waterKey { font-size: 10px; } }

.check[hidden] { display: none !important; }

.waterReferences { margin: 9px 0 4px; padding: 8px 10px; background: #f6f9f8; border: 1px solid #e0e9e5; border-radius: 9px; color: #365962; font-size: 11px; }
.waterReferenceBlue { display: flex; align-items: center; gap: 7px; line-height: 1.3; margin-bottom: 7px; }
.waterBlueRamp { width: 36px; height: 7px; flex-shrink: 0; border-radius: 5px; background: linear-gradient(90deg,#d6eef8,#2f86c3,#0a315d); }
.warningKey { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.warningKey caption { text-align: left; margin-bottom: 5px; font-size: 10px; }
.warningKey th { font-weight: 650; padding: 2px; }
.warningKey td { padding: 1px 2px; }
.keySwatch { display: inline-block; width: 13px; height: 5px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.keyYellow { background: #f5c642; } .keyOrange { background: #ea7e2a; } .keyRed { background: #c93d3a; }
.keyDepth,.keyFootnote { color: #526c64; font-size: 10px; }
.keyFootnote { margin: 5px 0 0; line-height: 1.3; }
.waterKey:empty { display: none; }
.addressSearch { position: relative; }
.addressSearch summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: #fff; border: 1px solid #d8e5e1; border-radius: 10px; color: #164e51; cursor: pointer; list-style: none; font-size: 12px; font-weight: 650; }
.addressSearch summary::-webkit-details-marker { display: none; }
.addressSearch summary svg { width: 18px; height: 18px; }
.addressPanel { position: absolute; top: calc(100% + 8px); right: 0; width: min(330px,calc(100vw - 24px)); padding: 14px; border: 1px solid #c7dad3; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px #183d3426; max-height: 65dvh; overflow: auto; box-sizing: border-box; }
.addressPanel form { display: grid; gap: 6px; }
.addressPanel label { font-size: 12px; font-weight: 650; color: #365962; }
.addressPanel input,.addressPanel select { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; border: 1px solid #bcd3ca; border-radius: 7px; padding: 8px; font-size: 16px; background: #fff; color: #173e37; }
.addressActions { display: flex; gap: 7px; margin-top: 3px; }
.addressPanel button { min-height: 44px; padding: 8px 10px; border: 1px solid #bcd3ca; border-radius: 7px; color: #164e51; background: #edf6f2; cursor: pointer; font: inherit; font-size: 12px; }
#addressSubmit { flex: 1; background: #17566d; color: white; }
#addressSubmit:disabled { opacity: .5; cursor: wait; }
#addressStatus { font-size: 12px; line-height: 1.4; margin: 9px 0; }
#addressResults { padding: 0; margin: 0; list-style: none; }
#addressResults button { width: 100%; text-align: left; margin-bottom: 5px; }
.addressPanel small { display: block; font-size: 10px; line-height: 1.4; color: #526c64; }
.addressSearch :focus-visible { outline: 3px solid #24889a; outline-offset: 2px; }
.mapToolbar:has(.addressSearch[open]) { z-index: 30; }
.map-focus .addressSearch { display: none; }
@media (max-width:768px) {
  .addressSearch { position: static; }
  .addressSearch summary { width: 44px; padding: 0; justify-content: center; }
  .addressSearch summary span { display: none; }
  .addressPanel { right: 0; max-height: 55dvh; }
  .waterReferences { font-size: 10px; padding: 7px 8px; }
}

/* Institutional marks share one header cell; the supplied white IGN mark keeps its original pixels. */
.topbar { grid-template-columns:44px minmax(0,1fr) auto minmax(0,1fr) auto; }
.institutionalMarks { grid-column:5; grid-row:1; display:flex; align-items:center; gap:6px; justify-self:end; }
.institutionalMarks .camLogo { width:32px; height:32px; }
.ignLogo { display:block; width:42px; height:32px; padding:3px; box-sizing:border-box; object-fit:contain; background:#163f53; border-radius:5px; }
@media (max-width:1200px) {
  .topbar { grid-template-columns:44px minmax(0,1fr) auto auto; }
  .institutionalMarks { grid-column:4; }
}
@media (max-width:768px), (pointer:coarse) and (max-height:520px) {
  .topbar { grid-template-columns:44px minmax(40px,1fr) auto 62px; gap:3px; }
  .institutionalMarks { gap:4px; }
  .institutionalMarks .camLogo { width:24px; height:24px; }
  .ignLogo { width:34px; height:26px; padding:2px; }
  .topbar .experienceSwitch button { padding:6px; font-size:10px; }
}