/**
 * @fileoverview
 * Component styles for GearTrain.
 * Ayu theme - Light and Mirage variants.
 */

/* ========================================
 * HEADER COMPONENT
 * ======================================== */

.header {
	background-color: var(--color-header);
	z-index: 50;

	& .header__row-1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		padding: var(--space-2) var(--container-padding);
	}

	& .header__logo {
		display: block;
		height: 20px;
		width: auto;
	}

	& .header__user-controls {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	& .header__menu {
		position: relative;

		& summary.header__avatar {
			list-style: none;

			&::-webkit-details-marker {
				display: none;
			}
		}
	}

	& .header__avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background-color: var(--color-accent);
		color: var(--color-on-accent);
		font-size: var(--font-size-sm);
		font-weight: 500;
		cursor: pointer;
		border: var(--border-width) solid var(--color-header-text);
		border-radius: var(--radius);

		&:hover {
			background-color: var(--color-accent-hover);
		}
	}

	& .header__menu-panel {
		position: absolute;
		inset-block-start: calc(100% + var(--space-2));
		inset-inline-end: 0;
		z-index: 60;
		min-width: 180px;
		display: flex;
		flex-direction: column;
		text-align: start;
		background-color: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius);
		padding: var(--space-2);
	}

	& .header__menu-info {
		padding: var(--space-2);
		border-block-end: var(--border-width) solid var(--color-border);
		margin-block-end: var(--space-1);
	}

	& .header__menu-name {
		font-size: var(--font-size-sm);
		color: var(--color-text);
		overflow-wrap: anywhere;
	}

	& .header__menu-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--space-2);
		width: 100%;
		padding: var(--space-2);
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		background: none;
		border: none;
		border-radius: var(--radius);
		cursor: pointer;
		text-align: start;
		text-decoration: none;

		&:hover {
			background-color: var(--color-surface-hover);
			color: var(--color-text);
		}
	}

	& .header__menu form {
		display: block;
		width: 100%;
	}

	& .header__nav {
		display: flex;
		padding-inline: calc(var(--container-padding) - var(--space-4));
		gap: 0;
		align-items: center;
		border-block-end: var(--border-width-thick) solid var(--color-header-border);
	}

	& .header__nav-item {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--color-header-text);
		font-size: var(--font-size-sm);
		font-weight: 500;
		padding: var(--space-2) var(--space-4);
		border-start-start-radius: var(--radius);
		border-start-end-radius: var(--radius);

		&:hover {
			color: var(--color-header-nav-hover-text);
			background-color: var(--color-header-nav-hover);
		}

		&.is-active {
			color: var(--color-on-accent);
			background-color: var(--color-accent);
		}
	}
}

@media (max-width: 768px) {
	.header .header__nav {
		gap: var(--space-4);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.header .header__nav-item {
		white-space: nowrap;
	}
}

/* ========================================
 * FILETREE COMPONENT
 * GitHub-style progressive enhancement
 * Uses <details>/<summary> for native expand/collapse
 * ======================================== */

.filetree {
	font-size: var(--font-size-sm);

	& .filetree__list,
	& .filetree__children {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	& .filetree__children {
		padding-inline-start: var(--space-4);
	}

	& .filetree__arrow,
	& .filetree__icon {
		font-size: 16px;
		line-height: 1;
		flex-shrink: 0;
	}

	& .filetree__arrow {
		transition: transform var(--transition-fast);
		color: var(--color-text-muted);
	}

	& .filetree__icon {
		color: var(--color-text-muted);
	}

	& .filetree__name {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	& .filetree__folder {
		margin: 0;

		& summary {
			list-style: none;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}
			&::marker {
				display: none;
			}
		}

		&[open] .filetree__arrow {
			transform: rotate(90deg);
		}
	}

	& .filetree__item {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-1) var(--space-2);
		border-radius: 0;

		&:hover {
			background-color: var(--color-surface-hover);
		}

		&:focus-visible {
			outline: var(--border-width-thick) solid var(--color-accent-ink);
			outline-offset: -2px;
		}
	}

	& .filetree__link {
		text-decoration: none;
		color: var(--color-text);

		&.is-selected {
			background-color: var(--color-accent);
			color: var(--color-on-accent);

			& .filetree__icon {
				color: var(--color-on-accent);
			}
		}
	}
}

/* ========================================
 * SIDEBAR COLLAPSE (narrow screens)
 * ======================================== */

.sidebar-collapse__bar {
	display: none;
}

@media (max-width: 768px) {
	.sidebar-collapse__bar {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		width: 100%;
		padding: var(--space-2) var(--container-padding);
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
		background: none;
		border-block-end: var(--border-width) solid var(--color-border);
		cursor: pointer;
		list-style: none;

		&:hover {
			background-color: var(--color-surface-hover);
			color: var(--color-text);
		}

		&::-webkit-details-marker {
			display: none;
		}
	}
}

/* ========================================
 * FILETREE COMPONENT
 * ======================================== */

.footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
	padding: var(--space-5);
	background-color: var(--color-surface);
	border-block-start: var(--border-width-thick) solid var(--color-border);

	& a {
		color: var(--color-text-muted);
		font-size: var(--font-size-xs);

		&:hover {
			color: var(--color-text);
		}
	}

	& .footer__version {
		color: var(--color-text-muted);
		font-size: var(--font-size-xs);
	}
}

