/* ════════════════════════════════════════════════════════════════════════
   zField_demo.css — a ONE-OFF reskinned input (opt in: zBrush [page, leaf, demo.zField_demo]).
   Proof of how far a zInput reskins purely through your OWN class on the canonical
   surface — here a glowing cyber-terminal field. _zClass: cyber-field lands on the
   field wrapper; the label, the box, the placeholder and the focus glow are all reached
   from there, so it touches NOTHING else on the page. No zOS class is overridden —
   this is the author's own class. Bifrost-only — the terminal prints a plain prompt.
   ════════════════════════════════════════════════════════════════════════ */

/* each field stacks with a clear gap before the next one's label */
.cyber-field { margin-bottom: 1.6rem; }

/* the label — a small uppercase cyan tag sitting right on top of its box */
.cyber-field .zLabel {
    display:        block;
    margin-bottom:  0.15rem;
    color:          #22d3ee;
    font-family:    ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size:      0.72rem;
}

/* the box — black terminal panel ringed and lit in neon cyan */
.cyber-field .zForm-control {
    background:     #020617;
    color:          #22d3ee;
    border:         1px solid #22d3ee;
    border-radius:  0;
    padding:        0.7rem 1rem;
    font-family:    ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.12em;
    box-shadow:     inset 0 0 0 1px rgba(34, 211, 238, 0.2), 0 0 18px rgba(34, 211, 238, 0.35);
    transition:     box-shadow 0.2s ease, border-color 0.2s ease;
}

.cyber-field .zForm-control::placeholder { color: rgba(34, 211, 238, 0.45); }

/* focus — the glow swells */
.cyber-field .zForm-control:focus {
    outline:      none;
    border-color: #67e8f9;
    box-shadow:   0 0 24px rgba(34, 211, 238, 0.6);
}