/* Cleaned main.css (deduplicated, visual 1:1). */
:root{
  --bottom-nav-height: 64px;
  --bg-main: #F5F9FF;
  --bg-card: #EEF2F8;
  --bg-card-alt: #DDE4F0;
  --text-primary: #2A2D33;
  --text-secondary: #4D5057;
  --accent-soft-blue: #7C92BF;
  --accent-deep-blue: #4A5F88;
  --highlight-yellow: #F7C96B;
  --highlight-light: #FFE8BF;
  --card-radius: 18px;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --icon-size: clamp(88px, 18vw, 128px);
}

*{box-sizing:border-box;margin:0;padding:0;}
p{margin:0;}
html,body{width:100%;overflow-x:hidden;background:var(--bg-main);}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-color:var(--bg-main);
  color:var(--text-primary);
  line-height:1.5;
  padding:20px;
  padding-bottom:calc(20px + var(--bottom-nav-height) + env(safe-area-inset-bottom));
}
h1{
  font-size:32px;
  font-weight:700;
  text-align:center;
  margin:10px auto 30px;
  color:var(--accent-deep-blue);
  max-width:540px;
}
@media (max-width:600px){
  body{
    padding:16px;
    padding-bottom:calc(16px + var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
  h1{font-size:26px;margin:10px auto 20px;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

.bottom-nav{position: fixed;
      left: 20px;
      right: 20px;
      width: auto;
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      bottom: 0;
      height: var(--bottom-nav-height);
      background: rgba(238, 242, 248, 0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(74, 95, 136, 0.18);
      border-radius: var(--card-radius);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      z-index: 9999;}
@media (max-width: 600px){
  .bottom-nav{left: 16px;
        right: 16px;}
}
.bottom-nav a{display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 16px;
      text-decoration: none;}
.bottom-nav a:focus-visible{outline: 3px solid rgba(74, 95, 136, 0.35);
      outline-offset: 2px;}
.bottom-nav img{width: 36px;
      height: 36px;
      object-fit: contain;
      display: block;}
.bottom-nav a.is-active{background: rgba(74, 95, 136, 0.12);}
.consent-banner{position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-height) + 14px + env(safe-area-inset-bottom));
  width: min(540px, calc(100% - 40px));
  background: var(--bg-card);
  border: 1px solid rgba(74, 95, 136, 0.18);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  z-index: 10000;}
.consent-banner p{margin: 0 0 10px 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;}
.consent-banner a{color: var(--accent-deep-blue);
  text-decoration: none;}
.consent-actions{display: flex;
  gap: 10px;
  flex-wrap: wrap;}
.btn{appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;}
.btn-primary{background: rgba(74, 95, 136, 0.18);
  color: var(--text-primary);}
.btn-ghost{background: transparent;
  border: 1px solid rgba(74, 95, 136, 0.18);
  color: var(--text-primary);}
.btn-danger{background: rgba(74, 95, 136, 0.10);
  color: var(--text-primary);
  border: 1px solid rgba(74, 95, 136, 0.18);}
.consent-backdrop{position: fixed;
  inset: 0;
  background: rgba(42, 45, 51, 0.35);
  z-index: 10001;
  display: none;}
.consent-modal{position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100% - 40px));
  background: var(--bg-main);
  border-radius: calc(var(--card-radius) + 6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  z-index: 10002;
  display: none;
  overflow: hidden;}
.consent-modal header{padding: 16px 16px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid rgba(74, 95, 136, 0.12);}
.consent-modal header h2{margin: 0;
  font-size: 16px;
  color: var(--text-primary);}
.consent-modal .body{padding: 14px 16px 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;}
.toggle-row{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(74, 95, 136, 0.12);
  border-radius: var(--card-radius);
  padding: 12px 12px;
  margin: 10px 0;}
.toggle-row .label{display: flex;
  flex-direction: column;
  gap: 2px;}
.toggle-row .label strong{color: var(--text-primary);
  font-size: 13px;}
.toggle-row .label span{font-size: 12px;}
.switch{position: relative;
  width: 46px;
  height: 28px;
  flex: 0 0 auto;}
.switch input{opacity: 0;
  width: 0;
  height: 0;}
.slider{position: absolute;
  inset: 0;
  background: rgba(74, 95, 136, 0.18);
  border-radius: 999px;
  transition: 160ms ease;}
.slider:before{content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: 160ms ease;}
.switch input:checked + .slider{background: rgba(74, 95, 136, 0.42);}
.switch input:checked + .slider:before{transform: translateX(18px);}
.consent-modal footer{padding: 12px 16px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;}
.container{max-width: 540px;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;}
.card{background-color: var(--bg-card);
      border-radius: var(--card-radius);
      padding: 24px;
      box-shadow: var(--shadow);}
.top-row{}
.top-row-grid{width: 100%;
      max-width: 720px;
      margin: 0 auto;

      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      column-gap: 50px; 
      row-gap: 10px;

      justify-content: center;
      justify-items: center;
      align-items: center;}
.weather-icon{width: var(--icon-size);
      height: var(--icon-size);
      object-fit: contain;
      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
      grid-column: 1;
      grid-row: 1;}
.description{grid-column: 1;
      grid-row: 2;
      width: var(--icon-size);
      max-width: var(--icon-size);
      text-align: center;
      font-size: 18px;
      line-height: 1.3;
      color: var(--text-secondary);
      word-wrap: break-word;}
.temp-wrapper{grid-column: 2;
      grid-row: 1;
      position: relative;
      display: flex;
      align-items: baseline;
      justify-content: center;
      
      font-size: clamp(52px, 10vw, 77px);
      font-weight: 700;
      color: var(--accent-deep-blue);}
.temp-unit{font-size: 0.48em;
      margin-left: 4px;
      line-height: 1;
      position: relative;
      top: -0.10em;
      color: var(--accent-deep-blue);
      font-weight: 700;}
.temp-value{font-size: calc(var(--icon-size) * 0.8075);
      line-height: 1;
      display: inline-block;}
.temp-wrapper .temp-unit{position: absolute;
      top: 0;
      right: 0;
      transform: translate(60%, -45%);
      font-size: 0.35em;
      line-height: 1;
      font-weight: 700;
      color: var(--accent-deep-blue);
      pointer-events: none;}
.units .unit{padding: 2px 6px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;}
.units .active{background-color: var(--accent-soft-blue);
      color: #fff;}
.units .inactive{background-color: var(--bg-card-alt);
      color: var(--accent-deep-blue);
      opacity: 0.5;}
.feels-like{grid-column: 2;
      grid-row: 2;
      margin-top: 0px;
      justify-self: start;
      text-align: left;
      font-size: 18px;
      color: var(--text-secondary);
    
      align-self: start;}
.precip{font-size: 18px;
      color: var(--accent-deep-blue);}
.times-of-day{display: flex;
      flex-direction: column;
      
      gap: clamp(12px, 2.4vw, 28px);}
.time-card{background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      padding: clamp(14px, 2vw, 18px);
      box-shadow: var(--shadow);

      
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      
      column-gap: clamp(14px, 4.2vw, 44px);}
.time-card img{width: clamp(40px, 4.5vw, 64px);
      height: clamp(40px, 4.5vw, 64px);
      filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.2));
      justify-self: center;}
.time-card .label{font-weight: 600;
      color: var(--accent-soft-blue);
      justify-self: start;}
.time-card .value{font-size: 20px;
      font-weight: 700;
      justify-self: end;
      text-align: right;
      color: var(--accent-deep-blue);}
.times-link{margin-top: 12px;
      text-align: right;}
.times-link a{color: var(--accent-soft-blue);
      text-decoration: none;
      font-weight: 600;}
.minmax, .sun-block, .wind-block{display: flex;
      flex-wrap: wrap;
      gap: 30px;}
.vhpdp .wind-block{display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px;}
.vhpdp .wind-block > div:nth-child(5){grid-column: 1 / -1;}
.minmax div, .sun-block div, .wind-block div{flex: 1 1 200px;
      background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      padding: 16px;
      box-shadow: var(--shadow);}
.minmax{flex-wrap: nowrap;}
.minmax > div{flex: 1 1 0; min-width: 0;}
.title{font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--accent-soft-blue);}
.value{font-size: 22px;
      font-weight: 700;
      color: var(--accent-deep-blue);}
