/* ════════════════════════════════════════════════════════════════════════
   zDate_demo.css — a ONE-OFF reskinned date/time field (opt in: zBrush [page, leaf, demo.zDate_demo]).
   Proof of how far a date/time `zInput` reskins through your OWN class on the canonical
   surface — here a neon-pink picker. _zClass: glow-picker lands on the field wrapper; the box
   is reached as .glow-picker .zForm-control, and the calendar/clock glyph through the native
   ::-webkit-calendar-picker-indicator, retinted in one line via the --zinput-picker-filter
   variable zbase already reads. Scoped to .glow-picker so it touches NOTHING else.
   Bifrost-only — the terminal just asks for a date.
   ════════════════════════════════════════════════════════════════════════ */

/* the var zbase's indicator reads (filter: var(--zinput-picker-filter, …)) — set it on the
   wrapper and it cascades down to the native glyph, retinting it neon pink */
.glow-picker {
    --zinput-picker-filter: invert(70%) sepia(60%) saturate(2200%) hue-rotate(300deg);
    margin-bottom: 1.6rem;
}

/* the label — a small pink tag right on top of its box */
.glow-picker .zLabel {
    display:        block;
    margin-bottom:  0.25rem;
    color:          #f472b6;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size:      0.72rem;
}

/* the box — dark, ringed and lit in neon pink */
.glow-picker .zForm-control {
    background:     #1a0a16;
    color:          #fce7f3;
    border:         1px solid #f472b6;
    border-radius:  10px;
    padding:        0.7rem 1rem;
    box-shadow:     0 0 16px rgba(244, 114, 182, 0.30);
    transition:     box-shadow 0.2s ease, border-color 0.2s ease;
}
.glow-picker .zForm-control:focus {
    outline:      none;
    border-color: #f9a8d4;
    box-shadow:   0 0 24px rgba(244, 114, 182, 0.6);
}