.wg-editor-host .ck-editor {
    color: hsl(var(--foreground, 240 10% 3.9%));
}

.wg-editor-host .ck-editor__editable_inline {
    min-height: var(--wg-editor-height, 500px);
    max-height: min(75vh, calc(var(--wg-editor-height, 500px) * 1.5));
    overflow-y: auto;
}

.wg-editor-host .ck-content h1 {
    display: none;
}

.wg-editor-host .ck-content figure.table {
    overflow-x: auto;
}

.wg-editor-host .ck-content table {
    min-width: 100%;
}

.wg-editor-error {
    margin-top: .5rem;
    color: #dc2626;
    font-size: .875rem;
}

.wg-editor-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(0 0 0 / .58);
}

.wg-editor-dialog {
    width: min(880px, 96vw);
    max-height: 90vh;
    overflow: auto;
    border: 1px solid hsl(var(--border, 240 5.9% 90%));
    border-radius: .75rem;
    background: hsl(var(--background, 0 0% 100%));
    color: hsl(var(--foreground, 240 10% 3.9%));
    box-shadow: 0 24px 80px rgb(0 0 0 / .28);
    padding: 1.25rem;
}

.wg-editor-dialog h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 650;
}

.wg-editor-dialog-help,
.wg-editor-media-empty {
    margin: .35rem 0 1rem;
    color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
    font-size: .875rem;
}

.wg-editor-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
    max-height: 320px;
    overflow: auto;
    padding: .2rem;
}

.wg-editor-media-choice {
    display: grid;
    gap: .35rem;
    min-width: 0;
    padding: .45rem;
    border: 2px solid hsl(var(--border, 240 5.9% 90%));
    border-radius: .5rem;
    background: hsl(var(--muted, 240 4.8% 95.9%));
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.wg-editor-media-choice.is-selected {
    border-color: hsl(var(--primary, 221 83% 53%));
    box-shadow: 0 0 0 2px hsl(var(--primary, 221 83% 53%) / .18);
}

.wg-editor-media-choice img {
    width: 100%;
    height: 96px;
    object-fit: contain;
    background: #fff;
}

.wg-editor-media-choice span {
    overflow: hidden;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wg-editor-dialog-fields {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(140px, 1fr);
    gap: .75rem;
    margin-top: 1rem;
}

.wg-editor-dialog-fields label {
    display: grid;
    align-content: start;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
}

.wg-editor-dialog-fields input,
.wg-editor-dialog-fields select {
    min-height: 2.35rem;
    padding: .45rem .6rem;
    border: 1px solid hsl(var(--border, 240 5.9% 90%));
    border-radius: .4rem;
    background: transparent;
    color: inherit;
}

.wg-editor-dialog-fields small {
    color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
    font-weight: 400;
}

.wg-editor-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.25rem;
}

.wg-editor-dialog-actions button {
    min-height: 2.35rem;
    padding: .45rem .9rem;
    border: 1px solid hsl(var(--border, 240 5.9% 90%));
    border-radius: .4rem;
    background: transparent;
    color: inherit;
}

.wg-editor-dialog-actions button.is-primary {
    border-color: hsl(var(--primary, 221 83% 53%));
    background: hsl(var(--primary, 221 83% 53%));
    color: hsl(var(--primary-foreground, 210 40% 98%));
}

.wg-editor-dialog-actions button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 680px) {
    .wg-editor-dialog-fields {
        grid-template-columns: 1fr;
    }
}