/* UIP Platform — Main Stylesheet
   Design System: "Digital Prestige"
   Light-first, premium law-tech aesthetic.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Theme: CSS custom properties — "Deep Intelligence" palette
   ----------------------------------------------------------------
   Brand:      Obsidian Ink gradient  #1E2D4A → #0A1128
   Background: Parchment Grey #F8F9FA  — warm off-white, low fatigue
   Gold:       Burnished Gold #D4AF37  — premium / verified (sparingly)
   ---------------------------------------------------------------- */
:root {
    /* Surfaces — warm parchment layering */
    --bg-primary: #F8F9FA;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    /* Text — Obsidian Ink hierarchy */
    --text-primary: #0A1128;
    --text-secondary: #4A5568;
    --text-faint: #8896AB;
    /* Lines — subtle warm borders */
    --border: rgba(10, 17, 40, 0.10);
    --line: rgba(10, 17, 40, 0.10);
    --line-soft: rgba(10, 17, 40, 0.05);

    /* ── Brand: Obsidian Ink gradient ────────────────────────────── */
    --brand-grad: linear-gradient(135deg, #1E2D4A 0%, #142038 50%, #0A1128 100%);
    --accent: #0F1B33;
    --accent-hover: #0A1128;
    --accent-soft: rgba(10, 17, 40, 0.08);
    --cta-bg: linear-gradient(135deg, #1E2D4A 0%, #0A1128 100%);
    --cta-text: #FFFFFF;
    --cta-shadow: rgba(10, 17, 40, 0.25);
    --cta-shadow-hover: rgba(10, 17, 40, 0.35);
    --brand-wash-1: rgba(10, 17, 40, 0.03);
    --brand-wash-2: rgba(10, 17, 40, 0.02);

    /* Gold accent — premium / verified badges */
    --gold: #D4AF37;
    --gold-soft: rgba(212, 175, 55, 0.10);

    /* Semantic */
    --success: #12B886;
    --warning: #E8A317;
    --danger:  #E03131;
    --info:    #1098AD;
    /* Misc */
    --shadow: rgba(10, 17, 40, 0.06);
    --color-scrollbar: #C1C8D4;
    --color-msg-user-bg: #EDF2F7;
    --color-msg-user-border: #CBD5E0;
    --color-msg-assistant-bg: #F7F8FA;
    --color-msg-assistant-border: #E2E8F0;
}

.dark {
    /* Surfaces — deep navy, not pure black */
    --bg-primary: #080D1A;
    --bg-secondary: #0E1425;
    --bg-card: #131A2E;
    /* Text */
    --text-primary: #E8ECF2;
    --text-secondary: #8896AB;
    --text-faint: #5A6578;
    /* Lines */
    --border: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.08);
    --line-soft: rgba(255, 255, 255, 0.04);

    /* Brand — Obsidian lifted for dark contrast */
    --brand-grad: linear-gradient(135deg, #4A5F8A 0%, #2E3F66 50%, #1E2D4A 100%);
    --accent: #4A5F8A;
    --accent-hover: #5E74A0;
    --accent-soft: rgba(74, 95, 138, 0.15);
    --cta-bg: linear-gradient(135deg, #4A5F8A 0%, #2E3F66 100%);
    --brand-wash-1: rgba(74, 95, 138, 0.06);
    --brand-wash-2: rgba(74, 95, 138, 0.03);

    /* Semantic */
    --success: #38D9A9;
    --warning: #FCC419;
    --danger:  #FF6B6B;
    --info:    #3BC9DB;
    /* Misc */
    --shadow: rgba(0, 0, 0, 0.4);
    --color-scrollbar: #3A4556;
    --color-msg-user-bg: #0E1E3D;
    --color-msg-user-border: #1C3A6E;
    --color-msg-assistant-bg: #0E1425;
    --color-msg-assistant-border: rgba(255, 255, 255, 0.08);
}

/* ----------------------------------------------------------------
   Base styles
   ---------------------------------------------------------------- */
html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Subtle background depth — two soft radial washes in the active
   brand color, anchored to opposite corners. Stays fixed during scroll
   so the "atmosphere" doesn't move with content. Very low opacity so it
   reads as tonal depth, not as colored bg. Driven by --brand-wash-1/2
   so it swaps with the brand toggle. */
body {
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 0%,    var(--brand-wash-1) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 85% 100%,  var(--brand-wash-2) 0%, transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Theme switch needs an explicit transition window so dark<->light fades
   smoothly across surfaces and text. Restricted to a tight allowlist of
   properties so layout-affecting properties never animate. */
html.theme-transition,
html.theme-transition body,
html.theme-transition [data-theme-fade] {
    transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

html.no-transition,
html.no-transition * {
    transition: none !important;
}

/* ----------------------------------------------------------------
   Autofill — force theme-aware background and text on browser
   credential autofill (Chrome / Safari / Edge), which by default
   overrides the input background with its own off-white color.

   Uses a 1000px inset box-shadow as the only browser-supported way
   to override the autofill background. The 5000s transition delay
   prevents Chrome's "yellow flash" on first focus.
   ---------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* ----------------------------------------------------------------
   Typography — "The Modern Manuscript"
   Headings: DM Serif Display (chunky geometric serif, authoritative)
   Body: Inter (invisible, optimized for long-form reading)
   Data/AI: JetBrains Mono (signals machine-processed content)
   ---------------------------------------------------------------- */
.font-serif {
    font-family: 'DM Serif Display', 'Georgia', 'Times New Roman', serif;
}

/* Legacy alias — templates reference .font-sora for display headings.
   Now maps to DM Serif Display for the prestige aesthetic. */
.font-sora {
    font-family: 'DM Serif Display', 'Georgia', 'Times New Roman', serif;
}

.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.text-gradient {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----------------------------------------------------------------
   Global Component System — one definition, used everywhere.
   ----------------------------------------------------------------

   .uip-card          — white card with border + shadow
   .uip-card-header   — grey header band inside a card
   .uip-card-body     — padded body area inside a card
   .uip-card:hover    — lift effect for interactive cards
   .uip-input         — form input (underline style)
   .uip-select        — form select (underline style)
   .uip-label         — uppercase eyebrow label above inputs
   .uip-panel         — side panel / drawer background
   ---------------------------------------------------------------- */

/* ── Card ─────────────────────────────────────────────────────── */
.card, .uip-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(10, 17, 40, 0.08);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(10, 17, 40, 0.05), 0 4px 16px rgba(10, 17, 40, 0.06);
    overflow: hidden;
}
.card:hover, .uip-card-interactive:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 17, 40, 0.08), 0 12px 40px rgba(10, 17, 40, 0.10);
}

/* ── Card header band ─────────────────────────────────────────── */
.uip-card-header {
    background: #DEE1E8;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(10, 17, 40, 0.06);
}
.uip-card-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ── Card body ────────────────────────────────────────────────── */
.uip-card-body {
    padding: 20px;
}

/* ── Form inputs — underline style on white background ────────── */
.uip-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0;
    outline: none;
    transition: border-color 150ms ease;
}
.uip-input::placeholder { color: var(--text-faint); }
.uip-input:focus { border-bottom-color: var(--text-primary); }

/* ── Form selects ─────────────────────────────────────────────── */
.uip-select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0.5rem 0;
    outline: none;
    appearance: none;
    transition: border-color 150ms ease;
}
.uip-select:focus { border-bottom-color: var(--text-primary); }

/* ── Form label ───────────────────────────────────────────────── */
.uip-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ── Side panels / drawers ────────────────────────────────────── */
.uip-panel {
    background: #DEE1E8;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(10, 17, 40, 0.08), 0 16px 48px rgba(10, 17, 40, 0.10);
}
.uip-panel-header {
    padding: 12px 16px;
    background: #D0D4DD;
    border-bottom: 1px solid rgba(10, 17, 40, 0.06);
}

/* ── Dark mode overrides ──────────────────────────────────────── */
.dark .card, .dark .uip-card {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
}
.dark .card:hover, .dark .uip-card-interactive:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 12px 40px rgba(0, 0, 0, 0.20);
}
.dark .uip-card-header { background: #1A2035; border-bottom-color: rgba(255,255,255,0.06); }
.dark .uip-panel { background: #1A2035; }
.dark .uip-panel-header { background: #151B2E; }

/* ----------------------------------------------------------------
   Legal pages — subtle, refined typography for /privacy /terms /legal
   These are CSS-only refinements applied via a wrapper class so the
   page templates don't need text changes. Goal: lighter colors, more
   restrained heading weights, tighter prose, calmer borders.
   ---------------------------------------------------------------- */
.legal-prose {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.75;
    letter-spacing: 0.005em;
}
.legal-prose .text-display {
    font-size: 1.625rem;        /* 26px (down from 30px) */
    line-height: 2.125rem;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--text-primary);
}
.legal-prose .text-h1 {
    font-size: 1rem;            /* 16px section heading */
    line-height: 1.5rem;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.25rem;
}
.legal-prose .text-h2 {
    font-size: 0.875rem;        /* 14px subsection heading */
    line-height: 1.375rem;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--text-primary);
}
.legal-prose .text-eyebrow {
    color: var(--text-faint);
    font-weight: 500;
    letter-spacing: 0.10em;
}
.legal-prose p {
    color: var(--text-secondary);
}
.legal-prose strong { color: var(--text-primary); font-weight: 600; }
.legal-prose ul li { color: var(--text-secondary); }
.legal-prose ul li::marker { color: var(--text-faint); }
.legal-prose code {
    font-size: 0.8125rem;
    background-color: var(--line-soft);
    color: var(--text-primary);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
}
.legal-prose a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--line);
    transition: text-decoration-color 150ms ease;
}
.legal-prose a:hover { text-decoration-color: var(--text-secondary); }
.legal-prose .border-line { border-color: var(--line-soft) !important; }
.legal-prose .border-y    { border-color: var(--line-soft) !important; }
.legal-prose .divide-line > * + * { border-color: var(--line-soft) !important; }
.legal-prose hr,
.legal-prose .border-t { border-color: var(--line-soft) !important; }

