:root {
	color-scheme: light dark;

	/*
	--color-gray: var(--color-gray-0);
	--color-gray-0: hsl(from var(--color-gray) h s calc(l));
	--color-gray-1: hsl(from var(--color-gray) h s calc(l + 10));
	--color-gray-2: hsl(from var(--color-gray) h s calc(l + 20));
	--color-gray-3: hsl(from var(--color-gray) h s calc(l + 30));
	--color-gray-4: hsl(from var(--color-gray) h s calc(l + 40));
	--color-gray-5: hsl(from var(--color-gray) h s calc(l + 50));
	*/

	--font-weight-adjust: 0;

	--color-gray-9: #fff;
	--color-gray-8: #eaeef2;
	--color-gray-7: #d0d7de;
	--color-gray-6: #afb8c1;
	--color-gray-5: #8d96a0;
	--color-gray-4: #6e7781;
	--color-gray-3: #57606a;
	--color-gray-2: #424a53;
	--color-gray-1: #32383f;
	--color-gray-0: #24292f;

	@media (prefers-color-scheme: dark) {
		--font-weight-adjust: -50;

		--color-gray-0: #fff;
		--color-gray-1: #eaeef2;
		--color-gray-2: #d0d7de;
		--color-gray-3: #afb8c1;
		--color-gray-4: #8d96a0;
		--color-gray-5: #6e7781;
		--color-gray-6: #57606a;
		--color-gray-7: #424a53;
		--color-gray-8: #32383f;
		--color-gray-9: #24292f;
	}
}

:root[data-theme="light"] {
	--font-weight-adjust: 0;

	--color-gray-9: #fff;
	--color-gray-8: #eaeef2;
	--color-gray-7: #d0d7de;
	--color-gray-6: #afb8c1;
	--color-gray-5: #8d96a0;
	--color-gray-4: #6e7781;
	--color-gray-3: #57606a;
	--color-gray-2: #424a53;
	--color-gray-1: #32383f;
	--color-gray-0: #24292f;
}

:root[data-theme="dark"] {
	--font-weight-adjust: -50;

	--color-gray-0: #fff;
	--color-gray-1: #eaeef2;
	--color-gray-2: #d0d7de;
	--color-gray-3: #afb8c1;
	--color-gray-4: #8d96a0;
	--color-gray-5: #6e7781;
	--color-gray-6: #57606a;
	--color-gray-7: #424a53;
	--color-gray-8: #32383f;
	--color-gray-9: #24292f;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-weight: calc(400 + var(--font-weight-adjust));
}

html {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
	background-color: var(--color-gray-9);
	color: var(--color-gray-1);
	line-height: 1.4;
	font-weight: calc(400 + var(--font-weight-adjust));
}

body {
	
}

.container {
	outline: 0px solid red;
	max-width: 800px;
	margin: 2rem auto 8rem;
	padding: 1rem;
}

.header {
	text-align: center;
	margin-block-end: 30px;
	display: none;
}

h1 {
	font-size: 1.4rem;
	line-height: 1.1;
	font-weight: calc(700 + var(--font-weight-adjust));
	/* margin-block-end: 0.25lh; */
}

h2 {
	font-size: 1.05rem;
	line-height: 1.15;
	font-weight: calc(700 + var(--font-weight-adjust));
	margin-block-end: 0.5em;
}

h3 {
	font-size: 1rem;
	line-height: 1.2;
	font-weight: calc(700 + var(--font-weight-adjust));
	margin-block-end: 0.5em;
}

:is(h1, h2, h3) a {
	color: currentColor;
	font-weight: inherit;
	text-decoration: none;
}

.card {
	margin-block-end: 20px;
	padding: 0rem;
	min-height: 87vh;
}

.vote-form {
	margin-block-end: 4rem;
	border-block-end: 0px solid currentColor;
}

.form-group {
	margin-block-end: 1rem;
}

.checkbox-group label {
	font-weight: calc(600 + var(--font-weight-adjust));
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: calc(600 + var(--font-weight-adjust));
}

.checkbox-label input[type="checkbox"] {
	width: auto;
}

.vote-option {
	padding: 0.5rem;
	border: 1px solid var(--color-gray-5);
	border-block-end: 0;
}

.vote-option:last-of-type {
	border-block-end: 1px solid var(--color-gray-5);
}

.vote-option:hover {
	background: var(--color-gray-8);
}

.vote-option label {
	display: flex;
	gap: 1ch;
	align-items: center;
	cursor: pointer;
	margin-block-end: 0;
}

.vote-option input[type="checkbox"] {
	
}

label {
	display: block;
	margin-block-end: 0.5rem;
	font-weight: calc(600 + var(--font-weight-adjust));
}

