@charset "UTF-8";
/* ==========================================================================
   retro.css — the frontend's Retro Mode (apps/frontend/src/styles/retro.css):
   a DOS/TUI look with the CGA palette, Lucida Console, square corners,
   double white frames and hard black shadows. Active when <html> carries
   data-retro="1" (cookie `retro-mode=1`); images/bg-blue-black.png is the
   tuicss 2.1.2 (MIT) background tile the frontend uses.
   ========================================================================== */

@media screen {

[data-retro='1'] {
    --c-page: 0 0 0;
    --c-surface: 0 0 168;
    --c-raised: 0 0 168;
    --c-line: 255 255 255;
    --c-line-strong: 255 255 255;
    --c-fg: 255 255 255;
    --c-fg-muted: 200 200 200;
    --c-fg-subtle: 168 168 168;
    --c-accent: 0 168 0;
    --c-accent-hover: 0 168 0;
    --c-accent-fg: 0 0 0;
    --c-accent-quiet: 0 0 168;
    --c-warn: 168 168 0;
    --c-danger: 168 0 0;

    --font-sans: "Lucida Console", monospace;
    --font-mono: "Lucida Console", monospace;

    color-scheme: dark;
}

@keyframes retro-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.retro-mode,
.retro-mode body {
    font-family: "Lucida Console", monospace !important;
    background-color: #000 !important;
}

.retro-mode body * {
    font-family: "Lucida Console", monospace !important;
    border-radius: 0 !important;
    transition: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.retro-mode body .mdi::before,
.retro-mode body .fa::before {
    font-family: "Material Design Icons" !important;
}
.retro-mode body .fa::before {
    font-family: FontAwesome !important;
}

.retro-mode body { color: #fff; }

/* ---- Top bar — the grey menu bar, one compact line ---- */
.retro-mode {
    --topbar-h: 26px;
}
.retro-mode #top-bar {
    background-color: #a8a8a8 !important;
    border-bottom: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    gap: 0 !important;
}

.retro-mode #topbar-logo,
.retro-mode .topbar-link,
.retro-mode .topbar-lang,
.retro-mode #top-bar #sidebar-toggle {
    height: var(--topbar-h);
    display: inline-flex !important;
    align-items: center;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 0 1ch !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    text-decoration: none !important;
}
.retro-mode #topbar-logo { margin-left: 1ch !important; }
@media (min-width: 48em) {
    .retro-mode #top-bar #sidebar-toggle { display: none !important; }
}
.retro-mode .topbar-link .mdi { display: none; }
.retro-mode .topbar-link .topbar-link-label { display: inline !important; }
.retro-mode .topbar-link::first-letter,
.retro-mode #topbar-logo > span:first-child::first-letter {
    color: #a80000 !important;
    font-weight: bold !important;
}
.retro-mode .topbar-link:hover,
.retro-mode .topbar-lang:hover,
.retro-mode .topbar-lang.active,
.retro-mode #top-bar #sidebar-toggle:hover {
    background-color: #00a800 !important;
    color: #000 !important;
}
.retro-mode #topbar-logo .topbar-badge {
    color: #0000a8 !important;
    padding: 0 !important;
}
.retro-mode #topbar-logo .topbar-badge::after {
    content: "_";
    animation: retro-blink .9s step-start infinite;
}
.retro-mode .topbar-right { gap: 0 !important; margin-right: 1ch; }
.retro-mode .topbar-langs { padding: 0 !important; gap: 0 !important; }
.retro-mode .topbar-lang-sep,
.retro-mode .topbar-sep { display: none !important; }
.retro-mode [data-theme-toggle] { display: none !important; }

