/* This is the Windows XP console color scheme taken from
 https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit */
:root {
    --c0: #000000;
    --c1: #800000;
    --c2: #008000;
    --c3: #808000;
    --c4: #000080;
    --c5: #800080;
    --c6: #008080;
    --c7: #C0C0C0;
    --c8: #808080;
    --c9: #FF0000;
    --c10: #00FF00;
    --c11: #FFFF00;
    --c12: #0000FF;
    --c13: #FF00FF;
    --c14: #00FFFF;
    --c15: #FFFFFF;
}

@keyframes blink {
    50% {
        opacity: 0.0;
    }
}

body {
    color: var(--c7);
    background-color: var(--c0);
    overflow-y: scroll; /* Force vertical scrollbar to prevent horizontal jumping */
}

.hidden {
    display: none !important;
}

.bbs {
    font-family: "SimSunWebBBS", monospace;
    font-size: 20px;
    margin: 1em;
    line-height: .98;
    letter-spacing: 0;
}

.bbs .blink {
    animation: blink 2s step-start 0s infinite;
}

.bbs .underline {
    text-decoration: underline;
}

.bbs a:link {
    text-decoration: none;
    color: var(--c14);
}

.bbs a:visited {
    text-decoration: none;
    color: var(--c13);
}

.bbs-menu {
    display: grid;
    grid-template-columns: 4ch 4ch 1fr 12ch 10ch;
    column-gap: 1ch;
    margin: 1em 0;
    max-width: 80ch;
}

.bbs-menu > span {
    white-space: pre;
}

.bbs-menu > .rjust {
    justify-self: right;
}

.bbs-document {
    white-space: pre;
    margin: 1em auto;
}

.bbs-nav {
    margin-top: 2em;
}

.bbs-scratch {
    white-space: pre-wrap;
    margin: 1em auto;
}

.bbs-controls {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.5em;
    position: fixed;
    top: 1em;
    right: 1em;
    background-color: transparent;
    z-index: 1000;
    font-size: 20px;
    margin-left: 1em;
    flex-wrap: wrap;
}

.bbs-controls img {
    height: 1.2em;
}

.control {
    display: inline-flex;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid var(--c11);
    background-color: var(--c0);
    color: var(--c11);
    user-select: none;
    white-space: nowrap;
}

.control.inverse {
    background-color: var(--c11);
    color: var(--c0);
}

.control.toggle {
    padding: 1px 6px;
}

.control-item, a.control-item:link, a.control-item:visited {
    background-color: var(--c0);
    color: var(--c11);
    padding: 1px 6px;
}

.control-item.inverse, .control-item.active {
    background-color: var(--c11);
    color: var(--c0);
}

.control-item.disabled {
    cursor: not-allowed;
}

.control-item-parent {
    padding-right: 1px !important;
}

a.keyboard-selected {
    outline: 2px solid var(--c12);
}

/* Collapsible toolbar controls */
.control.collapsible.hidden {
    display: none;
}

/* Navigation buttons toggle */
.control.nav-button.hidden {
    display: none;
}

/* Help window */
.bbs-help {
    position: fixed;
    right: 1.5em;
    background-color: var(--c0);
    border: 1px solid var(--c11);
    border-radius: 3px;
    color: var(--c11);
    padding: 1em;
    margin-left: 1em;
    font-family: "SimSunWebBBS", monospace;
    font-size: 14px;
    z-index: 999;
}

.bbs-help.hidden {
    display: none;
}

.help-content h3 {
    margin: 0 0 1em 0;
    color: var(--c11);
    font-size: 14px;
}

.help-content h4 {
    margin: 1em 0 0.5em 0;
    color: var(--c11);
    font-size: 14px;
}

.help-content h4:first-child {
    margin-top: 0;
}

.help-section {
    margin-bottom: 1em;
}

.help-item {
    margin-bottom: 0.3em;
    padding-left: 1em;
}

.help-item strong {
    color: var(--c14);
}