/* inheritance-fields.css — layout for the reusable inline-inheritance editor (Pulse 489 P1c).
 * Composes the canon app.css components (.density-row / .btn / .badge / .chip); this
 * file adds ONLY layout + the trace-ladder/struck-through provenance affordances, using
 * design tokens exclusively (no raw colors, no hardcoded px beyond hairline borders). */

.inh-toolbar { display: flex; align-items: center; gap: var(--pad-3); margin-bottom: var(--pad-3); }
.inh-filter { display: inline-flex; align-items: center; gap: var(--pad-1); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }

.inh-group { margin-bottom: var(--pad-4); }
.inh-group-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: var(--pad-2); }

/* One field row — responsive: label grows, state + control + expander wrap cleanly
 * on narrow panels (do not force everything onto one line). */
.inh-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pad-2) var(--pad-3);
  padding: var(--pad-2) var(--pad-3); border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: var(--pad-2); background: var(--surface);
}
.inh-row-main { flex: 1 1 14rem; min-width: 10rem; }
.inh-label { font-weight: 600; }
.inh-desc { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--pad-1); }
.inh-row-state { display: inline-flex; align-items: center; gap: var(--pad-2); }
.inh-row-control { display: inline-flex; }
.inh-control.inh-saving { opacity: .5; pointer-events: none; }

/* Scope chip — composes the canon .chip (base padding/border/radius/size come from
 * app.css); .inh-chip makes it a STATIC label (no hover/pointer) + labels-first tint
 * (the LABEL distinguishes the tier; color is secondary). */
/* Scope chips + the "Set here" indicator now use the canonical categorical/semantic
 * badge taxonomy (F24.5) directly — no hand-rolled chip classes here. */

/* Expander + trace ladder. */
.inh-expander {
  background: none; border: none; color: var(--text-2); font-size: var(--fs-sm);
  cursor: pointer; padding: var(--pad-1) var(--pad-2); border-radius: var(--r-sm);
}
.inh-expander:hover { background: var(--hover); color: var(--text); }
.inh-expander:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.inh-trace { flex-basis: 100%; }
.inh-ladder {
  margin-top: var(--pad-2); padding: var(--pad-2) var(--pad-3);
  background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border);
}
.inh-ladder-row { display: flex; align-items: center; gap: var(--pad-2); padding: var(--pad-1) 0; font-size: var(--fs-sm); }
.inh-ladder-val { color: var(--text); }
.inh-ladder-policy { color: var(--text-3); font-size: var(--fs-xs); }
.inh-ladder-eff { color: var(--accent); font-weight: 600; font-size: var(--fs-xs); margin-left: auto; }
/* Superseded tier — struck through, dimmed (the "this tier lost" affordance). */
.inh-superseded .inh-ladder-val { text-decoration: line-through; color: var(--text-3); }
.inh-superseded .badge { opacity: .6; }

.inh-muted { color: var(--text-3); }