/* In-content footer: sits at the bottom of the main content column, subtle
 * and borderless so it does not read as a full-width bar. */
.footer--content {
	margin-block-start: auto;
	padding: var(--space-6) 0 0;
	background-color: transparent;
	border-block-start: none;
}

/* ========================================
 * CODEBLOCK COMPONENT
 * ======================================== */

.codeblock {
	padding: var(--space-4);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	line-height: 1.6;

	& .codeblock__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-block-end: var(--space-3);
		padding-block-end: var(--space-3);
		border-block-end: var(--border-width) solid var(--color-border);
	}

	& .codeblock__filename {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	& .codeblock__content {
		white-space: pre;
	}
}

/* ========================================
 * TERMINAL COMPONENT
 * ======================================== */

.terminal {
	padding: var(--space-4);
	background-color: var(--color-bg);
	border: var(--border-width-thick) solid var(--color-primary);
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-text);
	overflow-x: auto;

	& code {
		white-space: pre;
	}
}

/* ========================================
 * CODE EDITOR COMPONENT (CodeMirror 6)
 * ======================================== */

.code-editor {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-block: var(--space-4);
	min-height: 300px;

	& .cm-editor {
		height: 100%;
		background-color: var(--color-surface);
	}

	& .cm-scroller {
		overflow: auto;
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
	}

	/* Let syntax highlighting provide token colors */
	/* Base text color is inherited from .cm-editor background styling */

	/* Ensure consistent styling in both themes */
	& .cm-gutters {
		background-color: var(--color-surface);
		color: var(--color-text-muted);
		border-right: var(--border-width) solid var(--color-border);
	}
}

/* ========================================
 * MARKDOWN VIEWER COMPONENT
 * ======================================== */

.markdown-viewer {
	padding: var(--space-4);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: var(--font-size-base);
	line-height: 1.6;

	&:not(.markdown-viewer--loaded) {
		min-height: 100px;
	}

	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {
		margin-block-start: var(--space-6);
		margin-block-end: var(--space-3);
		font-weight: 600;
		line-height: 1.25;
	}

	& h1 {
		font-size: var(--font-size-2xl);
		padding-block-end: var(--space-2);
		border-block-end: var(--border-width-thick) solid var(--color-primary);
	}

	& h2 {
		font-size: var(--font-size-xl);
		padding-block-end: var(--space-2);
		border-block-end: var(--border-width) solid var(--color-border);
	}

	& h3 {
		font-size: var(--font-size-lg);
	}

	& p {
		margin-block: var(--space-4);
	}

	& a {
		color: var(--color-accent-ink);
		text-decoration: underline;

		&:hover {
			color: var(--color-accent-ink);
		}
	}

	& strong {
		font-weight: 600;
	}

	& em {
		font-style: italic;
	}

	& code {
		font-family: var(--font-mono);
		font-size: 0.9em;
		background-color: var(--color-surface);
		padding: var(--space-1) var(--space-2);
	}

	& pre {
		background-color: var(--color-surface);
		padding: var(--space-4);
		border: var(--border-width) solid var(--color-border);
		overflow-x: auto;

		& code {
			background-color: transparent;
			padding: 0;
		}
	}

	& ul,
	& ol {
		padding-inline-start: var(--space-6);
		margin-block: var(--space-4);
	}

	& li {
		margin-block: var(--space-2);
	}

	& blockquote {
		padding: var(--space-3) var(--space-4);
		margin-block: var(--space-4);
		border-inline-start: var(--border-width-thick) solid var(--color-accent);
		background-color: var(--color-surface);
		color: var(--color-text-muted);
	}

	& table {
		width: 100%;
		border-collapse: collapse;
		margin-block: var(--space-4);

		& th,
		& td {
			padding: var(--space-2) var(--space-3);
			border: var(--border-width) solid var(--color-border);
		}

		& th {
			background-color: var(--color-surface);
			font-weight: 600;
		}
	}

	& hr {
		border: none;
		border-block-start: var(--border-width-thick) solid var(--color-border);
		margin-block: var(--space-6);
	}

	& .markdown-viewer__error {
		color: var(--color-error-ink);
		padding: var(--space-4);
		background-color: var(--color-surface);
		border: var(--border-width-thick) solid var(--color-error);
	}

	& .markdown-viewer__source {
		display: none;
	}
}

/* ========================================
 * BREADCRUMB COMPONENT
 * ======================================== */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);

	& a {
		color: var(--color-text-muted);

		&:hover {
			color: var(--color-text);
		}
	}

	& .breadcrumb__separator {
		opacity: 0.5;
	}

	& .breadcrumb__current {
		color: var(--color-text);
	}
}

/* ========================================
 * DIVIDER
 * ======================================== */

.divider {
	height: var(--border-width);
	background-color: var(--color-border);
	margin-block: var(--space-6);
}

/* ========================================
 * CARD COMPONENT
 * ======================================== */

