/* BoulderCAST "Climate Today" widget (climate-today.js builds it): today's
   normals and records for one city, every year's high and low on this date
   as dots along a temperature ribbon, and the day's sunrise and sunset.
   The card dresses like the Climate Hub's cards: white with a faint outline
   on the light site, a soft gray on the dark one, and a glow in the top right
   corner that follows the season. The script sets --glow (an r,g,b triple),
   --hi-c and --lo-c on the card, and repaints when the site's mode flips.
   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. Dark mode is handled here, by
   the attribute the plugin puts on the page. */

.bcct {
  container-type: inline-size;
  position: relative;
  margin: 0 0 1.5em;
}

@keyframes bcct-pop {
  from { transform: translate(-50%, 6px) scale(0.2); opacity: 0; }
  to { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
@keyframes bcct-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
@keyframes bcct-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10%, 8%); }
}

@container (min-width: 0px) {

/* ---------- Colors: light site ---------- */

.bcct .bcct-card {
  --text: #16222E;
  --muted: #5E6B78;
  --line: rgba(22, 34, 46, 0.1);
  --panel: rgba(22, 34, 46, 0.035);
  --panel-line: rgba(22, 34, 46, 0.08);
  --bg: #FFFFFF;
  --bg-2: #FFFFFF;
  --glow-a: 0.16;
  --shadow: 0 1px 3px rgba(22, 34, 46, 0.06), 0 6px 20px rgba(22, 34, 46, 0.05);
  --accent: #C2410C;
  --link: #C62828;
  --hot: #D93025;
  --cold: #1A73E8;
  --wet: #1E8E3E;
  --snow: #4C5FD0;
  --warm: #C26A00;
  --mark: #16222E;
  --mark-bg: #16222E;
  --mark-ink: #FFFFFF;
  --arc: rgba(22, 34, 46, 0.25);
  --arc-done: #E39A00;
  --sun: #F2A900;
  --sun-halo: rgba(242, 169, 0, 0.25);
  --moon: #8794A3;
  --pick-bg: #FFFFFF;
  --pick-field: #F3F5F8;
  --pick-scrim: rgba(255, 255, 255, 0.7);
  --num-glow: none;
}

/* ---------- Colors: dark site ---------- */

html[data-wp-dark-mode-active] .bcct .bcct-card {
  --text: #F4F7FA;
  --muted: #A6B2BE;
  --line: rgba(255, 255, 255, 0.07);
  --panel: rgba(255, 255, 255, 0.04);
  --panel-line: rgba(255, 255, 255, 0.07);
  --bg: #2D2E2F;
  --bg-2: #282929;
  --glow-a: 0.2;
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  --accent: #FFC46B;
  --link: #FF8A80;
  --hot: #F28B82;
  --cold: #8AB4F8;
  --wet: #81C995;
  --snow: #D7DEFF;
  --warm: #FDD08A;
  --mark: #FFFFFF;
  --mark-bg: rgba(255, 255, 255, 0.92);
  --mark-ink: #1E1F1F;
  --arc: rgba(255, 255, 255, 0.25);
  --arc-done: #FFD27A;
  --sun: #FFE08A;
  --sun-halo: rgba(255, 210, 120, 0.3);
  --moon: #F2EEDC;
  --pick-bg: #333435;
  --pick-field: #242526;
  --pick-scrim: rgba(20, 20, 20, 0.6);
  --num-glow: 0 2px 16px rgba(var(--glow, 255, 160, 90), 0.3);
}

/* ---------- The card ---------- */

.bcct .bcct-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  box-shadow: var(--shadow);
  font-family: "Barlow Semi Condensed", "Barlow", Ubuntu, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25;
  text-align: left;
}
.bcct .bcct-glow {
  position: absolute;
  z-index: -1;
  right: -35%;
  top: -30%;
  width: 100%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow, 235, 100, 110), var(--glow-a)), transparent);
  pointer-events: none;
  animation: bcct-drift 16s ease-in-out infinite;
}

/* ---------- Heading: a tear-off calendar page ---------- */

