styles.css

.invalid-link {
	--icon-size: 16px;
	--icon-stroke-width: 2px;
	display: inline-flex;
	color: var(--link-external-color);
	width: 0.8em;
	margin-left: 1px;
}

.relay-hidden-modal-wrapper {
	display: none;
}

.user-awareness-positioning-parent {
	position: relative;
}

.remote-caret {
	position: absolute;
	border-left: #000;
	border-left-style: solid;
	border-left-width: 2px;
	height: 1em;
}

.remote-caret > div {
	position: relative;
	top: -1.05em;
	font-size: 13px;
	background-color: rgb(0, 129, 0);
	font-family: serif;
	font-style: normal;
	font-weight: normal;
	line-height: normal;
	user-select: none;
	color: #fff;
	padding-left: 2px;
	padding-right: 2px;
	z-index: 3;
}

/* Matches the specificity of Obsidian's collapsible tree-item padding. */
.tree-item-self.system3-pill {
	padding-inline-end: 0px;
}

.system3-pill:hover > .system3-folder-icons {
	background-color: var(--color-base-05);
	width: auto;
}

.system3-pill:hover > .system3-folder-icons > .system3-icon {
	display: flex;
}

.nav-file-tag .nav-file-title:not(:first-child) .system3-pill {
	margin-inline-start: 1em;
}

.nav-file-title,
.nav-folder-title {
	display: flex;
	align-items: center;
}
.nav-folder-title-content {
	margin-inline-end: auto;
}
.tree-item-self.system3-sync-status-folder {
	position: relative;
	cursor: pointer;
	margin-inline-start: 0px;
	padding-inline-start: 24px;
}

.system3-sync-status-folder .nav-folder-title-content {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.relay-folder-create-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
}

.inline-icon {
	display: inline-block;
	margin-right: auto;
	margin-left: auto;
	width: 1.3em;
	max-height: 1.3em;
	vertical-align: middle;
}

.connection-status-icon {
	opacity: 0.5;
	color: var(--color-gray);
}

.connection-status-icon-unknown {
	color: var(--color-gray);
}

.connection-status-icon-connected {
	color: var(--color-green);
}

.connection-status-icon-disconnected {
	color: var(--color-red);
}

.workspace-split.mod-root
	.workspace-leaf:nth-child(n)
	.workspace-leaf-content[data-type="markdown"].system3-has-banner::before {
	top: 4em;
}

.obsidian-live-banner {
	position: relative;
	align-items: center;
	justify-content: space-between;
	display: flex;
	border-width: var(--modal-border-width);
	border: var(--modal-border-width) solid;
	border-color: var(--modal-border-color);
	border-radius: var(--modal-radius);
	padding: 10px;
	background: var(--modal-background);
	margin: 10px -10px 10px -10px;
}

.form-live {
	display: grid;
	grid-auto-flow: column;
}

#shareLink-guid {
	width: 32em;
}

.system3-banner {
	border-color: var(--pill-border-color-hover);
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	align-items: center;
	justify-content: space-between;
	display: flex;
	border-width: var(--modal-border-width);
	padding: 5px 20px 5px 20px;
	background: var(--interactive-accent);
}

.system3-banner > span {
	display: flex;
	flex-grow: 1;
	font-size: var(--font-ui-medium);
	color: var(--text-on-accent);
	font: var(--font-interface-theme);
}

/* Element-qualified to outrank Obsidian's button:not(.clickable-icon) styling. */
button.system3-header-button,
button.system3-login-button {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border: var(--modal-border-width) solid var(--pill-border-color-hover);
	cursor: pointer;
	font-weight: bold;
	font-size: var(--font-ui-medium);
	font: var(--font-interface-theme);
	text-shadow: var(--input-shadow);
}

.nav-file-tag.system3-case-conflict {
	color: var(--text-error);
}

.relay-read-only-banner-box,
.relay-not-synced-banner-box,
.relay-case-conflict-banner-box {
	background: color-mix(in srgb, var(--background-primary), var(--text-normal) 8%);
	padding-inline-end: var(--scrollbar-width, 12px);
}

.relay-read-only-banner,
.relay-not-synced-banner,
.relay-case-conflict-banner {
	padding: var(--file-margins);
	padding-block: 6px;
	color: var(--text-muted);
	background: transparent;
	font-size: var(--font-ui-small);
	line-height: 1.5;
	cursor: default;
}

