/* header/ribbon wrap + ellipsis */
header, .topbar, .ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ribbon{box-sizing:border-box;width:100%;padding-right:8px}
.ribbon .title, header .title, .topbar .title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* unify widths for key cards */
#w_temp_pro,#w_uv_pro,#w_trends,#w_owm_today,#w_owm_next{grid-column:1 / span 6}
@media (max-width:1000px){#w_temp_pro,#w_uv_pro,#w_trends,#w_owm_today,#w_owm_next{grid-column:1 / -1}}

/* nicer icon sizing/alignment in OWM tiles */
#w_owm_today .seg img, #w_owm_next .day img{width:36px;height:36px;image-rendering:auto}

/* UV pointer restore (triangle) */
#w_uv_pro .uvp .pointer{
  position:absolute;left:var(--uvp-x,50%);transform:translateX(-50%);
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid #e9edf7;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))
}
#w_uv_pro .uvp .pointer::after{content:""}/* Subtle icon polish */
#owm-today-body .seg img,
#owm-hours img,
#owm-next-days .day img,
#w_owm_today .icon,
#w_owm_next .day img{
  width:36px;height:36px;border-radius:6px;
  background:rgba(255,255,255,.06);
  padding:2px
}

/* Moon ring + subtle glow when using vector mode */
#w_sunmoon .moonStroke{stroke:#cfd6ea; stroke-width:1.2; fill:none; opacity:.9}
#w_sunmoon #moonImg{image-rendering:auto; border-radius:50%}/* === OWM icon fix === */
#owm-today-body .seg img,
#owm-hours img,
#owm-next-days .day img,
#w_owm_today .icon,
#w_owm_next .day img{
  width:40px!important;height:40px!important;
  background:none!important;padding:0!important;border-radius:0!important;
  image-rendering:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
/* slightly larger touch target in “Vandaag” rows (keeps layout) */
#owm-today-body .seg .icon{justify-self:center}/* UV pointer — white down triangle with soft shadow */
#w_uv_pro .uvp{position:relative}
#w_uv_pro .uvp .scale{position:relative}
#w_uv_pro .uvp .pointer{
  position:absolute;
  top:-8px;               /* sits above the bar; JS sets left px */
  transform:translateX(-50%);
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:10px solid #ffffff;   /* white arrow */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  pointer-events:none;
}/* UV pointer — clean white down triangle with soft shadow */
#w_uv_pro .uvp{position:relative}
#w_uv_pro .uvp .scale{position:relative}
#w_uv_pro .uvp .pointer{
  position:absolute;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:10px solid #ffffff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  pointer-events:none;
}