@font-face {font-family: 'Goldman';src: url('/fonts/goldman/Goldman-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;}

:root {
    --height-cover-small: 5rem;
    --font-family-1: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-family-2: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media screen and (min-width: 1350px) {:root {--height-cover-small: 5rem;}}

*, html {
    box-sizing: border-box;
    font-family: var(--font-family-1);
    /* font-family: 'Stein', sans-serif; */
    /* font-family: "Overpass Mono", monospace; */
}
@media screen and (max-width: 892px) {html {font-size: 14px;}}
/* @media screen and (min-width: 800px) {html {font-size: 16px;}}
@media screen and (min-width: 1350px) {html {font-size: 18px;}} */

::-webkit-scrollbar {width: var(--gap-side); height: var(--gap-side);}
::-webkit-scrollbar-track { border-radius: 0;}
::-webkit-scrollbar-thumb {background: hsl(var(--hsl-text), 0.5); border-radius: 0;}
/* [popover]::-webkit-scrollbar-thumb {background: hsl(var(--hsl-bg), 0.5);} */

/* 
============================
THEME SETTINGS CLARIFICATION 
============================ */

span#clarification-accent-1::after {content: ": your overview (account)";}
span#clarification-accent-2::after {content: ": buttons";}
span#clarification-accent-3::after {content: ": active buttons";}

/* 
=================
GENERAL HTML TAGS 
================= */

h1 a {color: hsl(var(--hsl-text));}
h1>a>pre { text-shadow: 0px 0px 1px hsl(var(--hsl-text)); }
button, input[type="submit"], input[type="radio"], input[type="checkbox"], u[onclick], h1 > span {cursor: pointer;}
h2 {font-size: 1.5rem; font-family:"Goldman", sans-serif;} 
h3 {font-size: 1.3rem;}
h4 {font-size: 1.1rem; font-weight: 500;}
h5 {font-size: 1rem;}
h1 small {font-size: 1.4rem; font-weight: 600;}
h2 small, h3 small {font-size: 1rem; font-weight: 400;}
fieldset, hr {border-color: hsl(var(--hsl-text), 0.5 ); border-width: 1px;}
hr {display: none;}
hr.strong {border-color: hsl(var(--hsl-text));}
ul {padding-left: 2rem;}
li:not(:last-of-type) {padding-bottom: var(--gap-small);}
div.collection:not(.hidden) { /*voor filters en voor default kleuren */
    display: flex;
    gap: var(--gap-small);
    flex-wrap: wrap;
}
ul.error-list {list-style-type: '☢ ';     list-style-position: inside; padding-left: 0;}


/* 
==============
MAIN STRUCTURE 
============== */

body {
    display: flex;
    flex-direction: column;
    margin: 0 var(--gap-side);
    position: relative;
    height: max-content;
}
header>p, header>p *, #login *, #logout *, nav * { font-family:"Goldman", sans-serif;}
body>div.top-wrapper {

    background-color: hsl(var(--hsl-bg));
    z-index: 5000; /* voor als ik een sticky header wil*/
}
body>div.bottom-wrapper {
    flex: 1 1 auto;
    /* min-height: 0; voor wat was dit weeral? */
    display: flex;
    flex-direction: column;
}

header {
    line-height: 1rem;
}
#login, #logout {
    padding-bottom: var(--gap-small);
}
nav {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.4rem;
    background: hsl(var(--hsl-bg));
    padding: var(--gap-side) 0;
    border-bottom: 1px solid hsl(var(--hsl-text));
    border-top: 1px solid hsl(var(--hsl-text));
    z-index: 9999;
    font-weight: 400;
    text-transform: uppercase;
    /* top: 0;
    position: sticky; */
}

nav>ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-medium);

    list-style: none;
    padding: 0;
    margin: 0;
}
nav>ul>li {padding-bottom: 0 !important;}

/* nav ul:not(:last-of-type)::after {content: "║"; margin: 0 var(--gap-small); font-weight: 400;} */
/* nav li + li::before { content: "|"; margin: 0 var(--gap-small);} */

main { display: flex; flex-direction: column; flex-grow: 1; position: relative;}
main.not-overview {margin-bottom: var(--gap-medium);}

footer {
    border-top: 1px solid hsl(var(--hsl-text)); 
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    font-size: 0.8rem;
}
footer p {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-mini);
}