.card {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);

	&.card-short {
		padding: var(--space-4);
	}

	&.card-blue {
		background-color: var(--color-card-blue);
		border-color: var(--color-primary);
	}

	&.card-accent {
		background-color: var(--color-card-accent);
		border-color: var(--color-accent);
	}
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-4);
	margin-block: var(--space-6);
}

/* ========================================
 * BADGE COMPONENT
 * ======================================== */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--space-1);
	font-size: var(--font-size-xs);
	font-weight: 500;
	background-color: transparent;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);

	&.badge-primary {
		color: var(--color-accent-ink);
		border-color: var(--color-primary);
	}

	&.badge-accent {
		color: var(--color-accent-ink);
		border-color: var(--color-accent);
	}

	&.badge-success {
		color: var(--color-success-ink);
		border-color: var(--color-success);
	}

	&.badge-error {
		color: var(--color-error-ink);
		border-color: var(--color-error);
	}

	&.badge-warning {
		color: var(--color-warning-ink);
		border-color: var(--color-warning);
	}

	&.badge-running {
		color: var(--color-info-ink);
		border-color: var(--color-info-ink);
	}
}

/* ========================================
 * TABS COMPONENT
 * ======================================== */

.tabs {
	display: flex;
	gap: 0;
	border-block-end: var(--border-width) solid var(--color-border);
}

.tabs__item {
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	background: none;
	border: none;
	cursor: pointer;

	&:hover {
		color: var(--color-text);
		background-color: var(--color-surface);
	}

	&.is-active {
		color: var(--color-text);
		background-color: var(--color-bg);
		border-block-end: var(--border-width-thick) solid var(--color-accent);
		border-bottom-right-radius: unset;
		border-bottom-left-radius: unset;
	}
}

.modal-overlay .modal__header .tabs {
	margin-inline: calc(-1 * var(--space-6));
	padding-inline: var(--space-6);
}

/* ========================================
 * TABLE WRAPPER
 * ======================================== */

.table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
}

/* ========================================
 * TABLE COMPONENT
 * ======================================== */

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-size-sm);

	& th,
	& td {
		padding: var(--space-2) var(--space-3);
		text-align: left;
		border-bottom: var(--border-width) solid var(--color-border);
		border-right: var(--border-width) solid var(--color-border);
	}

	& th {
		background-color: var(--color-surface);
		font-weight: 600;
	}

	& th:last-child,
	& td:last-child {
		border-right: none;
	}

	& tr:last-child td {
		border-bottom: none;
	}
}

/* ========================================
 * ROW UTILITY
 * ======================================== */

.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}

/* ========================================
 * PROGRESS BAR
 * ======================================== */

.progress {
	width: 100%;
	height: 8px;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	overflow: hidden;

	& .progress__bar {
		height: 100%;
		background-color: var(--color-accent);
		transition: width var(--transition-normal);
	}
}

/* ========================================
 * STORAGE USAGE
 * ======================================== */

.storage-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.storage-card__hint {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);

	&.storage-card__hint--error {
		color: var(--color-error-ink);
	}
}

.storage-bar {
	display: flex;
	height: 12px;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	overflow: hidden;

	& .storage-bar__segment {
		height: 100%;
		flex-shrink: 0;

		&.storage-bar__segment--files {
			background-color: var(--color-storage-files);
		}

		&.storage-bar__segment--logs {
			background-color: var(--color-storage-logs);
		}

		&.storage-bar__segment--other {
			background-color: var(--color-storage-other);
		}
	}
}

.storage-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	list-style: none;
	padding: 0;

	& .storage-legend__item {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--font-size-xs);
	}

	& .storage-legend__swatch {
		width: 10px;
		height: 10px;
		flex-shrink: 0;

		&.storage-legend__swatch--files {
			background-color: var(--color-storage-files);
		}

		&.storage-legend__swatch--logs {
			background-color: var(--color-storage-logs);
		}

		&.storage-legend__swatch--other {
			background-color: var(--color-storage-other);
		}
	}

	& .storage-legend__label {
		color: var(--color-text);
	}

	& .storage-legend__value {
		color: var(--color-text-muted);
	}
}

/* ========================================
 * SEARCH INPUT
 * ======================================== */

.search-input {
	position: relative;

	& input {
		width: 100%;
		padding-inline-start: var(--space-8);
	}

	& .search-input__icon {
		position: absolute;
		left: var(--space-3);
		top: 50%;
		transform: translateY(-50%);
		color: var(--color-text-muted);
	}
}

/* ========================================
 * MODAL COMPONENT
 * ======================================== */

.modal {
	& .modal__title {
		font-size: var(--font-size-xl);
		font-weight: 600;
		margin-block-end: var(--space-4);
	}

	& .modal__body {
		margin-block: var(--space-6);
	}

	& .modal__footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-3);
	}
}

/* ========================================
 * ALERT COMPONENT
 * ======================================== */

