/* Minimal Tailwind-free stylesheet for risks.html & signals.html */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.tracking-tight{letter-spacing:-0.015em}
.leading-relaxed{line-height:1.625}
.text-left{text-align:left}
.underline{text-decoration:underline}
.whitespace-nowrap{white-space:nowrap}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-white{color:#ffffff}
.text-slate-100{color:#f1f5f9}
.text-slate-200{color:#e2e8f0}
.text-slate-300{color:#cbd5e1}
.text-slate-400{color:#94a3b8}
.text-slate-500{color:#64748b}
.bg-slate-950{background-color:#020617}
.bg-slate-900{background-color:#0f172a}
.bg-slate-900\/50{background-color:rgba(15,23,42,0.5)}
.bg-slate-950\/60{background-color:rgba(2,6,23,0.6)}
.border-slate-700{--border-color:#334155;border-color:var(--border-color)}
.border-slate-800{--border-color:#1e293b;border-color:var(--border-color)}
.text-red-400\'{color:#f87171}
.border-red-500\'{border-color:#ef4444}
.border-emerald-500\'{border-color:#10b981}
.border-amber-500\'{border-color:#f59e0b}
.block{display:block}
.inline{display:inline}
.hidden{display:none}
.flex{display:flex}
.inline-block{display:inline-block}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:0.5rem}
.w-full{width:100%}
.w-5{width:1.25rem}
.h-5{height:1.25rem}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.pl-5{padding-left:1.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.border{border-width:1px;border-style:solid;border-color:var(--border-color, currentColor)}
.rounded{border-radius:0.25rem}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.rounded-2xl{border-radius:1rem}
.list-disc{list-style-type:disc}
.flag-title{display:flex;align-items:center;gap:0.5rem}
.year-badge{font-size:.75rem;line-height:1rem;background-color:rgba(148,163,184,.15);color:#cbd5e1;padding:.25rem .5rem;border-radius:.375rem;border:1px solid rgba(148,163,184,.3)}
.chip{display:inline-flex;gap:.25rem;align-items:center;border:1px solid rgba(148,163,184,.3);border-radius:9999px;padding:.125rem .5rem;color:#cbd5e1}
.icon-stroke{color:#fff}
.icon-stroke use, .icon-stroke *{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-fill{color:#fff}
.icon-fill use, .icon-fill *{fill:currentColor}
.grid{display:grid}
.inline-flex{display:inline-flex}
.gap-3{gap:0.75rem}
.gap-6{gap:1.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-16{margin-top:4rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.rounded-full{border-radius:9999px}
.space-y-1 > * + *{margin-top:0.25rem}
.space-y-2 > * + *{margin-top:0.5rem}
.space-y-4 > * + *{margin-top:1rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-amber-400\'{color:#fbbf24}
.text-emerald-400\'}{color:#34d399}
.bg-slate-900\/50{background-color:rgba(15,23,42,0.5)}
.bg-slate-950\/60{background-color:rgba(2,6,23,0.6)}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.bg-slate-900/50{background-color:rgba(15,23,42,0.5)}
.bg-slate-950/60{background-color:rgba(2,6,23,0.6)}
.py-0.5{padding-top:0.125rem;padding-bottom:0.125rem}
.space-y-1 > * + *{margin-top:0.25rem}
.space-y-2 > * + *{margin-top:0.5rem}
.space-y-4 > * + *{margin-top:1rem}
.text-amber-400\'{color:#fbbf24}
.text-emerald-400\'}{color:#34d399}
.text-red-400\'{color:#f87171}

/* === Custom switch for Vendor checklist generator === */
.switch {
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  /* Use currentColor so ON state follows Tailwind text color, eg. text-brand-500 */
  --switch-checked-bg: currentColor;
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all .2s ease-in-out;
}
.switch input { display: none; }
.switch { display: inline-block; }
.switch svg { transition: var(--icon-transition); position: absolute; height: auto; }
.switch .checkmark { width: var(--icon-checkmark-size); color: var(--icon-checkmark-color); transform: scale(0); }
.switch .cross { width: var(--icon-cross-size); color: var(--icon-cross-color); }
.slider {
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: flex;
  align-items: center;
  position: relative;
  transition: var(--switch-transition);
  cursor: pointer;
}
.circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: inherit;
  box-shadow: var(--circle-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
}
.slider::before {
  content: "";
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  transition: var(--effect-transition);
}
.switch input:checked + .slider { background: var(--switch-checked-bg); }
.switch input:checked + .slider .checkmark { transform: scale(1); }
.switch input:checked + .slider .cross { transform: scale(0); }
.switch input:checked + .slider::before {
  left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
}
.switch input:checked + .slider .circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  box-shadow: var(--circle-checked-shadow);
}


/* focus ring */
.menu-btn-bar{display:block;height:2px;width:22px;background:#cbd5e1;margin:3px 0;transition:transform .2s ease,opacity .2s ease}
.menu-dropdown{
  position:absolute;right:1rem;top:100%;margin-top:.5rem;z-index:1000;
  min-width:180px;background:rgba(2,6,23,0.95);backdrop-filter:blur(6px);
  box-shadow:0 10px 25px rgba(0,0,0,0.45);padding:.5rem;border-radius:10px;
}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li a{
  display:block;padding:.5rem .75rem;text-decoration:none;color:#cbd5e1;border:none
}
.menu-list li a:hover{color:#ffffff;background:rgba(148,163,184,0.12)}
@media (min-width:768px){
  .menu-dropdown{right:0}
}


/* Ensure consistent page width regardless of scrollbar */
html { scrollbar-gutter: stable; }

/* stack the bars */
  align-items: center;
  justify-content: center;
  gap: 4px;                 /* space between bars */
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  outline: none;
}
.menu-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(148,163,184,0.7);
}
.menu-btn-bar {
  display: block;
  height: 2px;
  width: 22px;
  background: #cbd5e1; /* slate-300 */
  border-radius: 1px;
}

/* Hamburger menu button and dropdown */
.menu-btn {
  position: relative;       /* anchor point for dropdown */
  height: 40px;
  width: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;                 /* tighter space between bars */
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  outline: none;
}
.menu-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(148,163,184,0.7);
}
.menu-btn-bar {
  display: block;
  height: 2px;
  width: 24px;              /* wider bars */
  background: #cbd5e1;
  border-radius: 1px;
}
.menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;                  /* align under the button */
  margin-top: .5rem;
  z-index: 1000;
  min-width: 180px;
  background: rgba(2,6,23,0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
  padding: .5rem;
  border-radius: 10px;
}



/* Menu wrapper anchors dropdown under the button */
.menu-wrap { position: relative; display: inline-block; }

/* Ensure hamburger bars are the intended width */
.menu-btn .menu-btn-bar { width: 24px !important; }

/* Ensure dropdown sizes to content and not full width */
.menu-dropdown {
  width: auto;
  max-width: 90vw;
  min-width: 180px;
  left: 0;
  right: auto;
}


/* Make hamburger bars wider (25% more than 24px ≈ 30px) */
.menu-btn .menu-btn-bar {
  width: 30px !important;
}


/* Reduce spacing between hamburger bars */
.menu-btn {
  gap: 2px !important;  /* tighter vertical gap */
}


/* Prevent mobile clipping - anchor dropdown to the right edge of the button */
.menu-dropdown {
  left: auto !important;
  right: 0 !important;
  max-width: calc(100vw - 1rem);
}


/* Make dropdown only as wide as needed by its content */
.menu-dropdown {
  min-width: unset !important;
  width: max-content !important;
  max-width: calc(100vw - 1rem) !important;
}


/* Force consistent hamburger color across devices */
.menu-btn { color: #ffffff !important; }              /* sets currentColor */
.menu-btn .menu-btn-bar {
  background: currentColor !important;               /* bars follow button color */
  mix-blend-mode: normal;                            /* avoid OS or browser blending tweaks */
  opacity: 1;
}
/* If a browser applies dark mode adjustments, keep bars white */
@media (prefers-color-scheme: dark) {
  .menu-btn { color: #ffffff !important; }
}


/* Revert hamburger to hard white and opt out of forced darkening */
.menu-btn { color: inherit !important; }
.menu-btn .menu-btn-bar {
  background: #ffffff !important;   /* force pure white */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  forced-color-adjust: none;         /* opt out of auto dark mode adjustments */
}


/* SVG hamburger uses stroke that follows currentColor */
.hamburger-svg { display:inline-block; width:30px; height:24px; color:#ffffff; }
.menu-btn { color:#ffffff; }
.menu-btn .menu-btn-bar { display:none; } /* hide span fallback by default */

/* If SVG fails for any reason, show the spans */
.no-svg .menu-btn .menu-btn-bar { display:block; }

/* Inversion counter class when a browser forces night mode */
.menu-btn .menu-btn-bar.invert-bars { filter: invert(1) hue-rotate(180deg) !important; }
.hamburger-svg.invert-bars { filter: invert(1) hue-rotate(180deg) !important; }