/* The card inside the «گالری تکراری» dialog of «ساخت گالری (بازی‌ها)»
   (الزام گالری-تکراری-۰۸، ۰۹ و ۱۲).

   It is drawn from `panel-identity.css`'s own tokens rather than from Filament's,
   because this panel is v3 and publishes its palette as channels: `var(--gray-300)`
   is the string «209 213 219» here, and a browser throws the whole declaration
   away. Everything below is either one of those tokens, already wrapped back into
   a colour, or a literal.

   The gallery's code is the one thing that has to be found at a glance, so it is
   the only thing set larger than a line of text. Nothing here styles a button. */

.fi-gallery-duplicate-notice {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fi-gallery-duplicate-card {
    border: 1px solid var(--panel-surface-border, #e5e7eb);
    border-radius: 0.5rem;
    background-color: var(--panel-hover, #f3f4f6);
    padding: 0.75rem 1rem;
    line-height: 2;
}

.fi-gallery-duplicate-card-definite {
    border-color: rgb(var(--danger-400, 248 113 113));
}

.fi-gallery-duplicate-code {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.fi-gallery-duplicate-code-label,
.fi-gallery-duplicate-type,
.fi-gallery-duplicate-marks,
.fi-gallery-duplicate-hint {
    color: rgb(var(--gray-500, 107 114 128));
}

.dark .fi-gallery-duplicate-code-label,
.dark .fi-gallery-duplicate-type,
.dark .fi-gallery-duplicate-marks,
.dark .fi-gallery-duplicate-hint {
    color: rgb(var(--gray-400, 156 163 175));
}

.fi-gallery-duplicate-code-value {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.fi-gallery-duplicate-title,
.fi-gallery-duplicate-marks,
.fi-gallery-duplicate-hint {
    margin: 0;
}