footer *, footer *::before{
    color: hsl(var(--hsl-text));
    border-color: hsl(var(--hsl-text)) !important;
}


nav {
    position: sticky;
    top: -1px;
}


.week h3 {
    position: sticky;
    top: calc( var(--height-nav) - 2px);
}

.week>.day>h4 {
    position: sticky;
    top: calc( var(--height-nav) + 1rem + 9px)
}


/*
==================
CONTAINER OVERVIEW 
================== */
.frame {
    border: 1px solid hsl(var(--hsl-text), 0.5 );
    padding: 0 var(--gap-side);
    background-color: hsl(var(--hsl-accent3));
}

/* structure */
/* .overview>section  {
   /* margin: var(--gap-small) 0;  
} */

.overview>section.frame {
    border-top-width: 0px;
    border-color: hsl(var(--hsl-text));
}

article.container-item {
    display: flex;
    /* flex-direction: row-reverse; */
    
    width: 100%;
    gap: var(--gap-small);
    padding: var(--gap-medium) 0;
}


/* Cover */

article.container-item>.cover {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex: 1 0 auto; */
    border: 1px solid hsl(var(--hsl-text));
    /* background-color: hsl(var(--hsl-accent1)); */
}

article.container-item .cover>figure, article.container-item .cover {
    width: calc( var(--height-cover-small) * (4 / 3));
    aspect-ratio: 4/3;
    height: var(--height-cover-small);
    max-height: var(--height-cover-small);
}


article.container-item>div {
    height: var(--height-cover-small);
    display: flex;
}

article.container-item>div.content {
    flex-direction: column;
    flex: 1 1 auto;
    width: min-content;
    width: calc(100% - var(--height-cover-small) * (4 / 3) - 2 * var(--gap-side) - 1 * var(--gap-small));
    max-width: calc(100% - var(--height-cover-small) * (4 / 3) - 2 * var(--gap-side) - 1 * var(--gap-small));
    justify-content: center;
}

article.container-item div.one-line {
    max-width: calc(100%);
    line-height: 1.1rem;
    height: 1.4rem;
    display: inline-flex;
    flex-wrap: nowrap;
}

article.container-item div.content * {
    padding: 0;
    margin: 0;
}


article.container-item div.one-line>*:not(time) {
    align-items: center; 
    text-overflow: ellipsis; 
    overflow: hidden;
    white-space: nowrap;
}

article.container-item div.one-line>time {
    white-space: nowrap;
} 

.what-who {
    font-size: 0.9rem;
}


article.container-item div.one-line>*:not(:last-of-type) {
    margin-right: var(--gap-small);
}

article.container-item div.two-line {
    height: calc((var(--height-cover-small) - (2 * 1.1rem)));
    line-height: calc((var(--height-cover-small) - (2 * 1.1rem)) / 2); /* in sommige gevallen gaat het , zonder deze lijn, naar 2.5 lijnen, wat ook niet de bedoeling mag zijn... (nog op te lossen) */
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
}
article.container-item div.two-line.center {
   align-items: center;  
}
article.container-item div.two-line>* {
    display: -webkit-box; /* Use a flexbox-like container */ 
    -webkit-box-orient: vertical; /* Make the box vertical */
    -webkit-line-clamp: 2;  
    align-items: center; 
    text-overflow: ellipsis; 
    overflow: hidden;
} 
article.container-item .what-who a {color: hsl(var(--hsl-text));}
article.container-item hr {display: none;}

/* ===EVENTS=== */

.week, div.event-grid {
    position: relative;
}

.week:not(.further)>.day:last-of-type>.event-grid {
 padding-bottom: calc(2 * var(--gap-large)) ;
}

.week h3 {
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    /* position: sticky; */
    font-weight: 600;
    margin: 0;
    padding: 0 var(--gap-small);
    border: 1px solid hsl(var(--hsl-text));
    border-bottom: 0;
    z-index: 7000;
}
.week:first-of-type h3 {margin-top: var(--gap-large);}
.week:not(.further) h3 {
    margin-bottom: var(--gap-large);
}


.week h3 {
    border-bottom: 1px solid hsl(var(--hsl-text));
}

.week>.day:not(:last-of-type)>.event-grid {
    border-bottom: 1px solid hsl(var(--hsl-text));
}