.workspace-leaf-content:has(> .view-content > .is-readable-line-width) :is(.relay-read-only-banner, .relay-not-synced-banner, .relay-case-conflict-banner) > span {
	display: block;
	width: max-content;
	min-width: min(100%, var(--file-line-width));
	max-width: 100%;
	margin-inline: auto;
}

/* The case-conflict banner: one line, "(more info)" to the explanation, and a dismissal. */
.relay-case-conflict-line {
	display: flex;
	align-items: flex-start;
	gap: var(--size-4-2);
}
.workspace-leaf-content:has(> .view-content > .is-readable-line-width) .relay-case-conflict-banner > .relay-case-conflict-line {
	width: max-content;
	min-width: min(100%, var(--file-line-width));
	max-width: 100%;
	margin-inline: auto;
}
.relay-case-conflict-text {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}
.relay-case-conflict-link {
	display: inline;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.relay-case-conflict-close {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-top: -1px;
	color: inherit;
	box-shadow: none;
}

.relay-banner-context {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	vertical-align: bottom;
	color: var(--text-normal);
	white-space: nowrap;
}

.relay-banner-context-icon {
	display: inline-flex;
	--icon-size: 1em;
}

/* A banner that renders its own content handles its own clicks. */
.relay-banner-rendered {
	cursor: default;
}

.relay-read-only-header-label,
.relay-not-synced-header-label,
.relay-case-conflict-header-label {
	padding: 2px 8px;
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

.nav-file-title.system3-conflict::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--text-warning, var(--color-orange));
	box-shadow: 0 0 0 1px var(--background-primary);
	margin-inline-start: auto;
	margin-inline-end: 6px;
	align-self: center;
	flex-shrink: 0;
}

.system3-syncing:not(.is-active) {
	animation: system3-glow-sync 1.5s ease-in-out;
	transition: background-color 2s ease-in-out;
}

.system3-downloading:not(.is-active) {
	animation: system3-glow-download 1.5s ease-in-out;
	transition: background-color 2s ease-in-out;
}
@keyframes system3-glow-sync {
	0% {
		background-color: transparent;
	}
	20% {
		background-color: hsla(var(--color-accent-hsl), 0.1);
	}
	80% {
		background-color: hsla(var(--color-accent-hsl), 0.1);
	}
	100% {
		background-color: transparent;
	}
}

@keyframes system3-glow-download {
	0% {
		background-color: transparent;
	}
	20% {
		background-color: hsla(var(--color-accent-hsl), 0.1);
	}
	80% {
		background-color: hsla(var(--color-accent-hsl), 0.1);
	}
	100% {
		background-color: transparent;
	}
}

.nav-folder > .nav-folder-children.system3-live {
	border-inline-start: var(--nav-indentation-guide-width) solid
		var(--color-accent);
}

.nav-file.system3-connected {
	border-inline-start: 1px solid var(--color-accent);
}

.nav-file.system3-connecting {
	border-inline-start: 1px solid var(--color-base-40);
}

.file-diff__container {
	width: 100%;
	max-width: 100%;
	overflow-x: scroll;
	padding: 1rem;
}

.file-diff__line {
	padding: 0.1rem 0;
}

.file-diff__link {
	border-radius: 0.1875rem;
	color: var(--link-color);
	text-decoration: underline;
	text-underline-offset: 0.125em;
}

.file-diff__link--resolved {
	background-color: color-mix(in srgb, var(--link-color) 8%, transparent);
}

.file-diff__link--unresolved {
	background-color: color-mix(in srgb, var(--text-error) 10%, transparent);
	color: var(--link-unresolved-color, var(--text-error));
}

.file-diff__link-warning {
	--icon-size: 16px;
	--icon-stroke-width: 2px;
	display: inline-flex;
	vertical-align: text-bottom;
}

.file-diff__button-container {
	text-align: right;
}

.file-diff__top-line__bg {
	background-color: color-mix(in srgb, var(--color-green) 15%, transparent);
	border-radius: 0.25rem; /* 4px */
}

.file-diff_top-line__character {
	background-color: color-mix(in srgb, var(--color-green) 30%, transparent);
	border-radius: 0.25rem; /* 4px */
}

.file-diff__bottom-line__bg {
	background-color: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
	border-radius: 0.25rem; /* 4px */
}

