/* ════════════════════════════════════════════════════════════
   SWP Calculator — "The Reservoir"
   Deep cyan-slate · aqua structure · ember-red depletion alert.
   Identity: a depletion verdict banner + a draining-reservoir motif.
   ════════════════════════════════════════════════════════════ */

body[data-tool="swp"] {
  --surface:        #07141A;
  --surface-raised: #0D2128;
  --surface-high:   #16323B;
  --hairline:       rgba(98, 200, 210, 0.15);
  --hairline-bold:  rgba(98, 200, 210, 0.34);
  --accent:         #4FA6B0;
  --accent-bright:  #82D6E0;
  --accent-deep:    #123038;
  --accent-glow:    rgba(98, 200, 210, 0.42);
  --contrast:       #E2604A;
  --contrast-bright:#F0836E;
  --contrast-soft:  rgba(226, 96, 74, 0.13);
  --contrast-glow:  rgba(226, 96, 74, 0.50);
}

body[data-tool="swp"] .tk-readout {
  background:
    radial-gradient(130% 150% at 6% 80%, rgba(98,200,210,0.07), transparent 60%),
    var(--surface-raised);
}

/* depletion verdict */
.swp-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.swp-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
}
.swp-status.is-ok { color: var(--accent-bright); }
.swp-status.is-ok::before {
  background: var(--accent-bright);
  box-shadow: 0 0 10px var(--accent-glow);
}
.swp-status.is-alert { color: var(--contrast-bright); }
.swp-status.is-alert::before {
  background: var(--contrast-bright);
  box-shadow: 0 0 10px var(--contrast-glow);
}