a.button{display: inline-block;
      margin-top: 8px;
      padding: 8px 16px;
      border-radius: 8px;
      background-color: var(--highlight-light);
      color: var(--accent-deep-blue);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;}
a.button:hover{background-color: var(--highlight-yellow);}
@media (max-width: 600px){
  .card{padding: 16px;}
  .top-row-grid{max-width: 100%;
        row-gap: 8px;}
}
@media (max-width: 380px){
  .top-row-grid{column-gap: 32px;}
}
.intro{max-width: 540px;
      margin: -10px auto 10px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 16px;}
.last-updated-wrapper{max-width: 540px;
      margin: 0 auto 18px;
      text-align: center;}
.last-updated{color: var(--accent-soft-blue);
      font-size: 14px;}
.section-title{font-size: 18px;
      margin-bottom: 16px;
      color: var(--accent-deep-blue);
      font-weight: 700;}
.units .unit{border: 0;
      background: none;
      font: inherit;
      line-height: 1;}
.card{content-visibility: auto;
      contain-intrinsic-size: 1px 520px;}
.bottom-nav{position: fixed;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: min(540px, calc(100% - 40px));
      bottom: 0;
      height: var(--bottom-nav-height);
      background: rgba(238, 242, 248, 0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(74, 95, 136, 0.18);
      border-radius: var(--card-radius);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      z-index: 9999;
    
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      transform: none;}
.site-footer{padding: 0;}
.site-footer .card{margin-top: 0;}
.footer-links{display: flex;
      flex-wrap: wrap;
      gap: 10px 12px;}
.footer-links a{font-size: 12px;
      color: var(--accent-deep-blue);
      text-decoration: none;}
.footer-links a:hover{text-decoration: underline;}
.footer-note{margin: 10px 0 0;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.35;}
.more-forecasts .forecast-chips{display: flex;
      flex-wrap: wrap;
      gap: 10px;}
.more-forecasts .chip{display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      border-radius: 14px;
      background: var(--bg-card-alt);
      color: var(--accent-deep-blue);
      text-decoration: none;
      font-weight: 600;
      font-size: 13px;
      box-shadow: var(--shadow);}
.more-forecasts .chip:hover{background: var(--highlight-light);}
.more-forecasts .chip.is-active{background: rgba(74, 95, 136, 0.12);
      color: var(--text-primary);}
.more-forecasts .chip.chip-primary{background: var(--highlight-light);}
.more-forecasts .chip.chip-primary:hover{background: var(--highlight-yellow);}
.temp-wrapper .units{display: flex;
      flex-direction: column;
      position: absolute;
      top: calc(-1 * clamp(6px, 1.6vw, 10px));
      right: calc(-1 * clamp(34px, 6vw, 56px));
      font-size: clamp(14px, 3.2vw, 18px);}
.bottom-nav{position: fixed;
      left: 50%;
      transform: translateX(-50%);
      width: min(540px, calc(100% - 40px));

      bottom: 0;
      height: var(--bottom-nav-height);
      background: rgba(238, 242, 248, 0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(74, 95, 136, 0.18);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      z-index: 9999;
    
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      transform: none;}
.hourly-list{display: flex;
      flex-direction: column;
      gap: clamp(12px, 2.4vw, 22px);}
details.hour-item{background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow);
      overflow: hidden;}
details.hour-item > summary{list-style: none;}
details.hour-item > summary::-webkit-details-marker{display: none;}
summary.hour-summary{cursor: pointer;
      padding: clamp(14px, 2vw, 18px);
      display: grid;
      grid-template-columns: 1fr auto 1fr; 
      align-items: center;
      column-gap: clamp(14px, 4.2vw, 44px);
      user-select: none;}
summary.hour-summary:hover{background: rgba(255, 255, 255, 0.35);}
summary.hour-summary:focus-visible{outline: 3px solid var(--highlight-yellow);
      outline-offset: 3px;
      border-radius: calc(var(--card-radius) + 6px);}
.hour-time{font-weight: 600;
      color: var(--accent-deep-blue);
      justify-self: start;
      white-space: nowrap;}
.hour-icon{width: clamp(32px, 6vw, 48px);
      height: clamp(32px, 6vw, 48px);
      filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.2));
      justify-self: center;
      object-fit: contain;}