.bcct .bcct-head { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
.bcct .bcct-icon {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 42px;
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--panel-line), 0 2px 8px rgba(22, 34, 46, 0.12);
  text-align: center;
}
.bcct .bcct-icon-m {
  padding: 2px 0 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #E2412F;
}
.bcct .bcct-icon-d {
  padding: 1px 0 3px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #16222E;
}
.bcct .bcct-head-t { min-width: 0; }
.bcct .bcct-kicker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bcct .bcct-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: none;
  background: none;
}

/* ---------- Normal high and low ---------- */

.bcct .bcct-normals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bcct .bcct-nm {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 6px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-line);
  overflow: hidden;
}
.bcct .bcct-nm::before {
  /* a bar of the high's (or low's) color along the top */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
}
.bcct .bcct-nm-hi::before { background: var(--hi-c, var(--hot)); }
.bcct .bcct-nm-lo::before { background: var(--lo-c, var(--cold)); }
.bcct .bcct-lab {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bcct .bcct-big {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--num-glow);
}
.bcct .bcct-nm-hi .bcct-big { color: var(--hi-c, var(--hot)); }
.bcct .bcct-nm-lo .bcct-big { color: var(--lo-c, var(--cold)); }
.bcct .bcct-deg { font-size: 0.6em; vertical-align: 0.5em; margin-left: 1px; opacity: 0.85; }

/* ---------- Every year on this date ---------- */

.bcct .bcct-plot { position: relative; margin: 14px 0 0; }
.bcct .bcct-plot[hidden] { display: none; }
.bcct .bcct-plot-lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.bcct .bcct-years { letter-spacing: 0.06em; text-transform: uppercase; }
.bcct .bcct-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bcct .bcct-key[hidden] { display: none; }
.bcct .bcct-key-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mark);
  box-shadow: 0 0 0 2px var(--line);
}
.bcct .bcct-dots { position: relative; }
.bcct .bcct-dots i {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  transform: translate(-50%, 0);
  opacity: 0;
}
.bcct .bcct-card[data-state="ready"] .bcct-dots i { animation: bcct-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--i) both; }
.bcct .bcct-dots i.is-last {
  z-index: 2;
  background: var(--mark);
  box-shadow: 0 0 0 2px var(--c);
}
.bcct .bcct-ribbon {
  position: relative;
  height: 10px;
  margin: 3px 0;
  border-radius: 999px;
  background: var(--grad);
}
.bcct .bcct-band {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--mark);
}
.bcct .bcct-band[hidden] { display: none; }
.bcct .bcct-band span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mark-ink);
  background: var(--mark-bg);
}
.bcct .bcct-ticks { position: relative; height: 14px; margin-top: 2px; }
.bcct .bcct-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Records ---------- */

.bcct .bcct-recs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 10px 0 0;
}
.bcct .bcct-rec {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 6px;
  padding: 6px 9px 6px 11px;
  border-radius: 9px;
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--rc), inset 0 0 0 1px var(--panel-line);
}
.bcct .bcct-rec.is-hot { --rc: var(--hot); }
.bcct .bcct-rec.is-cold { --rc: var(--cold); }
.bcct .bcct-rec.is-wet { --rc: var(--wet); }
.bcct .bcct-rec.is-snow { --rc: var(--snow); }
.bcct .bcct-rec.is-warm { --rc: var(--warm); }
.bcct .bcct-rec-l {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bcct .bcct-rec-v { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--rc); font-variant-numeric: tabular-nums; }
.bcct .bcct-rec-y { font-size: 12.5px; font-weight: 600; color: var(--text); opacity: 0.8; }

/* ---------- Daylight ---------- */

