/* ─────────────────────────────────────────────────────────────
   Grasspass — Digital Arboretum Design System
   styles.css: handles JS-generated elements, nav active states,
   component primitives, and anything Tailwind CDN can't cover.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* ── Base typography ── */
body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

/* ── Homepage hero ── */
.hero-header {
  background:
    radial-gradient(circle at 14% 18%, rgba(169, 220, 150, 0.2), transparent 24%),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.08), transparent 20%),
    radial-gradient(circle at 32% 100%, rgba(120, 168, 104, 0.16), transparent 28%),
    linear-gradient(180deg, #35682c 0%, #2d5a27 58%, #295124 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 36px rgba(18, 40, 14, 0.12);
}
.hero-fade {
  display: none;
}
.hero-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 16%, rgba(233, 245, 226, 0.14), transparent 20%),
    radial-gradient(circle at 82% 22%, rgba(181, 229, 170, 0.18), transparent 22%),
    linear-gradient(90deg, rgba(20, 40, 18, 0), rgba(20, 40, 18, 0.16) 56%, rgba(16, 30, 14, 0.28));
}
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: stretch;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero-kicker {
  margin: 0 0 1.2rem;
  color: rgba(233, 245, 226, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-ribbon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}
.hero-ribbon {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.55rem 0.95rem;
  border-radius: 9999px;
  background: rgba(244, 250, 239, 0.1);
  border: 1px solid rgba(233, 245, 226, 0.14);
  color: rgba(244, 250, 239, 0.95);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(10px);
}
.hero-tableau {
  position: relative;
  min-height: 280px;
  display: grid;
  grid-template-columns: minmax(200px, 1.25fr) minmax(150px, 0.9fr);
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  align-self: stretch;
}
.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1.8rem;
  border: 1px solid rgba(233, 245, 226, 0.12);
  background: linear-gradient(180deg, rgba(243, 249, 238, 0.16), rgba(222, 238, 214, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 60px rgba(11, 24, 10, 0.22);
  backdrop-filter: blur(16px);
}
.hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -12% -28% auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 229, 173, 0.18), transparent 70%);
}
.hero-panel-large {
  grid-row: 1 / span 2;
  padding: 1.3rem 1.3rem 1.2rem;
}
.hero-panel-small {
  padding: 1rem 1rem 0.95rem;
}
.hero-panel-top {
  align-self: end;
}
.hero-panel-bottom {
  align-self: start;
}
.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.hero-panel-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: rgba(238, 247, 233, 0.92);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-panel-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.65rem;
  border-radius: 9999px;
  background: rgba(244, 250, 239, 0.1);
  color: rgba(244, 250, 239, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
}
.hero-panel-title {
  position: relative;
  z-index: 1;
  margin: 0.7rem 0 0;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.08rem;
  line-height: 1.22;
  font-weight: 700;
}
.hero-panel-ring {
  position: relative;
  width: min(100%, 250px);
  aspect-ratio: 1;
  margin: 1.3rem auto 1.1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(240, 247, 235, 0.12) 0 24%, transparent 25% 100%),
    conic-gradient(from 210deg, rgba(200, 236, 193, 0.15), rgba(240, 247, 235, 0.9), rgba(151, 211, 137, 0.45), rgba(200, 236, 193, 0.15));
  display: grid;
  place-items: center;
}
.hero-panel-ring::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(238, 247, 233, 0.15);
}
.hero-panel-core {
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f6fbf2, #92d287 72%, #4f8246 100%);
  box-shadow: 0 0 0 18px rgba(230, 244, 223, 0.1);
}
.hero-panel-pulse {
  position: absolute;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(244, 250, 239, 0.04), rgba(244, 250, 239, 0.55), rgba(244, 250, 239, 0.04));
  height: 1px;
}
.hero-panel-pulse-one {
  width: 72%;
  top: 34%;
  left: 14%;
}
.hero-panel-pulse-two {
  width: 52%;
  bottom: 31%;
  right: 18%;
}
.hero-panel-copy {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(232, 243, 227, 0.88);
  font-size: 0.94rem;
  line-height: 1.5;
}
.hero-stat-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.hero-stat-card {
  display: grid;
  gap: 0.14rem;
  padding: 0.8rem 0.9rem;
  border-radius: 1.1rem;
  background: rgba(248, 251, 246, 0.09);
  border: 1px solid rgba(233, 245, 226, 0.09);
}
.hero-stat-value {
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}
.hero-stat-label {
  color: rgba(233, 245, 226, 0.82);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-mini-bars,
.hero-mini-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
}
.hero-mini-bars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  min-height: 2.6rem;
}
.hero-mini-bars span,
.hero-mini-stack span {
  display: block;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(240, 247, 235, 0.85), rgba(140, 205, 126, 0.3));
}
.hero-mini-bars span:nth-child(1) { height: 48%; }
.hero-mini-bars span:nth-child(2) { height: 100%; }
.hero-mini-bars span:nth-child(3) { height: 74%; }
.hero-mini-stack span {
  height: 0.7rem;
}
.hero-mini-stack span:last-child {
  width: 72%;
}
.hero-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(233, 245, 226, 0.09);
}
.hero-orbit-one {
  width: 560px;
  height: 560px;
  right: -180px;
  top: -190px;
}
.hero-orbit-two {
  width: 380px;
  height: 380px;
  right: 120px;
  bottom: -210px;
}
.hero-contour {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(233, 245, 226, 0.08);
  transform: rotate(-11deg);
}
.hero-contour-one {
  width: 420px;
  height: 130px;
  right: -36px;
  top: 54px;
}
.hero-contour-two {
  width: 320px;
  height: 104px;
  right: 118px;
  bottom: 40px;
}
.hero-path-lines {
  position: absolute;
  inset: 10% 5% 8% 12%;
  pointer-events: none;
}
.hero-path-lines span {
  position: absolute;
  display: block;
  border: 1px solid rgba(233, 245, 226, 0.1);
  border-radius: 9999px;
}
.hero-path-lines span:nth-child(1) {
  inset: 4% 2% auto 18%;
  height: 46%;
  transform: rotate(7deg);
}
.hero-path-lines span:nth-child(2) {
  inset: auto 14% 16% 0;
  height: 38%;
  transform: rotate(-12deg);
}
.hero-path-lines span:nth-child(3) {
  inset: 25% 20% 18% 24%;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 2rem;
  }
}

