/* ===========================================================================
   HYDRANTS: card, Measure banner, out-of-service slash   (Donald, 2026-09-30)
   frontend/features/hydrants/hydrants.js + preplans-map.js. App tokens only (app.css :root).
   =========================================================================== */

/* the map glyph; out of service = a red slash across it */
.hyd-g{position:relative;display:inline-block;width:20px;height:20px;flex-shrink:0}
.hyd-g svg{display:block}
.pp-hyd.hyd-out .hyd-g::after,.hyd-ic.out::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:130%;background:var(--fire);border-radius:2px;box-shadow:0 0 0 1.5px #fff;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
.hyd-ic{position:relative;display:inline-block;width:40px;height:40px;flex-shrink:0}
.hyd-ic svg{display:block}

/* the tapped hydrant's card (a .pp-card) */
.hyd-card .pp-card-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hyd-pill{font:700 .8rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 7px}
.hyd-pill.ok{background:rgba(69,177,131,.16);color:var(--assist)}
.hyd-pill.out{background:var(--fire);color:var(--acc-ink)}
.hyd-oosnote{font-size:.8rem;color:var(--fire);margin-top:4px;line-height:1.35}
.hyd-rows{margin-top:10px;padding-top:9px;border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:8px}
.hyd-row{display:flex;gap:10px;align-items:flex-start}
.hyd-k{flex:0 0 42px;font:600 .8rem/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hyd-v{flex:1;min-width:0;font-size:.8125rem;font-weight:600;color:var(--text);line-height:1.35;display:flex;flex-direction:column;gap:2px}
.hyd-sub{font-size:.8rem;font-weight:500;color:var(--muted2);line-height:1.35}
.hyd-tel{color:var(--acc);font-weight:700;text-decoration:none;font-size:.9375rem;min-height:44px;display:inline-flex;align-items:center}
.hyd-acts button.hyd-oos{color:var(--fire)}
.hyd-acts button.hyd-back{color:var(--assist)}

/* Measure: the banner, out of the way at the top of the map */
.hyd-banner{position:absolute;top:8px;left:8px;right:8px;z-index:9;display:flex;align-items:center;gap:10px;
  background:rgba(14,15,18,.95);border:1.5px solid var(--acc);border-radius:16px;padding:9px 9px 9px 11px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);animation:hyd-drop .18s ease-out}
.hyd-bn-ic{flex-shrink:0;display:flex}
.hyd-bn-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hyd-bn-t{font-weight:800;font-size:.875rem;color:var(--text);line-height:1.25}
.hyd-bn-s{font:500 .8rem/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.hyd-bn-x{flex-shrink:0;border:none;border-radius:10px;background:var(--pill);color:var(--text);font:700 .8rem/1 var(--font);padding:10px 12px;min-height:40px;touch-action:manipulation}
@keyframes hyd-drop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
#map-container.hyd-measuring .leaflet-container{cursor:crosshair}
/* the call toolbar and the layer switch sit under the banner while measuring */
#map-container.hyd-measuring #map-toolbar,#map-container.hyd-measuring .pp-layer-btn,#map-container.hyd-measuring .pp-selchip,#map-container.hyd-measuring #map-status{visibility:hidden}

.hyd-mcard .hyd-big{font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.hyd-mcard button[disabled]{opacity:.45}

.hyd-toast{position:absolute;top:92px;left:50%;transform:translateX(-50%);z-index:10;background:var(--assist);color:#0e0f12;font:700 .8rem/1.2 var(--font);border-radius:12px;padding:9px 14px;box-shadow:0 6px 20px rgba(0,0,0,.5);max-width:calc(100% - 32px)}

/* sheets: status note, flow, save-to-preplan, water company */
.hyd-form{display:flex;flex-direction:column;gap:12px;padding:0 20px 8px}
.hyd-form label{display:flex;flex-direction:column;gap:5px;font:600 .8rem/1.2 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hyd-form input{background:var(--card2);border:1px solid var(--bdr);border-radius:10px;color:var(--text);font:500 16px/1.2 var(--font);padding:11px 12px;min-width:0;width:100%;box-sizing:border-box}
.hyd-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hyd-help{font-size:.8rem;color:var(--muted2);line-height:1.4;margin:0 20px 10px}
.hyd-form .hyd-help{margin:0}
.hyd-go{border:none;border-radius:12px;padding:13px;font:700 .875rem/1 var(--font);background:var(--acc);color:var(--acc-ink);touch-action:manipulation}
.hyd-go.danger{background:var(--fire);color:var(--acc-ink)}
.hyd-go.ghost{background:var(--pill);color:var(--text)}
.hyd-pl{display:flex;flex-direction:column;padding:0 12px}
.hyd-pr{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:none;border-top:1px solid var(--bdr);padding:12px 8px;color:var(--text);min-height:56px;touch-action:manipulation}
.hyd-pr:first-child{border-top:none}
.hyd-pr:active{background:var(--card2)}
.hyd-pr-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hyd-draft{font:700 .8rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--pill);color:var(--muted2);border-radius:6px;padding:3px 5px;vertical-align:middle}

/* Settings: water companies */
.hyd-set{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--bdr)}
.hyd-set:first-of-type{margin-top:8px}
.hyd-set-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.8125rem;color:var(--text)}