.week.further .event-grid {
    border-bottom: 0;
    padding-bottom: var(--gap-small);
    margin-bottom: calc(var(--height-filters) + env(safe-area-inset-bottom));
}


.week>.day>h4 {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    background-color: hsl(var(--hsl-accent1));
    font-weight: 600;
    padding: 0 var(--gap-small);
    margin: 0;
    border: 1px solid hsl(var(--hsl-text));
    border-top: 0;
    border-top: 0;
    z-index: 6000;
    text-transform: lowercase;
}
.week>.day:first-of-type>h4 {
    border-top: 1px solid hsl(var(--hsl-text));
}
.event-grid {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    gap: var(--gap-medium);
    padding: var(--gap-large) 0;
}

.event-grid>article {
    width: 100%;
    padding: 0;
}



.event-grid>article:not(:last-of-type) {
    padding-bottom: var(--gap-medium);
    border-bottom: 1px solid hsl(var(--hsl-text));
}
.week:last-of-type .event-grid {
    border-bottom: 0;
}

@media screen and (min-width: 1000px) {
    .event-grid>article {width: calc((100% - 1 * var(--gap-medium)) / 2);}
    .event-grid>article:not(:last-of-type) { border-bottom: 0; }
}
@media screen and (min-width: 1400px) {
    .event-grid>article { width: calc((100% - 2 * var(--gap-medium)) / 3); }
}




/* container items */
.events article.container-item, .profiles article.container-item {
    /* flex-direction: row-reverse; */
}
/* filters */

form#filters {
    display: flex;
    row-gap: var(--gap-medium);
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    padding: var(--gap-side) 0;
    background-color: hsl(var(--hsl-bg), 0);
    z-index: 9999;
    column-gap: var(--gap-large);
    flex-wrap: wrap;
}

form#filters>div:not(.hidden) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-small);
}
div.collection {
    gap: 0.2rem;
    margin: 0;
}
form#filters input {
    display: none;
}
form#filters div>label {
    border: 1px solid hsl(var(--hsl-text));
    background-color: hsl(var(--hsl-accent2));
    border-radius: 50px;
    height: 1.2rem;
    align-items: center;
    padding: 0.4rem 0.4rem ;
    margin: 0;
}
form#filters div>label:first-of-type {
    border-radius: 0;
}

form#filters div>label>span {text-box: trim-both cap alphabetic;}

form#filters div>label:has(input:checked) {
    background-color: hsl(var(--hsl-accent3));
}

form#filters div>label:has(input:disabled), form#filters div>label:has(.disabled) {
    opacity: 0.5;
}

/* .commandos {
    display: flex;
    flex-direction: column;
    padding: var(--gap-medium) 0;
    gap: var(--gap-medium);
    flex-wrap: wrap;
}

.commandos>div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-small);
}

.dropdown {
    width: fit-content;
}
.dropdown .select {
    border: 1px solid hsl(var(--hsl-text));
}
.dropdown .select.active {
    background-color: hsl(var(--hsl-link), 0.50);
}
.menu {
  border: 1px solid hsl(var(--hsl-text), 0.5 );
  padding: var(--gap-side);
  position: absolute;
  background: hsl(var(--hsl-bg));
}

.menu input[type="checkbox"] {
    margin-right: var(--gap-small);
} */

