@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --bg: #080509;
    --panel: #100a14;

    --purple: #a855f7;
    --dark-purple: #6b21a8;
    --bright-purple: #c084fc;

    --text: #d8b4fe;
    --muted: #9a7faa;
    --text-dim: #594764;
    --text-bright: #eee;

    --green: #8aff80;
    --red: #ff5c5c;

    --border: #4b1b63;
    --border-dark: #351044;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    background: var(--bg);
}


/* =========================================================
   BODY
   ========================================================= */

body {
    min-height: 100vh;

    background:
        radial-gradient(circle at center,
            #160d1d 0%,
            #080509 70%);

    color: var(--text);

    font-family: "VT323", monospace;
    font-size: 22px;

    text-shadow:
        0 0 4px rgba(168, 85, 247, 0.25);

    overflow: hidden;
}


/* =========================================================
   CRT OVERLAY
   ---------------------------------------------------------
   Enabled on desktop and laptop.
   Disabled on phones in the mobile media query.
   ========================================================= */

.crt-overlay {
    position: fixed;

    inset: 0;

    z-index: 999;

    pointer-events: none;

    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px);

    box-shadow:
        inset 0 0 120px rgba(0, 0, 0, 0.85);

    opacity: 0.9;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    width: 100%;

    background: #0b070e;

    border-bottom:
        1px solid var(--border);

    box-shadow:
        0 0 15px rgba(107, 33, 168, 0.2);
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    width: 100%;
    height: 40px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr);

    align-items: center;

    padding:
        0 24px;

    background: #09060b;

    border-bottom:
        1px solid var(--border-dark);

    overflow: hidden;
}


/* =========================================================
   TERMINAL PROMPT
   ========================================================= */

.terminal-prompt {
    justify-self: start;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.prompt-prefix {
    color: var(--bright-purple);
}


.command-arrow {
    color: var(--green);

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.35);
}


.terminal-path {
    margin-left: 6px;

    color: var(--muted);
}


/* =========================================================
   SYSTEM STATUS
   ========================================================= */

.system-status {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: var(--green);

    font-size: 20px;

    white-space: nowrap;

    text-shadow:
        0 0 5px rgba(138, 255, 128, 0.3);
}


.status-indicator {
    color: var(--green);

    text-shadow:
        0 0 6px rgba(138, 255, 128, 0.5);

    animation:
        status-blink 1s steps(1, start) infinite;
}


@keyframes status-blink {

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}


/* =========================================================
   CLOCK
   ========================================================= */

.nav-time {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--green);

    font-size: 20px;

    white-space: nowrap;
}


#date,
#time,
.time-separator {
    color: var(--green);
}


/* =========================================================
   GENERAL PROMPTS
   ========================================================= */

.prompt {
    color: var(--dark-purple);

    text-shadow:
        0 0 5px rgba(107, 33, 168, 0.35);
}


.command {
    color: var(--text-bright);
}


/* =========================================================
   MAIN
   ========================================================= */

