styles.css

/* Extraboard — board view styles. Uses Obsidian theme variables so light and
   dark themes both work. All classes are prefixed `eb-`. */

.eb-root {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.eb-empty {
	padding: 2em;
	color: var(--text-muted);
	text-align: center;
}

/* --- the filter builder (filters-and-sorting.md §4) ----------------------- */

.eb-filter-modal {
	--eb-filter-indent: 16px;
}

.eb-filter-modal .modal-content {
	max-height: 70vh;
	overflow-y: auto;
}

.eb-filter-tabs {
	display: flex;
	align-items: center;
	gap: var(--size-4-2, 8px);
	margin-bottom: var(--size-4-3, 12px);
	border-bottom: 1px solid var(--background-modifier-border);
}

.eb-filter-tabs > button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	color: var(--text-muted);
	cursor: pointer;
}

.eb-filter-tabs > button.is-active {
	color: var(--text-normal);
	border-bottom-color: var(--interactive-accent);
}

.eb-filter-count {
	padding: 0 5px;
	background: var(--background-modifier-border);
	border-radius: 8px;
	font-size: var(--font-ui-smaller, 0.8em);
}

/* The top-level operator belongs to the whole tree, so it sits in the corner
   above it rather than in a row (§4.1). */
.eb-filter-root-op {
	display: inline-flex;
	align-items: center;
	gap: var(--size-4-2, 8px);
	margin-inline-start: auto;
	padding-bottom: 4px;
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.8em);
}

.eb-filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1, 4px);
}

.eb-filter-group:not(.is-root) {
	padding: var(--size-4-2, 8px);
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 4px);
}

.eb-filter-group-head {
	display: flex;
	align-items: center;
	gap: var(--size-4-2, 8px);
}

.eb-filter-children {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1, 4px);
	min-height: 24px;
	padding-inline-start: var(--eb-filter-indent);
}

.eb-filter-condition,
.eb-sort-rule {
	display: flex;
	align-items: center;
	gap: var(--size-4-1, 4px);
	flex-wrap: wrap;
}

.eb-filter-condition select,
.eb-filter-condition input,
.eb-sort-rule select {
	min-width: 0;
	font-size: var(--font-ui-smaller, 0.9em);
}

.eb-filter-field {
	flex: 1 1 120px;
}

.eb-filter-op {
	flex: 0 1 auto;
}

.eb-filter-value {
	flex: 1 1 120px;
}

.eb-filter-and {
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.8em);
}

/* The one grab zone of a row, so its fields keep their own gestures. */
.eb-filter-grip {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--text-faint);
	cursor: grab;
}

.eb-filter-grip .svg-icon {
	width: 14px;
	height: 14px;
}

.eb-filter-grip:active {
	cursor: grabbing;
}

.eb-filter-empty {
	padding: var(--size-4-1, 4px) 0;
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.8em);
}

.eb-filter-add {
	display: flex;
	gap: var(--size-4-2, 8px);
	padding-top: var(--size-4-1, 4px);
}

.eb-filter-add button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-ui-smaller, 0.8em);
	box-shadow: none;
}

.eb-sort-list {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1, 4px);
}

.eb-sort-dir {
	display: inline-flex;
	gap: 2px;
}

.eb-sort-dir button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	font-size: var(--font-ui-smaller, 0.8em);
	box-shadow: none;
}

.eb-sort-dir button.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

/* A phone has no room for a row of dropdowns side by side. */
.is-phone .eb-filter-condition select,
.is-phone .eb-filter-condition input,
.is-phone .eb-sort-rule select {
	flex: 1 1 100%;
}

/* --- the date-property picker (calendar-view.md §6.2) --------------------- */

.eb-date-property-list {
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1, 4px);
	margin-top: var(--size-4-3, 12px);
}

.eb-date-property-choice {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--size-4-2, 8px);
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.eb-date-property-value {
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.8em);
	white-space: nowrap;
}

.eb-date-property-choice.mod-cta .eb-date-property-value {
	color: inherit;
}

/* --- quick view settings (views.md §5) ------------------------------------ */

/* A panel, not a menu: every row is a toggle, and a menu would close on the
   first one. It is positioned inside the board root from the header button's
   measured rectangle, so an offset workspace pane cannot shift it downward. */
.eb-view-options {
	position: absolute;
	z-index: var(--layer-menu, 60);
	width: 240px;
	max-width: calc(100% - 16px);
	max-height: 70vh;
	padding: var(--size-4-2, 8px);
	overflow-y: auto;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
	box-shadow: var(--shadow-s);
}

.eb-view-options-head {
	padding: var(--size-4-2, 8px) var(--size-4-2, 8px) var(--size-4-1, 4px);
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.8em);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.eb-view-options-head:first-child {
	padding-top: var(--size-4-1, 4px);
}

.eb-view-options-row {
	display: flex;
	align-items: center;
	gap: var(--size-4-2, 8px);
	padding: var(--size-4-1, 4px) var(--size-4-2, 8px);
	border-radius: var(--radius-s, 4px);
	cursor: pointer;
}

.eb-view-options-row:hover {
	background: var(--background-modifier-hover);
}

.eb-view-options-row.is-disabled {
	opacity: 0.5;
	cursor: default;
}

.eb-view-options-row span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eb-view-options-choice {
	display: flex;
	gap: var(--size-4-1, 4px);
	padding: var(--size-4-1, 4px) var(--size-4-2, 8px);
}

.eb-view-options-choice button {
	flex: 1 1 0;
	padding: 2px 6px;
	font-size: var(--font-ui-smaller, 0.8em);
	box-shadow: none;
}

.eb-view-options-choice button.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.eb-view-options-radio-group {
	display: flex;
	flex-direction: column;
}

.eb-view-options-radio span {
	white-space: normal;
}

/* On a phone the header button it would hang from is in the ⋯ menu, so the
   panel rises from the bottom instead — the shape a touch UI expects
   (mobile.md §4). */
body.is-mobile .eb-view-options {
	position: fixed;
	top: auto !important;
	right: 0 !important;
	bottom: 0;
	left: 0;
	width: auto;
	max-width: none;
	max-height: 60vh;
	border-radius: var(--radius-l, 12px) var(--radius-l, 12px) 0 0;
	padding-bottom: calc(var(--size-4-4, 16px) + env(safe-area-inset-bottom, 0px));
}

/* Horizontal, scrollable row of stacks. */
.eb-board {
	display: flex;
	gap: var(--size-4-3, 12px);
	align-items: flex-start;
	height: 100%;
	padding: var(--size-4-3, 12px);
	overflow-x: auto;
	overflow-y: hidden;
}

/* Keep the desktop scrollbar below the stack cards rather than against them. */
body:not(.is-mobile) .eb-board {
	padding-bottom: calc(var(--size-4-3, 12px) + 8px);
}

.eb-stack {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 272px;
	max-width: 85vw;
	max-height: 100%;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
}

/* Layout invariant: nothing inside a stack may widen it (mobile.md §2).
   A flex item's automatic minimum size is its content's intrinsic minimum, so
   any descendant with one — the embedded CodeMirror editor above all, under
   mobile theme metrics — pushes the fixed-width stack open from the inside.
   Every flex/grid link from the stack down to an editor therefore carries
   `min-width: 0`, which is what turns "grow the box" into "shrink the content".
   A new nested component must be added here, not patched around. */
.eb-stack,
.eb-stack-body,
.eb-list,
.eb-section,
.eb-section-body,
.eb-list-row,
.eb-item,
.eb-card,
.eb-card-head,
.eb-card-title,
.eb-card-props,
.eb-card-tags,
.eb-card-foot,
.eb-card-editor,
.eb-card-editor-props,
.eb-card-field,
.eb-badge-row,
.eb-checklist-row,
.eb-divider-row {
	min-width: 0;
}

/* ...and a mounted editor is additionally bounded, because CodeMirror sizes
   its scroller from the content rather than from the box it was given. */
