/* Comparison graphs and the tables/graphs switch. Scoped so the forecast cards keep their own rules. */

/* ---------- tables / graphs switch ---------- */
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.view-switch[hidden] { display: none !important; }
.view-btn {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(67, 37, 235, 0.28);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.72);
  color: #4325eb;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.view-btn:hover { background: #ffffff; }
.view-btn.is-on {
  border-color: #4325eb;
  background: #4325eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(67, 37, 235, 0.3);
}
html.dark .view-btn {
  border-color: rgba(115, 246, 245, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #73f6f5;
}
html.dark .view-btn:hover { background: rgba(255, 255, 255, 0.16); }
html.dark .view-btn.is-on {
  border-color: #3fe0d8;
  background: #3fe0d8;
  color: #032f2f;
}
.view-ico {
  display: block;
  width: 54%;
  height: 54%;
  background: currentColor;
  -webkit-mask: url("/Images/tables-icon.svg") center / contain no-repeat;
  mask: url("/Images/tables-icon.svg") center / contain no-repeat;
}
.view-ico.is-chart {
  -webkit-mask-image: url("/Images/chart-icon.svg");
  mask-image: url("/Images/chart-icon.svg");
}
.view-ico.is-text {
  -webkit-mask-image: url("/Images/text-mode-icon.svg");
  mask-image: url("/Images/text-mode-icon.svg");
}
/* The text glyph is inset in its file, so the same box leaves it shorter
   than the table and graph marks. On mobile, grow the box until the mark
   matches their height. */
html.mobile-view .view-ico.is-text {
  width: 80%;
  height: 80%;
}
html:not(.mobile-view) .view-btn[data-view="text"] { display: none; }
html .dm-slot .m-mid-tools .view-switch {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
html.mobile-view .m-mid-tools .view-switch { gap: 0.25rem; }
@media (orientation: portrait) {
  html.mobile-view .m-mid:not(.is-now) .m-mid-tools .view-switch {
    position: absolute;
    /* Same top as Resumen 24h / 3h / 1h. Text mode hides that control, so this is the line the buttons keep. */
    top: 0.7rem;
    right: 0.45rem;
    z-index: 3;
  }
}
html.mobile-view .view-btn {
  width: 2.2rem;
  height: 1.95rem;
  border-radius: 0.55rem;
}
/* Inactive view buttons breathe until the user switches views once this session.
   Only the outer glow moves; the button itself stays put.
   One idle button glows on its own. Two take turns: glow, pause, the other, pause. */
@keyframes view-breathe {
  0%, 100% { box-shadow: var(--nav-btn-shadow), 0 0 0 0 var(--view-glow-off); }
  50% { box-shadow: var(--nav-btn-shadow), 0 0 var(--view-glow-blur) var(--view-glow-spread) var(--view-glow-on); }
}
@keyframes view-glow-a {
  0% {
    box-shadow: var(--nav-btn-shadow), 0 0 0 0 var(--view-glow-off);
    animation-timing-function: ease-in-out;
  }
  17.5% {
    box-shadow: var(--nav-btn-shadow), 0 0 var(--view-glow-blur) var(--view-glow-spread) var(--view-glow-on);
    animation-timing-function: ease-in-out;
  }
  35%, 100% { box-shadow: var(--nav-btn-shadow), 0 0 0 0 var(--view-glow-off); }
}
@keyframes view-glow-b {
  0%, 50% {
    box-shadow: var(--nav-btn-shadow), 0 0 0 0 var(--view-glow-off);
    animation-timing-function: ease-in-out;
  }
  67.5% {
    box-shadow: var(--nav-btn-shadow), 0 0 var(--view-glow-blur) var(--view-glow-spread) var(--view-glow-on);
    animation-timing-function: ease-in-out;
  }
  85%, 100% { box-shadow: var(--nav-btn-shadow), 0 0 0 0 var(--view-glow-off); }
}
html.view-hint .view-switch { overflow: visible; }
html.view-hint .view-btn:not(.is-on) {
  --view-glow-off: rgba(67, 37, 235, 0);
  --view-glow-on: rgba(67, 37, 235, 0.9);
  --view-glow-blur: 22px;
  --view-glow-spread: 6px;
  animation: view-breathe 3.5s ease-in-out infinite;
}
html.dark.view-hint .view-btn:not(.is-on) {
  --view-glow-off: rgba(115, 246, 245, 0);
  --view-glow-on: rgba(115, 246, 245, 0.85);
  --view-glow-blur: 18px;
  --view-glow-spread: 4px;
}
html:not(.mobile-view).view-hint .view-btn:not(.is-on) {
  --view-glow-on: rgba(67, 37, 235, 0.7);
  --view-glow-blur: 16px;
  --view-glow-spread: 3px;
}
html.dark:not(.mobile-view).view-hint .view-btn:not(.is-on) {
  --view-glow-on: rgba(115, 246, 245, 0.62);
  --view-glow-blur: 14px;
  --view-glow-spread: 2px;
}
/* Ten seconds: 3.5s glow, 1.5s pause, 3.5s glow, 1.5s pause. */
html.mobile-view.view-hint .view-btn.is-on:first-child ~ .view-btn:nth-child(2),
html.mobile-view.view-hint .view-switch:has(.view-btn:nth-child(2).is-on) .view-btn:first-child,
html.mobile-view.view-hint .view-switch:has(.view-btn:nth-child(3).is-on) .view-btn:nth-child(1) {
  animation: view-glow-a 10s linear infinite;
}
html.mobile-view.view-hint .view-btn.is-on:first-child ~ .view-btn:nth-child(3),
html.mobile-view.view-hint .view-btn.is-on:nth-child(2) ~ .view-btn,
html.mobile-view.view-hint .view-switch:has(.view-btn:nth-child(3).is-on) .view-btn:nth-child(2) {
  animation: view-glow-b 10s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.view-hint .view-btn:not(.is-on) { animation: none !important; }
}

/* The daily paragraph. The 24h / 3h / 1h control does not apply to it. */
html.mobile-view .m-mid.is-text #m-period-toggle,
html.mobile-view .m-mid.is-text #m-temp-toggle,
html.mobile-view .m-mid.is-text #m-station-toggle { display: none !important; }
html.mobile-view .m-mid.is-text #m-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem 0.15rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
}
/* A sideways swipe parks the current day and the next one in panes, the way the tables do. */
html.mobile-view .m-mid.is-text #m-text.is-day-swipe {
  display: block;
  overflow: hidden;
  position: relative;
  padding: 0;
  touch-action: none;
}
html.mobile-view .m-mid.is-text #m-text.is-day-swipe > .m-text-pane {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0.15rem 0.15rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
/* Model menu. Same row as the view buttons, and only while the text is showing. */
#m-text-model[hidden] { display: none !important; }
html.mobile-view .m-mid.is-text #m-text-model:not([hidden]) {
  display: block;
  position: absolute;
  left: 0;
  top: 0.62rem;
  z-index: 4;
  width: max-content;
  max-width: calc(100% - var(--m-view-w, 7.6rem) - 1rem);
}
@media (orientation: landscape) {
  html.mobile-view .m-mid.is-text .m-mid-tools {
    position: relative;
    min-height: 2.2rem;
  }
  html.mobile-view .m-mid.is-text .m-mid-tools .view-switch {
    position: absolute;
    top: 0.12rem;
    right: 0;
    z-index: 3;
  }
  html.mobile-view .m-mid.is-text #m-text-model:not([hidden]) {
    top: 0.12rem;
  }
}
.m-text-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  box-sizing: border-box;
  max-width: 100%;
  height: var(--m-view-btn, 1.95rem);
  margin: 0;
  padding: 0 0.55rem 0 0.62rem;
  border: 1px solid rgba(67, 37, 235, 0.28);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.86);
  color: #4325eb;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px -16px rgba(60, 20, 120, 0.65);
}
html.dark .m-text-model-btn {
  border-color: rgba(115, 246, 245, 0.3);
  background: rgba(12, 18, 28, 0.72);
  color: #73f6f5;
  box-shadow: none;
}
.m-text-model-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  overflow: hidden;
}
.m-text-model-label:has(.model-flag),
.m-text-model-opt:has(.model-flag) { align-items: baseline; }
.m-text-model-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-text-model .model-pick-brand {
  --logo-size: 0.92rem;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1;
  gap: 0.2em;
  color: #4325eb;
}
html.dark .m-text-model .model-pick-brand { color: #73f6f5; }
.m-text-model-btn .model-pick-brand {
  transform: translateY(-0.2em);
}
.m-text-model .model-pick-brand .logo-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-text-model .model-flag,
.m-text-model .flag-white-bg {
  height: 1cap;
  width: auto;
  aspect-ratio: 512 / 336.45;
  margin: 0;
  flex: 0 0 auto;
  object-fit: cover;
}
.m-text-model .custom-blocks-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
.m-text-model-caret {
  width: 0.62rem;
  height: 0.4rem;
  flex: 0 0 auto;
  display: block;
  transition: transform 0.2s ease;
}
.m-text-model.is-open .m-text-model-caret { transform: rotate(180deg); }
.m-text-model-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.32rem);
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  min-width: 100%;
  max-width: min(18rem, calc(100vw - 1.5rem));
  max-height: min(18rem, 52vh);
  margin: 0;
  padding: 0.28rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(67, 37, 235, 0.16);
  border-radius: 0.7rem;
  box-shadow: 0 16px 36px -18px rgba(40, 20, 90, 0.5);
}
.m-text-model-menu[hidden] { display: none !important; }
html.dark .m-text-model-menu {
  background: #14141c;
  border-color: rgba(115, 246, 245, 0.22);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.7);
}
.m-text-model-opt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.42rem 0.62rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #1e1b4b;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.m-text-model-opt:not(.is-on):hover,
.m-text-model-opt:not(.is-on):focus-visible {
  background: rgba(67, 37, 235, 0.08);
}
.m-text-model-opt.is-on {
  background: #4325eb;
  color: #fff;
}
.m-text-model-opt.is-on .model-pick-brand { color: #fff; }
.m-text-model-opt.is-on .model-pick-brand .logo-icon { filter: brightness(0) invert(1); }
html.dark .m-text-model-opt { color: #e8e6f2; }
html.dark .m-text-model-opt:not(.is-on):hover,
html.dark .m-text-model-opt:not(.is-on):focus-visible {
  background: rgba(115, 246, 245, 0.1);
}
html.dark .m-text-model-opt.is-on {
  background: #3fe0d8;
  color: #032f2f;
}
html.dark .m-text-model-opt.is-on .model-pick-brand { color: #032f2f; }
html.dark .m-text-model-opt.is-on .model-pick-brand .logo-icon { filter: brightness(0); }
@media (prefers-reduced-motion: reduce) {
  .m-text-model-caret { transition: none; }
}
.m-text-card {
  margin: 0;
  padding: 0.85rem 0.95rem 1.05rem;
  background: var(--card-glass-first-row, rgba(255, 255, 255, 0.86));
  border: 1px solid var(--border, rgba(30, 27, 75, 0.08));
  border-radius: 0 0 var(--weather-cut, 1.1rem) 0;
  corner-shape: bevel;
}
html.mobile-view .m-text-card {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--weather-cut, 1.1rem)),
    calc(100% - var(--weather-cut, 1.1rem)) 100%,
    0 100%
  );
}
.m-text-day {
  display: grid;
  grid-template-columns: 2.15rem 1fr 2.15rem;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.m-text-when { text-align: center; min-width: 0; }
.m-text-name {
  font-weight: 700;
  font-size: calc(1.08rem * 0.77);
  line-height: 1.2;
  color: var(--text, #1e1b4b);
}
.m-text-date {
  margin-top: 0.12rem;
  font-size: var(--thumb-date-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.m-text-nav {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(67, 37, 235, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4325eb;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.m-text-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
html.dark .m-text-nav {
  border-color: rgba(115, 246, 245, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #73f6f5;
}
.m-text-body .consensus-outlook {
  margin: 0;
  font-size: calc(1.02rem * 0.77 * 1.1);
  line-height: 1.58;
  color: var(--text, #1e1b4b);
  text-wrap: pretty;
}
html.dark .m-text-body .consensus-outlook,
html.dark .m-text-name {
  color: #e2e5eb;
}
.forecast-share {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-top: 0.95rem;
}
.forecast-share[hidden] { display: none !important; }
.forecast-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  box-sizing: border-box;
  height: 2.05rem;
  margin: 0;
  padding: 0 0.78rem 0 0.62rem;
  border: 1px solid rgba(67, 37, 235, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #4325eb;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.forecast-share-btn:hover { background: #ffffff; }
html.dark .forecast-share-btn {
  border-color: rgba(115, 246, 245, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #73f6f5;
}
html.dark .forecast-share-btn:hover { background: rgba(255, 255, 255, 0.16); }
.forecast-share-ico {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
  flex: 0 0 auto;
}
.forecast-share-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.32rem);
  z-index: 8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  min-width: 12.5rem;
  max-width: min(18rem, calc(100vw - 1.8rem));
  margin: 0;
  padding: 0.28rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(67, 37, 235, 0.16);
  border-radius: 0.7rem;
  box-shadow: 0 16px 36px -18px rgba(40, 20, 90, 0.5);
}
html:not(.mobile-view) .day-brief-share .forecast-share-menu {
  top: calc(100% + 0.32rem);
  right: auto;
  bottom: auto;
  left: 50%;
  translate: -50% 0;
}
.forecast-share-menu[hidden] { display: none !important; }
html.dark .forecast-share-menu {
  background: #14141c;
  border-color: rgba(115, 246, 245, 0.22);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.7);
}
.forecast-share-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.32rem 0.62rem 0.32rem 0.32rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: #1e1b4b;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.forecast-share-app {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  display: block;
}
.forecast-share-opt:hover,
.forecast-share-opt:focus-visible { background: rgba(67, 37, 235, 0.08); }
html.dark .forecast-share-opt { color: #e8e6f2; }
html.dark .forecast-share-opt:hover,
html.dark .forecast-share-opt:focus-visible { background: rgba(115, 246, 245, 0.1); }

/* ---------- Text Mode (phone): PROMEDIO card, sectioned explanation, Compartir ----------
   The same card and sections as the desktop day brief, in a wide, short format. The card's
   figures and the sections come from the day brief's own builders, so only the look differs.
   The painted cloud images fill the card and the card's own rounded corners crop them. */
html.mobile-view .m-text-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  clip-path: none;
}
/* The day is chosen on the strip below; the card and the text already name it. */
html.mobile-view .m-text-card > .m-text-day { display: none; }
html.mobile-view .m-text-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  container-type: inline-size;
}

html.mobile-view #m-text-promedio {
  --dbp-bg: var(--dbp-under, #4f35ee) var(--dbp-cloud, url("/Images/windcrush-clouds-mobile-light-compressed.png")) center / cover no-repeat;
  --dbp-edge: rgba(255, 255, 255, 0.3);
  --dbp-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(30, 20, 90, 0.14), 0 12px 24px -14px rgba(58, 31, 212, 0.6);
  --dbp-ink: #ffffff;
  --dbp-soft: rgba(255, 255, 255, 0.82);
  --dbp-max: var(--thumb-temps-max-color);
  --dbp-min: var(--thumb-temps-min-color);
  /* Everything in the card is in em, so it scales with the card's own width (320 to 430 px). */
  font-size: clamp(0.7rem, 3.5vw, 0.95rem);
  font-size: clamp(0.7rem, 3.9cqw, 0.95rem);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "head cluster foot";
  align-items: center;
  column-gap: 0.7em;
  row-gap: 0.15em;
  /* 9px above the date, then its line. The band under the date is 40% shorter than the
     gap down to the temperatures, and the space under the last line is 10% shorter.
     Both come straight off the card height. 3.78rem is the name block's minimum height;
     2.995em is the temperature line, the precipitation line and the row gap. */
  padding:
    calc(9px + clamp(9px, 2.8cqw, 12px) + 8px - 0.4 * (8px + (3.78rem - 2.995em) / 2))
    1em
    calc(0.8em - 0.1 * ((3.78rem - 2.995em) / 2 + 0.8em));
  background: var(--dbp-bg);
  border: 1px solid var(--dbp-edge);
  border-radius: 16px;
  corner-shape: round;
  box-shadow: var(--dbp-shadow);
  color: var(--dbp-ink);
}
html.dark.mobile-view #m-text-promedio {
  --dbp-bg: var(--dbp-under, #2a1f9c) var(--dbp-cloud, url("/Images/windcrush-clouds-mobile-dark-compressed.png")) center / cover no-repeat;
  --dbp-edge: oklch(from var(--mc-promedio) calc(l + 0.26) c h / 0.42);
  --dbp-shadow: inset 0 1px 0 oklch(from var(--mc-promedio) 0.88 c h / 0.22), 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 24px -14px rgba(0, 0, 0, 0.6);
  --dbp-soft: #cfcdf6;
  --dbp-max: #ff5151;
  --dbp-min: #64f7f7;
}
/* Text Mode clouds follow the model. Desktop cards use the portrait files and
   phone cards the wide ones; light and dark are separate files. A model with
   no entry keeps the generic clouds in --dbp-bg. Positioning stays on --dbp-bg. */
.card-day-brief #day-brief-promedio[data-model="consensus"] { --dbp-cloud: url("/Images/model-card-windcrush-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="consensus"] { --dbp-cloud: url("/Images/model-card-windcrush-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="consensus"] { --dbp-cloud: url("/Images/model-card-windcrush-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="consensus"] { --dbp-cloud: url("/Images/model-card-windcrush-mobile-dark.png"); }
.card-day-brief #day-brief-promedio[data-model="gfs"] { --dbp-cloud: url("/Images/model-card-noaa-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="gfs"] { --dbp-cloud: url("/Images/model-card-noaa-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="gfs"] { --dbp-cloud: url("/Images/model-card-noaa-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="gfs"] { --dbp-cloud: url("/Images/model-card-noaa-mobile-dark.png"); }
/* ECMWF's light clouds are too pale for the white type, so both themes use the dark file. */
.card-day-brief #day-brief-promedio[data-model="ecmwf"] { --dbp-cloud: url("/Images/model-card-ecmwf-desktop-dark.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="ecmwf"] { --dbp-cloud: url("/Images/model-card-ecmwf-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="ecmwf"] { --dbp-cloud: url("/Images/model-card-ecmwf-mobile-dark.png"); }
html.dark.mobile-view #m-text-promedio[data-model="ecmwf"] { --dbp-cloud: url("/Images/model-card-ecmwf-mobile-dark.png"); }
.card-day-brief #day-brief-promedio[data-model="icon"] { --dbp-cloud: url("/Images/model-card-dwd-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="icon"] { --dbp-cloud: url("/Images/model-card-dwd-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="icon"] { --dbp-cloud: url("/Images/model-card-dwd-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="icon"] { --dbp-cloud: url("/Images/model-card-dwd-mobile-dark.png"); }
.card-day-brief #day-brief-promedio[data-model="ukmo"] { --dbp-cloud: url("/Images/model-card-ukmo-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="ukmo"] { --dbp-cloud: url("/Images/model-card-ukmo-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="ukmo"] { --dbp-cloud: url("/Images/model-card-ukmo-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="ukmo"] { --dbp-cloud: url("/Images/model-card-ukmo-mobile-dark.png"); }
.card-day-brief #day-brief-promedio[data-model="gem"] { --dbp-cloud: url("/Images/model-card-gem-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="gem"] { --dbp-cloud: url("/Images/model-card-gem-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="gem"] { --dbp-cloud: url("/Images/model-card-gem-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="gem"] { --dbp-cloud: url("/Images/model-card-gem-mobile-dark.png"); }
.card-day-brief #day-brief-promedio[data-model="custom"] { --dbp-cloud: url("/Images/model-card-my-customised-forecast-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="custom"] { --dbp-cloud: url("/Images/model-card-my-customised-forecast-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="custom"] { --dbp-cloud: url("/Images/model-card-my-customised-forecast-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="custom"] { --dbp-cloud: url("/Images/model-card-my-customised-forecast-mobile-dark.png"); }
.card-day-brief #day-brief-promedio[data-model="aemet"],
.card-day-brief #day-brief-promedio[data-model="meteoFrance"],
.card-day-brief #day-brief-promedio[data-model="italiaMeteo"],
.card-day-brief #day-brief-promedio[data-model="metno"],
.card-day-brief #day-brief-promedio[data-model="knmi"],
.card-day-brief #day-brief-promedio[data-model="dmi"],
.card-day-brief #day-brief-promedio[data-model="meteoSwiss"],
.card-day-brief #day-brief-promedio[data-model="geosphere"],
.card-day-brief #day-brief-promedio[data-model="chmi"],
.card-day-brief #day-brief-promedio[data-model="kma"],
.card-day-brief #day-brief-promedio[data-model="jma"],
.card-day-brief #day-brief-promedio[data-model="cma"],
.card-day-brief #day-brief-promedio[data-model="bom"] { --dbp-cloud: url("/Images/model-card-shared-national-desktop-light.png"); }
html.dark .card-day-brief #day-brief-promedio[data-model="aemet"],
html.dark .card-day-brief #day-brief-promedio[data-model="meteoFrance"],
html.dark .card-day-brief #day-brief-promedio[data-model="italiaMeteo"],
html.dark .card-day-brief #day-brief-promedio[data-model="metno"],
html.dark .card-day-brief #day-brief-promedio[data-model="knmi"],
html.dark .card-day-brief #day-brief-promedio[data-model="dmi"],
html.dark .card-day-brief #day-brief-promedio[data-model="meteoSwiss"],
html.dark .card-day-brief #day-brief-promedio[data-model="geosphere"],
html.dark .card-day-brief #day-brief-promedio[data-model="chmi"],
html.dark .card-day-brief #day-brief-promedio[data-model="kma"],
html.dark .card-day-brief #day-brief-promedio[data-model="jma"],
html.dark .card-day-brief #day-brief-promedio[data-model="cma"],
html.dark .card-day-brief #day-brief-promedio[data-model="bom"] { --dbp-cloud: url("/Images/model-card-shared-national-desktop-dark.png"); }
html.mobile-view #m-text-promedio[data-model="aemet"],
html.mobile-view #m-text-promedio[data-model="meteoFrance"],
html.mobile-view #m-text-promedio[data-model="italiaMeteo"],
html.mobile-view #m-text-promedio[data-model="metno"],
html.mobile-view #m-text-promedio[data-model="knmi"],
html.mobile-view #m-text-promedio[data-model="dmi"],
html.mobile-view #m-text-promedio[data-model="meteoSwiss"],
html.mobile-view #m-text-promedio[data-model="geosphere"],
html.mobile-view #m-text-promedio[data-model="chmi"],
html.mobile-view #m-text-promedio[data-model="kma"],
html.mobile-view #m-text-promedio[data-model="jma"],
html.mobile-view #m-text-promedio[data-model="cma"],
html.mobile-view #m-text-promedio[data-model="bom"] { --dbp-cloud: url("/Images/model-card-shared-national-mobile-light.png"); }
html.dark.mobile-view #m-text-promedio[data-model="aemet"],
html.dark.mobile-view #m-text-promedio[data-model="meteoFrance"],
html.dark.mobile-view #m-text-promedio[data-model="italiaMeteo"],
html.dark.mobile-view #m-text-promedio[data-model="metno"],
html.dark.mobile-view #m-text-promedio[data-model="knmi"],
html.dark.mobile-view #m-text-promedio[data-model="dmi"],
html.dark.mobile-view #m-text-promedio[data-model="meteoSwiss"],
html.dark.mobile-view #m-text-promedio[data-model="geosphere"],
html.dark.mobile-view #m-text-promedio[data-model="chmi"],
html.dark.mobile-view #m-text-promedio[data-model="kma"],
html.dark.mobile-view #m-text-promedio[data-model="jma"],
html.dark.mobile-view #m-text-promedio[data-model="cma"],
html.dark.mobile-view #m-text-promedio[data-model="bom"] { --dbp-cloud: url("/Images/model-card-shared-national-mobile-dark.png"); }
/* Light mode only. The edge and the resting shadow follow the model's palette.
   Bright skies use a dark ink from that same palette. PROMEDIO and ECMWF keep
   the light ink. Dark mode is untouched. */
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio) {
  --dbp-tint: var(--mc-promedio);
  --dbp-under: oklch(from var(--dbp-tint) 0.78 c h);
  --dbp-edge: oklch(from var(--dbp-tint) 0.68 calc(c * 2.4) h / 0.5);
  --dbp-shadow: inset 0 1px 0 oklch(from var(--dbp-tint) 1 c h / 0.4), 0 1px 2px oklch(from var(--dbp-tint) 0.4 calc(c * 1.6) h / 0.12), 0 10px 18px -14px oklch(from var(--dbp-tint) 0.45 calc(c * 2) h / 0.28);
}
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="gfs"] { --dbp-tint: var(--mc-gfs); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="ecmwf"] { --dbp-tint: var(--mc-ecmwf); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="icon"] { --dbp-tint: var(--mc-icon); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="ukmo"] { --dbp-tint: var(--mc-ukmo); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="gem"] { --dbp-tint: var(--mc-gem); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="custom"] { --dbp-tint: var(--mc-extra); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) { --dbp-tint: var(--mc-national); }
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gfs"],
  [data-model="icon"],
  [data-model="ukmo"],
  [data-model="gem"],
  [data-model="custom"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) {
  --dbp-ink: oklch(from var(--dbp-tint) 0.32 calc(c * 3) h);
  --dbp-soft: oklch(from var(--dbp-tint) 0.42 calc(c * 2.4) h);
}
/* Dark mode only. The edge, the inset sheen and the resting colour follow the
   model's dark palette. PROMEDIO keeps the lavender treatment already on the
   card. Light mode is untouched. */
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gfs"],
  [data-model="ecmwf"],
  [data-model="icon"],
  [data-model="ukmo"],
  [data-model="gem"],
  [data-model="custom"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) {
  --dbp-tint: var(--mc-national);
  --dbp-under: oklch(from var(--dbp-tint) calc(l - 0.08) calc(c * 0.85) h);
  --dbp-edge: oklch(from var(--dbp-tint) calc(l + 0.2) calc(c * 0.72) h / 0.4);
  --dbp-soft: oklch(from var(--dbp-tint) 0.9 calc(c * 0.32) h);
  --dbp-shadow: inset 0 1px 0 oklch(from var(--dbp-tint) calc(l + 0.4) calc(c * 0.45) h / 0.18), 0 1px 2px rgba(0, 0, 0, 0.32), 0 12px 24px -14px rgba(0, 0, 0, 0.55);
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="gfs"] { --dbp-tint: var(--mc-gfs); }
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="ecmwf"] { --dbp-tint: var(--mc-ecmwf); }
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="icon"] { --dbp-tint: var(--mc-icon); }
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="ukmo"] { --dbp-tint: var(--mc-ukmo); }
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="gem"] { --dbp-tint: var(--mc-gem); }
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="custom"] { --dbp-tint: var(--mc-extra); }
/* The purple head glow belongs to PROMEDIO. Other models use a neutral edge. */
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):not([data-model="consensus"]) .tomorrow-head {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):not([data-model="consensus"]) .tomorrow-foot {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):not([data-model="consensus"]) .day-temp {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Dark mode only. Bright clouds need a soft dark edge on the rain, snow and wind
   figures. ICON and UKMO take a little more than the national agencies and
   ECMWF. GEM's greener clouds need a slightly stronger edge on the name, the
   high and the figures. The coloured highs and lows on ICON and UKMO get a
   lighter edge. PROMEDIO and NOAA stay as they are. Light mode is untouched. */
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="icon"],
  [data-model="ukmo"]
) .tomorrow-foot .tomorrow-line {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="icon"],
  [data-model="ukmo"]
) .m-p-rain-ico-rain {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="icon"],
  [data-model="ukmo"]
) .m-p-rain-ico-snow {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="gem"] .frame2-label-nation {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="gem"] .tomorrow-foot .tomorrow-line {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.84);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="gem"] .m-p-rain-ico-rain {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="gem"] .m-p-rain-ico-snow {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="gem"] .temp-max {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="ecmwf"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) .tomorrow-foot .tomorrow-line {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="ecmwf"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) .m-p-rain-ico-rain {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="ecmwf"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) .m-p-rain-ico-snow {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio):is(
  [data-model="icon"],
  [data-model="ukmo"]
) :is(.temp-max, .temp-min) {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
/* UKMO's peach clouds need a slightly stronger edge on the high and the figures. */
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="ukmo"] .temp-max {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.52);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="ukmo"] .tomorrow-foot .tomorrow-line {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.84);
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="ukmo"] .m-p-rain-ico-rain {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}
html.dark :is(.card-day-brief #day-brief-promedio, .mobile-view #m-text-promedio)[data-model="ukmo"] .m-p-rain-ico-snow {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.86));
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gem"],
  [data-model="ukmo"],
  [data-model="icon"]
) :is(.frame2-label-nation, .frame2-label-agency) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gem"],
  [data-model="ukmo"],
  [data-model="icon"]
) .temp-max {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.66);
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="gem"] .temp-min {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.58);
}
html.dark :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="ukmo"] .temp-min {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
html.mobile-view #m-text-promedio .tomorrow-mid { display: contents; }
/* The icon and the temperatures travel together: the flexible space is around
   the pair, and a fixed gap keeps the temperatures against the icon. */
html.mobile-view #m-text-promedio .icon-temps {
  grid-area: cluster;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  justify-self: center;
  min-width: max-content;
}
html.mobile-view #m-text-promedio .brief-card-date {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 1;
  margin: 0;
  max-width: calc(100% - 18px);
  font-size: clamp(9px, 2.8cqw, 12px);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1;
  color: var(--dbp-soft);
  white-space: nowrap;
  text-align: right;
  pointer-events: none;
}
html.mobile-view #m-text-promedio .tomorrow-head {
  grid-area: head;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 1em;
  /* The whole block — title, name, flag and agency — sits in the middle of its column. */
  align-items: center;
}
html.mobile-view #m-text-promedio .frame2-label { max-width: 100%; }
html.mobile-view #m-text-promedio .frame2-label-title {
  font-size: 0.82em;
  line-height: 1.15;
  color: var(--dbp-ink);
}
/* A long name ("ESTADOUNIDENSE") is shrunk by fitMobileTextHead down to 11px; below that it
   wraps inside the room left beside the icon and temperatures, so it never overlaps them. */
