/*
  Shared diff-rendering spine (diff cycle, sub-cycle 0).

  The row family + primitives for the Diff drawer, the Publish drawer's diff section, and the
  History drawer. Styling is lifted from the canon design_handoff_form_builder/diff-drawer.jsx
  and publish-drawer.jsx (they agree on the row components) over the --cx-* token surface defined
  in form-builder-tokens.css (light + dark). Class names follow the fb-* convention; the
  change-kind colour mapping lives on [data-kind] / [data-tone] attributes so the C# DiffKindPalette
  stays the single source of glyph + slug.

  A single feature-level stylesheet (rather than per-component scoped CSS) because the family is
  tightly interdependent — the diff code chips, markers, and rows are shared across many
  components, and component-scoped CSS does not cross component boundaries.
*/

/* ── Change marker ───────────────────────────────────────────────────────── */
.fb-diff-marker {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    font-family: var(--cx-font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    border-radius: var(--cx-radius-xs);
    background: color-mix(in oklab, currentColor 8%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* data-kind → accent / soft / border tokens. The single source the marker ink (and its 8%
   currentColor wash), the bordered History chip (soft fill + border), and the group dot all read.
   Add a change kind here once instead of in three parallel per-kind blocks. */
.fb-diff-marker[data-kind="added"],      .fb-diff-group__dot[data-kind="added"]      { --fb-k-accent: var(--cx-success);           --fb-k-soft: var(--cx-success-soft);           --fb-k-border: var(--cx-success-border); }
.fb-diff-marker[data-kind="removed"],    .fb-diff-group__dot[data-kind="removed"]    { --fb-k-accent: var(--cx-error);             --fb-k-soft: var(--cx-error-soft);             --fb-k-border: var(--cx-error-border); }
.fb-diff-marker[data-kind="changed"],    .fb-diff-group__dot[data-kind="changed"]    { --fb-k-accent: var(--cx-warning);           --fb-k-soft: var(--cx-warning-soft);           --fb-k-border: var(--cx-warning-border); }
.fb-diff-marker[data-kind="renamed"],    .fb-diff-group__dot[data-kind="renamed"]    { --fb-k-accent: var(--cx-warning);           --fb-k-soft: var(--cx-warning-soft);           --fb-k-border: var(--cx-warning-border); }
.fb-diff-marker[data-kind="moved"],      .fb-diff-group__dot[data-kind="moved"]      { --fb-k-accent: var(--cx-action);            --fb-k-soft: var(--cx-action-soft);            --fb-k-border: var(--cx-action-border); }
.fb-diff-marker[data-kind="rule"],       .fb-diff-group__dot[data-kind="rule"]       { --fb-k-accent: var(--cx-rule);              --fb-k-soft: var(--cx-rule-soft);              --fb-k-border: var(--cx-rule-border); }
.fb-diff-marker[data-kind="published"],  .fb-diff-group__dot[data-kind="published"]  { --fb-k-accent: var(--cx-status-published);  --fb-k-soft: var(--cx-status-published-bg);    --fb-k-border: var(--cx-status-published-border); }
.fb-diff-marker[data-kind="draft"],      .fb-diff-group__dot[data-kind="draft"]      { --fb-k-accent: var(--cx-status-draft);      --fb-k-soft: var(--cx-status-draft-bg);        --fb-k-border: var(--cx-status-draft-border); }
.fb-diff-marker[data-kind="superseded"], .fb-diff-group__dot[data-kind="superseded"] { --fb-k-accent: var(--cx-status-superseded);  --fb-k-soft: var(--cx-status-superseded-bg);   --fb-k-border: var(--cx-status-superseded-border); }
.fb-diff-marker[data-kind="seed"],       .fb-diff-group__dot[data-kind="seed"]       { --fb-k-accent: var(--cx-ink-muted);         --fb-k-soft: var(--cx-surface-sunken);         --fb-k-border: var(--cx-border); }     /* migration/backfill — neutral */
.fb-diff-marker[data-kind="layout"],    .fb-diff-group__dot[data-kind="layout"]    { --fb-k-accent: var(--cx-ink-subtle);        --fb-k-soft: var(--cx-surface-sunken);         --fb-k-border: var(--cx-border); }         /* layout/structural — neutral */

/* The marker's ink — its 8% currentColor wash (above) tints from the same accent. */
.fb-diff-marker { color: var(--fb-k-accent); }

/* History drawer EventRow chip: soft fill + tinted border (canon history-drawer.jsx kindTint:
   tint.soft / tint.border / tint.ink) instead of the diff row's borderless currentColor wash.
   Default-off (no data-variant) keeps the diff-row markers on the wash. */
.fb-diff-marker[data-variant="bordered"] { border: 1px solid var(--fb-k-border); background: var(--fb-k-soft); }

/* ── Row shell ───────────────────────────────────────────────────────────── */
.fb-diff-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    position: relative;
}

.fb-diff-row[data-dense="1"] {
    padding: 5px 9px;
}

.fb-diff-row:hover {
    background: var(--cx-surface-raised);
}

.fb-diff-row[data-tone="success"] { border-color: var(--cx-success-border); }
.fb-diff-row[data-tone="error"]   { border-color: var(--cx-error-border); }
.fb-diff-row[data-tone="warning"] { border-color: var(--cx-warning-border); }
.fb-diff-row[data-tone="action"]  { border-color: var(--cx-action-border); }
.fb-diff-row[data-tone="rule"]    { border-color: var(--cx-rule-border); }
.fb-diff-row[data-tone="default"] { border-color: var(--cx-border); }

.fb-diff-row__main {
    flex: 1;
    min-width: 0;
}

/* ── Title line + chips ──────────────────────────────────────────────────── */
.fb-diff-titleline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.fb-diff-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-diff-title--struck {
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--cx-ink-strong) 40%, transparent);
}

