/* BoulderCAST "Colorado Snowpack" sidebar widget (snowpack-widget.js builds
   it): the statewide snowpack against the median, this week's change and a
   map of the river basins, on the winter-night card of the Seasonal Snowfall and
   Right now widgets, with the snowpack page's mountain photo faded in at the
   top. The card is the same scene on the light and dark site; dark mode only
   adds an edge to it.
   The WP Dark Mode plugin rewrites the colors of every rule it can read but
   leaves rules inside @container alone, so the widget is a container and its
   styles sit in one query that always matches. */

/* Out here because @container rules reach only what's inside the box, not
   the box itself (no colors, so nothing for the plugin to change) */
.bcspw {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0 0 1.5em;
}

@container (min-width: 0px) {

.bcspw .bcspw-card {
  --text: #F3F8FD;
  --muted: #A9C0D6;
  --faint: rgba(255, 255, 255, 0.14);
  --panel: rgba(255, 255, 255, 0.07);
  --low: #FFA36C;
  --near: #81C995;
  --high: #8AB4F8;
  --link: #8FD0FF;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 16px 12px;
  border-radius: 14px;
  color: var(--text);
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(120, 170, 230, 0.28), transparent 60%),
    linear-gradient(180deg, #0A182B 0%, #12294A 55%, #1B3A63 100%);
  box-shadow: 0 6px 22px rgba(10, 24, 43, 0.28);
  font-family: "Barlow Semi Condensed", "Barlow", Ubuntu, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25;
  text-align: left;
}
html[data-wp-dark-mode-active] .bcspw .bcspw-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 22px rgba(0, 0, 0, 0.4);
}
.bcspw .bcspw-card *,
.bcspw .bcspw-card *::before,
.bcspw .bcspw-card *::after { box-sizing: border-box; }
.bcspw br { display: none; }
.bcspw [hidden] { display: none !important; }
.bcspw a { text-decoration: none; box-shadow: none; border: 0; }

/* The snowpack page's mountain photo, faint at the top and gone by the numbers */
.bcspw .bcspw-photo {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 190px;
  background-position: center 35%;
  background-size: cover;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  pointer-events: none;
}

/* ---------- Heading ---------- */

.bcspw .bcspw-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.bcspw .bcspw-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.bcspw .bcspw-icon svg { display: block; width: 24px; height: 24px; }
.bcspw .bcspw-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bcspw .bcspw-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: none;
  background: none;
}

/* ---------- The statewide number ---------- */

.bcspw .bcspw-now { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0 10px; }
.bcspw .bcspw-big {
  font-size: 64px;
  font-weight: 700;
  line-height: 0.88;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  text-shadow: 0 2px 16px rgba(150, 200, 255, 0.3);
}
.bcspw .bcspw-big.is-low { color: var(--low); }
.bcspw .bcspw-big.is-near { color: var(--near); }
.bcspw .bcspw-big.is-high { color: var(--high); }
.bcspw .bcspw-now-t { display: flex; flex-direction: column; min-width: 0; padding-bottom: 3px; }
.bcspw .bcspw-of { font-size: 13px; font-weight: 700; color: var(--muted); }
.bcspw .bcspw-status { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--text); }

/* ---------- Snow water and this week ---------- */

.bcspw .bcspw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bcspw .bcspw-tile {
  min-width: 0;
  padding: 6px 9px 7px;
  border-radius: 9px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--faint);
}
.bcspw .bcspw-tile-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bcspw .bcspw-tile-v { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: #FFFFFF; }
/* This week's arrow: down in orange, up (turned over) in blue */
.bcspw .bcspw-arrow { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 4px; vertical-align: -0.04em; }
.bcspw .bcspw-arrow svg { display: block; width: 100%; height: 100%; }
.bcspw .bcspw-arrow.is-down { color: var(--low); }
.bcspw .bcspw-arrow.is-up { color: var(--high); transform: rotate(180deg); }
.bcspw .bcspw-tile-s {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- River basins ---------- */

.bcspw .bcspw-basins-k { margin: 12px 0 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* The basin map: each basin in its color with the relief blended over it,
   and its percent on it. The whole map links to the page's River Basins. */
.bcspw .bcspw-mapbox { min-height: 120px; }
.bcspw .bcspw-map {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--faint);
  transition: box-shadow 0.15s;
}
.bcspw a.bcspw-map:hover { box-shadow: 0 0 0 1px rgba(143, 208, 255, 0.6); }
.bcspw .bcspw-mapsvg { display: block; width: 100%; height: auto; }
.bcspw .bcspw-land { fill: #34465C; }
.bcspw .bcspw-bfill { fill-opacity: 1; }
.bcspw .bcspw-bfill.is-none { fill: rgba(255, 255, 255, 0.08); }
/* The relief: mid-gray changes nothing, darker shades, lighter lights */
.bcspw .bcspw-relief { mix-blend-mode: overlay; opacity: 0.8; pointer-events: none; }
.bcspw .bcspw-bline { fill: none; stroke: rgba(10, 24, 43, 0.55); stroke-width: 0.8; stroke-linejoin: round; pointer-events: none; }
.bcspw .bcspw-state { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-linejoin: round; pointer-events: none; }
.bcspw .bcspw-bpct {
  fill: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(10, 24, 43, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---------- Footer ---------- */

.bcspw .bcspw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--faint);
  font-size: 11.5px;
  color: var(--muted);
}
.bcspw .bcspw-more { margin-left: auto; font-weight: 700; color: var(--link); white-space: nowrap; }
.bcspw .bcspw-more:hover { color: #FFFFFF; text-decoration: underline; }
.bcspw a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* ---------- Loading ---------- */

.bcspw .bcspw-card[data-state="loading"] .bcspw-tiles,
.bcspw .bcspw-card[data-state="loading"] .bcspw-mapbox { opacity: 0.45; }

/* Narrow spots: smaller numbers */
@container (max-width: 250px) {
  .bcspw .bcspw-card { padding: 12px 12px 9px; }
  .bcspw .bcspw-big { font-size: 54px; }
  .bcspw .bcspw-title { font-size: 21px; }
}

}