.hour-temp{font-size: 20px;
      font-weight: 700;
      justify-self: end;
      text-align: right;
      white-space: nowrap;
      color: var(--text-primary);}
.hour-details{border-top: 1px solid rgba(74, 95, 136, 0.18);
      padding: 14px clamp(14px, 2vw, 18px) 16px;
      background: rgba(255, 255, 255, 0.22);}
details[open].hour-item > summary{background: rgba(255, 255, 255, 0.42);}
.hour-meta{color: var(--text-secondary);
      font-size: 16px;
      font-weight: 400;}
.hour-meta strong{color: inherit;
      font-weight: 400;}
.hour-feels{color: var(--text-secondary);
      font-size: 16px;
      font-weight: 400;}
.hour-time{font-weight: 600;
      color: var(--accent-soft-blue);}
.hour-temp{font-size: 20px;
      font-weight: 700;
      color: var(--accent-deep-blue);}
.hour-details{color: var(--text-secondary);}
.hour-meta,
    .hour-feels{color: var(--text-secondary);
      font-size: 16px;
      font-weight: 400;}
.hour-meta,
    .hour-feels{color: var(--accent-soft-blue);
      font-size: 16px;
      font-weight: 600;}
.hour-meta strong{font-weight: 600; color: var(--accent-deep-blue);}
.hour-feels strong{font-weight: 600; color: var(--accent-deep-blue);}
.hour-metrics{margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;}
.hour-desc{grid-column: 1 / -1;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 14px;
      border: 1px solid rgba(74, 95, 136, 0.12);
      color: var(--text-secondary);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.3;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: manual;}
