/* https://coolors.co/palettes/popular/minimalist */
* {
    --background-color: #edede9;
    --etch-color: #e8e2df;
    --etch-highlight-color: #e0d5d0;
    --drawn-color: #c49886;
    --disabled-button-side-color: #858585;
    --disabled-color: #a3a3a3;
    --button-side-color: #35874e;
    --clickable-color: #48a363;
    --clickable-hover-color: #71b084;
    --text-color: black;
    --button-text-color: #ecf8f8;
    --delete-color: black;
    --delete-highlight-color: red;
    --error-border-color: red;
    --error-background-color: #ede9e9;
    --disabled-text-color: #9c9b9a;
    --shadow-color: #00000080;
    --slip-color: #f0f1f1;
    --slip-border-color: #c9cacb;
    --slip-highlight-color: #d3c4f5;
    --content-width: 30em;
}
body {
    display: grid;
    margin: 0; padding: 0;
    grid-template: max-content 1fr / max-content 1fr;
    background-color: var(--background-color);
}
body > header {
    margin: 1em;
    margin-bottom: 0;
    grid-area: 1 / 1 / span 1 / span 2;
}
body > nav {
    margin: 1em;
    border-right: 1px solid var(--etch-color);
    min-width: 10vw;
    grid-area: 2 / 1 / span 1 / span 1;
}
body > main {
    margin: 1em;
    margin-left: 0;
    grid-area: 2 / 2 / span 1 / span 1;
}
a {
    display: block;
    color: var(--clickable-color);
    text-decoration: none;
}
a:hover, body > nav button:hover {
    font-weight: bold;
    cursor: pointer;
    color: var(--clickable-hover-color);
}
body > nav button {
    display: block;
    color: var(--clickable-color);
    background: none;
    border: none;
    padding: 0;
}
body > div.overlay:has(main) {
    grid-area: 1 / 1 / span 2 / span 2;
    z-index: 2;
    background-color: var(--shadow-color);
}
div.empty-label {
    color: var(--disabled-text-color);
    font-style: italic;
    font-weight: light;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}
div[sortable] > * {
    cursor: grab;
}
div.ldsl-item {
    border: 1px solid var(--slip-border-color);
    background: var(--slip-color);
    padding: 0.1em;
    margin: 0.1em;
    padding-left: 0.33em;
    padding-right: 0.33em;
    display: grid;
    grid-template: max-content / max-content 1fr max-content;
    align-content: center;
    font-size: small;
}
div.ldsl-item:not(:has(div.ldsl-item-handle)) {
    padding-left: 1.5em;
}
div.ldsl-item > div.ldsl-item-handle {
    color: var(--slip-border-color);
    margin-right: 0.33em;
    display: flex;
    align-items: center;
}
div.ldsl-item > div.ldsl-item-handle::before {
    content: '=';
}
div.ldsl-item > button.delete-button {
    background: none;
    padding: 0;
    border: none;
    font-family: sans-serif;
    color: var(--delete-color);
    font-size: larger;
    margin-left: 0.33em;
}
div.ldsl-item > button.delete-button:hover {
    color: var(--delete-highlight-color);
}
div.ldsl-item > button.delete-button:active {
    margin-top: 0;
}
div.ldsl-item.sortable-dragging, div.ldsl-item.sortable-selected {
    background-color: var(--slip-highlight-color);
}

/*
details {
    display: block;
    margin: 1em;
    padding: 1em;
    border: 1px solid #e8e2df;
    border-radius: 0.5em;
}
details > summary {
    cursor: pointer;
    color: #48a363;
}
details > summary:hover {
    color: #71b084;
}
*/
ul > li {
    margin-left: 1em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}
ul > li::before {
    content: " - ";
    font-weight: bold;
}
.float-right {
    float: right;
}
.narrow {
    max-width: 20em;
}
div.container.container-wide {
    width: unset;
}
div.side-by-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

strong {
    font-weight: bold;
}