/* Rice Growth Progress Bars - Styles */
.growth-section {
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.06);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  background: linear-gradient(135deg,#f7fbff 0%, #f9fff7 100%);
  padding: clamp(18px, 3vw, 28px);
  border-radius: 18px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  max-width: 900px;
  margin: 24px auto;
}
.growth-header {
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.growth-header .badge {
  font-weight:600;
}
.subtext {
  color:#5f6b7a; font-size:0.95rem; margin-bottom:22px;
}

.growth-row {
  display:flex; align-items:center; gap:14px;
  padding:12px 12px;
  border-radius:14px;
  background: #fff;
  border: 1px solid #eef2f6;
  margin: 10px 0;
}

.icon-chip {
  width:42px; height:42px; min-width:42px;
  border-radius:12px;
  display:grid; place-items:center;
  font-size:1.25rem; color:#fff;
  box-shadow: inset 0 -2px 8px rgba(0,0,0,.15);
}
.chip-2022 { background: linear-gradient(135deg,#22c55e,#16a34a); }    /* green */
.chip-2023 { background: linear-gradient(135deg,#14b8a6,#0ea5e9); }    /* teal/sky */
.chip-2024 { background: linear-gradient(135deg,#3b82f6,#6366f1); }    /* blue/indigo */
.chip-2025 { background: linear-gradient(135deg,#f59e0b,#f97316); }    /* amber/orange */
.chip-plan { background: linear-gradient(135deg,#a855f7,#ec4899); }    /* violet/pink */

.label-col {
  width: 170px; min-width:170px;
  display:flex; flex-direction:column;
  line-height:1.1;
}
.label-col .year {
  font-weight:700; letter-spacing:.3px;
}
.label-col .note {
  font-size:.8rem; color:#6b7280;
}

.progress {
  height: 18px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: visible;  /* let badges render outside */
  flex:1;
}
.progress-bar {
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.18);
  transition: width 1.6s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
.progress-bar.striped {
  background-size: 22px 22px;
  background-image: linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
  animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes { to { background-position: 22px 0; } }

/* Color themes per year */
.bar-2022 { background: linear-gradient(90deg,#22c55e,#16a34a); }
.bar-2023 { background: linear-gradient(90deg,#14b8a6,#0ea5e9); }
.bar-2024 { background: linear-gradient(90deg,#3b82f6,#6366f1); }
.bar-2025 { background: linear-gradient(90deg,#f59e0b,#f97316); }

/* Plan (150%) special style */
.progress.plan {
  border: 2px dashed rgba(168,85,247,.45);
  background: rgba(168,85,247,.06);
  position: relative;
}
.bar-plan {
  background: linear-gradient(90deg,#a855f7,#ec4899);
  filter: drop-shadow(0 0 10px rgba(236,72,153,.35));
}
.over-badge {
  position: absolute;
  right: -10px; top: -28px;
  background: #fff;
  color: #a855f7;
  border: 1px solid rgba(168,85,247,.3);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(168,85,247,.25);
  white-space: nowrap;
}

/* Percentage label inside bars */
.pct-label { padding: 0 10px; }

/* Small helper for compact screens */
@media (max-width: 576px) {
  .label-col { width: 120px; min-width: 120px; }
  .pct-label { font-size: .75rem; }
}

/* Scope plugin styles when used multiple times on page */
.rgpb .progress { margin-left: auto; }