/* ---- Sidebar — blue panel ---- */
.retro-mode #sidebar {
    background-color: #0000a8 !important;
    border-right: 2px solid #a8a8a8 !important;
}
.retro-mode #sidebar a,
.retro-mode #sidebar .topics li.dd-item > a,
.retro-mode #sidebar .topics li.dd-item > a .mdi,
.retro-mode #sidebar .page-tree .tree-item a {
    color: #fff !important;
}
.retro-mode #sidebar .nav-header {
    color: #ffff00 !important;
}
.retro-mode #sidebar .topics li.dd-item > a:hover,
.retro-mode #sidebar .page-tree .tree-item a:hover {
    background: #a8a8a8 !important;
    color: #000 !important;
}
.retro-mode #sidebar .topics li.dd-item > a:hover .mdi { color: #000 !important; }
.retro-mode #sidebar .topics li.dd-item.active > a,
.retro-mode #sidebar .page-tree li.active > .tree-item a {
    background: #00a800 !important;
    color: #000 !important;
    box-shadow: none !important;
}
.retro-mode #sidebar .topics li.dd-item.active > a .mdi { color: #000 !important; }

.retro-mode #sidebar ul.sidebar-tabs {
    margin: 1rem .6rem .5rem !important;
    padding: 0 !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
}
.retro-mode #sidebar ul.sidebar-tabs li a {
    padding: 4px 12px !important;
    color: #000 !important;
    background: #a8a8a8 !important;
    box-shadow: none !important;
}
.retro-mode #sidebar ul.sidebar-tabs li a .mdi { color: #000 !important; }
.retro-mode #sidebar ul.sidebar-tabs li a:hover,
.retro-mode #sidebar ul.sidebar-tabs li.active > a {
    background: #00a800 !important;
    color: #000 !important;
}
.retro-mode .page-tree .tree-toggle {
    background: #0000a8 !important;
    border-color: #fff !important;
    color: #fff !important;
}
.retro-mode .page-tree ul ul li::before,
.retro-mode .page-tree ul ul li::after {
    border-color: #a8a8a8 !important;
}

/* ---- Breadcrumb — the hero band with the tuicss tile ---- */
.retro-mode #breadcrumb-bar {
    background-color: #0000a8 !important;
    background-image: url("../images/bg-blue-black.png") !important;
    background-repeat: repeat !important;
    border-bottom: none !important;
}
.retro-mode #body .breadcrumbs a,
.retro-mode #body .breadcrumbs .crumb-home,
.retro-mode .breadcrumbs .crumb-sep {
    color: #fff !important;
}
.retro-mode .breadcrumbs .crumb-current { color: #ffff00 !important; }

/* ---- Content ---- */
.retro-mode #body,
.retro-mode #body p,
.retro-mode #body li {
    color: #fff !important;
}
.retro-mode #body h1,
.retro-mode #body h2,
.retro-mode #body h3,
.retro-mode #body h4,
.retro-mode #body h5,
.retro-mode #body h6 {
    color: #ffff00 !important;
    font-weight: normal !important;
    border-bottom-color: #a8a8a8 !important;
}
.retro-mode #body a {
    color: #55ff55 !important;
    text-decoration: underline !important;
}
.retro-mode #body strong,
.retro-mode #body b { color: #fff !important; }

.retro-mode #body pre,
.retro-mode #body code,
.retro-mode #body kbd {
    background-color: #000 !important;
    border: 2px solid #a8a8a8 !important;
    color: #00a800 !important;
}
.retro-mode #body pre code { border: 0 !important; }

.retro-mode .codesh-block {
    background-color: #000 !important;
    border: 2px solid #a8a8a8 !important;
    box-shadow: none !important;
}
.retro-mode .codesh-block .codesh-header {
    background-color: #a8a8a8 !important;
    border-bottom: none !important;
}
.retro-mode .codesh-block .codesh-lang,
.retro-mode .codesh-block .codesh-title {
    color: #000 !important;
    background: transparent !important;
}
.retro-mode .codesh-block pre,
.retro-mode .codesh-block .phiki,
.retro-mode .codesh-block .shiki {
    background-color: #000 !important;
    border: 0 !important;
}
html.retro-mode body .codesh-block .phiki span,
html.retro-mode body .codesh-block .shiki span {
    color: #00a800 !important;
}

