/*
TechFinity Weather
Self-contained CSS skin for /tools/weather

Design goals:
- Preserve your existing Tools-site template aesthetic where possible
- Provide a modern, app-like layout similar to major weather apps
- Mobile-first, responsive, accessible
*/

/*
  TechFinity Weather - scoped styling
  The app is wrapped in #tfWeatherRoot to avoid interfering with the rest of the tools site.
*/

:root {
  --tf-bg: #f4f6f9;
  --tf-surface: #ffffff;
  --tf-surface-2: #f8fafc;
  --tf-text: #0b1220;
  --tf-muted: #52627a;
  --tf-border: #d8e0ea;
  --tf-border-strong: #a7b3c4;
  --tf-btn-bg: #eef2f7;
  --tf-btn-bg-hover: #e4ebf5;
  --tf-focus: rgba(37,99,235,0.35);
  --tf-primary: #1f3c5b;
  --tf-primary-2: #295a88;
  --tf-danger: #7a1c1c;
  --tf-warn: #7a4f1c;
  --tf-good: #1d6b3a;
  --tf-shadow: 0 6px 16px rgba(0,0,0,0.08);
  --tf-radius: 10px;
  --tf-radius-sm: 8px;
  --tf-gap: 14px;
  --tf-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}

/* Root wrapper: keeps colors readable even if the global site template uses dark backgrounds */
.tf-weather-root {
  color: var(--tf-text);
  background: transparent;
}

.tf-weather-root.tf-dark {
  --tf-bg: #0f172a;
  --tf-card: rgba(15, 23, 42, 0.92);
  --tf-card-border: rgba(255, 255, 255, 0.10);
  --tf-text: #e5e7eb;
  --tf-muted: #94a3b8;
  --tf-input-bg: rgba(255, 255, 255, 0.06);
  --tf-input-border: rgba(255, 255, 255, 0.14);
  --tf-border-strong: rgba(255,255,255,0.26);
  --tf-btn-bg: rgba(255,255,255,0.08);
  --tf-btn-bg-hover: rgba(255,255,255,0.14);
  --tf-focus: rgba(59,130,246,0.45);
}

.tf-weather-root.tf-light {
  --tf-bg: #f6f8fc;
  --tf-card: rgba(255,255,255,0.92);
  --tf-card-border: rgba(2, 8, 23, 0.08);
  --tf-text: #0f172a;
  --tf-muted: #475569;
  --tf-input-bg: #ffffff;
  --tf-input-border: rgba(2,8,23,0.14);
  --tf-border-strong: rgba(2,8,23,0.22);
  --tf-btn-bg: #eef2f7;
  --tf-btn-bg-hover: #e4ebf5;
  --tf-focus: rgba(37,99,235,0.35);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--tf-font);
  background: var(--tf-bg);
  color: var(--tf-text);
}

/* If the global Tools CSS exists, our styles should still be robust. */

/* Template helper classes used in your original pages */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}
.container-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}
.container-half {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  padding: 14px;
}

@media (min-width: 860px) {
  .container-group {
    grid-template-columns: 1fr 1fr;
  }
}

header {
  text-align: center;
  padding: 14px 0 0 0;
}

footer {
  text-align: center;
  padding: 22px 12px;
  color: var(--tf-muted);
}

