:root{
  --bg0:#0b1220;
  --bg1:#111827;

  --card: rgba(15,23,42,.72);
  --stroke: rgba(255,255,255,.10);

  --ink:#f3f4f6;
  --muted: rgba(243,244,246,.72);

  --brand-teal:#2f4a49;
  --brand-orange:#d97706;

  --radius:22px;

  /* tap target / spacing */
  --tap: 42px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(217,119,6,.18), transparent 55%),
    radial-gradient(900px 650px at 12% 20%, rgba(47,74,73,.22), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color:var(--ink); text-decoration:none; }
a:hover{ text-decoration:underline; }

.app{
  min-height:100vh;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ---------- Topbar ---------- */

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;

  padding: 10px 14px 12px;

  backdrop-filter: blur(12px);
  background: rgba(11,18,32,.65);
  border-bottom: 1px solid rgba(255,255,255,.06);

  overflow: hidden;
}

.topbarInner{
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.brandLogo{
  height: 42px;
  width: auto;
  max-width: 180px; /* optional cap */
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

/* form is a flex row: [field] [actions] */
.search{
  flex: 1 1 auto;
  min-width: 0;              /* CRITICAL */
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;                 /* override any old centering */
  flex-wrap: nowrap;
}

/* field grows/shrinks, actions stay fixed */
.searchField{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;

  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 8px 6px 16px; /* more space left, tighter right */
}

.searchField input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}

.searchSubmit{
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  transition: background .15s ease;
}

.searchSubmit:hover{
  background: rgba(255,255,255,.10);
}

.searchSubmit i{
  font-size: 1.1rem;
  opacity: .85;
}

.actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

@media (max-width: 640px){

  /* DO NOT wrap the top container */
  .topbarInner{
    flex-wrap: nowrap;
	align-items: flex-start; /* top-align logo with the first row (search field) */
  }

  /* shrink logo slightly */
  .brandLogo{
    max-width: 130px;
align-self: flex-start;
    margin-top: 2px; /* tweak 0–4px if you want */
  }

  /* allow search internals to wrap */
  .search{
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;   /* THIS is where wrapping should happen */
  }

  /* search field stays on first row */
  .searchField{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* actions move to second row */
  .actions{
    flex-basis: 100%;
    justify-content: center; /* or flex-end */
    margin-top: 8px;
  }

	/* make the icon itself a touch larger */
	#wxIcon{
	  font-size: 3rem;
	}


}

/* ---- MAIN AREA ---- */

.iconBtn, .pillBtn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border-radius: 999px;
  height: var(--tap);
  padding: 0 14px;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
  font-family:inherit;
  font-weight:800;
}

.iconBtn{
  width: 46px;
  padding:0;
  display:grid;
  place-items:center;
  font-size: 1.2rem;
}

.iconBtn:hover, .pillBtn:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.pillBtn #unitLabel{
  background: linear-gradient(135deg, rgba(217,119,6,1), rgba(217,119,6,.75));
  color:#0b1220;
  padding: 6px 10px;
  border-radius: 999px;
  display:inline-block;
}

/* Accessible focus (keyboard) */
.iconBtn:focus-visible,
.pillBtn:focus-visible,
.seg:focus-visible,
.searchField input:focus-visible{
  outline: 2px solid rgba(217,119,6,.85);
  outline-offset: 2px;
}

.content{
  max-width: 820px;
  margin: 16px auto 28px;
  padding: 0 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.metaRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.meta{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: .95rem;
  text-align: left;
}

.locationIcon{
  font-size: 1rem;
  opacity: .75;
}

.updatedLine{
  margin-top: 10px;
  text-align: center;
  color: rgba(243,244,246,.60);
  font-weight: 800;
  font-size: .9rem;
}

.resultPanel{
  border-radius: calc(var(--radius) + 6px);
  padding: 16px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.resultPanel.neutral{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(148,163,184,.18), transparent 60%),
    rgba(255,255,255,.03);
}

.resultPanel.yes{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(37,99,235,.30), transparent 60%),
    rgba(255,255,255,.03);
}