.site-main,
main {
    width: 100%;

    height:
        calc(100vh - 40px);

    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.terminal {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: var(--panel);

    border-bottom:
        1px solid var(--border);

    overflow: hidden;

    box-shadow:
        inset 0 0 40px rgba(107, 33, 168, 0.06);
}


/* =========================================================
   TERMINAL BODY
   ========================================================= */

.terminal-body {
    width: 100%;
    height: 100%;

    padding:
        20px 28px 18px;

    overflow: hidden;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 28px;
}


/* =========================================================
   LEFT DASHBOARD
   ========================================================= */

.dashboard-left {
    min-width: 0;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    position: relative;

    margin-top: 14px;

    flex-shrink: 0;
}


.section:first-child {
    margin-top: 0;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title {
    display: flex;

    align-items: center;

    width: 100%;

    margin:
        0 0 7px;

    padding: 0;

    color: var(--bright-purple);

    font-size: 24px;

    line-height: 1;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-shadow:
        0 0 5px rgba(192, 132, 252, 0.35);

    white-space: nowrap;

    overflow: hidden;
}


.section-title::before {
    content: "══[";

    margin-right: 5px;

    color: var(--dark-purple);

    font-size: 21px;

    flex-shrink: 0;
}


.section-title::after {
    content:
        "]════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════";

    margin-left: 5px;

    color: var(--dark-purple);

    font-size: 21px;

    white-space: nowrap;

    overflow: hidden;

    flex: 1;
}


/* =========================================================
   SECTION CONTENT
   ========================================================= */

.section-content {
    position: relative;

    margin-left: 20px;

    padding-left: 16px;

    border-left:
        1px solid var(--border-dark);
}


.section-description {
    margin:
        0 0 6px;

    color: var(--muted);

    line-height: 1.05;
}


.section-description::before {
    content: "> ";

    color: var(--dark-purple);
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-content {
    width: 100%;

    display: grid;

    grid-template-columns:
        120px 1px minmax(0, 1fr) 1px minmax(0, 1fr);

    column-gap: 18px;

    align-items: stretch;

    min-width: 0;
}


/* =========================================================
   PROFILE COLUMNS
   ========================================================= */

.profile-column {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    overflow: hidden;
}


/* =========================================================
   PROFILE IMAGE COLUMN
   ========================================================= */

.profile-image-column {
    width: 120px;
    min-width: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.profile-image {
    display: block;

    width: 110px;
    height: 110px;

    max-width: 110px;

    object-fit: contain;

    image-rendering: pixelated;

    border: none;

    filter:
        drop-shadow(0 0 5px rgba(168, 85, 247, 0.5));
}


/* =========================================================
   PROFILE SEPARATORS
   ========================================================= */

.profile-separator {
    width: 1px;

    align-self: stretch;

    background:
        var(--dark-purple);

    opacity: 0.8;

    box-shadow:
        0 0 5px rgba(107, 33, 168, 0.35);
}


/* =========================================================
   PROFILE HEADERS
   ========================================================= */

.profile-header {
    width: 100%;

    margin-bottom: 3px;

    color: var(--bright-purple);

    font-size: 22px;

    line-height: 1;

    text-align: left;

    white-space: nowrap;

    overflow: hidden;

    text-shadow:
        0 0 5px rgba(192, 132, 252, 0.35);
}


/* =========================================================
   PROFILE ACTIVITY ROW
   ---------------------------------------------------------
   LABEL | DASHES | VALUE

   IMPORTANT:
   The dash element does NOT use width: 100%.
   The GRID TRACK itself determines its width.

   This prevents the dashes from extending underneath
   the value.
   ========================================================= */

.profile-column .activity-line {
    width: 100%;
    max-width: 100%;

    display: grid;

    grid-template-columns:
        max-content minmax(0, 1fr) max-content;

    align-items: center;

    min-width: 0;
    min-height: 1.2rem;

    font-size: 20px;
    line-height: 1;

    white-space: nowrap;

    overflow: hidden;
}


/* =========================================================
   PROFILE LABEL
   ========================================================= */

.profile-column .activity-label {
    grid-column: 1;

    min-width: 0;

    color: var(--muted);

    text-align: left;

    white-space: nowrap;
}


/* =========================================================
   PROFILE DYNAMIC DASHES
   ========================================================= */

.profile-column .activity-dashes {
    grid-column: 2;

    /*
     * DO NOT use width: 100% here.
     *
     * The grid track already gives this element
     * exactly the available width.
     */
    width: auto;

    min-width: 0;

    margin:
        0 8px;

    overflow: hidden;

    color: var(--dark-purple);

    opacity: 0.8;

    white-space: nowrap;

    text-align: left;

    line-height: 1;

    font-size: 20px;

    letter-spacing: 0;

    text-shadow:
        0 0 3px rgba(107, 33, 168, 0.25);
}


.profile-column .activity-dashes::before {
    content:
        "--------------------------------------------------------------";

    display: block;

    width: max-content;

    max-width: none;

    overflow: visible;

    white-space: nowrap;

    text-align: left;
}


/* =========================================================
   PROFILE VALUES
   ========================================================= */

.profile-column .activity-line>span:last-child {
    grid-column: 3;

    min-width: 0;

    width: max-content;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: right;

    justify-self: end;

    margin: 0;
}


/* =========================================================
   ACTIVITY STATUS
   ========================================================= */

.profile-column .activity-status {
    grid-column: 3;

    display: inline-flex;

    align-items: center;

    justify-content: flex-end;

    gap: 6px;

    min-width: max-content;

    max-width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-align: right;
}


/* =========================================================
   STATUS DOT
   ========================================================= */

.profile-column .activity-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    display: inline-block;

    flex-shrink: 0;
}


/* =========================================================
   ONLINE
   ========================================================= */

.profile-column .activity-status.online {
    color: var(--green);
}


.profile-column .activity-status.online .activity-status-dot {
    background: var(--green);

    box-shadow:
        0 0 5px var(--green);
}


/* =========================================================
   OFFLINE
   ========================================================= */

.profile-column .activity-status.offline {
    color: var(--red);
}


.profile-column .activity-status.offline .activity-status-dot {
    background: var(--red);

    box-shadow:
        0 0 5px var(--red);
}


/* =========================================================
   SYSTEM INFORMATION
   ========================================================= */

.system-info {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 1px minmax(0, 1fr);

    column-gap: 12px;

    margin: 0;

    padding:
        5px 0;

    border-top:
        1px dashed var(--border-dark);

    border-bottom:
        1px dashed var(--border-dark);

    align-items: stretch;

    min-width: 0;
}


/* =========================================================
   SYSTEM COLUMNS
   ========================================================= */

.system-column {
    min-width: 0;

    overflow: hidden;
}


/* =========================================================
   SYSTEM LINES
   ========================================================= */

.system-line {
    width: 100%;

    display: grid;

    grid-template-columns:
        max-content minmax(0, 1fr) max-content;

    align-items: center;

    gap: 0;

    min-width: 0;

    height: 24px;

    color: var(--text);

    font-size: 22px;

    line-height: 1;

    white-space: nowrap;

    overflow: hidden;
}


/* =========================================================
   SYSTEM LABELS
   ========================================================= */

.system-label {
    grid-column: 1;

    width: auto;

    min-width: 0;

    color: var(--muted);

    white-space: nowrap;
}


.system-label::before {
    content: "> ";

    color: var(--dark-purple);
}


/* =========================================================
   SYSTEM DYNAMIC DASHES
   ========================================================= */

.system-dashes {
    grid-column: 2;

    /*
     * Same fix as profile dashes:
     * let the grid track determine the width.
     */
    width: auto;

    min-width: 0;

    margin:
        0 8px;

    overflow: hidden;

    color: var(--dark-purple);

    opacity: 0.8;

    white-space: nowrap;

    text-align: left;

    line-height: 1;

    font-size: 20px;

    letter-spacing: 0;

    text-shadow:
        0 0 3px rgba(107, 33, 168, 0.25);
}


.system-dashes::before {
    content:
        "--------------------------------------------------------------";

    display: block;

    width: max-content;

    max-width: none;

    overflow: visible;

    white-space: nowrap;
}


/* =========================================================
   SYSTEM VALUES
   ========================================================= */

.system-line>span:not(.system-label):not(.system-dashes) {
    grid-column: 3;

    min-width: 0;

    width: max-content;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: right;

    justify-self: end;
}


/* =========================================================
   SYSTEM SEPARATORS
   ========================================================= */

.system-separator {
    width: 1px;

    align-self: stretch;

    background:
        var(--dark-purple);

    opacity: 0.8;

    box-shadow:
        0 0 5px rgba(107, 33, 168, 0.35);

    pointer-events: none;
}


/* =========================================================
   BENJI BOTTOM SECTION
   ========================================================= */

.benji-section {
    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;
}


.benji-section .section-content {
    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;
}


.system-benji {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 180px;

    overflow: hidden;

    border:
        1px solid var(--border);

    background:
        #07040a;

    box-shadow:
        inset 0 0 20px rgba(107, 33, 168, 0.18),
        0 0 6px rgba(107, 33, 168, 0.12);

    display: block;
}


/* =========================================================
   BENJI SCREEN SCANLINES
   ========================================================= */

.system-benji::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 4px);

    z-index: 2;
}


/* =========================================================
   BENJI SCREEN GLOW
   ========================================================= */

.system-benji::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 25px rgba(168, 85, 247, 0.12);

    z-index: 3;
}


