From 71b3a8f7b2c9b12bfdc399aa88126652f003c07b Mon Sep 17 00:00:00 2001
From: TheRON <webmaster@kane-il.us>
Date: Sat, 6 Jun 2026 09:19:46 -0400
Subject: [PATCH] Updated

---
 .../view/theme/uscivicinfra/css/style.css     | 730 ++++++++++++++++++
 1 file changed, 730 insertions(+)
 create mode 100644 hubzilla/view/theme/uscivicinfra/css/style.css

diff --git a/hubzilla/view/theme/uscivicinfra/css/style.css b/hubzilla/view/theme/uscivicinfra/css/style.css
new file mode 100644
index 0000000..9f71d45
--- /dev/null
+++ b/hubzilla/view/theme/uscivicinfra/css/style.css
@@ -0,0 +1,730 @@
+/*
+ * USCIVICINFRA theme overrides.
+ *
+ * This theme is intentionally conservative. It extends redbasic without
+ * replacing Hubzilla's interaction model. The first pass establishes a civic,
+ * diagnostic visual frame and reusable class hooks for later addons.
+ */
+
+/* ============================================================
+   DESIGN TOKENS
+   ============================================================ */
+
+:root {
+	--civicinfra-bg:               #faf9f6;
+	--civicinfra-surface:          #f2efe8;
+	--civicinfra-surface-muted:    #e7e1d6;
+	--civicinfra-text:             #24231f;
+	--civicinfra-muted:            #5f655d;
+	--civicinfra-border:           #cfc6b6;
+	--civicinfra-rule:             #b7ad9d;
+	--civicinfra-primary:          #243f3b;
+	--civicinfra-primary-contrast: #f8f6ef;
+	--civicinfra-accent:           #8a673c;
+	--civicinfra-accent-muted:     #d8c4a2;
+	--civicinfra-danger:           #7a342c;
+	--civicinfra-focus:            #5a6f69;
+	--civicinfra-mono-bg:          #ebe6dc;
+
+	/* Bootstrap bridge */
+	--bs-body-bg:           var(--civicinfra-bg);
+	--bs-body-color:        var(--civicinfra-text);
+	--bs-primary:           var(--civicinfra-primary);
+	--bs-primary-rgb:       36, 63, 59;
+	--bs-link-color:        #244f49;
+	--bs-link-hover-color:  #193b36;
+	--bs-border-color:      var(--civicinfra-border);
+
+	/* Typography */
+	--bs-body-font-family:    Georgia, Cambria, "Times New Roman", Times, serif;
+	--bs-font-sans-serif:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	--bs-font-monospace:      "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+
+	/* Type scale */
+	--civicinfra-fs-xs:   0.75rem;
+	--civicinfra-fs-sm:   0.875rem;
+	--civicinfra-fs-base: 1rem;
+	--civicinfra-fs-md:   1.0625rem;
+	--civicinfra-fs-lg:   1.25rem;
+	--civicinfra-fs-xl:   1.5rem;
+	--civicinfra-fs-2xl:  1.875rem;
+
+	/* Spacing */
+	--civicinfra-space-1: 0.25rem;
+	--civicinfra-space-2: 0.5rem;
+	--civicinfra-space-3: 0.75rem;
+	--civicinfra-space-4: 1rem;
+	--civicinfra-space-6: 1.5rem;
+	--civicinfra-space-8: 2rem;
+
+	/* Radius */
+	--civicinfra-radius-sm: 2px;
+	--civicinfra-radius:    3px;
+
+	/* Transition */
+	--civicinfra-transition: 150ms ease;
+}
+
+[data-bs-theme="dark"] {
+	--civicinfra-bg:               #141715;
+	--civicinfra-surface:          #1d211f;
+	--civicinfra-surface-muted:    #272d2a;
+	--civicinfra-text:             #eee9df;
+	--civicinfra-muted:            #b4b9b1;
+	--civicinfra-border:           #465049;
+	--civicinfra-rule:             #667168;
+	--civicinfra-primary:          #8ca79f;
+	--civicinfra-primary-contrast: #111412;
+	--civicinfra-accent:           #c1a06c;
+	--civicinfra-accent-muted:     #5c4b32;
+	--civicinfra-danger:           #d09286;
+	--civicinfra-focus:            #acc8c0;
+	--civicinfra-mono-bg:          #242a27;
+
+	--bs-body-bg:          var(--civicinfra-bg);
+	--bs-body-color:       var(--civicinfra-text);
+	--bs-link-color:       #aecbc3;
+	--bs-link-hover-color: #d3e4df;
+	--bs-border-color:     var(--civicinfra-border);
+}
+
+/* ============================================================
+   BASE
+   ============================================================ */
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: var(--civicinfra-bg);
+	color: var(--civicinfra-text);
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* UI chrome uses sans-serif */
+body,
+button, input, select, textarea,
+.btn, .nav, .navbar, .dropdown-menu,
+.modal, .card, .badge, .alert,
+label, th, td, caption {
+	font-family: var(--bs-font-sans-serif);
+}
+
+/* Content areas use serif */
+main,
+.wall-item-content,
+.generic-content-wrapper,
+.section-content-wrapper,
+#region_2,
+#content,
+.article-content,
+.civicinfra-prose {
+	font-family: var(--bs-body-font-family);
+}
+
+code, pre, kbd, samp,
+.civicinfra-record-id,
+.civicinfra-cid,
+.civicinfra-token {
+	font-family: var(--bs-font-monospace);
+}
+
+/* ============================================================
+   TYPOGRAPHY
+   ============================================================ */
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--bs-font-sans-serif);
+	font-weight: 700;
+	color: var(--civicinfra-text);
+	letter-spacing: -0.01em;
+	line-height: 1.25;
+}
+
+h1 { font-size: var(--civicinfra-fs-2xl); }
+h2 { font-size: var(--civicinfra-fs-xl);  }
+h3 { font-size: var(--civicinfra-fs-lg);  }
+h4 { font-size: var(--civicinfra-fs-md);  }
+h5 { font-size: var(--civicinfra-fs-base); font-weight: 600; }
+h6 { font-size: var(--civicinfra-fs-sm);  font-weight: 600; }
+
+p { line-height: 1.65; }
+
+/* Tabular numerals for data-heavy contexts */
+.civicinfra-data-table,
+.civicinfra-record-id,
+.civicinfra-cid {
+	font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+   LINKS
+   ============================================================ */
+
+a, .nav-link, .dropdown-item {
+	text-decoration-thickness: 0.08em;
+	text-underline-offset: 0.14em;
+	transition: color var(--civicinfra-transition);
+}
+
+a:hover, a:focus {
+	text-decoration: underline;
+}
+
+:focus-visible {
+	outline: 3px solid var(--civicinfra-focus);
+	outline-offset: 2px;
+	border-radius: var(--civicinfra-radius-sm);
+}
+
+/* ============================================================
+   CHROME
+   ============================================================ */
+
+.navbar, #nav-bar,
+.app-menu, aside,
+.generic-content-wrapper,
+.section-content-wrapper,
+.card, .modal-content, .dropdown-menu {
+	border-color: var(--civicinfra-border);
+}
+
+.navbar, #nav-bar {
+	border-bottom: 1px solid var(--civicinfra-rule);
+	box-shadow: none;
+}
+
+.generic-content-wrapper,
+.section-content-wrapper,
+.card, .modal-content, .dropdown-menu {
+	background-color: var(--civicinfra-bg);
+}
+
+.card-header,
+.section-title-wrapper,
+.generic-content-wrapper-styled .section-title-wrapper {
+	background-color: var(--civicinfra-surface);
+	border-color: var(--civicinfra-border);
+	color: var(--civicinfra-text);
+}
+
+hr, .dropdown-divider {
+	border-color: var(--civicinfra-rule);
+	opacity: 1;
+}
+
+/* ============================================================
+   BUTTONS
+   ============================================================ */
+
+.btn {
+	font-family: var(--bs-font-sans-serif);
+	font-weight: 600;
+	border-radius: var(--civicinfra-radius);
+	transition:
+		background-color var(--civicinfra-transition),
+		border-color var(--civicinfra-transition),
+		color var(--civicinfra-transition);
+}
+
+.btn-primary, .btn-success {
+	background-color: var(--civicinfra-primary);
+	border-color: var(--civicinfra-primary);
+	color: var(--civicinfra-primary-contrast);
+}
+
+.btn-primary:hover, .btn-primary:focus,
+.btn-success:hover, .btn-success:focus {
+	background-color: #1b312e;
+	border-color: #1b312e;
+	color: var(--civicinfra-primary-contrast);
+}
+
+.btn-danger {
+	background-color: var(--civicinfra-danger);
+	border-color: var(--civicinfra-danger);
+	color: var(--civicinfra-primary-contrast);
+}
+
+.btn-outline-secondary {
+	border-color: var(--civicinfra-border);
+	color: var(--civicinfra-muted);
+}
+
+.btn-outline-secondary:hover {
+	background-color: var(--civicinfra-surface);
+	border-color: var(--civicinfra-rule);
+	color: var(--civicinfra-text);
+}
+
+[data-bs-theme="dark"] .btn-primary:hover,
+[data-bs-theme="dark"] .btn-primary:focus,
+[data-bs-theme="dark"] .btn-success:hover,
+[data-bs-theme="dark"] .btn-success:focus {
+	background-color: #a8beb7;
+	border-color: #a8beb7;
+	color: var(--civicinfra-primary-contrast);
+}
+
+/* ============================================================
+   FORMS
+   ============================================================ */
+
+.form-control,
+.form-select {
+	background-color: var(--civicinfra-bg);
+	border-color: var(--civicinfra-border);
+	border-radius: var(--civicinfra-radius);
+	color: var(--civicinfra-text);
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-sm);
+	transition:
+		border-color var(--civicinfra-transition),
+		box-shadow var(--civicinfra-transition);
+}
+
+.form-control:focus,
+.form-select:focus {
+	background-color: var(--civicinfra-bg);
+	border-color: var(--civicinfra-focus);
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--civicinfra-focus) 20%, transparent);
+	color: var(--civicinfra-text);
+}
+
+.form-label {
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-sm);
+	font-weight: 600;
+	color: var(--civicinfra-text);
+	margin-bottom: var(--civicinfra-space-1);
+}
+
+.form-check-input:checked {
+	background-color: var(--civicinfra-primary);
+	border-color: var(--civicinfra-primary);
+}
+
+[data-bs-theme="dark"] .form-control,
+[data-bs-theme="dark"] .form-select {
+	background-color: var(--civicinfra-surface);
+	border-color: var(--civicinfra-border);
+	color: var(--civicinfra-text);
+}
+
+[data-bs-theme="dark"] .form-control:focus,
+[data-bs-theme="dark"] .form-select:focus {
+	background-color: var(--civicinfra-surface);
+}
+
+/* ============================================================
+   TABLES
+   ============================================================ */
+
+.table {
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-sm);
+	--bs-table-bg: transparent;
+	--bs-table-border-color: var(--civicinfra-border);
+}
+
+.table th {
+	font-weight: 700;
+	color: var(--civicinfra-muted);
+	font-size: var(--civicinfra-fs-xs);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	border-bottom: 2px solid var(--civicinfra-rule);
+	white-space: nowrap;
+}
+
+.table-hover > tbody > tr:hover > * {
+	background-color: var(--civicinfra-surface);
+}
+
+/* Civic data table — used in manage index */
+.civicinfra-data-table {
+	border: 1px solid var(--civicinfra-border);
+	border-radius: var(--civicinfra-radius);
+	overflow: hidden;
+}
+
+.civicinfra-data-table thead {
+	background-color: var(--civicinfra-surface);
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+.civicinfra-data-table tbody tr {
+	border-bottom: 1px solid var(--civicinfra-surface-muted);
+	transition: background-color var(--civicinfra-transition);
+}
+
+.civicinfra-data-table tbody tr:last-child {
+	border-bottom: none;
+}
+
+.civicinfra-data-table tbody tr:hover {
+	background-color: var(--civicinfra-surface);
+}
+
+/* ============================================================
+   CIVIC DIAGNOSTIC PRIMITIVES
+   ============================================================ */
+
+/* Diagnostic surface — primary record container */
+.civicinfra-diagnostic-surface {
+	background: var(--civicinfra-bg);
+	border: 1px solid var(--civicinfra-border);
+	border-left: 0.35rem solid var(--civicinfra-primary);
+	padding: var(--civicinfra-space-4);
+	border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
+}
+
+/* Record frame — secondary data container */
+.civicinfra-record-frame {
+	background: var(--civicinfra-surface);
+	border: 1px solid var(--civicinfra-border);
+	padding: 0.85rem var(--civicinfra-space-4);
+	border-radius: var(--civicinfra-radius);
+}
+
+/* Section heading within records */
+.civicinfra-record-heading {
+	color: var(--civicinfra-primary);
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-xs);
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	border-bottom: 1px solid var(--civicinfra-surface-muted);
+	padding-bottom: var(--civicinfra-space-2);
+	margin-bottom: var(--civicinfra-space-3);
+}
+
+/* Monospace identifiers */
+.civicinfra-record-id,
+.civicinfra-cid {
+	background: var(--civicinfra-mono-bg);
+	border: 1px solid var(--civicinfra-border);
+	color: var(--civicinfra-text);
+	display: inline-block;
+	font-size: 0.85em;
+	padding: 0.12rem 0.35rem;
+	word-break: break-all;
+	border-radius: var(--civicinfra-radius-sm);
+}
+
+/* Affordance and scope tokens */
+.civicinfra-affordance,
+.civicinfra-scope-token {
+	border: 1px solid var(--civicinfra-border);
+	color: var(--civicinfra-text);
+	display: inline-flex;
+	align-items: center;
+	font-family: var(--bs-font-monospace);
+	font-size: var(--civicinfra-fs-xs);
+	font-weight: 700;
+	letter-spacing: 0.05em;
+	line-height: 1.2;
+	padding: 0.18rem 0.42rem;
+	text-transform: uppercase;
+	border-radius: var(--civicinfra-radius-sm);
+}
+
+.civicinfra-affordance   { background: var(--civicinfra-surface); }
+.civicinfra-scope-token  { background: var(--civicinfra-accent-muted); border-color: var(--civicinfra-accent); }
+
+/* Form section */
+.civicinfra-form-section {
+	background: var(--civicinfra-bg);
+	border: 1px solid var(--civicinfra-border);
+	padding: var(--civicinfra-space-4);
+	border-radius: var(--civicinfra-radius);
+}
+
+.civicinfra-form-section + .civicinfra-form-section {
+	margin-top: var(--civicinfra-space-4);
+}
+
+/* Help and meta text */
+.civicinfra-help-text,
+.civicinfra-field-note,
+.civicinfra-record-meta {
+	color: var(--civicinfra-muted);
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-sm);
+	line-height: 1.5;
+}
+
+/* Notice and warning callouts */
+.civicinfra-notice {
+	background: var(--civicinfra-surface);
+	border: 1px solid var(--civicinfra-border);
+	border-left: 0.35rem solid var(--civicinfra-accent);
+	padding: 0.85rem var(--civicinfra-space-4);
+	border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-sm);
+}
+
+.civicinfra-warning {
+	border-left-color: var(--civicinfra-danger);
+}
+
+/* Diagnostic flags */
+.civicinfra-flag {
+	border-left: 0.25rem solid var(--civicinfra-accent);
+	padding: var(--civicinfra-space-2) var(--civicinfra-space-3);
+	margin-top: var(--civicinfra-space-2);
+	font-size: var(--civicinfra-fs-sm);
+	border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
+}
+
+.civicinfra-flag-standard {
+	background: color-mix(in srgb, var(--civicinfra-accent-muted) 30%, var(--civicinfra-bg));
+	border-left-color: var(--civicinfra-accent);
+}
+
+.civicinfra-flag-high {
+	background: color-mix(in srgb, var(--civicinfra-accent-muted) 50%, var(--civicinfra-bg));
+	border-left-color: var(--civicinfra-accent);
+}
+
+.civicinfra-flag-critical {
+	background: color-mix(in srgb, var(--civicinfra-danger) 10%, var(--civicinfra-bg));
+	border-left-color: var(--civicinfra-danger);
+	color: var(--civicinfra-danger);
+}
+
+/* Channel list */
+.civicinfra-channel-list {
+	border: 1px solid var(--civicinfra-border);
+	border-radius: var(--civicinfra-radius);
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+.civicinfra-channel-list > li {
+	border-bottom: 1px solid var(--civicinfra-border);
+	padding: 0.65rem 0.8rem;
+	transition: background-color var(--civicinfra-transition);
+}
+
+.civicinfra-channel-list > li:last-child { border-bottom: 0; }
+.civicinfra-channel-list > li:hover { background-color: var(--civicinfra-surface); }
+
+.civicinfra-channel-label {
+	color: var(--civicinfra-primary);
+	font-family: var(--bs-font-sans-serif);
+	font-weight: 700;
+}
+
+/* ============================================================
+   MANAGE INTERFACE PRIMITIVES
+   ============================================================ */
+
+.civicinfra-manage-header {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--civicinfra-space-4);
+	flex-wrap: wrap;
+	margin-bottom: var(--civicinfra-space-6);
+	padding-bottom: var(--civicinfra-space-4);
+	border-bottom: 2px solid var(--civicinfra-rule);
+}
+
+.civicinfra-manage-title {
+	font-size: var(--civicinfra-fs-xl);
+	font-weight: 700;
+	color: var(--civicinfra-primary);
+	margin: 0;
+}
+
+.civicinfra-manage-actions {
+	display: flex;
+	gap: var(--civicinfra-space-2);
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.civicinfra-search-bar {
+	display: flex;
+	gap: var(--civicinfra-space-2);
+	flex-wrap: wrap;
+	align-items: flex-end;
+	padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
+	background: var(--civicinfra-surface);
+	border: 1px solid var(--civicinfra-border);
+	border-radius: var(--civicinfra-radius);
+	margin-bottom: var(--civicinfra-space-4);
+}
+
+.civicinfra-pagination {
+	display: flex;
+	gap: var(--civicinfra-space-1);
+	align-items: center;
+	justify-content: space-between;
+	padding-top: var(--civicinfra-space-3);
+	font-size: var(--civicinfra-fs-sm);
+	color: var(--civicinfra-muted);
+	border-top: 1px solid var(--civicinfra-surface-muted);
+}
+
+.civicinfra-diff-block {
+	background: var(--civicinfra-mono-bg);
+	border: 1px solid var(--civicinfra-border);
+	border-radius: var(--civicinfra-radius);
+	padding: var(--civicinfra-space-4);
+	font-family: var(--bs-font-monospace);
+	font-size: var(--civicinfra-fs-xs);
+	line-height: 1.6;
+	overflow-x: auto;
+}
+
+.civicinfra-diff-add    { color: #2d6b32; background: #e8f5e9; display: block; }
+.civicinfra-diff-remove { color: #7a342c; background: #fdecea; display: block; text-decoration: line-through; }
+.civicinfra-diff-same   { color: var(--civicinfra-muted); display: block; }
+
+[data-bs-theme="dark"] .civicinfra-diff-add    { color: #81c784; background: #1b2e1d; }
+[data-bs-theme="dark"] .civicinfra-diff-remove { color: #d09286; background: #2e1b1b; }
+
+/* ============================================================
+   BREADCRUMB
+   ============================================================ */
+
+.breadcrumb {
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-sm);
+	color: var(--civicinfra-muted);
+}
+
+.breadcrumb-item.active { color: var(--civicinfra-muted); }
+
+.breadcrumb-item + .breadcrumb-item::before {
+	color: var(--civicinfra-rule);
+}
+
+/* ============================================================
+   BADGES AND STATUS
+   ============================================================ */
+
+.civicinfra-status {
+	display: inline-flex;
+	align-items: center;
+	font-family: var(--bs-font-sans-serif);
+	font-size: var(--civicinfra-fs-xs);
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	padding: 0.2rem 0.5rem;
+	border-radius: var(--civicinfra-radius-sm);
+	text-transform: uppercase;
+}
+
+.civicinfra-status-active  { background: #d4edda; color: #2d6b32; border: 1px solid #b7dfbc; }
+.civicinfra-status-unknown { background: var(--civicinfra-surface-muted); color: var(--civicinfra-muted); border: 1px solid var(--civicinfra-border); }
+.civicinfra-status-alert   { background: #fdecea; color: var(--civicinfra-danger); border: 1px solid #f5c6c2; }
+
+[data-bs-theme="dark"] .civicinfra-status-active  { background: #1b2e1d; color: #81c784; border-color: #2d4a30; }
+[data-bs-theme="dark"] .civicinfra-status-unknown { background: var(--civicinfra-surface-muted); color: var(--civicinfra-muted); }
+[data-bs-theme="dark"] .civicinfra-status-alert   { background: #2e1b1b; color: var(--civicinfra-danger); border-color: #4a2b28; }
+
+/* ============================================================
+   PRINT — diagnostic record output
+   ============================================================ */
+
+@media print {
+	:root {
+		--civicinfra-bg:      #ffffff;
+		--civicinfra-surface: #f5f5f5;
+		--civicinfra-text:    #000000;
+		--civicinfra-muted:   #444444;
+		--civicinfra-border:  #cccccc;
+		--civicinfra-primary: #000000;
+	}
+
+	.navbar, #nav-bar, #region_1, #region_3,
+	aside, .right-aside, .btn, .civicinfra-manage-actions,
+	.civicinfra-search-bar, .civicinfra-pagination,
+	nav[aria-label="breadcrumb"] {
+		display: none !important;
+	}
+
+	body {
+		font-size: 10pt;
+		font-family: Georgia, "Times New Roman", serif;
+		color: #000;
+		background: #fff;
+	}
+
+	.civicinfra-diagnostic-surface,
+	.civicinfra-record-frame,
+	.civicinfra-form-section {
+		border: 1px solid #ccc;
+		padding: 0.5rem;
+		break-inside: avoid;
+	}
+
+	.civicinfra-record-heading {
+		font-size: 8pt;
+		border-bottom: 1px solid #999;
+	}
+
+	.civicinfra-flag {
+		border: 1px solid #ccc;
+		border-left-width: 3px;
+	}
+
+	a[href]::after {
+		content: " (" attr(href) ")";
+		font-size: 8pt;
+		color: #666;
+	}
+
+	h1, h2, h3 { page-break-after: avoid; }
+	.assoc-profile-group { page-break-inside: avoid; }
+}
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 767.98px) {
+	.civicinfra-diagnostic-surface,
+	.civicinfra-record-frame,
+	.civicinfra-form-section,
+	.civicinfra-notice {
+		padding: 0.8rem;
+	}
+
+	.civicinfra-record-id,
+	.civicinfra-cid {
+		max-width: 100%;
+		word-break: break-all;
+	}
+
+	.civicinfra-manage-header {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.civicinfra-search-bar {
+		flex-direction: column;
+	}
+
+	.civicinfra-data-table {
+		font-size: var(--civicinfra-fs-xs);
+	}
+
+	.civicinfra-diff-block {
+		font-size: 0.65rem;
+	}
+}