:root {
    --unitWidth: 4px;
    --unitHeight: 5px;
    --ledColor: radial-gradient(circle at 4px 4px, yellow, red);
}

/* ===== Global scrollbar theming (DEC 1960s palette) =====
   Every scrolling container in the app (quick-boot OS list, Info / Config /
   Storage pages, teletype & LP11 paper) gets the same look, so no native
   scrollbar sticks out of the dark amber scheme. Chromium / Edge / Safari /
   WKWebView (Tauri desktop) use the WebKit pseudo-elements; Firefox uses the
   standards-based properties below. */

* {
    scrollbar-width: thin;
    /* Firefox: narrow scrollbar */
    scrollbar-color: #8a7650 #1a1815;
    /* Firefox: thumb, track */
}

/* WebKit / Blink / WebView scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* horizontal bars, e.g. Info page <pre> */
}

::-webkit-scrollbar-track {
    background: #1a1815;
    border: 1px solid #4a453a;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8a7650, #6b5a40);
    border: 2px solid #1a1815;
    /* inset "bevel" look like the buttons */
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 200, 80, 0.12);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c8a860, #a89060);
    box-shadow: inset 0 1px 0 rgba(255, 200, 80, 0.2);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #e8d080, #c8a860);
}

::-webkit-scrollbar-corner {
    background: #1a1815;
    /* no white square where axes meet */
}

.frame {
    width: calc(var(--unitWidth) * 272);
    height: calc(var(--unitHeight) * 93);
    position: relative;
    background: linear-gradient(#c3bcaa, #a39c8a);
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.decBase {
    width: calc(var(--unitWidth) * 106);
    height: calc(var(--unitHeight) * 8);
    position: absolute;
    top: calc(var(--unitHeight) * 1);
    left: calc(var(--unitWidth) * 3);
    border: 1px solid #736c62;
    border-radius: calc(var(--unitWidth) * 2);
    color: #736c62;
    font-family: arial, helvetica, sans-serif;
}

.smallSpace {
    width: calc(var(--unitWidth) * 2.66);
    height: 1px;
    float: left;
}

.decLetter {
    width: calc(var(--unitWidth) * 4);
    height: calc(var(--unitHeight) * 5);
    border: 1px solid #736c62;
    border-bottom-color: #534c42;
    font-weight: 100;
    font-size: calc(var(--unitHeight) * 4);
    line-height: calc(var(--unitHeight) * 5);
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: left;
}

.decName {
    position: absolute;
    top: 0;
    height: 100%;
    font-size: calc(var(--unitHeight) * 2);
    line-height: calc(var(--unitHeight) * 8);
    float: left;
}

.topEdge {
    width: calc(var(--unitWidth) * 256);
    height: 0;
    position: absolute;
    top: calc(var(--unitHeight) * 10);
    left: 0;
    right: 0;
    margin: auto;
    padding: calc(var(--unitWidth) * 3.33);
    background: #837c72;
    border: none;
    border-radius: calc(var(--unitWidth) * 8);
}

.sideEdges {
    width: calc(var(--unitWidth) * 263);
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-bottom: calc(var(--unitHeight) * 80) solid #9c9781;
    border-left: calc(var(--unitWidth) * 2) solid transparent;
    border-right: calc(var(--unitWidth) * 2) solid transparent;
}

.switchBevel {
    width: calc(var(--unitWidth) * 265);
    height: calc(var(--unitHeight) * 1);
    background: #a39c8a;
    border-top: calc(var(--unitHeight) * 8) solid #9c9781;
    border-bottom: calc(var(--unitHeight) * 7) solid #534c42;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.switchPanel {
    position: relative;
    top: calc(var(--unitHeight) * 12);
    left: calc(var(--unitWidth) * 8);
}

.panel {
    width: calc(var(--unitWidth) * 256);
    height: calc(var(--unitHeight) * 65);
    background: #181818;
    border-radius: calc(var(--unitWidth) * 4);
    color: white;
    font-family: arial, helvetica, sans-serif;
    font-size: calc(var(--unitHeight) * 1.4);
    text-align: center;
}

/* Drop zone — drag & drop disk/tape image import */
.drop-zone {
    display: inline-block;
    vertical-align: middle;
    padding: 4px 10px;
    margin-left: 8px;
    border: 1px dashed #7a7468;
    border-radius: 4px;
    background: #22221e;
    color: #e0d8c8;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.15s, background 0.15s;
    line-height: 1.4;
    max-width: 320px;
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: #c8a860;
    background: #2e2c26;
}

.drop-zone-icon {
    color: #c8a860;
    font-size: 14px;
    margin-right: 4px;
}

.drop-zone-text {
    font-weight: bold;
}

.drop-zone-hint {
    color: #9a9488;
    font-size: 11px;
    margin-left: 6px;
}

.drop-zone-status {
    display: block;
    font-size: 11px;
    color: #9a9488;
    margin-top: 2px;
    white-space: normal;
}

.drop-zone-status.ok {
    color: #7fbf7f;
}

.drop-zone-status.warn {
    color: #d8c070;
}

.drop-zone-status.error {
    color: #d08080;
}

/* Full-window drop overlay — shown while dragging files over the page */
.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.65);
}

