/* ============================================================================
 * zen/components/terminal/terminal.css
 * ----------------------------------------------------------------------------
 * macOS-style terminal panel — used for `tsh`, `tctl`, `kubectl`, and any
 * other CLI demo.
 *
 * Public API (see terminal.md): data-typing (ms/char), data-prompt, standard
 * core attributes (data-at, data-role, data-min-w, data-i18n, …).
 *
 * Structure:
 *   <div class="zen-term" data-at="50% 60%" data-min-w="520" data-min-h="180">
 *       <div class="zen-term__bar">
 *           <span class="zen-term__dot zen-term__dot--r"></span>
 *           <span class="zen-term__dot zen-term__dot--y"></span>
 *           <span class="zen-term__dot zen-term__dot--g"></span>
 *           <span class="zen-term__title">bash — 80×24</span>
 *       </div>
 *       <div class="zen-term__body">
 *           <span class="prompt">$</span> <span class="cmd">tsh login proxy.example.com</span>
 *           <span class="cursor"></span>
 *       </div>
 *   </div>
 *
 * Backwards-compat: `.o-term` (+ `.tbar`, `.tdot`, `.tbody`, `.ttitle`,
 * `.tdot.r|y|g`) legacy class names are mirrored.
 * ============================================================================ */

.zen-term, .o-term {
    background: #0f1219;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: absolute; z-index: 2;
    transition: all var(--d-slow) var(--ease-natural);
    opacity: 0.15;
}

/* State -------------------------------------------------------------------- */
.zen-term.a-active, .o-term.a-active {
    opacity: 1;
    border-color: var(--cyan);
    box-shadow: 0 0 35px rgba(34,211,238,0.15);
}
.zen-term.a-past,   .o-term.a-past   { opacity: 0.35; filter: grayscale(0.4); }
.zen-term.a-dimmed, .o-term.a-dimmed { opacity: 0.12; filter: grayscale(0.8); }

/* Title bar (macOS style) ------------------------------------------------- */
.zen-term__bar, .o-term .tbar {
    background: #1a1f2e; padding: 6px 10px;
    display: flex; gap: 5px; align-items: center;
    border-bottom: 1px solid var(--border);
}
.zen-term__dot, .o-term .tdot {
    width: 8px; height: 8px; border-radius: 50%;
}
.zen-term__dot--r, .o-term .tdot.r { background: #ef4444; }
.zen-term__dot--y, .o-term .tdot.y { background: #fbbf24; }
.zen-term__dot--g, .o-term .tdot.g { background: #00e676; }
.zen-term__title, .o-term .ttitle {
    margin-left: 10px; color: #64748b; font-size: 0.78rem;
    font-family: 'Courier New', monospace;
}

/* Body -------------------------------------------------------------------- */
.zen-term__body, .o-term .tbody {
    padding: 12px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem; line-height: 1.75;
    color: #94a3b8; flex: 1; overflow: hidden;
    white-space: pre-wrap;
}

/* Semantic classes reused inside the body */
.zen-term .prompt, .o-term .prompt { color: var(--green); }
.zen-term .cmd,    .o-term .cmd    { color: var(--cyan); }
.zen-term .ok,     .o-term .ok     { color: var(--green); }
.zen-term .warn,   .o-term .warn   { color: var(--yellow); }
.zen-term .fail,   .o-term .fail   { color: var(--red); }
.zen-term .muted,  .o-term .muted  { color: #64748b; }

/* Blinking cursor --------------------------------------------------------- */
.zen-term .cursor, .o-term .cursor {
    display: inline-block; width: 8px; height: 14px;
    background: var(--cyan); vertical-align: middle;
    margin-left: 2px; animation: zen-term-blink 1s step-end infinite;
}
@keyframes zen-term-blink { 50% { opacity: 0; } }
/* Legacy alias for existing modules */
@keyframes oblink         { 50% { opacity: 0; } }

/* ===== Variants =========================================================== */

/* Compact — reduced padding, smaller type (fits in corner panels) */
.zen-term--compact, .o-term--compact {
    border-radius: var(--r-md);
}
.zen-term--compact .zen-term__body, .o-term--compact .tbody {
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1.55;
}
.zen-term--compact .zen-term__bar, .o-term--compact .tbar { padding: 4px 8px; }

/* Embedded — no title bar, for inline snippets inside a scope */
.zen-term--embedded .zen-term__bar, .o-term--embedded .tbar { display: none; }
.zen-term--embedded, .o-term--embedded { border-radius: var(--r-md); }