/* SPDX-License-Identifier: GPL-3.0-or-later
   The MotionAtelier panel in HTML, for the browser simulation. Colours, bevels and metrics are
   the panel's own (packages/.../ui/style.py); the font is the reader's local Segoe UI, as in
   the panel, with system fallbacks (no font is shipped). */

.ma {
	--window: #3a3a3a;
	--base: #2e2e2e;
	--text: #cccccc;
	--text-disabled: #a8a8a8;
	--highlight: #b98620;
	--mid: #595959;
	--midlight: #cbcbcb;
	--pane-border: #242424;
	--list-border: #1c1c1c;
	--button-border: #2a2a2a;
	--field-dark: #131313;
	--field-dark-border: #242424;
	--field: #2e2e2e;
	--field-border: #2a2a2a;
	--field-top: #2b2b2b;
	--slider-fill: #004a98;
	--slider-fill-top: #4c6680;
	--splitter: #494949;
	--glyph: #c4ccd0;
	--glyph-disabled: #697074;
	--favorite: #ffd22d;
	--menu-border: #1f1f1f;
	--menu-separator: #4c4c4c;
	--menu-disabled: #7a7a7a;
	--menu-section: #8f8f8f;
	--tooltip-bg: #262626;
	--dialog-title: #2b2b2b;

	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 700px;
	min-height: 520px;
	height: 100%;
	background: var(--window);
	color: var(--text);
	font: 12px/1.25 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	user-select: none;
	-webkit-user-select: none;
	overflow: hidden;
}
.ma *,
.ma *::before,
.ma *::after {
	box-sizing: border-box;
}
.ma button,
.ma input {
	font: inherit;
	color: inherit;
}
.ma :focus {
	outline: none;
}
.ma :focus-visible {
	outline: 1px dotted var(--text);
	outline-offset: -3px;
}
.ma [hidden] {
	display: none !important;
}
.ma svg.icon {
	display: block;
	flex: none;
}

/* -- header -------------------------------------------------------------------------- */
.ma-header {
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: none;
}
.ma-row1 {
	height: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ma-brand {
	width: 22px;
	height: 22px;
	display: block;
}
.ma-title {
	font-weight: 600;
}
.ma-row2 {
	height: 24px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ma-status {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: 4px;
}
.ma-status-dot {
	width: 12px;
	height: 8px;
	flex: none;
	position: relative;
}
.ma-status-dot::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--highlight);
	transform: scale(0.625);
}
.ma-status-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 6px;
}
.ma-status[data-kind='error'] .ma-status-dot::after,
.ma-status[data-kind='critical'] .ma-status-dot::after {
	background: #d0543f;
}
.ma-view {
	display: flex;
}

