/** Gray-palette overrides. Colors come from Bidhan */
body[data-pro-style][data-theme-type="light"] {
	--sl-color-neutral-0: white;
	--sl-color-neutral-50: hsl(220, 43%, 99%);
	--sl-color-neutral-100: hsl(240, 33%, 95%);
	--sl-color-neutral-200: hsl(213, 23%, 92%);
	--sl-color-neutral-300: hsl(212, 21%, 86%);
	--sl-color-neutral-400: hsl(215, 14%, 68%);
	--sl-color-neutral-500: hsl(216, 12%, 49%);
	--sl-color-neutral-600: hsl(216, 15%, 35%);
	--sl-color-neutral-700: hsl(214, 20%, 27%);
	--sl-color-neutral-800: hsl(217, 33%, 17%);
	--sl-color-neutral-900: hsl(222, 47%, 11%);
	--sl-color-neutral-950: hsl(229, 84%, 5%);
	--colour-editable-border: var(--sl-color-neutral-200);
	--colour-chart-background: var(--sl-color-neutral-0);
}

/* Utility classes that must apply to light DOM.
* https://github.com/shoelace-style/shoelace/blob/next/src/themes/_utility.css
*/

@supports (scrollbar-gutter: stable) {
	.sl-scroll-lock {
		scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
	}

	.sl-scroll-lock body {
		overflow: hidden !important;
	}
}

/** This can go away once Safari has scrollbar-gutter support. */
@supports not (scrollbar-gutter: stable) {
	.sl-scroll-lock body {
		padding-right: var(--sl-scroll-lock-size) !important;
		overflow: hidden !important;
	}
}

.sl-toast-stack {
	position: fixed;
	top: 0;
	inset-inline-end: 0;
	display: grid;
	z-index: var(--sl-z-index-toast);
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
}

