/* ============================================================
   LYNCTERA DESIGN SYSTEM — extended components
   Gradients, sidebar, menus, toolbar buttons, slide-over, document
   canvas, patterns, motion. Tokens and the core primitives (typography,
   cards, buttons, modals, toasts, alerts) live in tailwind.input.css.

   RULE: one definition per class across the two files. This file used to
   carry a second copy of .lct-card / .btn-* / .lct-heading-* that won the
   cascade per property over the tailwind.input.css versions (it loads
   later), which is how the fluid clamp() type shipped and was silently
   discarded. Removed 2026-09-10; do not re-add.

   Every colour here is read through the hex aliases (var(--surface-*),
   var(--brand-primary), ...) which are DERIVED from the -rgb triplets in
   tailwind.input.css — never assign an alias in this file.
   ============================================================ */

/* ============================================================
   SIGNATURE GRADIENTS - Distinctive Lynctera branding
   ============================================================ */

.lct-gradient-primary {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.lct-gradient-subtle {
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, transparent 100%);
}

.lct-gradient-mesh {
    background: 
        radial-gradient(at 40% 20%, var(--brand-primary-light) 0px, transparent 50%),
        radial-gradient(at 80% 0%, color-mix(in srgb, var(--brand-accent) 15%, transparent) 0px, transparent 50%),
        radial-gradient(at 0% 50%, var(--brand-primary-light) 0px, transparent 50%);
}

.lct-gradient-hero {
    background: linear-gradient(160deg, var(--surface-primary) 0%, var(--surface-secondary) 50%, var(--brand-primary-light) 100%);
}

/* ============================================================
   SIDEBAR - Signature navigation
   ============================================================ */

.sidebar-link {
    transition: all var(--duration-fast) var(--ease-out-expo);
    position: relative;
}

.sidebar-link:hover {
    background: var(--surface-tertiary);
}

.sidebar-link.active {
    background: var(--brand-primary-light);
    border-left: 3px solid transparent;
    color: var(--brand-ink);
    font-weight: 600;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.sidebar {
    transition: width var(--duration-slow) var(--ease-out-expo);
}

.sidebar.collapsed {
    width: 56px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar.collapsed::-webkit-scrollbar {
    display: none;
}

.sidebar.collapsed .nav-label,
.sidebar.collapsed .section-chevron {
    display: none;
}

.sidebar.collapsed .submenu {
    display: none !important;
}

.sidebar.collapsed nav {
    padding: 0.5rem 0.25rem;
}

.sidebar.collapsed .nav-section-header {
    justify-content: center;
    padding: 0.625rem 0;
}

.sidebar.collapsed .nav-section-header .section-icon {
    margin: 0;
}

.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0.625rem 0;
}

.sidebar.collapsed .sidebar-link > svg {
    margin-right: 0;
}

.sidebar.collapsed .nav-divider {
    display: none;
}

.sidebar.collapsed .mb-6 {
    margin-bottom: 0.25rem;
}

.main-content {
    transition: margin-left var(--duration-slow) var(--ease-out-expo);
}

.main-content.expanded {
    margin-left: 56px;
}

/* ============================================================
   SIDEBAR - Mobile responsive overlay
   ============================================================ */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 19;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out-expo);
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

.sidebar-scroll-lock {
    overflow: hidden;
}

@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%);
        z-index: 25;
        width: 288px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar.collapsed {
        width: 288px;
        transform: translateX(-100%);
    }

    .sidebar.collapsed.mobile-open {
        transform: translateX(0);
    }

    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .section-chevron,
    .sidebar.collapsed .submenu {
        display: revert;
    }

    .sidebar.collapsed .nav-section-header,
    .sidebar.collapsed .sidebar-link {
        justify-content: revert;
        padding: revert;
    }

    .sidebar.collapsed .nav-section-header .section-icon {
        margin-right: 0.5rem;
    }

    .sidebar.collapsed .sidebar-link > svg {
        margin-right: 0.75rem;
    }

    .main-content {
        margin-left: 0 !important;
    }
}

