/* HYSEC Universe design system: tokens, shell and the shared page parts every Universe module uses
   (page head, tabs, filter bar, rows, tables, badges and states). Module stylesheets only add what is
   specific to their subject. Loaded after hysec-universe-lab.css. Tokens are global so Universe
   dialogs and the mobile Universe share badges and states. */

:root {
    --hsu-text: #dbcfb9;
    --hsu-text-strong: #f2eadc;
    --hsu-text-muted: rgba(219, 207, 185, 0.72);
    --hsu-text-faint: rgba(219, 207, 185, 0.56);
    --hsu-accent: #e4a738;
    --hsu-accent-strong: #f2c46a;
    --hsu-accent-soft: rgba(228, 167, 56, 0.1);
    --hsu-accent-line: rgba(228, 167, 56, 0.34);
    --hsu-bg: #0b0c0f;
    --hsu-surface: #101216;
    --hsu-surface-raised: #15171c;
    --hsu-surface-hover: rgba(255, 255, 255, 0.035);
    --hsu-line: rgba(219, 207, 185, 0.1);
    --hsu-line-strong: rgba(219, 207, 185, 0.2);
    --hsu-ok: var(--success-color, #61c08e);
    --hsu-warn: var(--warning-color, #e7b15d);
    --hsu-danger: var(--error-color, #ed786a);
    --hsu-info: var(--info-color, #9abeff);
    /* MudBlazor Colors.Purple: Lighten3 for text on the dark surface, Default for line and fill. */
    --hsu-violet: #ce93d8;
    --hsu-violet-rgb: 156, 39, 176;
    --hsu-space-1: 4px;
    --hsu-space-2: 8px;
    --hsu-space-3: 12px;
    --hsu-space-4: 16px;
    --hsu-space-5: 24px;
    --hsu-space-6: 32px;
    --hsu-radius-sm: 6px;
    --hsu-radius: 10px;
    --hsu-text-xs: 0.75rem;
    --hsu-text-sm: 0.8125rem;
    --hsu-text-md: 0.9375rem;
    --hsu-text-lg: 1.0625rem;
    --hsu-text-h1: clamp(1.5rem, 1.15rem + 1vw, 2rem);
}

.hss-shell {
    --hsu-page-pad-y: 28px;
    --hsu-page-pad-x: 36px;
}

/* ---------- Shell ---------- */

.hss-shell .hss-command-bar {
    display: grid;
    grid-template-columns: 208px minmax(240px, 720px);
    align-items: center;
    gap: var(--hsu-space-5);
    z-index: 4;
    padding: 12px var(--hsu-space-5);
    border-bottom: 1px solid var(--hsu-line);
    background: var(--hsu-surface);
}

.hss-shell .hss-brand-mark { width: 36px; height: 36px; border-radius: var(--hsu-radius); }

.hss-shell .hss-workbench {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

/* Every workspace scrolls on its own; content keeps a readable width on wide windows. */
.hss-shell .hss-main {
    container: hss-main / size;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.hss-shell :is(.hss-workspace-page, .hss-discovery-workspace) {
    height: 100%;
    min-height: 0;
    overflow: auto;
    /* Every module uses the full width from the navigation to the window edge; no centred maximum. */
    padding: var(--hsu-page-pad-y) var(--hsu-page-pad-x) 48px;
    background: radial-gradient(ellipse at 85% 0, rgba(228, 167, 56, 0.02), transparent 48%), var(--hsu-bg);
    scrollbar-gutter: auto;
}
.hss-shell .hss-workspace-page[hidden] { display: none; }
.hss-shell .hss-main > .hsu-state { margin: var(--hsu-page-pad-y) var(--hsu-page-pad-x); }

.hsu-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: var(--hsu-space-4) var(--hsu-space-3);
    border-right: 1px solid var(--hsu-line);
    background: var(--hsu-surface);
    overflow-y: auto;
}
.hsu-rail-group { display: flex; flex-direction: column; gap: 2px; }
.hsu-rail-label {
    padding: var(--hsu-space-4) 10px 6px;
    color: var(--hsu-text-faint);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hsu-rail-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    min-height: 38px;
    padding: 7px 10px;
    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: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.hsu-rail-link .mud-icon-root { flex: 0 0 auto; color: var(--hsu-text-faint); }
.hsu-rail-link:hover { color: var(--hsu-text-strong); background: var(--hsu-surface-hover); }
.hsu-rail-link.active { color: var(--hsu-accent-strong); background: var(--hsu-accent-soft); box-shadow: inset 3px 0 var(--hsu-accent); }
.hsu-rail-link.active .mud-icon-root { color: var(--hsu-accent); }

/* ---------- Shared building blocks ---------- */

.hsu-overline,
.hsu-kicker {
    color: var(--hsu-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hss-shell :is(.hsu-rail-link, .hsu-tab, .hsu-segment-item, .hsu-row, .hsu-task, .hsu-chip, .hsu-crumb-back, .hsu-link-button, .hsu-filter-reset, .hsu-result-actions button, .hsu-row-link, .hsu-owner):focus-visible {
    outline: 2px solid var(--hsu-accent);
    outline-offset: 2px;
}

.hsu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hsu-muted { color: var(--hsu-text-faint); }
.hsu-pos { color: #7fe0ac; }
.hsu-neg { color: #ff8792; }
.hsu-wrap { white-space: normal; }

/* Page head: way back, section, title, context, actions. */
.hsu-page-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--hsu-space-4) var(--hsu-space-5);
    margin: 0 0 var(--hsu-space-5);
}
.hsu-page-title { display: flex; flex: 1 1 380px; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hsu-page-title h1 {
    margin: 0;
    color: var(--hsu-text-strong);
    font-size: var(--hsu-text-h1);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.hsu-page-title > p { max-width: 72ch; margin: 0; color: var(--hsu-text-muted); font-size: var(--hsu-text-md); line-height: 1.5; }
.hsu-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--hsu-space-2); }

/* Ship and terminal imagery sits behind the head and fades into the page. */
.hsu-page-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hsu-page-head:has(> .hsu-page-media) { isolation: isolate; }
.hsu-page-head:has(> .hsu-page-media) > :not(.hsu-page-media) { position: relative; z-index: 1; }
.hsu-page-head:has(> .hsu-page-media img) { min-height: 220px; padding-top: var(--hsu-space-5); }
.hsu-page-head:has(> .hsu-page-media img) > .hsu-page-title { max-width: 62%; }

.hsu-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hsu-crumb-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -8px;
    padding: 4px 8px;
    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;
    cursor: pointer;
}
.hsu-crumb-back:hover { color: var(--hsu-accent-strong); background: var(--hsu-surface-hover); }
.hsu-crumb-current {
    color: var(--hsu-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hsu-crumb-current::before { content: "/"; margin-right: 10px; color: var(--hsu-text-faint); font-weight: 400; }

/* Tabs switch between views of one subject. */
.hsu-tabs {
    position: sticky;
    top: calc(var(--hsu-page-pad-y) * -1);
    z-index: 6;
    margin: 0 0 var(--hsu-space-5);
    border-bottom: 1px solid var(--hsu-line);
    background: var(--hsu-bg);
}
.hsu-tabs > [role="tablist"] { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.hsu-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 0;
    color: var(--hsu-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--hsu-text-sm);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 -2px transparent;
    cursor: pointer;
}
.hsu-tab:hover { color: var(--hsu-text-strong); }
.hsu-tab.active { color: var(--hsu-accent-strong); box-shadow: inset 0 -2px var(--hsu-accent); }
.hsu-tab small,
.hsu-segment-item small { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 500; }
.hsu-tab:disabled,
.hsu-segment-item:disabled { opacity: 0.45; cursor: default; }

/* Segments narrow a list (scope, status). */
.hsu-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--hsu-line);
    border-radius: var(--hsu-radius);
    background: var(--hsu-surface);
}
.hsu-segment-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 0;
    border-radius: 7px;
    color: var(--hsu-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--hsu-text-sm);
    font-weight: 600;
    cursor: pointer;
}
/* Hover only on the inactive items: the active one keeps its mark under the pointer. */
.hsu-segment-item:hover:not(:disabled, .active) { color: var(--hsu-text-strong); background: var(--hsu-surface-hover); }
.hsu-segment-item.active { color: var(--hsu-accent-strong); background: var(--hsu-accent-soft); box-shadow: inset 0 0 0 1px rgba(228, 167, 56, 0.24); }

.hsu-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hsu-space-3); margin: 0 0 var(--hsu-space-4); }
.hsu-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2); }

/* Filter bar: fields in one wrapping row that uses the whole width, count and reset below. */
.hsu-filters { margin: 0 0 var(--hsu-space-4); }
.hsu-filter-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hsu-space-3); }
.hss-shell .hsu-filter-fields > :is(.mud-input-control, .mud-select, .mud-autocomplete) { flex: 1 1 180px; min-width: 160px; margin: 0; }
.hss-shell .hsu-filter-fields > :first-child:is(.mud-input-control, .mud-select, .mud-autocomplete),
.hss-shell .hsu-filter-fields > .hsu-grow { flex: 2 1 320px; }
.hss-shell .hsu-filter-fields > .mud-button-root { min-height: 40px; margin-top: 0; }
.hsu-filter-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hsu-space-2) var(--hsu-space-4);
    min-height: 32px;
    margin-top: var(--hsu-space-3);
    color: var(--hsu-text-muted);
    font-size: var(--hsu-text-sm);
}
.hsu-count { color: var(--hsu-text-muted); font-variant-numeric: tabular-nums; }
.hsu-filter-reset,
.hsu-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--hsu-radius-sm);
    color: var(--hsu-accent);
    background: transparent;
    font: inherit;
    font-size: var(--hsu-text-sm);
    font-weight: 600;
    cursor: pointer;
}
.hsu-filter-reset:hover:not(:disabled),
.hsu-link-button:hover:not(:disabled) { color: var(--hsu-accent-strong); background: var(--hsu-accent-soft); }
.hsu-filter-reset:disabled,
.hsu-link-button:disabled { cursor: default; opacity: .5; background: transparent; }
.hsu-filter-meta .hss-data-notice { margin: 0; }
.hss-shell .hsu-inline-progress { max-width: 160px; }