.drop-overlay.visible {
    display: flex;
}

.drop-overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 72px;
    border: 3px dashed #c8a860;
    border-radius: 14px;
    background: rgba(22, 18, 14, 0.95);
    color: #e0d8c8;
    pointer-events: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.drop-overlay-icon {
    font-size: 52px;
    color: #c8a860;
    line-height: 1;
}

.drop-overlay-title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}

.drop-overlay-hint {
    font-size: 14px;
    color: #9a9488;
}

/* Floating fullscreen toggle — bottom-right, above the app content but below
   the drop/modal overlays so they keep focus while they are active. */
.fullscreen-btn {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #3a352a, #2a2722);
    border: 1px solid #5a554a;
    border-radius: 4px;
    color: #b8b0a0;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    user-select: none;
}

.fullscreen-btn:hover {
    background: linear-gradient(180deg, #4a453a, #3a352a);
    border-color: #8a7a5a;
    color: #e0d8c8;
}

/* Active (fullscreen) state — lit like a DEC indicator lamp. */
.fullscreen-btn.fullscreen-on {
    background: linear-gradient(180deg, #5a4a30, #3a3528);
    border-color: #c8a860;
    color: #f0e6c8;
    box-shadow: inset 0 1px 0 rgba(255, 200, 80, 0.15), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.fullscreen-btn .fullscreen-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Shared modal dialog overlay — used by the first-run onboarding hint, the
   reboot confirmation, the CONFIG leave dialog and the image-load error
   dialog (imgerror.js). */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.72);
}

.modal-overlay.visible {
    display: flex;
}

.modal-box {
    max-width: 540px;
    padding: 28px 34px;
    border: 1px solid #c8a860;
    border-radius: 10px;
    background: #1c1814;
    color: #e0d8c8;
    box-shadow: 0 10px 46px rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

/* Image load error dialog (imgerror.js): error accent on the modal box. */
.modal-box.error {
    border-color: #b5544a;
}

.modal-box.error .modal-title {
    color: #ff9b8a;
}

.modal-box.error code {
    background: #2a2a2a;
    color: #ffd27f;
    border: 1px solid #4a4438;
    border-radius: 3px;
    padding: 1px 6px;
    font-family: "Courier New", Courier, monospace;
}

.modal-title {
    display: block;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #c8a860;
    margin-bottom: 12px;
}

.modal-intro {
    margin: 0 0 10px;
    font-size: 14px;
    color: #cfc7b8;
}

.modal-steps {
    margin: 0 0 6px 22px;
    padding: 0;
    font-size: 14px;
}

.modal-steps li {
    margin: 4px 0;
}

.modal-boots {
    list-style: none;
    margin: 2px 0 8px;
    padding: 6px 0 6px 10px;
    border-left: 3px solid #c8a860;
    background: rgba(200, 168, 96, 0.07);
    font-size: 13px;
}

.modal-boots li {
    margin: 3px 0;
}

.modal-boot code {
    background: #2a2a2a;
    color: #ffd27f;
    border: 1px solid #4a4438;
    border-radius: 3px;
    padding: 1px 6px;
    font-family: "Courier New", Courier, monospace;
}

.modal-boot.modal-more {
    color: #9a9488;
}

.modal-drag {
    margin: 8px 0 16px;
    font-size: 13px;
    color: #b8b0a0;
}

/* Emphasised words inside modal dialogs use the dialog-title amber instead of
   the global bold default (b { color: blue } used to bleed through). */
.modal-box b {
    color: #c8a860;
}

.modal-close {
    display: inline-block;
    padding: 8px 28px;
    border: 1px solid #c8a860;
    border-radius: 5px;
    background: #2c261c;
    color: #ffd27f;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.modal-close:hover {
    background: #3a3224;
}

/* Reboot confirmation dialog: the "don't ask again" checkbox above the buttons. */
.modal-dontask {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 13px;
    color: #b8b0a0;
    cursor: pointer;
    user-select: none;
}

.modal-dontask input {
    accent-color: #c8a860;
    cursor: pointer;
}

/* Config "unapplied changes" dialog: side-by-side action buttons. */
#config-leave-overlay .modal-close+.modal-close {
    margin-left: 10px;
}

/* Modal dialogs: amber selection and focus ring (matching the dialog title)
   instead of the browser's blue default, which clashed with the theme. */
.modal-overlay ::selection {
    background: #c8a860;
    color: #1c1814;
}

.modal-overlay button:focus-visible {
    outline: 2px solid #c8a860;
    outline-offset: 1px;
}

/* Quick-boot magic wand — pinned to the top-right corner of the Panel page. */
#page-panel {
    position: relative;
}

