:root{
  /* Palette */
  --slate:#264653; --teal:#069494; --sand:#e9c46a; --orange:#f4a261; --clay:#e76f51;
  /* light */
  --bg:#ffffff; --ink:#1d2a32; --muted:#5c6c73; --border:#e6ecef; --accent:var(--teal); --danger:var(--clay);
  --rad:12px;
}
[data-theme="dark"]{
  --bg:#14232a; --ink:#e7f3f1; --muted:#b7c8c6; --border:#25424c; --accent:#7fd6cb; --danger:#f18a74;
}



*{box-sizing:border-box}
html,body{overflow-x:hidden;margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{min-height:95vh;display:flex;flex-direction:column}
.wrap{min-width:80vw; max-width:80vw;margin:0 auto;min-height:95vh;padding:20px;flex:1;display:flex;flex-direction:column}
@media (max-width: 640px){
  .wrap{ max-width:100vw; }
}

/* Top nav */
nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--orange))}
.brand h1{font-size:18px;margin:0}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
input,button{border:1px solid var(--border);background:transparent;color:var(--ink);padding:8px 10px;border-radius:var(--rad);cursor:pointer}
button:hover {background:var(--border)}
input::placeholder{color:var(--muted)}
input {cursor: text;}
.pill{border-radius:999px}
.primary{background:var(--bg);color:var(--teal);border-color:var(--muted);font-weight:800;cursor:pointer}
.tabs{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tab{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:transparent;font-weight:800;font-size:13px;cursor:pointer}
nav a:hover {background:var(--border)}
nav a {color: var(--ink); text-decoration:none; font-weight:400;}
.tab.active{border-color:var(--accent);color:var(--accent)}

  header .row { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0; }
  header .pill { flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px; border-color: var(--muted); justify-content:center; min-width:120px; }
  #loadingMsg { text-align:center; font-weight:900; margin:20px 0; display:none; }

.underline {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23069494' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 2px;
  background-repeat: repeat-x;
  text-decoration: none; } 

@keyframes spin { to { transform: rotate(360deg); } }
#refreshBtn.spinning { animation: spin .7s linear;  will-change: transform;}
@media (prefers-reduced-motion: reduce){#refreshBtn.spinning { animation: none; }}

/* Sections */
section{display:none}
section.active{display:block}
.divider{height:1px;background:var(--border);margin:14px 0}
h3{font-size: 22px;margin:0 0 6px 0;text-align:center}

/* Current hero */
.hero{position:relative;display:grid;place-items:center;min-height:calc(85vh - 50px);text-align:center}
@media (max-width: 640px){
  .hero{ min-height:calc(85vh - 200px) }
}
#heroTempRainChart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35;z-index:0}
#heroTint{position:absolute;inset:0;z-index:0;pointer-events:none;background:transparent;background: var(--fun-sunny);
  mix-blend-mode: multiply;
  opacity: .65;
  transition: opacity .5s ease;}
.hero > *:not(canvas):not(#heroTint){position:relative;z-index:1}
.hero .bigtemp,.hero .loc,.hero .summary,.hero .feels{text-shadow:0 1px 3px rgba(0,0,0,.05)}
.loc{font-weight:900;color:var(--accent);margin-bottom:6px}
.bigtemp{font-size:min(21vw,220px);font-weight:1000;letter-spacing:-.5px;line-height:.9}
.iconNow svg{width:min(18vw,160px);height:min(18vw,160px)}
.summary{font-weight:900;margin-top:8px}
.feels{color:var(--muted);font-weight:800;margin-top:4px}

/* Alert */
.alert{display:none;margin-top:12px;border:1px solid var(--danger);color:var(--danger);padding:10px 12px;border-radius:var(--rad);font-weight:900;text-align:center;}
.alert a{color:var(--danger)}

/* Wear */
.wear-head{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0;min-width:0;max-width:100%}
.wearitem{display:flex;flex:0 1 180px;gap:10px;align-items:center;border:1px solid var(--border);border-radius:var(--rad);padding:5px;font-weight:900;font-size:18px;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wear-lead{font-size:22px;font-weight:900;margin:10px 0}
.wear-sass{font-size:30px;font-weight:900;color:var(--clay);margin:6px 0}
.wear-story{font-size:16px;line-height:1.6;font-weight:700}
.wear-story p{margin:6px 0;overflow-wrap:anywhere}

/* Cards */
.wear-card{
  border:1px solid var(--border);
  border-radius:var(--rad);
  padding:12px;
  background:rgba(38,70,83,.02);
  background-clip:padding-box;
  text-align:center;
  min-width:0;                                   /* allow wrapping inside grid items */
}
.seven-grid > .wear-card,
.wear-grid-6 > .wear-card{ min-width:0; }       /* belt & braces */
.wear-card h4{ font-size:18px; font-weight:900; margin:0 0 8px; }
.wear-card-big{ padding-bottom:16px; }

/* Chips (merged) */
.wear-card .chips{
  display:flex;
  flex-wrap:wrap;                                /* wrap to multiple rows */
  gap:8px;
  justify-content:center;
  max-width:100%;
}

.wear-card.wear-card-big .row.head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:6px;
}
.wear-card .chip,
.wear-card-big .chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  white-space:normal;                             /* allow multi-line labels */
  overflow-wrap:anywhere;                         /* break long tokens if needed */
  word-break:break-word;                          /* fallback */
}

/* Optional: big today wrapper */
.wear-today{ text-align:center; background-clip:padding-box; }

/* Weekend 6-wide grid (responsive) */
.wear-grid-6{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(6,1fr);           /* true 6-wide */
}
@media (max-width:1200px){ .wear-grid-6{ grid-template-columns:repeat(3,2fr); } }
@media (max-width:1024px){ .wear-grid-6{ grid-template-columns:repeat(3,2fr); } }
@media (max-width:768px){  .wear-grid-6{ grid-template-columns:repeat(3,2fr); } }
@media (max-width:520px){  .wear-grid-6{ grid-template-columns:repeat(2,3fr); } }
@media (max-width:340px){  .wear-grid-6{ grid-template-columns:1fr; } }


/* Compact wear cards */
.wear-card.wear-compact{
  text-align:left;
  min-width:0; /* allow wrap inside grids */
}
.wear-card.wear-compact .row.head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:6px;
}
.wear-card.wear-compact .mini-icon svg{ width:22px; height:22px; }
.wear-card.wear-compact .temp{ font-weight:900; }

