/* Figure size / Download PNG tools (see assets/figure_tools.js). The size panel is a popover anchored under the
   Actions button, so it grows out of that corner. */
.figure-tools {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.figure-size-panel {
    position: absolute;
    z-index: 1060;
    width: 260px;
    padding: var(--space-3) var(--space-4);
    background: var(--material-menu);
    -webkit-backdrop-filter: var(--material-blur-thin);
    backdrop-filter: var(--material-blur-thin);
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    color: var(--color-ink-700);
    transform-origin: top right;
    transition: opacity 0.14s linear, scale var(--dur-spring) var(--ease-spring);
}
@starting-style { .figure-size-panel { opacity: 0; scale: 0.94; } }

.figure-size-panel .fsp-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.6rem;
}

.figure-size-panel .fsp-value {
    font-weight: 400;
    color: var(--color-ink-500);
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.figure-size-panel .fsp-check label {
    font-weight: 400;
}

.figure-size-panel input[type="range"] {
    width: 100%;
    accent-color: var(--color-fill-accent);
}

.figure-size-panel label, .figure-size-panel .fsp-label {
    font-weight: 600;
    margin: 0;
    color: var(--color-ink-900);
}

.figure-size-panel .ds-segmented { display: flex; }
.figure-size-panel .ds-segmented button { flex: 1; padding: 0 var(--space-2); }

/* Opened beside the Actions button: it grows out of the button's left edge */
.figure-size-panel.is-beside { transform-origin: top right; }

.figure-size-panel .fsp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.figure-size-panel .fsp-actions button {
    padding: 0.25rem 0.8rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-fill-quiet);
    color: var(--color-ink-900);
    font-weight: 500;
}

.figure-size-panel .fsp-actions .fsp-close {
    background: var(--color-fill-accent);
    color: var(--color-on-accent);
}

@media (prefers-reduced-motion: reduce) {
    @starting-style { .figure-size-panel { scale: none; } }
}