/* cv-dateinput.css — the shared typed/dropdown/calendar date field (cv-dateinput.js). Colours come from the host page through theme variables: the swipeslide player sets --ss-*, the dashboard sets --text-primary/--bg-panel/--accent. Every fallback is the DARK default, because that is what :root is when no theme attribute is present. */ .cvdi { --cvdi-text: var(--ss-text, var(--text-primary, #f0f0f0)); --cvdi-muted: var(--ss-muted, var(--text-secondary, #888888)); --cvdi-accent: var(--ss-highlight, var(--accent, #6366f1)); --cvdi-surface: var(--ss-card, var(--bg-item, #1a1a1a)); --cvdi-border: var(--ss-border, var(--border, #333333)); --cvdi-panel: var(--ss-bg, var(--bg-panel, #101010)); --cvdi-radius: var(--ss-radius, 14px); display: block; width: 100%; margin-bottom: 14px; color: var(--cvdi-text); } /* ── The typed row: a real text box plus the button that opens the calendar ── */ .cvdi-row { display: flex; align-items: stretch; gap: 8px; } .cvdi-text { flex: 1 1 auto; min-width: 0; min-height: 64px; padding: 16px 18px; border-radius: var(--cvdi-radius); background: var(--cvdi-surface); border: 2px solid var(--cvdi-border); color: var(--cvdi-text); /* 16px+ keeps iOS Safari from zooming the page when the field takes focus. */ font-size: 1.15rem; line-height: 1.5; outline: none; transition: border-color 0.2s, background 0.2s; } .cvdi-text::placeholder { color: var(--cvdi-muted); } .cvdi-text:focus { border-color: var(--cvdi-accent); } /* A finished date that does not parse — said quietly, the field keeps the text. */ .cvdi-text.cvdi-bad { border-color: var(--cr-warn, #e0a800); } .cvdi-open { flex: 0 0 auto; width: 64px; min-height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--cvdi-radius); background: var(--cvdi-surface); border: 2px solid var(--cvdi-border); color: var(--cvdi-text); cursor: pointer; transition: border-color 0.2s, background 0.2s; } .cvdi-open:hover, .cvdi-open:focus-visible { border-color: var(--cvdi-accent); outline: none; } /* ── The day / month / year dropdown row ── */ .cvdi-selects { display: flex; gap: 8px; margin-top: 8px; } /* The button that opens a list. A native