.quick-boot-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 50;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c8a860;
    border-radius: 50%;
    background: #2c261c;
    color: #ffd27f;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.quick-boot-btn:hover {
    background: #3a3224;
}

/* Quick-boot OS picker list inside the shared modal box. */
.quickboot-box {
    max-width: 480px;
}

.quickboot-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.quickboot-option {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #4a4438;
    border-radius: 5px;
    background: #241f18;
    color: #e0d8c8;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.quickboot-option:hover {
    border-color: #c8a860;
    background: #2f2820;
}

.quickboot-name {
    font-weight: bold;
    color: #ffd27f;
}

.quickboot-cmd {
    color: #9a9488;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    white-space: nowrap;
}

.quickboot-req {
    flex-basis: 100%;
    color: #8f8878;
    font-size: 11px;
}

/* "Autoloading in progress" toast (quickboot.js) — centered on screen, above
   the content but below the modal overlays, so it never covers the OS picker
   dialog. */
.quickboot-balloon {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50000;
    display: none;
    padding: 16px 28px;
    border: 2px solid #d84a3f;
    border-radius: 10px;
    background: rgba(62, 16, 12, 0.6);
    color: #ffd7d0;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
}

.quickboot-balloon.visible {
    display: block;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.clear {
    clear: both;
}

.blankLine {
    width: 100%;
    height: calc(var(--unitHeight) * 5);
    clear: both;
}

.smallLine {
    width: 100%;
    height: calc(var(--unitHeight) * 4);
    clear: both;
}

.space {
    width: calc(var(--unitWidth) * 8);
    height: 1px;
    float: left;
}

.margin {
    margin-right: 1px;
    width: calc(100% - 1px);
}

.logo {
    width: calc(var(--unitWidth) * 40);
    float: left;
}

.statusBlock {
    width: calc(var(--unitWidth) * 8);
    background-color: black;
    font-size: calc(var(--unitHeight) * 1.4);
    float: left;
}

.statusLabel1 {
    width: 100%;
    height: calc(var(--unitHeight) * 2);
    line-height: calc(var(--unitHeight) * 3);
}

.statusLabel2 {
    width: calc(var(--unitWidth) * 8 - 1px);
    height: calc(var(--unitHeight) * 7);
    position: relative;
    float: left;
}

.ledBlock {
    width: calc(var(--unitWidth) * 24);
    float: left;
}

.ledBase {
    margin-right: 1px;
    width: calc(100% - 1px);
    height: calc(var(--unitHeight) * 2);
    line-height: calc(var(--unitHeight) * 2);
    font-size: calc(var(--unitHeight) * 1.45);
    position: relative;
    float: left;
}

.statusPanel {
    width: calc(var(--unitWidth) * 88);
    height: calc(var(--unitHeight) * 8);
    position: relative;
    background: black;
    border-radius: calc(var(--unitWidth) * 2);
    float: left;
}

.statusTable {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 85%;
    position: relative;
    top: 15%;
    left: 5%;
    text-align: left;
    float: left;
}

.nick {
    height: 0;
    width: 0;
    border-bottom: calc(var(--unitHeight) * 1.7) solid black;
    border-left: calc(var(--unitWidth) * 0.3) solid transparent;
    border-right: calc(var(--unitWidth) * 1) solid transparent;
    position: absolute;
    left: calc(var(--unitWidth) * 7);
    bottom: 0;
}

.notch {
    height: 0;
    width: 1px;
    border-top: calc(var(--unitHeight) * 1.9) solid purple;
    border-left: calc(var(--unitWidth) * 1.0) solid transparent;
    border-right: calc(var(--unitWidth) * 1.0) solid transparent;
    position: absolute;
    left: calc(var(--unitWidth) * 7);
    top: 0;
    z-index: 1;
}

.ledPad {
    position: relative;
    margin-right: 1px;
    width: calc(var(--unitWidth) * 8 - 1px);
    height: calc(var(--unitHeight) * 10);
    background-color: black;
    border-bottom-left-radius: calc(var(--unitWidth) * 1.5);
    border-bottom-right-radius: calc(var(--unitWidth) * 1.5);
    float: left;
}

.mainLed,
.rotaryLed {
    width: calc(var(--unitWidth) * 3);
    height: calc(var(--unitWidth) * 3);
    border-radius: 32%;
    background: var(--ledColor);
}

.mainLed {
    position: absolute;
    bottom: calc(var(--unitWidth) * 2);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.rotaryLed {
    margin-left: 5%;
    margin-right: 10%;
    float: left;
}

.lockPanel {
    position: relative;
    width: calc(var(--unitWidth) * 15);
    height: calc(var(--unitHeight) * 12);
    font-size: calc(var(--unitHeight) * 1.4);
    float: left;
}

.atBottom {
    position: absolute;
    bottom: 0;
}

.lock {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: linear-gradient(15deg, #808080, #383838);
    border: solid 1px #707070;
}

.lock::before {
    content: "";
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    width: 45%;
    height: 45%;
    border-radius: 50%;
    background: linear-gradient(15deg, #101010, silver);
    border: solid 2px #11100e;
    box-shadow: 0 0 0 1px #404040;
}

.lockKey {
    content: "";
    display: block;
    position: absolute;
    border: solid 1px #101010;
    top: -25%;
    left: 46%;
    width: 8%;
    height: 150%;
    background: #b0b0b0;
    transform: rotate(-45deg);
    transition: 0.5s;
}

.rotaryPanel {
    width: calc(var(--unitWidth) * 88);
    height: calc(var(--unitHeight) * 12);
    position: relative;
    background: black;
    border-radius: calc(var(--unitWidth) * 3);
    float: left;
}

.rotaryTopPanel {
    width: calc(var(--unitWidth) * 56);
    height: calc(var(--unitHeight) * 25);
    position: relative;
    background: black;
    border-radius: calc(var(--unitWidth) * 3);
    float: left;
}

.rotaryBottomPanel {
    width: calc(var(--unitWidth) * 56);
    height: calc(var(--unitHeight) * 12);
    position: relative;
    background: black;
    border-radius: calc(var(--unitWidth) * 3);
    float: left;
}

.rotaryTable {
    display: table;
    table-layout: fixed;
    width: 70%;
    height: 85%;
    position: absolute;
    top: 15%;
    left: 5%;
    text-align: left;
}

.rotaryTableCell {
    display: table-cell;
}

.rotaryTableRow {
    display: table-row;
}

.rotaryBase {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10%;
}

.rotarySwitch {
    height: calc(var(--unitWidth) * 10);
    width: calc(var(--unitWidth) * 10);
    position: relative;
    border: solid 1px #202020;
    border-radius: 50%;
    background: linear-gradient(0deg,
            #b0b0c0,
            #020212 25%,
            #404050 35%,
            #303040 65%,
            #020212 75%,
            #b0b0c0);
    transform: rotate(-45deg);
    transition: 0.5s;
}

.rotarySwitch:before {
    position: absolute;
    display: block;
    content: "";
    width: 50%;
    height: 6%;
    top: 47%;
    background: #faf8f9;
    margin: 0 auto;
}

.rotaryCentre {
    position: relative;
    background: #faf8f9;
    left: 43%;
    top: 44%;
    width: 12%;
    height: 12%;
    border-radius: 50%;
}

.switchLabels {
    position: absolute;
    bottom: 0px;
}

.switchPad {
    margin: 2px 1px 2px 1px;
    width: calc(var(--unitWidth) * 8 - 2px);
    height: calc(var(--unitHeight) * 8);
    line-height: calc(var(--unitHeight) * 8);
    float: left;
}

.switchPadHalf {
    width: 100%;
    height: 49%;
    line-height: calc(var(--unitHeight) * 4);
}

.switchPadBar {
    width: 100%;
    height: 4%;
    background: black;
}

.multiText {
    display: inline-block;
    vertical-align: middle;
    line-height: calc(var(--unitHeight) * 1.5);
}

.switch {
    width: calc(var(--unitWidth) * 5);
    height: calc(var(--unitHeight) * 1);
    border-top: calc(var(--unitHeight) * 8) solid rgba(0, 0, 0, .16);
    border-bottom: calc(var(--unitHeight) * 7) solid rgba(0, 0, 0, 0.42);
    border-left: calc(var(--unitWidth) * 1.5) solid rgba(0, 0, 0, 0.46);
    border-right: calc(var(--unitWidth) * 1.5) solid rgba(0, 0, 0, 0.50);
    transition: 0.33s;
    float: left;
}

.textRight {
    text-align: right;
}

.single {
    width: calc(var(--unitWidth) * 8);
}

.double {
    width: calc(var(--unitWidth) * 16);
}

.triple {
    width: calc(var(--unitWidth) * 24 - 1px);
}

.roundTopLeft,
.roundLeft,
.roundTop {
    border-top-left-radius: calc(var(--unitWidth) * 1.5);
}

.roundTopRight,
.roundRight,
.roundTop {
    border-top-right-radius: calc(var(--unitWidth) * 1.5);
}

.roundBottomLeft,
.roundLeft {
    border-bottom-left-radius: calc(var(--unitWidth) * 1.5);
}

.roundBottomRight,
.roundRight {
    border-bottom-right-radius: calc(var(--unitWidth) * 1.5);
}

.red {
    background: linear-gradient(crimson, firebrick);
}

.redBase {
    background: crimson;
}

.purple {
    background: linear-gradient(darkmagenta, purple);
}

.purpleBase {
    background: darkmagenta;
}

.black {
    background-color: black;
}

.white {
    background-color: #f0e6d9;
}

thead {
    font-weight: bold;
}

.disk {
    font-weight: bold;
}

.system {
    white-space: nowrap;
    font-weight: bold;
}

pre {
    font-family: "Courier New", Courier, "Lucida Console", Monaco, monospace;
    font-size: 14px;
}

b {
    color: inherit;
}

/* ===== Page layout & sidebar (DEC 1960s style) ===== */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* PDP-11 backdrop: dark fallback + dimming overlay over the machine-room photo.
       Adjust the overlay alpha to control how strongly the photo shows through. */
    background-color: #2a2722;
    background-image:
        linear-gradient(rgba(24, 21, 17, 0.82), rgba(24, 21, 17, 0.82)),
        url("../assets/images/pdp11-room.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: arial, helvetica, sans-serif;
}

.app-layout {
    display: flex;
    height: 100vh;
}

.app-sidebar {
    width: 78px;
    min-width: 78px;
    background: linear-gradient(180deg, #1a1815 0%, #2a2722 40%, #1a1815 100%);
    border-right: 2px solid #4a453a;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 2px;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.app-sidebar .nav-btn {
    box-sizing: border-box;
    width: 68px;
    height: 72px;
    margin: 2px 0;
    background: linear-gradient(180deg, #3a352a, #2a2722);
    border: 1px solid #5a554a;
    border-radius: 4px;
    color: #b8b0a0;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    padding: 4px 8px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
    user-select: none;
}

.app-sidebar .nav-btn:hover {
    background: linear-gradient(180deg, #4a453a, #3a352a);
    border-color: #8a7a5a;
    color: #e0d8c8;
}

.app-sidebar .nav-btn.active {
    background: linear-gradient(180deg, #5a4a30, #3a3528);
    border-color: #c8a860;
    color: #f0e6c8;
    box-shadow: inset 0 1px 0 rgba(255, 200, 80, 0.15), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.app-sidebar .nav-btn .nav-icon {
    font-size: 16px;
    margin-bottom: 3px;
    opacity: 0.8;
}

.app-sidebar .nav-btn .nav-icon-svg {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
}

.app-sidebar .nav-btn.active .nav-icon {
    opacity: 1;
}

.app-sidebar .dec-logo {
    width: 40px;
    margin-top: auto;
    margin-bottom: 12px;
    opacity: 0.3;
    font-size: 9px;
    color: #6a655a;
    text-align: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.page {
    display: none;
    flex: 1;
    /* Transparent so the PDP-11 photo backdrop on body shows through */
    background: transparent;
}

.page.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Instructions page — uses block layout + max-width for readability */
#page-instructions.active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    color: #e0d8c8;
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 24px;
    box-sizing: border-box;
    /* Dark translucent slab so the long text stays readable over the photo */
    background: rgba(28, 25, 21, 0.82);
}

#page-instructions.active h2,
#page-instructions.active h3 {
    color: #f0e6c8;
}

#page-instructions.active a {
    color: #c8a860;
}

#page-instructions.active a:hover {
    color: #e8d080;
}

#page-instructions.active code {
    color: #d4c4a0;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 4px;
    border-radius: 2px;
}

#page-instructions.active pre {
    color: #d0c8b8;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #4a453a;
    border-radius: 4px;
    padding: 8px 12px;
    overflow-x: auto;
}

#page-instructions.active table {
    color: #e0d8c8;
}

#page-instructions.active table thead {
    color: #f0e6c8;
}

#page-instructions b,
#page-instructions strong {
    color: inherit;
}

/* ===== Front panel — centre vertically like the console/terminals ===== */
#page-panel.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ===== Printer page — centre the printer block vertically ===== */
#page-printer.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ===== Teletype page — centre vertically like the console/terminals ===== */
/* The base .page.active only centres horizontally (align-items: center);
   this adds vertical centring so the Model 33 ASR printer + keyboard block sits
   in the middle of the page just like the VT52 / panel / printer pages. */
#page-teletype.active {
    justify-content: center;
    overflow: hidden;
}

/* ===== REBOOT button (floating, top-right of the window) ===== */
/* Mirrors the fullscreen toggle (bottom-right): a single fixed button above
   the app content but below the modal overlays so they keep focus. Styled
   like the old Control-page button (config-control button look). */
.console-reboot {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1000;
    background: linear-gradient(180deg, #5a4a30, #3a3528);
    color: #f0e6c8;
    border: 1px solid #c8a860;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 200, 80, 0.15), 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    user-select: none;
}

.console-reboot:hover {
    background: linear-gradient(180deg, #6a5a38, #4a3a2c);
    border-color: #ffd27f;
    color: #fff3d6;
}

/* The REBOOT action only makes sense on the operator console page (teletype /
   VT52 console) where commands are typed; switchPage() toggles this class. */
.console-reboot.hidden {
    display: none !important;
}

/* Real-printer actions (Print / Save .txt) below the machine */
.printer-actions {
    margin-top: 8px;
    text-align: center;
}

.printer-actions button {
    background: linear-gradient(180deg, #5a4a30, #3a3528);
    color: #f0e6c8;
    border: 1px solid #c8a860;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 6px;
}

.printer-actions button:hover {
    background: linear-gradient(180deg, #6a5a38, #4a3a2c);
}

/* ===== VT52 Page — CRT terminal styling ===== */
/* Applies to the console VT52 and both user-terminal pages so they all
   centre the CRT the same way. */
#page-vt52.active,
#page-vt52-console.active,
#page-vt52-2.active,
#page-vt11.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Transparent so the PDP-11 photo backdrop on body shows through */
    overflow: hidden;
}

.vt52-container {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.vt52-terminal,
.vt11-terminal {
    position: relative;
    background: linear-gradient(180deg, #3a352a 0%, #2a2722 100%);
    border: 3px solid #5a554a;
    border-radius: 18px 18px 14px 14px;
    padding: 16px 20px 20px 20px;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px #6a655a;
}

/* DEC badge on terminal bezel */
.vt52-badge {
    text-align: center;
    font-family: arial, helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: #6a655a;
    text-transform: uppercase;
    margin-bottom: 6px;
    user-select: none;
}

/* CRT tube (the glass area) */
.vt52-crt {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    border: 2px solid #1a1a1a;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.25),
        inset 0 0 80px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.05);
    cursor: text;
}

/* Scanlines overlay */
.vt52-crt::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.12) 0px,
            rgba(0, 0, 0, 0.12) 1px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 2;
}

.vt52-crt canvas {
    display: block;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.12));
    outline: none;
}

/* Subtle phosphor shimmer animation */
@keyframes phosphor-shimmer {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.97;
    }
}

