/* ============================================================================
 * zen/components/panel/panel.css
 * ----------------------------------------------------------------------------
 * Generic rectangular panel — a flexible container used for split-screen
 * compares, fallback boxes, decision blocks, or any grouped content that
 * doesn't fit a more specific component (side-panel, code, terminal).
 *
 * HTML:
 *   <div class="zen-panel">
 *       <div class="zen-panel__tag">UI</div>
 *       <div class="zen-panel__body">…</div>
 *   </div>
 *
 *   <div class="zen-panel zen-panel--compare">…</div>
 *
 * Legacy alias: `.d-split-pane` + `.sp-tag` (with .ui / .iac variants).
 * ============================================================================ */

.zen-panel, .d-split-pane {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0.6;
    transition: all 0.5s var(--ease-natural);
}

.zen-panel.a-active, .d-split-pane.a-active {
    opacity: 1;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

.zen-panel.a-past, .d-split-pane.a-past {
    opacity: 0.5;
    filter: grayscale(0.4);
}

.zen-panel.a-dimmed, .d-split-pane.a-dimmed {
    opacity: 0.2;
}

/* Sub-elements ------------------------------------------------------------ */
.zen-panel__tag, .d-split-pane .sp-tag {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--gray);
}

.zen-panel__title { font-size: 1rem; font-weight: 700; color: var(--white); }

.zen-panel__body  { font-size: 0.85rem; color: var(--gray); line-height: 1.5; }

/* Variants by intent ------------------------------------------------------ */
.zen-panel--decision  { border-color: var(--cyan);     }
.zen-panel--decision.a-active .zen-panel__tag { color: var(--cyan); }

.zen-panel--fallback  { border-color: var(--yellow);   }
.zen-panel--fallback .zen-panel__tag { color: var(--yellow); }

.zen-panel--good      { border-color: var(--green);    }
.zen-panel--good .zen-panel__tag { color: var(--green); }

.zen-panel--bad       { border-color: var(--red);      }
.zen-panel--bad .zen-panel__tag { color: var(--red); }

.zen-panel--compare   { border-style: dashed; }

/* Legacy split-pane variants ---------------------------------------------- */
.d-split-pane.ui   { border-color: rgba(251, 191, 36, 0.5); }
.d-split-pane.ui .sp-tag { color: var(--yellow); }

.d-split-pane.iac  { border-color: rgba(0, 230, 118, 0.5); }
.d-split-pane.iac .sp-tag { color: var(--green); }

/* Split container — 2-column grid ----------------------------------------- */
.zen-split, .d-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}