/* Default styles for html elements */
/* -------------------------------- */

:host {
    --base-size: 1em;

    --text-xs: calc(0.8 * var(--base-size));
    --text-s: calc(0.9 * var(--base-size));
    --text-m: var(--base-size);
    --text-l: calc(1.2 * var(--base-size));
    --text-xl: calc(1.5 * var(--base-size));

    --space-xs: calc(0.125 * var(--base-size));
    --space-s: calc(0.25 * var(--base-size));
    --space-m: calc(0.5 * var(--base-size));
    --space-l: calc(1.0 * var(--base-size));
    --space-xl: calc(1.2 * var(--base-size));
    --space-xxl: calc(1.5 * var(--base-size));

    --border-s: 1px;
    --border-m: 2px;

    --checkbox-size: var(--text-s);
    --button-s: calc(1.8 * var(--base-size));
    --button-m: calc(2.0 * var(--base-size));

    --max-content-width: calc(45 * var(--base-size));
    --radius: var(--space-s);
    --line-height: 1.5;

    --lightgreen: #eafaea;
    --mediumgreen: #d6f5d6;
    --darkgreen: 	#c1f0c1;
    --verydarkgreen: #84e184;
    --shadowgreen: #9fce9f;

    --lightyellow: #ffffaa;

    --darkg: #555555;
    --mediumg: #d0d0d0;
    --lightg: #f0f0f0;

    --darkred: #a32929;
    --red: #dd0000;

    --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace;
}

:host {
    font-size: var(--text-m);
    line-height: var(--line-height);
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* The report is in a shadow DOM so outside selectors don't reach it but properties */
/* can still be inherited from a parent element. We make sure it has black text on */
/* a white background otherwise eg a dark mode in the page could make parts of it */
/* unreadable. */

#report {
    background: white;
    color: black;
    color-scheme: only light;
    border-radius: var(--radius, 0);
    max-width: max-content;
}



h1 {
    font-size: var(--text-xl);
}

button > * {
    pointer-events: none;
}

input[type="checkbox"] {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
}

/* pure.css / Normalize.css overrides the default firefox blue ring around focussed */
/* elements with something almost impossible to see, making it impossible to use */
/* tab navigation. We revert it to the browser's appropriate default. */
#report :focus-visible {
    outline: revert;
}


:is(select, summary, button) {
    cursor: pointer;
}

summary > * {
    display: inline;
}

p {
    margin: var(--space-m) 0;
}

code {
    overflow-wrap: anywhere;
}

pre {
    margin: 0;
}

code, pre {
    font-family: var(--fontStack-monospace);
    font-size: var(--text-s);
}

table {
    font-size: var(--text-m);
}

#report :is(td, th) {
    padding: var(--space-s) var(--space-m);
    white-space: nowrap;
}

/* Align the items of definition lists, used to show the columns metadata (number */
/* of null values, mean, etc) */

dl {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: var(--space-m);
    margin: 0;
}

dt {
    grid-column-start: 1;
    font-weight: bold;
    justify-self: end;
}

dt::after {
    content: ":";
}

dd {
    grid-column-start: 2;
    justify-self: start;
    margin: 0;
}

/* Generic utility classes */
/* ----------------------- */

:is([data-hidden], [data-excluded-by-column-filter]){
    display: none !important;
}

[data-not-visible]{
    visibility: hidden;
}

.wrap-long-name {
    overflow-wrap: anywhere;
}

.margin-r-m {
    margin-inline-end: var(--space-m);
}

.margin-v-m {
    margin-block-start: var(--space-m);
    margin-block-end: var(--space-m);
}

.margin-t-s {
    margin-top: var(--space-s);
}

.margin-t-m {
    margin-top: var(--space-m);
}

.horizontal-scroll {
    overflow-x: auto;
}

.select-all {
    user-select: all;
}

.select-none {
    user-select: none;
}

.wrapper {
    padding-inline-start: var(--space-l);
    padding-inline-end: var(--space-l);
    padding-block-end: var(--space-m);
}

.flow > * + * {
    margin-top: var(--space-m);
}

.text {
    max-width: var(--max-content-width);
}

.shrink {
    display: flex;
}

.shrink > * {
    width: 0;
    flex-grow: 1;
}

.shrinkable-text {
    flex-basis: 20rem;
    flex-grow: 1;
}

.flex {
    display: flex;
    gap: var(--space-m);
    align-items: center;
}

.gap-l {
    gap: var(--space-xl);
}

.flex-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
}

.space-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap > * {
    margin: 0;
}

#report .ellided {
    max-width: 70ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#report .ellided-short {
    max-width: 30ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clickable {
    cursor: pointer;
}

:is(.ok, .warning, .critical) {
    font-weight: bold;
}

.ok {
    color: green;
}

.warning {
    color: #ff6600;
}

.critical {
    color: var(--red);
}

.box-shadow {
    --shadow-color: 0deg 0% 63%;

    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
}

/* Misc tweaks */
/* ----------- */


#report {
    padding-top: var(--space-s);
}

#report svg {
    max-width: 100%;
}

.report-header {
    --max-content-width: 100em;
    font-size: var(--text-l);
    padding-block-start: var(--space-s);
    padding-block-end: var(--space-s);
}

.report-header > h1 {
    margin: 0;
}

.important-note {
    background-color: var(--lightgreen);
    padding: var(--space-m);
    border-radius: var(--radius);
}
