/* Base, color theme, header, button, sidebar, modal and tab-strip styles are
   carried over from DA-Tool (scoped to .hda-view so the two plugins never
   style each other); the worksheet styles follow at the end. */

.hda-view, .hda-view *, .hda-view *::before, .hda-view *::after {
	box-sizing: border-box;
}

/* Obsidian's theme applies its own padding/border/background/shadow/min-height
   to bare <button> elements. The original web tool sat on top of Tailwind's
   preflight reset (margin/padding/border/background all zeroed on every
   button); without that reset here, that theme chrome leaks in underneath
   every button class below, which only override color/background/font-size —
   not padding or min-height — so buttons render larger than their class
   dimensions call for. Reset first, then let each button class opt back in. */
.hda-view button {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	border-radius: 0;
	font: inherit;
	color: inherit;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.hda-view {
	/* UI scale (plugin setting); applied to chrome marked .da-ui-scaled. */
	--da-ui-scale: 1;

	/* ---- standard coloring (default design tokens) ---- */
	--da-bg: #f8fafc;
	--da-surface: #ffffff;
	--da-row-bg: #f1f5f9;
	--da-text: #0f172a;
	--da-muted: #64748b;
	--da-faint: #94a3b8;
	--da-border: #e2e8f0;
	--da-border-strong: #cbd5e1;
	--da-accent: #1e40af;
	--da-accent-hover: #1a3a9e;
	--da-accent-soft-bg: #eff6ff;
	--da-on-accent: #ffffff;
	--da-secondary: #475569;
	--da-secondary-hover: #334155;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #1e40af;
	--da-main-point-soft-bg: #fff7ed;

	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--da-bg);
	color: var(--da-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	position: relative;
}

/* ---- theme coloring: adopt the active Obsidian theme's palette ----
   --da-bg is the main canvas/page background; --da-surface is the slightly
   contrasting chrome background (header, sidebars, modals, buttons) — the
   same relationship Obsidian's own primary/secondary backgrounds have. */
.hda-view.hda-theme-adopt {
	--da-bg: var(--background-primary);
	--da-surface: var(--background-secondary);
	--da-row-bg: var(--background-secondary-alt, var(--background-secondary));
	--da-text: var(--text-normal);
	--da-muted: var(--text-muted);
	--da-faint: var(--text-faint);
	--da-border: var(--background-modifier-border);
	--da-border-strong: var(--background-modifier-border);
	--da-accent: var(--interactive-accent);
	--da-accent-hover: var(--interactive-accent-hover);
	--da-accent-soft-bg: color-mix(in srgb, var(--interactive-accent) 15%, var(--background-primary));
	--da-on-accent: var(--text-on-accent);
	--da-secondary: var(--interactive-normal);
	--da-secondary-hover: var(--interactive-hover);
	--da-success: var(--color-green, #10b981);
	--da-success-hover: color-mix(in srgb, var(--color-green, #10b981) 80%, black);
	--da-warn-bg: color-mix(in srgb, var(--color-yellow, #eab308) 30%, var(--background-primary));
	--da-warn-hover: color-mix(in srgb, var(--color-yellow, #eab308) 55%, var(--background-primary));
	--da-danger: var(--color-red, #ef4444);
	--da-danger-hover: color-mix(in srgb, var(--color-red, #ef4444) 80%, black);
	--da-danger-bg: color-mix(in srgb, var(--color-red, #ef4444) 35%, var(--background-primary));
	--da-main-point: var(--color-orange, #d97706);
	--da-note: var(--interactive-accent);
	--da-main-point-soft-bg: color-mix(in srgb, var(--color-orange, #d97706) 18%, var(--background-primary));
}
.hda-view.hda-theme-adopt .hda-canvas,
.hda-view.hda-theme-adopt .hda-grid {
	background: var(--da-bg);
}

/* ---- standard palette, dark ---- */
.hda-view.hda-standard.hda-dark {
	--da-bg: #0f172a;
	--da-surface: #1e293b;
	--da-row-bg: #273449;
	--da-text: #e2e8f0;
	--da-muted: #94a3b8;
	--da-faint: #64748b;
	--da-border: #334155;
	--da-border-strong: #475569;
	--da-accent: #3b82f6;
	--da-accent-hover: #2563eb;
	--da-accent-soft-bg: #1e3a5f;
	--da-on-accent: #ffffff;
	--da-secondary: #64748b;
	--da-secondary-hover: #94a3b8;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #4a3b12;
	--da-warn-hover: #6b5417;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #7f1d1d;
	--da-main-point: #f59e0b;
	--da-note: #3b82f6;
	--da-main-point-soft-bg: #3a2608;
	color-scheme: dark;
}

/* ---- colour schemes (ported from BibleSearch) ----
   Chosen from the header dropdown / settings. Each scheme has a light and a
   dark variant; the dark one applies automatically while Obsidian itself is
   in dark mode (.hda-dark: Obsidian's own mode, or the header's light/dark switch).
   Values are literal hex (no color-mix) so the settings tab's swatches can
   resolve them. Manual color overrides still win (inline custom properties). */
.hda-view.hda-scheme-blue {
	--da-bg: #e8f0fa;
	--da-surface: #ffffff;
	--da-row-bg: #d0e4f8;
	--da-text: #0a1a2e;
	--da-muted: #4a6880;
	--da-faint: #8095a6;
	--da-border: #aacae8;
	--da-border-strong: #88a8c4;
	--da-accent: #1a6fa8;
	--da-accent-hover: #165e8f;
	--da-accent-soft-bg: #c0d8f4;
	--da-on-accent: #ffffff;
	--da-secondary: #4a6880;
	--da-secondary-hover: #3b5366;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #1a6fa8;
	--da-main-point-soft-bg: #fff7ed;
}
.hda-view.hda-dark.hda-scheme-blue {
	--da-bg: #0d1b2e;
	--da-surface: #122240;
	--da-row-bg: #1a3a6e;
	--da-text: #dce8ff;
	--da-muted: #7a9abf;
	--da-faint: #5b7699;
	--da-border: #1e3a6a;
	--da-border-strong: #3e5c88;
	--da-accent: #0088ab;
	--da-accent-hover: #269ab8;
	--da-accent-soft-bg: #1a3a6e;
	--da-on-accent: #ffffff;
	--da-secondary: #456592;
	--da-secondary-hover: #54749f;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #4f4923;
	--da-warn-hover: #876f19;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #5c2936;
	--da-main-point: #d97706;
	--da-note: #0088ab;
	--da-main-point-soft-bg: #322c27;
}
.hda-view.hda-scheme-yellow {
	--da-bg: #fffce8;
	--da-surface: #ffffff;
	--da-row-bg: #fff8c0;
	--da-text: #1a1600;
	--da-muted: #706020;
	--da-faint: #9b9063;
	--da-border: #e0d060;
	--da-border-strong: #b9a94a;
	--da-accent: #b07800;
	--da-accent-hover: #966600;
	--da-accent-soft-bg: #fff0a0;
	--da-on-accent: #ffffff;
	--da-secondary: #706020;
	--da-secondary-hover: #5a4d1a;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #b07800;
	--da-main-point-soft-bg: #fff7ed;
}
.hda-view.hda-dark.hda-scheme-yellow {
	--da-bg: #1c1a00;
	--da-surface: #2a2600;
	--da-row-bg: #3d3700;
	--da-text: #fff8d6;
	--da-muted: #a09060;
	--da-faint: #7d7043;
	--da-border: #4a4200;
	--da-border-strong: #685d22;
	--da-accent: #f0a500;
	--da-accent-hover: #f2b226;
	--da-accent-soft-bg: #3d3700;
	--da-on-accent: #ffffff;
	--da-secondary: #6a5f2b;
	--da-secondary-hover: #786c3a;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #5a4802;
	--da-warn-hover: #8d6e04;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #662918;
	--da-main-point: #d97706;
	--da-note: #f0a500;
	--da-main-point-soft-bg: #3e2b01;
}
.hda-view.hda-scheme-red {
	--da-bg: #fff0f0;
	--da-surface: #ffffff;
	--da-row-bg: #fde0e0;
	--da-text: #1a0000;
	--da-muted: #804040;
	--da-faint: #a67979;
	--da-border: #f0aaaa;
	--da-border-strong: #c98585;
	--da-accent: #c0392b;
	--da-accent-hover: #a33025;
	--da-accent-soft-bg: #fac8c8;
	--da-on-accent: #ffffff;
	--da-secondary: #804040;
	--da-secondary-hover: #663333;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #c0392b;
	--da-main-point-soft-bg: #fff7ed;
}
.hda-view.hda-dark.hda-scheme-red {
	--da-bg: #1e0a0a;
	--da-surface: #2e1010;
	--da-row-bg: #4a1818;
	--da-text: #ffe0e0;
	--da-muted: #a06060;
	--da-faint: #7e4848;
	--da-border: #5a2020;
	--da-border-strong: #723636;
	--da-accent: #e94560;
	--da-accent-hover: #ec6178;
	--da-accent-soft-bg: #4a1818;
	--da-on-accent: #ffffff;
	--da-secondary: #713838;
	--da-secondary-hover: #7e4343;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #5b3d09;
	--da-warn-hover: #8e6709;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #671e1e;
	--da-main-point: #d97706;
	--da-note: #e94560;
	--da-main-point-soft-bg: #401e09;
}
.hda-view.hda-scheme-green {
	--da-bg: #f0faf2;
	--da-surface: #ffffff;
	--da-row-bg: #d8f4e0;
	--da-text: #001a08;
	--da-muted: #3a6848;
	--da-faint: #75957f;
	--da-border: #90d8a8;
	--da-border-strong: #72b186;
	--da-accent: #1a7a40;
	--da-accent-hover: #166836;
	--da-accent-soft-bg: #b8ecc8;
	--da-on-accent: #ffffff;
	--da-secondary: #3a6848;
	--da-secondary-hover: #2e533a;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #1a7a40;
	--da-main-point-soft-bg: #fff7ed;
}
.hda-view.hda-dark.hda-scheme-green {
	--da-bg: #0a1a0e;
	--da-surface: #102818;
	--da-row-bg: #1a4228;
	--da-text: #d8ffe8;
	--da-muted: #6a9a7a;
	--da-faint: #4f785d;
	--da-border: #1e4830;
	--da-border-strong: #39654a;
	--da-accent: #4caf82;
	--da-accent-hover: #67bb95;
	--da-accent-soft-bg: #1a4228;
	--da-on-accent: #ffffff;
	--da-secondary: #3e6a4d;
	--da-secondary-hover: #4a7759;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #4d480c;
	--da-warn-hover: #856e0b;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #5a2921;
	--da-main-point: #d97706;
	--da-note: #4caf82;
	--da-main-point-soft-bg: #2f2b0d;
}
.hda-view.hda-scheme-purple {
	--da-bg: #f6f0ff;
	--da-surface: #ffffff;
	--da-row-bg: #ecdeff;
	--da-text: #0e001a;
	--da-muted: #604880;
	--da-faint: #907fa6;
	--da-border: #c8a8f0;
	--da-border-strong: #a486c9;
	--da-accent: #7030b0;
	--da-accent-hover: #5f2996;
	--da-accent-soft-bg: #dcc8ff;
	--da-on-accent: #ffffff;
	--da-secondary: #604880;
	--da-secondary-hover: #4d3a66;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #7030b0;
	--da-main-point-soft-bg: #fff7ed;
}
.hda-view.hda-dark.hda-scheme-purple {
	--da-bg: #120a1e;
	--da-surface: #1e1030;
	--da-row-bg: #301848;
	--da-text: #eedeff;
	--da-muted: #8860aa;
	--da-faint: #684885;
	--da-border: #3a1a60;
	--da-border-strong: #55327a;
	--da-accent: #c06aff;
	--da-accent-hover: #c980ff;
	--da-accent-soft-bg: #301848;
	--da-on-accent: #ffffff;
	--da-secondary: #583874;
	--da-secondary-hover: #654383;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #533d17;
	--da-warn-hover: #896712;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #5f1e2b;
	--da-main-point: #d97706;
	--da-note: #c06aff;
	--da-main-point-soft-bg: #361e1a;
}
.hda-view.hda-scheme-cream {
	--da-bg: #fdf8f0;
	--da-surface: #fffcf6;
	--da-row-bg: #f5ece0;
	--da-text: #1a1008;
	--da-muted: #806848;
	--da-faint: #a6947c;
	--da-border: #d8c8a8;
	--da-border-strong: #b9a686;
	--da-accent: #8a5a2a;
	--da-accent-hover: #754c24;
	--da-accent-soft-bg: #eeddc8;
	--da-on-accent: #ffffff;
	--da-secondary: #806848;
	--da-secondary-hover: #66533a;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #fef3c7;
	--da-warn-hover: #fcd34d;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #fca5a5;
	--da-main-point: #d97706;
	--da-note: #8a5a2a;
	--da-main-point-soft-bg: #fff7ed;
}
.hda-view.hda-dark.hda-scheme-cream {
	--da-bg: #1c1810;
	--da-surface: #2a2418;
	--da-row-bg: #3c3424;
	--da-text: #f5eddc;
	--da-muted: #9a8a70;
	--da-faint: #786b56;
	--da-border: #4a3e2a;
	--da-border-strong: #665942;
	--da-accent: #d4a050;
	--da-accent-hover: #daae6a;
	--da-accent-soft-bg: #3c3424;
	--da-on-accent: #ffffff;
	--da-secondary: #665b46;
	--da-secondary-hover: #746852;
	--da-success: #10b981;
	--da-success-hover: #059669;
	--da-warn-bg: #5a460e;
	--da-warn-hover: #8d6d0c;
	--da-danger: #ef4444;
	--da-danger-hover: #dc2626;
	--da-danger-bg: #662722;
	--da-main-point: #d97706;
	--da-note: #d4a050;
	--da-main-point-soft-bg: #3e290e;
}

/* ---------- colour theme dropdown (header) ---------- */
.hda-view .da-theme-select {
	height: 30px;
	padding: 0 8px;
	border-radius: 8px;
	border: 1px solid var(--da-border-strong);
	background: var(--da-surface);
	color: var(--da-text);
	font-size: 0.8rem;
	cursor: pointer;
	box-shadow: none;
}
.hda-view .da-theme-select:hover {
	border-color: var(--da-faint);
}

/* ---------- UI scale ---------- */

/* CSS zoom scales px and rem sizes alike. It also scales vh/vw lengths and
   left/top offsets inside the zoomed element, so those are divided back by
   the scale where they need to stay screen-sized (modal max sizes here; the
   label editor's position and sidebar resizing in DAView.ts). */
.hda-view .da-ui-scaled {
	zoom: var(--da-ui-scale);
}

/* ---------- header ---------- */

.hda-view .da-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 24px;
	background: var(--da-surface);
	border-bottom: 1px solid var(--da-border);
	flex-wrap: wrap;
}

.hda-view .da-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hda-view .da-logo {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	background: var(--da-accent);
	color: var(--da-on-accent);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
}

.hda-view .da-title {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -0.5px;
	margin: 0;
}

.hda-view .da-header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex: 1 1 auto;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.hda-view .da-label {
	color: var(--da-muted);
	font-size: 0.85rem;
}

/* ---------- buttons ---------- */

.hda-view .da-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 34px;
	padding: 6px 14px;
	border-radius: 14px;
	border: 1px solid var(--da-border-strong);
	background: var(--da-surface);
	color: var(--da-text);
	font-size: 0.85rem;
	line-height: 1.3;
	white-space: normal;
	text-align: center;
	cursor: pointer;
}

.hda-view .da-btn:hover {
	border-color: var(--da-faint);
	background: var(--da-bg);
}

.hda-view .da-btn-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.hda-view .da-btn-primary {
	background: var(--da-accent);
	border-color: var(--da-accent);
	color: var(--da-on-accent);
	font-weight: 600;
}
.hda-view .da-btn-primary:hover {
	background: var(--da-accent-hover);
}

.hda-view .da-btn-secondary {
	background: var(--da-secondary);
	border-color: var(--da-secondary);
	color: var(--da-on-accent);
	font-weight: 600;
}
.hda-view .da-btn-secondary:hover {
	background: var(--da-secondary-hover);
}

.hda-view .da-btn-accent {
	background: var(--da-success);
	border-color: var(--da-success);
	color: var(--da-on-accent);
	font-weight: 600;
}
.hda-view .da-btn-accent:hover {
	background: var(--da-success-hover);
}

.hda-view .da-btn-support {
	background: var(--da-success);
	border-color: var(--da-border-strong);
	color: var(--da-on-accent);
	font-weight: 700;
}
.hda-view .da-support-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.hda-view .da-btn-support:hover {
	background: var(--da-success-hover);
	border-color: var(--da-faint);
	color: var(--da-on-accent);
}

.hda-view .da-btn-warn {
	background: var(--da-warn-bg);
	border-color: var(--da-border-strong);
}
.hda-view .da-btn-warn:hover {
	background: var(--da-warn-hover);
}

.hda-view .da-btn-danger {
	background: var(--da-danger-bg);
	border-color: var(--da-border-strong);
}
.hda-view .da-btn-danger:hover {
	background: var(--da-danger);
	color: var(--da-on-accent);
}

.hda-view .da-btn-block {
	width: 100%;
	min-height: 44px;
	height: auto;
	padding: 10px 14px;
	border-radius: 18px;
	margin-bottom: 8px;
	white-space: normal;
	line-height: 1.3;
}

.hda-view .da-btn-square {
	width: 40px;
	height: 40px;
	border-radius: 18px;
	border: 1px solid var(--da-border-strong);
	background: var(--da-surface);
	color: var(--da-text);
	cursor: pointer;
}
.hda-view .da-btn-square:hover {
	border-color: var(--da-faint);
}

.hda-view .da-btn-icon-only {
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 0.8rem;
}

.hda-view .da-btn-insert {
	font-size: 0.64rem;
}

.hda-view .da-flex1 { flex: 1 1 0%; }

.hda-view .da-row-gap {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

/* ---------- RTL / theme switches ---------- */

.hda-view .da-switch {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	height: 20px;
	width: 36px;
	border-radius: 999px;
	border: none;
	background: var(--da-border-strong);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease-in-out;
}
.hda-view .da-switch.da-switch-on {
	background: var(--da-success);
}
.hda-view .da-switch-thumb {
	pointer-events: none;
	position: absolute;
	top: 3px;
	left: 3px;
	height: 14px;
	width: 14px;
	border-radius: 999px;
	background: var(--da-on-accent);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	transition: left 0.2s ease-in-out;
}
.hda-view .da-switch.da-switch-on .da-switch-thumb {
	left: 19px;
}

/* ---------- body layout ---------- */

.hda-view .da-body {
	flex: 1 1 0%;
	display: flex;
	overflow: hidden;
	min-height: 0;
}

.hda-view .da-sidebar {
	flex-shrink: 0;
	background: var(--da-surface);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.hda-view .da-sidebar-left { border-right: 1px solid var(--da-border); }

.hda-view .da-sidebar-header {
	padding: 16px 24px;
	border-bottom: 1px solid var(--da-border);
	background: var(--da-bg);
}

.hda-view .da-section-title {
	text-transform: uppercase;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--da-muted);
	margin: 0 0 8px 0;
}

.hda-view .da-textarea {
	width: 100%;
	resize: vertical;
	border: 1px solid var(--da-border-strong);
	border-radius: 18px;
	padding: 10px 18px;
	font-size: 0.85rem;
	outline: none;
	font-family: inherit;
	background: var(--da-surface);
	color: var(--da-text);
}
.hda-view .da-textarea:focus {
	border-color: var(--da-accent);
}

.hda-view .da-prop-list {
	flex: 1 1 0%;
	overflow: auto;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hda-view .da-empty-hint {
	padding: 48px 24px;
	text-align: center;
	color: var(--da-faint);
	font-size: 0.85rem;
}
.hda-view .da-empty-hint-main {
	padding-top: 80px;
	padding-bottom: 80px;
}
.hda-view .da-zoom-row {
	display: flex;
	align-items: center;
	gap: 4px;
}
.hda-view .da-zoom-label {
	font-size: 0.8rem;
	color: var(--da-muted);
	width: 36px;
	text-align: center;
}

.hda-view .da-instructions {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--da-text);
}

.hda-view .da-instructions h3 {
	font-size: 0.9rem;
	font-weight: 700;
	margin: 14px 0 2px;
}

.hda-view .da-instructions h3:first-child {
	margin-top: 0;
}

.hda-view .da-instructions ul {
	list-style: disc;
	padding-inline-start: 1.15rem;
	margin: 2px 0 4px;
}

.hda-view .da-instructions ul ul {
	list-style: circle;
	margin: 0;
}

.hda-view .da-instructions kbd {
	font-family: inherit;
	font-size: 0.78rem;
	padding: 0 4px;
	border: 1px solid var(--da-border-strong);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--da-row-bg);
	color: var(--da-text);
}

/* ---------- label editor popup ---------- */

.hda-view .da-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15,23,42,0.55);
}
.hda-view .da-modal-backdrop.hidden {
	display: none;
}

.hda-view .da-modal {
	background: var(--da-surface);
	color: var(--da-text);
	border-radius: 20px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
	width: 100%;
	max-width: 64rem;
	max-height: calc(90vh / var(--da-ui-scale));
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hda-view .da-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	border-bottom: 1px solid var(--da-border);
	flex-shrink: 0;
}
.hda-view .da-modal-title {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.5px;
	margin: 0;
}
.hda-view .da-modal-close {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	border: 1px solid var(--da-border);
	background: var(--da-surface);
	color: var(--da-muted);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.hda-view .da-modal-close:hover { background: var(--da-row-bg); }

.hda-view .da-modal-body {
	overflow: auto;
	padding: 28px;
}

.hda-view .da-modal-narrow {
	max-width: 28rem;
}

.hda-view .da-modal-medium {
	max-width: 40rem;
}

/* Text Flow Instructions: the source PDF as text, styled like the other
 * instructions. --da-tfi-level is list depth (hanging-indent steps);
 * --da-tfi-tabs is a Greek example line's indent in the flow. */
.hda-view .da-tab-strip {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 24px 0;
	background: var(--da-surface);
	border-bottom: 1px solid var(--da-border);
	flex-wrap: wrap;
}

.hda-view .da-tab-strip-tabs {
	display: flex;
	gap: 4px;
}

.hda-view .da-tab-btn {
	padding: 8px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--da-muted);
	border-radius: 6px 6px 0 0;
	border-bottom: 2px solid transparent;
}

.hda-view .da-tab-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 8px;
	flex-wrap: wrap;
}

/* Left-sidebar show/hide button, at the start of the tab row. */
.hda-view .da-sidebar-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 8px;
	margin-right: 8px;
	color: var(--da-muted);
	background: transparent;
	border: none;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
}
.hda-view .da-sidebar-toggle:hover {
	color: var(--da-text);
	background: var(--da-row-bg);
}
.hda-view .da-sidebar-toggle-active {
	color: var(--da-accent);
}

.hda-view .da-sidebar-collapsed {
	display: none !important;
}

.hda-view .da-tab-toolbar-hidden {
	display: none !important;
}

.hda-view .da-tab-btn:hover {
	color: var(--da-text);
	background: var(--da-row-bg);
}

.hda-view .da-tab-btn-active {
	color: var(--da-accent);
	border-bottom-color: var(--da-accent);
}

/* =====================================================================
   Hebrew DA worksheet
   ===================================================================== */

.hda-view {
	/* Speech-depth colors: Hx, Dx, Dx², Dx³ */
	/* Hx: a gray mixed from the text color, so it contrasts in every theme
	   (the secondary/button color is near the background in some). */
	--hda-d0: color-mix(in srgb, var(--da-text) 78%, var(--da-surface));
	--hda-d1: var(--da-accent);
	--hda-d2: var(--da-success);
	--hda-d3: var(--da-main-point);
	--hda-guide: color-mix(in srgb, var(--da-border-strong) 75%, transparent);
	--hda-font-en: "DA Serif", "Gentium Plus", "Gentium Alt", Georgia, "Times New Roman", serif;
	--hda-font-he: "SBL Hebrew", "SBL BibLit", "Ezra SIL", "Times New Roman", serif;
	--hda-he-scale: 1.35;
}

/* Same LTR serif as DA-Tool's canvases (Gentium 7 where installed). */
@font-face { font-family: "DA Serif"; font-weight: normal; font-style: normal; src: local("Gentium-Regular"), local("GentiumAlt"), local("Gentium Alt"); }
@font-face { font-family: "DA Serif"; font-weight: normal; font-style: italic; src: local("Gentium-Italic"), local("GentiumAlt-Italic"), local("GentiumAlt Italic"); }
@font-face { font-family: "DA Serif"; font-weight: bold; font-style: normal; src: local("Gentium-Bold"), local("GentiumPlus-Bold"), local("GentiumBookPlus-Bold"); }

.hda-view .hda-logo {
	font-family: var(--hda-font-he);
	font-size: 24px;
	padding-bottom: 2px;
}

/* ---------- sidebar ---------- */

.hda-view .hda-sidebar {
	width: 290px;
	overflow-y: auto;
}
.hda-view.hda-sidebar-hidden .hda-sidebar {
	display: none;
}
.hda-view.hda-sidebar-hidden .da-sidebar-toggle {
	color: var(--da-muted);
}
.hda-view:not(.hda-sidebar-hidden) .da-sidebar-toggle {
	color: var(--da-accent);
}
.hda-view .hda-section-gap {
	margin-top: 16px;
}
.hda-view .hda-paste-he {
	font-family: var(--hda-font-he);
	font-size: 1.05rem;
}
.hda-view .hda-passage-input {
	width: 100%;
	height: auto;
	border: 1px solid var(--da-border-strong);
	border-radius: 14px;
	padding: 7px 14px;
	font-size: 0.85rem;
	background: var(--da-surface);
	color: var(--da-text);
	box-shadow: none;
}
.hda-view .hda-passage-input:focus {
	border-color: var(--da-accent);
	outline: none;
}
.hda-view .hda-legend {
	padding: 16px 24px 24px;
	font-size: 0.8rem;
	color: var(--da-muted);
}
.hda-view .hda-legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
}
.hda-view .hda-legend-item .hda-level {
	min-width: 3.2em;
	font-size: 0.72rem;
}
.hda-view .hda-legend-lines {
	margin-top: 10px;
	line-height: 1.5;
	color: var(--da-faint);
}

/* ---------- toolbar ---------- */

.hda-view .hda-toggle-btn.hda-toggle-on {
	background: var(--da-accent-soft-bg);
	border-color: var(--da-accent);
	color: var(--da-accent);
}

/* ---------- canvas + grid ---------- */

.hda-view .hda-canvas {
	flex: 1 1 0%;
	min-width: 0;
	overflow: auto;
	padding: 24px;
	background: var(--da-bg);
	outline: none;
}

.hda-view .hda-grid {
	--hda-base: 15px;
	--hda-step: 24px;
	--hda-pad: 7.5px;
	font-size: var(--hda-base);
	/* Fill the canvas, but never squeeze columns below their minimums. */
	min-width: min-content;
	background: var(--da-surface);
	border: 1px solid var(--da-border);
	border-radius: 10px;
	color: var(--da-text);
}

.hda-view .hda-passage-title {
	padding: 0.7em 0.9em 0.6em;
	font-size: 1.15em;
	font-weight: 600;
	letter-spacing: -0.2px;
}
.hda-view .hda-passage-title:empty {
	display: none;
}

.hda-view .hda-row {
	display: grid;
	grid-template-columns: var(--hda-cols);
	border-bottom: 1px solid var(--da-border);
}
.hda-view .hda-row:last-child {
	border-bottom: none;
}

/* The column widths are in em, so the header row keeps the rows' font size
   (its labels are made smaller individually) or its columns would come out
   narrower than the ones below. */
.hda-view .hda-head {
	position: sticky;
	top: -24px;
	z-index: 2;
	background: var(--da-row-bg);
	color: var(--da-muted);
	border-bottom: 1px solid var(--da-border-strong);
}
.hda-view .hda-head > div {
	padding: 0.75em 0.4em;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-self: end;
	min-width: 0;
}
.hda-view .hda-head .hda-head-he {
	text-align: right;
}
.hda-view .hda-head .hda-head-center {
	text-align: center;
}

/* Verses: the clauses of one verse share a band (alternate verses shaded),
   with a rule between verses and none between a verse's own clauses. */
.hda-view .hda-clause {
	border-bottom: none;
}
.hda-view .hda-clause.hda-verse-start {
	border-top: 1px solid var(--da-border-strong);
}
.hda-view .hda-head + .hda-clause.hda-verse-start {
	border-top: none;
}
.hda-view .hda-clause.hda-verse-shaded {
	background: color-mix(in srgb, var(--da-row-bg) 70%, var(--da-surface));
}
.hda-view .hda-clause:hover {
	background: color-mix(in srgb, var(--da-accent) 5%, var(--da-surface));
}
.hda-view .hda-clause.hda-verse-shaded:hover {
	background: color-mix(in srgb, var(--da-accent) 5%, color-mix(in srgb, var(--da-row-bg) 70%, var(--da-surface)));
}
.hda-view .hda-clause.hda-selected,
.hda-view .hda-clause.hda-selected:hover {
	background: var(--da-accent-soft-bg);
}

/* Verse label, with the clause's depth color as a stripe */
.hda-view .hda-ref {
	padding: 0.6em 0.3em 0.6em 0.55em;
	border-left: 3px solid var(--hda-d0);
	color: var(--da-faint);
	font-size: 0.8em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.hda-view .hda-clause.hda-verse-start .hda-ref {
	color: var(--da-text);
	font-weight: 700;
}
.hda-view .hda-ref:hover {
	color: var(--da-accent);
}
.hda-view .hda-clause.hda-selected .hda-ref {
	color: var(--da-accent);
}
.hda-view .hda-clause.hda-d1 .hda-ref { border-left-color: var(--hda-d1); }
.hda-view .hda-clause.hda-d2 .hda-ref { border-left-color: var(--hda-d2); }
.hda-view .hda-clause.hda-d3 .hda-ref { border-left-color: var(--hda-d3); }
.hda-view .hda-verse-input {
	width: 100%;
	height: auto;
	padding: 1px 3px;
	font-size: 1em;
	border: 1px solid var(--da-accent);
	border-radius: 4px;
	background: var(--da-surface);
	color: var(--da-text);
}

/* Editable cells */
.hda-view .hda-cell {
	padding: 0.45em var(--hda-pad);
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	outline: none;
	cursor: text;
	min-width: 0;
}
.hda-view .hda-cell:focus,
.hda-view .hda-input:focus {
	background-color: color-mix(in srgb, var(--da-accent) 6%, var(--da-surface));
	box-shadow: inset 0 0 0 1.5px var(--da-accent);
}
.hda-view .hda-he {
	font-family: var(--hda-font-he);
	font-size: calc(1em * var(--hda-he-scale));
	line-height: 1.55;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	text-align: right;
}
.hda-view .hda-en {
	/* Tight lines and margins so two lines of English fit inside a one-line
	   Hebrew row without making it taller (a third line still grows it).
	   Centered vertically so one line sits level with the Hebrew. */
	align-self: center;
	font-family: var(--hda-font-en);
	font-size: 0.95em;
	line-height: 1.22;
	padding-top: 0.15em;
	padding-bottom: 0.15em;
}
.hda-view .hda-notes {
	/* Tight lines and margins so two lines of notes fit inside a one-line
	   Hebrew row without making it taller (a third line still grows it
	   rather than hide what was written). Centered vertically like the
	   Pattern box. */
	align-self: center;
	font-size: 0.78em;
	line-height: 1.15;
	padding: 0.2em 0.3em;
	color: var(--da-text);
	text-align: center;
	overflow-wrap: break-word;
}
.hda-view .hda-cell.hda-empty::before {
	content: attr(data-placeholder);
	color: var(--da-faint);
	pointer-events: none;
}
.hda-view .hda-en.hda-empty:not(:focus)::before,
.hda-view .hda-notes.hda-empty:not(:focus)::before {
	content: "";
}

/* Indent guides: a faint line at each level the clause is indented past,
   so they mark the indent space without running behind the text. */
.hda-view .hda-show-guides .hda-he,
.hda-view .hda-show-guides .hda-en {
	background-repeat: no-repeat;
}
.hda-view .hda-show-guides .hda-he {
	background-image: repeating-linear-gradient(to left, var(--hda-guide) 0 1px, transparent 1px var(--hda-step));
	background-size: calc(var(--hda-step) * var(--hda-indent, 0)) 100%;
	background-position: right var(--hda-pad) top 0;
}
.hda-view .hda-show-guides .hda-en {
	background-image: repeating-linear-gradient(to right, var(--hda-guide) 0 1px, transparent 1px var(--hda-step-en));
	background-size: calc(var(--hda-step-en) * var(--hda-indent, 0)) 100%;
	background-position: left var(--hda-pad) top 0;
}

/* Level badge: solid for mainline, outlined for offline */
.hda-view .hda-level {
	align-self: center;
	justify-self: center;
	padding: 0.28em 0.55em;
	border-radius: 999px;
	border: 1.5px solid var(--hda-d0);
	background: var(--hda-d0);
	color: var(--da-on-accent);
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	text-align: center;
}
.hda-view .hda-level.hda-d0:not(.hda-level-offline) { color: var(--da-surface); }
.hda-view .hda-level.hda-d1 { background: var(--hda-d1); border-color: var(--hda-d1); }
.hda-view .hda-level.hda-d2 { background: var(--hda-d2); border-color: var(--hda-d2); }
.hda-view .hda-level.hda-d3 { background: var(--hda-d3); border-color: var(--hda-d3); }
.hda-view .hda-level.hda-level-offline {
	background: transparent;
	color: var(--hda-d0);
}
.hda-view .hda-level.hda-level-offline.hda-d1 { color: var(--hda-d1); }
.hda-view .hda-level.hda-level-offline.hda-d2 { color: var(--hda-d2); }
.hda-view .hda-level.hda-level-offline.hda-d3 { color: var(--hda-d3); }
.hda-view button.hda-level:hover {
	filter: brightness(1.1);
	box-shadow: 0 0 0 2px var(--da-accent-soft-bg);
}

/* Conj / Pattern inputs */
.hda-view input.hda-input {
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0.45em 0.45em;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--da-text);
	font-size: 0.85em;
	outline: none;
}
.hda-view textarea.hda-pattern {
	/* Two short lines fit inside a one-line Hebrew row, so wrapping a long
	   pattern never makes the row taller; a third line would be clipped.
	   The box fits its text (one or two lines) so it centers vertically. */
	align-self: center;
	width: 100%;
	field-sizing: content;
	height: auto;
	min-height: calc(1.15em + 0.3em);
	max-height: calc(2 * 1.15em + 0.3em);
	margin: 0;
	padding: 0.15em 0.2em;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	resize: none;
	overflow: hidden;
	color: var(--da-text);
	font-family: inherit;
	font-size: 0.74em;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	outline: none;
}
.hda-view textarea.hda-pattern:focus {
	background-color: color-mix(in srgb, var(--da-accent) 6%, var(--da-surface));
	box-shadow: inset 0 0 0 1.5px var(--da-accent);
}
.hda-view input.hda-conj {
	font-family: var(--hda-font-he);
	font-size: 1.15em;
	padding: 0.45em 0.1em;
	text-align: center;
}
.hda-view input.hda-input::placeholder {
	color: var(--da-border-strong);
}

.hda-view .hda-del {
	align-self: center;
	justify-self: center;
	color: var(--da-faint);
	font-size: 1.05em;
	opacity: 0;
}
.hda-view .hda-clause:hover .hda-del {
	opacity: 1;
}
.hda-view .hda-del:hover {
	color: var(--da-danger);
}

/* PNG export: hide the editing chrome */
.hda-view .hda-exporting .hda-del,
.hda-view .hda-exporting .hda-cell.hda-empty::before {
	visibility: hidden;
}
.hda-view .hda-exporting .hda-he,
.hda-view .hda-exporting .hda-en {
	background-image: none !important;
}
.hda-view .hda-exporting .hda-clause.hda-selected {
	background: transparent;
}
.hda-view .hda-exporting .hda-head {
	position: static;
}

/* ---------- Conj / Pattern suggestions ---------- */

.hda-view .hda-suggest {
	position: absolute;
	z-index: 60;
	max-height: 280px;
	overflow-y: auto;
	padding: 4px;
	background: var(--da-surface);
	border: 1px solid var(--da-border-strong);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	font-size: 0.82rem;
}
.hda-view .hda-suggest-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.hda-view .hda-suggest-item:hover,
.hda-view .hda-suggest-item.is-active {
	background: var(--da-accent-soft-bg);
}
.hda-view .hda-suggest-value {
	font-weight: 600;
	color: var(--da-text);
}
.hda-view .hda-suggest-hint {
	color: var(--da-muted);
	font-size: 0.74rem;
}

/* ---------- reference + instructions modals ---------- */

.hda-view .hda-modal-ref {
	max-width: 76rem;
}
.hda-view .hda-ref-note {
	margin-bottom: 16px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--da-accent-soft-bg);
	font-size: 0.85rem;
}
.hda-view .hda-ref-note-hint {
	color: var(--da-muted);
}
.hda-view .hda-ref-cols {
	display: grid;
	gap: 20px;
}
@media (min-width: 860px) {
	.hda-view .hda-ref-cols { grid-template-columns: 1fr 1fr; }
}
.hda-view .hda-ref-col-title {
	margin: 0 0 10px;
	font-size: 0.95rem;
	font-weight: 700;
}
.hda-view .hda-ref-card {
	margin-bottom: 12px;
	padding: 12px 16px;
	border: 1px solid var(--da-border);
	border-radius: 14px;
	font-size: 0.84rem;
	line-height: 1.45;
}
.hda-view .hda-ref-card.is-target {
	border: 2px solid var(--da-accent);
	background: var(--da-accent-soft-bg);
}
.hda-view .hda-ref-pattern {
	font-weight: 700;
	margin-bottom: 4px;
}
.hda-view .hda-ref-kind {
	margin-top: 6px;
	color: var(--da-muted);
	font-weight: 600;
	font-size: 0.78rem;
}
.hda-view .hda-ref-items {
	margin: 2px 0 0;
	padding-inline-start: 1.4rem;
}
.hda-view .hda-ref-items li.is-clickable {
	cursor: pointer;
	border-radius: 6px;
	padding: 1px 6px;
	margin-inline-start: -6px;
}
.hda-view .hda-ref-items li.is-clickable:hover {
	background: var(--da-accent);
	color: var(--da-on-accent);
}

.hda-view .hda-steps {
	padding-inline-start: 1.3rem;
	margin: 2px 0 6px;
}
.hda-view .hda-steps > li {
	margin: 4px 0;
}
.hda-view .hda-key-table {
	border-collapse: collapse;
	font-size: 0.82rem;
}
.hda-view .hda-key-table td {
	padding: 3px 14px 3px 0;
	border-bottom: 1px solid var(--da-border);
	vertical-align: top;
}
.hda-view .hda-key-term {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- File Explorer icon for .hda files ---------- */

.nav-file-title > .hda-file-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-inline-end: 4px;
	color: var(--icon-color, currentColor);
}
.nav-file-title > .hda-file-icon .svg-icon {
	width: 20px;
	height: 20px;
}
/* Themes that draw their own file icon in the gutter (e.g. AnuPpuccin's
   "file icons"): hide it on .hda rows and put the vav in its place. */
.nav-file-title.hda-file-row::before {
	display: none !important;
}
.anp-file-icons .nav-file-title > .hda-file-icon {
	position: absolute;
	width: 28px;
	/* centered where the theme's 16px icon sat (20px left of the name) */
	margin-inline-start: calc(-1 * var(--size-4-5) - 6px);
	margin-inline-end: 0;
}
.anp-file-icons .nav-file-title > .hda-file-icon .svg-icon {
	width: 28px;
	height: 28px;
}

/* ---------- light/dark switch (header) ---------- */

.hda-view .hda-mode-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
}
.hda-view .hda-mode-icon {
	line-height: 1;
	user-select: none;
}

/* =====================================================================
   Story tab: plot blocks on a canvas, joined by arrows
   ===================================================================== */

/* Only the active tab's toolbar, sidebar and canvas show. */
.hda-view.hda-tab-story .hda-toolbar-prose,
.hda-view.hda-tab-story .hda-side-prose,
.hda-view.hda-tab-story .hda-canvas,
.hda-view:not(.hda-tab-story) .hda-toolbar-story,
.hda-view:not(.hda-tab-story) .hda-side-story,
.hda-view:not(.hda-tab-story) .hds-board {
	display: none !important;
}

.hda-view {
	/* Plot-function colors (Exposition to Interlude). */
	--hds-fn-0: #64748b;
	--hds-fn-1: #d97706;
	--hds-fn-2: #ea580c;
	--hds-fn-3: #dc2626;
	--hds-fn-4: #9333ea;
	--hds-fn-5: #059669;
	--hds-fn-6: #0e7490;
	--hds-fn-7: #a8a29e;
}
.hda-view.hda-dark {
	--hds-fn-0: #94a3b8;
	--hds-fn-1: #f59e0b;
	--hds-fn-2: #fb923c;
	--hds-fn-3: #f87171;
	--hds-fn-4: #c084fc;
	--hds-fn-5: #34d399;
	--hds-fn-6: #22d3ee;
	--hds-fn-7: #a8a29e;
}

.hda-view .hds-swatch {
	width: 1.4em;
	height: 0.9em;
	border-radius: 4px;
	flex-shrink: 0;
}
.hda-view .hds-tips {
	margin: 0;
	padding-left: 1.1em;
	line-height: 1.5;
	color: var(--da-faint);
}
.hda-view .hds-tips li {
	margin: 3px 0;
}

.hda-view .hds-board {
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
	position: relative;
	outline: none;
	background-color: var(--da-bg);
	/* Dot grid (size and position follow the view). */
	background-image: radial-gradient(circle, color-mix(in srgb, var(--da-border-strong) 80%, transparent) 1px, transparent 1.2px);
	background-size: 20px 20px;
	cursor: grab;
}
.hda-view .hds-board.is-panning { cursor: grabbing; }
.hda-view .hds-board.is-connecting,
.hda-view .hds-board.is-connecting * { cursor: crosshair !important; }

.hda-view .hds-plane {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 14px;
	transform-origin: 0 0;
}

.hda-view .hds-empty {
	position: absolute;
	left: 50%;
	top: 120px;
	transform: translateX(-50%);
	padding: 24px;
	font-size: 0.85rem;
	pointer-events: none;
}

.hda-view .hds-links {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}
.hda-view .hds-link {
	fill: none;
	stroke: var(--da-muted);
	stroke-width: 1.6px;
}
.hda-view .hds-link.is-selected,
.hda-view .hds-link-ghost {
	stroke: var(--da-accent);
}
.hda-view .hds-link-ghost {
	stroke-dasharray: 6 4;
}
.hda-view .hds-arrow-head {
	fill: var(--da-muted);
	stroke: none;
}
.hda-view .hds-arrow-head.is-selected {
	fill: var(--da-accent);
}
.hda-view .hds-link-hit {
	fill: none;
	stroke: transparent;
	stroke-width: 12px;
	pointer-events: stroke;
	cursor: pointer;
}

.hda-view .hds-link-labels {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
}
.hda-view .hds-link-label {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--da-surface);
	border: 1px solid var(--da-border-strong);
	color: var(--da-text);
	font-size: 0.8em;
	white-space: nowrap;
	cursor: pointer;
}
.hda-view .hds-link-label.is-selected {
	border-color: var(--da-accent);
	color: var(--da-accent);
}
.hda-view .hds-link-label.is-placeholder {
	color: var(--da-faint);
	font-style: italic;
}
.hda-view .hds-exporting .hds-link-label.is-placeholder { display: none; }
.hda-view .hds-link-input {
	font: inherit;
	width: 9em;
	border: none;
	outline: none;
	background: transparent;
	color: var(--da-text);
	padding: 0;
}

/* ---------- blocks ---------- */

.hda-view .hds-block {
	--hds-fn-color: var(--da-border-strong);
	position: absolute;
	z-index: 2;
	background: var(--da-surface);
	color: var(--da-text);
	border: 1px solid var(--da-border-strong);
	border-top: 0.35em solid var(--hds-fn-color);
	border-radius: 0.7em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	cursor: default;
}
.hda-view .hds-block.is-selected {
	box-shadow: 0 0 0 2px var(--da-accent), 0 4px 14px rgba(0, 0, 0, 0.14);
}
.hda-view .hds-block.is-drop-target {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-accent) 55%, transparent);
}

.hda-view .hds-head {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.5em 0.3em 0.6em;
	background: color-mix(in srgb, var(--hds-fn-color) 12%, var(--da-surface));
	border-bottom: 1px solid var(--da-border);
	cursor: move;
}

.hda-view .hds-edit {
	outline: none;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	cursor: text;
	border-radius: 0.3em;
	min-width: 1.5em;
}
.hda-view .hds-edit:focus {
	background-color: color-mix(in srgb, var(--da-accent) 6%, var(--da-surface));
	box-shadow: 0 0 0 1.5px var(--da-accent);
}
.hda-view .hds-edit.hds-is-empty::before {
	content: attr(data-placeholder);
	color: var(--da-faint);
	pointer-events: none;
}
.hda-view .hds-exporting .hds-edit.hds-is-empty::before { content: ""; }

.hda-view .hds-verses {
	flex-shrink: 0;
	max-width: 45%;
	padding: 0.1em 0.3em;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--da-muted);
	font-variant-numeric: tabular-nums;
}
.hda-view .hds-fn-wrap {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.1em;
}
.hda-view .hds-fn {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hds-fn-color);
	background: color-mix(in srgb, var(--hds-fn-color) 14%, var(--da-surface));
	text-align: center;
}
.hda-view .hds-fn.hds-is-empty {
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.hda-view .hds-fn-menu,
.hda-view .hds-del {
	flex-shrink: 0;
	width: 1.7em;
	height: 1.7em;
	border-radius: 0.3em;
	color: var(--da-faint);
	font-size: 0.85em;
	text-align: center;
}
.hda-view .hds-fn-menu:hover,
.hda-view .hds-del:hover {
	background: var(--da-row-bg);
	color: var(--da-text);
}
.hda-view .hds-del:hover { color: var(--da-danger); }
.hda-view .hds-del { opacity: 0; }
.hda-view .hds-block:hover .hds-del,
.hda-view .hds-block.is-selected .hds-del { opacity: 1; }
.hda-view .hds-exporting .hds-del,
.hda-view .hds-exporting .hds-fn-menu,
.hda-view .hds-exporting .hds-port,
.hda-view .hds-exporting .hds-resize { display: none; }

.hda-view .hds-title {
	margin: 0.45em 0.6em 0.3em;
	padding: 0.05em 0.2em;
	font-family: var(--hda-font-en);
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.25;
}
.hda-view .hds-title + .hds-point {
	margin: 0 0.6em 0.45em;
	padding: 0.25em 0.45em;
	min-height: 2.6em;
	font-family: var(--hda-font-en);
	font-size: 0.95em;
	font-style: italic;
	line-height: 1.35;
	border-left: 3px solid var(--hds-fn-color);
	background: color-mix(in srgb, var(--hds-fn-color) 6%, var(--da-surface));
	border-radius: 0 0.3em 0.3em 0;
}
.hda-view .hds-exporting .hds-point.hds-is-empty { display: none; }

.hda-view .hds-fields {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.6em;
	row-gap: 0.15em;
	padding: 0.2em 0.6em 0.6em;
	font-size: 0.85em;
}
.hda-view .hds-field-row {
	display: contents;
}
.hda-view .hds-field-label {
	padding-top: 0.15em;
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--da-muted);
	line-height: 1.6;
}
.hda-view .hds-field {
	padding: 0.1em 0.25em;
	line-height: 1.4;
}

/* Connection ports: dots on each edge, shown on hover. */
.hda-view .hds-port {
	position: absolute;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: var(--da-surface);
	border: 2px solid var(--da-accent);
	opacity: 0;
	cursor: crosshair;
	z-index: 4;
	transition: opacity 0.12s;
}
.hda-view .hds-block:hover .hds-port,
.hda-view .hds-block.is-selected .hds-port { opacity: 1; }
.hda-view .hds-port:hover { background: var(--da-accent); }
.hda-view .hds-port-right { right: -0.45em; top: 50%; transform: translateY(-50%); }
.hda-view .hds-port-left { left: -0.45em; top: 50%; transform: translateY(-50%); }
.hda-view .hds-port-top { top: -0.6em; left: 50%; transform: translateX(-50%); }
.hda-view .hds-port-bottom { bottom: -0.45em; left: 50%; transform: translateX(-50%); }

.hda-view .hds-resize {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0.9em;
	height: 0.9em;
	cursor: ew-resize;
	border-right: 2px solid var(--da-border-strong);
	border-bottom: 2px solid var(--da-border-strong);
	border-bottom-right-radius: 0.6em;
	opacity: 0;
}
.hda-view .hds-block:hover .hds-resize { opacity: 1; }

/* ---------- New-file / confirm dialogs (Obsidian modals, outside the view) ---------- */
.hda-prompt-label { display: block; font-weight: 600; margin-bottom: 4px; }
.hda-prompt-input { width: 100%; margin-bottom: 16px; }
.hda-prompt-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.hda-prompt-buttons-gap { margin-top: 12px; }

/* Support button (as in DA-Tool and BibleSearch) */
.hda-view .da-btn-support {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--da-success);
	border-color: var(--da-border-strong);
	color: var(--da-on-accent);
	font-weight: 700;
}
.hda-view .da-support-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.hda-view .da-btn-support:hover {
	background: var(--da-success-hover);
	border-color: var(--da-faint);
	color: var(--da-on-accent);
}