/* views.css 
	T4.5 views general and common styles
	May 2026 by CuR
*/

:root {
	--view-inline-padding: 1.25rem;
}	

/* || Scroll Anchor */

.scroll-target {
	--scroll-offset: 1rem;

	display: none;
	height: 0;
	scroll-margin-top: var(--scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (max-width: 768px) {
	.scroll-target {
		display: block;
	}

	:root {
		--view-inline-padding: 1rem;
	}
}

/* info view */

.info-view {
	display: flex;
	flex-direction: column;
	gap: 2rem;

	margin-block: 2rem;
	padding-block: var(--view-inline-padding);
	padding-inline: var(--view-inline-padding);
	
	background: var(--clr-surface-content);
	border-radius: var(--border-radius);
}

.info-view__header {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.view__actions {
	justify-self: end;
	align-self: end;

	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.view__actions > .action-link {
	line-height: inherit;
}

.info-view__content {
	display: flex;
	gap: 2rem;

	color: var(--clr-text);
	font-weight: var(--fw-base);
}

.info-view__main,
.info-view__aside {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.info-view__main {
	flex: 1 1 auto;
}

.info-view__aside {
	flex: 0 0 18.75rem;
}

@container main (width < 768px) {
	.info-view__header {
		grid-template-columns: 1fr;
	}

	.info-view__content {
		flex-direction: column;
		gap: 2rem;
	}

	.info-view__content[data-mobile-mode="reverse"] {
		flex-direction: column-reverse;
	}

	.info-view__aside {
		flex: initial;
	}
}



/* View Heading */
.view__heading {
	display: flex;
	flex-direction: column;
	gap: .125rem;
}

.view__legend {
	font-size: clamp(.7rem, 3vw, .875rem);
	font-weight: var(--fw-base);
	letter-spacing: var(--font-spacing-dense);
	line-height: normal;
	color: var(--clr-text-soft);
}

.view__title {
	font-size: clamp(1.5rem, 6vw, 1.875rem);
	font-weight: var(--fw-base);
	letter-spacing: var(--font-spacing-dense);
	text-wrap: balance;
	line-height: 1.2;
}

.view__subtitle {
	font-size: var(--fs-medium);
	color: var(--clr-text-subtle);
}


/* || Panel */

.content-section {
	min-width: 0;	
}

.panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;

	color: var(--clr-text);
	font-weight: var(--fw-base);
	background: var(--clr-surface-content);
	border-radius: var(--border-radius);
	
	padding-block: var(--view-inline-padding) 2rem;
	margin-block: 2rem;
}

.panel__header {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	padding-inline: var(--view-inline-padding);
}

.panel__header > :first-child {
	flex-basis: 500px;
	flex-grow: 1;
}

.panel__aside {
	width: fit-content;
	max-width: 30rem;
	min-width: 0;
}

.panel__body {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding-inline: var(--view-inline-padding);
}

@container main (width < 768px) {
	.panel__body {
		gap: 1.5rem;
	}
}



/* || Panel actions */

.panel__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-inline: var(--view-inline-padding);
}

.action-link {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--clr-text-muted);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;

	transition:
		color .15s ease,
		opacity .15s ease;
}

.action-link:hover {
	color: var(--clr-text-accent);
}

.action-link:active {
	opacity: .75;
}

.action-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.action-link__label {
	white-space: nowrap;
}

:where(.action-link)[data-action-role="nav"] {
	margin-right: auto;
	color: var(--clr-link-neutral);
}



/* || Tournament selector */

.selector-wrap {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.selector-wrap > form {
	margin-block: 0;
}

.tournament-selector {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-width: 0;
}

.tournament-selector > :first-child {
	flex-basis: 600px;
	flex-grow: 999;
}

.tournament-selector > :last-child {
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 0;
}


/* || Category selector container */

.category-selector {
	display: grid;
	grid-template-columns:
		repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: 1rem;
}


/* || Category selector card */

.category__card {
	background: var(--clr-surface-elevated);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
	min-width: 0;
}

.category__title {
	color: var(--clr-text);
	font-size: var(--fs-base);
	font-weight: var(--fw-bolder);
	letter-spacing: var(--font-spacing-dense);
	margin-bottom: .75rem;
	padding-inline: 1rem;
	padding-block: 1rem 0;
}


/* || Category selector link */

.selector__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem .75rem;
	border-radius: var(--border-radius);
	color: hsl(var(--clr-text) / .75);
	font-size: var(--fs-medium);
	text-decoration: none;
	font-weight: var(--fw-bold);
	transition:
		background-color .15s ease,
		color .15s ease,
		transform .15s ease;
}

.selector__link::after {
	content: "→";
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity .15s ease,
		transform .15s ease;
	flex-shrink: 0;	
}

.selector__link:hover {
	background: var(--clr-surface-subtle);
	color: var(--clr-brand-strong);
}

.selector__link:hover::after {
	opacity: 1;
	transform: translateX(0);
}

.selector__label {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* || Category list (light style) */

.category__card > .selector__link {
	padding-block: .75rem;
}


/* || Category + Groups Card list*/

.group__list {
	display: flex;
	flex-direction: column;
	padding-inline: 1rem;
	padding-block: 0 1rem;
}

.group__item--all .selector__link {
	font-weight: var(--fw-bolder);
}


/* || Context summary */


.context-summary {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	color: hsl(var(--clr-text) / .75);
}

.context-summary > * {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.context-summary__title {
	font-size: var(--fs-medium);
	font-weight: var(--fw-bolder);
	color: var(--clr-text);
}

.context-summary__meta {
	font-size: var(--fs-small);
	color: var(--clr-text-muted);
}



/* || Nav shortcuts */

.nav-shortcuts-wrap {
	position: relative;
}

.nav-shortcuts-wrap[data-js-ready="false"] .nav-shortcuts__link {
	pointer-events: none;
	opacity: 0.6;
}

.nav-shortcuts {
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	overflow: hidden;
	overflow-x: auto;
	padding-block: 1rem;
	border-top: 1px solid var(--border-color);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.nav-shortcuts__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.75rem;
	padding-inline: .875rem;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	color: var(--clr-text-muted);
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color .15s ease,
		border-color .15s ease,
		color .15s ease;
}

.nav-shortcuts__link:hover {
	color: var(--clr-text-accent);
	border-color: var(--clr-brand-base);
	/*background: hsl(from var(--clr-brand-base) h s l / .08);*/
}

.nav-shortcuts__link.is-active {
	color: var(--clr-on-brand);
	background: var(--clr-brand-base);
	border-color: var(--clr-brand-base);
}

@container main (width < 768px) {
	.nav-shortcuts {
		gap: .35rem;
		padding-block: .5rem;
	}

	.nav-shortcuts__link {
		min-height: 1.625rem;
		padding-inline: .625rem;
		font-size: var(--fs-smaller);
	}
}



/* || View tabs */

.view-tabs {
	display: flex;
	align-items: center;
	gap: 2rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.view-tabs::-webkit-scrollbar {
	display: none;
}

/* hack */
.view-tabs--centered::before,
.view-tabs--centered::after {
	content: "";
	flex: 1 0 auto;
}

.view-tabs__link {
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--clr-text-muted);
	font: inherit;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	padding: .625rem .125rem;
	white-space: nowrap;
	transition: color .15s ease;
	min-width: 3ch;
	text-align: center;
	border-bottom: 2px solid transparent;
}

.view-tabs__link:hover {
	color: var(--clr-text-accent);
}

.view-tabs__link.is-active {
	color: var(--clr-text);
	font-weight: var(--fw-bolder);
	border-bottom-color: var(--clr-brand-base);
}


/* Chips bar */

.chips-bar {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.chips-bar__list {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}

.chips-bar__link {
	flex: 0 0 auto;
	text-decoration: none;
	font: inherit;
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	white-space: nowrap;
	min-width: 2rem;
	text-align: center;
	padding-block: .25rem;
	padding-inline: .875rem;
	border-radius: var(--border-radius-sm);

	color: var(--clr-text-muted);
	background: var(--clr-surface-elevated);
}

.chips-bar__link.is-active {
	color: var(--clr-on-contrast);
	background: var(--clr-surface-contrast);
}




/* || Empty state */

.empty-state {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 1rem;

	padding: 4rem 1rem;
	border: 1px dashed var(--border-color);
	border-radius: var(--border-radius);

	background: var(--clr-surface-subtle);
	color: var(--clr-text-subtle);
	font-size: var(--fs-base);
	font-weight: var(--fw-base);
}

.empty-state__icon {
	font-size: 3.75rem;
	color: inherit;
}

.empty-state__title {
	font-size: var(--fs-large);
	text-wrap: balance;
}


/* || Group Selector */

.group-selector {
	position: absolute;
	display: none;
	z-index: 1001;
	min-width: 220px; 
	padding: 1rem;
	border-radius: var(--border-radius);
	background: var(--clr-surface-elevated);
	border: 1px solid var(--border-color);
	box-shadow:
		0 10px 25px -5px rgba(0, 0, 0, 0.08),
		0 4px 10px -4px rgba(0, 0, 0, 0.06);	
}

.group-selector.is-open {
	display: block;
}

@container main (width < 768px) {
	.group-selector {
		width: 100%;
		min-width: 0;
	}
}


/* || Share dialog */

.share-dialog {
	width: min(32rem, calc(100vw - 2rem));
	border: 0;
	border-radius: var(--border-radius);
	background: var(--clr-surface-elevated);
	color: hsl(var(--clr-text) / 0.86);
	padding: 0;
	box-shadow: var(--shadow-dialog);
}

.share-dialog__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: .875rem;
}

.share-dialog__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.share-dialog__copy {
	display: flex;
	gap: .5rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding-block: .375rem;
	padding-inline: .375rem .5rem;
}

.share-dialog__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--clr-text);
	font: inherit;
	padding-inline: .75rem;
}

.share-dialog__input:focus {
	outline: none;
}

.share-dialog__message {
	position: absolute;
	top: .75rem;
	left: 50%;
	transform: translate(-50%, -6px);

	font-size: var(--fs-small);
	color: var(--clr-on-contrast);
	background: var(--clr-surface-contrast);
	padding-block: .375em;
	padding-inline: 1em;
	border-radius: 4px;
	font-weight: var(--fw-bold);
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility 0s linear .2s;
}

.share-dialog__message.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility 0s;
}

.share-dialog__targets {
	display: flex;
	gap: .875rem;
	padding-top: .25rem;
}

.share-target {
	display: inline-flex;
	align-items: center;
	gap: .375rem;

	border: 1px solid var(--border-color);
	border-radius: 999px;
	background: var(--clr-surface-content);
	color: var(--clr-text-muted);

	font-size: var(--fs-smaller);
	font-weight: var(--fw-bolder);
	text-decoration: none;

	padding-block: .5em;
	padding-inline: 1.125em;

	transition:
		background-color .15s ease,
		border-color .15s ease,
		color .15s ease;
}

.share-target:hover {
	color: var(--clr-on-contrast);
	background: var(--clr-surface-contrast);
	border-color: var(--clr-surface-contrast);
}

.share-target__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
}