html.mobile-view #m-text-promedio .frame2-label-nation { font-size: var(--mt-nation-size, 1.15em); }
/* The flag shrinks with the name so the pair keeps its proportions. */
html.mobile-view #m-text-promedio.is-head-fit .frame2-label:not(:has(.logo-icon)) {
  --frame2-flag-w: calc(1.575rem * var(--mt-flag-scale, 1));
}
html.mobile-view #m-text-promedio.is-head-fit .tomorrow-head .model-flag {
  width: calc(1.575rem * var(--mt-flag-scale, 1));
  height: calc(1.05rem * var(--mt-flag-scale, 1));
}
html.mobile-view #m-text-promedio.is-head-tight { column-gap: 0.4em; }
html.mobile-view #m-text-promedio.is-head-limit .tomorrow-head { max-width: var(--mt-head-room); }
html.mobile-view #m-text-promedio.is-head-limit .frame2-label-agency:not(.is-stacked) {
  white-space: normal;
  overflow-wrap: anywhere;
}
html.mobile-view #m-text-promedio.is-head-wrap .frame2-label-nation {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.1;
}
/* ESTADOUNIDENSE is always ESTADO- / UNIDENSE here, so the name keeps its
   size instead of shrinking to stay on one line. */
html.mobile-view #m-text-promedio .frame2-label-nation.is-nation-split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  line-height: 1.05;
}
html.mobile-view #m-text-promedio .frame2-label-nation.is-nation-split .mt-nation-line {
  white-space: nowrap;
}
html.mobile-view #m-text-promedio .frame2-label-nation.is-nation-split .mt-nation-line:first-child::after {
  content: "-";
}
html.mobile-view #m-text-promedio .frame2-label-nation-row:has(.is-nation-split) {
  align-items: flex-start;
}
html.mobile-view #m-text-promedio .frame2-label-nation.is-brand { color: var(--dbp-ink); }
/* PROMEDIO's indent is computed in the title's smaller type, so the name starts
   further right. Close the logo gap until WindCrush shares that left edge. */
