/* ── Editor: flex row ──────────────────────────────── */
.gaia-info-row {
    position:   relative;
    display:    flex;
    width:      100%;
    border:     1px solid var(--color-border-subtle, #ddd);
    margin-top: -1px;
    box-sizing: border-box;
}

.gaia-info-row:first-child {
    margin-top: 0;
}

/* Absolutely positioned so it never takes up flex space / pushes the
   label-value columns around — hidden until the row is hovered so it
   doesn't clutter every row at once.

   The "×" is drawn with two pseudo-element bars instead of a text glyph
   — a real "×"/"x" character never sits exactly on the box's optical
   center (font ascent/descent + button UA baseline handling both throw
   it off, confirmed from a screenshot: it rendered high and to the
   left), where two absolutely-centered, rotated bars are pixel-exact
   regardless of font/browser. */
.gaia-info-row__delete {
    position:         absolute;
    top:              4px;
    right:            4px;
    z-index:          1;
    width:            22px;
    height:           22px;
    padding:          0;
    appearance:       none;
    background-color: var(--color-surface, #fff);
    border:            1px solid var(--color-border-subtle, #ddd);
    border-radius:    50%;
    cursor:           pointer;
    opacity:          0;
    transition:       opacity 0.15s ease;
}

.gaia-info-row__delete::before,
.gaia-info-row__delete::after {
    content:          '';
    position:         absolute;
    top:              50%;
    left:             50%;
    width:            10px;
    height:           2px;
    background-color: var(--color-text-subtle, #767676);
    border-radius:    1px;
}

.gaia-info-row__delete::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.gaia-info-row__delete::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.gaia-info-row:hover .gaia-info-row__delete,
.gaia-info-row__delete:focus {
    opacity: 1;
}

.gaia-info-row__delete:hover {
    border-color: var(--color-status-danger, #d63638);
}

.gaia-info-row__delete:hover::before,
.gaia-info-row__delete:hover::after {
    background-color: var(--color-status-danger, #d63638);
}

/* No forced bold/center — matches info-table/style.css's own td:first-
   child treatment, so the editor preview and the real frontend table
   agree on how the label column looks (it used to only match on the
   frontend, since this is a separate block with its own stylesheet).
   display:flex + align-items:center used to sit directly on this same
   div — which RichText also uses as its contenteditable root (tagName:
   'div' in editor.js). A contenteditable element that is ALSO a flex
   container is a known Chromium/WebKit bug: typing still works, but the
   blinking text caret never renders. Dropped the flex centering (the
   real frontend td is vertical-align:top per .gaia-info-table td/th
   above, not centered, so this also fixes an existing editor/frontend
   mismatch, not just the caret) — the parent .gaia-info-row is still
   display:flex with default align-items:stretch, so this cell keeps
   stretching to the row's full height exactly like .gaia-info-row__value
   already does. */
.gaia-info-row__label {
    flex-shrink:     0;
    min-width:       80px;
    padding:         12px 16px;
    border-right: 1px solid var(--color-border-subtle, #ddd);
    box-sizing:      border-box;
}

.gaia-info-row__value {
    flex:        1;
    min-width:   0;
    padding:     12px 16px;
    box-sizing:  border-box;
    border-right: 1px solid var(--color-border-subtle, #ddd);
}

.gaia-info-row__value:last-child {
    border-right: none;
}