/* DripDash: shared by the control room and both phone apps. */
/* DripDash colour roles. Each kind of thing has its own colour, so nothing blends into anything else:
   neutral surfaces; aqua for water and the interface; violet for technicians; green to red for a leak's
   severity (always shown with its label or level too). Dark is the default; light follows the system
   setting, or the choice saved with DD.theme (common.js), set as data-theme on <html>. */
:root {
  --bg: #0b1015;
  --glow: #12323d;            /* the soft light behind the phone apps */
  --crew-glow: #2a2156;
  --glass: rgba(17, 23, 30, 0.86);
  --glass-strong: rgba(14, 19, 25, 0.94);
  --surface-solid: #141b23;   /* menus, fields, tooltips, dialogs */
  --surface-raised: #1c2631;  /* hover, empty photo slots, quiet badges */
  --field: rgba(8, 12, 16, 0.6);
  --line: rgba(255, 255, 255, 0.09);
  --tint: 160 190 210;        /* hover and selection washes: rgb(var(--tint) / alpha) */
  --text: #eef3f7;
  --muted: #9aa9b6;
  --faint: #66788a;
  --primary: #22c5e6;         /* water, and the interface */
  --primary-2: #67e8f9;
  --primary-rgb: 34 197 230;
  --primary2-rgb: 103 232 249;
  --on-primary: #04141b;
  --ink: #0b1218;             /* dark text on bright fills: severity chips, the camera button */
  --on-sev4: #0b1218;         /* text on a critical chip */
  --tech: #9d8cff;            /* technicians */
  --tech-bg: #241e45;
  --good: #2dd4bf;
  --error: #fda4af;
  --track: #263241;           /* switch tracks */
  --knob: #cbd5e1;
  --scroll: #2b3846;
  --code-bg: #0a0f14;
  --map-bg: #0d1318;
  --pin-ring: #0b1015;        /* the outline round map pins */
  --scrim: rgba(0, 0, 0, 0.55);
  --shade: 0 0 0;             /* shadows: rgb(var(--shade) / alpha) */
  --elev: 0 18px 50px rgba(0, 0, 0, 0.5);
  /* severity, validated for colour-blind separation on the dark surface (dataviz validator) */
  --sev-low: #4ade80;
  --sev-medium: #fde047;
  --sev-high: #fb923c;
  --sev-critical: #e11d48;
  --tide-back: rgba(20, 110, 150, 0.35);
  --tide-mid: rgba(34, 170, 210, 0.38);
  --tide-front: rgba(103, 220, 250, 0.42);
  --tide-deep: rgba(6, 30, 44, 0.7);
  --aqua: var(--primary); --aqua-2: var(--primary-2); --foam: #e0f7ff; --deep: var(--surface-solid);
  --radius: 16px;
  color-scheme: dark;
  font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "tnum" 1; /* counts and times line up */
  font-size: 15px; line-height: 1.45;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #eef2f5; --glow: #d5eef5; --crew-glow: #e3defb;
    --glass: rgba(255, 255, 255, 0.88); --glass-strong: rgba(255, 255, 255, 0.96);
    --surface-solid: #ffffff; --surface-raised: #edf2f6; --field: #f4f7f9;
    --line: rgba(15, 35, 50, 0.12); --tint: 20 70 100;
    --text: #0f1b26; --muted: #4f6070; --faint: #8796a4;
    --primary: #0891b2; --primary-2: #06b6d4; --primary-rgb: 8 145 178; --primary2-rgb: 6 182 212;
    --on-primary: #ffffff; --ink: #0b1218; --on-sev4: #ffffff;
    --tech: #6d5bd0; --tech-bg: #ece8ff; --good: #0f9f8a; --error: #be123c;
    --track: #cfd8e0; --knob: #ffffff; --scroll: #c3cdd6; --code-bg: #f1f5f8;
    --map-bg: #e8edf1; --pin-ring: #ffffff;
    --scrim: rgba(15, 30, 45, 0.35); --shade: 20 40 60;
    --elev: 0 12px 34px rgba(20, 40, 60, 0.14);
    --sev-low: #11a22f; --sev-medium: #d9a514; --sev-high: #e15f0a; --sev-critical: #b90044;
    --tide-back: rgba(8, 145, 178, 0.18); --tide-mid: rgba(6, 182, 212, 0.22);
    --tide-front: rgba(103, 220, 250, 0.35); --tide-deep: rgba(8, 120, 150, 0.25);
    --foam: #ffffff;
    color-scheme: light; } }