/* ----------------------------------------------------------------
   Buttons — three variants × three sizes. Use the utility classes
   directly on <button> / <a> elements. Do not reinvent button styles
   per-page; if a new variant is needed, add it here.
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 0.5rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.btn svg { height: 0.875rem; width: 0.875rem; flex-shrink: 0; }

/* Sizes */
.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 0.4rem;
}
.btn-sm svg { height: 0.8125rem; width: 0.8125rem; }
.btn-lg {
    padding: 0.65rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: 0.625rem;
}
.btn-lg svg { height: 1rem; width: 1rem; }

/* PRIMARY — driven by brand-theme variables (--cta-bg / --cta-text /
   --cta-shadow). Obsidian Ink gradient. Use at most ONE per visible
   viewport. */
.btn-primary {
    background-image: var(--cta-bg);
    color: var(--cta-text);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 1px 2px var(--cta-shadow);
}
.btn-primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 12px var(--cta-shadow-hover);
}
.btn-primary:active { filter: brightness(0.94); }

/* PRIMARY-SOLID — flat accent (alternative to the gradient when gradient
   would compete with surrounding accents). */
.btn-primary-solid {
    background-color: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}
.btn-primary-solid:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* SECONDARY — outlined, neutral. Default action when no primary applies. */
.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--line);
}
.btn-secondary:hover {
    border-color: var(--text-secondary);
    background-color: var(--line-soft);
}

