/* Custom select — shared by dashboard.html and signup.html. * * The open list of a native stays in the DOM as the source of truth * (see select.js) — every existing .value read, change listener and * JS-populated option keeps working, and if the script never runs the native * control is still there and usable. * * Pair with select.js. Load AFTER the page's own styles. * * PORTABILITY * The dashboard has a full palette; the auth pages define far fewer tokens. * Every var() here therefore carries a fallback, so this file works on any * page without needing the dashboard's tokens defined. * * SIZING * The trigger has to look like the field it replaced, and those differ per * page (the dashboard's inputs are larger than signup's). Rather than * hardcoding either, size comes from --cs-* variables; a page overrides them * to match its own inputs. Defaults below match the dashboard's .form-input. */ .cs { position: relative; width: 100%; /* Override these to match the page's own input styling. */ --cs-radius: 8px; --cs-pad-y: 12px; --cs-pad-x: 16px; --cs-font: 1rem; } /* The native control: kept for its value/API, hidden from view and from the a11y tree (select.js sets aria-hidden + tabindex="-1"). */ .cs-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; } .cs-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; /* space-between keeps the label off the chevron, so unlike the native control this needs no extra right padding. */ padding: var(--cs-pad-y) var(--cs-pad-x); border: 1px solid var(--border-color, #cbd5e1); border-radius: var(--cs-radius); background: var(--field-bg, #fff); color: var(--text-main, #0f172a); font-size: var(--cs-font); font-family: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-mid, 0.25s) var(--ease, ease), box-shadow var(--dur-mid, 0.25s) var(--ease, ease), transform var(--dur-fast, 0.15s) var(--ease, ease); } .cs-trigger:hover:not(:disabled) { border-color: var(--border-hover, #94a3b8); } .cs-trigger:active:not(:disabled) { transform: scale(var(--press, 0.97)); transition-duration: 0.06s; } .cs-trigger:disabled { opacity: 0.6; cursor: not-allowed; } .cs.open .cs-trigger, .cs-trigger:focus-visible { outline: none; border-color: var(--accent-primary, var(--accent, #0ea5e9)); box-shadow: 0 0 0 3px var(--info-bg, rgba(14, 165, 233, 0.16)); } .cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-label.is-placeholder { color: var(--text-muted, #94a3b8); } .cs-chevron { flex-shrink: 0; color: var(--text-muted, #64748b); transition: transform var(--dur-mid, 0.25s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), color var(--dur-mid, 0.25s) var(--ease, ease); } .cs-trigger:hover .cs-chevron { color: var(--accent-primary, var(--accent, #0ea5e9)); } .cs.open .cs-chevron { transform: rotate(180deg); color: var(--accent-primary, var(--accent, #0ea5e9)); } /* Lives on , not inside .cs: ancestors set overflow:hidden (they need it to round off their own corners), which clipped the panel. Fixed positioning to the trigger is the only way it can't be cut off. */ .cs-panel { position: fixed; z-index: 200; max-height: 264px; overflow-y: auto; padding: 6px; background: var(--bg-surface, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; box-shadow: var(--shadow-lg, 0 16px 34px -6px rgba(15, 23, 42, 0.18)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform-origin: top center; transform: translateY(-6px) scale(0.96); transition: opacity var(--dur-mid, 0.25s) var(--ease, ease), transform var(--dur-mid, 0.25s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), visibility var(--dur-mid, 0.25s); } /* Flipped when there isn't room below. */ .cs-panel.drop-up { transform-origin: bottom center; } .cs-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .cs-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--text-main, #0f172a); cursor: pointer; transition: background var(--dur-fast, 0.15s) var(--ease, ease), color var(--dur-fast, 0.15s) var(--ease, ease), padding-left var(--dur-fast, 0.15s) var(--ease, ease); } /* .active follows the keyboard; :hover follows the pointer. */ .cs-option.active, .cs-option:hover { background: color-mix(in srgb, var(--accent-primary, var(--accent, #0ea5e9)) 12%, transparent); padding-left: 16px; } .cs-option[aria-selected="true"] { color: var(--nav-active-text, var(--accent, #0284c7)); font-weight: 600; } .cs-option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .cs-check { margin-left: auto; flex-shrink: 0; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast, 0.15s) var(--ease, ease), transform var(--dur-fast, 0.15s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } .cs-option[aria-selected="true"] .cs-check { opacity: 1; transform: scale(1); } .cs-group-label { padding: 10px 12px 6px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.06em; } .cs-empty { padding: 14px 12px; font-size: 0.85rem; color: var(--text-muted, #64748b); text-align: center; } @media (prefers-reduced-motion: reduce) { .cs-panel, .cs-chevron, .cs-option, .cs-check, .cs-trigger { transition: none; } .cs.open .cs-chevron { transform: none; } }