/* Latin charset */
@font-face {
	font-family: "Libre Franklin";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/static/style/LibreFranklin.woff2) format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
		U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Full size document and prevent overscroll bounce */
html, body {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: none;
}

/* Restore scrolling on the parent main element */
body > main {
	width: 100%;
	height: 100%;
	overflow: auto;
}

/* Focus resets */
body :focus
{
	outline: none;
}
body ::-moz-focus-inner
{
	border: 0;
}

/* Bulma root customization */
:root {
	--bulma-family-primary: "Libre Franklin", Verdana, sans-serif;

	--bulma-primary-h: 337deg;
	--bulma-primary-s: 92%;
	--bulma-primary-l: 52%;
	--bulma-primary-invert-l: var(--bulma-light-l);

	--bulma-link-h: var(--bulma-primary-h);
	--bulma-link-s: var(--bulma-primary-s);
	--bulma-link-l: var(--bulma-primary-l);

	--bulma-grid-column-gap: var(--bulma-block-spacing);
	--bulma-control-border-width: 0.1rem;
	--bulma-radius: 3px;
	--bulma-radius-small: 3px;
	--bulma-radius-large: 5px;

	--bulma-body-size: 0.95em;
	--bulma-body-line-height: initial;

	/* Same as `--bulma-modal-background-background-color` but available anywhere */
	--overlay-background-color: hsla(
		var(--bulma-scheme-h),
		var(--bulma-scheme-s),
		var(--bulma-scheme-invert-l),
		0.86
	);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bulma-scheme-main-l: 8%;
		--bulma-text-l: 85%;
		--bulma-text-strong-l: 100%;
		--bulma-border-l: 100%;
		--bulma-shadow: none;
	}
}

/* Add borders to the cards to make them stand out */
.card, .modal-card {
	border-width: var(--bulma-control-border-width);
	border-style: solid;
	border-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));
}

/* Set the cards radius to the large one */
.card, .modal-card {
	--bulma-card-radius: var(--bulma-radius-large);
	border-radius: var(--bulma-card-radius);
}

@media (prefers-color-scheme: dark) {
	.card {
		--bulma-card-footer-background-color: var(--bulma-scheme-main-bis);
	}

	.box {
		border:
			var(--bulma-control-border-width)
			solid
			hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l))
		;
	}
}

/* Make the card headers use the global shadow */
.card-header {
	--bulma-card-header-shadow: var(--bulma-shadow);
}

/* Fake a disabled appearance on card footer items */
.card-footer-item[disabled] {
	color: var(--bulma-border-weak);
	cursor: unset;
}

/* Style file inputs while retaining the file name */
.input[type="file"] {
	--bulma-file-h: var(--bulma-scheme-h);
	--bulma-file-s: var(--bulma-scheme-s);
	--bulma-file-background-l: var(--bulma-scheme-main-ter-l);
	--bulma-file-background-l-delta: 0%;
	--bulma-file-hover-background-l-delta: -5%;
	--bulma-file-active-background-l-delta: -10%;
	--bulma-file-cta-color-l: var(--bulma-text-strong-l);
	--bulma-file-color-l-delta: 0%;
	--bulma-file-hover-color-l-delta: -5%;
	--bulma-file-active-color-l-delta: -10%;

	padding: 0;
	padding-inline-end: var(--bulma-control-padding-horizontal);
	cursor: pointer;
}
.input[type="file"]:hover {
	--bulma-file-background-l-delta: var(--bulma-file-hover-background-l-delta);
	--bulma-file-color-l-delta: var(--bulma-file-hover-color-l-delta);
}
.input[type="file"]:active {
	--bulma-file-background-l-delta: var(--bulma-file-active-background-l-delta);
	--bulma-file-color-l-delta: var(--bulma-file-active-color-l-delta);
}
.input[type="file"]::file-selector-button {
	border: none;
	border-inline-end: inherit;
	margin-inline-end: var(--bulma-control-padding-horizontal);
	padding: 0 var(--bulma-control-padding-horizontal);

	background-color: hsl(
		var(--bulma-file-h),
		var(--bulma-file-s),
		calc(var(--bulma-file-background-l) + var(--bulma-file-background-l-delta))
	);
	color: hsl(
		var(--bulma-file-h),
		var(--bulma-file-s),
		calc(var(--bulma-file-cta-color-l) + var(--bulma-file-color-l-delta))
	);

	font: inherit;
	font-size: var(--bulma-control-size);
	height: 100%;

	transition-duration: var(--bulma-duration);
	transition-property: background-color, border-color, box-shadow, color;
}

