/* ============================================================================
   base/site.css  --  site-wide rules that belong to no single component.

   Loaded on every page (see _quarto.yml). Keep this file small: anything used
   by only one section belongs in components/ or widgets/ and is loaded there
   through that section's _metadata.yml.

   Contents
     1. Buttons          Bootstrap + Observable buttons share one neutral skin
     2. Observable       form controls that stay legible in the dark theme
     3. Math             MathJax sizing
     4. Layout           navbar width, small utilities
   ==========================================================================*/


/* ---------------------------------------------------------------- 1. Buttons
   Neutral skin derived from the body colors, so it follows the light/dark
   toggle without a per-theme block. */
.btn.btn-quarto,
button.btn.btn-quarto,
.observablehq-element button.btn,
.observablehq-element button {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: color-mix(in srgb, var(--bs-body-color) 14%, var(--bs-body-bg));
    --bs-btn-border-color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);

    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-body-color) 26%, var(--bs-body-bg));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-body-color) 62%, transparent);

    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-body-color) 34%, var(--bs-body-bg));
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-body-color) 68%, transparent);

    --bs-btn-disabled-color: color-mix(in srgb, var(--bs-body-color) 62%, var(--bs-body-bg));
    --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-body-bg));
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-body-color) 30%, transparent);

    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Fallback for any Observable button that is not given Bootstrap's .btn class,
   where no --bs-btn-* variables are consulted. */
.observablehq-element button:not(.btn) {
    background-color: color-mix(in srgb, var(--bs-body-color) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 55%, transparent);
}

.observablehq-element button:not(.btn):hover {
    background-color: color-mix(in srgb, var(--bs-body-color) 26%, var(--bs-body-bg));
}

.btn.btn-quarto:focus-visible,
button.btn.btn-quarto:focus-visible,
.observablehq-element button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bs-body-color) 60%, transparent);
    outline-offset: 2px;
}


/* ------------------------------------------------------------ 2. Observable */

.observablehq-element form,
.observablehq-element label,
.observablehq-element output {
    color: var(--bs-body-color);
}

.observablehq-element input[type="text"],
.observablehq-element input[type="number"],
.observablehq-element select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 35%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
}

/* the value readout next to a range slider */
.observablehq-element .observablehq--inspect,
.observablehq-element form>div>output {
    color: var(--bs-body-color);
}


/* ------------------------------------------------------------------ 3. Math */

.math.inline .MathJax,
.math.display .MathJax {
    font-size: 100% !important;
}


/* --------------------------------------------------------------- 4. Layout */

.navbar>.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
}

.center-content {
    text-align: center;
}