.eb-card-editor,
.eb-card-editor .eb-card-field,
.eb-card-editor .cm-editor,
.eb-card-editor .cm-scroller,
.eb-card-editor .cm-content,
.eb-editor {
	max-width: 100%;
}

.eb-stack-header {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	font-weight: var(--font-semibold, 600);
	border-bottom: 1px solid var(--background-modifier-border);
}

/* The stack's drag zone. */
.eb-stack-grip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 24px;
	margin-left: -2px;
	color: var(--text-faint);
	border-radius: var(--radius-s, 4px);
	cursor: grab;
}

.eb-stack-grip:hover {
	color: var(--text-muted);
	background: var(--background-modifier-hover);
}

.eb-stack-grip:active {
	cursor: grabbing;
}

.eb-stack-grip .svg-icon {
	width: 14px;
	height: 14px;
}

/* A stack name wraps to at most two lines, then ellipses (§2). One line cut a
   name short far too eagerly at 272px; letting it grow without a bound would
   let a pasted title push the cards off the screen. `-webkit-line-clamp` draws
   the ellipsis itself, so `text-overflow` has no part here. */
.eb-stack-name {
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* A single unbroken word is the case a name is likeliest to hit the limit
	   with, and it must break rather than widen the fixed-width stack. */
	overflow-wrap: anywhere;
	cursor: text;
}

/* Collapsed stacks shrink to a vertical spine. */
.eb-stack.is-collapsed {
	position: relative;
	width: auto;
	min-width: 0;
	transition:
		transform 140ms ease-out,
		box-shadow 140ms ease-out;
}

.eb-stack.is-collapsed .eb-stack-header {
	flex-direction: column;
	align-items: center;
	max-height: 100%;
	border-bottom: none;
}

.eb-stack.is-collapsed .eb-stack-grip {
	margin-left: 0;
	width: 24px;
	height: 16px;
}

/* A collapsed stack is a vertical spine: its name runs down one line and is cut
   by height, so the two-line clamp above is undone rather than rotated. */
.eb-stack.is-collapsed .eb-stack-name {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow-wrap: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	writing-mode: vertical-rl;
	max-height: 60vh;
}

/* Sized like a pill and centred as a flex box: the default line box would let
   digits sit slightly above the middle of the 24px icon buttons beside it. */
.eb-stack-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: var(--font-smaller, 0.8em);
	font-weight: var(--font-normal, 400);
	line-height: 1;
	color: var(--text-muted);
	background: var(--background-modifier-hover);
	border-radius: var(--radius-s, 4px);
}

/* "Completes cards": the only sign on the board that a stack rewrites what
   lands in it (stack-completion-and-divider-colors.md §3.3). */
.eb-stack-completes {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: var(--text-muted);
}

/* `Icon` renders its own, unclassed `span` here — an inline box whose height
   follows the font's line-height, not the 16px icon inside it. Centering
   *that* box still leaves the icon riding its baseline near the top, so the
   inner span needs the same flex treatment as the outer one. */
.eb-stack-completes > span {
	display: inline-flex;
	align-items: center;
}

.eb-stack-completes .svg-icon {
	width: 16px;
	height: 16px;
}

.eb-chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: var(--text-muted);
	transition: transform 120ms ease;
}

.eb-chevron .svg-icon {
	width: 16px;
	height: 16px;
}

.eb-chevron.is-collapsed {
	transform: rotate(-90deg);
}

/* The add-card affordance sits above the cards; new cards land at the top. */
.eb-stack-compose {
	padding: 8px 10px 0;
}

.eb-stack-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 10px 10px;
	/* Keep an empty stack a usable drop target. */
	min-height: 24px;
	overflow-y: auto;
}

/* A collapsed stack keeps an empty Sortable list mounted as a drop layer.
   It covers the whole spine only while a card is in flight, so the stack's
   regular click targets remain untouched at every other time. */
.eb-stack.is-collapsed .eb-stack-body {
	position: absolute;
	inset: 0;
	z-index: 2;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
	transition: transform 140ms ease-out;
}

body.eb-dragging-card .eb-stack.is-collapsed .eb-stack-body {
	pointer-events: auto;
}

/* Sortable inserts the original card into the destination while it hovers.
   Lift the whole visible stack, then counter-translate its full-spine drop
   layer with the same timing so the hit area stays still at the edges. */
body.eb-dragging-card .eb-stack.is-collapsed:has(.eb-stack-body > .eb-card) {
	transform: translateY(-4px);
	box-shadow: var(--shadow-l, 0 8px 24px rgba(0, 0, 0, 0.18));
}

body.eb-dragging-card
	.eb-stack.is-collapsed:has(.eb-stack-body > .eb-card)
	.eb-stack-body {
	transform: translateY(4px);
}

.eb-stack.is-collapsed .eb-stack-body > .eb-item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.eb-stack.is-collapsed,
	.eb-stack.is-collapsed .eb-stack-body {
		transition: none;
	}

	body.eb-dragging-card .eb-stack.is-collapsed:has(.eb-stack-body > .eb-card),
	body.eb-dragging-card
		.eb-stack.is-collapsed:has(.eb-stack-body > .eb-card)
		.eb-stack-body {
		transform: none;
	}
}

/* Cards */
.eb-card {
	position: relative;
	/* Own stacking context, so the color tint stays behind the card content. */
	isolation: isolate;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
	padding: 8px 10px;
	box-shadow: var(--shadow-s, 0 1px 2px rgba(0, 0, 0, 0.08));
	cursor: pointer;
}

/* The board's single `color` property: a full-strength left stripe... */
.eb-card.is-colored {
	border-left: 4px solid var(--eb-card-color);
	padding-left: 7px;
}

/* ...plus, with `fillCardWithColor`, a tint composited over the theme
   background so card text keeps its contrast in light and dark themes. */
.eb-card.is-filled::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--eb-card-color);
	opacity: 0.14;
	border-radius: inherit;
	pointer-events: none;
}

