/* City forecast pages (/weather/...). Nav, footer and colors come from site-shell.css. */
body.ooCity { margin: 0; color: var(--oo-ink); font: 16px/1.55 'Inter', 'Roboto', system-ui, sans-serif; }
.ooCity *, .ooCity *::before, .ooCity *::after { box-sizing: border-box; }
.ooCity a { color: var(--oo-mint); }
.cityMain { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 72px; }

.cityCrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--oo-muted); }
.cityCrumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,0.25); }
.cityCrumbs a { color: var(--oo-muted); text-decoration: none; }
.cityCrumbs a:hover { color: var(--oo-mint); }

.cityHero { padding: clamp(20px, 4vw, 40px) 0 clamp(16px, 3vw, 28px); }
.cityKicker { margin: 0 0 6px; color: var(--oo-mint); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cityHero h1 { margin: 0 0 14px; font-size: clamp(30px, 5.5vw, 50px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(120deg, #fff 35%, var(--oo-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cityIntro { margin: 0; max-width: 640px; color: #c6d1e4; }
.cityNow { display: inline-flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--oo-line); border-radius: 16px; background: rgba(255,255,255,0.03); }
.cityNowMain { display: flex; align-items: center; gap: 14px; }
.cityNowTemp { color: var(--oo-mint); font-size: 46px; font-weight: 700; line-height: 1; }
.cityNowText { font-size: 17px; color: #e3eaf6; }
.cityNowMeta { color: var(--oo-muted); font-size: 14px; }
.cityJump { display: flex; gap: 8px; margin-top: 16px; }
.cityJump a { padding: 6px 14px; border: 1px solid var(--oo-line); border-radius: 999px; color: var(--oo-ink); text-decoration: none; font-size: 14px; }
.cityJump a:hover { border-color: var(--oo-mint); color: var(--oo-mint); }

.citySection { padding: clamp(24px, 4vw, 36px) 0; border-top: 1px solid var(--oo-line); scroll-margin-top: 70px; }
.citySection h2 { margin: 0 0 16px; font-size: clamp(22px, 3vw, 28px); font-weight: 700; }
.citySection h3 { margin: 22px 0 10px; font-size: 17px; font-weight: 600; }
.citySmall { color: var(--oo-muted); font-size: 14px; }
.cityMore { display: inline-block; margin-top: 14px; font-weight: 600; }

.cityDays { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.cityDay { padding: 14px; border: 1px solid var(--oo-line); border-radius: 14px; background: rgba(255,255,255,0.03); }
.cityDay.night { background: rgba(255,255,255,0.015); }
.cityDay img { float: right; border-radius: 10px; }
.cityDayName { font-weight: 600; }
.cityDayTemp { color: var(--oo-mint); font-size: 26px; font-weight: 700; }
.cityDayShort { color: #e3eaf6; font-size: 14px; }
.cityDayRain { color: #8fc8ff; font-size: 13px; }
.cityDayDetail { clear: both; margin: 8px 0 0; color: #a9b6cc; font-size: 13.5px; }

.cityChart { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.cityHours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.cityHour { flex: 0 0 92px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--oo-line); border-radius: 12px; background: rgba(255,255,255,0.03); font-size: 12px; color: #c6d1e4; scroll-snap-align: start; }
.cityHour strong { color: #fff; font-size: 13px; }
.cityHourTemp { color: var(--oo-mint); font-size: 20px; font-weight: 700; }
.cityHourRain { color: #8fc8ff; }

.cityRadar { position: relative; overflow: hidden; border: 1px solid var(--oo-line); border-radius: 16px; aspect-ratio: 16 / 10; max-height: 70vh; background: #0a0d16; }
.cityRadar iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cityFacts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; }
.cityFacts div { padding: 12px 14px; border: 1px solid var(--oo-line); border-radius: 12px; }
.cityFacts dt { color: var(--oo-muted); font-size: 12px; }
.cityFacts dd { margin: 2px 0 0; font-weight: 600; }
.cityFaq h3 { margin: 18px 0 6px; font-size: 16px; }
.cityFaq h3:first-child { margin-top: 0; }
.cityFaq p { margin: 0; color: var(--oo-muted); line-height: 1.6; max-width: 75ch; }

.cityLinks { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 0; padding: 0; list-style: none; }
.cityLinks span { color: var(--oo-muted); font-size: 13px; }
.cityLinksBig a { font-weight: 600; }
.cityLinksAll { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); font-size: 14px; }

@media (max-width: 600px) {
  .cityNow { display: flex; }
  .cityRadar { aspect-ratio: 3 / 4; }
}
.cityHours { scrollbar-width: thin; scrollbar-color: rgba(159,252,185,0.35) transparent; }
.cityHours::-webkit-scrollbar { height: 6px; }
.cityHours::-webkit-scrollbar-track { background: transparent; }
.cityHours::-webkit-scrollbar-thumb { background: rgba(159,252,185,0.35); border-radius: 999px; }