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



/* ── 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: sticky;

    top: 0;

    z-index: 10;

}

.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; }





    display: inline-flex;

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

    border-radius: 6px;

    overflow: hidden;

}


    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;

}







/* ── Alert ── */

.nn-wx-page-alert {

    background: rgba(239,68,68,0.1);

    border-left: 4px solid #ef4444;

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

    font-size: 13px;

    color: var(--nn-text);

}



/* ── Current conditions ── */

.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);

}



/* ── 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 title ── */

.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;

}



/* ── Hourly ── */

.nn-wx-page-hourly {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    overflow-y: hidden;

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

    scrollbar-width: thin;

    scrollbar-color: var(--nn-border) transparent;

}

.nn-wx-page-hourly::-webkit-scrollbar { height: 4px; }

.nn-wx-page-hourly::-webkit-scrollbar-thumb { background: var(--nn-border); border-radius: 2px; }

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

.nn-wx-page-hour {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    padding: 14px 16px;

    min-width: 80px;

    flex-shrink: 0;

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

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

    border-radius: 10px;

}

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

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

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

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



/* ── 7-day forecast ── */

.nn-wx-page-forecast {

    display: grid;

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

    gap: 10px;

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

}

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

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

.nn-wx-page-fc-day {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding: 16px 8px;

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

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

    border-radius: 10px;

    text-align: center;

}

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

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

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

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

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

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

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

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

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



/* ── 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"); }




/* ── Hourly grid (replaces scroll) ── */

.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-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; }




/* ── Topbar sticky fix ── */

.nn-wx-page-topbar {

    position: sticky;

    top: 0;

    z-index: 100;

    background: var(--nn-bg);

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

}






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

    color: var(--nn-text);

    border: none;

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

    font-size: 14px;

    font-weight: 700;

    padding: 7px 20px;

    cursor: pointer;

}


















    color: var(--nn-text) !important;

}



















/* Unit pill */

.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:#555; font-size:14px; font-weight:700; padding:7px 20px; cursor:pointer; }

[data-theme="dark"] .nn-wx-page-unit-btn { color:#aaa; }

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

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