* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #0d1117;
  color: #c9d1d9;
  line-height: 1.6;
}

.topbar {
  padding: 24px 16px 16px;
  text-align: center;
  background: linear-gradient(135deg, #161b22 0%, #0d1117 100%);
  border-bottom: 1px solid #30363d;
}

.topbar h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.topbar .sub {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #8b949e;
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 16px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.controls button {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}

.controls button:hover { background: #30363d; }

.controls .today {
  margin-left: 12px;
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
}
.controls .today:hover { background: #388bfd; }

.ym-display {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0 12px;
  min-width: 140px;
  text-align: center;
}

.calendar {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #30363d;
  border: 1px solid #30363d;
  border-radius: 4px;
  overflow: hidden;
}

.dow {
  background: #21262d;
  padding: 6px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.dow.sun { color: #ff7b72; }
.dow.sat { color: #58a6ff; }

#cells {
  display: contents; /* allow children to be grid cells */
}

.cell {
  background: #0d1117;
  min-height: 78px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.cell.blank { background: #161b22; }

.cell .day {
  font-weight: 600;
  font-size: 0.95rem;
}

.cell.sun .day { color: #ff7b72; }
.cell.sat .day { color: #58a6ff; }
.cell.holiday .day { color: #ff7b72; }
.cell.today { outline: 2px solid #ffd33d; outline-offset: -2px; }

.cell .name {
  font-size: 0.72rem;
  color: #c9d1d9;
  background: #1f2933;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.3;
}

.cell.kind-substitute .name { background: #4d2a0e; }
.cell.kind-citizen .name { background: #4d3a0e; }
.cell.kind-equinox .name { background: #1c3a4d; }
.cell.kind-happy-monday .name { background: #2d1c4d; }

.year-list {
  margin-bottom: 24px;
}

.year-list h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

#year-holidays {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
}

#year-holidays li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.88rem;
  padding: 4px 8px;
  border-radius: 4px;
}

#year-holidays li .d {
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #8b949e;
  white-space: nowrap;
}

#year-holidays li .dow {
  background: none;
  padding: 0;
  font-weight: normal;
  font-size: 0.8rem;
  color: #8b949e;
}

#year-holidays li.kind-substitute { background: rgba(77, 42, 14, 0.4); }
#year-holidays li.kind-citizen { background: rgba(77, 58, 14, 0.4); }
#year-holidays li.kind-equinox { background: rgba(28, 58, 77, 0.4); }
#year-holidays li.kind-happy-monday { background: rgba(45, 28, 77, 0.4); }
#year-holidays li.kind-fixed { background: rgba(48, 54, 61, 0.4); }

.legend {
  margin-bottom: 24px;
}

.legend h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.legend-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  font-size: 0.85rem;
}

.legend-items li { display: flex; align-items: center; gap: 8px; }

.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.swatch.fixed { background: #1f2933; }
.swatch.happy-monday { background: #2d1c4d; }
.swatch.equinox { background: #1c3a4d; }
.swatch.substitute { background: #4d2a0e; }
.swatch.citizen { background: #4d3a0e; }

.about {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.about h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.about p {
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.about a { color: #58a6ff; }

footer {
  border-top: 1px solid #30363d;
  padding: 16px;
  text-align: center;
  font-size: 0.85rem;
  color: #8b949e;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 920px;
  margin: 24px auto 0;
}

footer a { color: #58a6ff; }

@media (max-width: 600px) {
  .cell { min-height: 60px; padding: 3px; }
  .cell .day { font-size: 0.85rem; }
  .cell .name { font-size: 0.62rem; }
}