: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-folder: #dcb67a;
    --icon-json: #9cdcfe;
}

* {
    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: 600;
}

/* 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 {
    margin-left: auto;
    white-space: nowrap;
}
@media (max-width: 900px) {
    #titlebar-tagline {
        display: none;
    }
}

#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;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
    width: 280px;
    min-width: 120px;
    max-width: 60vw;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

#sidebar-title {
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Files | Categories | Directories — the same schemas, three arrangements. */
#view-switch {
    display: flex;
    margin: 0 8px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
#view-switch button {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px;
    border: none;
    background: var(--bg-inactive);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#view-switch button + button {
    border-left: 1px solid var(--border);
}
#view-switch button:hover {
    color: var(--text-primary);
}
#view-switch button.active {
    background: var(--accent);
    color: #fff;
}

#search-wrap {
    padding: 0 8px 8px;
    flex-shrink: 0;
}

#search-input {
    width: 100%;
    background: #3c3c3c;
    border: 1px solid #555;
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 5px 8px 5px 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);
}

#file-tree {
    flex: 1;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1;
}
#file-tree::-webkit-scrollbar {
    width: 6px;
}
#file-tree::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 3px;
}
#file-tree::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Tree items ──────────────────────────────────────────── */
.t-item {
    display: flex;
    align-items: center;
    height: 22px;
    cursor: pointer;
    white-space: nowrap;
    padding-right: 8px;
    gap: 3px;
}
.t-item:hover {
    background: var(--bg-hover);
}
.t-item.selected {
    background: var(--bg-selected);
}

.t-chevron {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
    transition: transform 0.1s;
}
.t-icon {
    flex-shrink: 0;
    font-size: 14px;
    width: 18px;
    text-align: center;
}
.t-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-item.folder .t-label {
    color: var(--text-primary);
}
.t-item.file .t-label {
    color: var(--icon-json);
}

.t-children {
    display: none;
}
.t-children.open {
    display: block;
}

/* search result: show full path */
.t-item.flat-result .t-label {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    padding: 2px 0;
    height: auto;
}
.t-item.flat-result {
    height: auto;
    min-height: 22px;
    align-items: flex-start;
    padding-top: 3px;
    padding-bottom: 3px;
}
.t-item.flat-result .t-filename {
    color: var(--icon-json);
    font-weight: 500;
}
.t-item.flat-result .t-filepath {
    font-size: 11px;
    color: var(--text-muted);
}
.t-item.flat-result mark {
    background: transparent;
    color: #e6b422;
    font-weight: 700;
}

/* no-results / loading */
.tree-msg {
    padding: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Resizer ─────────────────────────────────────────────── */
#resizer {
    width: 4px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
}
#resizer:hover,
#resizer.active {
    background: var(--accent);
}

/* ── Editor area ─────────────────────────────────────────── */
#editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Tab bar */
#tabbar {
    height: 35px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    /* Tabs keep their width and the strip scrolls, rather than being squeezed away. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
#tabbar::-webkit-scrollbar {
    height: 3px;
}
#tabbar::-webkit-scrollbar-thumb {
    background: var(--border);
}
.tab {
    height: 35px;
    padding: 0 8px 0 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-inactive);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 220px;
    cursor: pointer;
    color: var(--text-muted);
}
.tab:hover {
    background: var(--bg-hover);
}
.tab.active {
    background: var(--bg-editor);
    color: var(--text-primary);
    border-top: 1px solid var(--accent);
    height: 36px;
}
.tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Holds its space so the label does not shift when the button appears on hover. */
.tab-close {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: none;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}
.tab:hover .tab-close,
.tab.active .tab-close,
.tab-close:focus-visible {
    opacity: 1;
}
.tab-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Breadcrumb */
#breadcrumb-row {
    height: 22px;
    background: var(--bg-editor);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 14px;
    gap: 12px;
}
#breadcrumb {
    flex: 1;
    min-width: 0;
    padding: 0 14px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 2px;
    /* A category coordinate is far longer than a file path and must not wrap out of the
       22px row; the strip scrolls instead. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
#breadcrumb::-webkit-scrollbar {
    height: 0;
}
#breadcrumb span {
    white-space: nowrap;
    flex-shrink: 0;
}
#view-on-map {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
#view-on-map:hover {
    text-decoration: underline;
}
#view-on-map[hidden] {
    display: none;
}
.bc-sep {
    opacity: 0.4;
    margin: 0 2px;
}

/* Editor container */
#editor-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#monaco-editor {
    position: absolute;
    inset: 0;
    display: none;
}

/* Welcome */
#welcome {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
}
#welcome h2 {
    font-size: 22px;
    font-weight: 300;
    color: var(--text-secondary);
}
#welcome p {
    font-size: 13px;
}
#welcome .welcome-links {
    max-width: 46ch;
    text-align: center;
    line-height: 1.6;
}
#welcome .welcome-links a {
    color: var(--accent);
    text-decoration: none;
}
#welcome .welcome-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-path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}