/* ============================================================================
 * zen/components/code-viewer/code-viewer.css
 * ----------------------------------------------------------------------------
 * Syntax-highlighted code panel with line-by-line section reveal. Used to
 * walk through YAML/HCL/JSON/bash config step by step while explaining what
 * each section does in a side panel.
 *
 * Public API (see code-viewer.md): data-sec (on each line to group it into a
 * section), plus the standard core attributes (data-at, data-min-w, …).
 *
 * Structure:
 *   <div class="zen-code" data-at="32% 50%" data-min-w="520">
 *       <div class="zen-code__line cl" data-sec="header">apiVersion: v1</div>
 *       <div class="zen-code__line cl" data-sec="header">kind: Role</div>
 *       <div class="zen-code__line cl" data-sec="metadata">metadata:</div>
 *       <div class="zen-code__line cl" data-sec="metadata">  name: dev-access</div>
 *       <div class="zen-code__line cl" data-sec="spec">spec:</div>
 *       <div class="zen-code__line cl" data-sec="spec">  allow: {…}</div>
 *   </div>
 *
 * Backwards-compat: `.d-code` + `.cl` legacy class names are mirrored.
 * ============================================================================ */

.zen-code, .d-code {
    position: absolute;
    background: #0a0e14;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    padding: 12px 16px;
    color: #d1d5db;
    overflow: hidden;
    transition: all var(--d-slow) var(--ease-natural);
    z-index: 2;
}

/* Whole-panel state (active/past/dimmed apply same opacity rules as box) -- */
.zen-code.a-active, .d-code.a-active { opacity: 1; border-color: var(--cyan); box-shadow: 0 0 25px rgba(34,211,238,0.15); }
.zen-code.a-past,   .d-code.a-past   { opacity: 0.35; filter: grayscale(0.4); }
.zen-code.a-dimmed, .d-code.a-dimmed { opacity: 0.12; filter: grayscale(0.8); }

/* Lines -------------------------------------------------------------------- */
.zen-code__line, .zen-code .cl,
.d-code .cl {
    display: block;
    padding: 1px 8px;
    margin: 0 -8px;
    border-left: 2px solid transparent;
    transition: all 0.4s;
    opacity: 0.35;
    white-space: pre;
}
.zen-code__line.a-active, .zen-code .cl.a-active,
.d-code .cl.a-active {
    opacity: 1;
    background: rgba(56, 189, 248, 0.08);
    border-left-color: var(--cyan);
}
.zen-code__line.a-past, .zen-code .cl.a-past,
.d-code .cl.a-past { opacity: 0.75; }
.zen-code__line.a-dimmed, .zen-code .cl.a-dimmed,
.d-code .cl.a-dimmed { opacity: 0.15; }

/* Syntax colors (One Dark inspired) --------------------------------------- */
.zen-code .k, .d-code .k { color: #c792ea; }  /* keyword */
.zen-code .s, .d-code .s { color: #c3e88d; }  /* string */
.zen-code .c, .d-code .c { color: #546e7a; font-style: italic; }  /* comment */
.zen-code .n, .d-code .n { color: #f07178; }  /* number/value */
.zen-code .p, .d-code .p { color: #82aaff; }  /* property */
.zen-code .v, .d-code .v { color: #ffcb6b; }  /* variable */

/* Header strip (filename) ------------------------------------------------- */
.zen-code__header, .d-code__header {
    display: flex; align-items: center; gap: 8px;
    margin: -12px -16px 10px;
    padding: 8px 14px;
    background: #141923;
    border-bottom: 1px solid var(--border);
    color: #9ca3af;
    font-size: 0.75rem;
    font-family: 'SF Mono', monospace;
}
.zen-code__header::before, .d-code__header::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cyan);
}

/* ===== Variants =========================================================== */
.zen-code--compact, .d-code--compact {
    font-size: 0.72rem;
    padding: 8px 10px;
}
.zen-code--compact .zen-code__line, .zen-code--compact .cl,
.d-code--compact .cl { padding: 0 6px; margin: 0 -6px; }