@media (max-width: 375px) {
	.share-target__icon {
		display: none;
	}
}



/* || Base Descripton List */

.base-dl {
	
}

.base-dl dt {
	color: var(--clr-text-accent);
	font-weight: var(--fw-bold);
	line-height: 2.5;
}

.base-dl dd {
	font-size: var(--fs-medium);
	color: var(--clr-text-muted);
	line-height: 1.75;
	margin-inline-start: 1rem;
}


/* || Base form */

.base-form__wrapper {
	width: 100%;
	max-width: 36rem;
	margin-inline: auto;
}

.base-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	width: 100%;
}

.base-form__heading {
	display: grid;
	gap: .5rem;
	margin-bottom: .75rem;
}

.base-form__intro { 
	color: var(--clr-text);
	font-size: var(--fs-large);
}


/* || Base field */

.base-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}

.base-field__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-width: 0;
}

.base-field__label {
	color: var(--clr-text);
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
}

.base-field__control {
	width: 100%;
	min-width: 0;
	height: 2.5rem;
	padding-inline: .75rem;

	border: 1px solid var(--border-color-strong);
	border-radius: var(--border-radius);
	background: var(--clr-surface-elevated);
	color: var(--clr-text);

	font: inherit;
	font-size: var(--fs-base);

	transition:
		border-color .15s ease,
		box-shadow .15s ease,
		background-color .15s ease;
}