/* ============================================================
   GEOMETRIC PATTERNS - Subtle background textures
   ============================================================ */

.lct-pattern-dots {
    background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
    background-size: 20px 20px;
}

.lct-pattern-grid {
    background-image: 
        linear-gradient(var(--border-subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
    background-size: 40px 40px;
}

.lct-pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        var(--border-subtle) 10px,
        var(--border-subtle) 11px
    );
}

/* ============================================================
   ANIMATIONS - Micro-interactions
   ============================================================ */

.lct-stagger-in > * {
    opacity: 0;
    animation: lctFadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

.lct-stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.lct-stagger-in > *:nth-child(2) { animation-delay: 50ms; }
.lct-stagger-in > *:nth-child(3) { animation-delay: 100ms; }
.lct-stagger-in > *:nth-child(4) { animation-delay: 150ms; }
.lct-stagger-in > *:nth-child(5) { animation-delay: 200ms; }
.lct-stagger-in > *:nth-child(6) { animation-delay: 250ms; }
.lct-stagger-in > *:nth-child(7) { animation-delay: 300ms; }
.lct-stagger-in > *:nth-child(8) { animation-delay: 350ms; }

@keyframes lctFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lct-skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-tertiary) 0%,
        var(--surface-secondary) 50%,
        var(--surface-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: lctShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-lg);
}

@keyframes lctShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.lct-success-pulse {
    animation: lctSuccessPulse 0.6s var(--ease-out-expo);
}

@keyframes lctSuccessPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 4px rgb(var(--success-rgb) / 0.25); }
    100% { transform: scale(1); box-shadow: none; }
}

/* ============================================================
   HAMBURGER ANIMATION
   ============================================================ */

.hamburger-line {
    transition: all var(--duration-normal) var(--ease-in-out-expo);
}

.sidebar-expanded .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.sidebar-expanded .hamburger-line:nth-child(2) {
    opacity: 0;
}

.sidebar-expanded .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================================
   SUBMENU ANIMATIONS
   ============================================================ */

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-normal) var(--ease-out-expo);
}

.submenu.expanded {
    max-height: 800px;
}

.chevron {
    transition: transform var(--duration-fast) var(--ease-out-expo);
}

.chevron.rotated {
    transform: rotate(180deg);
}

.breadcrumb-separator::before {
    content: '/';
    padding: 0 0.5rem;
    color: var(--text-tertiary);
}

/* ============================================================
   STATUS INDICATORS
   ============================================================ */

.lct-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}

.lct-status-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
    animation: lctPulse 2s ease-in-out infinite;
}

.lct-status-dot.success { background: var(--success); }
.lct-status-dot.warning { background: var(--warning); }
.lct-status-dot.error { background: var(--error); }
.lct-status-dot.info { background: var(--info); }

@keyframes lctPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.5); opacity: 0; }
}

/* ============================================================
   FOCUS STATES - Accessibility
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ============================================================
   DARK MODE — component overrides only.
   Token flips live in the single html.dark block in tailwind.input.css.
   ============================================================ */

html.dark body {
    background-color: var(--surface-primary);
    color: var(--text-primary);
}

html.dark .bg-white {
    background-color: var(--surface-elevated);
    border-color: var(--border-default);
}

html.dark .sidebar,
html.dark header {
    background-color: var(--surface-secondary);
    border-color: var(--border-default);
}

html.dark .sidebar-link:hover {
    background-color: var(--surface-tertiary);
}

html.dark .sidebar-link.active {
    background-color: var(--brand-primary-light);
}

html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--surface-secondary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--brand-primary);
}

html.dark .text-purple-500 {
    color: #a78bfa;
}

html.dark .text-amber-500 {
    color: #fbbf24;
}

html.dark .text-slate-500 {
    color: var(--text-tertiary);
}

html.dark .text-slate-700 {
    color: var(--text-secondary);
}

html.dark .text-slate-400 {
    color: var(--text-tertiary);
}

html.dark .lct-skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-tertiary) 0%,
        var(--surface-secondary) 50%,
        var(--surface-tertiary) 100%
    );
    background-size: 200% 100%;
}

