/* ─────────────────────────────────────────────────────────────────────────
   TOUCHED FIELDS — the visible half of crm/js/touch_tracking.js.

   A multi-field editor opts in with `data-touch-tracking`. Until something in
   it is edited there is nothing to save, so Save is not shown; once a field is
   touched it takes a quiet accent tint and Save appears.

   Cancel / Reset are never hidden — backing out of an editor must not depend on
   having edited it first.

   Markup contract:
     <form data-touch-tracking>            opt in
       <div class="iris-cfg-field">…       any wrapper on FIELD_SELECTOR, or
       <div data-touch-field>…             an explicit one
       <button data-touch-save>Save        the action to reveal
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  [data-touch-tracking] [data-touch-save] { display: none; }

  /* inline-flex, not block: these sit in a row of actions beside Cancel. */
  [data-touch-tracking][data-touched] [data-touch-save] { display: inline-flex; }

  /* The tint sits on the field's wrapper, so a checkbox group reads as one
     touched thing rather than as one touched box. */
  [data-touch-tracking] .is-touched {
    background: var(--touched-field-bg);
    /* A left rule rather than a full border: the marker has to read down a
       long form at a glance without redrawing every field as a box. */
    border-left: 2px solid var(--touched-field-edge);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out);
  }
}