/* Compact city warnings; severity fills match the warnings page and mobile card. */
.forecast-warnings.darkmode-ignore { display:block; clear:both; box-sizing:border-box; width:calc(100% - 20px); max-width:calc(350px + var(--w2d-space-6,24px) + var(--w2d-space-6,24px)); margin:12px auto; padding:8px 12px; border:1px solid var(--w2d-border-subtle,#E2E8F0); border-radius:15px; background:var(--w2d-surface-neutral,#FFF); color:var(--w2d-text,#1F2937); text-align:right; }
@media (min-width:768px) {
  .forecast-warnings.darkmode-ignore { width:auto; max-width:none; margin-left:var(--w2d-space-5,20px); margin-right:var(--w2d-space-5,20px); }
}
.forecast-warnings .forecast-warnings-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:4px 20px; padding:0; margin:0; list-style:none; }
.forecast-warnings .forecast-warnings-list > li { min-width:0; padding:0; margin:0; list-style:none; }
.forecast-warnings .forecast-warnings-list > li[hidden] { display:none; }
.forecast-warnings .forecast-warning { display:flex; align-items:center; gap:8px; box-sizing:border-box; min-height:48px; padding:4px 0; border-radius:6px; color:inherit; text-decoration:none; }
.forecast-warnings .forecast-warning-icon { display:flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; background:transparent; color:inherit; }
.forecast-warnings .forecast-warning-icon svg { display:block; width:24px; height:24px; fill:currentColor; }
/* Subtle 240ms glints, spaced about 3-4 seconds apart, with staggered timing between rows. */
.forecast-warnings li.is-upcoming .forecast-warning-icon svg {
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 40%,#000 50%,rgba(0,0,0,.55) 60%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 40%,#000 50%,rgba(0,0,0,.55) 60%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:forecast-warning-upcoming 10s linear infinite;
}
.forecast-warnings li.is-upcoming:nth-child(3n+2) .forecast-warning-icon svg { animation-delay:-11s; }
.forecast-warnings li.is-upcoming:nth-child(3n) .forecast-warning-icon svg { animation-delay:-5s; }
@keyframes forecast-warning-upcoming {
  0%,29%,70% { -webkit-mask-position:100% 0; mask-position:100% 0; animation-timing-function:linear; }
  2.4%,31.4%,72.4% { -webkit-mask-position:0 0; mask-position:0 0; animation-timing-function:steps(1,end); }
  100% { -webkit-mask-position:0 0; mask-position:0 0; }
}
@media (prefers-reduced-motion:reduce) {
  .forecast-warnings li.is-upcoming .forecast-warning-icon svg { animation:none; -webkit-mask-image:none; mask-image:none; }
}
.forecast-warnings .forecast-warning-copy { display:flex; flex:1; min-width:0; flex-direction:column; line-height:1.4; }
.forecast-warnings .forecast-warning-copy strong { font-size:14px; font-weight:700; overflow-wrap:break-word; }
.forecast-warnings .forecast-warning-copy small { font-size:12px; color:var(--w2d-text-muted,#475569); }
.forecast-warnings .forecast-warning-copy bdi { white-space:nowrap; }
.forecast-warnings .forecast-warning-severity { flex:0 1 auto; max-width:45%; margin-left:8px; padding:3px 9px; border-radius:999px; background:#476B9D; color:#FFF; box-shadow:inset 0 0 0 1px var(--w2d-border-strong,#64748B); font-size:12px; font-weight:700; line-height:1.35; text-align:center; }
.forecast-warnings .warning-severity-2,.forecast-warnings .warning-severity-3 { background:#FFD700; color:#000; }
.forecast-warnings .warning-severity-4,.forecast-warnings .warning-severity-5 { background:#FF8C00; color:#000; }
.forecast-warnings .warning-severity-6,.forecast-warnings .warning-severity-7 { background:#FE0104; color:#000; }
.forecast-warnings .warning-severity-8 { background:#2563EB; color:#FFF; }
.forecast-warnings .forecast-warning:hover { background:var(--w2d-surface-neutral-subtle,#F8FAFC); }
.forecast-warnings .forecast-warning:focus-visible { outline:2px solid var(--w2d-primary-500,#2563EB); outline-offset:2px; }
.darkmode--activated .forecast-warnings { --w2d-surface-neutral:#1C2D43; --w2d-text:#EEF4FC; --w2d-text-muted:#BBCDE3; --w2d-border-subtle:#314661; --w2d-border-strong:#7A8BA1; --w2d-surface-neutral-subtle:#132135; }