.wear-card.wear-compact .chips{
  display:flex; flex-wrap:wrap; gap:8px; max-width:100%;
}
.wear-card.wear-compact .chip{
  display:inline-flex; align-items:center;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800; font-size:13px;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

.wear-card.wear-compact .risks{
  display:flex; gap:12px; margin-top:6px;
  color:var(--muted); font-weight:800; font-size:12px;
}
.wear-card.wear-compact .risk{ opacity:.9; }

/* make "no outer layer" etc. look muted */
.wear-card .chip:has(> .none),
.wear-card .chip.is-none{
  opacity:.6;
  border-style:dashed;
}


/* Stack chips vertically like clothing layers */
.wear-card .chips--stack{
  display:flex;
  flex-direction:column;        /* stack */
  gap:6px;
  align-items:flex-start;       /* left-align labels; swap to center if you prefer */
  max-width:100%;
  justify-content:center;
  align-items:center;
}
.wear-card .chips--stack .chip{
  display:inline-flex;
  align-items:center;
  width:fit-content;            /* shrink to content */
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  justify-content:center;
  align-items:center;
}

/* Ensure cards can wrap content inside grid items */
.wear-card{ min-width:0; }
.seven-grid > .wear-card,
.wear-grid-6 > .wear-card{ min-width:0; }

/* Mobile: collapse wear grids to a single column */
@media (max-width: 640px){
  .seven-grid{ grid-template-columns: 1fr !important; }
  .wear-grid-6{ grid-template-columns: 1fr !important; }
}


/* Nerd mode */
.panel{border:1px dashed var(--border);border-radius:var(--rad);background:rgba(38,70,83,.02);margin-bottom:14px}
.panel h4{margin:0 0 8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:900;font-size:13px;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:5px}
.kv .box{border:1px solid var(--border);border-radius:10px;padding:10px;font-family:ui-monospace,monospace}
.kv .k{color:var(--muted);font-size:12px}
.kv .v{font-weight:900;font-size:11px}
.ka {font-size: 22px; padding-bottom:20px;}
.kv .a{font-size:18px; line-height: 2rem;}
.kv .a a{color:var(--ink);}
.kv .a .w {color:var(--danger);}

/* Today grid */
.today-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media (min-width:1200px){ .today-grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width:1024px){ .today-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:768px){ .today-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .today-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:340px){ .today-grid{grid-template-columns:1fr} }

.hour-card{border:1px solid var(--border);border-radius:var(--rad);padding:10px;background:rgba(38,70,83,.02);display:grid;gap:8px;background-clip:padding-box}
.hour-card .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hour-card .icon{font-size:22px}
.hour-card .temp{font-weight:800;font-size:20px}
.hour-card .sub{color:var(--muted);font-size:12px}
.hour-card.is-now{outline:2px solid var(--accent);outline-offset:2px}
.hour-card.is-past:not(.is-now){opacity:.35;filter:grayscale(.4);color:var(--muted)}
@media (max-width:800px){ .hour-card.is-past:not(.is-now){display:none} }

.today-note{margin-top:6px;font-size:12px;color:var(--muted)}

/* 7 day */
.seven-wrap{display:grid;gap:14px}
.seven-today{border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;background:rgba(38,70,83,.03);background-clip:padding-box}
.seven-today .icon{margin-bottom:8px}
.seven-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.seven-card{border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;background:rgba(38,70,83,.02);background-clip:padding-box}
.seven-card .icon{margin:6px 0}
.seven-name{font-weight:900}
.seven-sub{font-size:12px;color:var(--muted);font-weight:700}

/* Footer */
footer{position:sticky;bottom:0;background:var(--bg);margin-top:18px;color:var(--muted);font-size:12px;border-top:1px solid var(--border);padding:12px 0}
footer a{color:var(--muted);text-decoration:none;font-weight:900}
footer a:hover{color:var(--border)}
.footer-wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}