/* ============================================================================
 * zen/components/side-panel/side-panel.css
 * ----------------------------------------------------------------------------
 * Narration panel — usually placed next to a grid of cards or a code viewer,
 * with a monospace uppercase tag, a title, a prose description, and an
 * optional list of badges / bullets / embedded code.
 *
 * HTML:
 *   <aside class="zen-side" data-at="70% 40%" data-min-w="360">
 *       <div class="zen-side__tag">COUPLAGE</div>
 *       <h4 class="zen-side__title">Pourquoi packaging &gt; script ?</h4>
 *       <p class="zen-side__body">
 *           <code class="zen-inline">apt-get install teleport</code> est idempotent,
 *           les binaires sont signés, et les upgrades suivent le cycle du système.
 *       </p>
 *       <ul class="zen-side__list">
 *           <li>Idempotence garantie</li>
 *           <li>GPG signé</li>
 *       </ul>
 *   </aside>
 *
 * States: `.a-active` / `.a-past` / `.a-dimmed` via `zen.state.set()`.
 *
 * Legacy alias: `.d-side` (the 3 existing linux modules use this).
 * ============================================================================ */

.zen-side, .d-side {
    position: absolute;
    background: linear-gradient(145deg, #0f1420, #1a2030);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    color: var(--white);
    transition: all 0.5s var(--ease-natural);
}

.zen-side.a-active, .d-side.a-active {
    border-color: var(--cyan);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.20);
}

.zen-side.a-past, .d-side.a-past {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.zen-side.a-dimmed, .d-side.a-dimmed {
    opacity: 0.15;
}

/* Sub-elements ------------------------------------------------------------ */
.zen-side__tag, .d-side .ds-tag {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    font-weight: 700;
}

.zen-side__title, .d-side h4 {
    font-size: 1.05rem;
    margin: 0 0 8px 0;
    color: var(--white);
    font-weight: 700;
}

.zen-side__body, .d-side p {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.zen-side__list, .d-side ul {
    margin: 8px 0 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.55;
    list-style: disc;
}
.zen-side__list li, .d-side ul li { margin: 2px 0; }

/* Variants ---------------------------------------------------------------- */
.zen-side--compact { padding: 10px 12px; font-size: 0.82rem; }
.zen-side--wide    { min-width: 420px; }

/* Role-tinted tag --------------------------------------------------------- */
.zen-side[data-role="auth"]  .zen-side__tag { color: var(--green); }
.zen-side[data-role="proxy"] .zen-side__tag { color: var(--cyan); }
.zen-side[data-role="idp"]   .zen-side__tag { color: var(--violet); }
.zen-side[data-role="agent"] .zen-side__tag { color: var(--orange); }