main.buttons {
  --container: 1200px;
  padding-top: 48px;
}

.buttons .header-section {
  margin-bottom: 24px;
}

.buttons .section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.buttons .section-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--taupe);
}

.buttons .header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.buttons h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
}

.buttons .day-counter {
  font-size: 14px;
  color: var(--taupe);
  white-space: nowrap;
}

.buttons .day-counter strong {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  color: var(--walnut);
  font-size: 16px;
}

.buttons .gallery {
  background: var(--ink);
  border-radius: 16px;
  padding: clamp(12px, 2.5vw, 20px);
  overflow: hidden;
}

.buttons .button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  width: 100%;
}

.buttons .button-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  position: relative;
}

.buttons .button-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  transition: transform 0.2s var(--ease-settle), filter 0.2s var(--ease-settle);
}

.buttons .button-cell img:hover {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
  z-index: 1;
}

.buttons .button-cell.today::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid var(--thread-red);
  pointer-events: none;
}

.buttons .button-cell.empty {
  opacity: 0.25;
}

.buttons .button-cell.empty .ghost {
  width: 80%;
  height: 80%;
  transform: rotate(8deg);
}

/* Progress bar — pure CSS, no inline styles */
.buttons .progress {
  margin-top: 16px;
  height: 6px;
  background: var(--linen);
  border-radius: 999px;
  overflow: hidden;
}

.buttons .progress-fill {
  height: 100%;
  width: 0%;
  background: var(--taupe);
  border-radius: 999px;
}

/* Width steps for CSP-safe progress (1% increments) */
.w1 { width: 1%; } .w2 { width: 2%; } .w3 { width: 3%; } .w4 { width: 4%; } .w5 { width: 5%; }
.w6 { width: 6%; } .w7 { width: 7%; } .w8 { width: 8%; } .w9 { width: 9%; } .w10 { width: 10%; }
.w11 { width: 11%; } .w12 { width: 12%; } .w13 { width: 13%; } .w14 { width: 14%; } .w15 { width: 15%; }
.w16 { width: 16%; } .w17 { width: 17%; } .w18 { width: 18%; } .w19 { width: 19%; } .w20 { width: 20%; }
.w21 { width: 21%; } .w22 { width: 22%; } .w23 { width: 23%; } .w24 { width: 24%; } .w25 { width: 25%; }
.w26 { width: 26%; } .w27 { width: 27%; } .w28 { width: 28%; } .w29 { width: 29%; } .w30 { width: 30%; }
.w31 { width: 31%; } .w32 { width: 32%; } .w33 { width: 33%; } .w34 { width: 34%; } .w35 { width: 35%; }
.w36 { width: 36%; } .w37 { width: 37%; } .w38 { width: 38%; } .w39 { width: 39%; } .w40 { width: 40%; }
.w41 { width: 41%; } .w42 { width: 42%; } .w43 { width: 43%; } .w44 { width: 44%; } .w45 { width: 45%; }
.w46 { width: 46%; } .w47 { width: 47%; } .w48 { width: 48%; } .w49 { width: 49%; } .w50 { width: 50%; }
.w51 { width: 51%; } .w52 { width: 52%; } .w53 { width: 53%; } .w54 { width: 54%; } .w55 { width: 55%; }
.w56 { width: 56%; } .w57 { width: 57%; } .w58 { width: 58%; } .w59 { width: 59%; } .w60 { width: 60%; }
.w61 { width: 61%; } .w62 { width: 62%; } .w63 { width: 63%; } .w64 { width: 64%; } .w65 { width: 65%; }
.w66 { width: 66%; } .w67 { width: 67%; } .w68 { width: 68%; } .w69 { width: 69%; } .w70 { width: 70%; }
.w71 { width: 71%; } .w72 { width: 72%; } .w73 { width: 73%; } .w74 { width: 74%; } .w75 { width: 75%; }
.w76 { width: 76%; } .w77 { width: 77%; } .w78 { width: 78%; } .w79 { width: 79%; } .w80 { width: 80%; }
.w81 { width: 81%; } .w82 { width: 82%; } .w83 { width: 83%; } .w84 { width: 84%; } .w85 { width: 85%; }
.w86 { width: 86%; } .w87 { width: 87%; } .w88 { width: 88%; } .w89 { width: 89%; } .w90 { width: 90%; }
.w91 { width: 91%; } .w92 { width: 92%; } .w93 { width: 93%; } .w94 { width: 94%; } .w95 { width: 95%; }
.w96 { width: 96%; } .w97 { width: 97%; } .w98 { width: 98%; } .w99 { width: 99%; } .w100 { width: 100%; }