/* Shares the explorer's palette so the two surfaces read as one site. */
:root {
    --bg-editor: #1e1e1e;
    --bg-sidebar: #252526;
    --bg-inactive: #2d2d2d;
    --bg-hover: #2a2d2e;
    --bg-selected: #094771;
    --text-primary: #d4d4d4;
    --text-secondary: #abb2bf;
    --text-muted: #858585;
    --border: #3e3e3e;
    --accent: #0078d4;
    --icon-json: #9cdcfe;

    /* Domain families — VS Code dark syntax hues, legible on #1e1e1e. */
    --family-entities: #e6b422;
    --family-core: #9cdcfe;
    --family-materials: #4ec9b0;
    --family-models: #c586c0;
    --family-properties: #ce9178;
    --family-workflow: #569cd6;
    --family-software: #d7ba7d;
    --family-platform: #9a9a9a;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg-editor);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Title bar ───────────────────────────────────────────── */
#titlebar {
    height: 30px;
    background: #323233;
    border-bottom: 1px solid #111;
    display: flex;
    align-items: center;
    padding: 0 14px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-muted);
    gap: 8px;
}
#titlebar .app-name {
    color: var(--text-primary);
    font-weight: 500;
}

/* Five nav items leave the tagline no room to sit on one line; it is decoration, and the
   navigation is not, so it goes first rather than wrapping the 34px bar into two. */
#titlebar-tagline {
    white-space: nowrap;
}
@media (max-width: 900px) {
    #titlebar-tagline {
        display: none;
    }
}

/*
 * The Explorer and the docs both end their title bar with this tagline, so the map does
 * too; the live counts sit just inside it. Pushing the counts rather than the tagline
 * keeps the counts right-aligned if the tagline is ever hidden on a narrow screen.
 */
#titlebar-counts {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

#surfaces {
    display: flex;
    gap: 14px;
    margin-left: 8px;
    /* Five items do not fit a phone. Shrinking is permitted (min-width: 0 overrides the
       automatic min-content floor) and the overflow scrolls inside the bar, so the nav is
       always reachable instead of being clipped off the edge or pushing the page sideways.
       There is spare room on a desktop, so nothing shrinks there. */
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
#surfaces::-webkit-scrollbar {
    display: none;
}
@media (max-width: 700px) {
    #surfaces {
        gap: 10px;
    }
}
#surfaces a {
    color: var(--text-muted);
    text-decoration: none;
}
#surfaces a:hover {
    color: var(--text-primary);
}
#surfaces a.current {
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent);
}

/* ── Layout ──────────────────────────────────────────────── */
#workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#map-area {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
#cy {
    position: absolute;
    inset: 0;
}

#map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-editor);
    z-index: 20;
}
#map-loading.hidden {
    display: none;
}

/* ── Search ──────────────────────────────────────────────── */
#search-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 320px;
    max-width: calc(100% - 24px);
    z-index: 10;
}

#search-input {
    width: 100%;
    background: #3c3c3c;
    border: 1px solid #555;
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 8px 6px 30px;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23858585'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px 50%;
    background-size: 14px 14px;
}
#search-input:focus {
    border-color: var(--accent);
}
#search-input::placeholder {
    color: var(--text-muted);
}

#search-results {
    margin-top: 4px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 3px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
}
.search-hit {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #2f2f2f;
}
.search-hit:last-child {
    border-bottom: none;
}
.search-hit:hover,
.search-hit.active {
    background: var(--bg-selected);
}
.search-hit .hit-id {
    color: var(--icon-json);
    display: block;
}
.search-hit .hit-title {
    color: var(--text-muted);
    font-size: 11px;
}
.search-hit mark {
    background: transparent;
    color: #e6b422;
    font-weight: 700;
}
.search-empty {
    padding: 8px 10px;
    color: var(--text-muted);
}

/* ── Controls ────────────────────────────────────────────── */
#map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

#map-controls button,
#legend-toggle,
#focus-exit {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: inherit;
}
#map-controls button:hover,
#legend-toggle:hover,
#focus-exit:hover {
    background: var(--bg-hover);
}

