/* ============================================================================
   Work Schedule & Services (.wsf) — Signal design language. Verbatim translation
   of docs/design/my-availability/Work Schedule & Services.dc.html.
   Namespaced .wsf-root; renders IN-SLOT (position:absolute; inset:0) inside the
   App Shell content area. CSS custom-props (tokens) are set from JS in
   compositionComplete (light default + dark). Fonts loaded here because the
   shell only ships Inter and the verbatim markup uses literal font families.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.wsf-root { position: absolute; inset: 0;
    background: var(--bg); color: var(--text); overflow-y: auto; overflow-x: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif; }
.wsf-root * { box-sizing: border-box; }
.wsf-root ::selection { background: #C2CCFB; }

.wsf-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.wsf-scroll::-webkit-scrollbar-thumb { background: var(--border-strong, #cfd4e4); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.wsf-scroll::-webkit-scrollbar-track { background: transparent; }

.wsf-tap { transition: background .14s, border-color .14s, color .14s, filter .14s, transform .14s; }
.wsf-tap:hover { filter: brightness(.98); }
.wsf-lift:hover { transform: translateY(-1px); }
.wsf-sel { appearance: none; -webkit-appearance: none; outline: none; }
.wsf-sel:focus { border-color: var(--brand-400); }
.wsf-in { outline: none; }
.wsf-in:focus { border-color: var(--brand-400); }
@keyframes wsf-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }