/*
 * Quire reference components — built only from tokens.css custom
 * properties. Import tokens.css first.
 *
 * One deliberate departure from the previous styling: gesture buttons
 * are outlined, not solid-filled blocks. Solid saturated buttons read
 * as a game's action buttons; an outline that fills in only on
 * interaction reads as a considered choice, not a reward to mash.
 */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-surface-page);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.heading {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-tight);
	margin: 0;
}

.label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.mono {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Card — a dossier, not a diff: one direction statement, then evidence. */
.card {
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-5);
	animation: card-settle var(--duration-slow) var(--ease-settle);
}

.card-direction {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
}

/* Badges */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
}

.badge-neutral {
	background: var(--color-surface-sunken);
	color: var(--color-text-secondary);
	border-color: var(--color-border);
}

.badge-clean {
	background: var(--color-accept-wash);
	color: var(--color-accept);
}

.badge-flagged {
	background: var(--color-flagged-wash);
	color: var(--color-flagged);
	animation: drift-reveal var(--duration-base) var(--ease-standard);
}

/* Reuses the reject color rather than inventing a new one — this is the same
   "most severe" semantic tier as the reject gesture, for signals grounded in
   static analysis / confirmed behavior rather than an LLM judgment call. */
.badge-critical {
	background: var(--color-reject-wash);
	color: var(--color-reject);
	animation: drift-reveal var(--duration-base) var(--ease-standard);
}

/* Residual disclosure — permanent and legible, never fine print. */
.residual {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	font-style: italic;
	/* A conflict reason can now span multiple lines (hunk content, base/ours/theirs) —
	   preserve them instead of collapsing to one run-on line. */
	white-space: pre-wrap;
}