.base-field__control:focus {
	outline: none;
	border-color: var(--clr-generic);
	box-shadow: 0 0 0 2px hsl(from var(--clr-generic) h s l / .18);
}

.base-field .base-select {
	border-color: var(--border-color-strong);	
}

.base-field .base-select:focus-within {
	border-color: var(--clr-generic);
	box-shadow: 0 0 0 2px hsl(from var(--clr-generic) h s l / .18);
}

textarea.base-field__control {
	height: auto;
	min-height: 7rem;
	padding-block: .65rem;
	resize: vertical;
}

.base-field__control::placeholder {
	color: hsl(from var(--clr-text-subtle) h s l / 0.86);
}

.base-field.is-invalid :is(.base-field__control, .base-select) {
	border-color: var(--clr-error);
	box-shadow: 0 0 0 2px hsl(from var(--clr-error) h s l / .12);
}

.base-field:has([required])
	.base-field__label::after {
		content: '*';
		color: var(--clr-brand-strong);
		margin-left: .25rem;
}

.base-form__message {
	padding: .75rem 1rem;
	border-radius: var(--border-radius);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
}

.base-form__message--success {
	background: hsl(150 60% 92%);
	color: hsl(150 55% 25%);
	border: 1px solid hsl(150 50% 82%);
}