html.mobile-view #m-text-promedio .frame2-label.is-promedio .frame2-label-nation-row {
  column-gap: calc(var(--frame2-flag-gap) - var(--logo-mark-em) * (1em - 0.82em) * 20 / 16);
}
html.mobile-view #m-text-promedio .frame2-label-agency {
  font-size: 0.68em;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dbp-soft);
}
html.mobile-view #m-text-promedio .frame2-label.is-promedio > button.frame2-label-agency {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--dbp-soft);
}
html.mobile-view #m-text-promedio .day-icon {
  font-size: 2.6em;
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(20, 10, 60, 0.3));
}
html.mobile-view #m-text-promedio .day-temp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.04em;
  font-size: 1.55em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(28, 10, 72, 0.4);
}
html.mobile-view #m-text-promedio .mt-temp-line { line-height: 1.05; }
html.mobile-view #m-text-promedio .m-feels {
  margin-top: 0.1em;
  font-size: 0.42em;
  font-weight: 600;
  line-height: 1;
  color: var(--dbp-soft);
  opacity: 1;
  text-shadow: none;
}
/* Met Office clouds are the same peach as the soft ink, so the small feels-like
   line disappears. Use the card ink, with an edge that lifts it off the sky. */
html.mobile-view #m-text-promedio[data-model="ukmo"] .m-feels {
  color: var(--dbp-ink);
}
html:not(.dark).mobile-view #m-text-promedio[data-model="ukmo"] .m-feels {
  text-shadow: 0 0 1px #fff, 0 1px 1px rgba(255, 255, 255, 0.7);
}
html.dark.mobile-view #m-text-promedio[data-model="ukmo"] .m-feels {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
html:not(.dark).mobile-view #m-text-promedio[data-model="ukmo"] .m-feels-ico {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(255, 255, 255, 0.7));
}
html.dark.mobile-view #m-text-promedio[data-model="ukmo"] .m-feels-ico {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}
html.mobile-view #m-text-promedio .temp-max { color: var(--dbp-max); font-weight: 800; }
html.mobile-view #m-text-promedio .temp-min { color: var(--dbp-min); font-weight: 800; }
html.mobile-view #m-text-promedio .temp-sep { color: var(--dbp-soft); }
html.mobile-view #m-text-promedio .tomorrow-foot {
  grid-area: foot;
  align-self: center;
  justify-self: start;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.16em;
  margin: 0;
  padding: 0;
  font-size: 0.95em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--dbp-ink);
  text-shadow: 0 1px 2px rgba(20, 10, 70, 0.35);
}
html.mobile-view #m-text-promedio .mt-precip,
html.mobile-view #m-text-promedio .mt-wind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.04em;
}
html.mobile-view #m-text-promedio .mt-gust {
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.1;
  color: var(--dbp-soft);
}
html.mobile-view #m-text-promedio .mt-gust-ico {
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: url("/Images/wind-flag.svg") center / contain no-repeat;
  mask: url("/Images/wind-flag.svg") center / contain no-repeat;
}
html.mobile-view #m-text-promedio .mt-gust.is-notable { color: #e2730b; }
html.dark.mobile-view #m-text-promedio .mt-gust.is-notable { color: #ffb547; }
html.mobile-view #m-text-promedio .tomorrow-foot .tomorrow-line,
html.mobile-view #m-text-promedio .tomorrow-foot .wx-precip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  font-size: 1em;
  line-height: 1.2;
}
html.mobile-view #m-text-promedio .tomorrow-foot .tomorrow-line {
  color: var(--dbp-ink);
}
html.mobile-view #m-text-promedio .tomorrow-foot .wx-precip {
  color: inherit;
}
html.mobile-view #m-text-promedio .tomorrow-foot :is(.m-p-rain-ico, .wind-arrow) {
  flex: 0 0 auto;
  line-height: 1;
}
html.mobile-view #m-text-promedio .tomorrow-foot .wind-from-arrow {
  width: 1em;
  height: 1em;
  display: block;
  transform-box: view-box;
  transform-origin: center;
}
html.mobile-view #m-text-promedio .tomorrow-foot .m-p-rain-ico {
  width: 1.05em;
  height: 1.05em;
}
/* Rain and snow together (a third line follows them: the wind) stack, rain over snow, as one
   precipitation group with the wind to its right, centred on the pair. One of them alone keeps
   the single line above. */