/* ===PROFILES=== */
@media screen and (min-width: 1000px) {

    .frame {
        padding: 0;
        border: 1px solid hsl(var(--hsl-text), 0.5 );
    }

    .frame>*:not(.grid) {
        padding: 0 var(--gap-small);
    }

    .overview>section.frame {
        border-top-width: 0px;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-sizing: border-box;

    }
    .grid article.container-item {
        border-bottom: 1px solid hsl(var(--hsl-text), 0.5);
        border-right: 1px solid hsl(var(--hsl-text), 0.5);
    }

    .grid article.container-item {
        border: 1px solid hsl(var(--hsl-text), 0.5);
        padding: var(--gap-small) 0;
    }
    .grid article.container-item {      
        border-top: 0;
        border-left: 0;
    }
    .frame .grid article.container-item:nth-of-type(1), .frame .grid article.container-item:nth-of-type(2) {
        border-top: 1px solid hsl(var(--hsl-text), 0.5 );
    }
    .grid article.container-item:nth-of-type(odd) {
        border-left: 1px solid hsl(var(--hsl-text), 0.5 );
    }
    .grid article.container-item:nth-of-type(2) {
        border-top: 0;
    }
    *:not(.frame)>.grid article.container-item:nth-of-type(even) { /*.grid article.container-item:nth-of-type(3n) */
        border-right: 0;
    }
    *:not(.frame)>.grid article.container-item:nth-of-type(odd) { /*.grid article.container-item:nth-of-type(3n) */
        border-left: 0;
    }
    .frame .grid article.container-item:nth-of-type(odd) {
        border-left: 0;
        padding-left: var(--gap-small);
    }
    .frame .grid article.container-item:nth-of-type(even) {
        border-right: 0;
        padding-right: var(--gap-small);
    }
    .grid article.container-item:nth-of-type(even) {
        padding-left: var(--gap-side);
    }
    .grid article.container-item:nth-of-type(odd) {
        padding-right: var(--gap-side);
    } 

    .grid article.container-item:nth-last-of-type(1), .grid article.container-item:nth-last-of-type(2):not(:nth-of-type(even)) {
        border-bottom: 0;
    }
}


/* 
=======
CONTAINERS
======= */
.container>.cover-wrapper {
    margin: var(--gap-medium) 0;
    background-color: hsl(var(--hsl-bg));
    display: flex;
}


.container .cover {
    flex-flow: 1;
}


/* .container .cover figure>img {
    /* height: 100%;
    width: 100%; 
} */



main.container div.content *:not(a):not(a *) {
    color: hsl(var(--hsl-text)) !important;
}

/* === EVENT CONTAINER === */
h2>span {
    border: 1px solid hsl(var(--hsl-text));
    border-right: 0;
    border-left: 0;
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    margin-right: 0.4rem;
}
h2>div.datetimes {
    display: flex;
    margin-top: 0.4rem;
    flex-wrap: wrap;
    row-gap: var(--gap-small);
}
h2>div.datetimes>time {
    /* text-decoration: underline; pas nodig als je er op kunt klikken voor in uw agenda */
    cursor: pointer;
    text-decoration-thickness: 1px;
}

h2>div.datetimes>* {
    text-transform: lowercase;
    font-size: 1.2rem;
}
h2>div.datetimes>time:not(:first-of-type):before{
    padding-right: var(--gap-small);
    content: "|";
}
h2>div.datetimes>time:not(:last-of-type) {
    padding-right: var(--gap-small);
}
h2>div.datetimes>time.past {
    text-decoration: none;
    pointer-events: none;
    color: hsl(var(--hsl-text), 0.5);
    border-color: hsl(var(--hsl-text), 0.5 );
}

h2>div.categories>span {
    font-size: 1.1rem;
}
h2>div.categories>span:first-of-type {font-style: italic;}

/* === PROGRAM CONTAINER === */
span.past {
    color: hsl(var(--hsl-text), 0.5);
}

/* === ELEMENTS === */
section.elements {
    padding: var(--gap-medium) 0;
    border-top: 1px solid hsl(var(--hsl-text), 0.5 );
}


section.elements div.title {

    gap: var(--gap-small);
    align-items: center;
}

div.title b {
    white-space: nowrap;
}

section.elements div.title form {
    display: contents;
} 

section.elements div>small {
    height: 0.9rem ;
}



/* 
========
POPOVERS
======== */

div.popover {
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    padding: var(--gap-small);
}

div.popover>.closing-button {
    position: absolute;
    top: 0;
    right: 0;
}

div.popover:has(figure) {
    background-color: hsl(var(--hsl-img-underlay));
    padding: 0;
}

div.popover:has(form) {width: 100%;}

.popover a {color: hsl(var(--hsl-bg));}
.popover hr {border-color: hsl(var(--hsl-bg));}

.popover input, .popover button, .popover textarea {
    background-color: hsl(var(--hsl-text));
    color: hsl(var(--hsl-bg));
    border: 1px solid hsl(var(--hsl-bg));  
}