.hour-metric{display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 10px;
      row-gap: 4px;
      align-items: start;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 14px;
      border: 1px solid rgba(74, 95, 136, 0.12);}
.hour-metric .title{margin: 0;
      min-width: 0;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: manual;}
.hour-metric .value{font-size: 18px;
      font-weight: 700;
      color: var(--accent-deep-blue);
      text-align: right;
      min-width: 0;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: manual;
      white-space: nowrap;}
.hour-metric.is-wide{grid-column: 1 / -1;}
@media (max-width: 440px){
  #view-hourly .hour-metrics{grid-template-columns: 1fr;}
  #view-hourly .hour-metric.is-wide{grid-template-columns: 1fr;}
  #view-hourly .hour-metric.is-wide .value{justify-self: start;
        text-align: left;
        white-space: normal;}
}
@media (max-width: 319px){
  .hour-metrics{grid-template-columns: 1fr;}
}
.card{background-color: var(--bg-card);
      border-radius: var(--card-radius);
      padding: 24px;
      box-shadow: var(--shadow);
      content-visibility: auto;
      contain-intrinsic-size: 1px 520px;}
.minmax, .wind-block{display: flex;
      flex-wrap: wrap;
      gap: 30px;}
.minmax div, .wind-block div{flex: 1 1 200px;
      background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      padding: 16px;
      box-shadow: var(--shadow);}
.minmax-line{display: flex;
      flex-wrap: nowrap;
      gap: 30px;
      align-items: stretch;
      justify-content: flex-start;
      background: transparent;
      padding: 0;
      box-shadow: none;
      border-radius: 0;}
.minmax-line .mm{flex: 1 1 0;
      min-width: 0;
      background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      padding: 16px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      align-items: flex-start;}
.minmax-line .mm-label{display: block;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--accent-soft-blue);
      opacity: 1;
      letter-spacing: 0;
      text-transform: none;}
.minmax-line .mm-val{display: block;
      font-size: 22px;
      font-weight: 700;
      color: var(--accent-deep-blue);}
.time-card img{width: clamp(32px, 6vw, 48px);
      height: clamp(32px, 6vw, 48px);
      filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.2));
      justify-self: center;
      object-fit: contain;}
.time-card .label{font-weight: 600;
      color: var(--accent-deep-blue);
      justify-self: start;}
