@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+ */
}

@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+ */
}

@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+ */
}

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);

    /* Modified colors */
    --color-on-surface: rgb(0 0 0 / 87%);
    --color-on-surface-variant: rgb(0 0 0 / 60%);
    --color-outline-variant: rgb(0 0 0 / 12%);

    /* New colors */
    --color-surface-sepia: rgb(228 226 212);
    --color-on-surface-sepia: rgb(37 34 34);

    --color-gold: rgb(254 191 73 / 60%);
    --color-silver: rgb(158 158 158 / 60%);
    --color-bronze: rgb(254 100 73 / 60%);
}

@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);

        /* Modified colors */
        --color-on-surface: rgb(255 255 255 / 87%);
        --color-on-surface-variant: rgb(255 255 255 / 60%);
        --color-outline-variant: rgb(255 255 255 / 16%);

        /* New colors */
        --color-surface-sepia: rgb(228 226 212);
        --color-on-surface-sepia: rgb(37 34 34);

        --color-gold: rgb(254 191 73 / 60%);
        --color-silver: rgb(158 158 158 / 70%);
        --color-bronze: rgb(254 100 73 / 55%);
    }
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
    color: var(--color-on-surface);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

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

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

.chip {
    display: inline-flex;
    /*align-items: center;*/
    vertical-align: -25%;
    font-size: 0.875em;
    font-weight: 500;
    width: min-content;
    /* height: 1.5em; */
    z-index: 0;
    white-space: nowrap;
    border-radius: 0.5em;
    padding-right: 0.5em;

    background-color: var(--color-tertiary-container);
    color: var(--color-on-tertiary-container);
    fill: var(--color-on-tertiary-container);
}

.chip > svg {
    width: 1.125em;
    height: 1.125em;
    padding: 0.1875em;
}


/* entries as scroll targets */

.row:target {
    scroll-margin-top: 4.25em;
    background: var(--color-tertiary-container);
}

.club-record:target {
    scroll-margin-top: 4.25em;
}

.row.first:target {
    background: var(--color-gold);
}

.row.second:target {
    background: var(--color-silver);
}

.row.third:target {
    background: var(--color-bronze);
}

/* .row:target .chips.highlight > .chip  */
.row:target .chip {
    background: var(--color-surface);
}

#credentials {
    background: var(--color-surface);
    padding: 1em;
    border-radius: 1em;
}

#cred-table {
    display: grid;
    grid-template-columns: min-content auto;
    column-gap: 1em;
    margin: 1em 0em;
}

#cred-table > li {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
}

.cred-label {
    font-weight: 500;
    white-space: nowrap;
    justify-self: end;
}

#privacy-notice {
    color: var(--color-error)
}

#email-link {
    color: var(--color-primary);
    text-decoration: underline;
}

#email-link:hover {
    color: var(--color-tertiary);
}


/*Title*/

header {
    width: 100%;
    max-width: 50em;
    display: grid;
    align-items: center;
    grid-template-columns: min-content auto;
    padding: 0.5em 0em;
}

footer {
    display: grid;
    justify-items: center;
    margin: 3em 0em;
}

footer p {
    font-size: 0.875em;
    color: var(--color-on-primary-container);
    padding: 0.25em;
}

footer a {
    color: inherit;
}

#header-icon {
    width: 1.5em;
    height: 1.5em;
    margin: 1em;
    fill: var(--color-on-primary-container);
}

#header-title {
    color: var(--color-on-primary-container);
    font-size: 1.25em;
    font-weight: 500;
}

#title-group, #club-records-title-group {
    display: grid;
    grid-template-columns: auto min-content;
    padding: 1em 1em;
}

#switch-gender {
    align-self: flex-start;
    margin: 0em 0em;
}

h1, h2 {
    font-size: 1.75em; 
    font-weight: 500;
    position: relative;
    top: -0.04em; /* TODO: Proper alignment in best lists */
}

.subheading {
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

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

#navigation {
    padding-bottom: 0.5em;
    border-radius: 1em;
    background: var(--color-surface);
}

#rekorde {
    margin-top: 2em;
    border-radius: 1em;
    background: var(--color-surface);
}

.stroke-links {
    width: 100%;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: min-content auto;
    border-bottom: 1px solid var(--color-outline-variant);
    padding: 0.375em 0em;
}

#navigation > .stroke-links:last-child {
    border-bottom: none;
}

.stroke-label {
    font-weight: 500;
    white-space: nowrap;
    display: block;
    height: auto;
    margin-left: 1em;
    margin-top: 0.6em;
}

.distance-links {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    margin-right: 1em;
}

.distance-links > li {
    margin: 0.125em 0.125em;
}

.distance-links > li:first-child > a {
    border-radius: 1.5em 0.25em 0.25em 1.5em;
}

.distance-links > li:last-child > a {
    border-radius: 0.25em 1.5em 1.5em 0.25em;
}