.base-form__message--error {
	background: hsl(from var(--clr-error) h s l / .12);
	color: var(--clr-error);
	border: 1px solid hsl(from var(--clr-error) h s l  / .35);
}

.base-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: .75rem;
	padding-top: .25rem;
}

.base-field__error {
	color: var(--clr-error);
	font-size: var(--fs-smaller);
	font-weight: var(--fw-bolder);
}

.base-field.is-invalid .base-field__error {
	display: block;
}

.base-field--captcha {
	align-items: center;
	padding-block: .75rem;
}


/* honeypot field */

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


@container main (width < 768px) {
	.base-form__actions {
		flex-direction: column;
	}

	.base-form__actions .base-button {
		width: 100%;
	}
}


/* || About */

.about-wrapper {
	width: 100%;
	max-width: 50rem;
	margin-inline: auto;

	--stack-gap: 2rem;
}

.about__img-wrap {
	margin-inline: auto;
	overflow: hidden;
	border-radius: .25rem;

	/* dark theme safe area*/
	background-color: hsl(0 0% 100% / 0.15);
}


/* || Notification wrapper */

.notification-wrapper {
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
	padding-bottom: 2rem;

	--stack-gap: 2rem;
}

.notification__heading {
	--stack-gap: .375rem;
}

.notification__title {
	--font-size: var(--fs-largest);
}

.notification__meta {
	display: flex;
	gap: .75rem;

	font-size: var(--fs-small);
}

.notification__author {
	color: var(--clr-text-accent);
	font-weight: var(--fw-bold);
}

.notification__posted {
	color: var(--clr-text-muted);
}

.notification__img-wrap {
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--border-radius-lg);

	/* dark theme safe area*/
	background-color: hsl(0 0% 100% / 0.15);
}

.notification__attachment {
	display: flex;
	gap: .5rem;
}

.notification__icon-wrap {
	color: var(--clr-text-muted);
}


/* || View for documents wrapper */

.-wrapper,
.rules-wrapper {
	width: 100%;
	max-width: 50rem;
	margin-inline: auto;
	padding-bottom: 2rem;

	--stack-gap: 2rem;
}


/* || Statement wrapper */

.statement-wrapper {
	width: 100%;
	max-width: 50rem;
	margin-inline: auto;
	padding-bottom: 2rem;

	--stack-gap: 2rem;
}


/* || Document List  */

.documents {
	--stack-gap: .5rem;
	padding-inline: 1rem;
}

.documents__legend {
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	color: var(--clr-text-muted);
}

.documents__list {
	display: grid;
	gap: .5rem;
	min-width: 0;
}

