@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* TriArch custom theme — phase 1.
   Scope: color scheme + typography + sidebar/buttons only.
   No structural layout overrides. */

:root {
    --triarch-font-display: "Space Grotesk", "Segoe UI", sans-serif;
    --triarch-font-body: "Space Grotesk", "Segoe UI", sans-serif;
    --triarch-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --triarch-primary: #9d4300;
    --triarch-primary-strong: #783200;
    --triarch-accent: #f97316;
    --triarch-accent-hover: #e86b14;
    --triarch-border: #eaeef2;
    --triarch-text: #171c1f;
    --triarch-text-soft: #57657a;
    --triarch-sidebar-bg: #f0f4f8;
    --triarch-sidebar-text: #57657a;
    --triarch-sidebar-icon: #6e7b90;
    --triarch-sidebar-active-text: var(--triarch-primary);
    --triarch-sidebar-active-bg: rgba(255, 255, 255, 0.76);
    --triarch-sidebar-hover-bg: rgba(87, 101, 122, 0.1);

    /* ── Design system scales (additive; opt-in via .t-* / .ta-* classes) ── */

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Spacing (4px grid) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Motion */
    --duration-instant: 80ms;
    --duration-fast: 150ms;
    --duration-base: 220ms;
    --duration-slow: 320ms;
    --duration-slower: 480ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0, 1);
    --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --ease-emphasize: cubic-bezier(0.3, 0, 0, 1);
    --transition-color: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    --transition-shadow: box-shadow var(--duration-fast) var(--ease-standard);

    /* Icon sizes */
    --icon-size-xs: 12px;
    --icon-size-sm: 14px;
    --icon-size-md: 16px;
    --icon-size-lg: 20px;
    --icon-size-xl: 24px;
    --icon-size-2xl: 32px;
    --icon-size-3xl: 48px;
}

.lpx-theme-light,
.lpx-theme-dim {
    /* Industrial Architect - Light. Semi-dark (dim) keeps light CONTENT — only LeptonX's
       sidebar goes dark — so our content tokens must resolve to the light palette here. */
    --triarch-bg: #f6fafe;
    --triarch-surface: #ffffff;
    --triarch-surface-soft: #f0f4f8;
    --triarch-surface-dim: #d6dade;
    --triarch-border: #eaeef2;
    --triarch-outline: #dfe3e7;
    --triarch-outline-warm: #e0c0b1;

    --triarch-primary: #9d4300;
    --triarch-primary-strong: #783200;
    --triarch-primary-tint: #ffdbca;
    --triarch-primary-dim: #ffb690;
    --triarch-accent: #f97316;
    --triarch-accent-hover: #e86b14;
    --triarch-tertiary: #785a00;
    --triarch-inverse-surface: #2c3134;
    --triarch-warning: #f7be1d;

    --triarch-text-muted: #584237;

    /* ── Role-split palette (additive; --triarch-primary stays pinned to brown
       for back-compat — do not route it through --triarch-cta) ─────────── */
    --triarch-brand: #9d4300;          /* logos, marketing surfaces, ISSUED status */
    --triarch-brand-strong: #783200;
    --triarch-brand-tint: #ffdbca;
    --triarch-cta: #b8442a;             /* primary CTA (buttons, links) */
    --triarch-cta-hover: #9a3519;
    --triarch-cta-tint: #fbe4dc;
    --triarch-cta-outline: #f3c7b9;
    --triarch-focus: #475569;           /* a11y focus ring — decoupled from brand */
    --triarch-focus-soft: rgba(71, 85, 105, 0.25);
    --triarch-live: #f97316;            /* "new/live" indicators only */
    --triarch-success: #238b45;
    --triarch-success-bg: #dcf4e4;
    --triarch-success-fg: #16803c;
    --triarch-danger: #ba1a1a;
    --triarch-info: #2d7a7a;
    --triarch-text-issued: #7a3400;
    --triarch-text-on-cta: #ffffff;
    --triarch-text-on-brand: #ffffff;

    /* Permit / workflow status tokens (semantic, not hue-named) */
    --status-submitted: #5b7693;
    --status-in-review: #8a5a00;
    --status-in-review-bg: #fff1d6;
    --status-action-required: #b8442a;
    --status-approved: #238b45;
    --status-paid: #0f766e;
    --status-issued: #9d4300;
    --status-rejected: #ba1a1a;

    /* Elevation — cool-tinted, reserve --shadow-brand/--shadow-cta for CTA hover */
    --shadow-xs: 0 1px 2px rgba(23, 28, 31, 0.06);
    --shadow-sm: 0 2px 4px rgba(23, 28, 31, 0.06), 0 1px 2px rgba(23, 28, 31, 0.04);
    --shadow-md: 0 8px 20px rgba(23, 28, 31, 0.08), 0 2px 6px rgba(23, 28, 31, 0.05);
    --shadow-lg: 0 24px 48px -16px rgba(23, 28, 31, 0.18);
    --shadow-brand: 0 25px 50px -12px rgba(157, 67, 0, 0.18);
    --shadow-cta: 0 25px 50px -12px rgba(184, 68, 42, 0.2);

    /* Focus rings — opaque 2-layer (WCAG 2.2 SC 2.4.11 / 2.4.13) */
    --focus-ring:          0 0 0 2px var(--triarch-bg), 0 0 0 4px var(--triarch-focus);
    --focus-ring-danger:   0 0 0 2px var(--triarch-bg), 0 0 0 4px var(--triarch-danger);
    --focus-ring-on-brand: 0 0 0 2px var(--triarch-brand), 0 0 0 4px #ffffff;
    --focus-ring-on-cta:   0 0 0 2px var(--triarch-cta), 0 0 0 4px #ffffff;

    /* LeptonX token bridge */
    --lpx-primary: var(--triarch-primary);
    --lpx-primary-rgb: 157, 67, 0;
    --lpx-secondary: #515f74;
    --lpx-secondary-rgb: 81, 95, 116;
    --lpx-brand: var(--triarch-accent);
    --lpx-brand-rgb: 249, 115, 22;
    --lpx-brand-text: #ffffff;
    --lpx-success: #238b45;
    --lpx-warning: #b88400;
    --lpx-danger: #ba1a1a;
    --lpx-navbar-color: var(--triarch-surface);
    --lpx-navbar-text-color: var(--triarch-text-soft);
    --lpx-navbar-active-text-color: var(--triarch-primary);
    --lpx-navbar-active-bg-color: #eef3f7;
    --lpx-content-bg: var(--triarch-bg);
    --lpx-content-text: var(--triarch-text);
    --lpx-card-bg: var(--triarch-surface);
    --lpx-card-title-text-color: var(--triarch-text);
    --lpx-border-color: rgba(23, 28, 31, 0.08);
}

/* Semi-dark (dim): content uses the light palette above, but the LEFT menu + RIGHT toolbar
   must stay DARK (LeptonX's native semi-dark). The shared light block forced the navbar
   surface white (`--lpx-navbar-color: var(--triarch-surface)`), which is what painted the
   sidebars light. Restore LeptonX dim's dark navbar surface (#161616) and make our menu
   text/icons readable on it — content tokens (surface/bg/card) are deliberately untouched. */
.lpx-theme-dim {
    --lpx-navbar-color: #161616;
    --lpx-navbar-text-color: #aebbd0;
    --lpx-navbar-active-text-color: var(--triarch-primary);
    --lpx-navbar-active-bg-color: rgba(255, 255, 255, 0.08);
    --triarch-sidebar-text: #aebbd0;
    --triarch-sidebar-icon: #94a3b8;
    --triarch-sidebar-active-text: var(--triarch-primary);
    --triarch-sidebar-active-bg: rgba(255, 255, 255, 0.06);
    --triarch-sidebar-hover-bg: rgba(179, 192, 205, 0.08);
}

.lpx-theme-dark {
    /* Keep LeptonX dark surfaces, but provide safe custom tokens for our rules.
       NOTE: .lpx-theme-dim (semi-dark) is intentionally NOT here — it takes the light
       palette above so semi-dark content matches light theme. */
    --triarch-primary: #f97316;
    --triarch-primary-strong: #ffb690;
    --triarch-primary-tint: rgba(249, 115, 22, 0.15);
    --triarch-primary-dim: #ffb690;
    --triarch-accent: #f97316;
    --triarch-accent-hover: #ff8a42;
    --triarch-tertiary: #e8b84b;
    --triarch-inverse-surface: #dce6ef;
    /* Surface / border tokens for dark mode */
    --triarch-border: rgba(179, 192, 205, 0.18);
    --triarch-outline: rgba(179, 192, 205, 0.3);
    --triarch-outline-warm: rgba(255, 182, 144, 0.25);
    --triarch-surface: #1e2530;
    --triarch-surface-soft: #161d27;
    --triarch-surface-dim: rgba(255, 255, 255, 0.06);
    /* Text */
    --triarch-text: #dce6ef;
    --triarch-text-soft: #aebbd0;
    --triarch-text-muted: rgba(174, 187, 208, 0.7);
    /* Sidebar */
    --triarch-sidebar-bg: #11161c;
    --triarch-sidebar-text: #aebbd0;
    --triarch-sidebar-icon: #94a3b8;
    --triarch-sidebar-active-text: var(--triarch-primary);
    --triarch-sidebar-active-bg: rgba(255, 255, 255, 0.06);
    --triarch-sidebar-hover-bg: rgba(179, 192, 205, 0.08);
    /* Bridge LeptonX native brand tokens so selected/active items stay orange */
    --lpx-primary: var(--triarch-primary);
    --lpx-primary-rgb: 249, 115, 22;
    --lpx-brand: #f97316;
    --lpx-brand-rgb: 249, 115, 22;
    --lpx-navbar-active-text-color: #f97316;

    /* ── Role-split palette — dark rebase (4.5:1 on dark surfaces) ──────── */
    --triarch-brand: #f97316;
    --triarch-brand-strong: #ffb690;
    --triarch-brand-tint: rgba(249, 115, 22, 0.15);
    --triarch-cta: #e8734d;
    --triarch-cta-hover: #ff8a63;
    --triarch-cta-tint: rgba(232, 115, 77, 0.15);
    --triarch-cta-outline: rgba(232, 115, 77, 0.4);
    --triarch-focus: #94a3b8;
    --triarch-focus-soft: rgba(148, 163, 184, 0.3);
    --triarch-live: #f97316;
    --triarch-success: #3dc565;
    --triarch-success-bg: rgba(61, 197, 101, 0.15);
    --triarch-success-fg: #3dc565;
    --triarch-danger: #ff6b6b;
    --triarch-info: #5fbfbf;
    --triarch-text-issued: #ffd9bf;
    --triarch-text-on-cta: #0b1016;
    --triarch-text-on-brand: #0b1016;

    --status-submitted: #94a3b8;
    --status-in-review: #e8b84b;
    --status-in-review-bg: rgba(232, 184, 75, 0.15);
    --status-action-required: #e8734d;
    --status-approved: #3dc565;
    --status-paid: #2dd4bf;
    --status-issued: #ffb690;
    --status-rejected: #ff6b6b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
    --shadow-brand: 0 25px 50px -12px rgba(249, 115, 22, 0.35);
    --shadow-cta: 0 25px 50px -12px rgba(232, 115, 77, 0.35);

    --focus-ring:          0 0 0 2px var(--triarch-bg, #0b1016), 0 0 0 4px var(--triarch-focus);
    --focus-ring-danger:   0 0 0 2px var(--triarch-bg, #0b1016), 0 0 0 4px var(--triarch-danger);
    --focus-ring-on-brand: 0 0 0 2px var(--triarch-brand), 0 0 0 4px #0b1016;
    --focus-ring-on-cta:   0 0 0 2px var(--triarch-cta), 0 0 0 4px #0b1016;
}

/* Typography system */
html,
body,
.lpx-content-container {
    font-family: var(--triarch-font-body);
}

.lpx-main-title,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.card-title,
.modal-title,
.lpx-brand-name,
.lpx-topbar {
    font-family: var(--triarch-font-display);
}

/* Sidebar menu text — override LeptonX hardcoded Inter rule (layout-bundle.css:142) */
.lpx-nav-menu .menu-item .menu-item-text,
.lpx-nav-menu .lpx-menu-item-link .lpx-menu-item-text,
.lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-text {
    font-family: var(--triarch-font-body);
}

.lpx-brand-name {
    color: var(--triarch-text);
    font-weight: 700;
}

.lpx-nav-menu .menu-item > .lpx-menu-item-link,
.lpx-nav-menu .outer-menu-item > .lpx-menu-item-link {
    color: var(--triarch-sidebar-text);
}

.lpx-nav-menu .menu-item > .lpx-menu-item-link .menu-item-icon,
.lpx-nav-menu .outer-menu-item > .lpx-menu-item-link .menu-item-icon,
.lpx-nav-menu .menu-item > .lpx-menu-item-link .lpx-icon,
.lpx-nav-menu .outer-menu-item > .lpx-menu-item-link .lpx-icon {
    color: var(--triarch-sidebar-icon);
}

/* Active/selected link text — LeptonX DOM: .lpx-menu-item-link.selected (class on link itself) */
.lpx-nav-menu .lpx-menu-item-link.selected,
.lpx-nav-menu .lpx-menu-item.selected,
.lpx-nav-menu .menu-item.active > .lpx-menu-item-link,
.lpx-nav-menu .outer-menu-item.active > .lpx-menu-item-link {
    color: var(--triarch-sidebar-active-text) !important;
}

/* Active/selected icon color — target both the span wrapper and the icon directly */
.lpx-nav-menu .lpx-menu-item-link.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item-link.selected .lpx-icon,
.lpx-nav-menu .lpx-menu-item.selected .lpx-menu-item-icon,
.lpx-nav-menu .lpx-menu-item.selected .lpx-icon,
.lpx-nav-menu .menu-item.active > .lpx-menu-item-link .menu-item-icon,
.lpx-nav-menu .outer-menu-item.active > .lpx-menu-item-link .menu-item-icon,
.lpx-nav-menu .menu-item.active > .lpx-menu-item-link .lpx-icon,
.lpx-nav-menu .outer-menu-item.active > .lpx-menu-item-link .lpx-icon {
    color: var(--triarch-sidebar-active-text) !important;
}

/* Pagination color */
.pagination {
    --bs-pagination-active-bg: var(--triarch-primary);
    --bs-pagination-active-border-color: var(--triarch-primary);
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(157, 67, 0, 0.25);
    --bs-pagination-color: var(--triarch-sidebar-text);
    --bs-pagination-hover-color: var(--triarch-primary);
}

/* Override LeptonX bootstrap-dark.css hardcoded pink (!important) on active page */
.pagination .page-item.active .page-link {
    background-color: var(--triarch-primary) !important;
    border-color: var(--triarch-primary) !important;
    color: #ffffff !important;
}

/* Button color system — matches landing page hl-btn-cta-primary pattern:
   base = dark brown (--triarch-primary), hover = orange (--triarch-accent) */
.btn-primary,
.btn-brand {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--triarch-primary);
    --bs-btn-border-color: var(--triarch-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--triarch-primary) 88%, #000000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--triarch-primary) 88%, #000000);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: color-mix(in srgb, var(--triarch-primary) 78%, #000000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--triarch-primary) 78%, #000000);
    --bs-btn-focus-shadow-rgb: var(--lpx-primary-rgb, 157, 67, 0);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--triarch-primary);
    --bs-btn-disabled-border-color: var(--triarch-primary);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
    cursor: pointer;
    box-shadow: 0 25px 50px -12px rgba(var(--lpx-primary-rgb, 157, 67, 0), 0.18);
    transition: background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-instant) var(--ease-standard);
}