.alert {
	padding: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	margin-block: var(--space-4);

	&.alert--error {
		border-color: var(--color-error);
		background-color: var(--color-alert-error-bg);
		color: var(--color-error-ink);
	}

	&.alert--warning {
		border-color: var(--color-warning);
		background-color: var(--color-alert-warning-bg);
		color: var(--color-warning-ink);
	}

	&.alert--success {
		border-color: var(--color-success);
		background-color: var(--color-alert-success-bg);
		color: var(--color-success-ink);
	}

	&.alert--info {
		border-color: var(--color-link);
		background-color: var(--color-alert-info-bg);
		color: var(--color-info-ink);
	}

	&.alert--with-icon {
		display: flex;
		align-items: center;
		gap: var(--space-2);

		& .ph {
			flex-shrink: 0;
		}

		& .alert__message {
			min-width: 0;
		}
	}
}

/* ========================================
 * TOGGLE COMPONENT
 * ======================================== */

.toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;

	& input[type="checkbox"] {
		width: 18px;
		height: 18px;
		cursor: pointer;
	}
}

/* ========================================
 * STAT COMPONENT
 * ======================================== */

.stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);

	& .stat__label {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	& .stat__value {
		font-size: var(--font-size-lg);
		font-weight: 600;
	}

	& .stat__helper {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	&.stat--approaching .stat__value {
		color: var(--color-warning-ink);
	}

	&.stat--warning .stat__value {
		color: var(--color-error-ink);
	}
}

/* ========================================
 * BUTTON SIZE MODIFIER
 * ======================================== */

.btn-sm {
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-size-xs);
}

/* ========================================
 * INLINE FORM
 * ======================================== */

.inline-form {
	display: inline;
}

/* ========================================
 * FORM GROUP
 * ======================================== */

.form-group {
	margin-block-end: var(--space-4);

	& label {
		display: block;
		margin-block-end: var(--space-2);
		font-size: var(--font-size-sm);
		font-weight: 500;
		color: var(--color-text);
	}

	& input:not([type="radio"]):not([type="checkbox"]),
	& textarea,
	& select {
		width: 100%;
	}

	& textarea {
		max-width: 100%;
		font-family: var(--font-mono);
		resize: vertical;
	}
}

.form-helper {
	margin-block-start: var(--space-1);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);

	& code {
		background-color: var(--color-surface);
		padding: var(--space-1) var(--space-2);
	}
}

/* Checkbox rows (e.g. agreeing to the Terms at signup). */
.form-group--checkbox {
	& label {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		margin-block-end: 0;
		font-size: var(--font-size-sm);
		font-weight: 400;
		color: var(--color-text-muted);
		cursor: pointer;
	}

	& input[type="checkbox"] {
		width: auto;
		flex: none;
		margin-block-start: 2px;
	}

	& a {
		color: var(--color-link);
	}
}

/* ========================================
 * PASSWORD FIELD ENHANCEMENTS
 * ======================================== */

.password-field {
	position: relative;

	& input {
		padding-inline-end: calc(var(--space-6) + var(--space-3));
	}
}

.password-toggle {
	position: absolute;
	inset-inline-end: var(--space-1);
	top: 50%;
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;

	&:hover {
		color: var(--color-text);
	}

	&:focus-visible {
		outline: var(--border-width-thick) solid var(--color-accent-ink);
		outline-offset: -2px;
	}
}

.password-feedback {
	margin-block-start: var(--space-2);
}

.password-meter {
	height: var(--space-1);
	background: var(--color-surface-hover);
	border: var(--border-width) solid var(--color-border);

	& span {
		display: block;
		height: 100%;
		width: 0;
		background: var(--color-error-ink);
		transition:
			width var(--transition-fast),
			background var(--transition-fast);

		&[data-score="1"] {
			width: 25%;
			background: var(--color-error-ink);
		}

		&[data-score="2"] {
			width: 50%;
			background: var(--color-warning-ink);
		}

		&[data-score="3"] {
			width: 75%;
			background: var(--color-success-ink);
		}

		&[data-score="4"] {
			width: 100%;
			background: var(--color-success-ink);
		}
	}
}

.password-meter__label {
	margin-block: var(--space-1) 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.password-checklist {
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);

	& li {
		&::before {
			content: "\2715";
			display: inline-block;
			width: 1rem;
		}

		&.is-met {
			color: var(--color-success-ink);

			&::before {
				content: "\2713";
			}
		}
	}
}

.password-confirm {
	margin-block-start: var(--space-1);
	font-size: var(--font-size-xs);

	&.is-error {
		color: var(--color-error-ink);
	}

	&.is-ok {
		color: var(--color-success-ink);
	}
}

.password-issues-title {
	margin-block-start: var(--space-2);
	margin-block-end: var(--space-1);
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--color-warning-ink);
}

.password-issues {
	margin: 0;
	padding-inline-start: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);

	& li {
		margin-block-end: var(--space-1);
	}
}

.email-feedback {
	margin-block-start: var(--space-1);
	font-size: var(--font-size-xs);

	& .email-feedback__message {
		margin: 0;

		&.is-error {
			color: var(--color-error-ink);
		}
	}
}

/* ========================================
 * JOBS LIST PAGE
 * ======================================== */

