/**
 * Favicon Generator.
 */

.em-fav__drop { margin-bottom: 1.2em; }
.em-fav__drop strong { color: var(--em-ink, inherit); }

/* ── The picture it was given ──────────────────────────────────────────── */

.em-fav__source {
    display: flex;
    gap: 1em;
    align-items: center;
    flex-wrap: wrap;
    padding: 1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
}

.em-fav__preview {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--em-tint, #f0f6ff);
}

.em-fav__source-meta { flex: 1 1 12em; min-width: 0; }
.em-fav__source-meta strong { display: block; overflow-wrap: anywhere; color: var(--em-ink, inherit); }
.em-fav__source-meta .em-tool__hint { display: block; }

.em-fav__warning {
    margin: .6em 0 0;
    padding: .6em .8em;
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    background: rgba(245, 158, 11, .10);
    font-size: .88rem;
    line-height: 1.5;
    color: var(--em-ink, inherit);
}

/* ── Options ───────────────────────────────────────────────────────────── */

.em-fav__options {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4em;
    align-items: center;
    margin-top: 1em;
    padding: .9em 1em;
    border-radius: 10px;
    background: var(--em-tint, #f0f6ff);
}

.em-fav__check,
.em-fav__field {
    display: flex;
    align-items: center;
    gap: .6em;
    color: var(--em-ink, inherit);
}

.em-fav__check input { accent-color: var(--em-brand, #2563eb); }

.em-fav__select {
    padding: .5em .7em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font: inherit;
}

.em-fav__colour {
    width: 42px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: var(--em-surface, #fff);
}

/* ── What comes out ────────────────────────────────────────────────────── */

.em-fav__heading {
    margin: 1.6em 0 .6em;
    font-size: 1.05rem;
    color: var(--em-ink, inherit);
}

.em-fav__sizes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.em-fav__size {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: .7em 0;
    border-bottom: 1px solid var(--em-line, #e5e7eb);
}

.em-fav__size:last-child { border-bottom: 0; }

/* A fixed box so the 16px and the 512px icons line up in one column. */
.em-fav__chip {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--em-tint, #f0f6ff);
    /* The checkerboard that says "this part is transparent". */
    background-image:
        linear-gradient(45deg, rgba(127,127,127,.18) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(127,127,127,.18) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(127,127,127,.18) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(127,127,127,.18) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

.em-fav__chip--text {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--em-soft, #6b7280);
}

.em-fav__size-meta { flex: 1 1 10em; min-width: 0; }
.em-fav__size-meta strong {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92rem;
    overflow-wrap: anywhere;
    color: var(--em-ink, inherit);
}
.em-fav__size-meta .em-tool__hint { display: block; }

/* ── Buttons and the snippet ───────────────────────────────────────────── */

.em-fav__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    margin-top: 1em;
}

.em-fav__zip,
.em-fav__copy,
.em-fav__save,
.em-fav__change {
    padding: .6em 1.1em;
    border: 1px solid var(--em-brand, #2563eb);
    border-radius: 8px;
    background: var(--em-brand, #2563eb);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-fav__save,
.em-fav__copy { background: transparent; color: var(--em-brand, #2563eb); }

.em-fav__change {
    border-color: var(--em-line, #e5e7eb);
    background: transparent;
    color: var(--em-ink, inherit);
}

.em-fav__html {
    display: block;
    width: 100%;
    padding: .8em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem;
    line-height: 1.7;
    resize: vertical;
}

@media (max-width: 420px) {
    .em-fav__size { flex-wrap: wrap; }
    .em-fav__save { width: 100%; }
}