.vt52-crt canvas {
    animation: phosphor-shimmer 4s ease-in-out infinite;
}

/* ===== CRT effects (CONFIG → Visual → "CRT effects") ===== */
/* Enabled by toggling 'crt-effects' on <body> (see pdp11-app.js
   applyCRTEffects). Everything is pure CSS layered on top of the
   canvas-rendered VT52 tube, so the emulator's drawing pipeline is
   untouched. Only .vt52-crt terminals are affected (VT11 keeps its own
   green-phosphor look). Compositor-friendly properties only (opacity,
   transform, filter, background-position), pointer-events: none so the
   overlays never steal keyboard/click focus from the canvas. */
body.crt-effects .vt52-crt canvas {
    animation:
        phosphor-shimmer 4s ease-in-out infinite,
        crt-flicker 0.09s steps(2) infinite,
        crt-jitter 8s steps(1, end) infinite;
}

/* Rapid, irregular brightness flicker — as if the HV supply is marginal.
   The drop-shadow glow from the base rule is re-stated in every keyframe
   so the phosphor halo persists while the brightness snaps. */
@keyframes crt-flicker {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.12)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.08)) brightness(0.96);
    }
}

/* Occasional horizontal micro-jerks — a loose horizontal-hold pot. */
@keyframes crt-jitter {
    0% {
        transform: translateX(0);
    }

    90% {
        transform: translateX(0);
    }

    91% {
        transform: translateX(1px);
    }

    92% {
        transform: translateX(0);
    }

    95% {
        transform: translateX(-1px);
    }

    96%,
    100% {
        transform: translateX(0);
    }
}