.time-card .value{font-size: 20px;
      font-weight: 700;
      justify-self: end;
      text-align: right;}
.forecast-list{display: flex;
      flex-direction: column;
      gap: 14px;}
details.forecast-day{background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow);
      overflow: hidden;}
details.forecast-day > summary{list-style: none;
      cursor: pointer;
      padding: 16px 18px;
      user-select: none;}
details.forecast-day > summary::-webkit-details-marker{display: none;}
.day-summary-row{display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 14px;}
.day-summary-row > *{min-width: 0;}
.day-left{display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex-wrap: nowrap;}
.dow{font-size: 16px;
      font-weight: 600;
      color: var(--accent-deep-blue);
      letter-spacing: 0;
          white-space: nowrap;}
.dow.weekend{background: var(--highlight-light);
      box-shadow: inset 0 0 0 1px rgba(247, 201, 107, 0.85);
      padding: 4px 10px;
      border-radius: 999px;}
.dom{font-size: 16px;
      font-weight: 700;
      color: var(--text-secondary);
          white-space: nowrap;}
.day-icon{width: clamp(34px, 9vw, 44px);
      height: clamp(34px, 9vw, 44px);
      object-fit: contain;
      filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.2));
    
      justify-self: center;}
.day-temp{font-size: 20px;
      font-weight: 700;
      color: var(--accent-deep-blue);
      min-width: 0;
      text-align: right;
      justify-self: end;
      white-space: nowrap;}
.forecast-expanded{padding: 0 18px 18px;
      border-top: 1px solid rgba(74, 95, 136, 0.15);}
.expanded-block{margin-top: 16px;}
.expanded-block .minmax, .expanded-block .wind-block{gap: 16px;}
details[open].forecast-day > summary{background: rgba(255, 255, 255, 0.25);}
@media (max-width: 600px){
  details.forecast-day > summary{padding: 14px 14px;}
  .day-summary-row{gap: 10px;}
}
@media (max-width: 420px){
  .day-left{gap: 8px;}
  .dow.weekend{padding: 3px 8px;}
  .time-card{grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 14px; padding: 14px;}
}
.time-card{grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);}
.time-card > *{min-width: 0;}
.time-card img{justify-self: center;}
.time-card .label{min-width: 0;}
.time-card .value{min-width: 0; white-space: nowrap;}
.title{overflow-wrap: anywhere; word-break: break-word;}
.wind-block{display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 16px;}
.wind-block > div{min-width: 0;}
.wind-block .title{font-size: 16px;
      font-weight: 600;
      line-height: 1.25;
      color: var(--accent-deep-blue);
      margin-bottom: 4px;}
.wind-block .value{font-size: 22px;
      font-weight: 700;
      line-height: 1.2;
      color: var(--text-primary);
      margin: 0;
      white-space: nowrap;}
.minmax-line .mm-val{font-size: 22px; font-weight: 800;}
.day-temp{font-size: 22px; font-weight: 800;}
.time-card .value{font-size: 22px; font-weight: 800;}
.bottom-nav{position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          height: var(--bottom-nav-height);
          background: rgba(238, 242, 248, 0.96);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border-top: 1px solid rgba(74, 95, 136, 0.18);
          border-radius: var(--card-radius);
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
          z-index: 9999;
        
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      transform: none;}
.section-title,
    .time-card .label,
    .dow,
    .dom,
    .wind-block .title,
    .minmax > div .title,
    .expanded-block .section-title{font-size: 16px;
      font-weight: 600;
      color: var(--accent-soft-blue);
      opacity: 1;
      letter-spacing: 0;
      text-transform: none;}
.time-card .value,
    .day-temp,
    .wind-block .value,
    .minmax-line .mm-val{font-size: 22px;
      font-weight: 800;
      color: var(--accent-deep-blue);
      line-height: 1.2;}
#view-today .minmax .value,
    #view-today .sun-block .value{font-size: 22px;
      font-weight: 800;
      color: var(--accent-deep-blue);
      line-height: 1.2;}
.day-left{display: grid;
      grid-template-columns: clamp(96px, 22vw, 140px) 32px;
      column-gap: 10px;
      align-items: center;
      min-width: 0;}