div.popover>.closing-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: hsl(var(--hsl-text));
    background-color: hsl(var(--hsl-accent2));
    border: 1px solid hsl(var(--hsl-text));
    height: 1.6rem;
    width: 1.6rem;
    aspect-ratio: 1/1;
    border-radius: 0;
    font-weight: 900;
    position: absolute;
    right: var(--gap-side);
    top: var(--gap-side);
    cursor: pointer;
    z-index: 9999;
    font-size: 0.6rem;
}
.popover>figure {
    padding: 0;
    margin: 0;
    border-color: hsl(var(--hsl-text));
}



/* 
===========
FORM FIELDS
=========== */

input, textarea, select, option, button, input[type="submit"], select, .select, .textarea{
    font-size: 1rem;
    background-color: hsl(var(--hsl-bg), 0.5);
    color: hsl(var(--hsl-text));
    border-radius: 0;
    border: 1px solid hsl(var(--hsl-text));
    line-height: 1.6rem;
}
button, input[type="submit"]{
    background-color: hsl(var(--hsl-accent2));
    
}

input[type="color"], input[type="color"]::-webkit-color-swatch-wrapper {padding: 0; }
::-webkit-color-swatch {border: none;}

input::placeholder {color: hsl(var(--hsl-text), 0.8);}
input:focus, textarea:focus, .textarea:focus {outline-color: hsl(var(--hsl-link));}

button, a.button, input[type="submit"], input[type = "text"], input[type = "password"], input[type = "email"], input[type = "number"], input[type = "url"], select, .select {
    height: 1.6rem;
    padding: 0 var(--gap-mini);

}

form button[type="submit"] {
    width: auto;
}

button:disabled {
    pointer-events: none;
    background-color: hsl(var(--hsl-accent2), 0.1 );
    color: hsl(var(--hsl-text), 0.5 );
}

button.small {
    height: 1rem;
    font-size: 0.8rem;
    line-height: 0.5rem;
    align-self: center;
}

input[type = "text"], input[type = "password"], input[type = "email"], input[type = "url"], select {
    width: 100%;
    flex-grow: 1;
}

input[type = "radio"], input[type = "checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0.4rem 0;
    height: 0.8rem;
    width: 0.8rem;
    aspect-ratio: 1/1;
    accent-color: hsl(var(--hsl-link));
    background-color: hsl(var(--hsl-bg));
}

input[type = "radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: hsl(var(--hsl-link));
}

input[type="radio"]:checked {
  box-shadow: inset 0 0 0 0.1rem hsl(var(--hsl-bg));
}

input[type="checkbox"]:checked {
  box-shadow: inset 0 0 0 0.1rem hsl(var(--hsl-bg));
}

textarea {
    width: 100%;
    resize: vertical;
}

button, a.button, input[type="submit"]{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: hsl(var(--hsl-accent2));
    color: hsl(var(--hsl-text));
    border: 1px solid hsl(var(--hsl-text));
    /* border-radius: 100px; */
    padding: 0 0.2rem;
    white-space: nowrap;
}

/* === LOGIN FORM === */
form#login *:not(label), form#logout *:not(label) {
    height: 1.2rem;
    line-height: 1.2rem;
}
form#login {
    display: flex;
    gap: var(--gap-medium);
    align-items: flex-end;
    margin:  var(--gap-small) 0;
    width: 100%;
}
form#login label {
    flex-wrap: wrap;
    margin-bottom: 0;
    min-width: 0;
    row-gap: var(--gap-small);
}

form#login input {
    width: auto;
    flex-grow: 1;
    min-width: 0;
}

form#login>div {
    width: auto;
    line-height: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    min-width: 0;
    flex-wrap: wrap-reverse;
    justify-content: center;
    gap: 0.4rem;
}

form#login>div>button {
    flex-grow: 1;
}

form fieldset {
    width: 100%;
    margin-bottom: var(--gap-medium);
    padding: var(--gap-small) var(--gap-small);
}


/*
=======
BUTTONS
======= */

button.active, a.active button {
    background-color: hsl(var(--hsl-accent3));

}

a.button {
    display: inline-block;
    font-family: var(--font-family-content);
}

a:has(button.loading) {
   pointer-events: none; 
}
button.loading {
    background-color:  hsl(var(--hsl-text), 0.10);
    pointer-events: none;
}

/* 
======
LABELS
====== */

label {
    display: flex;
    margin-bottom: var(--gap-small);
    line-height: 1.6rem;
}

