/* ── Block container ─────────────────────────────── */
.rpg-block {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 2rem auto;
    border-style: none;
    container-type: inline-size;
}

.rpg-block *,
.rpg-editor-host * {
    box-sizing: border-box;
}

/* ── SVG lines ───────────────────────────────────── */
.rpg-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

/* ── Center & Node shared ────────────────────────── */
.rpg-center,
.rpg-node {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
}

/* ── Center ──────────────────────────────────────── */
.rpg-center {
    width: var(--rpg-center-size);
    height: var(--rpg-center-size);
    transform: translate(-50%, -50%);
    background: var(--rpg-center-bg);
    border: var(--rpg-center-bw) var(--rpg-center-bs) var(--rpg-center-bc);
    z-index: 3;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out;
}

.rpg-center:hover {
    transform: translate(-50%, -50%) scale(var(--rpg-hover-scale, 1));
}

.rpg-center-inner,
a.rpg-center-inner {
    width: 100%; height: 100%;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    font-weight: var(--rpg-center-fw);
    font-style: var(--rpg-center-fs);
    color: var(--rpg-center-color);
    line-height: 1.15;
    font-size: clamp(12px, 4.4cqw, 28px);
    text-wrap: balance;
    text-decoration: none;
    position: relative;
}

.rpg-center-logo-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpg-center-logo {
    max-width: 90%; max-height: 90%;
    width: auto; height: auto;
    display: block;
    object-fit: contain;
}

.rpg-center-label { color: inherit; }

/* ── Nodes ───────────────────────────────────────── */
.rpg-node {
    width: var(--rpg-node-size);
    height: var(--rpg-node-size);
    margin-left: calc(var(--rpg-node-size) / -2);
    margin-top: calc(var(--rpg-node-size) / -2);
    /* Per-node vars fall back to group defaults */
    background: var(--rpg-this-bg, var(--rpg-node-bg));
    border-width: var(--rpg-this-bw, var(--rpg-node-bw));
    border-style: var(--rpg-node-bs);
    border-color: var(--rpg-this-bc, var(--rpg-node-bc));
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform:
        rotate(var(--rpg-angle))
        translateY(calc(var(--rpg-radius) * -1))
        rotate(calc(var(--rpg-angle) * -1));
    transition: transform 0.2s ease-in-out;
}

.rpg-node:hover {
    transform:
        rotate(var(--rpg-angle))
        translateY(calc(var(--rpg-radius) * -1))
        rotate(calc(var(--rpg-angle) * -1))
        scale(var(--rpg-hover-scale, 1));
}

.rpg-node-inner,
a.rpg-node-inner {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.65rem;
    background: var(--rpg-this-bg, var(--rpg-node-bg));
    text-decoration: none;
}

.rpg-node-logo-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpg-node-logo {
    max-width: 62%; max-height: 34px;
    width: auto; height: auto;
    display: block;
    object-fit: contain;
}

.rpg-node-label {
    color: var(--rpg-this-color, var(--rpg-node-color));
    font-size: clamp(9px, 2.2cqw, 14px);
    font-weight: var(--rpg-node-fw);
    font-style: var(--rpg-node-fs);
    line-height: 1.15;
    text-wrap: balance;
}

a.rpg-link { cursor: pointer; }

/* ── Image fill mode ─────────────────────────────── */
/* Center fill: inner div transparent, label absolutely positioned */
.rpg-center-inner {
    position: relative;
}

.rpg-center-label {
    color: inherit;
}

/* Fill mode label positioning (set via inline style top/left) */
.rpg-center .rpg-center-label[style],
.rpg-node .rpg-node-label[style] {
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    padding: 0 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    transform: translateY(-50%);
    width: auto;
}

/* Fill mode nodes: inner div transparent so background shows */
.rpg-node--fill .rpg-node-inner,
.rpg-node--fill a.rpg-node-inner {
    background: transparent;
}

/* ── Editor: clickable + selected ────────────────── */
.rpg-editor-host .rpg-center,
.rpg-editor-host .rpg-node {
    cursor: pointer;
}

.rpg-center.is-selected::after,
.rpg-node.is-selected::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #007cba;
    pointer-events: none;
    z-index: 10;
}

/* ── Empty state ─────────────────────────────────── */
.rpg-empty {
    padding: 1.5rem;
    border: 1px dashed #c0c8d0;
    background: #f7f9fb;
    border-radius: 4px;
    color: #6b7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Editor host ─────────────────────────────────── */
.rpg-editor-host {
    padding: 16px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}

/* ── Canvas wrap & add button ────────────────────── */
.rpg-canvas-wrap {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 32px;
}

.rpg-canvas-add {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px dashed #9ca3af;
    background: #ffffff;
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    z-index: 10;
}

.rpg-canvas-add:hover { border-color: #374151; color: #111827; }
.rpg-canvas-add--inline { position:static; transform:none; margin-left:8px; }

.rpg-canvas-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

/* ── Sidebar utilities ───────────────────────────── */
.rpg-sidebar-divider {
    border: none;
    border-top: 1px solid #dcdcde;
    margin: 12px 0;
}

.rpg-media-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
}

/* ── Compact color+opacity row ───────────────────── */
.rpg-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.rpg-color-swatch {
    width: 38px !important;
    height: 32px !important;
    padding: 2px !important;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

.rpg-opacity-input {
    width: 52px !important;
    height: 32px !important;
    padding: 0 6px !important;
    border: 1px solid #dcdcde !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    text-align: center;
}

.rpg-opacity-label {
    font-size: 12px;
    color: #757575;
    flex-shrink: 0;
}

/* ── Popover ─────────────────────────────────────── */
.rpg-node-popover .components-popover__content {
    min-width: 0 !important;
    width: 272px !important;
    max-width: 272px !important;
}

.rpg-pop-inner {
    padding: 12px 14px 16px;
    background: #fff;
}

.rpg-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

.rpg-pop-title {
    font-size: 11px;
    font-weight: 600;
    color: #1e1e1e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpg-pop-close {
    min-width: 0 !important;
    padding: 2px 4px !important;
    color: #6b7280 !important;
    flex-shrink: 0;
}

.rpg-pop-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 10px 0;
}

.rpg-pop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.rpg-pop-label {
    font-size: 11px;
    font-weight: 500;
    color: #757575;
    min-width: 36px;
}

.rpg-reorder-buttons {
    display: flex;
    gap: 4px;
}

/* Tighten controls inside popover */
.rpg-pop-inner .components-base-control { margin-bottom: 8px !important; }
.rpg-pop-inner .components-select-control { margin-bottom: 8px !important; }
.rpg-pop-inner .components-range-control { margin-bottom: 8px !important; }

/* ── Tabs ────────────────────────────────────────── */
.rpg-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 12px;
    gap: 0;
}

.rpg-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #757575;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}

.rpg-tab:hover { color: #1e1e1e; }
.rpg-tab.is-active {
    color: #007cba;
    border-bottom-color: #007cba;
}

/* Override note + reset */
.rpg-override-note {
    font-size: 10px;
    color: #9ca3af;
    margin: 0 0 6px;
}