@import "tailwindcss";
@import "@chopin/visuals/theme.css";

/*
 * Sibling packages that build on these utilities.
 *
 * They are reached through workspace symlinks, which Tailwind's automatic
 * content detection skips — without these the classes in the editor and the
 * questionnaire views resolve to nothing at all, silently.
 * `.ts` is included because shared class lists can live outside components.
 */
@source "../../../packages/editor/src/**/*.{ts,tsx}";
@source "../../../packages/question/src/**/*.{ts,tsx}";

@utility ring-hairline {
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));
}

:where([data-nucleo-icon]) {
	color: var(--color-icon);
}

:where(.btn-primary, .btn-destructive) [data-nucleo-icon] {
	color: inherit;
}

@utility control-edge {
	border: var(--edge-width) solid var(--color-control-edge);

	&:disabled {
		border-color: var(--color-edge);
	}
}

@utility btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
	white-space: nowrap;

	&:disabled {
		cursor: default;
		opacity: 0.4;
	}
}

@utility btn-md {
	height: 2rem;
	padding-inline: calc(var(--spacing) * 3);
}

@utility btn-sm {
	height: 1.5rem;
	padding-inline: calc(var(--spacing) * 2);
}

@utility btn-icon {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.4375rem;
}

@utility btn-primary {
	background-color: var(--color-brand);
	box-shadow: var(--shadow-resting);
	color: var(--color-page);
	outline: var(--edge-width) solid rgb(0 0 0 / 15%);
	outline-offset: calc(-1 * var(--edge-width));

	&:hover:not(:disabled) {
		background-color: var(--color-brand-hover);
	}

	&:active:not(:disabled) {
		background-color: var(--color-brand-active);
	}
}

@utility btn-secondary {
	background-color: var(--color-gray-200);
	color: var(--color-text-primary);
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));

	&:hover:not(:disabled) {
		background-color: var(--color-gray-300);
	}

	&:active:not(:disabled) {
		background-color: var(--color-gray-400);
	}
}

@utility btn-ghost {
	background-color: transparent;
	color: var(--color-text-secondary);

	&:hover:not(:disabled) {
		background-color: var(--color-gray-200);
	}

	&:active:not(:disabled) {
		background-color: var(--color-gray-300);
	}
}

@utility btn-destructive {
	background-color: var(--color-destructive);
	color: var(--color-page);
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));

	&:hover:not(:disabled) {
		background-color: var(--color-destructive-hover);
	}

	&:active:not(:disabled) {
		background-color: var(--color-destructive-active);
	}
}

@utility field {
	border: var(--edge-width) solid var(--color-control-edge);
	border-radius: var(--radius-md);
	background-color: var(--color-page);
	color: var(--color-text-primary);

	&:disabled {
		border-color: var(--color-edge);
		background-color: var(--color-gray-200);
		color: var(--color-gray-600);
	}

	&[aria-invalid="true"] {
		border-color: var(--color-destructive);
		outline: 2px solid var(--color-destructive);
		outline-offset: 2px;
	}
}

@utility field-ghost {
	border: var(--edge-width) solid transparent;
	border-radius: var(--radius-md);
	background-color: transparent;
	color: var(--color-text-primary);

	&:hover:not(:disabled) {
		border-color: var(--color-control-edge);
	}

	&:disabled {
		border-color: var(--color-edge);
		background-color: var(--color-gray-200);
		color: var(--color-gray-600);
	}
}

@utility choice-control {
	appearance: none;
	border: var(--edge-width) solid var(--color-control-edge);
	background-color: var(--color-page);
	color: var(--color-text-primary);

	&[type="radio"] {
		border-radius: 9999px;
	}

	&[type="checkbox"] {
		border-radius: var(--radius-sm);
	}

	&:checked {
		border-color: var(--color-brand);
		background-color: var(--color-brand);
	}

	&[type="radio"]:checked {
		box-shadow: inset 0 0 0 3px var(--color-page);
	}

	&[type="checkbox"]:checked {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 7 2.5 2.5L11 4'/%3E%3C/svg%3E");
	}

	&:disabled {
		border-color: var(--color-edge);
		background-color: var(--color-gray-200);
		color: var(--color-gray-600);
	}

	&:disabled:checked {
		background-color: var(--color-gray-600);
	}

	&[type="radio"]:disabled:checked {
		box-shadow: inset 0 0 0 3px var(--color-gray-200);
	}

	&[type="checkbox"]:disabled:checked {
		background-color: var(--color-gray-200);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23605e56' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 7 2.5 2.5L11 4'/%3E%3C/svg%3E");
	}
}

