/* Shared chrome for every page: colour palette, the standard top navbar and
   the global search overlay. Loaded by index/projects/project/cv. */

:root {
    --bg: #131a3a;
    --bg-elev: #1a2246;
    --surface: #151c3d;
    --surface-2: #1e2749;
    --border: #3b4468;
    --text: #d5dced;
    --text-dim: #97a1bd;
    --accent: #6cb0ff;
    --accent-2: #b06cf7;
    --green: #2a9c47;
    --green-hover: #34b154;
    --folder: #63b4ff;
}

/* ---- Top bar ---- */
.breadcrumb-bar {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
}

.breadcrumb-avatar {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #3b82f6, #a855f7);
    flex-shrink: 0;
    margin-right: 2px;
}

/* Only the home page turns the avatar into a replay control. */
button.breadcrumb-avatar {
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

button.breadcrumb-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(108, 176, 255, 0.25);
}

.breadcrumb a.owner {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a.owner:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb .sep { color: var(--text-dim); }
.breadcrumb .repo-name { font-weight: 600; color: #eef2fb; }

.breadcrumb .badge-public {
    font-size: 12px;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 8px;
    margin-left: 6px;
    line-height: 20px;
}

.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-actions a.nav-link {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.nav-actions a.nav-link:hover { color: var(--accent); }

/* ---- Search widget in the navbar ----
   A single box that lives at the right end of the nav actions. Collapsed it is
   a "Type / to search" button; clicking it (or pressing "/") swaps in a text
   input and the whole box grows leftwards (its right edge is pinned, so the
   extra width extends to the left). The results popup is anchored directly
   under the box, right-aligned, exactly as wide as the expanded box. */
.gs-wrap {
    position: relative;
    width: 240px;
    flex-shrink: 0;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.gs-wrap.open { width: 440px; }

.global-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.global-search:hover { border-color: var(--accent); background: var(--bg-elev); }
.global-search svg { flex-shrink: 0; }

.global-search kbd {
    margin-left: auto;
    font-size: 11px;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    background: var(--surface-2);
}

/* The text input replaces the button while the widget is open. */
.gs-input {
    display: none;
    width: 100%;
    padding: 7px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 176, 255, 0.15);
}

.gs-input::placeholder { color: var(--text-dim); }

.gs-wrap.open .global-search { display: none; }
.gs-wrap.open .gs-input { display: block; }

/* ---- Search results popup (anchored under the box) ---- */
.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 2000;
}

.gs-wrap.open .search-dropdown { display: block; }

.search-results { overflow-y: auto; max-height: 60vh; padding: 6px; }

@media (max-width: 900px) {
    .gs-wrap { width: 40px; }
    .gs-wrap.open { width: min(440px, 78vw); }
    .global-search .gs-label, .global-search kbd { display: none; }
}

.search-hit {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.search-hit:hover, .search-hit.active {
    background: rgba(108, 176, 255, 0.1);
    border-color: var(--border);
}

.search-hit .hit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 4px;
}

.search-hit .hit-title { font-weight: 600; color: #eef2fb; }

.search-hit .hit-where {
    font-size: 11px;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 7px;
    line-height: 17px;
}

.search-hit .hit-snippet {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
    /* Snippets are one line of surrounding context; clamp long ones. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-hit mark {
    background: rgba(108, 176, 255, 0.28);
    color: #eef2fb;
    border-radius: 3px;
    padding: 0 2px;
}

.search-note {
    padding: 26px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}