/* Vertical-hold roll: a single soft bright band sweeps down the tube on a
   loop, like a drifting vertical sync. It is a separate ::before layer
   (z-index 1) beneath the scanlines (::after, z-index 2). */
body.crt-effects .vt52-crt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.05) 55%,
            transparent 100%);
    mix-blend-mode: screen;
    animation: crt-roll 6s linear infinite;
}

@keyframes crt-roll {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(250%);
    }
}

/* Scanline shimmer: the line pattern itself flickers subtly, reinforcing
   the interlaced feel of a real raster CRT. */
body.crt-effects .vt52-crt::after {
    animation: crt-scanline-shimmer 0.18s steps(2) infinite;
}

@keyframes crt-scanline-shimmer {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.85;
    }
}

/* Accessibility: users who prefer reduced motion get a stable, readable
   screen (the static scanlines and glow remain, but nothing animates). */
@media (prefers-reduced-motion: reduce) {

    body.crt-effects .vt52-crt canvas,
    body.crt-effects .vt52-crt::before,
    body.crt-effects .vt52-crt::after {
        animation: none;
    }
}

/* Status label below screen */
.vt52-status {
    margin-top: 10px;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    color: #6a655a;
    text-align: center;
    user-select: none;
    letter-spacing: 0.5px;
}

