/* The page around the report: system colours only, so light and dark follow the page's theme. The
   report itself is themed by its --pk-* tokens. */
:root {
    color-scheme: light dark;
    font-family: system-ui, sans-serif;
}
:root[data-theme="light"] {
    color-scheme: light;
}
:root[data-theme="dark"] {
    color-scheme: dark;
}
body {
    margin: 0;
    background: Canvas;
    color: CanvasText;
}
header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}
h1 {
    margin: 0;
    font-size: 1.25rem;
}
select {
    min-height: 32px;
    margin-left: 8px;
    font: inherit;
}
main {
    padding: 0 16px 16px;
}
/* the report's height: the window's height minus the header and the event line, at least 640 px; on a
   phone the zones stack above the table, so the report takes the screen's height (the page scrolls to
   it, the table scrolls inside it) */
pivot-report {
    height: max(640px, calc(100svh - 104px));
}
@media (max-width: 639px) {
    pivot-report {
        height: max(640px, calc(100svh - 24px));
    }
}
#last-event {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}