html.dark .lct-pattern-dots {
    background-image: radial-gradient(var(--border-default) 1px, transparent 1px);
}

html.dark table thead {
    background-color: var(--surface-secondary);
}

html.dark table tbody tr:hover {
    background-color: var(--surface-tertiary);
}

/* ============================================================
   KEYBOARD HINT - lct-kbd
   ============================================================ */

.lct-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    background: rgb(var(--surface-tertiary-rgb, 241 245 249));
    border: 1px solid rgb(var(--border-default-rgb, 226 232 240));
    border-radius: var(--radius);
    color: rgb(var(--text-tertiary-rgb, 100 116 139));
}

/* ============================================================
   SCROLLBAR - Thin utility
   ============================================================ */

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgb(var(--border-default-rgb, 203 213 225)); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgb(var(--text-tertiary-rgb, 148 163 184)); }

/* ============================================================
   STATUS CHIPS - Shared status display across process views
   ============================================================ */

.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}
.status-draft     { background: rgb(var(--neutral-100-rgb, 243 244 246)); color: rgb(var(--neutral-600-rgb, 75 85 99)); }
.status-active    { background: rgb(var(--success-rgb) / 0.1); color: rgb(var(--success-ink-rgb)); }
.status-on_hold   { background: rgb(var(--warning-rgb) / 0.1); color: rgb(var(--warning-ink-rgb)); }
.status-closed    { background: rgb(var(--neutral-100-rgb, 243 244 246)); color: rgb(var(--neutral-500-rgb, 107 114 128)); }
.status-archived  { background: rgb(var(--neutral-100-rgb, 243 244 246)); color: rgb(var(--neutral-400-rgb, 156 163 175)); }
.status-ready_for_review { background: rgb(var(--warning-rgb) / 0.1); color: rgb(var(--warning-ink-rgb)); }
.status-approved  { background: rgb(var(--success-rgb) / 0.1); color: rgb(var(--success-ink-rgb)); }
.status-approved_to_send { background: rgb(var(--success-rgb) / 0.1); color: rgb(var(--success-ink-rgb)); } /* legacy word for approved (AB#1890) */
.status-sent      { background: rgb(var(--info-rgb) / 0.1); color: rgb(var(--info-ink-rgb)); }
.status-final     { background: rgb(var(--success-rgb) / 0.2); color: rgb(var(--success-ink-rgb)); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .lct-stagger-in > * {
        opacity: 1;
        animation: none;
    }
}

/* ============================================================
   DOCUMENT CANVAS - Showcase rendering for generated artifacts
   Artifacts are the product's work-product surface; they render
   as a typeset "page" rather than a stack of data cards.
   Serif headings differentiate the document from UI chrome.
   Swap --font-serif for a self-hosted webfont (e.g. Source Serif 4)
   to upgrade without touching markup. See design-system proposal.
   ============================================================ */

:root {
    /* Document serif — brand-independent work-product typeface. @font-face: css/fonts.css.
       NOTE: --font-sans is defined in fonts.css (loads before the per-brand override
       in _SharedHead) so brand FontFamily wins; do not redefine it here. */
    --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

.lct-doc-sheet {
    max-width: 46rem;
    margin: 0 auto;
    background: rgb(var(--surface-primary-rgb, 255 255 255));
    border: 1px solid rgb(var(--border-default-rgb, 226 232 240));
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
    padding: 3rem 3.5rem;
}

.lct-doc-capline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.625rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgb(var(--border-default-rgb, 226 232 240));
}
.lct-doc-ref {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: rgb(var(--text-tertiary-rgb, 148 163 184));
}
.lct-doc-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 0.1875rem 0.625rem;
    background: rgb(var(--warning-rgb) / 0.12);
    color: rgb(var(--warning-ink-rgb));
    text-transform: capitalize;
    white-space: nowrap;
}

