/*

  INDEX

  1. Custom Properties
  2. General CSS
  3. Layout
  4. Typography
  5. Buttons
  6. Form fields
  7. Notifications
 	8. Headers
  9. Lists
  10. Tables
  11. Footer
  12. Progress indicator
  13. Dartboard areas
  15. Icons
  16. Templates
  17. Dialogs
  18. Animations
  19. Tooltips
  20. Scrollbars
  21. Page loader
  22. Keyboard shortcuts

*/



/* 1. Custom Properties
----------------------------------------------------------------------------- */

/* 1.1 Generic layer -------------------------------------------------------- */
:root{
	--accent-hs: 135 17%;
	--accent-200: hsl(var(--accent-hs) 80%);
	--accent-500: hsl(var(--accent-hs) 50%);
	--accent-700: hsl(var(--accent-hs) 40%);
	--accent-800: hsl(var(--accent-hs) 20%);

	--grey-0:   #ffffff;
	--grey-100: #f5f5f5;
	--grey-200: #e4e5e3;
	--grey-300: #d0d1cf; /*dedede*/
	--grey-700: #807579; /*696366*/
	--grey-800: #534c4f;
	--grey-900: #2b2226;

	--blue-200: #CFE8FF;
	--blue-300: #A6CFF4;

	--green-200: hsl(105 17% 80%);
	--green-300: hsl(105 17% 67%);
	--green-500: hsl(105 17% 49%);

	--yellow-200: #faeeb1;
	--yellow-300: #e3d796;

	--red-200: #f2d3cB;
	--red-300: #d1b0a7; /* lighter border: #d6bbba */
	--red-500: #b0624e;

	--beige: #e5ded2;

	--spacing-1:  0.0625rem;
	--spacing-2:  0.125rem;
	--spacing-4:  0.25rem;
	--spacing-8:  0.5rem;
	--spacing-12: 0.75rem;
	--spacing-16: 1rem;
	--spacing-20: 1.25rem;
	--spacing-24: 1.5rem;
	--spacing-32: 2rem;
}

/* 1.2 Semantic layer ------------------------------------------------------- */
:root{
	--background-primary: var(--grey-0);
	--background-secondary: var(--grey-100);
	--background-tertiary: var(--grey-200);
	--background-accent: var(--accent-500);
	--background-info: var(--blue-200);
	--background-success: var(--green-200);
	--background-warning: var(--yellow-200);
	--background-error: var(--red-200);

	--text-color-primary: var(--grey-900);
	--text-color-secondary: var(--grey-800);
	--text-color-tertiary: var(--grey-700);
	--text-color-accent: var(--accent-800);

	--border-subtle: var(--grey-200);
	--border-default: var(--grey-300);
	--border-strong: rgba(33, 33, 33, 0.32);
	--border-accent: var(--accent-200);
	--border-info: var(--blue-300);
	--border-success: var(--green-300);
	--border-warning: var(--yellow-300);
	--border-error: var(--red-300);

	--border-radius-small: .25rem;
	--border-radius-medium: .5rem;
	--border-radius-large: 1.125rem;

	--board-area-light: var(--beige);
	--board-area-dark: var(--grey-900);
	--board-area-green: var(--green-500);
	--board-area-red: var(--red-500);

	--gap-3xs: .25rem;
	--gap-2xs: .5rem;
	--gap-xs: .75rem;
	--gap-small: 1rem;
	--gap-medium: 1.5rem;

	--spacing-page: 1rem;
}

/* 1.3 Contrast colours ----------------------------------------------------- */
.contrast{
	--background-primary: var(--accent-500);
	--background-secondary: var(--accent-500);
	--background-accent: var(--grey-100);

	--text-color-primary: var(--grey-0);
	--text-color-secondary: var(--grey-100);
	--text-color-tertiary: var(--grey-200);
	--text-color-accent: var(--grey-0);

	--border-accent: var(--accent-200);

	color: var(--text-color-secondary);
}

/* 1.4 Responsive properties ------------------------------------------------ */
@media (min-width: 375px) {
	:root{
		--spacing-page: 1.5rem;
	}
}



/* 2. General CSS
----------------------------------------------------------------------------- */
html{
	background-color: var(--background-secondary);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*touch-action: manipulation;*/
}