html.mobile-view #m-text-promedio .tomorrow-foot:has(> .tomorrow-line:nth-child(3)) {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 0.9em;
  row-gap: 0.05em;
}
html.mobile-view #m-text-promedio .tomorrow-foot:has(> .tomorrow-line:nth-child(3)) > .tomorrow-line {
  line-height: 1.1;
}
html.mobile-view #m-text-promedio .tomorrow-foot:has(> .tomorrow-line:nth-child(3)) > .tomorrow-line:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
html.mobile-view #m-text-promedio .tomorrow-foot:has(> .tomorrow-line:nth-child(3)) > .tomorrow-line:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
html.mobile-view #m-text-promedio .tomorrow-foot:has(> .tomorrow-line:nth-child(3)) > .tomorrow-line:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
/* A message in place of the figures sits in the open space to the right of the
   model name, centred on that name from its first line to its last. The gap
   used beside the weather icon is closed so the centre is the middle of the
   whole space out to the card's right padding. */
html.mobile-view #m-text-promedio:has(.tomorrow-mid.is-unavailable) {
  column-gap: 0;
}
html.mobile-view #m-text-promedio .tomorrow-mid.is-unavailable {
  display: flex;
  grid-column: 2 / -1;
  align-self: center;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}
html.mobile-view #m-text-promedio .tomorrow-unavailable {
  grid-column: 2 / -1;
  color: var(--dbp-ink);
  line-height: 1.25;
}
/* The light image's clouds are near white behind the indicators, so their text keeps a soft
   purple edge; its rain and snow icons are images, painted the same white. */
html.dark.mobile-view #m-text-promedio .tomorrow-head {
  filter: drop-shadow(0 1px 2px rgba(12, 6, 70, 0.75));
}
html:not(.dark).mobile-view #m-text-promedio .tomorrow-head {
  filter: drop-shadow(0 1px 1px rgba(40, 20, 150, 0.5)) drop-shadow(0 0 4px rgba(60, 34, 210, 0.4));
}
html:not(.dark).mobile-view #m-text-promedio .tomorrow-foot {
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(40, 20, 150, 0.55)) drop-shadow(0 0 5px rgba(60, 34, 210, 0.5));
}
html:not(.dark).mobile-view #m-text-promedio .m-p-rain-ico { filter: none; }
/* Light mode, every model except PROMEDIO: drop the purple text glow.
   Bright cards use the dark ink, so their rain and snow marks stay dark too.
   ECMWF keeps the white marks on its dark sky. */
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):not([data-model="consensus"]) :is(.tomorrow-head, .tomorrow-foot) {
  filter: none;
}
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gfs"],
  [data-model="icon"],
  [data-model="ukmo"],
  [data-model="gem"],
  [data-model="custom"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) .tomorrow-foot {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gfs"],
  [data-model="icon"],
  [data-model="ukmo"],
  [data-model="gem"],
  [data-model="custom"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) .m-p-rain-ico {
  filter: none;
}
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio):is(
  [data-model="gfs"],
  [data-model="icon"],
  [data-model="ukmo"],
  [data-model="gem"],
  [data-model="custom"],
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
) .day-temp {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
html:not(.dark) :is(.card-day-brief #day-brief-promedio, html.mobile-view #m-text-promedio)[data-model="ecmwf"] .tomorrow-foot {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Light mode, PROMEDIO only. A slightly stronger dark-purple edge on the white
   logo, wordmark and subtitle, still soft rather than a glow. */
html:not(.dark).mobile-view #m-text-promedio[data-model="consensus"] .tomorrow-head {
  filter: drop-shadow(0 1px 2px rgba(42, 14, 112, 0.66)) drop-shadow(0 0 1px rgba(32, 8, 88, 0.42));
}
/* The minimum sits on the same purple as the clouds. A deeper indigo, with a
   thin light edge, keeps it in the temperature palette and readable. */
html:not(.dark).mobile-view #m-text-promedio[data-model="consensus"] .temp-min {
  color: oklch(from var(--thumb-temps-min-color) 0.36 c calc(h - 4));
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.68), 0 1px 1px rgba(255, 255, 255, 0.34);
}
/* Feels-like figures and the thermometer are white on pale cloud. Dark purple
   with a faint light edge reads on both the bright and the purple patches. */
