/* Date calculator (/date-calculator): what is its own, the grid of date fields with their Today buttons and the
   holiday list. The mode tabs, fields, buttons, result tiles, notes and colours come from the app kit (css/app-kit,
   docs/app-kit.md); the accent is the time category's violet. Loaded only on this app's page (StylePaths). */

/* Full width blocks, also on phones, where the site sets align-items: start on the stage (seo-pages.css); the mode
   tabs keep their own width. */
.dcal-landing-app > .filter-landing-stage > * {
    align-self: stretch;
}

.dcal-landing-app > .filter-landing-stage > .dcal-tabs {
    align-self: flex-start;
}

/* The fields of a mode: as many columns as fit, a date field with its Today button side by side. */
.dcal-landing-app .dcal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--ak-space-3);
    align-items: end;
}

.dcal-landing-app .dcal-pair {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.dcal-landing-app .dcal-pair > .ak-row {
    flex: 1 1 auto;
    min-width: 0;
}

/* Result tiles: wide enough for "1 year, 2 months and 3 days". */
.dcal-landing-app .dcal-results {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.dcal-landing-app .dcal-res dd {
    margin: 0;
}

/* The results are phrases ("7 weeks, 6 days"), one size for all; the answer tile steps down when long (app.fit). */
.dcal-landing-app .dcal-res:not(.ak-stat--main) .ak-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
}

.dcal-landing-app .dcal-holidays {
    margin: 0;
    padding-inline-start: 1.2rem;
    font-size: var(--ak-fs-sm);
}

.dcal-landing-app .dcal-actions {
    align-items: center;
}

/* Phones: the tabs fill the row, one column of fields. */
@media (max-width: 600px) {
    .dcal-landing-app > .filter-landing-stage > .dcal-tabs {
        align-self: stretch;
    }

    .dcal-landing-app .dcal-tabs > .ak-seg-btn {
        flex: 1 1 auto;
    }

    .dcal-landing-app .dcal-grid {
        grid-template-columns: 1fr;
    }
}