/* Minimal navbar (self-contained) */
.tf-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tf-border);
}
.tf-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.tf-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--tf-primary);
}
.tf-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tf-nav-links a {
  text-decoration: none;
  color: var(--tf-primary);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.tf-nav-links a:hover {
  border-color: var(--tf-border);
  background: var(--tf-surface);
}

/* Weather app shell */
.tf-weather {
  margin: 18px 0 8px 0;
}

/*
  Guard against site-wide CSS overrides (buttons/controls turning white-on-white).
  IMPORTANT: Do NOT override .tf-btn-primary/.tf-btn-danger backgrounds.
*/
.tf-weather .tf-btn:not(.tf-btn-primary):not(.tf-btn-danger) {
  color: var(--tf-text) !important;
  background: var(--tf-btn-bg) !important;
  border-color: var(--tf-border-strong) !important;
}
.tf-weather .tf-chip {
  color: var(--tf-text) !important;
  background: var(--tf-btn-bg) !important;
  border-color: var(--tf-border-strong) !important;
}
.tf-weather .tf-input,
.tf-weather .tf-select {
  color: var(--tf-text) !important;
  background: var(--tf-surface-2) !important;
  border-color: var(--tf-border-strong) !important;
}
.tf-weather .tf-input,
.tf-weather .tf-select { background: var(--tf-surface-2) !important; }
.tf-weather .tf-btn-primary,
.tf-weather .tf-btn-danger {
  color: #fff !important;
}

/*
  Controls bar
  The controls bar (search, units, etc.) should remain visible at the top of the page as
  users scroll, without overlaying the content below. We use `position: sticky`
  anchored to the very top of the viewport so it locks in place as soon as it
  would otherwise scroll off screen. A high z-index ensures it sits above
  forecast cards, and a bottom margin adds spacing from the grid below.
*/
.tf-weather-top {
  /* Force sticky even if parent site CSS attempts to override with fixed/relative */
  position: sticky !important;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(244,246,249,0.96), rgba(244,246,249,0.82));
  backdrop-filter: blur(6px);
  border-radius: var(--tf-radius);
  border: 1px solid var(--tf-border);
  box-shadow: var(--tf-shadow);
  padding: 12px;
  margin-bottom: var(--tf-gap);
}

/* Strong override against hostile/legacy template CSS that may force a fixed
   position controls panel. Sticky must remain in normal document flow so it
   never overlays forecast cards. */
#tfWeatherRoot .tf-weather-top {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Mobile header bar (Controls + selected location) */
.tf-mobile-bar {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tf-mobile-loc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tf-muted);
  font-weight: 600;
  font-size: 13px;
}

.tf-controls-panel {
  /* On desktop the controls are always visible */
}

.tf-locbar {
  display: grid;
  gap: 10px;
}

.tf-locbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tf-search {
  display: grid;
  gap: 8px;
}

.tf-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tf-label {
  font-weight: 600;
  color: var(--tf-muted);
  font-size: 13px;
}

.tf-input {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  outline: none;
  background: var(--tf-surface);
}
.tf-input:focus {
  border-color: rgba(31,60,91,0.55);
  box-shadow: 0 0 0 3px rgba(31,60,91,0.12);
}

.tf-select {
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  background: var(--tf-surface);
  min-width: 200px;
}

.tf-btn {
  padding: 10px 12px;
  border: 1px solid var(--tf-border-strong);
  border-radius: var(--tf-radius-sm);
  background: var(--tf-btn-bg);
  color: var(--tf-text) !important;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.tf-btn:hover {
  background: var(--tf-btn-bg-hover);
}
.tf-btn:active {
  transform: translateY(1px);
}
.tf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tf-focus);
}
.tf-btn-primary {
  background: var(--tf-primary);
  border-color: var(--tf-primary);
  color: #fff;
}
.tf-btn-primary:hover {
  background: var(--tf-primary-2);
  border-color: var(--tf-primary-2);
}
.tf-btn-danger {
  background: var(--tf-danger);
  border-color: var(--tf-danger);
  color: #fff;
}
.tf-btn-danger:hover {
  filter: brightness(1.08);
}

.tf-chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--tf-border-strong);
  background: var(--tf-btn-bg);
  color: var(--tf-text);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.tf-chip.is-active {
  border-color: var(--tf-primary);
  background: var(--tf-primary);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(31,60,91,0.20);
}
/* Backwards-compat (older JS used .active) */