.jobs-list {
	& .jobs-list__header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--space-4);
		margin-block-end: var(--space-6);

		& h1 {
			margin-block-end: var(--space-1);
		}
	}

	& .jobs-list__stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: stretch;
		gap: var(--space-4);
		margin-block-end: var(--space-6);
	}

	& .jobs-list__stat-card {
		min-width: 0;

		&:not(.storage-card) {
			display: flex;
			flex-direction: column;

			& .stat {
				flex: 1;
				justify-content: space-between;
			}

			& .stat__value {
				font-size: var(--font-size-xl);
			}
		}
	}

	& .storage-card {
		grid-column: span 2;

		& .stat {
			flex-direction: row;
			align-items: baseline;
			justify-content: space-between;
			gap: var(--space-2);
		}

		& .stat__value {
			font-size: var(--font-size-base);
			text-align: right;
			white-space: nowrap;
		}
	}

	& .jobs-list__filters {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		margin-block-end: var(--space-4);
	}

	& .jobs-list__filter-select {
		max-width: 160px;
	}

	& .jobs-list__empty {
		text-align: center;
	}

	& .jobs-list__script-cell {
		max-width: 200px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		& a {
			color: var(--color-link);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

@media (max-width: 899px) {
	.jobs-list .jobs-list__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jobs-list .jobs-list__stats .storage-card {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.jobs-list .jobs-list__stats {
		grid-template-columns: 1fr;
	}

	.jobs-list .jobs-list__stats .storage-card {
		grid-column: auto;
	}
}

/* Directory Tree */
.dir-tree {
	list-style: none;
	padding: 0;
	margin: 0;

	& .dir-tree__item {
		margin: 0;
	}

	& .dir-tree__folder-header {
		display: flex;
		align-items: center;
	}

	& .dir-tree__toggle {
		display: flex;
		align-items: center;
		padding: var(--space-1);
		border: none;
		background: transparent;
		cursor: pointer;
		color: var(--color-text-muted);

		&:hover {
			color: var(--color-text);
		}

		& .dir-tree__arrow {
			font-size: var(--font-size-sm);
			transition: transform 0.1s ease;
		}

		&[aria-expanded="true"] .dir-tree__arrow {
			transform: rotate(90deg);
		}
	}

	& .dir-tree__children[hidden] {
		display: none;
	}

	& .dir-tree__children {
		margin-inline-start: var(--space-3);
		border-inline-start: 1px solid var(--color-text-muted);
		padding: 0 var(--space-1);
	}

	& .dir-tree__folder-link {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		flex: 1;
		padding: var(--space-1) var(--space-1);
		text-decoration: none;
		color: var(--color-text);
		font-size: var(--font-size-sm);

		&:hover {
			background: var(--color-surface-hover);
		}

		&.is-selected {
			background: var(--color-primary);
			color: var(--color-on-accent);
			border-radius: var(--radius);

			& .dir-tree__icon {
				color: var(--color-on-accent);
			}
		}
	}

	& .dir-tree__folder-name {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		flex: 1;
		padding: var(--space-1);
		font-size: var(--font-size-sm);
		color: var(--color-text);

		&:hover {
			background: var(--color-surface-hover);
		}
	}

	& .dir-tree__icon {
		color: var(--color-text-muted);
	}

	& .dir-tree__name {
		flex: 1;
		font-size: var(--font-size-sm);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	& ul.dir-tree {
		padding-inline-start: 0;
	}

	& .dir-tree__file--disabled {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-1);
		color: var(--color-text-muted);
		opacity: 0.5;
		cursor: default;
	}

	& .dir-tree__file-link {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		width: 100%;
		padding: var(--space-1) var(--space-2);
		background: none;
		border: none;
		border-inline-start: 3px solid transparent;
		cursor: pointer;
		color: var(--color-text);
		text-align: left;
		font-size: var(--font-size-sm);
		text-decoration: none;

		&:hover {
			background: var(--color-surface-hover);
		}

		&.is-selected {
			background: var(--color-primary);
			color: var(--color-on-accent);
			border-inline-start-color: var(--color-on-accent);
			border-radius: var(--radius);

			& .dir-tree__icon {
				color: var(--color-on-accent);
			}
		}
	}

	/* Loading placeholder row */
	& .dir-tree__loading {
		display: none;

		& .ph-spinner {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
			animation: dir-tree__spin 0.6s linear infinite;
		}
	}

	& .dir-tree__folder.htmx-request .dir-tree__loading {
		display: flex;
		align-items: center;
		padding: var(--space-1);
	}
}

@keyframes dir-tree__spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Full-width form group override */
.form-group--full-width {
	& input,
	& textarea,
	& select {
		max-width: 100%;
	}
}

/* Input with button (script path + browse) */
.input-with-button {
	display: flex;
	gap: var(--space-2);

	& input {
		flex: 1;
		max-width: 100%;
	}

	& .btn {
		flex-shrink: 0;
	}
}

.dir-list {
	list-style: none;
	padding: 0;
	margin: 0;

	& .dir-list__item {
		margin: 0;
	}

	& .dir-list__link {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		width: 100%;
		padding: var(--space-2) var(--space-3);
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-text);
		text-align: left;
		font-size: var(--font-size-base);

		&:hover {
			background: var(--color-surface-hover);
		}

		& .dir-list__icon {
			color: var(--color-text-muted);
		}
	}
}

/* ========================================
  * WORKBENCH PAGE
  * ======================================== */

.layout-twocol__sidebar {
	& .dir-tree {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding: 0;
		list-style: none;

		& .dir-tree {
			list-style: none;
		}
	}

	& .dir-tree__arrow {
		color: var(--color-text-muted);
		font-size: var(--font-size-xs);
		margin-inline-end: var(--space-1);
	}

	& .workbench__add-section {
		margin-block-start: var(--space-4);
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--color-border);

		& h3 {
			margin-block-end: var(--space-3);
			font-size: var(--font-size-base);
		}
	}

	& .workbench__add-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	& .workbench__add-actions {
		display: flex;
		gap: var(--space-2);
		margin-block-start: var(--space-1);
	}
}

.workbench__content {
	min-height: 400px;

	& .breadcrumb {
		margin-block-end: var(--space-4);
		font-size: var(--font-size-base);
	}
}

.workbench__card {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.workbench__card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface-hover);
	border-bottom: var(--border-width) solid var(--color-border);

	& .workbench__header-name {
		display: flex;
		align-items: center;
		gap: var(--space-2);

		& .workbench__rename {
			color: var(--color-text-muted);
			font-size: 14px;
			text-decoration: none;

			&:hover {
				color: var(--color-text);
			}
		}
	}
}