.lct-doc-title {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: rgb(var(--text-primary-rgb, 15 23 42));
}
.lct-doc-sub {
    font-size: 0.9375rem;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
    margin: 0 0 0.375rem;
}
.lct-doc-meta {
    font-size: 0.75rem;
    color: rgb(var(--text-tertiary-rgb, 148 163 184));
    margin: 0 0 2.25rem;
}

.lct-doc-section { scroll-margin-top: 1rem; }
.lct-doc-section + .lct-doc-section { margin-top: 2rem; }

.lct-doc-h2 {
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: rgb(var(--text-primary-rgb, 15 23 42));
}
.lct-doc-body-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgb(var(--text-primary-rgb, 15 23 42));
    margin: 0 0 0.75rem;
}
.lct-doc-list {
    list-style: disc;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgb(var(--text-primary-rgb, 15 23 42));
}
.lct-doc-list li { margin-bottom: 0.25rem; }
.lct-doc-muted { font-size: 0.875rem; font-style: italic; color: rgb(var(--text-tertiary-rgb, 148 163 184)); }

/* Document prose: typeset body for markdown-rendered content */
.lct-doc-prose { font-size: 0.9375rem; line-height: 1.7; color: rgb(var(--text-primary-rgb, 15 23 42)); }
.lct-doc-prose h1, .lct-doc-prose h2, .lct-doc-prose h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: rgb(var(--text-primary-rgb, 15 23 42));
    line-height: 1.3;
    margin: 1.75rem 0 0.75rem;
    scroll-margin-top: 1rem;
}
.lct-doc-prose h1 { font-size: 1.5rem; }
.lct-doc-prose h2 { font-size: 1.1875rem; }
.lct-doc-prose h3 { font-size: 1.0625rem; }
.lct-doc-prose p { margin: 0 0 0.75rem; }
.lct-doc-prose ul, .lct-doc-prose ol { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.lct-doc-prose li { margin-bottom: 0.25rem; }
.lct-doc-prose a { color: rgb(var(--brand-ink-rgb, var(--brand-primary-rgb, 13 51 102))); text-decoration: underline; }
.lct-doc-prose strong { font-weight: 600; }
.lct-doc-prose blockquote {
    border-left: 3px solid rgb(var(--border-default-rgb, 226 232 240));
    padding-left: 1rem; margin: 0 0 0.75rem; color: rgb(var(--text-secondary-rgb, 71 85 105));
}

/* Print-quality table for tabular artifact content (chronologies, schedules) */
.lct-doc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lct-doc-table thead th {
    text-align: left;
    font-weight: 600;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
    padding: 0 0.875rem 0.625rem 0;
    border-bottom: 2px solid rgb(var(--border-default-rgb, 203 213 225));
}
.lct-doc-table tbody td {
    vertical-align: top;
    padding: 0.8125rem 0.875rem 0.8125rem 0;
    border-bottom: 1px solid rgb(var(--border-default-rgb, 226 232 240));
    line-height: 1.55;
    color: rgb(var(--text-primary-rgb, 15 23 42));
}
.lct-doc-table tbody tr:nth-child(even) { background: rgb(var(--surface-secondary-rgb, 248 250 252)); }
.lct-doc-table th:not(:first-child), .lct-doc-table td:not(:first-child) { padding-left: 0.875rem; }
.lct-doc-td-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
}

.lct-doc-attribution {
    margin-top: 1.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgb(var(--info-rgb, 14 165 233) / 0.2);
    background: rgb(var(--info-rgb, 14 165 233) / 0.05);
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
}
.lct-doc-attribution b { color: rgb(var(--info-rgb, 14 165 233)); font-weight: 600; }

.lct-outline-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
    cursor: pointer;
    text-decoration: none;
}
.lct-outline-link:hover { background: rgb(var(--surface-tertiary-rgb, 241 245 249)); }
.lct-outline-link.active { background: rgb(var(--brand-primary-rgb, 13 51 102) / 0.1); color: rgb(var(--brand-ink-rgb, var(--brand-primary-rgb, 13 51 102))); font-weight: 600; }
.lct-outline-sub { padding-left: 1.5rem; font-size: 0.8125rem; }

