/* qda-phen-mode-a.css — Mode A page styles (Phase 3 Slice 1).
 * Layout: sticky stepper sidebar (left) + scrollable detail panel (right).
 * Mobile (< 900px): stack vertical.
 *
 * Token migration (Round 3 Fase 2A): hardcoded literals → design system tokens
 *   (var(--bg-base|surface|elevated|...), var(--color-*), var(--text-*),
 *   var(--border-*), var(--radius-*)). Light-mode theme-aware via body.theme-light.
 */

.phen-mode-a-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

.phen-mode-a-header {
    background: var(--bg-surface);
    border-radius: var(--radius-md, 12px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.phen-mode-a-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.phen-mode-pill-a {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.18));
    color: var(--color-secondary);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-sm, 4px);
    font-weight: 500;
    font-size: 0.85rem;
}

body.theme-light .phen-mode-pill-a,
[data-theme="light"] .phen-mode-pill-a {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.12));
    color: var(--color-secondary);
}

.phen-mode-a-header h1 {
    margin: 0.5rem 0 0.25rem 0;
    color: var(--text-primary);
}

.phen-mode-a-authors {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.92rem;
}

.phen-mode-a-progress {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.phen-mode-a-progress-bar-container {
    flex: 1 1 auto;
    height: 10px;
    background: var(--bg-elevated);
    border-radius: 5px;
    overflow: hidden;
}

.phen-mode-a-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    transition: width 0.4s ease;
}

.phen-mode-a-progress-text {
    font-weight: 600;
    color: var(--text-primary);
}

.phen-mode-a-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .phen-mode-a-layout {
        grid-template-columns: 1fr;
    }
}

/* Stepper sidebar */
.phen-mode-a-stepper {
    background: var(--bg-surface);
    border-radius: var(--radius-md, 12px);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.phen-mode-a-stepper h3 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.phen-stepper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.phen-step-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.phen-step-item:hover {
    background: var(--bg-surface-hover);
}

.phen-step-current {
    border-color: var(--color-primary);
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.1));
    font-weight: 600;
}

.phen-step-locked .phen-step-icon { color: var(--color-success); }
.phen-step-pending .phen-step-icon { color: var(--text-muted); }
.phen-step-user_decided .phen-step-icon { color: var(--color-accent); }
.phen-step-ai_suggested .phen-step-icon { color: var(--color-warning); }

.phen-step-num {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.phen-step-current .phen-step-num {
    background: var(--color-primary);
    color: #fff;
}

.phen-step-icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

.phen-step-name {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.phen-step-critical-marker {
    color: var(--color-warning);
    font-size: 0.9rem;
}

.phen-step-item small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.phen-stepper-loading {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* Detail panel */
.phen-mode-a-detail {
    min-height: 400px;
}

.phen-mode-a-placeholder {
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-surface);
    border-radius: var(--radius-md, 12px);
}

.phen-checkpoint-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md, 12px);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.phen-checkpoint-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.phen-step-num-large {
    background: var(--color-primary);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.phen-checkpoint-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.phen-meta-critical {
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-warning);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.78rem;
    font-weight: 500;
}

.phen-meta-reflection {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.18));
    color: var(--color-accent);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.78rem;
}

.phen-meta-no-accept-all {
    background: rgba(239, 68, 68, 0.18);
    color: var(--color-danger);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.78rem;
}

.phen-checkpoint-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 6px 6px 0;
}

.phen-checkpoint-ai-area,
.phen-checkpoint-output-area,
.phen-checkpoint-reflection-area {
    margin-bottom: 1.5rem;
}

.phen-checkpoint-ai-area h3,
.phen-checkpoint-output-area h3,
.phen-checkpoint-reflection-area h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.phen-ai-suggestion-empty {
    background: var(--bg-elevated);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm, 8px);
    border: 1px dashed var(--border-default);
}

.phen-ai-placeholder-text {
    color: var(--text-muted);
    font-style: italic;
    margin: 0.5rem 0;
}

.phen-ai-tokens-estimate {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-ai-suggestion-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem 1.25rem;
}

.phen-ai-confidence {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.phen-ai-output {
    background: var(--bg-surface);
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.phen-final-output-input,
.phen-reflection-input {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    resize: vertical;
}

.phen-final-output-input:focus,
.phen-reflection-input:focus {
    border-color: var(--border-focus);
    outline: none;
}

.phen-checkpoint-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0.25rem 0 0.5rem 0;
}

.phen-word-count {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.25rem;
}

.phen-checkpoint-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-locked-info {
    color: var(--color-success);
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
}

.phen-checkpoint-unlock-warning {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border-radius: 6px;
    font-size: 0.85rem;
}

.btn-success {
    background: var(--color-success);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-success:disabled {
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: not-allowed;
}

.btn-warning {
    background: var(--color-warning);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

/* Toast */
.phen-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s;
    z-index: 9999;
    border-left: 4px solid var(--color-primary);
}

.phen-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.phen-toast-success { border-left-color: var(--color-success); }
.phen-toast-warning { border-left-color: var(--color-warning); }
.phen-toast-error { border-left-color: var(--color-danger); }

.phen-mode-pill-a {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.18));
    color: var(--color-secondary);
}

/* ============================================================
   Phase 3 Slice 2: AI Suggestion + Bracketing Coach UI
   ============================================================ */

.phen-ai-suggestion-card {
    background: var(--bg-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm, 8px);
    padding: 16px;
    margin: 12px 0;
}

.phen-ai-suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.phen-ai-suggestion-header h3 {
    margin: 0;
    font-size: 16px;
}

.phen-ai-confidence {
    background: var(--color-primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-md, 12px);
    font-size: 12px;
    font-weight: 600;
}

.phen-ai-output {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 10px;
    max-height: 280px;
    overflow-y: auto;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 8px 0;
}

.phen-ai-action-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.phen-ai-manual-only {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.3);
}

.phen-ai-tokens-estimate {
    color: var(--text-muted);
    font-size: 12px;
    margin: 6px 0;
}

/* Bracketing Coach Modal */
.phen-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.phen-bracketing-coach-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-md, 12px);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.phen-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-default);
}

.phen-modal-header h2 {
    margin: 0;
    font-size: 18px;
}

.phen-modal-close {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.phen-modal-close:hover {
    color: var(--color-primary);
}

.phen-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.phen-bracketing-intro {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.08));
    border-left: 3px solid var(--color-primary);
    padding: 10px 14px;
    margin: 0 0 16px 0;
    border-radius: var(--radius-sm, 4px);
    font-size: 13px;
    line-height: 1.6;
}

.phen-bracketing-field {
    margin-bottom: 18px;
}

.phen-bracketing-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}

.phen-bracketing-hint {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 0 6px 0;
    font-style: italic;
}

.phen-bracketing-field textarea {
    width: 100%;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

.phen-bracketing-field textarea:focus {
    outline: none;
    border-color: var(--border-focus);
}

.phen-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-info {
    background: var(--color-secondary);
    color: #fff;
    border: none;
}

.btn-info:hover {
    background: var(--color-primary);
}

/* ============================================================
   Phase 3 Slice 3: Sub-pendekatan Specific UIs
   ============================================================ */

/* van Manen 4 Existentials Matrix */
.phen-existentials-area {
    margin: 1rem 0;
}

.phen-existentials-matrix {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-existentials-header h3 {
    margin-top: 0;
}

.phen-existentials-intro {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.phen-existentials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 760px) {
    .phen-existentials-grid { grid-template-columns: 1fr; }
}

.phen-existential-column {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.05));
    border: 2px solid var(--c-app-accent-soft, rgba(6, 182, 212, 0.2));
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
    min-height: 280px;
    transition: all 0.15s;
}

.phen-existential-column.phen-drop-hover {
    border-color: var(--color-secondary);
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.12));
    transform: scale(1.01);
}

.phen-existential-column-title {
    color: var(--color-secondary);
    margin: 0 0 0.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.98rem;
}

.phen-existential-count {
    background: var(--color-secondary);
    color: #fff;
    border-radius: var(--radius-md, 12px);
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.phen-existential-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0 0 0.75rem 0;
    font-style: italic;
}

.phen-existential-themes-list {
    min-height: 100px;
    margin-bottom: 0.75rem;
}

.phen-existential-empty-state {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    border: 1px dashed var(--border-default);
    border-radius: 6px;
    font-size: 0.85rem;
}

.phen-theme-card-draggable {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.15s;
}

.phen-theme-card-draggable:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.phen-theme-card-draggable.phen-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.phen-theme-card-content {
    flex: 1;
    min-width: 0;
}

.phen-theme-card-content strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.phen-theme-card-content p {
    margin: 0.2rem 0 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.phen-theme-assign-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    font-size: 1.2rem;
    border-radius: var(--radius-sm, 4px);
    line-height: 1;
}

.phen-theme-assign-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.phen-existential-description {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.85rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    resize: vertical;
    font-family: inherit;
}

.phen-existentials-unassigned {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-default);
}

.phen-existentials-themes-pool {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    min-height: 60px;
}

.phen-existentials-themes-pool.phen-drop-hover {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.06));
    outline: 2px dashed var(--color-primary);
    border-radius: 6px;
}

.phen-existentials-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-existentials-ai-toggle {
    margin-bottom: 1rem;
}

.phen-existentials-ai-toggle summary {
    cursor: pointer;
    color: var(--color-primary);
    padding: 0.4rem 0;
}

/* IPA Idiographic */
.phen-subapproach-top-panel {
    max-width: 1280px;
    margin: 0 auto 1rem auto;
    padding: 0 1rem;
}

.phen-idiographic {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
    border: 1px solid var(--border-default);
}

.phen-idio-header h3 {
    margin-top: 0;
}

.phen-idio-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.phen-idio-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-default);
}

.phen-idio-tab {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    font-size: 0.85rem;
    transition: all 0.15s;
    min-width: 90px;
}

.phen-idio-tab:hover {
    border-color: var(--color-primary);
}

.phen-idio-tab.active {
    border-color: var(--color-primary);
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.08));
    font-weight: 600;
}

.phen-idio-tab.completed {
    border-color: var(--color-success);
    background: rgba(16, 185, 129, 0.08);
    color: var(--color-success);
}

.phen-idio-tab small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: normal;
}

.phen-idio-cycle-progress {
    margin: 1rem 0;
}

.phen-idio-cycle-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.phen-idio-cycle-list li {
    padding: 0.4rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.phen-idio-cycle-list li.completed {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

.phen-idio-completed-banner,
.phen-idio-cross-case-ready {
    padding: 0.6rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border-radius: 6px;
    font-weight: 500;
    margin: 0.75rem 0;
    border-left: 3px solid var(--color-success);
}

.phen-idio-need-complete {
    color: var(--text-muted);
    font-style: italic;
    margin: 0.5rem 0;
}

.phen-idio-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.btn-warning {
    background: var(--color-warning);
    color: #fff;
    border: none;
}

.btn-warning:hover {
    background: #d68f1a;
}

/* Giorgi Transformation Pair */
.phen-transformation-pair {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-transformation-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.phen-transformation-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.phen-tr-col-header {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.88rem;
}

.phen-transformation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-default);
    align-items: stretch;
}

.phen-tr-original {
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 4px);
    font-style: italic;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.phen-tr-transformed textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

@media (max-width: 700px) {
    .phen-transformation-header,
    .phen-transformation-row {
        grid-template-columns: 1fr;
    }
}

.phen-transformation-stats {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* ============================================================
   Phase 3 Slice 4: Mode A header actions + Mobile Polish
   ============================================================ */

.phen-mode-a-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    align-items: center;
}

.phen-mode-a-actions a.btn,
.phen-mode-a-actions button.btn {
    text-decoration: none;
}

.phen-handoff-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--color-warning);
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm, 4px);
    font-size: 13px;
    line-height: 1.5;
}