.btn-primary:hover,
.btn-brand:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
    box-shadow: 0 14px 28px -14px rgba(var(--lpx-primary-rgb, 157, 67, 0), 0.42);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-brand:active,
.btn-primary.active,
.btn-brand.active,
.btn-primary.show,
.btn-brand.show {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    color: var(--bs-btn-active-color);
    box-shadow: 0 8px 18px -12px rgba(var(--lpx-primary-rgb, 157, 67, 0), 0.5);
    transform: translateY(0);
}

.btn-primary:focus,
.btn-brand:focus,
.btn-primary:focus-visible,
.btn-brand:focus-visible {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
    box-shadow: 0 25px 50px -12px rgba(var(--lpx-primary-rgb, 157, 67, 0), 0.28);
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-brand:disabled,
.btn-brand.disabled {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--triarch-primary);
    border-color: color-mix(in srgb, var(--triarch-primary) 46%, var(--triarch-border));
}

.btn-outline-primary:hover {
    color: var(--triarch-primary-strong);
    background: rgba(157, 67, 0, 0.08);
    border-color: var(--triarch-primary);
}

/* Secondary button — neutral slate, no purple Bootstrap default */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--triarch-text-soft);
    --bs-btn-border-color: var(--triarch-outline, #dfe3e7);
    --bs-btn-hover-color: var(--triarch-text);
    --bs-btn-hover-bg: var(--triarch-border, #eaeef2);
    --bs-btn-hover-border-color: var(--triarch-outline, #dfe3e7);
    --bs-btn-active-color: var(--triarch-text);
    --bs-btn-active-bg: var(--triarch-surface-dim, #d6dade);
    --bs-btn-active-border-color: var(--triarch-outline, #dfe3e7);
    --bs-btn-focus-shadow-rgb: 87, 101, 122;
    --bs-btn-disabled-color: var(--triarch-text-soft);
    --bs-btn-disabled-border-color: var(--triarch-border, #eaeef2);
}

.btn-secondary {
    background: var(--triarch-border, #eaeef2);
    color: var(--triarch-text);
}

/* Form checkboxes and radio buttons */
.form-check-input {
    border: 2px solid color-mix(in srgb, var(--triarch-text, #171c1f) 58%, var(--triarch-surface, #fff));
    background-color: var(--triarch-surface, #fff);
}

.form-check-input:checked {
    background-color: var(--triarch-primary);
    border-color: var(--triarch-primary);
}

.form-check-input:focus {
    border-color: color-mix(in srgb, var(--triarch-primary) 50%, transparent);
    box-shadow: 0 0 0 0.25rem rgba(157, 67, 0, 0.25);
}

.form-check-input:checked:hover {
    background-color: var(--triarch-accent);
    border-color: var(--triarch-accent);
}

.lpx-theme-dark .form-check-input,
[data-bs-theme="dark"] .form-check-input {
    border-color: color-mix(in srgb, var(--triarch-text, #dce6ef) 72%, var(--triarch-surface, #1e2530));
    background-color: color-mix(in srgb, var(--triarch-surface, #1e2530) 88%, #ffffff);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Form switches */
.form-switch .form-check-input:checked {
    background-color: var(--triarch-primary);
    border-color: var(--triarch-primary);
}

/* Select / input focus ring */
.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--triarch-primary) 50%, transparent);
    box-shadow: 0 0 0 0.25rem rgba(157, 67, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════════════════
   Phase A — Design system utility & pattern classes (opt-in).
   Anything below is namespaced .t-* / .ta-* and never applies unless a
   consumer explicitly adopts it. Safe to add without auditing every page.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Typography helpers ─────────────────────────────────────────────── */
.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6,
.t-display, .t-display-lg {
    font-family: var(--triarch-font-display);
    color: var(--triarch-text);
    letter-spacing: -0.01em;
}
.t-h1 { font-size: 40px; line-height: 1.1;  font-weight: 700; letter-spacing: -0.02em; }
.t-h2 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.t-h3 { font-size: 22px; line-height: 1.25; font-weight: 600; }
.t-h4 { font-size: 18px; line-height: 1.3;  font-weight: 600; }
.t-h5 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.t-h6 { font-size: 13px; line-height: 1.4;  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--triarch-text-soft); }
.t-display    { font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }
.t-display-lg { font-size: 64px; line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }

.t-body     { font-size: 15px; line-height: 1.55; font-weight: 400; }
.t-body-sm  { font-size: 13px; line-height: 1.5;  font-weight: 400; color: var(--triarch-text-soft); }
.t-caption  { font-size: 12px; line-height: 1.4;  font-weight: 500; color: var(--triarch-text-soft); }
.t-label    { font-size: 11px; line-height: 1.2;  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--triarch-text-soft); }
.t-mono     { font-family: var(--triarch-font-mono); font-size: 12px; font-weight: 500; color: var(--triarch-text-soft); }

/* Shared clickable-identifier style for list-table cells — SR/SD numbers, project
   number, contact names, request-form titles. Neutral at rest so the table stays
   calm; shifts to the brand colour on hover/focus to signal it's a link (replaces
   the generic Bootstrap blue that bare <a> text was inheriting). No underline, so
   it also works on the multi-line block links (SR/SD) without underlining the sub row. */
.ta-cell-link { color: var(--triarch-text); text-decoration: none; }
.ta-cell-link:hover,
.ta-cell-link:focus-visible { color: var(--triarch-primary); }
.ta-cell-link:hover :where(.t-mono, .ta-tracking-cell__no, .ta-name-cell__title),
.ta-cell-link:focus-visible :where(.t-mono, .ta-tracking-cell__no, .ta-name-cell__title) { color: var(--triarch-primary); }

/* ── ControlRoom · ServiceRequests list — project column + tracking cell ──
   Moved out of an inline <style> in ServiceRequests/Index.cshtml (page/component
   CSS belongs in the theme, not the .cshtml). Project address text frequently
   exceeds sane column widths; the cell is capped and each line truncates with an
   ellipsis, the full text surfaced via the title-attribute tooltip set in index.js. */
.ta-col-project__cell { width: 360px; max-width: 360px; }
.ta-col-project__line {
    display: block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ta-tracking-cell__no {
    font-family: var(--triarch-font-mono);
    font-weight: 600;
    color: var(--triarch-text);
    line-height: 1.25;
}
.ta-tracking-cell__sub {
    font-size: 11px;
    color: var(--triarch-text-soft);
    margin-top: 1px;
}

/* ── Pills (category / generic) ─────────────────────────────────────── */
.ta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: #eef1f5;
    color: #5b7693;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}
.ta-pill--neutral        { background: #eef1f5; color: #5b7693; }
.ta-pill--brand          { background: #f7e4d4; color: #9d4300; }
.ta-pill--cta            { background: var(--triarch-cta-tint); color: var(--triarch-cta-hover); }
.ta-pill--info           { background: #d6efeb; color: #0f766e; }
.ta-pill--success        { background: #d9f2e3; color: #1b6b3f; }
.ta-pill--primary        { background: #dbeafe; color: #1d4ed8; }
.ta-pill--warn           { background: var(--status-in-review-bg); color: var(--status-in-review); }
.ta-pill--danger         { background: #fbe0e0; color: var(--triarch-danger); }

/* Service category tints — reuse on every list/detail that shows category */
.ta-pill--planreview     { background: #f7e4d4; color: #9d4300; }
.ta-pill--inspection     { background: #d6efeb; color: #0f766e; }
.ta-pill--permit         { background: #fbe4dc; color: #9a3519; }
.ta-pill--certification  { background: #fff1d6; color: #8a5a00; }
.ta-pill--licence        { background: #e0e8f4; color: #475569; }
.ta-pill--complaint      { background: #fbe0e0; color: #ba1a1a; }
.ta-pill--recordsrequest { background: #eef1f5; color: #57657a; }
.ta-pill--zoning         { background: #ece4f4; color: #6b3a5e; }
.ta-pill--specialevent   { background: #ffe9d6; color: #b85b1a; }

/* ── Toolbar icon count badges ──────────────────────────────────────────
   These re-apply LeptonX's own native toolbar-count badge, .menu-item-badge.
   LeptonX defines that badge (size 18px, var(--lpx-radius), brand fill,
   position: absolute; top: 0; right: 10px) in the side-menu layout bundle, but
   gates it behind `.lpx-menu-item-link.active-menu-item` — a state only set on
   the selected left-nav item. Our notification bell and chat are custom toolbar
   widgets, not active nav items, so that selector never matches them; we re-use
   the same class + the same LeptonX values here instead of inventing our own.

   Anchored to the position-relative `.menu-item-icon` wrapper and right-aligned
   (no translate) so multi-digit counts like "99+" grow left over the glyph
   rather than spilling past the toolbar's right edge. Colour follows the
   surface: brand orange for chat (LeptonX's default --lpx-brand), danger red
   for the alert bell. */
.lpx-toolbar .menu-item-badge {
    position: absolute;
    top: -0.45rem;
    right: -0.15rem;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--lpx-radius);
    background: var(--lpx-brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lpx-toolbar .menu-item-badge--alert {
    background: var(--triarch-danger);
}

/* ── Runtime-injected toolbar items (ControlRoom page-context icons) ─────
   Injected items always sit at the BOTTOM of the right toolbar, below the
   standing icons (bell, chat, code advisor). Toolbar contributor order is
   not reliable across modules, so placement is enforced visually: the
   toolbar list becomes a flex column and items whose component output
   carries .ta-toolbar-injected get a high flex order. The first injected
   item (DOM order) draws a hairline above itself as the separator; the
   :has() guard means pages where the components render empty show neither
   icons nor a stray divider. */
nav.lpx-toolbar > ul.lpx-nav-menu {
    display: flex;
    flex-direction: column;
}
nav.lpx-toolbar > ul.lpx-nav-menu > li:has(> .ta-toolbar-injected) {
    order: 9;
    border-top: 1px solid var(--triarch-border);
    margin-top: 8px;
    padding-top: 8px;
}
nav.lpx-toolbar > ul.lpx-nav-menu > li:has(> .ta-toolbar-injected) ~ li:has(> .ta-toolbar-injected) {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* Defensive pin for the notification bell badge.
   The bell ships from the InApp notification module's compiled Razor view
   (Pages/Shared/Components/Notification/Default.cshtml), which is baked into the
   module DLL. Incremental host builds frequently fail to re-embed a .cshtml
   *content* change, so the module can serve a stale badge markup that lags the
   source (e.g. the old Bootstrap `badge rounded-pill bg-danger` corner pill).
   To keep the bell matching the chat badge regardless of which compiled markup
   the module serves, pin its appearance here by id — `!important` is required to
   override Bootstrap's `top-0 / start-100 / translate-middle` utility classes,
   which are themselves `!important`. Values mirror .menu-item-badge above. The
   badge already sits inside the position-relative .menu-item-icon wrapper, so
   `right` anchors it to the glyph exactly like the chat badge. */
.lpx-toolbar #notifBadge {
    position: absolute !important;
    top: -0.45rem !important;
    left: auto !important;
    right: -0.15rem !important;
    transform: none !important;
    min-width: 18px;
    width: auto !important;
    height: 18px;
    padding: 0 4px !important;
    border-radius: var(--lpx-radius) !important;
    background: var(--triarch-danger) !important;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Offcanvas panels (chat / code advisor / docs, via offcanvas-manager.js) ──
   The global chat / code-advisor panels run backdrop-less on purpose so the
   user can keep working in the page behind them. Without a backdrop a white
   panel on the light app background nearly vanishes at the seam, so we carry
   the separation entirely in the panel's own edge: a crisp 1px seam line plus a
   deep, soft elevation shadow that makes it read as a surface floating above
   the page. Layered box-shadow — first stop is the hairline seam, second is the
   diffuse lift. Scoped to .ta-offcanvas-panel so LeptonX's own drawers are
   untouched. */
/* Targeted both by the marker class .ta-offcanvas-panel (added by
   offcanvas-manager.js for every AJAX panel) AND by the global panels' stable
   ids — the id selectors mean the treatment lands even if a cached/older
   offcanvas-manager.js hasn't applied the class yet. An id beats LeptonX's
   default `.offcanvas` shadow on specificity, so no !important is needed. */
.ta-offcanvas-panel,
#global-chat-panel.offcanvas,
#code-advisor-panel.offcanvas {
    box-shadow:
        -1px 0 0 0 rgba(23, 28, 31, 0.10),
        -28px 0 60px -18px rgba(23, 28, 31, 0.40);
}

.ta-offcanvas-panel.offcanvas-end,
#global-chat-panel.offcanvas-end,
#code-advisor-panel.offcanvas-end {
    border-left: 1px solid var(--triarch-border, #eaeef2);
}

.ta-offcanvas-panel.offcanvas-start {
    border-right: 1px solid var(--triarch-border, #eaeef2);
    box-shadow:
        1px 0 0 0 rgba(23, 28, 31, 0.10),
        28px 0 60px -18px rgba(23, 28, 31, 0.40);
}

.lpx-theme-dark .ta-offcanvas-panel,
.lpx-theme-dim .ta-offcanvas-panel,
.lpx-theme-dark #global-chat-panel.offcanvas,
.lpx-theme-dim #global-chat-panel.offcanvas,
.lpx-theme-dark #code-advisor-panel.offcanvas,
.lpx-theme-dim #code-advisor-panel.offcanvas {
    box-shadow:
        -1px 0 0 0 rgba(255, 255, 255, 0.08),
        -28px 0 60px -16px rgba(0, 0, 0, 0.60);
    border-color: var(--triarch-border);
}

/* ── Status pill (ACTIVE / INACTIVE, permit-state) ──────────────────── */
.ta-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--radius-pill);
    background: #eef1f5;
    color: #5b7693;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.ta-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.ta-status--active    { background: var(--triarch-success-bg); color: var(--triarch-success-fg); }
.ta-status--inactive  { background: #eef1f5; color: #5b7693; }
.ta-status--submitted { background: rgba(91, 118, 147, 0.15); color: var(--status-submitted); }
.ta-status--review    { background: var(--status-in-review-bg); color: var(--status-in-review); }
.ta-status--action    { background: var(--triarch-cta-tint); color: var(--status-action-required); }
.ta-status--approved  { background: var(--triarch-success-bg); color: var(--status-approved); }
.ta-status--issued    { background: #f7e4d4; color: var(--triarch-text-issued); }
.ta-status--rejected  { background: #fbe0e0; color: var(--status-rejected); }
/* Dark-mode overrides: the hardcoded light backgrounds above become invisible
   against dark surfaces. Replace with low-opacity tints that match the
   existing dark-mode rgba pattern used by the other status variants. */
.lpx-theme-dark .ta-status--issued   { background: rgba(249, 115, 22, 0.15); }
.lpx-theme-dark .ta-status--rejected { background: rgba(255, 107, 107, 0.15); }

/* ── Category icon (rounded square in name cells) ───────────────────── */
.ta-cat-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
    color: var(--triarch-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.ta-cat-icon--planreview     { background: #f7e4d4; color: #9d4300; }
.ta-cat-icon--inspection     { background: #d6efeb; color: #0f766e; }
.ta-cat-icon--permit         { background: #fbe4dc; color: #9a3519; }
.ta-cat-icon--certification  { background: #fff1d6; color: #8a5a00; }
.ta-cat-icon--licence        { background: #e0e8f4; color: #475569; }
.ta-cat-icon--complaint      { background: #fbe0e0; color: #ba1a1a; }
.ta-cat-icon--recordsrequest { background: #eef1f5; color: #57657a; }
.ta-cat-icon--zoning         { background: #ece4f4; color: #6b3a5e; }
.ta-cat-icon--specialevent   { background: #ffe9d6; color: #b85b1a; }

/* ── Toolbar pattern (search + chip filters + filters button) ───────── */
.ta-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.ta-toolbar__spacer { flex: 1 1 auto; }
.ta-toolbar__search {
    position: relative;
    flex: 0 1 340px;
    min-width: 220px;
    margin: 0;
}
.ta-toolbar__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--triarch-text-soft);
    font-size: 13px;
    pointer-events: none;
}
.ta-toolbar__search-input {
    padding-left: 34px;
    padding-right: 28px;
    height: 36px;
}
.ta-toolbar__search-input:focus {
    border-color: var(--triarch-focus);
    box-shadow: 0 0 0 3px var(--triarch-focus-soft);
}
.ta-toolbar__search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 2px;
    line-height: 1;
    color: var(--triarch-text-soft, #6c757d);
    cursor: pointer;
}
.ta-toolbar__search-clear:hover { color: var(--triarch-text, #1f2328); }
.ta-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ── Chip filter (apply to <abp-button class="ta-chip">) ────────────── */
.ta-chip.btn {
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--triarch-text-soft);
    background: transparent;
    border-color: var(--triarch-border);
    transition: var(--transition-color);
    white-space: nowrap;
}
.ta-chip.btn:hover,
.ta-chip.btn:focus {
    background: var(--triarch-surface-soft);
    color: var(--triarch-text);
    border-color: var(--triarch-border);
    box-shadow: none;
}
.ta-chip.btn.is-active,
.ta-chip.btn.is-active:hover,
.ta-chip.btn.is-active:focus {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    border-color: var(--triarch-cta-outline);
}

/* ── Filters button badge ───────────────────────────────────────────── */
.ta-filters-btn.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
}
.ta-filters-badge {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    line-height: 1.4;
}

/* ── Advanced-filter drawer (inside toolbar card) ─────────────────────
   Goal: keep ABP/LeptonX default look-and-feel for labels and inputs,
   but compact the row so plain inputs, abp-select, abp-date-picker and
   select2-enhanced ajax lookups all render at a uniform 34px height.
   Without these rules LeptonX's layout-bundle.css forces select2 to
   42px + 12px padding, breaking alignment with the smaller controls. */
.ta-advanced-filters {
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--triarch-border);
}
.ta-advanced-filters .form-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}
.ta-advanced-filters .mb-3 { margin-bottom: 0.75rem !important; }

.ta-advanced-filters .form-control,
.ta-advanced-filters .form-select,
.ta-advanced-filters .input-group > .form-control {
    padding: 5px 10px;
    font-size: 13px;
    min-height: 34px;
    height: 34px;
}
.ta-advanced-filters .input-group { width: 100%; flex-wrap: nowrap; }
.ta-advanced-filters .input-group-text,
.ta-advanced-filters .input-group .btn {
    padding: 5px 10px;
    height: 34px;
    min-height: 34px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Select2 (single-select). LeptonX's js-bundle.css sets
   `.select2 .select2-selection { height: 46px !important; padding:
   0.675rem 3.75rem !important }` so we have to match both the !important
   *and* go one class deeper to win the cascade. */
.ta-advanced-filters .select2-container { width: 100% !important; }
.ta-advanced-filters .select2 .select2-selection,
.ta-advanced-filters .select2-container--default .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 28px 0 10px !important;
    border-radius: var(--radius-md, 6px) !important;
}
.ta-advanced-filters .select2 .select2-selection .select2-selection__rendered,
.ta-advanced-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    padding-left: 0 !important;
    font-size: 13px !important;
}
.ta-advanced-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

/* ── Bulk-delete banner (appears above table when rows selected) ────── */
.ta-bulk-banner {
    background: var(--triarch-cta-tint);
    border: 1px solid var(--triarch-cta-outline);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: var(--space-3);
}
.ta-bulk-banner hr { display: none; }
.ta-bulk-banner .lead {
    font-size: 13px;
    font-weight: 600;
    color: var(--triarch-cta-hover);
}

/* ── List-table polish (clean head, hover rows, no zebra) ───────────── */
.ta-list-table {
    margin: 0 !important;
    width: 100% !important;
}
/* Header typography intentionally inherits from LeptonX .table defaults
   so .ta-list-table head matches every other table in the app.
   Only the soft tint + clean bottom border are TriArch-specific. */
.ta-list-table > thead > tr > th {
    background: var(--triarch-surface-soft);
    border-top: none;
    border-bottom: 1px solid var(--triarch-border);
    white-space: nowrap;
}
.ta-list-table > tbody > tr > td {
    padding: 13px 14px;
    border-top: none;
    border-bottom: 1px solid var(--triarch-border);
    font-size: 13px;
    vertical-align: middle;
}
.ta-list-table > tbody > tr:last-child > td { border-bottom: none; }
.ta-list-table > tbody > tr:hover > td {
    background: color-mix(in srgb, var(--triarch-surface-soft) 35%, transparent);
}
/* Defeat striped-rows from abp-table for a single-tone surface */
.ta-list-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
}

/* Post-redirect row highlight — applied for ~2.5s by
   triArch.controlRoom.listPage.highlightRowFromUrl() after a create/edit
   save to draw the user's eye to the row they just worked on.

   Uses inset box-shadow rather than background-color because Bootstrap
   tables, LeptonX theme rules, and DataTables striping all set
   background on td / tr at varying specificities — fighting those
   reliably is messy. An inset shadow paints OVER the cell background
   without competing for the same property, so the flash is visible
   regardless of theme. !important is on the animation property (not
   inside the keyframe, which the spec ignores) to defeat any rule that
   tries to set animation: none on tds. */
@keyframes ta-list-row-flash {
    0%, 35%  { box-shadow: inset 0 0 0 9999px var(--triarch-cta-tint, #fff3c4); }
    100%     { box-shadow: inset 0 0 0 9999px transparent; }
}
.ta-list-table > tbody > tr.ta-list-row--flash > td {
    animation: ta-list-row-flash 2.5s ease-out 0s 1 !important;
}

/* Name cell composition (icon + title + subtitle) */
.ta-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.ta-name-cell__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--triarch-text);
    line-height: 1.25;
}
.ta-name-cell__sub {
    font-size: 11px;
    color: var(--triarch-text-soft);
    margin-top: 1px;
}

/* Outcome (icon + label) inline cell */
.ta-cell-outcome {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--triarch-text);
}
.ta-cell-outcome > i {
    color: var(--triarch-text-soft);
    font-size: 12px;
}

/* ── SLA cell (service request expiry / status indicator) ───────────── */
.ta-sla {
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.ta-sla--ok      { color: var(--triarch-text-soft); }
.ta-sla--urgent  { color: var(--status-action-required); }
.ta-sla--overdue { color: var(--status-rejected); font-weight: 700; }
.ta-sla--ready   { color: var(--status-approved); }
.ta-sla--fee     { color: var(--status-action-required); }
.ta-sla--awaiting { color: var(--triarch-text-soft); font-style: italic; }
.ta-sla--paused  { color: var(--triarch-text-soft); }
.ta-sla--closed  { color: var(--triarch-text-soft); }

/* ──────────────────────────────────────────────────────────────────────
   Right-side panel column — reusable hide-on-small utility
   --------------------------------------------------------------------
   Apply .ta-side-panel-col to any column that should render only at
   ≥xl (≥1200px). Below that breakpoint the column is hidden and the
   main content reflows to full width.

   Usage:
       <div class="row g-3">
           <div class="col-12 col-xl-9"> ...main content... </div>
           <div class="col-12 col-xl-3 ta-side-panel-col"> ...panel... </div>
       </div>
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .ta-side-panel-col {
        display: none !important;
    }
}

/* On xl+ the rail pins to the top of the viewport so it stays in view
   while the long form scrolls. Opt-in by adding .ta-side-panel-col--sticky
   alongside .ta-side-panel-col. The 5rem offset clears the LeptonX top bar. */
@media (min-width: 1200px) {
    .ta-side-panel-col.ta-side-panel-col--sticky > * {
        position: sticky;
        top: 5rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

/* ── State machine side panel (vertical workflow filter) ────────────── */
.ta-state-machine__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--triarch-surface-dim);
}
.ta-state-machine__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--status-in-review-bg);
    color: var(--triarch-text-issued, var(--triarch-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.ta-state-machine__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.ta-state-machine__hint {
    font-size: 11.5px;
    color: var(--triarch-text-soft);
    line-height: 1.3;
}
.ta-state-machine__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ta-state-machine__item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, border-color .12s ease;
    border: 1px solid transparent;
}
.ta-state-machine__item:hover {
    background: var(--triarch-surface-soft);
}
.ta-state-machine__item.is-active {
    background: var(--status-in-review-bg);
    border-color: var(--triarch-surface-dim);
}
.ta-state-machine__item:focus-visible {
    outline: 2px solid var(--triarch-accent);
    outline-offset: 1px;
}
.ta-state-machine__num {
    font-family: var(--triarch-font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    color: var(--triarch-text-soft);
    letter-spacing: .03em;
}
.ta-state-machine__item.is-active .ta-state-machine__num {
    color: inherit;
    font-weight: 700;
}
.ta-state-machine__radio {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--triarch-surface-dim);
    background: var(--triarch-surface);
    box-sizing: border-box;
    position: relative;
}
.ta-state-machine__item.is-active .ta-state-machine__radio {
    border-color: var(--triarch-accent);
}
.ta-state-machine__item.is-active .ta-state-machine__radio::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--triarch-accent);
}
.ta-state-machine__label {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ta-state-machine__count {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: var(--triarch-surface-soft);
    color: var(--triarch-text-soft);
    line-height: 1.4;
}
.ta-state-machine__count:empty::before {
    content: "—";
    opacity: .5;
}

/* Horizontal stepper variant — used on entity detail pages where the state
   machine is informational only (no click-to-filter). Items render in a row
   with dot-over-label and a connector line drawn between adjacent dots. */
.ta-state-machine--horizontal {
    background: color-mix(in srgb, var(--triarch-cta-tint) 35%, var(--triarch-surface));
    border-color: var(--triarch-cta-outline);
}
.ta-state-machine--horizontal .ta-state-machine__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
}
.ta-state-machine--horizontal .ta-state-machine__head > div {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ta-state-machine--horizontal .ta-state-machine__title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 700;
    color: var(--triarch-text-soft);
}
.ta-state-machine--horizontal .ta-state-machine__subtitle {
    font-size: 13px;
    color: var(--triarch-text-soft);
}
.ta-state-machine--horizontal .ta-state-machine__subtitle strong {
    color: var(--triarch-text);
    font-weight: 600;
}
.ta-state-machine--horizontal .ta-state-machine__action {
    margin-left: auto;
    font-size: 12px;
    text-decoration: none;
}

/* State machine merged into the detail header card — kept as a tinted footer band (same
   peach as the old standalone card), but full-bleed inside the one card: negative margins
   cancel the card-body padding so the tint reaches the card edges, and the header card's
   overflow:hidden clips it to the rounded corners. Tightened vertical rhythm reclaims the
   space the old card's padding + inter-card gap used to eat. */
.ta-detail-statemachine {
    margin: 14px calc(var(--bs-card-spacer-x, 1rem) * -1) calc(var(--bs-card-spacer-y, 1rem) * -1);
    padding: 12px var(--bs-card-spacer-x, 1rem);
    border-top: 1px solid var(--triarch-border);
    /* Neutral, not tinted — the milestone dots/line carry the colour. Keeps the page calm and
       reserves the warm tint for the one thing that wants attention (the Next Action card). */
    background: var(--triarch-surface);
}
.ta-detail-statemachine .ta-phase-track { margin-top: 6px; }
.ta-detail-statemachine .ta-phase-notes { margin-top: 8px; padding-top: 8px; }

/* Dark theme: drop the peach tint so the band sits flat on the header-card surface (keeps the
   page to two background colours); the milestone dots/line still carry the colour. */
.lpx-theme-dark .ta-detail-statemachine {
    background: transparent;
    border-top-color: var(--triarch-border);
}

/* ── Phase spine ─────────────────────────────────────────────────────
   Replaces the old linear per-status stepper on entity detail pages. Four
   macro-phases (Intake · Review · Decision · Issuance); phase completion is
   driven by the entity's real status history, so a green check means the
   phase was genuinely reached — not merely "earlier in the enum". Loops and
   pauses render as annotation chips below the spine, never as forward steps.
   Markup: <ol class="ta-phase-track"> of <li class="ta-phase">. */
.ta-phase-track {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 14px 2px 2px;
    padding: 0;
}
.ta-phase {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    padding: 0 4px;
    position: relative;
}
/* Connector to the next phase, anchored on the dot's vertical centre. */
.ta-phase::after {
    content: "";
    position: absolute;
    top: 11px; /* dot-height 24px / 2 − border */
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--triarch-surface-dim);
    z-index: 0;
}
.ta-phase:last-child::after { display: none; }
.ta-phase__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--triarch-surface-dim);
    background: var(--triarch-surface);
    color: var(--triarch-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.ta-phase__name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--triarch-text-soft);
}
.ta-phase__meta {
    font-size: 10px;
    font-family: var(--triarch-font-mono, ui-monospace, monospace);
    color: var(--triarch-text-soft);
    opacity: 0.85;
}
/* Active-milestone caption — short "time in current status", amber to tie it to
   the current node. The precise status name is in the card subtitle + chips. */
.ta-phase__now {
    font-size: 10px;
    font-weight: 700;
    color: var(--status-in-review);
    background: var(--status-in-review-bg);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
}
/* Completed — and the green connector that follows it (next phase was reached). */
.ta-phase.is-completed::after { background: var(--triarch-success); }
.ta-phase.is-completed .ta-phase__dot {
    border-color: var(--triarch-success);
    background: var(--triarch-success);
    color: #fff;
}
.ta-phase.is-completed .ta-phase__name { color: var(--triarch-text); }
/* Current — amber (matches the in-review status colour). Deliberately NOT the
   danger red the old stepper used, which collided with the rejected colour. */
.ta-phase.is-current .ta-phase__dot {
    border-color: var(--status-in-review);
    background: var(--status-in-review);
    color: #fff;
    box-shadow: 0 0 0 4px var(--status-in-review-bg);
}
.ta-phase.is-current .ta-phase__name {
    color: var(--triarch-text);
    font-weight: 700;
}
/* Positive terminal — approved / closed. */
.ta-phase.is-positive .ta-phase__dot {
    border-color: var(--triarch-success);
    background: var(--triarch-success);
    color: #fff;
    box-shadow: 0 0 0 4px var(--triarch-success-bg);
}
.ta-phase.is-positive .ta-phase__name {
    color: var(--status-approved);
    font-weight: 700;
}
/* Negative terminal — rejected / withdrawn / cancelled / expired. The connector
   after this node stays neutral: the next phase was never reached. */
.ta-phase.is-negative .ta-phase__dot {
    border-color: var(--triarch-danger);
    background: var(--triarch-danger);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--triarch-danger) 16%, transparent);
}
.ta-phase.is-negative .ta-phase__name {
    color: var(--status-rejected);
    font-weight: 700;
}

/* Annotation row — loop / pause facts and the latest transition summary. */
.ta-phase-notes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--triarch-cta-outline);
}
.ta-phase-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.ta-phase-note--paused {
    background: rgba(91, 118, 147, 0.14);
    color: var(--status-submitted);
    border-color: rgba(91, 118, 147, 0.3);
}
.ta-phase-note--loop {
    background: var(--triarch-cta-tint);
    color: var(--status-action-required);
    border-color: var(--triarch-cta-outline);
}
.ta-phase-note--info {
    background: var(--status-in-review-bg);
    color: var(--status-in-review);
    border-color: color-mix(in srgb, var(--status-in-review) 30%, transparent);
}
.ta-phase-note--overdue {
    background: color-mix(in srgb, var(--triarch-danger) 12%, var(--triarch-surface));
    color: var(--triarch-danger);
    border-color: color-mix(in srgb, var(--triarch-danger) 32%, transparent);
}
/* Plain-language "what this means / what's next" hint — sits between the chips
   and the timestamp. Deliberately words, not a branch. */
.ta-phase-hint {
    font-size: 12px;
    color: var(--triarch-text-soft);
}
.ta-phase-last {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--triarch-text-soft);
    white-space: nowrap;
}
.ta-phase-last b { color: var(--triarch-text); font-weight: 600; }

/* ── Status-history journey timeline (Alt 2 — inside the "View status history"
   offcanvas). Vertical, newest-first; loops show as repeated rows so there's
   nothing to decode. */
.ta-journey { margin: 0; }
.ta-journey__now {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--status-in-review);
    background: var(--status-in-review-bg);
    border-radius: 9px;
    margin-bottom: 6px;
}
.ta-journey__now-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--status-in-review);
    flex-shrink: 0;
}
.ta-journey__now-label { font-size: 13px; font-weight: 700; color: var(--triarch-text); }
.ta-journey__now-since { font-size: 11px; color: var(--triarch-text-soft); margin-left: auto; }
.ta-journey__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 6px;
}
.ta-journey__item {
    position: relative;
    padding: 0 0 14px 22px;
}
.ta-journey__item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--triarch-surface-dim);
    z-index: 1;
}
.ta-journey__item::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--triarch-border);
}
.ta-journey__item:last-child::after { display: none; }
.ta-journey__item--current::before {
    background: var(--status-in-review);
    box-shadow: 0 0 0 3px var(--status-in-review-bg);
}
.ta-journey__item--good::before { background: var(--triarch-success); }
.ta-journey__item--bad::before { background: var(--triarch-danger); }
.ta-journey__item--loop::before { background: var(--status-action-required); }
.ta-journey__status { font-size: 12.5px; font-weight: 600; color: var(--triarch-text); }
.ta-journey__round {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--status-action-required);
    background: var(--triarch-cta-tint);
    border-radius: 4px;
    padding: 0 5px;
    margin-left: 6px;
}
.ta-journey__meta { font-size: 11px; color: var(--triarch-text-soft); margin-top: 1px; }
.ta-journey__next {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px dashed var(--triarch-border);
    font-size: 11.5px;
    color: var(--triarch-text-soft);
}
.ta-journey__next b { color: var(--triarch-text); }

/* ════════════════════════════════════════════════════════════════════
   ControlRoom — Service Request detail page
   Page-specific layout for Pages/ControlRoom/ServiceRequests/Detail/Index.
   Colour tokens come from the variables above so dark mode stays consistent.
   ════════════════════════════════════════════════════════════════════ */

/* Header strip */
.ta-detail-header .ta-detail-id {
    font-family: var(--triarch-mono, ui-monospace, "JetBrains Mono", "Cascadia Code", monospace);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
/* Hero subtitle — the service name (the tracking number is now the H1). */
.ta-detail-header .ta-detail-name {
    font-family: var(--triarch-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--triarch-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
/* Muted empty-field placeholder — replaces bare "—" dashes. */
.ta-empty {
    color: var(--triarch-text-soft, #6b7280);
    font-style: italic;
}
.ta-detail-header .ta-detail-sub {
    font-size: 0.85rem;
    line-height: 1.5;
}
/* Hero header — content-driven flex row: the title/reviewers block grows to fill, the
   metric strip hugs the right and only drops to its own line when the two genuinely can't
   share the row (no fixed column split that wastes the empty left space). */
.ta-detail-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 2rem;
}
.ta-detail-header__main {
    flex: 1 1 260px;
    min-width: 0;
}

/* Content-sized flex cluster (not a shrink-to-fit grid) so cells never collapse below
   their text and overlap — they stay compact, hug the right, and wrap as a unit when
   the container gets narrow. As a row item it keeps its natural width (no shrink) and is
   pushed right by the auto margin; it wraps to its own line only when the row is full. */
.ta-detail-metrics {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.6rem 0;
    text-align: right;
}
.ta-detail-metrics__cell { min-width: 0; }
/* Subtle column separators give the metric strip an engineered rhythm. */
.ta-detail-metrics__cell:not(:first-child) {
    border-left: 1px solid var(--triarch-border);
    padding-left: 1rem;
    margin-left: 1rem;
}
.ta-detail-metrics__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6b7280);
    margin-bottom: 0.15rem;
}
.ta-detail-metrics__value {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}
.ta-detail-metrics__value--alert  { color: var(--triarch-danger, #b42318); }
.ta-detail-metrics__value--danger { color: var(--triarch-danger, #b42318); }
.ta-detail-metrics__value--warn   { color: var(--status-in-review, #b88400); }
.ta-detail-metrics__value--muted  { color: var(--triarch-text-soft, #6b7280); font-weight: 600; }
/* Compact, colour-coded activity counts (zeros hidden). Wraps within its own cell if
   space is tight rather than overflowing into the neighbouring metric. */
.ta-metric-counts { }
.ta-metric-counts__sep { color: var(--triarch-text-muted, #9aa5b1); margin: 0 3px; }
.ta-count { font-weight: 600; }
.ta-count--active  { color: var(--status-in-review, #b88400); }
.ta-count--pending { color: var(--triarch-text-soft, #6b7280); }
.ta-count--done    { color: var(--status-approved, #1D9E75); }
.ta-detail-metrics__sub {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.1rem;
}
@media (max-width: 768px) {
    /* Mobile: left-aligned two-up, full width, no dividers (they read poorly on wrapped rows). */
    .ta-detail-metrics {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
        text-align: left;
        gap: 0.75rem 1.25rem;
    }
    .ta-detail-metrics__cell { flex: 0 0 40%; }
    .ta-detail-metrics__cell:not(:first-child) { border-left: none; padding-left: 0; margin-left: 0; }
}
/* Multi-line read-only field (e.g. Request Scope) — form-control sets a
   single-row fixed height; this override lets the text wrap naturally while
   keeping the surface and border consistent with the form. */
.ta-form-section__readonly-block {
    min-height: 3.5em;
    height: auto;
    white-space: pre-wrap;
    line-height: 1.4;
}
/* Next Action card — right-rail hint pointing the user at the single most-
   important action right now. Background tint matches the SR's "action needed"
   status so it reads as an actionable surface, not chrome. */
.ta-next-action {
    background: color-mix(in srgb, var(--triarch-cta-tint) 50%, var(--triarch-surface));
    border-color: var(--triarch-cta-outline);
}
.ta-next-action__head { margin-bottom: 0; }
.ta-next-action__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 700;
    color: var(--triarch-text-soft);
    margin-bottom: 4px;
}
.ta-next-action__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--triarch-text);
    line-height: 1.3;
}
.ta-next-action__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Per-state tone — lets a coordinator triage the single Next Action card at a glance
   (action = brand, info = in-review blue, muted = passive wait, positive = done/clear,
   danger = blocked or SLA-breached). Modifiers come after the base so they win. */
.ta-next-action--action   { background: color-mix(in srgb, var(--triarch-cta-tint) 50%, var(--triarch-surface)); border-color: var(--triarch-cta-outline); }
.ta-next-action--info     { background: color-mix(in srgb, var(--status-in-review-bg) 60%, var(--triarch-surface)); border-color: color-mix(in srgb, var(--status-in-review) 28%, transparent); }
.ta-next-action--muted    { background: var(--triarch-surface-soft); border-color: var(--triarch-border); }
.ta-next-action--positive { background: color-mix(in srgb, var(--triarch-success-bg) 60%, var(--triarch-surface)); border-color: color-mix(in srgb, var(--triarch-success) 28%, transparent); }
.ta-next-action--danger   { background: color-mix(in srgb, var(--triarch-danger) 10%, var(--triarch-surface)); border-color: color-mix(in srgb, var(--triarch-danger) 32%, transparent); }

/* State icon badge sitting left of the eyebrow/title (reuses the form-section head flex). */
.ta-next-action__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--triarch-surface);
    color: var(--triarch-text-soft);
    border: 1px solid var(--triarch-border);
}
.ta-next-action--action .ta-next-action__icon   { color: var(--status-action-required); border-color: var(--triarch-cta-outline); }
.ta-next-action--info .ta-next-action__icon      { color: var(--status-in-review); }
.ta-next-action--positive .ta-next-action__icon  { color: var(--status-approved); }
.ta-next-action--danger .ta-next-action__icon    { color: var(--triarch-danger); border-color: color-mix(in srgb, var(--triarch-danger) 32%, transparent); }

/* SLA-breach note under the chips. */
.ta-next-action__overdue {
    font-size: 12px;
    font-weight: 600;
    color: var(--triarch-danger);
}

/* Dark theme: the per-state background tints fragment the page into many shades. Flatten the
   card to the standard surface and carry state on a left rail + the (already coloured) icon —
   the same pattern the activity cards use — so dark mode stays at two background colours. */
.lpx-theme-dark .ta-next-action {
    background: var(--triarch-surface);
    border-color: var(--triarch-border);
    border-left-width: 3px;
}
.lpx-theme-dark .ta-next-action--action   { border-left-color: var(--status-action-required); }
.lpx-theme-dark .ta-next-action--info     { border-left-color: var(--status-in-review); }
.lpx-theme-dark .ta-next-action--muted    { border-left-color: var(--triarch-outline); }
.lpx-theme-dark .ta-next-action--positive { border-left-color: var(--status-approved); }
.lpx-theme-dark .ta-next-action--danger   { border-left-color: var(--triarch-danger); }
.ta-side-panel-col > .card { box-shadow: none; }
/* BuildRoom-project field card — file-icon + project label rendered as a tile so
   the cross-system link reads as a tangible artifact, not just an inline pill. */
.ta-buildroom-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: var(--radius-sm, 6px);
    background: var(--triarch-surface, #fff);
    min-width: 0;
    max-width: 100%;
}
.lpx-theme-dark .ta-buildroom-card,
[data-bs-theme="dark"] .ta-buildroom-card {
    /* Same as .ta-contact: flatten the blue slate #1e2530 onto the neutral card
       surface and drop the border so the tile blends into the card. */
    background: var(--lpx-card-bg, #1b1b1b);
    border-color: transparent;
}
.ta-buildroom-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--triarch-cta-tint, #fff3c4) 60%, var(--triarch-surface));
    color: var(--triarch-cta-hover, #a06900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.ta-buildroom-card__label {
    font-weight: 600;
    color: var(--triarch-text, inherit);
    font-family: var(--triarch-font-mono, ui-monospace, monospace);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* B4 — header status accent bar. Thin colour strip toned to the state machine's
   outcome; the textual status now lives only in the track. */
.ta-detail-header {
    position: relative;
    overflow: hidden;
}
.ta-detail-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--status-in-review, #8a5a00);
}
.ta-detail-header--positive::before { background: var(--triarch-success, #238b45); }
.ta-detail-header--negative::before { background: var(--triarch-danger, #ba1a1a); }
/* B5 — reviewer roster chips in the header */
.ta-reviewer-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.ta-reviewer-row__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6b7280);
}
.ta-reviewer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: 999px;
    background: var(--triarch-surface, #fff);
    font-size: 12px;
    max-width: 100%;
}
.ta-reviewer-chip__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--status-in-review-bg, #fff1d6);
    color: var(--status-in-review, #8a5a00);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.ta-reviewer-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--triarch-text, inherit);
}
/* B2 — client contact block in the Applicant & Property card */
.ta-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.ta-contact {
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: var(--radius-sm, 8px);
    background: var(--triarch-surface, #fff);
    padding: 10px 12px;
    min-width: 0;
}
.lpx-theme-dark .ta-contact,
[data-bs-theme="dark"] .ta-contact {
    /* In dark, --triarch-surface is the blue slate #1e2530 — a bluish box inside the
       neutral #1b1b1b card. Flatten it onto the card surface and drop the border so it
       reads as plain content rather than a panel. */
    background: var(--lpx-card-bg, #1b1b1b);
    border-color: transparent;
}
.ta-contact__role {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6b7280);
    margin-bottom: 2px;
}
.ta-contact__primary {
    color: var(--triarch-warning, #f7be1d);
    font-size: 0.7rem;
    margin-left: 3px;
}
.ta-contact__name {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.25;
}
.ta-contact__company {
    font-weight: 400;
    color: var(--triarch-text-soft, #6b7280);
}
.ta-contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 0.8rem;
}
.ta-contact__links a {
    color: var(--triarch-text-soft, #57657a);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ta-contact__links a:hover {
    color: var(--triarch-primary, #9d4300);
    text-decoration: underline;
}

/* ── Read-only fact grid (Applicant + property card and friends) ─────────
   Compact two-column key/value display for captured-at-submit data. Keys
   echo .ta-contact__role's uppercase label treatment so the card reads as
   one system; values are plain text — no ghost form-control boxes. */
.ta-fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.ta-fact--wide {
    grid-column: 1 / -1;
}
.ta-fact__key {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6b7280);
    margin-bottom: 3px;
}
/* Inline action beside a key (e.g. "open in BuildRoom →") — reads as a
   link, not as part of the uppercase label. */
.ta-fact__key .ta-fact__action {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.75rem;
    text-decoration: none;
}
.ta-fact__val {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--triarch-text);
    overflow-wrap: anywhere;
}
.ta-fact__val .ta-empty {
    font-weight: 400;
}

/* Mono utility — code-like values (jurisdiction codes, tracking numbers).
   Referenced by detail pages; previously undefined. */
.ta-mono {
    font-family: var(--triarch-font-mono);
    font-size: 0.85em;
    letter-spacing: 0.02em;
}

/* Terminal card tone — a subtle border shift so the whole card reads the outcome. */
.ta-state-machine--positive { border-color: var(--triarch-success); }
.ta-state-machine--negative { border-color: var(--triarch-danger); }

/* Narrow screens — let phase names wrap and drop the transition line below. */
@media (max-width: 575.98px) {
    .ta-phase__name { font-size: 11.5px; }
    .ta-phase-last { margin-left: 0; flex-basis: 100%; }
}

/* ── List card wrapper: opt-in DataTables pagination polish ─────────── */
/* DataTables Responsive needs the table's parent to have a bounded width
   so it can detect overflow and collapse low-priority columns. In flex /
   grid LeptonX content areas, min-width:0 lets the card shrink instead of
   pushing the page wider; max-width:100% caps it to its column. */
.ta-list-card {
    min-width: 0;
    max-width: 100%;
}
.ta-list-card > .card-body {
    min-width: 0;
}
.ta-list-card .dataTables_wrapper > .row:first-child {
    padding: 10px 14px 4px;
}
.ta-list-card .dataTables_wrapper > .row:last-child {
    padding: 10px 14px;
    border-top: 1px solid var(--triarch-border);
    background: color-mix(in srgb, var(--triarch-surface-soft) 35%, var(--triarch-surface));
}
.ta-list-card .dataTables_info {
    font-size: 12px;
    color: var(--triarch-text-soft);
}
.ta-list-card .dataTables_paginate .paginate_button {
    min-width: 28px;
    height: 28px;
    padding: 0 10px !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--triarch-border) !important;
    background: var(--triarch-surface) !important;
    color: var(--triarch-text-soft) !important;
    font-size: 12px;
    font-weight: 500;
}
.ta-list-card .dataTables_paginate .paginate_button.current,
.ta-list-card .dataTables_paginate .paginate_button.current:hover {
    background: var(--triarch-cta-tint) !important;
    border-color: var(--triarch-cta-outline) !important;
    color: var(--triarch-cta-hover) !important;
    font-weight: 700;
}
.ta-list-card .dataTables_paginate .paginate_button:hover {
    background: var(--triarch-surface-soft) !important;
    color: var(--triarch-text) !important;
}
.ta-list-card .dataTables_paginate .paginate_button.disabled,
.ta-list-card .dataTables_paginate .paginate_button.disabled:hover {
    color: #c5ccd7 !important;
    cursor: not-allowed;
}
/* ── KPI / stat card interior (compose inside <abp-card><abp-card-body>) ── */

/* Apply .ta-stat-card to <abp-card> to enable the decorative bg icon */
.ta-stat-card .card-body {
    position: relative;
    overflow: hidden;
}

.ta-stat__bg-icon {
    position: absolute;
    right: -10px;
    bottom: -18px;
    font-size: 92px;
    color: var(--triarch-text-soft);
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}

.ta-stat__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    position: relative;
}
.ta-stat__icon {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
    color: var(--triarch-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.ta-stat__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--triarch-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}
.ta-stat__value {
    font-family: var(--triarch-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--triarch-text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.ta-stat__sub {
    font-size: 11.5px;
    color: var(--triarch-text-soft);
    margin-top: var(--space-2);
}

/* Compact horizontal variant — opt in by adding .ta-stat-card--compact alongside
   .ta-stat-card. Layout becomes [icon] [label + sub stacked]  [value right-aligned],
   roughly halving the tile height vs. the default stacked layout. Markup adds a
   .ta-stat__meta wrapper around label + sub; the .ta-stat__head is unused here. */
.ta-stat-card--compact .card-body {
    padding: 0.625rem 0.9375rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ta-stat-card--compact .ta-stat__icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
    flex-shrink: 0;
}
.ta-stat-card--compact .ta-stat__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.ta-stat-card--compact .ta-stat__label {
    font-size: 10.5px;
}
.ta-stat-card--compact .ta-stat__sub {
    margin-top: 2px;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ta-stat-card--compact .ta-stat__value {
    font-size: 24px;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
.ta-stat-card--compact .ta-stat__bg-icon {
    font-size: 64px;
    right: -8px;
    bottom: -10px;
}

/* ── Full-page form patterns (Create / Edit pages) ─────────────────── */

/* Section head — lives at the top of <abp-card-body>, not in a separate
   abp-card-header. Overriding .card-header bg fights LeptonX dark/light
   transitions; this composition lets LeptonX own the card surface. */
.ta-form-section__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px dashed var(--triarch-border);
}
.ta-form-section__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
    color: var(--triarch-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.ta-form-section__title {
    font-family: var(--triarch-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--triarch-text);
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0;
}
.ta-form-section__sub {
    font-size: 12.5px;
    color: var(--triarch-text-soft);
    margin-top: 2px;
    line-height: 1.4;
}
.ta-form-section__step {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--triarch-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--triarch-surface-soft);
    flex-shrink: 0;
}
.ta-form-section__step.is-current {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
}

/* Normalize ABP form info-hint spacing — the gap between a control and its
   <small class="form-text"> info text was inconsistent because ASP.NET renders
   a <span class="field-validation-valid"> placeholder between them. Even when
   "empty" the placeholder often has whitespace content, so :empty doesn't
   collapse it; jquery.validate.unobtrusive normally hides it via inline style
   but only after its script runs. Hiding via CSS makes the layout consistent
   regardless of script timing, and only affects the valid (no-error) state —
   when validation fails the class flips to .field-validation-error and shows.

   The !important on margin-top is deliberate: <abp-select info="…"> emits
   <small class="form-text mt-2"> (Bootstrap utility wins on specificity tie
   + source order), while <abp-input info="…"> emits a bare <small class="form-text">.
   Without the override the dropdown hint sits ~8px below the control and the
   text-input hint sits ~4px below, which reads as misaligned across a form
   row of mixed control types. */
.field-validation-valid {
    display: none !important;
}
.form-text {
    display: block;
    margin-top: 4px !important;
    margin-bottom: 0;
    line-height: 1.4;
}
/* Drop the same gap-introducing utility class on the control itself, so a
   <select class="form-select mb-2"> does not stack its own bottom margin onto
   the form-text top margin. Only takes effect inside ta-form-section to avoid
   accidentally tightening unrelated forms.

   .custom-select-wrapper is a LeptonX-injected <div data-lpx-bound="true">
   that wraps every <select>. Its default margin-bottom: 1rem sits BETWEEN the
   wrapped select and the following <small class="form-text">, so dropdown
   hints rendered ~20px below the control while text-input hints rendered ~4px
   below. Zeroing the wrapper margin restores parity. Confirmed via DevTools:
   the rule originates from bootstrap-…ht.css in the LeptonX theme bundle. */
.ta-form-section .form-control,
.ta-form-section .form-select,
.ta-form-section .custom-select-wrapper {
    margin-bottom: 0;
}

/* Unified control family. Text inputs / textareas / native selects were 8px-radius with
   a faint dark border at 44px; the pickers, tag fields and select2 are 48px with
   --radius-sm corners and a --triarch-outline border. Bring the former to that standard
   so every control on the form reads as one consistent set (both themes). */
.ta-form-section input.form-control,
.ta-form-section textarea.form-control,
.ta-form-section .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--triarch-outline);
}
.ta-form-section input.form-control,
.ta-form-section .form-select {
    min-height: 48px;
}

/* Resource picker — dashed-bordered field that opens an offcanvas/modal */
.ta-form-section .form-label:has(+ .ta-picker) {
    display: flex;
    /* Bottom-align so a short label with no inline hint hugs its control instead of
       floating at the top of the reserved 36px (min-height stays for row alignment). */
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 36px;
    margin-bottom: 6px;
    line-height: 1.25;
}
.ta-form-section .form-label:has(+ .ta-picker) small {
    display: inline-block;
    margin-left: 0 !important;
    line-height: 1.25;
}
.ta-form-section .form-label:has(+ .ta-tag-input--inline) {
    display: flex;
    align-items: flex-end;
    min-height: 36px;
    margin-bottom: 6px;
    line-height: 1.25;
}
.ta-form-section .form-label:has(+ select),
.ta-form-section .form-label:has(+ .select2-container) {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 36px;
    margin-bottom: 6px;
    line-height: 1.25;
}
.ta-form-section .form-label:has(+ select) small,
.ta-form-section .form-label:has(+ .select2-container) small {
    display: inline-block;
    margin-left: 0 !important;
    line-height: 1.25;
}
.ta-form-section .select2-container--default .select2-selection--single {
    min-height: 48px;
    height: 48px;
    border-color: var(--triarch-outline);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface);
}
.ta-form-section .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding-left: 12px;
    padding-right: 38px;
    color: var(--triarch-text);
}
.ta-form-section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 8px;
}
.ta-form-section .select2-container--default.select2-container--focus .select2-selection--single,
.ta-form-section .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--triarch-cta-outline);
    box-shadow: none;
}
.ta-form-section .select2-container.is-invalid .select2-selection--single {
    border-color: var(--triarch-danger) !important;
}
.ta-field-validation {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
}
.lpx-theme-dark .ta-form-section .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .ta-form-section .select2-container--default .select2-selection--single {
    /* Match the LeptonX dark input surface (and this widget's own dropdown panel),
       instead of the white-lifted ~#393f49 box that popped above the text inputs. */
    background: var(--lpx-content-bg, #121212);
    border-color: var(--triarch-outline);
}
.lpx-theme-dark .ta-form-section .select2-container--default.select2-container--focus .select2-selection--single,
.lpx-theme-dark .ta-form-section .select2-container--default.select2-container--open .select2-selection--single,
[data-bs-theme="dark"] .ta-form-section .select2-container--default.select2-container--focus .select2-selection--single,
[data-bs-theme="dark"] .ta-form-section .select2-container--default.select2-container--open .select2-selection--single {
    background: var(--lpx-content-bg, #121212);
    border-color: var(--triarch-cta-outline);
}

/* Select2 dropdown results — all themes.
   select2.min.css sets [aria-selected=true] to #ddd (light-theme flash on hover).
   Select2 keeps --highlighted after mouseleave; Lepton paints orange on that
   class — reset non-selected rows when the pointer is not on the row. */
.lpx-theme-light .select2-container--default .select2-results__option[aria-selected=true],
.lpx-theme-dark .select2-container--default .select2-results__option[aria-selected=true],
.lpx-theme-dim .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme="light"] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--triarch-brand-tint);
    color: var(--triarch-primary);
}
.lpx-theme-light .select2-container--default .select2-results__option[aria-selected=false],
.lpx-theme-dark .select2-container--default .select2-results__option[aria-selected=false],
.lpx-theme-dim .select2-container--default .select2-results__option[aria-selected=false],
[data-bs-theme="light"] .select2-container--default .select2-results__option[aria-selected=false],
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=false] {
    color: var(--triarch-text);
}
.lpx-theme-light .select2-container--default .select2-results__option--highlighted[aria-selected=true]:hover,
.lpx-theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected=true]:hover,
.lpx-theme-dim .select2-container--default .select2-results__option--highlighted[aria-selected=true]:hover,
[data-bs-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected=true]:hover,
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected=true]:hover {
    background-color: color-mix(in srgb, var(--triarch-primary) 22%, transparent);
    color: var(--triarch-primary);
}
/* Stuck hover: match normal option text (not text-soft) and clear Lepton tint. */
.lpx-theme-light .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected=false]:not(:hover),
.lpx-theme-dark .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected=false]:not(:hover),
.lpx-theme-dim .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected=false]:not(:hover),
[data-bs-theme="light"] .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected=false]:not(:hover),
[data-bs-theme="dark"] .select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected=false]:not(:hover),
.lpx-theme-light .select2-container--default .select2-results__options:not(:hover) .select2-results__option--highlighted[aria-selected=false],
.lpx-theme-dark .select2-container--default .select2-results__options:not(:hover) .select2-results__option--highlighted[aria-selected=false],
.lpx-theme-dim .select2-container--default .select2-results__options:not(:hover) .select2-results__option--highlighted[aria-selected=false],
[data-bs-theme="light"] .select2-container--default .select2-results__options:not(:hover) .select2-results__option--highlighted[aria-selected=false],
[data-bs-theme="dark"] .select2-container--default .select2-results__options:not(:hover) .select2-results__option--highlighted[aria-selected=false] {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--triarch-text) !important;
}
.lpx-theme-light .select2-container--default .select2-results__option--highlighted[aria-selected=false]:hover,
.lpx-theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected=false]:hover,
.lpx-theme-dim .select2-container--default .select2-results__option--highlighted[aria-selected=false]:hover,
[data-bs-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected=false]:hover,
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected=false]:hover {
    background-color: color-mix(in srgb, var(--triarch-primary) 15%, transparent) !important;
    color: var(--triarch-primary) !important;
}

.ta-picker {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--triarch-outline);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface);
    cursor: pointer;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
    transition: var(--transition-color);
    text-align: left;
}
.ta-picker:hover,
.ta-picker:focus {
    border-color: var(--triarch-cta-outline);
    background: var(--triarch-surface-soft);
    color: var(--triarch-text);
    outline: none;
}
.ta-picker__icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
    color: var(--triarch-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.ta-picker__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}
.ta-picker__placeholder {
    display: block;
    font-size: 13px;
    color: var(--triarch-text-soft);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ta-picker__value {
    font-size: 13px;
    font-weight: 500;
    color: var(--triarch-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ta-picker__sub {
    font-size: 11px;
    color: var(--triarch-text-soft);
    margin-top: 1px;
}
.ta-picker__cta {
    font-size: 11px;
    font-weight: 700;
    color: var(--triarch-cta-hover);
    font-family: var(--triarch-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
    white-space: nowrap;
}

.lpx-theme-dark .ta-picker,
[data-bs-theme="dark"] .ta-picker {
    /* Match the LeptonX dark input surface so the picker reads like the other
       form controls instead of a lifted ~#393f49 box. */
    background: var(--lpx-content-bg, #121212);
    border-color: var(--triarch-outline);
}

.lpx-theme-dark .ta-picker:hover,
.lpx-theme-dark .ta-picker:focus,
[data-bs-theme="dark"] .ta-picker:hover,
[data-bs-theme="dark"] .ta-picker:focus {
    background: var(--lpx-content-bg, #121212);
    border-color: var(--triarch-cta-outline);
}

/* Page action bar (top right above the form, or sticky bottom) */
.ta-page-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Inline tag input (chip row with + button) ─────────────────────── */
.ta-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface);
}
/* Inline variant — sits directly under a label inside a form section,
   no extra container chrome, blends into the form. */
.ta-tag-input--inline {
    border-color: transparent;
    padding: 2px 0;
    background: transparent;
}
.ta-form-section .ta-tag-input--inline {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--triarch-outline);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface);
    gap: var(--space-2);
}
.ta-form-section .ta-tag-input--inline:focus-within {
    border-color: var(--triarch-cta-outline);
    background: var(--triarch-surface-soft);
}
.ta-tag-input__field {
    flex: 1 1 120px;
    min-width: min(100%, 140px);
    color: var(--triarch-text);
}
.ta-form-section .ta-tag-input--inline .ta-tag-input__field {
    min-height: 30px;
    padding: 0 2px;
    font-size: 13px;
    line-height: 30px;
}
.ta-tag-input__field::placeholder {
    color: var(--triarch-text-soft);
}
.ta-tag-input__field:focus {
    outline: none;
    box-shadow: none;
}
.ta-tag-input__empty {
    font-size: 12px;
    color: var(--triarch-text-soft);
    font-style: italic;
}
.ta-tag-input__chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 9px;
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
    color: var(--triarch-text-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid var(--triarch-border);
}
.ta-tag-input__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-xs);
    background: transparent;
    color: currentColor;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    opacity: 0.55;
}
.ta-tag-input__chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
    color: var(--triarch-text);
}
.ta-tag-input__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    background: var(--triarch-surface);
    color: var(--triarch-text-soft);
    border: 1px dashed var(--triarch-outline);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    transition: var(--transition-color);
}
.ta-tag-input__add:hover,
.ta-tag-input__add:focus {
    background: var(--triarch-surface-soft);
    color: var(--triarch-text);
    border-color: var(--triarch-focus);
    border-style: solid;
    outline: none;
}

.ta-form-section .ta-tag-input--inline .ta-tag-input__add {
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-style: solid;
    background: var(--triarch-surface-soft);
}

.lpx-theme-dark .ta-form-section .ta-tag-input--inline,
[data-bs-theme="dark"] .ta-form-section .ta-tag-input--inline {
    /* Match the LeptonX dark input surface like the other form controls,
       not the white-lifted ~#393f49 box. */
    background: var(--lpx-content-bg, #121212);
    border-color: var(--triarch-outline);
}

.lpx-theme-dark .ta-form-section .ta-tag-input--inline:focus-within,
[data-bs-theme="dark"] .ta-form-section .ta-tag-input--inline:focus-within {
    background: var(--lpx-content-bg, #121212);
    border-color: var(--triarch-cta-outline);
}

/* Note: row-action dropdown button intentionally left to ABP/LeptonX defaults. */

/* ── Form section head: right-aligned action cluster (meta + CTA) ─────
   Used by the Service Steps section in ServiceDefinitions/Create. */
.ta-form-section__head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.ta-form-section__meta {
    font-size: 11.5px;
    color: var(--triarch-text-soft);
    line-height: 1.3;
}
.ta-form-section__meta-strong {
    color: var(--triarch-text);
    font-weight: 600;
}
.ta-form-section__meta-dot {
    margin: 0 4px;
    opacity: 0.6;
}

/* ── Activity (service-step) list ─────────────────────────────────────
   Vertical stack of step cards + an inline "add" dropzone. The container
   has no chrome of its own; cards carry the surface. */
.ta-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Step card */
.ta-activity-step {
    position: relative;
    display: flex;
    grid-template-columns: 18px 28px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 12px 12px 8px;
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface);
    transition: var(--transition-color), var(--transition-shadow);
}
.ta-activity-step:hover {
    border-color: var(--triarch-outline);
    box-shadow: 0 1px 0 var(--triarch-border);
}

.ta-activity-step__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--triarch-text-soft);
    opacity: 0.45;
    cursor: grab;
    padding: 0;
    font-size: 12px;
}
.ta-activity-step__handle:hover { opacity: 0.9; }
.ta-activity-step__handle:active { cursor: grabbing; }

.ta-activity-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    font-family: var(--triarch-font-display);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.ta-activity-step__body {
    min-width: 0;
}
.ta-activity-step__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.ta-activity-step__title {
    font-family: var(--triarch-font-display);
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    color: var(--triarch-text);
    letter-spacing: -0.005em;
    line-height: 1.25;
    min-width: 0;
    /* Unbroken tokens (file names, codes) wrap instead of forcing the
       offcanvas into horizontal scroll. */
    overflow-wrap: anywhere;
}
.ta-activity-step__code {
    font-family: var(--triarch-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--triarch-text-soft);
    background: var(--triarch-surface-soft);
    border: 1px solid var(--triarch-border);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    letter-spacing: 0.02em;
}
.ta-activity-step__badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    line-height: 1.3;
}
.ta-activity-step__badge--fee {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    border: 1px solid var(--triarch-cta-outline);
}

.ta-activity-step__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 11.5px;
    color: var(--triarch-text-soft);
    line-height: 1.4;
}
.ta-activity-step__meta-key {
    font-weight: 600;
    color: var(--triarch-text);
}
.ta-activity-step__meta-val {
    color: var(--triarch-text-soft);
}
.ta-activity-step__meta-sep {
    opacity: 0.5;
    margin: 0 2px;
}

.ta-activity-step__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ta-activity-step__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--triarch-text-soft);
    border: 1px solid var(--triarch-border);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    transition: var(--transition-color);
}
.ta-activity-step__action:hover,
.ta-activity-step__action:focus {
    background: var(--triarch-surface-soft);
    color: var(--triarch-text);
    border-color: var(--triarch-outline);
    outline: none;
}
.ta-activity-step__action--danger:hover,
.ta-activity-step__action--danger:focus {
    color: var(--triarch-danger);
    border-color: var(--triarch-danger);
    background: transparent;
}
/* Persistent active state — e.g. the document currently open in review */
.ta-activity-step__action.is-active {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    border-color: var(--triarch-cta-outline);
}

/* Document variant — file rows in the submittal-documents offcanvas
   (DocumentsPanel.cshtml). Same card anatomy as an activity step, but the
   leading icon is a static glyph (nothing to drag) and the title is an
   upright file name rather than an italic step name. */
.ta-activity-step--document .ta-activity-step__handle {
    cursor: default;
    opacity: 0.6;
}
/* Single-line file name with ellipsis (full name in the title attribute);
   the extension chip keeps its width and the name truncates beside it. */
.ta-activity-step--document .ta-activity-step__title-row {
    flex-wrap: nowrap;
}
.ta-activity-step--document .ta-activity-step__title {
    font-style: normal;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ta-activity-step--document .ta-activity-step__code {
    flex-shrink: 0;
}
.ta-activity-step--document .ta-activity-step__code:empty {
    display: none;
}

/* Drag-and-drop reorder states */
.ta-activity-step--dragging {
    opacity: 0.4;
}
.ta-activity-step--drop-before {
    box-shadow: inset 0 2px 0 var(--triarch-cta-hover);
}
.ta-activity-step--drop-after {
    box-shadow: inset 0 -2px 0 var(--triarch-cta-hover);
}

/* ─────────────────────────────────────────────────────────────────────
   Step-group wrapper — one per StepOrder, holds 1..N stacked lane cards.

   For sequential (single-lane) steps the wrapper is intentionally
   invisible — the lane card looks like a standalone step matching the
   classic UI. For parallel groups (2+ lanes) the wrapper picks up a
   subtle dashed left border and a small "Parallel" hint chip above the
   cards so the grouping is unmistakable.

   Drag-and-drop attaches at this level: any lane drag-handle inside the
   wrapper moves the whole group as a unit (JS in
   serviceDefinitionWizard.js walks up to find this container).
   ───────────────────────────────────────────────────────────────────── */
.ta-activity-step-group {
    position: relative;
}
.ta-activity-step-group + .ta-activity-step-group {
    margin-top: var(--space-2);
}
.ta-activity-step-group--parallel {
    padding: 6px 0 6px 10px;
    border-left: 2px dashed var(--triarch-cta-outline);
    background: linear-gradient(to right, var(--triarch-cta-tint) 0%, transparent 24px);
    border-radius: var(--radius-sm);
}
.ta-activity-step-group--parallel .ta-activity-lane + .ta-activity-lane {
    margin-top: 6px;
}

/* "X lanes run together" hint chip above a parallel group */
.ta-activity-step-group__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px 0;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--triarch-cta-hover);
    background: var(--triarch-surface);
    border: 1px solid var(--triarch-cta-outline);
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}

/* Drag states on the group container */
.ta-activity-step-group--dragging {
    opacity: 0.4;
}
.ta-activity-step-group--drop-before {
    box-shadow: inset 0 2px 0 var(--triarch-cta-hover);
}
.ta-activity-step-group--drop-after {
    box-shadow: inset 0 -2px 0 var(--triarch-cta-hover);
}

/* ─────────────────────────────────────────────────────────────────────
   Lane card — visually identical to the classic step card. Used for
   sequential steps (one card per step) and for each row of a parallel
   group. The repeated step-number circle inside a parallel group is the
   primary visual cue that the rows share an order.
   ───────────────────────────────────────────────────────────────────── */
.ta-activity-lane {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 12px 12px 8px;
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface);
    transition: var(--transition-color), var(--transition-shadow);
}
.ta-activity-lane:hover {
    border-color: var(--triarch-outline);
    box-shadow: 0 1px 0 var(--triarch-border);
}

/* Pending lane — previews the auto-scaffolded Certificate Issuance step on the
   ServiceDefinition Create/Edit pages before it is persisted ("added when you
   save"). Dashed + muted so it cannot be mistaken for a saved step. */
.ta-activity-lane--pending {
    border-style: dashed;
    background: transparent;
}
.ta-activity-lane--pending:hover {
    border-color: var(--triarch-border);
    box-shadow: none;
}
.ta-activity-lane--pending .ta-activity-lane__num,
.ta-activity-lane--pending .ta-activity-lane__title {
    color: var(--triarch-text-muted);
}

.ta-activity-lane__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--triarch-text-soft);
    opacity: 0.45;
    cursor: grab;
    padding: 0;
    font-size: 12px;
    flex-shrink: 0;
}
.ta-activity-lane__handle:hover { opacity: 0.9; }
.ta-activity-lane__handle:active { cursor: grabbing; }

.ta-activity-lane__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    font-family: var(--triarch-font-display);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.ta-activity-lane__body {
    min-width: 0;
    flex: 1 1 auto;
}
.ta-activity-lane__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.ta-activity-lane__title {
    font-family: var(--triarch-font-display);
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color: var(--triarch-text);
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.ta-activity-lane__code {
    font-family: var(--triarch-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--triarch-text-soft);
    background: var(--triarch-surface-soft);
    border: 1px solid var(--triarch-border);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    letter-spacing: 0.02em;
}
.ta-activity-lane__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    line-height: 1.3;
}
.ta-activity-lane__badge--fee {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    border: 1px solid var(--triarch-cta-outline);
}
.ta-activity-lane__badge--final {
    background: var(--triarch-cta-hover);
    color: #fff;
    border: 1px solid var(--triarch-cta-hover);
}

.ta-activity-lane__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 11.5px;
    color: var(--triarch-text-soft);
    line-height: 1.4;
}
.ta-activity-lane__meta-key {
    font-weight: 600;
    color: var(--triarch-text);
}
.ta-activity-lane__meta-val {
    color: var(--triarch-text-soft);
}
.ta-activity-lane__meta-sep {
    opacity: 0.5;
    margin: 0 2px;
}

.ta-activity-lane__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ta-activity-lane__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--triarch-text-soft);
    border: 1px solid var(--triarch-border);
    cursor: pointer;
    font-size: 11px;
    transition: var(--transition-color);
    gap: 4px;
}
.ta-activity-lane__action:hover,
.ta-activity-lane__action:focus {
    background: var(--triarch-surface-soft);
    color: var(--triarch-text);
    border-color: var(--triarch-outline);
    outline: none;
}
.ta-activity-lane__action--danger:hover,
.ta-activity-lane__action--danger:focus {
    color: var(--triarch-danger);
    border-color: var(--triarch-danger);
    background: transparent;
}
.ta-activity-lane__action--add-lane {
    color: var(--triarch-cta-hover);
    border-color: var(--triarch-cta-outline);
    border-style: dashed;
    background: var(--triarch-cta-tint);
    /* Icon-only — title tooltip carries the meaning. Same square footprint as the other lane actions. */
    width: 28px;
    padding: 0;
}
.ta-activity-lane__action--add-lane:hover,
.ta-activity-lane__action--add-lane:focus {
    background: var(--triarch-cta-hover);
    color: #fff;
    border-color: var(--triarch-cta-hover);
}