/* Markdown tables rendered inside document prose get the same print quality */
.lct-doc-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.5rem 0 1rem; }
.lct-doc-prose thead th {
    text-align: left;
    font-weight: 600;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
    padding: 0 0.875rem 0.625rem 0;
    border-bottom: 2px solid rgb(var(--border-default-rgb, 203 213 225));
}
.lct-doc-prose tbody td {
    vertical-align: top;
    padding: 0.8125rem 0.875rem 0.8125rem 0;
    border-bottom: 1px solid rgb(var(--border-default-rgb, 226 232 240));
    line-height: 1.55;
}
.lct-doc-prose tbody tr:nth-child(even) { background: rgb(var(--surface-secondary-rgb, 248 250 252)); }
.lct-doc-prose th:not(:first-child), .lct-doc-prose td:not(:first-child) { padding-left: 0.875rem; }

/* =========================================================================
   Slide-over shell (ADR-SLIDE-OVER-SHELL)
   -------------------------------------------------------------------------
   Generic right-edge panel chrome emitted by SlideOverTagHelper, driven by the
   $store.slideOver Alpine store. Chrome only — content is slotted in by callers.
   Panels stack (z-index from stack depth); anchored below the global topbar so
   non-modal panels leave the top chrome usable.
   ========================================================================= */

.lct-slide-over-root {
    position: fixed;
    top: var(--topbar-h, 4rem);
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none; /* closed children are display:none; open children re-enable below */
}

.lct-slide-over-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.32);
    pointer-events: auto;
}

.lct-slide-over {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: rgb(var(--surface-primary-rgb, 255 255 255));
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.14);
    pointer-events: auto;
    overflow: hidden;
}
.lct-slide-over:focus { outline: none; }
.lct-slide-over--right { right: 0; border-left: 1px solid rgb(var(--border-default-rgb, 226 232 240)); }
.lct-slide-over--left  { left: 0;  border-right: 1px solid rgb(var(--border-default-rgb, 226 232 240)); }

.lct-slide-over__header {
    flex-shrink: 0;
    background: rgb(var(--surface-primary-rgb, 255 255 255));
    border-bottom: 1px solid rgb(var(--border-default-rgb, 226 232 240));
}
.lct-slide-over__headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}
.lct-slide-over__title {
    margin: 0;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(var(--text-primary-rgb, 15 23 42));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lct-slide-over__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The global `.btn, button` base sets `padding: .5rem .9rem` and `min-height: 44px`, and this
       rule never reset them. With border-box that left a 2rem button a 32 - 28.8 = 3.2px content
       box, so the 20px icon rendered as a 3px sliver: invisible until :hover painted the
       background and revealed the hit area. Reported 2026-09-20, reproduced against the real
       stylesheets (computed svg width 3.203px).
       Sized 44px rather than restoring 2rem because the base rule was already forcing the height
       to 44 — the touch-target minimum — so the button was a lopsided 32x44 even when it worked. */
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: rgb(var(--text-tertiary-rgb, 148 163 184));
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.lct-slide-over__close:hover {
    background: rgb(var(--surface-tertiary-rgb, 241 245 249));
    color: rgb(var(--text-primary-rgb, 15 23 42));
}
.lct-slide-over__close:focus-visible {
    outline: 2px solid rgb(var(--brand-accent-rgb, 37 140 251));
    outline-offset: 2px;
}

.lct-slide-over__tabs {
    display: flex;
    border-top: 1px solid rgb(var(--border-subtle-rgb, 241 245 249));
}
.lct-slide-over__tab {
    flex: 1 1 0;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: rgb(var(--text-tertiary-rgb, 148 163 184));
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
}
.lct-slide-over__tab:hover { color: rgb(var(--text-secondary-rgb, 71 85 105)); }
.lct-slide-over__tab.is-active {
    color: rgb(var(--brand-ink-rgb, var(--brand-primary-rgb, 13 51 102)));
    border-bottom-color: rgb(var(--brand-primary-rgb, 13 51 102));
}
.lct-slide-over__tab:focus-visible {
    outline: 2px solid rgb(var(--brand-accent-rgb, 37 140 251));
    outline-offset: -2px;
}

.lct-slide-over__body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* =========================================================================
   Dropdown menu (lct-menu) + toolbar button (lct-toolbar-btn)
   -------------------------------------------------------------------------
   Canonical popover menu — the one shared primitive for action dropdowns
   (replaces ~14 hand-rolled `absolute … shadow-lg` popovers). Chrome only:
   positioning (absolute / right-0 / mt-1 / w-*) stays as utilities at the
   call site, since side and width vary. .lct-toolbar-btn is the compact
   toolbar / menu-trigger button (sits alongside filter-chip / row-action-btn
   as a context button — NOT a competitor to the page-level btn-* CTAs).
   ========================================================================= */

.lct-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.6875rem;
    border: 1px solid rgb(var(--border-default-rgb, 226 232 240));
    border-radius: var(--radius-lg);
    background: rgb(var(--surface-primary-rgb, 255 255 255));
    color: rgb(var(--text-secondary-rgb, 71 85 105));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
}
.lct-toolbar-btn:hover { background: rgb(var(--surface-secondary-rgb, 248 250 252)); }
.lct-toolbar-btn:focus-visible { outline: 2px solid rgb(var(--brand-accent-rgb, 37 140 251)); outline-offset: 2px; }
.lct-toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lct-toolbar-btn--brand {
    border-color: rgb(var(--brand-primary-rgb, 13 51 102));
    color: rgb(var(--brand-ink-rgb, var(--brand-primary-rgb, 13 51 102)));
}
.lct-toolbar-btn--brand:hover { background: rgb(var(--brand-primary-rgb, 13 51 102) / 0.06); }