/* Color-coded active chips for clarity */
#unitImperial.is-active, #unitImperial.active { background: #2563eb !important; border-color: #2563eb !important; color:#fff !important; }
#unitMetric.is-active, #unitMetric.active { background: #10b981 !important; border-color: #10b981 !important; color:#fff !important; }
#sourceOWM.is-active, #sourceOWM.active { background: #2563eb !important; border-color: #2563eb !important; color:#fff !important; }
#sourceOpenMeteo.is-active, #sourceOpenMeteo.active { background: #10b981 !important; border-color: #10b981 !important; color:#fff !important; }
#sourceNWS.is-active, #sourceNWS.active { background: #f59e0b !important; border-color: #f59e0b !important; color:#111827 !important; }

/* Theme chips: force obvious selection even if site-wide CSS bleeds in */
#themeLight.is-active, #themeLight.active { background: #e5e7eb !important; border-color: #9ca3af !important; color: #111827 !important; box-shadow: 0 0 0 3px rgba(17,24,39,0.10) !important; }
#themeDark.is-active, #themeDark.active { background: #111827 !important; border-color: #111827 !important; color: #ffffff !important; box-shadow: 0 0 0 3px rgba(17,24,39,0.20) !important; }

/* Radar layer chips */
#radarRadar.is-active, #radarRadar.active { background: #2563eb !important; border-color: #2563eb !important; color:#fff !important; }
#radarSatellite.is-active, #radarSatellite.active { background: #7c3aed !important; border-color: #7c3aed !important; color:#fff !important; }
#radarWind.is-active, #radarWind.active { background: #06b6d4 !important; border-color: #06b6d4 !important; color:#062a30 !important; }

.tf-chip.active {
  border-color: var(--tf-primary);
  background: var(--tf-primary);
  color: #fff;
}

.tf-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  color: var(--tf-muted);
  font-size: 13px;
}

.tf-typeahead {
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  background: var(--tf-surface);
  box-shadow: var(--tf-shadow);
  overflow: hidden;
}
.tf-typeahead-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.tf-typeahead-item:last-child { border-bottom: none; }
.tf-typeahead-item:hover { background: var(--tf-surface-2); }
.tf-typeahead-muted { color: var(--tf-muted); font-size: 12px; }

/* Alerts banner */
.tf-alert-banner {
  margin-top: 10px;
  border-radius: var(--tf-radius-sm);
  background: linear-gradient(90deg, rgba(122,28,28,0.95), rgba(122,79,28,0.95));
  color: #fff;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
}
.tf-alert-scroll {
  white-space: nowrap;
  display: inline-block;
  padding: 8px 0;
  animation: tf-scroll 45s linear infinite;
  padding-left: 100%;
}
@keyframes tf-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Cards grid */
.tf-weather-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tf-gap);
}

@media (min-width: 980px) {
  .tf-weather-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tf-card-full { grid-column: 1 / -1; }
}

.tf-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  padding: 14px;
  min-width: 0; /* prevent grid overflow on narrow screens */
}

/* Weather shell inside Tools template */
.tf-weather-shell { overflow-x: hidden; }

.tf-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tf-card-title {
  margin: 0;
  font-size: 18px;
}
.tf-card-subtitle {
  color: var(--tf-muted);
  font-size: 13px;
}

/* Collapsible forecast cards (details/summary) */
.tf-collapsible {
  border-radius: var(--tf-radius);
}
.tf-collapsible > summary {
  list-style: none;
}
.tf-collapsible > summary::-webkit-details-marker { display: none; }
.tf-collapsible-summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tf-border);
}
.tf-collapsible-title {
  font-weight: 700;
  font-size: 15px;
}
.tf-collapsible-sub {
  color: var(--tf-muted);
  font-size: 12px;
}
.tf-collapsible-body {
  padding: 12px 14px 14px 14px;
}

