/* The page shell. The 3D view brings its own palette in viewer.css and this reuses those variables, so
   there is one set of colours rather than two that drift apart. */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow: hidden;
}

.shell { display: flex; flex-direction: column; height: 100vh; }

header {
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px; height: 40px; flex: none;
    background: var(--panel); border-bottom: 1px solid var(--line);
}

.brand { font-weight: 600; letter-spacing: .02em; }
.crumb { color: var(--text); }
.crumb.dim, .count { color: var(--dim); }
.count { font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

.pick { cursor: pointer; color: var(--accent); }
.pick input { display: none; }

.banner { flex: none; padding: 6px 14px; font-size: 12px; border-bottom: 1px solid var(--line); }
.banner.warn { background: #3a2f14; color: #e8c97a; }
.banner.error { background: #3a1c18; color: #ff9d8b; }

main { flex: 1; display: flex; min-height: 0; }
main.empty { opacity: .25; pointer-events: none; }

.pane { position: relative; min-width: 0; overflow: hidden; }
.pane.text { flex: 0 0 46%; display: flex; }
.pane.view { flex: 1; }

.split { flex: none; width: 1px; background: var(--line); }

.pane.view canvas { display: block; width: 100%; height: 100%; }
.pane.view .labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* The editor's three stacked layers share one scroll position, so they must share one metric. Changing
   the font or the line height here without changing it for all three makes reveal() drift a row per
   few hundred lines. */
.edit-gutter, .edit-area {
    font: 12px/18px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    tab-size: 2;
}

.pane.text { background: #0a0e13; }

.edit-gutter {
    flex: none; width: 62px; margin: 0; padding: 8px 8px 8px 0;
    text-align: right; color: #47576a; background: #0a0e13;
    border-right: 1px solid var(--line);
    user-select: none; white-space: pre; overflow: hidden;
}

.edit-band {
    position: absolute; left: 62px; right: 0;
    background: #1d3a4d; display: none; pointer-events: none;
    margin-top: 8px;
}

.edit-area {
    flex: 1; margin: 0; padding: 8px 12px;
    color: var(--text); background: transparent; border: 0; outline: 0;
    resize: none; white-space: pre; overflow: auto;
}

.drop {
    position: absolute; inset: 40px 0 0 0; display: grid; place-items: center;
    text-align: center; cursor: pointer;
}

.drop div { pointer-events: none; }
.drop strong { font-size: 18px; font-weight: 600; }
.drop p { max-width: 46ch; color: var(--dim); margin: 8px auto 0; }

/* Covering the whole area rather than sitting in it: a file input accepts a drop anywhere over itself,
   which is what makes this a drop target without a line of drag-and-drop JavaScript. */
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.boot { display: grid; place-items: center; height: 100vh; color: var(--dim); }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: 10px 14px; background: #3a1c18; color: #ff9d8b;
}

#blazor-error-ui .reload { color: inherit; text-decoration: underline; }