*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
}

body {
    overflow: hidden;
    font: var(--font-textblock);
    background: var(--c-bg);
    color: var(--c-font);
}

/* Shared app scrollbar: a slim button-colored track with an accent thumb. */
.appScrollRegion {
    scrollbar-color: var(--c-accent) var(--c-surface-interactive);
}

@supports selector(::-webkit-scrollbar) {
    .appScrollRegion {
        scrollbar-width: auto;
    }
}

@supports not selector(::-webkit-scrollbar) {
    .appScrollRegion {
        scrollbar-width: thin;
    }
}

.appScrollRegion::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

.appScrollRegion::-webkit-scrollbar-track {
    background: var(--c-surface-interactive);
}

.appScrollRegion::-webkit-scrollbar-thumb {
    min-height: 28px;
    border: calc((var(--scrollbar-width) - var(--scrollbar-thumb-width)) / 2) solid transparent;
    border-radius: var(--scrollbar-radius);
    background: var(--c-accent);
    background-clip: content-box;
}

.appScrollRegion::-webkit-scrollbar-corner {
    background: var(--c-surface-interactive);
}

button {
    font: var(--font-button);
}

input,
textarea,
select {
    font: var(--font-textblock);
    -webkit-user-select: text;
    user-select: text;
}

[contenteditable]:not([contenteditable="false"]),
[contenteditable="plaintext-only"],
[data-allow-selection="true"],
.allow-selection {
    -webkit-user-select: text;
    user-select: text;
}

button {
    border: 0;
    background: none;
    color: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

code,
kbd {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--lh-console) + 2px);
    padding: 0 calc(var(--pad-3) + 1px);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    color: var(--c-font);
    font-family: var(--font-code);
    font-size: 0.95em;
    line-height: 1;
}

kbd {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c-border) 72%, transparent);
}

:focus-visible {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.appShell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--navbar) minmax(0, 1fr) var(--sidebar);
    grid-template-rows: minmax(0, 1fr) auto;
}

.methodRail {
    grid-column: 1;
    grid-row: 1;
}

.contentArea {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    padding: var(--pad-1);
    overflow: hidden;
}

.sidebarPanel {
    grid-column: 3;
    grid-row: 1;
}