.resultPanel.no{
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(22,163,74,.30), transparent 60%),
    rgba(255,255,255,.03);
}

.answerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.answer{
  font-size: clamp(56px, 10vw, 92px);
  line-height: .92;
  letter-spacing: -0.03em;
  font-weight: 900;
  margin: 4px 0 6px;
}

.wxIconWrap{
  width: 86px;
  height: 86px;
  border-radius: 24px;

  border: none;
  background: transparent;

  display: grid;
  place-items: center;

  font-size: 3.1rem;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.40));
  opacity: 1;
}

/* make the icon itself a touch larger */
#wxIcon{
  font-size: 5rem;
}

@media (max-width: 640px){
	#wxIcon{ font-size: 3rem; }
}

.tempLine{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 8px;
  margin: 10px 0 6px;
  line-height: 1; /* important: stabilizes line boxes */
}

.temp,
.condition{
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;         /* important */
  display: inline-block;  /* keeps line box predictable */
}

.unit {
  color: #eee;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;         /* important */
  display: inline-block;  /* keeps line box predictable */

}

.temp{
  font-variant-numeric: lining-nums tabular-nums;
  /* or: font-feature-settings: "lnum" 1, "tnum" 1; */
}
.tempLine{ align-items:flex-end; }

.tempSep{
  align-self: center;   /* overrides flex-end */
  line-height: 1;
  opacity: .6;
}

.summary{
  color: var(--muted);
  font-weight: 700;
  margin-top: 6px;
  text-align:center;
}

.reason{
  margin-top: 4px;
  margin-bottom: 10px;
  color: rgba(243,244,246,.90);
  font-weight: 500;

  text-align: left;

  width: 100%;          /* ← important */
  align-self: stretch;  /* ← critical for flexbox */

  max-width: 600px;
  line-height: 1.4;
}

.chips{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:center;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(243,244,246,.88);
  font-weight: 800;
  font-size: .9rem;
}

.chip i{ opacity:.9; }

.windRow{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

/*
.windChip{
  gap: 10px;
  padding: 10px 12px;
  font-size: .95rem;
}

.windChip i{
  font-size: 1.05rem;
  opacity: 1;
  transform-origin: 50% 50%;
}
*/
.tempSep{
  opacity: .65;
  font-weight: 900;
  margin: 0 6px;
}

.segmented{
  display:flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap:wrap;
}

.seg{
  flex: 1 1 120px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
  font-family: inherit;
}
.seg:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.seg.active{
  background: linear-gradient(135deg, rgba(217,119,6,1), rgba(217,119,6,.75));
  border-color: rgba(217,119,6,.45);
  color: #0b1220;
}

.tabs{ margin-top: 10px; }
.tab{ display:none; }
.tab.active{ display:block; }

.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align:left;
  font-weight:700;
}
.table th{
  color: rgba(243,244,246,.85);
  background: rgba(255,255,255,.05);
}
.table td{
  color: rgba(243,244,246,.80);
}

.error{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}



/* ------------- TOMORROW BLOCK ----------- */
/* Tomorrow tab card */
#tab-tomorrow{
  display:flex;
  justify-content:center; /* center the card */
}
.tomorrowCard{
  width: 100%;
  max-width: 520px; /* same “readable” width as main */
}
.tomorrowCard{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
}

.tomorrowTop{
  display:flex;
  align-items:center;
  gap: 14px;
}

.tomorrowIcon{
  font-size: 42px; /* similar presence to main icon */
  line-height: 1;
  opacity: .95;
}

.tomorrowMain{
  min-width: 0;
  flex: 1;
}

.tomorrowTemps{
  display:flex;
  align-items: baseline;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-weight: 900;
}

.tomorrowLow,
.tomorrowHigh{
  font-size: 1.15rem;
}

.tomorrowCond{
  margin-top: 6px;
  font-weight: 800;
  color: rgba(243,244,246,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tomorrowExtras{
  margin-top: 8px;
  font-weight: 800;
  color: rgba(243,244,246,.65);
  font-size: .92rem;
}