@import url(./assets/fonts/fonts.css);
/* OpusDesk Hub Video Studio — editor shell.
   All fonts and images are resolved locally from ./assets; there are no third-party
   stylesheet or font requests. Design tokens live on :root so that every shadow root in the
   editor inherits the same brand palette. */
@import url(./views/tooltip/styles.css);

:root {
	--od-purple-50: #f4f1ff;
	--od-purple-100: #e6dfff;
	--od-purple-300: #b9a6ff;
	--od-purple-500: #7c3aed;
	--od-purple-600: #6d28d9;
	--od-purple-700: #5b21b6;
	--od-amber-400: #fbbf24;

	/* Neutral dark work surface: keeps video colour judgement accurate. */
	--od-bg-0: #0b0b0f;
	--od-bg-1: #121218;
	--od-bg-2: #17171f;
	--od-bg-3: #1f1f2a;
	--od-line: #2b2b38;
	--od-line-strong: #3a3a4a;
	--od-text: #ecebf3;
	--od-text-dim: #a5a3b5;
	--od-focus: #b9a6ff;
	--od-danger: #f2555a;
	--od-success: #35c07f;

	--od-radius: 10px;
	--od-radius-sm: 6px;
	--od-header-height: 52px;

	/* Shoelace components inside the editor inherit the brand palette. */
	--sl-color-primary-500: var(--od-purple-500);
	--sl-color-primary-600: var(--od-purple-600);
	--sl-color-primary-700: var(--od-purple-700);
	--sl-color-primary-400: var(--od-purple-300);
	--sl-color-neutral-0: var(--od-bg-1);
	--sl-color-neutral-50: var(--od-bg-1);
	--sl-color-neutral-100: var(--od-bg-2);
	--sl-color-neutral-200: var(--od-bg-3);
	--sl-color-neutral-300: var(--od-line);
	--sl-color-neutral-700: var(--od-text-dim);
	--sl-color-neutral-800: var(--od-text);
	--sl-color-neutral-900: #f7f6fb;
	--sl-focus-ring-color: var(--od-focus);
	--sl-font-sans: "Poppins-Regular", system-ui, sans-serif;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #33333f; border-radius: 1em; }
::-webkit-scrollbar-thumb:hover { background: #454556; }

html, body {
	font-size: 16px;
	min-height: 100%;
	color: var(--od-text-dim);
	background: var(--od-bg-0);
	font-family: "Poppins-Regular", system-ui, sans-serif;
}

body { overflow-x: hidden; }

/* Visible focus everywhere, including inside shadow roots that opt in via :host-context. */
:focus-visible {
	outline: 2px solid var(--od-focus);
	outline-offset: 2px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- editor shell */

.editor {
	padding: 0.5em;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.editor-header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex-wrap: wrap;
	min-height: var(--od-header-height);
	padding: 0.4em 0.6em;
	background: var(--od-bg-1);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius);
}

.header-group {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.header-brand { flex: 0 0 auto; }
.header-project { flex: 1 1 12em; min-width: 8em; }
.header-history { flex: 0 0 auto; }
.header-actions { flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; }

.brand {
	display: flex;
	align-items: center;
	gap: 0.55em;
	text-decoration: none;
	color: var(--od-text);
}

.brand .logo { width: 28px; height: 28px; display: block; }

.brand-name {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	font-family: "Poppins-SemiBold", "Poppins-Regular", sans-serif;
	font-size: 0.94rem;
	letter-spacing: 0.01em;
}

.brand-sub {
	font-family: "Poppins-Regular", sans-serif;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--od-purple-300);
}

.project-name {
	display: flex;
	align-items: center;
	gap: 0.35em;
	background: var(--od-bg-2);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius-sm);
	padding: 0.15em 0.35em;
	min-width: 0;
}

.project-name .input-name {
	background: none;
	border: none;
	color: var(--od-text);
	font-family: "Poppins-Regular", sans-serif;
	font-size: 0.85rem;
	min-width: 0;
	width: 100%;
	padding: 0.3em 0.2em;
}

.project-name .input-name:disabled { color: var(--od-text-dim); }
.project-name .input-name:focus { outline: none; }
.project-name:focus-within { border-color: var(--od-focus); }

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--od-radius-sm);
	color: var(--od-text-dim);
	cursor: pointer;
}

