@layer components {
	.sr-only {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.rida-card {
		display: flex;
		flex-direction: column;
		min-width: 0;
		background: var(--surface);
		border: 1px solid var(--table-border);
		border-radius: var(--radius-md);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
		color: var(--text);
		overflow: hidden;
	}

	/* Shared placement for transient page feedback. Visual tone remains owned by
	   the feature displaying the message. */
	.rida-toast {
		position: fixed;
		z-index: 10500;
		top: auto;
		left: 50%;
		right: auto;
		bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
		width: max-content;
		max-width: min(420px, calc(100vw - (var(--spacing-md) * 2)));
		margin: 0;
		border: 0;
		pointer-events: none;
		transform: translate(-50%, 8px);
		transition: opacity 160ms ease, transform 160ms ease;
	}

	.rida-toast.is-visible,
	.rida-toast:not([hidden]):not(:empty) {
		transform: translate(-50%, 0);
	}

	.rida-toast[hidden],
	.rida-toast:empty {
		display: none;
	}

	.rida-system-toast {
		--toast-tone: var(--blue);
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--spacing-sm);
		min-width: min(320px, calc(100vw - (var(--spacing-md) * 2)));
		padding: 10px 14px;
		border: 1px solid color-mix(in srgb, var(--toast-tone) 32%, var(--table-border));
		border-radius: var(--radius-md);
		background: var(--surface);
		color: var(--text);
		box-shadow: var(--modal-shadow);
		opacity: 0;
		pointer-events: auto;
	}

	.rida-system-toast[data-tone="success"] { --toast-tone: var(--green); }
	.rida-system-toast[data-tone="error"] { --toast-tone: var(--red); }
	.rida-system-toast[data-tone="warning"] { --toast-tone: var(--orange); }
	.rida-system-toast.is-visible { opacity: 1; }

	.rida-system-toast__icon {
		color: var(--toast-tone);
		font-size: 1rem;
	}

	.rida-system-toast__copy {
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	.rida-system-toast__copy strong {
		color: var(--toast-tone);
		font: 750 0.8rem/1.15 var(--font-main), sans-serif;
	}

	.rida-system-toast__copy > span {
		font: 650 0.78rem/1.3 var(--font-main), sans-serif;
	}

	.rida-system-toast__action {
		appearance: none;
		padding: 6px 10px;
		border: 0;
		border-radius: var(--radius-sm);
		background: color-mix(in srgb, var(--toast-tone) 12%, transparent);
		color: var(--toast-tone);
		font: 750 0.76rem/1 var(--font-main), sans-serif;
		cursor: pointer;
	}

	.rida-system-toast__action:hover,
	.rida-system-toast__action:focus-visible {
		background: color-mix(in srgb, var(--toast-tone) 20%, transparent);
		outline: none;
	}

	.rida-card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-sm);
		padding: var(--spacing-md) var(--spacing-md) 0;
	}

	.rida-card-body {
		font-size: var(--type-body);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		min-width: 0;
		padding: var(--spacing-md);
	}

	.rida-card-title {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
		margin: 0;
		color: var(--text);
		font-family: var(--font-heading), var(--font-main), sans-serif;
		font-size: var(--type-section-title);
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: 0;
	}

	.rida-section-actions {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--spacing-xs);
		flex: 0 0 auto;
	}

	.rida-icon-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--control-height);
		min-width: var(--control-height);
		height: var(--control-height);
		padding: 0;
		border: 0;
		border-radius: var(--radius-sm);
		background: transparent;
		color: var(--text);
	}

	.rida-icon-button:hover,
	.rida-icon-button:focus-visible {
		background: var(--elevation);
		color: var(--text);
		outline: none;
	}

	.rida-action-menu {
		position: relative;
		display: inline-flex;
	}

	/* Canonical table-row kebab and popover. Table actions intentionally use
	   the regular control size; page-header actions use the smaller contract
	   below. The popover is fixed so scrolling table containers cannot clip it. */
	.rida-table-action-trigger {
		margin-left: auto;
	}

	.rida-table-actions-popover {
		position: fixed;
		z-index: 10200;
		width: max-content;
		min-width: 178px;
		margin: 0;
		padding: 6px;
		border: 1px solid var(--table-border);
		border-radius: var(--radius-md);
		background: var(--surface);
		color: var(--text);
		box-shadow: var(--modal-shadow);
	}

	.rida-table-actions-popover:not(:popover-open):not(.is-open) {
		display: none;
	}

	.rida-table-actions-popover > button {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);
		width: 100%;
		min-height: 36px;
		padding: 8px 10px;
		border: 0;
		border-radius: var(--radius-sm);
		background: transparent;
		color: var(--text);
		font: 700 var(--action-menu-font-size)/1.2 var(--font-main), sans-serif;
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
	}

	.rida-table-actions-popover > button:hover,
	.rida-table-actions-popover > button:focus-visible {
		background: var(--elevation);
		outline: none;
	}

	.rida-table-actions-popover > button[data-tone="danger"] {
		color: var(--red);
	}

	/* Canonical page-header kebab. Keep this geometry aligned with the
	   Contacts header so feature styles cannot quietly resize the control. */
	.rida-header-action-trigger,
	.rida-action-menu.rida-header-action-menu > summary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 30px;
		width: 30px;
		min-width: 30px;
		height: 30px;
		padding: 0;
		box-sizing: border-box;
		border: 0;
		border-radius: var(--radius-full);
		background: transparent;
		color: var(--text);
		font-size: 1rem;
		line-height: 1;
		list-style: none;
		cursor: pointer;
	}

	.rida-action-menu.rida-header-action-menu > summary::-webkit-details-marker {
		display: none;
	}

	.rida-header-action-trigger:hover,
	.rida-header-action-trigger:focus-visible,
	.rida-action-menu.rida-header-action-menu > summary:hover,
	.rida-action-menu.rida-header-action-menu > summary:focus-visible,
	.rida-action-menu.rida-header-action-menu[open] > summary {
		background: var(--alpha-blue);
		color: var(--blue);
		outline: none;
	}

	.rida-action-menu.rida-header-action-menu > .rida-header-action-menu__content {
		position: absolute;
		top: calc(100% + var(--spacing-xs));
		right: 0;
		z-index: 30;
		display: flex;
		flex-direction: column;
		width: max-content;
		min-width: 220px;
		padding: 6px;
		box-sizing: border-box;
		border: 1px solid var(--table-border);
		border-radius: var(--radius-md);
		background: var(--surface);
		box-shadow: var(--modal-shadow);
	}

	.rida-action-menu.rida-header-action-menu > .rida-header-action-menu__content > .rida-header-action-menu__item {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr) 14px;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 0;
		padding: 10px 12px;
		box-sizing: border-box;
		border: 0;
		border-radius: var(--radius-sm);
		background: transparent;
		color: var(--text);
		font: 700 var(--action-menu-font-size)/1.2 var(--font-main), sans-serif;
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
	}

	.rida-action-menu.rida-header-action-menu > .rida-header-action-menu__content > .rida-header-action-menu__item:hover,
	.rida-action-menu.rida-header-action-menu > .rida-header-action-menu__content > .rida-header-action-menu__item:focus-visible {
		background: var(--alpha-blue);
		color: var(--blue);
		outline: none;
	}

	.rida-header-action-menu__item > i {
		width: 20px;
		text-align: center;
	}

	.rida-header-action-menu__item > i:last-child:not(:first-child) {
		width: 14px;
	}

	.rida-badge {
		--rida-badge-color: var(--overlay);
		--rida-badge-bg: color-mix(in srgb, var(--rida-badge-color) 12%, transparent);
		--rida-badge-border: color-mix(in srgb, var(--rida-badge-color) 24%, transparent);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 24px;
		width: max-content;
		max-width: 100%;
		padding: 3px 9px;
		border: 1px solid var(--rida-badge-border);
		border-radius: var(--radius-full);
		background: var(--rida-badge-bg);
		color: var(--rida-badge-color);
		font: 700 11px/1 var(--font-main), sans-serif;
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
	}

	.rida-status-filter {
		appearance: none;
		margin: 0;
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		font-family: inherit;
		cursor: pointer;
		transition:
			color 120ms ease,
			background-color 120ms ease,
			border-color 120ms ease,
			box-shadow 120ms ease,
			transform 120ms ease;
	}

	.rida-status-filter.is-archived {
		--rida-badge-color: var(--red);
	}

	.rida-status-filter.is-active,
	.rida-status-filter.is-published {
		--rida-badge-color: var(--green);
	}

	.rida-status-filter.is-draft {
		--rida-badge-color: var(--orange);
	}

	.rida-status-filter.is-inactive,
	.rida-status-filter.is-invited {
		--rida-badge-color: var(--orange);
	}

	.rida-status-filter:hover {
		--rida-badge-bg: color-mix(in srgb, var(--rida-badge-color) 20%, transparent);
	}

	.rida-status-filter:active {
		transform: translateY(1px);
	}

	.rida-status-filter:focus-visible {
		outline: 2px solid var(--blue);
		outline-offset: 2px;
	}

	.rida-status-filter[aria-pressed="true"] {
		--rida-badge-bg: var(--rida-badge-color);
		--rida-badge-border: var(--rida-badge-color);
		color: var(--surface);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--rida-badge-color) 18%, transparent);
	}

	.rida-opportunity-badge {
		margin-top: var(--spacing-xs);
		cursor: pointer;
	}

	.rida-orange-badge {
		--rida-badge-color: var(--orange);
	}

	.rida-opportunity-badge[data-opportunity="1"] {
		--rida-badge-color: var(--green);
	}

	.rida-opportunity-badge[data-opportunity="2"] {
		--rida-badge-color: var(--red);
	}

	.rida-opportunity-badge[data-opportunity="3"] {
		--rida-badge-color: var(--orange);
	}

	.rida-orange-badge[data-opportunity] {
		--rida-badge-color: var(--orange);
	}

	.rida-zone-badge {
		--rida-badge-color: var(--blue);
		margin-top: var(--spacing-xs);
		border-radius: var(--radius-sm);
		cursor: pointer;
	}

	.rida-tag-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--spacing-xs);
	}

	.rida-tag {
		--rida-tag-color: var(--blue);
		--rida-tag-bg: color-mix(in srgb, var(--rida-tag-color) 11%, transparent);
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 24px;
		max-width: 100%;
		padding: 3px 9px;
		border: 1px solid color-mix(in srgb, var(--rida-tag-color) 22%, transparent);
		border-radius: var(--radius-full);
		background: var(--rida-tag-bg);
		color: var(--rida-tag-color);
		font: 700 11px/1 var(--font-main), sans-serif;
		letter-spacing: 0;
		white-space: normal;
	}

	.rida-tag[data-tag-type="vip"],
	.rida-tag[data-tag-type="returning"] {
		--rida-tag-color: var(--green);
	}

	.rida-tag[data-tag-type="wholesale"] {
		--rida-tag-color: var(--purple);
	}

	.rida-tag[data-tag-type="area"] {
		--rida-tag-color: var(--orange);
	}

	.rida-tag[data-tag-type="preference"] {
		--rida-tag-color: var(--teal);
	}

	/* Shared editable-tag interaction. Existing values remain compact until
	   hover/focus reveals the destructive remove affordance. The flex row owns
	   the extra width so adjacent tags and Add controls always retain the gap. */
	.rida-removable-tag {
		position: relative;
		gap: 0;
		padding-right: 9px;
		transition:
			background-color 160ms ease,
			border-color 160ms ease,
			color 160ms ease,
			padding-right 160ms ease;
	}

	.rida-removable-tag__label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-width: 0;
	}

	.rida-removable-tag [data-rida-tag-remove] {
		position: absolute;
		top: 50%;
		right: 6px;
		display: inline-grid;
		place-items: center;
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-full);
		background: transparent;
		color: currentColor;
		font-size: 10px;
		cursor: pointer;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.82);
		transition:
			opacity 160ms ease,
			transform 160ms ease,
			background-color 160ms ease;
	}

	.rida-removable-tag:hover,
	.rida-removable-tag:focus-within {
		--rida-tag-color: var(--red);
		padding-right: 32px;
		border-color: color-mix(in srgb, var(--red) 42%, transparent);
		background: color-mix(in srgb, var(--red) 14%, transparent);
	}

	.rida-removable-tag:hover [data-rida-tag-remove],
	.rida-removable-tag:focus-within [data-rida-tag-remove] {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(-50%) scale(1);
	}

	.rida-removable-tag [data-rida-tag-remove]:hover,
	.rida-removable-tag [data-rida-tag-remove]:focus-visible {
		outline: none;
		background: color-mix(in srgb, currentColor 14%, transparent);
	}

	.rida-tag-add,
	.rida-tag-editor {
		min-height: 24px;
		border-radius: var(--radius-full);
		box-sizing: border-box;
	}

	.rida-tag-add {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 3px 9px;
		border: 1px dashed color-mix(in srgb, var(--overlay) 70%, transparent);
		background: transparent;
		color: var(--text-muted);
		font: 700 11px/1 var(--font-main), sans-serif;
		cursor: pointer;
		transition: transform 160ms ease;
	}

	.rida-tag-add:hover,
	.rida-tag-add:focus-visible {
		outline: none;
		border-color: var(--blue);
		background: color-mix(in srgb, var(--blue) 8%, transparent);
		color: var(--blue);
	}

	.rida-tag-add[hidden],
	.rida-tag-editor[hidden] {
		display: none;
	}

	.rida-tag-editor {
		display: inline-flex;
		align-items: center;
		width: min(var(--rida-tag-editor-width, 136px), 100%);
		min-height: 24px;
		padding: 0 3px 0 9px;
		border: 1px solid var(--blue);
		background: var(--surface);
	}

	.rida-tag-editor input {
		flex: 1 1 auto;
		width: 72px;
		min-width: 0;
		height: 22px;
		min-height: 0;
		max-height: 22px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--text);
		font: 650 11px/1 var(--font-main), sans-serif;
		outline: none;
	}

	.rida-tag-editor button {
		display: inline-grid;
		place-items: center;
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--text-muted);
		cursor: pointer;
	}

	.rida-tag-editor [data-rida-tag-confirm] {
		font-size: 12px;
	}

	.rida-tag-editor [data-rida-tag-cancel] {
		font-size: 8px;
	}

	.rida-tag-editor button i {
		display: block;
		line-height: 1;
	}

	.rida-tag-editor button:hover,
	.rida-tag-editor button:focus-visible {
		outline: none;
		background: var(--elevation);
		color: var(--blue);
	}

	@media (hover: none) {
		.rida-removable-tag {
			padding-right: 32px;
		}

		.rida-removable-tag [data-rida-tag-remove] {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(-50%) scale(1);
		}
	}

	.rida-inline-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
		margin: 0;
		border-bottom: 1px solid var(--elevation);
	}

	.rida-field-grid {
		display: grid;
		gap: var(--spacing-sm);
		min-width: 0;
	}

	.rida-field-grid-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rida-field-stack {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.rida-field-label {
		display: block;
		color: var(--text-muted);
		font-size: var(--type-caption);
		font-weight: var(--type-label-weight);
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: uppercase;
	}

	.rida-inline-input {
		width: 100%;
		min-width: 0;
		min-height: 34px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--text);
		font: var(--type-body-weight) var(--type-body-lg)/1.25 var(--font-main), sans-serif;
		outline: none;
		box-shadow: none;
	}

	.rida-inline-input:focus {
		box-shadow: 0 2px 0 var(--blue);
	}

	/* Shared single-line input with optional leading/trailing adornments. Keep
	   its geometry and type aligned with the canonical select trigger. */
	.rida-input-group {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-width: 0;
		min-height: var(--control-height);
		padding: var(--control-padding-block) var(--control-padding-inline);
		border: 1px solid var(--table-border);
		border-radius: var(--radius-sm);
		background: var(--surface);
		color: var(--text);
		box-sizing: border-box;
	}

	.rida-input-group:hover:not(:focus-within) {
		background: color-mix(in srgb, var(--elevation) 45%, var(--surface));
	}

	.rida-input-group:focus-within {
		border-color: var(--blue);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 16%, transparent);
	}

	.rida-input-group__leading,
	.rida-input-group__trailing {
		color: var(--text-muted);
		font-size: 0.82rem;
		line-height: 1;
	}

	.rida-input-group__leading {
		grid-column: 1;
	}

	.rida-input-group__control {
		grid-column: 2;
		width: 100%;
		min-width: 0;
		min-height: 0;
		padding: 0;
		border: 0;
		outline: 0;
		background: transparent;
		color: var(--text);
		font: var(--control-font-weight) var(--control-font-size)/1.25 var(--font-main), sans-serif;
		box-shadow: none;
	}

	.rida-input-group__trailing {
		grid-column: 3;
	}

	/* Single-control fields, such as native date inputs, keep the shared shell
	   without reserving empty adornment columns. */
	.rida-input-group--plain {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.rida-input-group--plain > .rida-input-group__control {
		grid-column: 1;
	}

	.rida-input-group__trailing:empty {
		display: none;
	}

	/* A standalone input uses the same shell as the adorned input group.
	   Use rida-input-group__control only inside rida-input-group. */
	.rida-input {
		display: block;
		width: 100%;
		min-width: 0;
		min-height: var(--control-height);
		padding: var(--control-padding-block) var(--control-padding-inline);
		border: 1px solid var(--table-border);
		border-radius: var(--control-radius);
		background: var(--surface);
		color: var(--text);
		font: var(--control-font-weight) var(--control-font-size)/1.25 var(--font-main), sans-serif;
		box-sizing: border-box;
	}

	.rida-input:hover:not(:disabled):not(:focus) {
		background: color-mix(in srgb, var(--elevation) 45%, var(--surface));
	}

	.rida-input:focus-visible {
		border-color: var(--blue);
		outline: 2px solid var(--alpha-blue);
		outline-offset: 1px;
	}

	.rida-input::placeholder,
	.rida-input-group__control::placeholder {
		color: var(--text-muted);
		opacity: 1;
	}

	.rida-input:disabled,
	.rida-input-group:has(> .rida-input-group__control:disabled) {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.rida-input[readonly] {
		background: var(--bg);
	}

	.rida-input[aria-invalid="true"],
	.rida-input-group:has(> .rida-input-group__control[aria-invalid="true"]) {
		border-color: var(--red);
		outline-color: var(--alpha-red);
	}

	.rida-field-label small {
		font-size: inherit;
		font-weight: var(--type-body-weight);
		text-transform: none;
	}

	/* Shared multiline field contract. Feature styles should control only
	   layout or an intentional height override. */
	.rida-textarea {
		display: block;
		width: 100%;
		min-width: 0;
		min-height: var(--textarea-min-height);
		padding: var(--textarea-padding-block) var(--textarea-padding-inline);
		border: 1px solid var(--table-border);
		border-radius: var(--control-radius);
		background: var(--surface);
		color: var(--text);
		font: 600 var(--control-font-size)/1.45 var(--font-main), sans-serif;
		box-sizing: border-box;
		resize: vertical;
		transition: border-color 160ms ease, outline-color 160ms ease;
	}

	.rida-textarea::placeholder {
		color: var(--text-muted);
		opacity: 1;
	}

	.rida-textarea:focus,
	.rida-textarea:focus-visible {
		border-color: var(--blue);
		outline: 3px solid var(--alpha-blue);
		outline-offset: 1px;
	}

	.rida-textarea[aria-invalid="true"] {
		border-color: var(--red);
		outline-color: var(--alpha-red);
	}

	.rida-textarea:disabled,
	.rida-textarea[readonly] {
		opacity: 0.65;
	}

	.rida-inline-field.is-dirty .rida-field-label::after {
		content: "Modified";
		display: inline-flex;
		margin-left: 6px;
		color: var(--blue);
		font-size: 10px;
		text-transform: none;
	}

	.rida-field-link {
		display: inline-flex;
		align-items: center;
		width: max-content;
		max-width: 100%;
		min-height: 28px;
		padding: 0 8px;
		border-radius: var(--radius-sm);
		color: var(--blue);
		font-size: var(--type-caption);
		font-weight: var(--type-label-weight);
		line-height: 1.2;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.rida-field-link:hover,
	.rida-field-link:focus {
		background: var(--elevation);
		color: var(--blue);
		text-decoration: none;
		outline: none;
	}

	.rida-address-topline {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--spacing-sm);
	}

	.rida-address-actions {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-xs);
	}

	.rida-address-input {
		min-height: 52px;
		resize: vertical;
	}

	.rida-relationship-list {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.rida-relationship-row {
		display: grid;
		grid-template-columns: minmax(8rem, 0.9fr) minmax(0, 1fr);
		gap: var(--spacing-md);
		align-items: baseline;
	}

	.rida-relationship-label {
		color: var(--text-muted);
		font-size: 0.95rem;
		font-weight: 600;
	}

	.rida-relationship-value {
		min-width: 0;
		display: flex;
		justify-content: flex-end;
		text-align: right;
		font-size: 1rem;
		font-weight: 800;
	}

	.rida-relationship-value a {
		color: var(--blue);
		text-decoration: none;
	}

	.rida-empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 72px;
		padding: var(--spacing-md);
		border: 1px dashed var(--table-border);
		border-radius: var(--radius-md);
		color: var(--text-muted);
		font: 700 13px/1.3 var(--font-main), sans-serif;
		text-align: center;
	}

	.rida-task-groups,
	.rida-task-group,
	.rida-task-list,
	.rida-activity-list {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		min-width: 0;
	}

	.rida-task-group-title {
		margin: 0;
		font-family: var(--font-heading), var(--font-main), sans-serif;
		font-size: 1.05rem;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: 0;
	}

	.rida-task-group[data-task-group="overdue"] .rida-task-group-title {
		color: var(--red);
	}

	.rida-task-group[data-task-group="today"] .rida-task-group-title {
		color: var(--orange);
	}

	.rida-task-card {
		display: grid;
		grid-template-columns: 18px minmax(0, 1fr);
		gap: 10px;
		align-items: start;
		padding: var(--spacing-sm);
		border: 1px solid var(--table-border);
		border-radius: var(--radius-md);
		background: var(--surface);
		color: var(--text);
		cursor: pointer;
		transition: border-color 0.2s ease, background-color 0.2s ease;
	}

	.rida-task-card:hover {
		border-color: color-mix(in srgb, var(--blue) 30%, var(--table-border));
		background: color-mix(in srgb, var(--blue) 4%, var(--surface));
	}

	.rida-task-checkbox {
		width: 16px;
		height: 16px;
		margin: 3px 0 0;
		accent-color: var(--blue);
	}

	.rida-task-content {
		min-width: 0;
	}

	.rida-task-title {
		margin: 0;
		color: var(--text);
		font-size: 0.95rem;
		font-weight: 800;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	.rida-task-title-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}

	.rida-task-title-row .rida-task-title {
		flex: 1 1 auto;
	}

	.rida-task-household-indicator {
		--rida-badge-color: var(--blue);
		flex: 0 0 auto;
		min-height: 20px;
		padding: 2px 6px;
		font-size: 0.62rem;
	}

	.rida-task-household-indicator span {
		white-space: nowrap;
	}

	.rida-task-excerpt {
		margin: 4px 0 0;
		color: var(--text-muted);
		font-size: 0.82rem;
		font-weight: 500;
		line-height: 1.35;
	}

	.rida-task-meta {
		margin-top: 4px;
		color: var(--text-muted);
		font-size: 0.78rem;
		font-weight: 700;
		line-height: 1.35;
	}

	.rida-activity-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 3px;
		align-items: start;
		padding-bottom: var(--spacing-sm);
		border-bottom: 1px solid var(--elevation);
	}

	.rida-activity-item:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.rida-activity-title {
		color: var(--text);
		font-size: 0.9rem;
		font-weight: 800;
		line-height: 1.25;
	}

	.rida-activity-meta {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
		color: var(--text-muted);
		font-size: 0.78rem;
		font-weight: 700;
		line-height: 1.3;
	}

	.rida-system-datetime {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
		white-space: nowrap;
	}

	.rida-system-datetime__date {
		color: var(--text);
		font-weight: 700;
	}

	.rida-system-datetime__time {
		color: var(--text-muted);
		font-size: 0.9em;
		font-weight: 600;
	}

	.rida-system-datetime--inline {
		flex-direction: row;
		align-items: baseline;
		gap: 5px;
	}

	.rida-system-datetime__separator {
		color: var(--text-muted);
		font-weight: 600;
	}

	@media (max-width: 560px) {
		.rida-card-header,
		.rida-address-topline {
			flex-direction: column;
			align-items: stretch;
		}

		.rida-section-actions,
		.rida-address-actions {
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.rida-field-grid-two,
		.rida-relationship-row {
			grid-template-columns: 1fr;
		}

		.rida-relationship-value {
			text-align: left;
		}
	}
}