.workbench__card-content {
	padding: 0;
}

.workbench__card-footer {
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface-hover);
	border-top: var(--border-width) solid var(--color-border);

	& .workbench__actions {
		margin-block-start: 0;
	}
}

.workbench__content:has(.workbench__editor) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 520px;

	& .workbench__card {
		flex: 0 1 auto;
		height: 100%;
		min-height: 200px;
		display: flex;
		flex-direction: column;
		resize: vertical;
	}

	& .workbench__card-header,
	& .workbench__card-footer {
		flex: none;
	}

	& .workbench__card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
}

.workbench__content-body {
	padding: var(--space-4);

	&:has(.workbench__editor) {
		padding: 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
}

.workbench__filename {
	font-size: var(--font-size-sm);
	color: var(--color-text);
}

.workbench__btn-group {
	display: inline-flex;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);

	& .workbench__btn-group-item {
		background: none;
		border: none;
		border-inline-end: 1px solid var(--color-border);
		padding: var(--space-1) var(--space-2);
		cursor: pointer;
		color: var(--color-text-muted);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		font-size: var(--font-size-base);

		&:last-child {
			border-inline-end: none;
		}

		&:hover {
			background: var(--color-surface-hover);
			color: var(--color-text);
		}
	}
}

.workbench__textarea {
	flex: 1;
	width: 100%;
	min-height: 400px;
	padding: var(--space-3);
	background: var(--color-bg);
	border: none;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	resize: vertical;

	&[readonly] {
		background: var(--color-surface);
		cursor: default;
	}
}

.workbench__editor {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	border: none;
	border-radius: 0;
	margin-block: 0;
	overflow: hidden;

	& .cm-editor {
		flex: 1;
		min-height: 0;
	}

	& .cm-scroller {
		overflow: auto;
	}
}

.workbench__image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.workbench__image {
	max-width: 100%;
	max-height: 500px;
	object-fit: contain;
}

.workbench__file-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.workbench__file-list li {
	border-bottom: var(--border-width) solid var(--color-border);
}

.workbench__file-list li:last-child {
	border-bottom: none;
}

.workbench__file-list li:hover {
	background: var(--color-surface-hover);
}

.workbench__file-link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	color: var(--color-text);
	text-decoration: none;
}

.workbench__file-name {
	font-size: var(--font-size-sm);
	flex: 1;
}

.workbench__file-date {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.workbench__edit-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	gap: var(--space-3);
}

.workbench__actions {
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
	margin-block-start: var(--space-3);
}

.workbench__delete-card {
	max-width: 500px;
}

/* Workbench manual run: a two-step panel — "Run" reveals the
   per-run environment editor and the "Start run" enqueue control.
   Output lands in the console slot below; it must not flex-shrink the
   editor above it — output scrolls inside the .console box instead. */
.workbench__start-run-btn:disabled {
	opacity: 0.5;
	cursor: wait;
}

.workbench__run-panel {
	flex: none;
	margin-block-start: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);

	& .workbench__run-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		list-style: none;
		cursor: pointer;
		user-select: none;

		&::-webkit-details-marker {
			display: none;
		}

		&:hover {
			background: var(--color-surface-hover);
		}

		&:focus-visible {
			outline: var(--border-width-thick) solid var(--color-accent-ink);
			outline-offset: -2px;
		}
	}

	& .workbench__run-heading {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--font-size-base);
		margin: 0;
	}

	& .workbench__run-caret {
		transition: rotate 150ms ease;
	}

	&[open] .workbench__run-caret {
		rotate: 180deg;
	}

	&[open] .workbench__run-summary {
		border-block-end: var(--border-width) solid var(--color-border);
	}

	& .workbench__run-actions {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-2);
	}

	& .workbench__run-panel-body {
		padding: var(--space-3);
	}

	& .form-group p {
		font-size: var(--font-size-sm);
	}

	& textarea[name="runEnv"] {
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		background: var(--color-bg);
		color: var(--color-text);
		resize: vertical;
	}
}