.retro-mode blockquote {
    background: transparent !important;
    border: none !important;
    border-left: 4px solid #00a800 !important;
}
.retro-mode blockquote::before { color: #00a800 !important; }
.retro-mode #body blockquote > p { color: #c8c8c8 !important; }

.retro-mode #body table {
    border: 2px solid #a8a8a8 !important;
    border-collapse: collapse !important;
}
.retro-mode #body th {
    background-color: #a8a8a8 !important;
    color: #000 !important;
    font-weight: normal !important;
    border: none !important;
}
.retro-mode #body td {
    border: none !important;
    color: #fff !important;
}
.retro-mode #body tbody tr:nth-child(even) td {
    background-color: #0000a8 !important;
}
.retro-mode #body tbody tr:hover td,
.retro-mode #body tbody tr:hover td a,
.retro-mode #body tbody tr:hover td code {
    background-color: #a8a8a8 !important;
    color: #000 !important;
}

.retro-mode #body hr { border-bottom: 2px solid #a8a8a8 !important; }

.retro-mode #body img {
    border: 2px solid #a8a8a8 !important;
    image-rendering: pixelated;
}

/* ---- Cards — blue window with the double white frame ---- */
.retro-mode #page-toc,
.retro-mode .child-card,
.retro-mode .mermaid,
.retro-mode .notices {
    background-color: #0000a8 !important;
    background-image: none !important;
    color: #fff !important;
    border: 6px double #fff !important;
    box-shadow: 10px 10px 0 #a8a8a8 !important;
}
.retro-mode #page-toc { box-shadow: none !important; }
.retro-mode #page-toc .toc-header {
    background: #a8a8a8 !important;
    color: #000 !important;
    border-bottom: none !important;
}
.retro-mode #page-toc .toc-list li a {
    color: #fff !important;
    text-decoration: none !important;
    border-left: none !important;
}
.retro-mode #page-toc .toc-list li a:hover {
    background: #a8a8a8 !important;
    color: #000 !important;
}
.retro-mode #page-toc .toc-list li.active > a {
    background: #00a800 !important;
    color: #000 !important;
}
.retro-mode .child-card a { text-decoration: none !important; }
.retro-mode .child-card a strong { color: #ffff00 !important; }
.retro-mode .child-card p { color: #c8c8c8 !important; }
.retro-mode .mermaid { background-color: #fff !important; }

/* ---- Buttons — green with a hard shadow ---- */
.retro-mode .print-button,
.retro-mode .button,
.retro-mode .button-secondary,
.retro-mode button[type="submit"],
.retro-mode input[type="submit"],
.retro-mode .codesh-copy,
.retro-mode .retro-toggle-btn {
    background-color: #00a800 !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 4px 4px 0 #a8a8a8 !important;
    padding: 4px 10px !important;
    font-weight: normal !important;
    text-decoration: none !important;
}
html.retro-mode[data-child-layout="table"] .child-index-switch [data-child-layout="table"],
html.retro-mode[data-child-layout="cards"] .child-index-switch [data-child-layout="cards"],
html.retro-mode:not([data-child-layout]) [data-default="table"] .child-index-switch [data-child-layout="table"],
html.retro-mode:not([data-child-layout]) [data-default="cards"] .child-index-switch [data-child-layout="cards"] {
    background-color: #ffff00 !important;
}
.retro-mode .print-button:active,
.retro-mode .button:active,
.retro-mode .codesh-copy:active {
    background-color: #a8a8a8 !important;
    box-shadow: none !important;
}

.retro-mode input,
.retro-mode textarea,
.retro-mode select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #a8a8a8 !important;
    box-shadow: none !important;
}

/* ---- Footer — grey bar ---- */
.retro-mode #site-footer {
    background-color: #a8a8a8 !important;
    border-top: none !important;
}
.retro-mode #site-footer,
.retro-mode .footer-brand,
.retro-mode .footer-link,
.retro-mode .footer-license,
.retro-mode .footer-license a,
.retro-mode .footer-tagline {
    color: #000 !important;
}
.retro-mode .footer-bottom { border-top: 2px solid #000 !important; }
.retro-mode .retro-toggle-btn {
    background: transparent !important;
    box-shadow: none !important;
    border: 2px solid #000 !important;
}
.retro-mode .retro-toggle-btn:hover { background-color: #00a800 !important; }

.retro-mode mark {
    background: #ffff00 !important;
    color: #000 !important;
}
.retro-mode ::selection {
    background: #a8a8a8;
    color: #000;
}

}