/* Custom select (see public/js/select.js). The closed trigger deliberately matches .input from app.css value for value — same well, same hairline, same 6px radius, same focus ring — so a form with one of these and three native inputs still reads as one row of controls. The open list borrows the search-results treatment: raised card, strong hairline, float shadow, 6px inner padding. Every colour here is a token from app.css. Nothing new is invented. */ .kss { position: relative; display: block; width: 100%; } /* ---------- closed trigger ---------- */ .kss-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px 8px 11px; min-height: 36px; background: var(--well); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-md); font: inherit; font-size: 14px; text-align: left; cursor: pointer; user-select: none; transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease); } .kss-trigger .kss-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kss-trigger .kss-text.is-placeholder { color: var(--faint); } .kss-trigger > .ic { flex: none; color: var(--dim); transition: transform .16s var(--ease), color .14s var(--ease); } .kss-trigger:hover { border-color: rgba(255, 255, 255, .22); } .kss-trigger:hover > .ic { color: var(--text); } /* Ring on keyboard focus and whenever the list is open; a plain mouse click on a closed control should not light up like an error. */ .kss > .kss-trigger:focus { outline: none; } .kss > .kss-trigger:focus-visible, .kss[data-open] > .kss-trigger { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .kss[data-open] > .kss-trigger > .ic { transform: rotate(180deg); color: var(--accent); } .kss-trigger[disabled] { opacity: .45; pointer-events: none; } /* ---------- open list (portalled to , position: fixed) ---------- */ .kss-list { position: fixed; z-index: 90; /* above .modal-overlay (60) and .toast (80) */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 6px; scrollbar-width: thin; } .kss-list[data-open] { animation: kss-in .14s var(--ease) both; } .kss-list[data-side="up"][data-open] { animation-name: kss-in-up; } @keyframes kss-in { from { opacity: 0; transform: translateY(-4px); } } @keyframes kss-in-up { from { opacity: 0; transform: translateY(4px); } } .kss-option { display: flex; align-items: center; gap: 8px; padding: 8px 9px; min-height: 36px; border-radius: var(--r-md); font-size: 13.5px; color: var(--dim); cursor: pointer; user-select: none; transition: background .12s var(--ease), color .12s var(--ease); } .kss-option .kss-tick { flex: none; width: 14px; height: 14px; color: var(--accent); } .kss-option .kss-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kss-option[aria-selected="true"] { color: var(--text); font-weight: 500; } /* Visual focus follows aria-activedescendant, never :hover — a tap on a tablet leaves a stuck hover state that reads as a second selection. */ .kss-option.is-active { background: var(--hover); color: var(--text); } .kss-option.is-active[aria-selected="true"] { background: var(--accent-tint); } .kss-empty { padding: 10px 9px; font-size: 13px; color: var(--faint); } /* ---------- touch ---------- */ @media (pointer: coarse) { .kss-trigger { min-height: 44px; font-size: 16px; } /* 16px: iOS zooms below it */ .kss-option { min-height: 44px; font-size: 15px; padding: 10px 10px; } } /* ---------- phone ---------- */ @media (max-width: 560px) { .kss-list { border-radius: var(--r-lg); } .kss-option { font-size: 15px; } } /* ---------- motion ---------- */ /* Mirrors the blanket rule at the foot of app.css; repeated here so the component is honest on its own, before app.css is even loaded. */ @media (prefers-reduced-motion: reduce) { .kss-list[data-open], .kss-list[data-side="up"][data-open] { animation: none; } .kss-trigger, .kss-trigger > .ic, .kss-option { transition: none; } }