.workbench__run-job-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.workbench__run-alert {
	flex: none;
	margin-block-start: var(--space-4);

	&:empty {
		display: none;
	}

	& .alert {
		margin-block: 0;
	}
}

.workbench__run-error {
	&:empty {
		display: none;
	}

	&:not(:empty) {
		margin-block-start: var(--space-3);
	}
}

/* Run console slot on the workbench: an HTMX target that receives the
   run-console fragment after the run starts. It must not flex-shrink
   the editor above it — output scrolls inside the .console box. */
.workbench__run-console-slot {
	flex: none;
	margin-block-start: var(--space-4);

	&:empty {
		display: none;
	}

	& .console {
		max-height: 240px;
		overflow-y: auto;
	}
}

.run-console__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-end: var(--space-2);
}

.run-console__title {
	font-size: var(--font-size-base);
	margin: 0;
}

.run-console__open-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-sm);
	color: var(--color-link);
	text-decoration: none;
	margin-inline-start: auto;

	&:hover {
		text-decoration: underline;
	}
}

.run-console__waiting {
	margin-block-end: var(--space-2);
}

.run-attempt {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-block-start: var(--space-3);

	& .run-attempt__header {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		background: var(--color-surface-hover);
		border-block-end: var(--border-width) solid var(--color-border);
	}

	& .run-attempt__label {
		font-weight: 600;
		font-size: var(--font-size-sm);
	}

	& .run-attempt__next {
		margin-inline-start: auto;
	}

	& .run-attempt__error {
		padding: var(--space-2) var(--space-3);
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		color: var(--color-error-ink);
		border-block-end: var(--border-width) solid var(--color-border);
	}

	/* The attempt box is the only outline; strip the nested console chrome. */
	& .console {
		padding: var(--space-2) var(--space-3);
		border: none;
		border-radius: 0;
	}
}

.workbench__delete-path {
	margin-block: var(--space-3);

	& code {
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		color: var(--color-text);
		background: var(--color-bg);
		padding: var(--space-1) var(--space-2);
		border: 1px solid var(--color-border);
	}
}

.workbench__add-card {
	max-width: 500px;

	& .divider {
		margin-block: var(--space-4);
	}
}

.job-form__card {
	padding: var(--space-5);

	& h3 {
		margin-block-end: var(--space-4);
		font-size: var(--font-size-base);
		font-weight: 600;
	}
}

.job-form__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);

	& .form-helper {
		margin-block: var(--space-1) 0;
	}
}

.form-help-link {
	white-space: nowrap;
}

.job-form__actions {
	display: flex;
	gap: var(--space-3);
	justify-content: flex-end;
	margin-block-start: var(--space-6);
}

.job-create__bottom-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-block-start: var(--space-6);

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}

	& .card {
		margin: 0;

		& h3 {
			margin-block-end: var(--space-3);
			font-size: var(--font-size-base);
			font-weight: 600;
		}
	}
}

.workbench__new-form {
	& input[type="text"] {
		width: 100%;
	}
}

.workbench__target-path {
	margin-block: var(--space-2);

	& code {
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		color: var(--color-text);
		background: var(--color-bg);
		padding: var(--space-1) var(--space-2);
		border: 1px solid var(--color-border);
	}
}

.workbench__type-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-start: var(--space-2);
}

.workbench__type-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	font-size: var(--font-size-sm);

	& input[type="radio"] {
		accent-color: var(--color-accent-ink);
	}
}

.workbench__upload-form {
	& input[type="file"] {
		width: 100%;
	}
}

/* ========================================
 * MODAL OVERLAY COMPONENT
 * ======================================== */

.modal-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;

	&[hidden] {
		display: none;
	}

	& .modal-overlay__backdrop {
		position: absolute;
		inset: 0;
		background-color: var(--color-bg);
		opacity: 0.9;
		cursor: pointer;
	}

	& .modal-overlay__content {
		position: relative;
		max-width: 500px;
		width: 90%;
		background-color: var(--color-surface);
		border-radius: var(--radius);
		padding: var(--space-6);
		z-index: 1;
	}

	& .modal__header {
		margin-block-end: var(--space-4);

		& .modal__header-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		& h2 {
			font-size: var(--font-size-xl);
			font-weight: 600;
			margin: 0;
		}

		& .modal__close {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			background: none;
			border: unset;
			border-radius: var(--radius);
			cursor: pointer;
			color: var(--color-text-muted);
			font-size: var(--font-size-lg);

			&:hover {
				background-color: var(--color-surface-hover);
				color: var(--color-text);
			}
		}

		& .tabs {
			margin-block-start: var(--space-3);
		}
	}

	& .modal-overlay__tab-content {
		display: none;

		&.is-active {
			display: block;
		}
	}

	& .modal__body {
		margin-block: var(--space-4);
	}

	& .modal__footer {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-3);
		margin-block-start: var(--space-4);
	}
}

/* ========================================
 * UPLOAD DROPZONE
 * ======================================== */

