/* HTMX swap transitions — fade out old content, fade in new content */
.htmx-swapping {
    opacity: 0;
    transition: opacity .1s ease-out;
}
.htmx-added {
    opacity: 0;
}
.htmx-settling {
    opacity: 1;
    transition: opacity .15s ease-in;
}

/* HTMX in-flight indicator — hidden by default, shown while a request
   pointed at this element via hx-indicator is pending. */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: flex;
}

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

/* ============================================================
   Unified UI design system (light-only).

   Adopts the reviewed "unified" structure — four-tier status,
   neutral "pending", arm identity chips, worklist, KPI strip,
   lifecycle timeline — on top of the existing CU brand palette
   (navy / sky / teal / gold). Layout stays Tailwind-native; these
   classes carry only the repeated, bespoke component styling.
   ============================================================ */
:root {
    /* CU brand (mirrors tailwind.config in main.html) */
    --brand-navy: #1f4e7a;
    --brand-sky:  #2e8fd1;
    --brand-teal: #5fb8b3;
    --brand-gold: #cfb87c;

    /* Neutrals */
    --u-bg:        #f6f7f9;
    --u-surface:   #ffffff;
    --u-surface-2: #f1f3f6;
    --u-border:    #e3e7ec;
    --u-ink:       #1a2531;
    --u-muted:     #64748b;
    --u-faint:     #94a3b3;

    /* Four-tier semantic status */
    --u-ok:    #15803d;  --u-ok-wash:   #dcfce7;
    --u-warn:  #a16207;  --u-warn-wash: #fef3c7;
    --u-err:   #b91c1c;  --u-err-wash:  #fee2e2;
    /* "pending" is intentionally neutral, never a colored alert */
    --u-pend:  #64748b;  --u-pend-wash: #eef1f5;
}

/* ---- arm identity chips (six study arms) ---- */
.u-arm {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .125rem .5rem; border-radius: 9999px;
    font-size: .6875rem; font-weight: 600; line-height: 1.4;
    white-space: nowrap; border: 1px solid transparent;
}
.u-arm .u-arm__dot { width: .5rem; height: .5rem; border-radius: 2px; flex: none; }
.u-arm--baseline    { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.u-arm--baseline    .u-arm__dot { background: #64748b; }
.u-arm--intervention{ background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.u-arm--intervention .u-arm__dot { background: #0284c7; }
.u-arm--control     { background: #fef3c7; color: #854d0e; border-color: #fde68a; }
.u-arm--control     .u-arm__dot { background: #d97706; }
.u-arm--watchwear   { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.u-arm--watchwear   .u-arm__dot { background: #4f46e5; }
.u-arm--post        { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.u-arm--post        .u-arm__dot { background: #7c3aed; }
.u-arm--followup    { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.u-arm--followup    .u-arm__dot { background: #059669; }

/* ---- four-tier status pill + bare status ---- */
.u-status {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.u-status__pip { width: .5rem; height: .5rem; border-radius: 9999px; flex: none; }
.u-status--ok      { color: var(--u-ok); }   .u-status--ok      .u-status__pip { background: var(--u-ok); }
.u-status--warn    { color: var(--u-warn); } .u-status--warn    .u-status__pip { background: var(--u-warn); }
.u-status--err     { color: var(--u-err); }  .u-status--err     .u-status__pip { background: var(--u-err); }
.u-status--pending { color: var(--u-pend); font-weight: 500; }
.u-status--pending .u-status__pip { background: transparent; border: 1.5px solid var(--u-faint); box-sizing: border-box; }

.u-pill {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .125rem .5rem; border-radius: 9999px;
    font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.u-pill--ok      { background: var(--u-ok-wash);   color: var(--u-ok); }
.u-pill--warn    { background: var(--u-warn-wash); color: var(--u-warn); }
.u-pill--err     { background: var(--u-err-wash);  color: var(--u-err); }
.u-pill--pending { background: var(--u-pend-wash); color: var(--u-pend); }

/* ---- KPI strip (Home) ---- */
.u-kpi { background: var(--u-surface); padding: .875rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.u-kpi__lab { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--u-muted); }
.u-kpi__val { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.u-kpi__val--lead { font-size: 1.875rem; }
.u-kpi__val--hot  { color: var(--u-err); }
.u-kpi__sub { font-size: .6875rem; color: var(--u-faint); }

/* ---- Worklist rows (Home "Today") ---- */
.u-wl-row {
    display: flex; align-items: center; gap: .875rem;
    background: var(--u-surface); border: 1px solid var(--u-border);
    border-radius: .5rem; padding: .6875rem .875rem;
    transition: background .12s, border-color .12s;
}
.u-wl-row:hover { background: var(--u-surface-2); }
.u-wl-row--err { border-left: 3px solid var(--u-err); }
.u-wl-row--warn { border-left: 3px solid var(--u-warn); }
.u-wl-row__sid { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; font-size: .8125rem; }
.u-wl-row__reason { font-size: .8125rem; color: var(--u-muted); }
.u-wl-row__age { font-size: .6875rem; color: var(--u-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Lifecycle timeline (Detail) ---- */
.u-tl { display: grid; grid-template-columns: 22px 1fr; column-gap: .75rem; }
.u-tl__rail { display: flex; flex-direction: column; align-items: center; }
.u-tl__dot { width: 13px; height: 13px; border-radius: 9999px; border: 2px solid var(--u-border); background: var(--u-surface); margin-top: 3px; flex: none; z-index: 1; }
.u-tl__line { width: 2px; flex: 1; background: var(--u-border); min-height: 22px; }
.u-tl__item:last-child .u-tl__line { display: none; }
.u-tl__item--done .u-tl__dot { background: var(--brand-teal); border-color: var(--brand-teal); }
.u-tl__item--now  .u-tl__dot { background: var(--brand-sky); border-color: var(--brand-sky); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(46,143,209,.35); }
.u-tl__item--future .u-tl__dot { background: var(--u-surface-2); }
.u-tl__body { padding-bottom: 1rem; }
.u-tl__item:last-child .u-tl__body { padding-bottom: 0; }

/* tabular numerals helper */
.u-tnum { font-variant-numeric: tabular-nums; }