form.one-line {
    max-width: 33.33rem;
    width: 100%;
}

form.one-line>* {
    width: 100%;
}

form.one-line>div {
    display: inline-flex;
}

label {
    align-items: start;
}

label>label {
    margin-bottom: 0;
}

label:not(:has(*)) {
    overflow: hidden;
    text-overflow: ellipsis;
}

label>span {
    white-space: nowrap;
    /* margin-right: var(--gap-small); */
}

label>div {
    display: inline-grid;
    flex-grow: 1;
}

label>*:not(:last-child) {
    margin-right: var(--gap-small);
}

label:last-of-type {
    margin-bottom: 0;
}

progress {
    flex-grow: 1;
    height: 0.8rem;
    appearance: none;
}

progress::-webkit-progress-bar {
    background-color: hsl(var(--hsl-text), 0.05);
    border: 1px solid hsl(var(--hsl-text));
    border-radius: 1.6rem;
}

progress::-webkit-progress-value {
    background-color: hsl(var(--hsl-link));
    border-radius: 1.6rem;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.1rem;
    background: transparent; /* important */
    border: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 1.1rem;
    background-color: hsl(var(--hsl-text), 0.05);
    border: 1px solid hsl(var(--hsl-text));
    border-radius: 1.1rem;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: calc(1.1rem - 2px);
    width: calc(1.1rem - 2px);
    background: hsl(var(--hsl-link));
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-track { /* Firefox */
    height: 1.1rem;
    background-color: hsl(var(--hsl-text), 0.05);
    border: 1px solid hsl(var(--hsl-text));
    border-radius: 1.1rem;
}

input[type="range"]::-moz-range-thumb {
    height: calc(1.1rem - 2px);
    width: calc(1.1rem - 2px);
    background: hsl(var(--hsl-link));
    border: none;
    border-radius: 50%;
    cursor: pointer;
}


/* 
======
TABLES
====== */

table {border-collapse: collapse;}

table.conversation {
    margin-bottom: 1rem;
}
table:not(table.conversation) {
    width: 100%;
    max-width: 40rem;
}

td:has(input[type="radio"]) {  
    width: 2rem;
}
td:not(:last-of-type) {
     /* keeps it as small as its content */
    padding-right: 0.4rem;
}
table:not(table.conversation) td:first-of-type {
    white-space: nowrap;
}

td.stretch-half {
   min-width: 50%;
   width: 60%;
}
td.stretch {
    width: 100%;
    min-width: 7rem;
    max-width: 50%;
}
td.stretch>label {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

label progress {
    width: auto;
    min-width: 1.6rem;
}
table.cheat-table caption {
    font-size: 0.9rem;
    padding: var(--gap-small) 0;
    text-align: left;
}
table.cheat-table td, table.cheat-table th {
    border: 1px solid hsl(var(--hsl-text));
}

table.cheat-table tr>td:not(:first-of-type) {
    text-align: center;
}

table.cheat-table th:first-of-type {border-top: 0; border-left: 0;}

input[type="number"] {
    width: 5rem;
    text-align: right;
}

table#colours {
width: auto;
}


/* 
============
CONTAINER-PAGES
============ */

div.commands {
    gap: var(--gap-small);
    display: inline-flex;
}

div.add-elements, div.commands { /* button wrapper */
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

section.event-list {
    margin: var(--gap-medium) 0;
}


/* conversations */
section.mini-main {
    flex-grow: 1;
}

article.element-item {
    padding: var(--gap-medium) 0;
}

article.element-item:not(:first-of-type) {
    border-top: 1px solid hsl(var(--hsl-text), 0.5);
}


/* 
===========
TEXT-EDITOR
=========== */

.container {
	max-width: 100%;
	width: 100%;
	background: hsl(var(--hsl-bg));
	overflow: hidden;
}
.toolbar {
	padding: var(--gap-side) 0;
}
.toolbar .head {
	display: flex;
	grid-gap: var(--gap-small);
	margin-bottom: 300px;
	flex-wrap: wrap;
}
.toolbar  select {
    width: fit-content;
	background: hsl(var(--hsl-bg));
	border: 1px solid hsl(var(--hsl-text));
	outline: none;
	cursor: pointer;
}
.toolbar {
	display: flex;
    flex-direction: column;
	grid-gap: var(--gap-small);
}
.toolbar div {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: var(--gap-small);
}

.toolbar button {
	min-width: 1.6rem;
}
.textarea {
    border: 1px solid hsl(var(--hsl-text));
	padding: var(--gap-small);
    min-height: 30vh;
    overflow: auto;
    max-width: 100%;
}

font[size="1"] {font-size: 0.875rem;}
font[size="2"] {font-size: 1rem;}
font[size="3"] {font-size: 1.2rem;}
font[size="4"] {font-size: 1.4rem;}
font[size="5"] {font-size: 1.5rem;}


/* 
======
CREATE
====== */

fieldset *:has(select:disabled):not(a):not(.not-cursive):not(.not-cursive *) {
    color: hsl(var(--hsl-text), 0.5 );
    border-color: hsl(var(--hsl-text), 0.5 );
    font-style: italic;
    
}

fieldset:has(:disabled) .not-cursive,
fieldset:has(:disabled) .not-cursive * {
    color: hsl(var(--hsl-text));
    border-color: hsl(var(--hsl-text));
    font-style: normal;
}

fieldset .item {
    margin-bottom: var(--gap-medium);
    padding-bottom: var(--gap-medium);
    border-bottom: 1px solid hsl(var(--hsl-text), 0.5 );
}

/* 
=======================
MP3 PLAYER / VISUALISER
======================= */

#mp3-player {
    position: sticky;
    bottom: var(--gap-mini);
    left: 0;
    width: 100%;
    max-width: 450px;
    min-height: 0;
    aspect-ratio: 437/165;
    background-image: URL('/media/mp3-speler1.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9990;
    padding: var(--gap-side);
    container-type: size;
}

#play-button {
    height: 50%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: 100px;
}

input[type='range']#seek-bar {
    position: absolute;
    bottom: 22%;
    right: 15%;
    width: 56%;
    border: 0;
    height: 11cqh;
    border-radius: 50px;
    background: linear-gradient(135deg, #a1daaf8a, #6482bb63);

    appearance: none;
    -webkit-appearance: none;
}

/* ─────────────── Chrome / Edge / Safari ─────────────── */

input[type='range']#seek-bar::-webkit-slider-runnable-track {
    width: 100%;
    height: 11cqh;
    border-radius: 50px;
    background: linear-gradient(
        135deg,
        #a1daaf8a,
        #6482bb63
    );
}

