/* ========================================================================== LandLens One field kit: the themed select dropdown and date calendar. Same design system as the chat and the EC chooser (LandLens orange #ff6725, Inter Tight display, Inter UI, JetBrains Mono for numbers). Every token is declared locally because the popovers are appended to , outside every app container, and must survive any global CSS. The native control keeps working if ll-field-kit.js never runs; these rules only touch elements the kit itself creates, plus the .svf-native class it stamps on the element it replaces. ========================================================================== */ /* the replaced native control: out of sight, still the source of truth */ .svf-native{ position:absolute!important;width:1px!important;height:1px!important; opacity:0!important;pointer-events:none!important;margin:0!important; padding:0!important;border:0!important;clip:rect(0 0 0 0)!important; } /* -------------------------------------------------------------------------- Triggers: the closed control. Sized to sit exactly where the native 38px field sat, so nothing around it moves. -------------------------------------------------------------------------- */ .svf-trigger{ --k-primary:#ff6725;--k-primary-600:#e55a1c;--k-primary-700:#c2491a; --k-text:#111827;--k-sec:#6b7280;--k-muted:#9ca3af; --k-stroke:#d7dde5;--k-bg-dis:#f4f5f8; display:flex;align-items:center;gap:8px;width:100%;height:38px; padding:0 11px;text-align:left;cursor:pointer; font-family:"Inter","Inter Tight",system-ui,sans-serif; font-size:12.5px;font-weight:400;line-height:1.2;color:var(--k-text); background:#fff;border:1px solid var(--k-stroke);border-radius:10px; box-shadow:none;-webkit-tap-highlight-color:transparent; transition:border-color .15s,box-shadow .15s,background .15s; } .svf-trigger:hover:not(:disabled){border-color:#c3cdd9;} .svf-trigger:focus-visible,.svf-trigger.is-open{ outline:none;border-color:rgba(255,103,37,.55); box-shadow:0 0 0 3px rgba(255,103,37,.15); } .svf-trigger:disabled{background:var(--k-bg-dis);color:var(--k-muted);cursor:not-allowed;} .svf-trigger .svf-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .svf-trigger.is-ph .svf-val{color:var(--k-muted);} .svf-chev{flex:none;display:inline-flex;color:var(--k-sec);transition:transform .18s cubic-bezier(.16,1,.3,1);} .svf-chev svg{width:14px;height:14px;} .svf-trigger:disabled .svf-chev{opacity:.55;} .svf-trigger.is-open .svf-chev{transform:rotate(180deg);color:var(--k-primary-600);} .svf-cal-ic{flex:none;display:inline-flex;color:var(--k-sec);} .svf-cal-ic svg{width:15px;height:15px;} .svf-trigger.is-open .svf-cal-ic{color:var(--k-primary-600);} .svf-trigger.svf-date .svf-val{ font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace; font-size:12px;letter-spacing:.01em; } /* -------------------------------------------------------------------------- Popover shell, shared by the list and the calendar. -------------------------------------------------------------------------- */ .svf-pop{ --k-primary:#ff6725;--k-primary-600:#e55a1c;--k-primary-700:#c2491a; --k-primary-50:#fff7f2;--k-primary-100:#ffe9dd; --k-text:#111827;--k-body:#374151;--k-sec:#6b7280;--k-muted:#9ca3af; --k-bg-2:#f9fafb;--k-bg-3:#f4f5f8;--k-stroke:#e5e7eb;--k-stroke-2:#e3e7ed;--k-stroke-4:#eceff4; --k-grad:linear-gradient(135deg,#ff6725,#e55a1c); position:fixed;z-index:2100000;box-sizing:border-box; background:#fff;border:1px solid var(--k-stroke-2);border-radius:14px; box-shadow:0 18px 48px rgba(17,24,39,.18),0 2px 8px rgba(17,24,39,.06); font-family:"Inter","Inter Tight",system-ui,sans-serif;color:var(--k-body); transform-origin:top center;animation:svfPop .16s cubic-bezier(.16,1,.3,1); -webkit-tap-highlight-color:transparent; } .svf-pop *,.svf-pop *::before,.svf-pop *::after{box-sizing:border-box;} .svf-pop.is-up{transform-origin:bottom center;} @keyframes svfPop{from{opacity:0;transform:translateY(4px) scale(.985);}to{opacity:1;transform:none;}} .svf-grab{display:none;} .svf-sheet-t{display:none;} /* ---------- the option list ---------- */ .svf-pop-list{display:flex;flex-direction:column;max-height:320px;padding:6px;} .svf-search{ flex:none;display:flex;align-items:center;gap:7px;height:34px; margin:0 0 6px;padding:0 9px;background:var(--k-bg-3);border-radius:9px; } .svf-search svg{flex:none;width:14px;height:14px;color:var(--k-muted);} .svf-search input{ flex:1;min-width:0;height:100%;border:none;background:transparent; font-family:inherit;font-size:12.5px;color:var(--k-text); outline:none!important;box-shadow:none!important;padding:0; } .svf-search input::placeholder{color:var(--k-muted);} .svf-count{ flex:none;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px; color:var(--k-muted);background:#fff;border:1px solid var(--k-stroke); border-radius:9999px;padding:2px 7px;line-height:1.4; } .svf-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1px;outline:none;scrollbar-width:thin;scrollbar-color:#dfe4ea transparent;} .svf-list::-webkit-scrollbar{width:8px;} .svf-list::-webkit-scrollbar-thumb{background:#dfe4ea;border-radius:9999px;border:2px solid #fff;} .svf-opt{ display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px; font-size:12.5px;line-height:1.35;color:var(--k-body);cursor:pointer; } .svf-opt .t{flex:1;min-width:0;overflow-wrap:anywhere;} .svf-opt .t b{font-weight:700;color:var(--k-primary-700);} .svf-opt:hover{background:var(--k-primary-50);} .svf-opt.is-kb{background:var(--k-primary-50);box-shadow:inset 0 0 0 1px rgba(255,103,37,.35);} .svf-opt.is-sel{color:var(--k-primary-700);font-weight:600;} .svf-opt.is-sel svg{flex:none;width:14px;height:14px;color:var(--k-primary);} .svf-empty{padding:20px 10px;text-align:center;font-size:12px;color:var(--k-muted);} /* ---------- the calendar ---------- */ .svf-pop-cal{padding:10px;} .svf-cal-h{display:flex;align-items:center;gap:6px;margin-bottom:8px;} .svf-cal-nav{ flex:none;width:30px;height:30px;border:none;border-radius:9px;cursor:pointer; background:var(--k-bg-3);color:var(--k-sec); display:inline-flex;align-items:center;justify-content:center; transition:background .15s,color .15s; } .svf-cal-nav svg{width:14px;height:14px;} .svf-cal-nav:hover:not(:disabled){background:var(--k-primary-100);color:var(--k-primary-600);} .svf-cal-nav:disabled{opacity:.35;cursor:default;} .svf-cal-t{ flex:1;height:30px;border:none;background:transparent;cursor:pointer;border-radius:9px; display:inline-flex;align-items:center;justify-content:center;gap:5px; font-family:"Inter Tight","Inter",system-ui,sans-serif; font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--k-text); transition:background .15s; } .svf-cal-t:hover{background:var(--k-bg-2);} .svf-cal-t .svf-chev svg{width:12px;height:12px;} .svf-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:2px 0 3px;} .svf-cal-dow span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted);text-align:center;} .svf-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;outline:none;border-radius:10px;} .svf-cal-g:focus-visible{box-shadow:0 0 0 2px rgba(255,103,37,.25);} .svf-day{ height:32px;border:none;background:transparent;border-radius:9px;cursor:pointer; font-family:inherit;font-size:12px;color:var(--k-body); font-variant-numeric:tabular-nums;transition:background .12s,color .12s; } .svf-day.is-void{pointer-events:none;} .svf-day:hover:not(:disabled){background:var(--k-primary-50);color:var(--k-primary-700);} .svf-day:disabled{color:#d1d5db;cursor:default;} .svf-day.is-tod{box-shadow:inset 0 0 0 1px rgba(255,103,37,.45);} .svf-day.is-kb{box-shadow:inset 0 0 0 1.5px rgba(255,103,37,.5);} .svf-day.is-sel{background:var(--k-grad);color:#fff;font-weight:600;box-shadow:0 3px 9px rgba(255,103,37,.35);} .svf-cal-mg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:2px 0;} .svf-cal-yg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-height:236px;overflow-y:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin;scrollbar-color:#dfe4ea transparent;} .svf-cal-yg::-webkit-scrollbar{width:8px;} .svf-cal-yg::-webkit-scrollbar-thumb{background:#dfe4ea;border-radius:9999px;border:2px solid #fff;} .svf-cal-m,.svf-cal-y{ height:34px;border:none;border-radius:9px;cursor:pointer;background:var(--k-bg-2); font-family:inherit;font-size:12px;color:var(--k-body); font-variant-numeric:tabular-nums;transition:background .12s,color .12s; } .svf-cal-m:hover:not(:disabled),.svf-cal-y:hover{background:var(--k-primary-50);color:var(--k-primary-700);} .svf-cal-m:disabled{color:#d1d5db;cursor:default;background:transparent;} .svf-cal-m.is-sel,.svf-cal-y.is-sel{background:var(--k-grad);color:#fff;font-weight:600;box-shadow:0 3px 9px rgba(255,103,37,.35);} .svf-cal-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--k-stroke-4);} .svf-cal-hint{font-size:10.5px;color:var(--k-muted);} .svf-cal-today{ border:none;cursor:pointer;border-radius:9999px;padding:6px 12px; font-family:inherit;font-size:11.5px;font-weight:600;color:var(--k-primary-700); background:var(--k-primary-50);transition:background .15s; } .svf-cal-today:hover{background:var(--k-primary-100);} /* -------------------------------------------------------------------------- Small screens: the popover becomes a bottom sheet under its own scrim, which is the one dropdown pattern that never fights the on-screen keyboard. -------------------------------------------------------------------------- */ .svf-scrim{position:fixed;inset:0;z-index:2099000;background:rgba(15,18,20,.45);animation:svfFade .18s ease;} @keyframes svfFade{from{opacity:0;}to{opacity:1;}} .svf-pop.is-sheet{ left:0!important;right:0!important;bottom:0!important;top:auto!important; width:auto!important;max-width:none;border-radius:18px 18px 0 0;border:none; max-height:74dvh;padding-bottom:calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(17,24,39,.25); transform-origin:bottom center;animation:svfSheet .22s cubic-bezier(.16,1,.3,1); } @keyframes svfSheet{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}} .svf-pop.is-sheet .svf-grab{display:block;width:40px;height:4px;border-radius:9999px;background:var(--k-stroke);margin:8px auto 2px;} .svf-pop.is-sheet .svf-sheet-t{ display:block;text-align:center;margin:4px 0 8px; font-family:"Inter Tight","Inter",system-ui,sans-serif; font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--k-text); } .svf-pop-list.is-sheet{max-height:74dvh;padding:6px 12px;} /* 16px stops iOS Safari zooming the page when the search field focuses */ .svf-pop.is-sheet .svf-search input{font-size:16px;} .svf-pop.is-sheet .svf-opt{padding:11px 10px;font-size:13.5px;} .svf-pop.is-sheet.svf-pop-cal{padding:10px 14px;} .svf-pop.is-sheet .svf-day{height:40px;font-size:13px;} .svf-pop.is-sheet .svf-cal-m,.svf-pop.is-sheet .svf-cal-y{height:38px;font-size:13px;} .svf-pop.is-sheet .svf-cal-yg{max-height:none;flex:1;} @media (prefers-reduced-motion:reduce){ .svf-pop,.svf-pop.is-sheet,.svf-scrim{animation:none;} .svf-chev{transition:none;} }