/* Extra contrast is an opt-in accommodation, not the normal control edge. */
@media (prefers-contrast: more) {
	:where(.control-edge, .field, .choice-control):not([aria-invalid="true"]) {
		outline: var(--edge-width) solid var(--color-control-boundary);
		outline-offset: calc(-1 * var(--edge-width));
	}

	:where(.control-edge, .field, .choice-control):disabled {
		outline-color: var(--color-edge);
	}
}

@utility hairline-t {
	border-top: var(--edge-width) solid var(--color-edge);
}

@utility hairline-r {
	border-right: var(--edge-width) solid var(--color-edge);
}

@utility hairline-b {
	border-bottom: var(--edge-width) solid var(--color-edge);
}

@utility hairline-l {
	border-left: var(--edge-width) solid var(--color-edge);
}

@media (min-resolution: 2dppx) {
	:root {
		--edge-width: 0.5px;
	}
}
html,
body {
	height: 100%;
	overflow-x: hidden;
}

#root {
	position: fixed;
	left: var(--app-left, 0px);
	top: var(--app-top, 0px);
	width: var(--app-width, 100%);
	height: 100%;
	height: var(--app-height, 100dvh);
}

.motion-dropdown {
	opacity: 0;
	transform: scale(var(--dropdown-pre-scale));
	transition:
		opacity var(--dropdown-open-dur) var(--dropdown-ease),
		transform var(--dropdown-open-dur) var(--dropdown-ease);
	will-change: opacity, transform;
}

.motion-dropdown.is-open {
	opacity: 1;
	transform: scale(1);
}

.motion-dropdown.is-closing {
	pointer-events: none;
	opacity: 0;
	transform: scale(var(--dropdown-closing-scale));
	transition-duration: var(--dropdown-close-dur);
}

.motion-popover {
	opacity: 0;
	transform: scale(var(--dropdown-pre-scale));
	transform-origin: var(--motion-origin-x, 50%) var(--motion-origin-y, 50%);
	transition:
		opacity var(--dropdown-open-dur) var(--dropdown-ease),
		transform var(--dropdown-open-dur) var(--dropdown-ease);
	will-change: opacity, transform;
}

.motion-popover.is-open {
	opacity: 1;
	transform: scale(1);
}

.motion-popover.is-closing {
	pointer-events: none;
	opacity: 0;
	transform: scale(var(--dropdown-closing-scale));
	transition-duration: var(--dropdown-close-dur);
}

.motion-popover[data-motion-immediate] {
	transition: none;
}

.motion-collapse {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--acc-expand) var(--motion-move);
}

.motion-collapse-content {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity var(--acc-expand) var(--motion-move),
		transform var(--acc-expand) var(--motion-move);
}

.motion-collapse.is-open {
	grid-template-rows: 1fr;
}

.motion-collapse.is-open > .motion-collapse-content {
	opacity: 1;
	transform: translateY(0);
}

.motion-collapse.is-closing {
	grid-template-rows: 0fr;
	transition-duration: var(--acc-collapse);
}

.motion-collapse.is-closing > .motion-collapse-content {
	opacity: 0;
	transform: translateY(-4px);
	transition-duration: var(--acc-collapse);
}

.motion-feedback[data-motion-feedback="icon"] {
	transform: none;
}

.motion-feedback[data-motion-feedback="count"] {
	transform: none;
}

.motion-feedback[data-motion-feedback="alert"] {
	transform: none;
}

:root[data-motion-input="pointer"] .motion-feedback[data-motion-feedback="icon"] {
	transition-property: opacity, transform;
	transition-duration: var(--icon-swap-dur);
	transition-timing-function: var(--motion-smooth-out);
}

