/* home.css — Home screen card stack (Phase 1) */
/* All classes prefixed home- to avoid collision with summary-*, hub-*, mood-collage-* */

/* Card stack container */
.home-card-stack.hidden { display: none; }
.home-card-stack {
  padding: 0 16px 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* Hero card — school-branded, matches checklist/account/my-list pattern */
.home-hero-card {
  border-radius: 14px;
  padding: 28px 20px 24px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}
.home-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.home-hero-headline {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--school-primary-text, #fff);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.home-hero-divider {
  width: 36px;
  height: 1px;
  background: var(--school-primary-border, rgba(255, 255, 255, 0.18));
  margin: 20px auto;
  position: relative;
  z-index: 1;
}

/* Countdown ring */
.home-hero-ring {
  width: 100px;
  height: 100px;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
}

.home-hero-ring svg {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}

.home-hero-ring-bg {
  fill: none;
  stroke: var(--school-primary-text, #fff);
  stroke-width: 7;
  opacity: 0.1;
}

.home-hero-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke: var(--school-primary-text, #fff);
  opacity: 0.5;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}

.home-hero-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-hero-num {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--school-primary-text, #fff);
  line-height: 1;
}

.home-hero-days-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--school-primary-text, #fff);
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.home-hero-countdown-text {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--school-primary-text, #fff);
  opacity: 0.9;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.home-hero-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--school-primary-text, #fff);
  opacity: 0.7;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Community card */
.home-community-card {
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-community-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-community-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.home-community-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}

.home-community-sub {
  font-size: 12px;
  color: var(--slate-400, #94a3b8);
  margin-top: 1px;
}

.home-community-chevron {
  color: var(--slate-300, #cbd5e1);
  font-size: 18px;
  flex-shrink: 0;
}

/* Mood board card wrapper */
.home-moodboard-card {
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-moodboard-label {
  font-family: var(--font-serif, 'Fraunces', serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700, #334155);
  margin-bottom: 10px;
}

.home-moodboard-target {
  /* Container for renderMoodBoard() output */
}

.home-moodboard-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.home-moodboard-link {
  font-size: 13px;
  color: var(--cr-teal, #469E92);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.home-moodboard-chevron {
  color: var(--slate-300, #cbd5e1);
  font-size: 16px;
}

/* Home footer */
.home-footer {
  padding: 16px;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--slate-100, #f1f5f9);
  border-radius: 12px;
  margin-bottom: 12px;
}

.home-footer-mission {
  font-size: 12px;
  color: var(--slate-500, #64748b);
  font-weight: 500;
  line-height: 1.5;
}

.home-footer-mission a {
  color: var(--cr-teal, #469E92);
  text-decoration: none;
  font-weight: 500;
}

.home-footer-links {
  font-size: 11px;
  color: var(--slate-400, #94a3b8);
  margin-top: 6px;
}

/* Intel card — shared base for Worth Knowing, Worth Following, etc. */
.intel-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.intel-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--slate-400, #94a3b8);
  margin-bottom: 8px;
}

/* Worth Knowing — spot rows */
.spot-row { padding: 10px 0; }
.spot-row + .spot-row { border-top: 1px solid var(--slate-100, #f1f5f9); }
.spot-header { display: flex; align-items: center; justify-content: space-between; }
.spot-name { font-size: 14px; font-weight: 600; color: var(--slate-800, #1e293b); }
.spot-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--slate-500, #64748b);
  background: var(--slate-50, #f8fafc);
  padding: 2px 8px;
  border-radius: 9999px;
}
.spot-blurb {
  font-size: 13px;
  color: var(--slate-500, #64748b);
  margin-top: 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spot-blurb.expanded {
  -webkit-line-clamp: unset;
}
.spot-more {
  font-size: 13px;
  color: var(--cr-teal, #469E92);
  font-weight: 600;
  margin-top: 4px;
  cursor: pointer;
  display: none;
}
.spot-pin {
  display: none;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 4px;
}

/* ─── Weather Card (DEC-689) ─── */
.home-weather-card {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

/* Zone tints */
.home-weather-temperate {
  background: linear-gradient(155deg, #eef4f2 0%, #e4ece8 40%, #f0ede6 100%);
  border: 1px solid rgba(70, 158, 146, 0.12);
}
.home-weather-hot_humid {
  background: linear-gradient(155deg, #fceae0 0%, #f8ddd0 35%, #fae4d8 100%);
  border: 1px solid rgba(195, 70, 40, 0.14);
}
.home-weather-hot_dry {
  background: linear-gradient(155deg, #f7ebe0 0%, #f0e0d0 35%, #f5e8dc 100%);
  border: 1px solid rgba(180, 100, 50, 0.12);
}
.home-weather-warm {
  background: linear-gradient(155deg, #f8f4ec 0%, #f2eddf 40%, #f6f2ea 100%);
  border: 1px solid rgba(200, 160, 60, 0.12);
}
.home-weather-cool {
  background: linear-gradient(155deg, #eef0ee 0%, #e4e9e4 40%, #eceeec 100%);
  border: 1px solid rgba(100, 130, 110, 0.12);
}
.home-weather-cold {
  background: linear-gradient(155deg, #eaeff6 0%, #e0e8f2 40%, #eaeff4 100%);
  border: 1px solid rgba(90, 110, 140, 0.14);
}
.home-weather-variable {
  background: linear-gradient(135deg, #f5ebe0 0%, #f0ece6 30%, #eaecf0 70%, #e4eaf2 100%);
  border: 1px solid rgba(100, 110, 130, 0.12);
}

/* Label */
.home-weather-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.home-weather-temperate .home-weather-label { color: rgba(70, 158, 146, 0.75); }
.home-weather-hot_humid .home-weather-label { color: rgba(175, 60, 30, 0.75); }
.home-weather-hot_dry .home-weather-label { color: rgba(165, 90, 40, 0.75); }
.home-weather-warm .home-weather-label { color: rgba(170, 140, 40, 0.75); }
.home-weather-cool .home-weather-label { color: rgba(80, 110, 90, 0.75); }
.home-weather-cold .home-weather-label { color: rgba(71, 85, 105, 0.75); }
.home-weather-variable .home-weather-label { color: rgba(100, 95, 85, 0.75); }

/* Content */
.home-weather-headline {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--slate-900, #0f172a);
  line-height: 1.3;
}
.home-weather-supporting {
  font-size: 14px;
  color: var(--slate-600, #475569);
  line-height: 1.5;
  margin-top: 6px;
}

/* Temperature range strip */
.home-weather-range-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.home-weather-range-bar-wrap {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  position: relative;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.home-weather-range-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
}

/* Zone-specific bar fills */
.home-weather-temperate .home-weather-range-bar {
  left: 30%; right: 18%;
  background: linear-gradient(90deg, #469E92, #7ab8a8 50%, #c8b890 100%);
}
.home-weather-hot_humid .home-weather-range-bar {
  left: 48%; right: 0%;
  background: linear-gradient(90deg, #d07040, #c0442a 55%, #a83820 100%);
}
.home-weather-hot_dry .home-weather-range-bar {
  left: 42%; right: 0%;
  background: linear-gradient(90deg, #c89060, #c07030 55%, #a85525 100%);
}
.home-weather-warm .home-weather-range-bar {
  left: 35%; right: 8%;
  background: linear-gradient(90deg, #c4a86b, #d8a040 55%, #e08848 100%);
}
.home-weather-cool .home-weather-range-bar {
  left: 16%; right: 25%;
  background: linear-gradient(90deg, #7a9a80, #6b8e72 50%, #8ea888 100%);
}
.home-weather-cold .home-weather-range-bar {
  left: 8%; right: 38%;
  background: linear-gradient(90deg, #7090b8, #5a7da8 50%, #8498b0 100%);
}
.home-weather-variable .home-weather-range-bar {
  left: 15%; right: 5%;
  background: linear-gradient(90deg, #7090b8 0%, #8ea888 30%, #c8b070 60%, #d08050 100%);
}

/* Range detail */
.home-weather-range-detail {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.home-weather-temp {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700, #334155);
  font-variant-numeric: tabular-nums;
}
.home-weather-condition {
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-500, #64748b);
  letter-spacing: 0.3px;
}

/* Source */
.home-weather-source {
  margin-top: 14px;
  font-size: 11px;
  color: var(--slate-500, #64748b);
}
.home-weather-source a {
  color: var(--slate-500, #64748b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Community card "coming soon" toast */
.home-community-toast {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--slate-50, #f8fafc);
  color: var(--slate-600, #475569);
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 10;
}
.home-community-toast.visible {
  opacity: 1;
}

/* Feedback solicitation card on Home — aligns .pc-solicit to the card stack rhythm.
   Base .pc-solicit styles (inner typography, button treatment) live in feedback-modal.js
   injectFeedbackStyles(); this scoped override gives the outer container the same
   white background, slate border, 12px radius, and 12px bottom margin as every other
   card in the Home stack. Padding tightened slightly from the standalone-screen
   defaults so the card feels in proportion with neighbors. */
.home-card-stack .pc-solicit {
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 24px 20px 20px;
}