.upload-dropzone {
	position: relative;
	padding: var(--space-6);
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius);
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--transition-fast),
		background-color var(--transition-fast);

	&:hover,
	&.is-dragover {
		border-color: var(--color-accent);
		background-color: var(--color-surface-hover);
	}

	& .upload-dropzone__icon {
		font-size: var(--font-size-2xl);
		color: var(--color-text-muted);
	}

	& .upload-dropzone__text {
		margin-block-start: var(--space-2);
		color: var(--color-text-muted);
		font-size: var(--font-size-sm);
	}

	& .upload-dropzone__filename {
		margin-block-start: var(--space-2);
		color: var(--color-text);
		font-size: var(--font-size-sm);
		font-family: var(--font-mono);
	}

	&.has-file .upload-dropzone__content {
		display: none;
	}
}

/* ========================================
 * RUNS LIST PAGE
 * ======================================== */

.runs-list {
	& .runs-list__header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--space-4);
		margin-block-end: var(--space-4);

		& h1 {
			margin-block-end: var(--space-1);
		}
	}

	& .runs-list__filters {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		margin-block-end: var(--space-4);
	}

	& .runs-list__filter-select {
		max-width: 160px;
	}

	& .runs-list__script-cell {
		max-width: 200px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		& a {
			color: var(--color-link);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	& .runs-list__row-actions {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);

		& form {
			display: inline-flex;
			margin-block: 0;
		}

		& .runs-list__delete:hover {
			color: var(--color-error-ink);
			border-color: var(--color-error-ink);
		}
	}

	& .runs-list__pagination {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		align-items: center;
		justify-content: center;
		margin-block-start: var(--space-4);
	}

	& .runs-list__page-form {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	& .runs-list__page-input {
		width: 4.5rem;
		padding: var(--space-1) var(--space-2);
		text-align: center;
	}

	& .runs-list__page-info {
		padding: var(--space-1) var(--space-2);
	}

	& .runs-list__page-form {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	& .runs-list__page-input {
		width: 4.5rem;
		padding: var(--space-1) var(--space-2);
		text-align: center;
	}

	& .runs-list__page-info {
		padding: var(--space-1) var(--space-2);
	}

	& .runs-list__empty {
		text-align: center;
	}
}

/* ========================================
 * BADGE RUNNING STATE
 * ======================================== */

.badge-running .ph-spinner {
	animation: badge-spin 0.6s linear infinite;
}

@keyframes badge-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ========================================
 * RUNS DETAIL PAGE
 * ======================================== */

.runs-detail {
	& .runs-detail__header {
		margin-block-end: var(--space-6);
	}

	& .runs-detail__title-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-block-end: var(--space-4);

		& h1 {
			margin-block-end: 0;
		}

		& .runs-detail__actions {
			margin-inline-start: auto;
			display: flex;
			align-items: center;
			gap: var(--space-2);
		}
	}

	& .runs-detail__meta {
		display: flex;
		flex-direction: column;
		background-color: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius);
	}

	& .runs-detail__meta-row {
		display: flex;
		gap: var(--space-4);
		padding: var(--space-3) var(--space-4);
	}

	& .runs-detail__meta-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		min-width: 0;
	}

	& .runs-detail__meta-label {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	& .runs-detail__meta-value {
		font-size: var(--font-size-sm);
		color: var(--color-text);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		& a {
			color: var(--color-link);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	& .runs-detail__error {
		margin-block-start: var(--space-4);
	}

	& .runs-detail__console-section {
		& h2 {
			margin-block-end: var(--space-4);
		}
	}
}

/* ========================================
 * CONSOLE COMPONENT
 * ======================================== */

.console {
	padding: var(--space-4);
	background-color: var(--ayu-light-surface-sunk);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	overflow-x: auto;
	max-height: 600px;

	& .console__entry {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		padding: 0;
	}

	& .console__timestamp {
		color: var(--color-text-muted);
		white-space: nowrap;
		flex-shrink: 0;
	}

	& .console__type {
		flex-shrink: 1;
		min-width: 80px;
		padding-inline: var(--space-1);
		word-break: break-word;

		&.console__type--event {
			color: var(--color-accent-ink);
			font-weight: 500;
		}
	}

	& .console__message {
		flex: 1;
		min-width: 0;
		color: var(--color-text);
		white-space: pre-wrap;
		word-break: break-word;
	}

	& .console__message--error {
		color: var(--color-error-ink);
	}

	& .console__error-icon {
		flex-shrink: 0;
		color: var(--color-error-ink);
	}

	& .console__message--warn {
		color: var(--color-warning-ink);
	}

	& .console__message--info {
		color: var(--color-info-ink);
	}

	& .console__message--debug,
	& .console__message--trace {
		color: var(--color-text-muted);
	}
}

/* Dark theme console uses darker sunk background */
[data-theme="dark"] .console {
	background-color: var(--ayu-mirage-surface-sunk);
}

/* ========================================
 * SETTINGS PAGE
 * ======================================== */

.settings {
	max-width: 560px;
	margin-inline: auto;
	display: grid;
	gap: var(--space-4);

	& h3 .badge {
		vertical-align: middle;
		margin-inline-start: var(--space-2);
	}
}

@media (max-width: 768px) {
	.settings .card-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
}