/* The FEWS view (#556): the ensemble plume in the map card and the forecast
   gauges' row in the legend. Its own file so the look lives next to
   src/fews.js. The plume is ink, not hue: colour on it means one thing, the
   return-period class (the dashed lines, the strip under the days), in the
   Floods ahead colours. */

.map-card {
  --pl-ink: #24384a;
  --pl-mid: rgba(36, 56, 74, .22);
  --pl-all: rgba(36, 56, 74, .065);
  --pl-obs: #0b6bb8;
  --pl-grid: rgba(36, 56, 74, .08);
}
@media (prefers-color-scheme: dark) {
  .map-card {
    --pl-ink: #dce6ef;
    --pl-mid: rgba(220, 230, 239, .26);
    --pl-all: rgba(220, 230, 239, .1);
    --pl-obs: #6cb6f0;
    --pl-grid: rgba(220, 230, 239, .09);
  }
}

.mc-status.mc-pl-head { margin-top: .2rem; }
.mc-pl-label {
  display: flex; align-items: center; gap: .45rem; margin: .5rem 0 .15rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
.mc-plume { height: 124px; margin: 0 0 .1rem; }
.mc-plume svg { display: block; overflow: visible; }
.mc-skel.wide.tall { height: 104px; margin-top: 8px; }
.mc-pl-key {
  display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin: .1rem 0 .3rem;
  font-size: .63rem; color: var(--muted);
}
.mc-pl-key span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.mc-pl-key i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.mc-pl-key .pl-k-med { height: 0; border-top: 1.8px solid var(--pl-ink); border-radius: 0; }
.mc-pl-key .pl-k-mid { background: var(--pl-mid); }
.mc-pl-key .pl-k-all { background: var(--pl-all); box-shadow: inset 0 0 0 1px var(--pl-mid); }
.mc-pl-key .pl-k-obs { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-obs); }
.mc-pl-key .pl-k-cls { display: inline-flex; width: auto; height: 3px; gap: 1px; border-radius: 0; }
.mc-pl-key .pl-k-cls b { width: 5px; height: 3px; }
.mc-pl-line { margin: 0 0 .5rem; font-size: .72rem; line-height: 1.4; color: var(--ink-2); }

/* the drawing (src/fews-core.js plumeSvg) */
.pl-grid { stroke: var(--pl-grid); stroke-width: 1; }
.pl-base { stroke: var(--line); stroke-width: 1; }
.pl-ax { font-size: 9.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.pl-ax-run { fill: var(--ink-2); font-weight: 600; }
.pl-all { fill: var(--pl-all); }
.pl-mid { fill: var(--pl-mid); }
.pl-med { fill: none; stroke: var(--pl-ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pl-thr { stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .95; }
.pl-thr-t { font-size: 9.5px; font-weight: 600; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-above { font-weight: 500; fill: var(--muted); }
.pl-obs { fill: none; stroke: var(--pl-obs); stroke-width: 1.4; stroke-linejoin: round; }
.pl-obs-dot { fill: var(--pl-obs); stroke: var(--surface-solid); stroke-width: .8; }
.pl-run { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.pl-today { fill: var(--blue); opacity: .1; }

/* the forecast gauges' row in "On the map" (map-legend.js): a hollow slate ring, as on the map */
.fews-ring-sw {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid #7d8fa1;
}