/* NNN.NW — Weather Page CSS v4 — zero inline styles */



/* ── Page wrapper ── */

.nn-wx-page { padding-bottom: 60px; }



/* ── Alerts ── */

.nn-wx-alert {

    display: flex; align-items: flex-start; gap: 12px;

    padding: 14px var(--nn-gutter);

    border-left: 5px solid var(--ds-accent);

    margin-bottom: 2px;

    font-size: 13px;

}

.nn-wx-alert-extreme  { background: rgba(127,29,29,0.15);  border-left-color: #dc2626; }

.nn-wx-alert-severe   { background: rgba(154,52,18,0.15);  border-left-color: #ea580c; }

.nn-wx-alert-moderate { background: rgba(113,63,18,0.15);  border-left-color: #d97706; }

.nn-wx-alert-minor    { background: rgba(30,58,138,0.1);   border-left-color: #3b82f6; }

.nn-wx-alert-icon     { flex-shrink: 0; margin-top: 1px; color: inherit; }

.nn-wx-alert-body     { display: flex; flex-direction: column; gap: 2px; }

.nn-wx-alert-body strong { font-weight: 700; color: var(--nn-text); }

.nn-wx-alert-body span   { color: var(--nn-text-muted); }



/* ── Hurricane bar ── */

.nn-wx-hurricane-bar {

    display: flex; align-items: center; gap: 8px;

    padding: 10px var(--nn-gutter);

    background: rgba(127,29,29,0.12);

    border-left: 5px solid #dc2626;

    font-size: 13px; color: var(--nn-text);

    flex-wrap: wrap;

}

.nn-wx-hurricane-bar a  { color: var(--ds-accent); font-weight: 600; }

.nn-wx-hurricane-src    { color: var(--nn-text-muted); font-size: 11px; margin-left: auto; }



/* ── Topbar ── */

.nn-wx-page-topbar {

    display: flex; align-items: center; justify-content: space-between;

    padding: 16px var(--nn-gutter);

    border-bottom: 1px solid var(--nn-border);

    background: var(--nn-bg);

    position: relative;

}

.nn-wx-page-loc {

    display: flex; align-items: center; gap: 6px;

    font-size: 18px; font-weight: 700;

    font-family: var(--nn-font-display); color: var(--nn-text);

}

.nn-wx-page-loc svg { color: var(--ds-accent); flex-shrink: 0; }

.nn-wx-page-unit-pill { display: inline-flex; border: 1px solid var(--nn-border); border-radius: 6px; overflow: hidden; }

.nn-wx-page-unit-btn {

    background: var(--nn-bg-elevated); border: none; border-right: 1px solid var(--nn-border);

    color: var(--nn-text-muted); font-size: 14px; font-weight: 700; padding: 7px 20px; cursor: pointer;

    transition: background 0.15s, color 0.15s;

}

.nn-wx-page-unit-btn:last-child { border-right: none; }

.nn-wx-page-unit-btn.active { background: var(--ds-accent); color: #fff; }



/* ── Current conditions hero ── */

.nn-wx-page-current {

    display: flex; flex-direction: column; align-items: center;

    padding: 40px var(--nn-gutter) 28px; text-align: center; gap: 8px;

}

.nn-wx-page-icon { width: 96px; height: 96px; background-size: contain; background-repeat: no-repeat; background-position: center; }

.nn-wx-page-temp { font-size: 88px; font-weight: 800; line-height: 1; color: var(--nn-text); font-family: var(--nn-font-display); letter-spacing: -3px; }

.nn-wx-page-cond  { font-size: 22px; color: var(--nn-text-muted); }

.nn-wx-page-feels { font-size: 14px; color: var(--nn-text-muted); }



/* ── Stats grid ── */

.nn-wx-page-stats {

    display: grid; grid-template-columns: repeat(8,1fr);

    gap: 1px; background: var(--nn-border);

    border-top: 1px solid var(--nn-border); border-bottom: 1px solid var(--nn-border);

    margin-bottom: 24px;

}

@media(max-width:900px) { .nn-wx-page-stats { grid-template-columns: repeat(4,1fr); } }

@media(max-width:500px) { .nn-wx-page-stats { grid-template-columns: repeat(2,1fr); } }

.nn-wx-page-stat {

    display: flex; flex-direction: column; gap: 4px;

    padding: 16px 20px; background: var(--nn-bg-card);

}

.nn-wx-page-stat-label {

    font-size: 10px; font-weight: 700; text-transform: uppercase;

    letter-spacing: 0.06em; color: var(--nn-text-muted);

}

.nn-wx-page-stat div:last-child { font-size: 17px; font-weight: 600; color: var(--nn-text); }



/* ── Wind compass stat ── */

.nn-wx-stat-wind .nn-wx-wind-row  { display: flex; align-items: center; gap: 8px; }

.nn-wx-stat-wind .nn-wx-wind-row span { font-size: 15px; font-weight: 600; color: var(--nn-text); }

.nn-wx-compass { flex-shrink: 0; }



/* ── AQI ── */

.nn-wx-page-aqi {

    display: flex; align-items: center; gap: 16px;

    padding: 14px var(--nn-gutter); margin-bottom: 24px;

    border-left: 4px solid var(--nn-border);

}

.nn-wx-page-aqi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nn-text-muted); }

.nn-wx-page-aqi-value { font-size: 16px; font-weight: 700; color: var(--nn-text); }

.nn-wx-page-aqi-pm    { font-size: 12px; color: var(--nn-text-muted); margin-left: auto; }

.nn-wx-page-aqi.aqi-good      { border-left-color:#22c55e; background:rgba(34,197,94,0.08); }

.nn-wx-page-aqi.aqi-good      .nn-wx-page-aqi-value { color:#16a34a; }

[data-theme="dark"] .nn-wx-page-aqi.aqi-good .nn-wx-page-aqi-value { color:#4ade80; }

.nn-wx-page-aqi.aqi-moderate  { border-left-color:#eab308; background:rgba(234,179,8,0.08); }

.nn-wx-page-aqi.aqi-moderate  .nn-wx-page-aqi-value { color:#ca8a04; }

.nn-wx-page-aqi.aqi-usg       { border-left-color:#f97316; background:rgba(249,115,22,0.08); }

.nn-wx-page-aqi.aqi-usg       .nn-wx-page-aqi-value { color:#ea6c00; }

.nn-wx-page-aqi.aqi-unhealthy { border-left-color:#ef4444; background:rgba(239,68,68,0.08); }

.nn-wx-page-aqi.aqi-unhealthy .nn-wx-page-aqi-value { color:#dc2626; }



/* ── Section titles ── */

.nn-wx-page-section-title {

    font-size: 11px; font-weight: 700; text-transform: uppercase;

    letter-spacing: 0.08em; color: var(--nn-text-muted);

    padding: 0 var(--nn-gutter) 12px;

}



/* ── Sunrise / Moon row ── */

.nn-wx-sun-moon-row {

    display: flex; align-items: flex-start; gap: 24px;

    padding: 0 var(--nn-gutter) 32px;

    flex-wrap: wrap;

}

.nn-wx-sun-block { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }

.nn-wx-sun-arc   { width: 100%; max-width: 340px; height: auto; display: block; }

.nn-wx-sun-labels { display: flex; gap: 24px; flex-wrap: wrap; }

.nn-wx-sun-item  { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nn-text-muted); }

.nn-wx-moon-block { display: flex; align-items: center; gap: 14px; flex-shrink: 0; background: var(--nn-bg-card); border: 1px solid var(--nn-border); border-radius: 12px; padding: 14px 20px; }

.nn-wx-moon-svg   { flex-shrink: 0; }

.nn-wx-moon-name  { font-size: 14px; font-weight: 700; color: var(--nn-text); }

.nn-wx-moon-illum { font-size: 12px; color: var(--nn-text-muted); margin-top: 3px; }



/* ── Radar ── */

.nn-wx-radar-wrap {

    position: relative; margin: 0 var(--nn-gutter) 32px;

    border-radius: 12px; overflow: hidden;

    border: 1px solid var(--nn-border);

}

#nn-wx-radar-map { width: 100%; height: 360px; }

@media(max-width:600px) { #nn-wx-radar-map { height: 240px; } }

.nn-wx-radar-ctrl {

    position: absolute; bottom: 10px; left: 10px; z-index: 500;

    display: flex; align-items: center; gap: 10px;

}

.nn-wx-radar-btn {

    display: flex; align-items: center; gap: 6px;

    background: rgba(0,0,0,0.7); color: #fff; border: none;

    border-radius: 6px; padding: 7px 14px; font-size: 13px;

    font-weight: 600; cursor: pointer;

}

.nn-wx-radar-ts { font-size: 12px; color: #fff; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 4px; }



/* ── Hourly grid ── */

.nn-wx-page-hourly-grid {

    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr));

    gap: 10px; padding: 0 var(--nn-gutter) 28px;

}

.nn-wx-hourly-loading { color: var(--nn-text-muted); font-size: 13px; padding: 20px 0; }

.nn-wx-page-hour-card {

    display: flex; flex-direction: column; align-items: center; gap: 8px;

    padding: 16px 12px; background: var(--nn-bg-card);

    border: 1px solid var(--nn-border); border-radius: 10px; text-align: center;

}

.nn-wx-page-hour-card .nn-wx-page-hour-time { font-size: 12px; font-weight: 600; color: var(--nn-text-muted); }

.nn-wx-page-hour-card .nn-wx-page-hour-icon { width: 36px; height: 36px; background-size: contain; background-repeat: no-repeat; background-position: center; }

.nn-wx-page-hour-card .nn-wx-page-hour-temp { font-size: 20px; font-weight: 700; color: var(--nn-text); }

.nn-wx-page-hour-card .nn-wx-page-hour-rain { font-size: 11px; color: #60a5fa; min-height: 16px; }



/* ── 3-Day forecast ── */

.nn-wx-page-forecast {

    display: grid; grid-template-columns: repeat(3,1fr);

    gap: 12px; padding: 0 var(--nn-gutter) 32px;

}

@media(max-width:500px) { .nn-wx-page-forecast { grid-template-columns: 1fr; } }

.nn-wx-page-fc-day {

    display: flex; flex-direction: column; align-items: center; gap: 6px;

    padding: 20px 12px; background: var(--nn-bg-card);

    border: 1px solid var(--nn-border); border-radius: 12px; text-align: center;

}

.nn-wx-page-fc-name  { font-size: 15px; font-weight: 700; color: var(--nn-text); }

.nn-wx-page-fc-full  { font-size: 10px; color: var(--nn-text-muted); }

.nn-wx-page-fc-icon  { width: 48px; height: 48px; background-size: contain; background-repeat: no-repeat; background-position: center; }

.nn-wx-page-fc-cond  { font-size: 12px; color: var(--nn-text-muted); line-height: 1.3; }

.nn-wx-page-fc-temps { display: flex; gap: 10px; align-items: baseline; }

.nn-wx-page-fc-temps .hi { font-size: 18px; font-weight: 700; color: var(--nn-text); }

.nn-wx-page-fc-temps .lo { font-size: 15px; color: var(--nn-text-muted); }

.nn-wx-page-fc-rain  { font-size: 11px; color: #60a5fa; }

.nn-wx-page-fc-sun   { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--nn-text-muted); }



/* ── Tide table ── */

.nn-wx-tide-grid {

    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));

    gap: 10px; padding: 0 var(--nn-gutter) 32px;

}

.nn-wx-tide-row {

    display: flex; align-items: center; gap: 10px;

    padding: 14px 16px; border-radius: 10px;

    border: 1px solid var(--nn-border); background: var(--nn-bg-card);

}

.nn-wx-tide-high .nn-wx-tide-icon { color: #3b82f6; }

.nn-wx-tide-low  .nn-wx-tide-icon { color: #94a3b8; }

.nn-wx-tide-high { border-left: 3px solid #3b82f6; }

.nn-wx-tide-low  { border-left: 3px solid #94a3b8; }

.nn-wx-tide-type   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nn-text-muted); width: 28px; }

.nn-wx-tide-time   { font-size: 15px; font-weight: 600; color: var(--nn-text); flex: 1; }

.nn-wx-tide-height { font-size: 14px; font-weight: 700; color: var(--nn-text); }



/* ── Weather news panel ── */

.nn-wx-news-panel { padding: 0 var(--nn-gutter) 48px; }

.nn-wx-news-list  { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }

.nn-wx-news-item  {

    display: flex; align-items: center; gap: 14px;

    padding: 14px 16px; background: var(--nn-bg-card);

    border: 1px solid var(--nn-border); border-radius: 10px;

    text-decoration: none; color: var(--nn-text);

    transition: background 0.15s;

}

.nn-wx-news-item:hover { background: var(--nn-bg-elevated); }

.nn-wx-news-thumb {

    width: 64px; height: 48px; border-radius: 6px; flex-shrink: 0;

    background-size: cover; background-position: center; background-color: var(--nn-border);

}

.nn-wx-news-hl   { font-size: 14px; font-weight: 600; color: var(--nn-text); line-height: 1.35; }

.nn-wx-news-meta { font-size: 11px; color: var(--nn-text-muted); margin-top: 3px; }

.nn-wx-news-more { font-size: 13px; font-weight: 600; color: var(--ds-accent); text-decoration: none; display: inline-block; padding: 6px 0; }

.nn-wx-news-more:hover { text-decoration: underline; }



/* ── Error ── */

.nn-wx-page-error { padding: 60px var(--nn-gutter); text-align: center; color: var(--nn-text-muted); }



/* ── Weather icons (CSS data URIs — R19 permitted) ── */

.nn-wx-icon-sunny        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23f59e0b'/%3E%3Cg stroke='%23f59e0b' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='4.22' y1='4.22' x2='6.34' y2='6.34'/%3E%3Cline x1='17.66' y1='17.66' x2='19.78' y2='19.78'/%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='6.34' y2='17.66'/%3E%3Cline x1='17.66' y1='6.34' x2='19.78' y2='4.22'/%3E%3C/g%3E%3C/svg%3E"); }

.nn-wx-icon-night-clear  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%2394a3b8'/%3E%3C/svg%3E"); }

.nn-wx-icon-partly-cloudy{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='10' r='4' fill='%23f59e0b'/%3E%3Cpath d='M18.5 13.5a5 5 0 0 0-9.9-.8A3.5 3.5 0 1 0 9 20h9a4 4 0 0 0 .5-7.5z' fill='%2394a3b8'/%3E%3C/svg%3E"); }

.nn-wx-icon-night-partly { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12a5 5 0 0 1-8.54 3.54A5 5 0 0 1 14 4.06 7 7 0 1 0 17 12z' fill='%2394a3b8'/%3E%3Cpath d='M18.5 15.5a5 5 0 0 0-9.9-.8A3.5 3.5 0 1 0 9 22h9a4 4 0 0 0 .5-6.5z' fill='%23cbd5e1'/%3E%3C/svg%3E"); }

.nn-wx-icon-cloudy       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z' fill='%2394a3b8'/%3E%3C/svg%3E"); }

.nn-wx-icon-fog          { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z' fill='%23d1d5db'/%3E%3Cg stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='3' y1='20' x2='21' y2='20'/%3E%3Cline x1='5' y1='23' x2='19' y2='23'/%3E%3C/g%3E%3C/svg%3E"); }

.nn-wx-icon-rain         { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 9.5A6 6 0 0 0 8 9.5a4 4 0 1 0 0 8h12a4 4 0 0 0 0-8z' fill='%2394a3b8'/%3E%3Cg stroke='%2360a5fa' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='8' y1='20' x2='7' y2='23'/%3E%3Cline x1='12' y1='20' x2='11' y2='23'/%3E%3Cline x1='16' y1='20' x2='15' y2='23'/%3E%3C/g%3E%3C/svg%3E"); }

.nn-wx-icon-snow         { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 9.5A6 6 0 0 0 8 9.5a4 4 0 1 0 0 8h12a4 4 0 0 0 0-8z' fill='%2394a3b8'/%3E%3Cg stroke='%23bfdbfe' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='8' y1='21' x2='8' y2='24'/%3E%3Cline x1='7' y1='22.5' x2='9' y2='22.5'/%3E%3Cline x1='12' y1='21' x2='12' y2='24'/%3E%3Cline x1='11' y1='22.5' x2='13' y2='22.5'/%3E%3Cline x1='16' y1='21' x2='16' y2='24'/%3E%3Cline x1='15' y1='22.5' x2='17' y2='22.5'/%3E%3C/g%3E%3C/svg%3E"); }

.nn-wx-icon-storm        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 9A6 6 0 0 0 8 9a4 4 0 1 0 0 8h12a4 4 0 0 0 0-8z' fill='%2364748b'/%3E%3Cpolyline points='13,13 11,17 14,17 12,21' stroke='%23fbbf24' stroke-width='1.5' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }

.nn-wx-icon-blizzard     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 9.5A6 6 0 0 0 8 9.5a4 4 0 1 0 0 8h12a4 4 0 0 0 0-8z' fill='%2364748b'/%3E%3Cg stroke='%23bfdbfe' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='8' y1='21' x2='8' y2='24'/%3E%3Cline x1='7' y1='22.5' x2='9' y2='22.5'/%3E%3Cline x1='12' y1='21' x2='12' y2='24'/%3E%3Cline x1='11' y1='22.5' x2='13' y2='22.5'/%3E%3Cline x1='16' y1='21' x2='16' y2='24'/%3E%3Cline x1='15' y1='22.5' x2='17' y2='22.5'/%3E%3C/g%3E%3C/svg%3E"); }




/* ── v4 layout fixes ── */



/* Sunrise arc — constrain size */

.nn-wx-sun-moon-row {

    padding: 0 var(--nn-gutter) 28px;

    align-items: center;

}

.nn-wx-sun-block {

    flex: 1 1 220px;

    max-width: 340px;

}

.nn-wx-sun-arc {

    width: 100%;

    max-width: 300px;

    height: 120px;

    display: block;

}



/* Tide rows — force horizontal flex */

.nn-wx-tide-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding: 0 var(--nn-gutter) 32px;

}

.nn-wx-tide-row {

    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    border-radius: 10px;

    border: 1px solid var(--nn-border);

    background: var(--nn-bg-card);

    min-width: 200px;

    flex: 1 1 200px;

}

.nn-wx-tide-high { border-left: 3px solid #3b82f6 !important; }

.nn-wx-tide-low  { border-left: 3px solid #94a3b8 !important; }

.nn-wx-tide-high .nn-wx-tide-icon { color: #3b82f6; }

.nn-wx-tide-low  .nn-wx-tide-icon { color: #94a3b8; }

.nn-wx-tide-type   { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--nn-text-muted); width: 30px; flex-shrink: 0; }

.nn-wx-tide-time   { font-size: 15px; font-weight: 600; color: var(--nn-text); flex: 1; }

.nn-wx-tide-height { font-size: 14px; font-weight: 700; color: var(--nn-text); flex-shrink: 0; }



/* Weather news cards — visible styling */

.nn-wx-news-panel { padding: 0 var(--nn-gutter) 48px; }

.nn-wx-news-list  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.nn-wx-news-item {

    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    background: var(--nn-bg-card) !important;

    border: 1px solid var(--nn-border) !important;

    border-radius: 10px;

    text-decoration: none;

    color: var(--nn-text);

    transition: background 0.15s;

}

.nn-wx-news-item:hover { background: var(--nn-bg-elevated) !important; }

.nn-wx-news-thumb {

    width: 72px;

    height: 52px;

    border-radius: 6px;

    flex-shrink: 0;

    background-size: cover;

    background-position: center;

    background-color: var(--nn-border);

}

.nn-wx-news-body  { flex: 1; min-width: 0; }

.nn-wx-news-hl    { font-size: 14px; font-weight: 600; color: var(--nn-text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nn-wx-news-meta  { font-size: 11px; color: var(--nn-text-muted); margin-top: 4px; }

.nn-wx-news-more  { font-size: 13px; font-weight: 600; color: var(--ds-accent); text-decoration: none; display: inline-block; padding: 6px 0; }




/* tide + news card force */

.nn-wx-tide-grid { display:flex; flex-wrap:wrap; gap:10px; padding:0 var(--nn-gutter) 32px; }

.nn-wx-tide-row { display:flex; flex-direction:row; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; border:1px solid var(--nn-border); background:var(--nn-bg-card); min-width:180px; flex:1 1 180px; }

.nn-wx-news-item { display:flex; flex-direction:row; align-items:center; gap:14px; padding:14px 16px; background:var(--nn-bg-card); border:1px solid var(--nn-border); border-radius:10px; text-decoration:none; color:var(--nn-text); margin-bottom:8px; }




/* Leaflet z-index fix — must not exceed sticky header */

.leaflet-top, .leaflet-bottom { z-index: 400 !important; }

.leaflet-pane { z-index: 200 !important; }

.leaflet-tile-pane { z-index: 200 !important; }

.nn-wx-radar-wrap { z-index: 1 !important; position: relative; }




/* ── Weather tabs ── */

.nn-wx-tabs {

    display: flex; gap: 0; border-bottom: 2px solid var(--nn-border);

    padding: 0 var(--nn-gutter); background: var(--nn-bg);

    overflow-x: auto;

    scrollbar-width: none;

}

.nn-wx-tabs::-webkit-scrollbar { display: none; }

.nn-wx-tab {

    background: none; border: none; border-bottom: 3px solid transparent;

    margin-bottom: -2px; padding: 12px 18px; font-size: 13px; font-weight: 600;

    color: var(--nn-text-muted); cursor: pointer; white-space: nowrap;

    transition: color 0.15s, border-color 0.15s;

}

.nn-wx-tab:hover { color: var(--nn-text); }

.nn-wx-tab.active { color: var(--ds-accent); border-bottom-color: var(--ds-accent); }

.nn-wx-tab-panel { display: none; }

.nn-wx-tab-panel.active { display: block; }



/* ── Radar full panel ── */

.nn-wx-radar-fullwrap {

    position: relative; margin: 20px var(--nn-gutter) 32px;

    border-radius: 12px; overflow: hidden;

    border: 1px solid var(--nn-border); z-index: 1;

}

#nn-wx-radar-map { width: 100%; height: 560px; }

@media(max-width:600px) { #nn-wx-radar-map { height: 360px; } }




/* ── Expanded hourly cards ── */

.nn-wx-page-hourly-grid {

    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;

    gap: 8px !important;

}

.nn-wx-page-hour-card {

    padding: 14px 10px !important;

    gap: 6px !important;

}

.nn-wx-page-hour-card .nn-wx-page-hour-icon { width: 40px !important; height: 40px !important; }

.nn-wx-page-hour-card .nn-wx-page-hour-temp { font-size: 22px !important; font-weight: 800 !important; }

.nn-wx-page-hour-feels { font-size: 10px; color: var(--nn-text-muted); margin-top: -2px; }

.nn-wx-page-hour-divider { width: 100%; height: 1px; background: var(--nn-border); margin: 4px 0; }

.nn-wx-page-hour-stats { display: flex; flex-direction: column; gap: 4px; width: 100%; }

.nn-wx-page-hour-stat {

    display: flex; align-items: center; gap: 4px;

    font-size: 11px; font-weight: 600; color: var(--nn-text-muted);

}

.nn-wx-page-hour-stat svg { flex-shrink: 0; color: var(--nn-text-muted); }

.nn-wx-hour-rain-stat { color: #60a5fa !important; }

.nn-wx-hour-rain-stat svg { color: #60a5fa !important; }