/* Planera: rubriken och flikarna, och ramen för lista och detalj bredvid varandra. */

.plan {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.plan-header {
    padding-top: 8px;
}

.plan-header .screen-title {
    padding-bottom: 12px;
}

.plan-header .segmented {
    margin-bottom: 16px;
}

/* Rubriken överst över hela bredden, med samma bredd och marginaler som innehållet under. */
.plan-pinned {
    flex: none;
    width: 100%;
    max-width: calc(var(--wide-max) + 2 * var(--screen-padding));
    margin: 0 auto;
    padding: 20px var(--screen-padding) 0;
}

.plan-pinned:not([hidden]) + .split {
    width: 100%;
    max-width: calc(var(--wide-max) + 2 * var(--screen-padding));
    margin: 0 auto;
}

.plan-pinned:not([hidden]) + .split .split-master .screen-content {
    padding-top: 0;
}

.plan .split-detail > .screen > .screen-content {
    max-width: none;
}

/* På smal bredd ligger detaljen över listan, som i telefonen: då syns varken listorna eller rubriken. */
.plan {
    container: plan / inline-size;
}

@container plan (max-width: 799.98px) {
    .plan-pinned {
        display: none;
    }
}

.plan-main,
.plan-pushed {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Raden överst på en undersida: tillbaka till vänster, åtgärder till höger. */
.page-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 -4px 6px;
}

.page-bar .spacer {
    flex: 1;
}