/* Sections: open groups separated by headings, not frames. */
.hsu-section { min-width: 0; margin: 0 0 var(--hsu-space-6); }
.hsu-section-head,
.hsu-section > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px var(--hsu-space-4);
    margin-bottom: var(--hsu-space-2);
}
:is(.hsu-section-head, .hsu-section > header) h2 { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-lg); font-weight: 650; }
:is(.hsu-section-head, .hsu-section > header) small { color: var(--hsu-text-faint); font-size: var(--hsu-text-sm); }
.hsu-subhead {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 18px 0 4px;
    color: var(--hsu-accent);
    font-size: var(--hsu-text-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
}
.hsu-subhead small { color: var(--hsu-text-faint); font-weight: 400; letter-spacing: 0; }
.hsu-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.hsu-empty { margin: 8px 0 20px; color: var(--hsu-text-muted); }

/* Rows: the one list pattern for catalogs, search results and links. */
.hsu-list { display: flex; flex-direction: column; border-top: 1px solid var(--hsu-line); }
.hsu-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--hsu-space-2) var(--hsu-space-4);
    width: 100%;
    min-width: 0;
    padding: 14px 8px;
    border: 0;
    border-bottom: 1px solid var(--hsu-line);
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hsu-row:not(:has(> .hsu-row-icon)) { grid-template-columns: minmax(0, 1fr) auto auto; }
.hsu-row:not(:has(> .hsu-row-facts)):not(:has(> .hsu-row-icon)) { grid-template-columns: minmax(0, 1fr) auto; }
.hsu-row:has(> .hsu-row-icon):not(:has(> .hsu-row-facts)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.hsu-row:has(> .hsu-row-media) { grid-template-columns: 112px minmax(0, 1fr) auto auto; }
.hsu-row-media { display: block; width: 112px; min-width: 0; }
.hsu-row-media .hss-ship-image { aspect-ratio: 16 / 9; border-radius: var(--hsu-radius-sm); background: var(--hsu-surface-raised); }
.hsu-row-media .hss-ship-image-empty { min-height: 0; padding: 0 !important; font-size: 0; }
.hsu-row-media .hss-ship-image-empty > span { display: none; }

/* A row with its own actions beside the opening area (compare, favourite). */
.hsu-row-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--hsu-line); }
.hsu-row-item > .hsu-row { border-bottom: 0; }
.hsu-row-item.selected { background: rgba(228, 167, 56, 0.05); box-shadow: inset 2px 0 var(--hsu-accent); }
.hsu-row-actions { display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.hsu-row-actions .mud-button-root { min-width: 0; }
.hsu-row-item .hsu-row-chevron { display: none; }
.hsu-row:hover { background: var(--hsu-surface-hover); }
.hsu-row:hover strong { color: var(--hsu-accent-strong); }
.hsu-row-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--hsu-accent-line);
    border-radius: var(--hsu-radius);
    color: var(--hsu-accent);
    background: var(--hsu-accent-soft);
}
.hsu-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hsu-row-main strong { color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 650; overflow-wrap: anywhere; }
.hsu-row-main small { color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
/* Why a hit that did not match the name is listed ("über Zutat Aluminium"): quieter than the subtitle. */
.hsu-row-main .hsu-row-why { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.hsu-row-text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--hsu-text-faint);
    font-size: var(--hsu-text-sm);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.hsu-row-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hsu-space-2) var(--hsu-space-5);
    margin: 0;
}
.hsu-row-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.hsu-row-facts dt { color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hsu-row-facts dd { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hsu-row-chevron { color: var(--hsu-text-faint); }
.hsu-row:hover .hsu-row-chevron { color: var(--hsu-accent); }

.hsu-search-results { display: flex; flex-direction: column; }
.hsu-result { position: relative; }
.hsu-result.active { background: var(--hsu-surface-hover); box-shadow: inset 2px 0 var(--hsu-accent); }
.hsu-result-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 0; padding: 0 8px 12px 58px; border-bottom: 1px solid var(--hsu-line); }
.hsu-result:has(> .hsu-result-actions) > .hsu-row { border-bottom: 0; }
.hsu-result-actions button,
.hsu-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 999px;
    color: var(--hsu-accent);
    background: transparent;
    font: inherit;
    font-size: var(--hsu-text-xs);
    font-weight: 600;
    cursor: pointer;
}
.hsu-result-actions button.relation { color: var(--hsu-info); }
.hsu-result-actions button:hover,
.hsu-chip:hover:not(:disabled) { border-color: var(--hsu-accent-line); background: var(--hsu-accent-soft); }
.hsu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2); margin: 0 0 var(--hsu-space-4); }
.hsu-chips > .hsu-chips-label { margin-right: 4px; color: var(--hsu-text-faint); font-size: var(--hsu-text-sm); }
.hsu-chip:disabled { opacity: 0.45; cursor: default; }
.hsu-list-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: var(--hsu-space-5); }
.hsu-inline-badge { margin-left: 8px; vertical-align: middle; }
.hsu-chip { color: var(--hsu-text-muted); }

