/* ---------------------------------------------------------------------------
   StringStats design tokens + Bootstrap 5.3 theming.
   The look: cool blue-grey paper, near-black ink, hairline rules (no shadows),
   one accent (logo red in light, logo gold in dark). Libre Franklin for prose, IBM Plex Mono for figures.
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --sl-bg: #eef1f3;
    --sl-surface: #ffffff;
    --sl-surface-2: #f5f7f8;
    --sl-ink: #1D2A3A;
    --sl-ink-muted: #566273;
    --sl-hairline: #d7dcdf;
    --sl-accent: #D62828;
    --sl-accent-hover: #b81f1f;
    --sl-accent-weak: rgba(214, 40, 40, .10);
    --sl-on-accent: #ffffff;
    --sl-gain: #2e7d53;
    --sl-drop: #b4443c;
    color-scheme: light;
}

[data-bs-theme="dark"] {
    --sl-bg: #14171a;
    --sl-surface: #1c2024;
    --sl-surface-2: #22272b;
    --sl-ink: #e7eaec;
    --sl-ink-muted: #98a1a9;
    --sl-hairline: #2f353b;
    --sl-accent: #E8B130;
    --sl-accent-hover: #f0c14f;
    --sl-accent-weak: rgba(232, 177, 48, .14);
    --sl-on-accent: #1D2A3A;
    --sl-gain: #5fb487;
    --sl-drop: #e28c82;
    color-scheme: dark;
}

/* Map Bootstrap's variables onto the tokens, in both themes. */
:root {
    --bs-body-font-family: "Libre Franklin", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: .625rem;
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--sl-bg);
    --bs-body-color: var(--sl-ink);
    --bs-secondary-color: var(--sl-ink-muted);
    --bs-tertiary-bg: var(--sl-surface-2);
    --bs-border-color: var(--sl-hairline);
    --bs-emphasis-color: var(--sl-ink);
    --bs-primary: var(--sl-accent);
    --bs-link-color: var(--sl-accent);
    --bs-link-hover-color: var(--sl-accent);
    --bs-focus-ring-color: var(--sl-accent-weak);
}

/* Bootstrap compiles .btn-primary's blue in, so it ignores --bs-primary. */
.btn-primary {
    --bs-btn-color: var(--sl-on-accent);
    --bs-btn-bg: var(--sl-accent);
    --bs-btn-border-color: var(--sl-accent);
    --bs-btn-hover-color: var(--sl-on-accent);
    --bs-btn-hover-bg: var(--sl-accent-hover);
    --bs-btn-hover-border-color: var(--sl-accent-hover);
    --bs-btn-active-color: var(--sl-on-accent);
    --bs-btn-active-bg: var(--sl-accent-hover);
    --bs-btn-active-border-color: var(--sl-accent-hover);
    --bs-btn-focus-shadow-rgb: 214, 40, 40;
}

/* Same for form focus, which Bootstrap hardcodes to blue. */
.form-control:focus,
.form-select:focus {
    border-color: var(--sl-accent);
    box-shadow: 0 0 0 .2rem var(--sl-accent-weak);
}

/* ---- base ------------------------------------------------------------- */

body {
    font-family: var(--bs-body-font-family);
    background: var(--sl-bg);
    color: var(--sl-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, .h1 { font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h2, .h2 { font-weight: 600; letter-spacing: -.01em; }
h3, .h3 { font-weight: 600; }

a { color: var(--sl-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--sl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Logo variants: show the light-theme or dark-theme artwork to match data-bs-theme
   (set by theme.js, so prefers-color-scheme is not used). Global on purpose: scoped
   component CSS can't see the theme attribute on <html>. */
.sl-logo-light, .sl-logo-dark { display: block; }
.sl-logo-dark { display: none; }
[data-bs-theme="dark"] .sl-logo-light { display: none; }
[data-bs-theme="dark"] .sl-logo-dark { display: block; }

/* Figures: monospace, aligned columns. */
.sl-num {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* Uppercase micro-labels. */
.sl-eyebrow {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--sl-ink-muted);
}

/* ---- framework affordances (kept from the template) ------------------ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Charts size to their column, never the other way round. ApexCharts sizes its SVG
   from the container on first render, so an unconstrained container lets the chart
   push the whole page wider than a phone screen. */
.chartbox {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.chartbox .apexcharts-canvas {
    max-width: 100%;
}