.eb-card-head {
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

/* The card menu sits in the top-right corner (kanban-view.md §5.3). */
.eb-card-menu {
	width: 20px;
	height: 20px;
	margin: -1px -4px 0 0;
}

.eb-card-menu .svg-icon {
	width: 14px;
	height: 14px;
}

/* "Complete card" (kanban-view.md §5.3), the green counterpart to the red
   `is-warning` Obsidian gives destructive items. Same shape as the theme's own
   rule — title and icon both — so it reads as one of the menu's items and not
   as decoration. */
.menu-item.eb-menu-success .menu-item-title,
.menu-item.eb-menu-success .menu-item-icon {
	color: var(--text-success, var(--color-green));
}

/* Flush with the card's padding: nothing indents the checkbox. */
.eb-card-check {
	flex: 0 0 auto;
	margin: 3px 2px 0 0;
	margin-inline-start: 0;
	cursor: pointer;
}

.eb-card.is-done .eb-card-title {
	color: var(--text-muted);
	text-decoration: line-through;
}

.eb-card-title {
	flex: 1 1 auto;
	color: var(--text-normal);
	line-height: 1.35;
	word-break: break-word;
}

.eb-placeholder {
	color: var(--text-faint);
	font-style: italic;
}

/* The title's content link is a real internal link; the theme styles it, the
   board only makes sure the card's own cursor does not override it (§1.1). */
.eb-card-title .internal-link {
	cursor: pointer;
}

/* A title is one line of *inline* Markdown. The renderer can still emit block
   markup for a hand-written title, so the card flattens it: no block spacing,
   no heading scale, and nothing that can outgrow the tile. */
.eb-card-title p,
.eb-card-title h1,
.eb-card-title h2,
.eb-card-title h3,
.eb-card-title h4,
.eb-card-title h5,
.eb-card-title h6 {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	border: none;
}

.eb-card-title img,
.eb-card-title .internal-embed {
	max-width: 100%;
	height: auto;
}

.eb-card-title pre,
.eb-card-title blockquote {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

.eb-card-props,
.eb-card-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.eb-card-props {
	margin-top: 6px;
}

/* Tags on the left, the checklist indicator pinned bottom-right (§5.5). */
.eb-card-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	margin-top: 6px;
}

.eb-card-foot .eb-card-tags {
	flex: 1 1 auto;
	min-width: 0;
}

.eb-progress {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 2px 4px;
	background: none;
	border: none;
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
}

.eb-chip {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	font-size: var(--font-smaller, 0.8em);
	line-height: 1.5;
	color: var(--text-muted);
	border-radius: 10px;
	white-space: nowrap;
}

.eb-progress:hover .eb-chip {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.eb-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px;
	font-size: var(--font-smaller, 0.8em);
	line-height: 1.5;
	color: var(--text-normal);
	background: var(--background-modifier-hover);
	border-radius: 10px;
	white-space: nowrap;
}

.eb-badge-muted {
	color: var(--text-muted);
}

/* A badge's text, so a long value ellipsizes instead of overflowing its
   container: `text-overflow` needs the text's own box, not the flex chip. */
.eb-badge-text {
	overflow: hidden;
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eb-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	color: var(--text-faint);
}

.eb-badge-icon svg {
	display: block;
	width: 12px;
	height: 12px;
}

/* Every icon that shares a button with a label. The host is a plain inline
   span, so without this it carries the line box's leading and the glyph sits
   above the centreline of whatever flex row it is in. Keep the flex on the
   host — not on the SVG itself, which stops Obsidian's icon painting on
   mobile. */
.eb-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.eb-button-icon .svg-icon {
	display: block;
}

/* The recurrence chip is the widest badge there is (a whole sentence), so it is
   the one that has to yield to the card's width. */
.eb-badge-recurrence {
	max-width: 100%;
	min-width: 0;
}

.eb-tag {
	display: inline-flex;
	padding: 1px 7px;
	font-size: var(--font-smaller, 0.8em);
	color: var(--text-accent);
	background: var(--background-modifier-hover);
	border-radius: 10px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.eb-tag:hover,
.eb-tag:focus-visible {
	text-decoration: none;
	filter: brightness(1.1);
	box-shadow: 0 0 0 1px var(--background-modifier-border-hover, var(--background-modifier-border));
}

.eb-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--background-modifier-border);
	vertical-align: middle;
}

/* Progress ring */
.eb-ring {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.eb-ring-track {
	stroke: var(--background-modifier-border);
}

.eb-ring-fill {
	stroke: var(--interactive-accent);
}

.eb-ring-label {
	position: absolute;
	font-size: 8px;
	color: var(--text-muted);
}

/* Dividers */
.eb-divider-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 2px 0;
	cursor: grab;
}

.eb-divider-label {
	flex: 0 0 auto;
	font-size: var(--font-smaller, 0.8em);
	font-weight: var(--font-semibold, 600);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: text;
}

.eb-divider-line {
	flex: 1 1 auto;
	height: 0;
	border-top: 1px dashed var(--background-modifier-border);
}

/* A colored divider wears its own color, so its group reads as a band rather
   than as a coincidence of card stripes (§4.2). */
.eb-divider-row.is-colored .eb-divider-label {
	color: var(--eb-divider-color);
}

.eb-divider-row.is-colored .eb-divider-line {
	border-top-color: var(--eb-divider-color);
	opacity: 0.5;
}

/* Editing */
.eb-editor {
	width: 100%;
	/* Autosized from the content by InlineEditor. */
	height: var(--eb-editor-height, auto);
	min-height: 2em;
	padding: 6px 8px;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.35;
	color: var(--text-normal);
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border-focus, var(--interactive-accent));
	border-radius: var(--radius-s, 6px);
	resize: none;
	overflow: hidden;
}

.eb-card.is-editing {
	padding: 0;
	border: none;
	box-shadow: none;
	background: none;
}

/* The inline card editor: a Markdown field plus its property badges (§6.6). */
.eb-card-editor {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border-focus, var(--interactive-accent));
	border-radius: var(--radius-s, 6px);
	cursor: auto;
}

/* Obsidian's embedded editor brings its own chrome; the card only bounds it. */
.eb-card-field {
	min-height: 1.6em;
}

.eb-card-editor .eb-card-field .cm-editor {
	background: none;
}

.eb-card-editor .eb-card-field .cm-scroller {
	padding: 0;
	overflow-x: hidden;
}

.eb-card-editor .eb-card-field .cm-line {
	padding-inline: 2px;
}

.eb-card-editor .eb-editor {
	border: none;
	padding: 2px;
}

.eb-card-editor-props {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eb-badge-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.eb-badge-edit {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	border: 1px solid transparent;
	box-shadow: none;
	cursor: pointer;
}

.eb-badge-edit:hover {
	border-color: var(--background-modifier-border-hover, var(--background-modifier-border));
}

.eb-badge-edit.is-active {
	border-color: var(--interactive-accent);
}

/* Icon-only chips (add property, add tag). The glyph is the whole content, so
   the box is centred on both axes and the vertical padding matches the text
   badges' line box — otherwise an icon chip sits a pixel high next to them. */
.eb-badge-add {
	justify-content: center;
	padding: 0 6px;
	min-height: calc(var(--font-smaller, 0.8em) * 1.5 + 2px);
	color: var(--text-muted);
	border: 1px dashed var(--background-modifier-border);
	box-shadow: none;
	cursor: pointer;
}

.eb-badge-add .svg-icon {
	display: block;
	width: 12px;
	height: 12px;
}

/* One property's typed editor, opened by selecting its badge (§3.1). */
.eb-value-editor {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
}

.eb-value-editor-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.eb-value-editor-name {
	font-weight: var(--font-semibold, 600);
}

.eb-value-editor-type,
.eb-value-empty {
	font-size: var(--font-smaller, 0.8em);
	color: var(--text-faint);
}

.eb-value-input {
	width: 100%;
}

.eb-value-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 40vh;
	overflow-y: auto;
}

.eb-value-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.eb-value-color {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	cursor: pointer;
}

.eb-value-editor-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

/* The tag picker (§3.1.1): the same panel as a property editor, but its list
   is the whole vault's tags, so the list scrolls and the panel does not. */
.eb-tag-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
}

.eb-tag-picker-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 40vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.eb-tag-picker-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	font-size: var(--font-smaller, 0.8em);
	text-align: left;
	color: var(--text-muted);
	background: transparent;
	border: none;
	border-radius: var(--radius-s, 6px);
	box-shadow: none;
	cursor: pointer;
}

.eb-tag-picker-row:hover {
	background: var(--background-modifier-hover);
}

.eb-tag-picker-row.is-on {
	color: var(--text-normal);
}

.eb-tag-picker-row.is-new {
	color: var(--text-accent);
}

/* The name ellipsizes: a nested tag can be longer than the card is wide. */
.eb-tag-picker-name {
	overflow: hidden;
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eb-tag-picker-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.eb-tag-picker-hint {
	font-size: var(--font-smaller, 0.8em);
	color: var(--text-faint);
}

/* Calendar-backed datetime, range and compound-list editor (0.3.1). */
.eb-date-editor,
.eb-date-values {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eb-date-values {
	max-height: 128px;
	overflow-y: auto;
}

.eb-date-value,
.eb-date-nav,
.eb-date-time,
.eb-date-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.eb-date-value {
	justify-content: space-between;
	min-width: 0;
	padding: 3px 6px;
	background: var(--background-primary);
	border-radius: var(--radius-s, 6px);
}

.eb-date-value > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eb-date-nav {
	justify-content: space-between;
	font-weight: var(--font-semibold, 600);
}

.eb-date-weekdays,
.eb-date-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(28px, 1fr));
	gap: 2px;
}

