@charset "UTF-8";

/* ==========================================================================
   Design tokens — the teletypegames.org frontend palette
   (apps/frontend/src/styles/tokens.css). Colours are space-separated RGB
   triplets, used as rgb(var(--c-x)) or rgb(var(--c-x) / .5), exactly like
   the frontend's Tailwind tokens. Dark is the default; light comes from
   data-theme="light" on <html>, set from the `theme` cookie.
   ========================================================================== */
:root {
    --c-page: 255 255 255;
    --c-surface: 250 250 250;
    --c-raised: 244 244 245;

    --c-line: 228 228 231;
    --c-line-strong: 212 212 216;

    --c-fg: 24 24 27;
    --c-fg-muted: 82 82 91;
    --c-fg-subtle: 113 113 122;

    --c-accent: 21 128 61;
    --c-accent-hover: 22 101 52;
    --c-accent-fg: 255 255 255;
    --c-accent-quiet: 220 252 231;

    --c-info: 29 78 216;
    --c-warn: 180 83 9;
    --c-danger: 185 28 28;

    --radius-card: 8px;
    --radius-control: 6px;

    --shadow-pop: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
    --shadow-float: 0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);

    /* Tailwind's default font stacks — what the frontend renders with */
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --topbar-h: 54px;

    color-scheme: light;
}

[data-theme='dark'] {
    --c-page: 9 9 11;
    --c-surface: 24 24 27;
    --c-raised: 39 39 42;

    --c-line: 39 39 42;
    --c-line-strong: 63 63 70;

    --c-fg: 250 250 250;
    --c-fg-muted: 161 161 170;
    --c-fg-subtle: 113 113 122;

    --c-accent: 74 222 128;
    --c-accent-hover: 134 239 172;
    --c-accent-fg: 9 9 11;
    --c-accent-quiet: 20 83 45;

    --c-info: 96 165 250;
    --c-warn: 255 176 0;
    --c-danger: 248 113 113;

    color-scheme: dark;
}

/* ==========================================================================
   general.css — base, links, forms, buttons, tooltips, scrollbar plugin,
   chapter / error page, and the fixed top bar + global layout.
   ========================================================================== */

html, body {
    background-color: rgb(var(--c-page));
}

body {
    color: rgb(var(--c-fg-muted));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: rgb(var(--c-accent));
    text-underline-offset: 4px;
    transition: color .15s;
}
a:hover {
    color: rgb(var(--c-accent-hover));
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid rgb(var(--c-accent));
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: rgb(var(--c-accent) / .25);
}

mark {
    background: rgb(var(--c-warn) / .3);
    color: rgb(var(--c-fg));
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Forms (login page, search) ---- */
fieldset {
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-card);
}

textarea, select,
input[type="email"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="text"], input[type="url"], input[type="color"],
input[type="date"], input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"], input[type="week"] {
    background-color: rgb(var(--c-surface));
    color: rgb(var(--c-fg));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-control);
    box-shadow: none;
}
textarea:hover, select:hover,
input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover,
input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover,
input[type="url"]:hover {
    border-color: rgb(var(--c-line-strong));
}
textarea:focus, select:focus,
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus,
input[type="url"]:focus {
    border-color: rgb(var(--c-accent));
    box-shadow: 0 0 0 1px rgb(var(--c-accent));
    outline: none;
}

/* ---- Buttons — .btn-accent / .btn-ghost of the frontend ---- */
.button, .button-secondary,
button[type="submit"], input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.button,
button[type="submit"], input[type="submit"] {
    background: rgb(var(--c-accent));
    color: rgb(var(--c-accent-fg));
}
.button:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    background: rgb(var(--c-accent-hover));
    color: rgb(var(--c-accent-fg));
}
.button-secondary {
    background: transparent;
    border-color: rgb(var(--c-line));
    color: rgb(var(--c-fg));
}
.button-secondary:hover {
    background: rgb(var(--c-raised));
    border-color: rgb(var(--c-line-strong));
    color: rgb(var(--c-fg));
}

.bg {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
}

.default-animation, #sidebar, #sidebar ul, #body, #body .padding, #body .nav {
    transition: all 0.3s ease;
}

/* ---- Chapter / error page ---- */
#chapter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem 0;
}
#chapter #body-inner {
    padding-bottom: 3rem;
    max-width: 80%;
}
#chapter h3 {
    font-weight: 400;
    text-align: center;
}
#chapter h1 {
    font-size: 4rem;
    border-bottom: 1px solid rgb(var(--c-line));
}
#chapter p {
    text-align: center;
    font-size: 1.1rem;
}

/* ---- Tooltips ---- */
.tooltipped { position: relative; }