/* Gesture buttons — outlined; fill only on interaction. */
.btn {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid currentColor;
	background: transparent;
	color: var(--btn-color);
	cursor: pointer;
	--btn-color: var(--color-text-muted);
	transition: background var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.btn-settings {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* Hover fills the button with its own color. Note: this can't be written as
   `background: currentColor` alongside `color: ...` in the same rule —
   currentColor would resolve against the *new* color, not the button's
   original one, collapsing background/text/border to one indistinguishable
   value. --btn-color holds the original so the two can change independently. */
.btn:hover {
	background: var(--btn-color);
	color: var(--color-surface-card) !important;
}

.btn:active {
	transform: scale(0.97);
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.btn-accept { color: var(--color-accept); --btn-color: var(--color-accept); }
.btn-defer  { color: var(--color-defer); --btn-color: var(--color-defer); }
.btn-reject { color: var(--color-reject); --btn-color: var(--color-reject); }

/* Modal — a dossier interrupting the page, not covering it: the backdrop
   dims what's behind, but the dialog itself is just a .card, keeping the
   same elevation and entrance animation as any other surface. */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	z-index: 100;
}

.modal-backdrop .card {
	max-width: 420px;
	width: 100%;
}

.modal-title {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
}

/* Modals without an .account-panel wrapper (sign-in, LLM-connect) would
   otherwise fall back to the browser's default <p> margin instead of the
   token scale everywhere else uses. */
.modal-backdrop .card > p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

.modal-actions {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

/* Larger, denser dialogs than the base .card confirm-modal — more sections and
   longer-running content, so they get more breathing room than the space-5
   every other card uses. */
.modal-backdrop .detail-modal,
.modal-backdrop .settings-modal {
	padding: var(--space-6);
}

/* .settings-modal's title sits in .settings-header instead, which owns its
   own margin-bottom — this only needs to cover .detail-modal now. */
.detail-modal .modal-title {
	margin-bottom: var(--space-5);
}

.modal-backdrop .detail-modal {
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
}

@media (min-width: 700px) {
	.modal-backdrop .detail-modal {
		max-width: 900px;
	}
}

.modal-backdrop .settings-modal {
	max-width: 760px;
	width: 100%;
	height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@media (min-width: 700px) {
	.modal-backdrop .settings-modal {
		width: 75vw;
		max-width: 1100px;
		height: 75vh;
	}
}

/* Settings header — title + close icon, shared by the desktop two-column
   dialog and the mobile full-screen sheet (mobile restyles it to look like
   a page header in mobile.html's own <style> block). */
.settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	flex: 0 0 auto;
}

.settings-header .modal-title {
	margin: 0;
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	padding: 0;
	flex: 0 0 auto;
}

/* Two-column desktop settings: nav rail + single visible panel. */
.settings-shell {
	display: flex;
	gap: var(--space-6);
	flex: 1;
	min-height: 0;
}

.settings-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 0 0 180px;
	overflow-y: auto;
}

.settings-nav-item {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	background: transparent;
	border: none;
	border-left: 2px solid transparent;
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard),
		background var(--duration-base) var(--ease-standard);
}

.settings-nav-item:hover {
	color: var(--color-text-primary);
	background: var(--color-surface-sunken);
}

.settings-nav-item.active {
	color: var(--color-brand);
	border-color: var(--color-brand);
	background: var(--color-brand-wash);
}

.settings-content {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
}

.settings-panel {
	display: none;
}

.settings-panel.active {
	display: block;
}

@media (max-width: 600px) {
	.settings-shell {
		flex-direction: column;
	}

	.settings-nav {
		flex-direction: row;
		flex: 0 0 auto;
		overflow-x: auto;
		gap: var(--space-2);
		padding-bottom: var(--space-2);
		border-bottom: 1px solid var(--color-border);
	}

	.settings-nav-item {
		border-left: none;
		border-bottom: 2px solid transparent;
		white-space: nowrap;
	}

	.settings-nav-item.active {
		border-color: var(--color-brand);
	}
}

.settings-section + .settings-section {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.settings-section h4 {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	margin: 0 0 var(--space-3);
}

.settings-btn-row {
	display: flex;
	gap: var(--space-2);
}

.settings-btn-row .btn {
	flex: 1;
	text-align: center;
}

a.btn {
	display: inline-block;
	text-decoration: none;
}

.pr-member-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.pr-member-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
}

.pr-member-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.pr-member-info a {
	color: var(--color-brand);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pr-member-direction {
	color: var(--color-text-muted);
}

.pr-member-tags {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 0 0 auto;
}

/* Below this width the tags cluster is too wide to sit beside the info column
   without squeezing the repo link into an unreadable ellipsis truncation —
   stack instead of crowd. */
@media (max-width: 700px) {
	.pr-member-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.pr-member-info a {
		overflow: visible;
		white-space: normal;
	}

	.pr-member-tags {
		flex-wrap: wrap;
	}
}

/* Tabs */
.tabs {
	display: flex;
	gap: var(--space-1);
	border-bottom: 1px solid var(--color-border);
}

.tab {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	padding: var(--space-2) var(--space-4);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.tab.active {
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* Shelf tray — the one surface the spec asks to be spatial/tactile. */
.shelf-tray {
	background: var(--color-surface-sunken);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.card.dropping-to-shelf {
	animation: drop-to-shelf var(--duration-shelf) var(--ease-settle) forwards;
}

.card.leaving-right {
	animation: leave-right var(--duration-slow) var(--ease-standard) forwards;
}

.card.leaving-left {
	animation: leave-left var(--duration-slow) var(--ease-standard) forwards;
}

@keyframes card-settle {
	from { opacity: 0; transform: translateY(6px) scale(0.99); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drift-reveal {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes drop-to-shelf {
	0%   { opacity: 1; transform: translateY(0) scale(1); }
	60%  { opacity: 1; transform: translateY(28px) scale(0.97); }
	100% { opacity: 0; transform: translateY(40px) scale(0.94); }
}

@keyframes leave-right {
	to { opacity: 0; transform: translateX(36px); }
}

@keyframes leave-left {
	to { opacity: 0; transform: translateX(-36px); }
}