/* Badges: short status words. */
/* A badge right after a name in a table cell. */
.hsu-badge.hsu-badge-inline { margin-left: var(--hsu-space-2); }

.hsu-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 999px;
    color: var(--hsu-text-muted);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: middle;
}
/* Narrower than its text (fixed table or grid column): ellipsis, full text in the title. */
.hsu-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hsu-badge .mud-icon-root { flex: none; font-size: 0.875rem; }
.hsu-badge.accent { color: var(--hsu-accent-strong); border-color: var(--hsu-accent-line); background: var(--hsu-accent-soft); }
.hsu-badge.ok { color: var(--hsu-ok); border-color: rgba(97, 192, 142, 0.34); background: rgba(97, 192, 142, 0.08); }
.hsu-badge.warning { color: var(--hsu-warn); border-color: rgba(231, 177, 93, 0.34); background: rgba(231, 177, 93, 0.08); }
.hsu-badge.danger { color: var(--hsu-danger); border-color: rgba(237, 120, 106, 0.34); background: rgba(237, 120, 106, 0.08); }
.hsu-badge.muted { color: var(--hsu-text-faint); }
.hsu-badge.info { color: var(--hsu-info); border-color: rgba(154, 190, 255, 0.3); background: rgba(154, 190, 255, 0.07); }
.hsu-badge.violet { color: var(--hsu-violet); border-color: rgba(var(--hsu-violet-rgb), 0.55); background: rgba(var(--hsu-violet-rgb), 0.14); }