.documents__item {
	display: flex;
	gap: .5rem;
	align-items: center;
}

.documents__icon-wrap {
	color: var(--clr-text-muted);
	font-size: 1.375rem;
}

.documents__document a {
	display: inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}


/* || Media list :videos */

.media-list {
	display: grid;
	gap: 1rem;
}

.media-list[data-layout="stack"] {
	grid-template-columns: 1fr;
}

.media-list[data-layout="grid"] {
	grid-template-columns:
		repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.media-list__item {
	position: relative;
	isolation: isolate;
	padding: .5rem;
}

.media-list__item::before {
	position: absolute;
	content: '';
	inset: 0;
	z-index: -1;
	
	background-color: hsl(var(--hsl-brand-base) / 0.16);
	background-color: oklch(from var(--clr-brand-base) l c h / 0.16);
	border-radius: var(--border-radius-lg);
	transition:
		opacity 250ms ease-out,
		transform 250ms ease-out;

	opacity: 0;
	transform: scale(.90);
}

.media-list__item:is(:hover, :focus-within)::before {
	opacity: 1;
	transform: scale(1);
}


/* || Video card */

.video-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	width: 100%;
	padding: 0rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.video-card:focus-visible {
	outline-offset: 0.25rem;
}

.video-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--border-radius);
	background: hsl(var(--clr-surface-subtle));
}

.video-card__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-card__play {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background: hsl(0 0% 0% / 0.42);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	transform: translate(-50%, -50%);
}

.video-card__play::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 0;
	height: 0;
	border-block: 0.58rem solid transparent;
	border-left: 0.9rem solid #ffffff;
	transform: translate(-32%, -50%);
}

.video-card__content {
	display: grid;
	align-content: start;
	gap: 0.25rem;
	min-width: 0;
}

.video-card__title {
	font-size: var(--fs-medium);
	font-weight: var(--fw-bolder);
	color: var(--clr-text);
	transition: color 160ms ease;
}

.video-card__description {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--fs-small);
	line-height: 1.25;
	color: var(--clr-text-soft);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.video-card__meta {
	font-size: var(--fs-small);
	line-height: 1.25;
	color: var(--clr-text-muted);
}




/* || Video frame */

.video-frame {
	width: 100%;
	max-width: 50rem;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--frame-radius, 0.75rem);
	background: var(--clr-surface-subtle);
}

.video-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (orientation: landscape) and (max-height: 30rem) {
	.video-frame {
		max-height: calc(100dvh - 6rem);
	}
}


/* || Video dialog */

.video-dialog {
	width: min(50rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--border-radius-lg);
	background: var(--clr-surface-elevated);
	color: var(--clr-text);
	box-shadow: var(--shadow-dialog);
	overflow: hidden;
}

.video-dialog::backdrop {
	--backdrop-bg: hsl(0 0% 0% / 0.62);
	--backdrop-blur: 2px;
}

.video-dialog__inner {
	display: grid;
	gap: 0;
}

.video-dialog__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--clr-border-soft);
}

.video-dialog .video-frame {
	--frame-radius: 0;
	background: #000;
}



/* || Toast */

.toast {
	position: absolute;
	left: 50%;
	bottom: 100%;
	z-index: 2;

	transform: translate(-50%, .375rem);

	padding: .375rem .75rem;
	border-radius: 999px;

	background: var(--clr-surface-contrast);
	color: var(--clr-on-contrast);

	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	white-space: nowrap;
	box-shadow: 0 6px 18px hsl(0 0% 0% / .16);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity .18s ease,
		transform .18s ease,
		visibility 0s linear .18s;
}

.toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -.375rem);

	transition:
		opacity .18s ease,
		transform .18s ease,
		visibility 0s;
}


/* || Aside list */

.aside-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .625rem 1rem;
	align-items: baseline;
	margin-block: 1rem;
}

.aside-list > :nth-child(2n-1) {
	font-size: var(--fs-small);
	color: var(--clr-text-muted);
	letter-spacing: var(--font-spacing-dense);
}

.aside-list > :nth-child(2n) {
	font-size: var(--fs-small);
	color: var(--clr-text-soft);
	font-weight: var(--fw-bold);
}