* { box-sizing: border-box; }

/* It ain't 1994 */
a { text-decoration: none }

/* Make paragraphs readable */
p { max-width: 45em; line-height:1.4  }


/* -- Layout -- */

body { width: 56em; margin: auto; }


/* -- Colour Scheme -- */

:root {color-scheme: dark;}

a {color: #aac;}
a {color: #aac;}

/* Colours for scores */
.c1 { color: #c66; }
.c2 { color: #c84; }
.c3 { color: #cc8; }
.c4 { color: #8c8; }
.c5 { color: #8cf; }


/* -- Event participation bars -- */

.event-bars { padding-right: 8px; padding-bottom: 5px; }
.event-bar { display: flex; height: 10px; width: 600px; }
.chart-bar { height: 10px; }
.compo-bar { background: #446; }
.jam-bar   { background: #464; }
.other-bar { background: #644; }


/* -- Tables -- */

/* De-emphasize th */
th { font-weight: normal; color: #888 }
/* Override weird center-aligned <th>s that browsers like */
th { text-align: left; }

/* Make it clear there's a tooltip if you're patient */
th[title] { cursor: help; }

td { max-width: 20em; overflow: hidden; text-overflow: ellipsis; }

/* Table spacing */
td + td,
th + th { padding-left: 5px }
table { border-collapse: collapse; }
td { padding: 2px 4px }

/* Divider between TBODYs (we use this for medallists) */
tbody tr:last-child td {
    padding-bottom: .5em;
}
tbody + tbody tr:first-child td {
    border-top: 1px solid #444;
    padding-top: .5em;
}

/* Stop emojis stretching out table rows vertically */
td { line-height: 1; }

/* Table column alignment */
.al { text-align: left; }
.ar { text-align: right; }

/* No break in td */
td { white-space: nowrap; }

/* Sticky headers */
tbody:first-child tr:first-child { position: sticky; top: 0; z-index: 1; background: canvas; }


/* -- Fancy Tooltips -- */

#tooltip {
    position: fixed; pointer-events: none; z-index: 1000;
    background: #222; border: 1px solid #444; border-radius: 4px;
    padding: 6px 10px; font-size: 13px; white-space: nowrap;
    display: none;
}
#tooltip span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle }

/* -- Comments -- */
article h3 { font-size: 100%; color: #777; }
article + article { margin-top: 4em }

/* Sticky */
.sticky{position:sticky;top:0;background:canvas;z-index:1}