.tooltipped:after {
    position: absolute;
    z-index: 1000000;
    display: none;
    padding: 5px 8px;
    font: normal normal 11px/1.5 var(--font-sans);
    color: rgb(var(--c-fg));
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    pointer-events: none;
    content: attr(aria-label);
    background: rgb(var(--c-raised));
    border: 1px solid rgb(var(--c-line-strong));
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
}
.tooltipped:hover:after, .tooltipped:active:after, .tooltipped:focus:after {
    display: inline-block;
}
.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
    top: 100%; right: 50%; margin-top: 5px;
}
.tooltipped-se:after { right: auto; left: 50%; margin-left: -15px; }
.tooltipped-sw:after { margin-right: -15px; }
.tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after {
    right: 50%; bottom: 100%; margin-bottom: 5px;
}
.tooltipped-ne:after { right: auto; left: 50%; margin-left: -15px; }
.tooltipped-nw:after { margin-right: -15px; }
.tooltipped-s:after, .tooltipped-n:after { transform: translateX(50%); }
.tooltipped-w:after { right: 100%; bottom: 50%; margin-right: 5px; transform: translateY(50%); }
.tooltipped-e:after { bottom: 50%; left: 100%; margin-left: 5px; transform: translateY(50%); }

/* ---- jquery.scrollbar (learn.js still initialises it) ---- */
.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; }
.scroll-element { display: none; }
.scroll-element, .scroll-element div { box-sizing: content-box; }
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible { display: block; }
.scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; }

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}
.scrollbar-inner > .scroll-element div {
    display: block; height: 100%; left: 0; top: 0; width: 100%;
}
.scrollbar-inner > .scroll-element.scroll-x { bottom: 2px; height: 8px; left: 0; width: 100%; }
.scrollbar-inner > .scroll-element.scroll-y { height: 100%; right: 2px; top: 0; width: 8px; }
.scrollbar-inner > .scroll-element .scroll-element_outer { overflow: hidden; }
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar { border-radius: 8px; }
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar { opacity: 0.4; }
.scrollbar-inner > .scroll-element .scroll-element_track { background-color: transparent; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: rgb(var(--c-line-strong)); }

.lightbox-active #body { overflow: visible; }
.lightbox-active #body .padding { overflow: visible; }

.featherlight .featherlight-content {
    background: rgb(var(--c-surface));
    border-radius: var(--radius-card);
}
.featherlight:last-of-type { background: rgb(0 0 0 / .8); }
.featherlight img { margin: 0 !important; }

/* ==========================================================================
   Top bar — the frontend's sticky .app-header: page/90 + blur, hairline
   ========================================================================== */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--topbar-h);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    margin: 0;
    background: rgb(var(--c-page) / .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(var(--c-line));
    font-size: .875rem;
    box-sizing: border-box;
}

#topbar-logo {
    display: inline-flex;
    align-items: baseline;
    gap: .6rem;
    flex: 0 0 auto;
    color: rgb(var(--c-fg));
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    text-decoration: none;
}
#topbar-logo:hover { color: rgb(var(--c-fg)); }
#topbar-logo .topbar-badge {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgb(var(--c-accent));
}

#top-bar #sidebar-toggle {
    color: rgb(var(--c-fg-muted));
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border-radius: var(--radius-control);
    font-size: 1.1rem;
    text-decoration: none;
}
#top-bar #sidebar-toggle:hover {
    color: rgb(var(--c-fg));
    background: rgb(var(--c-raised));
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.topbar-link {
    color: rgb(var(--c-fg-muted));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .375rem .5rem;
    border-radius: var(--radius-control);
    transition: color .15s;
}
.topbar-link:hover { color: rgb(var(--c-fg)); }
.topbar-link .mdi { font-size: 1.1rem; }
.topbar-sep {
    width: 1px;
    height: 1.1rem;
    margin: 0 .35rem;
    background: rgb(var(--c-line-strong));
    color: transparent;
    overflow: hidden;
}

.topbar-langs {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0 .25rem;
    font-size: .75rem;
    font-weight: 500;
}
.topbar-lang {
    padding: 0 .25rem;
    color: rgb(var(--c-fg-subtle));
    text-decoration: none;
    transition: color .15s;
}
.topbar-lang:hover { color: rgb(var(--c-fg)); }
.topbar-lang.active { color: rgb(var(--c-fg)); }
.topbar-lang-sep { color: rgb(var(--c-fg-subtle)); }

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: rgb(var(--c-fg-muted));
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.topbar-icon-btn:hover {
    color: rgb(var(--c-fg));
    background: rgb(var(--c-raised));
}
.topbar-icon-btn .theme-icon-light { display: none; }
[data-theme='dark'] .topbar-icon-btn .theme-icon-light { display: inline; }
[data-theme='dark'] .topbar-icon-btn .theme-icon-dark { display: none; }

body {
    padding-top: var(--topbar-h);
    box-sizing: border-box;
}

@media (min-width: 48em) {
    body {
        display: flex;
        flex-wrap: wrap;
        min-height: 100vh;
    }
    #top-bar #sidebar-toggle { display: none; }
}

@media (max-width: 47.99em) {
    #top-bar { padding: 0 .75rem; gap: .5rem; }
    #top-bar #sidebar-toggle { display: inline-flex; }
    #topbar-logo .topbar-badge { display: none; }
    .topbar-link .topbar-link-label { display: none; }
}