.phen-banner-handoff {
    margin-left: 0.4rem;
    white-space: nowrap;
}

.phen-mobile-stepper-toggle {
    display: none;  /* Show only on mobile via media query */
}

/* Mobile breakpoint <760px */
@media (max-width: 760px) {
    .phen-mode-a-layout {
        grid-template-columns: 1fr;
    }

    .phen-mode-a-stepper {
        position: relative;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-default);
    }

    .phen-mode-a-stepper.phen-stepper-mobile-open {
        max-height: 60vh;
        overflow-y: auto;
        padding: 1rem;
    }

    .phen-mobile-stepper-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .phen-mode-a-detail {
        padding: 0.75rem;
    }

    /* Existentials: stack 4 columns vertically */
    .phen-existentials-grid {
        grid-template-columns: 1fr !important;
    }

    .phen-existential-column {
        min-height: 200px;
    }

    .phen-existentials-themes-pool {
        grid-template-columns: 1fr;
    }

    /* IPA tabs: horizontal scroll instead of wrap */
    .phen-idio-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
    }

    .phen-idio-tab {
        flex-shrink: 0;
        min-width: 110px;
    }

    /* Giorgi transformation pair: stack vertical */
    .phen-transformation-header,
    .phen-transformation-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .phen-tr-col-header {
        font-size: 0.78rem;
    }

    /* Tap targets min 44x44 */
    .phen-theme-card-draggable,
    .phen-idio-tab,
    button.btn,
    .phen-step-item {
        min-height: 44px;
    }

    .phen-theme-assign-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.4rem;
    }

    /* Prevent iOS auto-zoom */
    textarea,
    input[type="text"],
    input[type="number"],
    select {
        font-size: 16px !important;
    }

    /* Header actions full-width buttons */
    .phen-mode-a-actions {
        width: 100%;
    }

    .phen-mode-a-actions .btn-sm {
        flex: 1;
        min-width: 130px;
    }

    /* Bracketing coach modal: full-screen on mobile */
    .phen-bracketing-coach-modal {
        max-height: 100vh;
        border-radius: 0;
    }

    /* Stepper item readability */
    .phen-step-item {
        padding: 0.65rem 0.5rem;
        font-size: 0.92rem;
    }
}

/* Auto-collapse stepper on mobile by default — open via toggle */
@media (max-width: 760px) {
    .phen-mode-a-stepper {
        display: none;
    }

    .phen-mode-a-stepper.phen-stepper-mobile-open {
        display: block;
    }
}

/* ============================================================
   Phase 3C: Tier 1 Descriptive Custom UIs
   ============================================================ */

/* Generic prerequisite warning */
.phen-prerequisite-warning {
    padding: 1.25rem;
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--color-warning);
    border-radius: 6px;
    margin: 1rem 0;
}

.phen-prerequisite-warning h3 {
    margin-top: 0;
    color: var(--color-warning);
}

/* Moustakas Triple-Pane */
.phen-moustakas-triple-pane {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-triple-pane-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.phen-triple-pane-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.phen-pane {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.phen-pane-textural { border-color: var(--color-primary); }
.phen-pane-structural { border-color: var(--color-secondary); }
.phen-pane-composite { border-color: var(--color-success); border-width: 2px; }

.phen-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.phen-pane-header h4 { margin: 0; font-size: 0.95rem; }

.phen-pane-locked-badge,
.phen-pane-status-badge {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted);
    border-radius: var(--radius-md, 12px);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.phen-pane-status-badge { color: var(--color-success); background: rgba(16, 185, 129, 0.1); }

.phen-pane-hint {
    color: var(--text-muted);
    font-size: 11.5px;
    font-style: italic;
    margin: 0 0 0.5rem 0;
}

.phen-pane-content {
    padding: 0.5rem 0.6rem;
    background: rgba(148, 163, 184, 0.04);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.85rem;
    line-height: 1.5;
    flex: 1;
    overflow-y: auto;
    max-height: 280px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.phen-pane-readonly { background: rgba(148, 163, 184, 0.04); color: var(--text-primary); }

.phen-pane-editable {
    width: 100%;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
    line-height: 1.5;
}

.phen-pane-ai-toggle {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.phen-pane-ai-toggle summary { cursor: pointer; color: var(--color-warning); padding: 4px 0; }

.phen-pane-ai-content {
    background: rgba(245, 158, 11, 0.06);
    border-left: 3px solid var(--color-warning);
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    margin: 0.4rem 0;
    border-radius: var(--radius-sm, 4px);
    max-height: 180px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.phen-pane-word-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 0.4rem;
    text-align: right;
}

.phen-moustakas-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .phen-triple-pane-grid {
        grid-template-columns: 1fr;
    }
}

/* Colaizzi 7-Step + Member Validation */
.phen-colaizzi-7step {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
}

.phen-colaizzi-7step h4 { margin: 0 0 0.5rem 0; }

.phen-colaizzi-steps {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
}

.phen-colaizzi-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    font-size: 11.5px;
    min-width: 110px;
    flex-shrink: 0;
}

.phen-colaizzi-step-completed { border-color: var(--color-success); background: rgba(16, 185, 129, 0.08); color: var(--color-success); }
.phen-colaizzi-step-current { border-color: var(--color-primary); background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.1)); font-weight: 600; }
.phen-colaizzi-step-pending { opacity: 0.6; }

.phen-colaizzi-step-num {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.phen-colaizzi-step-label { text-align: center; line-height: 1.3; }

.phen-colaizzi-citation {
    color: var(--text-muted);
    font-size: 11.5px;
    margin: 0.5rem 0 0 0;
}

.phen-colaizzi-validation {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-colaizzi-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.phen-colaizzi-question-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.phen-colaizzi-question-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.phen-colaizzi-question-item.phen-ai-question {
    border-left: 3px solid var(--color-warning);
}

.phen-colaizzi-question-text,
.phen-colaizzi-question-text-editable {
    width: 100%;
    background: transparent;
    color: var(--text-primary);
    border: none;
    font-size: 0.9rem;
    line-height: 1.5;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 0.4rem;
}

.phen-colaizzi-question-text-editable {
    border: 1px solid var(--border-default);
    padding: 0.4rem;
    border-radius: var(--radius-sm, 4px);
}

.phen-colaizzi-question-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 11.5px;
}

.phen-colaizzi-target,
.phen-colaizzi-target-select {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted);
    border-radius: var(--radius-sm, 4px);
    padding: 2px 8px;
    font-size: 11px;
}

.phen-colaizzi-target-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 4px 8px;
}

.phen-colaizzi-add-question {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.phen-colaizzi-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.btn-icon {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: var(--radius-sm, 4px);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
}

.btn-icon:hover { background: rgba(148, 163, 184, 0.15); }
.btn-danger { color: var(--color-danger); }

/* Streubert Clinical Implications Mapper */
.phen-streubert-mapper {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-streubert-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.phen-streubert-theme-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.phen-streubert-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
}

.phen-streubert-theme-title {
    margin: 0 0 0.3rem 0;
    color: var(--color-primary);
    font-size: 1rem;
}

.phen-streubert-theme-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
}

.phen-streubert-ai-panel {
    margin-bottom: 0.75rem;
}

.phen-streubert-ai-panel summary {
    cursor: pointer;
    color: var(--color-warning);
    padding: 4px 0;
    font-size: 0.85rem;
}

.phen-streubert-ai-content {
    background: rgba(245, 158, 11, 0.06);
    border-left: 3px solid var(--color-warning);
    padding: 0.5rem 0.75rem;
    margin: 0.4rem 0;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.85rem;
    line-height: 1.4;
}

.phen-streubert-ai-content p { margin: 0.2rem 0; }

.phen-streubert-field {
    margin-bottom: 0.75rem;
}

.phen-streubert-field label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.2rem;
}

.phen-streubert-field-hint {
    color: var(--text-muted);
    font-size: 11.5px;
    margin: 0 0 0.3rem 0;
    font-style: italic;
}

.phen-streubert-textarea {
    width: 100%;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.phen-streubert-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

/* Dahlberg RLR Bridling + W-P-W */
.phen-dahlberg-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
    margin-bottom: 1rem;
}

.phen-dahlberg-wpw {
    margin-bottom: 1.5rem;
}

.phen-dahlberg-wpw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.phen-dahlberg-wpw-header h4 { margin: 0; }

.phen-dahlberg-cycle-counter {
    background: var(--color-secondary);
    color: #fff;
    border-radius: var(--radius-md, 12px);
    padding: 4px 12px;
    font-size: 0.85rem;
}

.phen-dahlberg-wpw-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.phen-dahlberg-phase {
    background: var(--bg-elevated);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s;
}

.phen-dahlberg-phase.active {
    border-color: var(--color-success);
    background: rgba(16, 185, 129, 0.08);
}

.phen-dahlberg-phase-icon { font-size: 1.5rem; }

.phen-dahlberg-phase-info { flex: 1; }
.phen-dahlberg-phase-info strong { font-size: 0.9rem; }
.phen-dahlberg-phase-info p { margin: 0; font-size: 11.5px; color: var(--text-muted); }

.phen-dahlberg-phase-current { color: var(--color-success); font-size: 1.2rem; }

.phen-dahlberg-wpw-hint {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-top: 0.5rem;
    font-style: italic;
}

@media (max-width: 760px) {
    .phen-dahlberg-wpw-phases { grid-template-columns: 1fr; }
}

.phen-dahlberg-bridling {
    border-top: 1px solid var(--border-default);
    padding-top: 1rem;
}

.phen-dahlberg-bridling-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.phen-dahlberg-bridling-header h4 { margin: 0; }