.icon-button:hover:not(:disabled) { background: var(--od-bg-3); color: var(--od-text); }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.icon-button .check { display: flex; color: var(--od-success); }

.text-button {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	height: 30px;
	padding: 0 0.7em;
	background: transparent;
	border: 1px solid var(--od-line-strong);
	border-radius: var(--od-radius-sm);
	color: var(--od-text-dim);
	font-family: "Poppins-Regular", sans-serif;
	font-size: 0.78rem;
	cursor: pointer;
	text-decoration: none;
}

.text-button:hover { background: var(--od-bg-3); color: var(--od-text); }

.export-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: 32px;
	padding: 0 0.9em;
	color: #fff;
	background: var(--od-purple-600);
	cursor: pointer;
	border-radius: var(--od-radius-sm);
	border: 1px solid var(--od-purple-500);
	font-family: "Poppins-Regular", sans-serif;
	font-size: 0.82rem;
}

.export-button:hover:not(:disabled) { background: var(--od-purple-500); }
.export-button:disabled { opacity: 0.45; cursor: default; border-color: transparent; }

.export-button .text { display: flex; align-items: center; gap: 0.35em; }
.export-button .text svg { width: 14px; }

construct-editor {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: var(--od-radius);
	overflow: hidden;
	border: 1px solid var(--od-line);

	--alpha: var(--od-purple-300);
	--bravo: var(--od-purple-500);
	--bg-a: var(--od-bg-1);
	--bg-b: var(--od-bg-0);
	--bg-c: var(--od-bg-3);
	--taskbar-size: 1em;
}

/* Narrow desktops: collapse the header into two rows without hiding the primary actions. */
@media (max-width: 1100px) {
	.header-project { order: 3; flex-basis: 100%; }
	.editor-header { row-gap: 0.4em; }
}

/* ---------------------------------------------------------------- loading page */

.loading-page-indicator {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	font-family: "Poppins-Regular", sans-serif;
	background: var(--od-bg-0);
}

.loading-page-indicator .loading-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
}

.loading-page-indicator .loading-brand strong {
	font-family: "Poppins-SemiBold", "Poppins-Regular", sans-serif;
	font-size: 1.35rem;
	color: var(--od-text);
	letter-spacing: 0.01em;
}

.loading-page-indicator .loading-brand span {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--od-purple-300);
}

.logo-loader { width: 56px; height: 56px; }

.loader {
	width: 220px;
	height: 4px;
	border-radius: 999px;
	background: var(--od-bg-3);
	overflow: hidden;
}

.loader .loaderBar {
	height: 100%;
	width: 35%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--od-purple-500), var(--od-purple-300));
	animation: borealisBar 1.6s ease-in-out infinite;
}

@keyframes borealisBar {
	0% { transform: translateX(-110%); }
	100% { transform: translateX(320%); }
}

/* ---------------------------------------------------------------- shared surfaces */

.simple-page {
	max-width: 46rem;
	margin: 12vh auto;
	padding: 0 1.5rem;
	color: var(--od-text-dim);
	font-family: "Poppins-Regular", sans-serif;
}

.simple-page h1 { color: var(--od-text); font-size: 1.4rem; margin-bottom: 0.75rem; }
.simple-page a { color: var(--od-purple-300); }

.toast {
	position: fixed;
	bottom: 20px;
	left: 20px;
	max-width: min(28rem, calc(100vw - 40px));
	padding: 12px 18px;
	border-radius: var(--od-radius-sm);
	color: #fff;
	background-color: rgba(20, 20, 26, 0.96);
	border: 1px solid var(--od-line-strong);
	z-index: 1400;
	animation: fade-in-out 5s ease-in-out;
	font-family: "Poppins-Regular", sans-serif;
	font-size: 0.86rem;
}

.toast.error { border-color: var(--od-danger); }
.toast.warning { border-color: var(--od-amber-400); }
.toast.info { border-color: var(--od-success); }

@keyframes fade-in-out {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.loader .loaderBar { animation: none; width: 100%; }
	.toast { animation: none; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}