body {
    background-color: skyblue;
}

/* Custom elements are inline by default, and the instance list's frame wraps a card. */
turbo-frame {
    display: block;
}

/* Long ConfigItem values on the instance page (templates/instance/_config_frame.html.twig): the row
   shows the opening words and unfolds to the whole value, so one paragraph-long item — a privacy
   text, say — does not stretch the table. Closed, the summary is the preview; open, it becomes the
   control that folds the value away again. */
.config-value summary {
    cursor: pointer;
}

.config-value .config-value-collapse,
.config-value[open] .config-value-preview {
    display: none;
}

.config-value[open] .config-value-collapse {
    display: inline;
    color: var(--bs-secondary-color, #6c757d);
    font-family: var(--bs-body-font-family);
    font-size: 0.875rem;
}

/* A whole privacy policy would otherwise push the rest of the table off the screen. */
.config-value-full {
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Calendar heatmap (templates/statistics/_heatmap.html.twig): one column per week, one row per
   weekday. Long ranges simply scroll horizontally rather than squashing the cells. */
.heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.heatmap {
    display: flex;
    gap: 0.25rem;
    min-width: min-content;
}

.heatmap-labels {
    display: grid;
    /* The first row lines up with the month ruler above the cells. */
    grid-template-rows: 1rem repeat(7, 0.85rem);
    gap: 2px;
    font-size: 0.7rem;
    line-height: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: right;
    padding-right: 0.15rem;
    flex-shrink: 0;
}

.heatmap-weeks {
    display: flex;
    gap: 2px;
}

.heatmap-week {
    display: grid;
    grid-template-rows: 1rem repeat(7, 0.85rem);
    gap: 2px;
}

.heatmap-month {
    font-size: 0.7rem;
    line-height: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.heatmap-cell {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 2px;
    background-color: #ebedf0;
}

/* Blue scale, matching the daily chart's series colour. */
.heatmap-cell.level-1 {
    background-color: #b9d4fe;
}
.heatmap-cell.level-2 {
    background-color: #7cb0fd;
}
.heatmap-cell.level-3 {
    background-color: #3d8bfd;
}
.heatmap-cell.level-4 {
    background-color: #0a58ca;
}

/* A day inside the range that never reported: outlined, so a gap is visibly different from a
   reported zero. */
.heatmap-cell.is-gap {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #dc354533;
}

/* Padding to whole weeks — present for alignment only. */
.heatmap-cell.is-outside {
    background-color: transparent;
}

/* Live dashboard (templates/live/_tiles.html.twig): the wall of per-instance tiles. Tabular
   figures so the numbers in a column line up as the wall refreshes — proportional digits make a
   14 visibly narrower than an 88 and the eye reads that as a change that did not happen. */
.live-metric {
    font-variant-numeric: tabular-nums;
}

/* Thin enough to read as a gauge on the tile rather than as a second headline. */
.live-progress {
    height: 0.35rem;
}

/* The tile's bottom line holds two figures side by side in a column that is barely 240px wide at
   five tiles per row. Smaller than .small, and not allowed to wrap: a footer breaking onto a
   second line makes that one tile taller than its neighbours and the whole row with it. */
.live-footer {
    font-size: 0.75rem;
    white-space: nowrap;
}