/* =========================================================================
   BRACIC Interactive — front-end styles
   Uses brand palette CSS variables defined by BRACIC Core plugin:
   --bracic-accent (teal), --bracic-canvas (cream), --bracic-ink (text),
   --bracic-surface (sand), --bracic-accent-2 (sky blue), etc.
   ========================================================================= */

/* === BREATHING EXERCISE ============================================== */

.bracic-breathing {
        background: var(--bracic-surface, #F1ECDA);
        border-radius: 20px;
        padding: 3rem 2rem;
        text-align: center;
        border: 1px solid var(--bracic-hairline, #D9CFB8);
        max-width: 640px;
        margin: 2rem auto;
}

.bracic-breathing-header {
        margin-bottom: 2.5rem;
}

.bracic-breathing-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--bracic-ink, #1A2828);
        margin: 0 0 0.5rem 0;
}

.bracic-breathing-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        color: var(--bracic-ink-soft, #2E4544);
        line-height: 1.5;
        max-width: 480px;
        margin: 0 auto;
}

.bracic-breathing-stage {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 280px;
        margin-bottom: 2rem;
}

.bracic-breathing-circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--bracic-accent, #265655) 0%, var(--bracic-accent-hi, #3A7575) 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--bracic-canvas, #F8F8E8);
        box-shadow: 0 8px 32px rgba(38, 86, 85, 0.25);
        transition: transform 4000ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 4000ms ease;
        transform: scale(1);
}

.bracic-breathing-circle.is-inhaling {
        transform: scale(1.25);
        box-shadow: 0 12px 48px rgba(38, 86, 85, 0.35);
}

.bracic-breathing-circle.is-exhaling {
        transform: scale(0.85);
        box-shadow: 0 4px 16px rgba(38, 86, 85, 0.15);
}

.bracic-breathing-circle.is-holding {
        transform: scale(1.25);
        box-shadow: 0 12px 48px rgba(38, 86, 85, 0.30);
}

.bracic-breathing-phase {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        opacity: 0.85;
}

.bracic-breathing-count {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 3rem;
        font-weight: 500;
        line-height: 1;
        margin-top: 0.25rem;
}