.day-left .dow{justify-self: start; max-width: 100%;}
.day-left .dom{justify-self: end; text-align: right;}
.day-left{grid-template-columns: max-content max-content; column-gap: 6px;}
.day-left .dom{color: var(--accent-deep-blue);}
.detail-metrics{display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px;}
.detail-metrics > div{background-color: var(--bg-card-alt);
      border-radius: var(--card-radius);
      padding: 16px;
      box-shadow: var(--shadow);
      min-width: 0;}
.detail-metrics .detail-desc{grid-column: 1 / -1;}
@media (max-width: 319px){
  .detail-metrics{grid-template-columns: 1fr;}
}
.section-title{font-size: 18px;
      margin-bottom: 12px;
      color: var(--accent-deep-blue);
      font-weight: 700;}
a{color: var(--accent-deep-blue);
      text-decoration: none;}
a:hover{text-decoration: underline;}
a.button{display: inline-block;
      margin-top: 10px;
      padding: 8px 16px;
      border-radius: 8px;
      background-color: var(--highlight-light);
      color: var(--accent-deep-blue);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;}
a.button:hover{background-color: var(--highlight-yellow);
      text-decoration: none;}
.backlink{display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 13px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(74, 95, 136, 0.12);
      color: var(--text-primary);
      width: fit-content;}
main{padding: 20px 20px calc(var(--bottom-nav-height) + 26px);
      box-sizing: border-box;}
.container{max-width: 540px;
      margin: 0 auto;}
.meta{margin: 0 0 12px;
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.35;}
.card{background: var(--bg-card);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow);
      padding: 16px;
      border: 1px solid rgba(74, 95, 136, 0.10);}
.card h2{margin: 0 0 10px;
      font-size: 15px;}
.card p, .card li{color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.45;}
.card p{margin: 0 0 10px;}
.card p:last-child{margin-bottom: 0;}
.card ul{margin: 8px 0 10px 18px; padding: 0;}
.backlink{display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 13px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(74, 95, 136, 0.12);
      color: var(--text-primary);}
.view{display: none;}
.view.is-active{display: block;}
.bottom-nav a{flex-direction: column;
  gap: 4px;}
.bottom-nav a span{font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep-blue);}
.bottom-nav a.is-active span{color: var(--text-primary);}
a[href="#"]{cursor: default;}
.local-badge{max-width: 540px;
  margin: -18px auto 14px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;}
.updated{max-width: 540px;
  width: calc(100% - 40px);
  margin: 20px auto 20px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--accent-soft-blue);
  font-size: 14px;}
.updated p{margin:0;}
.updated time{font-weight:600;color: var(--accent-deep-blue);}
.updated p{margin: 0;}

/* Keep Updated spacing consistent inside container */
.container > .updated{margin:0; width:100%;}


/* ============================================================
   UI fixes (requested)
   ============================================================ */

/* TODAY: make description match Feels like styling */
.top-row.card .description,
.top-row.card .feels-like{
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* TODAY: Minimum/Maximum/Sunrise/Sunset titles match Wind Speed title sizing */
.minmax .title,
.sun-block .title{
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-soft-blue);
  margin: 0 0 10px;
}
.minmax .value,
.sun-block .value{
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-deep-blue);
}

/* HOURLY: hour-desc match H3 (.title) */
.hour-desc{
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-soft-blue);
}

/* HOURLY: <=474px layout like very small widths */
@media (max-width: 474px){
  .hour-metrics{grid-template-columns: 1fr;}
  .hour-metric.is-wide{grid-template-columns: 1fr;}
  .hour-metric.is-wide .value{
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

/* FORECAST: summary row — day left, temperature centered */
.day-summary-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* center temp in the whole row */
  align-items: center;
  gap: 14px;
}
.day-temp{
  text-align: center;
  justify-self: center;
}
/* MAIN padding-bottom per page type */
@supports selector(:has(*)){
  body:has(.top-row) #main{ padding-bottom: 0; }          /* today */
  body:has(.forecast-list) #main{ padding-bottom: 0; }    /* forecast */
  body:has(.hourly-list) #main{ padding-bottom: 20px; }   /* hourly + hourly tomorrow */
}
}