/* Counts (CountBadge): inline after a label, or as overlay on the corner of an icon in .hsu-count-anchor. */
.hsu-count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--hsu-accent-strong);
    background: var(--hsu-accent-soft);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.hsu-count-anchor { position: relative; display: inline-grid; place-items: center; }
.hsu-count-badge.overlay {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 15px;
    margin: 0;
    padding: 1px 4px;
    color: #14161a;
    background: var(--hsu-accent);
    font-size: 0.5625rem;
    pointer-events: none;
}
:is(button, a) > .hsu-count-badge.overlay { top: 1px; right: 1px; }

/* Inline notices inside a section (data hints, partial results). */
.hsu-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 var(--hsu-space-3);
    padding: 10px 12px;
    border: 1px solid rgba(237, 120, 106, 0.3);
    border-left-width: 3px;
    border-radius: var(--hsu-radius-sm);
    color: var(--hsu-text);
    background: rgba(237, 120, 106, 0.06);
    font-size: var(--hsu-text-sm);
    line-height: 1.45;
}
.hsu-alert.warning { border-color: rgba(231, 177, 93, 0.32); background: rgba(231, 177, 93, 0.06); }
.hsu-alert > .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }

/* Loading, empty and error states. Not scoped: Universe dialogs outside the shell use them too. */
.hsu-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    padding: 32px 24px;
    border: 1px dashed rgba(219, 207, 185, 0.16);
    border-radius: 12px;
    color: rgba(219, 207, 185, 0.72);
    text-align: center;
}
.hsu-state > .mud-icon-root { color: rgba(228, 167, 56, 0.85); }
.hsu-state strong { color: #f2eadc; font-size: 1.05rem; }
.hsu-state > span { max-width: 56ch; line-height: 1.5; }
.hsu-state.error { border-color: rgba(237, 120, 106, 0.36); }
.hsu-state.error > .mud-icon-root { color: var(--error-color, #ed786a); }
.hsu-state.compact { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-height: 0; padding: 14px 16px; text-align: left; }
.hsu-state.compact strong { font-size: 0.9375rem; }
.hsu-state.compact > span { flex: 1 1 260px; }
.hsu-state:focus { outline: none; }

/* Tables: quiet separators, numbers right aligned, scroll inside their own region. */
.hsu-table-scroll { max-width: 100%; overflow-x: auto; }
.hsu-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hsu-table thead th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--hsu-line-strong);
    color: var(--hsu-text-faint);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.hsu-table tbody :is(th, td) {
    padding: 12px;
    border-bottom: 1px solid var(--hsu-line);
    color: var(--hsu-text);
    font-size: var(--hsu-text-sm);
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
}
.hsu-table :is(th, td).num { text-align: right; white-space: nowrap; }
.hsu-table tbody :is(th, td) strong { color: var(--hsu-text-strong); font-weight: 600; }
.hsu-table tbody :is(th, td) small { display: block; margin-top: 3px; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsu-table tbody tr:hover { background: var(--hsu-surface-hover); }
.hsu-table tbody tr.is-selected { background: rgba(228, 167, 56, 0.07); box-shadow: inset 2px 0 var(--hsu-accent); }
.hsu-table tbody tr.hsu-dim :is(th, td) { color: var(--hsu-text-faint); }
.hsu-table.hsu-compact tbody :is(th, td) { padding: 8px 12px; }
.hsu-table .hsu-actions { white-space: nowrap; }
.hss-shell .hsu-table .hsu-actions .mud-button-root { min-width: 0; padding: 4px 8px; border: 0; background: transparent; box-shadow: none; color: var(--hsu-text-muted); }
.hss-shell .hsu-table .hsu-actions .mud-button-root:hover,
.hss-shell .hsu-table .hsu-actions .mud-button-root:focus-visible { color: var(--hsu-accent); background: var(--hsu-accent-soft); }
.hss-shell .hsu-edit-table tbody :is(th, td) { padding: 6px 8px; }
.hss-shell .hsu-edit-table .mud-input-control { margin: 0; min-width: 96px; }
.hss-shell .hsu-edit-table td:first-child .mud-input-control { min-width: 180px; }

.hsu-row-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hsu-row-link:hover strong { color: var(--hsu-accent-strong); }
.hsu-row-link:disabled { cursor: default; }
.hsu-row-link:disabled:hover strong { color: var(--hsu-text-strong); }

/* Key figures: one quiet strip, not cards. */
.hsu-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 4px 0 20px;
    border-top: 1px solid var(--hsu-line-strong);
    border-bottom: 1px solid var(--hsu-line-strong);
}
.hsu-figure { display: grid; gap: 4px; padding: 14px 20px 14px 0; }
.hsu-figure + .hsu-figure { padding-left: 20px; border-left: 1px solid var(--hsu-line); }
.hsu-figure small { color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hsu-figure strong { color: var(--hsu-text-strong); font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 650; font-variant-numeric: tabular-nums; }
.hsu-figure span { color: var(--hsu-text-faint); font-size: var(--hsu-text-sm); }
.hsu-figure-accent strong { color: var(--hsu-accent); }

.hsu-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.hsu-option small { display: block; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.hsu-option em { color: var(--hsu-accent); font-size: var(--hsu-text-xs); font-style: normal; white-space: nowrap; }

.hsu-rarity { text-transform: none; }
.hsu-rarity.legendary { color: #f5c451 !important; }
.hsu-rarity.epic { color: #c79bff !important; }
.hsu-rarity.rare { color: #6fb4ff !important; }
.hsu-rarity.uncommon { color: #83deb0 !important; }

.hsu-level { font-size: var(--hsu-text-sm); }
.hsu-level-3 { color: #7fe0ac; }
.hsu-level-2 { color: rgba(219, 207, 185, 0.85); }
.hsu-level-1 { color: var(--hsu-text-faint); }

/* Inline entry rows and forms (salvage measurement, ownership, work orders). */
.hsu-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
}
.hss-shell .hsu-entry > :is(.mud-input-control, .mud-select) { flex: 1 1 180px; max-width: 260px; margin: 0; }
.hss-shell .hsu-entry > .mud-button-root { margin-top: 4px; }
.hsu-entry.hsu-crew-add { margin-top: 12px; }
.hsu-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.hss-shell .hsu-form-grid .mud-input-control { margin: 0; }
.hsu-span-2 { grid-column: span 2; }
.hsu-duration { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hsu-ready { grid-column: 1 / -1; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsu-ready:empty { display: none; }
.hsu-problem { margin: 0 0 8px; color: var(--hsu-accent); font-size: var(--hsu-text-sm); }
.hsu-expenses { display: grid; gap: 8px; margin-top: 16px; }
.hsu-expense { display: grid; grid-template-columns: minmax(180px, 320px) minmax(140px, 200px) auto; gap: 12px; align-items: start; }
.hss-shell .hsu-expense .mud-input-control { margin: 0; }
.hsu-expenses > .mud-button-root { justify-self: start; }

.hss-shell .hsu-notes { max-width: 640px; margin-top: 16px; }
.hsu-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Blueprint collection. */
.hsu-vault .hsu-star { width: 44px; padding-right: 0; }
.hsu-owners { display: flex; flex-wrap: wrap; gap: 6px; }
.hsu-owner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--hsu-text-strong);
    font: inherit;
    font-size: var(--hsu-text-sm);
}
.hsu-owner:not(:disabled) { cursor: pointer; }
.hsu-owner:not(:disabled):hover { border-color: var(--hsu-accent-line); }
.hsu-owner:disabled { opacity: 1; }
.hsu-owner em { color: var(--hsu-accent); font-size: 0.6875rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.hsu-owner.stale { border-style: dashed; color: var(--hsu-text-faint); }
.hsu-table tbody tr.hsu-editor-row,
.hsu-table tbody tr.hsu-editor-row:hover { background: rgba(228, 167, 56, 0.04); }
.hsu-editor-row .hsu-entry { margin: 4px 0 12px; }

/* Inputs inside the Universe share one surface. */
.hss-shell .mud-input-outlined { border-radius: var(--hsu-radius); background-color: #0f1115; }

/* ---------- Narrow windows ---------- */

/* Wide windows: the deciding values take a share of the row (never less than their own width) and spread in it,
   so a list has no empty middle. Narrower windows keep them at their own width on the right. */
@container hss-suite (min-width: 1400px) {
    .hsu-row { grid-template-columns: auto minmax(0, 1fr) minmax(max-content, 1.25fr) auto; }
    .hsu-row:not(:has(> .hsu-row-icon)) { grid-template-columns: minmax(0, 1fr) minmax(max-content, 1.25fr) auto; }
    .hsu-row:has(> .hsu-row-media) { grid-template-columns: 112px minmax(0, 1fr) minmax(max-content, 1.25fr) auto; }
    .hsu-row:not(:has(> .hsu-row-facts)):not(:has(> .hsu-row-icon)) { grid-template-columns: minmax(0, 1fr) auto; }
    .hsu-row:has(> .hsu-row-icon):not(:has(> .hsu-row-facts)) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .hsu-row-facts { flex-wrap: nowrap; justify-content: space-evenly; }
}

@container hss-suite (max-width: 900px) {
    .hss-shell { --hsu-page-pad-y: 20px; --hsu-page-pad-x: 20px; }
    .hss-shell .hss-command-bar { grid-template-columns: auto minmax(0, 1fr); gap: var(--hsu-space-3); padding: 10px var(--hsu-space-4); }
    .hss-shell .hss-command-search { grid-column: auto; grid-row: auto; }
    .hss-shell .hss-brand strong { display: none; }
    .hss-shell .hss-workbench { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .hsu-rail {
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding: 6px var(--hsu-space-3);
        border-right: 0;
        border-bottom: 1px solid var(--hsu-line);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
    .hsu-rail-group { flex-direction: row; gap: 2px; padding-left: 6px; margin-left: 4px; border-left: 1px solid var(--hsu-line); }
    .hsu-rail-label { display: none; }
    .hsu-rail-link { flex: 0 0 auto; width: auto; min-height: 34px; padding: 6px 10px; }
    .hsu-rail-link.active { box-shadow: inset 0 -2px var(--hsu-accent); }
    .hsu-split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@container hss-suite (max-width: 640px) {
    .hss-shell { --hsu-page-pad-y: 16px; --hsu-page-pad-x: 14px; }
    .hsu-page-head { align-items: flex-start; }
    .hsu-page-actions { justify-content: flex-start; width: 100%; }
    .hsu-row { grid-template-columns: minmax(0, 1fr) auto; }
    .hsu-row:has(> .hsu-row-icon) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .hsu-row-facts { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
    .hsu-row:has(> .hsu-row-media) { grid-template-columns: 72px minmax(0, 1fr) auto; }
    .hsu-row-media { width: 72px; }
    .hsu-row:has(> .hsu-row-media) .hsu-row-facts { grid-column: 2 / -1; }
    .hsu-page-head:has(> .hsu-page-media img) > .hsu-page-title { max-width: none; }
    .hsu-row:has(> .hsu-row-icon) .hsu-row-facts { grid-column: 2 / -1; }
    .hss-shell .hsu-filter-fields > :is(.mud-input-control, .mud-select, .mud-autocomplete) { flex-basis: 100%; max-width: none; }
    .hsu-result-actions { padding-left: 8px; }
    .hsu-figure + .hsu-figure { padding-left: 12px; }
    .hsu-span-2 { grid-column: auto; }
    .hsu-expense { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hsu-row, .hsu-tab, .hsu-rail-link { transition: none; }
}