html:not(.dark).mobile-view #m-text-promedio[data-model="consensus"] .m-feels {
  color: oklch(from var(--thumb-temps-min-color) 0.28 c h);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.72);
}
html:not(.dark).mobile-view #m-text-promedio[data-model="consensus"] .m-feels-ico {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}
html.dark.mobile-view #m-text-promedio[data-model="consensus"] .m-feels {
  color: oklch(from var(--dbp-ink) 0.97 0.004 250);
  text-shadow: 0 1px 1px rgba(6, 18, 64, 0.55);
}
html.dark.mobile-view #m-text-promedio[data-model="consensus"] .m-feels-ico {
  filter: drop-shadow(0 1px 1px rgba(6, 18, 64, 0.55));
}
html.dark.mobile-view #m-text-promedio[data-model="consensus"] :is(.frame2-label-agency, .frame2-label.is-promedio > button.frame2-label-agency) {
  color: oklch(from var(--dbp-soft) 0.95 0.008 h);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4);
}
html.dark.mobile-view #m-text-promedio[data-model="consensus"] .logo-icon-dark {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}
html:not(.dark).mobile-view #m-text-promedio[data-model="ecmwf"] :is(.frame2-label-title, .frame2-label-nation, .frame2-label-agency) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.35);
}
html:not(.dark).mobile-view #m-text-promedio[data-model="gfs"] :is(.temp-max, .temp-min) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.35);
}
/* The snow file is painted grey. In dark mode the figures are white, so the
   flake is painted white too, with the same soft edge as the raindrop. */
html.dark.mobile-view #m-text-promedio .tomorrow-foot .m-p-rain-ico-snow {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

/* The explanation: one quiet panel, a topic per row, thin dividers between them. */
html.mobile-view #m-text-story {
  --dbs-bg: rgba(255, 255, 255, 0.78);
  --dbs-edge: rgba(150, 146, 205, 0.24);
  --dbs-sep: rgba(120, 116, 180, 0.16);
  --dbs-accent: #4325eb;
  --mc-bar: #0072b2;
  /* A barely-there lift at the top, a 1px highlight on the top and left edges, a soft shadow (as El tiempo). */
  --dbs-lift: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  box-sizing: border-box;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  background:
    linear-gradient(var(--mc-bar), var(--mc-bar)) left center / 4px 100% no-repeat,
    var(--dbs-lift),
    var(--dbs-bg);
  border: 1px solid var(--dbs-edge);
  border-radius: 16px;
  corner-shape: round;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(30, 34, 90, 0.05), 0 10px 24px -10px rgba(30, 34, 90, 0.13);
}
html.dark.mobile-view #m-text-story {
  --dbs-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(20, 22, 32, 0.78);
  --dbs-edge: rgba(255, 255, 255, 0.09);
  --dbs-sep: rgba(255, 255, 255, 0.08);
  --dbs-accent: #73f6f5;
  --mc-bar: #5eb3ea;
  --dbs-lift: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.26), 0 12px 26px -12px rgba(0, 0, 0, 0.5);
}
html.mobile-view #m-text-story .brief-sec-ico {
  color: var(--mc-bar);
}
html.mobile-view #m-text-story .brief-sec {
  grid-template-columns: 1.4rem minmax(0, 1fr);
  column-gap: 0.65rem;
  padding: 0.55rem 0;
}
html.mobile-view #m-text-story .brief-sec:first-child { padding-top: 0; }
html.mobile-view #m-text-story .brief-sec:last-child { padding-bottom: 0; }
html.mobile-view #m-text-story .brief-sec-text {
  font-size: 0.83rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  text-wrap: wrap;
}
html.mobile-view #m-text-story .brief-sec-head {
  font-size: 0.83rem;
  color: var(--text-main, #1e1b4b);
}
html.dark.mobile-view #m-text-story .brief-sec-head { color: #eef0f6; }
/* The explanation borrows a quiet wash of the model card beside or above it.
   Light mode stays a pale panel; dark mode stays a deep one. */
:is(.day-brief-lead, html.mobile-view .m-text-body) {
  --dbs-tint: var(--mc-promedio);
  --dbs-wash: 1;
}
/* Light mode only uses --dbs-wash. WindCrush keeps 1. The other hues read hotter
   at the same chroma, so their wash is lower, and ECMWF's teal is the lowest. */
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio)[data-model="gfs"]) { --dbs-tint: var(--mc-gfs); --dbs-wash: 0.19; }
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio)[data-model="ecmwf"]) { --dbs-tint: var(--mc-ecmwf); --dbs-wash: 0.12; }
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio)[data-model="icon"]) { --dbs-tint: var(--mc-icon); --dbs-wash: 0.14; }
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio)[data-model="ukmo"]) { --dbs-tint: var(--mc-ukmo); --dbs-wash: 0.18; }
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio)[data-model="gem"]) { --dbs-tint: var(--mc-gem); --dbs-wash: 0.15; }
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio)[data-model="custom"]) { --dbs-tint: var(--mc-extra); --dbs-wash: 0.16; }
:is(.day-brief-lead, html.mobile-view .m-text-body):has(:is(#day-brief-promedio, #m-text-promedio):is(
  [data-model="aemet"],
  [data-model="meteoFrance"],
  [data-model="italiaMeteo"],
  [data-model="metno"],
  [data-model="knmi"],
  [data-model="dmi"],
  [data-model="meteoSwiss"],
  [data-model="geosphere"],
  [data-model="chmi"],
  [data-model="kma"],
  [data-model="jma"],
  [data-model="cma"],
  [data-model="bom"]
)) { --dbs-tint: var(--mc-national); --dbs-wash: 0.19; }
html:not(.dark) :is(.card-day-brief #day-brief-story, html.mobile-view #m-text-story) {
  --dbs-bg: oklch(from var(--dbs-tint, var(--mc-promedio)) 0.96 calc(c * 1.8 * var(--dbs-wash, 1)) h);
  --dbs-edge: oklch(from var(--dbs-tint, var(--mc-promedio)) 0.84 calc(c * 1.7 * var(--dbs-wash, 1)) h / 0.42);
  --dbs-sep: oklch(from var(--dbs-tint, var(--mc-promedio)) 0.82 calc(c * 1.15 * var(--dbs-wash, 1)) h / 0.15);
}
html.dark :is(.card-day-brief #day-brief-story, html.mobile-view #m-text-story) {
  --dbs-bg: oklch(from var(--dbs-tint, var(--mc-promedio)) 0.27 calc(c * 0.62) h);
  --dbs-edge: oklch(from var(--dbs-tint, var(--mc-promedio)) 0.46 calc(c * 0.75) h / 0.42);
  --dbs-sep: oklch(from var(--dbs-tint, var(--mc-promedio)) 0.55 calc(c * 0.4) h / 0.165);
}

/* Compartir sits centred under the panel. Its menu opens above it, centred on it. */
html.mobile-view .m-text-card > .forecast-share {
  justify-content: center;
  margin-top: 0;
}
html.mobile-view .m-text-card .forecast-share-btn {
  height: 2.5rem;
  padding: 0 1rem 0 0.8rem;
  font-size: 0.86rem;
}
html.mobile-view .m-text-card .forecast-share-menu {
  left: 50%;
  translate: -50% 0;
}

/* ---------- graphs replace the tiles ---------- */
.m-mid.is-graphs #m-forecast,
.m-mid.is-text #m-forecast {
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.m-mid.is-graphs .m-more,
.m-mid.is-graphs .m-missing-models,
.m-mid.is-text .m-more,
.m-mid.is-text .m-missing-models { display: none !important; }
#mobile-mid.is-graphs #m-period-toggle [data-period-mode="3hourly"] { display: none; }
html.mobile-view .m-mid.is-graphs #graph-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.1rem env(safe-area-inset-right, 0px) calc(1.2rem + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
  margin-bottom: 0;
  /* .m-mid keeps 1.25rem / 0.65rem of side padding for the controls. Pull the
     cards back out so they sit 6px from the screen, corners unchanged. */
  margin-left: calc(6px - 1.25rem);
  margin-right: calc(6px - 0.65rem);
}