/* Now panel */
.tf-now {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tf-now-icon img {
  /* Enlarge the current conditions icon for better visibility */
  width: 100px;
  height: 100px;
}
.tf-now-temp {
  /* Make the current temperature more prominent */
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
}
.tf-now-desc {
  font-weight: 700;
  margin-top: 4px;
  font-size: 18px;
}
.tf-now-meta {
  color: var(--tf-muted);
  font-size: 14px;
  margin-top: 8px;
}
.tf-now-extras {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Key/Value tiles used by JS renderer */
.tf-kv {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--tf-radius-sm);
  padding: 10px;
  background: var(--tf-surface-2);
}
.tf-kv .tf-k { color: var(--tf-muted); font-size: 12px; }
.tf-kv .tf-v { font-size: 15px; font-weight: 800; margin-top: 4px; }
@media (min-width: 520px) {
  .tf-now-extras { grid-template-columns: 1fr 1fr 1fr; }
}
.tf-kpi {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--tf-radius-sm);
  padding: 10px;
  background: var(--tf-surface-2);
}
.tf-kpi .k { color: var(--tf-muted); font-size: 12px; }
.tf-kpi .v { font-size: 16px; font-weight: 800; margin-top: 4px; }

/* Hourly */
#hourlyChart {
  width: 100%;
  border-radius: var(--tf-radius-sm);
  border: 1px solid rgba(0,0,0,0.05);
  background: var(--tf-surface-2);
}
.tf-hourly-strip {
  margin-top: 10px;
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 6px;
}
.tf-hour {
  min-width: 120px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--tf-radius-sm);
  padding: 10px;
  background: var(--tf-surface-2);
}
.tf-hour-t { font-weight: 900; }
.tf-hour-temp { font-weight: 900; font-size: 18px; margin-top: 4px; }
.tf-pop { color: var(--tf-muted); font-size: 12px; margin-top: 4px; }
.tf-hour-i { display:flex; align-items:center; justify-content:flex-start; }
.tf-hour img { width: 44px; height: 44px; }

/* Daily */
.tf-daily {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.tf-day {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--tf-radius-sm);
  padding: 12px;
  background: var(--tf-surface-2);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'top icon'
    'desc icon'
    'temps meta';
  gap: 10px;
  align-items: center;
}
.tf-day-top { grid-area: top; }
.tf-day-name { font-weight: 900; }
.tf-day-date { color: var(--tf-muted); font-size: 12px; margin-top: 2px; }
.tf-day-i { grid-area: icon; }
.tf-day-i img { width: 54px; height: 54px; }
.tf-day-desc { grid-area: desc; color: var(--tf-muted); font-size: 13px; }
.tf-day-temps { grid-area: temps; display:flex; gap:10px; align-items:baseline; }
.tf-hi { font-weight: 900; font-size: 18px; }
.tf-lo { color: var(--tf-muted); font-weight: 800; }
.tf-day-meta { grid-area: meta; display:flex; gap:10px; justify-content:flex-end; color: var(--tf-muted); font-size: 12px; }

/* News */
.tf-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tf-tab { padding:8px 10px; border:1px solid var(--tf-border); background:var(--tf-surface); border-radius:999px; cursor:pointer; font-weight:700; color:var(--tf-text); }
.tf-tab.is-active { border-color: var(--tf-primary); background: rgba(31,60,91,0.12); }
.tf-news { display:grid; gap:10px; }
.tf-news-item { border:1px solid rgba(0,0,0,0.06); border-radius: var(--tf-radius-sm); padding: 10px; background: var(--tf-surface-2); }
.tf-news-item a { color: var(--tf-primary); font-weight: 800; text-decoration:none; }
.tf-news-item a:hover { text-decoration:underline; }
.tf-news-meta { color: var(--tf-muted); font-size: 12px; margin-top:4px; }
.tf-news-desc { color: var(--tf-text); font-size: 13px; margin-top:6px; line-height:1.35; }

/* History */
.tf-history { display:grid; gap:12px; }
.tf-history-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tf-history-table { width:100%; border-collapse:collapse; overflow:hidden; border-radius: var(--tf-radius-sm); border:1px solid var(--tf-border); }
.tf-history-table th, .tf-history-table td { padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.06); text-align:left; font-size:13px; }
.tf-history-table th { background: var(--tf-surface-2); }

/* Radar */
.tf-radar iframe {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--tf-radius);
  background: #000;
}