/* Set a minimum height for textareas and prevent them from being resized. */
textarea.input {
	min-height: 6em;
	resize: none;
}

/* Assuming the file selector is on the left, adapt the icon placement */
.control.has-icons-left .input[type="file"] {
	padding-left: 0;
}
.control.has-icons-left .input[type="file"]::file-selector-button {
	padding-left: var(--bulma-input-height);
}

/* Give controls the same aspect as buttons */
.control {
	--bulma-input-icon-color: hsl(
		var(--bulma-scheme-h),
		var(--bulma-scheme-s),
		var(--bulma-text-strong-l)
	);
	--bulma-input-icon-hover-color: var(--bulma-input-icon-color);
	--bulma-input-icon-focus-color: var(--bulma-input-icon-color);
	--bulma-arrow-color: var(--bulma-input-icon-color);
}

/*
 * Fix buttons reserving space for their text even when it is hidden on mobile
 * https://github.com/jgthms/bulma/issues/2731
 */
@media screen and (max-width: 768px) {
	.button > .icon:has(+ .is-hidden-mobile) {
		margin-inline-end: calc(var(--bulma-button-padding-horizontal) * -0.5) !important;
	}
	.button > .is-hidden-mobile + .icon {
		margin-inline-start: calc(var(--bulma-button-padding-horizontal) * -0.5) !important;
	}
}

/*
 * Force the same grid column size despite varying content sizes
 * https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid
 */
.grid.has-equal-columns {
	grid-template-columns: repeat(var(--bulma-grid-column-count), minmax(0, 1fr));
}

/* Fix the extra space on the last child of grids
 * https://github.com/jgthms/bulma/issues/3783
 */
.grid .cell:last-child {
	margin-bottom: var(--bulma-block-spacing);
}

/* Full-sized absolute positioned element */
.is-full-size {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* Horizontally narrow and centered class, used to build forms */
.is-narrow {
	margin-left: auto;
	margin-right: auto;
	max-width: 30rem;
}

/* Helper class that adds a backdrop shadow on text. */
.has-backdrop-text-shadow {
	text-shadow:
		-0.5px +0.5px 0.5px var(--bulma-body-background-color),
		-0.5px -0.5px 0.5px var(--bulma-body-background-color),
		+0.5px +0.5px 0.5px var(--bulma-body-background-color),
		+0.5px -0.5px 0.5px var(--bulma-body-background-color);
}

/* Helper class that disables pointer events but enables them on children. */
.has-pointer-events-on-children-only {
	pointer-events: none;
}
.has-pointer-events-on-children-only * {
	pointer-events: auto;
}

/* Helper class that removes touch interactions. */
.has-no-touch-interaction {
	touch-action: none;
	-webkit-highlight: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-callout: none;
	-webkit-user-drag: none;
	-webkit-user-modify: none;
}

/* Set the gap property to the equivalent Bulma value */
.g-0 { gap: 0; }
.g-1 { gap: 0.25rem; }
.g-2 { gap: 0.50rem; }
.g-3 { gap: 0.75rem; }
.g-4 { gap: 1.00rem; }
.g-5 { gap: 1.50rem; }
.g-6 { gap: 3.00rem; }