html {
    min-height: 100%;
}

body {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    /* font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 20px);
    margin: 0;
    padding: 10px;
    padding-top: 0;
}

header {
    padding-block: 5px;
}

header h1 {
    margin: 0;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    /* flex-wrap: wrap; */
    flex-grow: 1;
}

footer {
    display: flex;
    flex-direction: row-reverse;
}

textarea {
    font-size: 120%;
    min-width: 100px;
}

ul {
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
    list-style: none;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    width: 100%;
}

li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* padding: 4pt; */
    margin-block: 4px;
    /* position: relative; */
}

li.selected-char {
    /* color: white; */
    background-color: #3390ff32;
}

.char-box {
    display: flex;
    flex-direction: column;
}

li > .char-box {
    border-right: 1px solid gray;
}

/* .codepoint:before {
    content: 'U+';
    opacity: 0.7;
    font-size: 80%;
} */

.codepoint {
    width: 60px;
    text-align: center;
    font-family: monospace;
    opacity: 0.7;
}

.chara {
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 200%;
    /* padding-right: 10px; */
}

.astral {
    /* font-size: 130%; */
}

.extra {
    display: flex;
    flex-direction: column;
}

.info-row {
    display: flex;
    flex-direction: row;
    min-height: 30px;
    align-items: center;
    gap: 10px;
}


.info-row > div ~ div{
    /* margin-left: 10px; */
    padding-left: 10px;
    border-left: 1px solid gray;
}

.mirror {
    content: '→|←';
}

/* .category:before {
    content: "Category: ";
    font-style: italic;
    opacity: 0.7;
} */

.bidi:before {
    content: "Bidi: ";
    font-style: italic;
    opacity: 0.7;
}

.name {
    font-style: italic;
    /* margin-right: 5px; */
}

.decomp {
    display: flex;
    flex-direction: row;
    outline: 2px dashed gray;
    gap: 5px;
    padding-inline: 5px;
}

.decomp .chara {
    padding: 2px;
}

.decomp .codepoint, .decomp .chara {
    width: 40px;
}

.decomposition-tag {
    height: 60px;
    width: 40px;
    text-align: center;
    line-height: 60px;
    padding: 2px;
    color: gray;
}

.value:before {
    content: "x = ";
    font-style: italic;
    opacity: 0.7;
}

.uppercase:before  {
    content: "Upper: ";
    font-style: italic;
    opacity: 0.7;
}

.lowercase:before  {
    content: "Lower: ";
    font-style: italic;
    opacity: 0.7;
}

.surrogates:before  {
    content: "UTF16: ";
    font-style: italic;
    opacity: 0.7;
}

.utf8:before {
    content: "UTF8: ";
    font-style: italic;
    opacity: 0.7;
}

.utf8 {
    min-width: 85px;
}

.titlecase:before  {
    content: "Title: ";
    font-style: italic;
    opacity: 0.7;
}

/* .block:before {
    content: 'from the ';
} */

.block:after {
    content: ' block';
}

.variant:before {
    font-style: italic;
    opacity: 0.7;
}

.kSemanticVariant:before   { content: 'Semantic: '; } 
.kSimplifiedVariant:before { content: 'Simplified: '; } 
.kSpecializedSemanticVariant:before { content: 'Specialized: '; }
.kSpoofingVariant:before { content: 'Spoofing: '; } 
.kTraditionalVariant:before { content: 'Traditional: '; } 
.kZVariant:before { content: 'Z: '; }


/* .uppercase, .lowercase, .titlecase {

} */

/* .extra {
    flex-grow: 1;
}

.block {
    margin-left: auto;
} */

.uppercase, .lowercase, .titlecase {
    min-width: 55px;
}

.special-symbol-placeholder {
    font-size: 14px;
    position: relative;
}

.special-symbol-placeholder .real {
}

.special-symbol-placeholder .box {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 30px;
    width: 30px;
    outline: 2px dashed gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-symbol-placeholder .box > div {
    color: grey;
    text-align: center;
    line-height: 12px;
    user-select: none;
}