/* SupervisorSync — public + sign-in pages: Bricolage Grotesque and a light polish layer.
   Sits on top of the existing page styles (.ssp in the Home views, .ssa in ssp-auth.css);
   it changes type and finish only, not layout or colours. */

.ssp, .ssa {
    --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--font);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html:has(.ssp) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.ssp) { scroll-behavior: auto; } }

/* Headings: Bricolage's display cut, a touch heavier and tighter */
.ssp .ssp-h1, .ssa h1 { font-weight: 800; letter-spacing: -.045em; font-variation-settings: "opsz" 96; }
.ssp .ssp-h2, .ssa h2 { font-weight: 750; letter-spacing: -.035em; font-variation-settings: "opsz" 72; }
.ssp .ssp-h3, .ssa h3 { font-weight: 700; letter-spacing: -.015em; }
.ssp .ssp-lead { letter-spacing: -.005em; }
.ssp .ssp-label, .ssa .ssa-label { letter-spacing: .14em; }
.ssp .ssp-logo, .ssa .ssa-logo { font-weight: 800; letter-spacing: -.03em; }

/* Buttons: softer corners, a small lift on hover */
.ssp .ssp-btn, .ssa .ssa-btn {
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ssp .ssp-btn:hover, .ssa .ssa-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ssp .ssp-btn:active, .ssa .ssa-btn:active:not(:disabled) { transform: translateY(0); }
.ssp .ssp-btn-primary:hover, .ssa .ssa-btn-primary:hover:not(:disabled) { box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .75); }

/* Cards and panels: gentle hover */
.ssp .ssp-problem, .ssp .ssp-step, .ssp .ssp-feature, .ssp .ssp-sec-item,
.ssp .ssp-panel-item, .ssp .ssp-person, .ssp .ssp-agenda-item, .ssp .ssp-scope-card {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ssp .ssp-problem:hover, .ssp .ssp-step:hover, .ssp .ssp-feature:hover, .ssp .ssp-sec-item:hover,
.ssp .ssp-panel-item:hover, .ssp .ssp-person:hover, .ssp .ssp-agenda-item:hover {
    transform: translateY(-2px);
}

/* Links and form fields */
.ssp a, .ssa a { transition: color .15s ease, opacity .15s ease; }
.ssp .ssp-footer-col a:hover { text-decoration: none; opacity: .85; }
.ssa .ssa-input { border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ssp input, .ssp select, .ssp textarea, .ssa input, .ssa select, .ssa textarea { font-family: inherit; }
.ssp ::selection, .ssa ::selection { background: rgba(37, 99, 235, .18); }

/* Numbers line up in stats and tables */
.ssp .ssp-fact strong, .ssp .ssp-kpi strong, .ssp .ssp-score, .ssp .ssp-cand-score { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
    .ssp *, .ssa * { transition: none !important; }
    .ssp .ssp-btn:hover, .ssa .ssa-btn:hover { transform: none; }
}

/* ── Scroll motion (driven by /js/ss-public-motion.js; nothing is hidden without it) ── */
.sx-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.985);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1) var(--sx-delay, 0ms),
                transform .7s cubic-bezier(.22, .61, .36, 1) var(--sx-delay, 0ms);
}
.sx-reveal.sx-in { opacity: 1; transform: none; }
.ssa .ssa-card, .ssa .ssa-pitch { animation: sx-rise .55s cubic-bezier(.22, .61, .36, 1) both; }
.ssa .ssa-card { animation-delay: .06s; }
@keyframes sx-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

.ssp .ssp-hero-inner { will-change: transform; }

.sx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
    background: linear-gradient(90deg, #2563eb, #6366f1);
    transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.sx-top {
    position: fixed; left: 20px; bottom: 22px; z-index: 1500;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .1);
    background: #fff; color: #1d4ed8; font-size: 18px; cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .45);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.sx-top.show { opacity: 1; transform: none; pointer-events: auto; }
.sx-top:hover { transform: translateY(-2px); }
html[data-theme="dark"] .sx-top { background: #0e1830; color: #93c5fd; border-color: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) {
    .sx-reveal { opacity: 1 !important; transform: none !important; }
    .ssa .ssa-card, .ssa .ssa-pitch { animation: none; }
}