/* GHOST — fully transparent until hovered. Tertiary actions, list rows. */
.btn-ghost {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--text-primary);
    background-color: var(--line-soft);
}

/* DANGER — destructive actions only. */
.btn-danger {
    background-color: transparent;
    color: var(--danger);
    border-color: var(--line);
}
.btn-danger:hover {
    background-color: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

/* ICON — square, no text. Pair with aria-label. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.btn-icon:hover {
    background-color: var(--line-soft);
    color: var(--text-primary);
}
.btn-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-icon svg { height: 1rem; width: 1rem; }
.btn-icon-sm { height: 1.625rem; width: 1.625rem; }
.btn-icon-sm svg { height: 0.875rem; width: 0.875rem; }

/* Backwards-compatible alias for legacy templates */
.btn-outline {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--line);
}
.btn-outline:hover {
    border-color: var(--text-secondary);
    background-color: var(--line-soft);
}

/* ----------------------------------------------------------------
   Inputs
   ---------------------------------------------------------------- */
.input {
    background-color: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    outline: none;
    box-shadow: 0 1px 3px rgba(10, 17, 40, 0.04), 0 2px 8px rgba(10, 17, 40, 0.03);
    transition: box-shadow 0.2s ease;
}

.input::placeholder {
    color: var(--text-faint);
}

