/* dotgrid.css: kalender satu tahun berupa titik. Dipakai Tracker (tiga
   kategori) dan Jurnal (kepekatan = jumlah catatan hari itu). */

.year-card { padding: var(--sp-5); margin-bottom: var(--sp-4); }

.year-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
}

.year-card__head-text { flex: 1; min-width: 0; }
.year-card__head h2 { font-size: var(--text-base); }
.year-card__head p { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.year-card__chevron {
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}

.year-card__head[aria-expanded="false"] .year-card__chevron { transform: rotate(-90deg); }

.year-card__body {
  overflow: hidden;
  height: auto;
  transition: height var(--dur-base) var(--ease-out);
}

.year-card__head[aria-expanded="false"] + .year-card__body { height: 0; }

.months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}

.month__label {
  margin-bottom: 5px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dot {
  aspect-ratio: 1;
  border-radius: 2.5px;
  background: var(--dot-empty, var(--surface-sunk));
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
}

.dot--pad { background: none; }

button.dot { cursor: pointer; padding: 0; border: none; }

button.dot:hover { transform: scale(1.35); }
button.dot:active { transform: scale(0.9); }

/* Saat pencarian aktif: tanggal yang cocok menyala, sisanya diratakan.
   Penanda bentuk (cincin) ikut dipakai supaya warna bukan satu-satunya
   pembeda. */
.months--searching .dot { opacity: 0.3; filter: grayscale(1); }

.months--searching .dot--hit {
  opacity: 1;
  filter: none;
  background: var(--brand-2);
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--brand-2);
  z-index: 1;
}

.legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.legend__swatch {
  width: 11px;
  height: 11px;
  border-radius: 2.5px;
}

.legend__spacer { flex: 1; }

/* ── Tab tahun ─────────────────────────────────────────────────────────── */

.year-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
}

.year-tab {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

.year-tab[data-active="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}