.file-diff_bottom-line__character {
	background-color: color-mix(in srgb, var(--interactive-accent) 25%, transparent);
	border-radius: 0.25rem; /* 4px */
}

.file-diff__no-bottom-border {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.file-diff__no-top-border {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.file-diff__action-line {
	color: #919191;
}

/* Tailwind CSS */
.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.gap-1 {
	gap: 0.25rem; /* 4px */
}

.no-decoration {
	text-decoration: none;
}

.no-decoration:hover {
	text-decoration: none;
}

.text-xxs {
	font-size: 0.65rem;
}

/* Rename from py-0.5 to py-0-5, as dots aren't allowed in selector names */
.py-0-5 {
	padding-top: 0.125rem; /* 2px */
	padding-bottom: 0.125rem; /* 2px */
}

.mr-2 {
	margin-right: 0.5rem; /* 8px */
}

.mb-20 {
	margin-bottom: 5rem; /* 80px */
}

/* Fix button width on mobile in setting items for our components */
.is-phone .modal .setting-item-control button.system3-button {
	width: auto;
}

/* Held-deletion decision modal: a fixed-width confirmation dialog whose
   size does not depend on the burst — the path list sits behind a
   collapsed disclosure and scrolls within a fixed cap. */
.system3-gated-deletions-modal {
	width: min(30rem, 90vw);
}

/* The title must clear the modal's absolutely-positioned close control,
   and a folder name with no break points must still wrap. */
.system3-gated-deletions-modal .modal-title {
	padding-inline-end: var(--size-4-8);
	overflow-wrap: anywhere;
}

.system3-gated-deletions-consequences {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

.system3-gated-deletions-details {
	margin: var(--size-4-3) 0 0;
}

.system3-gated-deletions-details > summary {
	cursor: pointer;
	color: var(--text-muted);
	font-size: var(--font-ui-small);
	user-select: none;
}

.system3-gated-deletions-details > summary:focus-visible {
	outline: 2px solid var(--interactive-accent);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

.system3-gated-deletions-list {
	max-height: 10em;
	overflow-y: auto;
	margin: var(--size-4-2) 0 0;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s);
	background: var(--background-primary);
}

/* Rows read as a table: zebra striping, cell padding, and full vault
   paths with the directory muted so the filename stays scannable. */
.system3-gated-deletions-path {
	display: flex;
	font-family: var(--font-monospace);
	font-size: var(--font-ui-smaller);
	line-height: 1.5;
	padding: var(--size-2-2) var(--size-4-2);
	white-space: nowrap;
}

.system3-gated-deletions-path:nth-child(even) {
	background: var(--background-secondary);
}

.system3-gated-deletions-path-dir {
	color: var(--text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 1 auto;
}

.system3-gated-deletions-path-name {
	color: var(--text-normal);
	flex: none;
}

/* Note state inspector — debugging strip in the sync-status sidebar showing
   per-note merge state: HSM state path, disk write/ingest lanes, and store
   convergence. */
.system3-note-state {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m);
	padding: var(--size-2-3) var(--size-4-2);
	margin: var(--size-4-2) 0;
	font-size: var(--font-ui-small);
	background: var(--background-secondary);
}

.system3-note-state-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--size-4-2);
	margin-bottom: var(--size-2-2);
}

.system3-note-state-title {
	font-size: var(--font-ui-smaller);
	font-weight: var(--font-semibold);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.system3-note-state-pill {
	flex: none;
	padding: 0 var(--size-4-1);
	border-radius: var(--radius-l);
	border: 1px solid var(--background-modifier-border);
	font-size: var(--font-ui-smaller);
	white-space: nowrap;
}

.system3-note-state-row {
	display: flex;
	justify-content: space-between;
	gap: var(--size-4-2);
	padding: 1px 0;
	line-height: 1.4;
}

.system3-note-state-label {
	color: var(--text-muted);
	flex: none;
}

.system3-note-state-value {
	text-align: right;
	overflow-wrap: anywhere;
}

.system3-note-state-mono {
	font-family: var(--font-monospace);
	font-size: var(--font-ui-smaller);
}

.system3-note-state-ok {
	color: var(--color-green);
}

.system3-note-state-warn {
	color: var(--color-yellow);
}

.system3-note-state-bad {
	color: var(--color-red);
}

.system3-note-state-muted {
	color: var(--text-faint);
}

/* Canvas presence: every peer cursor is drawn on this one surface over
 * the wrapper, so nothing per cursor exists for the page to style or
 * layer. Peers' selections, moving nodes, and connections are Obsidian's
 * own elements, so they use Obsidian's styles. */
canvas.relay-canvas-presence {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 100000;
}

/* Peers' active states are Obsidian's own state classes mirrored under a
 * peer prefix. Each rule below copies Obsidian's rule for that state with
 * the peer's color in place of the accent. A selected card or edge is
 * `is-focused` (one item) or `is-selected` (several). */
.canvas-node.relay-peer-is-focused .canvas-node-container,
.canvas-node.relay-peer-is-selected .canvas-node-container {
	border-color: var(--relay-presence-color);
	box-shadow:
		var(--shadow-stationary),
		0 0 0 2px var(--relay-presence-color);
}

.canvas-edges g.relay-peer-is-focused path.canvas-display-path {
	stroke: var(--relay-presence-color);
	stroke-width: calc(5.5px * var(--zoom-multiplier));
}

.canvas-edges g.relay-peer-is-focused path.canvas-interaction-path {
	stroke: color-mix(in oklch, var(--relay-presence-color) 15%, transparent);
}

.canvas-edges g.relay-peer-is-focused polygon.canvas-path-end {
	stroke: var(--relay-presence-color);
	fill: var(--relay-presence-color);
}

/* A node a peer is dragging or resizing is the local node element moved
 * to the peer's live geometry; it wears Obsidian's drag shadow, and with
 * the focused ring in the peer's color when the peer also has it focused. */
.canvas-node.relay-peer-is-dragging .canvas-node-container {
	box-shadow: var(--shadow-drag);
}

.canvas-node.relay-peer-is-focused.relay-peer-is-dragging .canvas-node-container,
.canvas-node.relay-peer-is-selected.relay-peer-is-dragging .canvas-node-container {
	box-shadow:
		var(--shadow-drag),
		0 0 0 2px var(--relay-presence-color);
}

/* A borrowed edge draws with Obsidian's paths but is not in the canvas's
 * edge map, so it must never be hovered, clicked, or grabbed. */
.canvas-edges g.relay-presence-edge,
.canvas-edges g.relay-presence-edge * {
	pointer-events: none !important;
}

/* A conflict resolved in the note. Mine is green, the collaborator's blue, a
 * deletion red whoever made it, and the lines as they were before a merged
 * edit grey. The rows are the document's own lines: nothing is added to
 * their text, and the signals are tint, a mark beside the rows, and position. */
.markdown-source-view.mod-cm6,
.relay-conflict-marks {
	--relay-conflict-ours: var(--color-green);
	--relay-conflict-theirs: var(--color-blue);
	--relay-conflict-remove: var(--color-red);
	--relay-conflict-neutral: var(--text-muted);
	--relay-conflict-reach: 28px;
}

.cm-line.relay-conflict-line {
	position: relative;
}

/* A candidate's rows take their side's tint; the hovered candidate lifts; the unchosen dims. */
.cm-line.relay-conflict-line.is-candidate {
	cursor: pointer;
	--relay-conflict-colour: var(--relay-conflict-neutral);
	--relay-conflict-tint: color-mix(in srgb, var(--relay-conflict-colour) 10%, var(--background-primary));
	background-color: var(--relay-conflict-tint);
}

.cm-line.relay-conflict-line.is-candidate.is-ours {
	--relay-conflict-colour: var(--relay-conflict-ours);
}

.cm-line.relay-conflict-line.is-candidate.is-theirs {
	--relay-conflict-colour: var(--relay-conflict-theirs);
}

.cm-line.relay-conflict-line.is-candidate.is-removal {
	--relay-conflict-colour: var(--relay-conflict-remove);
}

.cm-line.relay-conflict-line.is-candidate.is-neutral {
	--relay-conflict-colour: var(--relay-conflict-neutral);
}

.cm-line.relay-conflict-line.is-candidate.is-lit {
	--relay-conflict-tint: color-mix(in srgb, var(--relay-conflict-colour) 22%, var(--background-primary));
}

/* A candidate's tint reaches a little way toward the side whose change it is: mine to the left, the collaborator's to the right. The lines as they were are nobody's change and reach toward neither. */
.cm-line.relay-conflict-line.is-candidate.is-ours:not(.is-neutral) {
	box-shadow: calc(-1 * var(--relay-conflict-reach)) 0 0 var(--relay-conflict-tint);
}

.cm-line.relay-conflict-line.is-candidate.is-theirs:not(.is-neutral) {
	box-shadow: var(--relay-conflict-reach) 0 0 var(--relay-conflict-tint);
}

/* The candidate not taken dims and loses its tint; under a whole-file preview the other side greys. */
.cm-line.relay-conflict-line.is-candidate.is-out {
	--relay-conflict-tint: transparent;
	opacity: 0.38;
}

.cm-line.relay-conflict-line.is-candidate.is-fade {
	--relay-conflict-tint: transparent;
	color: var(--text-faint);
}

/* The pill beside a block: the mark of what taking the candidate does, and the plus for taking the other as well. */
.relay-conflict-marks {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: visible;
	z-index: 3;
	pointer-events: none;
}

.relay-conflict-pill {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	width: 18px;
	border-radius: 9px;
	border: 1px solid var(--relay-conflict-side);
	background: color-mix(in srgb, var(--background-secondary) 85%, transparent);
	color: var(--relay-conflict-side);
	font-family: var(--font-interface);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: top 120ms ease;
}

.relay-conflict-pill.is-reversed {
	flex-direction: column-reverse;
}

.relay-conflict-pill.is-ours {
	--relay-conflict-side: var(--relay-conflict-ours);
}

.relay-conflict-pill.is-theirs {
	--relay-conflict-side: var(--relay-conflict-theirs);
}

.relay-conflict-pill.is-neutral {
	--relay-conflict-side: var(--relay-conflict-neutral);
}

.relay-conflict-pill-mark,
.relay-conflict-pill-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.relay-conflict-pill-mark svg {
	width: 11px;
	height: 11px;
}

.relay-conflict-pill.is-solid .relay-conflict-pill-mark {
	background: var(--relay-conflict-side);
	color: var(--background-primary);
}

.relay-conflict-pill.is-both {
	--relay-conflict-side: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

.relay-conflict-pill.is-both .relay-conflict-pill-mark {
	background: var(--relay-conflict-ours);
	color: var(--background-primary);
}

.relay-conflict-pill.is-both .relay-conflict-pill-mark.is-far {
	background: var(--relay-conflict-theirs);
}

.relay-conflict-pill.is-both .relay-conflict-pill-mark:hover {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--relay-conflict-ours) 35%, transparent);
}

.relay-conflict-pill.is-both .relay-conflict-pill-mark.is-far:hover {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--relay-conflict-theirs) 35%, transparent);
}

