/* Reusable chrome for this site (and later scheduler / calendar widgets).
 *
 * Markup:
 *   <label class="ui-check"><input type="checkbox"> Label</label>
 *   <label class="ui-radio"><input type="radio" name="g"> Label</label>
 *   <input class="ui-field" type="text">
 *   <div class="ui-expand" open><div class="ui-expand-inner">…</div></div>
 *
 * Native checkboxes/radios inherit the same look so new pickers don't need
 * a one-off restyle. Page CSS may override with more specific selectors.
 */

html {
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--ui-active-2), 0.5) transparent;
}
* {
	scrollbar-color: rgba(var(--ui-active-2), 0.5) transparent;
}
::-webkit-scrollbar {
	-webkit-appearance: none;
	display: block;
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	display: block;
	background: rgba(var(--ui-active-2), 0.55);
	border-radius: 99px;
	min-height: 24px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--ui-active-2), 0.7);
}

#ui-tip {
	position: fixed;
	z-index: 400;
	display: none;
	max-width: 16.5rem;
	padding: 0.48rem 0.65rem;
	border-radius: 10px;
	background: rgba(var(--ui-panel-2), 0.97);
	border: 1px solid rgba(var(--ui-border), 0.4);
	color: rgb(var(--ui-text));
	font-family: inherit;
	font-size: 0.78rem;
	line-height: 1.4;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	box-sizing: border-box;
}
#ui-tip.is-open { display: block; }
[data-tip] { cursor: help; }

.ui-scroll-overlay {
	position: fixed;
	width: 12px;
	pointer-events: none;
	z-index: 3;
	display: none;
}
.ui-scroll-overlay.is-on {
	display: block;
}
.ui-scroll-overlay .ui-scroll-thumb {
	position: absolute;
	left: 7px;
	width: 3px;
	border-radius: 99px;
	background: rgba(var(--ui-active-2), 0.5);
	min-height: 24px;
	pointer-events: auto;
	touch-action: none;
}
.ui-scroll-overlay .ui-scroll-thumb::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -6px;
	right: -3px;
}
.ui-scroll-overlay .ui-scroll-thumb:hover {
	background: rgba(var(--ui-active-2), 0.7);
}
.ui-scroll-native {
	scrollbar-width: none !important;
	-ms-overflow-style: none;
}
.ui-scroll-native::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
	background: transparent;
}

.ui-morphing {
	overflow: hidden !important;
	scrollbar-width: none;
}
.ui-morphing::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.ui-expand {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--ui-motion, 200ms) var(--ui-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.ui-expand[open],
.ui-expand.is-open {
	grid-template-rows: 1fr;
}
.ui-expand-inner {
	overflow: hidden;
	min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
	.ui-expand { transition: none; }
}

.ui-check,
.ui-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1.5px solid rgba(var(--ui-border), 0.65);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: border-color 0.2s ease, background 0.2s ease;
	vertical-align: middle;
	accent-color: rgb(var(--ui-active));
}
input[type="checkbox"]:checked {
	background: rgba(var(--ui-active), 0.45);
	border-color: rgba(var(--ui-active-2), 0.95);
}
input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid rgb(var(--ui-on-solid-active, var(--ui-highlight)));
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
	outline: 2px solid rgba(var(--ui-active-2), 0.7);
	outline-offset: 2px;
}

input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin: 0;
	border: 1.5px solid rgba(var(--ui-border), 0.65);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	vertical-align: middle;
	accent-color: rgb(var(--ui-active));
}
input[type="radio"]:checked {
	background: rgba(var(--ui-active), 0.55);
	border-color: rgba(var(--ui-active-2), 0.95);
}
input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(var(--ui-on-solid-active, var(--ui-highlight)));
}

.ui-field,
input.ui-field {
	border-radius: 6px;
	padding: 0.3rem 0.5rem;
	font-family: inherit;
	font-size: 0.82rem;
	background: rgba(var(--ui-panel-2), 0.55);
	border: 1px solid rgba(var(--ui-border), 0.4);
	color: rgb(var(--ui-text));
	outline: none;
	box-sizing: border-box;
}
.ui-field:hover,
.ui-field:focus {
	color: rgb(var(--ui-on-panel));
	border-color: rgba(var(--ui-active-2), 0.75);
}

@media (hover: hover) and (pointer: fine) {
	input[type="checkbox"]:hover {
		border-color: rgba(var(--ui-active-2), 0.9);
		background: rgba(var(--ui-active), 0.22);
	}
	input[type="radio"]:hover {
		border-color: rgba(var(--ui-active-2), 0.9);
		background: rgba(var(--ui-active), 0.22);
	}
}