/* Terminal-vibe redesign, Wave 1: the global shell only (command bar + a
   full-bleed window pane; no sidebar/nav bar - the command line is the only
   navigation surface). Loaded after dark-modernist.css in App.razor.
   Page CONTENT inside .term-window is still dark-modernist's until each page
   is rebuilt in a later wave - see docs/ui-terminal-redesign-plan.md. */

:root {
    /* "01 terminal" palette - warm near-black instead of blue-black, the
       app's Claude-orange accent instead of blue. dark-modernist.css's own
       :root carries the matching half of this recolor for page content
       (buttons, cards, banners) that isn't rebuilt in the terminal idiom
       yet - the two are meant to read as one palette, not two. */
    --term-bg: #1a1614;
    --term-pane-bg: #262019;
    --term-fg: #e8dfd3;
    --term-fg-dim: #a89985;
    --term-fg-bright: #faf6ef;
    --term-accent: #da7756;
    --term-line: color-mix(in srgb, var(--term-accent) 30%, transparent);
    --term-err: #ff6b6b;
}

html, body {
    height: 100%;
    margin: 0;
    /* the shell owns scrolling (.term-window); the page itself never scrolls */
    overflow: hidden;
    background: var(--term-bg);
    color: var(--term-fg);
    font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace;
}

.term-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100vw;
    min-height: 0;
}

.term-cmdbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--term-line);
    background: var(--term-pane-bg);
}

/* Popped up by typing "menu" - the one on-demand escape hatch from the
   command line for anyone who doesn't want to type page names from memory.
   Not a persistent nav bar: closed by default, toggled by the same command. */
.term-menu {
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
    border-top: 1px solid var(--term-line);
    background: var(--term-pane-bg);
    display: flex;
    flex-direction: column;
}

.term-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--term-line);
    color: var(--term-fg);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.term-menu-item:hover,
.term-menu-item:focus-visible {
    background: color-mix(in srgb, var(--term-accent) 12%, transparent);
    color: var(--term-fg-bright);
}

.term-menu-item:last-child {
    border-bottom: 0;
}

.term-menu-cmd {
    color: var(--term-fg-dim);
    font-size: 12px;
}

.term-prompt {
    color: var(--term-accent);
    font-size: 14px;
}

/* Wraps the real input and its ghost-autocomplete overlay so the overlay can
   be positioned exactly on top of it (CommandBar.razor, command-bar.js's
   attachAutocomplete). */
.term-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.term-input {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--term-fg-bright);
    font: inherit;
    font-size: 14px;
}

/* The caret alone isn't enough of a focus signal for a keyboard user -
   the surrounding cmdbar picks up the accent color instead of relying on
   a default outline that .term-input above deliberately removes. */
.term-input:focus-visible {
    outline: 0;
}

.term-cmdbar:has(.term-input:focus-visible) {
    box-shadow: inset 0 0 0 1px var(--term-accent);
}

.term-input::placeholder {
    color: var(--term-fg-dim);
}

/* The suggested completion, sitting behind the real input. Its typed prefix
   is transparent - the real input's own opaque text already occupies that
   space - so only the remainder (dim) is actually visible, lined up right
   after the caret. */
.term-input-ghost {
    position: absolute;
    inset: 0;
    z-index: 0;
    font: inherit;
    font-size: 14px;
    line-height: normal;
    white-space: pre;
    pointer-events: none;
}

.term-input-ghost-typed {
    color: transparent;
}

.term-input-ghost-rest {
    color: var(--term-fg-dim);
}

.term-status {
    flex: 0 0 auto;
    padding: 8px 18px 4px;
    font-size: 12px;
    background: var(--term-pane-bg);
}

.term-status.ok { color: var(--term-fg-dim); }
.term-status.err { color: var(--term-err); }

.term-window {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 14px 18px;
    background: var(--term-bg);
    color: var(--term-fg);
}

#blazor-error-ui {
    background: var(--term-err);
    color: #1a0508;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .4);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ---- MarkdownConsole (Components/Shared/MarkdownConsole.razor) ----
   The "simple text document" half of the terminal split - see
   docs/ui-terminal-redesign-plan.md. Global (not page-scoped) since it's
   meant to be reused by every read-only page, not just the CV. */

.mdc {
    font-family: inherit;
    color: var(--term-fg);
}

.mdc-h1 {
    color: var(--term-fg-bright);
    font-size: 17px;
    font-weight: 700;
    margin: 2px 0;
}

.mdc-h2 {
    color: var(--term-fg-bright);
    font-size: 14px;
    font-weight: 700;
    margin: 4px 0 2px;
}