.phen-dahlberg-bridling-intro {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.phen-dahlberg-entries {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.phen-dahlberg-entry {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.phen-dahlberg-entry-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    align-items: center;
}

.phen-dahlberg-entry-meta button { margin-left: auto; }

.phen-dahlberg-entry label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 0.3rem 0 0.2rem 0;
}

.phen-dahlberg-entry-field {
    width: 100%;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

/* ============================================================
   Phase 3D PROMPT 13B — Heideggerian Hermeneutic Circle Visualizer
   ============================================================ */

.phen-heideggerian {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-heideggerian-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.phen-heideggerian-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.phen-heideggerian-circle-svg-container {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.phen-heideggerian-svg {
    width: 100%;
    max-width: 420px;
    height: auto;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem;
}

.phen-heideggerian-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.phen-heideggerian-layer {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border-left: 4px solid;
    background: var(--bg-elevated);
}

.phen-heideggerian-layer.phen-vorhabe {
    border-left-color: var(--color-primary);
}

.phen-heideggerian-layer.phen-vorsicht {
    border-left-color: var(--color-secondary);
}

.phen-heideggerian-layer.phen-vorgriff {
    border-left-color: #2a3f9c;
}

.phen-heideggerian-layer h5 {
    margin: 0 0 0.3rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.phen-heideggerian-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 0 0 0.5rem 0;
    font-style: italic;
}

.phen-heideggerian-text {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.phen-heideggerian-empty {
    padding: 1.5rem;
    text-align: center;
    background: var(--bg-elevated);
    border-radius: 6px;
    color: var(--text-muted);
    border: 1px dashed var(--border-default);
}

.phen-heideggerian-iterations {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-heideggerian-iterations h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.phen-heideggerian-iter-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
}

.phen-heideggerian-iter-card summary {
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    gap: 0.5rem;
}

.phen-iter-timestamp {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: normal;
}

.phen-iter-content {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-default);
}

.phen-iter-content h5 {
    margin: 0.5rem 0 0.3rem 0;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.phen-iter-content p {
    margin: 0 0 0.75rem 0;
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.phen-heideggerian-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
}

.phen-heideggerian-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-heideggerian-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-heideggerian-citations ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Mobile responsive — stack SVG above content */
@media (max-width: 960px) {
    .phen-heideggerian-circle-svg-container {
        grid-template-columns: 1fr;
    }
    .phen-heideggerian-svg {
        max-width: 360px;
        margin: 0 auto;
    }
}

/* ============================================================
   Phase 3D PROMPT 13C — Gadamerian Horizon Fusion Visualizer
   ============================================================ */

.phen-gadamerian {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-gadamerian-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.phen-gadamerian-intro {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.phen-gadamerian-svg-container {
    margin-bottom: 1.5rem;
}

.phen-gadamerian-svg {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem;
}

.phen-gadamerian-horizons-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.phen-gadamerian-horizon {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--bg-elevated);
}

.phen-gadamerian-horizon.phen-researcher {
    border-left: 4px solid var(--color-primary);
}

.phen-gadamerian-horizon.phen-text {
    border-left: 4px solid var(--color-warning);
}

.phen-gadamerian-horizon h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.phen-gadamerian-horizon-field {
    font-size: 0.85rem;
    margin-bottom: 0.45rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.phen-gadamerian-horizon-field strong {
    color: var(--text-muted);
    text-transform: capitalize;
    font-weight: 600;
}

.phen-gadamerian-fusion-list,
.phen-gadamerian-ai-suggestions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-gadamerian-fusion-list h4,
.phen-gadamerian-ai-suggestions h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.phen-gadamerian-ai-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 0.85rem 0;
}

.phen-fusion-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
}

.phen-fusion-card.phen-ai-suggestion {
    border-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.phen-fusion-card summary {
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.phen-fusion-card summary strong {
    flex: 1;
}

.phen-fusion-content {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.phen-fusion-aspect {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    border-left: 3px solid;
    background: var(--bg-surface);
}

.phen-fusion-aspect.phen-researcher-aspect {
    border-left-color: var(--color-primary);
}

.phen-fusion-aspect.phen-text-aspect {
    border-left-color: var(--color-warning);
}

.phen-fusion-emergent {
    padding: 0.5rem 0.75rem;
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.12));
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm, 4px);
}

.phen-fusion-aspect h6,
.phen-fusion-emergent h6 {
    margin: 0 0 0.3rem 0;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.phen-fusion-aspect p,
.phen-fusion-emergent p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.phen-fusion-adopt,
.phen-fusion-remove {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: var(--radius-sm, 4px);
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.phen-fusion-adopt:hover {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.12));
    border-color: var(--color-primary);
}

.phen-fusion-remove {
    color: var(--color-danger);
}

.phen-fusion-remove:hover {
    background: rgba(239, 68, 68, 0.12);
}

.phen-gadamerian-empty,
.phen-gadamerian-empty-fusion {
    padding: 1.5rem;
    text-align: center;
    background: var(--bg-elevated);
    border-radius: 6px;
    color: var(--text-muted);
    border: 1px dashed var(--border-default);
}

.phen-gadamerian-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.phen-gadamerian-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-gadamerian-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-gadamerian-citations ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Mobile responsive — stack horizons vertically */
@media (max-width: 760px) {
    .phen-gadamerian-horizons-content {
        grid-template-columns: 1fr;
    }
    .phen-gadamerian-actions .btn {
        flex: 1;
        min-width: 130px;
        min-height: 44px;
    }
}

/* ============================================================
   Phase 3D PROMPT 13D — Reflexive Dialogic Tracker (Finlay)
   ============================================================ */

.phen-reflex-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-reflex-header {
    margin-bottom: 1rem;
}

.phen-reflex-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.phen-reflex-title-row h3 {
    margin: 0;
    color: var(--text-primary);
}

.phen-reflex-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
}

.phen-reflex-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

/* Coverage bar */
.phen-reflex-coverage {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.85rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
}

.phen-reflex-coverage.phen-reflex-stat-ok {
    border-left-color: var(--color-success);
}

.phen-reflex-coverage.phen-reflex-stat-warn {
    border-left-color: var(--color-warning);
}

.phen-reflex-coverage-summary {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.phen-reflex-badge-ok {
    color: var(--color-success);
    margin-left: 0.5rem;
    font-size: 0.82rem;
}

.phen-reflex-badge-warn {
    color: var(--color-warning);
    margin-left: 0.5rem;
    font-size: 0.82rem;
}

.phen-reflex-variant-bars {
    display: grid;
    gap: 0.4rem;
}

.phen-reflex-variant-bar {
    display: grid;
    grid-template-columns: 1.5rem 12rem 1fr 2rem;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.phen-reflex-variant-bar-icon {
    font-size: 1rem;
    text-align: center;
}

.phen-reflex-variant-bar-label {
    color: var(--text-primary);
}

.phen-reflex-variant-bar-track {
    height: 6px;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.phen-reflex-variant-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.phen-reflex-variant-bar-count {
    color: var(--text-muted);
    text-align: right;
}

/* Voice pairs list */
.phen-reflex-pairs-list {
    display: grid;
    gap: 1rem;
}

.phen-reflex-pair {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
}

.phen-reflex-pair-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.phen-reflex-pair-num {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.88rem;
}

.phen-reflex-variant-tag {
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.78rem;
    font-weight: 500;
}

.phen-reflex-pair-delete {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--color-danger);
    border-radius: var(--radius-sm, 4px);
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-left: auto;
    font-size: 1.1rem;
    line-height: 1;
}

.phen-reflex-pair-delete:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Two-voice paired columns */
.phen-reflex-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.phen-reflex-voice {
    display: flex;
    flex-direction: column;
}

.phen-reflex-voice label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.phen-reflex-voice-participant label {
    color: var(--color-primary);
}

.phen-reflex-voice-researcher label {
    color: var(--color-warning);
}

.phen-reflex-pair-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.6rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.phen-reflex-pair-input:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: -1px;
}

/* Progressive disclosure: advanced fields hidden by default */
.phen-reflex-advanced-fields {
    display: none;
    border-top: 1px dashed var(--border-default);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.phen-reflex-container.phen-reflex-advanced-on .phen-reflex-advanced-fields {
    display: block;
}

.phen-reflex-field-row {
    margin-bottom: 0.6rem;
}

.phen-reflex-field-row label {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
}

.phen-reflex-pair-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Empty + add */
.phen-reflex-empty,
.phen-reflex-empty-neg {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 6px;
    border: 1px dashed var(--border-default);
    font-style: italic;
}

.phen-reflex-add {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Negotiations log */
.phen-reflex-negotiations {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
    margin-top: 1.25rem;
    border-left: 3px solid var(--color-secondary);
}

.phen-reflex-negotiations h4 {
    margin: 0 0 0.4rem 0;
    color: var(--color-secondary);
}

.phen-reflex-neg-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 0.85rem 0;
    line-height: 1.5;
}

.phen-reflex-neg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.phen-reflex-neg-item {
    background: var(--bg-surface);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--radius-sm, 4px);
    padding: 0.75rem;
}

.phen-reflex-neg-item[data-decision-type="emphasized"] {
    border-left-color: var(--color-success);
}
.phen-reflex-neg-item[data-decision-type="downplayed"] {
    border-left-color: var(--color-warning);
}
.phen-reflex-neg-item[data-decision-type="framework_choice"] {
    border-left-color: var(--color-primary);
}
.phen-reflex-neg-item[data-decision-type="exclusion"] {
    border-left-color: var(--color-danger);
}
.phen-reflex-neg-item[data-decision-type="interpretive_leap"] {
    border-left-color: var(--color-secondary);
}

.phen-reflex-neg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.phen-reflex-neg-type {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.phen-reflex-neg-delete {
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.phen-reflex-neg-body p {
    margin: 0.25rem 0;
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.phen-reflex-neg-body strong {
    color: var(--text-muted);
    margin-right: 0.3rem;
}

/* AI Scaffolding modal disclaimer */
.phen-reflex-ai-disclaimer {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.12));
    border-left: 3px solid var(--color-secondary);
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-secondary);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Citations */
.phen-reflex-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-reflex-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-reflex-citations ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Mobile responsive — stack two-voice + variant bars */
@media (max-width: 760px) {
    .phen-reflex-pair-grid {
        grid-template-columns: 1fr;
    }
    .phen-reflex-variant-bar {
        grid-template-columns: 1.5rem 1fr 2rem;
        grid-template-areas:
            "icon label count"
            "icon track count";
    }
    .phen-reflex-variant-bar-icon { grid-area: icon; }
    .phen-reflex-variant-bar-label { grid-area: label; }
    .phen-reflex-variant-bar-track { grid-area: track; }
    .phen-reflex-variant-bar-count { grid-area: count; }
    .phen-reflex-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .phen-reflex-pair-actions .btn {
        flex: 1;
        min-width: 130px;
        min-height: 44px;
    }
}

/* ============================================================
   Phase 3E PROMPT 14B — Schutz Lifeworld Stratification Mapper
   ============================================================ */

.phen-schutz-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-schutz-header { margin-bottom: 1rem; }

.phen-schutz-title-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.5rem;
}

.phen-schutz-title-row h3 { margin: 0; color: var(--text-primary); }

.phen-schutz-advanced-toggle {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.88rem; color: var(--text-muted); cursor: pointer;
}

.phen-schutz-subtitle {
    color: var(--text-muted); font-size: 0.88rem;
    margin: 0.5rem 0 0 0; line-height: 1.5;
}

.phen-schutz-coverage {
    background: var(--bg-elevated);
    border-radius: 6px; padding: 0.75rem; margin: 1rem 0;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary); font-size: 0.88rem;
}
.phen-schutz-coverage.phen-schutz-stat-ok { border-left-color: var(--color-success); }
.phen-schutz-coverage.phen-schutz-stat-warn { border-left-color: var(--color-warning); }
.phen-schutz-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-schutz-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-schutz-main-grid {
    display: grid; grid-template-columns: 1fr 280px;
    gap: 1rem; margin-bottom: 1rem;
}

.phen-schutz-map {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px); padding: 0.5rem;
}

.phen-schutz-svg { width: 100%; height: auto; max-height: 500px; }
.phen-schutz-zone-circle { cursor: pointer; transition: fill 0.2s; }
.phen-schutz-zone-circle:hover { fill-opacity: 0.4; }
.phen-schutz-zone-label { font-size: 12px; font-weight: 600; pointer-events: none; user-select: none; }
.phen-schutz-dot { cursor: pointer; }
.phen-schutz-dot circle:hover { r: 10; }
.phen-schutz-dot-label {
    font-size: 10px; fill: var(--text-primary);
    pointer-events: none; user-select: none;
}

.phen-schutz-side {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px); padding: 0.85rem;
    overflow-y: auto; max-height: 500px;
}

.phen-schutz-side-empty {
    color: var(--text-muted); font-style: italic;
    text-align: center; padding: 1rem;
}

.phen-schutz-side-detail h4 { margin: 0 0 0.5rem 0; }
.phen-schutz-side-detail p {
    margin: 0.4rem 0; color: var(--text-primary); font-size: 0.88rem;
}

.phen-schutz-list-section {
    margin-top: 1rem; background: var(--bg-elevated);
    border-radius: 6px; padding: 0.5rem 0.85rem;
}
.phen-schutz-list-section summary {
    cursor: pointer; color: var(--text-primary);
    font-weight: 600; padding: 0.3rem 0;
}
.phen-schutz-empty {
    color: var(--text-muted); font-style: italic; padding: 0.5rem 0;
}

.phen-schutz-typifications, .phen-schutz-motives {
    list-style: none; padding: 0; margin: 0.5rem 0 0 0;
    display: grid; gap: 0.5rem;
}

.phen-schutz-typ-item, .phen-schutz-motive-item {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px); padding: 0.6rem; border-left: 3px solid var(--color-primary);
}
.phen-schutz-motive-item[data-motive-type="because"] { border-left-color: var(--color-danger); }
.phen-schutz-motive-item[data-motive-type="in_order_to"] { border-left-color: var(--color-primary); }

.phen-schutz-typ-header {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;
}
.phen-schutz-typ-header strong { color: var(--text-primary); flex: 1; }

.phen-schutz-sed-tag {
    font-size: 0.72rem; padding: 0.1rem 0.4rem;
    border-radius: 3px; color: #fff;
}
.phen-schutz-sed-active { background: var(--color-success); }
.phen-schutz-sed-sedimented { background: var(--text-muted); }

.phen-schutz-typ-delete, .phen-schutz-motive-delete {
    background: transparent; border: 1px solid var(--border-default);
    color: var(--color-danger); border-radius: var(--radius-sm, 4px);
    width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}

.phen-schutz-typ-item p, .phen-schutz-motive-item p {
    margin: 0.25rem 0; color: var(--text-primary); font-size: 0.88rem;
}

.phen-schutz-motive-tag {
    display: inline-block; color: #fff;
    padding: 0.15rem 0.5rem; border-radius: 3px;
    font-size: 0.78rem; margin-bottom: 0.3rem;
}

.phen-schutz-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0;
}

