/* ===== Year Strip: 12-month overview ===== */
.year-strip-card {
  background: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ys-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ys-stats { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.ys-strip {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
}
.ys-month {
  position: relative; padding: 8px 6px; border-radius: 10px;
  background: #f8f9fa; border: 2px solid transparent;
  text-align: center; cursor: pointer; transition: all .15s;
}
.ys-month:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.ys-month.ys-done { background: #d4edda; border-color: #28a745; }
.ys-month.ys-partial, .ys-month.ys-started { background: #fff3cd; border-color: #ffc107; }
.ys-month.ys-missed { background: #f8d7da; border-color: #dc3545; }
.ys-month.ys-current { background: #cce5ff; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.3); }
.ys-month.ys-future { background: #f8f9fa; border-color: #dee2e6; opacity: .7; }
.ys-month.ys-selected { box-shadow: 0 0 0 3px rgba(13,79,138,.4); transform: scale(1.05); z-index: 2; }

.ys-m-name { font-size: .82rem; font-weight: 700; color: var(--primary-dark); }
.ys-m-pct { font-size: 1.05rem; font-weight: 700; color: #333; line-height: 1.1; }
.ys-m-bar { height: 4px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.ys-m-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .3s; }
.ys-done .ys-m-fill { background: linear-gradient(90deg, #28a745, #20c997); }
.ys-missed .ys-m-fill { background: #dc3545; }
.ys-partial .ys-m-fill, .ys-started .ys-m-fill { background: #ffc107; }

.ys-flag {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #dc3545; color: #fff; font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(220,53,69,.4);
}
.ys-flag.ys-flag-current { background: #0d6efd; box-shadow: 0 2px 6px rgba(13,110,253,.4); animation: pulse-cur 1.5s infinite; }
@keyframes pulse-cur { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

@media (max-width: 992px) {
  .ys-strip { grid-template-columns: repeat(6, 1fr); }
  .ys-m-name { font-size: .72rem; }
  .ys-m-pct { font-size: .9rem; }
}
@media (max-width: 600px) {
  .ys-strip { grid-template-columns: repeat(4, 1fr); }
}