:root[data-motion-input="pointer"] .motion-feedback[data-motion-feedback="count"] {
	transition-property: opacity, transform;
	transition-duration: var(--badge-pop-dur);
	transition-timing-function: var(--motion-smooth-out);
}

:root[data-motion-input="pointer"] .motion-feedback[data-motion-feedback="alert"] {
	transition-property: opacity, transform;
	transition-duration: var(--toast-open);
	transition-timing-function: var(--motion-smooth-out);
}

@starting-style {
	.motion-feedback[data-motion-feedback="icon"] {
		opacity: 0;
		transform: scale(0.96);
	}

	.motion-feedback[data-motion-feedback="count"] {
		opacity: 0;
		transform: translateY(2px) scale(0.96);
	}

	.motion-feedback[data-motion-feedback="alert"] {
		opacity: 0;
		transform: translateY(4px);
	}
}

.chat-toggle-icon-close {
	opacity: 0;
}

.chat-toggle:is(:hover, :focus-visible) .chat-toggle-icon-default {
	opacity: 0;
}

.chat-toggle:is(:hover, :focus-visible) .chat-toggle-icon-close {
	opacity: 0.5;
}

:root[data-motion-input="pointer"] .chat-toggle-icon {
	transition: opacity var(--duration-fast) var(--ease-out);
}

:root[data-motion-input="pointer"] .motion-picker-option {
	transition:
		background-color var(--duration-fast) var(--ease-out),
		scale var(--duration-fast) var(--ease-out);
}