.fb-diff-type-pill {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cx-ink-muted);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    padding: 0 6px;
    border-radius: var(--cx-radius-pill);
}

.fb-diff-required-pill {
    color: var(--cx-error);
    background: var(--cx-error-soft);
    border: 1px solid var(--cx-error-border);
    border-radius: var(--cx-radius-pill);
    padding: 0 7px;
    font-size: 10px;
    font-weight: 700;
}

.fb-diff-group-ref {
    font-size: 11px;
    color: var(--cx-ink-subtle);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ── Jump affordance (hover-revealed) ────────────────────────────────────── */
.fb-diff-jump {
    opacity: 0;
    transition: opacity 100ms;
    align-self: center;
    font-size: 11px;
    color: var(--cx-ink-muted);
    padding: 2px 7px;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-sm);
    background: var(--cx-surface);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.fb-diff-row:hover .fb-diff-jump,
.fb-diff-jump:focus-visible {
    opacity: 1;
}

/* ── Code chips: strikethrough-red → green (design-system §3) ────────────── */
.fb-diff-code {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--cx-font-mono);
    font-size: 11px;
    border-radius: var(--cx-radius-xs);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-diff-code[data-variant="old"] {
    background: var(--cx-error-soft);
    border: 1px solid var(--cx-error-border);
    color: var(--cx-error);
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--cx-ink-strong) 25%, transparent);
}

.fb-diff-code[data-variant="new"] {
    background: var(--cx-success-soft);
    border: 1px solid var(--cx-success-border);
    color: var(--cx-success);
}

/* ── Change rows (inside a changed-field row) ────────────────────────────── */
.fb-diff-changes {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fb-diff-change {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fb-diff-change__label {
    font-size: 11px;
    color: var(--cx-ink);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-weight: 500;
}

.fb-diff-change__label > span {
    font-weight: 500;
}

.fb-diff-change__label :is(svg) {
    color: var(--cx-warning);
}

.fb-diff-change__transition,
.fb-diff-transition {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.fb-diff-change__transition[data-layout="stacked"],
.fb-diff-transition[data-layout="stacked"] {
    flex-direction: column;
    align-items: flex-start;
}

.fb-diff-change__arrow {
    color: var(--cx-ink-faint);
    display: inline-flex;
}

.fb-diff-change__warnbox {
    font-size: 11px;
    color: var(--cx-warning);
    background: var(--cx-warning-soft);
    border: 1px solid var(--cx-warning-border);
    border-radius: var(--cx-radius-xs);
    padding: 4px 7px;
    margin-top: 2px;
}

/* ── Rename / move / responses / rule-refs notes ─────────────────────────── */
.fb-diff-transition {
    margin-top: 4px;
}

.fb-diff-move {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.fb-diff-move-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--cx-radius-pill);
    font-size: 11px;
}

.fb-diff-move-loc[data-tone="from"] {
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-muted);
}

.fb-diff-move-loc[data-tone="to"] {
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    color: var(--cx-action);
}

.fb-diff-move-loc__group {
    opacity: 0.7;
}

.fb-diff-responses {
    margin-top: 4px;
    font-size: 11px;
    color: var(--cx-ink-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fb-diff-responses strong {
    color: var(--cx-ink-strong);
    font-weight: 600;
    font-family: var(--cx-font-mono);
}

.fb-diff-rulerefs {
    margin-top: 4px;
    font-size: 11px;
    color: var(--cx-rule);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fb-diff-rulerefs strong {
    font-family: var(--cx-font-mono);
}

/* ── Rule rows ───────────────────────────────────────────────────────────── */
.fb-diff-rule-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-diff-rule-meta {
    font-size: 10.5px;
    color: var(--cx-ink-muted);
    margin-top: 1px;
}

.fb-diff-rule-kind {
    text-transform: capitalize;
}

.fb-diff-rule-expr {
    display: block;
    margin-top: 4px;
    font-family: var(--cx-font-mono);
    font-size: 11px;
    color: var(--cx-ink-strong);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xs);
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Collapsible group + section bin ─────────────────────────────────────── */
.fb-diff-group {
    margin-top: 12px;
}

.fb-diff-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 8px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
}

.fb-diff-group__header[data-open="1"] {
    border-bottom-color: var(--cx-border-faint);
}

.fb-diff-group__chev {
    color: var(--cx-ink-subtle);
    display: inline-flex;
    transition: transform 100ms;
}

.fb-diff-group__chev[data-open="0"] {
    transform: rotate(-90deg);
}

.fb-diff-group__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Accent dot reads the shared per-kind accent (the data-kind rules above set it). */
.fb-diff-group__dot { background: var(--fb-k-accent); }

.fb-diff-group__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--cx-ink-strong);
}

.fb-diff-group__count {
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--cx-font-mono);
    color: var(--cx-ink-subtle);
}

