/* Theme */

:root {
    --gs-accent: #12806a;
    --gs-accent-hover: #0e6656;
    --gs-accent-subtle: #e4f3ef;
    --gs-accent-border: #a9d8cc;
}

[data-bs-theme="dark"] {
    --gs-accent: #3fbf9f;
    --gs-accent-hover: #5fd0b3;
    --gs-accent-subtle: #163a33;
    --gs-accent-border: #24604f;
}

.text-accent {
    color: var(--gs-accent) !important;
}

.bg-accent {
    background-color: var(--gs-accent) !important;
}

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--gs-accent);
    --bs-btn-border-color: var(--gs-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gs-accent-hover);
    --bs-btn-hover-border-color: var(--gs-accent-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gs-accent-hover);
    --bs-btn-active-border-color: var(--gs-accent-hover);
}


/* Page */

/* The page fills exactly the visible screen and never scrolls, so the header and tools stay in view.
   On phones 100vh includes the area behind the browser's address bar; 100dvh is what is actually visible. */
html,
body {
    overscroll-behavior: none;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
}


/* Tool Rail */

/* Phones: a bar along the bottom. Tablets and up: a rail on the left. */
.tool-rail {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

@media (min-width: 768px) {
    .tool-rail {
        width: 132px;
        border-top: 0;
        border-right: var(--bs-border-width) solid var(--bs-border-color);
    }
}

.tool-button {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    /* The darker accent keeps the active label readable on the light accent background (contrast 6:1). */
    --bs-btn-active-color: var(--gs-accent-hover);
    --bs-btn-active-bg: var(--gs-accent-subtle);
    --bs-btn-active-border-color: var(--gs-accent-border);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-font-size: 0.8rem;
}

.tool-button-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-danger);
    --bs-btn-disabled-color: var(--bs-secondary-color);
}


/* Graph Canvas */

.graph-canvas {
    background-color: var(--bs-tertiary-bg);
}

.graph-canvas.show-grid {
    background-image: radial-gradient(var(--bs-border-color) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

.inspector {
    width: 260px;
}


/* Analysis Panel */

.analysis-panel {
    width: 440px;
}

/* Phones: the panel covers the screen and closes with its × button. */
@media (max-width: 767.98px) {
    .analysis-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        z-index: 1030;
    }
}

.analysis-panel .nav-underline {
    --bs-nav-link-color: var(--bs-secondary-color);
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
    --bs-nav-underline-link-active-color: var(--gs-accent);
}

.vertex-badge {
    min-width: 2rem;
    height: 2rem;
}

.score-bar {
    --bs-progress-height: 0.4rem;
}

.score-value {
    width: 4rem;
}