.phen-schutz-citations {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}
.phen-schutz-citations summary {
    cursor: pointer; color: var(--text-muted); font-size: 0.85rem;
}
.phen-schutz-citations ul {
    margin: 0.5rem 0 0 0; padding-left: 1.25rem;
    font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;
}

@media (max-width: 900px) {
    .phen-schutz-main-grid { grid-template-columns: 1fr; }
    .phen-schutz-side { max-height: 280px; }
}

@media (max-width: 600px) {
    .phen-schutz-title-row {
        flex-direction: column; align-items: flex-start;
    }
    .phen-schutz-actions .btn {
        flex: 1; min-width: 130px; min-height: 44px;
    }
}

/* ============================================================
   Phase 3E PROMPT 14C — Berger-Luckmann Dialectic Flow Tracker
   ============================================================ */

.phen-bl-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px); padding: 1.25rem;
}

.phen-bl-header h3 { margin: 0; color: var(--text-primary); }
.phen-bl-subtitle {
    color: var(--text-muted); font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0; line-height: 1.5;
}

.phen-bl-coverage {
    background: var(--bg-elevated);
    border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary); font-size: 0.88rem;
}
.phen-bl-coverage.phen-bl-stat-ok { border-left-color: var(--color-success); }
.phen-bl-coverage.phen-bl-stat-warn { border-left-color: var(--color-warning); }
.phen-bl-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-bl-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-bl-columns {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem; margin-bottom: 1rem;
}

.phen-bl-column {
    background: var(--bg-elevated); border-radius: var(--radius-sm, 8px);
    border-top: 4px solid var(--text-muted);
    display: flex; flex-direction: column; min-height: 400px;
}

.phen-bl-col-header {
    padding: 0.75rem; border-radius: 4px 4px 0 0; color: #fff;
}
.phen-bl-col-header h4 {
    margin: 0; display: inline; font-size: 1rem; margin-left: 0.4rem;
}
.phen-bl-col-icon { font-size: 1.3rem; font-weight: 600; }
.phen-bl-col-header small {
    display: block; margin-top: 0.25rem; opacity: 0.9; font-size: 0.78rem;
}

.phen-bl-col-body {
    flex: 1; padding: 0.5rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    overflow-y: auto; max-height: 600px;
    transition: background 0.2s;
}
.phen-bl-col-body.phen-bl-drop-active {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.1));
}

.phen-bl-empty {
    text-align: center; color: var(--text-muted);
    font-style: italic; padding: 1rem 0.5rem; font-size: 0.85rem;
}

.phen-bl-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px); padding: 0.6rem;
    cursor: grab; transition: opacity 0.2s, border-color 0.2s;
}
.phen-bl-item:active { cursor: grabbing; }
.phen-bl-item.phen-bl-dragging { opacity: 0.4; }

.phen-bl-item-reified {
    border-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.08);
}

.phen-bl-item-header {
    display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem;
}
.phen-bl-reif-icon { color: var(--color-danger); font-size: 1.1rem; }
.phen-bl-soc-tag {
    font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px;
    color: #fff; margin-right: auto;
}
.phen-bl-soc-primary { background: var(--color-secondary); }
.phen-bl-soc-secondary { background: var(--color-primary); }

.phen-bl-item-edit, .phen-bl-item-delete {
    background: transparent; border: 1px solid var(--border-default);
    color: var(--text-muted); border-radius: 3px;
    width: 24px; height: 24px; font-size: 0.85rem; cursor: pointer; line-height: 1;
}
.phen-bl-item-delete { color: var(--color-danger); }
.phen-bl-item-edit:hover { color: var(--text-primary); }

.phen-bl-item-content {
    color: var(--text-primary); margin: 0;
    font-size: 0.88rem; line-height: 1.4;
}
.phen-bl-item-rat { margin-top: 0.4rem; font-size: 0.82rem; }
.phen-bl-item-rat summary { cursor: pointer; color: var(--text-muted); }
.phen-bl-item-rat p {
    margin: 0.3rem 0; color: var(--text-secondary);
}

.phen-bl-reif-note {
    background: rgba(239, 68, 68, 0.15);
    padding: 0.3rem 0.5rem; border-radius: 3px;
    color: var(--color-danger) !important;
}

.phen-bl-evidence em { color: var(--text-secondary); }

.phen-bl-cycles-section, .phen-bl-symbolic {
    background: var(--bg-elevated); border-radius: 6px;
    padding: 0.75rem; margin-bottom: 0.75rem;
}
.phen-bl-cycles-section summary, .phen-bl-symbolic summary {
    cursor: pointer; color: var(--text-primary); font-weight: 600;
}
.phen-bl-cycles-hint {
    color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0;
}

.phen-bl-cycle-list {
    list-style: none; padding: 0; margin: 0.5rem 0;
    display: grid; gap: 0.4rem;
}
.phen-bl-cycle-list li {
    background: var(--bg-surface); padding: 0.5rem;
    border-radius: var(--radius-sm, 4px); border-left: 3px solid var(--color-secondary); position: relative;
}
.phen-bl-cycle-list p {
    margin: 0.3rem 0 0 0; color: var(--text-primary); font-size: 0.85rem;
}
.phen-bl-cycle-delete {
    position: absolute; top: 0.4rem; right: 0.4rem;
    background: transparent; border: none; color: var(--color-danger);
    cursor: pointer; font-size: 1.1rem;
}

.phen-bl-symbolic textarea {
    width: 100%; margin-top: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px); padding: 0.5rem;
    color: var(--text-primary);
}

.phen-bl-actions {
    display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap;
}

.phen-bl-citations {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}
.phen-bl-citations summary {
    cursor: pointer; color: var(--text-muted); font-size: 0.85rem;
}
.phen-bl-citations ul {
    padding-left: 1.25rem; font-size: 0.82rem;
    color: var(--text-muted); line-height: 1.5;
}

@media (max-width: 900px) {
    .phen-bl-columns { grid-template-columns: 1fr; }
    .phen-bl-column { min-height: 250px; }
    .phen-bl-actions .btn {
        flex: 1; min-width: 130px; min-height: 44px;
    }
}

/* ============================================================
   Phase 3E PROMPT 14D — Csordas Embodiment Mode Mapper
   ============================================================ */

.phen-csordas-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px); padding: 1.25rem;
}

.phen-csordas-header h3 { margin: 0; color: var(--text-primary); }
.phen-csordas-subtitle {
    color: var(--text-muted); font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0; line-height: 1.5;
}

.phen-csordas-paradigm {
    background: var(--bg-elevated);
    border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem;
}
.phen-csordas-paradigm summary {
    cursor: pointer; color: var(--text-primary); font-weight: 600;
}
.phen-csordas-paradigm-hint {
    color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0;
}
.phen-csordas-paradigm textarea {
    width: 100%; margin-top: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px); padding: 0.5rem;
    color: var(--text-primary);
}

.phen-csordas-coverage {
    background: var(--bg-elevated);
    border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary); font-size: 0.88rem;
}
.phen-csordas-coverage.phen-csordas-stat-ok { border-left-color: var(--color-success); }
.phen-csordas-coverage.phen-csordas-stat-warn { border-left-color: var(--color-warning); }
.phen-csordas-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-csordas-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-csordas-filters {
    margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.phen-csordas-filter-row {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.phen-csordas-filter-row label {
    color: var(--text-muted); font-size: 0.85rem; min-width: 100px;
}
.phen-csordas-chip {
    background: var(--bg-elevated);
    border: 2px solid var(--border-default);
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem; border-radius: var(--radius-pill, 20px);
    font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.phen-csordas-chip:hover { color: var(--text-primary); }
.phen-csordas-chip-active {
    background: var(--bg-surface);
    color: var(--text-primary); font-weight: 600;
}

.phen-csordas-main-grid {
    display: grid; grid-template-columns: 320px 1fr;
    gap: 1rem; margin-bottom: 1rem;
}

.phen-csordas-body {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px); padding: 1rem; position: relative;
}
.phen-csordas-svg { width: 100%; height: auto; max-height: 500px; }
.phen-csordas-region { transition: fill-opacity 0.2s; }
.phen-csordas-region:hover { fill-opacity: 0.5 !important; }

.phen-csordas-skin-badge {
    position: absolute; top: 1.2rem; right: 1.2rem;
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.2));
    border: 1px solid var(--color-accent); border-radius: var(--radius-sm, 4px);
    padding: 0.3rem 0.6rem; font-size: 0.78rem;
    color: var(--color-accent); cursor: pointer;
}

.phen-csordas-side {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px); padding: 0.85rem;
    overflow-y: auto; max-height: 600px;
}

.phen-csordas-side-filter {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.15));
    padding: 0.4rem 0.6rem; border-radius: var(--radius-sm, 4px);
    margin-bottom: 0.75rem; color: var(--text-primary);
    font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem;
}
.phen-csordas-clear-filter {
    margin-left: auto; background: transparent; border: none;
    color: var(--text-muted); cursor: pointer; font-size: 1.1rem;
}

.phen-csordas-empty {
    color: var(--text-muted); font-style: italic;
    text-align: center; padding: 1rem;
}

.phen-csordas-moment-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.5rem;
}

.phen-csordas-moment-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px); padding: 0.6rem;
}
.phen-csordas-moment-header {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.4rem; flex-wrap: wrap;
}
.phen-csordas-mode-tag, .phen-csordas-aware-tag {
    font-size: 0.72rem; padding: 0.1rem 0.4rem;
    border-radius: 3px; color: #fff;
}
.phen-csordas-aware-pre_objective { background: var(--color-success); }
.phen-csordas-aware-objectified { background: var(--text-muted); }

.phen-csordas-moment-delete, .phen-csordas-essence-delete {
    margin-left: auto; background: transparent;
    border: 1px solid var(--border-default);
    color: var(--color-danger); border-radius: 3px;
    width: 24px; height: 24px; cursor: pointer; font-size: 0.95rem;
}

.phen-csordas-moment-desc {
    margin: 0.3rem 0; color: var(--text-primary);
    font-size: 0.88rem; line-height: 1.4;
}

