.calendar-grid {
    grid-auto-rows: 1fr;
}

/* Bulma: (is-col-min-19 = 28.5rem) + (2 x 1.5rem for section margins) */
@media (max-width: calc(28.5rem + 3.0rem)) {
  .calendar-grid.grid.is-col-min-19 {
    --bulma-grid-column-min: 100%;
  }
}

.puzzle-calendar-cell>.box {
    height: 100%;
    width: 100%;
    position: relative;
    --calendar-cell-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    box-shadow: var(--calendar-cell-box-shadow);
}

.puzzle-calendar-cell .label {
    font-size: 0.9em;
}

.puzzle-calendar-cell .puzzle-name {
    font-size: 1.15em;
    font-weight: bold;
}

.puzzle-calendar-cell .puzzle-answer {
    font-size: 1.0em;
}

.puzzle-calendar-cell .block:not(:last-child) {
    margin-bottom: 0.25em;
}

/* Unavailable puzzle */

.puzzle-calendar-cell>.unavailable {
    background-color: var(--bulma-primary);
}

.puzzle-calendar-cell .unavailable-symbol {
    color: var(--bulma-text-invert);
    font-size: 2em;
    font-weight: bold;
}

/* Locked puzzle */

.puzzle-calendar-cell>.locked {
    background-color: var(--bulma-primary);
}

.puzzle-calendar-cell>.locked .label {
    color: var(--bulma-text-invert);
}

.puzzle-calendar-cell>.locked .puzzle-name {
    color: var(--bulma-text-invert);
}

/* Available Puzzle */

.puzzle-calendar-cell>.available {
    background-color: var(--midnight-green);
}

.puzzle-calendar-cell>.available .label {
    color: var(--bulma-text-invert);
}

.puzzle-calendar-cell>.available .puzzle-name a {
    color: var(--bulma-warning);
}

.puzzle-calendar-cell>.available .puzzle-answer {
    color: var(--bulma-text-invert);
}

.puzzle-calendar-cell .answers-section {
    margin-top: auto;
    margin-bottom: auto;
}

/* Solved Puzzle */

.puzzle-calendar-cell>.solved {
    background-color: var(--bulma-info);
}

.puzzle-calendar-cell>.solved .label {
    color: var(--bulma-text);
}

.puzzle-calendar-cell>.solved .puzzle-name a {
    color: var(--bulma-link-text);
}

.puzzle-calendar-cell>.solved .puzzle-answer {
    color: var(--bulma-text);
}

/* Meta */
.puzzle-calendar-cell>.box.meta {
    box-shadow: var(--calendar-cell-box-shadow),
                0 0 3px 3px hsla(var(--bulma-success-h),var(--bulma-success-s),var(--bulma-success-l),0.66);
}

.meta-icon {
    font-size: 2em;
    position: absolute;
    top: 0em;
    right: .25em;
}

/* 53px = width of "Secret" tag */
.tag.meta-tag {
    min-width: 53px;
}

.puzzle-list-container {
    max-width: 100%;
    overflow-x: auto;
}