.input:focus {
    box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(10, 17, 40, 0.03);
}

/* ----------------------------------------------------------------
   Badge
   ---------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

/* ----------------------------------------------------------------
   Navigation links (org1-style centered tabs)
   ---------------------------------------------------------------- */
a.nav-link {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s ease, border-color 0.2s ease;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    text-decoration: none;
}

a.nav-link:hover {
    color: var(--text-primary);
}

a.nav-link.nav-link-active {
    color: var(--accent);
    border-color: var(--accent);
}

/* ----------------------------------------------------------------
   Hero section — "Digital Prestige" display headings
   ---------------------------------------------------------------- */
.hero-title {
    font-family: 'DM Serif Display', 'Georgia', serif;
    font-size: 2.75rem;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

@media (min-width: 640px) {
    .hero-title { font-size: 3.5rem; }
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.hero-bold {
    font-weight: 700;
}

/* ----------------------------------------------------------------
   Feature pills (org1-style tag row)
   ---------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    white-space: nowrap;
}

.pill-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: var(--accent);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Create card (org1-style prominent CTA card)
   ---------------------------------------------------------------- */
.create-card {
    background-color: var(--bg-card);
    border: none;
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(10, 17, 40, 0.04), 0 4px 12px rgba(10, 17, 40, 0.03);
}

.create-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Template / quick-action cards
   ---------------------------------------------------------------- */
.template-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--bg-card);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(10, 17, 40, 0.04), 0 4px 12px rgba(10, 17, 40, 0.03);
    transition: all 0.2s ease;
    cursor: pointer;
}

.template-card:hover {
    box-shadow: 0 4px 16px rgba(10, 17, 40, 0.08), 0 8px 32px rgba(10, 17, 40, 0.04);
    transform: translateY(-1px);
}

.template-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Domain card (org1-style grid card with icon badge)
   ---------------------------------------------------------------- */
.domain-card {
    background-color: var(--bg-card);
    border: none;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(10, 17, 40, 0.04), 0 4px 12px rgba(10, 17, 40, 0.03);
    transition: all 0.2s ease;
    display: block;
}

.domain-card:hover {
    box-shadow: 0 4px 16px rgba(10, 17, 40, 0.08), 0 8px 32px rgba(10, 17, 40, 0.04);
    transform: translateY(-2px);
}

.domain-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Chat message bubbles (theme-aware via CSS vars)
   ---------------------------------------------------------------- */
.msg-user {
    background-color: var(--color-msg-user-bg);
    border-color: var(--color-msg-user-border);
}