/* ---------- panel ---------- */
.graph-panel,
#day-brief-sources,
#compare-model-strip,
#text-model-strip {
  --gp-promedio: #4325eb;
  --gp-card: rgba(255, 255, 255, 0.86);
  --gp-solid: #ffffff;
  --gp-card-border: rgba(30, 27, 75, 0.08);
  --gp-text: #1e1b4b;
  --gp-muted: #6b6f8a;
  --gp-grid: rgba(30, 27, 75, 0.08);
  --gp-grid-day: rgba(67, 37, 235, 0.28);
  --gp-past: rgba(100, 108, 140, 0.1);
  --gp-pill: #15163a;
  --gp-pill-text: #ffffff;
  --gp-fill-rain: rgba(59, 130, 246, 0.2);
  --gp-cum: #c2410c;
  --gp-fill-temp: rgba(244, 63, 94, 0.13);
  --gp-fill-wind: rgba(14, 165, 233, 0.13);
  --gp-fill-gust: rgba(124, 141, 181, 0.16);
  --gp-fill-feels: rgba(224, 106, 47, 0.16);
  --gp-fill-prob: rgba(14, 165, 233, 0.16);
  --g-aemet: #0072b2;
  --g-meteoFrance: #0072b2;
  --g-italiaMeteo: #0072b2;
  --g-metno: #0072b2;
  --g-knmi: #0072b2;
  --g-dmi: #0072b2;
  --g-meteoSwiss: #0072b2;
  --g-geosphere: #0072b2;
  --g-chmi: #0072b2;
  --g-kma: #0072b2;
  --g-jma: #0072b2;
  --g-cma: #0072b2;
  --g-bom: #0072b2;
  --g-gfs: #f43f5e;
  --g-ecmwf: #166534;
  --g-icon: #f59e0b;
  --g-ukmo: #9a3412;
  --g-gem: #65a30d;
  --g-custom: #78716c;
}
.graph-panel {
  position: relative;
  margin: 0 0 0.9rem;
  color: var(--gp-text);
  font-family: Inter, system-ui, sans-serif;
}
html.dark .graph-panel,
html.dark #day-brief-sources,
html.dark #compare-model-strip,
html.dark #text-model-strip {
  --gp-promedio: #73F6F5;
  --gp-card: rgba(21, 23, 36, 0.8);
  --gp-solid: #151724;
  --gp-card-border: rgba(255, 255, 255, 0.08);
  --gp-text: #eef0ff;
  --gp-muted: #a3a8c3;
  --gp-grid: rgba(255, 255, 255, 0.08);
  --gp-grid-day: rgba(115, 246, 245, 0.32);
  --gp-past: rgba(0, 0, 0, 0.22);
  --gp-pill: #f8fafc;
  --gp-pill-text: #15163a;
  --gp-fill-rain: rgba(96, 165, 250, 0.22);
  --gp-cum: #fb923c;
  --gp-fill-temp: rgba(251, 113, 133, 0.16);
  --gp-fill-wind: rgba(56, 189, 248, 0.15);
  --gp-fill-gust: rgba(165, 180, 252, 0.15);
  --gp-fill-feels: rgba(251, 146, 60, 0.18);
  --gp-fill-prob: rgba(34, 211, 238, 0.16);
  --g-aemet: #5eb3ea;
  --g-meteoFrance: #5eb3ea;
  --g-italiaMeteo: #5eb3ea;
  --g-metno: #5eb3ea;
  --g-knmi: #5eb3ea;
  --g-dmi: #5eb3ea;
  --g-meteoSwiss: #5eb3ea;
  --g-geosphere: #5eb3ea;
  --g-chmi: #5eb3ea;
  --g-kma: #5eb3ea;
  --g-jma: #5eb3ea;
  --g-cma: #5eb3ea;
  --g-bom: #5eb3ea;
  --g-gfs: #fb7185;
  --g-ecmwf: #22c55e;
  --g-icon: #fbbf24;
  --g-ukmo: #a48228;
  --g-gem: #c6ef4a;
  --g-custom: #d6d3d1;
}
.graph-panel[hidden] { display: none !important; }
/* A table page must not keep the graph layer, even if its hidden flag is stale. */
.m-mid:not(.is-graphs) > #graph-panel {
  display: none !important;
  pointer-events: none !important;
}

/* ---------- model checkboxes ---------- */
.gp-chip,
.gp-leg-btn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.gp-chip.is-lifting,
li.is-lifting {
  position: fixed;
  z-index: 80;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
}
li.is-lifting {
  border-radius: 0.7rem;
  background: var(--gp-solid);
}
.gp-reorder-gap {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 0.65rem;
  background: rgba(67, 37, 235, 0.14);
}
html.dark .gp-reorder-gap { background: rgba(255, 255, 255, 0.12); }
.gp-models {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
}
.gp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.42rem 0.8rem 0.42rem 0.5rem;
  border: 1px solid var(--gp-card-border);
  border-radius: 0.65rem;
  background: var(--gp-solid);
  color: var(--gp-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(30, 27, 75, 0.06);
}
.gp-check {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--gp-c);
  border-radius: 0.3rem;
  background: transparent;
  color: transparent;
}
.gp-check svg { width: 0.8rem; height: 0.8rem; }
.gp-chip.is-on .gp-check { background: var(--gp-c); color: #ffffff; }
html.dark .gp-chip.is-on .gp-check { color: #10111c; }
.gp-chip:not(.is-on) { color: var(--gp-muted); }
.gp-info {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0 0 0 0.1rem;
  padding: 0;
  border: 1px solid var(--gp-card-border);
  border-radius: 999px;
  background: var(--gp-solid);
  color: var(--gp-muted);
  font: italic 700 0.85rem Georgia, serif;
  cursor: pointer;
}
.gp-info-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.gp-info-pop[hidden] { display: none !important; }
.gp-info-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(16, 17, 28, 0.46);
  cursor: pointer;
}
.gp-info-card {
  position: relative;
  width: min(34rem, 100%);
  max-height: min(70vh, 32rem);
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--gp-card-border);
  border-radius: 0.9rem;
  background: var(--gp-solid);
  color: var(--gp-text);
  box-shadow: 0 16px 40px rgba(16, 17, 28, 0.28);
}
.gp-info-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.gp-info-bar h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
}
.gp-info-close {
  margin-left: auto;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gp-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.gp-info-card p {
  margin: 0 0 0.55rem;
  color: var(--gp-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}
.gp-info-card p:last-child { margin: 0; }

/* ---------- frame: timeline on the left, values on the right ---------- */
.gp-frame {
  --gp-head: 40px;
  --gp-plot-h: 168px;
  --gp-gap: 10px;
  --gp-closed: 44px;
  --gp-axis: 42px;
  /* Room between the last label and the card edge. Mobile keeps the readout padding. */
  --gp-foot: 6px;
  /* The hour labels sit 12px above "Acuerdo entre modelos". This is 70% of that gap. */
  --gp-agree-before: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.5rem;
  column-gap: var(--gp-gap);
  align-items: start;
}
.gp-frame.is-mobile {
  --gp-plot-h: 208px;
  --gp-gap: 8px;
  --gp-read: 162px;
  --gp-axis: 34px;
  --gp-foot: 0px;
  grid-template-columns: minmax(0, 1fr);
}
.gp-dotchip { display: none; }
.gp-viewport {
  position: relative;
  min-width: 0;
}
.gp-cards {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-gap);
  pointer-events: none;
}
.gp-card,
.gp-leg {
  flex: 0 0 auto;
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-foot));
  border: 1px solid var(--gp-card-border);
  border-radius: 0.9rem;
  background: var(--gp-card);
  box-shadow: 0 1px 4px rgba(30, 27, 75, 0.06);
  box-sizing: border-box;
}
/* Light graph cards in both frames share the pale lavender of the 24h panel.
   A thin white wash lifts the plot so it stays lighter than the header and
   the legend, and fades into them. Dark mode is unchanged. */
html:not(.dark) :is(#graph-panel, #day-brief-graph) {
  --gp-card: rgba(242, 243, 255, 0.86);
}
html:not(.dark) :is(#graph-panel, #day-brief-graph) .gp-cards > .gp-card { position: relative; }
html:not(.dark) :is(#graph-panel, #day-brief-graph) .gp-card:not(.is-closed)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--gp-head);
  height: var(--gp-plot-h);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 22px, rgba(255, 255, 255, 0.4) calc(100% - 18px), transparent);
  pointer-events: none;
}
html:not(.dark) :is(#graph-panel, #day-brief-graph) .gp-card.has-agree:not(.is-closed)::after {
  height: calc(var(--gp-plot-h) + var(--gp-agree) + var(--gp-agree-before));
}
html:not(.dark) #day-brief-graph .gp-card:not(.is-closed)::after {
  height: calc(var(--gp-plot-h) + var(--gp-foot));
}
.gp-card.is-closed,
.gp-leg.is-closed { height: var(--gp-closed); }
.gp-leg.is-closed { visibility: hidden; }
.gp-sheet { position: relative; }
.gp-clip {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--gp-axis);
  overflow: hidden;
  contain: paint;
}
.gp-chrome {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gp-gap);
  pointer-events: none;
}
.gp-chrome .gp-head,
.gp-chrome .gp-agree-info,
.gp-chrome .gp-read .gp-step,
.gp-chrome .gp-read .gp-leg-btn { pointer-events: auto; }
.gp-headspace { height: var(--gp-head); }
.gp-agree-gap { height: 16px; }
.gp-readspace { height: var(--gp-read); }
.gp-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;
  overscroll-behavior-x: none;
  touch-action: pan-x pan-y;
  cursor: grab;
  outline: none;
}
.gp-scroll::-webkit-scrollbar { display: none; }
.gp-scroll.is-dragging { cursor: grabbing; user-select: none; }
.gp-scroll:focus-visible { box-shadow: 0 0 0 2px var(--gp-grid-day); border-radius: 0.9rem; }
.gp-track {
  display: flex;
  flex-direction: column;
  gap: var(--gp-gap);
}
.gp-sec {
  flex: 0 0 auto;
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-foot));
}
.gp-sec.is-closed { height: var(--gp-closed); }
.gp-sticky {
  position: sticky;
  left: 0;
  z-index: 3;
  width: var(--gp-vw);
}
.gp-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  height: var(--gp-head);
  margin: 0;
  padding: 0 0.75rem 0 0.7rem;
  border: 0;
  background: transparent;
  color: var(--gp-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gp-sec.is-closed .gp-head { height: var(--gp-closed); }
.gp-icon { display: grid; width: 1.45rem; height: 1.45rem; flex: 0 0 auto; }
.gp-icon svg { width: 100%; height: 100%; }
.gp-title {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#day-brief-graph .gp-frame {
  --gp-head: 56px;
  --gp-closed: 56px;
}
#day-brief-graph .gp-head-copy {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  column-gap: 0.55rem;
  row-gap: 0.08rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
#day-brief-graph .gp-titleline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}
#day-brief-graph .gp-model-line {
  display: flex;
  align-items: center;
  grid-column: 2;
  grid-row: 2;
  max-width: 100%;
  min-width: 0;
  color: var(--gp-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
}
#day-brief-graph .gp-model-line .gp-leg-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#day-brief-graph .gp-model-line:has(.gp-logo) { overflow: visible; }
.gp-unit { flex: 0 0 auto; color: var(--gp-muted); font-size: 0.82rem; font-weight: 500; }
.gp-chev {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(67, 37, 235, 0.07);
  color: var(--gp-text);
}
html.dark .gp-chev { background: rgba(255, 255, 255, 0.08); }
.gp-chevron { width: 0.75rem; height: 0.5rem; transition: transform 0.15s ease; }
.gp-head[aria-expanded="true"] .gp-chevron { transform: rotate(180deg); }
.gp-plotrow {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: var(--gp-plot-h);
}
/* Day names ride in the plot and stick to its left edge. The next day's box
   starts where that name belongs, so it pushes the previous one aside. */
.gp-days {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  pointer-events: none;
}
.gp-day {
  position: absolute;
  top: 0;
  height: 100%;
}
.gp-day-name {
  position: sticky;
  left: 2px;
  display: inline-block;
  margin-top: 2.5px;
  margin-right: 10px;
  padding-bottom: 2px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--gp-text);
  white-space: nowrap;
}
/* El tiempo: two cards per row. The column gap matches the gap between stacked cards. */
#day-brief-graph .gp-frame { display: block; }
#day-brief-graph .gp-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gp-gap);
  row-gap: var(--gp-gap);
  align-items: start;
}
#day-brief-graph .gp-brief-cell {
  position: relative;
  min-width: 0;
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-foot));
}
#day-brief-graph .gp-brief-cell.is-closed { height: var(--gp-closed); }
#day-brief-graph .gp-brief-cell.has-agree {
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-agree) + var(--gp-agree-before) + var(--gp-foot));
}
#day-brief-graph .gp-brief-cell .gp-card {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
#day-brief-graph .gp-brief-cell .gp-sheet { height: 100%; }
#day-brief-graph .gp-brief-cell .gp-sticky { width: 100%; }
#day-brief-graph .gp-brief-cell.is-cum { --gp-cum-axis: 44px; }
#day-brief-graph .gp-brief-cell.is-cum .gp-clip { right: var(--gp-cum-axis); }
#day-brief-graph .gp-brief-cell.is-cum .gp-chrome .gp-sec { position: relative; }
/* Comparison on a wide screen uses the same two-card rows, with the model list inside the card. */
#graph-panel .gp-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gp-gap);
  row-gap: var(--gp-gap);
  align-items: start;
}
#graph-panel .gp-brief-cell {
  position: relative;
  min-width: 0;
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-read) + var(--gp-foot));
}
#graph-panel .gp-brief-cell.has-agree {
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-agree) + var(--gp-agree-before) + var(--gp-read) + var(--gp-foot));
}
#graph-panel .gp-brief-cell.is-closed { height: var(--gp-closed); }
#graph-panel .gp-brief-cell .gp-card {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
#graph-panel .gp-brief-cell .gp-sheet,
#graph-panel .gp-brief-cell .gp-chrome,
#graph-panel .gp-brief-cell .gp-sec,
#graph-panel .gp-brief-cell .gp-sec.has-agree {
  height: 100%;
}
#graph-panel .gp-brief-cell .gp-chrome { gap: 0; }
#graph-panel .gp-brief-cell .gp-sec {
  display: flex;
  flex-direction: column;
}
#graph-panel .gp-brief-cell .gp-sticky { width: 100%; }
#graph-panel .gp-brief-cell.has-read .gp-clip { bottom: calc(var(--gp-read) + var(--gp-foot)); }
#graph-panel .gp-brief-cell.is-closed .gp-clip { display: none; }
#day-brief-graph .gp-axis-cum {
  position: absolute;
  z-index: 2;
  /* The axis lives in the plot row, which already starts under the header, so it lines up with the plot at 0. */
  top: 0;
  right: 0;
  width: var(--gp-cum-axis);
  height: var(--gp-plot-h);
  overflow: hidden;
}
#day-brief-graph .gp-cum-leg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-width: 0;
  color: var(--gp-muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
  pointer-events: none;
}
/* Center the legend in the open space between the title word and the arrow.
   The unit stays at the start of that space, beside the title. */
