/*
 * Module: transition-divider
 *
 * From TEMPLATE_interpreted.json — the visual transition that appears
 * between sections on the artboard:
 *
 *   - Full-width gold rule, stroke #A27E2D 1.22px
 *     (observed at y=438, y=998, y=2549)
 *   - Small gold "+" cross mark below the rule:
 *     vertical stroke   x=300 y=406 h=21  #A27E2D 0.75px
 *     horizontal stroke x=295 y=414 w=10  #A27E2D 0.75px
 *     (so the cross is 10w × 21h, centered at x=300, ~24px below the rule)
 *
 * Renders as: a thin gold line spanning the canvas, then a centered
 * 10×21 gold cross with 8px hairline strokes.
 */

.fm-divider {
  width: 100%;
}

.fm-divider-rule {
  height: 1px;
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
  width: 100%;
}

.fm-divider-gap {
  height: 24px;  /* JSON: rule y=438 − cross top y=414 = 24px between rule and cross center */
  line-height: 1px;
  font-size: 1px;
}

.fm-divider-cross-cell {
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

.fm-divider-cross {
  /* The cross is rendered as a 2-row × 3-col nested table.
   * Each segment is a 1px gold line on a transparent cell. */
  width: 10px;
  margin: 0 auto;
  border-collapse: collapse;
}

.fm-divider-cross-v {
  /* center column: full 21px tall, 1px wide vertical stroke */
  width: 1px;
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
}

.fm-divider-cross-h-left,
.fm-divider-cross-h-right {
  /* horizontal arms: 1px tall, 5px wide on each side, gold */
  height: 1px;
  background: var(--fm-color-gold);
  line-height: 1px;
  font-size: 1px;
}