/* Styles specific to the encode tool group. */

/* ---------- base64-file ---------- */

.base64-file-grid > .panel + .panel {
    margin-top: 0;
}

.base64-file-dropzone {
    padding: 20px 16px;
}

.base64-file-results {
    animation: base64-file-reveal 0.4s var(--ease-out) both;
}

@keyframes base64-file-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.base64-file-preview {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin-top: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
}

.base64-file-preview-in {
    animation: base64-file-preview-fade 0.5s var(--ease-out) both;
}

@keyframes base64-file-preview-fade {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- unicode ---------- */

.unicode-inspector-panel {
    animation: unicode-inspector-in 0.4s var(--ease-out) both;
}

@keyframes unicode-inspector-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.unicode-cp-row {
    animation: unicode-cp-row-in 0.32s var(--ease-out) both;
    animation-delay: calc(min(var(--i), 24) * 24ms);
}

@keyframes unicode-cp-row-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.data-table td.unicode-cp-char {
    font-size: 15.5px;
    color: var(--text);
}

/* ---------- binary ---------- */

.binary-number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}