*,
*::after,
*::before{
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

*:not(a[href]){
	cursor: default;
}

[hidden],
.logged-in .hide-when-logged-in,
.logged-out .hide-when-logged-out,
.logged-in-before .hide-when-logged-in-before,
body:not(.logged-in-before) .hide-when-not-logged-in-before,
.no-local-games-stored .hide-when-no-local-games,
.local-games-stored .hide-when-local-games{
	display: none!important;
}

.visually-hidden{
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	height: 1px !important;
	width: 1px !important;
	padding: 0 !important;
	border: 0 !important;
}

[disabled]{
	opacity: .5;
}

.no-indent li{
	list-style-type: none;
}

.hide-scrollbar{
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar{
	display: none;
}

a,
button {
	/* Prevent default touch behaviors and latency */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;

	/* Force GPU acceleration */
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000px;
}


/* 3. Layout
----------------------------------------------------------------------------- */
@media (min-width: 1016px){
	.page-width-medium{
		max-width: 960px;
		margin: 0 auto;
	}
}

.page-width-xs{
	max-width: 24rem;
	margin: 1.5rem auto;
}

.padding-page{
	padding-inline: var(--spacing-page);
}

.padding-page-u{
	padding-inline: var(--spacing-page);
	padding-block-end: var(--spacing-page);
}

.margin-page{
	margin-inline: var(--spacing-page);
}

@media (display-mode: standalone) {
	.padding-page,
	.padding-page-u{
		padding-block-end: env(safe-area-inset-bottom, var(--spacing-page));
	}
}

.spacing-section{
	margin-block-start: 1.25rem;
	padding-inline: var(--spacing-page);
	padding-block-end: 1.5rem;
}

.spacing-section-v{
	margin-block-start: 1.25rem;
	padding-block-end: 1.5rem;
}

.grid{
	display: grid;
}

.grid.two-columns{
	grid-template-columns: 1fr 1fr;
}

.flex{
	display: flex;
}

.flex.columns{
	flex-direction: column;
}

.flex.fill,
.flex .fill{
	flex-grow: 1;
}

.full-width{
	width: 100%;
}

.align-items-baseline{
	align-items: baseline; /* TODO: consider making this specific for the progress component */
}

.gap-3xs		{ gap: var(--gap-3xs, 	 0.25rem	);}
.gap-2xs		{ gap: var(--gap-2xs, 	 0.5rem		);}
.gap-xs			{ gap: var(--gap-xs, 		 0.75rem	);}
.gap-small	{ gap: var(--gap-small,  1rem			);}
.gap-medium	{ gap: var(--gap-medium, 1.5rem		);}

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1440px) {}



/* 4. Typography
----------------------------------------------------------------------------- */

/* 4.1 Generic -------------------------------------------------------------- */
html{
	font: 100% / 1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
	color: var(--text-color-secondary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 4.2 Default sizes -------------------------------------------------------- */
h1, h2, h3,
.font-size-largest, .font-size-larger, .font-size-large{
	font-weight: 600;
	color: var(--text-color-primary);
}

h1,
.font-size-largest{
	font-size: 2rem;
	line-height: 1.25;
}

h2,
.font-size-larger{
	font-size: 1.5rem;
	line-height: 1rem;
}

h3,
.font-size-large,
header h1{
	font-size: 1.1875rem;
	line-height: 1.2631578947;
}

small,
.font-size-small,
label:not(.value-label),
.label,
legend{
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.333rem;
}

/* 4.3 Adaptive sizes ------------------------------------------------------- */
.adaptive{
	line-height: 1;
}

.font-size-largest.adaptive{
	font-size: clamp(2rem, 4vw, 4rem);
}

.font-size-larger.adaptive{
	font-size: clamp(1.5rem, 3vw, 3rem);
}

h1.adaptive,
.font-size-large.adaptive{
	font-size: clamp(1.1875rem, 2.375vw, 2.375rem);
}

.font-size-default.adaptive{
	font-size: clamp(1rem, 2vw, 2rem);
}

small.adaptive,
.font-size-small.adaptive{
	font-size: clamp(0.9375rem, 1.875vw, 1.875rem);
}

/* 4.4 Layout --------------------------------------------------------------- */
h1{
	margin-block-end: .25rem;
}

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

.text-align-right{
	text-align: right;
}

/* 4.5 Links ---------------------------------------------------------------- */
a{
	color: var(--text-color-accent);
}

@media (hover: hover){
	a:hover{
		text-decoration: none;
	}
}

a.among-buttons{
	text-decoration: none;
	border-radius: var(--border-radius-medium);
}

a:focus-visible{
	outline: 3px solid var(--background-accent);
	outline-offset: 0;
	color: var(--background-primary);
	background-color: var(--background-accent);
}

a[aria-current]:not(:focus-visible){
	color: var(--text-color-primary);
	cursor: default;
	text-decoration: none;
}


/* 4.6 Color ---------------------------------------------------------------- */
.text-color-primary{
	color: var(--text-color-primary);
}

.text-color-secondary{
	color: var(--text-color-secondary);
}

.text-color-tertiary{
	color: var(--text-color-tertiary);
}



/* 5. Buttons
----------------------------------------------------------------------------- */

/* 5.1 Types ---------------------------------------------------------------- */
button{
	padding-block: 1rem;
	padding-inline: var(--spacing-page);
	padding-inline: calc(var(--spacing-page) - .25rem);
	border: .25rem solid transparent;
	border-radius: var(--border-radius-medium);
	outline: none;
	font: inherit;
	font-weight: 600;
	text-align: center;
	color: var(--text-color-primary);
	background-color: var(--background-tertiary);
	transition: filter .24s;
}

button.primary{
	background-color: var(--background-accent);
	color: var(--background-primary);
}

button.secondary{
	background-color: var(--grey-300);
}

button.tertiary{
	background-color: var(--background-primary);
}

button.quiet{
	background-color: var(--background-secondary);
	font-weight: inherit;
	color: var(--text-color-accent);
}

button.round{
	border-radius: 50%;
	padding: 1rem;
}

/* 5.2 States --------------------------------------------------------------- */


@media (hover: hover){
	button:not([disabled]):hover{
		filter: brightness(.97);
	}
}

button:not([disabled]):active{
	filter: brightness(.9);
	transition: none;
}

button.primary:focus-visible{
	border-color: var(--accent-700);
	color: var(--background-primary);
}

button.secondary:focus-visible{
	border-color: var(--background-secondary);
	border-color: var(--background-accent);
	outline-color: var(--background-accent);
}

button:is(.tertiary, .quiet):focus-visible{
	border-color: var(--border-accent);
}

/* 5.3 Button group --------------------------------------------------------- */
.button-group{
	position: relative;
	display: grid;
}

[role=dialog].full-screen .button-group{
	border-radius: var(--border-radius-large);
	overflow: hidden;
}

[role=dialog].full-screen .button-group button{
	border-radius: 0;
}

.button-group.sticky{
	position: sticky;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	padding: .5rem var(--spacing-page);
	border-block-start: 1px solid var(--border-subtle);
	background-color: var(--background-secondary);
}

@media (display-mode: standalone) {
	.button-group.sticky{
		padding-block-end: env(safe-area-inset-bottom, .5rem);
	}
}

.button-group.sticky button{
	width: unset;
	flex-grow: inherit;
}

.separate{
	margin-block-start: .5rem;
}

.button-group button{
	width: 100%;
}



/* 6. Form fields
----------------------------------------------------------------------------- */

/* 6.1 General -------------------------------------------------------------- */
.form-field{
	display: block;
	width: 100%;
	padding: 0.75rem;
	padding: calc(1.25rem - 1px);
	border: 1px solid var(--border-default);
	border-radius: var(--border-radius-medium);
	font: inherit;
	color: var(--text-color-primary);
	background-color: var(--background-primary);
}

@media (hover: hover){
	.form-field:hover{
		border-color: var(--border-strong);
	}
}

.form-field:focus,
.form-field:focus-visible{
	border-color: var(--border-accent);
	outline: 3px solid var(--border-accent);
}

.form-field[disabled]{
	border-color: var(--border-default);
}

.hnpt{
	position: absolute;
	left: -9999px;
	left: -200vw;
}

/* 6.2 Labels --------------------------------------------------------------- */
label:not(.value-label),
.label{
	display: block;
	padding-block-end: .5rem;
	color: var(--text-color-tertiary);
}

label:not(:first-of-type):not(.value-label),
.label:not(:first-of-type){
	margin-block-start: 1.5rem;
}

fieldset legend{
	color: var(--text-color-tertiary);
}

/* 6.3 Selection list ------------------------------------------------------- */
.selection-option{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: var(--gap-2xs, .5rem);
	align-items: center;
}

.selection-group label{
	padding-block: .25rem;
}

/*

<fieldset class=selection-group>
	<legend><?= t('what-to-share') ?></legend>
	<ul class="no-indent no-margin">
		<li class=selection-option>
			<input type=radio id=general name=category value=general>
			<label for=general class=value-label><?= t('general-feedback') ?></label>
		</li>
		<li class=selection-option>
			<input type=radio id=bug name=category value=bug>
			<label for=bug class=value-label><?= t('something-isnt-working') ?></label>
		</li>
		<li class=selection-option>
			<input type=radio id=confusion name=category value=confusion>
			<label for=confusion class=value-label><?= t('something-is-confusing') ?></label>
		</li>
		<li class=selection-option>
			<input type=radio id=suggestion name=category value=suggestion>
			<label for=suggestion class=value-label><?= t('feature-suggestion') ?></label>
		</li>
	</ul>
</fieldset>

*/

/* 6.4 Select --------------------------------------------------------------- */
.select,
select{
	appearance: none;
	color: var(--text-color-accent);
	background: var(--background-primary) url('../icons/select.svg') no-repeat center right .75rem;
}

/* 6.5 Password field ------------------------------------------------------- */
.password-wrapper button{
	min-width: 5.5rem;
	padding-block: .5rem;
	padding-inline: .5rem;
	border-width: 1px;
}

.password-wrapper button:focus-visible{
	outline: 3px solid var(--background-accent);
}



/* 7. Notifications
----------------------------------------------------------------------------- */
.notification.message,
.notification .message{
	display: block;
	padding: 1rem;
	border: 1px solid var(--border-warning);
	border-radius: var(--border-radius-medium);
	background-color: var(--background-warning);
	color: var(--text-color-primary);
}

.notification.info.message,
.notification.info .message{
	border-color: var(--border-info);
	background-color: var(--background-info);
}

.notification.with-button .message{
	border-inline-end: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.notification.with-button button{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.notification.success.message,
.notification.success .message{
	border-color: var(--border-success);
	background-color: var(--background-success);
}

.notification.error.message,
.notification.error .message{
	border-color: var(--border-error);
	background-color: var(--background-error);
}

@media (min-width: 32.01rem) {
	.notification.with-button{
		display: grid;
		grid-template-columns: 1fr auto;
	}
}

@media (max-width: 32rem) {
	.notification.with-button.message,
	.notification.with-button .message{
		border-block-end: 0;
	}

	.notification button{
		width: 100%;
	}
}


/* 8. Headers
----------------------------------------------------------------------------- */

/* 8.1 Types ---------------------------------------------------------------- */
header.dialog,
header.game,
header.default nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header{
	min-height: 4.5rem;
	background-color: var(--background-secondary);
	padding: .5rem .5rem 0;
}

header.dialog{
	padding-inline-start: var(--spacing-page);
}

header.home{
	padding-block: 1.5rem;
	margin-block: 1.5rem;
	border-radius: var(--border-radius-large);
}

header.default .text{
	max-width: 45rem;
	margin-block: .75rem 1.25rem;
}

header.game .text{
	text-align: center;
}

/* 8.2 Links and buttons ---------------------------------------------------- */
header a{
	display: flex;
	justify-content: center;
	align-items: center;

	/* Same padding as a button, to be optimized DRY */
	padding-block: 1rem;
	padding-inline: var(--spacing-page);
	padding-inline: calc(var(--spacing-page) - .25rem);

	border: .25rem solid transparent;
	outline: none;
	background-color: var(--background-secondary);
}

@media (hover: hover){
	header a:hover{
		filter: brightness(.97);
	}
}

header a:focus-visible{
	outline: 0;
	border-color: var(--border-accent);
	background-color: transparent;
	color: var(--text-color-accent);
}




/* 9. Lists
----------------------------------------------------------------------------- */
ul:not(.no-indent),
ol:not(.no-indent){
	padding-inline-start: 1rem;
}

ul.styled{
	list-style-type: none;
	padding: 0;
	border-radius: var(--border-radius-large);
	overflow: hidden;
}

ul.styled li{
	display: flex;
	gap: .5rem;
	align-items: center;
	margin-block-end: .125rem;
	line-height: 2rem;
	background-color: var(--background-primary);
}

ul.styled li > *{
	padding-inline: var(--spacing-page);
	background-color: var(--background-primary);
}

ul.styled li > *:not(.before, .after){
	flex-grow: 1;
}

ul.medium li > *{
	padding-block: .75rem;
}

ul.large li > *{
	padding-block: 1rem;
}

@media (hover: hover){
	ul.styled li > a:hover{
		filter: brightness(.99);
	}
}

ul.styled li > a:focus-visible{
	outline: none;
	color: var(--text-color-accent);
	background-color: var(--background-primary);
	box-shadow: inset 0 0 0 .25rem var(--border-accent);
}



/* 10. Tables
----------------------------------------------------------------------------- */
.table-container{
	overflow-x: auto;
}

table{
	width: 100%;
	border-collapse: collapse;
}

thead{
	position: sticky;
	top: 0;
	/* TODO: werkt niet door container */
}

table th{
	border-collapse: collapse;
	padding: .25rem .75rem;
	text-align: left;
	background-color: var(--background-tertiary);
	font-weight: normal;
	font-size: .875rem;
}

tbody,
table tr:not(:last-of-type){
	border-block-end: 2px solid var(--background-secondary);
}

table td{
	padding-block: 1rem;
	padding-inline: .75rem var(--spacing-page);
	background-color: var(--background-primary);
  white-space: nowrap;
}

table th:first-of-type,
table td:first-of-type{
	padding-inline-start: var(--spacing-page);
}

table th:last-of-type,
table td:last-of-type{
	padding-inline-end: var(--spacing-page);
}

table td:focus-visible{
	outline: none;
	box-shadow: inset 0 0 0 .25rem var(--border-accent);
}

table .row-group td{
	padding-block: 1rem .5rem;
	color: var(--text-color-tertiary);
	background-color: var(--background-secondary) !important;
}

table td.sequence{
	padding-block: .75rem;
}



/* 11. Footer
----------------------------------------------------------------------------- */
.page-content > footer{
	padding-block: var(--spacing-page);
	padding-inline: var(--spacing-page);
}



/* 12. Progress indicator
----------------------------------------------------------------------------- */
progress{
	-webkit-appearance: none;
	appearance: none;
	height: .5rem;
	width: 100%;
	border-radius: var(--border-radius-small);
	overflow: hidden;
}

progress[value]::-webkit-progress-bar{
	background-color: var(--grey-300);
}

progress[value]::-webkit-progress-value{
	background-color: var(--background-accent);
}



/* 13. Dartboard areas
----------------------------------------------------------------------------- */
span.board-area,
.board-areas span{
	position: relative; /* to absolutely position ::after */
	display: inline-block;
	min-width: 2.5rem;
	padding-block: .25rem;
	padding-block: calc(.25rem - 1px);
	border: 1px solid transparent;
	border-radius: var(--border-radius-small);
	text-align: center;
}

span.board-area.miss,
.board-areas span.miss{
	background-color: transparent;
	border-color: var(--border-default);
}

span.board-area:nth-of-type(3n):not(:last-of-type),
.board-areas span:nth-of-type(3n):not(:last-of-type){
	margin-inline-end: .5rem;
}

span.board-area:not(:nth-of-type(3n), :last-of-type)::after,
.board-areas span:not(:nth-of-type(3n), :last-of-type)::after{
	content: '';
	position: absolute;
	right: calc(-.25rem - 1px);
	top: 1rem;
	display: block;
	height: 1px;
	width: .25rem;
	background-color: var(--border-default);
}

/* To make switching color in JS simpler, a segment is light by default */

.single{
	background-color: var(--board-area-light);
	color: var(--text-color-primary);
}

.dark.single,
.board-segment.dark .single{
	background-color: var(--board-area-dark);
}

.double,
.treble{
	background-color: var(--board-area-green);
	color: var(--background-secondary);
}

.dark.double,
.dark.treble,
.board-segment.dark .double,
.board-segment.dark .treble{
	background-color: var(--board-area-red);
}

.board-segment.dark .single{
	color: var(--background-secondary);
}

.brighter-board-areas{
	--board-area-dark: var(--background-tertiary);
	--board-area-green: var(--green-200);
	--board-area-red: var(--red-300);
}

.brighter-board-areas .single,
.brighter-board-areas .double,
.brighter-board-areas .treble{
	color: inherit;
}



/* 14. Language list
----------------------------------------------------------------------------- */
.language-list{
	text-align: right;
}

.language-list li{
	display: inline;
	font-size: var(--te);
}

.language-list li:not(:first-of-type)::before{
	content: '•';
}


/* 15. Icons
----------------------------------------------------------------------------- */
.icon-sprite{
	display: none;
}

.icon[height="24"]{
	vertical-align: bottom;
}

.icon-sprite circle,
.icon-sprite ellipse,
.icon-sprite path,
.icon-sprite polygon,
.icon-sprite polyline,
.icon-sprite rect,
.icon-sprite line{
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1;
}

.icon-sprite .fill{
	fill: currentColor;
	stroke: transparent;
}

.icon-sprite .solid{
	fill: currentColor;
}

.icon-sprite .thick-stroke{
	stroke-width: 2;
}

.avatar{
	border-radius: 50%;
	float: left;
	margin-inline-end: .5rem;
}



/* 16. Templates
----------------------------------------------------------------------------- */
.login-template .page-content form,
.reset-password-template .page-content form,
.register-template .page-content form{
	margin-block: 1.5rem 2rem;
}

/* 16.1 Game screen ---------------------------------------------------------- */
.game-template.logged-in [data-el=stored-locally] td:first-of-type{
	background:
		linear-gradient(
			90deg,
			var(--yellow-200) 0%,
			var(--yellow-200) .5rem,
			var(--background-primary) .5rem,
			var(--background-primary) 100%);
}

.game-template tr figure{
	display: flex;
}

.game-template tr svg{
	align-self: center;
}

.game-atc.game-template .button-group.aim-with-bull [data-el=single],
.game-atc.game-template .button-group.aim-with-bull [data-el=double],
.game-atc.game-template .button-group.aim-with-bull [data-el=treble],
.game-atc.game-template .button-group.aim-with-25-or-bull [data-el=single],
.game-atc.game-template .button-group.aim-with-25-or-bull [data-el=double],
.game-atc.game-template .button-group.aim-with-25-or-bull [data-el=treble],
.game-atc.game-template .button-group:not(.aim-with-25-or-bull) [data-el=single-bull],
.game-atc.game-template .button-group:not(.aim-with-bull):not(.aim-with-25-or-bull) [data-el=double-bull]{
	display: none;
}

.game-template .target{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 2.75em;
	min-height: 2rem;
	padding: .75rem;
	text-align: center;
	border: .25rem solid var(--background-primary);
	border-radius: var(--border-radius-medium);
}



/* 17. Dialogs
----------------------------------------------------------------------------- */

/* 17.1 Dialog portal ------------------------------------------------------- */
.dialog-portal{
	z-index: 6;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	pointer-events: none; /* allow click events when for example filter menu is expanded */

	display: flex;
	flex-direction: column;
	align-items: center; /* centers dialogs horizontally */
	justify-content: end; /* places dialogs at the bottom */
}

.dialog-portal:has(.full-screen[role=dialog]:not([hidden])){
	padding: 0;
}

@media (min-width: 576px) {
	.dialog-portal{
		padding: var(--spacing-page);
		justify-content: center; /* centers items vertically */
	}
}

.dialog-portal *{
	pointer-events: all;
}

/* 17.2 Dim layer ----------------------------------------------------------- */
.dim-layer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.25);
	opacity: 0;
}

.dim-layer:not([hidden]){
	animation: fadeIn .5s forwards;
}

/* 17.3 Dialog element ------------------------------------------------------ */
[role=dialog]{
	opacity: 0;
	transform: translateY(2rem);
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 60rem;
	max-height: 100%;
	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
	overflow: hidden;
	background-color: var(--background-secondary);
/*	overscroll-behavior: contain;*/
}

@media (min-width: 576px) {
	[role=dialog]{
		width: 320px;
		transform: scale(.95);
		border-radius: var(--border-radius-large);
	}
}

[role=dialog]:not(hidden){
	animation: moveIn .3s forwards;
}

[role=dialog].medium{
	width: 50ch;
	max-width: 100%;
}

[role=dialog].full-screen{
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100vh;
	border-radius: 0;
}


/* 17.4 Dialog content ------------------------------------------------------ */
[role=dialog] .content{
	width: 100%;
	overflow-y: auto;
	scroll-behavior: smooth;

	background: 
		linear-gradient(var(--background-secondary) 33%, rgba(255,255,255, 0)),
		linear-gradient(rgba(255,255,255, 0), var(--background-secondary) 66%) 0 100%,
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0, .08), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0, .08), rgba(0,0,0,0)) 0 100%;
	
	background-repeat: no-repeat;
	background-attachment: local, local, scroll, scroll;
	background-size: 100% 24px, 100% 24px, 100% 4px, 100% 4px;
}