.mdc-h3 {
    color: var(--term-fg-bright);
    font-size: 13px;
    font-weight: 700;
    margin: 2px 0;
}

.mdc-text {
    margin: 2px 0;
}

.mdc-bullet {
    margin: 2px 0 2px 18px;
}

.mdc-bullet::before {
    content: "- ";
    color: var(--term-fg-dim);
}

.mdc-blank {
    height: 10px;
}

.mdc-tag {
    color: var(--term-accent);
    background: color-mix(in srgb, var(--term-accent) 12%, transparent);
    padding: 0 4px;
    font-size: 12px;
}

.mdc-table-wrap {
    overflow-x: auto;
    margin: 6px 0;
}

.mdc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mdc-table th,
.mdc-table td {
    text-align: left;
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid var(--term-line);
    vertical-align: top;
}

.mdc-table th {
    color: var(--term-fg-bright);
    font-weight: 700;
    white-space: nowrap;
}

/* ---- CvPanel (CvPage.razor's "just text, nothing collapses"); its heading
   is the accent colour, since it is the one thing on the page to read. ---- */

.cv-panel-flat {
    padding: 18px 0;
    border-top: 1px solid var(--term-line);
}

.cv-panel-flat .mdc-h2 {
    color: var(--term-accent);
}

/* ---- TopMenu.razor: the signed-in shell's bar and burger menu ----
   A slim bar (who you are, which page you are on) and a burger that opens
   the full, grouped menu as a panel - room to read and click, instead of a
   dozen small links crammed into one line. The panel is a native <details>,
   so it opens without JavaScript. */

.top-menu {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 20px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--term-line);
    background: var(--term-pane-bg);
}

.top-menu-brand {
    font: 700 17px 'Bricolage Grotesque', system-ui, sans-serif;
    color: var(--term-fg-bright);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-menu-brand:hover { color: var(--term-accent); text-decoration: none; }

/* Where you are, since the links themselves are folded away. */
.top-menu-current {
    font-size: 13px;
    color: var(--term-fg-dim);
    padding-left: 16px;
    border-left: 1px solid var(--term-line);
    white-space: nowrap;
}

.top-menu-burger { margin-left: auto; position: relative; }

.top-menu-burger > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--term-line);
    border-radius: 8px;
    color: var(--term-fg);
    cursor: pointer;
    user-select: none;
}
.top-menu-burger > summary::-webkit-details-marker { display: none; }
.top-menu-burger > summary:hover { border-color: var(--term-accent); color: var(--term-fg-bright); }
.top-menu-burger > summary:focus-visible { outline: 2px solid var(--term-accent); outline-offset: 2px; }
.top-menu-burger[open] > summary { border-color: var(--term-accent); color: var(--term-accent); }

.top-menu-burger-icon { display: grid; gap: 4px; width: 18px; }
.top-menu-burger-icon span { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform .15s, opacity .15s; }
/* The three lines become an X while the menu is open. */
.top-menu-burger[open] .top-menu-burger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.top-menu-burger[open] .top-menu-burger-icon span:nth-child(2) { opacity: 0; }
.top-menu-burger[open] .top-menu-burger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
    .top-menu-burger-icon span { transition: none; }
}

.top-menu-burger-text { font-size: 14px; }

.top-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 280px;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    display: grid;
    gap: 6px;
    padding: 12px;
    background: var(--term-pane-bg);
    border: 1px solid var(--term-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
}

.top-menu-group {
    display: grid;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--term-line);
}

.top-menu-group-title {
    padding: 0 12px 4px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--term-fg-dim);
}

.top-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--term-fg);
    font: 16px 'Bricolage Grotesque', system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.top-menu-item:hover { background: color-mix(in srgb, var(--term-accent) 12%, transparent); color: var(--term-fg-bright); text-decoration: none; }
.top-menu-item:focus-visible { outline: 2px solid var(--term-accent); outline-offset: -2px; }
.top-menu-item.active { color: var(--term-accent); background: color-mix(in srgb, var(--term-accent) 10%, transparent); }

.top-menu-signout {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--term-line);
}
.top-menu-signout .top-menu-item { color: var(--term-fg-dim); }

/* Phones: the panel takes the width of the screen. */
@media (max-width: 520px) {
    .top-menu { padding-left: 14px; padding-right: 14px; gap: 10px; }
    .top-menu-current { display: none; }
    .top-menu-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* CvPage.razor: the "download / book / get in touch" links under the CV,
   grouped at the start rather than spread across the width. */
.cv-next {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}