.eb-date-weekdays {
	color: var(--text-muted);
	font-size: var(--font-smaller, 0.8em);
	text-align: center;
}

.eb-date-day {
	min-width: 28px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--text-normal);
}

.eb-date-day.is-outside {
	color: var(--text-faint);
}

.eb-date-day.is-selected {
	background: var(--background-modifier-hover);
}

.eb-date-day.is-endpoint {
	background: var(--interactive-accent);
	border-radius: var(--radius-s, 6px);
	color: var(--text-on-accent);
}

.eb-date-day.is-taken {
	/* A plain grey here (`--background-modifier-border`) sat too close to the
	   grid's own background and to `.is-selected`'s hover grey to read as
	   "already taken" at a glance. A low-alpha tint of the theme's accent is
	   visible against both without being as loud as `.is-endpoint`'s solid
	   fill. */
	background: rgba(var(--interactive-accent-rgb), 0.18);
	color: var(--text-normal);
	border-radius: var(--radius-s, 6px);
}

.eb-date-day.is-today {
	box-shadow: inset 0 0 0 1px var(--interactive-accent);
	border-radius: var(--radius-s, 6px);
}

.eb-date-time {
	justify-content: space-between;
}

.eb-date-time input[type='time'] {
	padding: 4px 8px;
	font-family: inherit;
	font-size: inherit;
	color: var(--text-normal);
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
}

.eb-date-time input[type='time']:hover {
	border-color: var(--background-modifier-border-hover);
}

.eb-date-time input[type='time']:focus {
	border-color: var(--background-modifier-border-focus, var(--interactive-accent));
}

.eb-date-actions {
	justify-content: flex-end;
}

.eb-date-actions.is-list {
	flex-direction: column;
	align-items: stretch;
}

.eb-date-actions.is-list > button {
	width: 100%;
}

/* Checklist modal (card-content-and-checklists.md §4.3) */
.eb-checklist-count {
	color: var(--text-muted);
	font-weight: var(--font-normal, 400);
	white-space: pre;
}

.eb-checklist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 4px;
}

.eb-checklist-empty {
	color: var(--text-muted);
	padding: 8px 0;
}

.eb-checklist-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: calc(var(--eb-checklist-depth, 0) * 20px);
}

.eb-checklist-row input[type='checkbox'] {
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

/* The row's drag zone: the same grip the stack header carries. Shared with the
   date highlight rule rows (`.eb-dh-grip`). */
.eb-checklist-grip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 24px;
	color: var(--text-faint);
	border-radius: var(--radius-s, 4px);
	cursor: grab;
	touch-action: none;
}

.eb-checklist-grip:hover {
	color: var(--text-muted);
	background: var(--background-modifier-hover);
}

.eb-checklist-grip:active {
	cursor: grabbing;
}

.eb-checklist-grip .svg-icon {
	width: 14px;
	height: 14px;
}

/* Text until it is pointed at, then the board's own Markdown field in the same
   box — so a row does not jump when it starts being edited
   (card-content-and-checklists.md §4.3). */
.eb-checklist-text {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--size-4-1, 4px) var(--size-4-2, 8px);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-s, 4px);
	box-shadow: none;
	overflow-wrap: anywhere;
	cursor: text;
}

.eb-checklist-text:hover {
	border-color: var(--background-modifier-border);
}

.eb-checklist-text:focus,
.eb-checklist-text.is-editing {
	background: var(--background-primary);
	border-color: var(--background-modifier-border-focus, var(--interactive-accent));
}

/* The embedded editor brings its own padding and scroller. */
.eb-checklist-text.is-editing {
	padding: 0;
}

.eb-checklist-text .cm-editor {
	background: none;
}

.eb-checklist-text .cm-scroller {
	padding: 0;
}

.eb-checklist-text .cm-line {
	padding: var(--size-4-1, 4px) var(--size-4-2, 8px);
}

/* The pre-1.x fallback field, mounted in the same box. */
.eb-checklist-input {
	width: 100%;
	padding: var(--size-4-1, 4px) var(--size-4-2, 8px);
	background: none;
	border: none;
	box-shadow: none;
}

.eb-checklist-footer {
	display: flex;
	justify-content: flex-start;
	margin-top: 10px;
}

.eb-stack-name-editor {
	min-height: 0;
	padding: 2px 6px;
	font-weight: var(--font-normal, 400);
}

.eb-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--text-muted);
	background: none;
	border: none;
	border-radius: var(--radius-s, 4px);
	box-shadow: none;
	cursor: pointer;
}

.eb-icon-button:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.eb-icon-button .svg-icon {
	width: 16px;
	height: 16px;
}

/* Hover-only affordances stay reachable on touch devices. */
.eb-hover-only {
	opacity: 0;
	transition: opacity 120ms ease;
}

.eb-card:hover .eb-hover-only,
.eb-divider-row:hover .eb-hover-only,
.eb-hover-only:focus-visible {
	opacity: 1;
}

/* A list row is read one after another rather than pointed at, and its card
   already carries a stack badge of its own, so nothing there hides until the
   pointer arrives (list-view.md §2). */
.eb-list-row .eb-hover-only {
	opacity: 1;
}

/* Touch devices have no hover, so these controls are always visible there. */
body.is-mobile .eb-hover-only {
	opacity: 1;
}

@media (hover: none) {
	.eb-hover-only {
		opacity: 1;
	}
}

.eb-add-card,
.eb-add-stack-button {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 6px 8px;
	color: var(--text-muted);
	background: none;
	border: none;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
}

.eb-add-card:hover,
.eb-add-stack-button:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.eb-add-card .svg-icon,
.eb-add-stack-button .svg-icon {
	width: 16px;
	height: 16px;
}

.eb-add-stack {
	flex: 0 0 auto;
	width: 200px;
	padding: 6px;
	background: var(--background-secondary);
	border: 1px dashed var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
}

/* Property / tag color editors (board settings modal + settings tab) */
.eb-pe {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 4px;
}

.eb-pe-empty {
	color: var(--text-muted);
	font-size: var(--font-smaller, 0.85em);
}

.eb-pe-row {
	padding: 8px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
}

.eb-pe-head,
.eb-pe-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.eb-pe-option {
	margin-top: 6px;
}

.eb-pe-name,
.eb-pe-value {
	flex: 1 1 120px;
	min-width: 90px;
}

.eb-pe-type {
	flex: 0 1 auto;
}

.eb-pe-body {
	margin: 8px 0 0 4px;
	padding-left: 8px;
	border-left: 2px solid var(--background-modifier-border);
}

.eb-pe-label {
	margin-right: 6px;
	font-size: var(--font-smaller, 0.85em);
	color: var(--text-muted);
}

.eb-pe-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-smaller, 0.85em);
	color: var(--text-muted);
}

.eb-pe-color {
	display: flex;
	align-items: center;
	gap: 4px;
}

.eb-pe-color-input {
	width: 8em;
}

.eb-pe-button {
	padding: 0 8px;
	background: none;
	border: none;
	box-shadow: none;
	color: var(--text-muted);
	cursor: pointer;
}

.eb-pe-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.eb-pe-actions {
	display: flex;
	gap: 6px;
}

.eb-pe-diags {
	color: var(--text-warning, var(--text-muted));
	font-size: var(--font-smaller, 0.85em);
}

.eb-pe-diags:empty {
	display: none;
}

/* Date highlight rules: the same rows, dragged by a grip (order is meaningful) */
.eb-dh-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eb-dh-amount {
	width: 5em;
	flex: 0 0 auto;
}

.eb-dh-hint {
	margin-top: 2px;
}

.eb-pe-row .eb-pe-diags {
	margin-top: 6px;
}

.eb-swatch-button {
	padding: 0;
	width: 20px;
	height: 20px;
	box-shadow: none;
	cursor: pointer;
}

.eb-swatch-button:hover {
	border-color: var(--interactive-accent);
}

