/**
 * Image Resize.
 */

.em-rs__top {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6em;
    align-items: flex-start;
}

/* ── The picture ───────────────────────────────────────────────────────── */

.em-rs__preview {
    flex: 0 0 auto;
    margin: 0;
    max-width: 100%;
}

/* A chequerboard behind it, so a transparent PNG is seen as transparent
   rather than as white that happens to match the card. */
.em-post-content .em-rs .em-rs__preview canvas {
    display: block;
    max-width: 320px;
    max-height: 320px;
    height: auto;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #d7d7d7 25%, transparent 25%, transparent 75%, #d7d7d7 75%),
        linear-gradient(45deg, #d7d7d7 25%, transparent 25%, transparent 75%, #d7d7d7 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.em-rs__preview figcaption {
    margin-top: .6em;
    max-width: 320px;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--em-soft, #6b7280);
    overflow-wrap: anywhere;
}

/* ── The choices ───────────────────────────────────────────────────────── */

.em-rs__options {
    flex: 1 1 20em;
    min-width: 0;
}

.em-rs__group {
    margin: 0 0 1em;
    padding: .85em 1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
}

.em-rs__group legend { padding: 0 .4em; font-weight: 600; color: var(--em-ink, inherit); }

.em-rs__dims {
    display: flex;
    align-items: flex-end;
    gap: .5em;
}

.em-rs__dim {
    display: flex;
    flex-direction: column;
    gap: .25em;
    font-size: .88rem;
    color: var(--em-soft, #6b7280);
}

.em-rs__times {
    padding-bottom: .55em;
    color: var(--em-soft, #6b7280);
}

.em-rs__unit {
    padding-bottom: .1em;
    font-size: .88rem;
    color: var(--em-soft, #6b7280);
}

.em-rs__number,
.em-rs__select,
.em-rs__colour {
    padding: .45em .6em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font: inherit;
}

.em-rs__number { width: 6.5em; font-variant-numeric: tabular-nums; }
.em-rs__colour { width: 3.4em; padding: .2em; }

.em-rs__check {
    display: flex;
    align-items: baseline;
    gap: .45em;
    margin: .9em 0 0;
    font-size: .92rem;
    color: var(--em-ink, inherit);
}

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

.em-rs__field {
    display: flex;
    align-items: center;
    gap: .6em;
    margin-top: .9em;
    color: var(--em-ink, inherit);
}

.em-rs__field input[type="range"] { flex: 1 1 7em; accent-color: var(--em-brand, #2563eb); }

.em-rs__num {
    min-width: 2.4em;
    font-variant-numeric: tabular-nums;
    color: var(--em-brand, #2563eb);
}

.em-rs__reset-row { margin: .9em 0 0; }

.em-rs__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--em-brand, #2563eb);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── What will come out ────────────────────────────────────────────────── */

/* The number people came for. It updates as the boxes change, so nobody has
   to download a file to find out whether it fits. */
.em-rs__result {
    margin: 1.2em 0 0;
    padding: .7em .95em;
    border-left: 3px solid var(--em-line, #e5e7eb);
    border-radius: 0 8px 8px 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--em-ink, inherit);
}

.em-rs__result:empty { display: none; }
.em-rs__result.is-good { border-left-color: #16a34a; background: rgba(22, 163, 74, .10); }
.em-rs__result.is-working { border-left-color: var(--em-brand, #2563eb); background: var(--em-tint, #f0f6ff); }
.em-rs__result.is-bad { border-left-color: #dc2626; background: rgba(220, 38, 38, .10); font-weight: 600; }

.em-rs__go {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    margin-top: 1.2em;
}

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

.em-rs__reset {
    padding: .6em 1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: transparent;
    color: var(--em-soft, #6b7280);
    font: inherit;
    cursor: pointer;
}

.em-rs__problem:empty { display: none; }
.em-rs__problem { margin-top: 1em; }
.em-rs__promise { margin-top: 1.4em; }

@media (max-width: 560px) {
    .em-rs__top { gap: 1.1em; }
    .em-post-content .em-rs .em-rs__preview canvas { max-width: 100%; max-height: 240px; }
    .em-rs__number { width: 5em; }
    .em-rs__go { flex-direction: column; }
}