#edge-toggles {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}
#edge-toggles label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* ── Legend ──────────────────────────────────────────────── */
#legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
    width: 232px;
    max-width: calc(100% - 24px);
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12px;
}
#legend-toggle {
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 3px;
    background: transparent;
    font-weight: 600;
}
#legend-body {
    padding: 0 10px 10px;
    max-height: 46vh;
    overflow-y: auto;
}
#legend-body[hidden] {
    display: none;
}
.legend-note {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 8px;
}
.legend-section {
    margin-top: 8px;
}
.legend-section h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.legend-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.7;
}
.legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    line-height: 1.3;
}
.legend-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-count {
    margin-left: auto;
    padding-left: 8px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.legend-toggle,
.legend-family {
    cursor: pointer;
    user-select: none;
}
.legend-family.muted {
    opacity: 0.35;
}
.legend-shape {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: var(--text-secondary);
}
.legend-shape.entity {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.legend-shape.component {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.legend-shape.core {
    border-radius: 50%;
}
.legend-shape.mixin {
    border-radius: 6px 2px 2px 6px;
}
.legend-shape.taxonomy {
    border-radius: 2px;
}
.legend-edge {
    width: 20px;
    height: 0;
    border-top-width: 2px;
    flex-shrink: 0;
}
.legend-edge.extends {
    border-top-style: solid;
    border-top-color: #8a8a8a;
}
.legend-edge.contains {
    border-top-style: dashed;
    border-top-color: #6f6f6f;
}
.legend-edge.variant {
    border-top-style: dotted;
    border-top-color: #6f6f6f;
}

/* ── Minimap ─────────────────────────────────────────────── */
#minimap {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(37, 37, 38, 0.9);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: crosshair;
}

/* ── Focus banner ────────────────────────────────────────── */
#focus-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    background: var(--bg-selected);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 5px 8px 5px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
#focus-banner[hidden] {
    display: none;
}

/* ── Detail panel ────────────────────────────────────────── */
#detail {
    width: 340px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 14px;
    font-size: 13px;
}
#detail::-webkit-scrollbar {
    width: 6px;
}
#detail::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 3px;
}

#detail-empty h2 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}
#detail-empty p,
.detail-description {
    color: var(--text-muted);
    line-height: 1.5;
}
/* The how-to-drive-it line, set apart from the what-this-is paragraph above it. */
.detail-empty-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
#detail-body[hidden] {
    display: none;
}

.detail-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.detail-id {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--icon-json);
    word-break: break-all;
    margin: 3px 0 8px;
}
.detail-description {
    margin-bottom: 10px;
    font-size: 12px;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.badge {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 9px;
    background: var(--bg-inactive);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.badge.result {
    border-color: #4ec9b0;
    color: #4ec9b0;
}
.badge.monitor {
    border-color: #569cd6;
    color: #569cd6;
}
.badge.units {
    border-color: #ce9178;
    color: #ce9178;
}

.detail-stats {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.detail-stats div {
    font-size: 11px;
    color: var(--text-muted);
}
.detail-stats strong {
    display: block;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 500;
}

.detail-group {
    margin-bottom: 12px;
}
.detail-group h3 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 5px;
}
.rel {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.35;
}
.rel:hover {
    background: var(--bg-hover);
}
.rel-id {
    color: var(--icon-json);
    font-size: 12px;
    word-break: break-all;
}
.rel-label {
    color: var(--text-muted);
    font-size: 10.5px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    flex-shrink: 0;
}

.detail-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detail-links a {
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
}
.detail-links a:hover {
    text-decoration: underline;
}

/* ── Status bar ──────────────────────────────────────────── */
#statusbar {
    height: 22px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 12px;
    flex-shrink: 0;
    gap: 16px;
}
#status-hint {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Focus states ────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Narrow screens: the map keeps the space, the panel docks below ── */
@media (max-width: 720px) {
    #workspace {
        flex-direction: column;
    }
    #detail {
        width: auto;
        max-height: 42vh;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    #legend,
    #minimap {
        display: none;
    }
    #search-panel {
        width: calc(100% - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Facet chips: a badge that filters. The axis colour tells you which scheme it comes from. */
.badge.facet {
    font: inherit;
    font-size: 10.5px;
    line-height: inherit;
    cursor: pointer;
}
.badge.facet:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

/* Sits below the titlebar, above the focus banner, so both can show at once. */
#facet-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px 10px;
    background: var(--bg-sidebar);
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-size: 12px;
}
#facet-banner button {
    padding: 2px 8px;
    background: var(--bg-inactive);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}
#facet-banner button:hover {
    border-color: var(--accent);
}

/* The vocabulary triangle and the apse rhomboid, matching the Cytoscape node shapes. */
.legend-shape.category {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.legend-shape.directory {
    border-radius: 3px;
}
.legend-shape.parsing {
    clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

#facet-banner[hidden] {
    display: none;
}
/* Both banners can be up at once; the focus banner keeps the higher slot. */
#facet-banner:not([hidden]) ~ #focus-banner {
    top: 52px;
}