.phen-csordas-cultural {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.1));
    border-left: 2px solid var(--color-secondary);
    padding: 0.35rem 0.5rem; margin: 0.3rem 0;
    font-size: 0.83rem; color: var(--text-secondary);
    border-radius: 2px;
}

.phen-csordas-tags {
    display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.3rem 0;
}
.phen-csordas-tag {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.72rem;
}

.phen-csordas-rationale { margin-top: 0.4rem; font-size: 0.82rem; }
.phen-csordas-rationale summary { cursor: pointer; color: var(--text-muted); }
.phen-csordas-rationale p {
    margin: 0.3rem 0; color: var(--text-secondary);
}

.phen-csordas-essences-section {
    background: var(--bg-elevated); border-radius: 6px;
    padding: 0.75rem; margin-bottom: 0.75rem;
}
.phen-csordas-essences-section summary {
    cursor: pointer; color: var(--text-primary); font-weight: 600;
}
.phen-csordas-essences-hint {
    color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0;
}

.phen-csordas-essence-list {
    list-style: none; padding: 0; margin: 0.5rem 0;
    display: grid; gap: 0.5rem;
}
.phen-csordas-essence-item {
    background: var(--bg-surface); padding: 0.6rem;
    border-radius: var(--radius-sm, 4px); border-left: 3px solid var(--color-warning); position: relative;
}
.phen-csordas-essence-statement {
    color: var(--text-primary); margin: 0 0 0.4rem 0;
    font-style: italic; font-size: 0.9rem;
}
.phen-csordas-essence-cond {
    background: rgba(245, 158, 11, 0.1);
    padding: 0.35rem 0.5rem; border-radius: 3px;
    color: var(--text-secondary); font-size: 0.82rem;
}

.phen-csordas-actions {
    display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap;
}

.phen-csordas-citations {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}
.phen-csordas-citations summary {
    cursor: pointer; color: var(--text-muted); font-size: 0.85rem;
}
.phen-csordas-citations ul {
    padding-left: 1.25rem; font-size: 0.82rem;
    color: var(--text-muted); line-height: 1.5;
}

.phen-field-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}

@media (max-width: 900px) {
    .phen-csordas-main-grid { grid-template-columns: 1fr; }
    .phen-csordas-body { max-height: 400px; }
    .phen-field-row { grid-template-columns: 1fr; }
    .phen-csordas-actions .btn {
        flex: 1; min-width: 130px; min-height: 44px;
    }
}

/* ============================================================
   Phase 3E PROMPT 14E — Feminist Power Lens Analyzer
   ============================================================ */

.phen-fem-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px); padding: 1.25rem;
}

.phen-fem-header h3 { margin: 0; color: var(--text-primary); }
.phen-fem-subtitle {
    color: var(--text-muted); font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0; line-height: 1.5;
}

.phen-fem-positionality {
    background: var(--bg-elevated); border-radius: 6px;
    padding: 0.75rem; margin-bottom: 1rem; border-left: 3px solid var(--text-muted);
}
.phen-fem-positionality.phen-fem-pos-ok { border-left-color: var(--color-success); }
.phen-fem-positionality.phen-fem-pos-incomplete { border-left-color: var(--color-warning); }
.phen-fem-positionality summary {
    cursor: pointer; color: var(--text-primary); font-weight: 600;
}
.phen-fem-pos-hint {
    color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0;
}

.phen-fem-pos-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem; margin: 0.5rem 0;
}
.phen-fem-pos-row {
    display: flex; align-items: center; gap: 0.4rem;
    background: var(--bg-surface); border-radius: var(--radius-sm, 4px);
    padding: 0.3rem 0.5rem;
}
.phen-fem-pos-row label {
    color: var(--text-muted); font-size: 0.82rem;
    min-width: 70px; text-transform: capitalize;
}
.phen-fem-pos-row input[type="text"] {
    flex: 1; background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 3px; padding: 0.2rem 0.4rem;
    color: var(--text-primary); font-size: 0.85rem;
}

.phen-fem-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-fem-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-fem-coverage {
    background: var(--bg-elevated); border-radius: 6px;
    padding: 0.75rem; margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary); font-size: 0.85rem;
}
.phen-fem-coverage.phen-fem-stat-ok { border-left-color: var(--color-success); }
.phen-fem-coverage.phen-fem-stat-warn { border-left-color: var(--color-warning); }

.phen-fem-axes-filter {
    margin-bottom: 1rem; display: flex; align-items: center;
    gap: 0.4rem; flex-wrap: wrap;
}
.phen-fem-axes-filter label {
    color: var(--text-muted); font-size: 0.85rem; min-width: 130px;
}
.phen-fem-chip {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem; border-radius: var(--radius-pill, 20px);
    font-size: 0.78rem; cursor: pointer; transition: all 0.2s;
}
.phen-fem-chip:hover { color: var(--text-primary); }
.phen-fem-chip-active {
    background: var(--bg-surface);
    color: var(--text-primary); font-weight: 600;
}

.phen-fem-main-grid {
    display: grid; grid-template-columns: 1fr 320px;
    gap: 1rem; margin-bottom: 1rem;
}

.phen-fem-plot {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px); padding: 0.5rem;
}
.phen-fem-svg { width: 100%; height: auto; max-height: 520px; }
.phen-fem-point { cursor: pointer; }
.phen-fem-point circle:hover { r: 10; }

.phen-fem-side {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px); padding: 0.85rem;
    overflow-y: auto; max-height: 520px;
}

.phen-fem-side-empty, .phen-fem-empty {
    color: var(--text-muted); font-style: italic;
    text-align: center; padding: 1rem;
}

.phen-fem-side-detail {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px); padding: 0.6rem; margin-bottom: 0.75rem;
}
.phen-fem-side-detail p {
    margin: 0.3rem 0; color: var(--text-primary); font-size: 0.85rem;
}

.phen-fem-detail-tags {
    display: flex; gap: 0.3rem; margin-bottom: 0.4rem;
}
.phen-fem-tag {
    color: #fff; padding: 0.15rem 0.5rem;
    border-radius: 3px; font-size: 0.78rem;
}
.phen-fem-mini-tag {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    padding: 0.1rem 0.3rem; border-radius: 3px;
    font-size: 0.72rem; margin-right: 0.2rem;
}

.phen-fem-detail-actions {
    margin-top: 0.5rem; display: flex; gap: 0.4rem;
}

.phen-fem-points-list { margin-top: 0.5rem; }
.phen-fem-points-list summary {
    cursor: pointer; color: var(--text-muted); font-size: 0.85rem;
}
.phen-fem-points-list ul {
    list-style: none; padding: 0; margin: 0.5rem 0;
    display: grid; gap: 0.3rem;
}
.phen-fem-point-item {
    background: var(--bg-surface);
    padding: 0.4rem; border-radius: 3px;
    cursor: pointer; color: var(--text-primary);
    font-size: 0.82rem; display: flex; align-items: center; gap: 0.4rem;
}
.phen-fem-point-item:hover { background: var(--border-default); }
.phen-fem-point-selected {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.2)) !important;
    border-left: 3px solid var(--color-primary);
}
.phen-fem-agency-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}

.phen-fem-objs-section {
    background: var(--bg-elevated);
    border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem;
}
.phen-fem-objs-section summary {
    cursor: pointer; color: var(--text-primary); font-weight: 600;
}
.phen-fem-objs-hint {
    color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0;
}
.phen-fem-obj-list {
    list-style: none; padding: 0; margin: 0.5rem 0;
    display: grid; gap: 0.5rem;
}
.phen-fem-obj-item {
    background: var(--bg-surface);
    padding: 0.6rem; border-radius: var(--radius-sm, 4px);
    border-left: 3px solid #ec4899; position: relative;
}
.phen-fem-obj-type-tag {
    background: #ec4899; color: #fff;
    padding: 0.15rem 0.5rem; border-radius: 3px;
    font-size: 0.75rem; display: inline-block; margin-bottom: 0.3rem;
}
.phen-fem-obj-item p {
    color: var(--text-primary); margin: 0.3rem 0; font-size: 0.88rem;
}
.phen-fem-obj-delete {
    position: absolute; top: 0.4rem; right: 0.4rem;
    background: transparent; border: none;
    color: var(--color-danger); cursor: pointer; font-size: 1.1rem;
}

.phen-fem-actions {
    display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap;
}

.phen-fem-citations {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}
.phen-fem-citations summary {
    cursor: pointer; color: var(--text-muted); font-size: 0.85rem;
}
.phen-fem-citations ul {
    padding-left: 1.25rem; font-size: 0.82rem;
    color: var(--text-muted); line-height: 1.5;
}

.phen-fem-axes-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.3rem; margin-top: 0.4rem;
}
.phen-fem-axis-check {
    display: flex; align-items: center; gap: 0.3rem;
    background: var(--bg-surface);
    padding: 0.3rem 0.5rem; border-radius: 3px;
    font-size: 0.85rem; color: var(--text-primary);
    cursor: pointer; text-transform: capitalize;
}
.phen-fem-axis-check:hover { background: var(--border-default); }

.phen-field input[type="range"] { width: 100%; }
.phen-field output {
    display: block; text-align: center;
    color: var(--text-muted); font-size: 0.82rem;
}

@media (max-width: 900px) {
    .phen-fem-main-grid { grid-template-columns: 1fr; }
    .phen-fem-side { max-height: 320px; }
    .phen-fem-pos-grid { grid-template-columns: 1fr; }
    .phen-fem-actions .btn {
        flex: 1; min-width: 130px; min-height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────
   Phase 3F PROMPT 15B — Critical Habitual Map
   ───────────────────────────────────────────────────────── */
.phen-crit-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-crit-header h3 { margin: 0; color: var(--text-primary); }
.phen-crit-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.5;
}

.phen-crit-axes-selection {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.phen-crit-axes-selection h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.phen-crit-axes-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.4rem 0;
}

.phen-crit-axes-group label {
    color: var(--text-muted);
    font-size: 0.82rem;
    min-width: 130px;
    padding-top: 0.25rem;
}

.phen-crit-axes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
}

.phen-crit-axis-chip {
    background: transparent;
    border: 2px solid var(--border-default);
    color: var(--text-secondary);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill, 16px);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}

.phen-crit-axis-active {
    color: var(--text-primary);
    font-weight: 600;
}

.phen-crit-axis-indo {
    border-style: dashed;
}

.phen-crit-coverage {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-crit-stat-ok { border-left-color: var(--color-success); }
.phen-crit-stat-warn { border-left-color: var(--color-warning); }
.phen-crit-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-crit-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-crit-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    margin-bottom: 1rem;
}

.phen-crit-radar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem;
}

.phen-crit-radar-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.phen-crit-svg {
    width: 100%;
    height: auto;
    max-height: 520px;
}

.phen-crit-habit-poly { cursor: pointer; transition: fill-opacity 0.2s; }
.phen-crit-habit-poly:hover { fill-opacity: 0.4 !important; }
.phen-crit-hesitation-star { cursor: pointer; }

.phen-crit-side {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.85rem;
    overflow-y: auto;
    max-height: 520px;
}

.phen-crit-detail {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px);
    padding: 0.6rem;
    margin-bottom: 0.75rem;
}

.phen-crit-detail p {
    margin: 0.3rem 0;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-crit-structural-note {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.15));
    border-left: 2px solid var(--color-secondary);
    padding: 0.4rem 0.5rem;
    border-radius: 2px;
}

.phen-crit-axes-display {
    margin: 0.5rem 0;
}

.phen-crit-axis-intensity-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0;
    font-size: 0.78rem;
}