.relay-conflict-pill-plus.is-ours {
	color: var(--relay-conflict-ours);
}

.relay-conflict-pill-plus.is-theirs {
	color: var(--relay-conflict-theirs);
}

.relay-conflict-pill-plus:hover {
	background: color-mix(in srgb, var(--relay-conflict-side) 25%, transparent);
}

/* A change as a pull request shows it: red for the note's lines that would go, green for the lines that would come, the words that differ marked in both, a sign in the margin. */
.cm-line.relay-conflict-diff {
	position: relative;
}

.cm-line.relay-conflict-diff.is-del {
	background-color: color-mix(in srgb, var(--relay-conflict-remove) 12%, var(--background-primary));
}

.cm-line.relay-conflict-diff.is-add {
	background-color: color-mix(in srgb, var(--relay-conflict-ours) 12%, var(--background-primary));
}

.cm-line.relay-conflict-diff::before {
	position: absolute;
	left: -16px;
	width: 12px;
	text-align: center;
	font-family: var(--font-monospace);
	font-size: 0.85em;
	text-indent: 0;
}

.cm-line.relay-conflict-diff.is-del::before {
	content: "−";
	color: var(--relay-conflict-remove);
}

.cm-line.relay-conflict-diff.is-add::before {
	content: "+";
	color: var(--relay-conflict-ours);
}

