/* Audit-log standalone page (§11.4 / audit-log.jsx).
 *
 * A form-builder surface: the page chrome (shell, top bar, filter rail) is built
 * on the --cx-* token layer (form-builder-tokens.css), which aliases the Threshold
 * --th-* ramp, so it sits in the same cool-paper visual language as the rest of
 * the form-builder.
 *
 * The event table, search, meta, pager, and non-data states now come from the
 * ThresholdGrid tabular canon (th-grid.css, --th-* native). This file keeps only:
 *   - the page chrome (full-surface shell, top bar, breadcrumb, export, the
 *     page-level state surface for no-appdef/forbidden, the 240px filter rail)
 *   - the KindPill (audit event-kind tints)
 *   - the cell-content + detail-content audit affordances that layer INTO the
 *     canon cells (Who / What / Where / the expanded detail panel)
 *
 * Most dark handling cascades through the --cx-* / --th-* substrate; there are no
 * audit-specific dark pins.
 */

.fb-audit-shell {
    position: fixed;
    inset: 0;
    z-index: 1080; /* above MainLayout chrome + builder drawers */
    display: flex;
    flex-direction: column;
    background: var(--cx-canvas);
    color: var(--cx-ink);
    font-family: var(--cx-font);
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.fb-audit-topbar {
    flex: 0 0 auto;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 12px;
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-border);
}

.fb-audit-topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font-size: 12.5px;
    color: var(--cx-ink-muted);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-audit-topbar__back:hover {
    background: var(--cx-surface-sunken);
}

.fb-audit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fb-audit-breadcrumb__muted {
    font-size: 12.5px;
    color: var(--cx-ink-muted);
}

.fb-audit-breadcrumb__sep {
    color: var(--cx-ink-subtle);
}

.fb-audit-breadcrumb__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--cx-ink-strong);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-audit-breadcrumb__current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-audit-topbar__spacer {
    flex: 1;
}

.fb-audit-export {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--cx-ink);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-audit-export:hover:not(:disabled) {
    background: var(--cx-surface-sunken);
}

.fb-audit-export:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Body + full-surface state messages (no-appdef / forbidden) ──────────── */
.fb-audit-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.fb-audit-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
}

.fb-audit-state__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-audit-state__body {
    font-size: 13px;
    color: var(--cx-ink-muted);
    max-width: 360px;
}

/* ── Filter rail (240px) ─────────────────────────────────────────────────── */
.fb-audit-rail {
    flex: 0 0 240px;
    width: 240px;
    border-right: 1px solid var(--cx-border);
    background: var(--cx-surface);
    overflow-y: auto;
    padding: 14px 14px 24px;
    display: flex;
    flex-direction: column;
}

.fb-audit-filter-block {
    margin-bottom: 16px;
}

.fb-audit-filter-block__title {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
}

.fb-audit-filter-block__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fb-audit-filter-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 3px 4px;
    font-size: 12px;
    color: var(--cx-ink);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--cx-radius-xs);
    cursor: pointer;
}

.fb-audit-filter-opt:hover {
    background: var(--cx-surface-sunken);
}

.fb-audit-filter-opt__box {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fb-audit-filter-opt__box.is-checked {
    background: var(--cx-action);
    border-color: var(--cx-action);
}

.fb-audit-filter-opt__tick {
    color: var(--cx-ink-on-action);
    font-size: 9px;
    line-height: 1;
}

.fb-audit-filter-opt__tint {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.fb-audit-filter-opt__radio {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fb-audit-filter-opt__radio.is-checked {
    border-color: var(--cx-action);
}

.fb-audit-filter-opt__radio.is-checked::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cx-action);
}

.fb-audit-filter-opt__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-audit-rail__reset {
    margin-top: 14px;
    align-self: flex-start;
    padding: 5px 10px;
    font-size: 11.5px;
    color: var(--cx-ink-muted);
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    cursor: pointer;
}

.fb-audit-rail__reset:hover {
    background: var(--cx-surface-sunken);
}

/* ── Main panel (the centered column hosting the ThresholdGrid surface) ───── */
.fb-audit-main {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.fb-audit-main__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 32px 60px;
}

/* ── Kind pill (audit event-kind tints, layered into the What cell) ──────── */
.fb-audit-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px 1px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--cx-radius-pill);
}

.fb-audit-pill__glyph {
    font-family: var(--cx-font-mono);
    font-weight: 700;
}

.fb-audit-pill--publish {
    background: var(--cx-status-published-bg);
    color: var(--cx-status-published);
    border-color: var(--cx-status-published-border);
}

.fb-audit-pill--draft {
    background: var(--cx-status-draft-bg);
    color: var(--cx-status-draft);
    border-color: var(--cx-status-draft-border);
}

.fb-audit-pill--migration {
    background: var(--cx-status-superseded-bg);
    color: var(--cx-status-superseded);
    border-color: var(--cx-status-superseded-border);
}

.fb-audit-pill--choicelist {
    background: var(--cx-action-soft);
    color: var(--cx-action);
    border-color: var(--cx-action-border);
}

.fb-audit-pill--other {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-muted);
    border-color: var(--cx-border);
}

