/*
 * COALA Demo Creator — the demo request form.
 *
 * The plugin owns this form's design. A site that wants it in its own colours sets the
 * TOKENS below and nothing else — never a selector from this file: class names and
 * markup are the plugin's to change.
 *
 *     :root {
 *         --coala-demo-accent:       #58bd7c;
 *         --coala-demo-accent-hover: #4aa86c;
 *         --coala-demo-on-accent:    #232625;
 *     }
 *
 * The defaults are declared with :where(), which has no specificity, so a site's
 * declaration wins wherever it is written and in whichever order the stylesheets load.
 */
:where(:root) {
    /* type */
    --coala-demo-font:           inherit;              /* the site's own face */

    /* text and grounds */
    --coala-demo-text:           #232625;              /* headings, labels, input text */
    --coala-demo-text-muted:     #5b6461;              /* description, progress message */
    --coala-demo-surface:        #ffffff;              /* the box, the inputs */
    --coala-demo-surface-muted:  #f1f3f2;              /* close button, progress track */
    --coala-demo-border:         #dfe3e1;              /* input and outline-button borders */
    --coala-demo-backdrop:       rgba(35, 38, 37, 0.5);

    /* the one brand colour: filled buttons, the progress fill */
    --coala-demo-accent:         #2f6fed;
    --coala-demo-accent-hover:   #2559c4;
    --coala-demo-on-accent:      #ffffff;              /* label on an accent fill */
    --coala-demo-focus:          #2f6fed;              /* focus ring; often NOT the accent */

    /* failure */
    --coala-demo-danger:         #b42318;
    --coala-demo-danger-surface: #fef3f2;
    --coala-demo-danger-border:  #fecdca;

    /* shape */
    --coala-demo-radius:         12px;                 /* the box */
    --coala-demo-radius-sm:      6px;                  /* inputs, buttons, close */
    --coala-demo-shadow:         0 20px 60px rgba(0, 0, 0, 0.25);
    --coala-demo-z:              9999;

    /* Two tokens have NO default here, on purpose: each falls back, where it is used, to
       the token it refines — so a site that sets only the base token gets both, in
       whatever scope it sets it.
         --coala-demo-progress     the progress fill        → --coala-demo-accent
         --coala-demo-radius-btn   buttons                  → --coala-demo-radius-sm
       A brand whose primary button and whose "positive" colour differ (an amber button,
       a green bar) or whose buttons are rounder than its inputs sets them. */
}

.coala-demo,
.coala-demo * {
    box-sizing: border-box;
}

.coala-demo {
    font-family: var(--coala-demo-font);
    color: var(--coala-demo-text);
}

/* [hidden] must win over the display values below. */
.coala-demo[hidden],
.coala-demo [hidden] {
    display: none !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.coala-demo-button-container {
    margin: 20px 0;
    text-align: center;
}

.coala-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--coala-demo-radius-btn, var(--coala-demo-radius-sm));
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap; /* "Creating Demo..." must not wrap and change the row's height */
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.coala-demo-btn--filled {
    background: var(--coala-demo-accent);
    color: var(--coala-demo-on-accent);
}

.coala-demo-btn--filled:hover {
    background: var(--coala-demo-accent-hover);
}

.coala-demo-btn--outline {
    background: var(--coala-demo-surface);
    border-color: var(--coala-demo-border);
    color: var(--coala-demo-text);
}

.coala-demo-btn--outline:hover {
    background: var(--coala-demo-surface-muted);
}

.coala-demo-btn--block {
    width: 100%;
    margin-top: 18px;
}

