[x-cloak] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #9aa7bb; }
#map { width: 100%; height: 100%; }
.maplibregl-canvas { cursor: crosshair; }
.panel-toggle { position: absolute; top: 50%; left: -32px; width: 32px; height: 48px; background: rgba(255,255,255,.95); border: 1px solid #ddd; border-radius: 8px 0 0 8px; color: #475569; font-size: 24px; }
.panel-toggle svg { width: 18px; height: 18px; margin: auto; transition: transform .3s ease; }
.panel-open .panel-toggle svg { transform: rotate(180deg); }
/* Keep the native attribution outside, flush with the moving panel edge. */
.maplibregl-ctrl-bottom-right { right: 0; max-width: 100%; transition: right .3s cubic-bezier(.4, 0, .2, 1); }
.panel-open .maplibregl-ctrl-bottom-right { right: 18rem; max-width: calc(100% - 18rem); }
@media (min-width: 768px) {
  .panel-open .maplibregl-ctrl-bottom-right { right: 20rem; max-width: calc(100% - 20rem); }
}
#info-panel { position: absolute; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); left: 16px; z-index: 40; max-width: calc(100vw - 32px); }
.rainfall-card { position: relative; box-sizing: border-box; width: 390px; max-width: 100%; overflow: hidden; border-radius: 18px; background: rgba(28,30,34,.88); backdrop-filter: blur(24px); border: 1px solid #ffffff14; color: #f1f1f2; box-shadow: 0 12px 32px #00000026; }
.rainfall-close { position: absolute; right: 16px; top: 17px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff1a; border-radius: 50%; color: #c5c5c8; background: #ffffff08; transition: background .15s, color .15s; }
.rainfall-close:hover { background: #ffffff1a; color: white; }
.rainfall-close:focus-visible { outline: 2px solid #d2d2d5; outline-offset: 3px; }
.rainfall-close svg { width: 16px; height: 16px; }
.rainfall-card dl, .rainfall-card dd { margin: 0; }
.rainfall-reading { padding: 29px 28px 30px; }
.rainfall-reading dt { display: flex; align-items: center; gap: 9px; padding-right: 28px; color: #a9aaad; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.rainfall-reading dd { margin-top: 20px; font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rainfall-reading dd[data-state="status"] { min-height: 56px; display: flex; align-items: center; font-size: 21px; font-weight: 400; letter-spacing: -.02em; color: #c5c5c8; }
.rainfall-unit { display: inline-block; margin-left: 7px; font-size: 18px; font-weight: 400; letter-spacing: 0; color: #a0a1a5; }
.rainfall-coordinates { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ffffff14; background: #ffffff04; }
.rainfall-coordinates > div { padding: 20px 28px 23px; min-width: 0; }
.rainfall-coordinates > div + div { border-left: 1px solid #ffffff14; }
.rainfall-coordinates dt { font-size: 12px; font-weight: 600; color: #d2d2d5; }
.rainfall-coordinates dt span { margin-left: 6px; color: #a0a1a5; font-size: 11px; font-weight: 400; }
.rainfall-coordinates dd { margin-top: 8px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rainfall-coordinates dd span { margin-left: 5px; font-size: 12px; font-weight: 400; color: #a0a1a5; }
.custom-marker { width: 18px; height: 18px; background: white; border: 2px solid #2563eb; border-radius: 50%; box-shadow: 0 0 0 8px #3b82f62e, 0 6px 20px #0004; }
@media (max-width: 640px) {
  #info-panel { left: 10px; right: 10px; max-width: none; }
  .rainfall-card { width: 100%; }
  .rainfall-reading { padding: 24px; }
  .rainfall-reading dd { font-size: 42px; }
  .rainfall-coordinates > div { padding: 17px 20px; }
  .rainfall-coordinates dd { font-size: 20px; }
}

/* Compact reproduction of the printed map title, above the map canvas. */
.map-title-position { position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: center; z-index: 10; pointer-events: none; transition: right .3s cubic-bezier(.4,0,.2,1); }
.wallingford-title { width: 330px; max-width: calc(100vw - 112px); box-sizing: border-box; margin: 0; padding: 16px 20px 18px; border: 1px solid #77756d; background-color: #fffdfa;
  background-image:
    radial-gradient(ellipse at 16% 23%, rgba(83,68,42,.045), transparent 19%),
    radial-gradient(ellipse at 78% 74%, rgba(86,68,42,.04), transparent 22%),
    radial-gradient(ellipse at 48% 45%, rgba(255,255,255,.32), transparent 35%),
    repeating-linear-gradient(90deg, rgba(60,55,45,.012) 0px, rgba(60,55,45,.012) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(60,55,45,.014) 0px, rgba(60,55,45,.014) 1px, transparent 1px, transparent 4px);
  box-shadow: inset 0 0 16px rgba(66,57,40,.08), inset 0 0 2px rgba(0,0,0,.12), 0 2px 8px #0000000d;
  color: #464548; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.12; letter-spacing: .15px; text-shadow: .15px 0 rgba(0,0,0,.15), 0 0 .4px rgba(30,30,30,.2);
}
.wallingford-title span { display: block; }
.wallingford-title .small-top { margin-bottom: 8px; font-size: 10px; letter-spacing: .35px; line-height: 1.3; }
.wallingford-title .procedure { margin-bottom: 14px; font-size: 12px; letter-spacing: 1px; line-height: 1.2; }
.wallingford-title .volume { margin-bottom: 17px; font-size: 17px; letter-spacing: .3px; }
.wallingford-title .main { font-size: 1em; line-height: 1.25; }
.wallingford-title .dates { font-size: .95em; line-height: 1.25; }
.wallingford-title .units { margin-top: 9px; font-size: 12px; letter-spacing: 0; }
@media (min-width: 768px) { .panel-open .map-title-position { right: 20rem; } }
@media (min-width: 641px) and (max-width: 767px) { .panel-open .map-title-position { right: 18rem; } }
@media (max-width: 640px) {
  .map-title-position { top: 12px; }
  .wallingford-title { width: 280px; padding: 12px 14px 14px; font-size: 18px; }
  .wallingford-title .small-top { font-size: 9px; }
  .wallingford-title .procedure { font-size: 10px; margin-bottom: 10px; }
  .wallingford-title .volume { font-size: 15px; margin-bottom: 12px; }
}