/* Change-kind pills (version-update "What" column) — same canon tints as the
   expanded-detail diff badges: field green, section blue, layout amber, form /
   term neutral. Rule (purple) lands with the rules pass. */
.fb-audit-pill--field {
    background: var(--cx-success-soft);
    color: var(--cx-success);
    border-color: var(--cx-success-border);
}

.fb-audit-pill--section {
    /* --th-info aliases the theme-aware --th-advant blue, so it brightens in dark
       mode like the sibling pills. (The literal --cx-info is light-only.) */
    background: var(--th-info-soft);
    color: var(--th-info);
    border-color: oklch(from var(--th-info) l c h / 0.4);
}

.fb-audit-pill--layout {
    background: var(--cx-warning-soft);
    color: var(--cx-warning);
    border-color: var(--cx-warning-border);
}

.fb-audit-pill--form,
.fb-audit-pill--term {
    background: var(--cx-surface-sunken);
    color: var(--cx-ink-muted);
    border-color: var(--cx-border);
}

/* Rule pill (purple) — rule events surface AppDef-wide via the rule-stream rollup.
   Theme-aware --th-rule flips brighter in dark; border derived inline from the hue. */
.fb-audit-pill--rule {
    background: var(--th-rule-soft);
    color: var(--th-rule);
    border-color: oklch(from var(--th-rule) l c h / 0.4);
}

/* ── Cell content (audit domain affordances layered into the canon cells) ── */
/* The When cell uses the canon's .is-key (mono). Who / What / Where carry these
 * audit-owned classes inside the canon <td>. */
.audit-who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--cx-ink);
}

.audit-who__avatar {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-muted);
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audit-who__actor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-what {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    color: var(--cx-ink-strong);
}

.audit-what__summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-where {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 11px;
    font-family: var(--cx-font-mono);
    color: var(--cx-ink-muted);
}

.audit-where__version {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cx-ink-key);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    padding: 0 5px;
    border-radius: var(--cx-radius-xs);
}

.audit-where__dash {
    color: var(--cx-ink-faint);
}

/* Entity name in Where for non-version events (e.g. the rule a rule event pertains
   to). Plain name, not the mono version chip. */
.audit-where__entity {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cx-ink);
}

/* ── Expanded detail (rendered inside the canon .th-grid-detail wrapper) ──── */
.audit-detail__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0 0 8px;
    font-size: 12px;
}

.audit-detail__grid dt {
    color: var(--cx-ink-muted);
    font-weight: 600;
}

.audit-detail__grid dd {
    margin: 0;
    color: var(--cx-ink-strong);
}

.audit-detail__note {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--cx-ink-muted);
}

.audit-detail__open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cx-action);
    background: none;
    border: none;
    cursor: pointer;
}

/* ── Typed-diff change lines (ADR-0037) in the expanded detail ───────────────
   One row per diff leaf: a mono kind tag (Field / Section / Layout / Form /
   Term) plus the change text. Colors come from theme-aware tokens (the field
   and layout --cx-* tints alias --th-*; section uses --th-info directly), so
   they resolve in light + dark. */
.audit-diff {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.audit-diff__line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--cx-ink-strong);
}

.audit-diff__kind {
    flex: 0 0 auto;
    min-width: 54px;
    text-align: center;
    font-family: var(--cx-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 1px 4px;
    /* neutral fallback for any unmapped kind; per-kind tints below */
    color: var(--cx-ink-muted);
    background: var(--cx-surface-sunken);
}

/* Per-kind tints, matching the design canon (field = green, section = blue,
   rule = purple — rule lands with the rules pass). Field/layout use --cx-* trios
   that alias --th-*; section uses --th-info directly (the literal --cx-info is
   light-only and would not brighten in dark). All resolve in light + dark with
   no new brand tokens and no impact on the locked oxblood/copper inventory.
   Form + Term keep the neutral base. */
.audit-diff__kind--field {
    background: var(--cx-success-soft);
    color: var(--cx-success);
    border-color: var(--cx-success-border);
}

.audit-diff__kind--section {
    /* --th-info aliases the theme-aware --th-advant blue (brightens in dark);
       --cx-info-border isn't defined, so derive the soft border from the hue. */
    background: var(--th-info-soft);
    color: var(--th-info);
    border-color: oklch(from var(--th-info) l c h / 0.4);
}

.audit-diff__kind--layout {
    background: var(--cx-warning-soft);
    color: var(--cx-warning);
    border-color: var(--cx-warning-border);
}

.audit-diff__text {
    min-width: 0;
}

/* Before → after strikethrough chip (canon diff-drawer red → green). Theme-aware:
   --cx-error/--cx-success alias --th-risk / --th-* and resolve in light + dark. */
.audit-diff__delta {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    font-family: var(--cx-font-mono);
    font-size: 11px;
}

.audit-diff__before {
    text-decoration: line-through;
    color: var(--cx-error);
    background: var(--cx-error-soft);
    padding: 0 4px;
    border-radius: var(--cx-radius-xs);
}

.audit-diff__arrow {
    color: var(--cx-ink-faint);
}

.audit-diff__after {
    text-decoration: none;
    color: var(--cx-success);
    background: var(--cx-success-soft);
    padding: 0 4px;
    border-radius: var(--cx-radius-xs);
}