.relay-conflict-word.is-del {
	background-color: color-mix(in srgb, var(--relay-conflict-remove) 30%, transparent);
	border-radius: 2px;
}

.relay-conflict-word.is-add {
	background-color: color-mix(in srgb, var(--relay-conflict-ours) 30%, transparent);
	border-radius: 2px;
}

/* The situation box above the note: what happened, how much is left, the whole-file choices. It stays while the note scrolls and folds to its title. */
.view-content.relay-has-conflict-box {
	display: flex;
	flex-direction: column;
}

.view-content.relay-has-conflict-box > .markdown-source-view,
.view-content.relay-has-conflict-box > .markdown-reading-view {
	flex: 1 1 auto;
	min-height: 0;
}

.relay-conflict-box {
	flex: 0 0 auto;
	margin: 10px 16px 4px;
	padding: 8px 12px 10px;
	border: 1px solid var(--background-modifier-border);
	border-left: 3px solid var(--interactive-accent);
	border-radius: var(--radius-m, 8px);
	background: var(--background-secondary);
	font-family: var(--font-interface);
}

.relay-conflict-head {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.relay-conflict-chevron {
	display: inline-flex;
	color: var(--text-muted);
	transition: transform 120ms ease;
}

.relay-conflict-box.is-collapsed .relay-conflict-chevron {
	transform: rotate(-90deg);
}

.relay-conflict-title {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: var(--font-ui-medium, 15px);
}

.relay-conflict-status {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: var(--font-ui-smaller, 12px);
	font-variant-numeric: tabular-nums;
	background: var(--background-modifier-hover);
	color: var(--text-normal);
}

.relay-conflict-status:empty {
	display: none;
}

.relay-conflict-body {
	padding: 6px 0 0 22px;
}

.relay-conflict-box.is-collapsed .relay-conflict-body {
	display: none;
}

.relay-conflict-box.is-collapsed {
	padding-bottom: 8px;
}

.relay-conflict-text {
	margin: 0 0 8px;
	font-size: var(--font-ui-small, 13px);
	color: var(--text-muted);
	line-height: 1.5;
	max-width: 72ch;
}

.relay-conflict-link {
	color: var(--text-accent);
	text-decoration: underline;
	cursor: pointer;
}

.relay-conflict-link.is-sent {
	color: var(--text-muted);
	text-decoration: none;
	cursor: default;
}

.relay-conflict-hint {
	margin: 0 0 6px;
	font-size: var(--font-ui-small, 13px);
	color: var(--text-normal);
}

.relay-conflict-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.relay-conflict-options button.is-chosen {
	box-shadow: inset 0 0 0 1px var(--interactive-accent);
}

.relay-conflict-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: var(--font-ui-small, 13px);
	color: var(--text-muted);
	cursor: pointer;
}