:root[data-theme="light"] { --bg: #eef2f5; --glow: #d5eef5; --crew-glow: #e3defb;
    --glass: rgba(255, 255, 255, 0.88); --glass-strong: rgba(255, 255, 255, 0.96);
    --surface-solid: #ffffff; --surface-raised: #edf2f6; --field: #f4f7f9;
    --line: rgba(15, 35, 50, 0.12); --tint: 20 70 100;
    --text: #0f1b26; --muted: #4f6070; --faint: #8796a4;
    --primary: #0891b2; --primary-2: #06b6d4; --primary-rgb: 8 145 178; --primary2-rgb: 6 182 212;
    --on-primary: #ffffff; --ink: #0b1218; --on-sev4: #ffffff;
    --tech: #6d5bd0; --tech-bg: #ece8ff; --good: #0f9f8a; --error: #be123c;
    --track: #cfd8e0; --knob: #ffffff; --scroll: #c3cdd6; --code-bg: #f1f5f8;
    --map-bg: #e8edf1; --pin-ring: #ffffff;
    --scrim: rgba(15, 30, 45, 0.35); --shade: 20 40 60;
    --elev: 0 12px 34px rgba(20, 40, 60, 0.14);
    --sev-low: #11a22f; --sev-medium: #d9a514; --sev-high: #e15f0a; --sev-critical: #b90044;
    --tide-back: rgba(8, 145, 178, 0.18); --tide-mid: rgba(6, 182, 212, 0.22);
    --tide-front: rgba(103, 220, 250, 0.35); --tide-deep: rgba(8, 120, 150, 0.25);
    --foam: #ffffff;
    color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--elev); }

/* the mark: a droplet with speed lines */
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: 0.2px; white-space: nowrap; }
.brand b { color: var(--primary); font-weight: 680; }
.brand .crew-tag { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: var(--tech); border-radius: 6px; padding: 2px 6px; margin-left: 4px; vertical-align: 3px; }
.brand { font-weight: 600; letter-spacing: -0.2px; }
.brand b { font-weight: 800; }
.brand svg { width: 36px; height: 36px; margin: -4px 0; filter: drop-shadow(0 0 6px rgb(var(--primary-rgb) / 0.45)); overflow: visible; }
/* the logo's moving parts (motion.js): the drop squashes on the palms, the hands dip to catch it, a splash ring spreads */
.brand .m-drop, .brand .m-hands { transform-box: view-box; }
.brand .m-drop { transform-origin: 32px 36px; } .brand .m-hands { transform-origin: 32px 58px; }
.brand .m-splash { transform-box: fill-box; transform-origin: center; }
.brand .l { display: inline-block; }

.btn { border: 1px solid var(--line); background: rgb(var(--tint) / 0.08); border-radius: 12px; padding: 9px 14px; }
.btn:hover { border-color: rgb(var(--primary-rgb) / 0.6); }
.btn.primary { border: 0; color: var(--on-primary); font-weight: 680;
  background: linear-gradient(110deg, var(--aqua), var(--aqua-2)); box-shadow: 0 8px 26px rgb(var(--primary-rgb) / 0.3); }
.btn:disabled { filter: grayscale(0.7) brightness(0.7); cursor: not-allowed; }

.sev { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.3px;
  border-radius: 99px; padding: 2px 9px 2px 7px; color: var(--ink); background: var(--c); text-transform: uppercase; }
.sev::before { content: ""; width: 7px; height: 9px; background: var(--ink); opacity: 0.7;
  clip-path: path("M3.5 0C3.5 0 0 4.4 0 6.1A3.5 3.4 0 0 0 7 6.1C7 4.4 3.5 0 3.5 0Z"); }
.sev-4 { color: var(--on-sev4); } .sev-4::before { background: var(--on-sev4); }
.sev-1 { --c: var(--sev-low); } .sev-2 { --c: var(--sev-medium); } .sev-3 { --c: var(--sev-high); } .sev-4 { --c: var(--sev-critical); }

/* map style picker (basemap.js): a tiny map per style */
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.style-pick { display: grid; gap: 4px; justify-items: center; padding: 6px 4px; border-radius: 10px; border: 1.5px solid transparent;
  background: none; font-size: 12px; color: var(--muted); }
.style-pick i { position: relative; width: 100%; height: 34px; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.style-pick i b { position: absolute; right: -6px; bottom: -8px; width: 58%; height: 70%; border-radius: 50% 40% 0 0; }
.style-pick i s { position: absolute; left: -10%; top: 40%; width: 120%; height: 3px; transform: rotate(-12deg); }
.style-pick.on { border-color: var(--primary); color: var(--text); }
.style-pick:hover { color: var(--text); }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line);
  background: rgb(var(--tint) / 0.06); color: var(--muted); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { color: var(--text); border-color: rgb(var(--primary-rgb) / 0.6); }

/* the tide (tide.js): moving water along the bottom of a surface */
.tide { display: block; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; } }