.distance-links > li:hover > a {
    border-radius: 1.5em 1.5em 1.5em 1.5em;

    background: var(--color-primary);
    color: var(--color-on-primary);
}

.stroke-links .records-link {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.stroke-links a {
    display: block;
    border-radius: 0.25em;

    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    padding: 0.5em 1em;
    transition: color 0.15s, background 0.15s, border-radius 0.15s;
}

/* .stroke-label {
    display: grid;
    grid-template-columns: auto min-content;
    top: 0;
    position: sticky;
    background: var(--color-primary-container);
} */

/* outlined button with icon */

.button-outline {
    white-space: nowrap;
    text-decoration: none;
    padding: 0.5em 0.75em 0.5em 1em;
    color: var(--color-on-primary-container);
    fill: var(--color-on-primary-container);
    border: 1px solid var(--color-on-primary-container);
    border-radius: 2em;
    transition: background 0.15s, color 0.15s, border-radius 0.15s;
    align-self: center;
}

.button-outline:hover {
    color: var(--color-on-primary);
    fill: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: 0.25em;
}

.button-outline > .icon {
    fill: inherit;
    transition: fill 0.15s;
    margin-left: 0.75em;
}

/* club records */

#club-records-header {
    display: grid;
    height: 4.25em;
    grid-template-columns: auto min-content;
    column-gap: 1em;
    top: 0;
    position: sticky;
    background: var(--color-primary-container);
    padding: 0em 1em;
}

#club-records-title {
    font-weight: 500;
    font-size: 1.25em;
    padding: 1em 0em;
    color: var(--color-on-primary-container);
    align-self: center;
}

#table-club-records {
    grid-template-columns: min-content min-content min-content auto min-content auto;
    display: grid;
    
    /* background: var(--color-surface); */
    border-radius: 1em;
}

#table-club-records > li {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
}

.club-record {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
   
    padding: 0.25em 1em;
    border-bottom: 1px solid var(--color-outline-variant);
    /* background-color: aqua; */
}

#table-club-records > li:first-child > .club-record {
    padding-top: 0.5em; 
    /* border-radius: 1em 1em 0em 0em; */
}

#table-club-records> li:last-child > .club-record {
    padding-bottom: 0.5em;
    border-bottom: none;
    border-radius: 0em 0em 1em 1em;
}

.club-record:hover {
    /* fill: var(--color-on-secondary-container); */
    background-color: var(--color-tertiary-container);
}

.club-record:hover .chip {
    /* fill: var(--color-on-secondary-container); */
    background-color: var(--color-surface);
}


.club-record > span { 
    margin-left: 1em;
}

.club-record > .distance {
    justify-self: end;
}

.club-record > .stroke, .club-record > .distance {
    white-space: nowrap;
    font-weight: 500;
    margin-left: 0.25em;
}


/* leaderboard changes */

#leaderboard-changes-header {
    display: grid;
    grid-template-columns: auto;
    top: 0;
    position: sticky;
    background: var(--color-primary-container);
    padding: 0em 1em;
}

#leaderboard-changes-title {
    font-weight: 500;
    font-size: 1.25em;
    padding: 1em 0em;
    color: var(--color-on-primary-container);
    align-self: center;
}

#table-changes {
    grid-template-columns: min-content min-content min-content auto min-content min-content min-content min-content auto;
    display: grid;
    
    background: var(--color-surface);
    border-radius: 1em;
}

#table-changes > li {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
}

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

    padding: 0.25em 1em;
    border-bottom: 1px solid var(--color-outline-variant);
    /* background-color: aqua; */
}

#table-changes > li:first-child > .change {
    padding-top: 0.5em;
    border-radius: 1em 1em 0em 0em;
}

#table-changes > li:last-child > .change {
    padding-bottom: 0.5em;
    border-bottom: none;
    border-radius: 0em 0em 1em 1em;
}

.change:hover {
    /* fill: var(--color-on-secondary-container); */
    background-color: var(--color-tertiary-container);
}

.change:hover .chip {
    /* fill: var(--color-on-secondary-container); */
    background-color: var(--color-surface);
}

.change > span { 
    margin-left: 1em;
}

.change > .icon.to {
    margin-left: 1em;
}

.change > .distance {
    justify-self: end;
}

.change > .stroke, .change > .distance {
    white-space: nowrap;
    font-weight: 500;
    margin-left: 0.25em;
}

.old-time {
    /* grid-column: 4/4;  */
    color: var(--color-on-surface-variant);
    /* border: 1px solid green; */
}

.chip.old-date {
    background-color: var(--color-surface-container-highest);
    color: var(--color-on-surface-variant);
    fill: var(--color-on-surface-variant);
}

.old-time, .change > .time {
    white-space: nowrap;
    font-weight: 500;
    justify-self: end;
}



/* === LEADERBOARD === */

/* leaderboard header with title and backlink */