.phen-crit-axis-intensity-row > span:first-child {
    min-width: 110px;
    font-weight: 600;
}

.phen-crit-bar {
    flex: 1;
    background: var(--bg-elevated);
    border-radius: 3px;
    height: 8px;
    overflow: hidden;
}

.phen-crit-bar-fill {
    height: 100%;
    transition: width 0.3s;
}

.phen-crit-bar-val {
    color: var(--text-muted);
    font-size: 0.72rem;
    min-width: 38px;
}

.phen-crit-detail-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.4rem;
}

.phen-crit-habits-list summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-crit-habits-list ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.3rem;
}

.phen-crit-habit-item {
    background: var(--bg-surface);
    padding: 0.4rem;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.82rem;
}

.phen-crit-habit-item:hover { background: var(--border-default); }
.phen-crit-habit-selected {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.2)) !important;
    border-left: 3px solid var(--color-primary);
}

.phen-crit-hesitations,
.phen-crit-social-death,
.phen-crit-orientations,
.phen-crit-critique {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.phen-crit-hesitations summary,
.phen-crit-social-death summary,
.phen-crit-orientations summary,
.phen-crit-critique summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
}

.phen-crit-hint {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin: 0.4rem 0;
    font-style: italic;
}

.phen-crit-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
}

.phen-crit-hes-list,
.phen-crit-sd-list,
.phen-crit-orient-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.5rem;
}

.phen-crit-hes-item,
.phen-crit-sd-item,
.phen-crit-orient-item {
    background: var(--bg-surface);
    padding: 0.5rem 1.8rem 0.5rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    position: relative;
}

.phen-crit-hes-item { border-left: 3px solid var(--color-warning); }
.phen-crit-sd-item { border-left: 3px solid var(--color-danger); }
.phen-crit-orient-item { border-left: 3px solid var(--color-accent); }

.phen-crit-hes-item p,
.phen-crit-sd-item p,
.phen-crit-orient-item p {
    margin: 0.2rem 0;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-crit-sd-tag {
    display: inline-block;
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.72rem;
    margin-right: 0.4rem;
}

.phen-crit-sd-intensity {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.phen-crit-hes-delete,
.phen-crit-sd-delete,
.phen-crit-orient-delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.phen-crit-critique textarea {
    width: 100%;
    margin-top: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.phen-crit-actions {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.phen-crit-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-crit-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-crit-citations ul {
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.phen-crit-area .phen-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .phen-crit-main-grid { grid-template-columns: 1fr; }
    .phen-crit-side { max-height: 360px; }
    .phen-crit-area .phen-field-grid { grid-template-columns: 1fr; }
    .phen-crit-actions .btn { flex: 1; min-width: 130px; min-height: 44px; }
    .phen-crit-axes-group label { min-width: auto; }
}

/* ─────────────────────────────────────────────────────────
   Phase 3F PROMPT 15C — Existential Bad Faith Detector
   ───────────────────────────────────────────────────────── */
.phen-exist-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-exist-header h3 { margin: 0; color: var(--text-primary); }
.phen-exist-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.5;
}

.phen-exist-situation,
.phen-exist-facticity,
.phen-exist-projects {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.phen-exist-situation { border-left: 3px solid var(--text-muted); }
.phen-exist-situation-ok { border-left-color: var(--color-success); }
.phen-exist-situation-warn { border-left-color: var(--color-warning); }

.phen-exist-situation summary,
.phen-exist-facticity summary,
.phen-exist-projects summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
}

.phen-exist-hint {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin: 0.4rem 0;
    font-style: italic;
}

.phen-exist-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-exist-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-exist-situation textarea {
    width: 100%;
    margin-top: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.phen-exist-coverage {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-exist-stat-ok { border-left-color: var(--color-success); }
.phen-exist-stat-warn { border-left-color: var(--color-warning); }

.phen-exist-fact-list,
.phen-exist-proj-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.4rem;
}

.phen-exist-fact-item,
.phen-exist-proj-item {
    background: var(--bg-surface);
    padding: 0.5rem 1.8rem 0.5rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    position: relative;
}

.phen-exist-fact-item { border-left: 3px solid var(--color-secondary); }
.phen-exist-proj-item { border-left: 3px solid var(--color-accent); }

.phen-exist-fact-cat {
    display: inline-block;
    background: var(--color-secondary);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.72rem;
    margin-bottom: 0.3rem;
}

.phen-exist-fact-item p,
.phen-exist-proj-item p {
    margin: 0.2rem 0;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-exist-fact-delete,
.phen-exist-proj-delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.phen-exist-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
}

.phen-exist-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    margin-bottom: 1rem;
}

.phen-exist-plot {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem;
}

.phen-exist-svg {
    width: 100%;
    height: auto;
    max-height: 520px;
}

.phen-exist-moment { cursor: pointer; }

.phen-exist-side {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.85rem;
    overflow-y: auto;
    max-height: 520px;
}

.phen-exist-detail {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px);
    padding: 0.6rem;
    margin-bottom: 0.75rem;
}

.phen-exist-detail-tag {
    display: inline-block;
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}

.phen-exist-detail p {
    margin: 0.3rem 0;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-exist-bf-note {
    background: rgba(239, 68, 68, 0.15);
    border-left: 2px solid var(--color-danger);
    padding: 0.4rem 0.5rem;
    border-radius: 2px;
}

.phen-exist-look-note {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.15));
    border-left: 2px solid var(--color-secondary);
    padding: 0.4rem 0.5rem;
    border-radius: 2px;
}

.phen-exist-detail-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.4rem;
}

.phen-exist-mom-list summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-exist-mom-list ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.3rem;
}

.phen-exist-mom-item {
    background: var(--bg-surface);
    padding: 0.4rem;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.phen-exist-mom-item:hover { background: var(--border-default); }
.phen-exist-mom-selected {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.2)) !important;
    border-left: 3px solid var(--color-primary);
}

.phen-exist-mom-dot {
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.phen-exist-actions {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.phen-exist-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-exist-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-exist-citations ul {
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.phen-exist-area .phen-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.phen-exist-bf-fields,
.phen-exist-look-fields {
    background: var(--bg-elevated);
    padding: 0.5rem;
    border-radius: var(--radius-sm, 4px);
    margin: 0.4rem 0;
}

.phen-exist-bf-fields { border-left: 2px solid var(--color-danger); }
.phen-exist-look-fields { border-left: 2px solid var(--color-secondary); }

@media (max-width: 900px) {
    .phen-exist-main-grid { grid-template-columns: 1fr; }
    .phen-exist-side { max-height: 360px; }
    .phen-exist-area .phen-field-row { grid-template-columns: 1fr; }
    .phen-exist-actions .btn { flex: 1; min-width: 130px; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────
   Phase 3F PROMPT 15D — Embodied Illness Body Map
   ───────────────────────────────────────────────────────── */
.phen-emb-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-emb-header h3 { margin: 0; color: var(--text-primary); }
.phen-emb-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.5;
}

.phen-emb-baseline,
.phen-emb-adaptations,
.phen-emb-toombs,
.phen-emb-temporal {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.phen-emb-baseline { border-left: 3px solid var(--text-muted); }
.phen-emb-bs-ok { border-left-color: var(--color-success); }
.phen-emb-bs-warn { border-left-color: var(--color-warning); }

.phen-emb-baseline summary,
.phen-emb-adaptations summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
}

.phen-emb-toombs h4,
.phen-emb-temporal h4 {
    margin: 0;
    color: var(--text-primary);
}

.phen-emb-hint {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin: 0.4rem 0;
    font-style: italic;
}

.phen-emb-baseline textarea,
.phen-emb-temporal textarea {
    width: 100%;
    margin-top: 0.3rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.phen-emb-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-emb-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-emb-coverage {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-emb-stat-ok { border-left-color: var(--color-success); }
.phen-emb-stat-warn { border-left-color: var(--color-warning); }

.phen-emb-main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    margin-bottom: 1rem;
}

.phen-emb-body {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem;
}

.phen-emb-svg {
    width: 100%;
    height: auto;
    max-height: 500px;
}

.phen-emb-region { cursor: pointer; transition: fill-opacity 0.2s; }
.phen-emb-region:hover ellipse,
.phen-emb-region:hover path,
.phen-emb-region:hover rect { fill-opacity: 0.5; }

.phen-emb-skin-badge {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: var(--text-primary);
    text-align: center;
    font-size: 0.9rem;
}

.phen-emb-skin-active { background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.3)) !important; }

.phen-emb-side {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.85rem;
    overflow-y: auto;
    max-height: 540px;
}

.phen-emb-side-filter {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.15));
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phen-emb-clear-filter {
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1.1rem;
}

.phen-emb-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
}

.phen-emb-dys-list,
.phen-emb-adapt-list,
.phen-emb-temporal-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.5rem;
}

.phen-emb-dys-item,
.phen-emb-adapt-item,
.phen-emb-temporal-item {
    background: var(--bg-surface);
    padding: 0.5rem 1.8rem 0.5rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border-left: 3px solid var(--text-muted);
    position: relative;
}

.phen-emb-adapt-item { border-left-color: var(--color-success); }

.phen-emb-dys-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.phen-emb-region-tag {
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.72rem;
}

.phen-emb-intensity {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.phen-emb-dys-desc {
    color: var(--text-primary);
    font-size: 0.85rem;
    margin: 0.3rem 0;
}

.phen-emb-dys-delete,
.phen-emb-adapt-delete,
.phen-emb-temporal-delete,
.phen-emb-toombs-delete {
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.phen-emb-temporal-delete,
.phen-emb-adapt-delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
}

.phen-emb-dys-header .phen-emb-dys-delete {
    margin-left: auto;
}

.phen-emb-toombs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

.phen-emb-toombs-svg {
    width: 100%;
    height: auto;
    max-height: 360px;
}

.phen-emb-toombs-list {
    display: grid;
    gap: 0.4rem;
}

.phen-emb-toombs-item {
    background: var(--bg-surface);
    padding: 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border-left: 3px solid var(--text-muted);
}

.phen-emb-toombs-empty { opacity: 0.6; }

.phen-emb-toombs-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phen-emb-toombs-row span {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-left: auto;
}

.phen-emb-toombs-item p {
    color: var(--text-primary);
    font-size: 0.83rem;
    margin: 0.3rem 0 0 0;
}

.phen-emb-toombs-add {
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    margin-left: auto;
}

.phen-emb-temporal-chart {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem;
    margin: 0.5rem 0;
}

.phen-emb-temporal-svg {
    width: 100%;
    height: auto;
    max-height: 200px;
}

.phen-emb-temporal-tag {
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.72rem;
    display: inline-block;
    margin-bottom: 0.3rem;
}

.phen-emb-temporal-item p {
    color: var(--text-primary);
    font-size: 0.85rem;
    margin: 0.3rem 0 0 0;
}

.phen-emb-reembod {
    background: rgba(16, 185, 129, 0.15);
    border-left: 2px solid var(--color-success);
    padding: 0.4rem 0.5rem;
    border-radius: 2px;
    margin: 0.3rem 0;
}

.phen-emb-adapt-item p {
    color: var(--text-primary);
    font-size: 0.85rem;
    margin: 0.3rem 0;
}

.phen-emb-actions {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.phen-emb-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-emb-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-emb-citations ul {
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .phen-emb-main-grid { grid-template-columns: 1fr; }
    .phen-emb-side { max-height: 380px; }
    .phen-emb-toombs-grid { grid-template-columns: 1fr; }
    .phen-emb-actions .btn { flex: 1; min-width: 130px; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────
   Phase 3F PROMPT 15E — Phen of Practice Anecdote Builder (FINAL Tier 4)
   ───────────────────────────────────────────────────────── */
.phen-prac-container {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 8px);
    padding: 1.25rem;
}

.phen-prac-header h3 { margin: 0; color: var(--text-primary); }
.phen-prac-subtitle {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.5;
}

.phen-prac-orientation,
.phen-prac-insights {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--text-muted);
}

.phen-prac-orient-ok { border-left-color: var(--color-success); }
.phen-prac-orient-warn { border-left-color: var(--color-warning); }

.phen-prac-orientation summary,
.phen-prac-insights summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
}

.phen-prac-hint {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin: 0.4rem 0;
    font-style: italic;
}

.phen-prac-orientation textarea,
.phen-prac-pathic textarea {
    width: 100%;
    margin-top: 0.3rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    padding: 0.5rem;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.phen-prac-badge-ok { color: var(--color-success); margin-left: 0.5rem; font-size: 0.82rem; }
.phen-prac-badge-warn { color: var(--color-warning); margin-left: 0.5rem; font-size: 0.82rem; }

.phen-prac-coverage {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.phen-prac-stat-ok { border-left-color: var(--color-success); }
.phen-prac-stat-warn { border-left-color: var(--color-warning); }

.phen-prac-main-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.phen-prac-list-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 0.85rem;
    max-height: 700px;
    overflow-y: auto;
}

.phen-prac-list-panel h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.phen-prac-anec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.phen-prac-anec-item {
    background: var(--bg-surface);
    padding: 0.6rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: var(--text-primary);
    border-left: 3px solid transparent;
}

.phen-prac-anec-item:hover { background: var(--border-default); }
.phen-prac-anec-selected {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.2)) !important;
    border-left-color: var(--color-primary) !important;
}

