/* Uniform workspace-tab width, manual resize affordance, and shared settings. */

:root {
	/* JS replaces this with calc(<rendered width> * var(--rpx)) after measuring
	   the available strip. Keeping the initial token valid prevents a first-paint
	   flex fallback from returning count-dependent tab widths. */
	--tab-width: calc(160 * var(--rpx));
}

.tabrow-resize {
	display: none;
}

.tabrow-resize-guide {
	position: fixed;
	z-index: calc(var(--z-dock) + 1);
	width: max(1px, var(--rpx));
	background: var(--focus);
	box-shadow: 0 0 0 max(1px, var(--rpx)) var(--accent-soft);
	pointer-events: none;
}

.tabrow-resize-value {
	position: absolute;
	top: calc(-28 * var(--rpx));
	left: calc(6 * var(--rpx));
	padding: calc(3 * var(--rpx)) calc(6 * var(--rpx));
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--float);
	box-shadow: var(--depth-float);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: var(--text-small);
	line-height: 1.2;
	white-space: nowrap;
}

.tabrow-width-controls {
	flex: 0 0 auto;
	min-width: 0;
	margin-top: calc(6 * var(--rpx));
	padding: calc(8 * var(--rpx)) 0 0;
	border-top: 1px solid var(--line);
}

.tabrow-width-controls label {
	display: block;
	margin-bottom: calc(4 * var(--rpx));
	color: var(--text-2);
	font-size: var(--text-small);
	font-weight: 600;
}

.tabrow-width-controls-copy,
.tabrow-width-status,
.tabrow-width-error {
	display: block;
	margin-top: calc(4 * var(--rpx));
	color: var(--text-3);
	font-size: var(--text-small);
	line-height: 1.35;
}

.tabrow-width-error {
	color: var(--danger-text);
}

.tabrow-width-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: calc(4 * var(--rpx));
	min-width: 0;
}

.tabrow-width-field .tabrow-width-label {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.tabrow-width-input {
	box-sizing: border-box;
	grid-column: 1;
	min-width: 0;
	min-height: var(--touch-target);
	padding: 0 calc(8 * var(--rpx));
	border: 1px solid var(--line-control);
	border-radius: var(--r-field);
	background: var(--well);
	box-shadow: var(--depth-sunken);
	color: var(--text);
	font: inherit;
	font-size: 16px;
}

.tabrow-width-apply,
.tabrow-width-reset {
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--touch-target);
	padding-inline: calc(8 * var(--rpx));
	font-size: var(--text-small);
}

.tabrow-width-reset {
	width: 100%;
	margin-top: calc(4 * var(--rpx));
}

/* Density loads after this sheet. These declarations retain fixed right-side
   chrome and the fine-pointer new-tab floor when Compact lowers shell controls. */
html[data-site-density="compact"] .tabrow .tabrow-all {
	width: calc(80 * var(--rpx));
	min-width: calc(80 * var(--rpx));
	max-width: calc(80 * var(--rpx));
}

@media (min-width: 1024px) and (pointer: fine) and (not (any-pointer: coarse)) {
	html[data-site-density="compact"] .tabrow :is(.tabrow-all, .tabrow-new) {
		min-height: calc(36 * var(--rpx));
		height: calc(36 * var(--rpx));
	}

	.tabrow-resize {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		display: block;
		width: calc(8 * var(--rpx));
		height: 100%;
		cursor: col-resize;
		opacity: 0;
		touch-action: none;
	}

	.tabrow-item:hover .tabrow-resize,
	.tabrow-item:focus-within .tabrow-resize,
	.tabrow-resize:focus-visible {
		opacity: 1;
	}

	.tabrow-resize::before {
		content: "";
		position: absolute;
		top: 20%;
		bottom: 20%;
		left: 50%;
		width: 1px;
		transform: translateX(-50%);
		background: var(--accent);
	}

	.tabrow-width-input {
		min-height: calc(28 * var(--rpx));
		font-size: var(--text-small);
	}

	.tabrow-width-apply,
	.tabrow-width-reset {
		min-height: calc(28 * var(--rpx));
	}
}

/* The compact Density sheet loads after shell CSS. This selector must be more
   specific so a touch-capable hybrid never inherits its 30-rendered-pixel keys. */
@media (any-pointer: coarse) {
	html[data-site-density="compact"] .tabrow :is(.tabrow-close, .tabrow-new, .tabrow-all) {
		min-width: calc(44 * var(--rpx));
		min-height: calc(44 * var(--rpx));
		height: calc(44 * var(--rpx));
	}

	html[data-site-density="compact"] .tabrow .tabrow-close {
		width: calc(44 * var(--rpx));
	}
}

@media (forced-colors: active) {
	.tabrow-resize-guide {
		background: Highlight;
		box-shadow: none;
		outline: 1px solid CanvasText;
	}

	.tabrow-resize-value {
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tabrow-resize,
	.tabrow-resize-guide,
	.tabrow-resize-value {
		transition: none;
	}
}