/* =========================================================
   BENJI
   ========================================================= */

.system-benji .benji-character {
    position: absolute;

    width: 78px;
    height: 78px;

    top: 0;
    left: 0;

    object-fit: contain;

    image-rendering: pixelated;

    pointer-events: none;

    z-index: 4;

    filter:
        drop-shadow(0 0 5px rgba(168, 85, 247, 0.45));

    animation:
        benji-bounce-x 7s linear infinite alternate,
        benji-bounce-y 5s linear infinite alternate;
}


/* =========================================================
   BENJI MOVEMENT
   ========================================================= */

@keyframes benji-bounce-x {

    0% {
        left: 0;
    }

    100% {
        left: calc(100% - 78px);
    }

}


@keyframes benji-bounce-y {

    0% {
        top: 0;
    }

    100% {
        top: calc(100% - 78px);
    }

}


/* =========================================================
   STATUS COLORS
   ========================================================= */

.ok {
    color: var(--green);

    text-shadow:
        0 0 4px rgba(138, 255, 128, 0.3);
}


.offline {
    color: var(--red);

    text-shadow:
        0 0 4px rgba(255, 92, 92, 0.3);
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-links {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 8px;

    margin-left: 20px;

    font-size: 22px;
}


.service-prompt {
    color: var(--purple);

    white-space: nowrap;

    text-shadow:
        0 0 5px rgba(107, 33, 168, 0.35);
}


.service-link {
    color: var(--green);

    text-decoration: none;

    white-space: nowrap;

    text-shadow:
        0 0 8px rgba(138, 255, 128, 0.55);
}


.service-link:hover {
    color: #70a533;

    text-shadow:
        0 0 8px rgba(138, 255, 128, 0.55);
}


/* =========================================================
   LIVE LOG PANEL
   ========================================================= */

.log-panel {
    min-width: 0;
    min-height: 0;

    height: 100%;

    display: flex;

    flex-direction: column;

    color: var(--text);

    overflow: hidden;
}


/* =========================================================
   LIVE LOG HEADER
   ========================================================= */

.log-header {
    width: 100%;

    height: 30px;
    min-height: 30px;

    display: flex;

    align-items: center;

    overflow: hidden;

    white-space: nowrap;
}


.log-bracket {
    color: var(--dark-purple);

    flex-shrink: 0;

    font-size: 24px;

    line-height: 1;
}


.log-title {
    color: var(--bright-purple);

    font-size: 24px;

    line-height: 1;

    letter-spacing: 1px;

    text-shadow:
        0 0 5px rgba(192, 132, 252, 0.35);

    flex-shrink: 0;
}


.log-line {
    flex: 1;

    min-width: 20px;

    height: 24px;

    margin-left: 6px;

    overflow: hidden;

    color: var(--dark-purple);

    white-space: nowrap;

    line-height: 1;

    font-size: 21px;

    opacity: 0.9;
}


.log-line::before {
    content:
        "════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════";

    display: block;

    width: max-content;

    white-space: nowrap;
}


/* =========================================================
   LOG WINDOW
   ========================================================= */

.log-window {
    flex: 1;

    min-width: 0;
    min-height: 0;

    width: 100%;

    padding:
        10px 14px;

    margin: 0;

    overflow-y: auto;
    overflow-x: hidden;

    border:
        1px solid var(--border);

    background: #09060b;

    box-shadow:
        inset 0 0 25px rgba(107, 33, 168, 0.08);
}


/* =========================================================
   LOG ENTRIES
   ========================================================= */

.log-entry {
    width: 100%;

    display: grid;

    grid-template-columns:
        72px 64px 80px minmax(0, 1fr);

    gap: 8px;

    min-height: 24px;

    align-items: baseline;

    white-space: nowrap;

    font-size: 20px;
}


.log-time {
    color: var(--text-dim);

    overflow: hidden;
}


.log-level {
    font-size: 19px;

    overflow: hidden;
}


.log-level.ok {
    color: var(--green);
}


.log-level.info {
    color: var(--bright-purple);
}


.log-level.event {
    color: var(--purple);
}


.log-source {
    color: var(--muted);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.log-message {
    color: var(--text);

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.log-window::-webkit-scrollbar {
    width: 8px;
}


.log-window::-webkit-scrollbar-track {
    background: #080509;
}


.log-window::-webkit-scrollbar-thumb {
    background: var(--dark-purple);

    border:
        1px solid var(--border);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body {
        overflow: auto;
    }


    /* CRT OFF ON PHONES */

    .crt-overlay {
        display: none;
    }


    .site-main,
    main {
        height: auto;

        min-height:
            calc(100vh - 40px);
    }


    .terminal {
        height: auto;

        min-height:
            calc(100vh - 40px);

        overflow: visible;
    }


    .terminal-body {
        height: auto;

        min-height:
            calc(100vh - 40px);

        padding:
            18px 20px;
    }


    .dashboard {
        height: auto;

        grid-template-columns: 1fr;

        gap: 28px;
    }


    .dashboard-left {
        overflow: visible;
    }


    .log-panel {
        height: 400px;

        min-height: 400px;
    }


    .section {
        margin-top: 24px;
    }


    /* =====================================================
       MOBILE PROFILE
       ===================================================== */

    .profile-content {
        grid-template-columns:
            1fr;

        row-gap: 8px;
    }


    .profile-image-column {
        width: 100%;
        min-width: 0;

        justify-content: flex-start;
    }


    .profile-image {
        width: 80px;
        height: 80px;

        max-width: 80px;
    }


    .profile-separator {
        width: 100%;
        height: 1px;

        min-height: 1px;

        align-self: auto;
    }


    .profile-column {
        width: 100%;

        min-width: 0;

        align-items: stretch;
    }


    .profile-header {
        text-align: left;
    }


    /* =====================================================
       MOBILE ACTIVITY ROW

       LABEL | DASHES | VALUE

       Again, the dash element itself does NOT use
       width: 100%. The grid track controls it.
       ===================================================== */

    .profile-column .activity-line {
        width: 100%;
        max-width: 100%;

        display: grid;

        grid-template-columns:
            max-content minmax(0, 1fr) max-content;

        align-items: center;

        min-width: 0;

        min-height: 24px;

        font-size: 18px;

        line-height: 1;

        white-space: nowrap;

        overflow: hidden;
    }


    .profile-column .activity-label {
        grid-column: 1;

        width: max-content;

        min-width: 0;

        overflow: hidden;

        color: var(--muted);

        white-space: nowrap;
    }


    /* CORRECTED DASH COLUMN */

    .profile-column .activity-dashes {
        grid-column: 2;

        width: auto;

        min-width: 0;

        height: 20px;

        margin:
            0 6px;

        overflow: hidden;

        color: var(--dark-purple);

        white-space: nowrap;

        text-align: left;

        line-height: 20px;

        font-size: 18px;
    }


    .profile-column .activity-dashes::before {
        content:
            "--------------------------------------------------------------";

        display: block;

        width: max-content;

        max-width: none;

        overflow: visible;

        white-space: nowrap;

        text-align: left;
    }


    /* =====================================================
       MOBILE VALUES
       ===================================================== */

    .profile-column .activity-line>span:last-child {
        grid-column: 3;

        width: max-content;

        min-width: 0;

        max-width: 55vw;

        justify-self: end;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        text-align: right;

        margin: 0;
    }


    /* =====================================================
       MOBILE STATUS
       ===================================================== */

    .profile-column .activity-status {
        grid-column: 3;

        width: max-content;

        max-width: 55vw;

        min-width: 0;

        display: inline-flex;

        align-items: center;

        justify-content: flex-end;

        gap: 5px;

        overflow: hidden;

        white-space: nowrap;
    }


    /* =====================================================
       MOBILE SYSTEM
       ===================================================== */

    .system-info {
        grid-template-columns:
            1fr;

        row-gap: 8px;
    }


    .system-separator {
        width: 100%;
        height: 1px;

        min-height: 1px;

        align-self: auto;
    }


    .system-benji {
        width: 100%;
        height: 110px;

        min-width: 0;
        min-height: 110px;
    }


    .system-benji .benji-character {
        width: 78px;
        height: 78px;
    }


    .system-line {
        width: 100%;
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 750px) {

    .navbar {
        grid-template-columns:
            minmax(0, 1fr) auto;
    }


    /* CONNECTED OFF */

    .system-status {
        display: none;
    }


    /* CLOCK OFF */

    .nav-time {
        display: none;
    }


    .terminal-prompt {
        width: 100%;

        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .navbar {
        height: 40px;

        grid-template-columns:
            1fr;

        padding:
            0 12px;
    }


    .terminal-prompt {
        width: 100%;

        font-size: 18px;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    .terminal-path {
        margin-left: 4px;
    }


    .terminal-body {
        padding:
            16px 12px;
    }


    .section-title {
        font-size: 20px;
    }


    .section-title::before,
    .section-title::after {
        font-size: 17px;
    }


    .section-content {
        margin-left: 10px;

        padding-left: 10px;
    }


    /* =====================================================
       SMALL MOBILE PROFILE
       ===================================================== */

    .profile-header {
        font-size: 21px;
    }


    .profile-column .activity-line {
        width: 100%;

        grid-template-columns:
            max-content minmax(0, 1fr) max-content;

        min-height: 22px;

        font-size: 18px;
    }


    .profile-column .activity-label {
        font-size: 18px;
    }


    .profile-column .activity-dashes {
        width: auto;

        min-width: 0;

        margin:
            0 6px;

        height: 18px;

        line-height: 18px;

        font-size: 18px;

        overflow: hidden;
    }


    .profile-column .activity-line>span:last-child {
        width: max-content;

        max-width: 50vw;

        min-width: 0;
    }


    .profile-column .activity-status {
        max-width: 50vw;

        gap: 5px;

        font-size: 18px;
    }


    /* =====================================================
       SMALL MOBILE SYSTEM
       ===================================================== */

    .system-line {
        grid-template-columns:
            max-content minmax(0, 1fr) max-content;

        gap: 0;

        height: 21px;

        font-size: 18px;
    }


    .system-label {
        width: max-content;

        font-size: 18px;
    }


    .system-dashes {
        width: auto;

        min-width: 0;

        margin:
            0 6px;

        font-size: 18px;
    }


    .system-line>span:not(.system-label):not(.system-dashes) {
        width: max-content;

        max-width: 50vw;
    }


    /* =====================================================
       SMALL MOBILE LOG
       ===================================================== */

    .log-header {
        height: 26px;
        min-height: 26px;
    }


    .log-bracket,
    .log-title {
        font-size: 20px;
    }


    .log-line {
        font-size: 18px;

        margin-left: 4px;
    }


    .log-entry {
        grid-template-columns:
            62px 58px 70px minmax(0, 1fr);

        gap: 5px;

        font-size: 16px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .terminal-body {
        padding:
            14px 10px;
    }


    .section-content {
        margin-left: 7px;

        padding-left: 8px;
    }


    .profile-column .activity-line {
        font-size: 17px;
    }


    .profile-column .activity-label {
        font-size: 17px;
    }


    .profile-column .activity-dashes {
        margin:
            0 4px;

        font-size: 17px;
    }


    .profile-column .activity-line>span:last-child,
    .profile-column .activity-status {
        max-width: 46vw;
    }


    .system-line {
        font-size: 17px;
    }


    .system-label {
        font-size: 17px;
    }


    .system-dashes {
        margin:
            0 4px;

        font-size: 17px;
    }

}