[role=dialog]:not(.full-screen) .content{
	padding-block-end: 2rem;
}


/* 17.5 Dialog buttons ------------------------------------------------------ */
@media (display-mode: standalone) {
	[role=dialog] footer{
		padding-block-end: env(safe-area-inset-bottom, .5rem);
	}
}

[role=dialog] footer button{
	width: 100%;
}



/* 18. Animations
---------------------------------------------------------------------- */
@keyframes fadeIn{
	to{
		opacity: 1;
	}
}

@keyframes moveIn{
	to{
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeOutRemove{
	99%{
		opacity: 0;
	}
	100%{
		display: none;
	}
}



/* 19. Tooltips
---------------------------------------------------------------------- */
[data-tooltip]{
  position: relative;
}

[data-tooltip]::before{
  content: attr(data-tooltip);
  position: absolute;
  top: 0;
  left: 0;
  min-width: 7rem;
  padding: .25em .5em;
  border-radius: var(--border-radius-small);
  white-space: nowrap;
  text-align: center;
  color: var(--background-primary);
  background-color: var(--background-accent);
  pointer-events: none;
}

[data-tooltip]::after{
  content: "";
  position: absolute;
  top: 1.875rem;
  left: 0;
  margin-inline-start: .625rem;
  border-block-start: .625rem solid var(--background-accent);
  border-inline-end: .5rem solid transparent;
  border-inline-start: .5rem solid transparent;
}

[data-tooltip]::before,
[data-tooltip]::after{
  opacity: 0;
  transform: translateY(-1.25rem);
  transition: opacity .1s, transform .1s;
  transition-delay: 0s;
}

[data-tooltip]:not([aria-expanded=true]):focus::before,
[data-tooltip]:not([aria-expanded=true]):focus::after{
  opacity: 1;
  transform: translateY(-1.5rem);
}

@media (hover: hover){
	[data-tooltip]:not([aria-expanded=true]):hover::before,
	[data-tooltip]:not([aria-expanded=true]):hover::after{
	  opacity: 1;
	  transform: translateY(-1.5rem);
	  transition-delay: .5s;
	}
}



/* 20. Scrollbars
---------------------------------------------------------------------- */
.styled-scrollbar::-webkit-scrollbar{
  width: .5rem;
  height: .5rem;
}

.styled-scrollbar{
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) var(--background-tertiary);
}

.styled-scrollbar::-webkit-scrollbar-track{
  background-color: var(--background-tertiary);
}

.styled-scrollbar::-webkit-scrollbar-thumb{
  background-color: var(--border-default);
  border-radius: 0;
  border: 0;
}

/* Prevent layout shift when scrollbar toggles */
body[style="overflow: hidden;"] .page-content{
	/* padding-inline-end: .5rem; */
}



/* 22. Keyboard shortcuts
---------------------------------------------------------------------- */
[data-key-display]{
	position: relative;
}

[data-key-display]::after{
	display: none;
	opacity: 0;
	position: absolute;
	transform: translate(.25rem, 0);
	content: attr(data-key-display);
	margin-inline-start: .25rem;
	padding-inline: .375rem;
	border-radius: var(--border-radius-small);
	background-color: var(--grey-900);
	color: var(--grey-0);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5rem;
	min-width: 1.5rem;
}

.always-show-keyboard-shortcuts [data-key-display]::after{
	display: inline-block;
	opacity: 1;
}

.show-keyboard-shortcuts [data-key-display]::after{
	display: inline-block;
	animation: fadeIn .12s .4s forwards;
}