/* ==========================================================================
   ANALYZER — AI Text Analyzer
   Styles for the input form, loading state, results display, and error state.
   ========================================================================== */

/* ── Section spacing overrides ──
   Tighten the gaps between hero → steps → input so they read as one unit. */
#analyzer-hero {
    padding-bottom: var(--space-4);
}

#analyzer-how {
    padding-block: var(--space-6) var(--space-8);
}

#analyzer-input-section {
    padding-top: 0;
}


/* ── How-it-works steps ── */
.analyzer-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-4);
}

.analyzer-step {
    padding: var(--space-6);
}

.analyzer-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-4);
    background: var(--gradient-accent);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: #fff;
}

.analyzer-step h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-2);
}

.analyzer-step p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}


/* ── Input card ── */
.analyzer-card {
    max-width: 48rem;
    margin: 0 auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.analyzer-textarea {
    width: 100%;
    min-height: 10rem;
    resize: vertical;
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
}

.analyzer-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.analyzer-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}

.analyzer-char-count {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
}

.analyzer-char-count.is-warning {
    color: var(--color-warning);
}

.analyzer-char-count.is-danger {
    color: var(--color-error);
}

.analyzer-submit {
    width: 100%;
    justify-content: center;
}

.analyzer-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}


/* ── Example prompts ── */
.analyzer-examples {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.analyzer-examples-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.analyzer-example-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.analyzer-example-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.analyzer-example-btn:hover {
    color: var(--color-accent-hover);
    border-color: var(--color-accent);
    background: var(--color-bg-hover);
}


/* ── Loading state ── */
.analyzer-state {
    padding: var(--space-12) 0;
}

.analyzer-loading-card {
    max-width: 28rem;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-12) var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    animation: analyzerFadeIn var(--duration-slow) var(--ease-out) both;
}

.analyzer-spinner {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto var(--space-6);
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-full);
    animation: analyzerSpin 0.8s linear infinite;
}

@keyframes analyzerSpin {
    to { transform: rotate(360deg); }
}

.analyzer-loading-text {
    font-size: var(--text-lg);
    font-weight: 500;
    color: #fff;
    margin-bottom: var(--space-2);
}

.analyzer-loading-dots::after {
    content: '';
    animation: analyzerDots 1.5s steps(4, end) infinite;
}

@keyframes analyzerDots {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.analyzer-loading-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* ── Error state ── */
.analyzer-error-card {
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
    animation: analyzerFadeIn var(--duration-slow) var(--ease-out) both;
}

.analyzer-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-4);
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-error);
}

.analyzer-error-card p {
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--space-6);
    line-height: var(--leading-normal);
}


/* ── Results ── */
.analyzer-results-inner {
    max-width: 56rem;
    margin: 0 auto;
    animation: analyzerFadeIn var(--duration-slow) var(--ease-out) both;
}

/* Summary block */
.analyzer-summary {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
}

.analyzer-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.analyzer-summary-header h2 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: #fff;
}

.analyzer-summary p {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

/* Badges (complexity, impact, effort) */
.analyzer-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.analyzer-badge-high,
.analyzer-badge-large {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.analyzer-badge-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.analyzer-badge-low,
.analyzer-badge-small {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Section headings inside results */
.analyzer-section-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-4);
}

/* Opportunity cards grid */
.analyzer-opps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.analyzer-opp-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    animation: analyzerCardIn var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--card-index, 0) * 100ms);
}

.analyzer-opp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.analyzer-opp-card-header h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
}

.analyzer-opp-card p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
}

/* Category tags */
.analyzer-category-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-radius: var(--radius-sm);
    color: #fff;
}

@keyframes analyzerCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Quick wins */
.analyzer-quick-wins {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
}

.analyzer-quick-wins ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.analyzer-quick-wins li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

.analyzer-quick-wins li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}

/* Approach / suggested next steps */
.analyzer-approach {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
}

.analyzer-approach-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.analyzer-approach p {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

/* CTA after results */
.analyzer-cta {
    text-align: center;
    padding: var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.analyzer-cta h2 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-2);
}

.analyzer-cta p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.analyzer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}


/* ── Disclaimer ── */
.analyzer-disclaimer-section {
    padding-top: 0;
}

.analyzer-disclaimer {
    max-width: 40rem;
    margin: 0 auto;
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    text-align: center;
    line-height: var(--leading-normal);
}


/* ── Shared animation ── */
@keyframes analyzerFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Responsive ── */
@media (max-width: 48em) {
    .analyzer-steps {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .analyzer-card {
        padding: var(--space-6);
    }

    .analyzer-input-footer {
        flex-direction: column;
        gap: var(--space-1);
    }

    .analyzer-char-count {
        align-self: flex-end;
    }

    .analyzer-summary,
    .analyzer-quick-wins,
    .analyzer-approach,
    .analyzer-cta {
        padding: var(--space-6);
    }

    .analyzer-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .analyzer-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}