@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v47-all-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v47-all-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/roboto-v47-all-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v47-all-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-v47-all-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('fonts/roboto-v47-all-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* Global variables */
:root {
     --margin-table-horizontal: 0.5em;
     --group-header-height: 4em;
}

html {
    --color-primary: rgb(65 95 145);
    --color-surface-tint: rgb(65 95 145);
    --color-on-primary: rgb(255 255 255);
    --color-primary-container: rgb(214 227 255);
    --color-on-primary-container: rgb(40 71 119);
    --color-secondary: rgb(86 95 113);
    --color-on-secondary: rgb(255 255 255);
    --color-secondary-container: rgb(218 226 249);
    --color-on-secondary-container: rgb(62 71 89);
    --color-tertiary: rgb(112 85 117);
    --color-on-tertiary: rgb(255 255 255);
    --color-tertiary-container: rgb(250 216 253);
    --color-on-tertiary-container: rgb(87 62 92);
    --color-error: rgb(186 26 26);
    --color-on-error: rgb(255 255 255);
    --color-error-container: rgb(255 218 214);
    --color-on-error-container: rgb(147 0 10);
    --color-background: rgb(249 249 255);
    --color-on-background: rgb(25 28 32);
    --color-surface: rgb(249 249 255);
    --color-on-surface: rgb(25 28 32);
    --color-surface-variant: rgb(224 226 236);
    --color-on-surface-variant: rgb(68 71 78);
    --color-outline: rgb(116 119 127);
    --color-outline-variant: rgb(196 198 208);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(46 48 54);
    --color-inverse-on-surface: rgb(240 240 247);
    --color-inverse-primary: rgb(170 199 255);
    --color-primary-fixed: rgb(214 227 255);
    --color-on-primary-fixed: rgb(0 27 62);
    --color-primary-fixed-dim: rgb(170 199 255);
    --color-on-primary-fixed-variant: rgb(40 71 119);
    --color-secondary-fixed: rgb(218 226 249);
    --color-on-secondary-fixed: rgb(19 28 43);
    --color-secondary-fixed-dim: rgb(190 198 220);
    --color-on-secondary-fixed-variant: rgb(62 71 89);
    --color-tertiary-fixed: rgb(250 216 253);
    --color-on-tertiary-fixed: rgb(40 19 46);
    --color-tertiary-fixed-dim: rgb(221 188 224);
    --color-on-tertiary-fixed-variant: rgb(87 62 92);
    --color-surface-dim: rgb(217 217 224);
    --color-surface-bright: rgb(249 249 255);
    --color-surface-container-lowest: rgb(255 255 255);
    --color-surface-container-low: rgb(243 243 250);
    --color-surface-container: rgb(237 237 244);
    --color-surface-container-high: rgb(231 232 238);
    --color-surface-container-highest: rgb(226 226 233);
    --color-positive-color: rgb(57 105 60);
    --color-positive-on-color: rgb(255 255 255);
    --color-positive-color-container: rgb(186 240 183);
    --color-positive-on-color-container: rgb(32 80 38);
}

@media (prefers-color-scheme: dark) {
    html {
        --color-primary: rgb(170 199 255);
        --color-surface-tint: rgb(170 199 255);
        --color-on-primary: rgb(10 48 95);
        --color-primary-container: rgb(40 71 119);
        --color-on-primary-container: rgb(214 227 255);
        --color-secondary: rgb(190 198 220);
        --color-on-secondary: rgb(40 49 65);
        --color-secondary-container: rgb(62 71 89);
        --color-on-secondary-container: rgb(218 226 249);
        --color-tertiary: rgb(221 188 224);
        --color-on-tertiary: rgb(63 40 68);
        --color-tertiary-container: rgb(87 62 92);
        --color-on-tertiary-container: rgb(250 216 253);
        --color-error: rgb(255 180 171);
        --color-on-error: rgb(105 0 5);
        --color-error-container: rgb(147 0 10);
        --color-on-error-container: rgb(255 218 214);
        --color-background: rgb(17 19 24);
        --color-on-background: rgb(226 226 233);
        --color-surface: rgb(17 19 24);
        --color-on-surface: rgb(226 226 233);
        --color-surface-variant: rgb(68 71 78);
        --color-on-surface-variant: rgb(196 198 208);
        --color-outline: rgb(142 144 153);
        --color-outline-variant: rgb(68 71 78);
        --color-shadow: rgb(0 0 0);
        --color-scrim: rgb(0 0 0);
        --color-inverse-surface: rgb(226 226 233);
        --color-inverse-on-surface: rgb(46 48 54);
        --color-inverse-primary: rgb(65 95 145);
        --color-primary-fixed: rgb(214 227 255);
        --color-on-primary-fixed: rgb(0 27 62);
        --color-primary-fixed-dim: rgb(170 199 255);
        --color-on-primary-fixed-variant: rgb(40 71 119);
        --color-secondary-fixed: rgb(218 226 249);
        --color-on-secondary-fixed: rgb(19 28 43);
        --color-secondary-fixed-dim: rgb(190 198 220);
        --color-on-secondary-fixed-variant: rgb(62 71 89);
        --color-tertiary-fixed: rgb(250 216 253);
        --color-on-tertiary-fixed: rgb(40 19 46);
        --color-tertiary-fixed-dim: rgb(221 188 224);
        --color-on-tertiary-fixed-variant: rgb(87 62 92);
        --color-surface-dim: rgb(17 19 24);
        --color-surface-bright: rgb(55 57 62);
        --color-surface-container-lowest: rgb(12 14 19);
        --color-surface-container-low: rgb(25 28 32);
        --color-surface-container: rgb(29 32 36);
        --color-surface-container-high: rgb(40 42 47);
        --color-surface-container-highest: rgb(51 53 58);
        --color-positive-color: rgb(158 212 156);
        --color-positive-on-color: rgb(5 57 17);
        --color-positive-color-container: rgb(32 80 38);
        --color-positive-on-color-container: rgb(186 240 183);
    }
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
    color: var(--color-on-surface);

    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
}

body {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    background: var(--color-secondary-container);
}

main {
    max-width: 45em;
    width: 100%;
}

hgroup {
    /*padding: 1em;*/
}

h1 {
    font-size: 1.25em;
    font-weight: 500;
    padding: 1em;
}

li {
    list-style-type: none;
}

h2 {
    font-size: 1.25em;
    font-weight: 500;
    margin-top: 1em;
}

.icon {
    width: 1.5em;
    height: 1.5em;
    /*vertical-align: -26%;*/
    fill: var(--color-on-surface);
}

.session-list {
    display: grid;
    column-gap: var(--margin-table-horizontal);
    grid-template-columns: min-content min-content auto min-content min-content min-content;
    grid-template-areas: "number icon name distance gender caret";
    background-color: var(--color-surface);
}

.heat-list {
    display: grid;
    column-gap: var(--margin-table-horizontal);
    grid-template-columns: min-content auto min-content;
    grid-template-areas: "number name time";
    background-color: var(--color-surface);
}

.event-item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;

    /* top right bottom left */
    padding: 0.5em 0.5em 0.5em 1em;
}

