/* ============================================================
   Sausage Labs IVDD Screener — screening.css
   ------------------------------------------------------------
   Per the design handoff, every layout/color rule lives inline
   in the markup (see screening.js `template()`), matching the
   prototype's inline-style vocabulary. This stylesheet holds ONLY
   the pieces that cannot be expressed inline:
     · @keyframes            (animations referenced by inline styles)
     · [data-reveal]         (scroll-reveal transition)
     · .dropcap              (::first-letter drop cap)
   plus the minimal base reset the prototype carried in its <style>.
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:#f2f2f3;}
a{color:#1a1a1a;text-decoration:none;} a:hover{color:#000000;}
input,textarea,button{font-family:inherit;}
input:focus,textarea:focus{outline:none;border-color:var(--acc)!important;}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes logIn{from{opacity:0;transform:translateX(-4px);}to{opacity:1;transform:none;}}
@keyframes growX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes expandDown{from{opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0);}to{opacity:1;transform:none;clip-path:inset(0 0 0 0);}}
@keyframes popIn{0%{opacity:0;transform:scale(0);}70%{transform:scale(1.28);}100%{opacity:1;transform:scale(1);}}

[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
[data-reveal].in{opacity:1;transform:none;}

.dropcap:first-letter{float:left;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:62px;line-height:.8;padding:6px 12px 0 0;color:#111;}

/* flow card area — centered normally; on mobile start just below the fixed progress rail so it can't
   overlap, but high enough that the card fits without scrolling */
.sl-flow-body{display:flex; align-items:center; justify-content:center; padding:34px;}
@media (max-width:560px){ .sl-flow-body{align-items:flex-start; padding-top:96px; padding-bottom:20px;} }

/* Scroll lock for the flow screens (upload / questions / loading / error): there's nothing below to
   scroll to, and locking stops the mobile keyboard (name input) from pushing the card under the fixed
   progress bar and leaving it stuck there when the keyboard closes. The report ("done") is NOT locked,
   so the full report scrolls normally. Toggled from screening.js afterRender(). */
html.sl-lock, body.sl-lock{overflow:hidden;}
@media (max-width:560px){ html.sl-lock, body.sl-lock{position:fixed; inset:0; width:100%; overscroll-behavior:none;} }

/* report on mobile: figures break out to full-width, centered, with text stacked above/below
   (no float/zigzag wrap — too cramped on a phone) */
@media (max-width:560px){
  .sl-report figure{ float:none !important; clear:both !important; width:100% !important; max-width:100% !important; margin:22px auto !important; }
}

/* ============================================================
   Shared site chrome — the marketing top nav + animated Sausage
   logo, ported from index.html/styles.css so the screener keeps
   the same header. Fully namespaced under .sl-sitebar so none of
   these rules touch the app's inline-styled markup below #app.
   ============================================================ */
.sl-sitebar{
  --sl-bg:#ffffff; --sl-ink:#0B0B0B; --sl-muted:#6A6A6A; --sl-line:#E4E4E4;
  --sl-geo:"Jost","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  position:sticky; top:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(22px,5vw,56px);
  background:color-mix(in srgb,#ffffff 90%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sl-line);
  font-family:var(--sl-geo); color:var(--sl-ink);
}
.sl-sitebar .logo{display:inline-flex; align-items:center; gap:13px; text-decoration:none; color:var(--sl-ink);}
.sl-sitebar .logo__fig{height:44px; width:auto; display:block; flex:none; color:var(--sl-ink);}
.sl-sitebar .logo__rule{width:1.5px; height:38px; background:var(--sl-ink); flex:none;}
.sl-sitebar .logo__word{font-family:var(--sl-geo); font-weight:400; text-transform:uppercase; letter-spacing:.07em; font-size:17px; line-height:1.04; color:var(--sl-ink);}
.sl-sitebar .nav{display:flex; align-items:center; gap:clamp(16px,3vw,38px);}
.sl-sitebar .nav a{font-family:var(--sl-geo); text-transform:uppercase; letter-spacing:.08em; font-size:13px; white-space:nowrap; text-decoration:none; color:var(--sl-muted); padding-bottom:2px; border-bottom:1px solid transparent; transition:color .16s ease,border-color .16s ease;}
.sl-sitebar .nav a:hover,.sl-sitebar .nav a:focus-visible{color:var(--sl-ink); border-color:var(--sl-ink); outline:none;}
.sl-sitebar .nav a.active{color:var(--sl-ink); border-color:var(--sl-ink);}
/* language dropdown — a native <select> styled like a nav link (one control, mobile + desktop) */
.sl-sitebar .sl-lang{
  font-family:var(--sl-geo); text-transform:uppercase; letter-spacing:.08em; font-size:13px; line-height:1;
  color:var(--sl-muted); background:transparent; border:none; outline:none; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0 15px 2px 0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'><path d='M1 1.2l3 3 3-3' fill='none' stroke='%236A6A6A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right center;
}
.sl-sitebar .sl-lang:hover{color:var(--sl-ink);}
.sl-sitebar .sl-lang option{color:#0B0B0B; text-transform:none;}
@media (max-width:560px){
  .sl-sitebar{padding:11px 18px; flex-wrap:wrap; row-gap:14px;}   /* logo on row 1, nav wraps to its own row below */
  .sl-sitebar .logo__word{display:none;}
  .sl-sitebar .logo__rule{display:none;}   /* mobile: only the moving keypoints, no divider bar */
  .sl-sitebar .nav{width:100%; justify-content:flex-start; flex-wrap:wrap; gap:18px;}
  .sl-sitebar .nav a{font-size:12px; letter-spacing:.05em;}
  .sl-sitebar .sl-lang{font-size:12px; letter-spacing:.05em;}
}