#day-brief-graph .gp-titleline:has(.gp-cum-leg) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.55rem;
}
#day-brief-graph .gp-titleline:has(.gp-cum-leg) > .gp-icon {
  grid-column: 1;
  grid-row: 1;
}
#day-brief-graph .gp-titleline:has(.gp-cum-leg) > .gp-title {
  grid-column: 2;
  grid-row: 1;
}
#day-brief-graph .gp-titleline:has(.gp-cum-leg) .gp-cum-leg {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  width: max-content;
  max-width: 100%;
}
#day-brief-graph .gp-titleline:has(.gp-cum-leg) .gp-unit {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  z-index: 1;
}
#day-brief-graph .gp-titleline:has(.gp-cum-leg) .gp-chev {
  grid-column: 4;
  grid-row: 1;
  margin-left: 0;
}
.gp-cum-key { display: inline-flex; align-items: center; gap: 0.28rem; white-space: nowrap; }
.gp-leg-gust,
.gp-leg-feels { width: 0.82rem; height: 0.82rem; }
.gp-gust-ico,
.gp-pair-ico { overflow: visible; pointer-events: none; }
.gp-gust-ico .gp-leg-gust,
.gp-pair-ico .gp-leg-gust,
.gp-pair-ico .gp-leg-feels { width: 12px; height: 12px; }
.gp-cum-swatch { display: inline-block; width: 10px; height: 8px; border-radius: 1px; }
.gp-cum-swatch.is-line {
  width: 14px;
  height: 0;
  border-radius: 0;
  border-top: 1.6px solid var(--gp-cum);
  background: none;
}
.gp-cum-swatch.is-line.is-dash { border-top-style: dashed; }
.gp-cum { fill: none; stroke: var(--gp-cum); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#graph-panel .gp-axis,
#day-brief-graph .gp-axis {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--gp-axis);
  width: var(--gp-axis);
  background: transparent;
}
.gp-svg {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}
.gp-y { fill: var(--gp-muted); font-size: 11px; }
.gp-y-arrow { fill: var(--gp-muted); }
.gp-wind-arrow { fill: var(--gp-text); }
.gp-wind-arrows { pointer-events: none; }
.gp-sky-row { pointer-events: none; }
.gp-sky-ico { overflow: visible; pointer-events: none; }
.gp-sky {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  pointer-events: none;
}
.gp-sky .sky-mixed { width: 1em; height: 1em; }
.gp-leg-dir { margin-left: 0.35rem; }
.gp-x { fill: var(--gp-muted); font-size: 11px; }
.gp-x.is-midnight { fill: var(--gp-text); font-weight: 700; }
.gp-x.is-day { fill: var(--gp-text); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; }
.gp-grid { stroke: var(--gp-grid); stroke-width: 1; }
.gp-vgrid { stroke: var(--gp-grid); stroke-width: 1; }
.gp-vgrid.is-day { stroke: var(--gp-grid-day); stroke-width: 1.2; }
.gp-past { fill: var(--gp-past); }
.gp-now { stroke: var(--gp-muted); stroke-width: 1; opacity: 0.6; }
.gp-line { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.gp-line.is-promedio { stroke-width: 3; }
.gp-line.is-dashed { stroke-dasharray: 5 4; }
.gp-line.is-published { stroke-dasharray: 3 3; stroke-width: 1.4; opacity: 0.85; }
.gp-fill { stroke: none; }
/* Value wash under PROMEDIO. Peak opacity lives here so a theme switch does not rebuild the SVG. */
.gp-shade { opacity: 0.34; pointer-events: none; }
html.dark .gp-shade { opacity: 0.42; }
.gp-shade.is-rain { opacity: 0.7; }
html.dark .gp-shade.is-rain { opacity: 0.78; }
.gp-shade.is-temp { opacity: 0.62; }
html.dark .gp-shade.is-temp { opacity: 0.7; }
.gp-shade.is-curve { opacity: 0.62; }
html.dark .gp-shade.is-curve { opacity: 0.7; }
.gp-shade.is-gust-band { opacity: 0.38; }
html.dark .gp-shade.is-gust-band { opacity: 0.46; }
.gp-shade.is-feel-band,
html.dark .gp-shade.is-feel-band { opacity: 1; }
.gp-fill.is-rain { fill: var(--gp-fill-rain); }
.gp-fill.is-temp { fill: var(--gp-fill-temp); }
.gp-fill.is-wind { fill: var(--gp-fill-wind); }
.gp-fill.is-gust { fill: var(--gp-fill-gust); }
.gp-fill.is-feels { fill: var(--gp-fill-feels); }
.gp-fill.is-prob { fill: var(--gp-fill-prob); }
.gp-icon.is-mask {
  background: var(--gp-ico);
  -webkit-mask: var(--gp-mask) center / contain no-repeat;
  mask: var(--gp-mask) center / contain no-repeat;
}
.gp-icon.is-rain { --gp-ico: #2f6df6; --gp-mask: url("/Images/rain-drop-pointing-down-fill.svg"); }
.gp-icon.is-gust { --gp-ico: #3b6cb5; --gp-mask: url("/Images/wind-flag.svg"); }
.gp-icon.is-feels { --gp-ico: #e06a2f; --gp-mask: url("/Images/feels-like.svg"); }
.gp-icon.is-prob { --gp-ico: #0284c7; --gp-mask: url("/Images/umbrella.svg"); }
html.dark .gp-icon.is-rain { --gp-ico: #7dd3fc; }
html.dark .gp-icon.is-gust { --gp-ico: #93c5fd; }
html.dark .gp-icon.is-feels { --gp-ico: #fdba74; }
html.dark .gp-icon.is-prob { --gp-ico: #67e8f9; }
.gp-dot.is-promedio { stroke: var(--gp-solid); stroke-width: 1; }
.gp-snow { fill: #5b8def; font-size: 11px; }
.gp-band { fill: var(--gp-grid-day); opacity: 0.18; }
.gp-cur { stroke: var(--gp-pill); stroke-width: 1.3; stroke-dasharray: 4 3; }
.gp-mark { stroke: var(--gp-solid); stroke-width: 1.6; }
.gp-pillbg { fill: var(--gp-pill); }
.gp-pilltext { fill: var(--gp-pill-text); font-size: 11.5px; font-weight: 700; }
.gp-bubble,
.gp-bubbletail { fill: var(--gp-pill); }
.gp-bubbletext { fill: var(--gp-pill-text); font-size: 11.5px; font-weight: 700; }

/* ---------- values at the cursor ---------- */
.gp-legend {
  display: flex;
  flex-direction: column;
  gap: var(--gp-gap);
}
.gp-leg {
  padding: 0.6rem 0.75rem;
  overflow: hidden;
}
.gp-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.35rem;
}
.gp-pill {
  display: inline-block;
  margin: 0;
  padding: 0.12rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--gp-pill);
  color: var(--gp-pill-text);
  font-size: 0.78rem;
  font-weight: 700;
}
.gp-leg-sub { color: var(--gp-muted); font-size: 0.7rem; }
.gp-leg ul,
.gp-tip ul { margin: 0; padding: 0; list-style: none; }
.gp-leg li,
.gp-tip li,
.gp-read li {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.5;
}
.gp-leg li i,
.gp-tip li i,
.gp-read li i { width: 0.55rem; height: 0.55rem; border-radius: 999px; }
.gp-leg-name {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--gp-text);
}
.gp-leg-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-leg-flag {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 0;
}
.gp-leg-flag .model-flag,
.gp-leg-flag .flag-white-bg {
  width: 14px;
  height: 10px;
  margin: 0;
}
.gp-model-line .gp-leg-flag .model-flag,
.gp-model-line .gp-leg-flag .flag-white-bg {
  height: 0.762em;
  width: calc(0.762em * 1.5);
  margin: 0;
}
/* Selection buttons: the flag matches the capital letters and sits on their baseline. */
:is(.gp-chip, .gp-leg-btn) .gp-leg-flag {
  display: inline;
  vertical-align: baseline;
  line-height: 1;
}
:is(.gp-chip, .gp-leg-btn) .gp-leg-flag .model-flag,
:is(.gp-chip, .gp-leg-btn) .gp-leg-flag .flag-white-bg {
  height: 1cap;
  width: auto;
  aspect-ratio: 512 / 336.45;
  margin: 0;
  vertical-align: baseline;
}
.gp-leg-btn .gp-leg-name:has(.gp-leg-flag) { align-items: baseline; }
.gp-leg-flag .flag-white-bg { display: inline-flex; }
.gp-leg-flag .flag-white-bg > img.model-flag { width: 100%; height: 100%; }
.gp-leg-flag .custom-blocks-icon { width: 0.85rem; height: 0.85rem; vertical-align: 0; }
.gp-leg-name:has(.gp-logo) { overflow: visible; }
.gp-model-line .logo.gp-logo,
.gp-leg-name .logo.gp-logo,
.gp-chip-name .logo.gp-logo {
  --logo-size: 1em;
  font-size: 1em;
  line-height: 1;
  gap: 0;
  font-weight: 400;
}
/* The icon sits on the word's baseline, so the pair hangs below the other
   labels. Lift both together; the icon keeps its usual shift. */
.gp-chip-name .logo.gp-logo {
  transform: translateY(-0.16em);
}
.gp-leg-val { color: var(--gp-text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
li.is-promedio .gp-leg-name,
li.is-promedio .gp-leg-val { font-weight: 800; }
li.is-missing .gp-leg-val { color: var(--gp-muted); }
.gp-arrow { width: 0.7rem; height: 0.7rem; margin-right: 0.25rem; vertical-align: -0.05rem; }

.gp-tips {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.gp-tip {
  position: absolute;
  min-width: 8.5rem;
  max-width: 11.5rem;
  padding: 0.35rem 0.5rem 0.4rem;
  border: 1px solid var(--gp-card-border);
  border-radius: 0.6rem;
  background: var(--gp-solid);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  visibility: hidden;
}
.gp-tip .gp-pills { margin-bottom: 0.25rem; }
.gp-tip .gp-pill { font-size: 0.72rem; }
.gp-tip li { gap: 0.35rem; font-size: 0.7rem; line-height: 1.42; }
.gp-tip .gp-leg-sub { display: block; margin: 0 0 0.1rem; }

.gp-notes {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.gp-notes li {
  margin: 0.25rem 0;
  color: var(--gp-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.gp-empty { margin: 0.4rem 0 0.6rem; color: var(--gp-muted); font-size: 0.9rem; }

@media (max-width: 1100px) {
  .gp-frame:not(.is-mobile):not(.is-columns) { grid-template-columns: minmax(0, 1fr) 12rem; }
}
.gp-frame.is-columns { display: block; }
.gp-frame.is-columns .gp-read {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: auto;
  height: var(--gp-read);
  margin-top: auto;
  overflow: hidden;
  border-top: 1px solid var(--gp-card-border);
}
.gp-frame.is-columns .gp-read-nav {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) 1.7rem;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem 0.45rem 0.1rem;
}
.gp-frame.is-columns .gp-read-nav .gp-pills {
  justify-content: center;
  margin: 0;
}
.gp-frame.is-columns .gp-step {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gp-card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--gp-text);
  cursor: pointer;
}
.gp-frame.is-columns .gp-step svg { width: 0.75rem; height: 0.75rem; }
.gp-frame.is-columns .gp-step:disabled { opacity: 0.35; cursor: default; }
.gp-frame.is-columns .gp-vals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 2.1rem;
  margin: 0;
  padding: 0.1rem 0.6rem 0.4rem;
  list-style: none;
}
.gp-frame.is-columns .gp-vals li { display: block; min-width: 0; }
.gp-frame.is-columns .gp-leg-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.gp-frame.is-columns .gp-leg-btn .gp-check {
  width: 0.9rem;
  height: 0.9rem;
  box-sizing: border-box;
}
.gp-frame.is-columns .gp-leg-btn .gp-check svg { width: 0.62rem; height: 0.62rem; }
.gp-frame.is-columns .gp-leg-btn[aria-pressed="true"] .gp-check {
  background: var(--gp-c);
  color: #ffffff;
}
html.dark .gp-frame.is-columns .gp-leg-btn[aria-pressed="true"] .gp-check { color: #10111c; }
.gp-frame.is-columns .gp-leg-btn[aria-pressed="false"] .gp-leg-name,
.gp-frame.is-columns .gp-leg-btn[aria-pressed="false"] .gp-leg-val { color: var(--gp-muted); }
html.mobile-view .gp-tips { display: none !important; }
html.mobile-view .gp-frame.is-mobile .gp-sec:not(.is-closed),
html.mobile-view .gp-frame.is-mobile .gp-card:not(.is-closed) {
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-read) + var(--gp-foot));
}
html.mobile-view .gp-models { margin-bottom: 0.45rem; }
html.mobile-view .gp-head { padding: 0 0.55rem; }
html.mobile-view .gp-head .gp-info {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 0.15rem 0 0.1rem;
  font-size: 0.75rem;
}
html.mobile-view .gp-title { font-size: 0.95rem; }
html.mobile-view .gp-read {
  position: sticky;
  left: 0;
  z-index: 3;
  box-sizing: border-box;
  width: var(--gp-vw);
  height: var(--gp-read);
  overflow: hidden;
}
html.mobile-view .gp-read-nav {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem 0.15rem;
}
html.mobile-view .gp-read-nav .gp-pills {
  justify-content: center;
  margin: 0;
}
html.mobile-view .gp-step {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gp-card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--gp-text);
  cursor: pointer;
}
html.mobile-view .gp-step svg { width: 0.85rem; height: 0.85rem; }
html.mobile-view .gp-step:disabled { opacity: 0.35; cursor: default; }
html.mobile-view .gp-vals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.65rem;
  margin: 0;
  padding: 0.05rem 0.75rem 0.4rem;
  list-style: none;
}
html.mobile-view .gp-vals li { display: block; min-width: 0; }
html.mobile-view .gp-leg-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.mobile-view .graph-panel.is-leg-reordering .gp-leg-btn {
  touch-action: none;
}
html.mobile-view .gp-leg-btn .gp-check {
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;
}
html.mobile-view .gp-leg-btn .gp-check svg { width: 0.72rem; height: 0.72rem; }
html.mobile-view .gp-leg-btn[aria-pressed="true"] .gp-check {
  background: var(--gp-c);
  color: #ffffff;
}
html.dark.mobile-view .gp-leg-btn[aria-pressed="true"] .gp-check { color: #10111c; }
html.mobile-view .gp-leg-btn[aria-pressed="false"] .gp-leg-name,
html.mobile-view .gp-leg-btn[aria-pressed="false"] .gp-leg-val { color: var(--gp-muted); }

.gp-frame { --gp-agree: 42px; }
.gp-sec.has-agree,
.gp-card.has-agree,
.gp-leg.has-agree {
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-agree) + var(--gp-agree-before) + var(--gp-foot));
}
html.mobile-view .gp-frame.is-mobile .gp-sec.has-agree:not(.is-closed),
html.mobile-view .gp-frame.is-mobile .gp-card.has-agree:not(.is-closed) {
  height: calc(var(--gp-head) + var(--gp-plot-h) + var(--gp-agree) + var(--gp-agree-before) + var(--gp-read) + var(--gp-foot));
}
.gp-agree {
  height: calc(var(--gp-agree) + var(--gp-agree-before));
  padding-top: var(--gp-agree-before);
  box-sizing: border-box;
}
.gp-agree-sticky {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  width: var(--gp-vw);
  height: 16px;
  padding: 0 0.7rem 0 var(--gp-axis);
}
.gp-agree-title {
  min-width: 0;
  overflow: hidden;
  color: var(--gp-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-agree-cat {
  margin-left: auto;
  color: var(--gp-muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.gp-agree-info {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1px solid var(--gp-card-border);
  border-radius: 999px;
  background: var(--gp-solid);
  color: var(--gp-muted);
  font: italic 700 0.68rem Georgia, serif;
  cursor: pointer;
}
.gp-agree-row { display: flex; align-items: flex-start; height: 26px; }
.gp-agree-axis {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--gp-axis);
  width: var(--gp-axis);
  height: 24px;
  background: transparent;
}
.gp-agree-svg { display: block; flex: 0 0 auto; overflow: hidden; }
.gp-agree-cur { stroke: var(--gp-pill); stroke-width: 1.3; stroke-dasharray: 3 2; }
.gp-agree-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.gp-agree-pop[hidden] { display: none !important; }
.gp-agree-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(16, 17, 28, 0.46);
  cursor: pointer;
}
.gp-agree-card {
  position: relative;
  width: min(32rem, 100%);
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--gp-card-border);
  border-radius: 0.9rem;
  background: var(--gp-solid);
  color: var(--gp-text);
  box-shadow: 0 16px 40px rgba(16, 17, 28, 0.28);
}
.gp-agree-card p {
  margin: 0 0 0.55rem;
  color: var(--gp-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}
.gp-agree-card p:last-child { margin: 0; }
.gp-agree-close {
  margin-left: auto;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gp-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}