.eb-board-settings {
	width: min(46rem, 90vw);
}

/* Color picker */

/* Off-screen element used to resolve a CSS color to rgb() (util/color.ts). */
.eb-color-probe {
	display: none;
}

.eb-cp-modal {
	width: min(24rem, 92vw);
}

.eb-cp-preview {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.eb-cp-preview-swatch {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
	/* Checkerboard: without something behind it a translucent color reads as a
	   lighter opaque one, and the opacity slider looks like it does nothing. The
	   color itself is set as `background-color` (ColorPicker.ts), so it layers
	   over this instead of replacing it. */
	background-image:
		linear-gradient(45deg, var(--background-modifier-border) 25%, transparent 25% 75%, var(--background-modifier-border) 75%),
		linear-gradient(45deg, var(--background-modifier-border) 25%, transparent 25% 75%, var(--background-modifier-border) 75%);
	background-size: 12px 12px;
	background-position: 0 0, 6px 6px;
}

/* "No color" reads as the theme background, not as an invisible box. */
.eb-cp-preview-swatch.is-empty {
	background-image: linear-gradient(
		135deg,
		transparent 45%,
		var(--background-modifier-border) 45%,
		var(--background-modifier-border) 55%,
		transparent 55%
	);
}

.eb-cp-preview-label {
	color: var(--text-muted);
	font-size: var(--font-smaller, 0.85em);
	word-break: break-all;
}

.eb-cp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

/* Touch-sized targets: the palette is the primary control on mobile. */
.eb-cp-swatch {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
	box-shadow: none;
	cursor: pointer;
}

.eb-cp-swatch:hover {
	transform: scale(1.06);
}

.eb-cp-swatch.is-selected {
	box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 4px var(--interactive-accent);
}

.eb-cp-custom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.eb-cp-native {
	width: 40px;
	height: 32px;
	flex: 0 0 auto;
	padding: 2px;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
	cursor: pointer;
}

.eb-cp-alpha {
	flex: 0 1 6rem;
	min-width: 4rem;
}

.eb-cp-alpha:disabled {
	opacity: 0.4;
}

.eb-cp-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Archive: drop target (archive.md §5.5) */

/* Mounted with the board so Sortable knows it, shown only while a card is being
   dragged — the body class is toggled outside Preact, so the board is never
   re-rendered mid-drag. */
.eb-archive-drop {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* Wider than the "Add stack" button above it, so it reads as a target
	   rather than a twin. */
	margin: 8px -4px 0;
	padding: 18px 8px;
	font-size: var(--font-ui-small, 0.85em);
	color: var(--text-muted);
	background: var(--background-primary);
	border: 2px dashed var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
}

body.eb-dragging-card .eb-archive-drop {
	display: flex;
}

/* Sortable puts the dragged card inside the zone while it hovers over it, which
   is both the highlight's trigger and its preview. */
.eb-archive-drop:has(.eb-item) {
	flex-direction: column;
	color: var(--text-normal);
	background: var(--background-modifier-hover);
	border-color: var(--text-accent);
	border-style: solid;
}

.eb-archive-drop .eb-item {
	width: 100%;
	min-width: 0;
	pointer-events: none;
}

.eb-archive-drop .svg-icon {
	width: 16px;
	height: 16px;
}

/* Archive: the modal (archive.md §6) */
.eb-archive-modal .eb-archive-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 4px;
}

.eb-archive-empty {
	padding: 8px 0;
	color: var(--text-muted);
}

.eb-archive-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
}

.eb-archive-row.is-done .eb-card-title {
	color: var(--text-muted);
}

.eb-archive-row .eb-card-check {
	cursor: default;
}

.eb-archive-from,
.eb-archive-at {
	color: var(--text-muted);
	background: var(--background-modifier-border);
}

/* The archived-at stamp is the key the list is ordered by, not a property of
   the card, so it reads quieter than the origin chip beside it. */
.eb-archive-at {
	background: transparent;
	border: 1px solid var(--background-modifier-border);
}

/* Sits above the list and scrolls with nothing: the order applies to the whole
   archive, however far down it is read (archive.md §4.1). */
.eb-archive-toolbar {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 8px;
}

.eb-archive-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	font-size: var(--font-ui-smaller, 12px);
	color: var(--text-muted);
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.eb-archive-sort:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.eb-archive-sort .svg-icon {
	width: 15px;
	height: 15px;
}

/* Nothing in a row edits anything: its chips and indicator are inert. */
.eb-tag.is-static,
.eb-progress.is-static {
	cursor: default;
}

/* Drag & drop */
.eb-drag-ghost {
	opacity: 0.4;
}

.eb-drag-item {
	cursor: grabbing;
}

/* Manage views modal (views.md §4) */
.eb-views-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.eb-views-row {
	display: flex;
	align-items: stretch;
	gap: 4px;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
	background: var(--background-secondary);
	padding: 4px;
}

.eb-views-row.is-active {
	border-color: var(--interactive-accent);
}

.eb-views-main {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	background: transparent;
	border: none;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
}

.eb-views-main:disabled {
	cursor: default;
	opacity: 1;
}

.eb-views-icon {
	display: flex;
	color: var(--text-muted);
}

.eb-views-text {
	flex: 1;
	min-width: 0;
}

.eb-views-name {
	font-weight: var(--font-medium, 500);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eb-views-desc {
	font-size: var(--font-ui-smaller, 0.8em);
	color: var(--text-muted);
}

.eb-views-active {
	font-size: var(--font-ui-smaller, 0.8em);
	color: var(--text-accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.eb-views-actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

.eb-views-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--text-muted);
	cursor: pointer;
}

.eb-views-button:hover:not(:disabled) {
	color: var(--text-normal);
}

.eb-views-button:disabled {
	opacity: 0.4;
	cursor: default;
}

.eb-views-button.mod-warning:hover:not(:disabled) {
	color: var(--text-error);
}

/* The disabled-option explanations, which are shown rather than hidden. */
.eb-views-note {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 0;
}

/* ---------------------------------------------------------------------------
   Calendar view (calendar-view.md §2–§5)
   Cells are summaries: chips are plain text with a fixed height, so a month of
   them costs a month of divs and nothing more.
   --------------------------------------------------------------------------- */

.eb-cal {
	--eb-cal-chip-h: 20px;
	--eb-cal-bar-h: 20px;
	--eb-cal-daynum-h: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--size-4-2, 8px);
	gap: 6px;
	overflow: hidden;
}

.eb-cal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.eb-cal-nav {
	display: flex;
	align-items: center;
	gap: 2px;
}

.eb-cal-nav button {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
}

.eb-cal-title {
	flex: 1;
	min-width: 0;
	font-weight: var(--font-semibold, 600);
	text-align: center;
	text-transform: capitalize;
}

.eb-cal-modes {
	display: flex;
	gap: 2px;
}

.eb-cal-modes .is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.eb-cal-weekdays,
.eb-cal-cells,
.eb-cal-bars {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.eb-cal-weekday {
	padding: 2px 4px;
	font-size: var(--font-ui-smaller, 0.8em);
	color: var(--text-muted);
	text-align: center;
	text-transform: capitalize;
}

.eb-cal-grid {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	border-top: 1px solid var(--background-modifier-border);
	border-left: 1px solid var(--background-modifier-border);
}

.eb-cal-row {
	position: relative;
	flex: 1;
	min-height: 0;
}

.eb-cal-cells {
	height: 100%;
}

.eb-cal-cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	padding: 2px;
	border-right: 1px solid var(--background-modifier-border);
	border-bottom: 1px solid var(--background-modifier-border);
	cursor: pointer;
}

.eb-cal-cell:hover {
	background: var(--background-modifier-hover);
}

.eb-cal-cell.is-dim .eb-cal-daynum {
	color: var(--text-faint);
}

.eb-cal-cell.is-today .eb-cal-daynum {
	color: var(--text-on-accent);
	background: var(--interactive-accent);
	border-radius: 999px;
}

