/* ==== Base card & theme ==== */
.nws-card{
  --radius:14px; --border:1px solid #e5e7eb; --pad:14px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-family:var(--font); color:#0f172a;
  width:min(100%,820px); min-width:300px; margin:0 auto;
  border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); background:#fff; overflow:hidden;
}

/* Header */
.nws-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--pad) var(--pad) 8px;border-bottom:var(--border);
  background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);flex-wrap:wrap
}
.nws-title{font-weight:800;font-size:18px;line-height:1.15}
.nws-subtitle{font-size:12px;color:#64748b}
.nws-tabs{display:flex;gap:6px;margin-left:auto}
.nws-tab{border:var(--border);border-radius:999px;padding:6px 10px;background:#fff;font-size:13px;cursor:pointer}
.nws-tab--active{background:#0b3d91;color:#fff;border-color:#0b3d91}
.nws-body{padding:var(--pad)}
.nws-footnote{margin-top:8px;font-size:11px;color:#64748b}

/* Alerts */
.nws-alerts{display:grid;gap:8px;padding:10px 14px;background:#fff7ed;border-top:var(--border);border-bottom:var(--border)}
.nws-alert{border-left:4px solid #ea580c;padding-left:10px;font-size:13.5px;line-height:1.35}
.nws-alert a{color:#b45309;text-decoration:underline}

/* "Now" row */
.nws-now{
  display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;
  padding:12px;border:var(--border);border-radius:12px;margin-bottom:12px;background:#f8fafc
}

/* Forecast grid */
.nws-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:420px){.nws-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.nws-grid{grid-template-columns:repeat(4,1fr)}}

/* Period tiles */
.nws-period{
  display:grid;align-items:center;gap:12px;
  grid-template-columns:96px 1fr; /* wider fixed icon column */
  padding:12px;border:var(--border);border-radius:12px;background:#fff;min-height:118px;
}
@media (max-width:767.98px){
  .nws-now{grid-template-columns:100px 1fr}
  .nws-period{grid-template-columns:80px 1fr;min-height:110px}
}
.nws-period > *{min-width:0}          /* allow text to wrap instead of overflow */
.nws-name{font-weight:800;font-size:15px;line-height:1.15;margin-bottom:2px}
.nws-short{font-size:13.5px;color:#64748b;line-height:1.35;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nws-temp{font-weight:800;font-size:15px}

/* ICONS — hard boundary + containment (prevents overlap/cropping) */
.nws-iconwrap{
  width:90px;height:90px;box-sizing:border-box;
  border:1px solid #e5e7eb;border-radius:10px;
  background:#ffffff; padding:6px; overflow:hidden;  /* boundary */
}
.nws-iconwrap--lg{width:120px;height:120px}
@media (max-width:767.98px){
  .nws-iconwrap{width:80px;height:80px}
  .nws-iconwrap--lg{width:100px;height:100px}
}
.nws-icon{
  display:block; margin:auto;
  width:auto; height:auto;            /* ignore any global img{width:100%} */
  max-width:80%; max-height:100%;
  object-fit:contain; image-rendering:auto;
}
.nws-emoji{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:64px}

/* Embeds & tabs */
.nws-embed-wrap{border:var(--border);border-radius:12px;overflow:hidden}
.nws-pane{display:none}
.nws-pane--active{display:block}