.leaderboard-header {
    display: grid;
    height: 4.25em;
    grid-template-columns: auto min-content;
    column-gap: 1em;
    top: 0;
    position: sticky;
    background: var(--color-primary-container);
    padding: 0em 1em;
}

.leaderboard-title {
    font-weight: 500;
    font-size: 1.25em;
    align-self: center;
    /* padding: 1em 0em; */
    color: var(--color-on-primary-container);
}

/* main leaderboard table */

.table {
    grid-template-columns: min-content auto min-content auto;
    display: grid;
    column-gap: 1em;
    background: var(--color-surface);
    /*padding: 0.5em 0em;*/
    border-radius: 1em;
}

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

    padding: 0.25em 1em;
    border-bottom: 1px solid var(--color-outline-variant);
}

.table > .row:first-child {
    padding-top: 0.5em;
    border-radius: 1em 1em 0em 0em;
}

.table > .row:last-child {
    padding-bottom: 0.5em;
    border-bottom: none;
    border-radius: 0em 0em 1em 1em;
}

.row.first {
    background: linear-gradient(90deg, var(--color-gold), #FFFFFF00, #FFFFFF00);
}

.row.second {
    background: linear-gradient(90deg, var(--color-silver), #FFFFFF00, #FFFFFF00);
}

.row.third {
    background: linear-gradient(90deg, var(--color-bronze),  #FFFFFF00,  #FFFFFF00);
}

/* rank and rank change icons */

.rank {
    white-space: nowrap;
    justify-self: end;
}

.change-positive, .change-negative, .change-neutral {
    width: 1.5em;
    height: 1.5em;
    /*vertical-align: -26%;*/
    vertical-align: -25%;
}

.change-negative, .change-neutral {
    fill: var(--color-outline-variant);
}

.change-positive,
.change-neutral.time-improved {
    fill: var(--color-primary);
}

/* swimmer name and year */

.year {
    color: var(--color-on-surface-variant);
}

/* swim time */

.time {
    white-space: nowrap;
    justify-self: end;
    font-weight: 500;
}

/* .chips.highlight > .chip {
    background-color: var(--color-positive-color-container);
    color: var(--color-positive-on-color-container);
    fill: var(--color-positive-on-color-container);   
}

.change:hover .chips.highlight > .chip,
.club-record:hover .chips.highlight > .chip {
    background-color: var(--color-surface);
} */


/* .chips: see @media */

img {
    width: 100%;
}

.hero {
    border-radius: 1em 1em 0em 0em;
}

.content {
    display: grid;
    background: var(--color-surface);
    /*padding: 1em;*/
    border-radius: 1em;
}

.content-text {
    padding: 2em 2em 1em 2em;
}

.first-sentence {
    font-weight: 500;
}

.content-text > p {
    hyphens: auto;
}

.content-text > p + p {
    margin-top: 0.5em;
}


@media (max-width: 50em) {
    .table, #navigation, #table-changes, #credentials, #table-club-records {
        border-radius: 0;
        border-bottom: 1px solid var(--color-outline-variant);
    }

    #rekorde {
        border-radius: 0;
        border-top: 1px solid var(--color-outline-variant);
    }

    #table-changes > li:first-child > .change,
    #table-changes > li:last-child > .change {
        border-radius: 0em 0em 0em 0em;
    }

    #table-club-records > li:first-child > .club-record,
    #table-club-records > li:last-child > .club-record {
        border-radius: 0em 0em 0em 0em;
    }

    .table > .row:first-child,.table > .row:last-child {
        border-radius: 0em 0em 0em 0em;
    }

    header, .leaderboard-header, 
    #leaderboard-changes-header,
    #club-records-header {
        border-bottom: 1px solid var(--color-outline-variant);
    }

    /* changes */
        
    #table-changes {
        grid-template-columns: min-content min-content min-content auto min-content min-content min-content min-content;
    }

    .change > .name {
        grid-column: 4/-1;
    }

    .change > .old-time {
        grid-column: 4 / 4;
    }

    .content {
        border-radius: 0;
        border-bottom: 1px solid var(--color-outline-variant);
    }
    
    .hero {
        border-radius: 0;
    }

    .content-text {
        padding: 1em 1em 0em 1em;
    }
}

@media (max-width: 40em) {
    #title-group, #club-records-title-group {
        grid-template-columns: 1fr;
    }

    #switch-gender {
        margin: 0.5em 0em 0em 0em;
        justify-self: end;
    }

    .table {
        grid-template-columns: min-content auto min-content;
        border-radius: 0;
    }

    .row > .chips {
        justify-self: end;
        grid-column: 2/-1;
    }

    #table-club-records {
        grid-template-columns: min-content min-content min-content auto min-content;
    }

    .club-record > .chips {
        justify-self: end;
        grid-column: 2/-1;
    }
}

@media (max-width: 35em) {
    #table-changes {
        grid-template-columns: min-content min-content min-content auto min-content min-content;
    }

    .change > .chips {
        display: none;
    }
}