/**
 * agenic Komponenten-CSS – Arrow-Line (Atom) — vollständige Übertragung.
 *
 * Figma-Quelle: Set `arrow-line` (2917:21670, Seite 0.5 → `02 · Atoms`,
 * 2 Varianten, gemessen 19.08.2026):
 *   Theme = light (Icon/border #18181e) · dark (Icon/border-inverse #dae5e6)
 * Maße der Quelle: Wurzel HORIZONTAL, counter=CENTER, gap 0, Höhe 14.
 *   rule  Höhe 1 (Values/border/xs), Breite FILL
 *   glyph 6,5 × 13, Kontur 1, join MITER, cap NONE, align CENTER
 * Markup-Partial: includes/render-arrow-line.php.
 * Kontrakt: `KONTRAKT-process-chain-kette-19-08.md` §2. 0 tmp-Punkte.
 */

.ag-arrow-line,
.ag-arrow-line * {
    box-sizing: border-box;
}

.ag-arrow-line {
    /* L3 mit L2-Defaults */
    --ag-arrow-line-color: var(--color-icon-border);      /* Figma Icon/border */
    --ag-arrow-line-rule-weight: var(--border-width-xs);  /* Figma Values/border/xs = 1 */
    --ag-arrow-line-glyph-w: 6.5px;                       /* Figma Vektorbreite, gemessen */
    --ag-arrow-line-glyph-h: 13px;                        /* Figma Vektorhöhe, gemessen */
    --ag-arrow-line-height: 14px;                         /* Figma Wurzelhöhe, gemessen */
    --ag-arrow-line-space-before: 0px;                    /* Control „Abstand davor" (nur Widget ag_arrow_line) */
    --ag-arrow-line-space-after: 0px;                     /* Control „Abstand danach" */

    display: flex;
    align-items: center;                                  /* Figma counterAxisAlignItems = CENTER */
    gap: 0;                                               /* Figma itemSpacing = 0 */
    height: var(--ag-arrow-line-height);
    color: var(--ag-arrow-line-color);                    /* traegt den Glyph via currentColor */
    margin: var(--ag-arrow-line-space-before) 0 var(--ag-arrow-line-space-after);

    /* Regal-Regel „Keine feste Breite setzen, sonst reiszt die Reihe bei langen
       Beschriftungen": das Atom waechst und schrumpft mit dem Restplatz.
       flex-basis 0 statt auto, damit lange Nachbarbeschriftungen es nicht
       auf seine Inhaltsbreite aufblasen. */
    flex: 1 1 0;
    min-width: var(--ag-arrow-line-glyph-w);
}

.ag-arrow-line__rule {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: var(--ag-arrow-line-rule-weight);
    background: currentColor;
}

.ag-arrow-line__glyph {
    display: block;
    flex: 0 0 auto;
    width: var(--ag-arrow-line-glyph-w);
    height: var(--ag-arrow-line-glyph-h);

    /* Figma zeichnet die Kontur mittig (strokeAlign CENTER), sie ragt also
       0,5 px ueber die Pfadbox hinaus. `overflow: visible` bildet das ab,
       ohne den Pfad zu verschieben — sonst waere die Spitze abgeschnitten. */
    overflow: visible;
}

/* ── Theme-Achse ─────────────────────────────────────────────────
   Doppelklasse wie beim divider: der Basisblock traegt bereits eine
   eigene Farbregel; ein einfacher Modifier (0,1,0) wuerde ihn zwar
   schlagen, aber sobald das Atom in einem Kit-gestylten Kontext
   steht, ist der Puffer willkommen. Kein !important. */

.ag-arrow-line--dark.ag-arrow-line--dark {
    --ag-arrow-line-color: var(--color-icon-border-inverse);  /* Figma Icon/border-inverse */
}

/* Kein Hover, kein Fokus, keine Einblendung: das Atom ist dekorativ und
   nicht bedienbar (Regal-Regel „Nicht als Bedienelement verwenden").
   prefers-reduced-motion ist deshalb gegenstandslos. */

/* ── Innenabstand steuerbar (3.88.0) ─────────────────────────────────────
   Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget
   am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im
   Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird
   erst wirksam, wenn jemand am Control etwas wählt.
   Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die
   spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */
.ag-arrow-line {
    padding-block: var(--ag-arrow-line-pad-oben, 0px) var(--ag-arrow-line-pad-unten, 0px);
}