@media (max-width: 1023px) {
  .hero-header {
    min-height: 0;
  }
  .hero-fade {
    display: none;
  }
  .hero-grid {
    gap: 2rem;
  }
  .hero-tableau {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hero-panel-large {
    grid-row: auto;
  }
  .hero-orbit-one {
    width: 360px;
    height: 360px;
    right: -160px;
    top: -110px;
  }
  .hero-orbit-two {
    width: 260px;
    height: 260px;
    right: -30px;
    bottom: -120px;
  }
  .hero-contour-one,
  .hero-contour-two {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-ribbon-row {
    gap: 0.55rem;
  }
  .hero-ribbon {
    font-size: 0.72rem;
    padding: 0.5rem 0.8rem;
  }
  .hero-panel-large,
  .hero-panel-small {
    padding: 1rem;
  }
  .hero-panel-ring {
    width: min(100%, 220px);
  }
}

/* ── Glassmorphism nav ── */
.tonal-nav {
  background: rgba(248, 250, 247, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(194, 201, 187, 0.2);
  box-shadow: 0 1px 24px rgba(21, 66, 18, 0.04);
}

/* ── View show/hide (JS toggles .active) ── */
.view { display: none; }
.view.active { display: block; }
.settings-view {
  min-height: calc(100vh - 4rem);
}
.settings-shell {
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}

/* ── Nav buttons (desktop nav + view switcher) ── */
.nav-btn {
  border: 0;
  cursor: pointer;
  color: #42493e;
  background: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-btn:hover { background: #eceeeb; color: #191c1b; }
.nav-btn.active { background: #d5e8cf; color: #154212; }
.nav-btn:focus-visible { outline: 2px solid #154212; outline-offset: 2px; }

/* ── Toggle buttons (timeline range) ── */
.toggle-btn {
  border: 0;
  cursor: pointer;
  color: #72796e;
  background: transparent;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.toggle-btn.active {
  background: #ffffff;
  color: #154212;
  box-shadow: 0 1px 6px rgba(21, 66, 18, 0.1);
}
.toggle-btn:focus-visible { outline: 2px solid #154212; outline-offset: 2px; }

/* ── Estate status pill (JS sets className) ── */
.estate-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(213, 232, 207, 0.6);
  color: #154212;
}
.estate-pill.is-optimal  { background: rgba(213, 232, 207, 0.8); color: #154212; }
.estate-pill.is-moving   { background: rgba(247, 215, 196, 0.7); color: #8a4d2a; }
.estate-pill.is-starting { background: #eceeeb; color: #42493e; }

/* ── Growth Monitor SVG (driven by --progress CSS var set by app.js) ── */
.growth-dial-arc {
  stroke-dasharray: 276.46;
  stroke-dashoffset: calc(276.46 - (276.46 * var(--progress, 0) / 100));
  transition: stroke-dashoffset 1s ease;
}
.growth-dial-value {
  font-size: 2rem;
  font-weight: 800;
  font-family: "Manrope", sans-serif;
  color: #154212;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.growth-dial-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #72796e;
  font-family: "Inter", sans-serif;
  margin-top: 0.2rem;
}

/* ── Overview Metrics (JS injects .overview-metric-card children) ── */
.overview-metrics { display: flex; flex-direction: column; gap: 1rem; }

.overview-metric-card {
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(194, 201, 187, 0.2);
  box-shadow: 0 1px 8px rgba(21, 66, 18, 0.04);
}
.overview-metric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #72796e;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.overview-metric-value {
  margin-top: 0.35rem;
  font-size: 1.1rem;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #191c1b;
  font-variant-numeric: tabular-nums;
}
.overview-metric-copy {
  margin-top: 0.3rem;
  color: #42493e;
  font-size: 0.82rem;
}

/* ── Meta chips in weekly snapshot header ── */
.overview-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.8rem;
  border-radius: 9999px;
  background: #eceeeb;
  color: #42493e;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

/* ── Weekly Snapshot Days ── */
.weekly-snapshot-header {
  gap: 1rem;
}
.weekly-snapshot-heading {
  flex: 1 1 18rem;
  min-width: 0;
}
.weekly-snapshot-actions {
  flex: 0 1 auto;
  justify-content: flex-start;
}
.weekly-snapshot-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  gap: 0.55rem;
  align-items: stretch;
}
.weekly-snapshot-day {
  min-width: 0;
  border-radius: 1rem;
  padding: 0.75rem 0.8rem;
  background: #ffffff;
  border: 1px solid rgba(194, 201, 187, 0.3);
  transition: background-color 150ms ease;
  text-align: left;
  overflow: hidden;
}
.weekly-snapshot-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.weekly-snapshot-day.is-busy {
  background: rgba(213, 232, 207, 0.5);
  border-color: rgba(82, 99, 80, 0.2);
}
.weekly-snapshot-day.is-selected {
  box-shadow: inset 0 0 0 2px #88c986;
  border-color: rgba(136, 201, 134, 0.45);
}
.weekly-snapshot-day.is-today {
  border-color: rgba(136, 201, 134, 0.28);
}
.weekly-snapshot-day-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #72796e;
  font-family: "Inter", sans-serif;
}
.weekly-snapshot-today-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.42rem;
  border-radius: 9999px;
  background: rgba(136, 201, 134, 0.14);
  color: #154212;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.weekly-snapshot-day-date {
  margin-top: 0.24rem;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  color: #191c1b;
  font-size: 1rem;
}
.weekly-snapshot-day-count {
  margin-top: 0.26rem;
  font-size: 0.78rem;
  color: #42493e;
}
.weather-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.38rem;
  color: #42493e;
  font-size: 0.74rem;
}
.weekly-snapshot-day .weather-inline {
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.72rem;
  white-space: normal;
  line-height: 1.35;
}
.weather-inline-icon {
  font-size: 1rem;
  color: #154212;
  flex-shrink: 0;
}
.weekly-snapshot-day .weather-inline-icon {
  font-size: 0.95rem;
}
.weather-inline-high,
.weather-inline-low,
.weather-inline-rain,
.weekly-snapshot-day-count {
  overflow-wrap: anywhere;
}
.weather-inline-high {
  font-weight: 700;
  color: #191c1b;
}
.weather-inline-low,
.weather-inline-rain {
  color: #526350;
}

/* ── Weekly Snapshot Items ── */
.weekly-snapshot-list { display: grid; gap: 0.65rem; }

.weekly-snapshot-item {
  border-radius: 1rem;
  padding: 0.9rem 0.95rem;
  background: #ffffff;
  border: 1px solid rgba(194, 201, 187, 0.3);
  border-left-width: 3px;
}
.weekly-snapshot-item.is-treatment { border-left-color: #154212; }
.weekly-snapshot-item.is-mowing    { border-left-color: #c76d3a; }

.weekly-snapshot-item-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
}
.weekly-snapshot-item-type {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #72796e;
  font-family: "Inter", sans-serif;
}
.weekly-snapshot-item-date { font-size: 0.8rem; color: #42493e; }
.weekly-snapshot-item-title {
  margin-top: 0.3rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.97rem;
  font-weight: 700;
  color: #191c1b;
}
.weekly-snapshot-item-copy {
  margin-top: 0.2rem;
  font-size: 0.84rem;
  color: #42493e;
}
.weekly-snapshot-item-status {
  display: inline-flex;
  margin-top: 0.5rem;
  border-radius: 9999px;
  padding: 0.25rem 0.55rem;
  background: rgba(21, 66, 18, 0.1);
  color: #154212;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Inter", sans-serif;
}

/* ── Upcoming Treatments showcase cards ── */
.overview-showcase-grid { display: grid; gap: 0.85rem; }
.overview-showcase-grid > .empty {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.overview-showcase-card {
  position: relative;
  min-height: 11rem;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1.1rem;
  display: flex;
  align-items: end;
}
.overview-showcase-card.is-treatment {
  background: linear-gradient(135deg, rgba(45, 90, 39, 0.96), rgba(21, 66, 18, 0.9));
}
.overview-showcase-card.is-mowing {
  background: linear-gradient(135deg, rgba(199, 109, 58, 0.96), rgba(138, 77, 42, 0.9));
}
.overview-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(21, 36, 21, 0.28));
}
.overview-showcase-content { position: relative; z-index: 1; color: #fff; }
.overview-showcase-content h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.55rem;
}
.overview-showcase-content p {
  margin-top: 0.28rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.84rem;
}
.overview-date-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.22rem 0.48rem;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Inter", sans-serif;
}

/* ── Recent Activity cards ── */
.overview-activity-list { gap: 0.65rem; }
.overview-activity-card {
  display: flex;
  gap: 0.85rem;
  align-items: start;
  background: #f2f4f1;
  border-radius: 1rem;
  padding: 0.95rem 1rem;
  transition: background-color 150ms ease;
}
.overview-activity-card:hover { background: #eceeeb; }
.overview-activity-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(213, 232, 207, 0.8);
  color: #154212;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.scroll-panel-body {
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 0.35rem;
}
.scroll-panel-body-overview {
  max-height: 24rem;
}
.scroll-panel-body-timeline {
  max-height: 40rem;
}
.scroll-panel-body-list {
  max-height: 34rem;
}
.scroll-panel-body::-webkit-scrollbar {
  width: 10px;
}
.scroll-panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-panel-body::-webkit-scrollbar-thumb {
  background: rgba(114, 121, 110, 0.35);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.scroll-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(82, 99, 80, 0.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ── Timeline (JS renders .panel blocks, .timeline-day buttons) ── */
.timeline-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.6rem;
  margin-top: 0.9rem;
}
@media (max-width: 639px) {
  .timeline-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    overflow: visible;
    padding-bottom: 0;
  }
  .timeline-strip.is-month {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .timeline-strip .timeline-day {
    width: auto;
    min-width: 0;
    padding: 0.62rem;
  }
  .timeline-day-head {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .timeline-day .weekly-snapshot-today-badge {
    max-width: 100%;
    font-size: 0.54rem;
    padding: 0.14rem 0.34rem;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .timeline-day-date {
    font-size: 0.9rem;
  }
  .timeline-day-count {
    font-size: 0.74rem;
  }
  .timeline-day .weather-inline {
    font-size: 0.66rem;
    line-height: 1.3;
    gap: 0.2rem;
  }
  .timeline-day .weather-inline-icon {
    font-size: 0.86rem;
  }
}

@media (max-width: 420px) {
  .timeline-strip.is-month {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.timeline-stack { display: grid; gap: 0.75rem; margin-top: 1rem; }

.timeline-day {
  border: 1px solid rgba(194, 201, 187, 0.4);
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease;
  min-width: 0;
}
.timeline-day:hover { background: #f2f4f1; }
.timeline-day.is-busy {
  background: rgba(213, 232, 207, 0.5);
  border-color: rgba(82, 99, 80, 0.2);
}
.timeline-day.is-selected {
  box-shadow: inset 0 0 0 2px #88c986;
  border-color: rgba(136, 201, 134, 0.45);
}
.timeline-day.is-today {
  border-color: rgba(136, 201, 134, 0.28);
}
.timeline-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}
.timeline-day-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #72796e;
  font-family: "Inter", sans-serif;
}
.timeline-day-date {
  margin-top: 0.24rem;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  color: #191c1b;
  font-size: 1rem;
}
.timeline-day .weekly-snapshot-today-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.timeline-day-count {
  margin-top: 0.3rem;
  color: #42493e;
  font-size: 0.83rem;
}
.timeline-day .weather-inline {
  margin-top: 0.45rem;
  min-width: 0;
  font-size: 0.74rem;
}

/* ── Panel (JS creates article.className="panel" in timeline) ── */
.panel {
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 2px 16px rgba(21, 66, 18, 0.05);
}

/* ── Section head (JS creates div.className="section-head") ── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

/* ── List & stack containers ── */
.list-stack  { display: grid; gap: 0.75rem; }

/* ── Entity cards (JS creates article.className="item") ── */
.item {
  background: #f2f4f1;
  border-radius: 0.85rem;
  padding: 0.95rem;
  transition: background-color 150ms ease;
}
.item:hover { background: #eceeeb; }
.item-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
}
.item-title {
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #191c1b;
}
.item-meta {
  margin-top: 0.2rem;
  color: #42493e;
  font-size: 0.84rem;
}
.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

/* ── Pills and chips ── */
.pill, .chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Inter", sans-serif;
}
.pill     { background: rgba(21, 66, 18, 0.1); color: #154212; }
.pill-alt { background: rgba(199, 109, 58, 0.14); color: #8a4d2a; }

.chip { border: 0; cursor: pointer; transition: filter 150ms ease, transform 150ms ease; }
.chip:hover  { filter: brightness(0.95); }
.chip:active { transform: scale(0.96); }
.chip:focus-visible { outline: 2px solid #154212; outline-offset: 2px; }

.chip-complete { background: rgba(21, 66, 18, 0.12); color: #154212; }
.chip-delete   { background: rgba(186, 26, 26, 0.1);  color: #ba1a1a; }
.chip-edit     { background: rgba(25, 28, 27, 0.07);  color: #42493e; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
}
.empty-icon {
  font-size: 2.25rem;
  color: #b0b8ac;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 40;
}
.empty-message {
  color: #72796e;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  max-width: 26ch;
  line-height: 1.5;
}

/* ── Health mini-grid (JS renders .mini-card children) ── */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.75rem;
}
.mini-card {
  border-radius: 0.85rem;
  background: #eceeeb;
  padding: 0.85rem;
}
.mini-card p:last-child {
  margin-top: 0.25rem;
  color: #42493e;
  font-size: 0.82rem;
}

/* ── Status banner (JS toggles hidden + .is-warning/.is-danger) ── */
.status-banner {
  padding: 0.75rem 1.5rem;
  background: rgba(21, 66, 18, 0.1);
  color: #154212;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: "Inter", sans-serif;
  text-align: center;
}
.status-banner.is-warning { background: rgba(199, 109, 58, 0.13); color: #8a4d2a; }
.status-banner.is-danger  { background: rgba(186, 26, 26, 0.1);   color: #ba1a1a; }

/* ── Status card (Google Calendar sync info) ── */
.status-card {
  margin-top: 1rem;
  border-radius: 0.85rem;
  background: #f2f4f1;
  padding: 0.9rem;
  color: #42493e;
  font-size: 0.86rem;
}

/* ── Map canvas ── */
.map-canvas-wrap {
  position: relative;
  margin-top: 0.5rem;
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate;
}
.map-canvas {
  position: relative;
  z-index: 0;
  height: min(56vh, 520px);
  background: #d6ddd6;
}
.map-onboard {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: min(420px, calc(100% - 2rem));
  border-radius: 1rem;
  background: rgba(18, 32, 17, 0.62);
  border: 1px solid rgba(157, 208, 144, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  text-align: center;
  padding: 1rem 1.1rem;
}
.map-onboard[hidden] { display: none; }
.map-onboard-icon {
  font-size: 1.45rem;
  color: rgba(200, 240, 190, 0.88);
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
}
.map-onboard-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: rgba(230, 248, 225, 0.95);
}
.map-onboard-hint {
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  color: rgba(220, 236, 216, 0.78);
  max-width: 34ch;
  line-height: 1.5;
}
.map-canvas-wrap .leaflet-top,
.map-canvas-wrap .leaflet-bottom,
.map-canvas-wrap .leaflet-control-container {
  z-index: 700;
}

/* ── Form primitives ── */
.form-grid { display: grid; gap: 0.8rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }

.eyebrow-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #42493e;
  font-family: "Inter", sans-serif;
  margin-bottom: 0.25rem;
}

.field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #42493e;
  font-family: "Inter", sans-serif;
  margin-bottom: 0.25rem;
}

.field-input {
  width: 100%;
  background: #e7e9e6;
  border: none;
  border-radius: 0.75rem;
  color: #191c1b;
  padding: 0.72rem 0.9rem;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  transition: box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.field-input:hover  { background: #e1e3e0; }
.field-input:focus  {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 66, 18, 0.18);
  background: #e7e9e6;
}
.field-input::placeholder { color: #72796e; }
textarea.field-input { resize: vertical; min-height: 4.5rem; }
.autocomplete-field {
  position: relative;
}
.autocomplete-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid rgba(194, 201, 187, 0.45);
  box-shadow: 0 14px 38px rgba(21, 66, 18, 0.12);
}
.autocomplete-option {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 0.7rem;
  padding: 0.72rem 0.8rem;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: #191c1b;
  cursor: pointer;
}
.autocomplete-option:hover,
.autocomplete-option.is-active {
  background: #e7f1e2;
}

.checkbox-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  cursor: pointer;
  font-size: 0.86rem;
  color: #42493e;
  font-family: "Inter", sans-serif;
}
.checkbox-row input { width: auto; margin: 0; accent-color: #154212; }

.toggle-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
  color: #42493e;
  font-family: "Inter", sans-serif;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-control {
  position: relative;
  width: 2.75rem;
  height: 1.55rem;
  border-radius: 9999px;
  background: #d6ddd6;
  box-shadow: inset 0 0 0 1px rgba(114, 121, 110, 0.18);
  transition: background-color 150ms ease, box-shadow 150ms ease;
  flex-shrink: 0;
}

.toggle-control::after {
  content: "";
  position: absolute;
  top: 0.16rem;
  left: 0.18rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(25, 28, 27, 0.18);
  transition: transform 150ms ease;
}

.toggle-input:checked + .toggle-control {
  background: #154212;
}

.toggle-input:checked + .toggle-control::after {
  transform: translateX(1.18rem);
}

.toggle-input:focus-visible + .toggle-control {
  outline: 2px solid #154212;
  outline-offset: 2px;
}

.toggle-copy {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ── Pill buttons ── */
.btn-pill-primary,
.btn-pill-ghost,
.btn-pill-secondary,
.btn-pill-outline {
  border: 0;
  border-radius: 9999px;
  padding: 0.65rem 1.4rem;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}
.btn-pill-primary:hover,
.btn-pill-ghost:hover,
.btn-pill-secondary:hover,
.btn-pill-outline:hover { filter: brightness(1.06); }
.btn-pill-primary:active,
.btn-pill-ghost:active,
.btn-pill-secondary:active,
.btn-pill-outline:active { transform: scale(0.97); }
.btn-pill-primary:focus-visible,
.btn-pill-ghost:focus-visible,
.btn-pill-secondary:focus-visible,
.btn-pill-outline:focus-visible { outline: 2px solid #154212; outline-offset: 2px; }

.btn-pill-primary   { background: #154212; color: #ffffff; box-shadow: 0 4px 14px rgba(21, 66, 18, 0.2); }
.btn-pill-ghost     { background: #e7e9e6; color: #42493e; }
.btn-pill-secondary { background: #d5e8cf; color: #3a5138; }
.btn-pill-outline   {
  background: transparent;
  color: #154212;
  border: 1.5px solid rgba(194, 201, 187, 0.6);
}

/* ── Helper text ── */
.helper-copy  { margin-bottom: 0.7rem; font-size: 0.88rem; color: #42493e; }
.compact-helper { font-size: 0.82rem; color: #72796e; }
.highlight-text { margin-bottom: 0.75rem; color: #154212; font-weight: 700; font-size: 0.88rem; }
.compact-stack .item { padding: 0.75rem; }

.getting-started-panel {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(194, 201, 187, 0.28);
  box-shadow: 0 4px 18px rgba(21, 66, 18, 0.05);
}
.getting-started-progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.getting-started-progress-track {
  margin-top: 1rem;
  width: 100%;
  height: 0.9rem;
  border-radius: 9999px;
  background: #eceeeb;
  overflow: hidden;
}
.getting-started-progress-bar {
  height: 100%;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, #88c986 0%, #154212 100%);
  transition: width 220ms ease;
}
.getting-started-checklist,
.getting-started-areas {
  display: grid;
  gap: 0.8rem;
}
.getting-started-checklist-item,
.getting-started-area-card {
  border-radius: 1rem;
  padding: 1rem 1.05rem;
  background: #f2f4f1;
}
.getting-started-checklist-item.is-outstanding {
  border: 1px solid rgba(136, 201, 134, 0.35);
}
.getting-started-checklist-item.is-complete {
  border: 1px solid rgba(194, 201, 187, 0.24);
}
.getting-started-checklist-head {
  display: flex;
  align-items: start;
  gap: 0.8rem;
}
.getting-started-checklist-icon {
  color: #154212;
  font-size: 1.2rem;
  margin-top: 0.05rem;
}
.getting-started-next-copy {
  margin-top: 0.7rem;
  color: #42493e;
  font-size: 0.84rem;
  line-height: 1.5;
}

.profile-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background: transparent;
  color: #42493e;
  padding: 0.45rem 0.7rem;
  border-radius: 9999px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.profile-button:hover {
  background: #eceeeb;
  color: #191c1b;
}

.profile-button:focus-visible {
  outline: 2px solid #154212;
  outline-offset: 2px;
}

.confirmation-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(248, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.confirmation-shell {
  position: relative;
  z-index: 5001;
  width: min(100%, 28rem);
}

.confirmation-panel {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(21, 66, 18, 0.12);
  border: 1px solid rgba(194, 201, 187, 0.3);
}

.confirmation-message {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.confirmation-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(248, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.auth-card-shell {
  width: min(100%, 34rem);
}

.auth-card-panel {
  background: #ffffff;
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(21, 66, 18, 0.08);
  border: 1px solid rgba(194, 201, 187, 0.22);
}

.auth-copy {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.auth-message {
  margin-bottom: 1rem;
  border-radius: 1rem;
  padding: 0.8rem 0.95rem;
  background: rgba(186, 26, 26, 0.08);
  color: #ba1a1a;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Mobile Dock ── */
.mobile-dock {
  position: fixed;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  width: min(95vw, 560px);
  display: flex;
  justify-content: space-around;
  background: rgba(248, 250, 247, 0.88);
  border: 1px solid rgba(194, 201, 187, 0.4);
  border-radius: 9999px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(21, 66, 18, 0.12);
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.dock-btn {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.12rem;
  padding: 0.65rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #72796e;
  transition: color 150ms ease;
  letter-spacing: 0.04em;
}
.dock-btn:hover { color: #42493e; }
.dock-btn.active { color: #154212; }
.dock-btn:focus-visible { outline: 2px solid #154212; outline-offset: 2px; }

.material-symbols-outlined { font-size: 1.25rem; }

/* ── Theme toggle button ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #42493e;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.theme-toggle:hover { background: #eceeeb; color: #191c1b; }
.theme-toggle:focus-visible { outline: 2px solid #154212; outline-offset: 2px; }
html.dark .theme-toggle { color: #b2bca9; }
html.dark .theme-toggle:hover { background: #1f2a1e; color: #dde4da; }

/* ── Responsive ── */
@media (min-width: 768px) {
  .mobile-dock { display: none; }
  main { padding-bottom: 0; }
}

@media (max-width: 767px) {
  .tonal-nav { display: none; }
  main.pt-16 {
    padding-top: 0;
    padding-bottom: 5.5rem;
  }
  .weekly-snapshot-heading {
    flex: 0 1 auto;
  }
  .weekly-snapshot-actions {
    width: 100%;
    align-items: stretch;
  }
  .weekly-snapshot-actions > button {
    flex: 1 1 11rem;
    justify-content: center;
  }
  .weekly-snapshot-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .weekly-snapshot-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .weekly-snapshot-day {
    padding: 0.7rem;
  }
  .weekly-snapshot-day-date {
    font-size: 0.92rem;
  }
  .weekly-snapshot-day .weather-inline {
    font-size: 0.68rem;
  }
  .overview-meta-chip {
    font-size: 0.72rem;
  }
}

@media (min-width: 768px) and (max-width: 1120px) {
  .weekly-snapshot-header {
    align-items: flex-start;
  }
  .weekly-snapshot-actions {
    width: 100%;
  }
}

@media (min-width: 1080px) {
  .overview-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-metrics { gap: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   Dark Mode Overrides  (html.dark class toggled by JS)
   Tailwind semantic colors flip automatically via CSS variables.
   These rules cover hardcoded values in custom CSS classes.
   ══════════════════════════════════════════════════════════════ */

html.dark .tonal-nav {
  background: rgba(19, 26, 18, 0.88);
  border-bottom-color: rgba(60, 69, 59, 0.4);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.2);
}

html.dark .nav-btn { color: #b2bca9; }
html.dark .nav-btn:hover { background: #1f2a1e; color: #dde4da; }
html.dark .nav-btn.active { background: #1c3e1a; color: #88c986; }

html.dark .toggle-btn { color: #8d978a; }
html.dark .toggle-btn.active { background: #1f2a1e; color: #88c986; box-shadow: 0 1px 6px rgba(0,0,0,0.3); }

html.dark .estate-pill { background: rgba(136, 201, 134, 0.15); color: #88c986; }
html.dark .estate-pill.is-optimal  { background: rgba(136, 201, 134, 0.2); color: #88c986; }
html.dark .estate-pill.is-moving   { background: rgba(255, 180, 171, 0.15); color: #ffb4ab; }
html.dark .estate-pill.is-starting { background: #1f2a1e; color: #b2bca9; }

html.dark .growth-dial-value { color: #88c986; }
html.dark .growth-dial-label { color: #8d978a; }

html.dark .overview-metric-card {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.3);
}
html.dark .overview-metric-label { color: #8d978a; }
html.dark .overview-metric-value { color: #dde4da; }
html.dark .overview-metric-copy  { color: #b2bca9; }

html.dark .overview-meta-chip { background: #1f2a1e; color: #b2bca9; }

html.dark .weekly-snapshot-day {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.35);
}
html.dark .weekly-snapshot-day.is-busy {
  background: rgba(58, 78, 56, 0.45);
  border-color: rgba(160, 176, 158, 0.2);
}
html.dark .weekly-snapshot-day.is-selected {
  box-shadow: inset 0 0 0 2px #a4d4a0;
  border-color: rgba(164, 212, 160, 0.45);
}
html.dark .weekly-snapshot-day.is-today { border-color: rgba(164, 212, 160, 0.24); }
html.dark .weekly-snapshot-day-label { color: #8d978a; }
html.dark .weekly-snapshot-day-date  { color: #dde4da; }
html.dark .weekly-snapshot-day-count { color: #b2bca9; }
html.dark .weekly-snapshot-today-badge {
  background: rgba(136, 201, 134, 0.16);
  color: #a4d4a0;
}
html.dark .weather-inline { color: #b2bca9; }
html.dark .weather-inline-icon { color: #88c986; }
html.dark .weather-inline-high { color: #dde4da; }
html.dark .weather-inline-low,
html.dark .weather-inline-rain { color: #a0b09e; }

html.dark .weekly-snapshot-item {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.35);
}
html.dark .weekly-snapshot-item.is-treatment { border-left-color: #88c986; }
html.dark .weekly-snapshot-item.is-mowing    { border-left-color: #c76d3a; }
html.dark .weekly-snapshot-item-type  { color: #8d978a; }
html.dark .weekly-snapshot-item-date  { color: #b2bca9; }
html.dark .weekly-snapshot-item-title { color: #dde4da; }
html.dark .weekly-snapshot-item-copy  { color: #b2bca9; }
html.dark .weekly-snapshot-item-status { background: rgba(136, 201, 134, 0.15); color: #88c986; }

html.dark .timeline-day {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.4);
}
html.dark .timeline-day.is-busy {
  background: rgba(58, 78, 56, 0.45);
  border-color: rgba(160, 176, 158, 0.2);
}
html.dark .timeline-day.is-selected {
  box-shadow: inset 0 0 0 2px #a4d4a0;
  border-color: rgba(164, 212, 160, 0.45);
}
html.dark .timeline-day.is-today { border-color: rgba(164, 212, 160, 0.24); }
html.dark .timeline-day:hover { background: #1f2a1e; }
html.dark .timeline-day-label { color: #8d978a; }
html.dark .timeline-day-date { color: #dde4da; }
html.dark .timeline-day-count { color: #b2bca9; }

html.dark .panel {
  background: #1a2219;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

html.dark .item { background: #1a2219; }
html.dark .item:hover { background: #1f2a1e; }
html.dark .item-title { color: #dde4da; }
html.dark .item-meta  { color: #b2bca9; }

html.dark .pill     { background: rgba(136, 201, 134, 0.15); color: #88c986; }
html.dark .pill-alt { background: rgba(199, 109, 58, 0.2);   color: #e8a080; }
html.dark .chip-complete { background: rgba(136, 201, 134, 0.15); color: #88c986; }
html.dark .chip-delete   { background: rgba(255, 180, 171, 0.15); color: #ffb4ab; }
html.dark .chip-edit     { background: rgba(221, 228, 218, 0.08); color: #b2bca9; }

html.dark .empty-icon    { color: #4a5a48; }
html.dark .empty-message { color: #8d978a; }

html.dark .mini-card { background: #1f2a1e; }
html.dark .mini-card p:last-child { color: #b2bca9; }

html.dark .status-banner { background: rgba(136, 201, 134, 0.12); color: #88c986; }
html.dark .status-banner.is-warning { background: rgba(199, 109, 58, 0.18); color: #e8a080; }
html.dark .status-banner.is-danger  { background: rgba(255, 180, 171, 0.12); color: #ffb4ab; }

html.dark .status-card { background: #1a2219; color: #b2bca9; }

html.dark .field-input {
  background: #263326;
  color: #dde4da;
}
html.dark .field-input:hover { background: #2e3a2d; }
html.dark .field-input:focus { background: #263326; box-shadow: 0 0 0 3px rgba(136, 201, 134, 0.22); }
html.dark .field-input::placeholder { color: #8d978a; }
html.dark .autocomplete-panel {
  background: #1f2a1e;
  border-color: rgba(60, 69, 59, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
html.dark .autocomplete-option {
  color: #dde4da;
}
html.dark .autocomplete-option:hover,
html.dark .autocomplete-option.is-active {
  background: #2e3a2d;
}

html.dark .toggle-control { background: #3c453b; }
html.dark .toggle-input:checked + .toggle-control { background: #88c986; }

html.dark .btn-pill-primary   { background: #88c986; color: #083208; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
html.dark .btn-pill-ghost     { background: #263326; color: #b2bca9; }
html.dark .btn-pill-secondary { background: #3a4e38; color: #c8dcc5; }
html.dark .btn-pill-outline   { color: #88c986; border-color: rgba(60, 69, 59, 0.7); }

html.dark .eyebrow-label  { color: #8d978a; }
html.dark .field-label    { color: #8d978a; }
html.dark .helper-copy    { color: #b2bca9; }
html.dark .compact-helper { color: #8d978a; }
html.dark .highlight-text { color: #88c986; }
html.dark .getting-started-panel {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
html.dark .getting-started-progress-track { background: #263326; }
html.dark .getting-started-checklist-item,
html.dark .getting-started-area-card { background: #1f2a1e; }
html.dark .getting-started-checklist-item.is-outstanding { border-color: rgba(136, 201, 134, 0.28); }
html.dark .getting-started-checklist-item.is-complete { border-color: rgba(60, 69, 59, 0.28); }
html.dark .getting-started-checklist-icon { color: #88c986; }
html.dark .getting-started-next-copy { color: #b2bca9; }

html.dark .profile-button { color: #b2bca9; }
html.dark .profile-button:hover { background: #1f2a1e; color: #dde4da; }

html.dark .confirmation-overlay { background: rgba(19, 26, 18, 0.94); }
html.dark .confirmation-panel {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
html.dark .confirmation-message { color: #8d978a; }

html.dark .auth-overlay { background: rgba(19, 26, 18, 0.94); }
html.dark .auth-card-panel {
  background: #1a2219;
  border-color: rgba(60, 69, 59, 0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

html.dark .mobile-dock {
  background: rgba(19, 26, 18, 0.9);
  border-color: rgba(60, 69, 59, 0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
html.dark .dock-btn { color: #8d978a; }
html.dark .dock-btn:hover { color: #b2bca9; }
html.dark .dock-btn.active { color: #88c986; }

html.dark .overview-activity-card { background: #1a2219; }
html.dark .overview-activity-card:hover { background: #1f2a1e; }
html.dark .overview-activity-icon { background: rgba(58, 78, 56, 0.6); color: #88c986; }
html.dark .scroll-panel-body::-webkit-scrollbar-thumb {
  background: rgba(141, 151, 138, 0.35);
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.dark .scroll-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 176, 158, 0.5);
  border: 2px solid transparent;
  background-clip: padding-box;
}

html.dark .section-head { border-color: rgba(60, 69, 59, 0.3); }