/* FORECAST: min/max block behaves like other metric grids */
.minmax-line{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}

/* FORECAST: <=408px layout like very small widths */
@media (max-width: 408px){
  .detail-metrics{grid-template-columns: 1fr;}
  .minmax-line{grid-template-columns: 1fr; gap: 16px;}
}

/* FORECAST: ensure More forecasts / Other locations stretch like cards */
section.more-forecasts{width: 100%;}

/* Spacer under content for pages where main padding-bottom is forced to 0.
   Prevents the fixed bottom-nav from covering the last cards (More forecasts / Other locations). */
/* Ensure forecast page sections keep consistent vertical spacing */
@supports selector(:has(*)){
  body:has(.forecast-list) #main .container{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}


/* FORECAST: section.card margin */
@supports selector(:has(*)){
  body:has(.forecast-list) #main section.card{margin: 20px;}
}

/* FORECAST: More forecasts / Other locations same width as other cards (like on other pages) */
@supports selector(:has(*)){
  body:has(.forecast-list) #main > section.more-forecasts.card{
    max-width: 540px;                 /* same as .container */
    width: calc(100% - 40px);         /* keep 20px side margins */
    margin-left: auto;                /* center when outside .container */
    margin-right: auto;
  }
}


/* Weather text fallbacks (icon -> main) */
.wx-main-fallback{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.1;
      max-width: 100%;}
.wx-main-fallback--today-main{
      width: var(--icon-size);
      min-width: var(--icon-size);
      min-height: var(--icon-size);
      max-width: var(--icon-size);
      padding: 6px;
      font-size: clamp(18px, 3.8vw, 32px);
      font-weight: 700;
      color: var(--accent-deep-blue);}
.wx-main-fallback--today-time-card{
      width: clamp(40px, 4.5vw, 64px);
      min-height: clamp(40px, 4.5vw, 64px);
      justify-self: center;
      font-size: 18px;
      font-weight: 700;
      color: var(--accent-deep-blue);}
.wx-main-fallback--hourly-row{
      width: clamp(32px, 6vw, 48px);
      min-height: clamp(32px, 6vw, 48px);
      justify-self: center;
      font-size: clamp(10px, 2.2vw, 14px);
      font-weight: 700;
      color: var(--accent-deep-blue);}


/* FORECAST: smaller typography/content on very narrow screens */
@media (max-width: 380px){
  @supports selector(:has(*)){
    body:has(.forecast-list) details.forecast-day > summary{padding: 12px;}
    body:has(.forecast-list) .forecast-expanded{padding: 0 12px 12px;}
    body:has(.forecast-list) .expanded-block{margin-top: 12px;}
    body:has(.forecast-list) .time-card{padding: 12px; column-gap: 10px;}

    /* keep day/date compact and center temperature on narrow screens */
    body:has(.forecast-list) .day-summary-row{
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
    }
    body:has(.forecast-list) .day-left{
      grid-template-columns: max-content max-content;
      column-gap: 4px;
      min-width: 0;
      justify-self: start;
    }
    body:has(.forecast-list) .dow,
    body:has(.forecast-list) .dom{
      min-width: 0;
    }
    body:has(.forecast-list) .dow{
      overflow: hidden;
      text-overflow: ellipsis;
    }
    body:has(.forecast-list) .day-temp{
      grid-column: 2;
      justify-self: center;
      text-align: center;
      white-space: nowrap;
    }
body:has(.forecast-list) .section-title,
    body:has(.forecast-list) .time-card .label,
    body:has(.forecast-list) .dow,
    body:has(.forecast-list) .dom,
    body:has(.forecast-list) .wind-block .title,
    body:has(.forecast-list) .minmax-line .mm-label,
    body:has(.forecast-list) .expanded-block .section-title{
      font-size: 14px;
    }

    body:has(.forecast-list) .time-card .value,
    body:has(.forecast-list) .day-temp,
    body:has(.forecast-list) .wind-block .value,
    body:has(.forecast-list) .minmax-line .mm-val{
      font-size: 18px;
    }
  }
}