.eb-cal-daynum {
	flex: 0 0 auto;
	height: var(--eb-cal-daynum-h);
	min-width: var(--eb-cal-daynum-h);
	align-self: flex-start;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	font-size: var(--font-ui-smaller, 0.8em);
	color: var(--text-muted);
}

.eb-cal-lane-space {
	flex: 0 0 auto;
}

.eb-cal-chips {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-height: 0;
}

.eb-cal-chip {
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--eb-cal-chip-h);
	padding: 0 4px;
	font-size: var(--font-ui-smaller, 0.8em);
	line-height: var(--eb-cal-chip-h);
	background: var(--background-secondary);
	border-radius: var(--radius-s, 4px);
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.eb-cal-chip.is-colored {
	border-left: 3px solid var(--eb-card-color);
}

.eb-cal-chip.is-done .eb-cal-chip-text {
	color: var(--text-muted);
	text-decoration: line-through;
}

.eb-cal-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.eb-cal-chip-time {
	flex: 0 0 auto;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.eb-cal-chip-check {
	display: flex;
	flex: 0 0 auto;
	color: var(--text-muted);
}

.eb-cal-chip-check svg {
	width: 12px;
	height: 12px;
}

.eb-cal-more {
	flex: 0 0 auto;
	padding: 0 4px;
	font-size: var(--font-ui-smaller, 0.8em);
	color: var(--text-muted);
}

/* Narrow container: the head's three groups — navigation, period label, mode
   switch — stop fitting on one line well before the cells do, and squeezed onto
   one they crush the label. So the label takes a row of its own and the two
   button groups share the next, pushed to opposite ends. Keyed to the same
   measured width as the compact grid below, not to `is-mobile`: a narrow
   desktop split has exactly the same problem (mobile.md §1). */
.eb-cal.is-narrow .eb-cal-head {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		'title title'
		'nav modes';
	justify-content: space-between;
	row-gap: 6px;
}

.eb-cal.is-narrow .eb-cal-title {
	grid-area: title;
	/* No longer a flex child competing for the row's leftovers. */
	flex: none;
}

.eb-cal.is-narrow .eb-cal-nav {
	grid-area: nav;
}

.eb-cal.is-narrow .eb-cal-modes {
	grid-area: modes;
}

/* Compact month grid: too narrow for chip text, so a card is one colored mark
   and the tap goes to the day modal (mobile.md §6). Keyed to the container's
   measured width, so a narrow desktop split renders exactly like a phone. */
.eb-cal-grid.is-compact .eb-cal-cell {
	align-items: center;
	padding: 2px 1px;
}

.eb-cal-grid.is-compact .eb-cal-daynum {
	align-self: center;
	padding: 0 2px;
}

.eb-cal-marks {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	gap: 3px;
	/* An impossible day is clipped rather than allowed to push the row: there is
	   no "+N" here, because there is no chip text for it to stand in for. */
	min-height: 0;
	width: 100%;
	padding: 2px 1px;
	overflow: hidden;
}

.eb-cal-mark {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	/* Uncolored cards still have to be countable, so they take the muted text
	   color rather than disappearing. */
	background: var(--text-muted);
}

.eb-cal-mark.is-colored {
	background: var(--eb-card-color);
}

.eb-cal-mark.is-done {
	background: none;
	box-shadow: inset 0 0 0 1px var(--text-muted);
}

.eb-cal-mark.is-done.is-colored {
	box-shadow: inset 0 0 0 1px var(--eb-card-color);
}

/* Bars sit above the cells: a span crosses columns, so it cannot live in one. */
.eb-cal-bars {
	position: absolute;
	top: var(--eb-cal-daynum-h);
	left: 0;
	right: 0;
	grid-auto-rows: var(--eb-cal-bar-h);
	pointer-events: none;
	z-index: 1;
}

.eb-cal-bar {
	margin: 0 2px 1px;
	padding: 0 6px;
	height: calc(var(--eb-cal-bar-h) - 2px);
	line-height: calc(var(--eb-cal-bar-h) - 2px);
	font-size: var(--font-ui-smaller, 0.8em);
	background: var(--background-modifier-border);
	border-radius: var(--radius-s, 4px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: auto;
	cursor: pointer;
}

.eb-cal-bar.is-colored {
	background: var(--eb-card-color);
	color: var(--text-on-accent);
}

/* A segment that continues into another row must not look like a shorter one. */
.eb-cal-bar.is-cut-start {
	margin-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.eb-cal-bar.is-cut-end {
	margin-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* The "No date" tray (§4) */
.eb-cal-tray {
	flex: 0 0 auto;
	border-top: 1px solid var(--background-modifier-border);
	padding-top: 4px;
}

.eb-cal-tray-head {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 4px;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--text-muted);
	cursor: pointer;
}

.eb-cal-tray-count {
	padding: 0 6px;
	background: var(--background-modifier-border);
	border-radius: 999px;
	font-size: var(--font-ui-smaller, 0.8em);
}

.eb-cal-tray-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-height: var(--eb-cal-chip-h);
	padding: 2px;
}

.eb-cal-tray:not(.is-open) .eb-cal-tray-list {
	max-height: var(--eb-cal-chip-h);
	overflow: hidden;
	opacity: 0.5;
}

.eb-cal-tray-list .eb-cal-chip {
	max-width: 220px;
}

/* A calendar whose date property is gone explains itself (§7). */
.eb-cal-broken {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 3em 2em;
	color: var(--text-muted);
	text-align: center;
}

/* The day modal (§5) */
.eb-day-modal .eb-day-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.eb-day-row {
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s, 6px);
	padding: 4px;
}

.eb-day-row .eb-card {
	background: transparent;
	border: none;
	box-shadow: none;
}

.eb-day-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0 6px 4px;
}

.eb-day-stack,
.eb-day-divider {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	background: var(--background-modifier-border);
	color: var(--text-muted);
	border: none;
	box-shadow: none;
	font-size: var(--font-ui-smaller, 0.8em);
	cursor: pointer;
}

.eb-day-stack svg,
.eb-day-divider svg {
	width: 12px;
	height: 12px;
}

.eb-day-divider {
	color: var(--eb-divider-color, var(--text-muted));
}

.eb-day-divider.is-empty {
	opacity: 0.6;
}

.eb-day-empty {
	padding: 2em;
	color: var(--text-muted);
	text-align: center;
}

.eb-day-composer {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--background-modifier-border);
}

.eb-day-composer input {
	flex: 1;
	min-width: 0;
}

/* Repetition rule form (recurrence.md §4) */
.eb-recurrence-interval {
	width: 4em;
}

.eb-weekday-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.eb-weekday {
	padding: 2px 8px;
	background: var(--background-modifier-border);
	border: none;
	box-shadow: none;
	cursor: pointer;
}

.eb-weekday.is-on {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

/* The rule is unreadable as controls alone, so it is always spelled out. */
.eb-recurrence-preview {
	margin: 12px 0;
	padding: 8px;
	background: var(--background-secondary);
	border-radius: var(--radius-s, 6px);
}

.eb-recurrence-phrase {
	font-family: var(--font-monospace);
	font-size: var(--font-ui-smaller, 0.85em);
}

.eb-recurrence-next {
	margin-top: 4px;
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.85em);
}

.eb-recurrence-problem {
	color: var(--text-error);
	font-size: var(--font-ui-smaller, 0.85em);
}

/* The stored phrase in full, so it wraps rather than overflowing the panel. */
.eb-value-rule {
	width: 100%;
	height: auto;
	text-align: left;
	white-space: normal;
	word-break: break-word;
}

.eb-cal-chip-repeat {
	display: flex;
	flex: 0 0 auto;
	color: var(--text-faint);
}

.eb-cal-chip-repeat svg {
	width: 12px;
	height: 12px;
}