input[type="text"],
input[type="password"],
textarea {
	width: 100%;
	padding: 0.5em;
	background-color: var(--color-gray-9);
	color: var(--color-gray-0);
	border: 1px solid var(--color-gray-5);
	border-radius: 0;
	font-size: 1rem;
	font: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-gray-0);
}

textarea {
	min-height: calc((4lh + (2 * 0.5em)) + 2px); /* 4 lines of text, plus 2 times padding + border */
	resize: vertical;
}

.options-container {
	margin-block-end: 1rem;
	display: flex;
	flex-flow: column;
	align-items: flex-end;
}

.option-input {
	border: 1px solid var(--color-gray-5);
	width: 100%;
}

.option-input + .option-input {
	border-block-start: 0px;
}

.option-input input {
	border: 0;
}

.options-container button {
	margin-block-start: 1rem;
}

.btn {
	background: var(--color-gray-0);
	color: var(--color-gray-9);
	padding: 0.5em 1em;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: calc(500 + var(--font-weight-adjust));
	text-decoration: none;
	transition: background 0.3s;

	&.cancel {
		background: var(--color-gray-7);
		color: var(--color-gray-4);
	}
}

.btn:hover {
	background: var(--color-gray-2);

	&.cancel {
		background: var(--color-gray-6);
	}
}

.message {
	padding: 0.5rem;
	margin-block-end: 1rem;
}

.message.success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.message.error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.poll-info {
	display: grid;
	grid-template-columns: 1fr;
	margin-block-end: 1rem;
	row-gap: 1rem;
}

.poll-info p {
	margin-block-end: 0.5lh;
}

.poll-info .meta {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	gap: 1ch;
}

.poll-info .meta > :is(time, a),
.btn-secondary {
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--color-gray-4);
	background: var(--color-gray-7);
	border-radius: 1rem;
	padding: 0.2em 0.7em;
}

.poll-info .meta-author {
	display: block;
	font-weight: calc(400 + var(--font-weight-adjust));
	font-size: 0.85rem;
	margin-block-start: 0.25em;
	margin-block-start: 0.25lh;
}

.poll-info .meta .meta-exclusive {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-gray-2);
	border: 1px solid var(--color-gray-5);
	border-radius: 1rem;
	padding: 0.1em 0.75em;
	background: #f5f5f5;
}

.exclusive-note {
	display: block;
	margin-block-start: 0.5rem;
	color: var(--color-gray-3);
	font-size: 0.85rem;
}

.poll-info .meta a:hover,
.btn-secondary:hover {
	background: var(--color-gray-6);
}

.poll-info .desc {
	grid-column: 1 / 2;
}

#editDialog {
	margin-inline: auto;
	margin-block-start: 2rem;
	padding: 1rem;
	border: 1px solid var(--color-gray-0);
}

#editDialog input[type="password"] {
	margin-block-end: 1rem;
}


.results-summary {
	margin-block-start: 2rem;
}

.voting-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin-block-end: 2rem;
}

.voting-table th, .voting-table td {
	border-block-end: 1px solid var(--color-gray-5);
	padding: 0.5em 1em 0.5em 0.5em;
}

.voting-table th:first-child, .voting-table td:first-child {
	padding-inline-start: 0;
}

.voting-table th {
	text-align: left;
	vertical-align: top;
}

.voting-table tr:hover {
	background: var(--color-gray-8);
}

.voting-table td.vote-yes {
	background: light-dark(#6aca92, #245839);
}
[data-theme="light"] .voting-table td.vote-yes { background: #6aca92; } /* manual override */
[data-theme="dark"] .voting-table td.vote-yes { background: #245839; color: var(--color-gray-0); }

.voting-table td.vote-no {
	background: light-dark(#fdcfd3, #67393d);
}
[data-theme="light"] .voting-table td.vote-no { background: #fdcfd3; } /* manual override */
[data-theme="dark"] .voting-table td.vote-no { background: #67393d; color: var(--color-gray-0); }

.voting-table tr.voting-table-footer th { border-block-end: 0 }

.voting-table tr.voting-table-footer span:nth-child(1) { display: none; }
.voting-table tr.voting-table-footer span:nth-child(2) { display: block; }

.voting-table tr.voting-table-footer:hover span:nth-child(1) { display: block; }
.voting-table tr.voting-table-footer:hover span:nth-child(2) { display: none; }

.poll-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	padding: 20px;
	margin-block-end: 2rem;
}

.already-voted {
	margin-block-end: 1rem;
	background: var(--color-gray-8);
	padding: 0.5rem;
}

@media (min-width: 40rem) {
	html {
		
	}

	.card,
	footer {
		padding: 1rem;
	}

	.poll-info {
		grid-template-columns: 1fr 1fr;
	}

	.poll-info .desc {
		grid-column: 1 / 3;
	}

	.poll-info .meta {
		justify-content: flex-end;
	}
}