/* Giddy's ink: a saddle-leather rust on Livna's manila paper. Scoped to .giddy. */
.giddy {
	--g-ink: oklch(46% 0.14 32deg);
	--g-ink-hover: oklch(46% 0.14 32deg / 0.08);
	--g-ink-press: oklch(46% 0.14 32deg / 0.16);
	--g-text: oklch(24% 0.02 70deg);
	--g-muted: oklch(45% 0.02 70deg);
	--g-line: oklch(24% 0.02 70deg / 0.14);
	--g-ok: oklch(45% 0.12 146deg);
	--g-warn: oklch(50% 0.13 70deg);
	--g-bad: oklch(48% 0.17 25deg);
	--g-teeth: oklch(98% 0.01 90deg);
	--g-radius: 10px;
	/* Text size follows Account > Display > Giddy text size (data-giddy-text on <html>). */
	--g-rem: 1rem;
	color: var(--g-text);
	font-family: var(--font-sans);
	font-size: var(--g-rem);
}

:root[data-giddy-text='small'] .giddy {
	--g-rem: 0.875rem;
}

:root[data-giddy-text='large'] .giddy {
	--g-rem: 1.125rem;
}

[data-mode='dark'] .giddy {
	--g-ink: oklch(75% 0.13 45deg);
	--g-ink-hover: oklch(75% 0.13 45deg / 0.1);
	--g-ink-press: oklch(75% 0.13 45deg / 0.18);
	--g-text: oklch(93% 0.01 80deg);
	--g-muted: oklch(74% 0.02 80deg);
	--g-line: oklch(93% 0.01 80deg / 0.16);
	--g-ok: oklch(76% 0.13 146deg);
	--g-warn: oklch(80% 0.12 80deg);
	--g-bad: oklch(74% 0.14 25deg);
	--g-teeth: oklch(97% 0.01 90deg);
}

.giddy ::-moz-selection {
	background: var(--g-ink-press);
}

.giddy ::selection {
	background: var(--g-ink-press);
}

.giddy :focus-visible {
	outline: 2px solid var(--g-ink);
	outline-offset: 2px;
}

.giddy input,
.giddy textarea,
.giddy select {
	caret-color: var(--g-ink);
}

.giddy .g-field {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--g-line);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.giddy .g-field:focus {
	border-color: var(--g-ink);
	outline: none;
}

.giddy .g-field[aria-invalid='true'] {
	border-color: var(--g-bad);
}

.giddy .g-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--g-line);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	font-size: calc(0.875 * var(--g-rem));
	cursor: pointer;
	white-space: nowrap;
}

.giddy .g-btn:hover:not(:disabled) {
	background: var(--g-ink-hover);
}

.giddy .g-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.giddy .g-btn.ink {
	border-color: var(--g-ink);
	color: var(--g-ink);
}

.giddy .g-link {
	color: var(--g-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.giddy .num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.giddy table td {
	vertical-align: top;
}

.giddy table th {
	vertical-align: bottom;
}

.giddy .g-muted {
	color: var(--g-muted);
}

.giddy .g-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--g-line) transparent;
}

/* Thin chevron instead of the native arrow (Orchon rule 7). */
.giddy select.g-field:not([multiple]) {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 36px;
	min-height: 36px;
	background: no-repeat right 12px center / 10px 6px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235b5248' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

[data-mode='dark'] .giddy select.g-field:not([multiple]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23c8beb2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

.giddy .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.giddy.wrap {
	padding-inline: clamp(16px, 3vw, 24px);
}

.giddy .g-btn svg {
	flex: none;
	width: 16px;
	height: 16px;
}