body {
	margin: 0;
	background: var(--color-ground);
	color: var(--color-text-primary);
	font-family: var(--font-sans);

	/* macOS subpixel smoothing thickens Inter past the weight asked for. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* One owner per edge: top chrome owns the top inset, compact navigation the bottom one. */
.room-header {
	padding-right: calc(0.5rem + env(safe-area-inset-right));
	padding-left: calc(0.5rem + env(safe-area-inset-left));
	padding-top: calc(0.5rem + env(safe-area-inset-top));
}

.hosted-header {
	height: calc(3.5rem + env(safe-area-inset-top));
	padding-right: calc(0.75rem + env(safe-area-inset-right));
	padding-left: calc(0.75rem + env(safe-area-inset-left));
	padding-top: env(safe-area-inset-top);
}

.workspace-navigation {
	padding-right: calc(0.25rem + env(safe-area-inset-right));
	padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
	padding-left: calc(0.25rem + env(safe-area-inset-left));
}

.workspace-navigation [aria-current="page"] {
	background-color: var(--color-page);
	color: var(--color-text-primary);
	box-shadow: var(--shadow-resting);
}

/* The split workspace is one elevated surface; its panes only own the divider. */
.workspace-frame .plan-document {
	box-shadow: none;
}

.workspace-frame .workspace-chat-panel {
	border-color: rgb(0 0 0 / 9%);
}

.motion-panel {
	opacity: 0;
	transform: translateX(var(--panel-distance));
	transition:
		opacity var(--panel-open-dur) var(--motion-smooth-out),
		transform var(--panel-open-dur) var(--motion-smooth-out);
	will-change: opacity, transform;
}

.motion-panel.is-open {
	opacity: 1;
	transform: translateX(0);
}

.motion-panel.is-closing {
	pointer-events: none;
	opacity: 0;
	transform: translateX(var(--panel-distance));
	transition-duration: var(--panel-close-dur);
}

.content-swap-stack {
	display: grid;
}

.content-swap-stack > .motion-content-swap {
	grid-area: 1 / 1;
	min-width: 0;
}

.motion-content-swap {
	opacity: 0;
	transform: translateX(var(--page-slide-distance));
	transition:
		opacity var(--page-slide-dur) var(--motion-smooth-out),
		transform var(--page-slide-dur) var(--motion-smooth-out);
	will-change: opacity, transform;
}

.motion-content-swap.is-open {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.motion-content-swap.is-closing {
	pointer-events: none;
	opacity: 0;
	transform: translateX(calc(var(--page-slide-distance) * -1));
}

.workspace-root:not([data-workspace-mode="split"]) .workspace-chat-panel {
	position: absolute;
	inset: 0;
	z-index: 10;
}

.chat-composer .field {
	height: 98px;
	border-color: var(--color-edge);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-resting);
}

.chat-composer .field:focus-within {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.chat-composer textarea:focus {
	outline: none;
}

.chat-header-control:hover:not(:disabled),
.chat-header-control:active:not(:disabled) {
	background-color: transparent;
}

.chat-composer .send-action:disabled {
	background-color: var(--color-brand);
	color: var(--color-page);
}

@media (min-width: 640px) {
	.room-header {
		padding-right: calc(1.25rem + env(safe-area-inset-right));
		padding-left: calc(1.25rem + env(safe-area-inset-left));
		padding-top: env(safe-area-inset-top);
	}

	.hosted-header {
		padding-right: calc(1.5rem + env(safe-area-inset-right));
		padding-left: calc(1.5rem + env(safe-area-inset-left));
	}
}

@media (min-width: 1200px) {
	/* The desktop composer keeps the same clearance on each exposed edge. */
	.chat-composer {
		padding-inline: 1rem;
		padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	}
}

@media (max-width: 639px) {
	/* Touch-sized header controls and their text labels share a vertical center. */
	.room-header {
		align-items: center;
	}

	.room-member-face:nth-child(n+4) {
		display: none;
	}

	.room-member-overflow {
		display: inline;
	}

	.repository-picker-trigger {
		max-width: min(8rem, 36vw);
	}
}

:root[data-plan-coarse-pointer] .room-header :where(button, summary),
:root[data-plan-coarse-pointer] .chat-composer button,
:root[data-plan-coarse-pointer] .hosted-header button,
:root[data-plan-coarse-pointer] .repository-picker-search,
:root[data-plan-coarse-pointer] .channel-create-input,
:root[data-plan-coarse-pointer] [data-hosted] .btn,
:root[data-plan-coarse-pointer] .question-tab,
:root[data-plan-coarse-pointer] .question-choice-row,
:root[data-plan-coarse-pointer] .question-actions button,
:root[data-plan-coarse-pointer] :where(button, [role="button"])[data-press="wide"] {
	min-width: 44px;
	min-height: 44px;
}

:root[data-plan-coarse-pointer] .question-choice-row {
	padding-block: 0.5rem;
}

.question-custom-answer {
	scroll-margin-block-end: calc(var(--keyboard-inset, 0px) + 1rem);
}

/*
 * What focus looks like, once, for everything that can take it. An outline
 * rather than a ring: it follows `border-radius` and takes no space in the
 * layout. Components may still own their focused fill or other state; the
 * indicator's colour, width, and offset stay here.
 */
[data-focus-boundary] {
	--focus-ring-offset: -2px;
}

:where(a, button, input, select, summary, textarea, [role="button"], [tabindex]):focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* The editable plan has a live caret, so a second focus marker is redundant. */
:where(.focus-caret):focus-visible {
	outline: none;
}

.workspace-working-indicator {
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 9999px;
}
@media (prefers-reduced-motion: reduce) {
	.motion-dropdown,
	.motion-popover,
	.motion-panel,
	.motion-content-swap,
	.motion-collapse,
	.motion-collapse-content {
		transition: none;
	}

	:root[data-motion-input="pointer"] .chat-toggle-icon {
		transition: none;
	}

	:root[data-motion-input="pointer"] .motion-picker-option {
		transition: none;
	}

	:root[data-motion-input="pointer"] .motion-feedback[data-motion-feedback] {
		transition-duration: 0s;
	}
}

/*
 * What a press feels like. Zero specificity so a `transition` utility on the
 * element wins instead — Tailwind's covers `scale` along with the colours.
 * Disabled controls are excluded: a press that animates and then does nothing
 * says the opposite of what disabled is trying to say.
 */
:where(button, [role="button"]) {
	transition: scale var(--duration-fast) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
	:where(button, [role="button"]):not(:disabled):active {
		scale: 0.96;
	}

	/*
	 * A proportion, so a row needs a smaller one: 4% of a full-width row is
	 * several pixels at each edge and reads as jumping, where 4% of a 28px
	 * toolbar cell is the one pixel that is wanted.
	 */
	:where(button, [role="button"])[data-press="wide"]:not(:disabled):active {
		scale: 0.99;
	}
}