.vt52-status .led {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.vt52-status .led.on {
    background: #0f0;
    box-shadow: 0 0 6px #0f0;
}

/* ===== VT11 Display page — vector-graphics CRT ===== */
/* The VT11 canvas (1024x768) is created lazily by src/vt11.js inside the
   #vt11 container; this wraps it in a matching DEC bezel + scanlines. */
.vt11-container {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* CRT tube (green-phosphor vector display) */
/* The tube starts at the native 1024x768 canvas size but is CSS-scaled down
   to fit the available viewport (sidebar, bezel and status bar accounted for)
   while preserving the 4:3 aspect ratio. The internal 1024x768 coordinate
   space in src/vt11.js stays untouched — only the displayed size changes, so
   the page no longer overflows a 1080p window (especially with OS display
   scaling). */
.vt11-crt {
    position: relative;
    width: min(1024px, calc(100vw - 140px), calc((100vh - 120px) * 4 / 3));
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    background: #001000;
    border: 2px solid #1a1a1a;
    box-shadow:
        inset 0 0 40px rgba(0, 255, 0, 0.04),
        inset 0 0 80px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(0, 255, 0, 0.08);
}

/* Scanlines overlay (same treatment as the VT52) */
.vt11-crt::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.12) 0px,
            rgba(0, 0, 0, 0.12) 1px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 2;
}