.msg-assistant {
    background-color: var(--color-msg-assistant-bg);
    border-color: var(--color-msg-assistant-border);
}

/* ----------------------------------------------------------------
   Scrollbar
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.notebook-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
}

.notebook-panel::-webkit-scrollbar {
    width: 6px;
}

.notebook-panel::-webkit-scrollbar-track {
    background: transparent;
}

.notebook-panel::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
    border-radius: 3px;
}

/* ----------------------------------------------------------------
   Focus ring
   ---------------------------------------------------------------- */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Inputs/selects/textareas handle their own focus styles via
   Tailwind focus:ring or border changes — suppress the global
   focus-visible outline so it doesn't double up. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}

/* Also suppress the WebKit search input cancel button styling */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* ----------------------------------------------------------------
   HTMX transitions
   ---------------------------------------------------------------- */
.htmx-swapping {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* ----------------------------------------------------------------
   Animations
   ---------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

/* ----------------------------------------------------------------
   Toast notifications
   ---------------------------------------------------------------- */
.toast-enter {
    animation: slideInRight 200ms ease-out;
}

.toast-exit {
    animation: slideOutRight 200ms ease-in;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* ----------------------------------------------------------------
   UIP Logo — Dots → Square → Diamond → Circle → Target → Bullseye

   10s narrative animation cycle:
   SCATTER  (0–15%)    four data points drift in space
   SQUARE   (15–30%)   converge to corners, edges draw
   DIAMOND  (30–46%)   rotate to diamond, edges draw
   CIRCLE   (46–56%)   diamond dissolves into circle
   TARGET   (56–72%)   concentric rings draw inward
   BULLSEYE (72–84%)   center dot, lock-on pulse
   DISSOLVE (84–92%)   rings fade, center splits
   RESET    (92–100%)  four dots scatter apart
   ---------------------------------------------------------------- */

/* Data dots — travel scatter → square → diamond → center → scatter */
.uip-dot {
    fill: #1E2D4A;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: uip-dot-path 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-dot-path {
    0%   { transform: translate(calc(var(--sx)*1px), calc(var(--sy)*1px)) scale(.5); opacity: .2; }
    10%  { transform: translate(calc(var(--sx)*.3*1px), calc(var(--sy)*.3*1px)) scale(.7); opacity: .5; }
    17%  { transform: translate(0,0) scale(1); opacity: .9; }
    28%  { transform: translate(0,0) scale(1); opacity: .9; }
    35%  { transform: translate(calc(var(--dx)*1px), calc(var(--dy)*1px)) scale(.9); opacity: .8; }
    44%  { transform: translate(calc(var(--dx)*1px), calc(var(--dy)*1px)) scale(.8); opacity: .7; }
    52%  { transform: translate(calc(var(--dx)*1px), calc(var(--dy)*1px)) scale(0); opacity: 0; }
    80%  { transform: translate(calc(var(--cx)*1px), calc(var(--cy)*1px)) scale(0); opacity: 0; }
    85%  { transform: translate(calc(var(--cx)*1px), calc(var(--cy)*1px)) scale(.7); opacity: .6; }
    93%  { transform: translate(calc(var(--sx)*1px), calc(var(--sy)*1px)) scale(.5); opacity: .3; }
    100% { transform: translate(calc(var(--sx)*1px), calc(var(--sy)*1px)) scale(.5); opacity: .2; }
}

/* Square edges: drawn at corners */
.uip-square {
    stroke: #1E2D4A;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: uip-square-draw 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-square-draw {
    0%, 17% { stroke-dashoffset: 1; opacity: 0; }
    24%     { stroke-dashoffset: 0; opacity: .7; }
    29%     { stroke-dashoffset: 0; opacity: .7; }
    36%     { stroke-dashoffset: 0; opacity: 0; }
    100%    { opacity: 0; }
}

/* Diamond edges: rotated square */
.uip-diamond {
    stroke: #1E2D4A;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: uip-diamond-draw 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-diamond-draw {
    0%, 30% { stroke-dashoffset: 1; opacity: 0; }
    38%     { stroke-dashoffset: 0; opacity: .7; }
    44%     { stroke-dashoffset: 0; opacity: .7; }
    50%     { stroke-dashoffset: 0; opacity: 0; }
    100%    { opacity: 0; }
}

/* Outer circle: emerges from diamond */
.uip-circle {
    stroke: #1E2D4A;
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: uip-circle-draw 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-circle-draw {
    0%, 46% { stroke-dashoffset: 1; opacity: 0; }
    56%     { stroke-dashoffset: 0; opacity: .6; }
    72%     { stroke-dashoffset: 0; opacity: .6; }
    82%     { stroke-dashoffset: 0; opacity: .3; }
    92%     { stroke-dashoffset: 0; opacity: 0; }
    100%    { opacity: 0; }
}

/* Middle target ring */
.uip-ring-mid {
    stroke: #1E2D4A;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: uip-ring-mid-draw 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-ring-mid-draw {
    0%, 54% { stroke-dashoffset: 1; opacity: 0; }
    64%     { stroke-dashoffset: 0; opacity: .5; }
    72%     { stroke-dashoffset: 0; opacity: .5; }
    82%     { stroke-dashoffset: 0; opacity: .3; }
    92%     { stroke-dashoffset: 0; opacity: 0; }
    100%    { opacity: 0; }
}

/* Inner target ring */
.uip-ring-inner {
    stroke: #1E2D4A;
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: uip-ring-inner-draw 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-ring-inner-draw {
    0%, 60% { stroke-dashoffset: 1; opacity: 0; }
    70%     { stroke-dashoffset: 0; opacity: .5; }
    76%     { stroke-dashoffset: 0; opacity: .5; }
    84%     { stroke-dashoffset: 0; opacity: .3; }
    92%     { stroke-dashoffset: 0; opacity: 0; }
    100%    { opacity: 0; }
}

/* Bullseye center dot */
.uip-bullseye {
    fill: #0A1128;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: uip-bullseye-emerge 10s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes uip-bullseye-emerge {
    0%, 68% { opacity: 0; transform: scale(.3); }
    74%     { opacity: 1; transform: scale(1.4); }
    78%     { opacity: .9; transform: scale(1); }
    84%     { opacity: .9; transform: scale(1); }
    92%     { opacity: 0; transform: scale(.3); }
    100%    { opacity: 0; }
}

/* Lock-on pulse: expanding rings at bullseye moment */
.uip-lock-pulse {
    fill: none;
    stroke: #1E2D4A;
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: uip-lock-pulse-ring 10s ease-out infinite;
}

@keyframes uip-lock-pulse-ring {
    0%, 72% { opacity: 0; transform: scale(1); stroke-width: 2; }
    74%     { opacity: .5; transform: scale(1); stroke-width: 2; }
    86%     { opacity: 0; transform: scale(6); stroke-width: .3; }
    100%    { opacity: 0; }
}

/* ----------------------------------------------------------------
   Impersonation banner
   ---------------------------------------------------------------- */
.impersonation-banner {
    height: 2.5rem;
    font-size: 0.8125rem;
}

/* Alpine x-cloak — hide elements until Alpine initialises */
[x-cloak] { display: none !important; }

/* Compact admin firm row hover */
.firm-row {
    transition: background-color 0.12s ease;
}
.firm-row:hover {
    background-color: var(--bg-secondary);
}

/* Login page background glow */
.login-glow {
    background: radial-gradient(
        ellipse 600px 400px at center 35%,
        rgba(10, 17, 40, 0.04) 0%,
        transparent 100%
    );
}

/* ----------------------------------------------------------------
   Line clamp utility
   ---------------------------------------------------------------- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}