.phen-prac-anec-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

.phen-prac-workshop {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 8px);
    padding: 1rem;
    max-height: 700px;
    overflow-y: auto;
}

.phen-prac-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.phen-prac-anec-header {
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.phen-prac-anec-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.phen-prac-anec-phenom,
.phen-prac-anec-ctx {
    color: var(--text-primary);
    font-size: 0.88rem;
    margin: 0.4rem 0;
}

.phen-prac-anec-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.phen-prac-versions,
.phen-prac-existentials,
.phen-prac-pathic {
    margin: 1rem 0;
}

.phen-prac-versions h5,
.phen-prac-existentials h5,
.phen-prac-pathic h5 {
    margin: 0 0 0.4rem 0;
    color: var(--text-primary);
}

.phen-prac-version-list {
    display: grid;
    gap: 0.5rem;
}

.phen-prac-version {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px);
    padding: 0.6rem;
    border-left: 3px solid var(--color-accent);
    position: relative;
}

.phen-prac-version-header {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
    padding-right: 1.5rem;
}

.phen-prac-version-header strong {
    color: var(--color-accent);
}

.phen-prac-wc {
    color: var(--text-muted);
}

.phen-prac-version-content {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.phen-prac-version-delete,
.phen-prac-ex-delete,
.phen-prac-insight-delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.phen-prac-existential {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px);
    padding: 0.6rem;
    border-left: 3px solid var(--text-muted);
    margin: 0.3rem 0;
    position: relative;
}

.phen-prac-ex-empty {
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phen-prac-ex-applied p {
    color: var(--text-primary);
    font-size: 0.88rem;
    margin: 0.3rem 0 0 0;
}

.phen-prac-ex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phen-prac-ex-add {
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
}

.phen-prac-insight-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    gap: 0.5rem;
}

.phen-prac-insight-item {
    background: var(--bg-surface);
    border-radius: var(--radius-sm, 4px);
    padding: 0.6rem 1.8rem 0.6rem 0.6rem;
    border-left: 3px solid var(--color-secondary);
    position: relative;
}

.phen-prac-insight-item strong {
    color: var(--color-secondary);
}

.phen-prac-insight-item p {
    color: var(--text-primary);
    font-size: 0.88rem;
    margin: 0.3rem 0 0 0;
}

.phen-prac-actions {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.phen-prac-citations {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
}

.phen-prac-citations summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.phen-prac-citations ul {
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .phen-prac-main-grid { grid-template-columns: 1fr; }
    .phen-prac-list-panel { max-height: 300px; }
    .phen-prac-workshop { max-height: none; }
    .phen-prac-actions .btn { flex: 1; min-width: 130px; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────
   Phase 3G 16B-2 Tier 1 — Accessibility utility
   ───────────────────────────────────────────────────────── */
/* Visually hide content but keep accessible to screen readers.
   Used for <label> elements that label form fields without
   visible text (placeholder + context provide visual cue). */
.phen-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─────────────────────────────────────────────────────────
   Phase 3G Bagian B/C — Phase badge + prerequisite warning
   ───────────────────────────────────────────────────────── */
.phen-step-phase-badge {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    margin-left: 0.35rem;
    border-radius: 9px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.phen-step-phase-badge.phen-step-phase-pre {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.2));
    color: var(--color-primary);
    border: 1px solid var(--c-app-accent-soft, rgba(59, 130, 246, 0.4));
}

.phen-step-phase-badge.phen-step-phase-post {
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.phen-step-phase-badge.phen-step-phase-warn {
    background: rgba(239, 68, 68, 0.22);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.phen-step-prereq-missing .phen-step-name {
    opacity: 0.7;
    font-style: italic;
}

.phen-checkpoint-phase-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-md, 12px);
    font-size: 0.78rem;
    font-weight: 600;
    margin-right: 0.4rem;
}

.phen-checkpoint-phase-chip.phen-step-phase-pre_coding {
    background: var(--c-app-accent-soft, rgba(59, 130, 246, 0.18));
    color: var(--color-primary);
}

.phen-checkpoint-phase-chip.phen-step-phase-post_coding {
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-warning);
}

.phen-checkpoint-prereq-warning {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--color-warning);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin: 0.5rem 0 1rem;
}

.phen-prereq-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.phen-prereq-text {
    flex: 1;
    min-width: 0;
}

.phen-prereq-text strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.phen-prereq-text p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.phen-prereq-action {
    flex-shrink: 0;
    align-self: center;
}

@media (max-width: 720px) {
    .phen-checkpoint-prereq-warning {
        flex-direction: column;
    }
    .phen-prereq-action { width: 100%; }
}

/* ─────────────────────────────────────────────────────────
   Phase 3G Bagian D — Transcript Quote Picker (Tier 4 modules)
   ───────────────────────────────────────────────────────── */
.phen-field-row-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.phen-quote-picker-overlay .phen-quote-picker-modal {
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.phen-quote-picker-modal .phen-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
}

.phen-quote-picker-controls {
    margin-bottom: 0.5rem;
}

.phen-quote-picker-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.phen-quote-picker-filters {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.phen-quote-picker-filter-sel {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary);
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    max-width: 220px;
}

.phen-quote-picker-status {
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 0.4rem 0;
}

.phen-quote-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 50vh;
}

.phen-qp-item {
    border-bottom: 1px solid var(--border-default);
    padding: 0.5rem 0;
}

.phen-qp-label {
    display: flex;
    gap: 0.6rem;
    cursor: pointer;
    align-items: flex-start;
}

.phen-qp-check {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.phen-qp-text {
    flex: 1;
    min-width: 0;
}

.phen-qp-quote {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.phen-qp-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
    font-size: 0.76rem;
}

.phen-qp-informant,
.phen-qp-theme,
.phen-qp-code,
.phen-qp-important {
    color: var(--text-muted);
}

.phen-qp-important {
    color: var(--color-warning);
}

.phen-quote-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.phen-quote-picker-selected-count {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex: 1;
}

@media (max-width: 720px) {
    .phen-quote-picker-modal .phen-modal-body {
        padding: 0.5rem;
    }
    .phen-quote-picker-filters { flex-direction: column; }
    .phen-quote-picker-filter-sel { max-width: 100%; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   Phase 3G Bagian F Opsi A — "Cara kerja Mode A" intro panel
   ───────────────────────────────────────────────────────────── */
.phen-mode-a-intro {
    margin: 12px 0 16px 0;
    border: 1px solid var(--c-app-accent-soft, rgba(6, 182, 212, 0.28));
    border-radius: 10px;
    background: linear-gradient(135deg,
        var(--c-app-accent-soft, rgba(6, 182, 212, 0.08)) 0%,
        var(--c-app-accent-soft, rgba(59, 130, 246, 0.05)) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.phen-mode-a-intro.hidden { display: none; }

.phen-mode-a-intro-content {
    padding: 14px 18px;
}

.phen-mode-a-intro-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.phen-mode-a-intro-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.phen-mode-a-intro-dismiss {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.phen-mode-a-intro-dismiss:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.phen-mode-a-intro-lead {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

.phen-mode-a-intro-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
}
.phen-mode-a-intro-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-primary);
}
.phen-mode-a-intro-list li:first-child {
    border-top: none;
}
.phen-mode-a-intro-list .phen-step-phase-badge {
    flex-shrink: 0;
    margin-top: 1px;
}

.phen-mode-a-intro-foot {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.phen-mode-a-intro-link {
    color: var(--color-secondary);
    text-decoration: underline;
    font-weight: 500;
}
.phen-mode-a-intro-link:hover {
    color: var(--color-primary);
}

@media (max-width: 720px) {
    .phen-mode-a-intro-content { padding: 12px; }
    .phen-mode-a-intro-header h3 { font-size: 15px; }
    .phen-mode-a-intro-lead,
    .phen-mode-a-intro-list li,
    .phen-mode-a-intro-foot { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────
   Phase 3G Bagian F Opsi B — Per-step help button + modal
   ───────────────────────────────────────────────────────────── */
.phen-step-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.12));
    border: 1px solid var(--c-app-accent-soft, rgba(6, 182, 212, 0.3));
    color: var(--color-secondary);
    font-size: 13px;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    transition: background 0.15s, transform 0.15s;
}
.phen-step-help-btn:hover {
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.22));
    transform: scale(1.05);
}
.phen-step-help-btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.phen-step-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.phen-step-help-modal {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-default);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.phen-step-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-default);
}
.phen-step-help-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.phen-step-help-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    line-height: 1;
}
.phen-step-help-close:hover {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-primary);
}

.phen-step-help-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.phen-step-help-step-name {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-secondary);
}

.phen-step-help-phase {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: rgba(148, 163, 184, 0.07);
    border-radius: 6px;
}
.phen-step-help-phase small {
    color: var(--text-muted);
    font-size: 12px;
}

.phen-step-help-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}
.phen-step-help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.phen-step-help-section h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.phen-step-help-section p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
}
.phen-step-help-tip {
    background: rgba(16, 185, 129, 0.06);
    padding: 10px 12px;
    border-radius: 6px;
    border-bottom: none;
}
.phen-step-help-tip h4 { color: var(--color-success); }

.phen-step-help-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .phen-step-help-modal { max-height: 95vh; }
    .phen-step-help-body { padding: 12px 14px; }
}

/* ─────────────────────────────────────────────────────────────
   Phase 3G Bagian F Opsi C — Onboarding tour overlay
   Tooltip: SOLID bg (no transparency) supaya pop dari overlay.
   Theme-aware via body.theme-light selector.
   ───────────────────────────────────────────────────────────── */
.phen-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    pointer-events: auto;
}

.phen-tour-spotlight {
    position: relative;
    z-index: 1101;
    box-shadow:
        0 0 0 4px var(--c-app-accent-soft, rgba(6, 182, 212, 0.65)),
        0 0 0 10000px rgba(0, 0, 0, 0.45);
    border-radius: var(--radius-sm, 8px);
    transition: box-shadow 0.2s ease-out;
}