/* ---------------------------------------------------------------------------
   Mobile & adaptive (mobile.md)

   Two signals, and they are not interchangeable. `body.is-mobile` is about
   *how the user touches* the board — hit areas, chrome, density — and is the
   only one used below. Anything about *how much fits* is keyed to a measured
   width instead and lives with the component it belongs to (the compact
   calendar grid above). Nothing here keys off a user-agent string.
   --------------------------------------------------------------------------- */

/* Extraboard's three views own their padding and scrolling. Obsidian's generic
   `.view-content` adds another inset (including a safe-area bottom padding) and
   an outer scroller around the 100%-high `.eb-root`, which becomes a visible
   blank strip above the mobile navbar. Scope the reset to the content element
   marked by `BoardView`; no Markdown or other plugin view is affected.

   The view-switch indicator is positioned against this same element, beside
   the Preact mount rather than inside it, so a re-render cannot drop it
   mid-fade. */
.workspace-leaf-content .view-content.eb-content {
	position: relative;
	padding: 0;
	overflow: hidden;
}

.eb-view-indicator {
	position: absolute;
	top: 8px;
	left: 50%;
	z-index: 20;
	max-width: 80%;
	padding: 4px 12px;
	font-size: var(--font-ui-small, 0.85em);
	color: var(--text-on-accent);
	background: var(--interactive-accent);
	border-radius: 999px;
	box-shadow: var(--shadow-s, 0 1px 4px rgba(0, 0, 0, 0.2));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -6px);
	transition: opacity 160ms ease, transform 160ms ease;
}

.eb-view-indicator.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Bottom inset (§4): Obsidian's mobile navbar overlays the leaf, so the last
   interactive row of every view — the calendar's "No date" tray head, a stack's
   "Add card", the "Add stack" column — would sit under it. The board reserves
   that height itself and honours the platform safe area on top of it. The
   navbar's own height is not exposed as a variable, so it is a measured
   constant that a theme can still override through `--eb-bottom-inset`. */
body.is-mobile .eb-root {
	/* The floating navigation/editor toolbar occupies about 56 px plus its
	   bottom gap on the current mobile layout. Keep the whole 64 px band clear. */
	--eb-navbar-h: 64px;
	padding-bottom: var(--eb-bottom-inset, calc(var(--eb-navbar-h) + env(safe-area-inset-bottom, 0px)));
	box-sizing: border-box;
}

/* Obsidian replaces the floating navigation bar with its editing toolbar and
   marks that state on the body. Its mobile layout already accounts for that
   toolbar, so keeping our navigation reserve would add a second 64 px gap. */
body.is-mobile.mod-toolbar-open .eb-root {
	padding-bottom: 0;
}

/* A desktop-style horizontal scrollbar becomes a second floating bar above the
   mobile toolbar. Touch already supplies the scroll affordance, so hide only
   the board row's visual scrollbar; its horizontal scrolling remains enabled. */
body.is-mobile .eb-board {
	scrollbar-width: none;
}

body.is-mobile .eb-board::-webkit-scrollbar {
	display: none;
}

/* Obsidian gives a *page* of Markdown breathing room under the phone header:

     .is-phone … .markdown-source-view > .cm-editor > .cm-scroller {
       padding-top: var(--view-top-spacing-markdown);
     }

   The card editor embeds a real source view, so it inherits that page-sized gap
   inside a tile a few lines tall. The rule reads a variable, so the fix is to
   zero the variable for our subtree rather than to out-specify a seven-class
   selector — that keeps working if Obsidian rewrites the selector, and it does
   not touch the spacing on any actual Markdown page. `.eb-root` is enough of a
   scope: the core rule is confined to `.mod-root … .view-content`, so it never
   reaches our modals in the first place. */
body.is-phone .eb-root {
	--view-top-spacing-markdown: 0px;
}

/* Visual density (§5). Mobile themes resolve `--radius-*` and control sizing
   larger, which inflates a board that is dense on purpose. The rule is: pin the
   plugin's own metric where the theme would grow the tile, and add hit area
   with padding where a control is merely too small to hit — never by growing
   what is drawn. */
body.is-mobile .eb-stack {
	--radius-s: 6px;
	--radius-m: 8px;
}

body.is-mobile .eb-card,
body.is-mobile .eb-card-editor,
body.is-mobile .eb-editor {
	border-radius: 6px;
}

body.is-mobile .eb-chip,
body.is-mobile .eb-badge,
body.is-mobile .eb-tag {
	padding: 1px 7px;
	font-size: var(--font-smaller, 0.8em);
	line-height: 1.5;
	border-radius: 10px;
}

/* Hit area without visual growth: the drawn box keeps its size and a
   pseudo-element reaches past it (§5). Two shapes, because a 36 x 36 halo is
   only safe where a control has room around it — inside the badge row or the
   stack header, neighbours sit 4 px apart and overlapping halos would hand the
   tap to whichever painted last. So an isolated control grows in both axes and
   a control in a dense row grows only vertically, keeping its own width. */
body.is-mobile .eb-icon-button,
body.is-mobile .eb-card-menu,
body.is-mobile .eb-checklist-grip,
body.is-mobile .eb-progress,
body.is-mobile .eb-badge-edit {
	position: relative;
}

body.is-mobile .eb-icon-button::after,
body.is-mobile .eb-card-menu::after,
body.is-mobile .eb-checklist-grip::after,
body.is-mobile .eb-progress::after,
body.is-mobile .eb-badge-edit::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	height: max(100%, 36px);
	transform: translate(-50%, -50%);
}

/* Isolated: the card's ⋯ in its own corner, the checklist row's grip. */
body.is-mobile .eb-card-menu::after,
body.is-mobile .eb-checklist-grip::after {
	width: max(100%, 36px);
}

/* Dense: the stack header's row and the badge row keep their own widths. */
body.is-mobile .eb-icon-button::after,
body.is-mobile .eb-progress::after,
body.is-mobile .eb-badge-edit::after {
	width: 100%;
}

/* The icon buttons themselves keep the desktop's 24 px tile: the mobile theme
   would otherwise resolve `--input-height` into them. The row they sit in gets
   the height instead, which is what makes the 36 px halos above fit. */
body.is-mobile .eb-icon-button {
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: var(--radius-s, 4px);
}

body.is-mobile .eb-stack-header {
	min-height: 40px;
}

/* The grip is the stack's cue that it can be moved, not its only drag zone on
   touch — the whole stack body is (§3) — so it needs no halo of its own. */
body.is-mobile .eb-stack-grip {
	height: 32px;
}

body.is-mobile .eb-card-menu {
	width: 20px;
	height: 20px;
	margin-top: 0;
}

/* The calendar's own chrome. These take their hit area as real height — they
   are the only controls in the head, so there is room for it vertically — and
   spend as little width as possible on it: the head has three groups to fit and
   the period label beside them is the thing that must not be squeezed. So the
   36 px is the whole height, and the horizontal padding stays at the desktop's.
   It has to be `height`, not `min-height`: the mobile theme resolves
   `--input-height` (44 px) into every button, and a minimum cannot bring that
   back down — the head would be a third taller than the row needs, for a target
   already comfortably past the 36 px the rest of the mobile chrome uses. */
body.is-mobile .eb-cal-nav button,
body.is-mobile .eb-cal-modes button {
	height: 36px;
	padding: 4px 8px;
	font-size: var(--font-ui-small, 0.85em);
	border-radius: var(--radius-s, 4px);
}

/* The two chevrons carry no text, so horizontal padding buys nothing: a square
   keeps the hit area and gives the width back to the label. */
body.is-mobile .eb-cal-nav button:first-child,
body.is-mobile .eb-cal-nav button:last-child {
	width: 36px;
	padding: 0;
	justify-content: center;
}

body.is-mobile .eb-cal-nav button .svg-icon {
	width: 16px;
	height: 16px;
}