.coala-demo-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.coala-demo-btn:focus-visible,
.coala-demo-close:focus-visible,
.coala-demo-field input:focus-visible {
    outline: 2px solid var(--coala-demo-focus);
    outline-offset: 2px;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.coala-demo-modal {
    position: fixed;
    inset: 0;
    z-index: var(--coala-demo-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.coala-demo-backdrop {
    position: absolute;
    inset: 0;
    background: var(--coala-demo-backdrop);
    backdrop-filter: blur(6px);
}

.coala-demo-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: clamp(24px, 3.5vw, 40px);
    background: var(--coala-demo-surface);
    border-radius: var(--coala-demo-radius);
    box-shadow: var(--coala-demo-shadow);
}

.coala-demo-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--coala-demo-radius-sm);
    background: var(--coala-demo-surface-muted);
    color: var(--coala-demo-text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.coala-demo-close:hover {
    color: var(--coala-demo-text);
}

.coala-demo-box h3 {
    margin: 0 36px 8px 0; /* clear of the close button */
    color: var(--coala-demo-text);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
}

.coala-demo-description {
    margin: 0 0 24px;
    color: var(--coala-demo-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.coala-demo-field {
    margin-bottom: 16px;
}

.coala-demo-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.coala-demo-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--coala-demo-border);
    border-radius: var(--coala-demo-radius-sm);
    background: var(--coala-demo-surface);
    color: var(--coala-demo-text);
    font: inherit;
}

.coala-demo-field input[aria-invalid="true"] {
    border-color: var(--coala-demo-danger);
}

/* The ALTCHA widget styles itself through its own custom properties; they are mapped
   onto the form's tokens so it sits between the fields as one of them. */
.coala-demo-altcha {
    display: block;
    margin-bottom: 16px;
    --altcha-max-width: 100%;
    --altcha-border-width: 1px;
    --altcha-border-radius: var(--coala-demo-radius-sm);
    --altcha-color-base: var(--coala-demo-surface);
    --altcha-color-border: var(--coala-demo-border);
    --altcha-color-border-focus: var(--coala-demo-focus);
    --altcha-color-text: var(--coala-demo-text-muted);
    --altcha-color-error-text: var(--coala-demo-danger);
    --altcha-color-footer-bg: var(--coala-demo-surface-muted);
}

.coala-demo-form-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--coala-demo-danger-border);
    border-radius: var(--coala-demo-radius-sm);
    background: var(--coala-demo-danger-surface);
    color: var(--coala-demo-danger);
    font-size: 0.875rem;
}

.coala-demo-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.coala-demo-actions > * {
    flex: 1 1 0; /* equal widths whatever the labels */
    min-width: 0;
}

/* While a demo is being created the fields stay visible but inert. */
.coala-demo-form[aria-busy="true"] .coala-demo-field,
.coala-demo-form[aria-busy="true"] .coala-demo-altcha {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Progress ────────────────────────────────────────────────────────────── */

.coala-demo-progress {
    margin-top: 16px;
}

.coala-demo-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coala-demo-progress-bar {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--coala-demo-surface-muted);
}

.coala-demo-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--coala-demo-progress, var(--coala-demo-accent));
    transition: width 0.4s ease;
}

/* Empty until the manager reports a real figure — never "0%" before anything was sent. */
.coala-demo-progress-percent:empty {
    display: none;
}

.coala-demo-progress-percent {
    min-width: 2.6em;
    color: var(--coala-demo-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.coala-demo-progress-message {
    margin: 8px 0 0;
    color: var(--coala-demo-text-muted);
    font-size: 0.8rem;
}

/* ── Result screens ──────────────────────────────────────────────────────── */

.coala-demo-result {
    padding: 8px 0 0;
    text-align: center;
}

.coala-demo-result-icon {
    display: block;
    margin: 0 auto;
}

/* "It worked" is the same statement as the full bar, so it takes the same colour. */
.coala-demo-result-icon circle {
    fill: var(--coala-demo-progress, var(--coala-demo-accent));
}

.coala-demo-result-icon path {
    fill: none;
    stroke: var(--coala-demo-on-accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coala-demo-result-icon--failed circle {
    fill: var(--coala-demo-danger);
}

.coala-demo-result-icon--failed path {
    stroke: var(--coala-demo-surface);
}

.coala-demo-result h4 {
    margin: 12px 0 8px;
    color: var(--coala-demo-text);
    font-size: 1.15rem;
    font-weight: 600;
}

.coala-demo-result p {
    margin: 0;
    color: var(--coala-demo-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.coala-demo-result a {
    display: inline-block;
    margin-top: 10px;
    color: var(--coala-demo-text);
    font-weight: 600;
    word-break: break-all;
}

/* The page behind an open modal does not scroll. */
body.coala-demo-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .coala-demo-modal {
        padding: 10px;
    }

    .coala-demo-actions {
        flex-direction: column-reverse;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coala-demo-btn,
    .coala-demo-progress-fill {
        transition: none;
    }
}