/* Metrics come from ModManualScreenStyle and ModManualStyle: the window is 256x256 manual
   units, the document area sits at (12, 12) and is 216x232, the scroll bar at (236, 8) is
   12x240 with a 12x12 button, and the tab column at (-52, 12) holds 64x24 tabs. `--u` is
   one manual unit in CSS pixels; manual.js picks the largest integer that fits. */

:root {
    --u: 3px;
    --text: #dddddd;
    --mono: #37ff99;
    --link: #9cc6e7;
    --link-hover: #badcf7;
    --dead: #ff3755;
    --dead-hover: #ff8497;
    --backdrop: #101010;
}

@font-face {
    font-family: "OC2 Manual";
    src: url("fonts/manual-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "OC2 Manual";
    src: url("fonts/manual-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "OC2 Manual";
    src: url("fonts/manual-italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "OC2 Manual";
    src: url("fonts/manual-bolditalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "OC2 Manual Mono";
    src: url("fonts/manual-mono.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--backdrop);
    font-family: "OC2 Manual", monospace;
    font-size: calc(10 * var(--u));
    line-height: calc(10 * var(--u));
    color: var(--text);
    -webkit-font-smoothing: none;
    font-smooth: never;
}

.manual {
    display: flex;
    align-items: flex-start;
}

.tabs {
    display: flex;
    flex-direction: column;
    padding-top: calc(12 * var(--u));
    width: calc(32 * var(--u));
    height: calc(256 * var(--u));
    flex: none;
}

.tab {
    position: relative;
    flex: none;
    width: calc(64 * var(--u));
    height: calc(24 * var(--u));
    background: url("ui/tab_button.png") no-repeat 0 0;
    background-size: calc(64 * var(--u)) calc(48 * var(--u));
    image-rendering: pixelated;
    transition: transform 120ms ease-out;
}

.tab:hover,
.tab:focus-visible {
    transform: translateX(calc(-20 * var(--u)));
    background-position: 0 calc(-24 * var(--u));
}

.tab img {
    position: absolute;
    left: calc(12 * var(--u));
    top: calc(3 * var(--u));
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    image-rendering: pixelated;
}

.window {
    position: relative;
    width: calc(256 * var(--u));
    height: calc(256 * var(--u));
    flex: none;
    background: url("ui/manual.png") no-repeat 0 0;
    background-size: calc(256 * var(--u)) calc(256 * var(--u));
    image-rendering: pixelated;
}

.document {
    position: absolute;
    left: calc(12 * var(--u));
    top: calc(12 * var(--u));
    width: calc(216 * var(--u));
    height: calc(232 * var(--u));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.document::-webkit-scrollbar {
    display: none;
}

.scrollbar {
    position: absolute;
    left: calc(236 * var(--u));
    top: calc(8 * var(--u));
    width: calc(12 * var(--u));
    height: calc(240 * var(--u));
}

.thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    background: url("ui/scroll_button.png") no-repeat 0 0;
    background-size: calc(12 * var(--u)) calc(24 * var(--u));
    image-rendering: pixelated;
    cursor: pointer;
}

.scrollbar.dragging .thumb,
.thumb:hover {
    background-position: 0 calc(-12 * var(--u));
}

.scrollbar.idle {
    display: none;
}

.line {
    padding-right: calc(4.5 * var(--u));
    white-space: pre-wrap;
}

.line.list {
    padding-left: calc(10 * var(--u));
    text-indent: calc(-10 * var(--u));
}

.blank {
    height: calc(10 * var(--u));
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: none;
    white-space: pre-wrap;
}

h1 {
    font-size: calc(15 * var(--u));
    line-height: calc(21 * var(--u));
    padding-right: calc(6.5 * var(--u));
    margin-top: calc(-3 * var(--u));
    padding-bottom: calc(3 * var(--u));
}

h2 {
    font-size: calc(12.5 * var(--u));
    line-height: calc(16 * var(--u));
    padding-right: calc(5.5 * var(--u));
    margin-top: calc(-1.75 * var(--u));
    padding-bottom: calc(1.75 * var(--u));
}

h3, h4, h5, h6 {
    font-size: calc(10 * var(--u));
    line-height: calc(14 * var(--u));
    padding-right: calc(4.5 * var(--u));
    margin-top: calc(-2 * var(--u));
    padding-bottom: calc(2 * var(--u));
}

code {
    font-family: "OC2 Manual Mono", monospace;
    font-size: calc(10 * var(--u));
    color: var(--mono);
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

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

a:hover,
a:focus-visible {
    color: var(--link-hover);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: none;
}

a.dead {
    color: var(--dead);
}

a.dead:hover {
    color: var(--dead-hover);
}

.figure {
    text-align: center;
    line-height: 0;
    padding-bottom: calc(1 * var(--u));
}

.icon {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
}

.image {
    max-width: 100%;
    height: auto;
}

.missing {
    color: var(--dead);
}

@media (prefers-reduced-motion: reduce) {
    .tab {
        transition: none;
    }
}