/* Alerts list */
.tf-alerts {
  display: grid;
  gap: 10px;
}
.tf-alert {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--tf-radius-sm);
  padding: 12px;
  background: var(--tf-surface-2);
}
.tf-alert.hi { border-left: 6px solid var(--tf-danger); }
.tf-alert.med { border-left: 6px solid var(--tf-warn); }
.tf-alert.low { border-left: 6px solid var(--tf-primary); }
.tf-alert-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.tf-alert-title strong { font-size: 15px; }
.tf-alert-title span { color: var(--tf-muted); font-size: 12px; }
.tf-alert-body { color: var(--tf-text); font-size: 13px; margin-top: 8px; line-height: 1.35; }

/* Notification */
.tf-notify { margin-top: 12px; }
.tf-notify-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tf-check { display: inline-flex; gap: 8px; align-items: center; color: var(--tf-text); }
.tf-check input { width: 16px; height: 16px; }

/* More links */
.tf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tf-links a {
  text-decoration: none;
  color: #fff;
  background: var(--tf-primary);
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
}
.tf-links a:hover { background: var(--tf-primary-2); }

/* News tabs & list */
.tf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.tf-tab {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tf-border);
  background: var(--tf-surface);
  color: var(--tf-text);
  cursor: pointer;
  font-weight: 700;
}
.tf-tab.is-active {
  border-color: var(--tf-primary);
  background: rgba(31,60,91,0.12);
}
.tf-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.tf-news-item {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--tf-radius-sm);
  padding: 12px;
  background: var(--tf-surface-2);
}
.tf-news-item a {
  font-weight: 900;
  color: var(--tf-text);
  text-decoration: none;
}
.tf-news-item a:hover { text-decoration: underline; }
.tf-news-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--tf-muted);
}
.tf-news-desc {
  margin-top: 8px;
  color: var(--tf-muted);
  line-height: 1.35;
}

/* Historical records */
.tf-history-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.tf-history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.tf-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tf-history-table th, .tf-history-table td {
  padding: 10px;
  border: 1px solid var(--tf-border);
}
.tf-history-table th {
  background: var(--tf-surface-2);
  text-align: left;
}

/* Notepad */
.notepad textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 10px;
  border-radius: var(--tf-radius-sm);
  border: 1px solid var(--tf-border);
}
.notepad-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.notepad-controls button {
  padding: 10px 12px;
  border-radius: var(--tf-radius-sm);
  border: 1px solid var(--tf-border);
  background: var(--tf-surface);
  cursor: pointer;
}
.notepad-controls button:hover { background: var(--tf-surface-2); }

/* Utilities */
.tf-muted { color: var(--tf-muted); }
.tf-small { font-size: 12px; }

/* AQI badge */
.tf-aqi {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-sm);
  background: var(--tf-surface-2);
  font-size: 13px;
}
.tf-aqi strong { font-weight: 800; }