/* -- push buttons (bevel PUSH) ------------------------------------------------------- */
.ma-push {
	height: 22px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid #2a2a2a;
	border-radius: 2px;
	background: linear-gradient(#737373, #626262);
	box-shadow: inset 0 1px 0 #848484, inset 0 -1px 0 #747474;
	color: var(--text);
	white-space: nowrap;
	cursor: default;
}
.ma-push:hover:not(:disabled) {
	background: linear-gradient(#7d7d7d, #6b6b6b);
}
.ma-push:active:not(:disabled),
.ma-push[aria-pressed='true'] {
	background: #5a5a5a;
	box-shadow: inset 0 1px 0 #6d6d6d;
}
.ma-push:disabled {
	color: var(--text-disabled);
	opacity: 0.75;
}
.ma-push.left {
	justify-content: flex-start;
	padding-left: 8px;
}
.ma-push.commit {
	height: 28px;
	padding: 0 18px;
}
.ma-push.commit .icon path {
	stroke: #252015;
}
.ma-push.fill {
	width: 100%;
}
.ma-view .ma-push {
	border-radius: 0;
}

/* -- tool buttons (bevel TOOL) -------------------------------------------------------- */
.ma-tool {
	width: 26px;
	height: 26px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #000;
	border-radius: 2px;
	background: linear-gradient(#555555, #3b3b3b);
	cursor: default;
}
.ma-tool.small {
	width: 24px;
	height: 24px;
}
.ma-tool:hover:not(:disabled) {
	background: linear-gradient(#5f5f5f, #444444);
}
.ma-tool:active:not(:disabled),
.ma-tool[aria-pressed='true'] {
	background: linear-gradient(#3b3b3b, #4b4b4b);
}
.ma-tool.accent[aria-pressed='true'] {
	background: var(--highlight);
}
.ma-tool:disabled .icon {
	opacity: 0.45;
}
.ma-divider {
	width: 9px;
	height: 20px;
	position: relative;
	flex: none;
}
.ma-divider::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--mid);
}

/* -- workspace --------------------------------------------------------------------------- */
.ma-workspace {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}
.ma-column {
	flex: 1 1 auto;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
}
.ma-splitter {
	flex: none;
	width: 5px;
	cursor: col-resize;
	position: relative;
}
.ma-splitter::after {
	content: '';
	position: absolute;
	left: 0;
	right: 1px;
	top: 0;
	bottom: 0;
	background: var(--splitter);
}
.ma-editrow {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
	flex-wrap: wrap;
}
.ma-editrow .spacer {
	flex: 1;
}
.ma-overlays {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ma-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: default;
}
.ma-check input {
	appearance: none;
	width: 13px;
	height: 13px;
	margin: 0;
	border: 1px solid #1c1c1c;
	background: var(--field-dark);
	display: inline-grid;
	place-content: center;
}
.ma-check input:checked::after {
	content: '';
	width: 9px;
	height: 9px;
	background: no-repeat center/9px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5L6.5 12 13 4.5' fill='none' stroke='%23aaaaaa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ma-swatch {
	width: 16px;
	height: 16px;
}
.ma-frame {
	flex: 1 1 auto;
	min-height: 120px;
	padding: 5px;
	border: 1px solid var(--pane-border);
	background: var(--window);
	position: relative;
}
.ma-canvas {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--base);
	touch-action: none;
}
.ma-transport {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}
.ma-rule {
	height: 1px;
	background: var(--mid);
	flex: none;
}
.ma-commitrow {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}
.ma-commitrow .spacer {
	flex: 1;
}
.ma-pair {
	display: flex;
}
.ma-pair .ma-tool {
	border-radius: 0;
}

/* -- fields -------------------------------------------------------------------------------- */
.ma-field {
	height: 22px;
	min-width: 0;
	padding: 0 6px;
	border: 1px solid var(--field-border);
	border-top-color: var(--field-top);
	background: var(--field);
	color: var(--text);
	text-align: right;
	user-select: text;
}
.ma-field.dark {
	background: var(--field-dark);
	border-color: var(--field-dark-border);
}
.ma-field:focus {
	border-color: var(--highlight);
}
.ma-field::selection {
	background: var(--highlight);
	color: #fff;
}
.ma-search {
	position: relative;
}
.ma-search input {
	width: 100%;
	height: 21px;
	padding: 0 6px 0 24px;
	border: 1px solid var(--field-dark-border);
	background: var(--field-dark);
	text-align: left;
	color: var(--text);
}
.ma-search input::placeholder {
	color: #4d4d4d;
}
.ma-search .icon {
	position: absolute;
	left: 5px;
	top: 3px;
}

/* combo (bevel PUSH with arrow) */
.ma-combo {
	height: 24px;
	min-width: 82px;
	padding: 0 30px 0 8px;
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 1px solid #2a2a2a;
	border-radius: 2px;
	background: linear-gradient(#737373, #626262);
	box-shadow: inset 0 1px 0 #848484, inset 0 -1px 0 #747474;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default;
}
.ma-combo:hover {
	background: linear-gradient(#7d7d7d, #6b6b6b);
}
.ma-combo::after {
	content: '';
	position: absolute;
	right: 9px;
	top: 50%;
	margin-top: -2px;
	border: 4px solid transparent;
	border-top: 4px solid #c8c8c8;
	border-bottom: 0;
}
.ma-combo.fill {
	width: 100%;
}

/* seek slider: a dark track with the blue fill, and a beveled handle */
.ma-slider {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 auto;
	min-width: 40px;
	height: 18px;
	margin: 0;
	background: transparent;
	--pct: 0%;
}
.ma-slider::-webkit-slider-runnable-track {
	height: 6px;
	border: 1px solid #000;
	background: linear-gradient(to right, var(--slider-fill) var(--pct), var(--field-dark) var(--pct));
	box-shadow: inset 0 1px 0 var(--slider-fill-top);
}
.ma-slider::-moz-range-track {
	height: 4px;
	border: 1px solid #000;
	background: linear-gradient(to right, var(--slider-fill) var(--pct), var(--field-dark) var(--pct));
}
.ma-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 16px;
	margin-top: -6px;
	border: 1px solid #000;
	border-top-color: #2a2a2a;
	background: linear-gradient(#545454, #3c3c3c);
}
.ma-slider::-moz-range-thumb {
	width: 8px;
	height: 14px;
	border: 1px solid #000;
	border-radius: 0;
	background: linear-gradient(#545454, #3c3c3c);
}

/* -- inspector ---------------------------------------------------------------------------- */
.ma-inspector {
	flex: none;
	width: 275px;
	min-width: 220px;
	max-width: 330px;
	display: flex;
	flex-direction: column;
	padding: 8px 6px 8px 0;
}
.ma-tabs {
	display: flex;
	flex: none;
}
.ma-tab {
	flex: 1;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #000;
	border-left-width: 0;
	background: linear-gradient(#535353, #313131);
	cursor: default;
}
.ma-tab:first-child {
	border-left-width: 1px;
}
.ma-tab[aria-selected='true'] {
	background: linear-gradient(#545454, #3a3a3a);
	border-bottom-color: transparent;
}
.ma-pane {
	flex: 1 1 auto;
	min-height: 0;
	border: 1px solid #000;
	border-top: 0;
	background: var(--window);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-color: #484848 #3a3a3a;
}
.ma-page {
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 100%;
}
.ma-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
}
.ma-heading {
	font-weight: 600;
}
.ma-count {
	color: var(--text);
}
.ma-hrule {
	height: 1px;
	background: var(--text);
	opacity: 0.55;
	flex: none;
}
.ma-form {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 6px;
	align-items: center;
}
.ma-param {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.ma-param .ma-field {
	width: 58px;
	flex: none;
}
.ma-note {
	white-space: normal;
	line-height: 1.35;
}
.ma-notice {
	color: #e0b060;
	white-space: pre-line;
}

/* effect layer cards */
.ma-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 3px;
	border: 1px solid var(--list-border);
	background: var(--base);
}
.ma-card {
	border: 1px solid #222;
	background: #444;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ma-card.current {
	border-color: var(--highlight);
}
.ma-card-head {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 24px;
}
.ma-card-head .name {
	flex: 1;
	min-width: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ma-card-head .grip {
	width: 10px;
	text-align: center;
	cursor: grab;
}
.ma-card-head .ma-field {
	width: 52px;
}
.ma-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 2px 2px 2px 4px;
}
.ma-card-ends {
	display: flex;
	justify-content: space-between;
}
.ma-card-actions {
	display: flex;
	gap: 2px;
}

/* knot disclosure */
.ma-knot-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ma-knot-head .ma-push {
	flex: 1;
	border: 0;
	background: none;
	box-shadow: none;
	padding-left: 0;
}
.ma-knot-error {
	color: #e07a5f;
	min-height: 15px;
}

/* key tools */
.ma-group {
	font-weight: 600;
	height: 16px;
	margin-top: 6px;
	text-transform: uppercase;
}
.ma-report {
	white-space: pre-wrap;
	user-select: text;
	line-height: 1.4;
	margin-top: 6px;
	word-break: break-word;
}

/* recipes */
.ma-bar {
	display: flex;
	align-items: center;
	gap: 4px;
}
.ma-bar .spacer {
	flex: 1;
}
.ma-page.fill {
	height: 100%;
	min-height: 0;
}
.ma-page.fill > * {
	flex: none;
}
.ma-page.fill > .ma-grid,
.ma-page.fill > .ma-drawer {
	flex: 1 1 0;
	min-height: 0;
}
.ma-page.fill > .ma-drawer {
	flex-grow: 0.67;
}
.ma-drawer .ma-grid {
	flex: 1 1 0;
	min-height: 0;
}
.ma-grid {
	flex: 1 1 auto;
	min-height: 60px;
	border: 1px solid var(--list-border);
	background: var(--base);
	overflow-y: auto;
	padding: 4px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	grid-auto-rows: 104px;
	gap: 4px;
	align-content: start;
}
.ma-grid.list {
	grid-template-columns: 1fr;
	grid-auto-rows: 30px;
}
.ma-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	padding: 4px;
	cursor: default;
}
.ma-tile:hover {
	background: rgba(204, 204, 204, 0.05);
}
.ma-tile[aria-selected='true'] {
	border-color: var(--highlight);
	background: rgba(185, 134, 32, 0.12);
}
.ma-tile[aria-selected='true'] .name {
	color: var(--highlight);
}
.ma-tile svg.thumb {
	flex: 1;
	width: 100%;
	min-height: 0;
}
.ma-tile .name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 16px;
	height: 18px;
	line-height: 18px;
}
.ma-tile .caption {
	color: #9a9a9a;
	font-size: 11px;
}
.ma-tile .star {
	position: absolute;
	right: 4px;
	bottom: 5px;
	width: 14px;
	height: 14px;
	color: rgba(204, 204, 204, 0.43);
	font-size: 13px;
	line-height: 14px;
	text-align: center;
}
.ma-tile .star.on {
	color: var(--favorite);
}
.ma-grid.list .ma-tile {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.ma-grid.list .ma-tile svg.thumb {
	flex: none;
	width: 40px;
	height: 22px;
}
.ma-grid.list .ma-tile .name {
	flex: 1;
}
.ma-drawer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px;
	min-height: 0;
	flex: 1 1 auto;
}
.ma-hist-actions {
	display: flex;
	gap: 6px;
}
.ma-hist-actions .ma-push {
	flex: 1;
	padding: 0 4px;
}
.ma-foot {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
}

/* -- menus, dialogs, busy ------------------------------------------------------------------ */
.ma-menu {
	position: fixed;
	z-index: 1000;
	min-width: 160px;
	padding: 3px 0;
	border: 1px solid var(--menu-border);
	background: var(--window);
	color: var(--text);
	font: 12px 'Segoe UI', system-ui, sans-serif;
	box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.45);
}
.ma-menu .item {
	height: 22px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
	cursor: default;
}
.ma-menu .item:hover:not(.disabled),
.ma-menu .item.active:not(.disabled) {
	background: var(--highlight);
	color: #fff;
}
.ma-menu .item.disabled {
	color: var(--menu-disabled);
}
.ma-menu .item.checked::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 6px;
	width: 10px;
	height: 10px;
	background: no-repeat center/10px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5L6.5 12 13 4.5' fill='none' stroke='%23cccccc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ma-menu .sep {
	height: 1px;
	margin: 3px 1px;
	background: var(--menu-separator);
}
.ma-menu .section {
	height: 20px;
	padding: 0 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--menu-section);
	font-size: 11px;
}
.ma-menu .section::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--menu-separator);
}
.ma-shade {
	position: absolute;
	inset: 0;
	z-index: 900;
	background: rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ma-dialog {
	min-width: 240px;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	flex-direction: column;
	border: 1px solid #111;
	background: var(--window);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.ma-dialog .title {
	height: 30px;
	padding: 0 6px 0 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--dialog-title);
}
.ma-dialog .close {
	width: 28px;
	height: 24px;
	border: 0;
	background: none;
	color: var(--text);
	font-size: 15px;
}
.ma-dialog .close:hover {
	background: #c42b1c;
	color: #fff;
}
.ma-dialog .body {
	padding: 11px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: auto;
}
.ma-dialog .buttons {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding: 0 11px 11px;
}
.ma-dialog .buttons .ma-push {
	min-width: 75px;
}
.ma-dialog .ma-form .ma-field,
.ma-dialog .ma-form .ma-combo {
	width: 150px;
}
.ma-dialog table {
	border-collapse: collapse;
	background: var(--base);
	border: 1px solid var(--list-border);
}
.ma-dialog th {
	background: linear-gradient(#555555, #444444);
	font-weight: 400;
	text-align: left;
	padding: 3px 6px;
	border-right: 1px solid var(--button-border);
}
.ma-dialog td {
	padding: 2px 6px;
	border-bottom: 1px solid #353535;
}
.ma-busy {
	position: absolute;
	inset: 0;
	z-index: 950;
	cursor: progress;
}
.ma-tip {
	position: fixed;
	z-index: 1100;
	max-width: 360px;
	padding: 3px 6px;
	border: 1px solid #111;
	background: var(--tooltip-bg);
	color: var(--text);
	font: 12px 'Segoe UI', system-ui, sans-serif;
	pointer-events: none;
	white-space: normal;
}

/* -- the simulated Houdini scene (not part of the panel) ---------------------------------- */
.ma-scene {
	display: flex;
	flex-direction: column;
	background: #262626;
	color: #cccccc;
	font: 12px 'Segoe UI', system-ui, sans-serif;
	border-top: 3px solid #1b1b1b;
}
.ma-scene .ma-push {
	height: 22px;
	padding: 0 10px;
	border: 1px solid #2a2a2a;
	border-radius: 2px;
	background: linear-gradient(#5e5e5e, #4e4e4e);
	color: #cccccc;
	font: inherit;
}
.ma-scene .ma-push:disabled {
	opacity: 0.5;
}
.ma-scene-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	flex-wrap: wrap;
}
.ma-scene-bar .spacer {
	flex: 1;
}
.ma-scene-hint {
	color: #9a9a9a;
}
.ma-scene-canvas {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: block;
}
.ma-commitrow > .ma-push:first-child,
.ma-push.commit {
	min-width: 150px;
}