/* Popover container — apply positioning utilities (absolute right-0 mt-1 w-56 z-50) at the call site. */
.lct-menu {
    padding: 0.3125rem;
    border: 1px solid rgb(var(--border-default-rgb, 226 232 240));
    border-radius: 0.625rem;
    background: rgb(var(--surface-primary-rgb, 255 255 255));
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.14);
}
/* Menu row — works for <button> and <a>; add justify-between / color utilities as needed. */
.lct-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5625rem 0.6875rem;
    border: 0;
    border-radius: 0.4375rem;
    background: transparent;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--text-primary-rgb, 15 23 42));
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms;
}
.lct-menu-item:hover { background: rgb(var(--surface-tertiary-rgb, 241 245 249)); color: rgb(var(--text-primary-rgb, 15 23 42)); text-decoration: none; }
.lct-menu-item:focus-visible { outline: 2px solid rgb(var(--brand-accent-rgb, 37 140 251)); outline-offset: -2px; }
.lct-menu-item:disabled, .lct-menu-item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.lct-menu-sep { height: 1px; margin: 0.3125rem 0.25rem; background: rgb(var(--border-subtle-rgb, 241 245 249)); }
/* Tabbed menu — a segmented tab strip across the top of an .lct-menu, one panel of
   .lct-menu-item rows per tab (the artifact viewer's Actions menu: Edit · Export · Inspect). */
.lct-menu-tabs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    padding: 3px;
    margin-bottom: 0.3125rem;
    border-radius: 0.5rem;
    background: rgb(var(--surface-tertiary-rgb, 241 245 249));
}
.lct-menu-tab {
    min-height: 32px;
    padding: 0.4375rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--text-secondary-rgb, 71 85 105));
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.lct-menu-tab:hover { color: rgb(var(--text-primary-rgb, 15 23 42)); }
.lct-menu-tab.is-active {
    background: rgb(var(--surface-primary-rgb, 255 255 255));
    color: rgb(var(--brand-ink-rgb, var(--brand-primary-rgb, 13 51 102)));
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
}
.lct-menu-tab:focus-visible { outline: 2px solid rgb(var(--brand-accent-rgb, 37 140 251)); outline-offset: -2px; }