/* Dark theme */
.tf-weather-root.tf-dark {
  --tf-bg: #0b1220;
  --tf-surface: #101b2e;
  --tf-surface-2: #0f1a2c;
  --tf-text: #e8eef7;
  --tf-muted: #a8b7d0;
  --tf-border: #223454;
  --tf-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.tf-weather-root.tf-dark .tf-navbar {
  background: rgba(16,27,46,0.85);
}
.tf-weather-root.tf-dark .tf-links a {
  border-color: rgba(255,255,255,0.08);
}

/* Scrollbar niceties */
.tf-hourly-strip::-webkit-scrollbar { height: 10px; }
.tf-hourly-strip::-webkit-scrollbar-thumb { background: rgba(31,60,91,0.25); border-radius: 999px; }
.tf-weather-root.tf-dark .tf-hourly-strip::-webkit-scrollbar-thumb { background: rgba(168,183,208,0.25); }

/* Reduce motion option */
@media (prefers-reduced-motion: reduce) {
  .tf-alert-scroll { animation: none; padding-left: 0; }
  .tf-btn { transition: none; }
}


/* ---------------------------------
   Weather App Layout
----------------------------------*/

body {
  background: var(--tf-bg);
}

.tf-weather {
  max-width: 1200px;
  margin: 0 auto;
}

.tf-weather-top {
  margin-bottom: 14px;
}

.tf-locbar {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.tf-locbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.tf-search {
  position: relative;
}

.tf-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tf-label {
  display: block;
  font-size: 13px;
  color: var(--tf-muted);
  margin-bottom: 6px;
}

.tf-input {
  flex: 1;
  min-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: 10px;
  background: var(--tf-surface-2);
  outline: none;
}

.tf-input:focus {
  border-color: rgba(31, 60, 91, 0.55);
  box-shadow: 0 0 0 3px rgba(31, 60, 91, 0.15);
}

.tf-select {
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: 10px;
  background: var(--tf-surface-2);
  min-width: 220px;
}

.tf-btn {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--tf-border);
  background: var(--tf-surface);
  color: var(--tf-text) !important;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.02s ease, box-shadow 0.12s ease, background 0.12s ease;
  user-select: none;
}

.tf-btn:hover {
  background: rgba(31, 60, 91, 0.06);
}

.tf-btn:active {
  transform: translateY(1px);
}

.tf-btn-primary {
  background: var(--tf-primary);
  color: #fff !important;
  border-color: rgba(0,0,0,0.05);
}

.tf-btn-primary:hover {
  background: var(--tf-primary-2);
}

.tf-btn-danger {
  background: var(--tf-danger);
  color: #fff !important;
  border-color: rgba(0,0,0,0.05);
}

.tf-btn-danger:hover {
  filter: brightness(0.95);
}

.tf-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tf-border);
  background: var(--tf-surface);
  cursor: pointer;
  font-size: 13px;
}

.tf-chip.is-active {
  /* Make active selection unambiguous across light/dark and even if the
     surrounding Tools site CSS leaks in. */
  background: var(--tf-primary) !important;
  border-color: var(--tf-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(31,60,91,0.18) !important;
}

/* Collapsible sections (RSS + NOAA) */
.tf-collapse {
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  background: transparent;
}
.tf-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--tf-text);
}
.tf-collapse > summary::-webkit-details-marker { display: none; }
.tf-collapse > summary::after {
  content: "▾";
  float: right;
  opacity: 0.7;
}
.tf-collapse[open] > summary::after { content: "▴"; }
.tf-collapse-body { padding: 0 12px 12px 12px; }

.tf-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  color: var(--tf-muted);
  font-size: 13px;
}

.tf-typeahead {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 50;
}

.tf-typeahead .item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.tf-typeahead .item:hover {
  background: rgba(31, 60, 91, 0.06);
}

.tf-typeahead .item small {
  color: var(--tf-muted);
}

.tf-alert-banner {
  margin-top: 10px;
  background: #7a1c1c;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.tf-alert-scroll {
  white-space: nowrap;
  display: inline-block;
  padding: 10px 0;
  padding-left: 100%;
  animation: tf-scroll 50s linear infinite;
  font-weight: 600;
}

@keyframes tf-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.tf-weather-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 860px) {
  .tf-weather-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tf-card-full {
    grid-column: 1 / -1;
  }
}

.tf-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.tf-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.tf-card-title {
  margin: 0;
  font-size: 18px;
}

.tf-card-subtitle {
  color: var(--tf-muted);
  font-size: 13px;
}

/* ---------------------------------
   Dark mode
----------------------------------*/

.tf-weather-root.tf-dark {
  --tf-bg: #0b1220;
  --tf-surface: #0f172a;
  --tf-surface-2: #0b1220;
  --tf-text: #e8eef7;
  --tf-muted: #9fb3cc;
  --tf-border: rgba(148,163,184,0.20);
}

.tf-weather-root.tf-dark .tf-btn {
  background: rgba(255,255,255,0.02);
}

.tf-weather-root.tf-dark .tf-btn:hover {
  background: rgba(255,255,255,0.06);
}

