/* ── Structured field editors ────────────────────────────────────────────────
   The chrome for the repeatable, type-aware editors in app/views/orders/fields/
   — the timeline's per-row icon swatch, the drag-to-reorder state, and the
   required-field highlight.

   These used to live in a <style> block on the order form, which is why the
   builders couldn't show the same editors. Loaded globally by
   `stylesheet_link_tag :app`, so anywhere that renders an orders/fields partial
   gets the full editor, not a half-styled one.
   ────────────────────────────────────────────────────────────────────────── */

/* Required-field highlight (empty on "Preview my newspaper"). */
.rf-missing {
  border-radius: 0.85rem;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.55);
  scroll-margin-top: 5rem;
}
.rf-missing > label { color: #b91c1c; }

/* Per-row icon override (timelines). */
.rf-icon-swatch {
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(22, 22, 22, 0.15); border-radius: 0.5rem; background: #fff; color: #161616; cursor: pointer;
}
.rf-icon-swatch:hover { border-color: #d6336c; }
.rf-icon-glyph { width: 1.4rem; height: 1.4rem; }
.rf-icon-auto { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9a958c; }
.rf-icon-menu {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 0.25rem;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.15rem;
  width: 14rem; padding: 0.4rem; background: #fff; border: 1px solid rgba(22, 22, 22, 0.15);
  border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.rf-icon-opt {
  display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  border: none; border-radius: 0.4rem; background: transparent; color: #161616; cursor: pointer;
}
.rf-icon-opt:hover { background: #fbe3ec; }
.rf-icon-opt .rf-icon-glyph { width: 1.3rem; height: 1.3rem; }
.rf-icon-auto-opt { font-size: 0.5rem; text-transform: uppercase; color: #9a958c; }
/* Drag-to-reorder: the row being dragged dims; the grip shows a grabbing cursor. */
.rf-dragging { opacity: 0.45; }
[data-rf-handle]:active { cursor: grabbing; }