input[type='range']#seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 11cqh;
    height: 11cqh;

    margin-top: calc((11cqh - 11cqh) / 2);

    border: 0;
    border-radius: 50%;

    background: #5d6e8a;
    cursor: pointer;
}

/* ─────────────── Firefox ─────────────── */

input[type='range']#seek-bar::-moz-range-track {
    width: 100%;
    height: 11cqh;
    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #a1daaf8a,
        #6482bb63
    );
}

input[type='range']#seek-bar::-moz-range-thumb {
    width: 11cqh;
    height: 11cqh;

    border: 0;
    border-radius: 50%;

    background: #5d6e8a;
    cursor: pointer;
}

#mp3-player.pause {
    background-image: URL('/media/mp3-speler2.png');
}

#mp3-player>canvas {
    position: absolute;
    bottom: 36%;
    right: 11%;

    height: 50%;
    width: 60%;
}

#mp3-player>audio {
    opacity: 0;
}


#audio-player {
    background-color: hsl(var(--hsl-accent1));
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
     border: 1px solid hsl(var(--hsl-text));
     margin-bottom: var(--gap-medium);
}
canvas {
    max-width: 100%;
    border-bottom: 1px solid hsl(var(--hsl-text));
    height: 4rem;
}

audio {
    display: block;
    border-radius: 0;
}

#controls {
    display: flex;
    align-items: center;
    gap: var(--gap-medium);
    padding: var(--gap-medium) var(--gap-side);
    color: hsl(var(--hsl-bg));
    background-color: hsl(var(--hsl-text));
}

#play-pause-btn {
    color: hsl(var(--hsl-bg));
    background-color:hsl(var(--hsl-text));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#play-pause-btn.pause {

}


#seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background: hsl(var(--hsl-accent3));
    cursor: pointer;
}

#current-time, #duration {
    font-family: monospace;
    font-size: 12px;
}