@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ---------------ROOT VARIABLES--------------- */

:root {
	--font-ui: "Inter", sans-serif;
	--font-note: "Gaegu", sans-serif;

	--fs-sm:  0.75rem;
	--fs-regular: 0.875rem;
	--fs-large: 1rem;
	--fs-xl: 1.5rem;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;

	--radius-sm: 6px;
	--radius-md: 10px;

	--color-text: #272727;
	--color-text-secondary: #474747;
	--color-text-tertiary: #9A9FA6;
	--color-bg: #ffffff;
	--color-hover: #f2f2f2;
	--color-border: #dadce0;
	--color-note: #ffe992;
	--color-note-hover: #fff5cd;
	--color-note-accent: #e6c200;
	--color-clear: #c0392b;

	--border-ui: 1px solid var(--color-border);

	--shadow-sm: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.08);
	--shadow-md: 0 2px 8px rgba(60,64,67,.12), 0 1px 3px rgba(60,64,67,.08);

	--ease: cubic-bezier(.2,0,0,1);
	--duration: 120ms;
	--duration-md: 180ms;

	--popup-inline-size: 23rem;
	--toggle-inline-size: 4rem;
	--annotation-indent: calc(var(--space-sm) + 1rem + var(--space-xs));
}

/* ---------------BODY--------------- */

html, body {
	margin: 0;
	padding: 0;
	inline-size: var(--popup-inline-size);
	min-block-size: 0;
	background: var(--color-bg);
	color-scheme: light;
	cursor: default;
	scrollbar-width: none;
}

body {
	font-family: var(--font-ui);
	font-size: var(--fs-regular);
	color: var(--color-text);
}

/* ---------------HEADER (LOGO, ANNOTATE BUTTON)--------------- */

header {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding-inline: var(--space-sm);
	padding-block: var(--space-xs);
	border-block-end: var(--border-ui);

	img:not(button img) {
		flex-shrink: 0;
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	h1 {
		flex: 1;
		margin: 0;
		font-size: var(--fs-xl);
		font-weight: var(--fw-semibold);
		font-family: var(--font-note);
	}

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-xs);
		cursor: pointer;
		border-radius: 1000px;
		background-color: transparent;
		flex-shrink: 0;
		transition:
			background var(--duration) var(--ease),
			color var(--duration) var(--ease);

		svg {
			inline-size: 1.125rem;
			block-size: 1.125rem;
			color: var(--color-text-secondary);
		}

		&:hover {
			background: var(--color-hover);
			border-radius: 1000px;
			color: var(--color-text);
		}

		&:focus-visible {
			outline: 2px solid var(--color-note-accent);
			outline-offset: 2px;
		}
	}
}

/* ---------------ANNOTATED PAGES SECTION (H2, CLEAR ALL BUTTON, UL)--------------- */

.popup-section {
	display: flex;
	flex-direction: column;

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-block: var(--space-md);
		padding-inline: var(--space-lg);
		border: none;

		h2 {
			margin: 0;
			font-weight: var(--fw-bold);
		}

		button {
			display: inline-flex;
			align-items: center;
			padding: 0;
			border: none;
			background: transparent;
			color: var(--color-text-tertiary);
			cursor: pointer;
			font: var(--fw-medium) var(--fs-regular) var(--font-ui);
			transition: color var(--duration) var(--ease);

			&:hover {
				color: var(--color-clear);
			}

			&:focus-visible {
				outline: 2px solid var(--color-note-accent);
				outline-offset: 2px;
			}
		}
	}

	ul {
		margin: 0;
		padding-block-start: 0;
		padding-inline: var(--space-sm);
		list-style: none;
	}
}

/* ---------------NO ANNOTATED PAGES--------------- */

.popup-empty-state {
	padding-block: var(--space-lg);
	padding-inline: var(--space-sm);	
	font-size: var(--fs-regular);
	color: var(--color-text-tertiary);
	text-align: start;
}

/* ---------------ANNOTATED PAGES LIST--------------- */

.popup-page-row {
	display: flex;
	align-items: stretch;

	.popup-page-button,
	.popup-page-toggle {
		border: none;
		background: transparent;
		cursor: pointer;
		font-family: var(--font-ui);
		font-size: var(--fs-regular);
		font-weight: var(--fw-regular);
		border-radius: var(--radius-sm);
		transition: background var(--duration) var(--ease);

		&:hover {
			background: var(--color-hover);
		}

		&:focus-visible {
			outline: 2px solid var(--color-note-accent);
			outline-offset: -2px;
		}
	}

	.popup-page-button {
		flex: 1;
		min-inline-size: 0;
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding-block: var(--space-xs);
		padding-inline: var(--space-sm);
		color: var(--color-text);
		text-align: start;

		img {
			flex-shrink: 0;
			inline-size: 1rem;
			block-size: 1rem;
		}

		span {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.popup-page-toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--space-2xs);
		flex-shrink: 0;
		inline-size: var(--toggle-inline-size);
		padding-inline: var(--space-sm);
		color: var(--color-text-tertiary);
		transition:
			background var(--duration) var(--ease),
			color var(--duration) var(--ease);

		svg {
			flex-shrink: 0;
			inline-size: 1rem;
			block-size: 1rem;
			color: var(--color-text-tertiary);
			transition: rotate var(--duration-md) var(--ease);
		}

		&.is-open svg {
			rotate: 180deg;
		}
	}
}

/* ---------------ANNOTATION DROPDOWN--------------- */

.popup-annotation-list {
	margin: 0;
	padding: 0;
	list-style: none;

	&[hidden] {
		display: none;
	}

	.popup-annotation-item {
		display: block;
		box-sizing: border-box;
		inline-size: calc(100% - (var(--space-sm) * 2));
		padding: var(--space-xs);
		margin-inline: var(--space-md);
		border: none;
		border-radius: var(--radius-sm);
		background: transparent;
		font-family: var(--font-ui);
		font-size: var(--fs-sm);
		font-weight: var(--fw-regular);
		color: var(--color-text);
		cursor: pointer;
		text-align: start;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		transition:
			background var(--duration) var(--ease),
			color var(--duration) var(--ease);

		&:hover {
			background: var(--color-hover);
		}

		&:focus-visible {
			outline: 2px solid var(--color-note-accent);
			outline-offset: -2px;
		}
	}
}

#annotation-pages {
	padding-block-end: var(--space-sm);
}

/* ---------------ACCESSIBILITY--------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none;
		animation: none;
	}
}

@media (prefers-contrast: more) {
	:root {
		--color-text-secondary: #202124;
		--color-text-tertiary: #202124;
		--color-border: #767676;
		--color-hover: #e8eaed;
	}

	header button,
	.popup-page-button,
	.popup-page-toggle,
	.popup-annotation-item {
		outline: 1px solid var(--color-border);
	}
}