/* HYSEC Universe shell: command search (Ctrl+K), recent pages and the narrow two-level navigation.
   Loaded after hysec-universe-ui.css; tokens come from there. */

.hss-shell { position: relative; }

/* ---------- Window history ---------- */

/* Back and forward sit between brand and search: brand · ← → · search. */
.hss-shell .hss-command-bar { grid-template-columns: 208px auto minmax(240px, 720px); }
.hss-history { display: inline-flex; gap: 2px; }
.hss-shell .hss-history-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--hsu-radius-sm);
    color: var(--hsu-text-muted);
    background: transparent;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}
.hss-shell .hss-history-button:hover:not(:disabled) { color: var(--hsu-accent-strong); background: var(--hsu-surface-hover); border-color: var(--hsu-line); }
.hss-shell .hss-history-button:disabled { opacity: 0.35; cursor: default; }
.hss-shell .hss-history-button:focus-visible { outline: 2px solid var(--hsu-accent); outline-offset: 2px; }

/* ---------- Command search ---------- */

.hss-shell .hss-command-search { position: relative; z-index: 5; }
.hss-command-kbd {
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 2px 7px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 5px;
    color: var(--hsu-text-faint);
    background: var(--hsu-surface-raised);
    font: inherit;
    font-size: var(--hsu-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    transform: translateY(-50%);
    pointer-events: none;
}

.hss-shell .hss-palette {
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 560px);
    min-width: min(460px, 100%);
    padding: 6px;
    border: 1px solid var(--hsu-accent-line);
    border-radius: 12px;
    background: #14161a;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.66);
    animation: hss-palette-in 140ms ease-out;
}
.hss-palette > [role="listbox"] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hss-palette-group + .hss-palette-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hsu-line); }
/* Without a query the areas sit in two columns so recent pages stay in view. */
.hss-palette-group.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
.hss-palette-group.grid > .hss-palette-label { grid-column: 1 / -1; }
.hss-palette-group.grid [role="option"] > em { display: none; }
.hss-palette-label {
    display: block;
    padding: 8px 10px 4px;
    color: var(--hsu-text-faint);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hss-shell .hss-palette [role="option"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    color: var(--hsu-text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hss-palette [role="option"] > .mud-icon-root { color: var(--hsu-text-faint); }
.hss-palette [role="option"] > span { display: grid; gap: 1px; min-width: 0; }
.hss-palette [role="option"] strong { overflow: hidden; color: var(--hsu-text-strong); font-size: var(--hsu-text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hss-palette [role="option"] small { overflow: hidden; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.hss-palette [role="option"] > em { color: var(--hsu-accent); font-size: var(--hsu-text-xs); font-style: normal; font-weight: 600; opacity: 0; }
.hss-palette [role="option"]:hover,
.hss-palette [role="option"].active { background: var(--hsu-accent-soft); }
.hss-palette [role="option"].active { box-shadow: inset 2px 0 var(--hsu-accent); }
.hss-palette [role="option"].active > .mud-icon-root { color: var(--hsu-accent); }
.hss-palette [role="option"].active > em { opacity: 1; }
.hss-shell .hss-palette > p { margin: 0; padding: 10px; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hss-shell .hss-palette .hss-quick-search-all { margin-top: 4px; border-radius: 8px; }
.hss-palette-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--hsu-line);
    color: var(--hsu-text-faint);
    font-size: var(--hsu-text-xs);
}
.hss-palette-keys kbd {
    margin-right: 3px;
    padding: 0 5px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 4px;
    color: var(--hsu-text-muted);
    background: transparent;
    font: inherit;
    font-size: 0.6875rem;
}

/* Dims the workspace while the command search is open; a click outside closes it. */
.hss-palette-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(5, 6, 8, 0.5);
    animation: hss-scrim-in 140ms ease-out;
}

@keyframes hss-palette-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes hss-scrim-in { from { opacity: 0; } }

/* ---------- Navigation ---------- */

/* Area buttons and the page row belong to narrow windows only. */
.hsu-rail-area,
.hsu-subnav { display: none; }

.hsu-subnav-link,
.hsu-rail-area {
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--hsu-radius-sm);
    color: var(--hsu-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--hsu-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.hsu-subnav-link .mud-icon-root,
.hsu-rail-area .mud-icon-root { color: var(--hsu-text-faint); }
.hsu-subnav-link:hover,
.hsu-rail-area:hover { color: var(--hsu-text-strong); background: var(--hsu-surface-hover); }
.hsu-subnav-link.active,
.hsu-rail-area.active { color: var(--hsu-accent-strong); }
.hsu-subnav-link.active .mud-icon-root,
.hsu-rail-area.active .mud-icon-root { color: var(--hsu-accent); }
.hss-shell :is(.hsu-subnav-link, .hsu-rail-area):focus-visible { outline: 2px solid var(--hsu-accent); outline-offset: 2px; }

@container hss-suite (max-width: 900px) {
    .hss-shell .hss-command-bar { grid-template-columns: auto auto minmax(0, 1fr); }
    /* Level one: Entdecken and the four areas, always fully visible. */
    .hsu-rail { gap: 4px; }
    .hsu-rail .hsu-rail-group { display: contents; }
    .hsu-rail .hsu-rail-group > .hsu-rail-link { display: none; }
    .hsu-rail-area { display: inline-flex; flex: 0 0 auto; }
    .hsu-rail .hsu-rail-home,
    .hsu-rail-area { min-height: 36px; }
    .hsu-rail .hsu-rail-home.active,
    .hsu-rail-area.active { background: var(--hsu-accent-soft); box-shadow: inset 0 -2px var(--hsu-accent); }

    /* Level two: the pages of the active area. */
    .hss-shell .hss-workbench:has(> .hsu-subnav) { grid-template-rows: auto auto minmax(0, 1fr); }
    .hsu-subnav {
        display: flex;
        gap: 2px;
        padding: 4px var(--hsu-space-3);
        border-bottom: 1px solid var(--hsu-line);
        background: var(--hsu-bg);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .hsu-subnav-link { display: inline-flex; flex: 0 0 auto; min-height: 34px; border-radius: 0; }
    .hsu-subnav-link.active { box-shadow: inset 0 -2px var(--hsu-accent); }
}

@container hss-suite (max-width: 640px) {
    .hss-command-kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hss-shell .hss-history-button { transition: none; }
    .hss-shell .hss-palette,
    .hss-palette-scrim { animation: none; }
}