/* The green-phosphor canvas appended by vt11.js: stretch it to fill the
   (possibly CSS-scaled) tube so the 1024x768 rendering scales with it. */
.vt11-crt #vt11 {
    width: 100%;
    height: 100%;
}

.vt11-crt canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.3));
    outline: none;
    animation: phosphor-shimmer 4s ease-in-out infinite;
}

/* ===== Hidden sidebar buttons (toggled by the CONFIG page) ===== */
.nav-btn.hidden {
    display: none !important;
}

/* ===== Config page (DEC-styled form) ===== */
#page-config.active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    color: #e0d8c8;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px;
    box-sizing: border-box;
    /* Dark translucent slab so the form stays readable over the photo */
    background: rgba(28, 25, 21, 0.82);
}

#page-config.active h2,
#page-config.active h3 {
    color: #f0e6c8;
}

#page-config.active p {
    line-height: 1.5;
}

/* ===== Storage page (media management) ===== */
#page-storage.active {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    color: #e0d8c8;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px;
    box-sizing: border-box;
    /* Dark translucent slab so the controls stay readable over the photo */
    background: rgba(28, 25, 21, 0.82);
}

#page-storage.active h2,
#page-storage.active h3 {
    color: #f0e6c8;
}

#page-storage.active p {
    line-height: 1.5;
}