/* ─────────────────────────────────────────────────────────────────────
   Runtime activity card — redesigned three-zone layout (header · signal
   row · meta line · action line) on the Service Request detail workflow
   list. Shares the .ta-activity-lane root (drag/scroll JS + parallel
   grouping) but --runtime flips it to a vertical card with a state rail.
   Colours: triarch token first, reference hex fallback.
   ───────────────────────────────────────────────────────────────────── */
.ta-activity-lane--runtime {
    --ta-actrow-indent: 35px;
    display: block;
    align-items: stretch;
    gap: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--triarch-border);
}
.ta-activity-lane--st-pending  { border-left-color: var(--triarch-outline, #B4B2A9); }
.ta-activity-lane--st-active   { border-left-color: var(--status-in-review, #BA7517); }
.ta-activity-lane--st-hold     { border-left-color: var(--triarch-outline, #B4B2A9); }
.ta-activity-lane--st-approved { border-left-color: var(--status-approved, #1D9E75); }
.ta-activity-lane--st-rejected { border-left-color: var(--status-rejected, #E24B4A); }

.ta-actrow__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.ta-actrow__type {
    font-size: 11px;
    color: var(--triarch-text-soft);
    border: 1px solid var(--triarch-border);
    padding: 1px 7px;
    border-radius: var(--radius-xs);
    line-height: 1.5;
}
.ta-actrow__actions,
.ta-actrow__header-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ta-actrow__reviewer-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--triarch-text-soft);
}

/* Sub-zones align under the activity name, not the step badge. */
.ta-actrow__signals,
.ta-actrow__meta,
.ta-actrow__action {
    padding-left: var(--ta-actrow-indent);
}

.ta-actrow__signals {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}
.ta-actrow__sig {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.ta-actrow__sig--cycle      { color: var(--status-rejected, #993C1D); background: var(--triarch-cta-tint, #FAECE7); }
.ta-actrow__sig--docs       { color: #185FA5; background: #E6F1FB; }
.ta-actrow__sig--conditions { color: var(--status-in-review, #854F0B); background: var(--triarch-success-bg, #FAEEDA); }

.ta-actrow__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 12.5px;
}
.ta-actrow__sla {
    display: inline-flex;
    align-items: center;
    color: var(--triarch-text-soft);
    font-weight: 500;
}
.ta-actrow__sla--ok     { color: var(--triarch-success-fg, #0F6E56); }
.ta-actrow__sla--warn   { color: var(--status-in-review, #854F0B); }
.ta-actrow__sla--danger { color: var(--triarch-danger, #A32D2D); font-weight: 600; }
.ta-actrow__sla--muted  { color: var(--triarch-text-soft); }

.ta-actrow__reviewer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ta-actrow__avatar {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E6F1FB;
    color: #185FA5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}
.ta-actrow__avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--triarch-surface, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    color: #fff;
}
.ta-actrow__avatar-badge--ok { background: var(--status-approved, #1D9E75); }
.ta-actrow__avatar-badge--no { background: var(--status-rejected, #E24B4A); }
.ta-actrow__avatar-badge--edit { background: var(--triarch-primary, #185FA5); }

/* Editable reviewer avatar — the avatar itself is the "change reviewer" control
   (pending / pre-launch). Button reset over the avatar styling, plus an always-on
   pencil corner and a focus/hover ring so it reads as actionable. */
.ta-actrow__avatar--editable {
    appearance: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit; /* keep .ta-actrow__avatar's own font-size/weight; just drop the UA button family */
    transition: box-shadow .15s ease;
}
.ta-actrow__avatar--editable:hover,
.ta-actrow__avatar--editable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--triarch-surface, #fff),
                0 0 0 4px var(--triarch-primary, #185FA5);
}

.ta-actrow__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}
.ta-actrow__bar {
    flex: 1 1 auto;
    height: 5px;
    border-radius: 3px;
    background: var(--triarch-surface-soft, #F1EFE8);
    overflow: hidden;
}
.ta-actrow__bar--paused { opacity: 0.55; }
.ta-actrow__bar-fill { height: 100%; border-radius: 3px; }
.ta-actrow__bar-fill--ok      { background: var(--status-approved, #1D9E75); }
.ta-actrow__bar-fill--warn    { background: var(--status-in-review, #BA7517); }
.ta-actrow__bar-fill--danger  { background: var(--status-rejected, #E24B4A); }
.ta-actrow__bar-fill--neutral { background: transparent; }
.ta-actrow__bar-spacer { flex: 1 1 auto; }

.ta-actrow__open {
    color: var(--triarch-primary);
    border: 1px solid var(--triarch-outline-warm, var(--triarch-border));
    background: var(--triarch-surface);
    font-weight: 500;
}
.ta-actrow__open:hover {
    border-color: var(--triarch-primary);
    background: var(--triarch-primary-tint, var(--triarch-surface-soft));
    color: var(--triarch-primary-strong, var(--triarch-primary));
}
.ta-actrow__cta {
    color: var(--status-rejected, #993C1D);
    background: var(--triarch-cta-tint, #FAECE7);
    border: 1px solid var(--triarch-cta-outline, #F0997B);
    font-weight: 500;
}
.ta-actrow__cta:hover { background: var(--triarch-cta-hover); color: #fff; }

/* ── Runtime step-card tidy-up ────────────────────────────────────────────
   Replaces the dominating full-width SLA bar with a thin strip on the card's
   bottom edge, adds depth (shadow), a state-coloured step number, a thicker
   state rail, more breathing room between steps, and a connector line so the
   steps read as a sequence rather than a flat stack. ── */
.ta-actrow__edgebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--triarch-surface-soft, #f0f4f8);
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    overflow: hidden;
}
.ta-actrow__edgebar--paused { opacity: 0.55; }
.ta-actrow__edgebar-fill { display: block; height: 100%; }

/* Depth + a stronger state rail on runtime cards. */
.ta-activity-lane--runtime {
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    border-left-width: 4px;
    padding-bottom: 15px;
}
.ta-activity-lane--runtime:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.09); }

/* State-coloured step number so Active/Done/Rejected pop at a glance. */
.ta-activity-lane--runtime.ta-activity-lane--st-active   .ta-activity-lane__num { background: var(--status-in-review); color: #fff; }
.ta-activity-lane--runtime.ta-activity-lane--st-approved .ta-activity-lane__num { background: var(--status-approved); color: #fff; }
.ta-activity-lane--runtime.ta-activity-lane--st-rejected .ta-activity-lane__num { background: var(--status-rejected); color: #fff; }

/* More space between steps + a connector line so 1 → 2 reads as a sequence
   (scoped to runtime groups; parallel siblings inside one group are unaffected). */
.ta-activity-step-group:has(.ta-activity-lane--runtime) + .ta-activity-step-group {
    margin-top: 16px;
}
.ta-activity-step-group:has(.ta-activity-lane--runtime):not(:last-child)::after {
    content: "";
    position: absolute;
    left: 32px;
    bottom: -16px;
    width: 2px;
    height: 16px;
    background: var(--triarch-border);
}

/* Activity work-surface stepper — sequential steps (numbered nodes joined by
   connector lines), NOT a pill/button group. Past = brand node + check (clickable
   back); current = brand node + bold label; future = neutral (enabled) or muted +
   lock. */
.ta-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.ta-step { display: inline-flex; align-items: center; }
.ta-step__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--triarch-text-soft);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.15rem 0.1rem;
}
.ta-step__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--triarch-surface);
    color: var(--triarch-text-soft);
    border: 1.5px solid var(--triarch-border);
    transition: background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}
.ta-step__label { white-space: nowrap; }
.ta-step__lock { font-size: 11px; color: var(--triarch-text-soft); }

/* Connector line between nodes; turns brand once that segment is completed. */
.ta-step__line {
    flex: 0 0 auto;
    width: 32px;
    height: 2px;
    margin: 0 0.4rem;
    background: var(--triarch-border);
}
.ta-step__line--done { background: var(--triarch-primary); }

/* Hover only on the clickable (anchor) steps. */
a.ta-step__link:hover .ta-step__label { color: var(--triarch-primary); }
a.ta-step__link:hover .ta-step__num {
    border-color: var(--triarch-primary);
    color: var(--triarch-primary);
}

/* States */
.ta-step--active .ta-step__num {
    background: var(--triarch-primary);
    border-color: var(--triarch-primary);
    color: #ffffff;
}
.ta-step--active .ta-step__label { color: var(--triarch-primary); font-weight: 700; }
.ta-step--done .ta-step__num {
    background: var(--triarch-primary);
    border-color: var(--triarch-primary);
    color: #ffffff;
}
.ta-step--done .ta-step__label { color: var(--triarch-text); }
.ta-step--locked { opacity: 0.55; }
.ta-step--locked .ta-step__link { cursor: not-allowed; }

/* "Document under review" chip — sits in the Plan Review topbar's existing row (zero added
   height). Communicates the current submittal and opens the submittals picker to switch. */
.ta-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 200px;
    padding: 0.25rem 0.6rem;
    border: 1.5px solid var(--triarch-cta-outline);
    border-radius: 8px;
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}
.ta-doc-chip:hover { background: var(--triarch-cta-outline); }
.ta-doc-chip__icon { flex: 0 0 auto; font-size: 0.95rem; }
.ta-doc-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-doc-chip__count {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    background: var(--triarch-surface);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}
.ta-doc-chip__caret { flex: 0 0 auto; font-size: 0.75rem; opacity: 0.8; }
/* Display-only chip (Report/Verify stages — the document isn't switchable). */
.ta-doc-chip--static { cursor: default; }
.ta-doc-chip--static:hover { background: var(--triarch-cta-tint); }
/* "Frozen" badge inside the chip — shown only once the verdict locks the output. */
.ta-doc-chip__badge {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--triarch-text-soft);
    background: var(--triarch-surface);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

/* ─────────────────────────────────────────────────────────────────────
   "How to set up this service" — help affordance.

   The trigger is a subtle question-circle icon beside the page title;
   clicking it opens a Bootstrap offcanvas (slide from right) that
   contains the recommended setup sequence as four numbered cards.
   The offcanvas takes zero page space when closed.
   ───────────────────────────────────────────────────────────────────── */

/* Offcanvas chrome — rendered by <ta-offcanvas> + <ta-offcanvas-header> + <ta-offcanvas-body>,
   so the descendant selectors target the standard .offcanvas-header / .offcanvas-body
   that the tag helper emits. */
.ta-help-offcanvas {
    width: min(440px, 90vw);
}
.ta-help-offcanvas .offcanvas-header {
    background: var(--triarch-cta-tint);
    color: var(--triarch-cta-hover);
    border-bottom: 1px solid var(--triarch-cta-outline);
}
.ta-help-offcanvas .offcanvas-title {
    font-family: var(--triarch-font-display);
    font-size: 14px;
    font-weight: 600;
}
.ta-help-offcanvas .offcanvas-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--triarch-text);
}

/* Submittal-documents panel — a touch wider than Bootstrap's 400px default
   so long file names and the per-row action cluster fit comfortably. */
.ta-docs-offcanvas {
    width: min(460px, 92vw);
}
/* Section labels inside the panel (Project documents / Submittals) */
.ta-docs-section__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--triarch-text-soft);
}
/* Capped, independently scrolling section lists — the scrollbar only shows
   up once a section outgrows its cap (≈5 rows), so short lists stay flat. */
.ta-docs-scroll {
    max-height: min(320px, 38vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--triarch-outline) transparent;
}

/* ── Form-response drawer (FormResponseDrawer.cshtml) ─────────────────────
   Read-only list of the applicant's submitted answers. Question numbers
   reuse .ta-activity-step__num; the 34px indents below align choice/answer
   text under the question title (26px circle + 8px gap). */
.ta-form-response {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ta-form-response__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--triarch-border);
}
.ta-form-response__item:first-child { padding-top: 2px; }
.ta-form-response__item:last-child { border-bottom: 0; }
.ta-form-response__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: 8px;
}
.ta-form-response__question {
    font-family: var(--triarch-font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--triarch-text);
    line-height: 1.35;
    margin: 0;
    padding-top: 4px; /* optically centers against the 26px number circle */
}
.ta-form-response__choices {
    list-style: none;
    margin: 0 0 0 34px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ta-form-response__choice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--triarch-text-soft);
}
.ta-form-response__choice i {
    font-size: 11px;
    opacity: 0.45;
}
.ta-form-response__choice.is-selected {
    color: var(--status-approved);
    font-weight: 600;
}
.ta-form-response__choice.is-selected i { opacity: 1; }
.ta-form-response__answer {
    margin: 0 0 0 34px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--triarch-text);
    overflow-wrap: anywhere;
}
.ta-form-response__answer--empty {
    color: var(--triarch-text-soft);
    font-style: italic;
}
/* Editable control (text input etc.) aligned under the question title,
   same indent as choices/answers. */
.ta-form-response__control {
    margin: 0 0 0 34px;
}

/* Offcanvas eyebrow header — kicker pill + title + subtitle + divider, the
   standard chrome for ControlRoom panels (form picker, guidance upload,
   submittal documents…). Promoted from the module-local
   ta-form-picker-offcanvas.css (kept identical there) so panels opened from
   pages that don't load that stylesheet — e.g. the Activity shell — render
   the same. */
.ta-offcanvas-eyebrow {
    margin-top: -4px;
}
.ta-offcanvas-eyebrow__title {
    font-family: var(--triarch-font-display, inherit);
    font-size: 16px;
    font-weight: 700;
    color: var(--triarch-text, inherit);
    line-height: 1.25;
}
.ta-offcanvas-eyebrow__subtitle {
    max-width: 48ch;
    line-height: 1.4;
    color: var(--triarch-text-soft, inherit);
}
.ta-divider {
    border: 0;
    border-top: 1px solid var(--triarch-border, #eaeef2);
    opacity: 1;
    height: 0;
}

/* Upload document panel — shared storefront offcanvas (project + service
   request modes, Documents/UploadDocumentPanel). Drag-and-drop file target,
   selected-file chip, and the document-title dropdown menu. */
.ta-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 28px 16px;
    border: 1.5px dashed var(--triarch-outline);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
    color: var(--triarch-text-soft);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-color);
}
.ta-upload-dropzone:hover,
.ta-upload-dropzone:focus-visible,
.ta-upload-dropzone.is-dragover {
    background: var(--triarch-cta-tint);
    border-color: var(--triarch-cta-outline);
    outline: none;
}
.ta-upload-dropzone.is-dragover {
    border-style: solid;
}
.ta-upload-dropzone__icon {
    font-size: 22px;
    opacity: 0.65;
    color: var(--triarch-cta-hover);
}
.ta-upload-dropzone__text {
    font-family: var(--triarch-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--triarch-text);
}
.ta-upload-dropzone__hint {
    font-size: 11.5px;
    font-style: italic;
}
.ta-upload-dropzone__file {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-xs);
    background: var(--triarch-surface-soft);
    font-size: 12.5px;
}
.ta-doc-title-menu {
    max-height: 260px;
    overflow-y: auto;
}

/* Project metadata card — shown under the project select on the storefront
   apply wizard once a project is picked (number, jurisdiction, address,
   building-attribute chips). */
.ta-project-meta {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-sm);
    background: var(--triarch-surface-soft);
}
.ta-project-meta__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.ta-project-meta__jurisdiction {
    font-size: 12px;
    font-weight: 600;
    color: var(--triarch-text);
}
.ta-project-meta__link {
    text-decoration: none;
    cursor: pointer;
}
.ta-project-meta__link:hover,
.ta-project-meta__link:focus-visible {
    text-decoration: underline;
    filter: brightness(0.92);
}
.ta-project-meta__link i {
    font-size: 9.5px;
    opacity: 0.7;
}
.ta-project-meta__row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12.5px;
    color: var(--triarch-text-soft);
    line-height: 1.4;
}
.ta-project-meta__row i {
    font-size: 11px;
    opacity: 0.65;
}
.ta-project-meta__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ta-project-meta__chip {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--triarch-text-soft);
    background: var(--triarch-surface);
    border: 1px solid var(--triarch-border);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ta-project-meta__files {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--triarch-border);
}
.ta-project-meta__files-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--triarch-text-soft);
    margin-bottom: 4px;
}
.ta-project-meta__files-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--triarch-text);
    line-height: 1.6;
}
.ta-project-meta__file i {
    font-size: 10.5px;
    opacity: 0.6;
    margin-right: 2px;
}

/* Full-page busy overlay with message — shown during the apply wizard's
   SaveDraft server round-trip (draft save + intake-fee resolution). Plays the
   same blocking role as abp.ui.setBusy() but carries an explanatory text. */
.ta-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 32, 0.35);
}
.ta-busy-overlay__card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--triarch-surface, #fff);
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(16, 24, 32, 0.18);
}
.ta-busy-overlay__card i {
    font-size: 16px;
    color: var(--triarch-cta-hover);
}
.ta-busy-overlay__text {
    font-family: var(--triarch-font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--triarch-text);
}

/* Mobile: AJAX offcanvas panels (upload document, add contact …) take the
   full viewport width instead of Bootstrap's fixed 400px, and the busy
   overlay card never exceeds the screen. */
@media (max-width: 575.98px) {
    .ta-offcanvas-panel.offcanvas-end,
    .ta-offcanvas-panel.offcanvas-start {
        width: 100vw;
    }

    .ta-busy-overlay__card {
        max-width: calc(100vw - 32px);
        margin: 0 16px;
    }
}

/* Step list — reused inside the offcanvas body */
.ta-help-callout__lead {
    margin: 0 0 14px 0;
    color: var(--triarch-text);
}
.ta-help-callout__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ta-help-callout__step {
    padding: 8px 12px;
    border: 1px solid var(--triarch-border);
    border-radius: var(--radius-xs);
    background: var(--triarch-surface-soft);
}
.ta-help-callout__step-title {
    font-weight: 600;
    color: var(--triarch-cta-hover);
    margin-bottom: 2px;
    font-size: 12.5px;
}
.ta-help-callout__step-body {
    color: var(--triarch-text-soft);
    font-size: 12px;
    line-height: 1.5;
}
.ta-help-callout__footer {
    margin: 12px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--triarch-border);
    color: var(--triarch-text-soft);
    font-size: 12px;
    font-style: italic;
}

/* Empty state — shown when Model.Activities has zero items */
.ta-activity-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 18px 12px;
    border: 1px dashed var(--triarch-border);
    border-radius: var(--radius-sm);
    color: var(--triarch-text-soft);
    font-size: 12.5px;
    font-style: italic;
}
.ta-activity-empty i {
    opacity: 0.55;
    font-size: 14px;
}

/* Inline "add activity" dropzone — sits at the end of the list */
.ta-activity-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 14px 12px;
    border: 1px dashed var(--triarch-outline);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--triarch-cta-hover);
    font-family: var(--triarch-font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-color);
}
.ta-activity-dropzone:hover,
.ta-activity-dropzone:focus {
    background: var(--triarch-cta-tint);
    border-color: var(--triarch-cta-outline);
    border-style: solid;
    outline: none;
}
.ta-activity-dropzone__hint {
    font-family: var(--triarch-font-body);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--triarch-text-soft);
    font-style: italic;
}

/* "Suggested next" quick-add chip row */
.ta-activity-suggested {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--triarch-border);
}
.ta-activity-suggested__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--triarch-text-soft);
    margin-right: var(--space-2);
}
.ta-activity-suggested__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--triarch-surface);
    color: var(--triarch-text);
    border: 1px solid var(--triarch-border);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    transition: var(--transition-color);
}
.ta-activity-suggested__chip:hover,
.ta-activity-suggested__chip:focus {
    background: var(--triarch-cta-tint);
    border-color: var(--triarch-cta-outline);
    color: var(--triarch-cta-hover);
    outline: none;
}
.ta-activity-suggested__chip i {
    font-size: 9px;
    opacity: 0.7;
}

