/* Terminal "shell session" chrome: the window frame around the page content,
   the prompt-style navbar, and the command-link styling. Loaded after
   components.css so it can layer on top of the base component styles. */

/* ---- Window frame ---- */
.app-window {
    display: flex;
    flex: 1;
    flex-direction: column;
    /* Same width formula as .app-container so the frame aligns with the
       navbar/footer content at every breakpoint. */
    width: min(100% - 2rem, var(--app-content-width));
    margin: 1.75rem auto 2.5rem;
    overflow: hidden;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-lg);
    background: var(--app-bg-soft);
    box-shadow: var(--app-shadow);
}

.app-window__bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.95rem;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-term-titlebar);
    font-family: var(--app-font-mono);
    font-size: 0.78rem;
    color: var(--app-muted);
}

.app-window__dots {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.45rem;
}

.app-window__dots i {
    display: block;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: var(--app-radius-pill);
    background: var(--app-faint);
}

.app-window__dots i:nth-child(1) {
    background: var(--app-danger);
}

.app-window__dots i:nth-child(2) {
    background: var(--app-warning);
}

.app-window__dots i:nth-child(3) {
    background: var(--app-success);
}

.app-window__path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-window__path::before {
    color: var(--app-faint);
    content: "geekblog:";
}

.app-window__body {
    flex: 1;
    padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.1rem, 2.8vw, 2.75rem) clamp(2rem, 4vw, 3rem);
}

/* The window body already provides the padded column, so the list/detail
   wrappers must not re-center/cap it — they fill the frame. Narrow card
   pages (login/error/legal via .app-narrow) keep their own capped width. */
.app-window__body > .app-content,
.app-window__body > .app-container {
    width: 100%;
    margin-inline: 0;
}

/* ---- Prompt-style navbar ---- */
/* The shell prompt prefix ("visitor@geekblog:~$"). Decorative — aria-hidden. */
.app-prompt {
    flex-shrink: 0;
    font-family: var(--app-font-mono);
    font-size: 0.9rem;
    color: var(--app-muted);
}

.app-prompt__user {
    color: var(--app-green);
}

.app-prompt__sign {
    margin-left: 0.15rem;
    color: var(--app-faint);
}

/* Nav items rendered as shell commands ("./blog", "./login"). */
.app-nav-cmd {
    font-family: var(--app-font-mono);
    font-size: 0.88rem;
    color: var(--app-text);
    text-decoration: none;
    transition: color var(--app-transition);
}

.app-nav-cmd::before {
    color: var(--app-faint);
    content: "./";
}

.app-nav-cmd:hover,
.app-nav-cmd:focus-visible {
    color: var(--app-green);
}

/* User menu: the "<username>@geekblog" identity opens a dropdown (mirrors the
   language switcher's data-app-dropdown pattern; works in the collapsed nav). */
.app-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* The toggle reuses .app-prompt styling (username@geekblog:~$); it just needs
   the button reset. The username brightens on hover/open to signal it's clickable. */
.app-user-menu__toggle {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.app-user-menu__toggle .app-prompt__user {
    transition: color var(--app-transition);
}

.app-user-menu__toggle:hover .app-prompt__user,
.app-user-menu__toggle:focus-visible .app-prompt__user,
.app-user-menu.is-open .app-prompt__user {
    color: var(--app-text-strong);
}

.app-user-menu__list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 60;
    display: none;
    min-width: 10rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-2);
    box-shadow: var(--app-shadow);
}

.app-user-menu.is-open .app-user-menu__list {
    display: block;
}

.app-user-menu__item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    font-family: var(--app-font-mono);
    font-size: 0.88rem;
    text-align: left;
    color: var(--app-text);
    text-decoration: none;
    background: transparent;
}

.app-user-menu__item::before {
    color: var(--app-faint);
    content: "./";
}

.app-user-menu__item:hover,
.app-user-menu__item:focus-visible {
    color: var(--app-text-strong);
    background: var(--app-green-soft);
}

/* Inline search: reads as the shell command "find <query>" right after the
   prompt. Deliberately understated — a bare underline that matches the prompt
   text height and only highlights on focus. */
.app-nav-find {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    font-family: var(--app-font-mono);
    font-size: 0.88rem;
}

.app-nav-find__cmd {
    color: var(--app-text);
    cursor: text;
}

input.app-nav-find__input {
    width: 7rem;
    padding: 0.1rem 0.15rem;
    border: 0;
    border-bottom: 1px solid var(--app-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--app-text-strong);
    font-family: var(--app-font-mono);
    font-size: 0.85rem;
    line-height: 1.3;
    transition: width var(--app-transition), border-color var(--app-transition);
}

input.app-nav-find__input::placeholder {
    color: var(--app-faint);
}

input.app-nav-find__input:focus {
    width: 10rem;
    border-bottom-color: var(--app-green);
    outline: none;
    background: transparent;
    box-shadow: none;
}

/* Mobile menu toggle reads as a command ("$ menu"). */
.app-nav-toggle {
    gap: 0.45rem;
}

.app-nav-toggle__label {
    display: none;
    font-family: var(--app-font-mono);
    font-size: 0.85rem;
}

.app-nav-toggle__label::before {
    margin-right: 0.35rem;
    color: var(--app-green);
    content: "$";
}

/* On smaller desktops/tablets the decorative GUEST prompt is dropped first to
   keep the bar uncluttered before the nav collapses entirely. The interactive
   user menu stays visible (it holds logout). */
@media (max-width: 1024px) {
    .app-prompt--guest {
        display: none;
    }
}

@media (max-width: 800px) {
    .app-window {
        margin-block: 1rem 1.75rem;
    }

    .app-nav-toggle {
        width: auto;
        padding-inline: 0.7rem;
    }

    .app-nav-toggle__label {
        display: inline;
    }

    /* In the expanded hamburger drawer the user menu is already revealed, so
       flatten its dropdown: the username becomes a static section label and the
       items render inline below it — no confusing second tap to expand. The
       is-open JS toggle becomes a harmless no-op here (display wins via media). */
    .app-user-menu {
        display: block;
        width: 100%;
    }

    .app-user-menu__toggle {
        width: 100%;
        cursor: default;
    }

    .app-user-menu__list {
        position: static;
        display: block;
        min-width: 0;
        margin-top: 0.4rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}