.relay-conflict-toggle .checkbox-container {
	transform: none;
}

/* A NAME CONFLICT pill that explains itself reads as a button. */
.nav-file-tag.system3-pill-button {
	cursor: pointer;
}
.nav-file-tag.system3-pill-button:hover,
.nav-file-tag.system3-pill-button:focus-visible {
	color: var(--text-normal);
	background-color: var(--background-modifier-hover);
}

/* The explanation behind the pill and banner: both spellings with the
   letters that differ marked and where each one is, then why, and the fix. */
.modal.relay-case-conflict-modal {
	width: min(480px, calc(100vw - 48px));
}
.relay-case-conflict-info {
	font-size: var(--font-ui-small);
	line-height: 1.5;
}
.relay-case-conflict-names {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-2);
	margin: 0 0 var(--size-4-3);
	padding: var(--size-4-2) var(--size-4-3);
	border-radius: var(--radius-m);
	background: var(--background-secondary);
}
.relay-case-conflict-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-4-2);
	min-width: 0;
}
.relay-case-name {
	color: var(--text-normal);
	font-weight: var(--font-medium);
	overflow-wrap: anywhere;
}
.relay-case-diff {
	background: color-mix(in srgb, var(--text-error) 22%, transparent);
	color: var(--text-normal);
	border-radius: 3px;
	padding: 0 1px;
	font-weight: var(--font-bold);
	box-shadow: inset 0 -2px 0 var(--text-error);
}
.relay-case-conflict-status {
	color: var(--text-muted);
	white-space: nowrap;
}
.relay-case-conflict-body {
	margin: 0 0 var(--size-4-2);
	color: var(--text-muted);
}
.relay-case-conflict-fix {
	margin: 0 0 var(--size-4-2);
	color: var(--text-normal);
}
.relay-case-conflict-docs {
	font-size: var(--font-ui-small);
}
.relay-case-conflict-modal .modal-button-container {
	margin-top: var(--size-4-4);
}
.relay-rename-prompt input {
	width: 100%;
}