/* ── Busy overlay message (taBusy.js → abp.ui.setBusy + data-text) ────
   The stock abp.css busy overlay renders attr(data-text) via :after,
   styled as a short uppercase label inside the spinner ring. ControlRoom
   busy messages are full sentences ("Submitting your service request —
   please don't navigate away…"), so restyle: theme font, sentence case,
   placed just below the ring. The dark scope fixes the hardcoded white
   overlay background from abp.css. */
.abp-block-area.abp-block-area-busy::after {
    /* min() clamps to the viewport: hosts taller than the screen (dashboards)
       get a viewport-centered message instead of one below the fold, short
       hosts keep element-centering. Same clamp on the spinner below. */
    top: min(calc(50% + 92px), calc(50vh + 92px));
    transform: translateX(-50%);
    max-width: 420px;
    width: max-content;
    font-family: var(--triarch-font-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--triarch-text, #343a40);
}

.abp-block-area.abp-block-area-busy::before {
    top: min(calc(50% - 75px), calc(50vh - 75px));
}

.lpx-theme-dark .abp-block-area {
    background-color: #10151f;
}

.lpx-theme-dark .abp-block-area.abp-block-area-busy::after {
    color: #cdd6e3;
}

/* ── Plan Review stage loading overlay (server-rendered → painted at first paint) ──────────
   Shared by every Plan Review stage so Review / Report / Verify behave identically:
     • Report  → #ta-report-loading      (_Report.cshtml / Report/Index.cshtml)
     • Review  → #ta-doc-review-loading   (_Review.cshtml)
     • Verify  → #ta-doc-review-loading   (_Review.cshtml, final-report mode)
   Baked into the stage markup so the busy state is on screen the instant the page paints — no
   dependence on JS timing. Covers the editor / PDF-viewer area while ej2 + the Syncfusion control
   build and the document streams in; the stage script (Report/Index.js, DocumentReview/Index.js)
   removes the node once the document is open. Closes the bare-shell flash measured between a stage
   page's first paint and its DOM-ready script (~200ms). The spinner uses a transform animation
   (compositor-driven) so it keeps spinning even during the control's synchronous build. */
/* Deliberately a pixel match of abp's busy overlay (.abp-block-area.abp-block-area-busy +
   the theme overrides above) so the server-rendered landing loader and the client-side
   taBusy/abp loader used for clicks and Save & Next look IDENTICAL — same fixed full-viewport
   dim, same 150px #228ae6 ring at the same coordinates, same message styling. Otherwise the
   loader visibly swaps style mid-transition (server on landing, client on click). */
.ta-stage-loading {
    position: fixed;
    inset: 0;
    z-index: 102;
    background-color: #fff;
    opacity: 0.8;
}

.lpx-theme-dark .ta-stage-loading {
    background-color: #10151f;
}

.ta-stage-loading__spinner {
    position: absolute;
    top: min(calc(50% - 75px), calc(50vh - 75px));
    left: calc(50% - 75px);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid;
    border-color: transparent #228ae6 #228ae6 #228ae6;
    will-change: transform;
    animation: ta-stage-loading-spin 0.75s infinite ease-in-out;
}

.ta-stage-loading__text {
    position: absolute;
    top: min(calc(50% + 92px), calc(50vh + 92px));
    left: 50%;
    transform: translateX(-50%);
    max-width: 420px;
    width: max-content;
    font-family: var(--triarch-font-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--triarch-text, #343a40);
}

.lpx-theme-dark .ta-stage-loading__text {
    color: #cdd6e3;
}

@keyframes ta-stage-loading-spin {
    0% {
        transform: translateZ(0) rotate(0deg);
    }

    100% {
        transform: translateZ(0) rotate(360deg);
    }
}

/* ── Info pages (About / Support) ────────────────────────────────────────────
   Standalone empty-layout pages reached from the LeptonX footer (About, Support),
   matching the Privacy/Terms pattern. Hero + card scaffolding built only from
   --triarch-* tokens so it tracks the active theme (light / dim / dark); fallbacks
   cover the rare case where a non-:root token is unresolved. Icons use the
   Font Awesome glyphs already loaded by LeptonX (same as the .ta-btn-back arrow). */
.ta-info-page {
    max-width: 960px;
    padding-bottom: var(--space-16, 64px);
    color: var(--triarch-text, #171c1f);
}

.ta-info-hero {
    padding: var(--space-6, 24px) 0 var(--space-4, 16px);
}
.ta-info-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--triarch-primary, #9d4300);
    margin-bottom: var(--space-3, 12px);
}
.ta-info-title {
    font-family: var(--triarch-font-display, "Space Grotesk", sans-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--triarch-text, #171c1f);
    margin: 0 0 var(--space-4, 16px);
}
.ta-info-lead {
    max-width: 640px;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--triarch-text-soft, #57657a);
    margin: 0;
}

/* Section rhythm */
.ta-info-section {
    margin-top: var(--space-16, 64px);
}
.ta-info-h2 {
    font-family: var(--triarch-font-display, "Space Grotesk", sans-serif);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    color: var(--triarch-text, #171c1f);
    margin-bottom: var(--space-3, 12px);
}
.ta-info-section-lead {
    max-width: 620px;
    font-weight: 300;
    color: var(--triarch-text-soft, #57657a);
    margin-bottom: var(--space-8, 32px);
}

/* Feature / mission card */
.ta-info-card {
    background: var(--triarch-surface, #ffffff);
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-8, 32px);
    transition: var(--transition-shadow), border-color var(--duration-fast, 150ms) var(--ease-standard);
}
.ta-info-card:hover {
    border-color: var(--triarch-primary-dim, #ffb690);
    box-shadow: 0 10px 30px -18px rgba(17, 28, 31, 0.35);
}
.ta-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 10px);
    background: var(--triarch-primary-tint, #ffdbca);
    color: var(--triarch-primary, #9d4300);
    font-size: 18px;
    margin-bottom: var(--space-4, 16px);
}
.ta-info-card__title {
    font-family: var(--triarch-font-display, "Space Grotesk", sans-serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--triarch-text, #171c1f);
    margin-bottom: var(--space-3, 12px);
}
.ta-info-card__body {
    color: var(--triarch-text-soft, #57657a);
    line-height: 1.6;
}

/* Leadership card */
.ta-info-person {
    display: flex;
    gap: var(--space-5, 20px);
    align-items: flex-start;
    background: var(--triarch-surface, #ffffff);
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-6, 24px);
}
.ta-info-person__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--triarch-border, #eaeef2);
}
.ta-info-person__name {
    font-family: var(--triarch-font-display, "Space Grotesk", sans-serif);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0 2px;
    color: var(--triarch-text, #171c1f);
}
.ta-info-person__role {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--triarch-primary, #9d4300);
    margin: 0 0 var(--space-3, 12px);
}
.ta-info-person__bio {
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--triarch-text-soft, #57657a);
}

/* Support topic tile */
.ta-info-topic {
    background: var(--triarch-surface, #ffffff);
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-6, 24px);
    transition: var(--transition-shadow), border-color var(--duration-fast, 150ms) var(--ease-standard);
}
.ta-info-topic:hover {
    border-color: var(--triarch-primary-dim, #ffb690);
    box-shadow: 0 8px 24px -18px rgba(17, 28, 31, 0.3);
}
.ta-info-topic__icon {
    color: var(--triarch-primary, #9d4300);
    font-size: 18px;
}
.ta-info-topic__title {
    font-family: var(--triarch-font-display, "Space Grotesk", sans-serif);
    font-weight: 600;
    font-size: 1.05rem;
    margin: var(--space-3, 12px) 0 var(--space-2, 8px);
    color: var(--triarch-text, #171c1f);
}
.ta-info-topic__body {
    font-size: 0.9rem;
    color: var(--triarch-text-soft, #57657a);
    line-height: 1.5;
}

/* Pull-quote */
.ta-info-quote {
    margin: var(--space-16, 64px) auto 0;
    max-width: 760px;
    border-left: 3px solid var(--triarch-accent, #f97316);
    padding: var(--space-2, 8px) var(--space-6, 24px);
    font-family: var(--triarch-font-display, "Space Grotesk", sans-serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--triarch-text, #171c1f);
}

/* Contact band */
.ta-info-contact {
    margin-top: var(--space-16, 64px);
    background: var(--triarch-surface-soft, #f0f4f8);
    border: 1px solid var(--triarch-border, #eaeef2);
    border-radius: var(--radius-xl, 20px);
    padding: var(--space-12, 48px) var(--space-6, 24px);
}

/* Resource links (Support) */
.ta-info-links {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 640px;
}
.ta-info-links li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4, 16px) 0;
    border-bottom: 1px solid var(--triarch-border, #eaeef2);
}
.ta-info-links li:last-child { border-bottom: 0; }
.ta-info-links a {
    font-weight: 600;
    color: var(--triarch-primary, #9d4300);
    text-decoration: none;
}
.ta-info-links a:hover { color: var(--triarch-accent, #f97316); }
.ta-info-links a i { margin-right: var(--space-2, 8px); }
.ta-info-links span {
    font-size: 0.9rem;
    color: var(--triarch-text-soft, #57657a);
}

/* ── Required field indicator (global) ─────────────────────────────────
   Pattern A — ABP tag helpers (abp-input / abp-select):
     <label class="form-label">Name <span> *</span></label>
   Pattern B — Inline marker when label has hints or JS toggles visibility:
     <span class="ta-req-asterisk"> *</span>
   Pattern C — Dynamic / group labels (radio, checkbox):
     <label class="form-label ta-required-label">Question</label>
   Pattern D — Custom control, label is immediate sibling of required field:
     <label for="X">...</label><select required> */
label.form-label > span:last-child {
    color: var(--bs-danger, #dc3545);
}

label.form-label .ta-req-asterisk {
    color: var(--bs-danger, #dc3545);
}

label.form-label.ta-required-label::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
}

label.form-label:has(+ select[required])::after,
label.form-label:has(+ input[required])::after,
label.form-label:has(+ textarea[required])::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
}

/* Reduced motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}