/* MEP Estimate-X shared public UI. Keep page-specific layouts in their own stylesheets. */
:root{
  --navy:#081f46;
  --ink:#102b50;
  --blue:#0868e9;
  --blue-deep:#0759c3;
  --muted:#526c88;
  --line:#d8e4ef;
  --paper:#f7fafd;
  --shadow:0 12px 34px rgba(18,54,88,.085);
  --radius:16px;
}
html{scroll-padding-top:100px}
body{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink)}
button,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* The same brand mark, navigation frame and action treatment across routes. */
.site-header,.tools-site-header{
  width:min(1320px,calc(100% - 80px));height:76px;margin:12px auto 0;
  position:sticky;top:12px;z-index:100;
  border:1px solid #e3ebf3;border-radius:17px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 28px rgba(22,58,95,.085);
  backdrop-filter:blur(10px);
}
.tools-site-header{padding:13px 24px}
.site-header .brand-copy strong,.tools-brand .brand-copy strong{display:flex;align-items:center;font-size:19px;letter-spacing:-.6px;line-height:1}
html[dir=rtl] .site-header .brand-copy strong{font-size:19px}
.site-header .brand-copy strong img,.tools-brand .brand-copy strong img{width:39px;height:42px}
.site-header .brand-copy small,.tools-brand .brand-copy small{font-size:9.8px;letter-spacing:0}
.country-trigger,.tools-country-trigger{min-height:39px;padding:8px 10px;border:1px solid #e4eaf2;border-radius:9px;background:#f7faff}
.tools-language-switch{gap:2px;border:1px solid #e4eaf2;border-radius:9px;padding:3px;background:#f7faff}
.tools-header-cta,.button-primary{border-radius:9px;background:var(--blue);box-shadow:0 6px 16px rgba(8,104,233,.16)}
.tools-header-cta:hover,.button-primary:hover{background:var(--blue-deep)}

/* Ground interactive surfaces in restrained engineering-blue linework. */
.toolcard,.panel,.stats,.content-card,.guide-card,.resource-card{border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:none}
.toolcard,.panel,.content-card,.guide-card{border-radius:var(--radius)}
.toolcard:before{display:none}
.toolcard:hover{transform:translateY(-2px)}
.toolcard.active{border-color:var(--blue);box-shadow:0 8px 24px rgba(8,104,233,.13)}
.panel,.toolcard{background:#fff}
.toolbody{background:#f7fafd}

/* Continuous animated drawing sheet behind the entire tools workspace. */
body:has(.tools-site-header){background:#e7f2fc;isolation:isolate}
body:has(.tools-site-header) .blueprint{
  opacity:1;inset:0;overflow:hidden;
  background:radial-gradient(ellipse at 80% 20%,#92c7e666,transparent 52%),
    linear-gradient(115deg,#f3f9fe 0%,#e6f3fc 45%,#c9e3f5 100%);
  animation:none;
}
body:has(.tools-site-header) .blueprint:before{
  inset:-24%;opacity:.62;filter:none;will-change:transform;
  background:repeating-linear-gradient(0deg,transparent 0 47px,#317bb425 48px 49px),
    repeating-linear-gradient(90deg,transparent 0 47px,#317bb425 48px 49px),
    repeating-linear-gradient(0deg,transparent 0 239px,#1767a137 240px 242px),
    repeating-linear-gradient(90deg,transparent 0 239px,#1767a137 240px 242px);
  transform:rotate(-7deg) scale(1.1);animation:drawing-drift 22s ease-in-out infinite alternate;
}
body:has(.tools-site-header) .blueprint:after{
  inset:-16% -12%;opacity:.78;border:0;clip-path:none;will-change:transform;
  mask-image:linear-gradient(90deg,transparent 18%,#000 65%);
  background:radial-gradient(circle at 80% 24%,transparent 0 148px,#1676b84a 149px 150px,transparent 151px 194px,#1676b832 195px 196px,transparent 197px),
    linear-gradient(34deg,transparent 0 43.5%,#2a7eaf36 43.6% 43.75%,transparent 43.85% 58%,#2a7eaf2f 58.1% 58.25%,transparent 58.35%);
  transform:translate3d(0,0,0);animation:drawing-diagonal 30s ease-in-out infinite alternate;
}
@keyframes drawing-drift{to{transform:translate3d(-42px,24px,0) rotate(-7deg) scale(1.1)}}
@keyframes drawing-diagonal{to{transform:translate3d(34px,-24px,0)}}

body:has(.tools-site-header) .hero{padding:42px 6px 28px;gap:46px;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
body:has(.tools-site-header) .hero:after{display:none}
body:has(.tools-site-header) .hero h1{font-size:clamp(42px,5.2vw,68px);line-height:.98;letter-spacing:-2.6px}
body:has(.tools-site-header) .hero p:not(.eyebrow){font-size:15px;line-height:1.65;margin:18px 0 0;max-width:600px}
body:has(.tools-site-header) .eyebrow{display:flex;align-items:center;gap:12px;color:#135b94;letter-spacing:2.5px}
body:has(.tools-site-header) .eyebrow:before{content:"";width:31px;height:1px;background:#1371b6}
body:has(.tools-site-header) .stats{
  position:relative;overflow:hidden;min-height:255px;padding:25px;border:1px solid #3e83ba;
  border-radius:4px 26px 4px 4px;color:#eef7ff;
  background:linear-gradient(145deg,#0c3e6b,#082c52 67%,#051f3d);
  box-shadow:15px 16px 0 #c4e0f0,0 25px 45px #124c7736;
}
body:has(.tools-site-header) .stats:before{content:"";position:absolute;inset:0;opacity:.7;background:
  repeating-linear-gradient(0deg,transparent 0 33px,#86bfec1c 34px 35px),
  repeating-linear-gradient(90deg,transparent 0 33px,#86bfec1c 34px 35px),
  radial-gradient(circle at 82% 38%,transparent 0 63px,#70baff64 64px 65px,transparent 66px 91px,#70baff46 92px 93px,transparent 94px)}
body:has(.tools-site-header) .stats:after{content:"";position:absolute;left:-35%;top:48%;width:160%;height:1px;background:#9fd4f4bb;box-shadow:0 0 16px 2px #87c9ef;transform:rotate(-17deg);animation:drawing-sweep 7s ease-in-out infinite alternate}
@keyframes drawing-sweep{to{transform:translateY(105px) rotate(-17deg);opacity:.45}}
body:has(.tools-site-header) .stats h2,body:has(.tools-site-header) .stats p,body:has(.tools-site-header) .statgrid{position:relative;z-index:1}
body:has(.tools-site-header) .stats h2{font-size:13px;letter-spacing:.6px;margin:0 0 10px}
body:has(.tools-site-header) .stats p{max-width:270px;color:#bcd8ed;font-size:12px!important;line-height:1.55;margin:0 0 35px}
body:has(.tools-site-header) .statgrid{border-top:1px solid #9ec9e65e;padding-top:15px;gap:0}
body:has(.tools-site-header) .stat{min-height:auto;padding:0 12px;border:0;border-inline-start:1px solid #9ec9e65e;border-radius:0;background:none}
body:has(.tools-site-header) .stat:first-child{padding-inline-start:0;border-inline-start:0}
body:has(.tools-site-header) .stat b{color:#fff;font-size:24px;font-weight:700;letter-spacing:-1px}
html[dir=rtl] body:has(.tools-site-header) .stat b[data-x=langs]{font-size:16px;letter-spacing:0;white-space:nowrap}
body:has(.tools-site-header) .stat span{color:#afd2ec;font-size:10px}
body:has(.tools-site-header) .toolcards{gap:11px;margin-bottom:18px}
body:has(.tools-site-header) .toolcard{min-height:172px;padding:18px 15px;border-radius:4px 16px 4px 4px;background:#ffffffef;box-shadow:0 8px 20px #2c6c9626}
body:has(.tools-site-header) .toolcard:after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:transparent}
body:has(.tools-site-header) .toolcard:hover,body:has(.tools-site-header) .toolcard.active{border-color:#3186c6;background:#f6fbff;box-shadow:0 11px 26px #1766a431}
body:has(.tools-site-header) .toolcard.active:after{background:#0868e9}
body:has(.tools-site-header) .toolcard h3{font-size:14px;line-height:1.25;margin:13px 0 5px}
body:has(.tools-site-header) .toolcard p{font-size:12px;line-height:1.45}
body:has(.tools-site-header) .pill{margin-top:8px}

@media(max-width:1000px){
  .site-header,.tools-site-header{width:calc(100% - 32px);height:68px;margin-top:8px;top:8px}
  .site-header.content-header{height:auto;min-height:68px;padding-bottom:8px}
  .tools-site-header .links{display:none}
  body:has(.tools-site-header) .hero{grid-template-columns:1fr;gap:24px}
}
@media(max-width:760px){
  .site-header,.tools-site-header{width:calc(100% - 24px);height:62px;padding:8px 12px}
  .site-header .brand-copy strong,.tools-brand .brand-copy strong{font-size:18px;letter-spacing:-.6px}
  html[dir=rtl] .site-header .brand-copy strong{font-size:18px}
  .site-header .brand-copy strong img,.tools-brand .brand-copy strong img{width:30px;height:32px}
  .tools-country-trigger{min-height:32px;padding:6px}
  .tools-country-menu{top:74px;inset-inline:12px}
  .tools-mobile-nav{inset-inline:0}
  .toolcard,.panel,.stats,.content-card,.guide-card,.resource-card{backdrop-filter:none}
  .toolcards,.resource-cards{contain:none}
  .toolcard{transform:none!important}
  .toolcard:hover{transform:none}
  body:has(.tools-site-header) .blueprint:before{animation:drawing-drift-mobile 32s ease-in-out infinite alternate;will-change:auto}
  body:has(.tools-site-header) .blueprint:after{animation:none;will-change:auto;opacity:.48}
  body:has(.tools-site-header) .hero{padding:29px 3px 22px;gap:20px}
  body:has(.tools-site-header) .hero h1{font-size:clamp(37px,9vw,48px);line-height:1.04}
  body:has(.tools-site-header) .hero p:not(.eyebrow){font-size:13px;line-height:1.55;margin-top:12px}
  body:has(.tools-site-header) .stats{min-height:180px;padding:17px;box-shadow:7px 8px 0 #c4e0f0}
  body:has(.tools-site-header) .stats p{margin-bottom:17px}
  body:has(.tools-site-header) .stats:after{animation:none;opacity:.4}
  body:has(.tools-site-header) .stat{padding-inline:7px}
  body:has(.tools-site-header) .stat b{font-size:18px}
  body:has(.tools-site-header) .stat span{font-size:9px}
  body:has(.tools-site-header) .toolcards{gap:8px}
  body:has(.tools-site-header) .toolcard{min-height:143px;padding:12px}
  body:has(.tools-site-header) .toolcard p{font-size:12px}
}
@keyframes drawing-drift-mobile{to{transform:translate3d(-18px,12px,0) rotate(-7deg) scale(1.1)}}
@media(max-width:390px){
  .site-header,.tools-site-header{width:calc(100% - 20px);padding-inline:10px}
  .tools-header-actions{gap:3px}
}
@media(prefers-reduced-motion:reduce){
  .toolcard,.button,.tools-header-cta{transition:none}
  body:has(.tools-site-header) .blueprint:before,body:has(.tools-site-header) .blueprint:after,body:has(.tools-site-header) .stats:after{animation:none}
}