.sl-toast-stack sl-alert {
	margin: var(--sl-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
	box-shadow: var(--sl-shadow-large);
}

/* Styles common to all themes. These depend on theme-defined color tokens.
 * Applies to attribute instead of body for specificity; otherwise color tokens aren't available.
*/
[data-theme] {
	/*
	 * Border radii
	 */

	--sl-border-radius-small: 0.1875rem; /* 3px */
	--sl-border-radius-medium: 0.25rem; /* 4px */
	--sl-border-radius-large: 0.5rem; /* 8px */
	--sl-border-radius-x-large: 1rem; /* 16px */

	--sl-border-radius-circle: 50%;
	--sl-border-radius-pill: 9999px;

	/*
	 * Spacings
	 */

	--sl-spacing-3x-small: 0.125rem; /* 2px */
	--sl-spacing-2x-small: 0.25rem; /* 4px */
	--sl-spacing-x-small: 0.5rem; /* 8px */
	--sl-spacing-small: 0.75rem; /* 12px */
	--sl-spacing-medium: 1rem; /* 16px */
	--sl-spacing-large: 1.25rem; /* 20px */
	--sl-spacing-x-large: 1.75rem; /* 28px */
	--sl-spacing-2x-large: 2.25rem; /* 36px */
	--sl-spacing-3x-large: 3rem; /* 48px */
	--sl-spacing-4x-large: 4.5rem; /* 72px */

	/*
	 * Transitions
	 */

	--sl-transition-x-slow: 1000ms;
	--sl-transition-slow: 500ms;
	--sl-transition-medium: 250ms;
	--sl-transition-fast: 150ms;
	--sl-transition-x-fast: 50ms;

	/*
	 * Typography
	 */

	/* Fonts */
	--sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	--sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--sl-font-serif: Georgia, "Times New Roman", serif;

	/* Font sizes */
	--sl-font-size-2x-small: 0.625rem; /* 10px */
	--sl-font-size-x-small: 0.75rem; /* 12px */
	--sl-font-size-small: 0.875rem; /* 14px */
	--sl-font-size-medium: 1rem; /* 16px */
	--sl-font-size-large: 1.25rem; /* 20px */
	--sl-font-size-x-large: 1.5rem; /* 24px */
	--sl-font-size-2x-large: 2.25rem; /* 36px */
	--sl-font-size-3x-large: 3rem; /* 48px */
	--sl-font-size-4x-large: 4.5rem; /* 72px */

	/* Font weights */
	--sl-font-weight-light: 300;
	--sl-font-weight-normal: 400;
	--sl-font-weight-semibold: 500;
	--sl-font-weight-bold: 700;

	/* Letter spacings */
	--sl-letter-spacing-denser: -0.03em;
	--sl-letter-spacing-dense: -0.015em;
	--sl-letter-spacing-normal: normal;
	--sl-letter-spacing-loose: 0.075em;
	--sl-letter-spacing-looser: 0.15em;

	/* Line heights */
	--sl-line-height-denser: 1;
	--sl-line-height-dense: 1.4;
	--sl-line-height-normal: 1.8;
	--sl-line-height-loose: 2.2;
	--sl-line-height-looser: 2.6;

	/* Focus rings */
	--sl-focus-ring-style: solid;
	--sl-focus-ring-width: 3px;
	--sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
	--sl-focus-ring-offset: 1px;

	/*
	 * Forms
	 */

	/* Buttons */
	--sl-button-font-size-small: var(--sl-font-size-x-small);
	--sl-button-font-size-medium: var(--sl-font-size-small);
	--sl-button-font-size-large: var(--sl-font-size-medium);

	/* Inputs */
	--sl-input-height-small: 1.875rem; /* 30px */
	--sl-input-height-medium: 2.5rem; /* 40px */
	--sl-input-height-large: 3.125rem; /* 50px */

	--sl-input-background-color: var(--sl-color-neutral-0);
	--sl-input-background-color-hover: var(--sl-input-background-color);
	--sl-input-background-color-focus: var(--sl-input-background-color);
	--sl-input-background-color-disabled: var(--sl-color-neutral-100);
	--sl-input-border-width: 1px;
	--sl-input-required-content: "*";
	--sl-input-required-content-offset: -2px;
	--sl-input-required-content-color: var(--sl-input-label-color);

	--sl-input-border-radius-small: var(--sl-border-radius-medium);
	--sl-input-border-radius-medium: var(--sl-border-radius-medium);
	--sl-input-border-radius-large: var(--sl-border-radius-medium);

	--sl-input-font-family: var(--sl-font-sans);
	--sl-input-font-weight: var(--sl-font-weight-normal);
	--sl-input-font-size-small: var(--sl-font-size-small);
	--sl-input-font-size-medium: var(--sl-font-size-medium);
	--sl-input-font-size-large: var(--sl-font-size-large);
	--sl-input-letter-spacing: var(--sl-letter-spacing-normal);

	--sl-input-color: var(--sl-color-neutral-700);
	--sl-input-color-hover: var(--sl-color-neutral-700);
	--sl-input-color-focus: var(--sl-color-neutral-700);
	--sl-input-color-disabled: var(--sl-color-neutral-900);
	--sl-input-icon-color: var(--sl-color-neutral-500);
	--sl-input-icon-color-hover: var(--sl-color-neutral-600);
	--sl-input-icon-color-focus: var(--sl-color-neutral-600);
	--sl-input-placeholder-color: var(--sl-color-neutral-500);
	--sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
	--sl-input-spacing-small: var(--sl-spacing-small);
	--sl-input-spacing-medium: var(--sl-spacing-medium);
	--sl-input-spacing-large: var(--sl-spacing-large);

	--sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
	--sl-input-focus-ring-offset: 0;

	--sl-input-filled-background-color: var(--sl-color-neutral-100);
	--sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
	--sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
	--sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
	--sl-input-filled-color: var(--sl-color-neutral-800);
	--sl-input-filled-color-hover: var(--sl-color-neutral-800);
	--sl-input-filled-color-focus: var(--sl-color-neutral-700);
	--sl-input-filled-color-disabled: var(--sl-color-neutral-800);

	/* Labels */
	--sl-input-label-font-size-small: var(--sl-font-size-small);
	--sl-input-label-font-size-medium: var(--sl-font-size-medium);
	--sl-input-label-font-size-large: var(--sl-font-size-large);
	--sl-input-label-color: inherit;

	/* Help text */
	--sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
	--sl-input-help-text-font-size-medium: var(--sl-font-size-small);
	--sl-input-help-text-font-size-large: var(--sl-font-size-medium);

	/* Toggles (checkboxes, radios, switches) */
	--sl-toggle-size-small: 0.875rem; /* 14px */
	--sl-toggle-size-medium: 1.125rem; /* 18px */
	--sl-toggle-size-large: 1.375rem; /* 22px */

	/*
	 * Panels
	 */
	--sl-panel-border-width: 1px;

	/*
	 * Tooltips
	 */

	--sl-tooltip-border-radius: var(--sl-border-radius-medium);
	--sl-tooltip-background-color: var(--sl-color-neutral-800);
	--sl-tooltip-color: var(--sl-color-neutral-0);
	--sl-tooltip-font-family: var(--sl-font-sans);
	--sl-tooltip-font-weight: var(--sl-font-weight-normal);
	--sl-tooltip-font-size: var(--sl-font-size-small);
	--sl-tooltip-line-height: var(--sl-line-height-dense);
	--sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
	--sl-tooltip-arrow-size: 6px;

	/*
	 * Z-indexes
	 */

	--sl-z-index-drawer: 700;
	--sl-z-index-dialog: 800;
	--sl-z-index-dropdown: 900;
	--sl-z-index-toast: 950;
	--sl-z-index-tooltip: 1000;
}

/* Custom - Top level styling that we can cache in a CSS file.
 * Don't use this for anything that targets within a shadow root;
 * We have the global styles file for that.
*/

/* Applies to theme instead of body for specificity; otherwise color tokens aren't available. */
[data-theme] {
	/* Shoelace overrides (excluding z-index / element-specific / fonts) */
	--sl-input-height-small: 1.6rem;
	--sl-input-height-medium: 2.2rem;
	--sl-input-height-large: 2.8rem;

	/* What are these overrides for? */
	--sl-transition-x-fast: 100ms;
	--sl-transition-2x-fast: 50ms;

	--sl-button-font-size-small: var(--sl-font-size-small);
	--sl-button-font-size-medium: var(--sl-font-size-medium);

	/* Table */
	--table-padding-horizontal: 4px;
	--table-padding-vertical: 3px;

	/* Sizing */
	--chart-height: 450px;
	--chart-width: 500px;

	--width-padding-component: 0.8em;
	--height-icon: 1em;
	--height-icon-arrow: 0.9em;
	--height-icon-spinner: 5rem;

	--border-radius: 0.3rem;
	--border-radius-extra: 0.5rem;
	--size-step-margin: 1rem;
	--width-border-normal: 0.05rem;
	--width-border-extra: 0.1rem;
	--size-scrollbar: 17px; /* not the same for all browsers, but good enough */

	--blur-editable-cell-shadow: 0.15rem;
	--blur-focused-cell-shadow: 0.6em;

	--height-top-bar: var(--sl-input-height-large);

	/* z-index -- plotly uses high values, so we use over 9000 */
	--z-draggable: 100000;
	--z-index-focused: 9050;
	--z-spinner: 9040;
	--sl-z-index-toast: 9035; /* Notifications / Alerts / Toasts */
	--sl-z-index-tooltip: 9030;
	--z-index-notification: 9028;
	--sl-z-index-dialog: 9026;
	--z-index-popup: 9025;
	--sl-z-index-dropdown: 9024;
	--z-navigation-bar: 9023;
	--z-top-bar: 9022;
	--z-nav-hover: 9020;
	--z-table-alert: 9019; /* used by table cell alerts. Needs to work around dropdowns and nav menu */
	--z-modal: 9008;
	--z-alert-info: 9004;
	--z-nav-closed: 9000;
	--z-above-tables: 80;
	--z-sticky-column-header: 70;
	--z-sticky-header: 60;
	--z-sticky-column: 50;
	--z-title: 1; /* above background and charts */
}

/* Can target from here because the alert stack is in light DOM. */
sl-alert::part(base) {
	display: inline-flex;
	white-space: normal;
}

* {
	box-sizing: border-box;
	/* Todo: remove whitespace because it inherits from shadow dom hosts.
	 * We have many per-element overrides because of this bad decision.
	*/
	white-space: nowrap;

	/* Fonts */
	--sl-font-sans: "Inter";
	--sl-font-mono: monospace, var(--sl-font-sans);
	--sl-font-serif: var(--sl-font-sans); /* Not currently using a serif font */

	--sl-input-font-family: var(--sl-font-sans);
	--sl-font-weight-bold: 600;
	--sl-font-weight-black: 700;
	--sl-letter-spacing-normal: -0.015em;
	font-family: var(--sl-font-sans);
}
html {
	overflow: hidden;
}
body {
	display: flex;
	background: var(--sl-color-neutral-200);
	height: 100vh;
	margin: 0;
}