/* Tooltip needs SOLID bg (no transparency) supaya pop dari overlay.
   Pakai literal slate-800 / #ffffff agar guarantee opaque di kedua tema. */
.phen-tour-tooltip {
    background: var(--bg-card);                     /* slate-800 solid */
    color: var(--txt);                          /* slate-100 */
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    width: 360px;
    max-width: calc(100vw - 24px);
    z-index: 1110;
    overflow: hidden;
}
body.theme-light .phen-tour-tooltip,
body.theme-light .phen-tour-tooltip {
    background: var(--surface-2, #ffffff);   /* solid white */
    color: #0f172a;                          /* slate-900 */
    border: 2px solid var(--color-secondary);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.phen-tour-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 10px;
    background: var(--c-app-accent-soft, rgba(6, 182, 212, 0.12));
    border-bottom: 1px solid var(--c-app-accent-soft, rgba(6, 182, 212, 0.25));
}
.phen-tour-tooltip-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}

.phen-tour-close {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: inherit;
    cursor: pointer;
    font-size: 20px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.7;
}
.phen-tour-close:hover {
    opacity: 1;
    background: rgba(148, 163, 184, 0.15);
}

.phen-tour-tooltip-body {
    padding: 12px 16px;
}
.phen-tour-tooltip-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: inherit;
}

.phen-tour-tooltip-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.05);
}
.phen-tour-progress {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
}
body.theme-light .phen-tour-progress,
body.theme-light .phen-tour-progress {
    color: var(--text-muted);
}
.phen-tour-actions {
    display: flex;
    gap: 6px;
}
.phen-tour-actions .btn-sm {
    padding: 6px 12px;
    font-size: 12.5px;
}

@media (max-width: 720px) {
    .phen-tour-tooltip { width: calc(100vw - 24px); }
}

/* ─────────────────────────────────────────────────────────────
   Phase 3G Bagian C HOTFIX — Hard-block visual state
   Append-only. JANGAN modifikasi existing styles (hindari konflik
   dengan agent CSS retrofit).
   ───────────────────────────────────────────────────────────── */
.phen-checkpoint-card--blocked {
    opacity: 0.78;
}
.phen-checkpoint-card--blocked .phen-checkpoint-output-area,
.phen-checkpoint-card--blocked .phen-checkpoint-reflection-area,
.phen-checkpoint-card--blocked .phen-checkpoint-ai-area {
    position: relative;
}
.phen-checkpoint-card--blocked .phen-checkpoint-output-area::before,
.phen-checkpoint-card--blocked .phen-checkpoint-ai-area::before {
    content: "🔒";
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 16px;
    opacity: 0.6;
    pointer-events: none;
}
.phen-final-output-input--blocked,
.phen-reflection-input--blocked,
textarea.phen-final-output-input--blocked:disabled,
textarea.phen-reflection-input--blocked:disabled {
    background: rgba(148, 163, 184, 0.05);
    color: var(--text-muted, #94a3b8);
    cursor: not-allowed;
    border-color: rgba(148, 163, 184, 0.2);
}
.phen-ai-btn--blocked,
.phen-action-btn--blocked,
button.phen-ai-btn--blocked:disabled,
button.phen-action-btn--blocked:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--bg-elevated, rgba(148, 163, 184, 0.1)) !important;
}
.phen-ai-btn--blocked::before,
.phen-action-btn--blocked::before {
    content: "🔒 ";
}
@media (max-width: 720px) {
    .phen-checkpoint-card--blocked .phen-checkpoint-output-area::before,
    .phen-checkpoint-card--blocked .phen-checkpoint-ai-area::before {
        top: 6px;
        right: 8px;
        font-size: 14px;
    }
}

/* Phase 3G Bagian C HOTFIX Round 2 — Tier-specific module hard-block.
 * Applied by Tier 1/2/3/4 JS modules saat cp.prerequisite_missing === true.
 * Disables custom widgets (matrix grids, dropdowns, sliders, etc.) so user
 * tidak bisa input data sebelum coding di tab Kualitatif selesai. */
.phen-subapproach-blocked {
    position: relative;
}
.phen-subapproach-blocked-banner {
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary, #f1f5f9);
    font-size: 13.5px;
    line-height: 1.5;
}
.phen-input--blocked {
    background: rgba(148, 163, 184, 0.05) !important;
    color: var(--text-muted, #94a3b8) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
/* Override Round-1 phen-action-btn--blocked dengan tweak Round-2:
 * cursor + opacity only, no bg change supaya tidak konflik dengan
 * Round-1 selector .phen-ai-btn--blocked, .phen-action-btn--blocked. */
.phen-subapproach-blocked .phen-action-btn--blocked,
.phen-subapproach-blocked button.phen-action-btn--blocked:disabled {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Dark mode (body.theme-dark) — auto-generated baseline for phen
   Slate-blue surfaces + Risos navy accents. Mirrors theme.js convention.
   ═══════════════════════════════════════════════════════════════════ */

/* Modal shell */
body.theme-dark .phen-modal-dialog,
body.theme-dark .phen-modal,
body.theme-dark .phen-dialog,
body.theme-dark .phen-panel,
body.theme-dark .phen-container {
    background: var(--bg-card);
    color: var(--txt);
    border-color: var(--line);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
}
body.theme-dark .phen-modal-header,
body.theme-dark .phen-header,
body.theme-dark .phen-toolbar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-bottom-color: var(--line);
    color: var(--txt);
}
body.theme-dark .phen-modal-body,
body.theme-dark .phen-body,
body.theme-dark .phen-content {
    background: var(--bg-card);
    color: var(--txt);
}
body.theme-dark .phen-modal-footer,
body.theme-dark .phen-footer {
    background: var(--bg-elev);
    border-top-color: var(--line);
}

/* Headings + text */
body.theme-dark .phen-modal-title,
body.theme-dark .phen-title,
body.theme-dark .phen-heading,
body.theme-dark .phen-section-title,
body.theme-dark .phen-h1,
body.theme-dark .phen-h2,
body.theme-dark .phen-h3 {
    color: var(--txt);
}
body.theme-dark .phen-modal-sub,
body.theme-dark .phen-subtitle,
body.theme-dark .phen-sub,
body.theme-dark .phen-hint,
body.theme-dark .phen-meta,
body.theme-dark .phen-muted,
body.theme-dark .phen-help,
body.theme-dark .phen-caption,
body.theme-dark .phen-label {
    color: #94a3b8;
}

/* Close button */
body.theme-dark .phen-modal-close,
body.theme-dark .phen-close {
    color: #94a3b8;
}
body.theme-dark .phen-modal-close:hover,
body.theme-dark .phen-close:hover {
    background: #334155;
    color: var(--txt);
}

/* Cards + rows + lists */
body.theme-dark .phen-card,
body.theme-dark .phen-row,
body.theme-dark .phen-item,
body.theme-dark .phen-list-item,
body.theme-dark .phen-tile,
body.theme-dark .phen-cell {
    background: var(--bg-elev);
    border-color: var(--line);
    color: var(--txt);
}
body.theme-dark .phen-card:hover,
body.theme-dark .phen-row:hover,
body.theme-dark .phen-item:hover {
    background: var(--bg-card);
    border-color: var(--line);
}
body.theme-dark .phen-list {
    background: transparent;
}

/* Form controls */
body.theme-dark .phen-input,
body.theme-dark .phen-textarea,
body.theme-dark .phen-select,
body.theme-dark .phen-search,
body.theme-dark .phen-field {
    background: var(--bg-elev);
    color: var(--txt);
    border-color: var(--line);
}
body.theme-dark .phen-input::placeholder,
body.theme-dark .phen-textarea::placeholder,
body.theme-dark .phen-search::placeholder {
    color: #64748b;
}
body.theme-dark .phen-input:focus,
body.theme-dark .phen-textarea:focus,
body.theme-dark .phen-select:focus,
body.theme-dark .phen-search:focus {
    border-color: var(--c-app-accent, #1d4ed8);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.22);
}

/* Buttons */
body.theme-dark .phen-btn,
body.theme-dark .phen-button {
    background: var(--bg-card);
    color: var(--txt);
    border-color: var(--line);
}
body.theme-dark .phen-btn:hover,
body.theme-dark .phen-button:hover {
    background: #334155;
    border-color: #64748b;
}
body.theme-dark .phen-btn-primary,
body.theme-dark .phen-button-primary,
body.theme-dark .phen-btn-cta {
    background: var(--c-app-accent, #1d4ed8);
    color: #ffffff;
    border-color: var(--c-app-accent, #1d4ed8);
}
body.theme-dark .phen-btn-primary:hover:not(:disabled),
body.theme-dark .phen-button-primary:hover:not(:disabled),
body.theme-dark .phen-btn-cta:hover:not(:disabled) {
    background: var(--c-app-accent-hover, #1e40af);
    border-color: var(--c-app-accent-hover, #1e40af);
}
body.theme-dark .phen-btn-ghost,
body.theme-dark .phen-btn-secondary {
    background: transparent;
    color: #cbd5e1;
    border-color: var(--line);
}
body.theme-dark .phen-btn-ghost:hover,
body.theme-dark .phen-btn-secondary:hover {
    background: #334155;
    color: var(--txt);
}
body.theme-dark .phen-btn-danger {
    background: var(--bg-card);
    color: #fca5a5;
    border-color: #7f1d1d;
}
body.theme-dark .phen-btn-danger:hover:not(:disabled) {
    background: #450a0a;
    border-color: #b91c1c;
}

/* Tabs / pills */
body.theme-dark .phen-tab,
body.theme-dark .phen-pill,
body.theme-dark .phen-chip {
    background: var(--bg-card);
    color: #cbd5e1;
    border-color: var(--line);
}
body.theme-dark .phen-tab.is-active,
body.theme-dark .phen-tab.active,
body.theme-dark .phen-pill.is-active,
body.theme-dark .phen-chip.is-active {
    background: var(--c-app-accent, #1d4ed8);
    color: #ffffff;
    border-color: var(--c-app-accent, #1d4ed8);
}

/* Empty / loading states */
body.theme-dark .phen-empty,
body.theme-dark .phen-loading,
body.theme-dark .phen-skeleton {
    background: transparent;
    color: #94a3b8;
}

/* Status alerts */
body.theme-dark .phen-alert-info,
body.theme-dark .phen-status-info {
    background: #11203c;
    color: #93c5fd;
    border-color: #1e3a8a;
}
body.theme-dark .phen-alert-success,
body.theme-dark .phen-status-success {
    background: #052e1f;
    color: #6ee7b7;
    border-color: #064e3b;
}
body.theme-dark .phen-alert-warn,
body.theme-dark .phen-alert-warning,
body.theme-dark .phen-status-warn {
    background: #2d2410;
    color: #fde68a;
    border-color: #78350f;
}
body.theme-dark .phen-alert-error,
body.theme-dark .phen-status-error {
    background: #2a1414;
    color: #fca5a5;
    border-color: #7f1d1d;
}

/* Borders + dividers */
body.theme-dark .phen-divider,
body.theme-dark .phen-sep,
body.theme-dark .phen-separator {
    background: var(--line);
    border-color: var(--line);
}

/* Links */
body.theme-dark .phen-link,
body.theme-dark .phen-back-link {
    color: #93c5fd;
}
body.theme-dark .phen-link:hover,
body.theme-dark .phen-back-link:hover {
    color: #bfdbfe;
}

/* Code / pre */
body.theme-dark .phen-code,
body.theme-dark .phen-pre,
body.theme-dark .phen-mono {
    background: var(--bg-elev);
    color: #fca5a5;
    border-color: var(--line);
}