/* minimal modern, accessible base */
:root {
	--color__accent: #B76500;
	--color__accent-rgb: 183, 101, 0;

	/* Dark mode (default) */
	--color__bg: #1B0F00;
	--color__fg: rgba( 255, 255, 255, 0.95 );
	--color__border: rgba( 255, 255, 255, 0.2 );
	--color__muted: rgba( 255, 255, 255, 0.6 );
	--color__input-bg: rgba( 255, 255, 255, 0.05 );
	--color__secondary-hover: rgba( 255, 255, 255, 0.05 );

	--color__error: #ff6b6b;

	--gradient__bg: linear-gradient( 135deg, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.75 ) 100% );

	--font__sans: 'Reddit Sans', system-ui, sans-serif;
	--font__mono: 'Reddit Mono', monospace;

	--font-size-s: 12px;
	--font-size-m: 16px;
	--font-size-l: clamp( 16px, calc( 14px + 0.4vw ), 20px );

	--radius-m: 8px;

	--spacing-s: clamp( 6px, calc( 4px + 0.4vw ), 10px );
	--spacing-m: clamp( 12px, calc( 10px + 0.4vw ), 16px );
	--spacing-l: clamp( 16px, calc( 12px + 0.8vw ), 24px );
	--spacing-xl: clamp( 20px, calc( 10px + 2vw ), 40px );
	color-scheme: dark;
}

/* Light mode */
:root[data-theme="light"] {
	--color__bg: #FFF5E6;
	--color__fg: rgba( 0, 0, 0, 0.95 );
	--color__border: rgba( 0, 0, 0, 0.15 );
	--color__muted: rgba( 0, 0, 0, 0.6 );
	--color__input-bg: rgba( 255, 255, 255, 1 );
	--color__secondary-hover: rgba( var( --color__accent-rgb ), 0.1 );
	--gradient__bg: linear-gradient( 135deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.75 ) 100% );

	--color__error: #B70003;

	color-scheme: light;
}

* {
	box-sizing: border-box;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background: var( --gradient__bg );
	background-color: var( --color__bg );
	color: var( --color__fg );
	display: flex;
	flex-direction: column;
	font-family: var( --font__mono );
	font-size: var( --font-size-m );
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
	transition: background-color 0.3s ease, color 0.3s ease;
}

header {
	align-items: center;
	border-bottom: 1px solid var( --color__border);
	display: flex;
	justify-content: space-between;
	padding: var( --spacing-m ) var( --spacing-l );
}

header > * {
	flex: 0 0 auto;
}

header a[href="/"] {
}

header a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

header a:hover {
	opacity: 0.8;
}

header h1 {
	color: var( --color__fg );
	font-size: var( --font-size-m );
	font-weight: 700;
	margin: 0;
}

main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	margin: 0 auto;
	max-width: 720px;
	padding: var( --spacing-xl );
	width: 100%;
}

.form-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --spacing-s );
}

label {
	display: block;
}

input, select, button {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	border-radius: var( --radius-m );
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

input,
select {
	width: 100%;
	padding: var( --spacing-m ) var( --spacing-l ) ;
	border: 1px solid var(--color__border);
	box-shadow: 0 0 0 0 rgba( var( --color__accent-rgb ), 0.15 );
	background: var( --color__input-bg );
}

.form-field label {
	font-size: var( --font-size-s );
	font-weight: 500;
	color: var( --color__muted );
}

.form-field.floating-label input:focus + label {
	color: var( --color__accent );
}

/* Value IO */
#value-io {
	align-items: end;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr auto 1fr;
}

#value-io[hidden] {
	display: none;
}


input:focus,
select:focus {
	border-color: var( --color__accent );
	box-shadow: 0 0 0 5px rgba( var( --color__accent-rgb ), 0.15 );
	outline: none;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	cursor: pointer;
	padding-right: 32px;
}

/* main fields */
#omni-search,
#input-left,
#input-right {
	font-size: var( --font-size-l );
}

button {
	background: var(--color__accent);
	border: none;
	color: var(--color__fg);
	cursor: pointer;
	font-weight: 600;
	padding: var( --spacing-m ) var( --spacing-l );
}

.icon-btn {
	background: transparent;
	border: 1px solid var(--color__border);
	padding: var( --spacing-s );
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, border-color 0.2s;
}

.icon-btn:hover {
	background: var( --color__secondary-hover );
	border-color: var( --color__accent );
}

button:hover {
	filter: brightness(1.1);
}

button.secondary {
	background: transparent;
	border: 1px solid var( --color__border );
}

button.secondary:hover {
	background: var( --color__secondary-hover );
	border-color: var( --color__fg );
}

.row {
	display: contents;
}

.error {
	color: var(--color__error );
}

.muted {
	color: var( --color__muted );
	font-size: 14px;
}

@media (max-width: 640px) {
	form {
		grid-template-columns: 1fr;
	}
}

/* Settings Dialog */
#settings-dialog {
	background: var( --gradient__bg );
	background-color: var(--color__bg);
	border: 1px solid var(--color__border);
	border-radius: var(--radius-m);
	color: var(--color__fg);
	max-width: 500px;
	padding: 0;
	width: 90%;
}

#settings-dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.dialog-header {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: space-between;
	padding: var(--spacing-l);
}

.dialog-header h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.app-controls {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);
	padding: var(--spacing-l);
}

.control-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
}

.control-group label {
	font-size: var(--font-size-s);
	font-weight: 500;
	color: var(--color__muted);
}

.control-group select {
	width: 100%;
}

/* Omni Search */
#omni-search-container {
	position: relative;
	margin-bottom: var( --spacing-l );
}

#label-search {
}

#omni-search-container .form-field {
	margin-bottom: 0;
}

#search-results {
	background: var( --gradient__bg );
	background-color: var( --color__bg );
	border: 1px solid var( --color__border );
	border-radius: var( --radius-m );
	left: 0;
	list-style: none;
	margin-top: 4px;
	max-height: 400px;
	overflow-y: auto;
	padding: 0;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 10;
}

#search-results li {
	align-items: center;
	border-bottom: 1px solid var( --color__border );
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	padding: var( --spacing-m ) var( --spacing-l );
	transition: background 0.15s ease;
}

#search-results li:hover,
#search-results li.highlighted {
	background: rgba( var( --color__accent-rgb ), 0.15 );
}

#search-results li:last-child {
	border-bottom: none;
}

#search-results .result-category {
	align-items: center;
	background: rgba( var( --color__accent-rgb ), 0.15 );
	border-radius: 4px;
	color: var( --muted );
	display: flex;
	font-size: var( --font-size-s );
	gap: 6px;
	padding: 4px 6px;
}

#search-results .result-category svg {
	width: 14px;
	height: 14px;
}


#btn-swap {
	appearance: none;
	width: 44px;
	font-size: var( --font-size-l );
	padding: var( --spacing-m ) 0;
	border: none;
}

#messages {
	margin-top: 12px;
}