.bracic-breathing-instruction {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        color: var(--bracic-ink-soft, #2E4544);
        line-height: 1.5;
        min-height: 3rem;
        max-width: 480px;
        margin: 0 auto 2rem;
        padding: 1rem 1.5rem;
        background: var(--bracic-soft-tint, #C4EDF8);
        border-radius: 12px;
        border: 1px solid rgba(38, 86, 85, 0.15);
}

.bracic-breathing-controls {
        margin-bottom: 1.5rem;
}

.bracic-breathing-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        background: var(--bracic-accent, #265655);
        color: var(--bracic-canvas, #F8F8E8);
        border: 2px solid var(--bracic-accent, #265655);
        border-radius: 999px;
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.75rem 2rem;
        cursor: pointer;
        transition: all 180ms ease;
}

.bracic-breathing-toggle:hover {
        background: var(--bracic-accent-hi, #3A7575);
        border-color: var(--bracic-accent-hi, #3A7575);
        transform: translateY(-1px);
}

.bracic-breathing-toggle-pause { display: none; }
.bracic-breathing.is-running .bracic-breathing-toggle-play { display: none; }
.bracic-breathing.is-running .bracic-breathing-toggle-pause { display: inline; }

.bracic-breathing-note {
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        color: var(--bracic-muted, #6B5D52);
        line-height: 1.5;
        max-width: 440px;
        margin: 1.5rem auto 0;
        opacity: 0.85;
}

/* === SAFETY PLAN ===================================================== */

.bracic-safety-plan {
        background: var(--bracic-canvas, #F8F8E8);
        border: 1px solid var(--bracic-hairline, #D9CFB8);
        border-radius: 20px;
        padding: 2.5rem;
        max-width: 800px;
        margin: 2rem auto;
        box-shadow: 0 4px 24px rgba(26, 40, 40, 0.06);
}

.bracic-safety-plan-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--bracic-hairline, #D9CFB8);
        flex-wrap: wrap;
}

.bracic-safety-plan-heading {
        flex: 1;
        min-width: 250px;
}

.bracic-safety-plan-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--bracic-ink, #1A2828);
        margin: 0 0 0.5rem 0;
}

.bracic-safety-plan-desc {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        color: var(--bracic-ink-soft, #2E4544);
        line-height: 1.55;
        margin: 0;
}

.bracic-safety-plan-desc strong {
        color: var(--bracic-accent, #265655);
}

.bracic-safety-plan-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
}

.bracic-safety-plan-toggle,
.bracic-safety-plan-reset {
        background: transparent;
        border: 1px solid var(--bracic-hairline, #D9CFB8);
        color: var(--bracic-ink-soft, #2E4544);
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: all 180ms ease;
}

.bracic-safety-plan-toggle:hover {
        border-color: var(--bracic-accent, #265655);
        color: var(--bracic-accent, #265655);
}

.bracic-safety-plan-reset:hover {
        border-color: var(--bracic-crisis, #642828);
        color: var(--bracic-crisis, #642828);
}

.bracic-safety-plan-toggle-show { display: none; }
.bracic-safety-plan.is-hidden .bracic-safety-plan-toggle-hide { display: none; }
.bracic-safety-plan.is-hidden .bracic-safety-plan-toggle-show { display: inline; }

.bracic-safety-plan-form {
        display: grid;
        gap: 1.75rem;
}

.bracic-safety-plan.is-hidden .bracic-safety-plan-form {
        display: none;
}

.bracic-safety-plan-field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
}

.bracic-safety-plan-label {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        color: var(--bracic-ink, #1A2828);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
}

.bracic-safety-plan-hint {
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--bracic-muted, #6B5D52);
}

.bracic-safety-plan-form textarea,
.bracic-safety-plan-form input[type="text"] {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        color: var(--bracic-ink, #1A2828);
        background: #FFFFFF;
        border: 1px solid var(--bracic-hairline, #D9CFB8);
        border-radius: 10px;
        padding: 0.85rem 1rem;
        line-height: 1.5;
        resize: vertical;
        transition: border-color 150ms ease;
}

.bracic-safety-plan-form textarea:focus,
.bracic-safety-plan-form input[type="text"]:focus {
        outline: none;
        border-color: var(--bracic-accent, #265655);
        box-shadow: 0 0 0 3px rgba(38, 86, 85, 0.12);
}

.bracic-safety-plan-contacts {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
}

.bracic-safety-plan-contact-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 0.75rem;
        align-items: center;
}

.bracic-safety-plan-contact-row input {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        padding: 0.7rem 0.9rem;
}

.bracic-safety-plan-contact-remove {
        background: transparent;
        border: 1px solid var(--bracic-hairline, #D9CFB8);
        color: var(--bracic-muted, #6B5D52);
        border-radius: 8px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        font-size: 1.2rem;
        line-height: 1;
        transition: all 150ms ease;
}

.bracic-safety-plan-contact-remove:hover {
        border-color: var(--bracic-crisis, #642828);
        color: var(--bracic-crisis, #642828);
}

.bracic-safety-plan-add-contact {
        background: transparent;
        border: 1px dashed var(--bracic-accent, #265655);
        color: var(--bracic-accent, #265655);
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.6rem 1.2rem;
        cursor: pointer;
        transition: all 180ms ease;
        align-self: flex-start;
}

.bracic-safety-plan-add-contact:hover {
        background: rgba(38, 86, 85, 0.06);
        border-style: solid;
}

.bracic-safety-plan-save-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 0.5rem;
}

.bracic-safety-plan-save {
        background: var(--bracic-accent, #265655);
        color: var(--bracic-canvas, #F8F8E8);
        border: 2px solid var(--bracic-accent, #265655);
        border-radius: 999px;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.75rem 1.8rem;
        cursor: pointer;
        transition: all 180ms ease;
}

.bracic-safety-plan-save:hover {
        background: var(--bracic-accent-hi, #3A7575);
        border-color: var(--bracic-accent-hi, #3A7575);
        transform: translateY(-1px);
}

.bracic-safety-plan-saved {
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        color: var(--bracic-healing, #5C7A5C);
        font-weight: 600;
        opacity: 0;
        transition: opacity 300ms ease;
}

.bracic-safety-plan-saved.is-visible {
        opacity: 1;
}

.bracic-safety-plan-hidden-message {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        color: var(--bracic-muted, #6B5D52);
        text-align: center;
        padding: 2rem;
        font-style: italic;
}

.bracic-safety-plan.is-hidden .bracic-safety-plan-hidden-message {
        display: block;
}

.bracic-safety-plan[hidden] .bracic-safety-plan-hidden-message {
        display: none;
}

/* === GROUNDING EXERCISE ============================================== */

.bracic-grounding {
        background: var(--bracic-surface, #F1ECDA);
        border: 1px solid var(--bracic-hairline, #D9CFB8);
        border-radius: 20px;
        padding: 3rem 2.5rem;
        max-width: 720px;
        margin: 2rem auto;
        text-align: center;
}

.bracic-grounding-header {
        margin-bottom: 2.5rem;
}

.bracic-grounding-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--bracic-ink, #1A2828);
        margin: 0 0 0.5rem 0;
}

.bracic-grounding-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        color: var(--bracic-ink-soft, #2E4544);
        line-height: 1.55;
        max-width: 520px;
        margin: 0 auto;
}

.bracic-grounding-progress {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 2.5rem;
}

.bracic-grounding-dot {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--bracic-canvas, #F8F8E8);
        border: 2px solid var(--bracic-hairline, #D9CFB8);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: 1rem;
        font-weight: 700;
        color: var(--bracic-muted, #6B5D52);
        transition: all 250ms ease;
}

.bracic-grounding-dot.is-active {
        background: var(--bracic-accent, #265655);
        border-color: var(--bracic-accent, #265655);
        color: var(--bracic-canvas, #F8F8E8);
        transform: scale(1.1);
}

.bracic-grounding-dot.is-complete {
        background: var(--bracic-healing, #5C7A5C);
        border-color: var(--bracic-healing, #5C7A5C);
        color: var(--bracic-canvas, #F8F8E8);
}

.bracic-grounding-stages {
        position: relative;
        min-height: 220px;
        margin-bottom: 2rem;
}

.bracic-grounding-stage {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        animation: bracic-fade-in 400ms ease;
}

.bracic-grounding-stage.is-active {
        display: flex;
}

@keyframes bracic-fade-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
}

.bracic-grounding-stage-number {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--bracic-accent, #265655);
        color: var(--bracic-canvas, #F8F8E8);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 2.5rem;
        font-weight: 500;
        box-shadow: 0 8px 24px rgba(38, 86, 85, 0.25);
}

.bracic-grounding-stage-body {
        max-width: 480px;
}

.bracic-grounding-stage-label {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--bracic-ink, #1A2828);
        margin: 0 0 0.75rem 0;
}

.bracic-grounding-stage-desc {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        color: var(--bracic-ink-soft, #2E4544);
        line-height: 1.6;
        margin: 0 0 1rem 0;
}

.bracic-grounding-stage-prompt {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        color: var(--bracic-accent, #265655);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0;
}

.bracic-grounding-complete {
        text-align: center;
        padding: 2rem 0;
}

.bracic-grounding-complete h3 {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 2rem;
        font-weight: 500;
        color: var(--bracic-accent, #265655);
        margin: 0 0 1rem 0;
}

.bracic-grounding-complete p {
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        color: var(--bracic-ink-soft, #2E4544);
        line-height: 1.6;
        max-width: 480px;
        margin: 0 auto;
}

.bracic-grounding-controls {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
}

.bracic-grounding-prev,
.bracic-grounding-next,
.bracic-grounding-restart {
        background: var(--bracic-accent, #265655);
        color: var(--bracic-canvas, #F8F8E8);
        border: 2px solid var(--bracic-accent, #265655);
        border-radius: 999px;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.75rem 1.8rem;
        cursor: pointer;
        transition: all 180ms ease;
}

.bracic-grounding-prev {
        background: transparent;
        color: var(--bracic-ink-soft, #2E4544);
        border-color: var(--bracic-hairline, #D9CFB8);
}

.bracic-grounding-prev:hover:not(:disabled) {
        border-color: var(--bracic-accent, #265655);
        color: var(--bracic-accent, #265655);
}

.bracic-grounding-next:hover,
.bracic-grounding-restart:hover {
        background: var(--bracic-accent-hi, #3A7575);
        border-color: var(--bracic-accent-hi, #3A7575);
        transform: translateY(-1px);
}

.bracic-grounding-prev:disabled {
        opacity: 0.4;
        cursor: not-allowed;
}

/* === MOBILE RESPONSIVE =============================================== */

@media (max-width: 768px) {
        .bracic-breathing,
        .bracic-safety-plan,
        .bracic-grounding {
                padding: 2rem 1.25rem;
        }

        .bracic-breathing-circle {
                width: 160px;
                height: 160px;
        }

        .bracic-breathing-count {
                font-size: 2.5rem;
        }

        .bracic-safety-plan-contact-row {
                grid-template-columns: 1fr;
        }

        .bracic-safety-plan-contact-remove {
                width: auto;
                height: auto;
                padding: 0.5rem 1rem;
        }

        .bracic-grounding-stage-number {
                width: 64px;
                height: 64px;
                font-size: 2rem;
        }
}

/* === REDUCED MOTION ================================================== */

@media (prefers-reduced-motion: reduce) {
        .bracic-breathing-circle,
        .bracic-grounding-stage {
                transition: none !important;
                animation: none !important;
        }
}

/* === EDITOR PLACEHOLDER (only visible in the block editor) =========== */

.bracic-block-placeholder {
        background: #F1ECDA;
        border: 2px dashed #265655;
        border-radius: 16px;
        padding: 2.5rem;
        text-align: center;
        font-family: 'Inter', sans-serif;
}

.bracic-block-placeholder-icon {
        font-size: 3rem;
        color: #265655;
        margin-bottom: 1rem;
        line-height: 1;
}

.bracic-block-placeholder h3 {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.4rem;
        font-weight: 600;
        color: #1A2828;
        margin: 0 0 0.5rem 0;
}

.bracic-block-placeholder p {
        font-size: 0.9rem;
        color: #2E4544;
        line-height: 1.5;
        margin: 0 0 0.5rem 0;
}

.bracic-block-placeholder-note {
        font-size: 0.8rem !important;
        color: #6B5D52 !important;
        font-style: italic;
        margin-top: 1rem !important;
}