:root {
  --bg: #eef4f8;
  --surface: #ffffff;
  --surface-alt: #f5f8fa;
  --text: #132333;
  --muted: #5b6c7c;
  --border: #ccd9e3;
  --accent: #075985;
  --accent-dark: #064466;
  --warning: #8a2c0d;
  --warning-bg: #fff1e8;
  --shadow: 0 12px 36px rgba(28, 55, 76, 0.10);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #ddecf5 0, var(--bg) 380px);
}
a { color: var(--accent); }
button, input { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: #fff;
  border-radius: 8px;
}
.skip-link:focus { left: 1rem; }

.site-header {
  padding: 3.25rem 1.25rem 2rem;
  background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 32%), linear-gradient(135deg, #063e60, #0879a9);
  color: #fff;
}
.header-inner, .page-shell, .site-footer {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}
.header-inner, .location-heading, .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.04em; }
h2 { margin-bottom: .75rem; }
.subtitle { margin: 0; color: rgba(255,255,255,.84); font-size: 1.08rem; }
.eyebrow { margin-bottom: .45rem; font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted, .form-help { color: var(--muted); }

.page-shell { padding-block: 1.5rem 3rem; }
.search-panel, .card, .welcome-panel, .alerts-section {
  background: var(--surface);
  border: 1px solid rgba(204,217,227,.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search-panel { padding: clamp(1.25rem, 3vw, 2rem); margin-top: -3rem; position: relative; }
.location-form label { display: block; margin-bottom: .45rem; font-weight: 750; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: .7rem; }
input {
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid #9eb2c1;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}
input:focus, button:focus-visible { outline: 3px solid rgba(8,121,169,.28); outline-offset: 2px; }
button {
  border: 0;
  border-radius: 10px;
  padding: .9rem 1.15rem;
  background: var(--accent);
  color: #fff;
  font-weight: 750;
}
button:hover { background: var(--accent-dark); }
button:disabled { cursor: wait; opacity: .65; }
.secondary-button { border: 1px solid rgba(255,255,255,.65); background: transparent; }
.location-heading .secondary-button { border-color: var(--border); color: var(--accent); }
.location-heading .secondary-button:hover { color: #fff; }
.form-help { margin: .6rem 0 0; font-size: .9rem; }
.status-message { min-height: 1.4em; margin: .65rem 0 0; font-weight: 650; }
.status-message.error { color: #a12a18; }

.location-results { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.location-options { display: grid; gap: .55rem; }
.location-option { width: 100%; text-align: left; background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
.location-option:hover { color: #fff; }

.weather-content { margin-top: 1.5rem; }
.location-heading { margin-bottom: 1rem; padding: .4rem .25rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.5fr); gap: 1rem; }
.card, .alerts-section { padding: 1.25rem; }
.forecast-card, .alerts-section { margin-top: 1rem; }
.current-main { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.current-icon { width: 88px; height: 88px; object-fit: contain; }
.current-temp { font-size: clamp(2.8rem, 8vw, 4.7rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.current-description { margin: .3rem 0 0; font-weight: 650; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.metric { padding: .8rem; border-radius: 12px; background: var(--surface-alt); }
.metric-label { display: block; color: var(--muted); font-size: .78rem; }
.metric-value { display: block; margin-top: .15rem; font-weight: 750; }

.hourly-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(105px, 1fr); gap: .65rem; overflow-x: auto; padding-bottom: .5rem; }
.hour-card { padding: .85rem .65rem; border: 1px solid var(--border); border-radius: 13px; text-align: center; background: var(--surface-alt); }
.hour-card img { width: 48px; height: 48px; object-fit: contain; }
.hour-time, .hour-temp { font-weight: 800; }
.hour-detail { color: var(--muted); font-size: .78rem; }

.daily-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .75rem; }
.day-card { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-alt); }
.day-card img { display: block; width: 68px; height: 68px; margin: .5rem auto; object-fit: contain; }
.day-name { font-weight: 800; }
.day-temp { font-size: 1.35rem; font-weight: 800; }
.day-summary { color: var(--muted); font-size: .86rem; }

.alerts-section { border-left: 6px solid #e05b28; background: var(--warning-bg); }
.alert-item + .alert-item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e7c6b7; }
.alert-item h3 { margin-bottom: .35rem; color: var(--warning); }
.alert-meta { color: #713b2a; font-size: .88rem; }
.alert-item details { margin-top: .5rem; }
.alert-item summary { cursor: pointer; font-weight: 750; }

.welcome-panel { margin-top: 1.5rem; padding: 2rem; text-align: center; }
.welcome-panel p { max-width: 760px; margin: 0 auto; color: var(--muted); }
.site-footer { padding: 1.5rem 0 3rem; color: var(--muted); font-size: .88rem; text-align: center; }
.site-footer p { margin-bottom: .45rem; }

@media (max-width: 780px) {
  .header-inner, .location-heading { align-items: flex-start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .search-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .header-inner, .location-heading { flex-direction: column; }
  .header-inner .secondary-button { align-self: flex-start; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}


/* Mobile, touch and installed-app enhancements */
html { -webkit-text-size-adjust: 100%; }
body { padding-bottom: env(safe-area-inset-bottom); overscroll-behavior-y: none; }
.site-header { padding-top: calc(3.25rem + env(safe-area-inset-top)); padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
button, .button-link, input, summary { min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input { font-size: 16px; }
.hourly-scroll { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hour-card { scroll-snap-align: start; }
.saved-locations-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.saved-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.saved-title-row h3 { margin-bottom:.5rem; }
.saved-locations { display:flex; flex-wrap:wrap; gap:.6rem; }
.saved-location { display:inline-flex; align-items:stretch; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--surface-alt); }
.saved-location-load, .saved-location-remove { min-height:46px; border-radius:0; background:transparent; color:var(--text); }
.saved-location-load { padding:.65rem .8rem .65rem 1rem; }
.saved-location-remove { width:46px; padding:0; color:var(--muted); font-size:1.2rem; }
.saved-location button:hover { background:#dceaf2; color:var(--accent-dark); }
.text-button { min-height:44px; padding:.45rem .65rem; background:transparent; color:var(--accent); }
.install-tip { max-width:680px; margin:1.25rem auto 0; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--surface-alt); }
.install-tip h3 { margin-bottom:.4rem; }
.install-tip p { margin:0 auto; }
@media (display-mode: standalone) { .install-tip { display:none; } body { user-select:none; } input, p, h1, h2, h3 { user-select:text; } }
@media (max-width: 640px) {
  .header-inner, .location-heading { width:100%; }
  .page-shell { width:min(100% - 1rem, 1180px); padding-top:1rem; }
  .search-panel { margin-top:-2rem; padding:1rem; border-radius:15px; }
  .card, .alerts-section { padding:1rem; border-radius:15px; }
  .weather-content { margin-top:1rem; }
  .location-heading .secondary-button, .search-row button { width:100%; }
  .current-main { align-items:flex-start; }
  .current-icon { width:72px; height:72px; }
  .hourly-scroll { margin-inline:-1rem; padding-inline:1rem; grid-auto-columns:minmax(112px, 42vw); }
  .daily-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer { width:calc(100% - 2rem); padding-bottom:calc(2rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .metrics-grid, .daily-grid { grid-template-columns:1fr; } }

/* Keep the seven-day forecast inside narrow phone screens. */
.daily-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.day-card {
  min-width: 0;
  overflow: hidden;
}
.day-name,
.day-summary,
.day-card .hour-detail {
  overflow-wrap: anywhere;
  word-break: normal;
}
.day-card img {
  max-width: 100%;
}
@media (max-width: 380px) {
  .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .day-card { padding: .75rem .55rem; }
  .day-card img { width: 54px; height: 54px; }
  .day-temp { font-size: 1.15rem; }
  .day-summary { font-size: .78rem; }
}


/* Collapsible weather sections */
.collapsible-section {
  min-width: 0;
  overflow: hidden;
}
.collapsible-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  padding: .1rem 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.collapsible-section > summary::-webkit-details-marker { display: none; }
.collapsible-section > summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--accent);
  font-size: 1.45rem;
  line-height: 1;
}
.collapsible-section[open] > summary::after { content: "−"; }
.collapsible-section > summary:focus-visible {
  outline: 3px solid rgba(8,121,169,.28);
  outline-offset: 4px;
  border-radius: 8px;
}
.summary-hint {
  margin-left: auto;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}
.collapsible-section[open] .summary-hint { display: none; }
.collapsible-content {
  min-width: 0;
  max-width: 100%;
  padding-top: 1rem;
  overflow: hidden;
}
.alerts-section > summary { color: var(--warning); }
.alerts-section[open] { padding-bottom: 1.25rem; }

/* Reliable two-card portrait layout for iPhone. */
html, body { max-width: 100%; overflow-x: hidden; }
.weather-content,
.dashboard-grid,
.forecast-card,
.collapsible-content,
.daily-grid,
.day-card { min-width: 0; max-width: 100%; }
.daily-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: .65rem;
  overflow: visible;
}
.day-card {
  width: 100%;
  padding: .8rem .65rem;
}
.day-card img {
  width: min(64px, 100%);
  height: 60px;
}
.day-name, .day-temp, .day-summary, .day-card .hour-detail {
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 430px) and (orientation: portrait) {
  .page-shell { width: calc(100% - .75rem); }
  .card, .alerts-section { padding: .85rem; }
  .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .day-card { padding: .7rem .45rem; }
  .day-card img { width: 52px; height: 52px; }
  .day-name { font-size: .9rem; }
  .day-temp { font-size: 1.08rem; }
  .day-summary, .day-card .hour-detail { font-size: .75rem; }
  .collapsible-section > summary { font-size: 1.08rem; }
  .summary-hint { font-size: .7rem; }
}

/* Detailed text forecast */
.detailed-forecast-card { margin-top: 1rem; }
.detailed-forecast-intro { margin: 0 0 .9rem; }
.detailed-forecast-list { display: grid; gap: .8rem; min-width: 0; }
.detailed-period { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.035); overflow-wrap: anywhere; }
.detailed-period-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .45rem; }
.detailed-period-heading h3 { margin: 0; font-size: 1rem; }
.detailed-period-heading span { color: var(--muted); font-size: .86rem; text-align: right; }
.detailed-period p { margin: 0; line-height: 1.55; }
@media (max-width: 520px) {
  .detailed-period-heading { display: block; }
  .detailed-period-heading span { display: block; margin-top: .2rem; text-align: left; }
}

/* Recent earthquake map and list */
.earthquake-card { margin-top: 1rem; }
.earthquake-intro { margin: 0 0 .9rem; }
.earthquake-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: .75rem;
  align-items: end;
  margin-bottom: .75rem;
}
.earthquake-controls label { display: grid; gap: .35rem; font-size: .84rem; font-weight: 750; }
.earthquake-controls select {
  width: 100%;
  min-height: 48px;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
}
.earthquake-map {
  width: 100%;
  height: 410px;
  min-height: 280px;
  margin-top: .75rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
  z-index: 0;
}
.earthquake-list { display: grid; gap: .7rem; margin-top: .9rem; }
.earthquake-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.earthquake-mag {
  min-width: 3.5rem;
  align-self: start;
  padding: .55rem .4rem;
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 1.05rem;
  font-weight: 850;
  text-align: center;
}
.earthquake-item h3 { margin: 0 0 .2rem; font-size: .98rem; }
.earthquake-item p { margin: .2rem 0; }
.earthquake-meta { color: var(--muted); font-size: .82rem; }
.earthquake-note { margin: .75rem 0 0; color: var(--muted); font-size: .78rem; }
.leaflet-popup-content { line-height: 1.4; }
.leaflet-container a { color: #056f9f; }
@media (max-width: 780px) {
  .earthquake-controls { grid-template-columns: 1fr 1fr; }
  .earthquake-controls button { width: 100%; }
}
@media (max-width: 480px) {
  .earthquake-controls { grid-template-columns: 1fr; }
  .earthquake-map { height: 340px; }
  .earthquake-item { grid-template-columns: 1fr; }
  .earthquake-mag { width: fit-content; }
}

/* Earthquake summary, severity, and in-app selection */
.earthquake-summary {
  margin: .75rem 0;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.earthquake-summary:empty { display: none; }
.earthquake-summary h3 { margin: 0 0 .65rem; font-size: 1rem; }
.earthquake-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.earthquake-summary-grid p { display: grid; gap: .2rem; margin: 0; padding: .65rem; border-radius: 10px; background: rgba(255,255,255,.04); }
.earthquake-summary-grid strong { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .035em; }
.earthquake-summary-grid span { font-weight: 780; }
.earthquake-item { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.earthquake-item:hover { transform: translateY(-1px); }
.earthquake-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.earthquake-item.selected { border-color: #66c8ff; box-shadow: 0 0 0 3px rgba(102,200,255,.22); }
.earthquake-item.severity-minor { border-left: 6px solid #2e7d32; }
.earthquake-item.severity-moderate { border-left: 6px solid #f9a825; }
.earthquake-item.severity-strong { border-left: 6px solid #ef6c00; }
.earthquake-item.severity-major { border-left: 6px solid #c62828; }
.earthquake-item.severity-minor .earthquake-mag { background: rgba(46,125,50,.2); }
.earthquake-item.severity-moderate .earthquake-mag { background: rgba(249,168,37,.22); }
.earthquake-item.severity-strong .earthquake-mag { background: rgba(239,108,0,.22); }
.earthquake-item.severity-major .earthquake-mag { background: rgba(198,40,40,.24); }
.earthquake-details { display: flex; flex-wrap: wrap; gap: .35rem .85rem; color: var(--muted); font-size: .8rem; }
@media (max-width: 780px) { .earthquake-summary-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .earthquake-summary-grid { grid-template-columns: 1fr; } }