/* ============================================================
   AI SURFACES - trust chassis for AI-generated content
   (ADR-CHAT-SURFACE-CONVERGENCE Slice 6a; spec: DESIGN_SYSTEM.md
   "AI surfaces". Same card chassis as the rest of the system,
   with a 3px left edge in --info, an "AI" pill, a three-tier
   confidence dot, and an inline citation pill.)
   ============================================================ */

/* Longhands, not `border:`, because the left edge must stay out of this rule: see below. */
.lct-ai-block {
    position: relative;
    background: var(--surface-primary);
    border-top: 1px solid var(--border-default);
    border-right: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    border-left-style: solid;
    border-radius: var(--radius-xl);
    padding: 16px 20px;
}

/* The left edge is the one part of the chassis a view may restyle: a degraded or failed block
   says so with `border-l-warning` / `border-error` (and `border-l-4` if it wants it heavier).
   This file loads after tailwind.output.css, so while the edge sat in the rule above at (0,1,0)
   it beat those utilities on source order and every warning and error block rendered info-blue
   (Inbox/Commitments' error banner measured 3px #3b82f6). :where() takes the edge to zero
   specificity, so any border utility on the element wins, while the neutral top/right/bottom
   longhands above still beat an all-sides colour such as `border-warning`. */
:where(.lct-ai-block) {
    border-left-width: 3px;
    border-left-color: var(--info);
}

.lct-ai-block.is-elevated {
    background: color-mix(in srgb, var(--info) 4%, var(--surface-primary));
}

/* Compact variant for AI content inside a dense list row (a document's AI summary under its
   filename): same chassis and left edge, tighter padding and a smaller badge so a row stays a row. */
.lct-ai-block.is-compact {
    padding: 8px 12px;
    border-radius: var(--radius-lg);
}

.lct-ai-block.is-compact .lct-ai-header {
    gap: 8px;
    margin-bottom: 4px;
}

.lct-ai-block.is-compact .lct-ai-badge {
    padding: 2px 6px;
    font-size: 10px;
}

.lct-ai-block.is-compact .lct-ai-meta {
    font-size: 11px;
}

.lct-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lct-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--info) 12%, transparent);
    color: var(--info-ink);
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lct-ai-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--info);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent);
}

.lct-ai-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Confidence - three tiers */
.lct-confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lct-confidence .dots {
    display: inline-flex;
    gap: 2px;
}

.lct-confidence .dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-default);
}

.lct-confidence-high   { color: var(--success-ink); }
.lct-confidence-medium { color: var(--warning-ink); }
.lct-confidence-low    { color: var(--error-ink); }
.lct-confidence-high   .dots span:nth-child(-n+3) { background: var(--success); }
.lct-confidence-medium .dots span:nth-child(-n+2) { background: var(--warning); }
.lct-confidence-low    .dots span:nth-child(-n+1) { background: var(--error); }

/* Citation - inline pill linking AI text to its source */
.lct-citation {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    margin: 0 2px;
    background: color-mix(in srgb, var(--info) 10%, transparent);
    color: var(--info-ink);
    border: 0;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-decoration: none;
    vertical-align: baseline;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms);
}

.lct-citation:hover {
    background: color-mix(in srgb, var(--info) 18%, transparent);
    text-decoration: none;
}

.lct-citation::before {
    content: "\00a7";
    opacity: 0.7;
}

/* The AI's own judgement (D3, 2026-09-28): a conclusion no single source states - a trend
   across notes, a likely cause, a recommendation. Marked by its lead-in ("The AI's reading:")
   and a dashed edge, never by a hue: blue already means AI and sourced, orange means warning,
   and a label reads the same for every tenant brand. Sourced fact = .lct-citation, judgement =
   .lct-ai-reading, a person's decision = .lct-approval-gate. */
.lct-ai-reading {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    background: rgb(var(--surface-tertiary-rgb));
    border-left: 2px dashed rgb(var(--border-default-rgb));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: rgb(var(--text-primary-rgb));
    line-height: 1.5;
}

.lct-ai-reading > b:first-child,
.lct-ai-reading > strong:first-child {
    font-weight: 600;
}

/* Source-strip variant: pill carries a filename, so it truncates instead of wrapping. */
.lct-citation-src {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}