[x-cloak] {
  display: none !important;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
}

nav a.brand {
  text-decoration: none;
}

nav a.brand,
nav a.brand:visited {
  color: var(--primary);
}

nav a.brand:hover {
  color: var(--primary-hover);
}

nav a.brand:focus-visible {
  outline: var(--outline-width) solid var(--primary-focus);
  outline-offset: 2px;
}

/* Pico nav can be tight on mobile; allow wrapping */
main>nav ul {
  flex-wrap: wrap;
}

/* Minimal tabs styling (uses Pico variables; no custom colors) */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
  border-bottom: var(--border-width) solid var(--muted-border-color);
}

.tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  text-decoration: none;
  border: var(--border-width) solid var(--muted-border-color);
  color: var(--color);
  background: transparent;
  margin-bottom: calc(var(--border-width) * -1);
}

.tabs [role="tab"][aria-selected="true"] {
  border-color: var(--primary);
  background: var(--card-background-color);
  color: var(--primary);
  border-bottom-color: var(--card-background-color);
  font-weight: 600;
}

.tabs [role="tab"]:hover {
  border-color: var(--primary-hover);
}

.tabs [role="tab"]:focus-visible {
  outline: var(--outline-width) solid var(--primary-focus);
  outline-offset: 2px;
}

/* Holiday calendar */
.year-calendar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .year-calendar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .year-calendar {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.month {
  padding-top: 0.25rem;
}

.month h3 {
  margin: 0.25rem 0 0.5rem;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.dow {
  font-size: 0.75rem;
  text-align: center;
  color: var(--muted-color);
}

.day {
  padding: 0.4rem;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--muted-border-color);
  background: var(--card-background-color);
  color: var(--color);
  min-height: 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.15rem;
}

.day:disabled {
  opacity: 0.35;
  cursor: default;
}

.day-num {
  font-size: 0.85rem;
  line-height: 1;
}

.holiday-name {
  font-size: 0.65rem;
  line-height: 1.1;
  color: var(--muted-color);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.day.holiday {
  border-color: var(--pico-primary-border);
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.day.holiday .holiday-name {
  color: var(--pico-primary-inverse);
}

.day.selected {
  outline: var(--outline-width) solid var(--primary);
  outline-offset: 1px;
}

/* Holiday detail overlay */
.holiday-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pico-spacing);
  background: var(--pico-modal-overlay-background-color);
  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
}

.holiday-overlay>article {
  width: 100%;
  max-width: 700px;
  max-height: calc(100vh - var(--pico-spacing) * 2);
  overflow: auto;
}

.holiday-overlay>article>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pico-spacing);
}

.holiday-overlay .close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--muted-border-color);
  background: transparent;
  color: var(--muted-color);
  font-size: 1.25rem;
  line-height: 1;
}

.holiday-overlay .close-btn:hover {
  border-color: var(--pico-primary-hover-border);
  color: var(--pico-primary-hover);
}

.holiday-overlay .close-btn:focus-visible {
  outline: var(--outline-width) solid var(--primary-focus);
  outline-offset: 2px;
}