.session-item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
    padding: 0.5em var(--margin-table-horizontal);
    background-color: var(--color-primary-container);
}

.heat-item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: auto min-content;
    padding: 0.5em 1em;
    background-color: var(--color-primary-container);
}

.heat-number {
    font-weight: 500;
    color: var(--color-on-primary-container);
}

.planned-time {
    white-space: nowrap;
}

.entry-item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;

    /* top right bottom left */
    padding: 0.5em 1em 0.5em 1em;
}

.name {
    grid-area: name;
}

.name {
    grid-area: name;
    grid-row: auto;
}

.event-item:active > .icon.caret,
.event-item:hover > .icon.caret {
    fill: var(--color-secondary);
}

.session-number {
    font-weight: 500;
    grid-column: 2/-1;
    color: var(--color-on-primary-container);
}

.event-item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;

    /* top right bottom left */
    padding: 0.5em 0.5em 0.5em 1em;
}

.event-item:has(+ .event-item){
    border-bottom: 1px solid var(--color-outline-variant);
}

.entry-item:has(+ .entry-item){
    border-bottom: 1px solid var(--color-outline-variant);
}

.number {
    justify-self: end;
    white-space: nowrap;
    padding-right: 0.5em;
    color: var(--color-secondary);
    grid-area: number;
    grid-row: auto;
}

.entry-time {
    white-space: nowrap;
    grid-area: time;
    grid-row: auto;
    font-style: italic;
}

.icon.gender {
    fill: var(--color-secondary);
}

.icon.caret {
    fill: var(--color-outline-variant);
    transform: rotate(90deg);
}

.distance {
    justify-self: end;
    white-space: nowrap;
    grid-area: distance;
    grid-row: auto;
}

#overview {
    font-size: 1.5em;
    font-weight: 500;
    padding: 0em 1em;
}

#creator {
    font-size: 0.875em;
    padding: 1.5em 1em;
}


.flag.de-DE {
    /*Aspect ratio: 5:3 */
    height: 1.5em;
    width: 2.5em;
}

.flag.nl {
    /*Aspect ratio: 3:2 */
    height: 1.5em;
    width: 2.25em;
}

.flag.en-GB {
    /*Aspect ratio: 2:1 */
    height: 1.5em;
    width: 3em;
}