.tf-weather-root.tf-dark .tf-typeahead {
  box-shadow: 0 16px 50px rgba(0,0,0,0.40);
}

.tf-weather-root.tf-dark .tf-alert {
  border-color: rgba(148,163,184,0.18);
}

/* ---------------------------------
   Skeleton loaders
----------------------------------*/

.tf-skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: tf-shimmer 1.2s infinite;
  border-radius: 10px;
}

.tf-weather-root.tf-dark .tf-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06));
}

@keyframes tf-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------
   Small screens / accessibility
----------------------------------*/

@media (max-width: 920px) {
  /* Keep the controls bar sticky on small screens as well. When the page
     scrolls, the controls bar will remain affixed to the top of the
     viewport. */
  .tf-weather-top {
    position: sticky;
    top: 0;
  }
  .tf-weather-grid {
    grid-template-columns: 1fr;
  }
  .tf-mobile-bar {
    display: flex;
  }
  .tf-controls-panel {
    display: none;
  }
  .tf-controls-panel.is-open {
    display: block;
  }
  /* Prevent horizontal overflow inside cards */
  .tf-card, .tf-weather-shell {
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .tf-input { min-width: 100%; }
  .tf-select { min-width: 100%; }
  .tf-search-row { flex-direction: column; align-items: stretch; }
  .tf-locbar-row { flex-direction: column; align-items: stretch; }
  .tf-btn, .tf-chip { width: 100%; }
}

.tf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ====== Template integration fixes (Tools site) ====== */

/* Ensure readable defaults even if global /css/styles.css sets dark theme */
body, .container, .container-half, .tf-card, .tf-weather, .tf-weather-shell {
  color: var(--tf-text);
}

.tf-logo {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
  margin: 10px auto 0;
}

.tf-page-title {
  margin: 8px 0 0;
  color: var(--tf-text);
}

.tf-top-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (min-width: 860px) {
  .tf-top-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.tf-top-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  padding: 14px;
}

.tf-top-card-title {
  font-weight: 800;
  color: var(--tf-primary);
  margin-bottom: 8px;
}

.tf-top-card-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.tf-top-card-sub {
  margin-top: 4px;
  color: var(--tf-muted);
}

.tf-top-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 560px) {
  .tf-top-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tf-k {
  color: var(--tf-muted);
  font-weight: 700;
}

.tf-v {
  color: var(--tf-text);
}

.tf-weather-shell {
  margin-top: 14px;
  margin-bottom: 14px;
}

.tf-weather-header-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  padding: 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 860px) {
  .tf-weather-header-card {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.tf-weather-h2 {
  margin: 0 0 4px;
  color: var(--tf-text);
}

/* Make sure links are readable on light background */
a, a:visited {
  color: var(--tf-primary-2);
}

/* Additional scoped container helpers and custom cards */

/* Scoped container helpers to avoid clashes with the host site's `.container` classes.  */
.tf-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}
.tf-container-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}
.tf-container-half {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  padding: 14px;
}
@media (min-width: 860px) {
  .tf-container-group {
    grid-template-columns: 1fr 1fr;
  }
}

/* 3-day forecast grid: reuse `.tf-day` card styling but constrain to three days */
.tf-3day {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

/* NOAA forecast list styling */
.tf-noaa {
  display: grid;
  gap: 10px;
}
.tf-noaa-item {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--tf-radius-sm);
  padding: 12px;
  background: var(--tf-surface-2);
  line-height: 1.35;
}
.tf-noaa-name {
  font-weight: 900;
}
.tf-noaa-temp {
  font-weight: 700;
  margin-top: 4px;
}
.tf-noaa-desc {
  margin-top: 6px;
  color: var(--tf-text);
  font-size: 13px;
}

/*
  Removed override that forced .tf-weather-top to relative. The controls bar
  uses position: sticky in the main definition above to remain pinned to the
  top of the viewport. Leaving it sticky ensures the controls do not scroll
  off the screen and do not overlap the content below.
*/