/*
  Some reset-ish rules yoinked from
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}


body {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    display: grid;
    margin: 0 auto;
    max-width: max-content;
    grid-template-columns: 300px minmax(200px, 1fr) max-content;
    grid-template-rows: max-content;
    gap: 5px;
    align-content: center;
}
#buttonline {
    grid-column: 1 / 4;
    grid-row: 1;
    display: flex;
    justify-content: space-evenly;
}
#buttonline button {
    border-radius: 10px;
    background-color: #74aed4;
    cursor: pointer;
    border: none;
    min-height: 35px;
    min-width: 100px;
}
#buttonline button:hover, #buttonline button:focus {
    background-color: #3b99d8;
}
#buttonline button.active {
    background-color: #17a2ff;
}
#statusline {
    border-radius: 10px;
    background-color: #7bb9a4;
    grid-column: 1 / 4;
    grid-row: 2;
    padding: 5px 10px;
    text-align: center;
}
.next-disabled #statusline {
    background-color: #aeb97b;
}
#statusline.error-message {
    background-color: #b97b7b;
}
#description {
    border-radius: 10px;
    background-color: #768ead;
    grid-column: 1 / 2;
    grid-row: 3;
    padding: 10px 10px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
}
#description > label > input {
    margin-left: 1em;
}
#description .char-rename {
    border-radius: 10px;
    background-color: #b3e2ad;
    cursor: pointer;
    border: none;
    min-height: 35px;
    min-width: 100px;

}
#selectables {
    grid-column: 2 / 4;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#nextbutton {
    border-radius: 10px;
    background-color: #d397ce;
    grid-column: 3 / 4;
    grid-row: 4;
    cursor: pointer;
    border: none;
    min-height: 35px;
    min-width: 100px;
}
#nextbutton:hover {
    background-color:#d4b9d2;
}
.next-disabled #nextbutton {
    background-color: #969696;
    text-decoration: line-through;
    cursor: not-allowed;
}
.next-hidden #nextbutton {
    visibility: hidden;
}
.selectable {
    display: flex;
    background-color: #8888bb;
    border-radius: 10px;
    align-items: center;
    /* We draw an invisible border, so selected characters can be
     * hilighted with a drawn border without changing the element size,
     * improving usability when colors alone don't work clearly.
     */
    border: 2px solid transparent;
    /* Character selection widgets are formally buttons in HTML,
     * to pick up keyboard navigation events and such.
     * Stylistically, though, they're mostly supposed to look like
     * div containers, so we have to reset a couple of button styles
     * back to the way a div would behave.
     */
     width: 100%;
     font: inherit;
}
.selectable:hover, .selectable:focus {
    background-color: #9999d1;
}
.selectable.selected {
    background-color: aquamarine;
    border-color: black;
}
.selectable .name {
    min-width: 200px;
    margin: 0;
    padding-left: 2em;
}
.statuses, .desc-statuses {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
}
li.status {
    list-style-type: none;
    float: left;
    position: relative;
    width: 50px;
    height: 50px;
    background-color: purple;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.status img {
    width: 48px;
    height: 48px;
    margin: 1px;
}
/* A tooltip is normally hidden, but unhidden when the user hovers over its parent element.
 * Doing this with these hierarchic CSS shenanigans is entirely too clever,
 * and this will probably be replaced by javascript soon, once we implement
 * related-icon hilighting.
 */
.tooltip {
    display: none;
    position: absolute;
    left: 40px;
    top: 40px;
    width: 300px;
    background-color: #bb8888cc;
    z-index: 1;
    padding: 3px;
}
:hover > .tooltip {
    display: block;
}

.char-desc {
    text-align: center;
}

.char-attrs {
    margin-top: 1em;
}