body.is-mobile .eb-cal-tray-head,
body.is-mobile .eb-add-card,
body.is-mobile .eb-add-stack-button {
	min-height: 36px;
}

/* ---------------------------------------------------------------------------
   List view (list-view.md §2). One vertical scroller of sections; on a wide
   window the column is capped and centred, so a card stays a card instead of a
   banner. On a phone the cap is inert and the list runs edge to edge.
   --------------------------------------------------------------------------- */

.eb-list {
	--eb-list-width: 720px;
	height: 100%;
	max-width: var(--eb-list-width);
	margin-inline: auto;
	padding: var(--size-4-3, 12px);
	overflow-y: auto;
	overflow-x: hidden;
}

.eb-list-empty {
	padding: 2em;
	color: var(--text-muted);
	text-align: center;
}

/* One filter and one sort for the whole list, above every section — where the
   per-section chips used to be (filters-and-sorting.md §1). */
.eb-list-toolbar {
	display: flex;
	align-items: center;
	gap: var(--size-4-2, 8px);
	margin-bottom: var(--size-4-2, 8px);
}

.eb-list-toolbar .eb-list-filter,
.eb-list-toolbar .eb-list-sort {
	max-width: 50%;
}

.eb-section {
	margin-bottom: var(--size-4-3, 12px);
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
	/* The same invariant the stacks hold: nothing inside may widen the section
	   (mobile.md §2), the embedded editor included. */
	min-width: 0;
}

.eb-section-header {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--background-modifier-border);
}

.eb-section-grip {
	display: flex;
	align-items: center;
	color: var(--text-faint);
	cursor: grab;
}

.eb-section-grip svg {
	width: 14px;
	height: 14px;
}

.eb-section-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: var(--font-medium, 500);
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: text;
}

.eb-section-name.is-muted {
	color: var(--text-muted);
	cursor: default;
}

.eb-section-name-editor {
	flex: 1;
	min-width: 0;
}

/* The list header's two chips and the row's stack badge share one shape. */
.eb-list-filter,
.eb-list-sort,
.eb-list-stack {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	max-width: 40%;
	overflow: hidden;
	padding: 1px 6px;
	background: var(--background-modifier-border);
	color: var(--text-muted);
	border: none;
	box-shadow: none;
	font-size: var(--font-ui-smaller, 0.8em);
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

.eb-list-filter svg,
.eb-list-sort svg,
.eb-list-stack svg {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
}

.eb-list-filter.is-active,
.eb-list-sort.is-active {
	color: var(--text-accent);
}

.eb-list-filter:disabled,
.eb-list-sort:disabled {
	opacity: 0.6;
	cursor: default;
}

.eb-section-count {
	flex: 0 0 auto;
	padding: 0 4px;
	color: var(--text-muted);
	font-size: var(--font-ui-smaller, 0.8em);
}

.eb-section-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	/* Keep an empty section a usable drop target. */
	min-height: 24px;
	min-width: 0;
}

/* `display: flex` would otherwise beat the browser default for [hidden] —
   the same rule `.eb-stack-body` needs, for the same reason. */
.eb-section-body[hidden] {
	display: none;
}

.eb-section.is-collapsed .eb-section-header {
	border-bottom: none;
}

/* A row is the card plus the badge naming its stack; the badge sits to the
   right of the tile on a wide list and under it when there is no room. */
.eb-list-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.eb-list-row > .eb-card {
	flex: 1;
	min-width: 0;
}

.eb-list-row .eb-list-stack {
	margin-top: 4px;
	max-width: 30%;
}

/* Marks where the rows above and below belong to different stacks (§4.3):
   not a real divider, and not a drop target — a drag stops actually moving
   the card into the other stack right here. The line itself stays a hairline;
   the box around it is tall enough to actually catch the hover that shows its
   tooltip. */
.eb-list-stack-boundary {
	display: flex;
	align-items: center;
	height: 9px;
	cursor: default;
}

.eb-list-stack-boundary::before {
	content: '';
	flex: 1;
	border-top: 1px dashed var(--background-modifier-border);
}

/* While a row is being dragged, every other-stack row across the whole list
   is shown as what it is: a drop never changes a card's stack, wherever it
   lands (§4.3), so these are not valid targets for that move. */
.eb-list-row-other-stack {
	opacity: 0.4;
	filter: grayscale(1);
}

/* Desktop owns a different stack control inside `.eb-card-head`; this sibling
   remains exclusively the mobile footer. */
body:not(.is-mobile) .eb-list-row > .eb-list-stack {
	display: none;
}

.eb-card-stack {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex: 0 1 auto;
	max-width: 40%;
	height: 20px;
	min-height: 20px;
	padding: 1px 5px;
	overflow: hidden;
	font-size: var(--font-ui-smaller, 0.8em);
	line-height: 1;
	white-space: nowrap;
}

.eb-card-stack > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The two desktop read-mode actions share a 20 px padding box: 3 px above and
   below a 14 px content line. The labelled stack action keeps wider inline
   padding, while the square menu action needs exactly 3 px around its SVG. */
body:not(.is-mobile) .eb-card-head .eb-card-stack,
body:not(.is-mobile) .eb-card-head .eb-card-menu {
	box-sizing: border-box;
	height: 20px;
	min-height: 20px;
	margin-top: -1px;
	padding-block: 3px;
}

body:not(.is-mobile) .eb-card-head .eb-card-stack {
	padding-inline: 5px;
	border-radius: var(--radius-s, 4px);
}

body:not(.is-mobile) .eb-card-head .eb-card-stack .svg-icon {
	width: 14px;
	height: 14px;
}

body:not(.is-mobile) .eb-card-head .eb-card-menu {
	padding-inline: 3px;
}

body:not(.is-mobile) .eb-list-row:hover .eb-card-stack,
body:not(.is-mobile) .eb-list-row:focus-within .eb-card-stack,
body:not(.is-mobile) .eb-list-row:hover .eb-card-menu,
body:not(.is-mobile) .eb-list-row:focus-within .eb-card-menu {
	opacity: 1;
}

body:not(.is-mobile) .eb-card-edit-actions {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 4px;
}

body.is-mobile .eb-card-stack {
	display: none;
}

/* "Add card" plus the stack it writes into: the button grows, the badge keeps
   its own width so the stack name stays readable. */
.eb-section-compose {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px 8px;
	min-width: 0;
}

.eb-section-compose .eb-add-card {
	flex: 1;
	min-width: 0;
	width: auto;
}

.eb-list-add-section {
	padding-bottom: var(--size-4-3, 12px);
}

.eb-list-add-section-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 8px;
	color: var(--text-muted);
	background: none;
	border: 1px dashed var(--background-modifier-border);
	border-radius: var(--radius-m, 8px);
	box-shadow: none;
	cursor: pointer;
}

.eb-list-add-section-button:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.eb-list-add-section-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.eb-list-add-section-editor {
	width: 100%;
	min-width: 0;
}

/* Phones: the cap is inert, the badges wrap under the card, and the composer
   stacks so its three controls keep touch-sized targets (mobile.md §3). */
.is-phone .eb-list {
	padding: var(--size-4-2, 8px);
}

.is-phone .eb-section-header {
	gap: 2px;
	padding-inline: 6px;
}


.is-phone .eb-list-row {
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0;
	border-radius: 6px;
	box-shadow: var(--shadow-s, 0 1px 2px rgba(0, 0, 0, 0.08));
}

.is-phone .eb-list-row > .eb-card {
	flex-basis: auto;
	width: 100%;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: none;
}

.is-phone .eb-list-row > .eb-card.is-editing .eb-card-editor {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.is-phone .eb-list-row .eb-list-stack {
	justify-content: flex-start;
	width: 100%;
	height: 32px;
	min-height: 32px;
	max-width: 100%;
	margin-top: 0;
	padding-block: 2px;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-top: none;
	border-radius: 0 0 6px 6px;
}