/*
 * Clay Prompt Generator — Public Styles v1.1.0
 * Structural CSS only. Visual values come from CSS custom properties
 * injected by the shortcode. Fallbacks keep the widget usable with
 * zero configuration against any theme.
 */

.clay-prompt-wrap {
    padding: 20px 0;
    background-color:    var(--clay-wrap-bg-color, transparent);
    background-image:    var(--clay-wrap-bg-image, none);
    background-size:     var(--clay-wrap-bg-size, cover);
    background-position: var(--clay-wrap-bg-position, center);
}

.clay-prompt-wrap .clay-title {
    color: var(--clay-title-color, inherit);
}

.clay-prompt-wrap #output {
    margin-top: 20px;
    padding: 20px;
    height: 120px;
    width: 100%;
    box-sizing: border-box;
    background-color:    var(--clay-box-bg-color, transparent);
    background-image:    var(--clay-box-bg-image, none);
    background-size:     var(--clay-box-bg-size, cover);
    background-position: var(--clay-box-bg-position, center);
    border: 2px solid var(--clay-box-border-color, currentColor);
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.2em;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-content: center;
    gap: 2px 8px;
}

.clay-prompt-wrap .clay-cat {
    text-align: right;
    opacity: 0.75;
    color: var(--clay-cat-color, inherit);
}

.clay-prompt-wrap .clay-sep {
    text-align: center;
    color: var(--clay-sep-color, inherit);
}

.clay-prompt-wrap .clay-val {
    text-align: left;
    color: var(--clay-val-color, inherit);
}