:root{
	--TA-bcolor: #EFEFEF;
	--TA-color: #1E3232;
	--TA-color-yl: #FFEFB3;
	--TA-color-yd: #FFC766;
	--TA-color-ydd: #FDB84D;
	--TA-color-bl: #D2EFEF;
	--TA-color-bd: #8ECDF5;
	--TA-color-bdd: #58C7F3;
	--TA-color-gl: #B2E0AA;
	--TA-color-gd: #7BC96F;
	--TA-color-rl: #FFB99D;
	--TA-color-rd: #FF733B;
}

html {
	margin: 0;
	padding: 0;
	background-color: var(--TA-bcolor);
	scrollbar-gutter: stable;
}

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

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: var(--TA-bcolor);
	color: var(--TA-color);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
	flex: 1 0 auto;
}

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
}

a {
	text-decoration: none;
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background-color: #1e3232;
	color: #ffffff;
	font-weight: 700;
	transform: translateY(-180%);
	transition: transform 0.2s ease;
}

.skip-link:focus {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.skip-link {
		transition: none;
	}
}
/* Global feedback dialog */
.feedback-dialog {
    width: min(32rem, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 1.2rem;
    background: #ffffff;
    color: var(--TA-color);
    box-shadow: 0 24px 70px rgba(12, 39, 39, 0.28);
}

.feedback-dialog::backdrop {
    background: rgba(10, 32, 32, 0.62);
    backdrop-filter: blur(3px);
}

.feedback-dialog__body {
    display: grid;
    justify-items: center;
    padding: clamp(1.5rem, 5vw, 2.25rem);
    text-align: center;
    gap: 0.9rem;
}

.feedback-dialog__icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 50%;
    background: #e8f2f1;
    color: #315c59;
    font-size: 1.6rem;
    font-weight: 900;
}

.feedback-dialog__icon::before {
    content: "i";
}

.feedback-dialog[data-level="success"] .feedback-dialog__icon {
    background: #e6f5e3;
    color: #27701c;
}

.feedback-dialog[data-level="success"] .feedback-dialog__icon::before {
    content: "✓";
}

.feedback-dialog[data-level="error"] .feedback-dialog__icon {
    background: #fff0f0;
    color: #9b3030;
}

.feedback-dialog[data-level="error"] .feedback-dialog__icon::before {
    content: "!";
}

.feedback-dialog[data-level="warning"] .feedback-dialog__icon {
    background: #fff4d7;
    color: #815900;
}

.feedback-dialog[data-level="warning"] .feedback-dialog__icon::before {
    content: "!";
}

.feedback-dialog h2,
.feedback-dialog__message {
    margin: 0;
}

.feedback-dialog__messages {
    display: grid;
    color: #4a6260;
    line-height: 1.55;
    gap: 0.5rem;
}

.feedback-dialog__actions {
    width: 100%;
    margin-top: 0.35rem;
}

.feedback-dialog__confirm {
    min-width: 8rem;
    padding: 0.75rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: var(--TA-color-yd);
    color: var(--TA-color);
    font-weight: 850;
    cursor: pointer;
}

.feedback-dialog__confirm:hover {
    background: var(--TA-color-ydd);
}

.feedback-dialog__confirm:focus-visible {
    outline: 3px solid #0b6f91;
    outline-offset: 3px;
}

html:has(.feedback-dialog[open]) {
    overflow: hidden;
}