/* Slug-suggestion demo widget (SlugDemo.razor). Rules copied verbatim from the Home.razor <style> block,
   which keeps its own copy until home is migrated (home is frozen for the loop-31 read until 2026-10-17). */
/* Hero Input Section */
    .hero-input-section {
        max-width: 650px;
        margin: 0 auto var(--space-8);
    }

.hero-input-group {
        display: flex;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        background: var(--surface);
        padding: var(--space-2);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
    }

.hero-input-group .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

.hero-input-note {
        text-align: center;
        color: var(--text-secondary);
        font-size: var(--font-body-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin: 0;
    }

.hero-input-note i {
        color: var(--primary);
    }

.demo-card {
        padding: var(--space-8);
        background: var(--surface);
    }

.demo-header {
        text-align: center;
        margin-bottom: var(--space-6);
    }

.demo-title {
        font-size: var(--font-h4);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
    }

.demo-subtitle {
        font-size: var(--font-body-sm);
        color: var(--text-secondary);
        margin: 0;
    }

.demo-example-label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
        border: 1px solid rgba(245, 158, 11, 0.2);
        border-radius: var(--radius-md);
        font-size: var(--font-body-sm);
        font-weight: 500;
        color: #D97706;
        margin-bottom: var(--space-4);
    }

.demo-example-label i {
        font-size: 1rem;
    }

.demo-input-group {
        display: flex;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

.demo-hint {
        display: flex;
        justify-content: center;
        gap: var(--space-6);
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border);
    }

.demo-hint-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-body-sm);
        color: var(--text-secondary);
    }

.demo-hint-item i {
        color: var(--primary);
        font-size: 1rem;
    }

.demo-input-group .form-control {
        flex: 1;
        font-size: var(--font-body-sm);
        color: var(--text-secondary);
    }

.demo-context {
        margin-bottom: var(--space-6);
        padding: var(--space-4);
        background: linear-gradient(135deg, #F0F9FF 0%, #EEF2FF 100%);
        border-radius: var(--radius-md);
        border: 1px solid #BFDBFE;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

.demo-context-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

.demo-label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-body-sm);
        font-weight: 600;
        color: var(--text-primary);
    }

.demo-label i {
        color: var(--primary);
    }

.demo-result {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

.demo-result .text-small {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 500;
    }

/* Demo result header */
    .demo-result-header {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

.demo-result-title {
        font-size: var(--font-body-sm);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

.demo-result-title i {
        color: var(--primary);
    }

.demo-page-scan-hint {
        font-size: var(--font-body-xs);
        color: var(--text-tertiary);
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--background-alt);
        border-radius: var(--radius-sm);
        line-height: 1.4;
    }

.demo-page-scan-hint i {
        font-size: var(--font-body-xs);
        margin-top: var(--space-1);
        flex-shrink: 0;
    }

.demo-page-scan-explainer {
        display: inline;
        margin-left: var(--space-1);
    }

.demo-page-scan-explainer summary {
        display: inline;
        cursor: pointer;
        color: var(--primary);
        text-decoration: underline;
        font-size: var(--font-body-xs);
    }

.demo-page-scan-explainer summary::-webkit-details-marker { display: none; }

.demo-page-scan-explainer summary::marker { content: ''; }

.demo-page-scan-explainer-body {
        margin-top: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--background-alt);
        border-radius: var(--radius-sm);
        font-size: var(--font-body-xs);
        color: var(--text-secondary);
        line-height: 1.5;
    }

/* Compact suggestions list */
    .demo-suggestions-compact {
        display: flex;
        flex-direction: column;
        background: var(--background-alt);
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        overflow: hidden;
    }

.demo-analyze {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) 0;
        font-size: var(--font-body-sm);
        color: var(--text-secondary);
    }

/* Demo loading state */
    .demo-loading {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
        border-radius: var(--radius-md);
        color: var(--primary);
        font-weight: 500;
    }

.demo-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(99, 102, 241, 0.2);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

/* Demo error state */
    .demo-error {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: var(--radius-md);
        color: #DC2626;
        font-size: var(--font-body-sm);
    }

.demo-error i {
        font-size: 1.125rem;
    }

.demo-error-signup {
        margin-left: auto;
        padding: var(--space-2) var(--space-4);
        background: var(--primary);
        color: white;
        border-radius: var(--radius-sm);
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--transition-base) ease;
    }

.demo-error-signup:hover {
        background: var(--primary-dark, #6d28d9);
        color: white;
        text-decoration: none;
    }

/* Compact CTA */
    .demo-cta-compact {
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
        text-align: center;
    }

.demo-cta-compact .btn {
        padding: var(--space-2) var(--space-5);
    }

/* Compact row styles */
    .demo-row {
        display: flex;
        align-items: center;
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--border);
        gap: var(--space-3);
        transition: background var(--transition-fast) ease;
    }

.demo-row:last-child {
        border-bottom: none;
    }

.demo-row:hover {
        background: var(--background);
    }

.demo-row-slug {
        font-weight: 600;
        font-size: var(--font-body-sm);
        color: var(--text-primary);
        min-width: 100px;
    }

.demo-row-meta {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-shrink: 0;
    }

.demo-row-chars {
        font-size: var(--font-body-xs);
        color: var(--text-tertiary);
        white-space: nowrap;
    }

.demo-row-status {
        font-size: var(--font-body-xs);
        font-weight: 600;
        width: 16px;
        text-align: center;
    }

.demo-row-status.available {
        color: var(--success);
    }

.demo-row-status.taken {
        color: var(--error, #ef4444);
    }

.demo-row-reason {
        font-size: var(--font-body-xs);
        color: var(--text-tertiary);
        margin-left: auto;
        white-space: nowrap;
    }

/* Workflow Demo Section */
    .ai-demo-section {
        background: var(--gradient-section);
    }

/* Accessible label for the demo input; visually-hidden lives only in dashboard.css. */
.slug-demo-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* State toggling. Home defines a global .hidden in its own <style> block; other pages have no such rule, so
   without this every demo state (loading, error, result) renders at once. Scoped to the widget. */
[data-slug-demo-root] .hidden {
    display: none !important;
}

/* dev-0201: rows are buttons now; the picked one carries to the dashboard. */
.demo-row-selectable {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.demo-row-selectable:disabled {
    cursor: default;
    opacity: 0.6;
}

.demo-row-selectable.selected {
    background: var(--primary-light);
    box-shadow: inset 3px 0 0 var(--primary);
}

.demo-row-selectable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}