/* ==========================================================================
   UI-KIT · ANIMATED LIST  (animated-list)
   Zero-dependency. Pairs with animated-list.js — see animated-list.md
   --------------------------------------------------------------------------
   Two layers of styling live here:

     1. The list mechanics (.al-root / .al-list / .al-item). Structural only —
        no colour, no chrome. Required.
     2. An optional row kit (.al-row and friends) that matches the OCC card
        language, so a page can get a presentable feed without writing any
        row CSS of its own. Ignore it and render whatever you like instead.

   Everything is namespaced under .al-* and every colour reads from an --al-*
   variable that falls back to the host page's design tokens, so this drops
   into the OCC desk, TMS, TDMS and SMMS without a single override.
   ========================================================================== */

.al-root {
    /* ---- Surface -------------------------------------------------------- */
    --al-surface: var(--bg-surface, #ffffff);
    --al-surface-2: var(--bg-surface-subtle, #f1f5f9);
    --al-hover: rgba(15, 23, 42, 0.04);
    --al-border: var(--border-color, #e2e8f0);
    --al-border-soft: rgba(15, 23, 42, 0.07);

    /* ---- Ink ------------------------------------------------------------ */
    --al-text: var(--text-primary, #0f172a);
    --al-text-dim: var(--text-muted, #64748b);
    --al-text-faint: var(--text-subtle, #94a3b8);

    /* ---- Accent (per-instance overridable) ------------------------------ */
    --al-accent: var(--color-primary, #0f2b5c);
    --al-accent-ink: var(--color-blue, #2563eb);

    /* ---- Severity, mirrored from style.css tokens ----------------------- */
    --al-critical: var(--color-crimson, #dc2626);
    --al-warn: var(--color-amber, #d97706);
    --al-ok: var(--color-emerald, #059669);
    --al-info: var(--color-blue, #2563eb);

    /* ---- Departmental accents ------------------------------------------- */
    --al-dept-track: var(--dept-track-text, #1e40af);
    --al-dept-ohe: var(--dept-ohe-text, #b45309);
    --al-dept-sig: var(--dept-sig-text, #047857);
    --al-dept-bundle: var(--dept-bundle-text, #6366f1);

    /* ---- Geometry ------------------------------------------------------- */
    --al-gap: 12px;
    --al-radius: var(--radius-lg, 12px);
    --al-row-pad: 11px 13px;

    --al-shadow: var(--shadow-card, 0 1px 4px rgba(15, 23, 42, 0.06));
    --al-shadow-hover: var(--shadow-elevated, 0 4px 12px rgba(15, 23, 42, 0.08));

    --al-font: var(--font-main, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --al-font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

    position: relative;
    font-family: var(--al-font);
    color: var(--al-text);
}

/* ==========================================================================
   1 · MECHANICS
   ========================================================================== */

/* `position: relative` is load-bearing: exiting rows are absolutely
   positioned against this box so they stop occupying a slot the moment they
   start fading, and the rows below immediately begin closing the gap. */
.al-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--al-gap);
}

.al-root[data-newest='bottom'] .al-list {
    justify-content: flex-end;
}

.al-item {
    /* The FLIP layer. Only ever carries a translate — never opacity, never
       scale, so a re-sort can run underneath an in-flight entrance. */
    will-change: transform;
}

.al-item.is-exiting {
    position: absolute;
    z-index: 0;
    margin: 0;
    pointer-events: none;
}

.al-item-inner {
    /* The variant layer: opacity + enter/exit transform. */
    will-change: transform, opacity;
}

.al-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--al-text-faint);
    border: 1px dashed var(--al-border);
    border-radius: var(--al-radius);
    background: var(--al-surface-2);
}

/* Held-updates pill, shown by pauseOnHover while the pointer is inside. */
.al-resume {
    position: absolute;
    left: 50%;
    top: -11px;
    transform: translateX(-50%);
    z-index: 5;
    padding: 4px 11px;
    border: 1px solid var(--al-border);
    border-radius: 999px;
    background: var(--al-accent);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--al-shadow-hover);
}

.al-resume:hover {
    filter: brightness(1.12);
}

/* The JS already honours prefers-reduced-motion by skipping the animations
   outright; this is the belt-and-braces for anything CSS-driven above. */
@media (prefers-reduced-motion: reduce) {
    .al-item,
    .al-item-inner {
        will-change: auto;
    }
}

/* ==========================================================================
   2 · ROW KIT  (optional — the OCC card language, ready-made)
   ========================================================================== */

.al-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--al-row-pad);
    background: var(--al-surface);
    border: 1px solid var(--al-border);
    border-left: 3px solid var(--al-row-accent, var(--al-border-soft));
    border-radius: var(--al-radius);
    box-shadow: var(--al-shadow);
    transition: box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
                background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.al-row:hover {
    background: var(--al-surface);
    border-color: var(--al-border);
    box-shadow: var(--al-shadow-hover);
}

.al-row.is-clickable {
    cursor: pointer;
}

/* ---- Severity accents, applied to the left edge ------------------------- */
.al-row.al-sev-critical { --al-row-accent: var(--al-critical); }
.al-row.al-sev-warning  { --al-row-accent: var(--al-warn); }
.al-row.al-sev-success  { --al-row-accent: var(--al-ok); }
.al-row.al-sev-info     { --al-row-accent: var(--al-info); }
.al-row.al-sev-muted    { --al-row-accent: var(--al-border); }

/* ---- Departmental accents ----------------------------------------------- */
.al-row.al-dept-track   { --al-row-accent: var(--al-dept-track); }
.al-row.al-dept-ohe     { --al-row-accent: var(--al-dept-ohe); }
.al-row.al-dept-sig     { --al-row-accent: var(--al-dept-sig); }
.al-row.al-dept-bundle  { --al-row-accent: var(--al-dept-bundle); }

/* ---- Head line ---------------------------------------------------------- */
.al-row-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.al-row-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--al-row-accent, var(--al-text-faint));
}

.al-row-dot.is-live {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--al-row-accent, #2563eb) 55%, transparent);
    animation: al-pulse 1.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes al-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--al-row-accent, #2563eb) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .al-row-dot.is-live { animation: none; }
}

.al-row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--al-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-row-time {
    flex: 0 0 auto;
    font-family: var(--al-font-mono);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--al-text-faint);
}

/* ---- Body --------------------------------------------------------------- */
.al-row-body {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--al-text-dim);
}

.al-row-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Meta strip --------------------------------------------------------- */
.al-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.al-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1.5px 7px;
    border: 1px solid var(--al-border);
    border-radius: 999px;
    background: var(--al-surface-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--al-text-dim);
    white-space: nowrap;
}

.al-chip.is-critical {
    color: var(--al-critical);
    background: var(--dept-crimson-bg, #fef2f2);
    border-color: color-mix(in srgb, var(--al-critical) 28%, transparent);
}

.al-chip.is-warning {
    color: var(--al-warn);
    background: var(--dept-ohe-bg, #fffbeb);
    border-color: var(--dept-ohe-border, #fde68a);
}

.al-chip.is-success {
    color: var(--al-ok);
    background: var(--dept-sig-bg, #ecfdf5);
    border-color: var(--dept-sig-border, #a7f3d0);
}

.al-chip.is-info {
    color: var(--al-info);
    background: var(--dept-track-bg, #eff6ff);
    border-color: var(--dept-track-border, #bfdbfe);
}

.al-chip.is-ref {
    font-family: var(--al-font-mono);
    letter-spacing: 0;
    text-transform: none;
}

/* ---- Compact density ---------------------------------------------------- */
.al-root.al-compact {
    --al-gap: 7px;
    --al-row-pad: 7px 10px;
    --al-radius: var(--radius-md, 8px);
}

.al-root.al-compact .al-row-title { font-size: 11.5px; }
.al-root.al-compact .al-row-body  { font-size: 11px; }

/* ---- Bare density: rules instead of cards, for dense side panels -------- */
.al-root.al-bare {
    --al-gap: 0px;
}

.al-root.al-bare .al-row {
    border: 0;
    border-bottom: 1px solid var(--al-border-soft);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 10px;
    position: relative;
}

.al-root.al-bare .al-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--al-row-accent, transparent);
}

.al-root.al-bare .al-row:hover {
    background: var(--al-hover);
}