.bcct .bcct-sun {
  margin: 10px 0 0;
  padding: 6px 10px 8px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.bcct .bcct-sun:empty { display: none; }
.bcct .bcct-sun svg { display: block; width: 100%; height: 50px; overflow: visible; }
.bcct .bcct-arc { fill: none; stroke: var(--arc); stroke-width: 1.5; stroke-dasharray: 3 4; }
.bcct .bcct-arc-done { fill: none; stroke: var(--arc-done); stroke-width: 2; stroke-linecap: round; }
.bcct .bcct-horizon { stroke: var(--arc); stroke-width: 1; }
.bcct .bcct-sun-disc { fill: var(--sun); }
.bcct .bcct-sun-halo { fill: var(--sun-halo); animation: bcct-pulse 3s ease-in-out infinite; }
.bcct .bcct-moon { fill: var(--moon); opacity: 0.9; }
.bcct .bcct-star { fill: var(--moon); animation: bcct-pulse 2.6s ease-in-out infinite; }
.bcct .bcct-star:nth-of-type(2n) { animation-delay: -1.3s; }
.bcct .bcct-sun-t {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
}
.bcct .bcct-sun-t span { display: flex; flex-direction: column; }
.bcct .bcct-sun-t b { font-size: 15px; font-weight: 700; color: var(--text); }
.bcct .bcct-sun-len { text-align: center; align-items: center; }
.bcct .bcct-sun-set { text-align: right; align-items: flex-end; }

/* ---------- Facts ---------- */

.bcct .bcct-facts { list-style: none; margin: 10px 0 0; padding: 0; }
.bcct .bcct-facts[hidden] { display: none; }
.bcct .bcct-facts li {
  position: relative;
  margin: 0 0 5px;
  padding: 0 0 0 14px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
  list-style: none;
  background: none;
}
.bcct .bcct-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--glow, 235, 100, 110));
}
.bcct .bcct-facts b { font-weight: 700; color: var(--accent); }

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

.bcct .bcct-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.bcct .bcct-foot-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.bcct .bcct-more { font-weight: 700; color: var(--link); text-decoration: none; white-space: nowrap; }
.bcct .bcct-more:hover { color: var(--text); text-decoration: underline; }
.bcct .bcct-more[hidden] { display: none; }
.bcct .bcct-gear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.4s;
}
.bcct .bcct-gear svg { width: 17px; height: 17px; display: block; }
.bcct .bcct-gear:hover,
.bcct .bcct-gear:focus-visible,
.bcct .bcct-gear[aria-expanded="true"] { color: var(--text); background: var(--panel-line); }
.bcct .bcct-gear:hover { transform: rotate(45deg); }
.bcct .bcct-gear:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* The city picker, over the card */
.bcct .bcct-pick {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: var(--pick-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.bcct .bcct-pick[hidden] { display: none; }
.bcct .bcct-pick-box {
  width: 100%;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: var(--pick-bg);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.18);
}
.bcct .bcct-pick-title { margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text); }
.bcct .bcct-pick-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bcct .bcct-pick select {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--pick-field);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
}
.bcct .bcct-pick select:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.bcct .bcct-pick option { color: var(--text); background: var(--pick-bg); }
.bcct .bcct-pick-note { margin: 0 0 10px; padding: 0; font-size: 12px; color: var(--muted); }
.bcct .bcct-pick-btns { display: flex; justify-content: space-between; gap: 8px; }
.bcct .bcct-pick-btns button {
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.bcct .bcct-pick-reset { color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bcct .bcct-pick-reset:hover { background: var(--panel-line); }
.bcct .bcct-pick-done { color: var(--mark-ink); background: var(--mark-bg); }
.bcct .bcct-pick-done:hover { opacity: 0.85; }

/* ---------- Loading and errors ---------- */

.bcct .bcct-recs:empty,
.bcct .bcct-facts:empty,
.bcct .bcct-card[data-state="error"] .bcct-plot,
.bcct .bcct-card[data-state="error"] .bcct-recs,
.bcct .bcct-card[data-state="error"] .bcct-sun,
.bcct .bcct-card[data-state="error"] .bcct-facts { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bcct .bcct-glow,
  .bcct .bcct-sun-halo,
  .bcct .bcct-star { animation: none; }
  .bcct .bcct-card[data-state="ready"] .bcct-dots i { animation: none; opacity: 1; transform: translate(-50%, 0); }
}

/* Narrow spots */
@container (max-width: 270px) {
  .bcct .bcct-big { font-size: 38px; }
  .bcct .bcct-title { font-size: 19px; }
  .bcct .bcct-rec-v { font-size: 17px; }
  .bcct .bcct-plot-lab { flex-direction: column; gap: 1px; }
}

}