/* === Auth visibility (canonical) ===
   The new auth-module.js handles visibility by toggling the .d-none class
   on elements. These CSS rules are removed to prevent conflicts.
*/
/* [REMOVED] .requires-auth, .requires-guest, and body.authed rules. */

.invisible { 
  visibility: hidden !important; 
}
.d-none { 
  display: none !important; 
}

/* Optional debug badge */
#auth-debug {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}


:root {
  --card-radius: 1rem;
}
body {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 220px);
}
.brand-badge {
  letter-spacing: .2em;
  font-weight: 700;
  opacity: .7;
}
.card {
  border: 0;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 20px rgb(0 0 0 / 6%);
}
.muted { color: #6c757d !important; }
.wx-pill {
  min-width: 68px;
  border-radius: .75rem;
  padding: .35rem .5rem;
  background: rgba(33, 150, 243, .06);
}
.skeleton {
  background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  color: transparent;
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Weather card hourly forecast styles (moved from inline to avoid CSP issues) */
.wx-hourly-item {
  min-width: 82px;
}
.wx-hourly-desc {
  max-width: 100px;
}

/* Weather card main icon container */
.wx-icon-container {
  width: 64px;
  height: 64px;
}