.fb-diff-group__body {
    padding: 8px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fb-diff-sectionbin__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cx-ink-subtle);
    padding: 0 0 4px;
}

.fb-diff-sectionbin__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Filter chip per-kind active colors (overrides universal action-blue default) ── */

.fb-diff-chip.is-active[data-kind="added"]             { background: var(--cx-success-soft);    border-color: var(--cx-success-border);  color: var(--cx-success); }
.fb-diff-chip.is-active[data-kind="removed"]           { background: var(--cx-error-soft);      border-color: var(--cx-error-border);    color: var(--cx-error); }
.fb-diff-chip.is-active[data-kind="changed"],
.fb-diff-chip.is-active[data-kind="renamed"]           { background: var(--cx-warning-soft);    border-color: var(--cx-warning-border);  color: var(--cx-warning); }
.fb-diff-chip.is-active[data-kind="rules"]             { background: var(--cx-rule-soft);       border-color: var(--cx-rule-border);     color: var(--cx-rule); }
.fb-diff-chip.is-active[data-kind="layout"]            { background: var(--cx-surface-sunken);  border-color: var(--cx-border-strong);   color: var(--cx-ink-muted); }
.fb-diff-chip.is-active[data-kind="groups"]            { background: var(--cx-warning-soft);    border-color: var(--cx-warning-border);  color: var(--cx-warning); }

/* ── DiffGroup collapsed-by-default hint ─────────────────────────────────── */

.fb-diff-group__collapsed-hint {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cx-ink-faint);
    margin-left: 2px;
}

/* ── Layout badge + Group badge (§7.23) ──────────────────────────────────── */

.fb-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--cx-ink-subtle);
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    padding: 0 6px;
    border-radius: var(--cx-radius-pill);
    flex-shrink: 0;
}

/* ── Position chips (row-ordinal from / to) ──────────────────────────────── */

.fb-diff-pos-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-family: var(--cx-font-mono);
    font-size: 11px;
    border-radius: var(--cx-radius-xs);
}

.fb-diff-pos-chip--from {
    background: var(--cx-surface-sunken);
    border: 1px solid var(--cx-border);
    color: var(--cx-ink-muted);
}

.fb-diff-pos-chip--to {
    background: var(--cx-action-soft);
    border: 1px solid var(--cx-action-border);
    color: var(--cx-action);
}

/* ── Within-section move: "within [Section]" tag ───────────────────────── */

.fb-diff-within-tag {
    font-size: 11px;
    color: var(--cx-ink-subtle);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Rule impact note (group-boundary move with display rule) ────────────── */

.fb-diff-ruleimpact {
    margin-top: 6px;
    padding: 5px 8px;
    background: var(--cx-rule-soft);
    border: 1px solid var(--cx-rule-border);
    border-radius: var(--cx-radius-xs);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fb-diff-ruleimpact__message {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 11px;
    color: var(--cx-rule);
    font-weight: 500;
    line-height: 1.4;
}

.fb-diff-ruleimpact__expr {
    font-family: var(--cx-font-mono);
    font-size: 10.5px;
    color: var(--cx-rule);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Row-ops position note (added / removed rows) ────────────────────────── */

.fb-diff-layout-note {
    margin-top: 4px;
    font-size: 11px;
    color: var(--cx-ink-muted);
}

/* ── Structural title (italic + muted — rows / groups have no field key) ── */

.fb-diff-title--structural {
    font-style: italic;
    font-weight: 500;
    color: var(--cx-ink-muted);
}

/* ── Group-changed row atoms ─────────────────────────────────────────────── */

.fb-diff-layers-icon {
    color: var(--cx-ink-subtle);
    flex-shrink: 0;
    margin-top: 1px;
}

.fb-diff-section-hint {
    font-size: 11px;
    color: var(--cx-ink-subtle);
    flex-shrink: 0;
}

.fb-diff-compact-note {
    font-size: 11px;
    color: var(--cx-ink-muted);
    display: block;
    margin-top: 2px;
}

/* ── Cell-resized label prefix ───────────────────────────────────────────── */

.fb-diff-change__label-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--cx-ink-muted);
}