#page-storage.active code {
    color: #d4c4a0;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 4px;
    border-radius: 2px;
}

.config-form {
    margin-top: 8px;
}

.config-field {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.config-label {
    flex: 0 0 220px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #c8a860;
}

.config-control {
    flex: 1;
    font-size: 13px;
}

.config-control label {
    display: inline-block;
    margin-right: 18px;
    color: #e0d8c8;
    cursor: pointer;
}

.config-radios label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.config-control input[type="radio"],
.config-control input[type="checkbox"] {
    accent-color: #c8a860;
    cursor: pointer;
}

.config-control select {
    background: #2a2722;
    color: #e0d8c8;
    border: 1px solid #5a554a;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
}

.config-control button {
    background: linear-gradient(180deg, #5a4a30, #3a3528);
    color: #f0e6c8;
    border: 1px solid #c8a860;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.config-control button:hover {
    background: linear-gradient(180deg, #6a5a38, #4a3a2c);
}

/* Apply button highlight while the CONFIG form has uncommitted changes. */
.config-control button#config-apply.dirty {
    background: linear-gradient(180deg, #8a6a30, #5a4a28);
    border-color: #ffd27f;
    box-shadow: 0 0 8px rgba(255, 210, 127, 0.45);
}

.config-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #8a857a;
}

/* Paper tape reader state indicator (Storage page). */
.tape-state {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    border: 1px solid transparent;
    vertical-align: middle;
}

.tape-state.none {
    color: #8a857a;
}

.tape-state.at-start {
    color: #7fbf7f;
    border-color: #4a7a4a;
    background: rgba(79, 122, 79, 0.15);
}

.tape-state.ready {
    color: #7fb8d8;
    border-color: #3a6a8a;
    background: rgba(63, 106, 138, 0.15);
}

.tape-state.consumed {
    color: #d08080;
    border-color: #8a4a4a;
    background: rgba(138, 74, 74, 0.15);
}

/* Punch tape size indicator (Storage page). */
.punch-size {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: bold;
    color: #7fb8d8;
    vertical-align: middle;
}

/* CONFIG page tabbed layout: a top tab bar splits the growing configuration
   into Equipment (hardware) and Visual enhancements (look & feel) panels.
   Both panels live in the same grid cell (the inactive one is hidden with
   visibility:hidden, so it still occupies space), which makes the row as
   tall as the tallest panel. The Defaults/Apply action bar sits right below
   that row, so it never jumps vertically when a tab is selected. */
.config-tabs {
    display: grid;
    grid-template-columns: 1fr;
}

.config-tab-bar {
    grid-row: 1;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 4px;
}

.config-tab {
    background: transparent;
    color: #a89e8c;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.config-tab:hover {
    color: #f0e6c8;
    background: rgba(255, 255, 255, 0.04);
}

.config-tab.active {
    color: #f0e6c8;
    background: rgba(28, 25, 21, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    /* Blend the active tab into the translucent page slab underneath. */
    border-bottom-color: rgba(28, 25, 21, 0.82);
}

.config-tab-panel {
    grid-row: 2;
    grid-column: 1;
    /* Hidden panels still take part in the grid sizing (visibility keeps the
       layout box), so the row always matches the tallest panel. */
    visibility: hidden;
}

.config-tab-panel.active {
    visibility: visible;
}

.config-actions {
    grid-row: 3;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The last field of a tab panel would otherwise double up with the action
   bar's top border when the panel is as tall as the tallest one, producing
   two stacked lines before the Defaults/Apply buttons. */
.config-tab-panel .config-field:last-child {
    border-bottom: none;
}

/* ===== Photo backdrop toggle (CONFIG) ===== */
/* body.no-photo-bg — the PDP-11 machine-room photo is switched off: restore
   the plain dark background. The whole .app-layout is painted a deep
   near-black tone (so the lighter body colour never shows in the page
   gutters), while the CONFIG/CONTROL/INFO forms keep a slightly lighter solid
   card (#1c1915 — the same tone as their photo-mode slabs) so they stay
   visually distinct from the backdrop instead of blending into it. */
body.no-photo-bg {
    background-image: none;
    background-color: #0d0c0a;
}

body.no-photo-bg .app-layout {
    background: #0d0c0a;
}

body.no-photo-bg #page-config.active,
body.no-photo-bg #page-storage.active,
body.no-photo-bg #page-instructions.active {
    /* Solid card on the dark backdrop: keeps the form readable and separates
       it from the window background (there is no photo to sit a translucent
       slab on, so a translucent one would only blend into the backdrop). */
    background: #1c1915;
}